/* ==========================================================================
   MERIDIAN — Precision Eyewear
   Design tokens
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:            #0b0c0e;
  --bg-alt:        #121417;
  --surface:       #191c21;
  --surface-2:     #21252b;
  --ivory:         #f4f0e8;
  --muted:         #9a9da5;
  --muted-2:       #6b6e75;
  --gold:          #c9a24b;
  --gold-bright:   #e8c878;
  --glass:         #82d9d4;
  --line:          rgba(244,240,232,0.12);
  --line-soft:     rgba(244,240,232,0.06);

  --font-display:  'Fraunces', serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'Space Mono', monospace;

  --container: 1320px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ background:var(--bg); scroll-behavior:auto; }
html.no-scroll{ overflow:hidden; }

body{
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:none; }
input{ font-family:inherit; }

::selection{ background:var(--gold); color:var(--bg); }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 48px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px; background:var(--gold);
  display:inline-block;
}
.hidden-visually{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ==========================================================================
   Custom cursor — "lens"
   ========================================================================== */
.cursor-lens{
  position:fixed; top:0; left:0;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(244,240,232,.55);
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  transition:width .35s var(--ease-out), height .35s var(--ease-out), border-color .35s;
}
.cursor-lens::after{
  content:'';
  position:absolute; inset:0; margin:auto;
  width:4px; height:4px; border-radius:50%;
  background:var(--gold-bright);
}
.cursor-lens.is-active{
  width:84px; height:84px;
  border-color:var(--gold-bright);
  background:radial-gradient(circle, rgba(201,162,75,.12), transparent 70%);
}
@media (hover:none), (pointer:coarse){
  .cursor-lens{ display:none; }
  body{ cursor:auto; }
  button, a{ cursor:pointer; }
}

/* ==========================================================================
   Preloader — aperture iris
   ========================================================================== */
.preloader{
  position:fixed; inset:0; background:var(--bg);
  z-index:10000;
  display:flex; align-items:center; justify-content:center;
}
.preloader .iris{ width:180px; height:180px; position:relative; }
.preloader .blade{
  position:absolute; inset:0;
  background:var(--surface-2);
  border:1px solid var(--line);
  clip-path:polygon(50% 50%, 100% 0%, 100% 30%);
  transform-origin:50% 50%;
}
.preloader .pct{
  position:absolute; top:calc(50% + 130px); left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:13px; letter-spacing:.15em; color:var(--muted);
}

/* ==========================================================================
   Aperture divider (signature element, reused between sections)
   ========================================================================== */
