/* ============================================================
   HOME — styles specific to index.html
   Requires base.css to be loaded first.
   ============================================================ */

.hair-top{border-top:1px solid var(--gold-line);}
section{position:relative;}
.pad{padding-block:clamp(6rem,14vh,11rem);}
.band-cream{background:var(--cream);color:var(--ink);transition:background .6s ease;}
.band-plum{background:var(--surface-deep-grad);color:var(--on-deep);transition:background .6s ease,color .6s ease;}

/* hero */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;
  background:var(--hero-bg);padding-top:8.5rem;padding-bottom:5rem;}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--hero-overlay);mix-blend-mode:multiply;transition:background .6s ease;}
.hero .wrap{position:relative;z-index:2;width:100%;will-change:transform,opacity;
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
.hero-visual{display:flex;justify-content:flex-end;}
.hero-visual .frame{position:relative;width:min(340px,100%);border-radius:4px;overflow:hidden;
  box-shadow:0 40px 80px -35px rgba(0,0,0,.55);opacity:0;transform:translateY(18px);
  animation:fadein 1.2s cubic-bezier(.2,.7,.2,1) 1.05s forwards;}
.hero-visual .frame img{display:block;width:100%;height:auto;filter:var(--hero-img-filter);transition:filter .6s ease;}
.hero-visual .frame .tint{position:absolute;inset:0;background:var(--hero-img-tint);transition:background .6s ease;}
.hero-visual .frame .edge{position:absolute;inset:0;border:1px solid rgba(201,168,76,.35);pointer-events:none;}

.hero .meta{display:flex;align-items:center;gap:1.1rem;margin-bottom:2.4rem;}
.hero .meta .ln{height:1px;width:52px;background:linear-gradient(90deg,var(--gold),transparent);transform-origin:left;animation:linegrow 1s cubic-bezier(.2,.7,.2,1) .15s both;}
@keyframes linegrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.tagline{margin:0 0 1.6rem;text-transform:uppercase;}
.tagline span{display:block;font-family:var(--serif);color:var(--on-deep);letter-spacing:-.01em;font-weight:500;}
.tl-a,.tl-b{clip-path:inset(0 100% 0 0);animation:wipe 1.15s cubic-bezier(.62,0,.14,1) both;}
.tl-a{font-size:clamp(2.2rem,7vw,5.4rem);line-height:.98;opacity:.94;animation-delay:.25s;}
.tl-b{font-size:clamp(2.9rem,9.5vw,7.4rem);line-height:.95;margin-top:.04em;animation-delay:.55s;}
.tl-b em{font-style:italic;font-weight:500;position:relative;}
.tl-b em::after{content:"";position:absolute;left:0;bottom:.02em;height:2px;width:0;background:var(--gold);animation:drawline .9s cubic-bezier(.2,.7,.2,1) 1.55s forwards;}
@keyframes wipe{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 -3% 0 0);}}
@keyframes drawline{to{width:100%;}}

.forfield{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.7rem);color:rgba(var(--on-deep-rgb),.78);margin:0 0 1.8rem;}
.forfield .rot{color:var(--gold);font-style:italic;display:inline-block;transition:opacity .45s ease,filter .45s ease,transform .45s ease;}
.forfield .rot.out{opacity:0;filter:blur(5px);transform:translateY(4px);}

.hero .sub{font-size:1.08rem;color:rgba(var(--on-deep-rgb),.74);max-width:44ch;margin:0 0 2.6rem;line-height:1.7;}
.hero .actions{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap;}
.hero .status{margin-top:2.8rem;display:inline-flex;align-items:center;gap:.8rem;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(var(--on-deep-rgb),.62);border:1px solid var(--gold-line);border-radius:2px;padding:.6rem 1.1rem;}

.clock{display:inline-flex;}
.clock svg{width:16px;height:16px;overflow:visible;}
.clock circle.face,.clock line{stroke:var(--gold);}
.clock .dot{fill:var(--gold);}
.clock .hand{transform-box:fill-box;transform-origin:center;}
.clock .hand.min{animation:spin 3.2s linear infinite;}
.clock .hand.hr{animation:spin 15s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.load{opacity:0;transform:translateY(10px);animation:fadein 1s cubic-bezier(.2,.7,.2,1) forwards;}
.l4{animation-delay:.7s;} .l5{animation-delay:.9s;} .l6{animation-delay:1.05s;} .l7{animation-delay:1.2s;}
@keyframes fadein{to{opacity:1;transform:none;}}

/* fields collage */
.fields{background:var(--plum-deep);border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);padding-block:clamp(3.5rem,7vh,5.5rem);transition:background .6s ease;}
.fields .kicker{text-align:center;color:var(--gray);}
.field-cloud{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.2em 1.05em;max-width:1000px;margin:1.8rem auto 0;}
.fword{display:inline-block;line-height:1.15;cursor:default;opacity:0;transition:opacity .7s ease var(--d,0s);will-change:transform,opacity;}
.fword.in{opacity:1;}
.fword.float{animation:fwfloat var(--dur,6s) ease-in-out var(--fd,0s) infinite alternate;}
@keyframes fwfloat{from{transform:translateY(0);}to{transform:translateY(-6px);}}
.fw-inner{display:inline-block;font-family:var(--serif);font-style:italic;transition:transform .35s cubic-bezier(.2,.7,.2,1),color .35s ease;}
.fword:hover .fw-inner{transform:scale(1.14);color:var(--gold);}
.fw-sm{font-size:clamp(1.05rem,2.1vw,1.55rem);color:rgba(var(--on-deep-rgb),.42);}
.fw-md{font-size:clamp(1.45rem,2.9vw,2.25rem);color:rgba(var(--on-deep-rgb),.62);}
.fw-lg{font-size:clamp(1.9rem,4vw,3.1rem);color:rgba(var(--on-deep-rgb),.85);}

