/* =====================================================================
   APP SHELL + PUBLIC AREA + MOTION LAYER
   ===================================================================== */
/* ---------------- TOP BAR (public) ---------------- */
.tbar{position:fixed;inset-block-start:0;inset-inline:0;z-index:130;padding:12px 0;
  transition:background var(--dur),box-shadow var(--dur),padding var(--dur)}
.tbar.is-stuck{background:rgba(10,10,11,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding:8px 0}
.tbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo__m{inline-size:34px;block-size:34px;border-radius:var(--r-sm);border:1px solid var(--acc-line);
  background:var(--acc-soft);color:var(--acc-500);display:grid;place-items:center;flex:none}
.logo__m svg{inline-size:18px;block-size:18px}
.logo b{font-family:var(--disp);font-weight:900;font-size:19px;letter-spacing:-.04em;display:block}
.logo span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--fg-3);display:block}
.tnav{display:flex;align-items:center;gap:2px}
.tnav a{position:relative;padding:10px 11px;font-size:13.5px;font-weight:500;color:var(--fg-2);white-space:nowrap;
  transition:color var(--dur-fast)}
.tnav a::after{content:"";position:absolute;inset-inline-start:11px;inset-block-end:4px;inline-size:0;block-size:2px;
  background:var(--acc-500);transition:inline-size var(--dur-fast) var(--ease)}
.tnav a:hover{color:var(--fg)}
.tnav a:hover::after,.tnav a[aria-current="page"]::after{inline-size:calc(100% - 22px)}
.tnav a[aria-current="page"]{color:var(--fg)}
.tacts{display:flex;align-items:center;gap:8px;flex:none}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;inline-size:44px;
  block-size:44px;background:none;border:1px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer}
.burger i{inline-size:19px;block-size:1.5px;background:var(--fg);transition:transform var(--dur-fast),opacity var(--dur-fast)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:1140px){
  .tnav{position:fixed;inset:0 0 auto;flex-direction:column;align-items:flex-start;gap:2px;background:var(--deep);
    padding:84px var(--gut) 30px;transform:translateY(-102%);transition:transform .36s var(--ease);
    border-block-end:1px solid var(--line)}
  .tnav.is-open{transform:none}
  .tnav a{font-family:var(--disp);font-size:21px;font-weight:700;color:var(--fg);padding:10px 0}
  .tnav a::after{inset-inline-start:0}
  .burger{display:flex}
  .tacts .btn--ghost{display:none}
}

/* ---------------- PUBLIC PAGE SHELL ---------------- */
.view{display:none}
.view.is-active{display:block}
.sec{padding:clamp(56px,7vw,96px) 0}
.sec--tight{padding:clamp(36px,4.6vw,60px) 0}
.sec--deep{background:var(--deep)}
.sec--tint{background:var(--bg-2)}
.sec-head{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(20px,4vw,48px);
  align-items:end;margin-block-end:clamp(26px,3.6vw,48px)}
.sec-head h2{font-size:clamp(27px,4vw,46px);font-weight:800;font-family:var(--disp);letter-spacing:-.03em;line-height:1.06}
.lede{font-size:16px;color:var(--fg-2);max-width:60ch;line-height:1.68}
@media(max-width:980px){.sec-head{grid-template-columns:1fr;align-items:start;gap:16px}}
.hero{position:relative;overflow:hidden;padding:clamp(112px,14vw,168px) 0 clamp(40px,5vw,64px);
  background:
    radial-gradient(1100px 620px at 78% -12%,rgba(198,244,50,.17),transparent 62%),
    radial-gradient(760px 520px at -5% 105%,rgba(27,68,96,.55),transparent 62%),
    var(--deep)}
