/* ============================================================
   SNIPPET. — design tokens
   ============================================================ */
:root{
  --bg: #0E0B12;
  --bg-alt: #16101B;
  --panel: #1C1520;
  --panel-line: rgba(245,239,231,0.10);
  --ink: #F5EFE7;
  --ink-dim: #B4ACB6;
  --ink-faint: #7C7482;
  --crimson: #FF3B5C;
  --cobalt: #4C6FFF;
  --gold: #FFC857;
  --ok: #35D07F;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Space Grotesk", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-elastic: cubic-bezier(.68,-0.6,.32,1.6);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --stripe: repeating-linear-gradient(
    45deg,
    var(--crimson) 0 22px,
    var(--ink) 22px 44px,
    var(--cobalt) 44px 66px,
    var(--ink) 66px 88px
  );
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
  cursor:default;
}
body.has-cursor{cursor:none;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--crimson);color:var(--ink);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--gold);
  display:inline-block;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.95;
  margin:0;
}
p{line-height:1.6;color:var(--ink-dim);margin:0;}
.mono{font-family:var(--font-mono);}

/* ============================================================
   Layout shell
   ============================================================ */
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
section{position:relative;padding:120px 0;}
@media (max-width:720px){
  section{padding:72px 0;}
  .wrap{padding:0 20px;}
}

/* ============================================================
   Barber-pole scroll progress rail (signature element)
   ============================================================ */
.pole-rail{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:min(50vh,420px);
  z-index:500;
  border-radius:6px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.pole-rail__fill{
  position:absolute;
  left:0;right:0;bottom:0;
  height:0%;
  background:var(--stripe);
  background-size:64px 64px;
  animation:pole-spin 1.1s linear infinite;
  transition:height .12s linear;
}
@keyframes pole-spin{
  from{background-position:0 0;}
  to{background-position:0 -64px;}
}
@media (max-width:900px){ .pole-rail{display:none;} }

/* ============================================================
   Custom cursor
   ============================================================ */
.cursor-dot{
  position:fixed;
  top:0;left:0;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--crimson);
  pointer-events:none;
  z-index:9998;
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease-out),height .25s var(--ease-out),background .25s var(--ease-out);
  mix-blend-mode:difference;
  display:none;
}
.cursor-ring{
  position:fixed;
  top:0;left:0;
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid var(--ink);
  pointer-events:none;
  z-index:9997;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease-out),height .3s var(--ease-out),opacity .3s;
  mix-blend-mode:difference;
  display:none;
}
.has-cursor .cursor-dot,.has-cursor .cursor-ring{display:block;}
.cursor-dot.is-hover{width:6px;height:6px;background:var(--gold);}
.cursor-ring.is-hover{width:64px;height:64px;}

/* ============================================================
   Page transition — converge to centre, release back out.
   Same idea as every reveal on the site: things arrive from the
   edge they belong to. Left panel from the left, right panel
   from the right, centre panel from above. One rule, everywhere.
   ============================================================ */
.transition-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  visibility:hidden;
}
.transition-overlay.active{visibility:visible;}
.transition-overlay .stripe{
  position:absolute;
  top:0;bottom:0;
  width:34%;
  transition:transform .55s var(--ease-out);
}
.transition-overlay .stripe.no-anim{transition:none !important;}
.transition-overlay .stripe.cover{transform:translate(0,0) !important;}
.transition-overlay .stripe-left{left:0;background:var(--crimson);transform:translateX(-115%);}
.transition-overlay .stripe-mid{left:33%;background:var(--ink);transform:translateY(-115%);}
.transition-overlay .stripe-right{right:0;background:var(--cobalt);transform:translateX(115%);}
.transition-overlay .mark{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--bg);
  opacity:0;
  transition:opacity .3s ease;
}
.transition-overlay.is-covered .mark{opacity:.55;transition-delay:.25s;}

/* ============================================================
   Nav
   ============================================================ */
