/* ============================================================
   Dejavu Wallpaper — Gate 0 prototype
   Reproduces the reference Framer template's layout/type/motion.
   Tokens taken verbatim from design-dna.json.
   ============================================================ */

:root{
  /* color */
  --c-accent:#FF6041;
  --c-bg:#141414;          /* near-black canvas */
  --c-black:#000;
  --c-deep:#050609;
  --c-white:#FFFFFF;
  --c-mute1:#888d92;
  --c-mute2:#797d82;
  --c-mute3:#5c6063;
  --c-sub:#d5d7de;
  --c-light:#fafafa;
  --c-light2:#f2f2f2;
  --c-hair:#ebebeb;

  /* type */
  --f-display:'Figtree',system-ui,-apple-system,sans-serif;
  --f-mono:'Fragment Mono','SFMono-Regular',ui-monospace,monospace;

  /* spacing */
  --gutter:clamp(20px,4.4vw,80px);
  --maxw:1800px;

  /* shape */
  --r-btn:12px;
  --r-card:12px;
  --r-thumb:8px;

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  font-family:var(--f-display);
  background:var(--c-bg);
  color:var(--c-white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover}
.hero__bg video,.manifesto__bg video{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:-.6px}

/* ---------- shared display type ---------- */
.brand-orange{color:var(--c-accent)}
.brand-white{color:var(--c-white)}
.brand-white-muted{color:var(--c-mute2)}
.brand-slash{color:var(--c-white);opacity:.92;font-weight:500}

/* big display helper */
.display-xl{
  font-weight:700;line-height:.95;letter-spacing:-.06em;
  font-size:clamp(48px,10vw,120px);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);text-transform:uppercase;
  font-size:13px;letter-spacing:-.4px;
  padding:16px 26px;border-radius:var(--r-btn);
  border:1px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
  white-space:nowrap;
}
.btn--primary{background:var(--c-accent);color:#fff}
.btn--primary:hover{transform:translateY(-2px);background:#ff7257}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn--lg{padding:20px 34px;font-size:14px}

/* badges (count) */
.badge{
  font-family:var(--f-mono);font-size:9px;font-weight:400;
  background:rgba(255,255,255,.12);color:#fff;
  border-radius:4px;padding:1px 4px;margin-left:3px;vertical-align:super;
  line-height:1;
}
.badge--dark{background:rgba(0,0,0,.1);color:var(--c-mute2)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:34px var(--gutter);
}
/* top-down dark scrim so white nav + orange wordmark stay legible over any hero art */
.nav::before{
  content:"";position:absolute;inset:0 0 auto 0;height:120px;z-index:-1;
  background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent);
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
.nav__brand{
  font-family:var(--f-display);font-weight:800;font-size:26px;
  letter-spacing:-.04em;line-height:1;
}
.nav__brand .brand-slash{margin:0 -1px}
.nav__links{display:flex;gap:34px}
.nav__links a,.nav__contact{
  font-family:var(--f-mono);text-transform:uppercase;
  font-size:14px;letter-spacing:-.5px;color:#fff;
  transition:opacity .2s ease;
}
.nav__links a:hover,.nav__contact:hover{opacity:.6}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer}
.nav__burger span{width:24px;height:2px;background:#fff;display:block}

/* nav becomes a floating glass pill once scrolled */
.nav.is-stuck{
  position:fixed;
  top:14px;left:50%;transform:translateX(-50%);
  right:auto;width:min(96vw,var(--maxw));
  padding:14px 22px;border-radius:16px;
  background:rgba(20,20,20,.55);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  animation:navDrop .4s var(--ease);
}
@keyframes navDrop{from{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1}}
.nav.is-stuck::before{opacity:0}
.nav.is-stuck .nav__brand{font-size:22px}

/* ============================================================
   1. HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:block;overflow:hidden;
  background:var(--c-black);
}
.hero__bg{position:absolute;inset:-8% 0 -8% 0;z-index:0;will-change:transform}
.hero__bg img,.hero__bg video{filter:saturate(1.05)}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.1) 28%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.78) 100%),
    radial-gradient(120% 80% at 30% 110%,rgba(0,0,0,.6),transparent 60%);
}
/* template-matched grid: indented left content column + mono index labels.
   --hero-indent ~ the template's x:160 col; headline/stat row, mid wordmark,
   bottom-left cluster, bottom-right credential block. */
/* template-matched hero: ticks live in a far-left gutter; all other clusters
   are absolutely positioned within the hero by MEASURED % of the viewport
   (reference: createstudio.framer.media at 1512x982). Hero box = 100svh, so
   top:% maps ~1:1 to the template's y%. */
.hero__inner{
  position:absolute;inset:0;z-index:2;
  width:100%;max-width:var(--maxw);margin:0 auto;
  /* content column left edge — aligned with the headline indent (20.79%) so the
     wordmark + bottom-left cluster line up with the headline above; tick gutter ~4.37% */
  --col-l:20.79%;
  --tick-l:4.37%;
  --stat-r:1.32%;
}

/* far-left gutter tick-mark index labels — faint white, short leading dash */
.hero__tick{
  position:absolute;left:var(--tick-l);z-index:3;
  font-family:var(--f-mono);font-size:11px;letter-spacing:-.2px;
  color:rgba(255,255,255,.62);text-transform:uppercase;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.hero__tick::before{
  content:"";width:14px;height:1px;background:rgba(255,255,255,.5);display:inline-block;
}
.hero__tick--1{top:20.33%}
.hero__tick--2{top:39.68%}
.hero__tick--3{top:63.03%}

/* headline — upper-left content column, indented past the wordmark, white w/ orange period */
.hero__headline{
  position:absolute;left:20.79%;top:20.33%;z-index:3;
  font-weight:500;line-height:1.06;letter-spacing:-.04em;
  font-size:clamp(26px,3.2vw,48px);max-width:38ch;width:37%;
  color:var(--c-white);
}
.hero__dot{color:var(--c-accent)}

/* upper-right stat */
.hero__stat{
  position:absolute;right:var(--stat-r);top:18.30%;z-index:3;
  text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end;
}
.hero__stat-num{font-family:var(--f-display);font-weight:600;font-size:clamp(34px,4vw,60px);color:var(--c-accent);letter-spacing:-.04em;line-height:.95}
.hero__stat-label{font-family:var(--f-mono);font-size:12px;letter-spacing:-.4px;color:var(--c-sub);text-transform:uppercase;line-height:1.4;opacity:.85}

/* giant wordmark — lower-middle, left-aligned, sized to leave clear right margin */
.hero__wordmark{
  position:absolute;left:var(--col-l);top:39.68%;z-index:3;
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(40px,5.7vw,82px);line-height:.9;letter-spacing:-.05em;
  white-space:nowrap;
}
.hero__wordmark .brand-slash{font-weight:500;opacity:.9}

/* bottom-left cluster: mono paragraph -> locale/clock -> buttons */
.hero__bl{
  position:absolute;left:var(--col-l);top:63.03%;z-index:3;
  display:flex;flex-direction:column;gap:0;align-items:flex-start;max-width:40ch;
}
/* spacing tuned to the template's vertical marks: para -> locale -> buttons */
.hero__bl .hero__locale{margin-top:48px}
.hero__bl .hero__cta{margin-top:56px}
.hero__microcopy{
  font-family:var(--f-mono);font-size:13px;letter-spacing:-.4px;
  color:var(--c-sub);text-transform:uppercase;line-height:1.6;text-align:left;margin:0;
}
.hero__locale{
  display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;
  font-family:var(--f-mono);font-size:11px;letter-spacing:-.2px;
  color:var(--c-sub);text-transform:uppercase;opacity:.78;
}
.hero__locale-label{color:var(--c-accent);opacity:.9}
.hero__clock{font-variant-numeric:tabular-nums;color:var(--c-white)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:2px}

/* bottom-right showreel cluster: label -> thumbnail panel -> caption */
.hero__br{
  position:absolute;left:73.08%;right:var(--stat-r);top:58.42%;z-index:3;
  display:flex;flex-direction:column;gap:12px;align-items:stretch;
}
.hero__br-head{
  display:flex;gap:12px;align-items:center;
  font-family:var(--f-mono);font-size:13px;letter-spacing:-.2px;
  color:var(--c-sub);text-transform:uppercase;
}
.hero__br-rule{flex:1;height:1px;background:rgba(255,255,255,.35)}
.hero__br-year{color:var(--c-accent)}
.hero__thumb{
  position:relative;display:block;width:100%;aspect-ratio:387/227;
  border-radius:var(--r-thumb);overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.hero__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.hero__thumb:hover img{transform:scale(1.04)}
.hero__thumb-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,20,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3);color:#fff;
}
.hero__thumb-play svg{width:22px;height:22px;margin-left:2px}
.hero__thumb-cap{
  font-family:var(--f-mono);font-size:12px;letter-spacing:-.2px;
  color:var(--c-sub);text-transform:uppercase;line-height:1.5;margin:0;opacity:.9;
}

/* split char spans */
.char{display:inline-block;will-change:transform,filter,opacity}
/* JS wraps each colour segment's chars in a .charword group; the group is
   nowrap so a word never breaks mid-character. Line wrapping (when the
   container allows it, e.g. the hero wordmark on phones) happens only
   BETWEEN groups: "Dejavu\" / "Wallpaper". */
.charword{display:inline-block;white-space:nowrap}
/* per-char split keeps the wordmark two-tone (orange / white / slash) */
.hero__wordmark .char.brand-slash{font-weight:500;opacity:.9}

/* ============================================================
   2. KINETIC MANIFESTO (pinned scrub)
   ============================================================ */
.manifesto{height:430vh;position:relative;background:var(--c-light)}
.manifesto__sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#0c0d10;
}
.manifesto__bg{position:absolute;inset:-6%;z-index:0;will-change:transform}
.manifesto__bg img{filter:brightness(.6) saturate(1.1)}
.manifesto__bg video{filter:saturate(1.05)}
.manifesto__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,11,14,.62),rgba(10,11,14,.78))}
.manifesto__phrases{position:relative;z-index:2;width:min(94vw,1320px);padding:0 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1.2vh,18px);text-align:center}
.manifesto__phrase{
  width:100%;
  font-family:var(--f-display);font-weight:700;
  /* ref: 160px / line-height 1.2 / letter-spacing -.04em, centered */
  font-size:clamp(48px,11.1vw,160px);line-height:1.1;letter-spacing:-.04em;
  color:#fff;will-change:transform,opacity,filter;
}
.manifesto__phrase--accent{color:var(--c-accent)}
/* per-word blur-in units (JS splits each phrase into .mword>.mword__in) */
.manifesto__phrase .mword{display:inline-block;overflow:visible}
.manifesto__phrase .mword__in{display:inline-block;will-change:transform,filter,opacity}

