/* ============ TOKENS ============ */
:root{
  --bg:#000;
  --bg-soft:#0A0A0A;
  --bg-card:#131313;
  --bg-elevated:#1A1A1A;
  --surface:rgba(255,255,255,.03);
  --surface-hi:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.08);
  --border-hi:rgba(255,255,255,.16);
  --text:#fff;
  --text-soft:rgba(255,255,255,.85);
  --muted:rgba(255,255,255,.55);
  --dim:rgba(255,255,255,.35);
  --faint:rgba(255,255,255,.18);
  --available:#22C55E;

  --gmod:#2563EB;
  --fivem:#EA580C;
  --roblox:#DC2626;
  --cyan:#06B6D4;
  --violet:#8B5CF6;
  --tx-accent:#4FC9EC;

  --container: 1340px;
  --pad-x: clamp(20px, 4vw, 48px);
  --section-y: clamp(80px, 12vw, 160px);
  --ease: cubic-bezier(.22,1,.36,1);

  --font-sans: "Geist", "Inter", system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y proximity}
html,body{margin:0;padding:0;background:#04060e;color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden;background:radial-gradient(ellipse 120% 80% at 50% 0%, #0a1228 0%, #050813 40%, #03050d 100%) fixed}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:#fff;color:#000}

/* ============ SMOKE WAVE BG ============ */
#smoke{
  position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(40,70,180,.12), transparent 70%),
    radial-gradient(ellipse 70% 50% at 80% 70%, rgba(80,50,180,.10), transparent 65%),
    #04060e;
  --smoke-opacity:1;
  pointer-events:none;
}
.blob{
  position:absolute;border-radius:50%;
  mix-blend-mode:screen;
  will-change:transform;
  opacity:var(--smoke-opacity);
}
.blob.b1{
  width:80vw;height:80vw;left:-20vw;top:-15vw;
  background:radial-gradient(circle at center, rgba(110,150,255,.20) 0%, rgba(70,100,220,.08) 30%, transparent 70%);
  filter:blur(120px);
  animation:drift-1 24s ease-in-out infinite;
}
.blob.b2{
  width:70vw;height:70vw;right:-15vw;top:5vw;
  background:radial-gradient(circle at center, rgba(140,110,240,.16) 0%, rgba(90,70,200,.06) 30%, transparent 70%);
  filter:blur(140px);
  animation:drift-2 32s ease-in-out infinite;
}
.blob.b3{
  width:90vw;height:90vw;left:-10vw;top:30vh;
  background:radial-gradient(circle at center, rgba(255,255,255,.14) 0%, rgba(50,80,180,.05) 30%, transparent 70%);
  filter:blur(160px);
  animation:drift-3 28s ease-in-out infinite;
}
.blob.b4{
  width:60vw;height:60vw;right:5vw;top:50vh;
  background:radial-gradient(circle at center, rgba(120,100,230,.16) 0%, rgba(70,60,180,.06) 30%, transparent 70%);
  filter:blur(110px);
  animation:drift-4 18s ease-in-out infinite;
}
.blob.b5{
  width:75vw;height:75vw;left:15vw;bottom:-10vw;
  background:radial-gradient(circle at center, rgba(70,110,220,.14) 0%, rgba(50,80,180,.05) 30%, transparent 70%);
  filter:blur(150px);
  animation:drift-5 22s ease-in-out infinite;
}
.blob.b6{
  width:55vw;height:55vw;right:-10vw;bottom:5vw;
  background:radial-gradient(circle at center, rgba(150,120,240,.12) 0%, rgba(90,70,200,.04) 30%, transparent 70%);
  filter:blur(130px);
  animation:drift-6 30s ease-in-out infinite;
}
@keyframes drift-1 {0%,100%{transform:translate(-8%,-12%) scale(1)}50%{transform:translate(12%,8%) scale(1.15)}}
@keyframes drift-2 {0%,100%{transform:translate(8%,4%) scale(1.1)}50%{transform:translate(-10%,14%) scale(.95)}}
@keyframes drift-3 {0%,100%{transform:translate(-6%,4%) scale(.95)}50%{transform:translate(14%,-10%) scale(1.2)}}
@keyframes drift-4 {0%,100%{transform:translate(6%,-8%) scale(1.05)}50%{transform:translate(-14%,10%) scale(.9)}}
@keyframes drift-5 {0%,100%{transform:translate(-10%,6%) scale(1)}50%{transform:translate(8%,-12%) scale(1.18)}}
@keyframes drift-6 {0%,100%{transform:translate(4%,8%) scale(1.08)}50%{transform:translate(-12%,-8%) scale(.92)}}

/* Premium SVG turbulence smoke layer */
.smoke-svg{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.85;mix-blend-mode:screen;
  pointer-events:none;
}
body.scrolled .smoke-svg{opacity:.35}

/* grain texture for film-like depth */
.smoke-grain{
  position:absolute;inset:0;pointer-events:none;
  opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* vignette for depth */
.smoke-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* dim smoke after hero scroll */
body.scrolled #smoke{--smoke-opacity:.5}

/* ============ CURSOR (disabled — native cursor) ============ */

/* ============ CURSOR HALO ============ */
#cursor-halo{
  position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;
  pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(circle at center, rgba(120,150,255,.10) 0%, rgba(120,150,255,.05) 30%, transparent 65%);
  filter:blur(40px);
  mix-blend-mode:screen;
  transition:opacity .4s var(--ease-spring);
  will-change:transform,opacity;
}
@media (hover:none){
  #cursor-halo{display:none}
}

/* ============ SCROLL PROGRESS BAR ============ */
#scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:100;
  pointer-events:none;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.03), transparent);
}
#scroll-progress .sp-bar{
  display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.85), rgba(255,255,255,.3));
  box-shadow:0 0 12px rgba(255,255,255,.35);
  transition:transform .15s linear;
}

/* ============ LAYOUT ============ */
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--section-y);position:relative;scroll-snap-align:start;scroll-snap-stop:normal}
.hero,.cta-final{scroll-snap-align:start}

/* ============ TYPE ============ */
.h1{
  font-weight:500;letter-spacing:-.03em;line-height:1.0;
  font-size:clamp(3rem, 7vw, 6rem);
  margin:0;text-wrap:balance;
}
.h2{
  font-weight:500;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(2.25rem, 5vw, 4.25rem);
  margin:0;text-wrap:balance;
}
.h3{
  font-weight:500;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.5rem, 2.4vw, 2rem);
  margin:0;
}
.eyebrow{
  font-family:var(--font-mono);font-weight:500;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.mono{font-family:var(--font-mono)}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.body{font-size:17px;line-height:1.55;color:var(--muted);font-weight:400}
.body strong{color:var(--text-soft);font-weight:500}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  padding:18px 0;
  transition:background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:var(--border);
  padding:12px 0;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav .brand{font-weight:600;font-size:18px;letter-spacing:-.02em;color:#fff;display:flex;align-items:center;gap:10px}
.nav .brand .mark{
  width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;
}
.nav .brand .mark svg{display:block;width:100%;height:100%}
.nav ul{display:flex;list-style:none;margin:0;padding:0;gap:8px;align-items:center}
.nav ul a{
  display:inline-block;padding:10px 18px;border-radius:999px;
  font-size:14px;font-weight:500;color:var(--muted);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav ul a:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-right{display:flex;align-items:center;gap:10px}
.lang-switch{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  background:rgba(20,20,22,.45);
  border:1px solid var(--border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--muted);
  cursor:pointer;
  transition:background .25s var(--ease-spring), border-color .25s var(--ease-spring), color .25s var(--ease-spring);
}
.lang-switch:hover{background:rgba(40,40,44,.5);border-color:var(--border-hi);color:#fff}
.lang-switch .lang-opt{padding:0 2px;transition:color .25s var(--ease-spring)}
.lang-switch .lang-opt.active{color:#fff}
.lang-switch .lang-sep{opacity:.4}
.nav .cta{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  background:rgba(20,20,20,.6);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
  color:#fff;font-weight:500;font-size:14px;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.nav .cta::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  transform:translateX(-100%);transition:transform .8s var(--ease);
  pointer-events:none;
}
.nav .cta:hover{background:rgba(255,255,255,.92);color:#000;border-color:#fff}
.nav .cta:hover::before{transform:translateX(100%)}
/* Nav layout on mobile: prevent the CTA text from wrapping (which made the
   nav tall enough that the hero pill-eyebrow ended up behind it), and
   compress the nav controls so everything fits on one line on phones. */
.nav .cta{white-space:nowrap}
@media (max-width:800px){
  .nav ul{display:none}
  .nav-inner{gap:8px}
  .nav .brand{font-size:16px}
  .nav .cta{padding:10px 14px;font-size:13px}
  .lang-switch{padding:6px 10px}
}

/* ============ PILL / EYEBROW BADGE ============ */
.pill-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(20,20,20,.6);backdrop-filter:blur(10px);
  border:1px solid var(--border);
  padding:10px 18px;border-radius:999px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-soft);
}
.pill-eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85);
  box-shadow:0 0 0 0 rgba(255,255,255,.45);
  animation:pulse 2s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.4)}
  70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* ============ BUTTONS ============ */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
  white-space:nowrap;cursor:pointer;
}
.btn .arrow{transition:transform .35s var(--ease)}
.btn > *{position:relative;z-index:2}
/* shimmer sweep */
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;
  background:linear-gradient(120deg, transparent 28%, rgba(255,255,255,.22) 50%, transparent 72%);
  transform:translateX(-110%);
  transition:transform .9s var(--ease);
  pointer-events:none;
}
.btn:hover::before{transform:translateX(110%)}
.btn:hover .arrow{transform:translateX(5px)}