.hero__g{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(242,244,238,.05) 1px,transparent 1px);background-size:12.5% 100%}
.hero__in{position:relative;max-width:900px}
.hero h1{font-family:var(--disp);font-weight:900;font-size:clamp(34px,6.6vw,74px);letter-spacing:-.04em;line-height:1.02}
.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.4px rgba(242,244,238,.5);display:block}
.hero__k{color:var(--acc-500);font-weight:600;font-size:clamp(15px,1.9vw,19px);margin-block:18px 14px;max-width:60ch}
.hero p{color:var(--fg-2);font-size:16px;line-height:1.7;max-width:66ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:28px}
.hero__note{margin-block-start:22px;display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:640px){.hero h1{font-size:clamp(30px,8.4vw,44px);overflow-wrap:break-word}}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line);background:var(--bg-2)}
.kpi{padding:22px var(--gut);border-inline-end:1px solid var(--line)}
.kpi:last-child{border-inline-end:0}
.kpi b{display:block;font-family:var(--disp);font-size:clamp(26px,3.6vw,44px);font-weight:800;color:var(--acc-500);letter-spacing:-.03em}
.kpi p{font-size:12.5px;color:var(--fg-2);margin-block-start:4px}
@media(max-width:760px){.kpis{grid-template-columns:1fr 1fr}.kpi:nth-child(2){border-inline-end:0}.kpi:nth-child(-n+2){border-block-end:1px solid var(--line)}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--bg);padding:22px 20px;display:grid;gap:8px;align-content:start;transition:background var(--dur-fast)}
.step:hover{background:#191920}
.step .n{font-family:var(--mono);font-size:11px;color:var(--acc-500)}
.step h4{font-size:16px}
.step p{font-size:13.5px;color:var(--fg-2);line-height:1.6}
@media(max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.mods{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.mods{grid-template-columns:1fr}}
.mod{display:grid;gap:10px;align-content:start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px;transition:border-color var(--dur-fast),transform var(--dur-fast)}
.mod:hover{border-color:var(--acc-line);transform:translateY(-2px)}
.mod .ic{inline-size:22px;block-size:22px;color:var(--acc-500)}
.mod h4{font-size:16.5px}
.mod p{font-size:13.5px;color:var(--fg-2);line-height:1.62}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;gap:14px}
.plan.is-best{border-color:var(--acc-line);box-shadow:0 0 0 1px rgba(198,244,50,.18) inset}
.plan__p{font-family:var(--disp);font-size:36px;font-weight:800;letter-spacing:-.03em}
.plan__p small{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--fg-3);letter-spacing:0}
.plan ul{list-style:none;display:grid;gap:9px;font-size:13.5px;color:var(--fg-2)}
.plan li{display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start}
.plan li svg{inline-size:14px;block-size:14px;color:var(--acc-500);margin-block-start:3px}
.plan li.off{color:var(--fg-3)}
.plan li.off svg{color:var(--fg-3)}

/* ---------------- MARKETPLACE ---------------- */
.mk{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}
@media(max-width:1080px){.mk{grid-template-columns:1fr}.mk__f{position:static!important}}
.mk__f{position:sticky;inset-block-start:calc(var(--head) + 16px);display:grid;gap:16px}
.fgroup{border-block-end:1px solid var(--line-2);padding-block-end:14px;display:grid;gap:10px}
.fgroup:last-child{border-block-end:0}
.fgroup h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);font-weight:500}
.checks{display:grid;gap:8px;max-block-size:200px;overflow:auto}
.check{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--fg-2);cursor:pointer}
.check input{inline-size:16px;block-size:16px;accent-color:var(--acc-500);flex:none}
.results{display:grid;gap:14px}
.rcard{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:16px;background:var(--app-surface);
  border:1px solid var(--line-2);border-radius:var(--r-lg);transition:border-color var(--dur-fast),transform var(--dur-fast)}
.rcard:hover{border-color:var(--acc-line);transform:translateY(-2px)}
.rcard--spon{border-color:rgba(245,185,72,.4);background:linear-gradient(180deg,rgba(245,185,72,.05),transparent)}
.rcard__t{aspect-ratio:1;border-radius:var(--r);background:#101720;border:1px solid var(--line-2);display:grid;
  place-items:center;font-family:var(--mono);font-size:10px;color:var(--fg-3);text-align:center;padding:8px}
.rcard h4{font-size:16.5px}
.rcard .meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--fg-2);margin-block-start:8px}
.rcard .meta b{color:var(--fg);font-family:var(--mono);font-size:12px}
@media(max-width:560px){.rcard{grid-template-columns:1fr}.rcard__t{aspect-ratio:16/7}}
.cover{position:relative;padding:clamp(90px,11vw,120px) 0 0;background:
  radial-gradient(900px 460px at 85% -20%,rgba(198,244,50,.14),transparent 60%),var(--deep)}
.chead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:start;padding-block-end:22px}
@media(max-width:820px){.chead{grid-template-columns:1fr;gap:14px}}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gal__i{aspect-ratio:4/3;border:1px solid var(--line-2);border-radius:var(--r);background:#101720;display:grid;
  place-items:center;font-family:var(--mono);font-size:10px;color:var(--fg-3);text-align:center;padding:10px}
.gal__i--main{grid-column:span 2;grid-row:span 2}
@media(max-width:640px){.gal{grid-template-columns:repeat(2,1fr)}}
.speclist{display:grid;gap:0}
.spec{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:16px;padding:12px 0;
  border-block-end:1px solid var(--line-2);font-size:13.5px}
