/* ═══════════════════════════════════════════════════════
   VITANTRA — Design System v4  "Launching Soon" Edition
   Direction: Luxury Editorial · Warm Ivory · Forest
   Fonts: Cormorant Garamond (display) + Outfit (UI)
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --ivory:        #F8F4EE;
  --ivory-deep:   #F0EAE0;
  --ivory-mid:    #EAE3D8;
  --cream:        #FBF8F3;
  --forest:       #1A3A35;
  --forest-light: #244D47;
  --forest-mid:   #2E6055;
  --forest-pale:  #E8F0EE;
  --gold:         #B8924A;
  --gold-light:   #D4AE6E;
  --gold-pale:    #F5EDD9;
  --sage:         #7DB5A0;
  --sage-light:   #A8CEBC;
  --sage-pale:    #EAF3EE;
  --ink:          #1A1916;
  --ink-mid:      #3D3A35;
  --ink-light:    #6B6760;
  --ink-faint:    #9E9A93;
  --white:        #FFFFFF;
  --bg:           var(--ivory);
  --bg-alt:       var(--cream);
  --bg-dark:      var(--forest);
  --bg-dark-deep: #0F2420;
  --surface:      var(--white);
  --surface-tint: var(--ivory-deep);
  --border:       rgba(26,25,22,0.10);
  --border-md:    rgba(26,25,22,0.16);
  --border-dark:  rgba(255,255,255,0.10);
  --border-dark-md: rgba(255,255,255,0.18);
  --tx:           var(--ink);
  --tx-mid:       var(--ink-mid);
  --tx-sub:       var(--ink-light);
  --tx-faint:     var(--ink-faint);
  --tx-inv:       var(--ivory);
  --tx-inv-sub:   rgba(248,244,238,0.60);
  --tx-inv-faint: rgba(248,244,238,0.35);
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-2xl:36px; --r-full:9999px;
  --sh-sm:   0 1px 4px rgba(26,25,22,0.06), 0 4px 16px rgba(26,25,22,0.06);
  --sh-md:   0 4px 12px rgba(26,25,22,0.06), 0 16px 40px rgba(26,25,22,0.08);
  --sh-lg:   0 8px 24px rgba(26,25,22,0.06), 0 32px 64px rgba(26,25,22,0.12);
  --sh-gold: 0 8px 32px rgba(184,146,74,0.24);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-circ: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: 'Outfit', system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: var(--tx); background: var(--bg); overflow-x: hidden; }
img, svg { display: block; } a { text-decoration: none; } button { cursor: pointer; font-family: inherit; } ul { list-style: none; }

/* Grain */
body::after { content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.022; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:300px; }

@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
body { animation: fadeUp 0.5s var(--ease-expo) both; }

.container { width:100%; max-width:1440px; margin:0 auto; padding:0 80px; }
.container-narrow { width:100%; max-width:1100px; margin:0 auto; padding:0 80px; }

.reveal { animation: revealUp 0.6s var(--ease-expo) both; }
.reveal-left { animation-name: revealLeft; }
.reveal-right { animation-name: revealRight; }
@keyframes revealUp   { from { opacity:0.01; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes revealLeft { from { opacity:0.01; transform:translateX(-20px); } to { opacity:1; transform:none; } }
@keyframes revealRight{ from { opacity:0.01; transform:translateX(20px); } to { opacity:1; transform:none; } }
.d1{animation-delay:.06s} .d2{animation-delay:.12s} .d3{animation-delay:.18s} .d4{animation-delay:.24s} .d5{animation-delay:.30s} .d6{animation-delay:.36s}

/* ── LAUNCHING SOON BANNER ── */
.launch-banner {
  background: var(--forest);
  color: var(--gold-light);
  text-align: center;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 201;
}
.launch-banner span { color: var(--ivory); margin: 0 8px; }
.launch-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(184,146,74,0.18); border: 1px solid rgba(184,146,74,0.35);
  border-radius: var(--r-full); padding: 4px 14px 4px 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-light);
}
.launch-badge::before {
  content: ''; display: block; width: 7px; height: 7px; border-radius: 50%;
  background: #4CAF50; box-shadow: 0 0 0 2px rgba(76,175,80,0.3);
  animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 2px rgba(76,175,80,0.3)} 50%{box-shadow:0 0 0 5px rgba(76,175,80,0.1)} }

