/* ============
  Theme
=========== */
:root{
  --bg:#0b0a0f;
  --surface:#14121a;
  --text:#f9f7fb;
  --muted:#cfc6da;
  --brand1:#b71a45;   /* deep maroon/rose */
  --brand2:#f59e0b;   /* saffron/gold */
  --brand3:#ffd166;   /* soft gold */
  --accent:#7c3aed;   /* royal violet */
  --glass:rgba(255,255,255,.06);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth;background:radial-gradient(1200px 800px at 10% 10%, rgba(124,58,237,.25), transparent), var(--bg); color:var(--text); font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";}
img{max-width:100%;display:block;object-fit:cover}
.container{width:min(1200px,92vw);margin-inline:auto}
.section{padding:100px 0; position:relative; overflow:hidden}
.center{text-align:center}
.title{font:700 clamp(2rem,5vw,4rem)/1.05 "Playfair Display",serif; letter-spacing:.3px; margin:0 0 10px}
.subtitle{font-size:clamp(1rem,2.5vw,1.15rem); color:var(--muted); margin:0 0 24px}
.section-title{font:700 clamp(1.6rem,3vw,2.2rem)/1.15 "Playfair Display",serif; margin:0 0 18px}
.lead{font-size:1.05rem; color:var(--muted)}

.grad{background:linear-gradient(135deg,var(--brand2),var(--brand3)); -webkit-background-clip:text; background-clip:text; color:transparent}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:16px; border:1px solid transparent; text-decoration:none; color:var(--text); transition:.25s transform, .25s box-shadow, .25s background; box-shadow:var(--shadow);}
.btn-primary{background:linear-gradient(135deg,var(--brand1),var(--brand2));}
.btn-ghost{background:transparent; border-color:var(--glass)}
.btn:hover{transform:translateY(-2px) scale(1.01)}
.btn.big{padding:14px 22px; font-weight:600}

.badge{padding:8px 12px; background:var(--glass); border:1px solid rgba(255,255,255,.08); border-radius:999px; font-size:.85rem}

/* Decorations */
.float-deco{position:fixed; inset:auto auto 10% -5%; width:280px; height:280px; background:radial-gradient(circle at 30% 30%, rgba(245,158,11,.25), transparent 60%), radial-gradient(circle at 70% 70%, rgba(183,26,69,.25), transparent 60%); filter:blur(40px); z-index:-1; animation:drift 18s ease-in-out infinite alternate}
.deco-2{left:auto; right:-5%; bottom:20%; animation-delay:2s}
.deco-3{left:30%; bottom:-10%; animation-delay:4s}
@keyframes drift{from{transform:translateY(0)} to{transform:translateY(-40px)}}

/* Header */
.header{position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(11,10,15,.85), rgba(11,10,15,.35)); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid rgba(255,255,255,.05)}
.nav-container{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none}
.brand-logo{width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.2)}
.brand-title{font-weight:700}
.brand-sub{font-size:.8rem; color:var(--muted)}

.nav{display:flex; gap:18px; align-items:center}
.nav-link{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:12px; transition:.2s background,.2s color}
.nav-link:hover{background:var(--glass); color:var(--text)}
.nav-link.highlight{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06)}

.hamburger{display:none; width:42px;height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:var(--glass); position:relative}
.hamburger span{position:absolute; left:10px; right:10px; height:2px; background:#fff; border-radius:2px; transition:.25s}
.hamburger span:nth-child(1){top:12px}
.hamburger span:nth-child(2){top:20px}
.hamburger span:nth-child(3){top:28px}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width: 900px){
  .nav{position:fixed; inset:64px 12px auto; display:flex; flex-direction:column; background:rgba(20,18,26,.98); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:12px; opacity:0; pointer-events:none; transform:translateY(-8px); transition:.25s}
  .nav.show{opacity:1; pointer-events:auto; transform:translateY(0)}
  .hamburger{display:inline-block}
}

/* Hero */
.hero{padding-top:40px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.hero-card{position:relative; border-radius:28px; overflow:visible; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow:var(--shadow)}
.hero-img{aspect-ratio: 4/5; width:100%;}
.shine{position:absolute; inset:0; background:linear-gradient(120deg, transparent, rgba(255,255,255,.15), transparent); transform:translateX(-100%); animation:shine 4s ease-in-out infinite}
@keyframes shine{ 50%{ transform:translateX(100%)} 100%{ transform:translateX(100%)} }
.hero-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.ribbon {
  position: absolute; /* instead of absolute */
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px; /* give some spacing */
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--brand2), var(--brand3));
  color: #3a2500;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(245, 158, 11, .45);
  text-decoration: none;
  z-index: 99999; /* very high */
}
.floaty{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-6px)}}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
}
.about-highlight {
  margin-top: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand2); /* matches your theme */
  text-align: center;
  background: linear-gradient(135deg, var(--brand2), var(--brand3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* gradient text */
}
/* Two column generic */
.container.two-col {
  display: flex;
  align-items: flex-start;  /* align at the top */
  gap: 2rem;                /* space between left & right */
}

.about-media {
  flex: 1;
  text-align: center;
}

.about-media img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.about-highlight {
  margin-top: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand2);
}