.site-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:400;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 32px;
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(14,11,18,.85), rgba(14,11,18,0));
  opacity:0;
  animation:nav-in .6s var(--ease-out) .55s forwards;
}
@keyframes nav-in{to{opacity:1;}}
.brand{
  font-family:var(--font-display);
  font-size:1.4rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  gap:10px;
  opacity:0;
  transform:translateX(-20px);
  animation:from-left .6s var(--ease-out) .6s forwards;
}
@keyframes from-left{to{opacity:1;transform:translateX(0);}}
@keyframes from-right{to{opacity:1;transform:translateX(0);}}
.brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--crimson);
  box-shadow:0 0 0 4px rgba(255,59,92,.18);
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.35;}}

.nav-links{
  display:flex;gap:36px;align-items:center;
  opacity:0;
  transform:translateX(20px);
  animation:from-right .6s var(--ease-out) .6s forwards;
}
.nav-links a{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-dim);
  position:relative;
  padding:6px 2px;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0%;height:1px;
  background:var(--gold);
  transition:width .35s var(--ease-out);
}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{width:100%;}
.nav-links a.is-current{color:var(--gold);}
@media (max-width:640px){
  .nav-links{gap:18px;}
  .nav-links span.sep{display:none;}
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --mx:50%;--my:50%;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 30px;
  border-radius:100px;
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid var(--panel-line);
  background:var(--panel);
  color:var(--ink);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s var(--ease-elastic), border-color .3s;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(120px circle at var(--mx) var(--my), var(--crimson), transparent 70%);
  opacity:0;
  transition:opacity .4s;
}
.btn:hover::before{opacity:1;}
.btn:hover{border-color:transparent;}
.btn-primary{background:var(--crimson);border-color:var(--crimson);color:#1a0508;font-weight:700;}
.btn-primary::before{background:radial-gradient(120px circle at var(--mx) var(--my), var(--gold), transparent 70%);}
.btn-primary:hover{color:#1a0508;}
.btn-ghost{background:transparent;}
.btn svg{width:16px;height:16px;}

/* ============================================================
   HERO — index
   ============================================================ */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:120px;
  position:relative;
}
.hero-bg-stripe{
  position:absolute;
  top:0;right:-10%;
  width:60%;height:140%;
  background:var(--stripe);
  background-size:90px 90px;
  opacity:.08;
  transform:rotate(8deg);
  pointer-events:none;
  animation:pole-spin 6s linear infinite;
}
.hero-kicker{margin-bottom:28px;}
.hero h1{
  font-size:clamp(3rem,9vw,7.4rem);
  color:var(--ink);
}
.hero h1 .accent{color:var(--crimson);}
.hero h1 .line{display:block;overflow:hidden;}
.hero h1 .line span{display:block;transform:translateY(110%);animation:line-up .9s var(--ease-out) forwards;}
.hero h1 .line:nth-child(1) span{animation-delay:.15s;}
.hero h1 .line:nth-child(2) span{animation-delay:.30s;}
.hero h1 .line:nth-child(3) span{animation-delay:.45s;}
@keyframes line-up{to{transform:translateY(0);}}

.hero-sub{
  max-width:520px;
  margin-top:32px;
  font-size:1.05rem;
  opacity:0;
  animation:fade-up .8s var(--ease-out) forwards;
  animation-delay:.8s;
}
.hero-cta{
  margin-top:44px;
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  opacity:0;
  animation:fade-up .8s var(--ease-out) forwards;
  animation-delay:1s;
}
@keyframes fade-up{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

.scramble{font-family:var(--font-mono);}

/* ============================================================
   Marquee
   ============================================================ */
.marquee-band{
  border-top:1px solid var(--panel-line);
  border-bottom:1px solid var(--panel-line);
  padding:26px 0;
  overflow:hidden;
  background:var(--bg-alt);
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:60px;
  animation:marquee 26s linear infinite;
}
.marquee-band:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{
  font-family:var(--font-display);
  font-size:1.6rem;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  gap:60px;
  white-space:nowrap;
}
.marquee-track span::after{
  content:"";
  width:28px;height:1px;
  background:var(--crimson);
  display:inline-block;
}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============================================================
   Section headers
   ============================================================ */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  margin-bottom:64px;
  flex-wrap:wrap;
}
.section-head h2{font-size:clamp(2.2rem,5vw,3.6rem);}
.section-head p{max-width:360px;}

/* ============================================================
   Scroll reveal — one rule: enter from where you belong.
   Default rises from below. Left-column content slides from the
   left, right-column content from the right, so a row of cards
   visually converges into place instead of just fading in.
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(44px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.dir-left{transform:translateX(-56px);}
.reveal.dir-right{transform:translateX(56px);}
.reveal.dir-scale{transform:translateY(0) scale(.92);}
.reveal.in-view{opacity:1;transform:translate(0,0) scale(1);}
.reveal-1.in-view{transition-delay:.08s;}
.reveal-2.in-view{transition-delay:.18s;}
.reveal-3.in-view{transition-delay:.28s;}
.reveal-4.in-view{transition-delay:.38s;}

/* ============================================================
   Technique grid (home)
   ============================================================ */
.tech-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:900px){.tech-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.tech-grid{grid-template-columns:1fr;}}