/* ============================================================
   3. COLLECTIONS — full-bleed panels
   ============================================================ */
.collections{background:var(--c-bg)}
.panel{
  position:relative;height:100svh;min-height:620px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-black);
}
.panel__bg{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.panel__bg img{filter:saturate(1.05)}
.panel__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.05) 35%,rgba(0,0,0,.1) 60%,rgba(0,0,0,.72));
}
.panel__inner{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);
  height:100%;margin:0 auto;padding:100px clamp(24px,6.9vw,100px);
  display:grid;grid-template-rows:auto 1fr auto;
}
.panel__cat{font-family:var(--f-mono);font-size:clamp(14px,1.25vw,18px);letter-spacing:-.05em;color:var(--c-accent);text-transform:uppercase}
.panel__title{
  align-self:center;
  font-family:var(--f-display);font-weight:500;
  /* ref: 80px / weight 500 / line-height 1.1 / letter-spacing -.07em */
  font-size:clamp(44px,6.4vw,80px);line-height:1.1;letter-spacing:-.07em;
  max-width:16ch;
}
.panel__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.panel__spec{font-family:var(--f-mono);font-size:16px;line-height:1.5;letter-spacing:-.05em;color:#fff;text-transform:uppercase}
.panel__count{font-family:var(--f-mono);font-size:16px;letter-spacing:-.05em;color:#fff;text-transform:uppercase}
.panel__chip{
  font-family:var(--f-mono);font-size:12px;letter-spacing:-.4px;text-transform:uppercase;
  background:rgba(255,255,255,.1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
  padding:6px 12px;border-radius:8px;color:#fff;
}
.panel--featured .panel__chip{background:var(--c-accent);border-color:transparent}

/* ============================================================
   4. MORE ROW
   ============================================================ */
.more{
  background:var(--c-bg);padding:120px var(--gutter);
  max-width:var(--maxw);margin:0 auto;
}
.more__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.more__line{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(34px,6vw,84px);line-height:.98;letter-spacing:-.05em;
  color:#fff;transition:color .25s ease;max-width:16ch;
}
.more__line:hover{color:var(--c-accent)}
.more__arrow{
  flex:none;width:clamp(64px,8vw,108px);height:clamp(64px,8vw,108px);
  border-radius:50%;border:1px solid rgba(255,255,255,.3);
  display:grid;place-items:center;color:#fff;transition:.3s var(--ease);
}
.more__arrow svg{width:40%}
.more__arrow:hover{background:var(--c-accent);border-color:transparent;transform:rotate(-45deg)}
.more__sub{margin-top:28px;font-size:13px;color:var(--c-mute2)}

/* ============================================================
   5. STATS / PROOF
   ============================================================ */
.stats{position:relative;background:var(--c-black);overflow:hidden;padding:140px 0 0}
.stats__bg{position:absolute;inset:0;z-index:0;opacity:.5}
.stats__bg img{filter:grayscale(.2) brightness(.5)}
.stats__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--c-black),rgba(0,0,0,.4) 40%,var(--c-black))}
.stats__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) 80px}
.stats__overline{font-size:13px;color:var(--c-mute2);display:block;margin-bottom:48px}
.stats__title{
  /* ref: 96px / weight 500 / line-height 1.0 / letter-spacing -.06em / grey rgb(121,125,130) */
  font-family:var(--f-display);font-weight:500;color:var(--c-mute2);
  font-size:clamp(46px,7vw,96px);line-height:1;letter-spacing:-.06em;max-width:14ch;
}
.stats__sub{margin-top:24px;max-width:48ch;color:var(--c-sub);font-size:clamp(16px,1.4vw,20px);line-height:1.5}
.stats__grid{
  margin-top:90px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:48px;
}
.stat{display:flex;flex-direction:column;gap:18px}
/* ref counter figure: 80px / weight 500 / WHITE / letter-spacing -.07em / lh 1.1 */
.stat__num{font-family:var(--f-display);font-weight:500;color:var(--c-white);font-size:clamp(52px,6vw,80px);line-height:1.1;letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.stat__label{font-size:13px;color:var(--c-sub)}
/* mono "//" micro-eyebrow per stat column, echoing the reference's //KPI label */
.stat__kpi{font-family:var(--f-mono);font-size:13px;letter-spacing:-.05em;color:var(--c-sub);text-transform:uppercase;opacity:.85}

/* ============================================================
   6. HOW IT WORKS (light)
   ============================================================ */
.how{background:var(--c-light);color:var(--c-bg);padding:140px 0}
.how__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.how__overline{font-size:13px;color:var(--c-mute3);display:block;margin-bottom:24px}
.how__title{
  /* ref "services" header: 112px / weight 600 / ink rgb(20,20,20) / letter-spacing -.05em */
  font-family:var(--f-display);font-weight:600;color:var(--c-bg);
  font-size:clamp(40px,7.4vw,104px);line-height:1;letter-spacing:-.05em;max-width:16ch;margin-bottom:56px;
}
.how__list{list-style:none}
.how__item{
  display:flex;align-items:baseline;gap:clamp(16px,4vw,72px);
  border-top:1px solid var(--c-hair);padding:32px 0;
}
.how__num{font-size:16px;color:var(--c-accent);flex:none;width:54px}
.how__name{
  /* ref service-row title: ~112px / weight 500 / letter-spacing -.07em. Ours keeps
     the compact 4-row list but adopts the reference's heavier title scale + tracking. */
  font-family:var(--f-display);font-weight:500;color:var(--c-bg);
  font-size:clamp(34px,6vw,84px);line-height:1;letter-spacing:-.07em;
}

/* ============================================================
   7. FEATURED CTA
   ============================================================ */
.feature-cta{position:relative;min-height:92svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--c-black)}
.feature-cta__bg{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.feature-cta__bg img{filter:brightness(.62) saturate(1.1)}
.feature-cta__scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(80% 80% at 50% 50%,rgba(0,0,0,.35),rgba(0,0,0,.72))}
.feature-cta__inner{position:relative;z-index:2;text-align:center;padding:0 var(--gutter);display:flex;flex-direction:column;align-items:center;gap:36px}
.feature-cta__overline{font-size:13px;color:var(--c-sub)}
.feature-cta__title{
  /* ref CTA heading: weight 500 / ~112px / letter-spacing -.07em. One word ("motion")
     takes the orange accent, echoing the reference's "inspire" treatment. */
  font-family:var(--f-display);font-weight:500;color:#fff;
  font-size:clamp(44px,8vw,112px);line-height:1;letter-spacing:-.07em;max-width:14ch;
}
.feature-cta__title .cta-accent{color:var(--c-accent)}