/* ── NAV ── */
.nav { position:fixed; top:0; left:0; right:0; z-index:200; transition: background 0.3s var(--ease-circ), box-shadow 0.3s; }
.nav.has-banner { top: 41px; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; width:100%; padding:0 60px; }
.nav-logo img { height:36px; width:auto; flex-shrink:0; }
.nav-links { display:flex; align-items:center; gap:32px; margin-left:48px; }
.nav-links a { font-size:14px; font-weight:500; letter-spacing:0.02em; transition: color 0.2s; }
.nav-badge { background: rgba(184,146,74,0.15); border: 1px solid rgba(184,146,74,0.3); color: var(--gold-light); font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: var(--r-full); letter-spacing: 0.08em; text-transform: uppercase; flex-shrink:0; white-space:nowrap; }
.dark-nav .nav-links a { color: var(--tx-inv-sub); }
.dark-nav .nav-links a:hover, .dark-nav .nav-links a.active { color: var(--ivory); }
.dark-nav .nav-badge { color: var(--gold-light); }
.dark-nav.scrolled { background: rgba(15,36,32,0.95); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
.light-nav .nav-links a { color: var(--tx-sub); }
.light-nav .nav-links a:hover, .light-nav .nav-links a.active { color: var(--forest); }
.light-nav.scrolled { background: rgba(248,244,238,0.96); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--border); }

/* ── EYEBROWS ── */
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; }
.eyebrow::before { content:''; display:block; width:24px; height:1px; flex-shrink:0; }
.eyebrow-forest { color: var(--forest); }
.eyebrow-forest::before { background: var(--forest); }
.eyebrow-gold { color: var(--gold); }
.eyebrow-gold::before { background: var(--gold); }
.eyebrow-inv-gold { color: var(--gold-light); }
.eyebrow-inv-gold::before { background: var(--gold-light); }
.eyebrow-inv { color: var(--tx-inv-sub); }
.eyebrow-inv::before { background: var(--tx-inv-sub); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; letter-spacing:0.02em; padding:12px 28px; border-radius:var(--r-full); border:none; transition: all 0.22s var(--ease-circ); cursor:pointer; white-space:nowrap; }
.btn-lg { padding:15px 36px; font-size:15px; }
.btn-sm { padding:9px 20px; font-size:13px; }
.btn-forest { background:var(--forest); color:var(--ivory); }
.btn-forest:hover { background:var(--forest-light); transform:translateY(-1px); box-shadow:var(--sh-md); }
.btn-gold { background:var(--gold); color:var(--white); }
.btn-gold:hover { background:var(--gold-light); transform:translateY(-1px); box-shadow:var(--sh-gold); }
.btn-ivory { background:var(--ivory); color:var(--forest); }
.btn-ivory:hover { background:var(--cream); transform:translateY(-1px); box-shadow:var(--sh-sm); }
.btn-outline-inv { background:transparent; color:var(--ivory); border:1px solid rgba(248,244,238,0.30); }
.btn-outline-inv:hover { background:rgba(248,244,238,0.08); border-color:rgba(248,244,238,0.5); }
.btn-outline { background:transparent; color:var(--forest); border:1px solid var(--border-md); }
.btn-outline:hover { background:var(--forest-pale); border-color:var(--forest); }
.arrow-icon { width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── INNER PAGE HERO ── */
.inner-hero { background:var(--bg-dark-deep); padding:140px 0 80px; position:relative; overflow:hidden; }
.inner-hero.has-banner { padding-top:180px; }
.inner-hero-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.012) 1px,transparent 1px); background-size:80px 80px; pointer-events:none; }
.inner-hero-glow { position:absolute; top:-20%; left:50%; transform:translateX(-50%); width:800px; height:600px; background:radial-gradient(ellipse,rgba(184,146,74,0.06) 0%,transparent 70%); pointer-events:none; }
.inner-hero-rule { position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(184,146,74,0.3),transparent); }
.inner-hero-content { position:relative; z-index:1; max-width:860px; }
.inner-hero-eyebrow { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.inner-hero-eyebrow-line { width:40px; height:1px; background:var(--gold); flex-shrink:0; }
.inner-hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(44px,6vw,72px); font-weight:300; font-style:italic; color:var(--ivory); line-height:1.06; letter-spacing:-0.01em; margin-bottom:20px; }
.inner-hero-title strong { font-style:normal; font-weight:600; color:var(--sage-light); }
.inner-hero-sub { font-size:17px; font-weight:300; line-height:1.75; color:var(--tx-inv-sub); max-width:700px; }