.aperture-divider{
  position:relative;
  height:140px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.aperture-divider .iris-mini{ width:64px; height:64px; position:relative; }
.aperture-divider .blade-m{
  position:absolute; inset:0;
  background:transparent;
  border:1px solid var(--gold);
  opacity:.5;
  clip-path:polygon(50% 50%, 100% 0%, 100% 30%);
  transform-origin:50% 50%;
}
.aperture-divider::before{
  content:''; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--line);
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:28px 48px;
  display:flex; align-items:center; justify-content:space-between;
  transition:padding .4s var(--ease-out), background-color .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:16px 48px;
  background:rgba(11,12,14,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-logo{
  font-family:var(--font-display);
  font-size:22px; letter-spacing:.03em;
  display:flex; align-items:baseline; gap:8px;
}
.nav-logo span{ font-family:var(--font-mono); font-size:10px; color:var(--gold); letter-spacing:.2em; }
.nav-links{ display:flex; gap:40px; }
.nav-links a{
  font-size:13px; letter-spacing:.04em; color:var(--muted);
  position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold-bright);
  transition:width .3s var(--ease-out);
}
.nav-links a:hover{ color:var(--ivory); }
.nav-links a:hover::after{ width:100%; }
.nav-right{ display:flex; align-items:center; gap:24px; }
.nav-cart{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  border:1px solid var(--line); padding:9px 18px; border-radius:100px;
  display:flex; align-items:center; gap:8px;
  transition:border-color .3s, background .3s;
}
.nav-cart:hover{ border-color:var(--gold); background:var(--surface); }
.nav-burger{ display:none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:16px 30px; border-radius:100px;
  position:relative; overflow:hidden;
  isolation:isolate;
}
.btn-primary{ background:var(--ivory); color:var(--bg); }
.btn-primary span{ position:relative; z-index:2; display:flex; align-items:center; gap:8px;}
.btn-primary::before{
  content:''; position:absolute; inset:0; background:var(--gold-bright);
  transform:translateY(101%); transition:transform .45s var(--ease-in-out); z-index:1;
}
.btn-primary:hover::before{ transform:translateY(0); }
.btn-ghost{
  border:1px solid var(--line); color:var(--ivory);
  transition:border-color .3s, color .3s;
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-bright); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:160px 48px 0;
  overflow:hidden;
}
.hero-bg-type{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.hero-bg-type span{
  font-family:var(--font-display); font-weight:300; font-style:italic;
  font-size:min(34vw,520px); color:transparent;
  -webkit-text-stroke:1px var(--line);
  white-space:nowrap;
}
.hero-content{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; width:100%; }
.hero-eyebrow{ margin-bottom:28px; }
.hero-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(48px, 8vw, 118px);
  line-height:.98;
  letter-spacing:-.01em;
  max-width:1100px;
}
.hero-title .line{ overflow:hidden; display:block; }
.hero-title .line > span{ display:inline-block; will-change:transform; }
.hero-title em{ font-style:italic; font-weight:400; color:var(--gold-bright); }
.hero-sub{
  margin-top:32px; max-width:460px;
  color:var(--muted); font-size:16px; line-height:1.7;
}
.hero-actions{ display:flex; gap:18px; margin-top:44px; }
.hero-bottom{
  display:flex; align-items:flex-end; justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:90px; padding:26px 0;
  position:relative; z-index:2;
}
.hero-figure{
  position:absolute; right:2%; top:8%; z-index:1;
  width:min(46vw, 620px);
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.6));
}
.scroll-cue{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--muted);
}
.scroll-cue .track{ width:1px; height:46px; background:var(--line); position:relative; overflow:hidden; }
.scroll-cue .track::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--gold-bright);
  animation:scrollcue 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollcue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
.hero-meta-num{ font-family:var(--font-mono); font-size:12px; color:var(--muted); text-align:right; }
.hero-meta-num b{ color:var(--ivory); font-size:15px; display:block; }

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trust-bar{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-alt);
}
.trust-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.trust-item{
  padding:34px 32px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.trust-item:last-child{ border-right:none; }
.trust-num{
  font-family:var(--font-display); font-size:34px; font-weight:500; color:var(--gold-bright);
  display:flex; align-items:baseline; gap:4px;
}
.trust-label{ font-size:13px; color:var(--muted); letter-spacing:.02em; }

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee-strip{
  border-bottom:1px solid var(--line);
  padding:26px 0; overflow:hidden; white-space:nowrap;
  background:var(--bg);
}
.marquee-track{
  display:inline-flex; gap:0; will-change:transform;
}
.marquee-track span{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:26px; color:var(--muted-2); padding:0 28px;
  display:inline-flex; align-items:center; gap:28px;
}
.marquee-track span::after{
  content:'◆'; font-size:10px; color:var(--gold); font-style:normal;
}

/* ==========================================================================
   Section shell
   ========================================================================== */
.section{ padding:150px 0; position:relative; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-bottom:80px;
}
.section-title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(34px,4.2vw,58px); line-height:1.05; letter-spacing:-.01em;
  max-width:640px; margin-top:18px;
}
.section-title em{ font-style:italic; color:var(--gold-bright); font-weight:400; }
.section-desc{ max-width:340px; color:var(--muted); font-size:15px; line-height:1.7; padding-bottom:6px; }

/* ==========================================================================
   Collection — horizontal pinned scroll
   ========================================================================== */