/* about / manifesto */
.manifesto .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2.5rem,7vw,6rem);align-items:center;}
.manifesto .visual{position:relative;}
.manifesto .visual .frame{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 40px 80px -40px rgba(74,16,64,.35);}
.manifesto .visual .frame img{display:block;width:100%;height:100%;object-fit:cover;filter:var(--img-filter);transition:filter .6s ease;}
.manifesto .visual .frame .tint{position:absolute;inset:0;background:var(--img-tint);transition:background .6s ease;}
.manifesto .visual .frame .edge{position:absolute;inset:0;border:1px solid rgba(201,168,76,.35);pointer-events:none;}
.manifesto .copy{padding-top:0;}
.manifesto .kicker{color:var(--plum-text);opacity:.7;margin-bottom:1rem;display:block;}
.manifesto h2{font-family:var(--serif);font-weight:500;color:var(--plum-text);font-size:clamp(2.8rem,6vw,5rem);line-height:.98;margin:0 0 1rem;letter-spacing:-.01em;}
.manifesto .matchline{font-family:var(--sans);font-weight:500;color:var(--gold-deep);font-size:clamp(1.05rem,2vw,1.35rem);letter-spacing:.01em;margin:0 0 2rem;}
.manifesto p.body{color:var(--ink);max-width:52ch;margin:0 0 1.4rem;font-size:1.08rem;}
.manifesto p.body:last-child{margin-bottom:0;}

/* why us */
.why .head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(3rem,6vh,5rem);}
.why .head h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1;margin:.9rem 0 0;color:var(--on-deep);max-width:15ch;}
.why .head .txtlink{color:var(--on-deep);}
.features{border-top:1px solid var(--gold-line);}
.feature{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:baseline;padding:clamp(1.8rem,3.5vw,2.8rem) 0;border-bottom:1px solid var(--gold-line);transition:padding-left .45s cubic-bezier(.2,.7,.2,1);position:relative;}
.feature::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.feature:hover{padding-left:22px;}
.feature:hover::before{transform:scaleY(1);}
.feature .ic{width:34px;height:34px;color:var(--gold);transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.feature:hover .ic{transform:translateY(-4px);}
.feature .ic svg{width:100%;height:100%;}
.feature .txt{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(1rem,4vw,3.5rem);align-items:baseline;}
.feature h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.05;margin:0;color:var(--on-deep);position:relative;display:inline-block;}
.feature h3::after{content:"";position:absolute;left:0;bottom:-8px;height:1px;width:0;background:var(--gold);transition:width .55s cubic-bezier(.2,.7,.2,1);}
.feature:hover h3::after{width:42px;}
.feature p{margin:0;color:rgba(var(--on-deep-rgb),.68);font-size:1rem;}
.verify-marks{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem;}
.vm{display:inline-flex;align-items:center;gap:.45rem;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--on-deep-rgb),.72);border:1px solid var(--gold-line);border-radius:20px;padding:.42rem .8rem;}
.vm svg{width:13px;height:13px;color:var(--gold);}

/* inside the app */
.exp .head{max-width:60ch;margin-bottom:clamp(2.6rem,5vh,3.8rem);}
.exp .head h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,5.2vw,4.2rem);line-height:1;margin:.9rem 0 0;color:var(--on-deep);max-width:16ch;}
.exp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.4vw,1.3rem);}
.expi{background:rgba(var(--on-deep-rgb),.035);border:1px solid var(--gold-line);border-radius:16px;
  padding:clamp(1.5rem,1.9vw,1.9rem) clamp(1.3rem,1.6vw,1.6rem);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,background .4s;}