/* ── MARQUEE ── */
.marquee { background:var(--forest); border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); overflow:hidden; padding:14px 0; }
.marquee-track { display:flex; gap:0; animation:marquee-scroll 40s linear infinite; width:max-content; }
.marquee-item { display:flex; align-items:center; gap:16px; font-size:13px; font-weight:500; letter-spacing:0.06em; color:var(--tx-inv-sub); padding:0 32px; white-space:nowrap; }
.marquee-dot { width:4px; height:4px; border-radius:50%; background:var(--gold); flex-shrink:0; }
@keyframes marquee-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SECTION UTILITIES ── */
.section-pad { padding:100px 0; }
.section-pad-sm { padding:72px 0; }

/* ── TIER CHIPS ── */
.tier-chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:3px 10px; border-radius:var(--r-full); }
.tc-core { background:var(--sage-pale); color:var(--forest); }
.tc-adv  { background:#E6F1FB; color:#0C447C; }
.tc-advp { background:#FAC77533; color:#633806; }
.tc-prem { background:#EEEDFE; color:#3C3489; }
.tc-coming { background:rgba(184,146,74,0.12); color:var(--gold); border:1px solid rgba(184,146,74,0.25); }

/* ── FOOTER ── */
.footer { background:var(--bg-dark-deep); border-top:1px solid rgba(255,255,255,0.06); padding:72px 0 0; }
.footer .container { max-width:none !important; }
.footer-top { display:grid; grid-template-columns:2.5fr 1fr 1fr 1fr; gap:80px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,0.06); }
.footer-brand-name { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:600; color:var(--ivory); margin-bottom:4px; }
.footer-brand-tag { font-size:12px; font-weight:500; color:var(--gold); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px; }
.footer-desc { font-size:13px; font-weight:300; line-height:1.75; color:var(--tx-inv-sub); max-width:300px; }
.footer-col h5 { font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--tx-inv-faint); margin-bottom:20px; }
.footer-col ul li { margin-bottom:12px; }
.footer-col ul li a { font-size:14px; font-weight:300; color:var(--tx-inv-sub); transition:color 0.2s; }
.footer-col ul li a:hover { color:var(--ivory); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding:24px 0; }
.footer-copy { font-size:12px; color:var(--tx-inv-faint); }
.footer-made { font-size:12px; font-style:italic; color:var(--tx-inv-faint); }
.footer-disclaimer { font-size:11px; color:var(--tx-inv-faint); line-height:1.6; padding:0 0 24px; max-width:800px; }

/* ── RESPONSIVE ── */
@media(max-width:1100px) { .container,.container-narrow{padding:0 48px;} .nav-inner{padding:0 48px;} }
@media(max-width:768px) {
  .container,.container-narrow{padding:0 24px;} .nav-inner{padding:0 24px;}
  .inner-hero{padding:120px 0 60px;}
  .inner-hero-title{font-size:clamp(36px,8vw,56px);}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px;}
  .section-pad{padding:72px 0;} .section-pad-sm{padding:56px 0;}
}
@media(max-width:768px) {
  .nav-badge{display:none;}
}
@media(max-width:480px) {
  .footer-top{grid-template-columns:1fr;}
  .nav-links{display:none;}
}