/* ============================================================
   8. MEMBERSHIPS / PRICING
   ============================================================ */
.plans{background:var(--c-bg);padding:140px 0}
.plans__head{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.plans__overline{font-size:13px;color:var(--c-mute2);display:block;margin-bottom:24px}
.plans__title{
  /* ref: 96px / weight 500 / grey rgb(121,125,130) / letter-spacing -.06em */
  font-family:var(--f-display);font-weight:500;color:var(--c-mute2);
  font-size:clamp(46px,7vw,96px);line-height:1;letter-spacing:-.06em;max-width:14ch;
}
.plans__sub{margin-top:24px;max-width:50ch;color:var(--c-sub);font-size:clamp(16px,1.4vw,20px);line-height:1.5}
.plans__grid{
  max-width:var(--maxw);margin:80px auto 0;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.plan{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-card);padding:36px 32px;
  display:flex;flex-direction:column;gap:24px;position:relative;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.plan:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2)}
.plan--featured{background:var(--c-accent);border-color:transparent;color:#fff}
.plan--featured .plan__tag,.plan--featured .plan__per,.plan--featured .plan__features li{color:rgba(255,255,255,.9)}
/* ref "SAVE 20%" pill: orange-tinted, mono. Our BEST VALUE badge adopts that look. */
.plan__badge{position:absolute;top:20px;right:20px;font-size:11px;letter-spacing:-.04em;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.35);color:#fff;padding:5px 10px;border-radius:6px}
.plan:not(.plan--featured) .plan__badge{background:rgba(255,96,65,.12);border-color:rgba(255,96,65,.5);color:var(--c-accent)}
.plan__head{display:flex;flex-direction:column;gap:8px}
/* ref plan name: ~32px / medium weight */
.plan__name{font-family:var(--f-display);font-weight:600;font-size:32px;letter-spacing:-.04em}
.plan--featured .plan__name{color:#fff}
.plan:not(.plan--featured) .plan__name{color:var(--c-accent)}
/* ref plan eyebrow: Fragment Mono ~13px, mute */
.plan__tag{font-size:13px;letter-spacing:-.05em;color:var(--c-mute1)}
.plan__price{display:flex;align-items:baseline;gap:8px;border-top:1px solid rgba(255,255,255,.12);padding-top:24px}
.plan--featured .plan__price{border-color:rgba(255,255,255,.25)}
/* ref price: 56px / weight 600 / letter-spacing -.05em */
.plan__amount{font-family:var(--f-display);font-weight:600;font-size:clamp(40px,4vw,56px);letter-spacing:-.05em}
.plan__per{font-family:var(--f-mono);font-size:14px;color:var(--c-mute1)}
.plan__features{list-style:none;display:flex;flex-direction:column;gap:14px}
.plan__features li{font-size:13px;letter-spacing:-.4px;color:var(--c-sub);display:flex;gap:10px;text-transform:none}
.plan__features li::before{content:"+";color:var(--c-accent)}
.plan--featured .plan__features li::before{color:#fff}
.plan__btn{margin-top:auto;width:100%}

/* ============================================================
   9. ABOUT
   ============================================================ */
.about{background:var(--c-bg);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);max-width:var(--maxw);margin:0 auto;padding:160px var(--gutter) 120px;align-items:center}
.about__media{aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden}
.about__media img{filter:saturate(1.05)}
.about__overline{font-size:13px;color:var(--c-mute2);display:block;margin-bottom:24px}
.about__title{font-family:var(--f-display);font-weight:500;color:var(--c-mute2);font-size:clamp(36px,6.5vw,96px);line-height:1;letter-spacing:-.06em;margin-bottom:32px}
.about__para{color:var(--c-mute1);font-size:clamp(17px,1.4vw,21px);line-height:1.3;margin-bottom:20px;max-width:52ch}
.about__stats{display:flex;flex-wrap:wrap;gap:28px;margin-top:32px;border-top:1px solid rgba(255,255,255,.12);padding-top:28px}
.about__stats span{font-size:12px;color:var(--c-mute1)}
.about__stats b{color:var(--c-accent);font-family:var(--f-display);font-weight:700;font-size:20px;margin-right:6px}

/* ============================================================
   10. FAQ
   ============================================================ */
.faq{background:var(--c-light);color:var(--c-bg);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,120px);max-width:var(--maxw);margin:0 auto;padding:140px var(--gutter)}
.faq__overline{font-size:13px;color:var(--c-mute3);display:block;margin-bottom:24px}
.faq__title{font-family:var(--f-display);font-weight:500;color:var(--c-mute2);font-size:clamp(40px,6.5vw,96px);line-height:1;letter-spacing:-.06em;margin-bottom:24px}
.faq__sub{color:var(--c-mute3);font-size:16px;line-height:1.5;max-width:36ch}
.faq__list{display:flex;flex-direction:column}
.faq__item{border-top:1px solid var(--c-hair)}
.faq__item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 0;font-family:var(--f-display);font-weight:400;font-size:clamp(18px,1.55vw,22px);letter-spacing:-.04em;color:var(--c-mute3);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__plus{position:relative;flex:none;width:20px;height:20px}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;background:var(--c-accent);transition:transform .3s var(--ease)}
.faq__plus::before{left:0;top:9px;width:20px;height:2px}
.faq__plus::after{left:9px;top:0;width:2px;height:20px}
.faq__item[open] .faq__plus::after{transform:scaleY(0)}
.faq__answer{padding:0 0 18px;color:var(--c-mute3);font-size:16px;line-height:1.6;max-width:60ch}