.tilt-card{
  position:relative;
  padding:34px 26px;
  border-radius:20px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  transform-style:preserve-3d;
  transition:transform .12s var(--ease-soft), border-color .3s;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.tilt-card:hover{border-color:rgba(255,59,92,.4);}
.tilt-card__glow{
  position:absolute;inset:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,59,92,.16), transparent 60%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.tilt-card:hover .tilt-card__glow{opacity:1;}
.tilt-card__num{font-family:var(--font-mono);color:var(--ink-faint);font-size:.75rem;}
.tilt-card h3{font-size:1.5rem;margin-top:14px;}
.tilt-card p{margin-top:10px;font-size:.92rem;}
.tilt-card__tag{
  margin-top:20px;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}

/* ============================================================
   Magnetic buttons row
   ============================================================ */
.magnet-row{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:20px;
}
.magnet{
  padding:22px 34px;
  border-radius:100px;
  border:1px solid var(--panel-line);
  background:var(--panel);
  font-family:var(--font-mono);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  transition:background .3s, color .3s, border-color .3s;
  cursor:pointer;
}
.magnet:hover{background:var(--cobalt);border-color:var(--cobalt);color:#fff;}

/* ============================================================
   Footer CTA
   ============================================================ */
.footer-cta{
  text-align:center;
  padding:140px 0 60px;
}
.footer-cta h2{font-size:clamp(2.4rem,7vw,5rem);}
.footer-cta h2 .accent{color:var(--crimson);}
site-footer{}
.site-footer{
  border-top:1px solid var(--panel-line);
  padding:40px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}
.site-footer p{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-faint);}

/* ============================================================
   PLAYBOOK page — catalog cards
   ============================================================ */
.category-label{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 40px;
}
.category-label .idx{
  font-family:var(--font-mono);
  color:var(--crimson);
  font-size:.85rem;
}
.category-label h2{font-size:clamp(1.8rem,4vw,2.6rem);}
.category-label::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--panel-line);
}

