/* =====================================================================
   EXCEL ROAD v3 — "מהאקסל למערכת" · scroll film
   ===================================================================== */
:root{
  --g50:#E8FBEF;--g100:#C6F5DA;--g200:#8FE9B4;--g300:#54DA8B;--g400:#1FC66B;--g500:#10A85A;
  --g600:#0E9152;--g700:#0C7344;--g800:#0F5946;--g900:#0B4033;--g950:#072A22;--g990:#04190F;
  --accent:#09D35C;
  --n50:#F6F8F7;--n100:#EDF1EF;--n200:#DFE5E2;--n300:#C5CECA;--n400:#9BA8A2;--n500:#71807A;
  --n600:#54625C;--n700:#3D4944;--n800:#283230;--ink:#0C1311;
  --amber:#E08A00;--amber-bg:#FCF1DC;--amber-ink:#7A4A00;--red:#C42B2B;
  --xl-line:#E1E6E3;--xl-head:#F3F5F4;--xl-head-line:#D5DBD8;
  --sh-sm:0 1px 2px rgba(11,64,51,.06),0 2px 6px rgba(11,64,51,.05);
  --sh-lg:0 12px 28px rgba(11,64,51,.12),0 4px 10px rgba(11,64,51,.06);
  --sh-xl:0 24px 60px rgba(11,64,51,.16),0 8px 18px rgba(11,64,51,.08);
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --font:'Rubik',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --hdr:60px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--n50);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-60px;right:16px;z-index:200;background:#fff;padding:10px 16px;border-radius:10px;box-shadow:var(--sh-lg)}
.skip:focus{top:10px}
:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--g600) 45.0%,transparent)!important;border-radius:10px}
.spk{color:var(--g600);font-weight:700}
.grad{background:linear-gradient(100deg,var(--g300),var(--accent) 45%,#C6F5DA);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:0;font-weight:700;font-size:16.5px;text-decoration:none;cursor:pointer;isolation:isolate;overflow:hidden;transition:transform .25s var(--ease),box-shadow .3s,background .3s,color .3s;white-space:nowrap}
.btn-sm{min-height:40px;padding:0 16px;font-size:14.5px}
.btn-primary{background:var(--g700);color:#fff}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,var(--g800),var(--g500) 52%,var(--accent));opacity:0;transition:opacity .35s}
.btn-primary:hover{box-shadow:0 8px 28px color-mix(in srgb,var(--accent) 32.0%,transparent)}
.btn-primary:hover::before{opacity:1}
.btn-light{background:#fff;color:var(--g800)}
.btn-light:hover{background:var(--g50);box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 25.0%,transparent)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.06)}
.btn-wa{background:linear-gradient(135deg,var(--g700),var(--g500));color:#fff;box-shadow:0 10px 30px color-mix(in srgb,var(--g500) 35.0%,transparent)}
.btn-wa:hover{box-shadow:0 14px 40px color-mix(in srgb,var(--accent) 50.0%,transparent);transform:translateY(-2px)}
.btn-lg{min-height:62px;padding:0 32px;font-size:18px}
.btn:active{transform:translateY(1px)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(-4px)}

/* ---------- Header + pill nav ---------- */
.top{position:fixed;top:0;inset-inline:0;height:var(--hdr);z-index:70;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 20px;background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid rgba(12,19,17,.07);transition:background .5s,border-color .5s,color .5s}
.top.dark{background:color-mix(in srgb,var(--g990) 62.0%,transparent);border-color:rgba(255,255,255,.07);color:#fff}
.brand{justify-self:start;display:flex;align-items:center;gap:10px;text-decoration:none}

.brand b{font-weight:800;font-size:17px;letter-spacing:.06em}
.pnav{position:relative;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:rgba(12,19,17,.05);border:1px solid rgba(12,19,17,.08);transition:background .5s,border-color .5s}
.top.dark .pnav{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.pnav a{position:relative;z-index:1;padding:7px 15px;border-radius:999px;font-size:14px;font-weight:500;text-decoration:none;opacity:.72;transition:opacity .25s,color .35s;white-space:nowrap}
.pnav a:hover{opacity:1}
.pnav a.on{opacity:1;color:#fff}
.pnav .ind{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:var(--g700);box-shadow:0 4px 14px color-mix(in srgb,var(--g700) 35.0%,transparent);transition:transform .5s var(--spring),width .5s var(--spring),opacity .3s;opacity:0}
.top-act{justify-self:end;display:flex;align-items:center;gap:8px}
.menu-btn{display:none;width:42px;height:42px;border-radius:12px;border:1px solid rgba(12,19,17,.12);background:transparent;cursor:pointer;place-items:center}
.top.dark .menu-btn{border-color:rgba(255,255,255,.2)}
.menu{position:fixed;inset:0;z-index:90;background:var(--g950);color:#fff;display:flex;flex-direction:column;padding:22px 24px 28px;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.menu.open{opacity:1;visibility:visible;transition:opacity .35s}
.menu::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 10%,color-mix(in srgb,var(--accent) 18.0%,transparent),transparent 60%);pointer-events:none}
.menu-top{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.menu-close{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:none;color:#fff;cursor:pointer;display:grid;place-items:center}
.menu nav{position:relative;display:flex;flex-direction:column}
.menu .mi{display:flex;align-items:baseline;gap:14px;font-size:clamp(26px,8vw,34px);font-weight:800;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none;opacity:0;transform:translateY(18px);transition:opacity .45s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i)*45ms)}
.menu.open .mi{opacity:1;transform:none}
.menu .mi span{font-family:var(--mono);font-size:13px;color:var(--g300);font-weight:500}
.menu .btn{position:relative;margin-top:auto}

/* floating CTA */
.fab{position:fixed;left:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;background:var(--g950);color:#fff;text-decoration:none;font-weight:700;font-size:15px;box-shadow:0 14px 40px color-mix(in srgb,var(--g990) 35.0%,transparent),0 0 0 1px rgba(255,255,255,.08);transform:translateY(120px);opacity:0;transition:transform .6s var(--spring),opacity .4s}
.fab.show{transform:none;opacity:1}
.fab .ic{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--g500),var(--accent));display:grid;place-items:center;position:relative}
.fab .ic::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--accent);animation:ring 2.2s infinite}
.fab:hover{box-shadow:0 18px 50px color-mix(in srgb,var(--accent) 35.0%,transparent)}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}

/* =====================================================================
   HERO — the film
   ===================================================================== */
.hero{position:relative;height:740vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#fff;perspective:1400px;perspective-origin:50% 42%}
.st-bg{position:absolute;inset:0;background:#fff}
.st-glow{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(50% 55% at 30% 55%,color-mix(in srgb,var(--accent) 16.0%,transparent),transparent 62%),radial-gradient(45% 50% at 80% 25%,color-mix(in srgb,var(--g500) 14.0%,transparent),transparent 60%)}
.st-grain{position:absolute;inset:0;opacity:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:3px 3px}
.world{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform}
.world>*{position:absolute}
.sheet{inset:0}
.sheet>*{position:absolute}
.sheet-bg{left:0;right:0;bottom:0;top:var(--hdr);background:#fff;border-radius:0;box-shadow:0 0 0 rgba(0,0,0,0)}
.s-grid{left:0;background-image:linear-gradient(to left,var(--xl-line) 1px,transparent 1px),linear-gradient(to bottom,var(--xl-line) 1px,transparent 1px);background-position:right top}
.s-fill{inset:0;pointer-events:none}
.filler{position:absolute;display:flex;align-items:center;padding:0 9px;font-size:13px;color:var(--n500);white-space:nowrap;overflow:hidden}
.filler.f-y{background:#FFF3B0}.filler.f-p{background:#FBDADA}.filler.f-b{font-weight:700;color:var(--ink)}
.filler.f-m{font-family:var(--mono);font-size:12px;direction:ltr;justify-content:flex-end}
.s-col{left:0;right:0;top:calc(var(--hdr) + 40px);height:26px;background:var(--xl-head);border-bottom:1px solid var(--xl-head-line)}
.s-col span{position:absolute;top:0;height:26px;display:grid;place-items:center;font-size:12px;color:var(--n600);border-left:1px solid var(--xl-head-line)}
.s-row{right:0;bottom:0;background:var(--xl-head);border-left:1px solid var(--xl-head-line)}
.s-row span{position:absolute;left:0;right:0;display:grid;place-items:center;font-size:11.5px;color:var(--n600);border-bottom:1px solid var(--xl-line)}
.s-corner{right:0;top:calc(var(--hdr) + 40px);height:26px;background:#E7ECE9;border-left:1px solid var(--xl-head-line);border-bottom:1px solid var(--xl-head-line)}
.fbar{top:var(--hdr);left:0;right:0;height:40px;display:flex;align-items:center;gap:10px;padding:0 10px;background:#fff;border-bottom:1px solid #DADFDC}
.namebox{flex:none;min-width:84px;height:28px;display:flex;align-items:center;padding:0 9px;border:1px solid #CFD6D2;border-radius:4px;font-family:var(--mono);font-size:13px;direction:ltr;color:var(--ink);background:#fff}
.fx{flex:none;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;color:var(--n500);padding:0 10px;border-inline:1px solid #E1E6E3;line-height:28px}
.fx-in{flex:1;min-width:0;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caret{display:inline-block;width:1.5px;height:1.05em;background:currentColor;vertical-align:-2px;margin-inline-start:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.s-sel{left:0;top:0;border:2px solid var(--g600);pointer-events:none;z-index:6;transition:transform .14s var(--ease),width .14s var(--ease),height .14s var(--ease),opacity .2s}
.s-sel::after{content:"";position:absolute;left:-5px;bottom:-5px;width:8px;height:8px;background:var(--g600);border:1.5px solid #fff}
.s-sel.all{background:color-mix(in srgb,var(--g600) 7.0%,transparent)}
.h1box{z-index:5;background:#fff;border:1px solid var(--xl-head-line);box-shadow:0 30px 60px color-mix(in srgb,var(--g900) 10.0%,transparent);display:flex;flex-direction:column;justify-content:center;padding:28px 40px;will-change:transform,opacity}
.h1box .tag{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--g700);background:var(--g50);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.h1box .tag i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55.0%,transparent)}70%{box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 0.0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0.0%,transparent)}}
.h1box h1{margin:0;font-size:clamp(44px,6.2vw,94px);line-height:.98;font-weight:900;letter-spacing:-.035em}
.h1box h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.h1box h1 .ln>span{display:inline-block;transform:translateY(105%);animation:lnUp 1s var(--ease) forwards}
.h1box h1 .ln:nth-child(2)>span{animation-delay:.12s}
@keyframes lnUp{to{transform:none}}
.h1box h1 em{font-style:normal;color:var(--g600);position:relative;white-space:nowrap}
.h1box h1 em::after{content:"";position:absolute;right:0;left:0;bottom:.02em;height:.12em;background:var(--accent);opacity:.35;transform:scaleX(0);transform-origin:right;animation:uline .8s var(--ease) .9s forwards}
@keyframes uline{to{transform:scaleX(1)}}
.h1box p{margin:18px 0 0;font-size:clamp(16px,1.35vw,19px);color:var(--n700);max-width:620px;opacity:0;animation:fadeIn .8s var(--ease) .5s forwards}
.hint{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:15px;font-weight:700;color:var(--g700);opacity:0;animation:fadeIn .8s var(--ease) 1.1s forwards}
.hint .play{width:34px;height:34px;border-radius:50%;background:var(--g700);display:grid;place-items:center;flex:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--g700) 40.0%,transparent);animation:pulse 2s infinite}
@keyframes fadeIn{to{opacity:1}}

/* chips */
.s-chips{inset:0;pointer-events:none;transform-style:preserve-3d}
.chip{position:absolute;left:0;top:0;display:flex;align-items:center;padding:0 9px;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;will-change:transform;transition:background-color .25s,box-shadow .25s,border-radius .25s,color .25s,font-size .3s,padding .3s}
.chip .t{overflow:hidden;text-overflow:ellipsis}
.chip.r-amt{justify-content:flex-end;font-feature-settings:"tnum"}
.chip.r-err{font-family:var(--mono);font-size:12.5px;color:var(--red);font-weight:700;direction:ltr;justify-content:flex-end}
.chip.s-cell.f-y{background:#FFF3B0}.chip.s-cell.f-p{background:#FBDADA}.chip.s-cell.f-g{background:#DDF3E5}
.chip.s-cell.f-b{font-weight:700}.chip.s-cell.f-r{color:var(--red)}.chip.s-cell.f-s .t{text-decoration:line-through;color:var(--n500)}
.chip.s-cell.f-i{font-style:italic}
.chip.s-fly{background:#fff;border-radius:9px;box-shadow:0 18px 36px rgba(0,0,0,.28),0 0 0 1.5px var(--g500)}
.chip.s-die{background:#FDE3E3;box-shadow:0 0 0 1.5px var(--red)}
.chip.s-gone{visibility:hidden}
.chip.s-land{background:transparent;padding:0}
.chip.s-land.r-name{font-weight:700;font-size:13.5px}
.chip.s-land.r-sub{font-size:12px;color:var(--n600)}
.chip.s-land.r-amt{font-weight:700;color:var(--g800);font-size:13px}
.chip.s-land.pill .t{background:var(--g50);color:var(--g800);padding:1px 8px;border-radius:999px;font-weight:600;font-size:11px}

/* the system window */
.sys{background:#F2F6F4;border-radius:18px;overflow:hidden;box-shadow:0 60px 140px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1);display:flex;flex-direction:column;opacity:0;visibility:hidden;color:var(--ink);transform-origin:50% 50%;font-size:13px}
.sys [data-in]{opacity:0}
.sys-top{flex:none;height:50px;display:flex;align-items:center;gap:14px;padding:0 16px;background:#fff;border-bottom:1px solid var(--n200)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--n200)}
.sys-brand{display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}
.sys-brand img{width:22px;height:22px}
.sys-brand span{color:var(--n500)}
.sys-search{flex:1;max-width:440px;margin-inline:auto;height:34px;border-radius:10px;background:var(--n50);border:1px solid var(--n200);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--n500);white-space:nowrap;overflow:hidden}
.sys-search kbd{margin-inline-start:auto;font-family:var(--mono);font-size:11px;border:1px solid var(--n200);border-radius:5px;padding:0 6px;background:#fff;direction:ltr}
.sys-icons{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
.bell{position:relative;display:grid;place-items:center;color:var(--n600)}
.bell i{position:absolute;top:-5px;left:-7px;min-width:16px;height:16px;border-radius:999px;background:var(--red);color:#fff;font-style:normal;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.sys-av{width:30px;height:30px;border-radius:50%;background:var(--g100);color:var(--g800);display:grid;place-items:center;font-weight:700;font-size:12px}
.sys-body{flex:1;display:flex;min-height:0}
.sys-side{flex:none;width:188px;background:var(--g950);color:rgba(255,255,255,.72);padding:14px 10px;display:flex;flex-direction:column;gap:3px}
.si{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border-radius:10px;font-size:13.5px;white-space:nowrap}
.si svg{flex:none}
.si.on{background:rgba(255,255,255,.12);color:#fff}
.si.ai{margin-top:auto;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22.0%,transparent),color-mix(in srgb,var(--g500) 6.0%,transparent));color:#C6F5DA;border:1px solid color-mix(in srgb,var(--accent) 30.0%,transparent)}
.sys-main{flex:1;min-width:0;padding:16px 18px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.sys-hello small{display:block;color:var(--n500);font-size:12px}
.sys-hello h5{margin:0;font-size:19px;font-weight:800;line-height:1.3}
.sys-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sk{background:#fff;border:1px solid var(--n200);border-radius:12px;padding:10px 12px;overflow:hidden}
.sk small{display:block;color:var(--n500);font-size:11.5px;white-space:nowrap}
.sk strong{font-size:22px;font-weight:800;font-feature-settings:"tnum";line-height:1.25;white-space:nowrap}
.sk em{font-style:normal;font-size:11px;font-weight:700;color:var(--g700);margin-inline-start:6px}
.sys-grid{flex:1;min-height:0;display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.card{background:#fff;border:1px solid var(--n200);border-radius:14px}
.sys-kan{padding:12px;display:flex;flex-direction:column;gap:10px;overflow:hidden;min-height:0}
.kan-h{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px}
.kan-h span{color:var(--n500);font-weight:500;font-size:12px}
.kan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kcol h6{margin:0 0 6px;height:20px;font-size:12px;font-weight:600;color:var(--n600);display:flex;justify-content:space-between;align-items:center}
.kcol h6 i{font-style:normal;font-family:var(--mono);font-size:11px;background:var(--n100);border-radius:999px;padding:0 7px}
.kcard{position:relative;height:78px;border-radius:10px;background:#fff;border:1px solid var(--n200);box-shadow:var(--sh-sm);margin-bottom:8px;opacity:0;transition:box-shadow .5s,border-color .5s}
.kcard.hl{border-color:var(--g500);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28.0%,transparent),0 10px 24px color-mix(in srgb,var(--accent) 25.0%,transparent)}
.aib{position:absolute;top:-9px;left:8px;font-size:10.5px;font-weight:700;background:linear-gradient(135deg,var(--g600),var(--accent));color:#fff;padding:1px 8px;border-radius:999px;opacity:0;transform:scale(.5);transition:all .45s var(--spring);white-space:nowrap}
.kcard.hl .aib{opacity:1;transform:none}
.feed{display:grid;gap:6px;margin-top:auto}
.fd{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--n600);padding:7px 10px;border-radius:8px;background:var(--n50);white-space:nowrap;overflow:hidden}
.fd b{color:var(--ink)}
.fd .dt{width:7px;height:7px;border-radius:50%;background:var(--g500);flex:none}
.fd time{margin-inline-start:auto;color:var(--n400)}
.sys-chart{padding:14px;display:flex;flex-direction:column;min-height:0}
.ch-h{display:flex;justify-content:space-between;font-size:13px;color:var(--n500)}
.ch-h b{color:var(--ink)}
.ch-big{font-size:26px;font-weight:800;margin:2px 0 8px;font-feature-settings:"tnum"}
.ch-big em{font-style:normal;font-size:12px;font-weight:700;color:var(--g700);background:var(--g50);padding:2px 8px;border-radius:999px;vertical-align:middle;margin-inline-start:6px}
.ch-plot{flex:1;position:relative;min-height:60px}
.ch-bars{position:absolute;inset:0;direction:ltr;display:flex;align-items:flex-end;gap:6px}
.ch-bars i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(var(--g200),var(--g500));transform-origin:bottom;transform:scaleY(0)}
.ch-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ch-line path{fill:none;stroke:var(--g800);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.sys-tab{display:none;flex:none;height:54px;background:#fff;border-top:1px solid var(--n200);justify-content:space-around;align-items:center;color:var(--n500)}
.sys-tab span.on{color:var(--g700)}
/* mobile window */
.sys.m .sys-side,.sys.m .sys-search,.sys.m .sys-brand span,.sys.m .feed,.sys.m .dots{display:none}
.sys.m .sys-top{height:46px;padding:0 12px}
.sys.m .sys-main{padding:12px;gap:10px}
.sys.m .sys-hello h5{font-size:16px}
.sys.m .sys-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sys.m .sk{padding:8px}
.sys.m .sk:nth-child(4){display:none}
.sys.m .sk strong{font-size:15px}
.sys.m .sk small{font-size:10px}
.sys.m .sk em{display:none}
.sys.m .sys-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
.sys.m .sys-kan{padding:8px;gap:6px}
.sys.m .kan{gap:6px}
.sys.m .kcard{height:70px;margin-bottom:6px}
.sys.m .ch-big{font-size:18px}
.sys.m .sys-tab{display:flex}

/* AI copilot panel */
.aip{background:#fff;border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.35),0 0 0 1.5px color-mix(in srgb,var(--accent) 45.0%,transparent);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;color:var(--ink);font-size:13.5px}
.aip.m{border-radius:22px 22px 18px 18px}
.aip-h{flex:none;display:flex;align-items:center;gap:10px;padding:11px 14px;background:linear-gradient(135deg,var(--g950),var(--g800));color:#fff}
.aip-h .sp{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--accent) 20.0%,transparent);display:grid;place-items:center;color:var(--accent)}
.aip-h b{display:block;font-size:14px}
.aip-h small{display:block;font-size:11.5px;color:rgba(255,255,255,.65)}
.aip-b{flex:1;padding:14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.aq{align-self:flex-end;background:var(--g700);color:#fff;border-radius:14px 14px 4px 14px;padding:8px 12px;max-width:88%;min-height:36px;visibility:hidden}
.athink{display:none;gap:4px;padding:6px 2px}
.athink i{width:7px;height:7px;border-radius:50%;background:var(--g500);animation:typing 1s infinite}
.athink i:nth-child(2){animation-delay:.15s}.athink i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:1}}
.aa{line-height:1.65;min-height:1em}
.aa b{color:var(--g800)}
.adraft{border:1px solid var(--g200);background:var(--g50);border-radius:12px;padding:10px 12px;font-size:12.5px}
.adraft small{display:block;font-weight:700;color:var(--g700);margin-bottom:4px}
.abtns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.abtns span{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid var(--n300);background:#fff}
.abtns span.ok{background:var(--g700);color:#fff;border-color:var(--g700)}
.aip.m .aip-b{gap:8px;padding:12px;font-size:13px}

/* devices */
.bezel{border-radius:26px;background:linear-gradient(#141B19,#0B100E);box-shadow:0 0 0 2px #2D3633,0 70px 140px rgba(0,0,0,.55);opacity:0}
.bezel.m{border-radius:46px;box-shadow:0 0 0 2px #2D3633,0 0 0 9px #0B100E,0 60px 120px rgba(0,0,0,.5)}
.bezel.m::after{content:"";position:absolute;top:14px;left:50%;width:90px;height:22px;margin-left:-45px;border-radius:999px;background:#000;z-index:3}
.base{opacity:0;border-radius:2px 2px 22px 22px;background:linear-gradient(#D5DBD8,#8A9590);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.base::after{content:"";position:absolute;top:0;left:50%;width:120px;height:9px;margin-left:-60px;border-radius:0 0 10px 10px;background:#7B8580}
.phone{opacity:0;border-radius:38px;background:#0B100E;padding:9px;box-shadow:0 0 0 2px #2D3633,0 50px 100px rgba(0,0,0,.55)}
.ph-in{width:100%;height:100%;border-radius:30px;overflow:hidden;background:#F2F6F4;display:flex;flex-direction:column;font-size:11px;position:relative}
.ph-in::before{content:"";position:absolute;top:8px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:999px;background:#000;z-index:2}
.ph-top{padding:36px 12px 10px;background:var(--g950);color:#fff}
.ph-top small{display:block;opacity:.65;font-size:10px}
.ph-top b{font-size:14px}
.ph-k{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px}
.ph-k div{background:#fff;border:1px solid var(--n200);border-radius:10px;padding:7px 8px}
.ph-k small{display:block;color:var(--n500);font-size:9.5px}
.ph-k b{font-size:14px;font-feature-settings:"tnum"}
.ph-l{padding:0 10px;display:grid;gap:6px}
.ph-l div{background:#fff;border:1px solid var(--n200);border-radius:10px;padding:8px;display:flex;justify-content:space-between;align-items:center}
.ph-l i{font-style:normal;font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--g50);color:var(--g700)}
.ph-tab{margin-top:auto;height:44px;background:#fff;border-top:1px solid var(--n200);display:flex;justify-content:space-around;align-items:center;color:var(--n400)}
.ph-tab span:first-child{color:var(--g700)}
.notif{opacity:0;display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.97);border-radius:16px;padding:10px 12px;box-shadow:0 16px 40px rgba(0,0,0,.3);font-size:12px;color:var(--ink);z-index:4}
.notif .ic{flex:none;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--g500),var(--accent));display:grid;place-items:center}
.notif b{display:block;font-size:12px}
.notif small{color:var(--n500);font-size:10.5px;margin-inline-start:4px}

/* film overlays */
.h3box{position:absolute;z-index:8;color:#fff;pointer-events:none}
.h3box>*{opacity:0;will-change:transform,opacity}
.h3box .k{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--g200);margin-bottom:16px;padding:5px 12px;border:1px solid color-mix(in srgb,var(--accent) 35.0%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent) 8.0%,transparent)}
.h3box h2{margin:0;font-size:clamp(40px,4.8vw,76px);line-height:1;font-weight:900;letter-spacing:-.035em}
.h3box p{margin:18px 0 0;font-size:clamp(16px,1.3vw,19px);color:rgba(255,255,255,.78);max-width:470px}
.h3box .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cap{position:absolute;z-index:8;left:50%;bottom:86px;transform:translateX(-50%);pointer-events:none;width:max-content;max-width:calc(100% - 32px);text-align:center}
.cap span{display:inline-block;background:rgba(5,14,11,.78);color:#fff;font-size:clamp(15px,1.5vw,20px);font-weight:600;line-height:1.45;padding:9px 18px;border-radius:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.2)}
.scrub{position:absolute;z-index:9;left:50%;bottom:22px;transform:translateX(-50%);width:min(640px,calc(100% - 32px));height:46px;display:flex;align-items:center;gap:12px;padding:0 14px;border-radius:14px;background:rgba(6,18,14,.74);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 12px 34px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.08)}
.sc-play{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:var(--g950)}
.sc-time{flex:none;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.7);direction:ltr}
.sc-time b{color:#fff;font-weight:500}
.sc-track{position:relative;flex:1;height:22px;display:flex;align-items:center;cursor:pointer}
.sc-track::before{content:"";position:absolute;inset-inline:0;height:4px;border-radius:4px;background:rgba(255,255,255,.18)}
.sc-fill{position:absolute;right:0;height:4px;border-radius:4px;background:linear-gradient(to left,var(--g500),var(--accent));width:0}
.sc-head{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35.0%,transparent);margin-right:-6px;right:0}
.sc-mk{position:absolute;width:12px;height:22px;margin-right:-6px;border:0;background:none;cursor:pointer;padding:0}
.sc-mk::before{content:"";position:absolute;left:4px;top:5px;width:4px;height:12px;border-radius:2px;background:rgba(255,255,255,.55)}
.sc-mk:hover::before{background:#fff}
.sc-ch{flex:none;font-size:12.5px;font-weight:600;color:var(--g200);min-width:96px;text-align:left;white-space:nowrap}

/* =====================================================================
   Sections — shared
   ===================================================================== */
.sec{position:relative;padding:130px 0}
.sec.dark{background:var(--g950);color:#fff;overflow:hidden}
.sec.dark::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 60% at 12% 90%,color-mix(in srgb,var(--accent) 16.0%,transparent),transparent 60%),radial-gradient(45% 50% at 92% 8%,color-mix(in srgb,var(--g500) 16.0%,transparent),transparent 60%)}
.sec.dark .wrap{position:relative}
.sec-head{max-width:780px;margin-bottom:56px}
.chap{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 6px;border-radius:999px;background:#fff;border:1px solid var(--n200);box-shadow:var(--sh-sm);font-size:14px;font-weight:600;color:var(--n700);margin-bottom:22px}
.chap b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--g700);color:#fff;font-family:var(--mono);font-size:11.5px}
.dark .chap{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.85);box-shadow:none}
.dark .chap b{background:var(--accent);color:var(--g950)}
.h2{margin:0;font-size:clamp(36px,4.6vw,64px);line-height:1.05;font-weight:900;letter-spacing:-.03em}
.lead{margin:20px 0 0;font-size:clamp(17px,1.45vw,20px);color:var(--n600);max-width:660px}
.dark .lead{color:rgba(255,255,255,.75)}
.rv{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.dl{opacity:0;animation:wIn .55s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes wIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes growX{to{transform:scaleX(1)}}

/* =====================================================================
   AI section
   ===================================================================== */
.ai-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start}
.ai-tabs{display:flex;flex-direction:column;gap:10px}
.ait{position:relative;display:flex;gap:14px;align-items:flex-start;text-align:right;padding:18px 18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#fff;cursor:pointer;overflow:hidden;transition:background .3s,border-color .3s}
.ait:hover{background:rgba(255,255,255,.04)}
.ait[aria-selected=true]{background:rgba(255,255,255,.07);border-color:color-mix(in srgb,var(--accent) 45.0%,transparent)}
.ait .ic{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:var(--g300);transition:background .3s,color .3s}
.ait[aria-selected=true] .ic{background:var(--accent);color:var(--g950)}
.ait b{display:block;font-size:17.5px;font-weight:700;margin-bottom:2px}
.ait span.d{display:block;font-size:14.5px;color:rgba(255,255,255,.62);line-height:1.55}
.ait .pg{position:absolute;bottom:0;right:0;height:3px;width:0;background:var(--accent)}
.ait[aria-selected=true] .pg{animation:pg var(--dur,7.5s) linear forwards}
.ai-tabs.paused .pg{animation-play-state:paused}
@keyframes pg{to{width:100%}}
.ai-demo{position:sticky;top:96px;background:#F4F7F5;color:var(--ink);border-radius:24px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.1);min-height:470px;display:flex;flex-direction:column}
.ai-demo-h{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border-bottom:1px solid var(--n200);font-size:13.5px}
.ai-demo-h .sp{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--g600),var(--accent));display:grid;place-items:center;color:#fff}
.ai-demo-h span{color:var(--n500);margin-inline-start:auto;display:flex;align-items:center;gap:6px;font-size:12.5px}
.ai-demo-h span i{width:7px;height:7px;border-radius:50%;background:var(--g500);animation:pulse 2s infinite}
.ai-body{flex:1;padding:22px;display:flex;flex-direction:column;gap:14px}
.d-q{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--g300);border-radius:14px;padding:12px 14px;font-size:15.5px;min-height:50px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10.0%,transparent)}
.d-ans{background:#fff;border:1px solid var(--n200);border-radius:16px;padding:16px;font-size:14.5px}
.d-ans p{margin:0 0 10px}
.hb{display:grid;gap:9px;margin-bottom:12px}
.hb-r{display:grid;grid-template-columns:96px 1fr 76px;gap:10px;align-items:center;font-size:13.5px}
.hb-t{height:12px;border-radius:6px;background:var(--n100);overflow:hidden}
.hb-t i{display:block;height:100%;width:var(--w);border-radius:6px;background:linear-gradient(to left,var(--g400),var(--g700));transform:scaleX(0);transform-origin:right;animation:growX .9s var(--ease) forwards;animation-delay:var(--d)}
.hb-r b{font-feature-settings:"tnum";text-align:left}
.d-ins{background:var(--g50);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--g900);margin:0!important}
.d-src{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--n200);border-radius:14px;padding:12px 14px}
.d-src .ic{width:40px;height:40px;border-radius:12px;background:var(--g50);display:grid;place-items:center;color:var(--g700);flex:none}
.d-src small{display:block;color:var(--n500);font-size:12.5px}
.wave{display:flex;align-items:center;gap:2px;margin-inline-start:auto;height:26px}
.wave i{width:3px;border-radius:2px;background:var(--g400);animation:wv 1s ease-in-out infinite;animation-delay:calc(var(--i)*-90ms)}
@keyframes wv{0%,100%{height:5px}50%{height:24px}}
.d-tr p{margin:0 0 6px;font-size:14px;color:var(--n500);font-style:italic}
.d-sum h6{margin:0 0 8px;font-size:15px}
.d-sum ul{margin:0 0 10px;padding-inline-start:18px;font-size:14.5px}
.d-acts{display:flex;flex-direction:column;gap:6px}
.d-acts span{font-size:13.5px;font-weight:600;color:var(--g700);background:var(--g50);border-radius:8px;padding:6px 10px;align-self:flex-start}
.d-docw{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.d-inv{position:relative;background:#fff;border:1px solid var(--n200);border-radius:12px;padding:16px;overflow:hidden;min-height:270px;box-shadow:var(--sh-sm)}
.d-inv .ih{display:flex;justify-content:space-between;gap:8px;margin-bottom:14px;font-size:13px}
.d-inv .ih small{color:var(--n500)}
.d-inv .ln{height:8px;border-radius:4px;background:var(--n100);margin-bottom:10px}
.d-inv .tot{display:flex;justify-content:space-between;border-top:2px solid var(--ink);padding-top:8px;margin-top:14px;font-weight:700;font-size:14px}
.scan{position:absolute;left:0;right:0;height:56px;top:-56px;background:linear-gradient(transparent,color-mix(in srgb,var(--accent) 28.0%,transparent),transparent);border-bottom:2px solid var(--accent);animation:scan 2.2s var(--ease) .3s 1 forwards}
@keyframes scan{to{top:100%}}
.d-fields{display:flex;flex-direction:column;gap:8px}
.fld{background:#fff;border:1px solid var(--n200);border-radius:10px;padding:8px 12px}
.fld small{display:block;font-size:11.5px;color:var(--n500)}
.fld b{font-size:14.5px}
.d-ok{font-weight:700;color:var(--g700);background:var(--g50);border-radius:10px;padding:9px 12px;font-size:14px}
.bub{max-width:86%;background:#D9FDD3;border-radius:12px;padding:9px 12px 6px;font-size:14.5px;box-shadow:0 1px 1px rgba(0,0,0,.08);align-self:flex-end}
.bub.in{background:#fff;align-self:flex-start}
.bub time{display:block;text-align:left;font-size:10.5px;color:#667781}
.d-draft{background:#fff;border:1.5px dashed var(--g300);border-radius:14px;padding:12px 14px;font-size:14.5px;align-self:flex-end;max-width:92%}
.d-draft small{display:block;font-weight:700;color:var(--g700);margin-bottom:6px;font-size:12.5px}
.d-draft p{margin:0;min-height:3em}
.d-tag{align-self:center;font-size:13px;font-weight:600;color:var(--g700);background:var(--g50);padding:5px 12px;border-radius:999px}
.sc-l{background:#fff;border:1px solid var(--n200);border-radius:16px;overflow:hidden}
.sc-r{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid var(--n100);font-size:14px}
.sc-r:first-child{border-top:0;background:var(--n50);color:var(--n500);font-size:12.5px;font-weight:600}
.sc-r small{display:block;color:var(--n500);font-size:12px}
.sc-b{display:flex;align-items:center;gap:8px}
.sc-b .t{flex:1;height:8px;border-radius:4px;background:var(--n100);overflow:hidden}
.sc-b .t i{display:block;height:100%;width:var(--w);background:var(--c,var(--g500));transform:scaleX(0);transform-origin:right;animation:growX 1s var(--ease) forwards;animation-delay:var(--d)}
.sc-b b{font-family:var(--mono);font-size:13px;min-width:24px}
.hot{font-size:11px;font-weight:700;background:var(--amber-bg);color:var(--amber-ink);padding:1px 8px;border-radius:999px;margin-inline-start:6px}
.ai-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.ai-pts div{display:flex;gap:12px;align-items:flex-start;padding:18px;border-radius:16px;border:1px solid rgba(255,255,255,.1);font-size:15px;color:rgba(255,255,255,.8)}
.ai-pts b{display:block;color:#fff;font-size:16px}
.ai-pts svg{flex:none;margin-top:3px}

/* =====================================================================
   Cost calculator
   ===================================================================== */
.calc-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:stretch}
.ctrl{background:#fff;border:1px solid var(--n200);border-radius:26px;padding:32px;display:flex;flex-direction:column;gap:30px;box-shadow:var(--sh-sm)}
.rg-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:12px}
.rg label{font-weight:600;font-size:16.5px;line-height:1.4}
.rg label small{display:block;font-weight:400;color:var(--n500);font-size:13.5px;margin-top:2px}
.rg output{flex:none;font-family:var(--mono);font-size:24px;font-weight:700;color:var(--g700);direction:ltr}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;margin:0;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(to left,var(--g600) var(--p),var(--n200) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#fff;border:3px solid var(--g700);box-shadow:0 4px 12px color-mix(in srgb,var(--g900) 25.0%,transparent);transition:transform .2s var(--spring)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:var(--n200)}
input[type=range]::-moz-range-progress{height:8px;border-radius:8px;background:var(--g600)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--g700)}
.out{position:relative;overflow:hidden;background:var(--g950);color:#fff;border-radius:26px;padding:34px;display:flex;flex-direction:column}
.out::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 90% 0%,rgba(224,138,0,.18),transparent 60%);pointer-events:none}
.out>*{position:relative}
.out-lbl{font-size:15px;color:rgba(255,255,255,.7)}
.out-num{font-size:clamp(60px,7.4vw,108px);font-weight:900;line-height:1;letter-spacing:-.04em;font-feature-settings:"tnum";margin:6px 0 4px}
.out-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:16px;color:rgba(255,255,255,.78)}
.out-money{font-size:clamp(28px,3vw,40px);font-weight:800;color:#FFB547;font-feature-settings:"tnum";letter-spacing:-.02em}
.days{display:grid;grid-template-columns:repeat(25,minmax(0,1fr));gap:3px;margin-top:26px}
.days i{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.07);transition:background .35s}
.days i.on{background:var(--amber)}
.days-lg{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:rgba(255,255,255,.6);margin-top:10px}
.out-note{margin-top:auto;padding-top:22px;font-size:15.5px;color:rgba(255,255,255,.85)}
.out-note b{color:var(--g300)}

/* =====================================================================
   Configurator
   ===================================================================== */
.build{background:#fff;border-block:1px solid var(--n200)}
.cfg{display:grid;grid-template-columns:400px 1fr;gap:32px;align-items:start}
.biz{display:block;margin-bottom:22px}
.biz span{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.biz input{width:100%;height:54px;border-radius:14px;border:1.5px solid var(--n200);background:var(--n50);padding:0 16px;font-size:17px;transition:border-color .25s,background .25s,box-shadow .25s}
.biz input:focus{outline:none;border-color:var(--g600);background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--g600) 16.0%,transparent)}
.mods-lbl{font-weight:600;font-size:15px;margin-bottom:10px}
.mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.mod{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 12px;border-radius:14px;border:1.5px solid var(--n200);background:#fff;font-weight:600;font-size:14.5px;cursor:pointer;text-align:right;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.mod:hover{border-color:var(--g200);transform:translateY(-2px)}
.mod .mi{flex:none;width:32px;height:32px;border-radius:9px;background:var(--n100);display:grid;place-items:center;transition:background .25s}
.mod .mi svg{stroke:var(--g700);transition:stroke .25s}
.mod .ck{margin-inline-start:auto;flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--n300);display:grid;place-items:center;transition:all .25s var(--spring)}
.mod .ck svg{opacity:0;transform:scale(.4);transition:all .25s var(--spring)}
.mod[aria-pressed=true]{border-color:var(--g600);background:var(--g50)}
.mod[aria-pressed=true] .mi{background:var(--g700)}
.mod[aria-pressed=true] .mi svg{stroke:#fff}
.mod[aria-pressed=true] .ck{background:var(--g700);border-color:var(--g700)}
.mod[aria-pressed=true] .ck svg{opacity:1;transform:none}
.mod.ai-mod{border-style:dashed}
.cfg-foot{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.cfg-sum{font-size:14.5px;color:var(--n600)}
.cfg-sum b{font-family:var(--mono);color:var(--g700);font-size:16px}
.app{position:sticky;top:90px;background:#fff;border-radius:22px;border:1px solid var(--n200);box-shadow:var(--sh-xl);overflow:hidden;display:flex;flex-direction:column;height:560px}
.app-top{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--n200)}
.app-title{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-title b{color:var(--g700)}
.app-av{margin-inline-start:auto;width:30px;height:30px;border-radius:50%;background:var(--g100);color:var(--g800);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.app-body{flex:1;display:flex;min-height:0}
.app-nav{flex:none;width:198px;background:var(--g950);padding:14px 10px;display:flex;flex-direction:column;gap:3px;overflow:auto}
.app-nav .nl{display:flex;align-items:center;gap:8px;padding:4px 10px 14px;color:#fff;font-weight:700;font-size:13px;letter-spacing:.04em}
.app-nav .nl img{width:22px;height:22px}
.nav-it{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:10px;border:0;background:none;color:rgba(255,255,255,.72);font-size:14px;cursor:pointer;text-align:right;width:100%;white-space:nowrap;transition:background .2s,color .2s}
.nav-it svg{stroke:currentColor;flex:none}
.nav-it:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-it.on{background:rgba(255,255,255,.12);color:#fff}
.nav-it.enter{animation:navIn .5s var(--spring) both}
@keyframes navIn{from{opacity:0;transform:translateX(24px) scale(.9)}}
.nav-empty{color:rgba(255,255,255,.45);font-size:13px;padding:8px 12px;margin:0}
.app-main{flex:1;min-width:0;padding:22px;background:var(--n50);overflow:hidden}
.wi{animation:wIn .55s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
.empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--n500)}
.w-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.w-head h4{margin:0;font-size:18px;font-weight:700}
.w-btn{font-size:12.5px;font-weight:600;background:var(--g700);color:#fff;padding:6px 12px;border-radius:999px;white-space:nowrap}
.w-sum{font-size:13px;color:var(--n600);font-weight:500;white-space:nowrap}
.w-box{background:#fff;border:1px solid var(--n200);border-radius:14px}
.w-table{overflow:hidden}
.w-tr{display:grid;grid-template-columns:1.3fr 1fr 1fr .8fr;gap:8px;align-items:center;padding:11px 14px;border-top:1px solid var(--n100);font-size:13px}
.w-th{border-top:0;background:var(--n50);color:var(--n500);font-size:12px;font-weight:600}
.w-tr.new{animation:newRow 1.6s .6s both}
@keyframes newRow{0%{opacity:0;transform:translateY(-10px);background:var(--g50)}30%{opacity:1;transform:none;background:var(--g50)}100%{background:#fff}}
.pl{font-style:normal;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;justify-self:start}
.pl.wa{background:#E3F6EA;color:var(--g700)}.pl.web{background:#E5F1FA;color:#1F6A9C}.pl.ph{background:var(--n100);color:var(--n700)}
.pl.new{background:var(--amber-bg);color:var(--amber-ink)}.pl.call{background:#E5F1FA;color:#1F6A9C}.pl.ok{background:var(--g50);color:var(--g700)}
.muted{color:var(--n500)}
.w-kan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.w-kan h5{margin:0 0 8px;font-size:12px;color:var(--n600);font-weight:600;display:flex;justify-content:space-between}
.kc{background:#fff;border:1px solid var(--n200);border-radius:10px;padding:9px 11px;margin-bottom:8px;font-size:12px}
.kc b{display:block;font-size:13px}
.kc span{color:var(--n500)}
.kc.hot2{border-color:var(--g500);box-shadow:0 0 0 3px color-mix(in srgb,var(--g500) 12.0%,transparent)}
.w-doc{position:relative;padding:22px;max-width:440px}
.d-top{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:8px;border-bottom:1px dashed var(--n300);font-size:13.5px}
.d-line{display:flex;justify-content:space-between;padding:9px 0;font-size:13.5px;color:var(--n700);border-bottom:1px solid var(--n100)}
.d-total{display:flex;justify-content:space-between;margin-top:6px;padding-top:12px;border-top:2px solid var(--ink);font-size:16px;font-weight:700}
.stamp{position:relative;display:inline-block;margin-top:16px;border:2.5px solid var(--g600);color:var(--g700);font-weight:800;font-size:14px;padding:6px 12px;border-radius:8px;transform:rotate(-10deg);animation:stamp .55s 1s var(--spring) both;background:rgba(255,255,255,.9)}
@keyframes stamp{from{opacity:0;transform:rotate(-10deg) scale(1.9)}}
.w-tasks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.w-tasks li{display:flex;align-items:center;gap:12px;padding:12px 14px;font-size:14px}
.w-tasks .cb{width:20px;height:20px;border-radius:6px;border:2px solid var(--n300);flex:none;display:grid;place-items:center}
.w-tasks .cb svg{opacity:0}
.w-tasks li.done .cb{animation:cb .35s var(--spring) both;animation-delay:var(--dl)}
.w-tasks li.done .cb svg{animation:fadeIn .2s both;animation-delay:var(--dl)}
.w-tasks li.done .tx{animation:strike .3s both;animation-delay:var(--dl)}
@keyframes cb{to{background:var(--g600);border-color:var(--g600)}}
@keyframes strike{to{color:var(--n400);text-decoration:line-through}}
.w-tasks .tm{margin-inline-start:auto;font-size:12px;color:var(--n500);font-family:var(--mono)}
.inv{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:12px 14px;font-size:13.5px;margin-bottom:9px}
.inv .bar{grid-column:1/-1;height:8px;border-radius:8px;background:var(--n100);overflow:hidden}
.inv .bar i{display:block;height:100%;width:var(--w);background:var(--g500);border-radius:8px;transform:scaleX(0);animation:growX 1s .3s var(--ease) forwards;transform-origin:right}
.inv.low .bar i{background:var(--amber)}
.att-clock{font-family:var(--mono);font-size:26px;font-weight:700;direction:ltr}
.att{display:grid;grid-template-columns:36px 1fr auto auto;gap:12px;align-items:center;padding:10px 12px;font-size:13.5px;margin-bottom:8px}
.av{width:36px;height:36px;border-radius:50%;background:var(--g100);color:var(--g800);display:grid;place-items:center;font-weight:700;font-size:13px}
.on-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--g500);margin-inline-end:6px;animation:pulse 2s infinite}
.off-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--n300);margin-inline-end:6px}
.w-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.w-kpi{padding:12px 14px}
.w-kpi small{display:block;font-size:12px;color:var(--n500)}
.w-kpi strong{font-size:22px;font-weight:800;font-feature-settings:"tnum"}
.w-kpi em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--g700);margin-inline-start:6px}
.w-chart{padding:14px 16px 12px;height:250px;display:flex;flex-direction:column}
.w-chart small{font-size:12px;color:var(--n500)}
.w-bars{flex:1;direction:ltr;display:flex;align-items:flex-end;gap:7px;padding-top:12px}
.w-bars i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(var(--g400),var(--g700));transform-origin:bottom;animation:barUp .9s var(--ease) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes barUp{from{transform:scaleY(0)}}
.w-flow{display:flex;align-items:center;margin:8px 0 22px}
.fn{flex:none;width:29%;padding:12px 10px;text-align:center;font-size:12.5px;font-weight:700;line-height:1.35}
.fn small{display:block;font-weight:400;color:var(--n500);font-size:11.5px;margin-top:2px}
.fn .ic{width:30px;height:30px;border-radius:9px;background:var(--g50);display:grid;place-items:center;margin:0 auto 6px}
.fl{flex:1;height:2px;background:var(--n200);position:relative}
.fl::after{content:"";position:absolute;top:-3px;right:0;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:flow 1.5s linear infinite}
@keyframes flow{from{right:0}to{right:calc(100% - 8px)}}
.g-wk{display:grid;grid-template-columns:112px 1fr;gap:10px;font-size:11.5px;color:var(--n500);margin-bottom:8px}
.g-wk div{display:grid;grid-template-columns:repeat(4,1fr)}
.g-row{display:grid;grid-template-columns:112px 1fr;gap:10px;align-items:center;font-size:13px;margin-bottom:10px}
.g-tr{position:relative;height:28px;border-radius:7px;background:repeating-linear-gradient(to left,#fff 0 calc(25% - 1px),var(--n200) calc(25% - 1px) 25%);border:1px solid var(--n200)}
.g-bar{position:absolute;top:4px;bottom:4px;right:var(--s);width:var(--w);border-radius:5px;background:var(--g500);transform:scaleX(0);animation:growX .9s var(--ease) forwards;transform-origin:right;animation-delay:calc(var(--i) * 90ms)}
.g-bar.late{background:var(--amber)}
.g-today{position:absolute;top:-4px;bottom:-4px;right:58%;width:2px;background:var(--red);border-radius:2px}
.w-ai{padding:16px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.w-ai .q{align-self:flex-end;background:var(--g700);color:#fff;border-radius:14px 14px 4px 14px;padding:8px 12px}

/* =====================================================================
   Road
   ===================================================================== */
.road{overflow:hidden}
.road-wrap{position:relative;margin-top:30px;padding-top:40px}
.road-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.road-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#rdEdge{stroke:#D8DED9;stroke-width:46}
#rdBase{stroke:#2A3330;stroke-width:38}
#rdDash{stroke:rgba(255,255,255,.75);stroke-width:3;stroke-dasharray:18 20}
#rdProg{stroke:var(--accent);stroke-width:5;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 85.0%,transparent))}
.car{position:absolute;left:0;top:0;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 4px var(--accent),0 10px 30px color-mix(in srgb,var(--accent) 50.0%,transparent);z-index:3;will-change:transform}
.car img{width:34px;height:34px}
.car::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);animation:ring 2s infinite}
.exits{list-style:none;margin:0;padding:0;position:relative;z-index:2}
.exit{position:relative;width:calc(50% - 130px);margin-bottom:90px}
.exit:nth-child(even){margin-inline-start:auto}
.sign{position:relative;background:#00703C;color:#fff;border-radius:14px;padding:26px 24px 20px;box-shadow:inset 0 0 0 3px #00703C,inset 0 0 0 6px #fff,0 18px 40px rgba(0,60,30,.22);opacity:.35;transform:translateY(20px) scale(.95);transition:opacity .6s var(--ease),transform .7s var(--spring)}
.exit.reached .sign{opacity:1;transform:none}
.ex-tab{position:absolute;top:-17px;inset-inline-start:22px;background:#fff;color:#00703C;font-weight:800;font-size:13px;padding:4px 12px;border-radius:7px;box-shadow:0 0 0 2.5px #00703C;display:flex;align-items:center;gap:6px}
.ex-tab svg{opacity:0;transform:scale(.3);transition:all .4s var(--spring)}
.exit.reached .ex-tab svg{opacity:1;transform:none}
.sign b{display:block;font-size:clamp(22px,2.2vw,28px);font-weight:800;line-height:1.2}
.sign .to{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;color:rgba(255,255,255,.85);font-weight:500}
.exit p{margin:18px 8px 0;color:var(--n600);font-size:16.5px;opacity:.4;transition:opacity .6s}
.exit.reached p{opacity:1}
.dest{position:relative;z-index:2;max-width:560px;margin:10px auto 0;text-align:center}
.dest .sign{padding:34px 30px 28px;background:var(--g950);box-shadow:inset 0 0 0 3px var(--g950),inset 0 0 0 6px var(--accent),0 24px 60px color-mix(in srgb,var(--accent) 25.0%,transparent)}
.dest .sign b{font-size:clamp(28px,3vw,40px)}
.dest.reached .sign{opacity:1;transform:none}

/* =====================================================================
   Roy + testimonial
   ===================================================================== */
.roy{background:#fff;border-top:1px solid var(--n200)}
.roy-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
.photo{position:relative;max-width:440px;width:100%;margin-inline:auto}
.photo-fr{aspect-ratio:4/5;border-radius:28px;background:linear-gradient(135deg,var(--g800),var(--g500) 52%,var(--accent));padding:6px;transform:rotate(-2.5deg);transition:transform .6s var(--ease)}
.photo:hover .photo-fr{transform:rotate(0)}
.photo-in{width:100%;height:100%;border-radius:22px;background:var(--n100);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--n500);overflow:hidden}
.photo-in img{width:100%;height:100%;object-fit:cover}
.motto{position:absolute;bottom:30px;left:-22px;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:var(--sh-lg);font-weight:700;color:var(--g800);direction:ltr;font-size:15px;animation:bob 5s ease-in-out infinite}
.motto small{display:block;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.12em;color:var(--n500)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(1deg)}}
.roy p.body{font-size:18px;color:var(--n700);margin:0 0 14px}
.tools{margin-top:28px;border:1px solid var(--n200);border-radius:16px;overflow:hidden;font-size:14.5px}
.tools-h,.tools-r{display:grid;grid-template-columns:170px 1fr}
.tools-h{background:var(--g950);color:#fff;font-weight:700;font-size:13.5px}
.tools-h span,.tools-r span{padding:11px 16px}
.tools-r{border-top:1px solid var(--n200);transition:background .2s}
.tools-r:hover{background:var(--g50)}
.tools-r span:first-child{font-weight:700;direction:ltr;text-align:right}
.note{margin-top:110px;position:relative;background:var(--g950);color:#fff;border-radius:30px;padding:clamp(34px,5.5vw,76px);overflow:hidden}
.note::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 90% 0%,color-mix(in srgb,var(--accent) 20.0%,transparent),transparent 60%)}
.note>*{position:relative}
.note-q{position:absolute;top:-30px;left:40px;font-size:220px;line-height:1;font-weight:900;color:color-mix(in srgb,var(--accent) 12.0%,transparent);font-family:Georgia,serif}
.note-by{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--g200);margin-bottom:24px}
.note-by .av{background:rgba(255,255,255,.1);color:#fff}
.note blockquote{margin:0;font-size:clamp(22px,2.5vw,34px);line-height:1.55;font-weight:500;letter-spacing:-.01em;max-width:980px}
.note .w{opacity:.16;transition:opacity .35s}
.note .w.lit{opacity:1}
.note .hl{color:var(--g300)}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.faq-side{position:sticky;top:100px}
.qa{border-bottom:1px solid var(--n200)}
.qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px 0;min-height:44px;background:none;border:0;cursor:pointer;text-align:right;font-size:clamp(18px,1.6vw,21px);font-weight:600}
.qa .pm{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--n300);position:relative;transition:all .4s var(--ease)}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%);transition:transform .4s var(--ease)}
.qa .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa.open .pm{background:var(--g700);border-color:var(--g700);color:#fff;transform:rotate(180deg)}
.qa.open .pm::after{transform:translate(-50%,-50%) rotate(0)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans>div{overflow:hidden}
.qa .ans p{margin:0 0 26px;font-size:17px;color:var(--n600);max-width:640px}
.ph{background:var(--amber-bg);color:var(--amber-ink);padding:1px 6px;border-radius:6px;font-weight:600}

/* =====================================================================
   Bot / contact
   ===================================================================== */
.bot-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.bot .h2{font-size:clamp(42px,5.6vw,84px)}
.steps{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.steps li::before{counter-increment:s;content:counter(s);flex:none;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--g950);font-weight:800;display:grid;place-items:center;font-size:16px}
.steps b{display:block;font-size:17.5px}
.steps span{display:block;font-size:15px;color:rgba(255,255,255,.66)}
.bot-cta{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.bot-alt{font-size:15px;color:rgba(255,255,255,.7)}
.bot-alt a{color:#fff;font-weight:600;white-space:nowrap}
.cb-form{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;padding:14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);max-width:560px}
.cb-form p{flex-basis:100%;margin:0 0 2px;font-size:14px;color:rgba(255,255,255,.75)}
.cb-form label{flex:1 1 150px}
.cb-form input{width:100%;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;padding:0 14px;font-size:16px}
.cb-form input::placeholder{color:rgba(255,255,255,.45)}
.cb-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25.0%,transparent)}
.cb-form .btn{min-height:48px}
.cb-msg{flex-basis:100%;font-size:14px;min-height:1px;margin:0}
.cb-msg.err{color:#FF9B9B}.cb-msg.ok{color:var(--g300);font-weight:700}
.wa-phone{width:min(100%,370px);margin-inline:auto;background:#0B141A;border-radius:40px;padding:12px;box-shadow:0 50px 120px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1)}
.wa-in{border-radius:30px;overflow:hidden;background:#E9E2D8;background-image:radial-gradient(rgba(0,0,0,.04) 1px,transparent 1px);background-size:14px 14px}
.wa-top{background:#075E54;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px}
.wa-top .av{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.wa-top .av img{width:26px;height:26px}
.wa-top b{display:block;font-size:15px}
.wa-top small{font-size:12px;opacity:.8}
.wa-body{height:520px;padding:14px 12px;display:flex;flex-direction:column;gap:7px;overflow:hidden;justify-content:flex-end}
.msg{max-width:86%;padding:8px 11px 5px;border-radius:12px;font-size:14px;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.08);color:var(--ink);display:none}
.msg.show{display:block;animation:msgIn .45s var(--spring)}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
.msg time{display:block;text-align:left;font-size:10.5px;color:#667781;margin-top:1px}
.msg.bot{align-self:flex-start;background:#fff;border-top-right-radius:4px}
.msg.me{align-self:flex-end;background:#D9FDD3;border-top-left-radius:4px}
.qr{display:none;flex-wrap:wrap;gap:6px;align-self:flex-start;max-width:90%}
.qr.show{display:flex;animation:msgIn .45s var(--spring)}
.qr span{background:#fff;color:#0B6E62;font-weight:600;font-size:13px;padding:6px 12px;border-radius:999px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.qr span.sel{background:#0B6E62;color:#fff}
.spec{border-top:3px solid var(--g500)}
.spec b{display:block;color:var(--g800);margin-bottom:4px}
.spec ul{margin:4px 0 6px;padding-inline-start:18px}
.typing{align-self:flex-start;background:#fff;border-radius:12px;padding:11px 14px;display:none;gap:4px}
.typing.show{display:flex}
.typing i{width:6px;height:6px;border-radius:50%;background:#667781;animation:typing 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.replay{display:flex;align-items:center;gap:6px;margin:14px auto 0;background:none;border:0;color:var(--g300);font-weight:600;cursor:pointer;min-height:44px;padding:0 10px}


/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .pnav a{padding:7px 11px;font-size:13.5px}
  .cfg{grid-template-columns:360px 1fr}
  .exit{width:calc(50% - 100px)}
}
@media (max-width:1020px){
  .pnav,.top-act .btn-sm{display:none}
  .menu-btn{display:grid}
  .top{grid-template-columns:1fr auto}
  .calc-grid,.cfg,.roy-grid,.faq-grid,.ai-grid,.bot-grid{grid-template-columns:1fr}
  .app,.ai-demo{position:relative;top:0}
  .faq-side{position:static}
  .roy-grid,.bot-grid{gap:48px}
  .ai-pts{grid-template-columns:1fr}
  .sc-ch{display:none}
  .ai-tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:8px;margin-inline:-24px;padding:2px 24px 6px}
  .ai-tabs::-webkit-scrollbar{display:none}
  .ait{flex:none;align-items:center;padding:10px 14px 12px;border-radius:999px;gap:10px}
  .ait .ic{width:32px;height:32px;border-radius:50%}
  .ait b{font-size:15px;margin:0;white-space:nowrap}
  .ait span.d{display:none}
}
@media (max-width:760px){
  .hero{height:640vh}
  .sec{padding:92px 0}
  .exit,.exit:nth-child(even){width:auto;margin-inline-start:0;padding-inline-start:64px;margin-bottom:64px}
  .dest{padding-inline-start:64px;text-align:right}
  .app{height:auto;min-height:520px}
  .app-body{flex-direction:column}
  .app-nav{width:auto;flex-direction:row;overflow-x:auto;padding:10px;gap:6px}
  .app-nav .nl{display:none}
  .nav-it{width:auto;flex:none;min-height:38px}
  .app-main{padding:16px;min-height:380px}
  .w-tr{grid-template-columns:1.3fr 1fr .9fr}
  .w-tr>:nth-child(4){display:none}
  .tools-h,.tools-r{grid-template-columns:120px 1fr}
  .motto{left:0}
  .namebox{min-width:62px;font-size:12px}
  .fx{padding:0 7px}
  .fx-in{font-size:13px}
  .h1box h1{font-size:clamp(36px,10.5vw,46px)}
  .h1box p{font-size:15px;margin-top:12px}
  .h1box .tag{font-size:12px;margin-bottom:10px}
  .hint{margin-top:14px;font-size:14px}
  .chip{font-size:12px;padding:0 6px}
  .chip.r-err{font-size:11.5px}
  .cap{bottom:78px}
  .cap span{font-size:14.5px;padding:7px 12px}
  .scrub{height:42px;gap:10px;bottom:18px}
  .h3box h2{font-size:clamp(34px,10vw,44px)}
  .h3box p{display:none}
  .h3box .k{margin-bottom:10px;font-size:12.5px}
  .h3box .ctas{margin-top:16px}
  .h3box .btn-ghost{display:none}
  .d-docw{grid-template-columns:1fr}
  .d-inv{min-height:200px}
  .hb-r{grid-template-columns:80px 1fr 66px;font-size:12.5px}
  .sc-r{grid-template-columns:1.1fr .8fr 1.3fr;font-size:13px}
  .ai-body{padding:16px}
  .fab span.l{display:none}
  .fab{padding:8px}
  .wa-body{height:470px}
}
@media (max-width:520px){
  .mods{grid-template-columns:1fr 1fr}
  .mod{font-size:13.5px;padding:0 10px;gap:8px}
  .mod .ck{display:none}
  .ctrl,.out{padding:24px}
  .w-kpis{grid-template-columns:1fr 1fr}
  .w-kpis>:nth-child(3){display:none}
  .fn{font-size:11.5px;padding:10px 6px}
  .g-wk,.g-row{grid-template-columns:84px 1fr}
  .brand b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}


/* =====================================================================
   ORANIV — brand + multi-page additions
   ===================================================================== */
.brand svg{width:34px;height:24px;flex:none}
.brand b{font-family:'Sora',var(--font);font-weight:600;font-size:17px;letter-spacing:.09em}
.lg1{fill:var(--g800)}.lg2{fill:var(--g600)}.lg3{fill:#1FB864}
.top.dark .lg1,.menu .lg1,.ftr .lg1,.on-dark .lg1{fill:#C6F5DA}
.top.dark .lg2,.menu .lg2,.ftr .lg2,.on-dark .lg2{fill:#6EE3A0}
.top.dark .lg3,.menu .lg3,.ftr .lg3,.on-dark .lg3{fill:var(--accent)}
.sys-brand svg{width:24px;height:17px}
.app-nav .nl svg{width:24px;height:17px}
.car svg{width:32px;height:23px}
.wa-top .av svg{width:26px;height:19px}
.pnav a.on{opacity:1;color:#fff}

/* ---------- page hero ---------- */
.phero{position:relative;background:var(--g950);color:#fff;padding:calc(var(--hdr) + 64px) 0 92px;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 70% at 85% 0%,color-mix(in srgb,var(--accent) 20.0%,transparent),transparent 60%),radial-gradient(45% 60% at 5% 100%,color-mix(in srgb,var(--g500) 16.0%,transparent),transparent 60%)}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:3px 3px}
.phero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.phero.solo .wrap{grid-template-columns:1fr;max-width:940px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.58);margin-bottom:22px}
.crumbs a{color:var(--g200);text-decoration:none}.crumbs a:hover{color:#fff}
.phero h1{margin:0;font-size:clamp(40px,5.2vw,78px);line-height:1.02;font-weight:900;letter-spacing:-.035em}
.phero .lead{color:rgba(255,255,255,.78);max-width:620px}
.phero .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:600;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.88)}
.pill.hi{background:color-mix(in srgb,var(--accent) 14.0%,transparent);border-color:color-mix(in srgb,var(--accent) 45.0%,transparent);color:var(--g100)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.phero .chap{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.85);box-shadow:none}
.phero .chap b{background:var(--accent);color:var(--g950)}

/* static mock window (reuses the configurator widgets) */
.mock{position:relative;background:#fff;color:var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 50px 120px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.1);display:flex;flex-direction:column}
.mock .app-top{border-bottom:1px solid var(--n200)}
.mock .app-main{padding:20px;min-height:340px}
.mock-float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:14px;padding:10px 14px;font-size:13.5px;font-weight:600;box-shadow:0 18px 40px rgba(0,0,0,.35);animation:bob 5s ease-in-out infinite}
.mock-float .ic{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--g500),var(--accent));display:grid;place-items:center;flex:none}
.vis{position:relative}
.vis .mock-float.a{bottom:-18px;right:-16px}
.vis .mock-float.b{top:-16px;left:-14px;animation-delay:-2.5s}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.cards.c2{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.cards.c4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.card2{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:22px;background:#fff;border:1px solid var(--n200);box-shadow:var(--sh-sm);text-decoration:none;color:inherit;transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
a.card2:hover{transform:translateY(-5px);box-shadow:var(--sh-xl);border-color:var(--g200)}
.card2 .ic{width:54px;height:54px;border-radius:15px;background:var(--g50);display:grid;place-items:center;color:var(--g700);flex:none;transition:background .35s,color .35s}
a.card2:hover .ic{background:var(--g700);color:#fff}
.card2 h3{margin:0;font-size:clamp(20px,1.7vw,24px);font-weight:800;letter-spacing:-.01em;line-height:1.25}
.card2 p{margin:0;color:var(--n600);font-size:16px}
.card2 .more{margin-top:auto;padding-top:6px;font-weight:700;font-size:15px;color:var(--g700);display:inline-flex;gap:8px;align-items:center}
.card2 .more .arr{transition:transform .3s var(--ease)}
a.card2:hover .more .arr{transform:translateX(-5px)}
.card2 .tagl{align-self:flex-start;font-size:12.5px;font-weight:700;color:var(--g800);background:var(--g50);padding:3px 11px;border-radius:999px}
.dark .card2{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);box-shadow:none;color:#fff}
.dark .card2 p{color:rgba(255,255,255,.68)}
.dark .card2 .ic{background:color-mix(in srgb,var(--accent) 14.0%,transparent);color:var(--g200)}
.dark a.card2:hover{border-color:color-mix(in srgb,var(--accent) 45.0%,transparent);background:rgba(255,255,255,.07)}
.dark .card2 .more{color:var(--g300)}
.card2 .shot{margin:-28px -28px 6px;height:190px;border-radius:22px 22px 0 0;background:linear-gradient(160deg,var(--g800),var(--g950));position:relative;overflow:hidden;display:grid;place-items:center;color:var(--g200);font-size:14px}
.card2 .shot::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 80% 10%,color-mix(in srgb,var(--accent) 25.0%,transparent),transparent 60%)}
.card2 .shot span{position:relative}

/* ---------- split, checklist, aside ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.split.wide{grid-template-columns:1.2fr .8fr}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.55}
.checks li::before{content:"";flex:none;width:24px;height:24px;margin-top:1px;border-radius:8px;background:var(--g50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C7344' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat}
.checks li b{display:block}
.checks li span{color:var(--n600);font-size:15.5px}
.dark .checks li span{color:rgba(255,255,255,.66)}
.dark .checks li::before{background-color:color-mix(in srgb,var(--accent) 16.0%,transparent)}
.kv{background:#fff;border:1px solid var(--n200);border-radius:22px;padding:26px 28px;box-shadow:var(--sh-sm)}
.kv h3{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--g700)}
.kv dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:14px 22px;font-size:16px}
.kv dt{color:var(--n500)}
.kv dd{margin:0;font-weight:600}
.phero .kv{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none;color:#fff}
.phero .kv h3{color:var(--g200)}
.phero .kv dt{color:rgba(255,255,255,.6)}

/* ---------- numbered steps (light) ---------- */
.nsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px;counter-reset:n}
.nsteps li{position:relative;padding:24px 22px;border-radius:20px;background:#fff;border:1px solid var(--n200);box-shadow:var(--sh-sm)}
.nsteps li::before{counter-increment:n;content:counter(n);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--g700);color:#fff;font-weight:800;margin-bottom:14px}
.nsteps b{display:block;font-size:18px;margin-bottom:4px}
.nsteps span{color:var(--n600);font-size:15px}

/* ---------- metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.metric{padding:26px;border-radius:22px;background:#fff;border:1px solid var(--n200);box-shadow:var(--sh-lg)}
.metric b{display:block;font-size:clamp(38px,4vw,56px);font-weight:900;letter-spacing:-.03em;color:var(--g700);line-height:1.05;font-feature-settings:"tnum"}
.metric span{color:var(--n700);font-size:16px}
.phero .metric{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none}
.phero .metric b{color:var(--g300)}.phero .metric span{color:rgba(255,255,255,.75)}

/* ---------- prose (articles, case studies) ---------- */
.prose{max-width:760px;font-size:18.5px;line-height:1.8;color:var(--n800)}
.prose h2{font-size:clamp(28px,2.6vw,36px);line-height:1.2;font-weight:900;letter-spacing:-.02em;margin:56px 0 14px;color:var(--ink)}
.prose h3{font-size:22px;font-weight:800;margin:36px 0 8px;color:var(--ink)}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 20px;padding-inline-start:24px}
.prose li{margin-bottom:8px}
.prose a{color:var(--g700);font-weight:600}
.tldr{border-radius:18px;background:var(--g50);border:1px solid var(--g200);padding:20px 24px;margin:0 0 34px;font-size:18px}
.tldr b{display:block;font-size:13px;letter-spacing:.06em;color:var(--g700);margin-bottom:6px}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:16px}
.prose th,.prose td{text-align:right;padding:12px 14px;border-bottom:1px solid var(--n200)}
.prose th{background:var(--n50);font-size:14px;color:var(--n600)}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14.5px;color:rgba(255,255,255,.65);margin-top:22px}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin:10px 0 0}
.shot-ph{aspect-ratio:16/10;border-radius:18px;border:1.5px dashed var(--n300);background:var(--n100);display:grid;place-items:center;color:var(--n500);font-size:15px;text-align:center;padding:16px}

/* ---------- filter tabs ---------- */
.ftabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.ftab{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--n200);background:#fff;font-weight:600;font-size:15px;cursor:pointer;transition:all .25s}
.ftab:hover{border-color:var(--g300)}
.ftab[aria-pressed=true]{background:var(--g700);border-color:var(--g700);color:#fff}
.card2.hide{display:none}

/* ---------- questionnaire ---------- */
.qform{background:#fff;border:1px solid var(--n200);border-radius:28px;padding:clamp(24px,4vw,40px);box-shadow:var(--sh-xl);display:flex;flex-direction:column;gap:30px}
.qform fieldset{border:0;margin:0;padding:0}
.qform legend{padding:0;margin-bottom:14px;font-size:19px;font-weight:800}
.qform legend small{font-weight:400;color:var(--n500);font-size:14.5px}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{position:relative;display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;border:1.5px solid var(--n200);background:#fff;font-weight:600;font-size:15px;cursor:pointer;transition:all .25s var(--ease)}
.opt:hover{border-color:var(--g300);transform:translateY(-1px)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt:has(input:checked){background:var(--g700);border-color:var(--g700);color:#fff}
.opt:has(input:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,var(--g600) 35.0%,transparent)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.fld2{display:flex;flex-direction:column;gap:6px;font-size:14.5px;font-weight:600;color:var(--n700)}
.fld2 input,.fld2 textarea{border:1.5px solid var(--n200);border-radius:14px;background:var(--n50);padding:12px 14px;font-size:16px;transition:border-color .25s,background .25s,box-shadow .25s}
.fld2 input{height:52px}
.fld2 input:focus,.fld2 textarea:focus{outline:none;border-color:var(--g600);background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--g600) 16.0%,transparent)}
.qmsg{margin:0;font-size:15px;min-height:1px}
.qmsg.err{color:var(--red)}.qmsg.ok{color:var(--g700);font-weight:700}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:32px;background:var(--g950);color:#fff;padding:clamp(34px,5.5vw,72px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 90% 0%,color-mix(in srgb,var(--accent) 22.0%,transparent),transparent 60%),radial-gradient(50% 70% at 0% 100%,color-mix(in srgb,var(--g500) 16.0%,transparent),transparent 60%);pointer-events:none}
.cta-band>*{position:relative}
.cta-band h2{margin:0;font-size:clamp(30px,3.6vw,52px);line-height:1.05;font-weight:900;letter-spacing:-.03em;max-width:680px}
.cta-band p{margin:14px 0 0;font-size:18px;color:rgba(255,255,255,.75);max-width:560px}
.cta-band .ctas{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- names story ---------- */
.names{display:inline-flex;flex-direction:column;gap:16px;direction:ltr;align-items:center}
.names .row{display:grid;grid-template-columns:repeat(6,58px);font-family:'Sora',var(--font);font-weight:600;font-size:54px;line-height:1;text-align:center}
.names .bars{display:grid;grid-template-columns:repeat(6,58px);row-gap:10px}
.names .bars i{height:10px;margin:0 7px;border-radius:5px;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.names.in .bars i{transform:none}
.names .bars i:nth-child(1){grid-column:1/3;grid-row:1;background:var(--g800)}
.names .bars i:nth-child(2){grid-column:2/6;grid-row:2;background:var(--g600);transition-delay:.2s}
.names .bars i:nth-child(3){grid-column:4/7;grid-row:3;background:#1FB864;transition-delay:.4s}
.names .lbl{direction:rtl;display:flex;gap:26px;font-weight:700;font-size:17px}
.dark .names .row{color:#fff}
.dark .names .bars i:nth-child(1){background:#C6F5DA}.dark .names .bars i:nth-child(2){background:#6EE3A0}.dark .names .bars i:nth-child(3){background:var(--accent)}

/* ---------- timeline ---------- */
.tline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
.tline li{padding:24px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-top:4px solid var(--c,var(--g300))}
.tline small{display:block;font-family:var(--mono);font-size:13px;color:var(--g200);margin-bottom:8px}
.tline b{display:block;font-size:19px;margin-bottom:6px}
.tline span{font-size:15px;color:rgba(255,255,255,.68)}

/* ---------- footer ---------- */
.ftr{background:var(--g990);color:rgba(255,255,255,.62);padding:72px 0 30px;font-size:15px}
.ftr-grid{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:36px}
.ftr .brand{color:#fff;margin-bottom:14px}
.ftr p{margin:0;max-width:380px;line-height:1.7}
.ftr h4{margin:0 0 12px;color:#fff;font-size:15px}
.ftr nav{display:flex;flex-direction:column;gap:9px}
.ftr a{color:rgba(255,255,255,.75);text-decoration:none}
.ftr a:hover{color:#fff}
.ftr-bot{margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:13px}

/* ---------- site chat ---------- */
.fab{border:0;cursor:pointer;font:inherit}
.chatw{position:fixed;left:20px;bottom:88px;z-index:80;width:min(390px,calc(100vw - 32px));height:min(620px,calc(100vh - 120px));height:min(620px,calc(100svh - 120px));display:flex;flex-direction:column;background:#fff;color:var(--ink);border-radius:24px;overflow:hidden;box-shadow:0 30px 80px color-mix(in srgb,var(--g990) 35.0%,transparent),0 0 0 1px rgba(12,19,17,.06);opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:left bottom;transition:opacity .3s,transform .4s var(--spring),visibility 0s .3s}
.chatw.open{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .4s var(--spring)}
.cw-h{flex:none;display:flex;align-items:center;gap:12px;padding:14px 16px;background:radial-gradient(120% 140% at 15% 0%,color-mix(in srgb,var(--accent) 30.0%,transparent),transparent 60%),linear-gradient(160deg,var(--g800),var(--g950));color:#fff}
.cw-av{position:relative;width:42px;height:42px;border-radius:14px;background:#fff;display:grid;place-items:center;flex:none}
.cw-av svg{width:28px;height:20px}
.cw-av::after{content:"";position:absolute;bottom:-2px;left:-2px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--g800)}
.cw-h b{display:block;font-size:16px}
.cw-h small{display:block;font-size:12.5px;color:var(--g100)}
.cw-x{margin-inline-start:auto;width:44px;height:44px;border-radius:12px;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center}
.cw-b{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--n50)}
.cw-m{max-width:86%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.55;animation:msgIn .4s var(--spring)}
.cw-m.bot{align-self:flex-start;background:#fff;border:1px solid var(--n200);border-bottom-right-radius:4px}
.cw-m.me{align-self:flex-end;background:var(--g700);color:#fff;border-bottom-left-radius:4px}
.cw-src{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:3px 10px;border-radius:999px;background:var(--g50);color:var(--g800);font-size:12px;font-weight:700;text-decoration:none}
.cw-sum{align-self:stretch;background:#fff;border:1px solid var(--g200);border-radius:16px;padding:14px 16px;display:grid;gap:7px;font-size:14px;animation:msgIn .4s var(--spring)}
.cw-sum h5{margin:0;font-size:13px;color:var(--g700)}
.cw-sum div{display:flex;justify-content:space-between;gap:12px}
.cw-sum span{color:var(--n500)}
.cw-sum .rec{border-top:1px solid var(--n100);padding-top:8px;display:block}
.cw-ok{align-self:stretch;display:flex;gap:10px;align-items:center;background:var(--g50);border:1px solid var(--g500);border-radius:14px;padding:12px 14px;font-size:14px;color:var(--g900);animation:msgIn .4s var(--spring)}
.cw-typing{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:#fff;border:1px solid var(--n200);border-radius:16px}
.cw-typing i{width:7px;height:7px;border-radius:50%;background:var(--n400);animation:typing 1s infinite}
.cw-typing i:nth-child(2){animation-delay:.15s}.cw-typing i:nth-child(3){animation-delay:.3s}
.cw-form{align-self:stretch;background:#fff;border:1px solid var(--n200);border-radius:16px;padding:14px;display:grid;gap:10px}
.cw-form input{height:44px;border:1.5px solid var(--n200);border-radius:12px;padding:0 12px;font-size:15px;background:var(--n50)}
.cw-form input:focus{outline:none;border-color:var(--g600);background:#fff}
.cw-f{flex:none;padding:12px 14px 10px;border-top:1px solid var(--n200);background:#fff;display:flex;flex-direction:column;gap:10px}
.cw-qr{display:flex;flex-wrap:wrap;gap:6px}
.cw-qr button{min-height:36px;padding:0 13px;border-radius:999px;border:1.5px solid var(--g200);background:var(--g50);color:var(--g900);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.cw-qr button:hover{background:var(--g700);border-color:var(--g700);color:#fff}
.cw-in{display:flex;gap:8px}
.cw-in input{flex:1;min-width:0;height:44px;border:1.5px solid var(--n200);border-radius:999px;padding:0 16px;font-size:15px;background:var(--n50)}
.cw-in input:focus{outline:none;border-color:var(--g600);background:#fff}
.cw-send{width:44px;height:44px;border-radius:50%;border:0;background:var(--g700);color:#fff;cursor:pointer;display:grid;place-items:center;flex:none}
.cw-note{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--n500)}
.cw-note a{color:var(--g700);font-weight:600}

/* ---------- responsive (additions) ---------- */
@media (max-width:1020px){
  .phero .wrap,.split,.split.wide{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ftr-grid>:first-child{grid-column:1/-1}
  .vis .mock-float.a{right:0}.vis .mock-float.b{left:0}
}
@media (max-width:760px){
  .phero{padding:calc(var(--hdr) + 40px) 0 72px}
  .names .row{grid-template-columns:repeat(6,44px);font-size:40px}
  .names .bars{grid-template-columns:repeat(6,44px)}
  .mock .app-main{padding:14px;min-height:280px}
  .prose{font-size:17px}
  .chatw{left:12px;bottom:80px;width:calc(100vw - 24px)}
}
/* compact names (homepage Roy section) */
.names.sm{gap:8px}
.names.sm .row{grid-template-columns:repeat(6,26px);font-size:24px}
.names.sm .bars{grid-template-columns:repeat(6,26px);row-gap:5px}
.names.sm .bars i{height:6px;margin:0 3px;border-radius:3px}

/* =====================================================================
   SYSTEM BUILDER (homepage #build)
   ===================================================================== */
.build{background:radial-gradient(60% 50% at 85% 0%,color-mix(in srgb,var(--accent) 8.0%,transparent),transparent 60%),var(--n50)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.build .wrap{max-width:1380px}
.bld{display:grid;grid-template-columns:350px minmax(0,1fr);gap:26px;align-items:start}
.bld>*{min-width:0}

/* ---------- control panel ---------- */
.bld-ctl{background:#fff;border:1px solid var(--n200);border-radius:26px;padding:22px;box-shadow:var(--sh-lg);display:flex;flex-direction:column;gap:22px;position:sticky;top:84px}
.bstep-h{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15.5px;margin-bottom:12px}
.bstep-h>b{width:26px;height:26px;border-radius:50%;background:var(--g950);color:#fff;display:grid;place-items:center;font-size:13px;font-family:var(--mono)}
.bcount{margin-inline-start:auto;font-family:var(--mono);font-size:13px;color:var(--n500);font-weight:500}
.bcount b{color:var(--g700);font-size:16px}
.inds{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ind{display:flex;align-items:center;gap:9px;min-height:50px;padding:0 10px;border-radius:14px;border:1.5px solid var(--n200);background:#fff;font-weight:600;font-size:14px;cursor:pointer;text-align:right;transition:border-color .25s,background .25s,transform .25s var(--spring),box-shadow .25s}
.ind .ii{flex:none;width:32px;height:32px;border-radius:10px;background:var(--n100);color:var(--g700);display:grid;place-items:center;transition:all .3s}
.ind:hover{transform:translateY(-2px);border-color:var(--g200)}
.ind[aria-checked=true]{border-color:var(--g600);background:var(--g50);box-shadow:0 0 0 4px color-mix(in srgb,var(--g600) 12.0%,transparent)}
.ind[aria-checked=true] .ii{background:linear-gradient(135deg,var(--g700),var(--g500));color:#fff;transform:rotate(-6deg)}
.bbiz input{width:100%;height:50px;border-radius:14px;border:1.5px solid var(--n200);background:var(--n50);padding:0 16px;font-size:16px;font-family:inherit;transition:border-color .25s,background .25s,box-shadow .25s}
.bbiz input:focus{outline:none;border-color:var(--g600);background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--g600) 16.0%,transparent)}
.bsw{display:flex;gap:10px;margin-top:12px}
.swc{width:34px;height:34px;border-radius:50%;border:0;background:var(--c);cursor:pointer;position:relative;transition:transform .3s var(--spring);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.swc:hover{transform:scale(1.1)}
.swc[aria-checked=true]{transform:scale(1.12);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--c)}
.swc[aria-checked=true]::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat}
.bmods{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.bmod{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 9px;border-radius:12px;border:1.5px solid var(--n200);background:#fff;font-weight:600;font-size:13.5px;cursor:pointer;text-align:right;transition:border-color .25s,background .25s,transform .25s var(--spring)}
.bmod:hover{border-color:var(--g200);transform:translateY(-2px)}
.bmod .mi{flex:none;width:28px;height:28px;border-radius:8px;background:var(--n100);color:var(--g700);display:grid;place-items:center;transition:all .25s}
.bmod .mn{flex:1;line-height:1.2}
.bmod .ck{flex:none;width:18px;height:18px;border-radius:6px;border:1.5px solid var(--n300);display:grid;place-items:center;color:#fff;transition:all .25s var(--spring)}
.bmod .ck svg{opacity:0;transform:scale(.4);transition:all .25s var(--spring)}
.bmod[aria-pressed=true]{border-color:var(--g600);background:var(--g50)}
.bmod[aria-pressed=true] .mi{background:var(--g700);color:#fff}
.bmod[aria-pressed=true] .ck{background:var(--g700);border-color:var(--g700)}
.bmod[aria-pressed=true] .ck svg{opacity:1;transform:none}
.bmod.ai{border-style:dashed}

/* ---------- stage ---------- */
.bld-stage{position:sticky;top:84px;min-width:0}
.bld-bar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bdev{display:inline-flex;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--n200);box-shadow:var(--sh-sm)}
.bdev button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--n600);cursor:pointer;transition:all .25s}
.bdev button[aria-pressed=true]{background:var(--g950);color:#fff}
.blive{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--g700)}
.blive i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60.0%,transparent);animation:bpulse 1.8s infinite}
@keyframes bpulse{70%{box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 0.0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0.0%,transparent)}}
.breset{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--n200);background:#fff;font:inherit;font-size:13px;font-weight:600;color:var(--n600);cursor:pointer}
.breset:hover{color:var(--ink);border-color:var(--n300)}

.bapp{position:relative;top:auto;height:600px;transition:max-width .6s var(--ease),height .6s var(--ease),border-radius .6s var(--ease),box-shadow .4s;margin-inline:auto;max-width:100%}
.bapp.flash{animation:bflash .7s var(--ease)}
@keyframes bflash{0%{box-shadow:0 0 0 0 var(--g500),var(--sh-xl)}100%{box-shadow:0 0 0 14px transparent,var(--sh-xl)}}
.bapp .app-title b{transition:color .3s}
.bapp .app-nav{transition:background .5s}
.bapp .app-main{position:relative;overflow:auto;scrollbar-width:thin}
.bapp .app-main.calm .wi{animation:none}
.bapp .app-av{background:var(--g100);color:var(--g800)}
.bbell{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--n600);margin-inline-start:auto}
.bbell+.app-av{margin-inline-start:0}
.bbell i{position:absolute;top:0;left:0;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-style:normal;font-size:10px;font-weight:700;display:grid;place-items:center}
.bbell.ring svg{animation:ring .7s var(--ease)}
@keyframes ring{20%{transform:rotate(18deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}}

/* log strip */
.blog{margin-top:10px;background:var(--g990,var(--g990));color:rgba(255,255,255,.75);border-radius:16px;padding:10px 16px;font-family:var(--mono);font-size:12px;direction:ltr;text-align:left;min-height:74px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;overflow:hidden}
.bl{animation:blIn .4s var(--ease) both;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:right}
.bl time{color:rgba(255,255,255,.4);margin-inline-end:10px;direction:ltr;display:inline-block}
.bl b{color:#fff;font-weight:600}.bl span{color:rgba(255,255,255,.5)}
.bl.ok b{color:#6EE3A0}.bl.rm b{color:#FFB4A8}
.bl:not(:last-child){opacity:.55}
@keyframes blIn{from{opacity:0;transform:translateY(8px)}}

/* toasts */
.btoasts{position:absolute;left:14px;bottom:14px;z-index:5;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:min(340px,calc(100% - 28px))}
.btoast{display:flex;align-items:center;gap:10px;background:var(--g950);color:#fff;border-radius:14px;padding:10px 14px 10px 12px;font-size:13px;font-weight:600;box-shadow:0 16px 36px rgba(0,0,0,.28);animation:tIn .45s var(--spring) both}
.btoast .ti{flex:none;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--g600),var(--accent));display:grid;place-items:center}
.btoast.out{animation:tOut .4s var(--ease) forwards}
@keyframes tIn{from{opacity:0;transform:translateY(16px) scale(.92)}}
@keyframes tOut{to{opacity:0;transform:translateX(-30px)}}

/* build overlay */
.bbuild{height:100%;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.bb-ic{width:62px;height:62px;border-radius:18px;background:linear-gradient(135deg,var(--g700),var(--g500));color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px color-mix(in srgb,var(--g700) 30.0%,transparent);animation:bbPop .5s var(--spring) both}
@keyframes bbPop{from{transform:scale(.4) rotate(-20deg);opacity:0}}
.bbuild>b{font-size:18px}
.bbuild ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px;color:var(--n600);text-align:right}
.bbuild li{display:flex;align-items:center;gap:8px;opacity:0;animation:bbLi .3s var(--ease) forwards;animation-delay:var(--d)}
.bbuild li svg{flex:none;width:18px;height:18px;padding:3px;border-radius:50%;background:var(--g600);color:#fff}
@keyframes bbLi{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.bb-bar{width:200px;height:6px;border-radius:6px;background:var(--n200);overflow:hidden}
.bb-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--g500),var(--g700));transform-origin:right;animation:bbBar .9s var(--ease) forwards}
@keyframes bbBar{from{transform:scaleX(0)}}

/* confetti burst */
.bburst{position:absolute;z-index:6;width:0;height:0;pointer-events:none}
.bburst i{position:absolute;width:8px;height:8px;border-radius:2px;background:var(--g500);animation:bb .85s var(--ease) forwards}
.bburst i:nth-child(3n){background:var(--accent)}.bburst i:nth-child(3n+1){background:var(--g700)}.bburst i:nth-child(4n){background:#F5B700;border-radius:50%}
@keyframes bb{to{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.4);opacity:0}}

/* shared widget bits */
.bbtn{border:0;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:transform .2s var(--spring),filter .2s}
.bbtn:hover{transform:translateY(-1px);filter:brightness(1.1)}
.bbtn:active{transform:scale(.96)}
.bchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.bchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--n200);background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:var(--n700);cursor:pointer;transition:all .2s}
.bchip b{font-family:var(--mono);color:var(--n500);font-weight:500}
.bchip:hover{border-color:var(--g500);color:var(--g700)}
.bchip[aria-pressed=true]{background:var(--g700);border-color:var(--g700);color:#fff}.bchip[aria-pressed=true] b{color:rgba(255,255,255,.75)}
.bchip:disabled{opacity:.45;cursor:default}
.bhint{display:flex;align-items:center;gap:6px;margin:-4px 0 12px;font-size:12.5px;color:var(--n500)}
.pl-b{border:0;font-family:inherit;cursor:pointer;transition:transform .2s var(--spring)}
.pl-b:hover{transform:scale(1.07)}
.pl-b:active{transform:scale(.94)}

/* pipeline */
.bkan{align-items:start}
.kcol2{background:var(--n100);border-radius:14px;padding:10px;min-height:250px;transition:background .25s,box-shadow .25s;position:relative}
.kcol2 h5{margin:0 0 8px;font-size:12px;color:var(--n600);font-weight:700;display:flex;justify-content:space-between;gap:6px}
.kcol2 h5 span{font-family:var(--mono);font-weight:500;color:var(--g700)}
.kcd{position:relative;cursor:grab;touch-action:none;user-select:none;padding-inline-start:24px;transition:transform .25s var(--spring),box-shadow .25s,border-color .25s}
.kcd:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.kcd:focus-visible{outline:2px solid var(--g600);outline-offset:2px}
.kcd .grip{position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--n300)}
.kcd.won{border-color:var(--g400);background:var(--g50)}
.kcd.moved{animation:kMoved .6s var(--spring)}
@keyframes kMoved{from{transform:scale(.85);box-shadow:0 0 0 4px var(--g400)}}
.kcd.ghost{opacity:.3}
.kfloat{position:fixed;left:0;top:0;z-index:300;pointer-events:none;box-shadow:0 24px 40px rgba(0,0,0,.25);cursor:grabbing;margin:0}
.kdrop{display:none;border:2px dashed var(--g400);border-radius:10px;padding:12px;text-align:center;font-size:12px;color:var(--g700);font-weight:600}
.dragging .kcol2 .kdrop{display:block}
.kcol2.over{background:var(--g50);box-shadow:inset 0 0 0 2px var(--g500)}

/* quotes */
.bdoc{max-width:480px}
.bql{width:100%;border:0;background:none;font:inherit;text-align:right;cursor:pointer;border-bottom:1px solid var(--n100);transition:opacity .25s,background .2s;border-radius:6px}
.bql:hover{background:var(--n50)}
.bql>span:first-child{display:inline-flex;align-items:center;gap:8px}
.bql .bx{width:16px;height:16px;border-radius:5px;background:var(--g600);color:#fff;display:grid;place-items:center;transition:all .2s}
.bql.off{opacity:.45}.bql.off .bx{background:transparent;box-shadow:inset 0 0 0 1.5px var(--n300);color:transparent}
.bql.off>span:last-child{text-decoration:line-through}
.bq-act{margin-top:16px;min-height:44px;display:flex;align-items:center}
.bq-act .stamp{margin-top:0}

/* tasks */
.bprog{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:12.5px;color:var(--n600);font-weight:600}
.bprog span{flex:none}
.bprog i{flex:1;height:8px;border-radius:8px;background:var(--n200);position:relative;overflow:hidden}
.bprog i::after{content:"";position:absolute;inset:0;right:0;width:var(--w);background:linear-gradient(90deg,var(--g500),var(--g700));border-radius:8px;transition:width .5s var(--ease)}
.btasks li{padding:0}
.btasks button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;background:none;font:inherit;font-size:14px;text-align:right;cursor:pointer}
.btasks .cb svg{opacity:0;transition:opacity .2s}
.btasks li.dn .cb{background:var(--g600);border-color:var(--g600);animation:cbPop .35s var(--spring)}
.btasks li.dn .cb svg{opacity:1}
.btasks li.dn .tx{color:var(--n400);text-decoration:line-through}
.btasks li.fresh{animation:newRow 1.6s both}
@keyframes cbPop{50%{transform:scale(1.25)}}

/* calendar */
.bcal{padding:8px;overflow:hidden}
.bcal .cr{display:grid;grid-template-columns:52px 1fr 1fr;gap:6px;align-items:stretch;min-height:36px}
.bcal .cr+.cr{border-top:1px dashed var(--n100)}
.bcal .chd{min-height:28px;align-items:center;font-size:12px}
.bcal .chd b{color:var(--n600);font-weight:700}
.bcal .ch{font-family:var(--mono);font-size:11.5px;color:var(--n500);padding-top:9px;direction:ltr;text-align:right}
.ca{margin:3px 0;border-radius:8px;background:var(--g50);border-inline-start:3px solid var(--g600);padding:4px 8px;font-size:12px;display:flex;gap:6px;align-items:center;overflow:hidden;white-space:nowrap}
.ca span{color:var(--n500);overflow:hidden;text-overflow:ellipsis}
.ca.fresh{animation:kMoved .6s var(--spring);background:var(--g100)}
.cf{margin:3px 0;border:1.5px dashed transparent;border-radius:8px;background:none;color:transparent;cursor:pointer;display:grid;place-items:center;transition:all .2s}
.cf:hover,.cf:focus-visible{border-color:var(--g400);color:var(--g700);background:var(--g50)}

/* whatsapp */
.bflow .fn{transition:all .35s var(--ease)}
.bflow .fn .ic{color:var(--g700)}
.bflow .fn.lit{border-color:var(--g500);box-shadow:0 0 0 4px color-mix(in srgb,var(--g500) 15.0%,transparent);transform:translateY(-3px)}
.bflow .fn.lit .ic{background:var(--g600);color:#fff}
.bwa{display:grid;grid-template-columns:1fr 190px;gap:12px}
.bwa-chat{background:#EFE7DD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23d9cfc2'/%3E%3C/svg%3E");border-radius:14px;padding:12px;height:230px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.bwa-chat .bub{font-size:13px;animation:tIn .4s var(--spring) both}
.bwa-chat .bub small{display:block;font-size:11px;color:var(--g700);font-weight:700;margin-bottom:2px}
.bwa-chat .bai-d{background:#fff;border:1.5px dashed var(--g500);align-self:flex-end}
.bwa-empty{margin:auto;color:#8a7f72;font-size:13px;text-align:center}
.bwa-send{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.bwa-send small{font-size:12px;color:var(--n500);font-weight:600}
.bwa-send .bchip{height:auto;min-height:34px;padding:6px 12px;border-radius:12px;text-align:right;justify-content:flex-start;line-height:1.3}

/* dashboard */
.bchart{height:230px}
.bchart .w-bars i{position:relative;cursor:pointer;transition:filter .2s}
.bchart .w-bars i:hover{filter:brightness(1.15)}
.bchart .w-bars i::after{content:attr(data-v);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--g950);color:#fff;font-size:11px;font-family:var(--mono);padding:3px 7px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s}
.bchart .w-bars i:hover::after{opacity:1;transform:translateX(-50%)}

/* stock */
.binv .bst{display:inline-flex;align-items:center;gap:6px}
.bq{width:26px;height:26px;border-radius:8px;border:1px solid var(--n200);background:#fff;color:var(--n700);display:grid;place-items:center;cursor:pointer;transition:all .15s}
.bq:hover{border-color:var(--g500);color:var(--g700)}.bq:active{transform:scale(.9)}
.bqv{min-width:74px;text-align:center;font-family:var(--mono);font-size:12.5px}
.binv .pl-b{display:inline-flex;align-items:center;gap:4px}
.binv .bar i{transition:width .45s var(--ease)}
.app-main.calm .binv .bar i{animation:none;transform:none}

/* hours */
.batt{grid-template-columns:36px 1fr auto auto}
.batt.fresh{animation:kMoved .6s var(--spring)}
.bpunch{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--n200);background:#fff;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s}
.bpunch:not(.on){background:var(--g700);border-color:var(--g700);color:#fff}
.bpunch:not(.on) .off-dot{background:rgba(255,255,255,.6)}
.bpunch:hover{transform:translateY(-1px)}

/* projects */
.bgt{width:100%;padding:0;cursor:pointer;font:inherit}
.bgb{overflow:hidden;display:flex;align-items:center;background:var(--g200)!important}
.bgb em{position:absolute;inset:0;right:0;left:auto;background:var(--g600);border-radius:5px;transition:width .5s var(--ease)}
.bgb span{position:relative;z-index:1;font-size:10.5px;font-weight:700;color:#fff;padding:0 6px;white-space:nowrap;font-style:normal;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.bgb.done em{background:var(--g700)}
.bgt:hover .bgb{filter:brightness(1.08)}
.app-main.calm .g-bar{animation:none;transform:none}

/* AI */
.bai{padding:14px;display:flex;flex-direction:column;gap:10px}
.bai-msgs{display:flex;flex-direction:column;gap:10px;max-height:290px;overflow:auto;font-size:14px}
.bm{max-width:88%;animation:tIn .35s var(--ease) both;line-height:1.55}
.bm.me{align-self:flex-end;background:var(--g700);color:#fff;border-radius:14px 14px 4px 14px;padding:8px 12px}
.bm.bot{align-self:flex-start}
.bm .cw-typing{display:inline-flex}
.bm .abtns span{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--n100);color:var(--n700)}
.bm .abtns .ok{background:var(--g700);color:#fff;border:0;font:inherit;font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;cursor:pointer}
.bai-q{margin:0}
.bai-in{display:flex;gap:8px}
.bai-in input{flex:1;height:40px;border-radius:12px;border:1px solid var(--n200);background:var(--n50);padding:0 12px;font:inherit;font-size:14px}
.bai-in input:focus{outline:none;border-color:var(--g600);background:#fff}
.bai-in button{width:40px;height:40px;border-radius:12px;border:0;background:var(--g700);color:#fff;display:grid;place-items:center;cursor:pointer}
.bai-in button svg{transform:scaleX(-1)}

/* ---------- phone preview ---------- */
.bld-stage.dev-phone .bapp{max-width:372px;height:700px;border-radius:44px;border:11px solid #0C1311;box-shadow:0 40px 80px color-mix(in srgb,var(--g990) 28.0%,transparent),inset 0 0 0 1px rgba(255,255,255,.1)}
.bld-stage.dev-phone .bapp::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:96px;height:24px;border-radius:999px;background:#0C1311;z-index:8}
.bld-stage.dev-phone .app-top{padding:40px 14px 10px}
.bld-stage.dev-phone .app-top .dots{display:none}
.bld-stage.dev-phone .app-body{flex-direction:column-reverse}
.bld-stage.dev-phone .app-nav{width:auto;flex-direction:row;overflow-x:auto;padding:8px 8px 12px;gap:4px;scrollbar-width:none}
.bld-stage.dev-phone .app-nav .nl{display:none}
.bld-stage.dev-phone .nav-it{flex-direction:column;justify-content:center;gap:3px;width:auto;flex:none;min-width:70px;min-height:52px;padding:4px 6px;font-size:10.5px}
.bld-stage.dev-phone .app-main{padding:14px}
.bld-stage.dev-phone .w-tr{grid-template-columns:1.3fr 1fr .9fr}
.bld-stage.dev-phone .w-tr>:nth-child(4){display:none}
.bld-stage.dev-phone .w-kan{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x mandatory}
.bld-stage.dev-phone .w-kan>*{flex:none;width:72%;scroll-snap-align:start}
.bld-stage.dev-phone .w-kpis{grid-template-columns:1fr 1fr}
.bld-stage.dev-phone .w-kpis>:nth-child(3){display:none}
.bld-stage.dev-phone .bwa{grid-template-columns:1fr}
.bld-stage.dev-phone .w-flow .fn small{display:none}
.bld-stage.dev-phone .g-row,.bld-stage.dev-phone .g-wk{grid-template-columns:84px 1fr}
.bld-stage.dev-phone .w-head{flex-wrap:wrap}
.bld-stage.dev-phone .batt{grid-template-columns:36px 1fr auto}
.bld-stage.dev-phone .batt>.muted{display:none}
.bld-stage.dev-phone .btoasts{bottom:86px}

/* ---------- spec card ---------- */
.bspec{margin-top:28px;background:var(--g950);color:#fff;border-radius:28px;padding:clamp(22px,3vw,34px);display:grid;grid-template-columns:1.2fr 1fr;gap:22px 34px;position:relative;overflow:hidden}
.bspec::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 0% 0%,color-mix(in srgb,var(--accent) 18.0%,transparent),transparent 60%);pointer-events:none}
.bspec>*{position:relative}
.sp-h{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:flex-end}
.sp-h small,.sp-cx small,.sp-ph small{display:block;font-size:12.5px;color:rgba(255,255,255,.55);font-weight:600;letter-spacing:.02em}
.sp-h h3{margin:4px 0 8px;font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em}
.sp-ind{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-size:13px;font-weight:600;color:var(--g200)}
.sp-cx{min-width:220px}
.sp-cx b{display:block;font-size:20px;margin:2px 0 8px}
.sp-bar{height:8px;border-radius:8px;background:rgba(255,255,255,.12);overflow:hidden}
.sp-bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#6EE3A0,var(--accent));transition:width .7s var(--ease)}
.sp-m{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sp-m div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px}
.sp-m b{display:block;font-size:30px;font-weight:900;color:#6EE3A0;font-feature-settings:"tnum";line-height:1.1}
.sp-m span{font-size:13px;color:rgba(255,255,255,.7)}
.sp-ph{display:grid;gap:12px}
.sp-ph p{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.sp-ph span{padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:13px}
.sp-ph div:first-child span{background:color-mix(in srgb,var(--accent) 16.0%,transparent);border-color:color-mix(in srgb,var(--accent) 40.0%,transparent);color:#C6F5DA}
.sp-ph em{font-style:normal;color:rgba(255,255,255,.45);font-size:13px}
.sp-cta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.sp-cta p{margin:0 auto 0 0;font-size:13.5px;color:rgba(255,255,255,.6)}
.btn-ghost-d{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.btn-ghost-d:hover{box-shadow:inset 0 0 0 1.5px #fff}

/* ---------- responsive ---------- */
@media (max-width:1180px){.bld{grid-template-columns:330px minmax(0,1fr)}.inds{grid-template-columns:1fr}.bwa{grid-template-columns:1fr}}
@media (max-width:1020px){
  .bld{grid-template-columns:1fr}
  .bld-ctl,.bld-stage{position:relative;top:auto}
  .inds{grid-template-columns:repeat(3,1fr)}
  .bmods{grid-template-columns:repeat(3,1fr)}
  .bspec{grid-template-columns:1fr}
}
@media (max-width:760px){
  .bld-ctl{padding:16px;border-radius:22px}
  .inds{display:flex;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
  .ind{flex:none;min-height:44px}
  .bmods{grid-template-columns:1fr 1fr}
  .bmod .ck{display:none}
  .blive{display:none}
  .bapp{height:620px}
  .bapp .app-body{flex-direction:column-reverse}
  .bapp .app-nav{flex-direction:row;overflow-x:auto;width:auto;padding:8px;gap:4px}
  .bapp .app-nav .nl{display:none}
  .bapp .nav-it{flex:none;width:auto;flex-direction:column;gap:2px;min-width:66px;min-height:50px;font-size:10.5px;padding:4px}
  .bapp .w-kan{display:flex;overflow-x:auto;gap:8px}
  .bapp .w-kan>*{flex:none;width:74%}
  .bwa{grid-template-columns:1fr}
  .bwa-chat{height:190px}
  .sp-m{grid-template-columns:1fr 1fr}
  .bld-stage.dev-phone .bapp{border-width:8px;border-radius:36px;height:640px}
  .blog{font-size:11px;min-height:64px}
}
@media (prefers-reduced-motion:reduce){.bapp,.bapp *{transition:none!important;animation:none!important}}

/* =====================================================================
   ORANIV — two-colour brand: green (data, Excel, the start) → violet (technology, AI)
   Every use of violet is switchable from <html data-*> so the colour studio can tune it.
     data-logo  : green | last | grad      data-heads : green | grad | violet
     data-ai    : green | violet           data-glow  : green | duo
     data-road  : green | grad             data-ftr   : none  | grad
     data-btn   : green | violet | grad    data-chap  : green | grad
   ===================================================================== */
:root{
  --vb:#7B52F5;                      /* violet base: everything below derives from it */
  --v50:color-mix(in srgb,var(--vb) 7%,#fff);--v100:color-mix(in srgb,var(--vb) 16%,#fff);
  --v200:color-mix(in srgb,var(--vb) 34%,#fff);--v300:color-mix(in srgb,var(--vb) 55%,#fff);
  --v400:color-mix(in srgb,var(--vb) 78%,#fff);--v500:var(--vb);
  --v600:color-mix(in srgb,var(--vb) 88%,#000);--v700:color-mix(in srgb,var(--vb) 75%,#000);
  --v800:color-mix(in srgb,var(--vb) 58%,#000);--v900:color-mix(in srgb,var(--vb) 40%,#000);
  --v950:color-mix(in srgb,var(--vb) 24%,#06040F);
  --vg:30%;                          /* violet glow strength */
  --grad:linear-gradient(to left,var(--g500),var(--v500));
  --grad-l:linear-gradient(to left,var(--g300),var(--v300));
  --grad-d:linear-gradient(135deg,var(--g600),var(--v600));
}

/* ---------- logo ---------- */
#orvG stop:first-child{stop-color:var(--g600)}#orvG stop:last-child{stop-color:var(--v500)}
#orvGd stop:first-child{stop-color:#6EE3A0}#orvGd stop:last-child{stop-color:var(--v300)}
html[data-logo] .lg1{fill:var(--g600)}
html[data-logo=green] .lg1{fill:#0F5946}html[data-logo=green] .lg2{fill:#0E9152}html[data-logo=green] .lg3{fill:#1FB864}
html[data-logo=last] .lg2{fill:var(--g500)}html[data-logo=last] .lg3{fill:var(--v500)}
html[data-logo=grad] .lg2{fill:url(#orvG)}html[data-logo=grad] .lg3{fill:var(--v500)}
html[data-logo] :is(.top.dark,.menu,.ftr,.on-dark) .lg1{fill:#6EE3A0}
html[data-logo=green] :is(.top.dark,.menu,.ftr,.on-dark) .lg1{fill:#C6F5DA}
html[data-logo=green] :is(.top.dark,.menu,.ftr,.on-dark) .lg2{fill:#6EE3A0}
html[data-logo=green] :is(.top.dark,.menu,.ftr,.on-dark) .lg3{fill:#09D35C}
html[data-logo=last] :is(.top.dark,.menu,.ftr,.on-dark) .lg2{fill:#54DA8B}
html[data-logo=last] :is(.top.dark,.menu,.ftr,.on-dark) .lg3{fill:var(--v300)}
html[data-logo=grad] :is(.top.dark,.menu,.ftr,.on-dark) .lg2{fill:url(#orvGd)}
html[data-logo=grad] :is(.top.dark,.menu,.ftr,.on-dark) .lg3{fill:var(--v300)}
/* names story bars follow the logo */
html[data-logo=last] .names .bars i:nth-child(2){background:var(--g500)}
html[data-logo] .names .bars i:nth-child(3){background:var(--v500)}
html[data-logo=grad] .names .bars i:nth-child(2){background:linear-gradient(to right,var(--g600),var(--v500))}
html[data-logo=green] .names .bars i:nth-child(3){background:#1FB864}
html[data-logo=green] .names .bars i:nth-child(2){background:#0E9152}
html[data-logo] .dark .names .bars i:nth-child(3){background:var(--v300)}
html[data-logo=grad] .dark .names .bars i:nth-child(2){background:linear-gradient(to right,#6EE3A0,var(--v300))}
html[data-logo=green] .dark .names .bars i:nth-child(3){background:#09D35C}

/* ---------- emphasised words in headings ---------- */
.gt,.gt-l{padding-bottom:.08em}
html[data-heads=green] .gt{color:var(--g600)}html[data-heads=green] .gt-l{color:var(--g300)}
html[data-heads=violet] .gt{color:var(--v600)}html[data-heads=violet] .gt-l{color:var(--v300)}
html[data-heads=grad] .gt,html[data-heads=grad] .gt-l{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
html[data-heads=grad] .gt-l{background-image:var(--grad-l)}

/* ---------- chapter numbers ---------- */
html[data-chap=grad] .chap b{background:var(--grad-d);color:#fff}
html[data-chap=grad] .phero .chap b,html[data-chap=grad] .dark .chap b{background:var(--grad-l);color:var(--g990)}

/* ---------- primary buttons ---------- */
html[data-btn=violet] .btn-primary{background:var(--v600)}
html[data-btn=violet] .btn-primary::before{background:linear-gradient(135deg,var(--v700),var(--v500))}
html[data-btn=violet] .btn-primary:hover{box-shadow:0 8px 28px color-mix(in srgb,var(--v500) 35%,transparent)}
html[data-btn=grad] .btn-primary{background:var(--grad-d)}
html[data-btn=grad] .btn-primary::before{background:linear-gradient(135deg,var(--v600),var(--g500))}

/* ---------- atmosphere: a violet glow beside the green one ---------- */
html[data-glow=duo] .phero::before{background:radial-gradient(55% 70% at 85% 0%,rgba(9,211,92,.20),transparent 60%),radial-gradient(45% 60% at 5% 100%,color-mix(in srgb,var(--v500) var(--vg),transparent),transparent 60%)}
html[data-glow=duo] .cta-band::before{background:radial-gradient(70% 90% at 90% 0%,rgba(9,211,92,.22),transparent 60%),radial-gradient(55% 80% at 0% 100%,color-mix(in srgb,var(--v500) var(--vg),transparent),transparent 60%)}
html[data-glow=duo] .bspec::before{background:radial-gradient(50% 80% at 100% 0%,rgba(9,211,92,.16),transparent 60%),radial-gradient(50% 90% at 0% 100%,color-mix(in srgb,var(--v500) var(--vg),transparent),transparent 60%)}
html[data-glow=duo] .mock-float .ic,html[data-glow=duo] .fab .ic{background:var(--grad-d)}

/* ---------- footer line ---------- */
.ftr{position:relative}
html[data-ftr=grad] .ftr::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--grad)}

/* ---------- road: from Excel (green) to the system (violet) ---------- */
#rdGrad stop:first-child{stop-color:#09D35C}#rdGrad stop:last-child{stop-color:var(--v400)}
html[data-road=grad] #rdProg{stroke:url(#rdGrad);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--v500) 55%,transparent))}
html[data-road=grad] .dest .sign{background:linear-gradient(135deg,#072A22,var(--v950));box-shadow:inset 0 0 0 3px var(--v950),inset 0 0 0 6px var(--v400),0 24px 60px color-mix(in srgb,var(--v500) 30%,transparent)}

/* ---------- AI = violet ---------- */
html[data-ai=violet] .spk{color:var(--v600)}
html[data-ai=violet] .pill.hi{background:color-mix(in srgb,var(--v500) 20%,transparent);border-color:color-mix(in srgb,var(--v300) 50%,transparent)}
html[data-ai=violet] .pill.hi i{background:var(--v400)}
html[data-ai=violet] .si.ai{background:linear-gradient(135deg,color-mix(in srgb,var(--v500) 35%,transparent),color-mix(in srgb,var(--v500) 8%,transparent));color:var(--v100);border-color:color-mix(in srgb,var(--v300) 40%,transparent)}
html[data-ai=violet] .aib{background:linear-gradient(135deg,var(--v600),var(--v400))}
html[data-ai=violet] .kcard.hl{border-color:var(--v400);box-shadow:0 0 0 3px color-mix(in srgb,var(--v500) 25%,transparent),0 10px 24px color-mix(in srgb,var(--v500) 22%,transparent)}
html[data-ai=violet] .aip{box-shadow:0 30px 70px rgba(0,0,0,.35),0 0 0 1.5px var(--v400)}
html[data-ai=violet] .aip-h{background:linear-gradient(135deg,var(--v950),var(--v800))}
html[data-ai=violet] .aip-h .sp{background:color-mix(in srgb,var(--v300) 20%,transparent);color:var(--v200)}
html[data-ai=violet] .aq{background:var(--v600)}
html[data-ai=violet] .athink i{background:var(--v500)}
html[data-ai=violet] .aa b{color:var(--v800)}
html[data-ai=violet] .adraft{border-color:var(--v200);background:var(--v50)}
html[data-ai=violet] .adraft small{color:var(--v700)}
html[data-ai=violet] .abtns span.ok{background:var(--v600);border-color:var(--v600)}
html[data-ai=violet] #ai{background:radial-gradient(60% 60% at 10% 10%,color-mix(in srgb,var(--v500) var(--vg),transparent),transparent 60%),radial-gradient(50% 50% at 95% 90%,rgba(9,211,92,.10),transparent 60%),color-mix(in srgb,var(--vb) 14%,#07060F)}
html[data-ai=violet] #ai .chap b{background:var(--v400);color:#fff}
html[data-ai=violet] .ait[aria-selected=true]{border-color:color-mix(in srgb,var(--v400) 60%,transparent);background:color-mix(in srgb,var(--v500) 12%,transparent)}
html[data-ai=violet] .ait .ic{color:var(--v300)}
html[data-ai=violet] .ait[aria-selected=true] .ic{background:var(--grad-d);color:#fff}
html[data-ai=violet] .ait .pg{background:var(--grad)}
html[data-ai=violet] .ai-demo-h .sp{background:linear-gradient(135deg,var(--v600),var(--v400))}
html[data-ai=violet] .ai-demo-h span i{background:var(--v500)}
html[data-ai=violet] .d-q{border-color:var(--v300);box-shadow:0 0 0 4px color-mix(in srgb,var(--v500) 12%,transparent)}
html[data-ai=violet] .hb-t i{background:linear-gradient(to left,var(--g400),var(--v500))}
html[data-ai=violet] .d-ins{background:var(--v50);color:var(--v900)}
html[data-ai=violet] .d-src .ic{background:var(--v50);color:var(--v700)}
html[data-ai=violet] .wave i{background:var(--v400)}
html[data-ai=violet] .d-acts span{color:var(--v700);background:var(--v50)}
html[data-ai=violet] .scan{background:linear-gradient(transparent,color-mix(in srgb,var(--v500) 25%,transparent),transparent);border-bottom-color:var(--v500)}
html[data-ai=violet] .d-draft{border-color:var(--v300)}
html[data-ai=violet] .d-draft small{color:var(--v700)}
html[data-ai=violet] .d-tag{color:var(--v700);background:var(--v50)}
html[data-ai=violet] .ai-pts svg{stroke:var(--v300)}
html[data-ai=violet] .phero.ai{background:color-mix(in srgb,var(--vb) 14%,#07060F)}
html[data-ai=violet] .phero.ai::before{background:radial-gradient(45% 60% at 90% 0%,rgba(9,211,92,.16),transparent 60%),radial-gradient(75% 90% at 10% 85%,color-mix(in srgb,var(--v500) calc(var(--vg) + 15%),transparent),transparent 60%)}
/* site assistant */
html[data-ai=violet] .cw-h{background:radial-gradient(120% 140% at 15% 0%,rgba(9,211,92,.25),transparent 55%),radial-gradient(120% 140% at 90% 100%,color-mix(in srgb,var(--v500) 55%,transparent),transparent 60%),linear-gradient(160deg,#0F3A3E,var(--v950))}
html[data-ai=violet] .cw-av::after{background:var(--v400);border-color:var(--v950)}
html[data-ai=violet] .cw-m.me{background:var(--v600)}
html[data-ai=violet] .cw-qr button{border-color:var(--v200);background:var(--v50);color:var(--v900)}
html[data-ai=violet] .cw-qr button:hover{background:var(--v600);border-color:var(--v600);color:#fff}
html[data-ai=violet] .cw-send{background:var(--grad-d)}
html[data-ai=violet] .fab .ic::after{border-color:var(--v400)}
/* builder */
html[data-ai=violet] .bmod.ai{border-color:var(--v200)}
html[data-ai=violet] .bmod.ai .mi{background:var(--v50);color:var(--v600)}
html[data-ai=violet] .bmod.ai[aria-pressed=true]{border-color:var(--v500);background:var(--v50)}
html[data-ai=violet] .bmod.ai[aria-pressed=true] .mi{background:var(--grad-d);color:#fff}
html[data-ai=violet] .bmod.ai[aria-pressed=true] .ck{background:var(--v600);border-color:var(--v600)}
html[data-ai=violet] .bapp .nav-it[data-id=ai] svg{stroke:var(--v300)}
html[data-ai=violet] .bm.me{background:var(--v600)}
html[data-ai=violet] .bai-in button{background:var(--grad-d)}
html[data-ai=violet] .bai-in input:focus{border-color:var(--v500)}
html[data-ai=violet] .bai .bchip:hover{border-color:var(--v500);color:var(--v700)}
html[data-ai=violet] .bm .abtns .ok{background:var(--v600)}
html[data-ai=violet] .bwa-chat .bai-d{border-color:var(--v400)}
html[data-ai=violet] .bwa-chat .bub small{color:var(--v700)}
html[data-ai=violet] .btoast .ti,html[data-ai=violet] .bbuild li svg,html[data-ai=violet] .bb-ic{background:var(--grad-d)}
html[data-ai=violet] .bb-bar i{background:var(--grad)}
html[data-ai=violet] .sp-bar i{background:var(--grad-l)}
html[data-ai=violet] .ind[aria-checked=true] .ii,html[data-ai=violet] .bstep-h>b{background:var(--grad-d)}
html[data-ai=violet] .blive i{background:var(--v400)}
html[data-ai=violet] .bburst i:nth-child(4n){background:var(--v400)}

/* ---------- colour story block (about) ---------- */
.cstory{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.cs{border-radius:22px;padding:26px;color:#fff;position:relative;overflow:hidden}
.cs.g{background:linear-gradient(150deg,var(--g600),var(--g950))}
.cs.v{background:linear-gradient(150deg,var(--v500),var(--v950))}
.cs small{font-family:var(--mono);font-size:12.5px;opacity:.75;direction:ltr;display:inline-block}
.cs b{display:block;font-size:24px;margin:6px 0 6px}
.cs span{font-size:15px;opacity:.85}
.cs-arr{display:grid;place-items:center;width:64px}
.cs-arr i{display:block;width:100%;height:6px;border-radius:6px;background:var(--grad)}
@media (max-width:760px){.cstory{grid-template-columns:1fr}.cs-arr{width:auto;height:30px}.cs-arr i{width:6px;height:100%;background:linear-gradient(var(--g500),var(--v500))}}

/* =====================================================================
   SCROLL-DRIVEN BRAND COLOUR
   The page starts green (data, Excel, the start) and becomes violet (technology, AI, now)
   as you scroll. site.js writes --p (0 → 1) on <html>; every brand token mixes by it.
   ===================================================================== */
:root{--p:0}
@supports (color:color-mix(in oklch,red 50%,blue)){
  :root{
    --k:calc(100% - var(--p) * 100%);
    --g50:color-mix(in oklch,#E8FBEF var(--k),#F3EEFF);
    --g100:color-mix(in oklch,#C6F5DA var(--k),#E6DCFF);
    --g200:color-mix(in oklch,#8FE9B4 var(--k),#CDBBFF);
    --g300:color-mix(in oklch,#54DA8B var(--k),#B69CFF);
    --g400:color-mix(in oklch,#1FC66B var(--k),#9877FF);
    --g500:color-mix(in oklch,#10A85A var(--k),#7B52F5);
    --g600:color-mix(in oklch,#0E9152 var(--k),#6A3FE6);
    --g700:color-mix(in oklch,#0C7344 var(--k),#5A2FCC);
    --g800:color-mix(in oklch,#0F5946 var(--k),#45239E);
    --g900:color-mix(in oklch,#0B4033 var(--k),#2E1870);
    --g950:color-mix(in oklch,#072A22 var(--k),#1A0E45);
    --g990:color-mix(in oklch,#04190F var(--k),#0E0726);
    --accent:color-mix(in oklch,#09D35C var(--k),#A58BFF);
  }
}

/* the logo is the one place that always shows the whole journey */
html[data-logo] .lg1{fill:#0E9152}
html[data-logo] .lg2{fill:url(#orvG)}
html[data-logo] .lg3{fill:#7B52F5}
html[data-logo] :is(.top.dark,.menu,.ftr,.on-dark) .lg1{fill:#6EE3A0}
html[data-logo] :is(.top.dark,.menu,.ftr,.on-dark) .lg2{fill:url(#orvGd)}
html[data-logo] :is(.top.dark,.menu,.ftr,.on-dark) .lg3{fill:#B69CFF}
#orvG stop:first-child{stop-color:#0E9152}#orvG stop:last-child{stop-color:#7B52F5}
#orvGd stop:first-child{stop-color:#6EE3A0}#orvGd stop:last-child{stop-color:#B69CFF}
html[data-logo] .names .bars i:nth-child(1){background:#0E9152}
html[data-logo] .names .bars i:nth-child(2){background:linear-gradient(to right,#0E9152,#7B52F5)}
html[data-logo] .names .bars i:nth-child(3){background:#7B52F5}
html[data-logo] .dark .names .bars i:nth-child(1){background:#6EE3A0}
html[data-logo] .dark .names .bars i:nth-child(2){background:linear-gradient(to right,#6EE3A0,#B69CFF)}
html[data-logo] .dark .names .bars i:nth-child(3){background:#B69CFF}
.cs.g{background:linear-gradient(150deg,#0E9152,#072A22)}
.cs-arr i{background:linear-gradient(to left,#10A85A,#7B52F5)}
#rdGrad stop:first-child{stop-color:#09D35C}

/* journey bar under the header: how far along the road from green to violet you are */
.top::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:linear-gradient(to left,#09D35C,#7B52F5);transform-origin:right;transform:scaleX(var(--p));opacity:.9;pointer-events:none}

/* =====================================================================
   CALM — "קודם פשוט. אחר כך חכם."
   Warm paper background, light page heads, softer type and shadows, less motion.
   ===================================================================== */
:root{
  --paper:#F7F6F2;--paper-2:#EFEDE6;--rule:#E4E1D8;
  --n50:#F7F6F2;--n100:#EFEDE6;--n200:#E4E1D8;--n300:#CFCAC0;
  --sh-sm:0 1px 2px rgba(30,28,20,.05);
  --sh-lg:0 8px 24px rgba(30,28,20,.07);
  --sh-xl:0 16px 44px rgba(30,28,20,.09);
}
body{background:var(--paper)}
.top{background:color-mix(in srgb,var(--paper) 88%,transparent)}

/* quieter headings */
.h2{font-weight:800;letter-spacing:-.025em;font-size:clamp(34px,4vw,56px)}
.bot .h2{font-size:clamp(38px,4.6vw,68px)}

/* less motion */
.rv{transform:translateY(16px);transition-duration:.7s}
.mock-float{animation:none}
.fab .ic::after{animation:none;opacity:0}
.blive i{animation:none}

/* ---------- light page heads ---------- */
.phero{background:var(--paper);color:var(--ink);padding:calc(var(--hdr) + 72px) 0 84px;border-bottom:1px solid var(--rule)}
.phero::before,.phero::after,html[data-glow] .phero::before{display:none}
.phero h1{font-weight:800;font-size:clamp(38px,4.6vw,66px);letter-spacing:-.03em;line-height:1.05}
.phero .lead{color:var(--n600)}
.crumbs{color:var(--n500)}
.crumbs a{color:var(--g700)}.crumbs a:hover{color:var(--ink)}
.phero .chap{background:#fff;border-color:var(--rule);color:var(--n700);box-shadow:none}
.phero .chap b{background:var(--g700);color:#fff}
.phero .gt-l,html[data-heads] .phero .gt-l{color:var(--g600)}
html[data-heads=violet] .phero .gt-l{color:var(--v600)}
.c-g{color:#0E9152}.c-v{color:#6A3FE6}
.dark .c-g{color:#6EE3A0}.dark .c-v{color:#B69CFF}
.phero .btn-light{background:var(--g700);color:#fff}
.phero .btn-light:hover{background:var(--g800);box-shadow:none}
.phero .btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--n300)}
.phero .btn-ghost:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.phero .pill{background:#fff;border-color:var(--rule);color:var(--n700)}
.phero .pill.hi{background:var(--g50);border-color:var(--g200);color:var(--g800)}
.phero .kv{background:#fff;border-color:var(--rule);color:var(--ink)}
.phero .kv h3{color:var(--g700)}.phero .kv dt{color:var(--n500)}
.phero .metric{background:#fff;border-color:var(--rule);box-shadow:none}
.phero .metric b{color:var(--g700)}.phero .metric span{color:var(--n700)}
.phero .mock{box-shadow:0 24px 60px rgba(30,28,20,.12),0 0 0 1px var(--rule)}
.phero.ai{background:var(--paper)}
html[data-ai] .phero.ai::before{display:none}

/* cards and blocks: hairlines instead of shadows */
.card2,.kv,.nsteps li,.metric,.qform,.bld-ctl{box-shadow:none;border-color:var(--rule)}
a.card2:hover{box-shadow:var(--sh-lg)}

/* concept line */
.concept{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:var(--n600)}
.concept i{width:26px;height:4px;border-radius:4px;background:linear-gradient(to left,#10A85A,#7B52F5)}
.brand-tag{font-size:12.5px;color:var(--n500);font-weight:500;margin-inline-start:10px;padding-inline-start:10px;border-inline-start:1px solid var(--rule);white-space:nowrap}
.top.dark .brand-tag{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.18)}
@media (max-width:1100px){.brand-tag{display:none}}

/* =====================================================================
   CALM II — no more dark blocks. Everything outside the opening film sits on paper.
   ===================================================================== */
/* dark sections become light */
.sec.dark,html[data-ai=violet] #ai{background:var(--paper-2);color:var(--ink)}
.dark .chap,html[data-ai] #ai .chap{background:#fff;border-color:var(--rule);color:var(--n700)}
.dark .chap b,html[data-ai=violet] #ai .chap b{background:var(--g700);color:#fff}
.dark .lead{color:var(--n600)}
.dark .c-g{color:#0E9152}.dark .c-v{color:#6A3FE6}
.dark .card2{background:#fff;border-color:var(--rule);color:var(--ink)}
.dark .card2 p,.dark .checks li span{color:var(--n600)}
.dark .names .row{color:var(--ink)}
html[data-logo] .dark .names .bars i:nth-child(1){background:#0E9152}
html[data-logo] .dark .names .bars i:nth-child(2){background:linear-gradient(to right,#0E9152,#7B52F5)}
html[data-logo] .dark .names .bars i:nth-child(3){background:#7B52F5}
.tline li{background:#fff;border-color:var(--rule)}
.tline small{color:var(--n500)}.tline span{color:var(--n600)}

/* AI section */
.ait,html[data-ai] .ait{color:var(--ink);border-color:var(--rule);background:#fff}
.ait:hover{border-color:var(--n300);background:#fff}
.ait[aria-selected=true],html[data-ai=violet] .ait[aria-selected=true]{background:#fff;border-color:var(--v400);box-shadow:var(--sh-lg)}
.ait .ic,html[data-ai=violet] .ait .ic{background:var(--paper-2);color:var(--v600)}
.ait span.d{color:var(--n600)}
.ai-demo{background:#fff;box-shadow:0 0 0 1px var(--rule),var(--sh-xl)}
.ai-pts div{background:#fff;border-color:var(--rule);color:var(--n700)}
.ai-pts b{color:var(--ink)}
html[data-ai=violet] .ai-pts svg{stroke:var(--v600)}

/* cost calculator result */
.out{background:#fff;color:var(--ink);border:1px solid var(--rule)}
.out::before{display:none}
.out-lbl,.days-lg{color:var(--n500)}
.out-row{color:var(--n700)}.out-money{color:var(--amber)}
.days i{background:var(--paper-2)}
.out-note{color:var(--n700)}.out-note b{color:var(--g700)}

/* road: a pale lane instead of asphalt, plain white signs */
#rdEdge{stroke:var(--rule)}
#rdBase{stroke:#EAE7DF}
#rdDash{stroke:#fff}
.sign{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--rule)}
.exit.reached .sign{box-shadow:0 0 0 2px var(--g500),var(--sh-lg)}
.ex-tab{color:var(--g700);box-shadow:0 0 0 1.5px var(--rule)}
.sign .to{color:var(--n600)}
.dest .sign,html[data-road=grad] .dest .sign{background:#fff;color:var(--ink);box-shadow:0 0 0 2px var(--v400),var(--sh-lg)}
.car{box-shadow:0 0 0 3px var(--g500),var(--sh-lg)}
.car::after{animation:none;opacity:0}

/* Roy */
.tools-h{background:var(--paper-2);color:var(--ink)}
.note{background:#fff;color:var(--ink);border:1px solid var(--rule)}
.note::before{display:none}
.note-q{color:var(--g100)}
.note-by{color:var(--g700)}
.note-by .av{background:var(--paper-2);color:var(--ink)}
.note .hl{color:var(--g700)}
.note .w{opacity:.22}

/* bot / contact */
.steps li{background:#fff;border-color:var(--rule)}
.steps li::before{background:var(--g700);color:#fff}
.steps span{color:var(--n600)}
.bot-alt{color:var(--n600)}.bot-alt a{color:var(--ink)}
.cb-form{background:#fff;border-color:var(--rule)}
.cb-form p{color:var(--n600)}
.cb-form input{background:var(--paper);border-color:var(--rule);color:var(--ink)}
.cb-form input::placeholder{color:var(--n400)}
.cb-msg.ok{color:var(--g700)}
.replay{color:var(--g700)}
.wa-phone{box-shadow:0 30px 70px rgba(30,28,20,.18)}

/* call-to-action bands */
.cta-band{background:#fff;color:var(--ink);border:1px solid var(--rule)}
.cta-band::before,html[data-glow] .cta-band::before{display:none}
.cta-band p{color:var(--n600)}
.cta-band .btn-light{background:var(--g700);color:#fff}
.cta-band .btn-ghost,.bot .btn-ghost,.sec.dark .btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--n300)}
.sec.dark .btn-light{background:var(--g700);color:#fff}

/* builder spec card */
.bspec{background:#fff;color:var(--ink);border:1px solid var(--rule)}
.bspec::before,html[data-glow] .bspec::before{display:none}
.sp-h small,.sp-cx small,.sp-ph small{color:var(--n500)}
.sp-ind{background:var(--paper-2);color:var(--g700)}
.sp-bar{background:var(--paper-2)}
.sp-m div{background:var(--paper);border-color:var(--rule)}
.sp-m b,html[data-ai=violet] .sp-m b{color:var(--g700);background:none;-webkit-text-fill-color:currentColor}
.sp-m span{color:var(--n600)}
.sp-ph span{background:var(--paper);border-color:var(--rule);color:var(--ink)}
.sp-ph div:first-child span{background:var(--g50);border-color:var(--g200);color:var(--g800)}
.sp-ph em{color:var(--n500)}
.sp-cta{border-color:var(--rule)}.sp-cta p{color:var(--n600)}
.btn-ghost-d{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--n300)}

/* footer on paper */
.ftr{background:var(--paper-2);color:var(--n600);border-top:1px solid var(--rule)}
.ftr .brand,.ftr h4{color:var(--ink)}
.ftr a{color:var(--n700)}.ftr a:hover{color:var(--ink)}
.ftr-bot{border-color:var(--rule)}
html[data-logo] .ftr .lg1{fill:#0E9152}
html[data-logo] .ftr .lg2{fill:url(#orvG)}
html[data-logo] .ftr .lg3{fill:#7B52F5}
.sec.dark::before,.sec.dark::after{display:none}
.dark .gt-l,html[data-heads] .dark .gt-l,html[data-heads] .dark .gt{color:var(--g600);background:none;-webkit-text-fill-color:currentColor}
html[data-logo] .ftr .brand svg .lg1{fill:#0E9152}
html[data-logo] .ftr .brand svg .lg2{fill:url(#orvG)}
html[data-logo] .ftr .brand svg .lg3{fill:#7B52F5}
.sec.dark .grad{background:none;color:var(--g600);-webkit-text-fill-color:currentColor}

/* =====================================================================
   STUDIO LAYER — paper, a visible spreadsheet grid, big two-tone English
   display titles with small Hebrew labels, light Hebrew body text,
   hairline cells, one colourful mesh block near the end.
   ===================================================================== */
:root{
  --font:'Assistant','Rubik',system-ui,sans-serif;
  --disp:'Outfit','Assistant',system-ui,sans-serif;
  --ink:#141414;--ink-2:rgba(20,20,20,.42);
  --line:rgba(20,20,20,.075);
  --mesh:radial-gradient(circle at 80% 20%,#1FC66B,transparent 52%),radial-gradient(circle at 30% 30%,#2FB3A6,transparent 50%),radial-gradient(circle at 25% 80%,#7B52F5,transparent 55%),radial-gradient(circle at 75% 85%,#4B2FD0,transparent 52%),#5A49D9;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
body{font-weight:400;font-size:17px;color:var(--ink)}
p,.lead,.body{font-weight:300}
.lead{color:var(--n700)}

/* ---------- the sheet: column lines behind every page (columns A–F) ---------- */
body::before{content:"";position:fixed;top:0;bottom:0;left:50%;width:min(1200px,calc(100% - 32px));transform:translateX(-50%);pointer-events:none;z-index:0;
  background:repeating-linear-gradient(to left,var(--line) 0 1px,transparent 1px calc(100% / 6));box-shadow:inset -1px 0 0 var(--line)}
main,.ftr{position:relative;z-index:1}
.sec,.sec.dark,html[data-ai=violet] #ai,.phero,.build{background:transparent}
.sec.dark{color:var(--ink)}
.cross{position:absolute;width:13px;height:13px;pointer-events:none}
.cross::before,.cross::after{content:"";position:absolute;background:var(--n400)}
.cross::before{left:6px;top:0;width:1px;height:13px}.cross::after{top:6px;left:0;width:13px;height:1px}

/* ---------- header: wordmark and text links, no pill ---------- */
.top{background:color-mix(in srgb,var(--paper) 90%,transparent);border-bottom:1px solid var(--line)}
.pnav,.top.dark .pnav{background:none;border:0}
.pnav .ind{display:none}
.pnav a{font-weight:500;color:var(--n600)}
.pnav a.on,.pnav a:hover{color:var(--ink)}
.pnav a.on{box-shadow:inset 0 -2px 0 var(--g600);border-radius:0}

/* ---------- section heads: small label, giant two-tone English, Hebrew headline ---------- */
.chap,.dark .chap,.phero .chap,html[data-ai] #ai .chap{display:inline-flex;align-items:baseline;gap:10px;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-size:15px;font-weight:400;color:var(--n700);margin-bottom:6px}
.chap b,.dark .chap b,.phero .chap b,html[data-chap] .chap b,html[data-ai=violet] #ai .chap b{background:none;color:var(--n500);padding:0;min-width:0;height:auto;border-radius:0;font-family:var(--mono);font-size:11px;font-weight:500}
.chap .en{display:none}
.disp{margin:0 0 26px;font-family:var(--disp);font-weight:400;font-size:clamp(46px,6.4vw,92px);line-height:.98;letter-spacing:-.035em;color:var(--ink-2);direction:ltr;text-align:right;unicode-bidi:isolate}
.disp span{color:var(--ink)}
.disp i{font-style:normal;color:var(--g600)}
.phero .disp{font-size:clamp(50px,7vw,104px)}
.h2,.phero h1{font-family:var(--font);font-weight:700;font-size:clamp(28px,2.7vw,40px);line-height:1.18;letter-spacing:-.01em;color:var(--ink)}
.phero h1{font-size:clamp(30px,3.2vw,46px)}
.h2 span,.h2 .gt,.h2 .gt-l,.h2 .grad,.phero h1 span,.phero h1 .gt-l,html[data-heads] .phero .gt-l,html[data-heads] .gt,.sec.dark .grad,.dark .gt-l{font-weight:300;color:var(--ink)!important;background:none!important;-webkit-text-fill-color:currentColor!important}
.h2 .c-g,.h2 .c-v{font-weight:700}
.h2 .c-v{font-weight:300;color:var(--ink)!important}
.sec-head{margin-bottom:56px}
.bot .h2{font-size:clamp(30px,3vw,44px)}

/* ---------- cells instead of floating cards ---------- */
.cards{gap:0;border-top:1px solid var(--n300);border-inline-start:1px solid var(--n300);counter-reset:c}
.card2,.dark .card2{counter-increment:c;border-radius:0;border:0;border-bottom:1px solid var(--n300);border-inline-end:1px solid var(--n300);background:color-mix(in srgb,var(--paper) 70%,transparent);box-shadow:none;padding:30px 28px 34px}
.card2 .ic{display:none}
.card2::before{content:counter(c,decimal-leading-zero);display:block;font-family:var(--disp);font-weight:300;font-size:44px;line-height:1;color:var(--ink-2);margin-bottom:40px}
.card2:has(.shot)::before{display:none}
.card2 h3{font-size:21px;font-weight:700}
.card2 p{font-weight:300}
a.card2:hover,.dark a.card2:hover{background:#fff;transform:none;box-shadow:none}
a.card2:hover::before{color:var(--g600)}
.nsteps{gap:0;border-top:1px solid var(--n300)}
.nsteps li{border-radius:0;border:0;border-bottom:1px solid var(--n300);border-inline-end:1px solid var(--n300);background:transparent;box-shadow:none}
.nsteps li::before{content:counter(n,decimal-leading-zero);display:block;width:auto;height:auto;background:none;color:var(--ink-2);font-family:var(--disp);font-weight:300;font-size:40px;margin-bottom:28px}
.nsteps li:first-child{border-inline-start:1px solid var(--n300)}
.checks li::before{border-radius:50%}

/* ---------- FAQ as a sheet of cells ---------- */
.faq-grid{grid-template-columns:1fr;gap:0}
.faq-side{position:static}
.faq-grid>div:last-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n300);border-inline-start:1px solid var(--n300);counter-reset:q;align-items:stretch}
.faq .qa{border:0;border-bottom:1px solid var(--n300);border-inline-end:1px solid var(--n300);counter-increment:q;padding:18px 22px 6px;position:relative;background:color-mix(in srgb,var(--paper) 70%,transparent)}
.faq .qa::before{content:counter(q,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--n500)}
.faq .qa button{padding:14px 0 18px;font-size:18px;font-weight:600;align-items:flex-start}
.faq .qa .pm{width:22px;height:22px;border:0}
.faq .qa .pm::before,.faq .qa .pm::after{width:11px;height:1.5px}
.faq .qa.open{background:#fff}
.faq .qa.open .pm{background:none;color:var(--g600)}
.faq .qa .ans p{font-size:15.5px;margin-bottom:18px}

/* ---------- manifesto: the motto, selected like a cell ---------- */
.mani{position:relative;padding:150px 0 160px;text-align:center}
.mani-in{position:relative;display:inline-block;padding:60px 70px}
.mani .cross{}
.mani .cross.a{top:0;right:0}.mani .cross.b{top:0;left:0}.mani .cross.c{bottom:0;right:0}.mani .cross.d{bottom:0;left:0}
.mani h2{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(46px,7vw,108px);line-height:1;letter-spacing:-.04em;color:var(--ink-2);direction:ltr}
.mani h2 span{position:relative;display:inline-block;color:var(--ink);padding:0 .08em}
.mani .sel{position:absolute;inset:-.06em -.04em -.12em;border:2px solid var(--g600);pointer-events:none;transform-origin:left center;transform:scaleX(0);transition:transform .9s var(--ease) .3s}
.mani.in .sel{transform:none}
.mani .sel::after{content:"";position:absolute;right:-5px;bottom:-5px;width:9px;height:9px;background:var(--g600);border:2px solid var(--paper)}
.mani .nbox{position:absolute;bottom:-32px;left:-2px;font-family:var(--mono);font-size:12px;font-weight:500;color:#fff;background:var(--g700);padding:3px 8px;border-radius:4px;opacity:0;transition:opacity .4s 1s}
.mani.in .nbox{opacity:1}
.mani .fx{position:absolute;top:-82px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:0;border:1px solid var(--n300);border-radius:8px;background:#fff;font-family:var(--mono);font-size:13px;color:var(--n700);direction:ltr;white-space:nowrap;box-shadow:var(--sh-sm)}
.mani .fx b{padding:6px 10px;border-inline-end:1px solid var(--n300);font-style:italic;font-family:Georgia,serif;color:var(--n500)}
.mani .fx span{padding:6px 12px}
.mani p.sub{margin:30px auto 0;max-width:470px;font-size:18px;font-weight:300;color:var(--n700)}
.mani .cur{position:absolute;right:-10px;bottom:-26px;display:flex;align-items:flex-start;gap:2px;pointer-events:none;animation:curMove 6s var(--ease) infinite alternate}
.mani .cur svg{width:18px;height:18px}
.mani .cur em{font-style:normal;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(120deg,#10A85A,#7B52F5);padding:2px 8px;border-radius:6px;margin-top:12px}
@keyframes curMove{to{transform:translate(-40px,-14px)}}
.mani .tag{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--n300);background:#fff;font-size:14px;font-weight:600;color:var(--n700);box-shadow:var(--sh-sm)}
.mani .tag i{width:7px;height:7px;border-radius:50%;background:var(--g500)}
.mani .tag.v i{background:#7B52F5}
.mani .t1{top:70px;right:6%}.mani .t2{top:90px;left:5%}.mani .t3{bottom:70px;right:9%}.mani .t4{bottom:60px;left:8%}
@media (max-width:760px){.mani{padding:110px 0}.mani-in{padding:40px 10px}.mani .tag{display:none}.mani .fx{top:-60px;font-size:11px}}

/* ---------- rotating seal ---------- */
.seal{position:absolute;width:132px;height:132px;pointer-events:none}
.seal svg{width:100%;height:100%;animation:spin 22s linear infinite;direction:ltr;overflow:visible}
.seal text{font-family:var(--disp);font-size:10.5px;letter-spacing:.32em;fill:var(--ink);text-transform:uppercase}
.seal i{position:absolute;inset:38px;border-radius:50%;background:var(--mesh)}
@keyframes spin{to{transform:rotate(360deg)}}
.road .seal{top:40px;left:2%}
@media (max-width:760px){.seal{display:none}}

/* ---------- the one colourful block: closing call to action ---------- */
.cta-band{background:var(--mesh);color:#fff;border:0;border-radius:28px;isolation:isolate}
.cta-band::after{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:overlay;opacity:.6;pointer-events:none;border-radius:inherit}
.cta-band h2{font-family:var(--disp);font-weight:400;letter-spacing:-.03em;font-size:clamp(34px,4vw,58px);color:#fff}
.cta-band p{color:rgba(255,255,255,.85);font-weight:300}
.cta-band .btn-light{background:#fff;color:var(--ink)}
.cta-band .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
#bot{padding-bottom:110px}

/* ---------- smaller details ---------- */
.mock-float,.note-q{display:none}
.btn{border-radius:999px}
.btn-primary,.btn-wa{box-shadow:none}
.btn-primary:hover,.btn-wa:hover{box-shadow:none;transform:none}
.kv,.metric,.qform,.bspec,.bld-ctl,.note,.out,.ai-demo,.tline li,.ait,.sign,.cb-form{border-radius:18px}
.ftr{background:transparent;border-top:1px solid var(--n300)}
.ftr::before{display:none}
@media (max-width:1020px){.faq-grid>div:last-child{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .faq-grid>div:last-child{grid-template-columns:1fr}
  .disp{font-size:clamp(40px,12vw,60px)}
  body::before{width:calc(100% - 32px);background:repeating-linear-gradient(to left,var(--line) 0 1px,transparent 1px calc(100% / 3))}
}

/* ---------- white page, wide open graph grid ---------- */
:root{--paper:#FFFFFF;--paper-2:#FAFAFA;--rule:#E6E6E6;--n50:#FAFAFA;--n100:#F3F3F3;--n200:#E8E8E8;--n300:#DADADA;--line:#EFEFEF}
body{background:#fff}
body::before{left:0;right:0;width:auto;transform:none;box-shadow:none;
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:180px 180px;background-position:center top}
@media (max-width:760px){body::before{width:auto;background-size:120px 120px;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px)}}
.top{background:rgba(255,255,255,.9)}
.card2,.dark .card2,.faq .qa{background:rgba(255,255,255,.85)}

/* grey half of the English display titles → violet */
.disp,.mani h2{color:#7B52F5}

/* =====================================================================
   ROY TECH — the R-and-dot mark, the wordmark and the loading screen
   ===================================================================== */
.mk{overflow:visible}
.lgS{stroke:#7B52F5}.lgD{fill:#7B52F5}
:is(.top.dark,.menu,.on-dark,.cw-av,.app-nav) .lgS{stroke:#B69CFF}
:is(.top.dark,.menu,.on-dark,.cw-av,.app-nav) .lgD{fill:#B69CFF}
.brand svg.mk,.brand .mk{width:auto;height:30px}
.sys-brand svg.mk{width:auto;height:20px}
.app-nav .nl .mk{width:auto;height:18px}
.cw-av .mk{width:auto;height:60%}
.mk.big{width:min(260px,60vw);height:auto}
.brand b{font-family:var(--disp,'Outfit'),system-ui,sans-serif;font-weight:500;font-size:22px;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.brand b span{font-weight:300;color:var(--n500)}
.top.dark .brand b,.menu .brand b{color:#fff}.top.dark .brand b span,.menu .brand b span{color:rgba(255,255,255,.6)}

/* loading screen */
html.is-loading{overflow:hidden}
.pre{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#fff;transition:opacity .5s ease,visibility .5s}
.pre svg{width:132px;height:auto;overflow:visible}
.pre.out{opacity:0;visibility:hidden}
.brand{direction:ltr}

/* no chapter labels */
.chap,.dark .chap,.phero .chap,html[data-ai] #ai .chap{display:none!important}

/* ---------- CMS-fed bits ---------- */
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.shots figure.shot{margin:0;border:1px solid var(--n200);border-radius:14px;overflow:hidden;background:#fff}
.shots figure.shot img{display:block;width:100%;height:auto}
.shots figure.shot figcaption{padding:10px 14px;font-size:14px;color:var(--n600)}
.card2 .shot img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- industry: feature rows with screenshots ---------- */
.frows{display:grid;gap:clamp(36px,6vw,72px);margin:8px 0 clamp(36px,5vw,56px)}
.frow{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.frow.flip .frow-img{order:2}
.frow-img{margin:0;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--n200);box-shadow:0 1px 0 rgba(16,24,40,.03),0 24px 48px -28px rgba(40,24,90,.28);cursor:zoom-in}
.frow-img img{display:block;width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.frow-img:hover img{transform:scale(1.015)}
.frow-tx .ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:color-mix(in oklch,var(--accent,#7B52F5) 12%,#fff);color:var(--accent,#7B52F5);margin-bottom:16px}
.frow-tx h3{font-size:clamp(22px,2.4vw,28px);line-height:1.2;margin:0 0 10px;color:var(--ink)}
.frow-tx p{margin:0;color:var(--n600);font-size:17px;line-height:1.65}
.frow-pts{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.frow-pts li{position:relative;padding-inline-start:22px;color:var(--ink);font-size:16px}
.frow-pts li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent,#7B52F5)}
@media (max-width:820px){.frow{grid-template-columns:1fr}.frow.flip .frow-img{order:0}}

/* ---------- screenshot gallery + lightbox ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
.gal-it{margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--n200);cursor:zoom-in}
.gal-it img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gal-it:hover img{transform:scale(1.03)}
.gal-it figcaption{padding:11px 14px;font-size:14px;color:var(--n600);border-top:1px solid var(--n200)}
.shots figure.shot{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:9999;background:rgba(12,10,24,.86);display:grid;place-items:center;padding:56px 16px 24px;opacity:0;transition:opacity .2s}
.lb.on{opacity:1}
.lb figure{margin:0;display:grid;gap:12px;justify-items:center;max-width:min(1400px,96vw)}
.lb img{max-width:100%;max-height:82vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);background:#fff}
.lb figcaption{color:#fff;font-size:15px;text-align:center}
.lb button{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;width:44px;height:44px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb .lb-x{top:14px;inset-inline-end:14px}
.lb .lb-p{inset-inline-start:14px;top:50%}
.lb .lb-n{inset-inline-end:14px;top:50%}


/* ---------- purple dot instead of 01/02 numbering ---------- */
.card2::before{content:"";width:10px;height:10px;border-radius:50%;background:#7B52F5;font-size:0;margin-bottom:30px;box-shadow:0 0 0 5px rgba(123,82,245,.12)}
.faq .qa::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:#7B52F5;margin:4px 0 2px}
.menu .mi span{font-size:0!important;width:9px;height:9px;min-width:0;padding:0;border-radius:50%;background:#7B52F5;display:inline-block;vertical-align:middle}

/* ---------- flowing-lines background (replaces the hexagons), drifting very slowly ---------- */
body::before{left:0;right:-1600px;width:auto;transform:translate3d(0,0,0);box-shadow:none;will-change:transform;
  background-image:url("/assets/bg-flow.svg");background-size:1600px 1200px;background-position:left top;background-repeat:repeat;
  animation:bgFlow 240s linear infinite}
@keyframes bgFlow{to{transform:translate3d(-1600px,0,0)}}
@media (max-width:760px){body::before{right:-1000px;background-size:1000px 750px;animation-name:bgFlowM;animation-duration:180s}}
@keyframes bgFlowM{to{transform:translate3d(-1000px,0,0)}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

/* ---------- manifesto: live "spreadsheet" scene ---------- */
.mani h2 .ln{display:block}
.mani h2 .w{position:relative;display:inline-block;padding:0 .04em;color:#7B52F5;transition:color .45s ease}
.mani h2 .w.on{color:var(--ink)}
.mani.js h2 .w{opacity:0;transform:translateY(.35em);filter:blur(8px)}
.mani.js.in h2 .w{opacity:1;transform:none;filter:none;transition:opacity .7s ease var(--wd,0s),transform .9s cubic-bezier(.2,.8,.2,1) var(--wd,0s),filter .7s ease var(--wd,0s),color .45s ease}
.mani .sel{position:absolute;inset:auto;left:0;top:0;width:0;height:0;border:2px solid var(--g600);transform:none;pointer-events:none;opacity:0;z-index:2;
  transition:left .7s cubic-bezier(.34,1.45,.5,1),top .7s cubic-bezier(.34,1.45,.5,1),width .7s cubic-bezier(.34,1.45,.5,1),height .7s cubic-bezier(.34,1.45,.5,1),opacity .4s,border-color .5s,background-color .5s}
.mani.in .sel{opacity:1;transform:none}
.mani .sel.drag{border-style:dashed;background:rgba(123,82,245,.06);border-color:#7B52F5}
.mani .sel.flash{background:rgba(123,82,245,.12);border-color:#7B52F5}
.mani .sel::after{transition:background .5s}
.mani .sel.flash::after,.mani .sel.drag::after{background:#7B52F5}
.mani .sel b{position:absolute;left:-2px;bottom:-30px;font:500 12px/1 var(--mono);color:#fff;background:var(--g700);padding:4px 8px;border-radius:4px;white-space:nowrap;transition:background .5s}
.mani .sel.flash b{background:#7B52F5}
.mani .fx span{min-width:15ch;text-align:left}
.mani .fx span::after{content:"";display:inline-block;width:1.5px;height:1.05em;background:var(--ink);vertical-align:-.15em;margin-left:1px;animation:fxBlink 1s steps(1) infinite}
@keyframes fxBlink{50%{opacity:0}}
.mani .cur.live{animation:none;right:auto;bottom:auto;left:0;top:0;z-index:3;transition:transform .85s cubic-bezier(.65,0,.25,1)}
.mani .cur.live svg{transition:transform .15s}
.mani .cur.click svg{transform:scale(.78)}
.mani .spark{position:absolute;width:7px;height:7px;border-radius:50%;background:#7B52F5;pointer-events:none;z-index:2}
.mani .tag{transition:translate .6s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.mani .tag{animation:tagBob 5.5s ease-in-out infinite}
.mani .t2{animation-duration:6.4s;animation-delay:-2s}.mani .t3{animation-duration:7s;animation-delay:-1s}.mani .t4{animation-duration:6s;animation-delay:-3s}
@keyframes tagBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.mani .tag.ping{border-color:#7B52F5;box-shadow:0 0 0 6px rgba(123,82,245,.12),var(--sh-sm)}
.mani .tag.ping i{animation:tagDot .9s ease}
@keyframes tagDot{40%{transform:scale(2.2)}}
.mani .cross{transition:translate .6s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.mani .tag{animation:none}.mani.js h2 .w{opacity:1;transform:none;filter:none}}

/* ---------- FAQ page: ask the AI ---------- */
.ask-sec{padding-bottom:0}
.ask{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--n300);border-radius:22px;padding:clamp(22px,4vw,36px);box-shadow:0 30px 60px -40px rgba(60,30,140,.35);position:relative;overflow:hidden}
.ask::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#7B52F5,#B69CFF 60%,#54DA8B)}
.ask-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px}
.ask-ic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(123,82,245,.1);color:#7B52F5}
.ask-head h2{margin:0 0 4px;font-size:clamp(22px,2.6vw,28px);line-height:1.2;color:var(--ink)}
.ask-head p{margin:0;color:var(--n600)}
.ask-f{display:flex;gap:10px;align-items:stretch}
.ask-f textarea{flex:1;resize:none;min-height:56px;font:inherit;font-size:17px;padding:15px 18px;border:1.5px solid var(--n300);border-radius:14px;background:#FCFBFF;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.ask-f textarea:focus{outline:0;border-color:#7B52F5;box-shadow:0 0 0 4px rgba(123,82,245,.14)}
.ask-f .btn{flex:none;align-self:stretch;border-radius:14px;padding-inline:24px;background:#7B52F5;border-color:#7B52F5;color:#fff}
.ask-f .btn svg{transform:scaleX(-1)}
.ask-f .btn:disabled{opacity:.6}
.ask-sug{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ask-chip{font:inherit;font-size:14px;border:1px solid var(--n300);background:#fff;color:var(--n700);padding:7px 13px;border-radius:999px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.ask-chip:hover{border-color:#7B52F5;color:#7B52F5;background:rgba(123,82,245,.05)}
.ask-out{margin-top:22px;padding-top:20px;border-top:1px dashed var(--n300)}
.ask-a{font-size:17px;line-height:1.75;color:var(--ink)}
.ask-a p{margin:0 0 10px}.ask-a ul{margin:0 0 10px;padding-inline-start:20px}
.ask-a .aw{opacity:0;transition:opacity .3s}.ask-a .aw.in{opacity:1}
.ask-dots{display:flex;gap:6px;margin:6px 0}
.ask-dots i{width:8px;height:8px;border-radius:50%;background:#7B52F5;animation:askDot 1s ease-in-out infinite}
.ask-dots i:nth-child(2){animation-delay:.15s}.ask-dots i:nth-child(3){animation-delay:.3s}
@keyframes askDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.ask-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:12px}
.ask-foot small{color:var(--n500);font-size:13px}
.ask-out.busy .ask-foot{opacity:.4}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:600px){.ask-f{flex-direction:column}.ask-f .btn{justify-content:center;min-height:50px}}

/* ---------- links: the card's dot drops onto the link and floods it (site.js) ---------- */
.arr{display:inline-flex;align-items:center;margin-inline-start:10px;transform:none!important}
.arr svg{display:block;width:18px;height:10px;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.card2:has(.cdot)::before{display:none}
.cdot{display:block;width:10px;height:10px;border-radius:50%;background:#7B52F5;margin-bottom:30px;box-shadow:0 0 0 5px rgba(123,82,245,.12);transition:opacity .15s,transform .2s}
.card2{position:relative}.card2 .shot+.cdot{margin:18px 0 14px}
.card2.dot-out .cdot{opacity:0;transform:scale(.4)}
.card2 .more,.lnk{position:relative;display:inline-flex;align-items:center;padding:7px 16px;margin-inline:-16px;isolation:isolate;color:var(--ink);font-weight:700;transition:color .18s ease}
.card2 .more{align-self:flex-start;margin-top:auto}
.card2 .more::before,.lnk::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;background:#7B52F5;
  clip-path:circle(0px at var(--ox,calc(100% - 14px)) 50%);transition:clip-path .26s cubic-bezier(.3,.7,.2,1)}
a.card2.fill .more,.lnk:hover,.lnk:focus-visible,a.card2:focus-visible .more{color:#fff}
a.card2.fill .more::before,.lnk:hover::before,.lnk:focus-visible::before,a.card2:focus-visible .more::before{clip-path:circle(150% at var(--ox,calc(100% - 14px)) 50%)}
a.card2.fill .more .arr svg,.lnk:hover .arr svg{transform:translateX(-3px)}
.fly-dot{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:999px;background:#7B52F5;pointer-events:none;z-index:3;transform-origin:50% 50%}
a.card2 .more::before{transition:none}
a.card2 .more{z-index:1}
a.card2.txt .more{color:#fff;transition:color .25s ease .05s}
a.card2.txt .more .arr svg{transform:translateX(-3px)}
@media (prefers-reduced-motion:reduce){.card2 .more::before,.lnk::before{transition:none}}

/* ---------- display titles: letters split into violet/green near the cursor ---------- */
.disp .ch{display:inline-block;will-change:transform,text-shadow;transform-style:preserve-3d;backface-visibility:hidden}
/* home form now has three fields */
.cb-form label{flex:1 1 140px}
.cb-form label:has(input[type=email]){flex:2 1 260px}
.cb-form .btn{flex:1 1 120px}
input[type=email]:placeholder-shown{direction:rtl}
.card2 .more{align-self:flex-start;margin-top:auto}
.disp .ch,#bot .disp .ch{color:inherit}

/* home film: the opening card is centred */
.h1box{text-align:center;align-items:center}
.h1box .tag{align-self:center}
.h1box p{margin-inline:auto}
.h1box .hint{align-self:center;justify-content:center}

/* home film – last part: light violet, "we're in the system now" */
.st-glow-v{opacity:0;background:radial-gradient(55% 60% at 70% 45%,rgba(123,82,245,.20),transparent 65%),radial-gradient(45% 50% at 15% 80%,rgba(182,156,255,.30),transparent 62%),radial-gradient(40% 40% at 90% 90%,rgba(84,218,139,.10),transparent 60%)}
.hero .h3box{transition:color .35s}
.hero.lite .h3box{color:var(--ink)}
.hero.lite .h3box p{color:var(--n700)}
.hero.lite .h3box .k{color:#5B33D6;border-color:rgba(123,82,245,.35);background:rgba(123,82,245,.08)}
.hero.lite .h3box h2 .grad{background:linear-gradient(90deg,#7B52F5,#A57BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.lite .h3box .btn-wa{background:#7B52F5;border-color:#7B52F5;color:#fff}
.hero.lite .h3box .btn-ghost{color:var(--ink);border-color:rgba(20,20,40,.22);background:rgba(255,255,255,.6)}
.hero.lite .notif .ic{background:linear-gradient(135deg,#7B52F5,#A57BFF)}
.hero.lite .sc-fill{background:linear-gradient(to left,#7B52F5,#A57BFF)}
.hero.lite .sc-head{box-shadow:0 0 0 4px rgba(123,82,245,.35)}
.hero.lite .sc-play{background:#7B52F5;color:#fff}
.hero.lite .sc-ch{color:#CDBBFF}
.disp .wd{display:inline-block;white-space:nowrap}
.disp .wd,#bot .disp .wd{color:inherit}

/* ===== home, refocused ===== */
/* the film is one screen and plays by itself */
.hero{height:100vh;height:100svh}
.sc-play{border:0;cursor:pointer;padding:0;pointer-events:auto}
.sc-play svg{display:none}
.sc-play:not(.is-playing):not(.is-ended) .i-play,.sc-play.is-playing .i-pause,.sc-play.is-ended .i-again{display:block}
.more-row{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:30px}
/* proof */
.proof-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.proof .proof-note{margin:0;max-width:none}
.proof .proof-note blockquote{font-size:clamp(20px,2vw,27px);line-height:1.55}
@media (max-width:860px){.proof-grid{grid-template-columns:1fr}}
/* how we work: three steps in one row */
.hsteps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.hsteps::before{content:"";position:absolute;top:6px;inset-inline:6px;height:2px;background:linear-gradient(to left,#54DA8B,#7B52F5)}
.hsteps li{position:relative;padding-top:34px;padding-inline-end:clamp(16px,3vw,40px)}
.hs-dot{position:absolute;top:0;inset-inline-start:0;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #7B52F5;box-shadow:0 0 0 6px rgba(123,82,245,.1)}
.hsteps li:first-child .hs-dot{border-color:#54DA8B;box-shadow:0 0 0 6px rgba(84,218,139,.14)}
.hsteps b{display:block;font-size:clamp(19px,1.8vw,23px);color:var(--ink);margin-bottom:8px}
.hsteps span{color:var(--n600);line-height:1.6}
@media (max-width:760px){.hsteps{grid-template-columns:1fr;gap:26px}.hsteps::before{top:6px;bottom:6px;inset-inline:6px auto;width:2px;height:auto;background:linear-gradient(#54DA8B,#7B52F5)}
  .hsteps li{padding:0;padding-inline-start:36px}}
/* demo page */
.demo-page{padding-top:clamp(70px,8vw,96px)}
.tool-page>.sec{padding-top:clamp(10px,2vw,24px);border-top:0!important;box-shadow:none}
.tool-page>.sec::before{display:none}
.lnk,.lnk:hover{text-decoration:none}

/* "let's get organized": plain section, one column */
#bot .bot-grid{display:block;max-width:820px}
#bot .cb-form{max-width:640px}
#bot h2 .grad{color:#7B52F5;-webkit-text-fill-color:#7B52F5;background:none}#bot .steps b{color:var(--ink)}

/* ---------- film captions: a glass card with a label, a clear headline and a subline ---------- */
.cap{left:auto;right:clamp(16px,3vw,44px);bottom:96px;transform:none;width:min(430px,calc(100% - 32px));max-width:none;text-align:right;transition:none}
.cap>span{display:none}
.cap-card{position:relative;display:grid;gap:4px;padding:16px 20px 17px;padding-inline-start:24px;border-radius:18px;
  background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 50px -18px rgba(20,12,60,.45),0 2px 6px rgba(20,12,60,.08);overflow:hidden}
.cap-card::before{content:"";position:absolute;inset-block:14px;inset-inline-start:0;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(#54DA8B,#7B52F5)}
.cap-card small{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.02em;color:#7B52F5}
.cap-card small i{width:7px;height:7px;border-radius:50%;background:#7B52F5;box-shadow:0 0 0 4px rgba(123,82,245,.14)}
.cap-card b{font-size:clamp(19px,1.8vw,25px);line-height:1.25;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.cap-s{font-size:14.5px;line-height:1.5;color:var(--n600)}
.cap.swap .cap-card>*{animation:capIn .6s cubic-bezier(.2,.8,.2,1) both}
.cap.swap .cap-card>b{animation-delay:.06s}.cap.swap .cap-card>.cap-s{animation-delay:.14s}
@keyframes capIn{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@media (max-width:720px){.cap{right:12px;left:12px;width:auto;bottom:84px}.cap-card{padding:12px 16px 13px;padding-inline-start:20px}.cap-card b{font-size:18px}.cap-s{font-size:13px}}
@media (prefers-reduced-motion:reduce){.cap.swap .cap-card>*{animation:none}}

/* ---------- FAQ ask box: one field with a round send button ---------- */
.ask-f{position:relative;display:flex;align-items:flex-end;gap:8px;padding:6px;border:1.5px solid var(--n300);border-radius:18px;background:#FCFBFF;transition:border-color .2s,box-shadow .2s}
.ask-f:focus-within{border-color:#7B52F5;box-shadow:0 0 0 4px rgba(123,82,245,.14)}
.ask-f textarea{border:0!important;background:transparent!important;box-shadow:none!important;padding:12px 12px;min-height:52px}
.ask-send{flex:none;width:44px;height:44px;margin:2px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:#7B52F5;
  box-shadow:0 6px 16px -6px rgba(123,82,245,.7);transition:transform .2s cubic-bezier(.34,1.6,.5,1),background .2s,opacity .2s}
.ask-send:hover{transform:translateY(-2px);background:#6A40EE}
.ask-send:active{transform:scale(.94)}
.ask-send:disabled{opacity:.5;cursor:default;transform:none}
@media (max-width:600px){.ask-f{flex-direction:row}}
.cap .cap-card span{display:inline;background:none;padding:0;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:inherit;font:inherit;line-height:inherit}
.cap .cap-card .cap-s{display:block;font-size:14.5px;line-height:1.5;font-weight:500;color:var(--n600)}
.cap .cap-card .cap-s[hidden]{display:none}
@media (max-width:720px){.cap .cap-card .cap-s{font-size:13px}}

/* ===== round from the video walkthrough ===== */
/* reveals: quicker, so text is settled before it reaches the middle of the screen */
.rv{transition-duration:.55s,.55s;transform:translateY(14px)}
.rv.in{transform:none}

/* standalone text links: violet text + arrow, no pill */
.lnk{color:#7B52F5;padding:4px 0;margin:0;font-weight:700}
.lnk::before{display:none}
.lnk:hover,.lnk:focus-visible{color:#5B33D6;padding:4px 0}
.lnk .arr svg{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.lnk:hover .arr svg{transform:translateX(-4px)}
.faq-side .more-row{margin-top:18px}

/* home "let's get organized": the form is as wide as the steps */
#bot .cb-form{max-width:none}

/* home "how we work": the line draws in, dots pop, a pulse keeps travelling */
.hsteps::before{transform:scaleX(0);transform-origin:right center;transition:transform 1.1s cubic-bezier(.65,0,.25,1) .15s}
.hsteps.in::before{transform:scaleX(1)}
.hsteps .hs-dot{transform:scale(0);transition:transform .5s cubic-bezier(.34,1.7,.5,1)}
.hsteps.in li:nth-child(1) .hs-dot{transform:scale(1);transition-delay:.25s}
.hsteps.in li:nth-child(2) .hs-dot{transform:scale(1);transition-delay:.65s}
.hsteps.in li:nth-child(3) .hs-dot{transform:scale(1);transition-delay:1.05s}
.hsteps::after{content:"";position:absolute;top:2px;inset-inline-start:0;width:10px;height:10px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px #7B52F5,0 0 18px 4px rgba(123,82,245,.55);opacity:0}
.hsteps.in::after{animation:hsPulse 3.6s cubic-bezier(.45,0,.55,1) 1.4s infinite}
@keyframes hsPulse{0%{inset-inline-start:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{inset-inline-start:calc(100% - 10px);opacity:0}}
.hsteps li{transition:transform .3s}
.hsteps li:hover .hs-dot{box-shadow:0 0 0 10px rgba(123,82,245,.16)}
@media (max-width:760px){.hsteps::before{transform:scaleY(0);transform-origin:top}.hsteps.in::before{transform:scaleY(1)}
  .hsteps::after{inset-inline-start:2px;top:0}
  @keyframes hsPulse{0%{top:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{top:calc(100% - 10px);opacity:0}}}
@media (prefers-reduced-motion:reduce){.hsteps::before,.hsteps .hs-dot{transform:none!important;transition:none}.hsteps.in::after{animation:none}}

/* CTA bands: violet, slowly drifting light */
.cta-band{background:#5630DD;isolation:isolate}
.cta-band::before{content:"";display:block;position:absolute;inset:-45%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 28% 38%,#9670FF,transparent 34%),radial-gradient(circle at 72% 62%,#3A1CB5,transparent 40%),
    radial-gradient(circle at 58% 24%,rgba(84,218,139,.45),transparent 26%),radial-gradient(circle at 18% 78%,#A985FF,transparent 34%),radial-gradient(circle at 88% 20%,#6D45F2,transparent 36%);
  animation:ctaDrift 18s ease-in-out infinite alternate}
@keyframes ctaDrift{0%{transform:translate(0,0) rotate(0)}33%{transform:translate(7%,-5%) rotate(10deg)}66%{transform:translate(-4%,6%) rotate(-6deg)}100%{transform:translate(5%,3%) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.cta-band::before{animation:none}}

/* buttons: violet everywhere */
.btn-primary,.btn-wa{background:#7B52F5;border-color:#7B52F5;color:#fff}
.btn-primary:hover,.btn-wa:hover{background:#6A40EE;border-color:#6A40EE}

/* industries "and more": two rows of chips drifting in opposite directions */
.marquee{display:grid;gap:14px;margin-top:30px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-row{overflow:hidden}
.mq-track{display:flex;gap:12px;width:max-content;animation:mq 42s linear infinite}
.mq-row.rev .mq-track{animation-direction:reverse;animation-duration:48s}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(50%)}}
.mq-pill{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--n200);border-radius:999px;background:#fff;white-space:nowrap;box-shadow:0 6px 18px -12px rgba(40,20,110,.25);transition:border-color .2s,transform .2s}
.mq-pill:hover{border-color:#7B52F5;transform:translateY(-2px)}
.mq-pill i{width:8px;height:8px;border-radius:50%;background:#7B52F5}
.mq-pill b{font-size:16px;color:var(--ink)}
.mq-pill small{font-size:13.5px;color:var(--n500)}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none;flex-wrap:wrap;width:auto}}

/* industry pages: image blocks as a carousel */
.fcar{position:relative;margin:8px 0 clamp(36px,5vw,56px)}
.fcar-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 18px;scrollbar-width:none}
.fcar-track::-webkit-scrollbar{display:none}
.fslide{flex:0 0 min(860px,86%);scroll-snap-align:start;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(18px,3vw,36px);align-items:center;
  background:#fff;border:1px solid var(--n200);border-radius:22px;padding:clamp(14px,2vw,22px)}
.fslide .frow-img{order:0!important;box-shadow:none}
.fcar-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.fcar-b{width:42px;height:42px;border-radius:50%;border:1px solid var(--n300);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.fcar-b:hover{background:#7B52F5;border-color:#7B52F5;color:#fff}
.fcar-b:disabled{opacity:.35;pointer-events:none}
.fcar-dots{display:flex;gap:8px}
.fcar-dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:#D5D0E6;cursor:pointer;transition:width .3s,background .3s}
.fcar-dots button[aria-current="true"]{width:26px;background:#7B52F5}
@media (max-width:820px){.fslide{grid-template-columns:1fr;flex-basis:88%}}

/* about: history as a light timeline */
.hist-sec .tline{color:var(--ink)}

/* header nav: the current page sits in a pill coloured by the scroll colour; the pill slides to the hovered link */
.pnav .ind{display:block;top:3px;bottom:3px;background:var(--accent,#7B52F5);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent,#7B52F5) 70%,transparent);
  transition:transform .45s cubic-bezier(.34,1.35,.5,1),width .45s cubic-bezier(.34,1.35,.5,1),opacity .25s,background .3s}
.pnav a{padding:7px 14px;border-radius:999px;transition:color .25s}
.pnav a.on{box-shadow:none;color:#fff}
.pnav.hovering a.on:not(.hl){color:var(--ink)}
.pnav a.hl{color:#fff}
.top.dark .pnav.hovering a.on:not(.hl){color:rgba(255,255,255,.85)}
.pnav .ind{background:color-mix(in oklch,var(--accent,#7B52F5) 82%,#1B0B55)}
.phero{border-bottom:0!important}
.pnav .ind{padding:0!important;border:0!important;min-height:0!important;box-sizing:border-box}