/* Layout: the mockup's composition, alive — a night support room photo runs full-bleed; brush headline and neon messenger tiles on the left, a glass rail of promises flush right, stats docked at the bottom. Below, warm dark sections lit by the same orange neon. */
:root{
  --ink:#0b0705;
  --ink-2:#120c09;
  --ink-3:#1b130e;
  --fg:#f8f2ea;
  --muted:#b9ab9f;
  --orange:#ff8a1c;
  --amber:#ffb53f;
  --ember:#ff5a14;
  --online:#3bdc6c;
  --line:rgba(255,214,170,.13);
  --glass:rgba(20,13,9,.6);
  --tg:#2aa7ee;--wa:#26d366;--vk:#2a86f5;--ig1:#feda75;--ig2:#fa7e1e;--ig3:#d62976;--ig4:#962fbf;--ig5:#4f5bd5;
  --font-display:"Montserrat","Arial Black","Segoe UI",system-ui,sans-serif;
  --font-body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-hand:"Caveat","Segoe Print","Comic Sans MS",cursive;
  --gutter:clamp(16px,2.4vw,56px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --rail-w:clamp(274px,17vw,360px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.page{overflow-x:hidden;overflow-x:clip}
.wrap{width:min(1200px,100%);margin-inline:auto}
html.no-scroll,html.no-scroll body{overflow:hidden}

/* ───────── Logo ───────── */
.logo{display:inline-flex;align-items:center;gap:.2em;text-decoration:none;font-family:var(--font-display);font-weight:900;line-height:1;letter-spacing:-.01em;color:#fff}
.logo-komi{display:inline-flex;font-size:1em}
.logo-hub{position:relative;display:inline-flex;align-items:center;padding:.06em .2em .08em;border-radius:.16em;background:linear-gradient(180deg,#ffa23a,#ff7a10);color:#fff;box-shadow:0 .08em .5em -0.1em rgba(255,122,16,.65),inset 0 -.05em 0 rgba(0,0,0,.18)}
.logo-crown{position:absolute;right:-.5em;top:-.5em;width:.58em;height:auto;overflow:visible;color:#fff;transform:rotate(14deg)}
.logo-crown path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}

/* ───────── Loader ───────── */
.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;color:var(--fg);
  background:radial-gradient(70% 60% at 50% 45%,#22150e 0%,#0e0907 60%,#060403 100%);
  animation:loader-failsafe .8s ease 14s forwards}
@keyframes loader-failsafe{to{opacity:0;visibility:hidden}}
.loader::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(0,0,0,.45) 38px 41px),
    repeating-linear-gradient(90deg,transparent 0 86px,rgba(0,0,0,.35) 86px 89px);
  -webkit-mask-image:radial-gradient(60% 55% at 50% 45%,#000 0%,transparent 75%);mask-image:radial-gradient(60% 55% at 50% 45%,#000 0%,transparent 75%)}
.loader.gone{display:none}
.loader.out{opacity:0;transition:opacity 1s ease .15s}
.ld-dust{position:absolute;inset:0;width:100%;height:100%}
.ld-core{position:relative;display:grid;justify-items:center;gap:30px;text-align:center;transition:transform 1.2s var(--ease-out),filter 1s ease}
.loader.out .ld-core{transform:scale(1.12);filter:blur(6px)}
.ld-sign{position:relative;display:flex;align-items:center;gap:.22em;font-family:var(--font-display);font-weight:900;font-size:clamp(3rem,10vmin,5.6rem);line-height:1;letter-spacing:-.01em}
.ld-komi{color:#fff4e8;opacity:.12;text-shadow:none}
.ld-hub{position:relative;padding:.04em .2em .07em;border-radius:.16em;color:#ffe3c2;border:.055em solid rgba(255,138,28,.25);opacity:.25}
.ld-crown{position:absolute;right:-.48em;top:-.6em;width:.62em;height:auto;overflow:visible;transform:rotate(14deg);opacity:.2}
.ld-crown path{fill:none;stroke:#fff6ea;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.loader.lit .ld-crown{animation:neon-on 1.1s linear .1s forwards}
.loader.lit .ld-komi{animation:neon-on-komi 1.3s linear .35s forwards}
.loader.lit .ld-hub{animation:neon-on-hub 1.3s linear .7s forwards}
@keyframes neon-on{0%{opacity:.2}8%{opacity:1;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px #ffd6a3)}12%{opacity:.25;filter:none}22%{opacity:1;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px #ffd6a3)}26%{opacity:.4;filter:none}40%,100%{opacity:1;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 16px #ffcf96)}}
@keyframes neon-on-komi{0%{opacity:.12;text-shadow:none}10%{opacity:1;text-shadow:0 0 6px #fff,0 0 22px #ffd7ae,0 0 48px #ff9c45}14%{opacity:.2;text-shadow:none}24%{opacity:1;text-shadow:0 0 6px #fff,0 0 22px #ffd7ae,0 0 48px #ff9c45}30%{opacity:.35;text-shadow:none}44%,100%{opacity:1;text-shadow:0 0 5px #fff,0 0 20px #ffd7ae,0 0 44px rgba(255,156,69,.85)}}
@keyframes neon-on-hub{0%{opacity:.25;box-shadow:none}10%{opacity:1;border-color:#ff8a1c;box-shadow:0 0 10px #ff8a1c,0 0 34px rgba(255,138,28,.8),inset 0 0 14px rgba(255,138,28,.6);text-shadow:0 0 8px #ffb15e}16%{opacity:.3;border-color:rgba(255,138,28,.3);box-shadow:none;text-shadow:none}30%{opacity:1;border-color:#ff8a1c;box-shadow:0 0 10px #ff8a1c,0 0 34px rgba(255,138,28,.8),inset 0 0 14px rgba(255,138,28,.6);text-shadow:0 0 8px #ffb15e}36%{opacity:.5;box-shadow:none}52%,100%{opacity:1;border-color:#ff9a33;box-shadow:0 0 9px #ff8a1c,0 0 30px rgba(255,138,28,.75),inset 0 0 12px rgba(255,138,28,.55);text-shadow:0 0 8px #ffb15e,0 0 18px rgba(255,138,28,.8)}}
.loader.flash .ld-sign{animation:sign-flash .5s ease-out forwards}
@keyframes sign-flash{0%{filter:none}35%{filter:brightness(1.8) drop-shadow(0 0 30px #ffb15e)}100%{filter:brightness(1.25)}}
.ld-tube{position:relative;width:min(300px,68vw);height:6px;border-radius:6px;background:rgba(255,214,170,.08);box-shadow:inset 0 0 0 1px rgba(255,214,170,.08)}
.ld-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);border-radius:inherit;background:linear-gradient(90deg,#ff5a14,#ff8a1c 60%,#ffc46b);box-shadow:0 0 10px rgba(255,138,28,.9),0 0 26px rgba(255,138,28,.45)}
.ld-head{position:absolute;top:50%;left:calc(var(--p,0) * 100%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,#fff 0 25%,rgba(255,200,130,.9) 40%,rgba(255,138,28,0) 70%)}
.ld-meta{width:min(300px,68vw);display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.86rem;color:var(--muted)}
.ld-pct{font-family:var(--font-display);font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums;min-width:3.4ch;text-align:right}
.ld-phrase{transition:opacity .25s ease}

/* ───────── Hero ───────── */
.hero{position:relative;isolation:isolate;min-height:max(560px,100vh);min-height:max(560px,100svh);display:grid;grid-template-rows:auto 1fr auto;background:var(--ink);overflow:hidden}
.scene{position:absolute;inset:0;z-index:0;overflow:hidden;container-type:size}
.scene-static{position:absolute;--sw:max(100cqw,calc(100cqh * 1.7778));--sh:max(100cqh,calc(100cqw / 1.7778));width:var(--sw);height:var(--sh);left:calc((100cqw - var(--sw)) * var(--fx,.5));top:calc((100cqh - var(--sh)) * var(--fy,.4))}
.scene-static img{position:absolute;display:block;max-width:none}
.scene-static .s-far{inset:0;width:100%;height:100%}
.scene-static .s-near{left:0;top:9.4444%;width:100%;height:auto;transition:transform .6s var(--ease-out)}
#gl,#fx{position:absolute;inset:0;width:100%;height:100%;display:block}
#gl{opacity:0;transition:opacity .4s ease}
.gl-on #gl{opacity:1}
.gl-on .scene-static{visibility:hidden}
#fx{pointer-events:none}
.scene-shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(8,5,3,.78) 0%,rgba(8,5,3,.5) 22%,rgba(8,5,3,.08) 40%,rgba(8,5,3,0) 60%,rgba(8,5,3,.35) 100%),
  linear-gradient(180deg,rgba(8,5,3,.45) 0%,rgba(8,5,3,0) 18%,rgba(8,5,3,0) 70%,rgba(8,5,3,.85) 100%)}

.topbar{position:relative;z-index:3;display:grid;justify-items:start;gap:clamp(4px,.8vh,8px);padding:clamp(14px,2.8vh,40px) var(--gutter) 0;pointer-events:none}
.topbar .logo{pointer-events:auto;font-size:clamp(1.8rem,min(2.9vw,5.1vh),3.4rem);filter:drop-shadow(0 4px 18px rgba(0,0,0,.55))}
.tagline{margin:0;font-weight:700;font-size:clamp(.6rem,.64vw,.78rem);letter-spacing:.42em;text-transform:uppercase;color:rgba(248,242,234,.86);white-space:nowrap}

.hero-main{position:relative;z-index:2;display:flex;align-items:center;padding:clamp(6px,1.6vh,28px) var(--gutter) clamp(4px,1.1vh,24px);pointer-events:none}
.hero-copy{pointer-events:auto;--hw:clamp(290px,min(33.4vw,51vh),780px);width:calc(var(--hw) + 30px);max-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(7px,1.4vh,22px)}
.eyebrow{margin:0 0 -.4em .3em;display:flex;gap:.9em;align-items:center;font-weight:700;font-size:clamp(.66rem,.72vw,.86rem);letter-spacing:.38em;text-transform:uppercase;color:rgba(248,242,234,.86);transform:rotate(-3.2deg);transform-origin:0 50%}
.eyebrow i{width:4px;height:4px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange)}
.headline{position:relative;margin:0;width:var(--hw);aspect-ratio:1300/636;max-width:100%}
.headline img{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none}
.hl1{left:1.62%;top:3.62%;width:72.46%}
.hl2{left:4.77%;top:36.48%;width:93.54%}
.hl3{left:11.15%;top:70.91%;width:54.54%}
.hl4{left:69%;top:63.99%;width:30%}
.hl1,.hl3{filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.hl2{filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,120,20,.25))}
.headline-text{display:none}
.headline.is-text{aspect-ratio:auto;padding:.1em 0 .25em;container-type:inline-size}
.headline.is-text img{display:none}
.headline.is-text .headline-text{position:relative;display:grid;justify-items:start;gap:0;font-family:var(--font-display);font-weight:900;font-style:italic;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;transform:rotate(-4deg);transform-origin:0 100%;filter:url(#brushy) drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.ht{display:block;white-space:nowrap;padding-right:.08em}
.ht1{font-size:calc(var(--hw) * .2);font-size:20cqi;color:#fff}
.ht2{font-size:calc(var(--hw) * .16);font-size:16cqi;background:linear-gradient(180deg,#ffb04a 0%,#ff8a1c 55%,#ff6a10 100%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:.02em}
.ht3{font-size:calc(var(--hw) * .085);font-size:8.5cqi;color:#fff;margin:.18em 0 0 9%;letter-spacing:.04em}
.ht:empty{display:none}
.ht-heart{display:inline-block;width:.58em;height:auto;margin:0 0 0 .32em;vertical-align:.25em;overflow:visible;transform:rotate(10deg)}
.ht-heart path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.js-anim .headline-text .ht{opacity:0;transform:translateX(-18px)}
.hero-in .headline-text .ht{opacity:1;transform:none;transition:opacity .6s ease,transform .9s var(--ease-out)}
.hero-in .headline-text .ht1{transition-delay:1s}.hero-in .headline-text .ht2{transition-delay:1.3s}.hero-in .headline-text .ht3{transition-delay:1.6s}
.hl-heart{position:absolute;left:74.1%;top:3.2%;width:12.6%;height:auto;overflow:visible;color:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.hl-heart path{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.hl-heart .hb{transform-box:fill-box;transform-origin:50% 60%}
.lead{margin:0;max-width:46ch;font-size:clamp(.92rem,min(1.06vw,1.9vh),1.22rem);line-height:1.5;color:#eee6dc;text-wrap:pretty;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.lead b,.lead .hl{color:var(--orange);font-weight:800}
.feat p .hl,.wu-text .hl,.note .hl{color:var(--orange);font-style:normal}
.lead .w{display:inline-block}

.tiles{display:flex;flex-wrap:wrap;gap:clamp(14px,1.6vw,26px);list-style:none;margin:4px 0 0;padding:0}
.tile{--c:var(--tg);--glow:rgba(42,167,238,.55);display:grid;justify-items:center;gap:clamp(5px,.8vh,8px);text-decoration:none;color:#fff;font-weight:600;font-size:clamp(.82rem,.86vw,.98rem);text-shadow:0 2px 10px rgba(0,0,0,.8)}
.tile-box{position:relative;isolation:isolate;display:grid;place-items:center;width:clamp(52px,min(5.2vw,8.8vh),104px);aspect-ratio:1;border-radius:22%;
  background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--c) 34%,#0c1220) 0%,#0a0d16 70%);
  border:2px solid var(--c);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 14px -2px var(--glow),0 0 34px -6px var(--glow),inset 0 0 18px -6px var(--glow);
  transition:transform .4s var(--ease-spring),box-shadow .35s ease}
.tile-box::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 46%)}
.tile-label{max-width:7.5em;text-align:center;line-height:1.15;overflow-wrap:anywhere}
.tile-box svg{width:48%;height:48%;color:#fff;filter:drop-shadow(0 0 6px var(--glow));transition:transform .45s var(--ease-spring)}
.tile:hover .tile-box,.tile:focus-visible .tile-box{transform:translateY(-6px) scale(1.04);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 0 18px 0 var(--glow),0 0 50px -4px var(--glow),inset 0 0 24px -4px var(--glow)}
.tile:hover .tile-box svg{transform:rotate(-8deg) scale(1.08)}
.tile:focus-visible{outline:none}
.tile:focus-visible .tile-box{outline:3px solid var(--amber);outline-offset:4px}
.tile.ig-grad .tile-box{border-color:transparent;background:linear-gradient(#150b18,#150b18) padding-box,linear-gradient(45deg,var(--ig1),var(--ig2) 25%,var(--ig3) 50%,var(--ig4) 75%,var(--ig5)) border-box}
.tile.ig-grad .tile-box::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:.55;background:radial-gradient(90% 90% at 25% 100%,rgba(250,126,30,.55),transparent 60%),radial-gradient(90% 90% at 80% 10%,rgba(150,47,191,.6),transparent 62%)}
.ripple{position:absolute;z-index:2;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;background:rgba(255,255,255,.55);pointer-events:none;animation:ripple .7s ease-out forwards}
@keyframes ripple{to{transform:scale(14);opacity:0}}

.write-us{display:flex;align-items:flex-start;gap:12px;margin:2px 0 0 clamp(30px,3.2vw,56px);color:#fff}
.wu-arrow{width:clamp(30px,min(2.9vw,5vh),50px);height:auto;flex:none;overflow:visible;margin-top:-6px}
.wu-arrow path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wu-text{display:grid;gap:0;font-family:var(--font-hand);line-height:1.02;transform:rotate(-4deg);transform-origin:0 50%}
.wu-text b{font-weight:700;font-size:clamp(1.3rem,min(1.7vw,3vh),2.1rem)}
.wu-text span{font-weight:600;font-size:clamp(1.05rem,min(1.35vw,2.4vh),1.65rem);color:#efe7dd;display:inline-flex;align-items:center;gap:.3em}
.wu-text em{font-style:normal;color:var(--orange)}
.online{display:inline-block;width:.42em;height:.42em;border-radius:50%;background:var(--online);box-shadow:0 0 0 0 rgba(59,220,108,.7),0 0 10px var(--online);animation:online 2s ease-out infinite}
@keyframes online{0%{box-shadow:0 0 0 0 rgba(59,220,108,.65),0 0 10px var(--online)}70%{box-shadow:0 0 0 .6em rgba(59,220,108,0),0 0 10px var(--online)}100%{box-shadow:0 0 0 0 rgba(59,220,108,0),0 0 10px var(--online)}}

/* rail */
.rail{position:absolute;z-index:3;right:0;top:clamp(70px,10vh,110px);width:var(--rail-w);padding:clamp(14px,2vh,26px) clamp(16px,1.3vw,26px) clamp(14px,2vh,26px) clamp(16px,1.4vw,28px);
  border-radius:26px 0 0 26px;background:linear-gradient(160deg,rgba(26,17,12,.72),rgba(12,8,6,.78));
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:-20px 30px 70px -30px rgba(0,0,0,.8),inset 1px 1px 0 rgba(255,255,255,.07);border:1px solid rgba(255,214,170,.12);border-right:0}
.rail-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,2.4vh,26px)}
.feat{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(10px,.9vw,16px)}
.feat-ico{position:relative;display:grid;place-items:center;width:clamp(46px,3.6vw,64px);aspect-ratio:1;border-radius:50%;color:var(--orange);
  background:radial-gradient(circle at 50% 40%,#2a1a10,#110b08 70%);box-shadow:0 0 0 1.5px rgba(255,138,28,.75),0 0 22px -4px rgba(255,138,28,.6),inset 0 0 14px -4px rgba(255,138,28,.5)}
.feat-ico svg{width:46%;height:46%;filter:drop-shadow(0 0 6px rgba(255,138,28,.7))}
.feat h3{margin:0 0 2px;font-family:var(--font-body);font-weight:800;font-size:clamp(.9rem,.92vw,1.08rem);line-height:1.2;color:#fff}
.feat p{margin:0;font-size:clamp(.76rem,.76vw,.9rem);line-height:1.35;color:#d6cbc1}
.feat p em{font-style:normal;color:var(--orange);font-weight:800}
.i-bolt{animation:i-bolt 4s ease-in-out infinite}
@keyframes i-bolt{0%,84%,100%{opacity:1}86%{opacity:.3}88%{opacity:1}90%{opacity:.45}92%{opacity:1}}
.i-people .p2{animation:i-bob 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.i-people .p1{animation:i-bob 2.6s ease-in-out .3s infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes i-bob{0%,100%{transform:none}50%{transform:translateY(-1.5px)}}
.i-shield .sh-shine{animation:i-shine 3.6s ease-in-out infinite}
@keyframes i-shine{0%,60%{transform:translateX(-14px);opacity:0}70%{opacity:.9}100%{transform:translateX(14px);opacity:0}}
.i-heart{transform-box:fill-box;transform-origin:50% 55%;animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.16)}24%{transform:scale(.98)}36%{transform:scale(1.1)}50%{transform:scale(1)}}

/* bottom row */
.hero-bottom{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:20px;padding:0 var(--gutter) clamp(10px,2.2vh,30px)}
.stats{grid-column:2;list-style:none;margin:0;padding:clamp(10px,1.7vh,22px) clamp(18px,2vw,40px);display:grid;justify-content:space-between;gap:clamp(16px,2.6vw,56px);width:min(64.6vw,1280px);grid-template-columns:repeat(var(--n,4),auto);
  border-radius:22px;background:linear-gradient(180deg,rgba(24,16,11,.72),rgba(11,7,5,.82));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,214,170,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
.stat{position:relative;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:clamp(10px,.9vw,16px)}
.stat+.stat::before{content:"";position:absolute;left:calc(-1 * clamp(8px,1.3vw,28px));top:10%;bottom:10%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,214,170,.18),transparent)}
.stat-ico{grid-row:span 2;display:block;width:clamp(28px,min(2.3vw,4vh),42px);color:var(--orange);filter:drop-shadow(0 0 8px rgba(255,138,28,.55))}
.stat-ico svg{display:block;width:100%;height:auto;overflow:visible}
.stat b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.1rem,min(1.45vw,2.6vh),1.8rem);line-height:1.05;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-label{font-size:clamp(.74rem,.78vw,.92rem);color:#d8cdc3;white-space:nowrap}
.st-star{transform-box:fill-box;transform-origin:center;animation:st-star 5s ease-in-out infinite}
@keyframes st-star{0%,80%,100%{transform:none}88%{transform:rotate(72deg) scale(1.12)}}
.st-hand{transform-box:view-box;transform-origin:12px 13px;animation:st-hand 6s linear infinite}
@keyframes st-hand{to{transform:rotate(360deg)}}
.st-globe .mer{animation:st-mer 4s linear infinite}
@keyframes st-mer{0%{d:path("M12 3c-4 3-4 15 0 18")}50%{d:path("M12 3c4 3 4 15 0 18")}100%{d:path("M12 3c-4 3-4 15 0 18")}}
.st-people .pp{animation:i-bob 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.since{grid-column:3;justify-self:end;position:relative;display:grid;justify-items:end;text-align:right}
.since-mark{display:flex;align-items:center;gap:10px;font-size:.72rem;line-height:1.25;color:var(--muted)}
.since-mark b{display:block;color:#e9e0d6;letter-spacing:.12em;font-weight:800;font-size:.7rem}
.since-mark svg{width:30px;height:auto;color:#d9cfc5}
.since-mark svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}

/* handwritten notes */
.note{margin:0;font-family:var(--font-hand);color:rgba(255,255,255,.82);line-height:.95;pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.note .ln{display:block}
.note-php{position:absolute;z-index:2;top:clamp(80px,10vh,120px);right:calc(var(--rail-w) + 2.2vw);font-size:clamp(1.6rem,2.05vw,2.6rem);transform:rotate(-8deg);text-align:left;color:rgba(255,255,255,.7)}
.note-php svg{display:block;width:1.1em;margin:.12em 0 0 .6em;overflow:visible}
.note-php svg path,.note-good svg path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.note-good{position:absolute;right:0;bottom:calc(100% + 10px);font-size:clamp(1.35rem,min(1.7vw,3vh),2.2rem);transform:rotate(-9deg);transform-origin:100% 100%;text-align:center}
.note-good .ln{white-space:nowrap}
.note-good .hrt{display:inline-block;width:.75em;height:auto;vertical-align:-.12em;margin-left:.15em}
.note-good .uline{display:block;width:72%;height:auto;margin:.08em 0 0 22%;overflow:visible}
.note-good .uline path{stroke:var(--orange);stroke-width:4;filter:drop-shadow(0 0 4px rgba(255,138,28,.6))}

/* ───────── Hero entrance (JS-driven) ───────── */
.js-anim .topbar .logo .ch{display:inline-block;opacity:0;transform:translateY(-.5em) rotate(-10deg)}
.js-anim .topbar .logo-hub{transform:scale(.3) rotate(-12deg);opacity:0}
.js-anim .topbar .logo-crown path{stroke-dasharray:1;stroke-dashoffset:1}
.js-anim .tagline{opacity:0;letter-spacing:1em}
.js-anim .eyebrow>*{opacity:0;transform:translateY(8px)}
.js-anim .headline img{-webkit-mask-image:linear-gradient(100deg,#000 42%,transparent 58%);mask-image:linear-gradient(100deg,#000 42%,transparent 58%);-webkit-mask-size:280% 100%;mask-size:280% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;opacity:0;translate:-14px 0}
.js-anim .hl-heart path{stroke-dasharray:1;stroke-dashoffset:1}
.js-anim .lead .w{opacity:0;transform:translateY(.6em)}
.js-anim .tiles .tile{opacity:0;transform:translateY(18px) scale(.8)}
.js-anim .wu-arrow path{stroke-dasharray:1;stroke-dashoffset:1}
.js-anim .wu-text{clip-path:inset(-20% 100% -20% 0)}
.js-anim .rail{transform:translateX(40px);opacity:0;filter:blur(8px)}
.js-anim .rail .feat{opacity:0;transform:translateX(26px)}
.js-anim .stats{transform:translateY(40px);opacity:0}
.js-anim .stats .stat{opacity:0;transform:translateY(12px)}
.js-anim .since-mark{opacity:0}
.js-anim .note .ln{clip-path:inset(-30% 100% -30% 0)}
.js-anim .note-php svg path,.js-anim .note-good svg path{stroke-dasharray:1;stroke-dashoffset:1}

.hero-in .topbar .logo .ch{opacity:1;transform:none;transition:opacity .5s ease,transform .8s var(--ease-spring);transition-delay:calc(.15s + var(--i) * 60ms)}
.hero-in .topbar .logo-hub{transform:none;opacity:1;transition:transform .9s var(--ease-spring) .45s,opacity .4s ease .45s}
.hero-in .topbar .logo-crown path{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease-out) .9s}
.hero-in .tagline{opacity:.86;letter-spacing:.42em;transition:opacity 1s ease .7s,letter-spacing 1.4s var(--ease-out) .7s}
.hero-in .eyebrow>*{opacity:1;transform:none;transition:opacity .6s ease,transform .7s var(--ease-out);transition-delay:calc(.8s + var(--k) * 120ms)}
.hero-in .headline img{-webkit-mask-position:0 0;mask-position:0 0;opacity:1;translate:0 0;transition:-webkit-mask-position 1.1s cubic-bezier(.5,0,.2,1),mask-position 1.1s cubic-bezier(.5,0,.2,1),opacity .25s ease,translate 1.1s var(--ease-out)}
.hero-in .hl1{transition-delay:1s}
.hero-in .hl2{transition-delay:1.35s}
.hero-in .hl3{transition-delay:1.75s}
.hero-in .hl4{transition-duration:.6s;transition-delay:2.1s}
.hero-in .hl-heart path{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease-out) 2.2s}
.hero-in .hl-heart .hb{animation:beat 2.4s ease-in-out 3.4s infinite}
.hero-in .lead .w{opacity:1;transform:none;transition:opacity .5s ease,transform .6s var(--ease-out);transition-delay:calc(1.9s + var(--i) * 22ms)}
.hero-in .tiles .tile{opacity:1;transform:none;transition:opacity .4s ease,transform .7s var(--ease-spring);transition-delay:calc(2.3s + var(--k) * 110ms)}
.js-anim.hero-in .tiles .tile .tile-box{animation:tile-on 1s linear both;animation-delay:calc(2.3s + var(--k) * 110ms)}
@keyframes tile-on{0%{box-shadow:none;border-color:rgba(255,255,255,.12)}12%{box-shadow:0 0 14px -2px var(--glow),0 0 34px -6px var(--glow);border-color:var(--c)}18%{box-shadow:none;border-color:rgba(255,255,255,.15)}32%{box-shadow:0 0 14px -2px var(--glow),0 0 34px -6px var(--glow);border-color:var(--c)}38%{box-shadow:none}60%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 14px -2px var(--glow),0 0 34px -6px var(--glow),inset 0 0 18px -6px var(--glow);border-color:var(--c)}}
.tiles.settled .tile{transition:transform .4s var(--ease-spring)}
.hero-in .wu-arrow path{stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--ease-out) 2.9s}
.hero-in .wu-text{clip-path:inset(-20% -10% -20% 0);transition:clip-path 1.1s cubic-bezier(.6,0,.3,1) 3.1s}
.hero-in .rail{transform:none;opacity:1;filter:none;transition:transform 1.1s var(--ease-out) 1.5s,opacity .8s ease 1.5s,filter .8s ease 1.5s}
.hero-in .rail .feat{opacity:1;transform:none;transition:opacity .6s ease,transform .8s var(--ease-out);transition-delay:calc(1.8s + var(--k) * 140ms)}
.hero-in .stats{transform:none;opacity:1;transition:transform 1s var(--ease-out) 2.2s,opacity .8s ease 2.2s}
.hero-in .stats .stat{opacity:1;transform:none;transition:opacity .5s ease,transform .7s var(--ease-out);transition-delay:calc(2.45s + var(--k) * 120ms)}
.hero-in .since-mark{opacity:1;transition:opacity 1s ease 3.2s}
.hero-in .note .ln{clip-path:inset(-30% -5% -30% 0);transition:clip-path .9s cubic-bezier(.6,0,.3,1);transition-delay:calc(3.3s + var(--k,0) * .45s)}
.hero-in .note-php svg path{stroke-dashoffset:0;transition:stroke-dashoffset .9s ease 4.6s}
.hero-in .note-good svg path{stroke-dashoffset:0;transition:stroke-dashoffset .8s ease 4.4s}

/* ───────── Stacked layout (phones, tablets, tall screens) ───────── */
@media not all and (min-width:1180px) and (min-height:560px) and (min-aspect-ratio:3/2){
  .hero{display:block;min-height:100vh;min-height:100svh;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));overflow:visible}
  .scene{position:relative;height:clamp(380px,118vw,78vh)}
  .scene-shade{background:linear-gradient(180deg,rgba(8,5,3,.55) 0%,rgba(8,5,3,0) 26%,rgba(8,5,3,0) 58%,var(--ink) 100%)}
  .topbar{position:absolute;top:0;left:0;right:0}
  .topbar .logo{font-size:clamp(1.9rem,6.4vw,2.6rem)}
  .tagline{font-size:clamp(.52rem,1.9vw,.7rem);letter-spacing:.3em}
  .hero-in .tagline{letter-spacing:.3em}
  .hero-main{margin-top:-74px;justify-content:center;padding-top:0;padding-bottom:0}
  .hero-copy{--hw:100%;width:min(100%,640px);padding:22px clamp(16px,4vw,32px) 26px;border-radius:28px;background:linear-gradient(170deg,rgba(22,14,10,.82),rgba(11,7,5,.92));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,214,170,.12);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
  .headline{width:100%}
  .eyebrow{font-size:.62rem;letter-spacing:.3em;gap:.7em}
  .lead{font-size:1rem}
  .tiles{width:100%;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:10px;justify-items:center}
  .tile{font-size:.8rem}
  .tile-box{width:100%;max-width:84px}
  .write-us{margin-left:18px}
  .rail{position:relative;top:auto;right:auto;width:auto;margin:14px var(--gutter) 0;border-radius:24px;border-right:1px solid rgba(255,214,170,.12)}
  .rail-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
  .hero-bottom{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:26px;padding:14px var(--gutter) 0}
  .note-php{display:none}
  .stats{grid-column:auto;width:100%}
  .since{grid-column:auto;justify-self:center;justify-items:center;text-align:center;gap:14px}
  .note-good{position:relative;right:auto;bottom:auto;font-size:clamp(1.6rem,6.4vw,2.1rem);transform:rotate(-4deg);transform-origin:50% 50%}
  .note-good .ln{display:inline;white-space:normal}
  .note-good .ln+.ln::before{content:" "}
  .note-good .uline{margin:.12em auto 0;width:min(240px,60%)}
  .since-mark{justify-content:center}
  .stats{width:100%;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px}
  .stat{grid-template-columns:auto minmax(0,1fr)}
  .stat-label{white-space:normal}
  .stat+.stat::before{display:none}
  .js-anim .rail{transform:translateY(24px)}
  .js-anim .stats{transform:translateY(24px)}
  .hero-in .rail{transition-delay:.3s}
  .hero-in .rail .feat{transition-delay:calc(.5s + var(--k) * 120ms)}
  .hero-in .stats{transition-delay:.5s}
  .hero-in .stats .stat{transition-delay:calc(.7s + var(--k) * 110ms)}
}
@media (max-width:760px){
  .rail-list{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px}
}
@media (max-width:400px){
  .tile{font-size:.72rem}
  .write-us{margin-left:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}