.collection{ padding:0; overflow:hidden; }
.collection-head{ padding:150px 48px 60px; }
.collection-pin{ position:relative; height:100vh; overflow:hidden; }
.collection-track{
  position:absolute; top:0; left:0; height:100%;
  display:flex; align-items:center;
  padding-left:6vw;
  will-change:transform;
}
.frame-card{
  width:34vw; min-width:420px; height:78vh; margin-right:4vw;
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  flex-shrink:0;
}
.frame-card .fc-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:28px 30px 0;
  font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:.08em;
}
.frame-card .fc-price{ color:var(--gold-bright); }
.frame-card .fc-img{
  flex:1; display:flex; align-items:center; justify-content:center; padding:20px 40px;
}
.frame-card .fc-img svg{ width:100%; height:auto; overflow:visible; }
.frame-card .fc-bottom{ padding:26px 30px 32px; border-top:1px solid var(--line); }
.frame-card .fc-name{ font-family:var(--font-display); font-size:26px; margin-bottom:6px; }
.frame-card .fc-desc{ color:var(--muted); font-size:13px; }
.collection-progress{
  position:absolute; bottom:44px; left:6vw; right:6vw; height:1px; background:var(--line); z-index:5;
}

/* ==========================================================================
   Craft process
   ========================================================================== */
.craft{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.craft-list{ position:relative; }
.craft-line{
  position:absolute; left:52px; top:0; bottom:0; width:1px; background:var(--line);
}
.craft-line-fill{
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:var(--gold-bright); transform-origin:top; transform:scaleY(0);
}
.craft-step{
  display:grid; grid-template-columns:104px 1fr 1fr;
  gap:40px; padding:44px 0; border-bottom:1px solid var(--line-soft);
  align-items:center; position:relative;
}
.craft-step:last-child{ border-bottom:none; }
.craft-num{
  font-family:var(--font-mono); font-size:14px; color:var(--muted);
  display:flex; align-items:center; gap:14px;
}
.craft-num .dot{
  width:9px; height:9px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line);
  position:relative; z-index:2;
}
.craft-title{
  font-family:var(--font-display); font-size:28px; font-weight:500;
}
.craft-desc{ color:var(--muted); font-size:14.5px; line-height:1.7; max-width:420px; }

/* ==========================================================================
   Lens technology
   ========================================================================== */
.lens-tech{ padding:150px 0; }
.lens-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.lens-diagram{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  min-height:520px; position:relative; overflow:hidden;
}
.lens-diagram::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(130,217,212,.08), transparent 60%);
}
.lens-diagram svg{ width:78%; height:auto; position:relative; z-index:2; }
.coat-list{ margin-top:40px; display:flex; flex-direction:column; gap:0; }
.coat-item{
  display:grid; grid-template-columns:28px 1fr;
  gap:16px; padding:20px 0; border-top:1px solid var(--line-soft);
}
.coat-item:last-child{ border-bottom:1px solid var(--line-soft); }
.coat-item .ci-mark{ font-family:var(--font-mono); color:var(--gold); font-size:13px; }
.coat-item .ci-name{ font-family:var(--font-body); font-weight:600; font-size:15px; margin-bottom:4px; }
.coat-item .ci-desc{ color:var(--muted); font-size:13.5px; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials{
  background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden;
}
.testi-slider{ position:relative; min-height:280px; }
.testi-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  display:flex; flex-direction:column; gap:28px; max-width:820px;
}
.testi-slide.is-active{ position:relative; opacity:1; visibility:visible; }
.testi-quote{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(24px,3vw,38px); line-height:1.4; color:var(--ivory);
}
.testi-quote::before{ content:'“'; color:var(--gold); }
.testi-quote::after{ content:'”'; color:var(--gold); }
.testi-author{ display:flex; align-items:center; gap:14px; }
.testi-avatar{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--glass));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:13px; color:var(--bg); font-weight:700;
}
.testi-name{ font-size:14px; font-weight:600; }
.testi-role{ font-size:12.5px; color:var(--muted); }
.testi-nav{ display:flex; gap:12px; margin-top:56px; }
.testi-dot{
  width:34px; height:2px; background:var(--line); position:relative; overflow:hidden;
}
.testi-dot::after{ content:''; position:absolute; inset:0; background:var(--gold-bright); transform:scaleX(0); transform-origin:left; }
.testi-dot.is-active::after{ transform:scaleX(1); transition:transform 6s linear; }