/* ============================================================
   11. TESTIMONIAL
   ============================================================ */
.testi{background:var(--c-light2);color:var(--c-bg);padding:120px 0}
.testi__inner{max-width:1100px;margin:0 auto;padding:48px var(--gutter);text-align:center}
.testi__inner--alt{border-top:1px solid var(--c-hair)}
.testi__quote{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,4vw,52px);line-height:1.12;letter-spacing:-.04em;color:var(--c-mute2);max-width:22ch;margin:0 auto 24px}
.testi__author{font-size:13px;color:var(--c-mute3)}
.testi__author b{color:var(--c-accent)}

/* ============================================================
   12. JOURNAL
   ============================================================ */
.journal{background:var(--c-bg);padding:140px 0}
.journal__head{max-width:var(--maxw);margin:0 auto 64px;padding:0 var(--gutter)}
.journal__overline{font-size:13px;color:var(--c-mute2);display:block;margin-bottom:24px}
.journal__title{font-family:var(--f-display);font-weight:500;color:var(--c-mute2);font-size:clamp(40px,7vw,96px);line-height:1;letter-spacing:-.06em;max-width:16ch}
.journal__sub{margin-top:20px;color:var(--c-mute1);font-size:18px;line-height:1.3}
.journal__grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{display:flex;flex-direction:column;gap:16px}
.card__media{aspect-ratio:4/3;border-radius:var(--r-thumb);overflow:hidden}
.card__media img{transition:transform .5s var(--ease);filter:saturate(1.05)}
.card:hover .card__media img{transform:scale(1.05)}
.card__meta{display:flex;justify-content:space-between;font-size:12px;color:var(--c-mute2)}
.card__title{font-family:var(--f-display);font-weight:600;font-size:clamp(18px,1.6vw,22px);line-height:1.15;letter-spacing:-.02em;color:#fff;transition:color .25s ease}
.card:hover .card__title{color:var(--c-accent)}

/* ============================================================
   13. NEWSLETTER + FOOTER
   ============================================================ */
.newsletter{background:var(--c-bg);padding:120px 0 100px;border-top:1px solid rgba(255,255,255,.06)}
.newsletter__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.newsletter__title{font-family:var(--f-display);font-weight:600;color:var(--c-mute1);font-size:clamp(34px,4.4vw,56px);line-height:1.1;letter-spacing:-.05em;margin-bottom:28px;max-width:14ch}
.newsletter__form{display:flex;flex-direction:column;gap:20px;max-width:440px}
.newsletter__field{display:flex;align-items:center;gap:16px;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:16px}
.newsletter__input{flex:1;background:none;border:0;outline:none;color:var(--c-sub);font-family:var(--f-display);font-size:18px;letter-spacing:-.5px}
.newsletter__input::placeholder{color:var(--c-mute2)}
/* full-width pill submit — echoes the reference "JOIN OUR NEWSLETTER ->" peach button */
.newsletter__submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border-radius:999px;background:#f7a895;border:0;color:#fff;font-family:var(--f-mono);font-size:13px;text-transform:uppercase;letter-spacing:-.4px;cursor:pointer;transition:background .25s var(--ease)}
.newsletter__submit svg{width:18px}
.newsletter__submit:hover{background:var(--c-accent)}
.newsletter__terms{font-size:16px;color:var(--c-mute2);letter-spacing:-.4px}
.newsletter__terms a{color:var(--c-accent)}
.newsletter__note{font-size:13px;color:var(--c-mute2)}

.footer{background:var(--c-light);color:var(--c-bg);padding:100px var(--gutter) 48px}
.footer__top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:60px;border-bottom:1px solid var(--c-hair);padding-bottom:64px}
.footer__tagline{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2vw,28px);letter-spacing:-.03em;color:var(--c-mute3);margin-bottom:28px;max-width:18ch}
.footer__wordmark{font-family:var(--f-display);font-weight:800;font-size:clamp(48px,7vw,104px);line-height:.9;letter-spacing:-.05em;margin-bottom:24px}
.footer__wordmark .brand-slash{color:var(--c-mute2);font-weight:500}
.footer__desc{color:var(--c-mute3);font-size:15px;line-height:1.5;max-width:42ch}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.footer__col{display:flex;flex-direction:column;gap:14px}
.footer__coltitle{font-size:13px;color:var(--c-mute3);letter-spacing:-.05em;margin-bottom:6px}
.footer__col a{font-size:16px;color:var(--c-accent);letter-spacing:-.05em;transition:opacity .2s ease}
.footer__col a:hover{opacity:.62}
.footer__contact{max-width:var(--maxw);margin:48px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-bottom:1px solid var(--c-hair);padding-bottom:48px}
.footer__chlabel{font-size:13px;color:var(--c-mute3);letter-spacing:-.05em;display:block;margin-bottom:14px}
.footer__chvalue{font-family:var(--f-display);font-weight:500;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.04em;color:var(--c-accent)}
.footer__apps{display:flex;gap:12px;flex-wrap:wrap}
.appbadge{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;border:1px solid var(--c-hair);border-radius:8px;padding:12px 16px;color:var(--c-mute3)}
.footer__bottom{max-width:var(--maxw);margin:32px auto 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--c-mute2)}