.btn-primary{background:#fff;color:#000;border:1px solid #fff;box-shadow:0 0 0 0 rgba(255,255,255,0)}
.btn-primary:hover{background:#f5f5f5;box-shadow:0 0 0 6px rgba(255,255,255,.07), 0 12px 30px rgba(255,255,255,.08)}
.btn-primary.dark{background:#000;color:#fff;border:1px solid #000}
.btn-primary.dark:hover{background:#1a1a1a;box-shadow:0 0 0 6px rgba(0,0,0,.18), 0 12px 30px rgba(0,0,0,.3)}
.btn-primary.dark::before{background:linear-gradient(120deg, transparent 28%, rgba(255,255,255,.14) 50%, transparent 72%)}

.btn-ghost{background:rgba(20,20,20,.5);border:1px solid var(--border-hi);color:#fff;backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(30,30,30,.78);border-color:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.35)}

.btn-outline{background:transparent;border:1px solid var(--border-hi);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.04);border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.04)}

/* ============ HERO ============ */
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-top:140px;padding-bottom:80px;gap:32px;
  position:relative;
  perspective:1400px;
}
/* On mobile, the hero h1 is tall enough that vertically centering it via
   justify-content:center pushes the first hero element (pill-eyebrow) up
   against — or behind — the fixed nav. Switch to top-anchored layout on
   small screens with extra clearance for the nav. */
@media (max-width:800px){
  .hero{
    justify-content:flex-start;
    padding-top:110px;
  }
}
.hero-inner{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:32px;width:100%;
}

/* HERO BACKDROP — floating creation cards */
.hero-backdrop{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  transform-style:preserve-3d;
  /* fade edges so cards blend with smoke */
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, #000 80%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, #000 80%);
  opacity:.85;
}
.hb-card{
  position:absolute;
  background:linear-gradient(180deg, rgba(20,20,22,.55), rgba(8,8,10,.65));
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  color:#dfe5fb;
  font-size:11px;
  display:flex;flex-direction:column;gap:8px;
  transform-style:preserve-3d;
  will-change:transform;
}
.hb-card .hb-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(180,195,235,.55)}
.hb-card .dots{display:inline-flex;gap:4px}
.hb-card .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16);display:inline-block}
.hb-card .filename{color:#d4ddff;text-transform:none;letter-spacing:-.005em;font-family:var(--font-mono);font-size:11px}
.hb-card .pill-mini{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(120,150,255,.18);color:#dde4ff;font-size:9px}

/* card 1 — code */
.hb-1{
  width:380px;left:-40px;top:8%;
  transform:rotate(-8deg) rotateY(8deg) translateZ(0);
  animation:float-1 14s ease-in-out infinite;
}
.hb-1 .hb-body{display:flex;flex-direction:column;gap:3px;font-family:var(--font-mono);font-size:11px;line-height:1.5;color:rgba(220,228,255,.75)}
.codeline{display:flex;gap:10px;align-items:baseline;white-space:pre}
.ln-no{color:rgba(140,160,210,.32);width:18px;flex:0 0 18px;text-align:right;font-size:10px}
.kw{color:#a4b8ff}
.fn{color:#fff}
.var{color:#e6ecff}
.par{color:#8fbcff}

/* card 2 — mission brief */
.hb-2{
  width:340px;right:-30px;top:6%;
  transform:rotate(5deg) rotateY(-6deg);
  animation:float-2 16s ease-in-out infinite;
}
.hb-2 .hb-title{font-family:var(--font-sans);font-weight:500;font-size:14px;color:#fff;letter-spacing:-.01em;line-height:1.3}
.hb-meta-row{display:flex;justify-content:space-between;gap:8px}
.hb-meta-row.tight{gap:4px}
.meta-it{display:flex;flex-direction:column;gap:2px}
.meta-it .val{font-family:var(--font-mono);color:#fff;font-size:13px;font-weight:500;letter-spacing:.02em}
.meta-it .val.small{font-size:10px}
.hb-bars{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.hb-bars span{height:6px;border-radius:3px;display:block}
.hb-bars .b1{background:rgba(160,180,240,.55)}
.hb-bars .b2{background:rgba(120,140,210,.32)}
.hb-devs{display:flex;align-items:center;gap:6px;margin-top:2px}
.hb-devs .av{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#3a3a3a,#181818);border:2px solid rgba(10,16,32,.9);margin-left:-6px}
.hb-devs .av:first-child{margin-left:0}
.hb-devs .more{margin-left:6px;font-size:10px}

/* card 3 — escrow */
.hb-3{
  width:300px;left:6%;bottom:8%;
  transform:rotate(4deg) rotateY(6deg);
  animation:float-3 18s ease-in-out infinite;
}
.hb-3 .hb-amount{font-family:var(--font-sans);font-weight:500;font-size:22px;color:#fff;letter-spacing:-.02em;display:flex;align-items:baseline;gap:4px}
.hb-3 .hb-amount .big{font-size:36px;font-weight:500;letter-spacing:-.04em}
.hb-3 .hb-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:4px 0}
.hb-3 .seg{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;padding:6px 4px;text-align:center;border-radius:6px;border:1px solid rgba(120,150,255,.10);color:rgba(180,195,235,.5)}
.hb-3 .seg.done{background:rgba(255,255,255,.18);color:#cbd6ff;border-color:rgba(120,150,255,.25)}
.hb-3 .seg.active{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.45);box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 0 20px rgba(120,150,255,.18)}
.status{display:inline-flex;align-items:center;gap:6px;color:#d4e1ff}
.status i.green{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(255,255,255,.45)}

/* card 4 — devs */
.hb-4{
  width:260px;right:4%;bottom:10%;
  transform:rotate(-6deg) rotateY(-8deg);
  animation:float-4 17s ease-in-out infinite;
}
.hb-4 .hb-dev-list{display:flex;flex-direction:column;gap:6px}
.hb-4 .dev{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:8px;background:rgba(120,150,255,.04);border:1px solid rgba(255,255,255,.08)}
.hb-4 .dev .av{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#5868a8,#1a2240);flex:0 0 18px}
.hb-4 .dev .nm{font-size:12px;color:#e0e7ff;font-family:var(--font-mono)}
.hb-4 .dev .star{margin-left:auto;font-size:10px;color:#fff}

/* chips */
.hb-chip{
  position:absolute;display:inline-flex;align-items:center;gap:8px;
  background:rgba(20,20,22,.65);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 14px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#d4ddff;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.hb-chip i{width:6px;height:6px;border-radius:50%}
.hb-chip i.green{background:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(255,255,255,.4)}
.hb-chip i.blue{background:#7aa0ff;box-shadow:0 0 8px rgba(120,150,255,.5)}
.hb-5{left:38%;top:14%;animation:float-5 11s ease-in-out infinite;transform:rotate(-3deg)}
.hb-6{right:30%;bottom:24%;animation:float-6 13s ease-in-out infinite;transform:rotate(2deg)}

@keyframes float-1{0%,100%{transform:rotate(-8deg) rotateY(8deg) translate3d(0,0,0)}50%{transform:rotate(-6deg) rotateY(6deg) translate3d(8px,-12px,0)}}
@keyframes float-2{0%,100%{transform:rotate(5deg) rotateY(-6deg) translate3d(0,0,0)}50%{transform:rotate(7deg) rotateY(-8deg) translate3d(-10px,10px,0)}}
@keyframes float-3{0%,100%{transform:rotate(4deg) rotateY(6deg) translate3d(0,0,0)}50%{transform:rotate(6deg) rotateY(4deg) translate3d(10px,-8px,0)}}
@keyframes float-4{0%,100%{transform:rotate(-6deg) rotateY(-8deg) translate3d(0,0,0)}50%{transform:rotate(-8deg) rotateY(-6deg) translate3d(-8px,12px,0)}}
@keyframes float-5{0%,100%{transform:rotate(-3deg) translate3d(0,0,0)}50%{transform:rotate(-1deg) translate3d(6px,-10px,0)}}
@keyframes float-6{0%,100%{transform:rotate(2deg) translate3d(0,0,0)}50%{transform:rotate(4deg) translate3d(-6px,8px,0)}}

@media (max-width:1100px){
  .hb-1{width:300px;left:-60px}
  .hb-2{width:280px;right:-50px}
  .hb-3{width:260px;left:2%}
  .hb-4{width:230px;right:0%}
  .hb-5,.hb-6{display:none}
}
@media (max-width:780px){
  .hero-backdrop{opacity:.5}
  .hb-1,.hb-2,.hb-3,.hb-4{transform:scale(.7) rotate(0deg)!important;animation:none}
  .hb-1{left:-90px;top:5%}
  .hb-2{right:-90px;top:4%}
  .hb-3{left:-80px;bottom:6%}
  .hb-4{right:-80px;bottom:8%}
}
.hero h1{max-width:18ch}
.hero .sub{max-width:560px;color:var(--muted);font-size:17px;line-height:1.55}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero .scroll-indicator{
  display:flex;align-items:center;gap:18px;margin-top:36px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.hero .scroll-indicator .line{width:120px;height:1px;background:linear-gradient(to right, transparent, rgba(255,255,255,.18), transparent)}
.hero .mouse{
  width:22px;height:34px;border:1.5px solid var(--faint);border-radius:12px;
  position:relative;display:inline-block;
}
.hero .mouse::after{
  content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);
  width:2px;height:6px;background:#fff;border-radius:2px;
  animation:scroll-dot 1.6s var(--ease) infinite;
}
@keyframes scroll-dot{0%{opacity:0;top:5px}50%{opacity:1}100%{opacity:0;top:16px}}

.trust-strip{
  margin-top:72px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(20px, 3.5vw, 48px);
  width:100%;
}
.trust-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  padding-right:8px;border-right:1px solid var(--border);margin-right:4px;
}
.plat-wm{
  display:inline-flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.45);
  font-weight:500;font-size:15px;letter-spacing:-.01em;
  transition:color .35s var(--ease-spring), transform .35s var(--ease-spring);
}
.plat-wm .g{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  color:rgba(255,255,255,.45);
  transition:color .35s var(--ease-spring), background .35s var(--ease-spring), border-color .35s var(--ease-spring), transform .4s var(--ease-spring);
}
.plat-wm:hover{color:#fff}
.plat-wm:hover .g{
  color:var(--hover-color, #fff);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  transform:scale(1.08);
}
.plat-wm[data-color]{--hover-color:#fff}
.plat-wm:hover[data-color="var(--gmod)"]{color:#fff}
.plat-wm:hover[data-color="var(--gmod)"] .g{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12)}
.plat-wm:hover[data-color="var(--fivem)"]{color:#fff}
.plat-wm:hover[data-color="var(--fivem)"] .g{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12)}
.plat-wm:hover[data-color="var(--roblox)"]{color:#fff}
.plat-wm:hover[data-color="var(--roblox)"] .g{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12)}
.plat-wm:hover[data-color="var(--cyan)"]{color:#fff}
.plat-wm:hover[data-color="var(--cyan)"] .g{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12)}
.plat-wm:hover[data-color="var(--violet)"]{color:#fff}
.plat-wm:hover[data-color="var(--violet)"] .g{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12)}
@media (max-width:600px){
  .trust-strip{gap:12px}
  .plat-wm span:last-child{display:none}
  .trust-label{display:none}
}

/* ============ MEET ============ */
.meet-grid{
  display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:clamp(32px,5vw,80px);align-items:start;
}
@media (max-width:980px){.meet-grid{grid-template-columns:1fr}}
.meet-grid .lhs h2{margin-bottom:24px}
.meet-grid .lhs p{max-width:520px}
.divider{height:1px;background:var(--border);width:100%;margin:32px 0}
.tag-stack{display:flex;flex-wrap:wrap;gap:10px}
.tag{
  background:var(--surface);border:1px solid var(--border);
  padding:10px 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--text-soft);
  backdrop-filter:blur(6px) saturate(1.1);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
  transition:background .35s var(--ease-spring), border-color .35s var(--ease-spring), transform .35s var(--ease-spring);
}
.tag:hover{background:var(--surface-hi);border-color:var(--border-hi);transform:translateY(-1px)}

.exp-table{display:flex;flex-direction:column}
.exp-row{
  display:grid;grid-template-columns:1.4fr 1.2fr .6fr;gap:24px;
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,.06);
  align-items:center;
}
.exp-row:last-child{border-bottom:0}
.exp-row .role{font-weight:500;color:#fff;font-size:16px}
.exp-row .client{color:var(--muted);font-size:15px}
.exp-row .year{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:right}
@media (max-width:600px){.exp-row{grid-template-columns:1fr;gap:4px}.exp-row .year{text-align:left}}

.meet-visual{
  border-radius:24px;overflow:hidden;
  aspect-ratio:3/4;background:rgba(8,8,10,.5);
  backdrop-filter:blur(14px) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
  border:1px solid var(--border);
  position:relative;isolation:isolate;
  padding:24px;
  display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.meet-visual .mv-glow{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 70% 40% at 30% 15%, rgba(120,150,255,.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 85%, rgba(170,130,255,.10), transparent 60%);
}
.meet-visual .mv-stack{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:14px;height:100%;
}
.mv-card{
  background:rgba(15,15,18,.7);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  display:flex;flex-direction:column;gap:14px;
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.mv-head-card{flex:0 0 auto}
.mv-body-card{flex:1 1 auto}
.mv-row-line{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mv-tag-platform{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.42);color:#fff;font-weight:600;
}
.mv-id{font-size:10px;color:var(--dim);letter-spacing:.14em}
.mv-title{font-size:18px;font-weight:500;letter-spacing:-.015em;line-height:1.25;color:#fff}
.mv-status-row{display:flex;justify-content:space-between;align-items:center}
.mv-status{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#fff;font-weight:500}
.mv-status .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(255,255,255,.45);animation:pulse 2s var(--ease) infinite}
.mv-meta{font-size:10px;color:var(--muted);letter-spacing:.14em}

.mv-card-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em}
.mv-quote-list{display:flex;flex-direction:column;gap:10px}
.mv-quote{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:12px;
  background:rgba(8,8,10,.6);border:1px solid rgba(255,255,255,.04);
  transition:background .25s var(--ease-spring), border-color .25s var(--ease-spring);
}
.mv-quote.top{
  background:rgba(32,32,36,.65);border-color:rgba(255,255,255,.25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 0 16px rgba(120,150,255,.10);
}
.mv-av{width:30px;height:30px;border-radius:50%;flex:0 0 30px;background:linear-gradient(135deg,#3a3a3a,#181818);border:1px solid var(--border)}
.mv-av.av-1{background:#1a1a1a url('https://robohash.org/lyzox.png?set=set1&size=120x120') center/cover no-repeat}
.mv-av.av-2{background:#181818 url('https://robohash.org/morten.png?set=set1&size=120x120') center/cover no-repeat}
.mv-av.av-3{background:#1f1f1f url('https://robohash.org/oxygn.png?set=set1&size=120x120') center/cover no-repeat}
.mv-q-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mv-q-top{display:flex;align-items:center;gap:8px}
.mv-q-name{font-size:13px;color:#fff;font-weight:500}
.mv-q-rating{font-size:10px;color:#fff;letter-spacing:.08em}
.mv-q-meta{font-size:10px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.mv-q-price{font-family:var(--font-mono);font-size:14px;color:#fff;font-weight:500}
.mv-q-price.dim{color:var(--muted)}

.mv-progress{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:8px}
.mv-progress-track{height:3px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.mv-progress-fill{height:100%;background:linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.5));border-radius:2px;box-shadow:0 0 8px rgba(255,255,255,.4);width:25%;transition:width 1.1s cubic-bezier(.22, 1, .36, 1)}
.mv-progress-steps{display:flex;justify-content:space-between;font-size:9px;color:var(--dim);letter-spacing:.14em}
.mv-progress-steps .done{color:var(--text-soft)}
.mv-progress-steps .active{color:#fff}

.meet-visual .floater{
  position:absolute;z-index:5;border-radius:12px;background:rgba(15,15,18,.75);border:1px solid var(--border-hi);
  backdrop-filter:blur(20px);padding:10px 14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);
  display:flex;align-items:center;gap:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.meet-visual .floater.f1{right:-14px;top:18%;}
.meet-visual .floater.f2{left:-14px;bottom:14%;}
.meet-visual .floater .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(255,255,255,.4)}

/* ============ BENTO WORKS ============ */
.section-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:48px}
.section-head .row{display:flex;justify-content:space-between;align-items:flex-end;width:100%;gap:24px;flex-wrap:wrap}
.section-head .row .sub{max-width:520px;color:var(--muted)}
.bento{
  display:grid;grid-template-columns:repeat(12,1fr);gap:16px;
}
.bento .card{
  background:rgba(15,15,18,.5);
  border:1px solid var(--border);border-radius:18px;
  overflow:hidden;position:relative;
  backdrop-filter:blur(8px) saturate(1.05);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
  transition:transform .6s var(--ease-spring), border-color .4s var(--ease-spring), background .4s var(--ease-spring);
  cursor:pointer;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:280px;
}
.bento .card:hover{transform:translateY(-6px);border-color:var(--border-hi);background:rgba(25,25,28,.6)}
.bento .card .thumb{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  transition:transform .8s var(--ease);
}
.bento .card:hover .thumb{transform:scale(1.05)}
.bento .card .thumb::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.06), transparent 50%);
}
.bento .card .thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.7) 100%);
}
.bento .card .platform{
  position:absolute;top:16px;left:16px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.bento .card .platform .dot{width:5px;height:5px;border-radius:50%}
.bento .card .info{position:relative;z-index:2;padding:20px}
.bento .card .info .title{font-weight:500;font-size:18px;letter-spacing:-.01em;margin-bottom:6px;color:#fff}
.bento .card .info .meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* card mockup overlay variants */
.bento .card .mockup-grid{
  position:absolute;inset:24px 24px 80px 24px;z-index:1;
  display:grid;gap:6px;
}
.bento .card .mockup-grid.v-inv{grid-template-columns:repeat(6,1fr);grid-auto-rows:18px}
.bento .card .mockup-grid.v-inv > div{background:rgba(255,255,255,.04);border-radius:4px;border:1px solid var(--border)}
.bento .card .mockup-grid.v-inv > div.f{background:rgba(255,255,255,.12)}
.bento .card .mockup-grid.v-cir{place-items:center}
.bento .card .mockup-circle{
  width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  border:1px solid var(--border);
}
.bento .card .mockup-lines{position:absolute;inset:32px;display:flex;flex-direction:column;gap:8px;z-index:1}
.bento .card .mockup-lines .l{height:8px;border-radius:4px;background:rgba(255,255,255,.06);border:1px solid var(--border)}
.bento .card .mockup-lines .l.w{background:rgba(255,255,255,.15)}

.bento .c1{grid-column:span 7;grid-row:span 2;min-height:560px}
.bento .c2{grid-column:span 5}
.bento .c3{grid-column:span 5}
.bento .c4{grid-column:span 4}
.bento .c5{grid-column:span 4;grid-row:span 2;min-height:560px}
.bento .c6{grid-column:span 8}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .bento .c1,.bento .c2,.bento .c3,.bento .c4,.bento .c5,.bento .c6{grid-column:span 6;grid-row:auto;min-height:240px}
}

.center-cta{display:flex;justify-content:center;margin-top:48px}

/* ============ PROCESS ============ */
.process-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:980px){.process-wrap{grid-template-columns:1fr}}
.process-sticky{position:sticky;top:14vh}
.process-visual{
  aspect-ratio:1/1;border-radius:24px;overflow:hidden;
  background:rgba(8,8,10,.5);
  border:1px solid var(--border);
  position:relative;isolation:isolate;
  padding:24px;
  backdrop-filter:blur(14px) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.process-visual .pv-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 30% 20%, rgba(120,150,255,.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(170,130,255,.12), transparent 60%);
}
.process-visual .frame{
  position:absolute;inset:24px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  /* WAITING state: parked invisibly off to the RIGHT, no transition so it
     resets here instantly (while invisible) after exiting — guaranteeing the
     next entrance always comes from the right, even on the 4→1 wrap. */
  opacity:0;
  transform:translateX(56px) scale(.95);
  transition:none;
  pointer-events:none;
  will-change:transform, opacity;
}
.process-visual .frame.active{
  opacity:1;
  transform:translateX(0) scale(1);
  pointer-events:auto;
  z-index:3;
  /* ENTRANCE: glide in from the right with a modern spring overshoot —
     the frame slides slightly past center then settles back (bounce). */
  transition:
    opacity .45s cubic-bezier(.22,1,.36,1),
    transform .72s cubic-bezier(.34,1.4,.5,1);
}
.process-visual .frame.leaving{
  opacity:0;
  /* EXIT: continue the right→left flow, sliding off to the left. */
  transform:translateX(-56px) scale(.95);
  z-index:2;
  transition:
    opacity .42s cubic-bezier(.4,0,.7,.5),
    transform .48s cubic-bezier(.4,0,.7,.5);
}
/* During exit, freeze every inner element at its settled state so the
   whole frame (content + panel) fades and slides out (right→left) as one
   cohesive motion — instead of the content snapping away before the panel. */
.process-visual .frame.leaving .pv-anim,
.process-visual .frame.leaving .pv-quote.top,
.process-visual .frame.leaving .pv-rating-card{opacity:1;transform:none;animation:none}
.process-visual .frame.leaving .pv-tick .cb{transform:none;animation:none}
.process-visual .frame.leaving .pv-amount{opacity:1;transform:none;animation:none}
.process-visual .frame.leaving .pv-rating-stars{clip-path:inset(0 0 0 0);animation:none}
.process-visual .frame.leaving .pv-input .pv-typed{max-width:280px;animation:none}
.process-visual .frame.leaving .pv-input .pv-caret{opacity:0;animation:none}
.process-visual .frame.leaving .pv-anim-fill{animation:none;left:15%;right:50%}
.process-visual .frame.leaving .pv-anim-thumb-a{animation:none;left:15%}
.process-visual .frame.leaving .pv-anim-thumb-b{animation:none;left:50%}
.process-visual .frame.leaving .pv-chip.active{animation:none}
.process-visual .label{
  position:absolute;top:20px;left:20px;z-index:5;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:rgba(8,8,10,.6);border:1px solid var(--border-hi);padding:6px 12px;border-radius:999px;backdrop-filter:blur(12px);
}
.pv-panel{
  position:relative;z-index:2;width:100%;max-width:480px;
  background:rgba(15,15,18,.7);backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:18px;padding:22px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.pv-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.pv-head .dim{color:var(--muted)}
.pv-badge-new{
  padding:4px 8px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.85);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
}

/* fields */
.pv-field{display:flex;flex-direction:column;gap:6px}
.pv-label{font-size:9px;color:var(--muted);letter-spacing:.16em}
.pv-input{
  background:rgba(8,8,10,.65);border:1px solid var(--border);border-radius:10px;
  padding:11px 14px;font-size:13px;color:#fff;font-weight:500;letter-spacing:-.005em;
}
.pv-chip-row{
  display:flex;gap:5px;
  flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:1px;
}
.pv-chip-row::-webkit-scrollbar{display:none}
.pv-chip{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;
  padding:5px 7px;border-radius:7px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted);
  white-space:nowrap;flex:0 0 auto;
}
.pv-chip.active{
  background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  font-weight:600;
}
.pv-budget{display:flex;align-items:center;gap:14px}
.pv-range{position:relative;flex:1;height:4px;background:rgba(255,255,255,.18);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pv-range-fill{position:absolute;top:0;bottom:0;background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.7));border-radius:2px;box-shadow:0 0 8px rgba(255,255,255,.25)}
.pv-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #0a0f24;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pv-budget-val{font-family:var(--font-mono);font-size:12px;color:#fff;letter-spacing:.06em;flex:0 0 auto}

/* quotes */
.pv-quote-list{display:flex;flex-direction:column;gap:8px}
.pv-quote{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:12px;
  background:rgba(8,8,10,.55);border:1px solid var(--border);
}
.pv-quote.top{
  background:rgba(32,32,36,.7);border-color:rgba(255,255,255,.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 12px rgba(120,150,255,.10);
}
.pv-av{width:28px;height:28px;border-radius:50%;flex:0 0 28px;border:1px solid var(--border)}
.pv-av.av-1{background:#1a1a1a url('https://robohash.org/lyzox.png?set=set1&size=120x120') center/cover no-repeat}
.pv-av.av-2{background:#181818 url('https://robohash.org/morten.png?set=set1&size=120x120') center/cover no-repeat}
.pv-av.av-3{background:#1f1f1f url('https://robohash.org/oxygn.png?set=set1&size=120x120') center/cover no-repeat}
.pv-av.av-4{background:#1a1a1a url('https://robohash.org/kairo.png?set=set1&size=120x120') center/cover no-repeat}
.pv-q-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pv-q-name{font-size:13px;color:#fff;font-weight:500}
.pv-q-meta{font-size:9.5px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.pv-q-price{font-size:13px;color:#fff;font-weight:500;letter-spacing:.04em}
.pv-quote.top .pv-q-price{color:#fff}
.pv-quote:not(.top) .pv-q-price{color:var(--muted)}

/* escrow */
.pv-amount-box{
  background:rgba(8,8,10,.65);border:1px solid var(--border);border-radius:14px;padding:18px;
  display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;
}
.pv-amount-box::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 30%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}
.pv-amount-row{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.pv-amount-label{font-size:9px;letter-spacing:.16em;color:var(--muted)}
.pv-stripe{font-size:10px;letter-spacing:.14em;color:#fff;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25)}
.pv-amount{font-size:34px;font-weight:500;color:#fff;letter-spacing:-.04em;position:relative;z-index:1;font-family:var(--font-sans)}
.pv-status-lock{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.85);
  position:relative;z-index:1;
}
.pv-status-lock .lock-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(255,255,255,.4)}
.pv-checklist{display:flex;flex-direction:column;gap:6px}
.pv-check, .pv-file{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  background:rgba(8,8,10,.5);border:1px solid rgba(255,255,255,.04);
  font-size:12px;color:var(--text-soft);
}
.pv-check .cb, .pv-file .cb{
  width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 16px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--dim);
}
.pv-check .cb.done, .pv-file .cb.done{background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.85);color:#0a0f24}
.pv-check.pending{opacity:.7}
.pv-check > span:nth-child(2), .pv-file > span:nth-child(2){flex:1;min-width:0}
.pv-check .mono, .pv-file .mono{font-size:11px;letter-spacing:.06em}

/* delivery */
.pv-files{display:flex;flex-direction:column;gap:6px}
.pv-file > span:nth-child(2){color:#fff;font-weight:500}
.pv-rating-card{
  display:flex;align-items:center;gap:8px;padding:14px 16px;border-radius:14px;
  background:rgba(32,32,36,.55);border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  margin-top:6px;
}
.pv-rating-stars{font-size:14px;color:#fff;letter-spacing:.16em}
.pv-rating-val{font-size:14px;color:#fff;font-weight:500;letter-spacing:.04em}
.pv-rating-msg{font-size:9px;letter-spacing:.16em;margin-left:auto;color:var(--muted)}

/* ============ PROCESS VISUAL — in-panel animations ============ */
/* Items start parked to the right & hidden; .frame.active triggers the
   staggered right-to-left cascade — each slides in from the right with a
   spring bounce, one after another. */
.frame .pv-anim{opacity:0;transform:translateX(20px)}
.frame.active .pv-anim{
  animation:pv-fade .55s cubic-bezier(.34,1.45,.5,1) forwards;
  animation-delay:var(--d, 0s);
}
.frame.active .pv-anim.pv-tick{animation-name:pv-tick-in;animation-duration:.55s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.frame.active .pv-quote.top{animation:pv-fade .55s cubic-bezier(.34,1.45,.5,1) forwards, pv-top-pulse 2.4s var(--ease-spring) 1.6s infinite;animation-delay:var(--d, 0s), 1.6s}

/* Typed text + caret in Brief panel — single line, human 1s typewriter */
.pv-input{white-space:nowrap;overflow:hidden}
.pv-input .pv-typed{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;vertical-align:bottom}
.frame.active .pv-input .pv-typed{animation:pv-type 1s steps(34, end) .25s forwards}
.pv-input .pv-caret{display:inline-block;width:1.5px;height:14px;background:#fff;vertical-align:middle;margin-left:2px;opacity:0;transform:translateY(1px)}
.frame.active .pv-input .pv-caret{
  animation:
    pv-caret-show 0s .25s forwards,
    pv-caret-blink .55s steps(2) .25s infinite,
    pv-caret-hide 0s 1.9s forwards;
}

/* Budget thumbs animated in */
.frame .pv-anim-thumb-a{left:0%}
.frame .pv-anim-thumb-b{left:100%}
.frame .pv-anim-fill{left:0%;right:100%}
.frame.active .pv-anim-fill{animation:pv-fill .8s var(--ease-spring) 1.05s forwards}
.frame.active .pv-anim-thumb-a{animation:pv-thumb-a .9s var(--ease-spring) 1.05s forwards}
.frame.active .pv-anim-thumb-b{animation:pv-thumb-b .9s var(--ease-spring) 1.15s forwards}

@keyframes pv-fade{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes pv-tick-in{0%{opacity:0;transform:translateX(18px) scale(.96)}60%{opacity:1;transform:translateX(-3px) scale(1.03)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes pv-type{from{max-width:0}to{max-width:280px}}
@keyframes pv-caret-blink{0%,49%{opacity:.85}50%,100%{opacity:0}}
@keyframes pv-caret-show{to{opacity:.85}}
@keyframes pv-caret-hide{to{opacity:0}}
@keyframes pv-thumb-a{to{left:15%}}
@keyframes pv-thumb-b{to{left:50%}}
@keyframes pv-fill{to{left:15%;right:50%}}
@keyframes pv-top-pulse{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 0 rgba(255,255,255,.15)}
  50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 5px rgba(255,255,255,.08), 0 0 24px rgba(255,255,255,.18)}
}

/* CB-check tick draws in */
.frame .pv-tick .cb{transform:scale(0)}
.frame.active .pv-tick .cb{animation:pv-cb-pop .45s var(--ease-spring) forwards;animation-delay:calc(var(--d, 0s) + 0.15s)}
@keyframes pv-cb-pop{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* Amount scales in crisply (no blur — it caused stutter) */
.frame .pv-amount{opacity:0;transform:scale(.95)}
.frame.active .pv-amount{animation:pv-amount-in .7s var(--ease-spring) .3s forwards}
@keyframes pv-amount-in{0%{opacity:0;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}

/* Rating stars — fluid clip-path wipe reveal */
.frame .pv-rating-stars{color:#fff;clip-path:inset(0 100% 0 0);will-change:clip-path}
.frame.active .pv-rating-stars{animation:pv-stars-wipe 1s cubic-bezier(.22,1,.36,1) .95s forwards}
@keyframes pv-stars-wipe{
  0%{clip-path:inset(0 100% 0 0)}
  100%{clip-path:inset(0 0% 0 0)}
}

/* ========= ULTRA PRO SAAS POLISH per frame ========= */

/* Brief: pulse the selected FIVEM chip after the selection animation */
.frame.active .pv-chip.active{
  animation:
    pv-fade .55s cubic-bezier(.34,1.45,.5,1) var(--d, 0s) forwards,
    pv-chip-pulse 2.4s var(--ease-spring) 1.6s infinite;
}
@keyframes pv-chip-pulse{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 4px rgba(255,255,255,.08)}
}

/* Brief: range fill shimmer once thumbs settled (keep position:absolute
   from the base rule — it's already a positioning context for ::after.
   Resetting it to relative here broke the fill's left/right span). */
.pv-range-fill{overflow:hidden}
.frame.active .pv-anim-fill::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  animation:pv-fill-shimmer 2.6s ease-in-out 2.4s infinite;
}
@keyframes pv-fill-shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(200%)}
}

/* Brief: thumbs bounce on arrival */
.frame.active .pv-anim-thumb-a{animation:pv-thumb-a .9s var(--ease-spring) 1.05s forwards}
.frame.active .pv-anim-thumb-b{animation:pv-thumb-b .9s var(--ease-spring) 1.15s forwards}
@keyframes pv-thumb-a{
  0%{left:0%;transform:translate(-50%,-50%) scale(.6)}
  85%{transform:translate(-50%,-50%) scale(1.18)}
  100%{left:15%;transform:translate(-50%,-50%) scale(1)}
}
@keyframes pv-thumb-b{
  0%{left:100%;transform:translate(-50%,-50%) scale(.6)}
  85%{transform:translate(-50%,-50%) scale(1.18)}
  100%{left:50%;transform:translate(-50%,-50%) scale(1)}
}

/* Quotes: NEW badge breathes after entrance */
.frame.active .pv-badge-new{
  animation:pv-badge-pulse 2s ease-in-out 1.6s infinite;
}
@keyframes pv-badge-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:0 0 0 4px rgba(255,255,255,.06)}
}

/* Quotes: top quote — accent stripe + accept-pulse */
.frame.active .pv-quote.top{position:relative}
.frame.active .pv-quote.top::after{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.1));
  border-radius:2px;
  animation:pv-top-stripe 2.6s ease-in-out 1.6s infinite;
}
@keyframes pv-top-stripe{
  0%,100%{opacity:.4}
  50%{opacity:1;box-shadow:0 0 8px rgba(255,255,255,.4)}
}

/* Escrow: amount glow + lock ring pulse (no blur — caused stutter) */
.frame .pv-amount{opacity:0;transform:scale(.94)}
.frame.active .pv-amount{animation:pv-amount-in .7s var(--ease-spring) .3s forwards, pv-amount-glow 2.6s ease-in-out 1.6s infinite}
@keyframes pv-amount-in{
  0%{opacity:0;transform:scale(.94)}
  60%{opacity:1;transform:scale(1.03)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes pv-amount-glow{
  0%,100%{text-shadow:0 0 0 transparent}
  50%{text-shadow:0 0 32px rgba(255,255,255,.22)}
}
.frame .pv-status-lock .lock-dot{position:relative}
.frame.active .pv-status-lock .lock-dot::before{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  animation:pv-lock-ring 2.4s ease-out 1.2s infinite;
}
@keyframes pv-lock-ring{
  0%{transform:scale(.6);opacity:.9}
  100%{transform:scale(3);opacity:0}
}

/* Escrow: checkmark — small rotation on pop */
.frame .pv-tick .cb{transform:scale(0) rotate(-90deg)}
.frame.active .pv-tick .cb{animation:pv-cb-pop .55s var(--ease-spring) forwards;animation-delay:calc(var(--d, 0s) + 0.15s)}
@keyframes pv-cb-pop{
  0%{transform:scale(0) rotate(-90deg)}
  60%{transform:scale(1.22) rotate(6deg)}
  100%{transform:scale(1) rotate(0deg)}
}

/* Escrow: pending row — slides in like the others, THEN breathes.
   (Must include pv-fade here too: this selector is more specific than
   .frame.active .pv-anim, so without it the entrance animation is lost
   and the row stays stuck at its translateX(20px) start position.) */
.frame.active .pv-check.pending{
  border-style:dashed;border-color:rgba(255,255,255,.18);
  animation:
    pv-fade .55s cubic-bezier(.34,1.45,.5,1) var(--d, 0s) both,
    pv-pending-breath 2.4s ease-in-out 1.7s infinite;
}
@keyframes pv-pending-breath{
  0%,100%{opacity:1}
  50%{opacity:.6}
}

/* Delivery: file size labels fade in after tick */
.frame .pv-file > span:last-child{opacity:0}
.frame.active .pv-file > span:last-child{
  animation:pv-file-meta-in .5s var(--ease-spring) forwards;
  animation-delay:calc(var(--d, 0s) + 0.35s);
}
@keyframes pv-file-meta-in{to{opacity:1}}

/* Delivery: rating card — entrance + glow loop */
.frame .pv-rating-card{opacity:0;transform:translateY(8px) scale(.98)}
.frame.active .pv-rating-card{animation:pv-rating-in .6s var(--ease-spring) .8s forwards, pv-rating-glow 3.2s ease-in-out 1.6s infinite}
@keyframes pv-rating-in{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pv-rating-glow{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 0 32px rgba(255,255,255,.08)}
}

/* Frame label — animated number flip on change */
.process-visual .label{transition:transform .35s var(--ease-spring), opacity .35s var(--ease-spring)}

/* ========= FAUX CURSOR — JS-driven, lands on real elements ========= */
.process-visual{position:relative}
.pv-cursor{
  position:absolute;width:14px;height:14px;border-radius:50%;
  background:#fff;
  border:2px solid rgba(0,0,0,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.55);
  z-index:30;pointer-events:none;
  top:0;left:0;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .4s var(--ease-spring);
  will-change:transform, opacity;
}
.pv-cursor.in{opacity:1}
.pv-cursor::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  transform:scale(1);opacity:0;pointer-events:none;
}
.pv-cursor.pulse::after{
  animation:cur-pulse .65s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes cur-pulse{
  0%{transform:scale(1);opacity:.95}
  100%{transform:scale(4.5);opacity:0}
}

@media (prefers-reduced-motion: reduce){
  .pv-cursor{display:none}
}

@media (prefers-reduced-motion: reduce){
  .frame .pv-anim, .frame .pv-typed, .frame .pv-caret,
  .frame .pv-anim-thumb-a, .frame .pv-anim-thumb-b, .frame .pv-anim-fill,
  .frame .pv-tick .cb, .frame .pv-amount, .frame .pv-rating-stars{
    animation:none!important;opacity:1!important;transform:none!important;width:auto!important;
  }
  .frame .pv-anim-thumb-a{left:15%}
  .frame .pv-anim-thumb-b{left:50%}
  .frame .pv-anim-fill{left:15%;right:50%}
  .frame .pv-rating-stars{clip-path:none}
}

.tab-toggle{
  display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px;position:relative;margin-bottom:48px;
}
.tab-toggle button{
  padding:10px 22px;border-radius:999px;font-weight:500;font-size:14px;color:var(--muted);position:relative;z-index:2;transition:color .25s var(--ease);
}
.tab-toggle button.active{color:#000}
.tab-toggle .glider{
  position:absolute;top:4px;bottom:4px;left:4px;background:#fff;border-radius:999px;
  transition:transform .45s var(--ease), width .45s var(--ease);
  z-index:1;
}

.step{
  position:relative;padding:48px 0 64px 0;border-top:1px solid var(--border);
}
.step:first-of-type{border-top:0}
.step .bignum{
  position:absolute;right:-8px;top:32px;
  font-family:var(--font-sans);font-weight:500;font-size:clamp(7rem, 12vw, 12rem);
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);
  line-height:1;letter-spacing:-.06em;pointer-events:none;
}
.step h3{margin-bottom:14px;max-width:520px}
.step .desc{color:var(--muted);max-width:480px;margin-bottom:24px}
.step ul{list-style:none;padding:0;margin:0 0 20px 0;display:flex;flex-direction:column;gap:10px;max-width:520px}
.step ul li{display:flex;align-items:flex-start;gap:12px;color:var(--text-soft);font-size:15px}
.step ul li .check{width:18px;height:18px;border-radius:50%;border:1px solid var(--border-hi);display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;margin-top:2px}
.step .caption{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ============ CATALOGUE ============ */
.cat-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.cat-card{
  position:relative;isolation:isolate;
  background:
    linear-gradient(180deg, rgba(var(--plat-rgb), .08), rgba(var(--plat-rgb), .02)),
    rgba(15,15,18,.55);
  border:1px solid rgba(var(--plat-rgb), .18);
  border-radius:20px;padding:28px;
  display:flex;flex-direction:column;gap:18px;
  backdrop-filter:blur(8px) saturate(1.05);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
  transition:
    transform .7s cubic-bezier(.22, 1, .36, 1),
    border-color .6s cubic-bezier(.22, 1, .36, 1),
    background .6s cubic-bezier(.22, 1, .36, 1),
    box-shadow .7s cubic-bezier(.22, 1, .36, 1);
}
.cat-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:linear-gradient(135deg, rgba(var(--plat-rgb), 0) 0%, rgba(var(--plat-rgb), .5) 50%, rgba(var(--plat-rgb), 0) 100%);
  opacity:0;z-index:-1;
  transition:opacity .7s cubic-bezier(.22, 1, .36, 1);
  filter:blur(1px);
}
.cat-card:hover{
  transform:translateY(-8px) scale(1.012);
  border-color:rgba(var(--plat-rgb), .65);
  background:
    linear-gradient(180deg, rgba(var(--plat-rgb), .28), rgba(var(--plat-rgb), .12)),
    rgba(15,15,18,.5);
  box-shadow:
    0 0 0 1px rgba(var(--plat-rgb), .15),
    0 30px 70px rgba(var(--plat-rgb), .25),
    0 12px 30px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.cat-card:hover::before{opacity:.7}
.cat-card .head{display:flex;align-items:center;gap:14px;justify-content:space-between}
.cat-card .head .left{display:flex;align-items:center;gap:14px;min-width:0}
.cat-card .icon-box{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;flex:0 0 48px;
  background:rgba(var(--plat-rgb), .14);
  border:1px solid rgba(var(--plat-rgb), .35);
  color:rgb(var(--plat-rgb));
  transition:background .4s var(--ease-spring), border-color .4s var(--ease-spring), transform .5s var(--ease-spring);
}
.cat-card:hover .icon-box{
  background:rgba(var(--plat-rgb), .28);
  border-color:rgba(var(--plat-rgb), .6);
  transform:scale(1.06);
}
.cat-card .title{font-weight:500;font-size:22px;letter-spacing:-.01em;color:#fff}
.cat-card .pill-count{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);
  padding:6px 10px;border-radius:999px;border:1px solid rgba(var(--plat-rgb), .2);background:rgba(var(--plat-rgb), .06);
  transition:opacity .35s var(--ease-spring), transform .35s var(--ease-spring);
}
.cat-card:hover .pill-count{opacity:0;transform:translateX(10px)}
.cat-card .services{display:flex;flex-direction:column;gap:8px}
.cat-card .services .svc{
  display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.78);font-size:15px;font-weight:500;
  padding:6px 0;
  transform:translateX(0);
  transition:transform .55s cubic-bezier(.22, 1, .36, 1), color .4s var(--ease-spring);
}
.cat-card:hover .services .svc{color:#fff}
.cat-card:hover .services .svc:nth-child(1){transition-delay:.05s;transform:translateX(2px)}
.cat-card:hover .services .svc:nth-child(2){transition-delay:.1s;transform:translateX(2px)}
.cat-card:hover .services .svc:nth-child(3){transition-delay:.15s;transform:translateX(2px)}
.cat-card:hover .services .svc:nth-child(4){transition-delay:.2s;transform:translateX(2px)}
.cat-card:hover .services .svc:nth-child(5){transition-delay:.25s;transform:translateX(2px)}
.cat-card:hover .services .svc:nth-child(6){transition-delay:.3s;transform:translateX(2px)}
.cat-card .services .svc:hover{transform:translateX(8px)!important;transition-delay:0s!important}
.cat-card .services .svc .svc-ico{
  width:24px;height:24px;border-radius:7px;flex:0 0 24px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--plat-rgb), .12);
  border:1px solid rgba(var(--plat-rgb), .25);
  color:rgb(var(--plat-rgb));
  transition:background .3s var(--ease-spring), border-color .3s var(--ease-spring), transform .3s var(--ease-spring);
}
.cat-card:hover .services .svc .svc-ico{
  background:rgba(var(--plat-rgb), .25);
  border-color:rgba(var(--plat-rgb), .5);
}
.cat-card .services .svc:hover .svc-ico{transform:scale(1.1)}
.cat-card .foot{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  padding-top:18px;border-top:1px solid rgba(var(--plat-rgb), .15);
  transition:border-color .4s var(--ease-spring);
}
.cat-card:hover .foot{border-color:rgba(var(--plat-rgb), .4)}
.cat-card .foot .price{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);transition:color .3s var(--ease-spring)}
.cat-card:hover .foot .price{color:#fff}
.cat-card .foot .group{display:flex;align-items:center;gap:8px}
.cat-card .avatars{display:flex}
.cat-card .avatars .a{
  width:22px;height:22px;border-radius:50%;border:2px solid rgba(15,15,18,.95);
  background:#181818 center/cover no-repeat;
  margin-left:-6px;
}
.cat-card .avatars .a:nth-child(1){background-image:url('https://robohash.org/kairo.png?set=set1&size=120x120')}
.cat-card .avatars .a:nth-child(2){background-image:url('https://robohash.org/luna.png?set=set1&size=120x120')}
.cat-card .avatars .a:nth-child(3){background-image:url('https://robohash.org/nova.png?set=set1&size=120x120')}
.cat-card .avatars .a:first-child{margin-left:0}
.cat-card .more{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cat-card .arrow{display:none}
.cat-card .badge-early{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  padding:3px 8px;border:1px solid rgba(var(--plat-rgb), .45);background:rgba(var(--plat-rgb), .18);border-radius:999px;margin-left:8px;
}

.cat-r1 .cat-card:nth-child(1){grid-column:span 5}
.cat-r1 .cat-card:nth-child(2){grid-column:span 4}
.cat-r1 .cat-card:nth-child(3){grid-column:span 3}
.cat-r2 .cat-card{grid-column:span 4}
@media (max-width:980px){
  .cat-r1 .cat-card,.cat-r2 .cat-card{grid-column:span 12}
}

/* ============ FORM SECTION (dark glass) ============ */
.form-section{position:relative;z-index:1;color:#fff}
.form-section #smoke-cover{display:none}
.form-section .container{position:relative;z-index:1}
.form-grid{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:980px){.form-grid{grid-template-columns:1fr}}

.form-grid .lhs{position:sticky;top:14vh}
@media (max-width:980px){.form-grid .lhs{position:static}}
.form-grid h2{color:#fff}
.form-grid .pill-light{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(20,20,22,.45);border:1px solid rgba(255,255,255,.14);padding:10px 18px;border-radius:999px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.form-grid .pill-light > span:first-child{background:rgba(255,255,255,.85)!important}
.form-grid .body-dark{color:var(--muted);max-width:380px;font-size:17px;line-height:1.55}
.reassure{display:flex;flex-direction:column;gap:18px;margin-top:32px}
.reassure .it{display:flex;gap:14px;align-items:flex-start}
.reassure .it .ic{width:44px;height:44px;border-radius:12px;background:rgba(20,20,22,.5);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:0 0 44px;color:#fff;backdrop-filter:blur(8px)}
.reassure .it .label{font-weight:500;font-size:15px;color:#fff}
.reassure .it .sub{font-size:13px;color:var(--muted);margin-top:2px}

.testimonial{margin-top:48px;padding-top:32px;border-top:1px solid var(--border);max-width:380px}
.testimonial blockquote{margin:0;font-size:17px;line-height:1.5;color:var(--text-soft);font-weight:400}
.testimonial blockquote span{font-style:italic}
.testimonial .author{margin-top:18px;display:flex;align-items:center;gap:12px}
.testimonial .author .av{width:36px;height:36px;border-radius:50%;background:#181818 center/cover no-repeat;border:1px solid var(--border)}
.testimonial .author .nm{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.form-card{
  background:rgba(15,15,18,.55);
  border:1px solid var(--border);border-radius:24px;
  padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:24px;
  backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input[type=text],
.field input[type=email],
.field input[type=number],
.field select,
.field textarea{
  background:rgba(8,8,10,.6);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;font-size:15px;color:#fff;outline:none;
  transition:border-color .25s var(--ease-spring), box-shadow .25s var(--ease-spring), background .25s var(--ease-spring);
  font-family:var(--font-sans);
  backdrop-filter:blur(6px);
}
.field input::placeholder, .field textarea::placeholder{color:var(--dim)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(255,255,255,.55);box-shadow:0 0 0 4px rgba(120,150,255,.10);
  background:rgba(12,18,38,.7);
}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.field select option{background:#0a0f24;color:#fff}
.field textarea{resize:vertical;min-height:140px;line-height:1.5}

.platforms-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media (max-width:720px){.platforms-row{grid-template-columns:repeat(3,1fr)}}
.plat-card{
  position:relative;background:rgba(8,8,10,.55);border:1px solid var(--border);border-radius:12px;
  padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;transition:border-color .25s var(--ease-spring), background .25s var(--ease-spring), transform .3s var(--ease-spring);
  color:#fff;
  backdrop-filter:blur(6px);
}
.plat-card:hover{background:rgba(15,22,42,.7);border-color:var(--border-hi);transform:translateY(-2px)}
.plat-card.sel{border:1px solid rgba(255,255,255,.7);background:rgba(32,32,36,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 4px rgba(120,150,255,.08)}
.plat-card .gly{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85)}
.plat-card.sel .gly{color:#fff}
.plat-card .nm{font-size:11px;font-weight:500;letter-spacing:-.005em;color:#fff;text-align:center}

.row-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.row-two{grid-template-columns:1fr}}

.range{display:flex;flex-direction:column;gap:12px}
.range .vals{font-family:var(--font-mono);font-size:14px;color:#fff;letter-spacing:.04em;font-weight:500}
.range-track{
  position:relative;height:6px;background:rgba(255,255,255,.08);border-radius:3px;
}
.range-track .fill{position:absolute;top:0;bottom:0;background:linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.95));border-radius:3px;box-shadow:0 0 12px rgba(255,255,255,.3)}
.range-track input[type=range]{
  position:absolute;top:-9px;left:0;right:0;width:100%;height:24px;
  appearance:none;background:transparent;pointer-events:none;
}
.range-track input[type=range]::-webkit-slider-thumb{
  appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;
  border:3px solid #0a0f24;box-shadow:0 2px 8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.15);cursor:pointer;pointer-events:auto;
}
.range-track input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #0a0f24;box-shadow:0 2px 8px rgba(0,0,0,.6);cursor:pointer;pointer-events:auto;
}
.range .micro{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.dropzone{
  border:1.5px dashed rgba(255,255,255,.18);border-radius:14px;
  padding:28px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--text-soft);cursor:pointer;
  background:rgba(8,8,10,.4);
  transition:background .25s var(--ease-spring),border-color .25s var(--ease-spring);
  backdrop-filter:blur(6px);
}
.dropzone:hover{background:rgba(15,22,42,.6);border-color:rgba(255,255,255,.4)}
.dropzone .strong{font-weight:500;color:#fff}
.dropzone .sub{font-size:13px;color:var(--muted);font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase}

.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:rgba(8,8,10,.55);border:1px solid var(--border);border-radius:12px;backdrop-filter:blur(6px)}
.toggle-row .ttl{font-weight:500;font-size:15px;color:#fff}
.toggle-row .sub{font-size:13px;color:var(--muted);margin-top:2px}
.switch{position:relative;width:46px;height:26px;border-radius:999px;background:rgba(255,255,255,.12);transition:background .25s var(--ease-spring);flex:0 0 46px;border:1px solid var(--border);cursor:pointer}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .3s var(--ease-spring)}
.switch.on{background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.5)}
.switch.on::after{transform:translateX(20px)}

.submit-btn{
  width:100%;background:#fff;color:#000;padding:18px;border-radius:999px;font-weight:600;font-size:16px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .25s var(--ease-spring), box-shadow .35s var(--ease-spring);
  position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.submit-btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(0,0,0,.08) 50%, transparent 70%);
  transform:translateX(-110%);transition:transform .9s var(--ease-spring);
}
.submit-btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 6px rgba(255,255,255,.06), 0 14px 36px rgba(255,255,255,.10)}
.submit-btn:hover::before{transform:translateX(110%)}
.submit-btn > *{position:relative;z-index:2}
.submit-micro{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}

/* form submitted state */
.form-success{
  padding:48px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px
}
.form-success .ic{width:64px;height:64px;border-radius:50%;background:#fff;color:#000;display:flex;align-items:center;justify-content:center}
.form-success h3{font-size:26px;font-weight:500;color:#fff;margin:0;letter-spacing:-.02em}
.form-success p{color:var(--muted);max-width:380px;line-height:1.55;margin:0}

/* ============ FAQ ============ */
.faq-grid{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:980px){.faq-grid{grid-template-columns:1fr}}
.faq-lhs{position:sticky;top:14vh}
@media (max-width:980px){.faq-lhs{position:static}}
.faq-lhs .sub{color:var(--muted);max-width:380px;margin-top:18px;line-height:1.55}
.faq-visual{
  margin-top:36px;aspect-ratio:1/1;border-radius:24px;background:rgba(8,8,10,.5);border:1px solid var(--border);
  position:relative;overflow:hidden;
  padding:20px;display:flex;flex-direction:column;gap:14px;
  backdrop-filter:blur(14px) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.faq-visual .fv-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 30% 15%, rgba(120,150,255,.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(170,130,255,.12), transparent 60%);
}
.fv-header{position:relative;z-index:2;display:flex;align-items:center;gap:14px;padding:6px 4px 14px 4px;border-bottom:1px solid var(--border)}
.fv-av-stack{display:flex;flex:0 0 auto}
.fv-av{width:30px;height:30px;border-radius:50%;border:2px solid #0b1228;margin-left:-10px;background:linear-gradient(135deg,#3a3a3a,#181818)}
.fv-av:first-child{margin-left:0}
.fv-av.a1{background:#1a1a1a url('https://robohash.org/lyzox.png?set=set1&size=120x120') center/cover no-repeat}
.fv-av.a2{background:#181818 url('https://robohash.org/morten.png?set=set1&size=120x120') center/cover no-repeat}
.fv-av.a3{background:#1f1f1f url('https://robohash.org/oxygn.png?set=set1&size=120x120') center/cover no-repeat}
.fv-title{display:flex;flex-direction:column;gap:2px}
.fv-name{font-size:14px;font-weight:500;color:#fff;letter-spacing:-.005em}
.fv-status{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.14em;color:var(--muted)}
.fv-status .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(255,255,255,.4);animation:pulse 2s var(--ease) infinite}

.fv-thread{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;gap:10px;justify-content:flex-end;padding:6px 0}
.fv-bubble{
  max-width:80%;display:flex;flex-direction:column;gap:4px;
  padding:10px 14px;border-radius:14px;
  background:rgba(15,15,18,.7);border:1px solid var(--border);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.fv-bubble .fv-meta{font-size:9px;letter-spacing:.14em;color:var(--dim)}
.fv-bubble .fv-msg{font-size:13px;line-height:1.4;color:var(--text-soft)}
.fv-bubble.fv-in{align-self:flex-end;border-bottom-right-radius:4px;background:rgba(32,32,36,.65);border-color:rgba(255,255,255,.22)}
.fv-bubble.fv-in .fv-meta{color:rgba(255,255,255,.6)}
.fv-bubble.fv-out{align-self:flex-start;border-bottom-left-radius:4px}
.fv-bubble.fv-out .fv-msg{color:#fff}

.fv-typing{align-self:flex-start;display:flex;align-items:center;gap:5px;padding:10px 14px;border-radius:14px;border-bottom-left-radius:4px;background:rgba(15,15,18,.7);border:1px solid var(--border)}
.fv-typing span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);animation:fv-typing-bounce 1.2s var(--ease-spring) infinite}
.fv-typing span:nth-child(2){animation-delay:.15s}
.fv-typing span:nth-child(3){animation-delay:.3s}

.fv-footer{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:center;
  padding-top:10px;border-top:1px solid var(--border);
  font-size:10px;letter-spacing:.14em;color:var(--muted);
}
.fv-arrow{font-size:14px;color:var(--text-soft)}

/* FAQ visual animations — triggered when section enters viewport */
/* FAQ chat preview — ONE smooth infinite loop per element (no crude
   restart = no flicker). Sequence per 6.5s cycle: question slides in →
   typing dots → reply slides in → both hold → gentle fade-out → repeat. */
.fv-anim-bubble{opacity:0}
.fv-anim-typing{opacity:0}
[data-state="in"] .fv-bubble.fv-in.fv-anim-bubble{animation:fv-q-loop 6.5s var(--ease-spring) infinite}
[data-state="in"] .fv-anim-typing{animation:fv-typing-loop 6.5s var(--ease-spring) infinite}
[data-state="in"] .fv-bubble.fv-out.fv-anim-bubble{animation:fv-a-loop 6.5s var(--ease-spring) infinite}
@keyframes fv-q-loop{
  0%{opacity:0;transform:translateX(18px)}
  4%{opacity:1;transform:translateX(0)}
  85%{opacity:1;transform:translateX(0)}
  91%,100%{opacity:0;transform:translateY(-6px)}
}
@keyframes fv-typing-loop{
  0%,13%{opacity:0;transform:translateY(8px)}
  19%{opacity:1;transform:translateY(0)}
  35%{opacity:1;transform:translateY(0)}
  40%,100%{opacity:0;transform:translateY(-4px)}
}
@keyframes fv-a-loop{
  0%,38%{opacity:0;transform:translateX(18px)}
  44%{opacity:1;transform:translateX(0)}
  85%{opacity:1;transform:translateX(0)}
  91%,100%{opacity:0;transform:translateY(-6px)}
}
@keyframes fv-typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
/* Meet visual stagger reveal — same right-to-left bounce cascade as Process */
.mv-anim{opacity:0;transform:translateX(20px)}
[data-state="in"] .mv-anim{
  animation:pv-fade .55s cubic-bezier(.34,1.45,.5,1) forwards;
  animation-delay:var(--d, 0s);
}
/* Stage-driven text (milestone / status / day) — keyed by stage in React so
   it remounts and replays this fade-slide-in each time the stage advances. */
.mv-flip{display:inline-block;animation:pv-fade .5s cubic-bezier(.34,1.45,.5,1)}
/* NOTE: the progress fill width is driven by React (style={width: fillPct%})
   and eased by its own `transition: width 1.1s` (see .mv-progress-fill base).
   It must NOT have a CSS @keyframes animation here — a `forwards` animation
   overrode the inline width and froze the bar at one stage (the "build"
   step). Same fix philosophy as Process: one state-driven source of truth. */
.faq-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.faq-tag{padding:8px 14px;border:1px solid var(--border);border-radius:999px;font-size:13px;color:var(--text-soft);background:var(--surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .25s var(--ease-spring),transform .3s var(--ease-bounce)}
.faq-tag.active,.faq-tag:hover{background:#fff;color:#000;border-color:#fff}

.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item .q{
  width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:24px 0;font-weight:500;font-size:18px;color:#fff;
  transition:color .25s var(--ease);
}
.faq-item .q:hover{color:var(--text-soft)}
.faq-item .chev{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease),background .25s var(--ease);
  flex:0 0 32px;color:var(--muted);
}
.faq-item.open .chev{transform:rotate(180deg);background:#fff;color:#000}
.faq-item .a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq-item.open .a-wrap{grid-template-rows:1fr}
.faq-item .a-wrap > div{overflow:hidden}
.faq-item .a{padding:0 0 24px 0;color:var(--muted);max-width:640px;font-size:16px;line-height:1.6}

/* ============ FOOTER / FINAL CTA ============ */
.cta-final{text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px;padding-block:clamp(100px,15vw,180px)}
.cta-final h2{max-width:18ch}
.cta-final .socials{display:flex;align-items:center;gap:24px;margin-top:16px;color:var(--muted)}
.cta-final .socials a{transition:color .25s var(--ease)}
.cta-final .socials a:hover{color:#fff}
.cta-final .divider-y{width:1px;height:14px;background:var(--border)}
.cta-final .email{font-family:var(--font-mono);font-size:14px;color:#fff;letter-spacing:.04em;border-bottom:1px solid var(--border-hi);padding-bottom:2px;transition:border-color .25s var(--ease)}
.cta-final .email:hover{border-color:#fff}
.footer{
  border-top:1px solid var(--border);padding:36px 0;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);gap:24px;flex-wrap:wrap;
}

/* ============ SECTION ENTRANCE/EXIT ANIMATIONS — REMOVED ============ */
/* Sections used to slide/fade/blur in and out as they entered/left the
   viewport (driven by data-state from useSectionStates). The combined
   1.2s transform + 1s opacity + .9s filter:blur transitions created a
   "stuck on section" perception during scroll — content kept moving
   even after the user had scrolled, which felt like lag.
   Removed per user request. Internal .reveal items still animate in
   once via useReveal (see further down).
   data-state is still maintained on every section because the offscreen
   pause optimization below uses it to disable animations + backdrop-
   filter for descendants of off-viewport sections. */
:root{
  /* Calibrated 2026 motion curves — smooth fluid, no aggressive bounce */
  --ease-spring:  cubic-bezier(.22, 1, .36, 1);
  --ease-bounce:  cubic-bezier(.22, 1, .36, 1);
  --ease-snap-in: cubic-bezier(.6, 0, .4, 1);
  --ease-out:     cubic-bezier(.22, 1, .36, 1);
}
[data-state]{
  /* Containment: sections are independent layout blocks. Style/layout
     changes inside one section never affect the others — so partial
     re-layouts don't ripple across the page. Paint containment is
     intentionally NOT used because the hero-light deliberately bleeds
     out via overflow:visible — clipping would alter the design. */
  contain: layout style;
}

/* ============ OFFSCREEN SECTION COST ISOLATION ============
   Sections that are entirely out of viewport (data-state "below" or "above")
   are invisible to the user. But all their descendant CSS animations and
   backdrop-filter effects keep running and consuming GPU/CPU. Disable them
   while offscreen — when the section comes back into view, the rules below
   no longer match and everything resumes instantly. Visually identical, big
   cost saving (avoids 30+ infinite animations running for nothing). */
[data-state="below"] *,
[data-state="below"] *::before,
[data-state="below"] *::after,
[data-state="above"] *,
[data-state="above"] *::before,
[data-state="above"] *::after{
  animation-play-state: paused !important;
}
/* backdrop-filter is one of the most expensive CSS properties — each one
   forces a backdrop snapshot and blur per frame whenever anything moves
   behind it (page scroll, blob drift, etc). Disable on truly offscreen
   sections; the parent has opacity:0 anyway so no visual difference. */
[data-state="below"] *,
[data-state="above"] *{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Internal stagger: .reveal items animate in once when they enter the
   viewport (the .in class is added by useReveal IntersectionObserver in
   hooks.js). They then stay visible — no exit animation when scrolling
   past, which would otherwise make text feel like it's chasing the scroll. */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition: opacity .85s var(--ease-spring), transform 1s var(--ease-spring);
}
.reveal.in{ opacity:1; transform:translateY(0); }

.reveal-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.18em;margin-bottom:-.18em;padding-right:.05em;margin-right:-.05em}
.reveal-word > span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease-spring)}
.reveal.in .reveal-word > span{transform:translateY(0)}
/* italics slant right and overhang the clip box — give them extra room */
.reveal-word.tx-em{padding-right:.22em;margin-right:-.22em}

/* ── Typographic emphasis — designed, used sparingly ─────────────────── */
/* accent colour: reserved for one hook word per major heading */
.tx-accent{color:var(--tx-accent)}
.reveal-word.tx-accent,.reveal-word.tx-accent > span{color:var(--tx-accent)}
/* strong: a brighter, slightly heavier white — for punch lines & key numbers */
strong.tx-strong,.tx-strong{color:#fff;font-weight:600}
.reveal-word.tx-strong > span{color:#fff;font-weight:600}
/* italic: editorial voice / recurring brand phrases */
em.tx-em,.tx-em{font-style:italic;font-weight:inherit}
.reveal-word.tx-em > span{font-style:italic}

/* ── Client proof — left→right testimonial marquee ───────────────────── */
.proof{overflow:hidden}

/* Featured video — a 1M-creator reaction, lazy-loaded on click */
.proof-featured{margin-top:8px;margin-bottom:44px}
.proof-poster,.proof-video-wrap{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  border-radius:20px;overflow:hidden;border:1px solid var(--border);
  box-shadow:0 44px 90px -46px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.05);
}
.proof-poster{
  padding:0;cursor:pointer;text-align:left;
  background:#0b0b0c center/cover no-repeat;
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.proof-poster:hover{border-color:var(--border-hi);transform:translateY(-3px)}
.proof-poster-grad{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 26%, transparent 52%, rgba(0,0,0,.78) 100%);
}
.proof-badge{
  position:absolute;top:18px;left:18px;z-index:2;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.92);
  padding:7px 13px;border-radius:999px;
  background:rgba(10,10,11,.5);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.proof-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 50px -10px rgba(0,0,0,.6);
  animation:proof-pulse 2.8s ease-out infinite;
  transition:transform .45s var(--ease-spring);
}
.proof-poster:hover .proof-play{transform:translate(-50%,-50%) scale(1.09)}
.proof-play-tri{
  width:0;height:0;margin-left:5px;
  border-style:solid;border-width:13px 0 13px 22px;
  border-color:transparent transparent transparent #0a0a0a;
}
@keyframes proof-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.26), 0 18px 50px -10px rgba(0,0,0,.6)}
  70%{box-shadow:0 0 0 24px rgba(255,255,255,0), 0 18px 50px -10px rgba(0,0,0,.6)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0), 0 18px 50px -10px rgba(0,0,0,.6)}
}
.proof-credit{position:absolute;left:22px;bottom:20px;z-index:2;display:flex;align-items:center;gap:13px}
.proof-credit-av{
  width:46px;height:46px;border-radius:50%;flex:0 0 46px;
  background:#181818 center/cover no-repeat;border:1.5px solid rgba(255,255,255,.85);
}
.proof-credit-txt{display:flex;flex-direction:column;gap:3px}
.proof-credit-name{font-size:16px;font-weight:600;color:#fff;letter-spacing:-.01em}
.proof-credit-subs{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.proof-video{position:absolute;inset:0;width:100%;height:100%;border:0}
.proof-featured-cap{
  margin:18px auto 0;max-width:680px;text-align:center;
  font-size:15px;line-height:1.5;color:var(--muted);
}
@media (max-width:640px){
  .proof-featured{margin-bottom:32px}
  .proof-play{width:64px;height:64px}
  .proof-play-tri{border-width:10px 0 10px 17px}
  .proof-credit-name{font-size:14px}
}

.proof-marquee{
  position:relative;margin-top:4px;
  /* cards dissolve into the background at both edges */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.proof-track{
  display:flex;align-items:stretch;gap:22px;width:max-content;
  padding:12px 22px;
  animation:proof-scroll 52s linear infinite;
  will-change:transform;
}
.proof-marquee:hover .proof-track{animation-play-state:paused}
@keyframes proof-scroll{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
.proof-card{
  flex:0 0 auto;width:clamp(300px, 30vw, 384px);
  display:flex;flex-direction:column;gap:16px;
  padding:26px 28px;border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 22px 44px -30px rgba(0,0,0,.85);
  transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.proof-card:hover{
  border-color:var(--border-hi);transform:translateY(-5px);
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
}
.proof-stars{font-size:13px;letter-spacing:.2em;color:rgba(255,255,255,.92)}
.proof-quote{margin:0;font-size:15px;line-height:1.55;color:var(--text-soft);font-weight:400}
.proof-author{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.proof-av{
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  background:#181818 center/cover no-repeat;border:1px solid var(--border);
}
.proof-name{font-size:13px;color:#fff;font-weight:500;letter-spacing:-.01em}
.proof-role{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
@media (max-width:640px){
  .proof-card{width:80vw}
  .proof-track{gap:16px;animation-duration:38s}
}

@media (prefers-reduced-motion: reduce){
  .blob{animation:none}
  [data-state]{opacity:1!important;transform:none!important;transition:none}
  .reveal{opacity:1;transform:none;transition:none}
  .reveal-word > span{transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============ FOCUS ============ */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid #fff;outline-offset:2px;border-radius:6px;
}

/* ============================================================
   2026 POLISH LAYER — premium studio finishes
   ============================================================ */

/* Refined display typography (tighter at huge sizes) */
.h1{ letter-spacing:-.04em; font-weight:500 }
.h2{ letter-spacing:-.028em }
.hero h1{ text-shadow:0 0 80px rgba(120,150,255,.10) }

/* Aurora glow behind hero */
.hero-inner::before{
  content:"";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  width:780px;height:280px;border-radius:50%;
  background:
    radial-gradient(ellipse 60% 50% at 30% 50%, rgba(110,140,255,.16), transparent 70%),
    radial-gradient(ellipse 55% 45% at 70% 50%, rgba(170,130,255,.12), transparent 70%);
  filter:blur(50px);
  pointer-events:none;z-index:-1;
  animation:aurora-shift 14s ease-in-out infinite;
}
@keyframes aurora-shift{
  0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  50%{transform:translate(-48%,-52%) scale(1.08) rotate(2deg)}
}

/* Hero corner light — ultra modern directional studio light from top-right.
   .hero is a .container (centered with max-width), so we break .hero-light out
   to the full viewport width — otherwise the glow clips at the container edge
   on wide screens. */
.hero-light{
  position:absolute;
  top:0;bottom:0;
  left:50%;
  width:100vw;
  margin-left:-50vw;
  pointer-events:none;z-index:2;overflow:hidden;
  mix-blend-mode:screen;
}
.hero-light .lens{
  position:absolute;top:-20%;right:-15%;
  width:min(85vw, 1500px);height:min(85vw, 1500px);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.32) 0%, rgba(220,230,255,.18) 12%, rgba(170,180,255,.08) 28%, rgba(120,140,255,.03) 48%, transparent 70%);
  filter:blur(40px);
  opacity:.95;
  animation:lens-breath 8s ease-in-out infinite;
}
.hero-light .streak{
  position:absolute;top:-8%;right:-5%;width:min(70vw, 1200px);height:14vh;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.10) 30%, rgba(200,210,255,.22) 50%, rgba(255,255,255,.08) 70%, transparent 100%);
  filter:blur(28px);
  transform:rotate(-12deg);
  opacity:.7;
  animation:streak-shift 11s ease-in-out infinite;
}
.hero-light .dust{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at center, rgba(255,255,255,.6), transparent 60%);
  filter:blur(2px);
  opacity:.5;
}
.hero-light .dust-1{width:6px;height:6px;top:18%;right:18%;animation:dust 9s ease-in-out infinite}
.hero-light .dust-2{width:4px;height:4px;top:34%;right:12%;animation:dust 13s ease-in-out infinite reverse}
.hero-light .dust-3{width:5px;height:5px;top:12%;right:28%;animation:dust 11s ease-in-out infinite -3s}
@keyframes lens-breath{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}
@keyframes streak-shift{
  0%,100%{opacity:.6;transform:rotate(-12deg) translateX(0)}
  50%{opacity:.9;transform:rotate(-13deg) translateX(-3%)}
}
@keyframes dust{
  0%,100%{opacity:.2;transform:translate(0,0)}
  50%{opacity:.7;transform:translate(-6px,4px)}
}
@media (max-width:1200px){
  .hero-light .lens{top:-15%;right:-20%;width:min(95vw, 900px);height:min(95vw, 900px)}
}
@media (max-width:780px){
  .hero-light .lens{top:-10%;right:-30%;width:110vw;height:110vw;max-width:none;max-height:none}
  .hero-light .streak{width:100vw}
}

/* Hero pill — refined glass with inner glow */
.pill-eyebrow{
  background:rgba(15,15,18,.55);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 4px 24px rgba(80,120,255,.06);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
}

/* Nav links — animated underline */
.nav ul a{position:relative}
.nav ul a::after{
  content:"";position:absolute;left:18px;right:18px;bottom:6px;height:1px;
  background:#fff;transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease-spring);
}
.nav ul a:hover::after{transform:scaleX(1)}

/* Animated soft border halo on cards (no spinning, just hover lift) */
.bento .card,
.cat-card{
  position:relative;isolation:isolate;
}
.bento .card::after,
.cat-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.10), transparent 60%);
  opacity:0;transition:opacity .45s var(--ease-spring);
  z-index:1;
}
.bento .card:hover::after,
.cat-card:hover::after{opacity:1}

/* Refined buttons — subtle inner light line on primary */
.btn-primary{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 0 0 0 rgba(255,255,255,0);
}
.btn-primary:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 0 0 6px rgba(255,255,255,.06),
    0 14px 36px rgba(255,255,255,.10);
}
.btn-ghost{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* Section divider hairline */
.section::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(80%, 800px);height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  pointer-events:none;
}
.hero::before, .form-section::before, .cta-final::before{display:none}

/* Refined eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";width:18px;height:1px;background:rgba(255,255,255,.4);
  display:inline-block;
}

/* Hero H1 — pure white; light effect comes from the corner light source below */
.hero h1{
  color:#fff;
  text-shadow:
    -120px -40px 100px rgba(255,255,255,.04),
    0 0 80px rgba(120,150,255,.06);
}

/* Tab toggle glider — extra polish */
.tab-toggle{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.tab-toggle .glider{box-shadow:0 4px 14px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.5)}

/* Improved scrollbar (subtle) */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(120,150,255,.12);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25);background-clip:padding-box}

/* Subtle scroll-noise grain layer */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.04;mix-blend-mode:overlay;
}

/* Refined separator lines */
.divider{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}

/* small layout helpers */
.flex{display:flex}
.gap-12{gap:12px}
.center{align-items:center;justify-content:center}
/* =====================================================================
   PERFORMANCE OPTIMIZATIONS
   --------------------------------------------------------------------- 
   Goal: keep design and animations 100% identical, but cut runtime cost
   when work isn't visible to the user. All changes here are conditional
   on (a) the smoke being scrolled away from view, (b) tab being hidden,
   or (c) user prefers-reduced-motion. Nothing else changes.
   ===================================================================== */

/* When the hero is out of view, .scrolled is set on body. Smoke is
   already dimmed to 35% opacity at that point. Pause the heavy GPU
   compositing of the blob drifts and dust motes — invisible difference
   but big win on Safari/Chrome compositors. */
body.scrolled .blob,
body.scrolled .smoke-svg,
body.scrolled .hero-light .lens,
body.scrolled .hero-light .streak,
body.scrolled .hero-light .dust,
body.hidden-tab .blob,
body.hidden-tab .smoke-svg,
body.hidden-tab .hero-light .lens,
body.hidden-tab .hero-light .streak,
body.hidden-tab .hero-light .dust,
/* During active scroll, the user's attention is on the content moving
   past — they cannot perceive the slow 8-32s-cycle morphing of the
   ambient background layers. Pausing these during the 200ms scroll
   window frees up huge amounts of GPU/CPU budget for the scroll itself
   to stay buttery smooth, then animations resume instantly when scroll
   ends. The "wake-up pop" is imperceptible because the animations move
   so slowly per frame. */
body.is-scrolling .blob,
body.is-scrolling .smoke-svg,
body.is-scrolling .hero-light .lens,
body.is-scrolling .hero-light .streak,
body.is-scrolling .hero-light .dust{
  animation-play-state:paused;
}
/* Same pause for any infinite CSS animation when tab is hidden — battery
   and CPU saver, no visible effect since the tab isn't visible. */
body.hidden-tab *,
body.hidden-tab *::before,
body.hidden-tab *::after{
  animation-play-state:paused !important;
}

/* GPU-promote the animated overlays so they get their own compositor
   layer and don't trigger main-thread paints during animation. The
   existing transform-based @keyframes already work with this. */
.hero-light .lens,
.hero-light .streak,
.hero-light .dust{
  will-change:transform, opacity;
}

/* Reduced-motion: kill the heaviest off-the-shelf effects entirely for
   users who opt-in via OS settings. Everything still renders, just
   without the constantly-moving filter passes. */
@media (prefers-reduced-motion: reduce){
  .smoke-svg,
  .smoke-grain{display:none !important;}
  .blob,
  .hero-light .lens,
  .hero-light .streak,
  .hero-light .dust{animation:none !important;}
  .blob{filter:blur(80px);}
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Note: no mobile-specific visual degradation — design stays identical
   on all viewports. The pause-when-scrolled + pause-when-tab-hidden +
   prefers-reduced-motion rules above handle perf without touching the
   visual on devices that don't opt out of motion. */

/* ── Portfolio — filterable work grid + detail page ──────────────────── */
.pf-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.pf-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.pf-chip:hover{border-color:var(--border-hi);color:var(--text-soft)}
.pf-chip.active{background:#fff;color:#0a0a0a;border-color:#fff}
.pf-chip-logo{width:16px;height:16px;object-fit:contain}
.pf-subfilters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.pf-subchip{padding:6px 13px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--dim);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.pf-subchip:hover{color:var(--text-soft)}
.pf-subchip.active{color:var(--tx-accent);border-color:var(--border-hi);background:rgba(79,201,236,.07)}

.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.pf-card{display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--border);background:rgba(19,19,21,.4);overflow:hidden;text-decoration:none;color:inherit;animation:pf-pop .5s var(--ease-spring) backwards;animation-delay:calc(var(--i,0)*45ms);transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.pf-card:hover{transform:translateY(-6px);border-color:var(--border-hi);background:rgba(25,25,28,.6)}
@keyframes pf-pop{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.pf-info-b{padding:16px 18px}
.pf-title{font-size:16px;font-weight:500;color:#fff;letter-spacing:-.01em;margin-bottom:10px}
.pf-tags{display:flex;flex-wrap:wrap;gap:6px}
.pf-pill{font-size:10px;letter-spacing:.06em;color:var(--dim);padding:3px 8px;border-radius:6px;border:1px solid var(--border);background:rgba(255,255,255,.02)}
.pf-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 0}

/* media containers (thumb / hero / gallery shot) + placeholder mocks */
.pf-media{position:relative;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.045),transparent 70%),#0e0e10;display:grid;place-items:center}
.pf-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pf-card:hover .pf-thumb img{transform:scale(1.05)}
.pf-thumb{aspect-ratio:16/10}
.pf-tag{position:absolute;top:12px;left:12px;z-index:2;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85);padding:5px 10px;border-radius:999px;background:rgba(10,10,11,.55);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pf-media .mockup-grid{position:absolute;inset:0;padding:26px;display:grid;gap:6px;z-index:1}
.pf-media .mockup-grid.v-inv{grid-template-columns:repeat(6,1fr);grid-auto-rows:14px}
.pf-media .mockup-grid.v-inv>div{background:rgba(255,255,255,.04);border-radius:4px;border:1px solid var(--border)}
.pf-media .mockup-grid.v-inv>div.f{background:rgba(255,255,255,.12)}
.pf-media .mockup-grid.v-cir{place-items:center;padding:0}
.pf-media .mockup-circle{width:38%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.13),rgba(255,255,255,.02) 70%);border:1px solid var(--border)}
.pf-media .mockup-lines{position:absolute;inset:30px;display:flex;flex-direction:column;gap:9px;z-index:1}
.pf-media .mockup-lines .l{height:8px;border-radius:4px;background:rgba(255,255,255,.06);border:1px solid var(--border)}
.pf-media .mockup-lines .l.w{background:rgba(255,255,255,.15)}

/* detail page */
.pf-detail{padding-top:124px;padding-bottom:var(--section-y);min-height:100vh}
.pf-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .3s var(--ease);margin-bottom:30px}
.pf-back:hover{color:#fff}
.pf-crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-accent);margin-bottom:14px}
.pf-detail-title{font-size:clamp(32px,5vw,52px);font-weight:600;letter-spacing:-.02em;color:#fff;margin:0 0 30px;line-height:1.05}
.pf-hero-media{aspect-ratio:16/9;border-radius:20px;border:1px solid var(--border);margin-bottom:48px;box-shadow:0 44px 90px -50px rgba(0,0,0,.9)}
.pf-detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start}
.pf-h3{font-size:13px;font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.pf-about .body{margin:0}
.pf-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pf-shot{aspect-ratio:4/3;border-radius:14px;border:1px solid var(--border)}
.pf-info{position:sticky;top:110px;border:1px solid var(--border);border-radius:18px;padding:24px 26px;background:rgba(19,19,21,.45)}
.pf-info-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--border);font-size:14px}
.pf-info-row .k{color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pf-info-row .v{color:#fff;text-align:right}
.pf-info-label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:20px 0 12px}
.pf-info-stack{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.pf-brief{width:100%;justify-content:center}
@media (max-width:820px){
  .pf-detail-grid{grid-template-columns:1fr;gap:36px}
  .pf-info{position:static}
}
.pf-behance{width:100%;justify-content:center;margin-bottom:10px}
.pf-gallery-section{margin-top:56px}
.pf-gallery-stack{display:flex;flex-direction:column;gap:16px}
.pf-banner{aspect-ratio:16/9;border-radius:16px;border:1px solid var(--border);box-shadow:0 30px 70px -50px rgba(0,0,0,.85)}
.pf-buy{width:100%;justify-content:center;margin-bottom:10px}
.pf-video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.pf-contain img,.pf-contain video{object-fit:contain}
.pf-gallery-nat{gap:18px}
.pf-nat{border-radius:16px;overflow:hidden;border:1px solid var(--border);background:radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.045),transparent 70%),#0e0e10;box-shadow:0 30px 70px -50px rgba(0,0,0,.85)}
.pf-nat img{width:100%;height:auto;display:block}
.pf-yt-poster{position:relative;width:100%;height:100%;border:0;padding:0;margin:0;cursor:pointer;background:#000;display:block;overflow:hidden}
.pf-yt-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.pf-yt-poster:hover img{transform:scale(1.03)}
.pf-yt-play{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;background:rgba(10,10,12,.55);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .25s,border-color .25s,transform .25s}
.pf-yt-play::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;transform:translateX(3px)}
.pf-yt-poster:hover .pf-yt-play{background:var(--tx-accent);border-color:var(--tx-accent);transform:scale(1.06)}
.pf-yt-frame{width:100%;height:100%;border:0;display:block}
.pf-badge-sale{position:absolute;top:12px;right:12px;z-index:4;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#04141a;background:linear-gradient(135deg,#9fe9ff,var(--tx-accent));box-shadow:0 8px 24px -8px var(--tx-accent),inset 0 0 0 1px rgba(255,255,255,.4);animation:pf-sale-pulse 2.6s var(--ease) infinite}
.pf-badge-sale::before{content:"";width:7px;height:7px;border-radius:50%;background:#04141a;animation:pf-sale-dot 2.6s var(--ease) infinite}
@keyframes pf-sale-pulse{0%,100%{box-shadow:0 8px 24px -8px var(--tx-accent),inset 0 0 0 1px rgba(255,255,255,.4)}50%{box-shadow:0 12px 32px -4px var(--tx-accent),inset 0 0 0 1px rgba(255,255,255,.55)}}
@keyframes pf-sale-dot{0%,100%{opacity:.5}50%{opacity:1}}
.pf-badge-inline{position:static;top:auto;right:auto;margin-left:12px;vertical-align:middle}
.pf-grid-wrap{display:block}
.pf-more{display:flex;align-items:center;gap:8px;margin:36px auto 0;padding:13px 28px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.025);color:rgba(255,255,255,.9);font-size:13px;font-weight:500;letter-spacing:.02em;cursor:pointer;transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.pf-more:hover{border-color:var(--tx-accent);color:#fff;background:rgba(79,201,236,.08);transform:translateY(-2px)}

/* ============ AUTH — LOGIN / COMPTE ============ */
:root{ --blurple:#5865F2; }

/* --- Bouton "Se connecter" (état déconnecté) --- */
.auth-login{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:999px;
  background:rgba(20,20,22,.5);
  border:1px solid var(--border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--text-soft); font-weight:500; font-size:14px; line-height:1; white-space:nowrap;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease-spring);
}
.auth-login-glow{
  position:absolute; inset:-40% -10%; pointer-events:none; opacity:0;
  background:radial-gradient(60% 120% at 18% 50%, rgba(88,101,242,.45), transparent 70%);
  transition:opacity .35s var(--ease);
}
.auth-login::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .8s var(--ease);
}
.auth-login-ic{ display:inline-flex; color:var(--blurple); transition:color .3s var(--ease); }
.auth-login-ic svg{ width:18px; height:18px; display:block; }
.auth-login-label{ position:relative; z-index:1; }
.auth-login:hover{
  color:#fff; border-color:rgba(88,101,242,.55); background:rgba(36,38,58,.6);
  box-shadow:0 0 0 1px rgba(88,101,242,.18), 0 12px 34px -12px rgba(88,101,242,.6);
  transform:translateY(-1px);
}
.auth-login:hover .auth-login-glow{ opacity:1; }
.auth-login:hover .auth-login-ic{ color:#fff; }
.auth-login:hover::before{ transform:translateX(120%); }
.auth-login:active{ transform:translateY(0); }

/* --- Pastille compte (état connecté) --- */
.auth-wrap{ position:relative; }
.auth-user{
  display:inline-flex; align-items:center; gap:9px;
  padding:5px 12px 5px 5px; border-radius:999px;
  background:rgba(20,20,22,.5); border:1px solid var(--border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--text-soft); cursor:pointer;
  transition:border-color .25s var(--ease-spring), background .25s var(--ease-spring), color .25s var(--ease-spring);
}
.auth-user:hover, .auth-user.is-open{ border-color:var(--border-hi); background:rgba(36,36,40,.55); color:#fff; }
.auth-av{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1px solid var(--border-hi); background:#0c0c0e; }
.auth-av--ph{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; font-weight:500; color:#fff; background:linear-gradient(135deg, var(--blurple), #3a44c9); }
.auth-user-name{ font-size:13.5px; font-weight:500; max-width:128px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auth-user-chev{ display:inline-flex; color:var(--muted); transition:transform .3s var(--ease-spring), color .25s var(--ease); }
.auth-user.is-open .auth-user-chev{ transform:rotate(180deg); color:#fff; }

/* --- Menu déroulant --- */
.auth-menu{
  position:absolute; top:calc(100% + 12px); right:0; z-index:120;
  min-width:248px; padding:8px;
  background:rgba(14,14,17,.92); border:1px solid var(--border-hi); border-radius:18px;
  backdrop-filter:blur(22px) saturate(1.2); -webkit-backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 24px 70px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
  transform-origin:top right; animation:authPop .26s var(--ease-spring) both;
}
@keyframes authPop{ from{ opacity:0; transform:translateY(-8px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }
.auth-menu-head{ display:flex; align-items:center; gap:12px; padding:10px 10px 12px; }
.auth-menu-av{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1px solid var(--border-hi); background:#0c0c0e; font-size:15px; }
.auth-menu-id{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.auth-menu-as{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.auth-menu-name{ font-size:14px; font-weight:600; color:#fff; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auth-badge{ margin-left:auto; align-self:flex-start; font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; font-weight:600; padding:3px 7px; border-radius:6px; color:#cdd2ff; background:rgba(88,101,242,.16); border:1px solid rgba(88,101,242,.4); }
.auth-badge--seller{ color:#bff0d2; background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.4); }
.auth-menu-sep{ height:1px; background:var(--border); margin:4px 6px; }
.auth-item{ display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:11px; font-size:14px; font-weight:500; color:var(--text-soft); transition:background .2s var(--ease), color .2s var(--ease); }
.auth-item svg{ color:var(--muted); transition:color .2s var(--ease); flex:0 0 auto; }
.auth-item:hover{ background:var(--surface-hi); color:#fff; }
.auth-item:hover svg{ color:#fff; }
.auth-item--danger{ color:#ff9b9b; }
.auth-item--danger svg{ color:#ff7a7a; }
.auth-item--danger:hover{ background:rgba(220,38,38,.14); color:#ffb4b4; }
.auth-item--danger:hover svg{ color:#ff9b9b; }

/* --- Responsive --- */
@media (max-width:800px){
  .auth-login{ padding:9px 14px; font-size:13px; }
  .auth-login-ic svg{ width:16px; height:16px; }
  .auth-user{ padding:4px 10px 4px 4px; }
}
@media (max-width:560px){
  .auth-user-name{ display:none; }
  .auth-user{ padding:4px; gap:0; }
  .auth-login-label{ display:none; }
  .auth-login{ padding:9px 11px; }
  .auth-menu{ min-width:220px; }
}

/* Entrée "Espace prestataire" (accent cyan) */
.auth-item--pro{ color:var(--tx-accent); }
.auth-item--pro svg{ color:var(--tx-accent); }
.auth-item--pro:hover{ background:rgba(79,201,236,.12); color:#7fdcf3; }
.auth-item--pro:hover svg{ color:#7fdcf3; }