.about-content {
  flex: 2; /* give more space for the long text */
}

.about-content h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--brand2);
}

.about-content p {
  line-height: 1.6;
  font-size: 1rem;
  color: #333;
}
@media (max-width: 768px) {
  .container.two-col {
    flex-direction: column;
    text-align: center;
  }

  .about-content {
    margin-top: 20px;
  }
}


/* Ticks */
.ticks{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px}
.ticks li{position:relative; padding-left:28px; color:var(--muted)}
.ticks li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--brand3)}

/* Slider */
.slider-wrap{position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; margin-top:16px}
.slider-wrap.thin{grid-template-columns:auto 1fr auto}
.slider{display:grid; grid-auto-flow:column; gap:16px; overflow:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:8px}
.slider::-webkit-scrollbar{display:none}
.slider.tall .card img{aspect-ratio: 16/9}
.card{min-width: clamp(260px, 42vw, 360px); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); scroll-snap-align:start; transform:translateZ(0)}
.card img{height:220px; width:100%; object-fit:cover}
.card-body{padding:16px}
.card h3{margin:0 0 8px}
.card p{margin:0 0 12px; color:var(--muted)}
.card.pop{animation:pop-in .6s ease both}
@keyframes pop-in{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}}

.slider-btn{width:42px; height:42px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.1); display:inline-grid; place-items:center; cursor:pointer; box-shadow:var(--shadow)}
.slider-btn:hover{transform:translateY(-2px)}

/* Offer */
.offer{background:linear-gradient(180deg, rgba(183,26,69,.25), transparent)}
.offer-grid{display:grid; grid-template-columns:1fr .9fr; gap:40px; align-items:center}
.price-tag{display:inline-grid; place-items:center; padding:12px 18px; border-radius:16px; background:linear-gradient(135deg, rgba(245,158,11,.15), rgba(255,209,102,.12)); border:1px solid rgba(245,158,11,.35); margin:14px 0 22px}
.price-tag strong{font:800 2rem/1 "Playfair Display",serif}
.glow{box-shadow:0 10px 40px rgba(245,158,11,.25)}
.glow-soft{box-shadow:0 10px 40px rgba(124,58,237,.15)}
@media (max-width: 900px){ .offer-grid{grid-template-columns:1fr} }

/* Masonry */
.masonry{columns:3 260px; column-gap:12px}
.masonry img{width:100%; margin:0 0 12px; border-radius:16px; border:1px solid rgba(255,255,255,.08)}

/* Contact */
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0 20px}
.mini-card{padding:14px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px}
.contact-form{padding:16px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:18px; box-shadow:var(--shadow)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
input, select, textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); color:var(--text)}
textarea{resize:vertical}
@media (max-width: 900px){ .contact-cards{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} }

/* Footer */
.footer{padding:40px 0; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center}
.footer-links{display:flex; gap:14px}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-copy{grid-column:1/-1; color:var(--muted); font-size:.9rem}
@media (max-width: 700px){ .footer-grid{grid-template-columns:1fr} }

/* Back to top */
.to-top{position:fixed; right:14px; bottom:14px; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.1); text-decoration:none; color:#fff; opacity:0; transform:translateY(10px); transition:.25s; box-shadow:var(--shadow)}
.to-top.show{opacity:1; transform:translateY(0)}

/* Reveal animations */
.reveal-up{opacity:0; transform:translateY(14px); animation:reveal .9s .1s both}
.reveal-up.delay-1{animation-delay:.25s}
.reveal-up.delay-2{animation-delay:.4s}
.reveal-up.delay-3{animation-delay:.55s}
@keyframes reveal{to{opacity:1; transform:none}}
.reveal-left{opacity:0; transform:translateX(-16px); animation:revealL .9s .15s both}
.reveal-right{opacity:0; transform:translateX(16px); animation:revealR .9s .15s both}
@keyframes revealL{to{opacity:1; transform:none}}
@keyframes revealR{to{opacity:1; transform:none}}

/* Utilities */
.hint{color:var(--muted); margin-top:8px}