/* ============================================================
   REVEAL helpers (JS toggles .is-in)
   ============================================================ */
.reveal-words .word,.reveal-lines .line{display:inline-block;overflow:hidden;vertical-align:top}
/* negative letter-spacing on titles can push the last glyph past the clip box's
   right edge (e.g. the "s" in "Cosmos"); add right-side breathing room and cancel
   it with a matching negative margin so word spacing / left edges stay unchanged */
.reveal-words .word{padding-right:.14em;margin-right:-.14em}
.reveal-words .word>span,.reveal-lines .line>span{display:inline-block;transform:translateY(110%);transition:transform .85s var(--ease)}
.reveal-words.is-in .word>span,.reveal-lines.is-in .line>span{transform:translateY(0)}
/* per-word / per-line stagger (CSS-driven, since GSAP no longer staggers these) */
.reveal-words.is-in .word:nth-child(1)>span{transition-delay:.00s}
.reveal-words.is-in .word:nth-child(2)>span{transition-delay:.05s}
.reveal-words.is-in .word:nth-child(3)>span{transition-delay:.10s}
.reveal-words.is-in .word:nth-child(4)>span{transition-delay:.15s}
.reveal-words.is-in .word:nth-child(5)>span{transition-delay:.20s}
.reveal-words.is-in .word:nth-child(6)>span{transition-delay:.25s}
.reveal-words.is-in .word:nth-child(7)>span{transition-delay:.30s}
.reveal-words.is-in .word:nth-child(n+8)>span{transition-delay:.35s}
.reveal-lines.is-in .line:nth-child(1)>span{transition-delay:0s}
.reveal-lines.is-in .line:nth-child(2)>span{transition-delay:.09s}
.reveal-lines.is-in .line:nth-child(n+3)>span{transition-delay:.18s}
.fade-up{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fade-up.is-in{opacity:1;transform:none}
/* .reveal-melt: major section headings get a per-char blur-from-bottom melt
   reveal driven entirely by GSAP (splitChars + ScrollTrigger). The heading
   text stays visible by default; main.js splits it into .char spans and sets
   the hidden state inline, then tweens it in on scroll-enter. No CSS hidden
   state here so the title never gets stuck if JS is unavailable. */
.reveal-melt{will-change:transform,filter,opacity}
/* .reveal-wordmelt (4 in-scope headings only): per-WORD slide-up + fade,
   measured 1:1 from the reference (inline-block words, no blur). */
.reveal-wordmelt .mword{display:inline-block;overflow:hidden;vertical-align:top}
.reveal-wordmelt .mword__in{display:inline-block;will-change:transform,opacity}

/* ============================================================
   ATMOSPHERIC MOTIFS — tick-rulers, eyebrow dashes, section indexes
   (template's signature ruler ticks + faint mono micro-numbers)
   ============================================================ */
/* row of many thin vertical hairlines */
.tick-ruler{
  --tick-color:rgba(255,255,255,.16);
  width:100%;height:18px;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    var(--tick-color) 0,var(--tick-color) 1px,transparent 1px,transparent 11px);
  background-repeat:repeat-x;background-position:left bottom;background-size:11px 100%;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 60%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 60%,transparent 100%);
  opacity:.7;
}
/* on light sections the ticks need a darker tint */
.how .tick-ruler,.faq .tick-ruler,.footer .tick-ruler,.tick-ruler--light{--tick-color:rgba(20,20,20,.18)}
.tick-ruler--head{margin-top:28px;max-width:760px}
.tick-ruler--panel{margin-top:22px;max-width:520px;--tick-color:rgba(255,255,255,.28)}
.tick-ruler--footer{max-width:var(--maxw);margin:0 auto 44px;height:14px;--tick-color:rgba(20,20,20,.16)}