.spec dt{color:var(--fg-3);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.spec dd{color:var(--fg)}

/* ---------------- WIZARD ---------------- */
.wiz{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}
@media(max-width:900px){.wiz{grid-template-columns:1fr;gap:20px}}
.wsteps{display:grid;gap:2px}
.wstep{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:10px;border-radius:var(--r);
  font-size:13.5px;color:var(--fg-3);align-items:center}
.wstep b{inline-size:26px;block-size:26px;border-radius:50%;border:1px solid var(--line-2);display:grid;
  place-items:center;font-family:var(--mono);font-size:11px}
.wstep.is-done{color:var(--fg-2)}
.wstep.is-done b{border-color:var(--acc-line);background:var(--acc-soft);color:var(--acc-500)}
.wstep.is-now{color:var(--fg);background:var(--app-surface)}
.wstep.is-now b{border-color:var(--acc-500);background:var(--acc-500);color:var(--acc-on)}
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:640px){.roles{grid-template-columns:1fr}}
.role{text-align:start;display:grid;gap:6px;padding:16px;background:var(--app-raised);border:1px solid var(--line-2);
  border-radius:var(--r-lg);cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast)}
.role:hover{border-color:var(--acc-line)}
.role[aria-pressed="true"]{border-color:var(--acc-500);background:var(--acc-soft)}
.role b{font-size:15px}
.role span{font-size:13px;color:var(--fg-2)}

/* ---------------- APP SHELL ---------------- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-block-size:100vh}
.shell.is-min{grid-template-columns:var(--side-min) minmax(0,1fr)}
.side{position:sticky;inset-block-start:0;block-size:100vh;overflow-y:auto;background:var(--navy-900);
  border-inline-end:1px solid var(--line-2);display:flex;flex-direction:column;gap:4px;padding:14px 12px;z-index:120}
.side__co{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:8px;
  border:1px solid var(--line-2);border-radius:var(--r);background:rgba(255,255,255,.03);margin-block-end:10px}
.side__co b{font-size:13.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side__co span{font-family:var(--mono);font-size:9.5px;color:var(--fg-3);display:block}
.side h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);
  padding:14px 10px 6px;font-weight:500}
.snav{display:grid;gap:2px}
.snav a{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:10px;
  border-radius:var(--r);font-size:13.5px;color:var(--fg-2);min-block-size:40px;
  transition:background var(--dur-fast),color var(--dur-fast)}
.snav a svg{inline-size:16px;block-size:16px;flex:none}
.snav a:hover{background:rgba(255,255,255,.04);color:var(--fg)}
.snav a[aria-current="page"]{background:var(--acc-soft);color:var(--acc-500)}
.snav a.is-locked{color:var(--fg-3)}
.snav a.is-locked:hover{color:var(--fg-2)}
.side__ft{margin-block-start:auto;padding-block-start:12px;border-block-start:1px solid var(--line-2);display:grid;gap:8px}
.shell.is-min .side__co,.shell.is-min .side h5,.shell.is-min .snav a span,.shell.is-min .snav a .badge,
.shell.is-min .side__ft .btn span{display:none}
.shell.is-min .snav a{grid-template-columns:18px;justify-content:center}
.apphead{position:sticky;inset-block-start:0;z-index:110;display:flex;align-items:center;gap:12px;
  min-block-size:var(--head);padding:10px clamp(14px,2.4vw,24px);background:rgba(13,18,24,.92);
  backdrop-filter:blur(12px);border-block-end:1px solid var(--line-2)}
.apphead h1{font-size:16.5px;font-weight:700}
.apphead .crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.cmd{display:flex;align-items:center;gap:8px;min-block-size:38px;padding:8px 12px;background:#0B1117;
  border:1px solid var(--line-2);border-radius:var(--r);color:var(--fg-3);font-size:13px;cursor:pointer;
  min-inline-size:220px;transition:border-color var(--dur-fast)}
.cmd:hover{border-color:var(--acc-line);color:var(--fg-2)}
.cmd kbd{margin-inline-start:auto;font-family:var(--mono);font-size:10px;border:1px solid var(--line-2);
  border-radius:4px;padding:2px 5px;color:var(--fg-3)}
@media(max-width:900px){.cmd{min-inline-size:0}.cmd span,.cmd kbd{display:none}}
.iconbtn{position:relative;inline-size:38px;block-size:38px;display:grid;place-items:center;background:transparent;
  border:1px solid var(--line-2);border-radius:var(--r);color:var(--fg-2);cursor:pointer;flex:none}
.iconbtn:hover{color:var(--acc-500);border-color:var(--acc-line)}
.iconbtn svg{inline-size:17px;block-size:17px}
.iconbtn .dot{position:absolute;inset-block-start:-3px;inset-inline-end:-3px;inline-size:16px;block-size:16px;
  border-radius:50%;background:var(--acc-500);color:var(--acc-on);font-size:9.5px;font-weight:700;
  display:grid;place-items:center;font-family:var(--mono)}
.main{padding:clamp(18px,2.6vw,28px) clamp(14px,2.4vw,28px) 64px;display:grid;gap:20px;align-content:start}
.pagehd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pagehd h2{font-size:clamp(20px,2.6vw,27px);font-weight:800;letter-spacing:-.025em}
.pagehd p{font-size:13.5px;color:var(--fg-2);margin-block-start:4px;max-width:70ch}
.appview{display:none}
.appview.is-active{display:grid;gap:20px;align-content:start}
@media(max-width:960px){
  .shell,.shell.is-min{grid-template-columns:1fr}
  .side{position:fixed;inset-block:0;inset-inline-start:0;inline-size:min(280px,86vw);
    transform:translateX(-102%);transition:transform .32s var(--ease)}
  html[dir="rtl"] .side{inset-inline-start:auto;inset-inline-end:0;transform:translateX(102%)}
  .side.is-open{transform:none}
  .shell.is-min .side__co,.shell.is-min .side h5,.shell.is-min .snav a span,.shell.is-min .snav a .badge{display:revert}
  .shell.is-min .snav a{grid-template-columns:18px 1fr auto}
}
.msgs{display:grid;grid-template-columns:280px minmax(0,1fr);border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;min-block-size:520px;background:var(--app-surface)}
@media(max-width:860px){.msgs{grid-template-columns:1fr}.msgs__l{display:none}}
.msgs__l{border-inline-end:1px solid var(--line-2);overflow-y:auto;max-block-size:620px}
.thread{display:grid;gap:4px;padding:14px;border-block-end:1px solid var(--line-2);cursor:pointer;text-align:start;
  background:transparent;border-inline:0;border-block-start:0;inline-size:100%;transition:background var(--dur-fast)}
.thread:hover{background:rgba(198,244,50,.04)}
.thread[aria-selected="true"]{background:var(--acc-soft)}
.thread b{font-size:13.5px}
.thread p{font-size:12.5px;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgs__r{display:flex;flex-direction:column;min-block-size:0}
.bubbles{padding:18px;display:grid;gap:12px;align-content:start;overflow-y:auto;max-block-size:460px}
.bub{max-inline-size:76%;padding:11px 14px;border-radius:var(--r-lg);font-size:13.5px;line-height:1.55;
  background:var(--app-raised);border:1px solid var(--line-2)}
.bub time{display:block;font-family:var(--mono);font-size:10px;color:var(--fg-3);margin-block-start:6px}
.bub--me{margin-inline-start:auto;background:var(--acc-soft);border-color:var(--acc-line)}
.bub--att{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.composer{margin-block-start:auto;border-block-start:1px solid var(--line-2);padding:12px;display:grid;
  grid-template-columns:1fr auto;gap:10px;align-items:end}

/* ---------------- MOTION LAYER (kept from brand build) ---------------- */
.sprog{position:fixed;inset-block-start:0;inset-inline-start:0;block-size:2px;inline-size:0;z-index:400;
  background:linear-gradient(90deg,var(--acc-500),var(--acc-700))}