.expi:hover{transform:translateY(-4px);border-color:rgba(201,168,76,.55);background:rgba(var(--on-deep-rgb),.055);}
.expi .ic{display:block;width:24px;height:24px;color:var(--gold);margin-bottom:1.1rem;}
.expi .ic svg{display:block;width:100%;height:100%;}
.expi h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,1.7vw,1.55rem);line-height:1.16;margin:0 0 .5rem;color:var(--on-deep);}
.expi p{margin:0;color:rgba(var(--on-deep-rgb),.6);font-size:.86rem;line-height:1.55;}
.expi .tag-elite{display:inline-block;font-family:var(--sans);font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-line);border-radius:12px;padding:.16rem .5rem;margin-left:.4rem;vertical-align:middle;}
.exp-note{text-align:center;margin:clamp(2.6rem,5vh,3.5rem) 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2vw,1.45rem);color:rgba(var(--on-deep-rgb),.55);}
.exp-note .soon{font-family:var(--sans);font-style:normal;font-size:.54rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-left:.5rem;vertical-align:middle;}

/* difference */
.diff{text-align:center;position:relative;overflow:hidden;}
.diff::before{content:"";position:absolute;inset:0;z-index:0;background:url('../images/diff-background.svg') center/cover no-repeat;opacity:.8;transition:opacity .6s ease;}
:root[data-theme="light"] .diff::before{opacity:.55;}
.diff .wrap{position:relative;z-index:1;}
.diff .kicker{color:var(--plum-text);opacity:.7;margin-bottom:1.5rem;}
.diff h2{font-family:var(--serif);font-weight:500;color:var(--plum-text);font-size:clamp(2.6rem,7vw,5.4rem);line-height:1;margin:0;}
.diff h2 em{font-style:italic;}
.diff .sub{color:var(--ink);opacity:.7;font-size:1rem;margin:1.4rem auto 0;max-width:34ch;}
.diff .stat{display:inline-flex;align-items:flex-start;gap:clamp(1.5rem,5vw,4.5rem);margin-top:3rem;font-family:var(--serif);}
.diff .stat .col .k{font-family:var(--sans);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:.7rem;}
.diff .stat .col .v{font-size:clamp(2.6rem,7vw,4.4rem);line-height:1;color:var(--plum-text);}
.diff .stat .col .v small{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);margin-top:.6rem;}
.diff .stat .col.them .v{color:#9c6d80;opacity:.85;}
.diff .stat .bar{width:1px;align-self:stretch;background:var(--gold-line);}

/* invitation */
.invite{text-align:center;}
.invite .kicker{color:var(--gold);margin-bottom:1.8rem;}
.invite h2{font-family:var(--serif);font-weight:500;color:var(--on-deep);text-transform:uppercase;font-size:clamp(2.8rem,9vw,7rem);line-height:.96;margin:0 auto;max-width:14ch;letter-spacing:-.01em;}
.invite h2 em{font-style:italic;}
.invite p.sub{color:rgba(var(--on-deep-rgb),.72);max-width:42ch;margin:2rem auto 2.8rem;font-size:1.05rem;}
.waitlist{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;max-width:520px;margin:0 auto;}
.waitlist input{flex:1 1 260px;min-width:0;height:56px;padding:0 24px;background:rgba(var(--on-deep-rgb),.05);border:1px solid var(--gold-line);border-radius:28px;color:var(--on-deep);font-family:var(--sans);font-size:.94rem;transition:border-color .3s,background .3s;}
.waitlist input::placeholder{color:rgba(var(--on-deep-rgb),.45);}
.waitlist input:focus{outline:none;border-color:var(--gold);background:rgba(var(--on-deep-rgb),.09);}
.invite .fine{margin-top:1.8rem;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(var(--on-deep-rgb),.45);}
.invite .thanks{color:var(--gold);font-family:var(--serif);font-size:1.7rem;margin:0;display:none;}
.invite .thanks.show{display:block;}
.waitlist.hide{display:none;}

@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-visual{justify-content:center;order:-1;margin-bottom:1.6rem;}
  .hero-visual .frame{width:min(220px,60vw);}
  .manifesto .wrap{grid-template-columns:1fr;gap:1.5rem;}
  .feature .txt{grid-template-columns:1fr;gap:.7rem;}
  .exp-grid{grid-template-columns:repeat(2,1fr);gap:clamp(1.8rem,4vw,3rem) clamp(2rem,5vw,3rem);}
}
@media(max-width:620px){
  .hero .actions{flex-direction:stretch;flex-direction:column;align-items:stretch;gap:1.4rem;}
  .hero .actions .btn{width:100%;}
  .feature{grid-template-columns:1fr;gap:1rem;}
  .diff .stat{gap:1.4rem;}
  .exp-grid{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .tl-a,.tl-b{clip-path:none;opacity:1;}
  .tl-b em::after{width:100%;}
  .fword{opacity:1;transform:none;}
  .hero .load{opacity:1;transform:none;}
}