.demo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:22px;
  margin-bottom:110px;
}
.demo-card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:18px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transition:transform .4s var(--ease-out), border-color .3s, box-shadow .4s var(--ease-out);
}
.demo-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,59,92,.35);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
}
.demo-card__stage{
  height:180px;
  border-radius:12px;
  background:var(--bg-alt);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.demo-card__meta{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.demo-card__meta h3{font-size:1.15rem;}
.demo-card__meta p{font-size:.85rem;margin-top:6px;}
.replay-btn{
  flex:none;
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--panel-line);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .4s var(--ease-elastic), background .3s;
}
.replay-btn:hover{background:var(--crimson);border-color:var(--crimson);}
.replay-btn.spin{animation:spin-once .6s var(--ease-out);}
@keyframes spin-once{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.replay-btn svg{width:16px;height:16px;}

/* -- text scramble demo -- */
.demo-scramble{font-family:var(--font-mono);font-size:1.1rem;color:var(--gold);letter-spacing:.05em;}

/* -- stagger grid demo -- */
.stagger-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:80%;}
.stagger-mini i{
  display:block;height:26px;border-radius:6px;
  background:var(--crimson);
  opacity:0;
  transform:translateY(14px) scale(.6);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.stagger-mini.run i{opacity:1;transform:translateY(0) scale(1);}
.stagger-mini i{background:var(--crimson);}
.stagger-mini i:nth-child(1){transition-delay:0s;filter:brightness(1.3);}
.stagger-mini i:nth-child(2){transition-delay:.06s;filter:brightness(1.15);}
.stagger-mini i:nth-child(3){transition-delay:.12s;filter:brightness(1);}
.stagger-mini i:nth-child(4){transition-delay:.18s;filter:brightness(.9);}
.stagger-mini i:nth-child(5){transition-delay:.24s;filter:brightness(.9);}
.stagger-mini i:nth-child(6){transition-delay:.3s;filter:brightness(1);}
.stagger-mini i:nth-child(7){transition-delay:.36s;filter:brightness(1.15);}
.stagger-mini i:nth-child(8){transition-delay:.42s;filter:brightness(1.3);}

/* -- skeleton to content -- */
.skel-wrap{width:78%;}
.skel-line{height:12px;border-radius:6px;background:linear-gradient(90deg,#2a212f 25%,#372c3d 37%,#2a212f 63%);background-size:400% 100%;animation:skel-shine 1.4s ease infinite;margin-bottom:10px;}
.skel-line:nth-child(1){width:60%;}
.skel-line:nth-child(2){width:100%;}
.skel-line:nth-child(3){width:80%;}
@keyframes skel-shine{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
.skel-wrap.loaded .skel-line{animation:none;background:transparent;height:auto;color:var(--ink-dim);font-family:var(--font-mono);font-size:.78rem;}
.skel-wrap.loaded .skel-line::before{content:attr(data-text);}

/* -- reveal on scroll mini (auto replays via IO) -- */
.scrollreveal-mini{
  width:70%;height:70px;border-radius:10px;background:var(--panel-line);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.scrollreveal-mini.in-view{opacity:1;transform:translateY(0);}

/* -- parallax depth mini -- */
.parallax-mini{position:relative;width:100%;height:100%;overflow:hidden;}
.parallax-mini .layer{position:absolute;border-radius:50%;}
.parallax-mini .l1{width:120px;height:120px;background:radial-gradient(circle,var(--crimson),transparent 70%);top:-20px;left:20%;opacity:.6;}
.parallax-mini .l2{width:80px;height:80px;background:radial-gradient(circle,var(--cobalt),transparent 70%);bottom:-10px;right:10%;opacity:.6;}
.parallax-mini .l3{width:50px;height:50px;background:radial-gradient(circle,var(--gold),transparent 70%);top:40%;left:50%;opacity:.7;}

/* -- sticky stack mini -- */
.sticky-mini{width:100%;height:180px;overflow-y:auto;border-radius:10px;scrollbar-width:thin;}
.sticky-mini .stick-card{
  position:sticky;top:0;
  height:160px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  border:1px solid var(--panel-line);
  margin-bottom:14px;
}
.sticky-mini .stick-card:nth-child(1){background:#231A28;}
.sticky-mini .stick-card:nth-child(2){background:#2A1B23;}
.sticky-mini .stick-card:nth-child(3){background:#1B2136;}

/* -- magnetic mini -- */
.magnet-mini-btn{
  padding:14px 26px;border-radius:100px;border:1px solid var(--panel-line);
  font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;
  background:var(--bg-alt);
}

/* -- 3D tilt mini -- */
.tilt-mini{
  width:120px;height:120px;border-radius:16px;
  background:linear-gradient(135deg,var(--crimson),var(--cobalt));
  transform-style:preserve-3d;
  transition:transform .15s var(--ease-soft);
}

/* -- flip card demo -- */
.flip-mini{width:130px;height:150px;perspective:800px;cursor:pointer;}
.flip-mini__inner{position:relative;width:100%;height:100%;transition:transform .7s var(--ease-elastic);transform-style:preserve-3d;}
.flip-mini.flipped .flip-mini__inner{transform:rotateY(180deg);}
.flip-mini__face{position:absolute;inset:0;border-radius:14px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;text-align:center;padding:10px;}
.flip-mini__front{background:var(--panel);border:1px solid var(--panel-line);}
.flip-mini__back{background:var(--crimson);color:#1a0508;transform:rotateY(180deg);}

/* -- liquid blob demo -- */
.blob-mini{
  width:120px;height:120px;
  background:linear-gradient(135deg,var(--gold),var(--crimson));
  animation:blob-morph 6s var(--ease-soft) infinite;
}
@keyframes blob-morph{
  0%,100%{border-radius:42% 58% 65% 35% / 45% 45% 55% 55%;}
  25%{border-radius:65% 35% 40% 60% / 60% 40% 60% 40%;}
  50%{border-radius:35% 65% 55% 45% / 35% 65% 35% 65%;}
  75%{border-radius:58% 42% 32% 68% / 55% 35% 65% 45%;}
}

/* -- clip morph demo -- */
.clip-mini{
  width:70%;height:70%;background:linear-gradient(135deg,var(--cobalt),var(--gold));
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  transition:clip-path .6s var(--ease-out);
}
.demo-card:hover .clip-mini,.clip-mini.run{clip-path:polygon(15% 0,100% 0,85% 100%,0 100%);}

/* -- elastic scale demo -- */
.elastic-mini{
  width:100px;height:100px;border-radius:20px;background:var(--ok);
  transition:transform .6s var(--ease-elastic);
}
.elastic-mini.pulse{transform:scale(1.35) rotate(6deg);}

/* -- blur focus demo -- */
.blur-mini-wrap{width:80%;height:100px;display:flex;align-items:center;justify-content:center;}
.blur-mini{
  font-family:var(--font-display);font-size:1.6rem;color:var(--ink-faint);
  filter:blur(6px);transform:scale(.96);
  transition:filter .5s var(--ease-out), transform .5s var(--ease-out), color .5s;
}
.demo-card:hover .blur-mini,.blur-mini.run{filter:blur(0);transform:scale(1);color:var(--ink);}

/* -- converge / release (page-to-page) illustration -- */
.curtain-mini{width:100%;height:100%;position:relative;overflow:hidden;}
.curtain-mini i{position:absolute;top:0;bottom:0;width:34%;}
.curtain-mini i:nth-child(1){left:0;background:var(--crimson);transform:translateX(-115%);}
.curtain-mini i:nth-child(2){left:33%;background:var(--ink);transform:translateY(-115%);}
.curtain-mini i:nth-child(3){right:0;background:var(--cobalt);transform:translateX(115%);}
.curtain-mini.run i:nth-child(1){animation:conv-left 1.5s var(--ease-out);}
.curtain-mini.run i:nth-child(2){animation:conv-mid 1.5s var(--ease-out) .08s;}
.curtain-mini.run i:nth-child(3){animation:conv-right 1.5s var(--ease-out) .16s;}
@keyframes conv-left{0%{transform:translateX(-115%);}45%,55%{transform:translateX(0);}100%{transform:translateX(-115%);}}
@keyframes conv-mid{0%{transform:translateY(-115%);}45%,55%{transform:translateY(0);}100%{transform:translateY(-115%);}}
@keyframes conv-right{0%{transform:translateX(115%);}45%,55%{transform:translateX(0);}100%{transform:translateX(115%);}}

/* pole mini */
.pole-mini{width:16px;height:100px;border-radius:8px;overflow:hidden;background:var(--stripe);background-size:34px 34px;animation:pole-spin .8s linear infinite;}

/* ============================================================
   WORK page — vertical mock browsers
   ============================================================ */
.vertical-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
@media (max-width:980px){.vertical-grid{grid-template-columns:1fr;}}
.mock-browser{
  border-radius:16px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  overflow:hidden;
  transition:transform .4s var(--ease-out), border-color .3s, box-shadow .4s var(--ease-out);
}
.mock-browser:hover{
  transform:translateY(-6px);
  border-color:rgba(76,111,255,.35);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
}
.mock-browser__bar{
  padding:12px 14px;
  display:flex;
  gap:6px;
  border-bottom:1px solid var(--panel-line);
}
.mock-browser__bar span{width:9px;height:9px;border-radius:50%;background:var(--panel-line);}
.mock-browser__screen{
  height:280px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
}
.mock-browser__label{padding:18px 20px;border-top:1px solid var(--panel-line);}
.mock-browser__label .eyebrow{margin-bottom:6px;}
.mock-browser__label h3{font-size:1.2rem;}

/* barber mock */
.mock-barber{background:linear-gradient(160deg,#1a1116,#0e0b12);}
.mock-barber .pole-strip{
  position:absolute;left:0;top:0;bottom:0;width:14px;
  background:var(--stripe);background-size:34px 34px;
  animation:pole-spin 1s linear infinite;
}
.mock-barber h4{
  font-family:var(--font-display);
  font-size:1.8rem;color:var(--ink);
  opacity:0;transform:translateY(16px);
  animation:mock-in .8s var(--ease-out) forwards;
  animation-play-state:paused;
}
.mock-browser:hover .mock-barber h4{animation-play-state:running;}
@keyframes mock-in{to{opacity:1;transform:translateY(0);}}

/* beauty mock */
.mock-beauty{background:radial-gradient(circle at 50% 30%,#241722,#0e0b12 75%);}
.mock-beauty .sparkle{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:0;}
.mock-beauty .sparkle:nth-child(1){top:20%;left:20%;animation:sparkle 2s ease-in-out infinite;}
.mock-beauty .sparkle:nth-child(2){top:60%;left:75%;animation:sparkle 2s ease-in-out infinite .5s;}
.mock-beauty .sparkle:nth-child(3){top:75%;left:30%;animation:sparkle 2s ease-in-out infinite 1s;}
.mock-beauty .sparkle:nth-child(4){top:30%;left:65%;animation:sparkle 2s ease-in-out infinite 1.5s;}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.4);}50%{opacity:1;transform:scale(1.3);}}
.mock-beauty h4{font-family:var(--font-display);font-size:1.6rem;background:linear-gradient(90deg,var(--gold),var(--crimson),var(--gold));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine-text 3s linear infinite;}
@keyframes shine-text{to{background-position:200% center;}}

/* freelancer mock */
.mock-freelance{background:#0e0b12;}
.mock-freelance .typewriter{
  font-family:var(--font-mono);font-size:.95rem;color:var(--ok);
  border-right:2px solid var(--ok);
  white-space:nowrap;overflow:hidden;width:0;
  animation:type 2.6s steps(22) infinite alternate, caret-blink .8s step-end infinite;
}
@keyframes type{to{width:15ch;}}
@keyframes caret-blink{50%{border-color:transparent;}}

/* ============================================================
   Pricing
   ============================================================ */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:980px){.pricing-grid{grid-template-columns:1fr;}}
.price-card{
  --mx:50%;--my:50%;
  position:relative;
  padding:36px 28px;
  border-radius:20px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  transform-style:preserve-3d;
  transition:transform .12s var(--ease-soft), border-color .3s;
  overflow:hidden;
}
.price-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(220px circle at var(--mx) var(--my), rgba(76,111,255,.18), transparent 60%);
  opacity:0;transition:opacity .4s;
}
.price-card:hover::before{opacity:1;}
.price-card:hover{border-color:rgba(76,111,255,.4);}
.price-card.is-featured{border-color:var(--crimson);}
.price-card.is-featured::after{
  content:"Most booked";
  position:absolute;top:18px;right:-32px;
  background:var(--crimson);color:#1a0508;
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 40px;transform:rotate(35deg);
}
.price-card h3{font-size:1.3rem;}
.price-card .amount{font-family:var(--font-display);font-size:2.6rem;margin:16px 0;color:var(--ink);}
.price-card .amount sup{font-family:var(--font-mono);font-size:.9rem;color:var(--ink-faint);}
.price-card ul{list-style:none;padding:0;margin:20px 0 28px;display:flex;flex-direction:column;gap:10px;}
.price-card li{font-size:.9rem;color:var(--ink-dim);display:flex;gap:10px;align-items:flex-start;}
.price-card li::before{content:"—";color:var(--gold);}

/* ============================================================
   Testimonials marquee
   ============================================================ */
.testi-track{display:flex;gap:24px;width:max-content;animation:marquee 40s linear infinite;}
.testi-band:hover .testi-track{animation-play-state:paused;}
.testi-card{
  width:340px;flex:none;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;
  padding:26px;
  transition:transform .4s var(--ease-out), border-color .3s;
}
.testi-card:hover{transform:translateY(-6px);border-color:rgba(255,200,87,.35);}
.testi-card p{color:var(--ink);font-size:.95rem;}
.testi-card .who{margin-top:16px;font-family:var(--font-mono);font-size:.75rem;color:var(--ink-faint);}

/* ============================================================
   Contact form
   ============================================================ */
.contact-shell{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
@media (max-width:900px){.contact-shell{grid-template-columns:1fr;}}
.field{
  position:relative;
  margin-bottom:26px;
}
.field input,.field select,.field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--panel-line);
  padding:14px 2px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  outline:none;
  transition:border-color .3s;
  appearance:none;
}
.field select{cursor:pointer;}
.field select option{background:var(--panel);}
.field label{
  position:absolute;
  left:2px;top:14px;
  color:var(--ink-faint);
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.04em;
  pointer-events:none;
  transition:transform .3s var(--ease-out), color .3s, font-size .3s;
  transform-origin:left;
}
.field input:focus,.field textarea:focus{border-color:var(--crimson);}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field.has-value label{
  transform:translateY(-22px) scale(.82);
  color:var(--gold);
}
.field .underline{
  position:absolute;left:0;bottom:0;height:1px;width:0%;
  background:var(--crimson);
  transition:width .4s var(--ease-out);
}
.field input:focus ~ .underline,.field textarea:focus ~ .underline{width:100%;}

.submit-btn{
  position:relative;
  width:100%;
  padding:18px;
  border-radius:100px;
  border:none;
  background:var(--crimson);
  color:#1a0508;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  overflow:hidden;
  transition:background .3s, transform .2s;
}
.submit-btn:active{transform:scale(.98);}
.submit-btn .label{display:inline-flex;align-items:center;gap:10px;transition:opacity .25s, transform .25s;}
.submit-btn .check{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.6);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-elastic);
}
.submit-btn.is-sent{background:var(--ok);}
.submit-btn.is-sent .label{opacity:0;transform:translateY(-10px);}
.submit-btn.is-sent .check{opacity:1;transform:scale(1);}
.submit-btn svg{width:16px;height:16px;}

.contact-side .eyebrow{margin-bottom:20px;}
.contact-side h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:20px;}
.contact-info{margin-top:36px;display:flex;flex-direction:column;gap:16px;}
.contact-info .row{display:flex;justify-content:space-between;border-bottom:1px solid var(--panel-line);padding-bottom:14px;font-family:var(--font-mono);font-size:.82rem;}
.contact-info .row span:first-child{color:var(--ink-faint);}

/* spinner utility */
.spin-loop{animation:spin-once 1s linear infinite;}