/* ── extras din index.html (linia 36) ── */
:root{
  --void:#070B12; --panel:#0F1826; --panel2:#0c1420; --line:rgba(43,199,210,.16);
  --cyan:#2BC7D2; --glow:#6AF3FD; --signal:#F5A623; --mist:#E8F1F8; --muted:rgba(232,241,248,.58);
  --disp:'Alata',system-ui,sans-serif; --body:'Alata',system-ui,sans-serif; --mono:'Alata',system-ui,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--mist);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;line-height:1.04;margin:0}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.wrap{width:min(var(--maxw),92vw);margin:0 auto}
.section{position:relative;z-index:1;padding:clamp(64px,9vw,120px) 0}
.muted{color:var(--muted)}
.cyan{color:var(--cyan)}

/* ambient field */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
   radial-gradient(900px 600px at 78% 12%, rgba(43,199,210,.12), transparent 60%),
   radial-gradient(700px 500px at 10% 90%, rgba(43,199,210,.06), transparent 60%);}
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 75%)}

/* nav */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(7,11,18,.6);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.01em}
.brand svg{display:block}
.brand-lockup{height:34px;width:auto;display:block}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a:not(.btn){font-size:13.5px;color:var(--muted);transition:color .2s}
.nav-links a:not(.btn):hover{color:var(--mist)}
@media(max-width:820px){.nav-links{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:500;font-size:14.5px;padding:11px 20px;border-radius:11px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s}
.btn-primary{background:linear-gradient(180deg,var(--glow),var(--cyan));color:#04121e;box-shadow:0 6px 28px rgba(43,199,210,.32)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 36px rgba(43,199,210,.45)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--mist)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}

/* hero */
.hero{position:relative;display:flex;align-items:center;min-height:clamp(640px,92vh,900px);padding:clamp(36px,5vw,60px) 0;overflow:visible}
.hero-l{position:relative;z-index:3;flex:0 1 600px;max-width:600px;min-width:280px;pointer-events:none}
.hero-l h1,.hero-l .lead,.hero-l .readout{pointer-events:auto}
.hero-l a,.hero-l .btn,.hero-l button{pointer-events:auto}
.hero-r .robot{pointer-events:auto;touch-action:pan-y;transform:translateX(12%)}
@media(max-width:860px){.hero-r .robot{pointer-events:none;touch-action:auto}}
.hero h1{font-size:clamp(42px,6.4vw,76px);font-weight:700;margin:18px 0 0}
.hero h1 .accent{background:linear-gradient(120deg,var(--cyan),var(--glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:clamp(16px,1.5vw,19px);color:var(--muted);max-width:34ch;margin:20px 0 0}
.readout{display:inline-flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.readout span{font-family:var(--mono);font-size:11.5px;color:var(--muted);background:rgba(43,199,210,.06);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-r{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:100%;z-index:0;pointer-events:none;margin:0}

/* live network panel */
.panel{position:relative;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(15,24,38,.9),rgba(8,16,26,.9));overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.panel-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal);display:inline-block;margin-right:7px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.net{display:block;width:100%;height:auto}
.net .edge{stroke:var(--cyan);stroke-width:1;opacity:.22;fill:none}
.net .node{fill:var(--void);stroke:var(--cyan);stroke-width:1.4}
.net .node-glow{fill:var(--cyan);opacity:.0}
.net .pulse{fill:var(--glow);filter:drop-shadow(0 0 6px var(--glow))}
.net .live{fill:var(--signal);filter:drop-shadow(0 0 8px var(--signal))}
.net text{font-family:var(--mono);font-size:7px;fill:var(--muted);letter-spacing:.04em}
.panel-foot{display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted)}

/* robot hero panel */
.robot-panel{position:absolute;inset:0;width:100%;height:100%;border-radius:0;overflow:visible;background:radial-gradient(40% 52% at 58% 47%,rgba(43,199,210,.10),transparent 72%);border:none;box-shadow:none}
.net-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:100%;z-index:1;pointer-events:none;background:linear-gradient(90deg,#070B12 0%,rgba(7,11,18,.93) 22%,rgba(7,11,18,.5) 44%,rgba(7,11,18,0) 64%)}
@media(max-width:820px){.hero{display:block;min-height:auto;padding:clamp(26px,8vw,46px) 0}.hero-l{flex:none;max-width:100%}.hero-r{position:relative;top:auto;left:auto;transform:none;width:100%;height:clamp(320px,72vw,480px);margin-top:22px}.hero::before{display:none}.net-badge{top:14px;left:14px}.order-strip{position:static;transform:none;display:inline-flex;margin-top:14px}.hero-r .robot{transform:none}}
.spotlight{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen;animation:spotlight 9s ease-in-out infinite alternate}
@keyframes spotlight{0%{opacity:.45;transform:translate(-7%,-4%) scale(1)}100%{opacity:.9;transform:translate(5%,3%) scale(1.1)}}
.robot{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;background:transparent}
.robot-still{display:block;position:absolute;left:58%;top:47%;transform:translate(-50%,-50%);height:86%;max-width:92%;object-fit:contain;z-index:1;pointer-events:none}
.robot-panel.is-3d .robot-still{opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
@media (max-width:820px){.robot-still{left:50%;top:50%;height:94%}}
.net-badge{position:absolute;top:12%;left:51%;z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--mist);background:rgba(7,11,18,.55);border:1px solid var(--line);border-radius:999px;padding:6px 12px;backdrop-filter:blur(6px);display:flex;align-items:center;gap:7px}
.bdot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2s infinite}
.bdot.amber{background:var(--signal);box-shadow:0 0 10px var(--signal)}
.order-strip{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);margin:0;z-index:3;font-family:var(--mono);font-size:11.5px;color:var(--muted);background:rgba(7,11,18,.5);border:1px solid rgba(245,166,35,.32);border-radius:999px;padding:9px 14px;display:inline-flex;align-items:center;gap:8px}
.order-strip b{color:var(--signal)}
@media(prefers-reduced-motion:reduce){.spotlight{animation:none}.bdot{animation:none}}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.dot{animation:none}}

.sec-head{max-width:60ch}
.sec-head h2{font-size:clamp(28px,3.6vw,44px);margin-top:14px}
.sec-head p{color:var(--muted);margin-top:14px;font-size:17px}

/* ecosystem, animated grid feature cells */
.eco-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:38px;border:1px dashed rgba(43,199,210,.20);border-radius:16px;overflow:hidden;background-color:#080c12;background-image:linear-gradient(rgba(43,199,210,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(43,199,210,.045) 1px,transparent 1px);background-size:42px 42px}
.eco-grid::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(43,199,210,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(43,199,210,.26) 1px,transparent 1px);background-size:42px 42px;-webkit-mask:radial-gradient(circle,#000 26%,transparent 66%) no-repeat;mask:radial-gradient(circle,#000 26%,transparent 66%) no-repeat;-webkit-mask-size:55% 62%;mask-size:55% 62%;-webkit-mask-position:0% 8%;mask-position:0% 8%;animation:ecospot 19s ease-in-out infinite alternate}
@keyframes ecospot{0%{-webkit-mask-position:2% 6%;mask-position:2% 6%}50%{-webkit-mask-position:98% 92%;mask-position:98% 92%}100%{-webkit-mask-position:36% 100%;mask-position:36% 100%}}
.eco{position:relative;z-index:1;border:none;border-right:1px dashed rgba(43,199,210,.12);border-bottom:1px dashed rgba(43,199,210,.12);background:transparent;border-radius:0;padding:30px 26px;transition:background .3s}
.eco:hover{background:rgba(43,199,210,.05)}
.eco.core,.eco.flag{background:rgba(43,199,210,.04)}
.eco-ic{width:auto;height:auto;border:none;border-radius:0;background:none;box-shadow:none;display:block;margin-bottom:20px;color:rgba(232,241,248,.55)}
.eco-ic svg{width:27px;height:27px;display:block}
.eco.core .eco-ic,.eco.flag .eco-ic{color:var(--cyan)}
.eco h3{font-size:18px;font-weight:600;color:var(--mist)}
.eco p{font-size:13.5px;color:var(--muted);margin:9px 0 0;line-height:1.55}.eco-soon{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--cyan);background:rgba(43,199,210,.10);border:1px solid rgba(43,199,210,.35);border-radius:999px;padding:4px 9px;line-height:1}
.eco .cyan{color:var(--cyan)}
@media(max-width:900px){.eco-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.eco-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.eco-grid::before{animation:none}}

/* configurator */
.cfg{margin-top:34px}
.cfg-presets{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.preset{font-family:var(--mono);font-size:12px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;transition:.2s}
.preset.active{border-color:var(--brand,var(--cyan));color:var(--mist);background:rgba(43,199,210,.1)}
.cfg-row{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
@media(max-width:820px){.cfg-row{grid-template-columns:1fr}}
.cfg-code .code{margin:0;padding:18px 20px;font-family:var(--mono);font-size:12.5px;line-height:2;color:var(--muted);overflow:auto;white-space:pre-wrap}
.code .k{color:var(--cyan)}.code .s{color:var(--mist)}.code .v{color:var(--brand,var(--glow));transition:color .3s}
.phone{border:1px solid var(--line);border-radius:22px;background:var(--panel2);padding:14px;max-width:280px;margin:0 auto;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.ph-top{font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:14px}
.ph-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ph-logo{width:30px;height:30px;border-radius:9px;background:var(--brand,var(--cyan));color:#04121e;display:grid;place-items:center;font-family:var(--disp);font-weight:700;transition:background .3s}
.ph-head b{font-family:var(--disp);font-size:15px}
.ph-card{background:linear-gradient(180deg,color-mix(in srgb,var(--brand,#2BC7D2) 22%,transparent),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px;transition:background .3s}
.ph-h{font-family:var(--disp);font-weight:600;font-size:16px}
.ph-sub{font-size:12px;color:var(--muted);margin:3px 0 12px}
.ph-btn{width:100%;border:none;border-radius:9px;padding:9px;font-family:var(--disp);font-weight:600;background:var(--brand,var(--cyan));color:#04121e;cursor:pointer;transition:background .3s}
.ph-line{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.ph-line span{height:7px;width:62%;background:rgba(255,255,255,.08);border-radius:4px}
.phone-wrap{max-width:280px;margin:0 auto}
.theme-toggle{display:flex;gap:4px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:4px;margin:0 auto 14px;width:max-content}
.theme-toggle button{font-family:var(--mono);font-size:11px;padding:6px 14px;border-radius:999px;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:.2s}
.theme-toggle button.active{background:var(--brand,var(--cyan));color:#04121e}
.phone{transition:background .3s,border-color .3s}
.phone.light{background:#F5F8FB;border-color:rgba(11,26,38,.1);box-shadow:0 24px 60px rgba(0,0,0,.22)}
.phone.light .ph-top{color:rgba(11,26,38,.5)}
.phone.light .ph-head b{color:#0b1a26}
.phone.light .ph-card{background:linear-gradient(180deg,color-mix(in srgb,var(--brand,#2BC7D2) 18%,#fff),#fff);border-color:rgba(11,26,38,.07)}
.phone.light .ph-h{color:#0b1a26}
.phone.light .ph-sub{color:rgba(11,26,38,.55)}
.phone.light .ph-line{color:#0b1a26;border-color:rgba(11,26,38,.08)}
.phone.light .ph-line span{background:rgba(11,26,38,.1)}
.phone.light .ph-line b{color:#0b1a26}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{border-top:1px solid var(--line);padding-top:16px}
.step .num{font-family:var(--mono);font-size:13px;color:var(--cyan)}
.step b{font-family:var(--disp);display:block;margin:6px 0 4px;font-size:17px}
.step p{font-size:13px;color:var(--muted);margin:0}

/* capabilities, colorful animated shader cards */
.cap-search{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);padding:14px 22px;margin:32px auto 28px;max-width:540px;transition:border-color .2s,box-shadow .2s}
.cap-search:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(43,199,210,.08)}
.cap-search span{color:var(--cyan);font-size:18px}
.cap-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--mist);font-family:var(--body);font-size:15px}
.cap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;align-items:start}
.cap-col{position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:#0b1017;padding:24px;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.cap-col::before{content:'';position:absolute;inset:-45%;z-index:-2;background:radial-gradient(38% 38% at 28% 28%,var(--c1,#2a3a4a),transparent 62%),radial-gradient(44% 44% at 72% 60%,var(--c2,#3a5a6a),transparent 62%),radial-gradient(42% 42% at 48% 88%,var(--c1,#2a3a4a),transparent 60%);filter:blur(26px) saturate(1.25);opacity:.9;animation:capflow 17s ease-in-out infinite alternate}
.cap-col::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,10,15,.34),rgba(7,10,15,.62))}
@keyframes capflow{0%{transform:translate(-6%,-4%) rotate(0deg) scale(1.15)}50%{transform:translate(6%,5%) rotate(12deg) scale(1.32)}100%{transform:translate(-4%,7%) rotate(-9deg) scale(1.2)}}
.cap-col:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.26);box-shadow:0 22px 52px rgba(0,0,0,.5)}
.cap-col:hover::before{opacity:1}
.cap-head{display:flex;align-items:center;gap:13px;margin:0;width:100%;background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.cap-chev{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.22);position:relative;transition:transform .25s,background .2s}
.cap-chev:before,.cap-chev:after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)}
.cap-chev:before{width:9px;height:1.5px}
.cap-chev:after{width:1.5px;height:9px;transition:opacity .2s,transform .25s}
.cap-col.open .cap-chev:after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.cap-col.open .cap-chev{background:rgba(255,255,255,.14)}
.cap-head:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:12px}
.cap-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;flex:none}
.cap-ic svg{width:21px;height:21px}
.cap-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:0;flex:1}
.cap-n{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:3px 9px}
.cap-col ul{list-style:none;margin:16px 0 0;padding:0;display:none;gap:1px}
.cap-col.open ul{display:grid}
.cap-col li{font-size:14px;color:rgba(255,255,255,.86);padding:8px 0 8px 24px;position:relative;border:none;transition:color .15s}
.cap-col li::before{content:'';position:absolute;left:4px;top:14px;width:7px;height:7px;border-radius:50%;background:#fff;opacity:.6;transition:.15s}
.cap-col li:hover{color:#fff}
.cap-col li:hover::before{opacity:1;transform:scale(1.25)}
.cap-col.hide,.cap-col li.hide{display:none}
@media(prefers-reduced-motion:reduce){.cap-col::before{animation:none}}

/* global */
.globe-row{display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:24px;align-items:center;margin-top:34px;border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:28px}
@media(max-width:820px){.globe-row{grid-template-columns:1fr 1fr}}
.globe-stat b{font-family:var(--disp);font-size:34px;color:var(--cyan);display:block}
.globe-stat span{font-size:12px;color:var(--muted)}
.globe-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.globe-chips span{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 11px}

/* infra */
.infra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
@media(max-width:820px){.infra-grid{grid-template-columns:1fr}}
.infra{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(15,24,38,.8),rgba(8,16,26,.6));padding:20px}
.infra b{font-family:var(--mono);font-size:15px;color:var(--mist);display:block;margin-bottom:6px}
.infra span{font-size:13px;color:var(--muted)}

/* economics */
.econ{display:flex;align-items:stretch;gap:18px;margin-top:34px;flex-wrap:wrap}
.econ-card{flex:1 1 280px;border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--panel)}
.econ-card.good{border-color:rgba(43,199,210,.4);background:linear-gradient(180deg,rgba(43,199,210,.1),rgba(15,24,38,.6))}
.econ-tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.econ-big{font-family:var(--disp);font-weight:700;font-size:54px;margin:8px 0 14px;color:#ff7a7a}
.econ-card ul{list-style:none;margin:0;padding:0}
.econ-card li{font-size:14px;color:var(--muted);padding:6px 0 6px 20px;position:relative}
.econ-card li:before{content:'›';position:absolute;left:0;color:var(--cyan)}
.econ-arrow{display:grid;place-items:center;font-size:26px;color:var(--cyan)}
@media(max-width:820px){.econ-arrow{display:none}}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.price{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:28px;position:relative;display:flex;flex-direction:column}
.price.feat{border-color:var(--cyan);background:linear-gradient(180deg,rgba(43,199,210,.1),rgba(15,24,38,.7));box-shadow:0 20px 60px rgba(43,199,210,.14)}
.best{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(180deg,var(--glow),var(--cyan));color:#04121e;padding:5px 12px;border-radius:999px;white-space:nowrap}
.price h3{font-size:19px}
.price .amt{font-family:var(--disp);font-weight:700;font-size:38px;margin:12px 0 4px}
.price .amt span{font-size:15px;color:var(--muted);font-weight:400}
.price .ptag{font-size:13px;color:var(--muted);margin:0 0 16px}
.price ul{list-style:none;margin:0 0 22px;padding:0;flex:1}
.price li{font-size:13.5px;color:var(--muted);padding:6px 0 6px 20px;position:relative}
.price li:before{content:'✓';position:absolute;left:0;color:var(--cyan)}
.price .btn{width:100%;justify-content:center}

/* footer */
.foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:80px;padding:28px 0;border-top:1px solid var(--line)}
.foot-l{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* reports & analytics, mirrors the real admin dashboard */
.dash{margin-top:34px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--panel),rgba(8,16,26,.7));overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.dash-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted)}
.dash-bar>span:first-child{display:flex;align-items:center;gap:8px;color:var(--mist)}
.dash-pad{padding:20px}
@media(max-width:640px){.dash-pad{padding:14px}}
/* KPI grid (8 cards, 4-up) */
.kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.kgrid{grid-template-columns:repeat(2,1fr)}}
.kpi{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);padding:15px}
.kt{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.kt>span{font-size:12px;color:var(--muted)}
.kic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;line-height:1;color:#fff;flex:none;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.kic.g{background:linear-gradient(135deg,#10B981,#0E9E6E)}
.kic.p{background:linear-gradient(135deg,#8B5CF6,#6D49E0)}
.kic.c{background:linear-gradient(135deg,#8FC53E,#5C9E2A)}
.kic.r{background:linear-gradient(135deg,#F97366,#E0483A)}
.kic.pk{background:linear-gradient(135deg,#EC4899,#D62E84)}
.kic.a{background:linear-gradient(135deg,#F5A623,#E08A0E)}
.kic.b{background:linear-gradient(135deg,#38BDF8,#2A9BD8)}
.kpi b{font-family:var(--disp);font-size:23px;display:block;margin:9px 0 3px}
.kpi i{font-family:var(--mono);font-size:10.5px;font-style:normal;color:#46C08A}
/* mini stat pills */
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
@media(max-width:640px){.mini{grid-template-columns:repeat(2,1fr)}}
.mp{border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:10px;background:rgba(255,255,255,.02);padding:11px 14px}
.mp span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--muted);display:block}
.mp b{font-family:var(--disp);font-size:18px;margin-top:3px;display:block}
/* report-view tabs */
.dtabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.dtabs span{font-family:var(--mono);font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:7px 12px}
.dtabs span.on{background:rgba(43,199,210,.14);border-color:rgba(43,199,210,.4);color:var(--glow)}
/* automated insights */
.ins{margin-top:18px}
.ins-h{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:14px;font-weight:600;margin-bottom:12px}
.ins-h .dim{font-weight:400;font-size:11px;color:var(--muted)}
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:900px){.ins-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ins-grid{grid-template-columns:1fr}}
.ins-c{border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.02);padding:13px 14px;font-size:12.5px;color:var(--muted)}
.ins-c b{display:block;color:var(--mist);font-family:var(--disp);font-size:13px;font-weight:600;margin-bottom:3px}
.ins-c.good{background:rgba(70,192,138,.06);border-color:rgba(70,192,138,.2)}
/* chart */
.chart{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);padding:16px 18px;display:flex;flex-direction:column;margin-top:14px}
.chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.chart-head b{font-family:var(--disp);font-size:15px}
.bars{display:flex;align-items:flex-end;gap:10px;height:120px}
.bar{flex:1;height:var(--h,0%);min-height:6px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--cyan),rgba(43,199,210,.22));transition:height 1s cubic-bezier(.2,.7,.2,1)}
.bar.peak{background:linear-gradient(180deg,var(--glow),var(--cyan));box-shadow:0 0 16px rgba(43,199,210,.4)}
.chart-x{display:flex;gap:10px;margin-top:8px}
.chart-x span{flex:1;text-align:center;font-family:var(--mono);font-size:10px;color:var(--muted)}
.chart-foot{display:flex;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:11px}
.chart-foot span:last-child{color:#46C08A}

/* ============ MOTION LAYER ============ */
.aurora{position:fixed;inset:-25%;z-index:0;pointer-events:none;
  background:radial-gradient(38% 32% at 18% 12%,rgba(43,199,210,.12),transparent 70%),
             radial-gradient(34% 30% at 85% 78%,rgba(106,243,253,.10),transparent 70%),
             radial-gradient(28% 28% at 72% 22%,rgba(245,166,35,.05),transparent 70%);
  animation:aurora 24s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate(0,0) scale(1)}50%{transform:translate(2.5%,-2%) scale(1.07)}100%{transform:translate(-2%,2.5%) scale(1.04)}}
/* hover lift + glow on cards */
.eco,.kpi,.mp,.ins-c,.cap-col,.price,.infra,.globe-stat,.econ-card{transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .28s,box-shadow .28s,background .28s}
.eco:hover,.kpi:hover,.ins-c:hover,.cap-col:hover,.price:hover,.infra:hover,.globe-stat:hover,.econ-card:hover{transform:translateY(-4px);border-color:rgba(43,199,210,.42);box-shadow:0 16px 40px rgba(0,0,0,.42),0 0 28px rgba(43,199,210,.10)}
.mp:hover{transform:translateY(-3px);border-color:rgba(43,199,210,.42)}
.eco-ic{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.eco:hover .eco-ic{transform:scale(1.06)}
.dtabs span{transition:background .2s,border-color .2s,color .2s,transform .2s}
.dtabs span:hover{color:var(--mist);border-color:rgba(43,199,210,.4);transform:translateY(-1px)}
/* animated gradient sheen on accent headline */
.hero h1 .accent{background:linear-gradient(110deg,var(--cyan) 12%,var(--glow) 38%,#e3f4ff 50%,var(--glow) 62%,var(--cyan) 88%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite}
@keyframes sheen{to{background-position:-220% center}}
/* scroll-progress bar */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--glow));box-shadow:0 0 12px var(--cyan);z-index:60;transition:width .12s ease-out}
/* nav condense on scroll */
header.nav{transition:background .3s,box-shadow .3s}
header.nav.scrolled{background:rgba(7,11,18,.86);box-shadow:0 6px 24px rgba(0,0,0,.35)}
/* staggered card entrance */
[data-stag]>*{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
[data-stag].seen>*{opacity:1;transform:none}
/* ambient drift on the economics arrow */
.econ-arrow{animation:floatx 3s ease-in-out infinite}
@keyframes floatx{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media(prefers-reduced-motion:reduce){
  .aurora,.hero h1 .accent,.econ-arrow{animation:none}
  [data-stag]>*{opacity:1;transform:none;transition:none}
  .progress{display:none}
  .eco:hover,.kpi:hover,.ins-c:hover,.cap-col:hover,.price:hover,.infra:hover,.globe-stat:hover,.econ-card:hover,.mp:hover{transform:none}
}

/* ===== real-screens / surfaces / numbers / proof (merged from v3) ===== */
.device{position:relative}
.device .screen{position:relative;overflow:hidden;background:#0a0f17}
.device .screen img{width:100%;height:100%;object-fit:cover;display:block}
.device.phone{width:230px;border-radius:34px;padding:9px;background:linear-gradient(160deg,#202a3a,#0a0f17);border:1px solid rgba(43,199,210,.22);box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 50px rgba(43,199,210,.06)}
.device.phone .screen{border-radius:26px;aspect-ratio:9/19.5}
.device.browser{width:100%;border-radius:14px;background:#0c1420;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden}
.device.browser .bscreen{position:relative;width:100%;aspect-ratio:16/10;background:#0a0f17;overflow:hidden}
.device.browser .bchrome{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.device.browser .bdot3{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.device.browser .burl{margin-left:10px;flex:1;font-family:var(--mono);font-size:11px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:7px;padding:5px 12px}
.device.browser .screen{aspect-ratio:16/10}
.device.tablet{width:100%;border-radius:18px;padding:12px;background:linear-gradient(160deg,#202a3a,#0a0f17);border:1px solid rgba(43,199,210,.2);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.device.tablet .screen{border-radius:10px;aspect-ratio:16/10}
.device.monitor{width:100%}
.device.monitor .mscreen{border-radius:12px 12px 0 0;border:1px solid var(--line);border-bottom:none;background:#0c1420;overflow:hidden}
.device.monitor .screen{aspect-ratio:16/9}
.device.monitor .mstand{height:14px;background:linear-gradient(180deg,#141d2b,#0a0f17);border:1px solid var(--line);border-radius:0 0 8px 8px;margin:0 auto;width:38%}
.slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:18px;background:radial-gradient(120% 90% at 50% 0%,rgba(43,199,210,.08),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 12px,transparent 12px 24px),var(--panel2)}
.slot .slot-ic{font-size:30px;filter:saturate(.5) opacity(.9)}
.slot b{font-family:var(--disp);font-size:15px;color:var(--mist)}
.slot .slot-sub{font-size:12px;color:var(--muted);max-width:24ch}
.slot .slot-tag{margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);border:1px solid rgba(245,166,35,.34);border-radius:999px;padding:4px 10px}
.slot .slot-tag.soon{color:var(--cyan);border-color:rgba(43,199,210,.36)}
.gallery{margin-top:36px;position:relative}
.gallery-scroll{display:flex;gap:20px;overflow-x:auto;padding:10px 2px 26px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.gallery-scroll::-webkit-scrollbar{height:8px}
.gallery-scroll::-webkit-scrollbar-thumb{background:rgba(43,199,210,.22);border-radius:99px}
.gallery-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:99px}
.gshot{scroll-snap-align:center;flex:0 0 auto}
.gshot figcaption{margin-top:12px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em}
.gallery-hint{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
.cmp-label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);text-align:center;margin:10px 0 6px;opacity:.85}
/* customer app, card-fan carousel */
.fan{position:relative;display:block;overflow:visible;height:clamp(490px,62vw,640px);perspective:1700px;margin:6px 0 2px;touch-action:pan-y}
.fan .gshot{position:absolute;top:18px;left:50%;margin:0;flex:none;transform-origin:50% 138%;transition:transform .6s cubic-bezier(.2,.75,.2,1),opacity .45s;cursor:pointer;will-change:transform}
.fan .gshot:not(.active):hover{filter:brightness(1.08)}
.fan .gshot figcaption{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);white-space:nowrap;opacity:0;transition:opacity .35s}
.fan .gshot.active{cursor:default}
.fan .gshot.active figcaption{opacity:1}
.fan .gshot.active .device.phone{box-shadow:0 42px 95px rgba(0,0,0,.62),0 0 90px rgba(43,199,210,.18)}
@media(max-width:640px){.fan{height:clamp(430px,120vw,560px)}.fan .gshot .device.phone{width:188px}}
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:42px}
.showcase.flip .sc-media{order:2}
.sc-media{display:flex;justify-content:center;gap:16px}
.sc-copy .pill{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.sc-copy h3{font-size:clamp(22px,2.6vw,30px);margin:12px 0 0}
.sc-copy p{color:var(--muted);margin:14px 0 0;font-size:15.5px}
.sc-feats{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.sc-feats li{font-size:14px;color:var(--muted);padding-left:22px;position:relative}
.sc-feats li:before{content:'\203a';position:absolute;left:0;color:var(--cyan);font-size:16px}
@media(max-width:860px){.showcase{grid-template-columns:1fr;gap:28px}.showcase.flip .sc-media{order:0}}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
.counter{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:22px 20px;text-align:center}
.counter b{font-family:var(--disp);font-weight:700;font-size:clamp(30px,3.6vw,44px);color:var(--cyan);display:block;line-height:1}
.counter span{font-size:13px;color:var(--muted);margin-top:8px;display:block}
@media(max-width:760px){.counters{grid-template-columns:1fr 1fr}}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
@media(max-width:860px){.testi-grid{grid-template-columns:1fr}}
.testi{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:24px;display:flex;flex-direction:column;gap:16px}
.testi.empty{border-style:dashed;background:repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 12px,transparent 12px 24px),var(--panel2);align-items:center;justify-content:center;text-align:center;min-height:200px}
.testi .quote{font-size:15px;color:var(--mist);line-height:1.6}
.testi .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.testi .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(160deg,var(--cyan),var(--glow));display:grid;place-items:center;color:#04121e;font-family:var(--disp);font-weight:700}
.testi .who b{font-family:var(--disp);font-size:14px;display:block}
.testi .who span{font-size:12px;color:var(--muted)}
.testi.empty .slot-ic{font-size:26px}.testi.empty b{font-family:var(--disp);color:var(--mist)}
.testi.empty .slot-tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(43,199,210,.36);border-radius:999px;padding:4px 10px}

/* ════════════════ PREMIUM REFINEMENT LAYER ════════════════ */
:root{
  --hair:rgba(255,255,255,.07);
  --hair-2:rgba(255,255,255,.12);
  --surface:linear-gradient(180deg,rgba(24,35,53,.62),rgba(11,19,31,.62));
}
html{scroll-padding-top:84px}
::selection{background:rgba(43,199,210,.30);color:#fff}
/* deeper, less-flat page base */
body{background:
  radial-gradient(1100px 620px at 50% -8%,rgba(43,199,210,.06),transparent 62%),
  linear-gradient(180deg,#080d16,#070b12 42%,#05080f);
  background-attachment:fixed}
/* ---- typography: editorial serif ---- */
h1,h2,h3{letter-spacing:-.018em;font-weight:600}
.hero h1{letter-spacing:-.028em;line-height:1.04;font-weight:700}
.hero h1 .accent{font-weight:600}
.sec-head h2{letter-spacing:-.022em;font-weight:500}
.hero p.lead,.sec-head p{color:rgba(232,241,248,.66);text-wrap:pretty}
.sec-head p{margin-top:16px;line-height:1.62;max-width:62ch}
/* refined italic-serif kickers (replaces the mono “tech” labels) */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:'Onest',system-ui,sans-serif;font-style:normal;font-weight:500;font-size:17px;letter-spacing:0;text-transform:none;color:var(--cyan)}
.eyebrow::before{content:"";width:24px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);opacity:.9;flex:none}
.sc-copy .pill{font-family:var(--disp);font-style:normal;font-weight:500;font-size:15.5px;letter-spacing:0;text-transform:none;color:var(--cyan)}
.step .num{font-size:13px}
.price h3,.eco h3,.sc-copy h3,.testi .who b{letter-spacing:-.01em}
/* ---- premium card surface: hairline top-light + glass depth ---- */
.eco:not(.core),.kpi,.price:not(.feat),.infra,.testi:not(.empty),.counter,.cap-col,.econ-card:not(.good),.globe-row,.mp,.ins-c:not(.good){
  background:var(--surface);
  box-shadow:inset 0 1px 0 var(--hair-2),0 1px 2px rgba(0,0,0,.30)}
.eco:not(.core):not(.flag),.kpi,.price:not(.feat),.infra,.testi:not(.empty),.counter,.cap-col,.econ-card:not(.good),.globe-row,.ins-c:not(.good){
  border-color:var(--hair)}
/* refined hover, brighter hairline, deeper drop, soft cyan ambient */
.eco:hover,.kpi:hover,.ins-c:hover,.cap-col:hover,.price:hover,.infra:hover,.globe-stat:hover,.econ-card:hover{
  border-color:rgba(43,199,210,.50);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 44px rgba(0,0,0,.46),0 0 32px rgba(43,199,210,.12)}
/* ---- buttons ---- */
.btn{border-radius:12px}
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.50),0 8px 26px rgba(43,199,210,.32),0 2px 5px rgba(0,0,0,.35)}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 12px 34px rgba(43,199,210,.46),0 3px 7px rgba(0,0,0,.40)}
.btn-ghost{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 var(--hair-2)}
.btn-ghost:hover{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05))}
/* ---- nav: refined glass + underline-grow links ---- */
header.nav{background:rgba(7,11,18,.55);border-bottom:1px solid var(--hair)}
header.nav.scrolled{background:rgba(7,11,18,.82);box-shadow:0 8px 28px rgba(0,0,0,.4)}
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:linear-gradient(90deg,var(--cyan),var(--glow));transition:right .3s cubic-bezier(.2,.7,.2,1)}
.nav-links a:not(.btn):hover::after{right:0}
.nav-links .btn-primary{padding:9px 18px;font-size:13.5px}
/* ---- panels & devices: hairline top-light ---- */
.panel,.dash{box-shadow:inset 0 1px 0 var(--hair-2),0 24px 60px rgba(0,0,0,.5)}
.robot-panel{box-shadow:none}
.phone{box-shadow:inset 0 1px 0 var(--hair-2),0 24px 60px rgba(0,0,0,.5)}
.price.feat{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 20px 60px rgba(43,199,210,.16),0 8px 24px rgba(0,0,0,.4)}
/* ---- search input: cyan focus ring ---- */
.cap-search{background:var(--surface);box-shadow:inset 0 1px 0 var(--hair-2);transition:border-color .25s,box-shadow .25s}
.cap-search:focus-within{border-color:rgba(43,199,210,.55);box-shadow:inset 0 1px 0 var(--hair-2),0 0 0 3px rgba(43,199,210,.14)}
/* ---- chips & strips: glassy ---- */
.readout span,.globe-chips span{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 var(--hair)}
.order-strip{box-shadow:inset 0 1px 0 var(--hair),0 6px 20px rgba(0,0,0,.35)}
/* ---- footer air ---- */
.foot{margin-top:96px}
/* ---- self-order kiosk totem frame ---- */
.kiosk-totem{display:flex;flex-direction:column;align-items:center;width:100%}
.kiosk-body{position:relative;width:100%;max-width:380px;background:linear-gradient(180deg,#0c1422,#080d16);border:1px solid var(--hair-2);border-radius:30px;padding:30px 16px 16px;display:flex;flex-direction:column;gap:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 70px rgba(0,0,0,.55),0 0 60px rgba(43,199,210,.07)}
.kcam{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3647,#070b12);box-shadow:0 0 0 3px rgba(255,255,255,.04),inset 0 0 2px rgba(43,199,210,.6)}
.kiosk-body .device.kiosk{background:#05080f;border:1px solid var(--hair);border-radius:13px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.kiosk-body .device.kiosk .screen{border-radius:12px;overflow:hidden;display:block;line-height:0}
.kiosk-body .device.kiosk .screen img{display:block;width:100%;height:auto}
.kiosk-chin{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--muted);padding-top:3px}
.kiosk-chin .kdot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--glow)}
.kiosk-neck{width:62px;height:32px;background:linear-gradient(180deg,#0c1422,#0a1019);border:1px solid var(--hair);border-top:none;border-radius:0 0 7px 7px;box-shadow:inset 0 -6px 14px rgba(0,0,0,.4)}
.kiosk-base{width:188px;height:18px;border-radius:50%/70%;background:linear-gradient(180deg,#0c1422,#070b12);border:1px solid var(--hair);box-shadow:0 18px 30px rgba(0,0,0,.5);margin-top:-2px}
/* ---- nav density + language toggle ---- */
.nav-links{gap:22px}
.lang-toggle{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:999px;padding:6px 11px;cursor:pointer;transition:.2s;line-height:1}
.lang-toggle:hover{color:var(--mist);border-color:rgba(43,199,210,.4);background:rgba(43,199,210,.08)}
@media(max-width:820px){.lang-toggle{display:none}
  /* The theme switch stays in the bar on phones. It was only reachable two taps
     deep in the burger drawer, and it is the one control people hunt for.
     An ID selector, so it also beats the identical `.lang-toggle{display:none}`
     that site.css declares at 860px, whichever sheet applies last. */
  #siteTheme{display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;padding:0;font-size:16px;line-height:1;border-radius:11px}
}

.theme-switch{display:flex;align-items:center;justify-content:center;gap:13px;margin:0 0 24px}
.theme-switch .ts-label,.view-switch .ts-label{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--muted)}
.ts-pill{display:inline-flex;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:4px}
.ts-btn,.vs-btn{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);background:none;border:none;cursor:pointer;padding:7px 17px;border-radius:999px;transition:.2s}
.ts-btn.on,.vs-btn.on{background:var(--brand,var(--cyan));color:#04121e;font-weight:600}
.view-switch{display:flex;align-items:center;gap:13px}
.appshot,.kdsshot{transition:opacity .18s}

/* showcase photo carousel */
.sc-carousel{flex-direction:column;align-items:center;gap:18px}
.sc-carousel .device .screen{position:relative}
.cs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.cs-img.on{opacity:1}
.cs-dots{display:flex;gap:8px;align-items:center}
.cs-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.2);cursor:pointer;padding:0;transition:.25s}
.cs-dots button.on{background:var(--cyan);width:24px;border-radius:999px}
/* SC-SWIPE — the dots were the carousel's only control and only 8px tall. Widen the
   tap target to ~42px (the visible dot stays 8px) and hand horizontal drags to JS. */
.cs-dots{gap:12px}
.cs-dots button{position:relative}
.cs-dots button::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:42px}
.sc-carousel .device{touch-action:pan-y}

/* circular 3D gallery (courier + restaurant) */
.cgal{position:relative;width:100%;height:430px;perspective:1300px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:pan-y;user-select:none}
.cgal:active{cursor:grabbing}
.cgal-ring{position:relative;width:172px;height:362px;transform-style:preserve-3d;will-change:transform}
.cgal-item{position:absolute;inset:0;backface-visibility:hidden;will-change:opacity}
.cgal-card{width:100%;height:100%;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 28px rgba(43,199,210,.06);background:#0a0f17}
.cgal-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
@media(max-width:560px){.cgal{height:380px}.cgal-ring{width:150px;height:316px}}

/* RP-CSS, native analytics panels (lei) */
.rp-kg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.rp-kg{grid-template-columns:repeat(2,1fr)}}
.rp-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
@media(max-width:640px){.rp-mini{grid-template-columns:repeat(2,1fr)}}
.kpi i.sub{color:var(--muted)}
.rp-tabs span{cursor:pointer;user-select:none}
.rp-tabs span:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.rp-panel{display:none}
.rp-panel.on{display:block;animation:rpfade .42s cubic-bezier(.2,.7,.2,1)}
@keyframes rpfade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.rp-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:860px){.rp-2{grid-template-columns:1fr}}
.rp-card{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);padding:16px 18px;margin-top:14px}
.rp-2 .rp-card{margin-top:0}
.rp-ch{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-size:15px;font-weight:600;margin-bottom:15px}
.rp-ch .ic{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;font-size:13px;flex:none}
.rp-ch .mono{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:400}
/* donut */
.rp-donut{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.rp-donut svg{flex:none}
.rp-leg{display:flex;flex-direction:column;gap:11px;flex:1;min-width:150px}
.rp-leg .r{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--mist)}
.rp-leg .dot{width:9px;height:9px;border-radius:50%;flex:none}
.rp-leg .r b{font-family:var(--disp);margin-left:auto;font-weight:600;white-space:nowrap}
.rp-leg .r em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted)}
/* breakdown rows */
.rp-row{display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.02);margin-top:8px}
.rp-row .ico{font-size:16px;flex:none}
.rp-row .lab{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.rp-row .lab>span{color:var(--mist);font-size:13.5px}
.rp-prog{height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;max-width:190px}
.rp-prog>i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#10B981,#46C08A)}
.rp-row .val{font-family:var(--disp);font-size:15px;font-weight:600;white-space:nowrap}
.rp-row .val.neg{color:#F97366}.rp-row .val.pos{color:#46C08A}
.rp-total{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border:1px solid rgba(56,189,248,.32);border-radius:12px;background:rgba(56,189,248,.07);margin-top:10px}
.rp-total span{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.07em;color:var(--mist)}
.rp-total b{font-family:var(--disp);font-size:23px;color:#38BDF8}
/* heatmap */
.rp-heat{display:grid;grid-template-columns:32px repeat(24,1fr);gap:3px;margin-top:4px}
.rp-heat .rl{font-family:var(--mono);font-size:9px;color:var(--muted);display:flex;align-items:center}
.rp-heat .cell{aspect-ratio:1;border-radius:3px;background:rgba(245,166,35,.06)}
.rp-heatx{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8.5px;color:var(--muted);margin:5px 0 0 34px}
.rp-heat-leg{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:9px;justify-content:flex-end}
.rp-heat-leg i{width:11px;height:11px;border-radius:3px;display:inline-block}
/* funnel */
.rp-fun{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.rp-fun .f{display:flex;align-items:center;gap:12px}
.rp-fun .fl{width:104px;font-size:12.5px;color:var(--muted);flex:none}
.rp-fun .fbar{height:28px;border-radius:7px;min-width:34px;display:flex;align-items:center;padding:0 11px;font-family:var(--disp);font-size:13px;color:#022022;font-weight:700}
/* table */
.rp-tbl{width:100%;border-collapse:collapse;margin-top:2px;font-size:13px}
.rp-tbl th{text-align:right;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;color:var(--muted);font-weight:400;padding:8px;border-bottom:1px solid var(--line)}
.rp-tbl th:nth-child(1),.rp-tbl th:nth-child(2){text-align:left}
.rp-tbl td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--mist);text-align:right;white-space:nowrap}
.rp-tbl td:nth-child(1),.rp-tbl td:nth-child(2){text-align:left}
.rp-tbl tr:last-child td{border-bottom:none}
.rp-tbl tr:hover td{background:rgba(255,255,255,.02)}
.rp-rank{width:22px;height:22px;border-radius:7px;display:inline-grid;place-items:center;font-family:var(--disp);font-size:12px;background:rgba(255,255,255,.05);color:var(--muted)}
.rp-rank.g{background:linear-gradient(135deg,#F5A623,#E08A0E);color:#1a1205}
.rp-rank.s{background:linear-gradient(135deg,#C8D2DC,#8C98A6);color:#10151c}
.rp-rank.b3{background:linear-gradient(135deg,#C9803E,#9A5A24);color:#1a1205}
.rp-money{color:#46C08A;font-family:var(--disp)}
.rp-sbar{display:inline-block;width:74px;height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;vertical-align:middle;margin-left:8px}
.rp-sbar>i{display:block;height:100%;background:linear-gradient(90deg,#F5A623,#38BDF8)}
/* top lists */
.rp-top{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.rp-top .t{display:flex;align-items:center;gap:11px;padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.02)}
.rp-top .t .nm{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.rp-top .t .nm>span{color:var(--mist);font-size:13.5px}
.rp-top .t .nm>small{font-family:var(--mono);font-size:10px;color:var(--muted)}
.rp-top .t .qt{text-align:right;flex:none}
.rp-top .t .qt b{font-family:var(--disp);font-size:15px;display:block}
.rp-top .t .qt small{font-family:var(--mono);font-size:9.5px;color:var(--muted)}
.rp-top .t .qt b.m{color:#46C08A}
/* concentration */
.rp-conc{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;padding:10px}
.rp-conc .big{font-family:var(--disp);font-weight:600;font-size:52px;line-height:1}
.rp-conc .big.g{color:#46C08A}
.rp-conc p{margin:6px 0 0;color:var(--muted);font-size:12.5px}
.rp-conc .split{display:flex;gap:26px;margin-top:16px}
.rp-conc .split div{display:flex;flex-direction:column}
.rp-conc .split b{font-family:var(--disp);font-size:26px}
.rp-conc .split span{font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.06em}
/* line chart */
.rp-line{width:100%;height:auto;display:block;margin-top:2px}
.rp-cal{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);font-size:12px;color:var(--muted)}
.rp-cal b{color:var(--mist);font-family:var(--disp)}
.rp-leg2{display:flex;gap:18px;margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.rp-leg2 i{width:14px;height:3px;border-radius:2px;display:inline-block;vertical-align:middle;margin-right:6px}
.rp-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* mobile + reduced-motion (review fixes) */
@media(prefers-reduced-motion:reduce){.rp-panel.on{animation:none}}
@media(max-width:560px){
.rp-tbl{font-size:12px}
.rp-tbl .rp-sbar{display:none}
.rp-tbl td,.rp-tbl th{padding:9px 6px}
.rp-heat{grid-template-columns:24px repeat(24,minmax(9px,1fr));overflow-x:auto}
.rp-heatx{font-size:9px}
.rp-conc .big{font-size:42px}
}


/* POLISH-CSS, mobile nav drawer + footer columns */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.03);cursor:pointer;padding:0}
.nav-burger span{display:block;width:18px;height:2px;margin:0 auto;background:var(--mist);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
header.nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav.open .nav-burger span:nth-child(2){opacity:0}
header.nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:820px){
 .nav-burger{display:flex}
 header.nav.open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:4px;position:absolute;top:64px;left:0;right:0;padding:14px 20px 20px;background:rgba(7,11,18,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 22px 50px rgba(0,0,0,.55)}
 header.nav.open .nav-links a:not(.btn){padding:12px 4px;font-size:15.5px;color:var(--mist);border-bottom:1px solid rgba(255,255,255,.05)}
 header.nav.open .nav-links .lang-toggle{display:inline-block;align-self:flex-start;margin-top:8px}
 header.nav.open .nav-links .btn-primary{margin-top:12px;text-align:center;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.nav-burger span{transition:none}}
.site-foot{margin-top:90px;padding:42px 0 84px;border-top:1px solid var(--line)}
.foot-cols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:30px;padding:0 0 6px}
.foot-cols h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px}
.foot-cols a:not(.brand){display:block;font-size:14px;color:var(--muted);padding:5px 0;transition:color .2s}
.foot-cols a:not(.brand):hover{color:var(--mist)}
.foot-cols p{font-size:14px;color:var(--muted);margin:0;max-width:34ch}
@media(max-width:900px){.foot-cols{grid-template-columns:1fr 1fr 1fr;gap:26px}.foot-cols>div:first-child{grid-column:1/-1}}
@media(max-width:560px){.foot-cols{grid-template-columns:1fr 1fr}}
.cfg-hint{margin:16px auto 0;max-width:680px;font-size:14.5px;color:var(--muted);text-align:center;line-height:1.5}
.cfg-hint b{color:var(--mist)}


/* PRICING-CSS, modular 4-service grid */
.price-grid.pg4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.price-grid.pg4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.price-grid.pg4{grid-template-columns:1fr}}
.price .amt.free{color:var(--glow)}
.price li.div{padding:14px 0 2px;margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);opacity:.9}
.price li.div:before{content:''}
.price li.add{padding-left:20px;color:var(--mist)}
.price li.add:before{content:'+';color:var(--glow);font-weight:700}


/* CUSTOM-INTEGRATION-CSS */
.pi-custom{display:flex;align-items:center;gap:20px;max-width:920px;margin:44px auto 0;padding:24px 28px 24px 32px;position:relative;overflow:hidden;border:1px solid rgba(43,199,210,.34);border-radius:18px;background:linear-gradient(180deg,rgba(43,199,210,.13),rgba(43,199,210,.045));box-shadow:inset 0 1px 0 var(--hair-2),0 0 0 4px rgba(43,199,210,.05),0 22px 54px rgba(43,199,210,.10)}
.pi-custom::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--glow),var(--cyan))}
.pi-custom .pi-ic{width:56px;height:56px;flex:none;display:grid;place-items:center;font-size:27px;border-radius:15px;background:rgba(43,199,210,.15);border:1px solid rgba(43,199,210,.30);box-shadow:inset 0 1px 0 var(--hair-2),0 0 28px rgba(43,199,210,.15)}
.pi-txt{flex:1;min-width:0}
.pi-kick{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--glow);margin-bottom:6px}
.pi-custom p{margin:0;font-size:16px;color:var(--mist);line-height:1.55}
.pi-custom p b{color:#fff}
.pi-custom .btn{flex:none;white-space:nowrap}
@media(max-width:600px){.pi-custom{flex-direction:column;text-align:center;gap:14px;padding:26px 20px}.pi-custom::before{width:100%;height:4px;bottom:auto}.pi-txt{min-width:100%}}


/* PRICE-ALL-CSS, full-width complete-bundle card */
.price-all{margin-top:18px;border:1px solid var(--cyan);border-radius:18px;background:linear-gradient(180deg,rgba(43,199,210,.1),rgba(15,24,38,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 20px 60px rgba(43,199,210,.16);padding:clamp(22px,3vw,34px);display:grid;grid-template-columns:1.05fr 1.5fr auto;gap:clamp(20px,3vw,40px);align-items:center}
@media(max-width:900px){.price-all{grid-template-columns:1fr;gap:20px}}
.price-all .best{position:static;transform:none;display:inline-block}
.price-all h3{font-size:clamp(22px,2.6vw,28px);margin:12px 0 0}
.price-all .pa-l p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:10px 0 0;max-width:38ch}
.price-all .pa-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
@media(max-width:560px){.price-all .pa-feats{grid-template-columns:1fr}}
.price-all .pa-feats li{font-size:13.5px;color:var(--mist);padding:5px 0 5px 20px;position:relative}
.price-all .pa-feats li:before{content:'✓';position:absolute;left:0;color:var(--cyan)}
.price-all .pa-cta{white-space:nowrap;justify-self:end}

.ph-cats{display:flex;gap:6px;margin:2px 0 10px}
.ph-chip{font-size:10.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.ph-chip.on{background:var(--brand,#2BC7D2);border-color:var(--brand,#2BC7D2);color:#04121e;font-weight:600}
.ph-item{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line)}
.ph-thumb{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);display:grid;place-items:center;font-size:17px;flex:none}
.ph-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ph-info b{font-size:12.5px;font-family:var(--disp)}
.ph-info small{font-size:10px;color:var(--muted)}
.ph-price{font-size:12px;color:var(--brand,#2BC7D2)}
.ph-cart{margin-top:12px;display:flex;align-items:center;justify-content:space-between;background:var(--brand,#2BC7D2);color:#04121e;border-radius:11px;padding:9px 12px;font-size:12px;font-weight:600;font-family:var(--disp)}
.phone.light .ph-chip{border-color:rgba(11,26,38,.12);color:rgba(11,26,38,.55)}
.phone.light .ph-chip.on{color:#04121e}
.phone.light .ph-item{border-color:rgba(11,26,38,.08)}
.phone.light .ph-thumb{background:rgba(11,26,38,.06)}
.phone.light .ph-info b{color:#0b1a26}
.phone.light .ph-info small{color:rgba(11,26,38,.5)}

/* ── Mobile performance (audit 2026-07): kill scroll jank ── */
html,body{overflow-x:clip}
.code{overflow-x:auto}
@media (max-width:860px){
  body{background-attachment:scroll!important}
  .aurora,.field{display:none!important}
  .grid-bg{position:absolute!important;height:100%!important}
  header.nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(7,11,18,.96)!important}
  .aurora,.spotlight,.dot,.bdot,.mft-heart,.mft-aurora,.mft-mq-track,.econ-arrow,.hero h1 .accent,.cap-col::before,.eco-grid::before{animation-play-state:paused!important}
  .rp-panel.on{animation:none}
  .showcase,.eco-grid,.dash{content-visibility:auto;contain-intrinsic-size:auto 520px}
}

/* ═══ ECOSYSTEM RING, circular flip cards ═══════════════════════════════════
   Rotation is CSS-only on purpose: .cg-ring spins, .cg-spin cancels it so the
   cards stay upright. Writing transforms from JS every frame would hammer the
   MutationObserver fx.js keeps on .eco elements. */
.cg-stage{--cg-w:112px;--cg-h:124px;position:relative;width:min(88vw,860px);margin:38px auto 0;
  aspect-ratio:1/1}
.cg-ring{position:absolute;inset:0;z-index:2;animation:cg-spin 300s linear infinite}
/* z-index:2 is load-bearing. .cg-ring animates a transform, so it is its own
   stacking context at level auto — which put .cg-core (z-index:1) ABOVE the
   entire ring, and the shader bled through the open panel. Cards over core. */
.cg-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;z-index:5;pointer-events:none;padding:0 24%;text-align:center}
.cg-mid .sec-head{margin:0;text-align:center}
.cg-mid .eyebrow::before{display:none}/* leading rule reads as a stray line when the header is centred in the ring */
.cg-mid .sec-head h2{font-size:clamp(21px,2.7vw,34px);line-height:1.08}
.cg-mid .sec-head p{font-size:14px;max-width:34ch;margin-left:auto;margin-right:auto}

.cg-pos{position:absolute;left:50%;top:50%;width:var(--cg-w);height:var(--cg-h);
  margin-left:calc(var(--cg-w) / -2);margin-top:calc(var(--cg-h) / -2)}
.cg-stage .cg-card{position:relative;width:100%;height:100%;perspective:1000px;cursor:pointer;
  /* .eco ships a global `transition:transform .28s`; the ring must not inherit it */
  transition:none!important;
  /* strip what .eco brings from the grid layout, the look lives on the faces */
  border:none!important;background:none!important;box-shadow:none!important;padding:0!important}
.cg-pos:has(.cg-card:hover),.cg-pos:has(.cg-card.on){z-index:20}
.cg-spin{width:100%;height:100%;animation:cg-spin-rev 300s linear infinite}
/* No flip any more. A 112x124 card cannot hold a description — the flip showed
   six clamped lines at 9.5px, which promises information rather than giving it.
   Click now opens the surface as a real panel in the ring's middle, the same
   gesture on desktop and phone. transition:none is mandatory: transform carries
   the panel's POSITION, and a position that arrives via a transition is wrong
   until it finishes and never arrives at all where frames are throttled. */
.cg-in{position:relative;width:100%;height:100%;border-radius:14px;transform-style:flat;
  transition:none}
.cg-f{position:absolute;inset:0;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--cyan) 15%,transparent);
  background:var(--surface,linear-gradient(180deg,rgba(24,35,53,.72),rgba(11,19,31,.72)));
  /* On a #070B12 page a drop shadow is invisible — it has nothing to darken.
     Elevation on dark comes from the EDGE: a top rim catching light plus a
     machined inner ring. The shadow stays only to lift the card off the
     shader glow behind it. On cream the reverse holds, so light.css swaps it. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 0 0 1px color-mix(in srgb,var(--cyan) 9%,transparent),
    0 1px 2px rgba(3,6,10,.40),0 16px 34px -12px rgba(3,6,10,.65);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:14px 12px;text-align:center;overflow:hidden}
.cg-f svg{width:24px;height:24px;color:var(--cyan);flex:none;box-sizing:content-box;
  padding:9px;border-radius:50%;background:color-mix(in srgb,var(--cyan) 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cyan) 26%,transparent)}
/* the hairline orbit track is gone: behind the cards it showed only in the gaps, reading as a line across the ring */
/* Keyboard focus needs its own, louder signal — the hover treatment is too
   quiet to serve as a focus indicator, and these cards are the only way into
   eighteen descriptions. */
.cg-card:focus-visible{outline:none}
.cg-pos:has(.cg-card:focus-visible){z-index:20}
.cg-pos:has(.cg-card:focus-visible) .cg-f{
  border-color:color-mix(in srgb,var(--cyan) 62%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
    0 2px 4px rgba(3,6,10,.40),0 22px 46px -12px rgba(3,6,10,.70),
    0 0 0 3px color-mix(in srgb,var(--cyan) 48%,transparent)}
/* the surface under the pointer reads as live: brand edge, deeper lift */
.cg-pos:has(.cg-card:hover) .cg-f,.cg-pos:has(.cg-card.on) .cg-f{
  border-color:color-mix(in srgb,var(--cyan) 46%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 0 0 1px color-mix(in srgb,var(--cyan) 20%,transparent),
    0 2px 4px rgba(3,6,10,.40),0 22px 46px -12px rgba(3,6,10,.70),
    0 0 0 4px color-mix(in srgb,var(--cyan) 10%,transparent)}
/* "Nucleul" is the thing every other card plugs into, so it must not look like
   the seventeen surfaces around it. One tint, one warmer rim — nothing more. */
.cg-stage .eco.core .cg-f{
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 11%,transparent),transparent),
    var(--surface,linear-gradient(180deg,rgba(24,35,53,.72),rgba(11,19,31,.72)));
  border-color:color-mix(in srgb,var(--cyan) 36%,transparent)}
.cg-stage .eco.core .cg-f svg{background:color-mix(in srgb,var(--cyan) 20%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cyan) 42%,transparent)}
.cg-stage .cg-front h3{font-family:var(--disp);font-weight:600;font-size:13px;line-height:1.2;
  letter-spacing:-.01em;color:var(--mist);margin:11px 0 0;text-wrap:balance}
/* the description lives in the panel, never on the card face */
.cg-stage .cg-back{position:absolute;width:1px;height:1px;padding:0;margin:0;border:none;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;transform:none;background:none}
.cg-stage .cg-back p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}

/* ── the open panel ──────────────────────────────────────────────────────────
   Position comes from anchor() in JS: .cg-in sits under .cg-pos (translated onto
   the ring) and .cg-spin (counter-rotating), so only a measurement knows the
   delta back to the middle. The --void scrim keeps the panel opaque over the
   shader; --surface alone is translucent and the core bled through. */
.cg-card.on .cg-in{position:absolute;left:50%;top:50%;width:360px;height:auto;z-index:40;
  border-radius:18px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--cyan) 26%,transparent);
  background:linear-gradient(color-mix(in srgb,var(--void) 86%,transparent),
    color-mix(in srgb,var(--void) 86%,transparent)),
    var(--surface,linear-gradient(180deg,rgba(24,35,53,.72),rgba(11,19,31,.72)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 6px rgba(3,6,10,.42),0 32px 74px -18px rgba(3,6,10,.74)}
.cg-card.on .cg-f{position:relative;inset:auto;width:auto;height:auto;overflow:visible;
  clip-path:none;white-space:normal;border:none;background:none;box-shadow:none;border-radius:0}
.cg-card.on .cg-front{padding:22px 22px 15px}
.cg-card.on .cg-back{display:flex;padding:15px 22px 22px;
  border-top:1px solid color-mix(in srgb,var(--cyan) 22%,transparent)}
.cg-card.on .cg-f svg{width:26px;height:26px;padding:11px}
.cg-stage .cg-card.on .cg-front h3{font-size:18px;margin:13px 0 0}
/* the socket the card left behind, so the ring stays whole and you can see
   which surface the panel came from */
.cg-card.on::after{content:"";position:absolute;inset:0;border-radius:14px;
  border:1.5px dashed color-mix(in srgb,var(--cyan) 42%,transparent);
  background:color-mix(in srgb,var(--cyan) 6%,transparent)}
/* the heading steps aside for the panel, and the ring stops so the panel does
   not drift out from under the cursor */
.cg-stage:has(.cg-card.on) .cg-mid{opacity:0;transition:opacity .22s ease}
.cg-stage:has(.cg-card.on) .cg-ring,.cg-stage:has(.cg-card.on) .cg-spin{animation-play-state:paused}
.cg-hint{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:18px}

@keyframes cg-spin{to{transform:rotate(360deg)}}
@keyframes cg-spin-rev{to{transform:rotate(-360deg)}}
.cg-stage.paused .cg-ring,.cg-stage.paused .cg-spin{animation-play-state:paused}

@media(max-width:960px){.cg-stage{--cg-w:96px;--cg-h:108px}
  .cg-stage .cg-front h3{font-size:11.5px}.cg-stage .cg-back p{-webkit-line-clamp:4}}
/* ── PHONE: the ring becomes a two-column grid of LABELLED cards ─────────────
   The previous phone layout kept the ring and shrank every card to a 46px icon
   node, because 18 nodes on a 343px circle get ~51px of arc each and a title
   has nowhere to go. But an unlabelled icon says nothing: the section read as
   eighteen anonymous bubbles, each needing a tap to identify, with the orbit
   hairline running through their centres like a scratch across them.
   Below 701px the circle is dropped: icon + title, two per row, tap unfolds the
   description in place. The ring is a desktop idea; it does not survive 375px. */
@media(max-width:700px){
  /* A column, in the order the section argues: the heading, then the core, then
     the surfaces that run on it. The DOM order is core → heading → ring, so the
     order property carries the layout and the markup stays untouched. */
  .cg-stage{width:100%;aspect-ratio:auto;margin-top:18px;
    display:flex;flex-direction:column}
  .cg-mid{order:1}.cg-core{order:2}.cg-ring{order:3}
  /* the heading moves ABOVE the grid — there is no middle left to sit in */
  .cg-mid{position:static;padding:0}
  /* no text sits on the disc here, so the contrast veil has nothing to do */
  .cg-mid::before{display:none}
  .cg-mid .sec-head h2{font-size:clamp(20px,6.6vw,28px)}
  .cg-mid .sec-head p{font-size:13.5px}

  /* .cg-pos carries an inline `rotate() translateY() rotate()` on desktop —
     place() clears it below 701px, and these reset the ring's own geometry */
  .cg-ring{position:relative;inset:auto;width:100%;aspect-ratio:auto;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
    margin-top:18px;animation:none}
  .cg-pos{position:relative;left:auto;top:auto;width:auto;height:auto;margin:0;
    display:flex}
  /* the flex chain is what makes both cards in a row the same height */
  .cg-stage .cg-card,.cg-spin,.cg-in{display:flex;width:100%;height:auto;
    animation:none}
  .cg-in{flex-direction:column;border-radius:14px}
  .cg-f{position:relative;inset:auto;flex:1;border-radius:14px;
    padding:15px 11px 14px;min-height:104px}
  .cg-f svg{width:22px;height:22px;padding:8px}
  /* the title is the whole point of this layout, so it comes out of the clip */
  .cg-stage .cg-front h3{position:static;width:auto;height:auto;overflow:visible;
    clip-path:none;white-space:normal;font-size:12.5px;line-height:1.25;margin:10px 0 0}

  /* open: the card takes the full row and unfolds the description underneath.
     It never travels, so nothing here is animated and nothing is measured. */
  .cg-pos:has(.cg-card.on){grid-column:1 / -1}
  .cg-card.on .cg-in{position:relative;left:auto;top:auto;width:100%;height:auto;
    z-index:auto;border-radius:16px;transform:none!important}
  .cg-card.on .cg-f{flex:none}
  /* light.css rings .cg-f with a 1px edge whenever a card is open; on a panel
     that is now one column of two faces, that draws a box around each half.
     Specificity, not order: light.css is a separate file and may load after. */
  .cg-stage .cg-pos:has(.cg-card.on) .cg-f{box-shadow:none}
  .cg-card.on .cg-front{padding:17px 16px 12px}
  .cg-card.on .cg-back{padding:12px 16px 16px}
  .cg-card.on .cg-f svg{width:24px;height:24px;padding:10px}
  .cg-stage .cg-card.on .cg-front h3{font-size:15px;margin:10px 0 0}
  .cg-stage .cg-card.on .cg-back p{font-size:12.5px;line-height:1.55}
  /* no dashed socket: the card never leaves its slot at this size */
  .cg-card.on::after{display:none}
  /* the heading sits above the grid, so an open card never collides with it */
  .cg-stage:has(.cg-card.on) .cg-mid{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .cg-ring,.cg-spin{animation:none!important}
  .cg-in{transition:none}
}

/* ═══ ring core — raymarched shader disc ═══════════════════════════════════
   Sits behind the section heading, inside the ring's free centre. Everything
   about it is bounded on purpose: the shader costs ~640 loop iterations per
   pixel, so it gets a small disc, DPR 1, and it stops whenever nobody's
   looking. */
.cg-core{position:absolute;left:50%;top:50%;width:min(52%,420px);aspect-ratio:1/1;
  transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;z-index:1;
  pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  -webkit-mask-image:radial-gradient(circle,#000 55%,rgba(0,0,0,.55) 76%,transparent 100%);
  mask-image:radial-gradient(circle,#000 55%,rgba(0,0,0,.55) 76%,transparent 100%)}
.cg-core.on{opacity:.85}
.cg-core canvas{display:block;width:100%;height:100%}
/* the heading sits on this, so it gets a veil sized to the text block */
/* Measured, not guessed: the shader disc has a 210px radius and the heading block
   needs 275px to be fully backed. They are the same space, and the text is the
   BIGGER of the two — so no opaque disc can protect the copy and still leave the
   animation visible. The lens shape was the wrong idea here; what works is a soft
   veil shaped to the TEXT, weak enough that the filaments read straight through
   it. Keyed to --void so it flips with the theme, and light.css turns it up,
   because there the copy is dark and the filaments are dark too. */
.cg-mid::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(66%,540px);aspect-ratio:1.5/1;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,
    color-mix(in srgb, var(--void) 46%, transparent) 28%,
    color-mix(in srgb, var(--void) 22%, transparent) 60%,
    transparent 100%)}
/* On a phone the ring is a grid, so there is no free centre to sit in. The disc
   moves behind the heading block instead — JS sets its `top` from .cg-mid's box,
   because .cg-core is a sibling and CSS cannot measure that. */
/* Phone: the ring is back, so the disc goes back to its middle. It has to clear
   the icon nodes — free radius is ring/2 − 26 (node centre) − 23 (node half), so
   ~122px on a 375px screen. 205px of disc sits inside that with room to spare. */
/* No ring on a phone means no free centre to sit in — so the disc stops being a
   backdrop and becomes a band of its own between the heading and the surfaces.
   Nothing overlaps it and no text sits on it, so it needs neither a veil nor a
   stacking trick, and it can run larger than the 205px it had inside the ring. */
@media(max-width:700px){
  /* On a phone the nucleus stands on its own between the heading and the grid,
     with nothing around it — so it has to carry its own structure. The hairline
     at its edge is the orbit the section keeps talking about; the wider ring and
     the glow seat it in the page instead of leaving it a cut-out floating in
     black. Shadows, not a pseudo-element: box-shadow paints OUTSIDE the border
     box, so `overflow:hidden` (which clips the canvas) cannot eat it. */
  .cg-core{position:relative;left:auto;top:auto;transform:none;z-index:0;
    width:min(56vw,206px);margin:30px auto 6px;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--cyan) 17%, transparent),
      0 0 0 10px color-mix(in srgb, var(--cyan) 5%, transparent),
      0 0 64px 8px color-mix(in srgb, var(--cyan) 13%, transparent)}
}
@media(prefers-reduced-motion:reduce){.cg-core{display:none}}

/* Mobile ecosystem: the shader disc looked like a broken image on a light
   phone screen and added no information. The core is already the first card,
   so phones get a compact, scannable system map instead. */
@media(max-width:700px){
  #ecosystem{padding-top:58px;padding-bottom:58px}
  #ecosystem .cg-stage{margin-top:0}
  /* Nucleul ramane vizibil si pe telefon. Fusese ascuns fiindca "arata ca o
     imagine rupta" — acela era bug-ul panzei de 1x1, reparat intre timp:
     size() masura 0 inainte de layout si ingheta acolo. */
  #ecosystem .cg-mid .sec-head{max-width:34rem;margin-inline:auto}
  #ecosystem .cg-mid .sec-head h2{font-size:clamp(28px,8.2vw,38px);line-height:1.02}
  #ecosystem .cg-mid .sec-head p{font-size:14.5px;line-height:1.6;margin-top:14px}
  #ecosystem .cg-ring{gap:8px;margin-top:22px}
  #ecosystem .cg-f{min-height:88px;padding:12px 8px 11px;border-radius:13px}
  #ecosystem .cg-f svg{width:19px;height:19px;padding:7px}
  #ecosystem .cg-stage .cg-front h3{font-size:11.5px;line-height:1.2;margin-top:8px}
  #ecosystem .cg-in{border-radius:13px}
  #ecosystem .cg-pos:has(.cg-card.on){grid-column:1/-1}
  #ecosystem .cg-card.on .cg-front{padding:14px 14px 10px}
  #ecosystem .cg-card.on .cg-back{padding:10px 14px 14px}
  #ecosystem .cg-stage .cg-card.on .cg-front h3{font-size:14px;margin-top:8px}
  #ecosystem .cg-stage .cg-card.on .cg-back p{font-size:12px;line-height:1.5}
  #hx-launch{right:12px!important;bottom:12px!important;width:50px!important;height:50px!important;
    padding:0!important;justify-content:center!important;font-size:0!important}
  #hx-launch svg{width:21px!important;height:21px!important}
}

/* ── extras din index.html (linia 1010) ── */
.has-sub{position:relative;display:flex;align-items:center}
.nav-sub-btn{background:none;border:none;cursor:pointer;font-size:13.5px;color:var(--muted);font-family:inherit;padding:0;transition:color .2s;display:inline-flex;align-items:center;gap:5px}
.nav-sub-btn::after{content:"▾";font-size:9px;opacity:.7;transition:transform .2s}
.nav-sub-btn:hover{color:var(--mist)}
.has-sub.open .nav-sub-btn::after{transform:rotate(180deg)}
.sub-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:14px;display:none;z-index:60}
.has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu,.has-sub.open .sub-menu{display:block}
.sub-menu-inner{min-width:200px;background:rgba(7,11,18,.97);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:8px;box-shadow:0 22px 50px rgba(0,0,0,.55)}
.sub-menu-inner a{display:block;padding:9px 12px;border-radius:9px;font-size:13.5px;color:var(--muted)}
.sub-menu-inner a:hover{color:var(--mist);background:rgba(255,255,255,.05)}
@media(max-width:820px){
 header.nav.open .nav-links .has-sub{display:block;position:static}
 header.nav.open .nav-links .nav-sub-btn{display:none}
 header.nav.open .nav-links .sub-menu{position:static;transform:none;display:block;padding-top:0}
 header.nav.open .nav-links .sub-menu-inner{background:none;border:none;box-shadow:none;padding:0;min-width:0}
 .has-sub .sub-menu{left:0;transform:none}
}

/* ── extras din index.html (linia 1029) ── */
/* ═══ DC-NAV2, header redesign: mega-menu + popover mobil (port navigation-menu-4) ═══ */
.nav .wrap{gap:18px}
.nav-left{display:flex;align-items:center;gap:22px;min-width:0}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-links{gap:2px}
.nav-links>a:not(.btn){padding:7px 10px;border-radius:9px;transition:color .2s,background .15s}
.nav-links>a:not(.btn):hover{background:rgba(255,255,255,.05)}
.nav-links a:not(.btn)::after{display:none}
.nav-sub-btn{display:inline-flex;align-items:center;gap:5px;background:transparent;border:0;cursor:pointer;font-family:var(--body);font-size:13.5px;color:var(--muted);padding:7px 10px;border-radius:9px;transition:color .2s,background .15s;line-height:1.45}
.nav-links .has-sub .nav-sub-btn::after{content:none}
.has-sub:hover .nav-sub-btn,.has-sub.open .nav-sub-btn,.nav-sub-btn:hover{color:var(--mist);background:rgba(255,255,255,.05)}
.nav-chev{flex:none;opacity:.7;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.has-sub:hover .nav-chev,.has-sub.open .nav-chev,.has-sub:focus-within .nav-chev{transform:rotate(180deg)}
.has-sub{position:relative}
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:12px;display:none;z-index:60}
.has-sub:hover .mega,.has-sub:focus-within .mega,.has-sub.open .mega{display:block}
.mega-inner{width:min(620px,calc(100vw - 28px));display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;background:rgba(7,11,18,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:12px;box-shadow:0 22px 50px rgba(0,0,0,.55);transform-origin:top center;animation:dcMegaIn .18s cubic-bezier(.2,.7,.2,1)}
@keyframes dcMegaIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.mega-col{display:flex;flex-direction:column;gap:1px;min-width:0}
.mega-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:6px 10px 7px}
.mm-item{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:10px;transition:background .15s}
.mm-item:hover,.mm-item:focus-visible{background:rgba(255,255,255,.05)}
.mm-ic{flex:none;margin-top:2px;color:var(--cyan);opacity:.85}
.mm-tx{display:block;min-width:0}
.mm-l{display:block;font-size:13.5px;font-weight:500;color:var(--mist);line-height:1.25}
.mm-d{display:block;font-size:12px;color:var(--muted);line-height:1.35;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-item:hover .mm-l{color:var(--glow)}
.nav-burger{position:relative}
.nav-burger span{position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;background:var(--mist);border-radius:2px;transition:transform .3s cubic-bezier(.5,.85,.25,1.1),opacity .2s ease}
.nav-burger span:nth-child(1){transform:translateY(-6px)}
.nav-burger span:nth-child(2){transition-timing-function:cubic-bezier(.5,.85,.25,1.8),ease}
.nav-burger span:nth-child(3){transform:translateY(6px)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:rotate(315deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:rotate(135deg)}
.nav-pop{position:absolute;top:calc(100% + 8px);right:14px;width:min(300px,calc(100vw - 24px));max-height:calc(100dvh - 92px);overflow-y:auto;-webkit-overflow-scrolling:touch;background:rgba(7,11,18,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:6px;box-shadow:0 22px 50px rgba(0,0,0,.55);z-index:70;transform-origin:top right;animation:dcPopIn .18s cubic-bezier(.2,.7,.2,1)}
@keyframes dcPopIn{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
.nav-pop[hidden]{display:none}
.npop-l{display:block;padding:9px 10px;border-radius:9px;font-size:14px;color:var(--mist);transition:background .15s}
.npop-l:hover{background:rgba(255,255,255,.05)}
.npop-g .npop-l{font-size:13.5px;padding:7px 10px}
.npop-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:9px 10px 4px}
.npop-sep{height:1px;background:var(--hair);margin:5px 4px}
.npop-tools{display:flex;gap:8px;padding:8px 4px 4px;margin-top:4px;border-top:1px solid var(--hair)}
.npop-t{flex:1;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mist);background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:9px;padding:9px 10px;cursor:pointer;line-height:1;text-align:center}
.npop-t:hover{border-color:rgba(43,199,210,.4);background:rgba(43,199,210,.08)}
.nav-right .btn-primary{padding:9px 18px;font-size:13.5px}
@media(max-width:1020px){.nav-left{gap:12px}.nav-links>a:not(.btn),.nav-sub-btn{padding:7px 7px;font-size:13px}.nav-right{gap:8px}.nav-right .btn-primary{padding:8px 13px;font-size:12.5px}}
@media(min-width:861px){.nav-burger{display:none}.nav-pop{display:none!important}}
@media(max-width:860px){.nav-links{display:none}.nav-burger{display:flex}.nav-right{gap:8px}.nav-right .btn-primary{padding:8px 14px;font-size:13px}.nav-pop{animation:none}body.dc-npop #hx-launch{opacity:0;pointer-events:none}}
@media(max-width:400px){.nav-right .btn-primary{padding:8px 11px;font-size:12px;letter-spacing:0}}
/* With the switch in the bar the row is logo + switch + CTA + burger. Measured
   at 375px with the Romanian CTA ("Programează un demo"): it overflowed and the
   switch sat 4px ON the logo. So the switch steps down to 36px and the CTA gives
   up padding; nowrap keeps it on one line, or the bar grows a second row.
   This has to come AFTER the 400px rule above, or that rule wins. */
@media(max-width:420px){
  #siteTheme{width:36px;height:36px;font-size:14.5px;border-radius:10px}
  .nav-right{gap:5px}
  .nav-right .btn-primary{padding:8px 8px;font-size:11.5px;letter-spacing:0;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.mega-inner,.nav-pop{animation:none}.nav-burger span,.nav-chev{transition:none}}
/* dcNav3 */
.has-sub .mega{left:0;transform:none}
/* loc mega opens to the right, same as solutions */
.mega-inner{width:min(640px,calc(100vw - 28px))}
.mega-h-span{grid-column:1/-1}
.mega-foot{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:6px;padding:8px 10px 2px;border-top:1px solid var(--hair)}
.mega-foot a{font-size:13px;font-weight:500;color:var(--cyan)}
.mega-foot a:hover{color:var(--glow)}
@media(max-width:1240px){.nav-links>a[href="product.html"]{display:none}}
@media(max-width:1140px){.nav-links>a[href="faq.html"],.nav-links>a[href*="migrare-gloriafood"]{display:none}}
/* ═══ /DC-NAV2 ═══ */