.rv{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
  transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.wordrv{overflow:hidden}
.wordrv span{display:inline-block;transform:translateY(115%);opacity:0;
  transition:transform var(--dur-slow) var(--ease),opacity var(--dur-slow) var(--ease)}
.wordrv.in span{transform:none;opacity:1}
.bigmq{overflow:hidden;background:var(--deep);border-block:1px solid var(--line);padding:clamp(18px,3vw,30px) 0}
.bigmq__t{display:flex;white-space:nowrap;animation:slide 40s linear infinite;will-change:transform;
  font-family:var(--disp);font-weight:900;font-size:clamp(26px,6.2vw,76px);letter-spacing:-.035em;line-height:1.05}
.bigmq__t span{padding-inline:20px;color:transparent;-webkit-text-stroke:1px rgba(242,244,238,.34)}
.bigmq__t span:nth-child(even){color:var(--acc-500);-webkit-text-stroke:0}
.tickstrip{display:flex;align-items:center;gap:0;border-block:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.tickstrip__l{display:flex;align-items:center;gap:9px;padding:12px var(--gut);border-inline-end:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-500);flex:none}
.tickstrip__l i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--acc-500);animation:blink 2.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.track-mask{flex:1;overflow:hidden;min-inline-size:0}
.track{display:flex;white-space:nowrap;animation:slide 66s linear infinite;will-change:transform}
.track:hover,.bigmq__t:hover{animation-play-state:paused}
.track span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);padding-inline:2px}
.track span::after{content:"·";margin-inline:16px;color:var(--acc-500);opacity:.7}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[dir="rtl"] @keyframes slide{}
.plx{will-change:transform}
.magnet{transition:transform var(--dur-fast) var(--ease)}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .wordrv span{opacity:1;transform:none}
  .bigmq__t,.track{animation:none}
  .plx{transform:none!important}
  .meter i{transition:none}
  html{scroll-behavior:auto}
}