/* ==========================================================================
   Conversion banner
   ========================================================================== */
.tryon{
  position:relative; padding:170px 0; text-align:center; overflow:hidden;
}
.tryon::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(201,162,75,.12), transparent 60%);
  z-index:0;
}
.tryon-content{ position:relative; z-index:2; }
.tryon-title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(40px,6vw,84px); line-height:1.02; letter-spacing:-.01em;
  max-width:900px; margin:22px auto 0;
}
.tryon-title em{ font-style:italic; color:var(--gold-bright); }
.tryon-steps{
  display:flex; justify-content:center; gap:60px; margin:60px 0 50px; flex-wrap:wrap;
}
.tryon-step{ max-width:220px; }
.tryon-step .ts-num{ font-family:var(--font-mono); color:var(--gold); font-size:13px; margin-bottom:10px; display:block;}
.tryon-step .ts-title{ font-weight:600; margin-bottom:6px; font-size:15px; }
.tryon-step .ts-desc{ color:var(--muted); font-size:13.5px; line-height:1.6; }
.magnetic-btn{ display:inline-flex; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ padding:110px 0 40px; position:relative; }
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:60px;
  padding-bottom:90px; border-bottom:1px solid var(--line);
}
.footer-brand .nav-logo{ margin-bottom:18px; }
.footer-brand p{ color:var(--muted); font-size:14px; max-width:280px; line-height:1.7; }
.footer-col h4{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:22px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:14px; }
.footer-col a{ font-size:14.5px; color:var(--ivory); opacity:.85; transition:opacity .25s, color .25s; }
.footer-col a:hover{ opacity:1; color:var(--gold-bright); }
.newsletter-form{ display:flex; border-bottom:1px solid var(--line); padding-bottom:14px; margin-top:22px; }
.newsletter-form input{
  background:transparent; border:none; color:var(--ivory); font-size:14px; flex:1; outline:none;
}
.newsletter-form input::placeholder{ color:var(--muted-2); }
.newsletter-form button{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--gold-bright);
  display:flex; align-items:center; gap:6px;
}
.newsletter-msg{ font-size:12.5px; color:var(--glass); margin-top:10px; height:14px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:34px; font-size:12.5px; color:var(--muted-2);
}
.footer-socials{ display:flex; gap:20px; }
.footer-socials a{ color:var(--muted); transition:color .25s; }
.footer-socials a:hover{ color:var(--gold-bright); }

/* ==========================================================================
   Reveal helpers (JS-driven via GSAP, base states here)
   ========================================================================== */
.reveal-up{ opacity:0; transform:translateY(40px); }
.reveal-fade{ opacity:0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px){
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-item:nth-child(2){ border-right:none; }
  .lens-grid{ grid-template-columns:1fr; gap:50px; }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:50px; }
}
@media (max-width: 820px){
  .wrap, .nav, .hero, .collection-head{ padding-left:24px; padding-right:24px; }
  .nav-links{ display:none; }
  .hero{ padding-top:130px; }
  .hero-figure{ position:relative; width:80%; margin:40px auto 0; right:auto; top:auto; }
  .hero-bottom{ flex-direction:column; align-items:flex-start; gap:24px; }
  .section{ padding:90px 0; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:50px; }
  .craft-step{ grid-template-columns:1fr; gap:14px; padding:30px 0 30px 70px; }
  .craft-line{ left:28px; }
  .frame-card{ width:82vw; min-width:0; height:70vh; }
  .footer-top{ grid-template-columns:1fr; gap:44px; }
  .tryon-steps{ gap:34px; }
}