/* section-head: row holding eyebrow on the left, faint index on the right */
.section-head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.section-head .section-eyebrow,.section-head [class*='__overline']{margin-bottom:0}

/* eyebrow: short orange dash/tick + mono uppercase label */
.section-eyebrow{display:inline-flex;align-items:center;gap:12px}
.section-eyebrow::before{content:'';width:22px;height:2px;background:var(--c-accent);flex:none;border-radius:2px}

/* faint mono section number, e.g. /01 .. /12 */
.section-index{
  font-family:var(--f-mono);font-size:13px;letter-spacing:-.4px;
  color:var(--c-mute2);opacity:.6;flex:none;
}
.section-index--dark{color:var(--c-mute3)}

/* panel head row (cat eyebrow + index) on full-bleed image panels */
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.panel__head .section-index{color:rgba(255,255,255,.7);opacity:.7}
.panel__cat.section-eyebrow::before{background:var(--c-accent)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .nav__links{display:none}
  .nav__contact{display:none}
  .nav__burger{display:flex}
  /* tablet: drop the absolute % map, stack into flow with a modest indent */
  .hero{min-height:auto}
  .hero__inner{position:relative;inset:auto;display:flex;flex-direction:column;gap:30px;height:auto;padding:120px var(--gutter) 56px;--col-l:0px;--tick-l:0px}
  .hero__tick{position:static;margin-bottom:-12px}
  .hero__tick--2,.hero__tick--3{display:none}
  .hero__headline,.hero__stat,.hero__wordmark,.hero__bl,.hero__br{position:static;left:auto;right:auto;top:auto}
  /* stacked: even, comfortable spacing between micro-copy / clock / buttons */
  .hero__bl{gap:20px}
  .hero__bl .hero__locale,.hero__bl .hero__cta{margin-top:0}
  .hero__headline{width:auto;max-width:24ch;order:2}
  .hero__stat{align-items:flex-start;text-align:left;order:1}
  /* allow wrapping only between .charword groups; never mid-word */
  .hero__wordmark{white-space:normal;overflow-wrap:normal;word-break:keep-all;order:3;font-size:clamp(40px,9vw,84px);line-height:.92}
  .hero__bl{order:4;max-width:46ch}
  .hero__br{order:5;max-width:360px}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:40px 24px}
  .plans__grid{grid-template-columns:1fr;max-width:560px}
  .about{grid-template-columns:1fr;gap:48px}
  .about__media{aspect-ratio:16/10;max-height:60vh}
  .faq{grid-template-columns:1fr;gap:48px}
  .journal__grid{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr;gap:48px}
}
@media (max-width:640px){
  /* phone: full stack, tighter spacing */
  .hero__inner{gap:22px;padding:104px var(--gutter) 44px}
  .hero__headline{max-width:100%;font-size:clamp(26px,8vw,34px)}
  /* breathing room above the giant wordmark so it isn't crowded under the headline.
     Wraps at the single <wbr> into two bold lines ("Dejavu\\" / "Wallpaper");
     sized to fill the phone width without overflow. */
  .hero__wordmark{font-size:clamp(48px,15vw,80px);line-height:.92;letter-spacing:-.045em;margin-top:18px}
  .hero__microcopy{text-align:left}
  /* push the FEATURED showreel panel much further down so it never crowds the
     hero woman's face (mouth) in the blue-flower image; clear separation. */
  .hero__br{max-width:100%;margin-top:96px}
  /* lift the hero image so the full face sits comfortably above FEATURED */
  .hero__bg img{object-position:50% 32%}
  .stats__grid{grid-template-columns:1fr 1fr}
  .footer__cols{grid-template-columns:1fr 1fr}
  /* footer wordmark: shrink so "Dejavu\\Wallpaper" fits narrow phones (no x-overflow) */
  .footer__wordmark{font-size:clamp(34px,11vw,64px);overflow-wrap:break-word}
  .footer__contact{grid-template-columns:1fr}
  .journal__grid{grid-template-columns:1fr}
  .more__inner{align-items:flex-start}
}

/* ============================================================
   HERO INTRO — on-load entrance (GSAP-driven).
   These rules only set the *initial hidden* states so there is no
   flash of fully-positioned content before the intro timeline runs.
   Gated on html.intro-pending; JS clears that class at the end and
   GSAP tweens each element to its final resting state. The element
   FINAL positions are untouched (handled by the layout rules above).
   prefers-reduced-motion users never get .intro-pending hidden states
   because main.js skips arming the intro for them.
   ------------------------------------------------------------ */
/* nav clusters */
html.intro-pending .nav__brand,
html.intro-pending .nav__links a,
html.intro-pending .nav__contact{opacity:0;transform:translateY(-12px);will-change:transform,opacity}
/* hero clusters (headline uses its own .reveal-lines hidden state) */
html.intro-pending .hero__stat,
html.intro-pending .hero__tick,
html.intro-pending .hero__bl,
html.intro-pending .hero__br{opacity:0;will-change:transform,opacity,filter}
html.intro-pending .hero__stat,
html.intro-pending .hero__bl,
html.intro-pending .hero__br{transform:translateY(26px)}
html.intro-pending .hero__tick{transform:translateY(14px)}
/* flower bg starts slightly enlarged; scale lives on the <img>, parallax
   translate lives on the .hero__bg wrapper, so they never fight */
html.intro-pending .hero__img{transform:scale(1.15);will-change:transform}
/* giant wordmark chars are hidden by JS (.set) once split; this guards the
   pre-split flash before main.js runs */
html.intro-pending .hero__wordmark{opacity:0}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal-words .word>span,.reveal-lines .line>span{transform:none!important}
  .fade-up{opacity:1!important;transform:none!important}
  .manifesto{height:auto!important}
  .manifesto__sticky{position:relative;height:auto;padding:120px 0;flex-wrap:wrap}
  .manifesto__phrases{display:flex;flex-direction:column;gap:32px;position:relative}
  .manifesto__phrase{position:relative;left:auto;top:auto;transform:none;opacity:1}
  .manifesto__phrase .mword__in{opacity:1!important;transform:none!important;filter:none!important}
  .reveal-melt .char,.reveal-wordmelt .mword__in,[data-split-chars] .char{opacity:1!important;transform:none!important;filter:none!important}
}