/* Wipra One - brand site prototype (W-129)
   Theme "A Classic": white + purple, with a dark theme.
   Mobile-first. No raster images. All visuals are CSS, inline SVG or WebGL. */

@font-face{
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:300 700;
  font-display:optional;
  src:url(../fonts/space-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- tokens ---------- */
:root{
  color-scheme:light;
  --bg:#ffffff;
  --bg-soft:#f7f4ff;
  --surface:#ffffff;
  --surface-2:#f3eeff;
  --line:#e7e1f7;
  --line-2:#d6ccf2;
  --ink:#140f26;
  --ink-2:#3b3556;
  --muted:#5f5979;
  --brand:#6a2ee0;
  --brand-strong:#5220c2;
  --brand-soft:#efe8ff;
  --on-brand:#ffffff;
  --accent:#b3179f;
  --accent-2:#0e7490;
  --ok:#0b7a43;
  --danger:#c81e1e;
  --btn-grad:linear-gradient(135deg,#5b21d6 0%,#7a36f0 60%,#8f3fe8 100%);
  --text-grad:linear-gradient(100deg,#4c1db8 0%,#7c2ff0 45%,#b3179f 100%);
  --band-bg:linear-gradient(135deg,#1a0f3d 0%,#2b1466 55%,#4a1a78 100%);
  --shadow-1:0 1px 2px rgba(20,15,38,.06),0 6px 20px rgba(80,40,160,.07);
  --shadow-2:0 18px 50px rgba(80,40,160,.16);
  --glass:rgba(255,255,255,.78);
  --hero-bg:
    radial-gradient(60% 55% at 74% 36%,#ece2ff 0%,rgba(236,226,255,0) 64%),
    radial-gradient(45% 45% at 8% 92%,#f5eeff 0%,rgba(245,238,255,0) 70%),
    linear-gradient(180deg,#ffffff 0%,#fbf9ff 100%);
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:28px;
  --hdr:64px;
  --wrap:1200px;
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  /* product colours (match the 3D nodes) */
  --c-broadband:#6d28d9;
  --c-calling:#0e7490;
  --c-wcam:#e11d48;
  --c-ott:#c2410c;
  --c-ai:#c026d3;
  --c-cloud:#64748b;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0615;
  --bg-soft:#0f0a20;
  --surface:#141029;
  --surface-2:#1c1538;
  --line:#2a2248;
  --line-2:#3b3163;
  --ink:#f4f0ff;
  --ink-2:#d3cbee;
  --muted:#a69fc8;
  --brand:#a47bff;
  --brand-strong:#c0a3ff;
  --brand-soft:#221946;
  --on-brand:#ffffff;
  --accent:#f0abfc;
  --accent-2:#67e8f9;
  --ok:#4ade80;
  --danger:#f87171;
  --text-grad:linear-gradient(100deg,#c4b5fd 0%,#a78bfa 40%,#f0abfc 100%);
  --band-bg:linear-gradient(135deg,#150b33 0%,#241057 55%,#3a1464 100%);
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.25);
  --shadow-2:0 20px 60px rgba(0,0,0,.45);
  --glass:rgba(12,8,26,.72);
  --hero-bg:
    radial-gradient(60% 55% at 74% 36%,#2a1560 0%,rgba(42,21,96,0) 64%),
    radial-gradient(45% 45% at 8% 92%,#1a0f3d 0%,rgba(26,15,61,0) 70%),
    linear-gradient(180deg,#07040f 0%,#0a0615 100%);
  --c-broadband:#a78bfa;
  --c-calling:#22d3ee;
  --c-wcam:#fb7185;
  --c-ott:#fbbf24;
  --c-ai:#e879f9;
  --c-cloud:#94a3b8;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 8px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brand-strong)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.1;letter-spacing:-.02em;margin:0 0 .5em;font-weight:650}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--brand);color:var(--on-brand);padding:10px 16px;border-radius:10px;font-weight:600}
.skip:focus{top:12px;color:var(--on-brand)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon.sm{width:18px;height:18px}
.grad-text{background:var(--text-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons, chips, badges ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:1rem;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
.btn-primary{background:var(--btn-grad);color:#fff;box-shadow:0 8px 24px rgba(91,33,214,.28)}
.btn-primary:hover{color:#fff;transform:translateY(-1px);box-shadow:0 12px 30px rgba(91,33,214,.36)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{color:var(--ink);border-color:var(--brand);background:var(--brand-soft)}
.btn-soft{background:var(--brand-soft);color:var(--brand-strong)}
.btn-soft:hover{color:var(--brand-strong);background:var(--surface-2)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.94rem}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.icon-btn:hover{border-color:var(--brand);color:var(--brand)}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;font:600 .78rem/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--brand-soft);color:var(--brand-strong)}
.badge.soon{background:rgba(100,116,139,.14);color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.92rem;font-weight:500;color:var(--ink-2)}
.chip.lang{font-size:.86rem;padding:6px 12px}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;height:var(--hdr);z-index:50;background:transparent;transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;border-bottom:1px solid transparent}
.hdr.is-solid{background:var(--glass);border-bottom-color:var(--line);box-shadow:0 4px 20px rgba(20,10,50,.05)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hdr.is-solid{-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:16px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 1.18rem/1 var(--font-display);letter-spacing:-.01em}
.logo:hover{color:var(--ink)}
.logo svg{width:34px;height:34px}
.logo b{font-weight:700;color:var(--brand)}
.nav{display:none;margin-left:12px}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--ink-2);text-decoration:none;font-weight:500;font-size:.95rem;padding:0 11px;border-radius:10px}
.nav a:hover{color:var(--ink);background:var(--brand-soft)}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.hdr-actions .btn-sign{display:none}
.menu-btn{display:inline-grid}
@media (min-width:1080px){
  .nav{display:flex;gap:2px}
  .menu-btn{display:none}
  .hdr-actions .btn-sign{display:inline-flex}
}
@media (min-width:560px){.hdr-actions .btn-sign{display:inline-flex}}
.sheet{position:fixed;inset:var(--hdr) 0 auto 0;z-index:49;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-2);padding:12px 20px 22px;display:none}
.sheet.is-open{display:block}
.sheet a{display:flex;align-items:center;gap:12px;padding:13px 6px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500}
.sheet a .icon{color:var(--brand)}
.sheet .sheet-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.sheet .sheet-cta a{border:0;justify-content:center;padding:0}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;background:var(--hero-bg);overflow:hidden;padding-top:var(--hdr);display:flex;flex-direction:column;isolation:isolate}
.hero-track{position:relative}
.hero.is-sticky{position:sticky;top:0}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.hero.is-3d .hero-canvas{opacity:1}
.hero-inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:8px;padding-bottom:36px}
.hero{--vis:min(84vw,380px)}
.hero-visual{position:relative;width:var(--vis);aspect-ratio:1/1;margin:0 auto 4px;flex:none}
.poster{width:100%;height:100%;overflow:visible;transition:opacity .9s ease}
.hero.is-3d .poster{opacity:0}
.hero-copy{position:relative;max-width:620px}
.hero h1{font-size:clamp(2.2rem,8.4vw,4.6rem);font-weight:650;letter-spacing:-.035em;margin-bottom:.35em}
.hero h1 .line{display:block}
.hero-sub{font-size:clamp(1.02rem,3.9vw,1.25rem);color:var(--ink-2);max-width:34em;margin-bottom:24px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.brandline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 .96rem/1.3 var(--font-display);color:var(--ink-2)}
.brandline b{font-weight:700;color:var(--ink)}
.brandline .dot{width:5px;height:5px;border-radius:50%;background:var(--brand);opacity:.6}
.hero-eyebrow{margin-bottom:16px}
@media (max-width:719px) and (max-height:720px){.hero{--vis:min(56vw,220px)}.poster-pos .nlabel{font-size:.64rem;padding:3px 7px 3px 6px;gap:5px}.poster-pos .nlabel i{width:6px;height:6px}.poster-pos .nlabel.soon em{display:none}}
@media (min-width:1024px){
  .hero-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:40px}
  .hero-copy{order:1;flex:1 1 52%}
  .hero-visual{order:2;width:min(44vw,580px);margin:0}
}

/* node labels (poster + 3D) */
.node-labels{position:absolute;inset:0;pointer-events:none}
.nlabel{position:absolute;left:var(--x);top:var(--y);display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 8px;border-radius:999px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow-1);font:600 .78rem/1 var(--font-display);color:var(--ink);white-space:nowrap;transform:translate(-50%,-50%);transition:opacity .35s ease,box-shadow .35s ease,border-color .35s ease}
.nlabel i{width:8px;height:8px;border-radius:50%;background:var(--nc);box-shadow:0 0 0 3px color-mix(in srgb,var(--nc) 22%,transparent)}
.nlabel.soon{color:var(--muted)}
.nlabel.soon em{font-style:normal;font-weight:500;color:var(--muted)}
@media (min-width:720px){.nlabel{font-size:.84rem;padding:6px 12px 6px 9px}}
.n-broadband{--nc:var(--c-broadband)}
.n-calling{--nc:var(--c-calling)}
.n-wcam{--nc:var(--c-wcam)}
.n-ott{--nc:var(--c-ott)}
.n-ai{--nc:var(--c-ai)}
.n-cloud{--nc:var(--c-cloud)}
/* poster label positions (generated by tools/gen-poster.mjs) */
/*poster-pos:start*/
.poster-pos .n-broadband{--x:20.4%;--y:56.2%}
.poster-pos .n-calling{--x:79.6%;--y:43.8%}
.poster-pos .n-wcam{--x:29.2%;--y:32.6%}
.poster-pos .n-ott{--x:78.3%;--y:66.2%}
.poster-pos .n-ai{--x:25.3%;--y:68.8%}
.poster-pos .n-cloud{--x:74.7%;--y:31.2%}
/*poster-pos:end*/
/* poster SVG paint (theme-aware; classes instead of inline styles so a strict CSP works) */
.ps-h0{stop-color:#8b5cf6;stop-opacity:.30}
.ps-h1{stop-color:#8b5cf6;stop-opacity:0}
.ps-c0{stop-color:#efe6ff}
.ps-c1{stop-color:#9d6bff}
.ps-c2{stop-color:#5b21b6}
.ps-c3{stop-color:#2e1065}
.ps-o0{stop-color:#6a2ee0}
.ps-o1{stop-color:#c026d3}
.p-net line{stroke:var(--brand);stroke-width:.8;opacity:.18}
.p-net circle{fill:var(--brand);opacity:.45}
.p-orbits ellipse{stroke:url(#pg-orb);stroke-width:1.5;opacity:.6}
.p-beams line{stroke:var(--brand);stroke-width:1;opacity:.22;stroke-dasharray:3 5}
.p-shell{stroke:var(--brand);stroke-width:1;opacity:.28;stroke-dasharray:2 6}
.p-lat{stroke:#fff;stroke-width:1;opacity:.2}
.p-spec{fill:#fff;opacity:.38}
.p-node circle{fill:var(--nc)}
.p-node .p-node-glow{opacity:.3}
.p-node.far{opacity:.6}
[data-theme="dark"] .ps-h0{stop-color:#7c3aed;stop-opacity:.5}
[data-theme="dark"] .ps-c0{stop-color:#fbe7ff}
[data-theme="dark"] .ps-c1{stop-color:#b794ff}
[data-theme="dark"] .ps-c2{stop-color:#6d28d9}
[data-theme="dark"] .ps-c3{stop-color:#1e0b4b}
[data-theme="dark"] .ps-o0{stop-color:#a78bfa}
[data-theme="dark"] .ps-o1{stop-color:#f0abfc}
[data-theme="dark"] .p-net line{opacity:.24}
[data-theme="dark"] .p-net circle{opacity:.75}
/* 3D mode: labels are moved into the hero and positioned by transform */
.hero-labels{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-labels .nlabel{left:0;top:0;transform:none;will-change:transform,opacity}
.hero-labels .nlabel.is-focus{border-color:var(--nc);box-shadow:0 0 0 4px color-mix(in srgb,var(--nc) 20%,transparent),var(--shadow-1)}
@media (max-width:719px){.hero-labels .nlabel:not(.is-focus){font-size:.72rem;padding:4px 8px 4px 7px}}

/* The poster is deliberately static: SVG-internal animations repaint every frame on low-end phones. */

/* 3D scroll stage (only visible in 3D mode) */
.stage{position:absolute;top:0;left:0;right:0;height:100vh;height:100svh;z-index:2;pointer-events:none}
.stage-card{position:absolute;left:20px;right:20px;bottom:max(28px,4svh);max-width:520px;opacity:0;visibility:hidden}
.stage-card .k{display:block;font:700 clamp(2rem,7.6vw,3.6rem)/1.05 var(--font-display);letter-spacing:-.03em;margin-bottom:10px}
.stage-card p{font-size:clamp(1rem,3.6vw,1.2rem);color:var(--ink-2);margin:0;max-width:28em}
.stage-card .btn{pointer-events:auto;margin-top:18px}
@media (max-width:1023px){.stage-card{top:calc(var(--hdr) + 8px + var(--vis) + 18px);bottom:auto}}
.stage-card.final .k{background:var(--text-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (min-width:1024px){
  .stage-card{left:max(20px,calc((100vw - var(--wrap))/2 + 20px));right:auto;top:50%;bottom:auto;transform:translateY(-50%);max-width:480px}
}
.scroll-hint{position:absolute;left:50%;bottom:16px;z-index:2;transform:translateX(-50%);display:none;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero.is-3d .scroll-hint{display:inline-flex}
.scroll-hint span{width:18px;height:28px;border:2px solid currentColor;border-radius:10px;position:relative}
.scroll-hint span::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:currentColor}
@media (prefers-reduced-motion:no-preference){.scroll-hint span::after{animation:wheel 1.8s ease-in-out infinite}}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(9px)}}
@media (max-width:1023px){.hero.is-3d .scroll-hint{display:none}}

/* ---------- sections ---------- */
.section{padding:clamp(64px,10vw,120px) 0;position:relative}
.section.alt{background:var(--bg-soft)}
.below{content-visibility:auto;contain-intrinsic-size:auto 900px}
.sec-head{max-width:760px;margin-bottom:clamp(28px,5vw,52px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(1.9rem,5.6vw,3.2rem)}
.sec-head p{font-size:clamp(1rem,2.6vw,1.16rem);color:var(--ink-2);margin:0}
.split{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:960px){.split{grid-template-columns:1fr 1fr}.split.flip>:first-child{order:2}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-1)}
.tile-ico{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;color:#fff;background:var(--tc,var(--brand));box-shadow:0 8px 20px color-mix(in srgb,var(--tc,var(--brand)) 30%,transparent)}
.tile-ico .icon{width:24px;height:24px}

/* product rail */
.rail{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.rail{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.rail{grid-template-columns:repeat(3,1fr);gap:18px}}
.pcard{position:relative;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-1);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;overflow:hidden}
.pcard::after{content:"";position:absolute;inset:auto -30% -60% auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tc) 18%,transparent) 0%,transparent 70%);pointer-events:none}
.pcard:hover{color:var(--ink);transform:translateY(-3px);border-color:color-mix(in srgb,var(--tc) 45%,var(--line));box-shadow:var(--shadow-2)}
.pcard h3{font-size:1.28rem;margin:0}
.pcard p{color:var(--ink-2);margin:0;font-size:.98rem}
.pcard .more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--brand);font-size:.95rem}
.pcard .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pcard.soon{background:repeating-linear-gradient(135deg,var(--surface) 0 14px,var(--bg-soft) 14px 28px)}
.t-broadband{--tc:var(--c-broadband)}
.t-calling{--tc:var(--c-calling)}
.t-wcam{--tc:var(--c-wcam)}
.t-ott{--tc:var(--c-ott)}
.t-ai{--tc:var(--c-ai)}
.t-cloud{--tc:var(--c-cloud)}

/* feature lists */
.ticks{display:grid;gap:12px;margin:18px 0 24px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.ticks li .icon{color:var(--ok);margin-top:1px;width:20px;height:20px}
.feat{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:560px){.feat{grid-template-columns:1fr 1fr}}
.feat .card{padding:20px;display:flex;gap:14px;align-items:flex-start}
.feat .card h3{font-size:1.04rem;margin:0 0 4px;font-family:var(--font-display)}
.feat .card p{margin:0;color:var(--ink-2);font-size:.95rem}
.feat .fi{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--tc,var(--brand)) 13%,transparent);color:var(--tc,var(--brand))}
.feat .fi .icon{width:22px;height:22px}

/* broadband split */
.bb{display:grid;gap:18px}
@media (min-width:900px){.bb{grid-template-columns:1fr 1fr}}
.bb .card{padding:clamp(22px,4vw,34px);display:flex;flex-direction:column}
.bb .card h3{font-size:1.5rem;margin:14px 0 6px}
.bb .card .lead{color:var(--ink-2);margin:0}
.bb .card .btn{align-self:flex-start;margin-top:auto}
.bb .card.biz{background:linear-gradient(160deg,var(--surface) 0%,var(--surface-2) 100%)}
.seg-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* phone mock (calling) */
.phone{position:relative;width:min(290px,78vw);aspect-ratio:9/18.5;margin:0 auto;border-radius:44px;padding:12px;background:linear-gradient(160deg,#2c2446,#0d0a1a);box-shadow:var(--shadow-2),inset 0 0 0 2px rgba(255,255,255,.08)}
.phone .scr{position:relative;height:100%;border-radius:34px;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#5b2bd9 0%,#26124f 55%,#120a26 100%);color:#fff;display:flex;flex-direction:column;align-items:center;padding:56px 18px 30px;text-align:center}
.phone .notch{position:absolute;top:10px;left:50%;width:86px;height:22px;margin-left:-43px;border-radius:14px;background:#0d0a1a}
.phone .who{margin-top:34px;font:600 1.4rem/1.2 var(--font-display)}
.phone .sub{opacity:.78;font-size:.88rem;margin-top:6px}
.phone .sec{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.78rem;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.12)}
.phone .avatar{position:relative;margin-top:44px;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14)}
.phone .avatar .icon{width:40px;height:40px}
.phone .ring{position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.35);opacity:0}
@media (prefers-reduced-motion:no-preference){html:not(.motion-off) .phone .ring{animation:ringout 2.4s ease-out infinite}html:not(.motion-off) .phone .ring.r2{animation-delay:1.2s}}
@keyframes ringout{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.phone .acts{margin-top:auto;display:flex;justify-content:space-around;width:100%}
.phone .act{width:58px;height:58px;border-radius:50%;display:grid;place-items:center}
.phone .act.no{background:#e5484d}
.phone .act.yes{background:#1faa59}
.phone .act.no .icon{transform:rotate(135deg)}
.phone .act-l{display:block;font-size:.72rem;opacity:.75;margin-top:6px}

/* WCam tile */
.camtile{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-2);background:#0c0a17;aspect-ratio:16/11}
.camtile svg{width:100%;height:100%}
.camtile .hud{position:absolute;left:14px;top:12px;display:flex;gap:8px;align-items:center;font:600 .74rem/1 var(--font-display);letter-spacing:.08em;color:#fff}
.camtile .rec{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.45)}
.camtile .rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff4d5e}
.camtile .alert{position:absolute;right:12px;bottom:12px;left:auto;max-width:78%;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.94);color:#140f26;box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:.84rem;line-height:1.3}
.camtile .alert b{display:block;font-family:var(--font-display)}
.camtile .alert .icon{color:#e11d48}
.camtile::after{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(180deg,rgba(34,211,238,0),rgba(34,211,238,.10) 70%,rgba(34,211,238,.32));transform:translateY(-100%);pointer-events:none}
@media (prefers-reduced-motion:no-preference){html:not(.motion-off) .camtile::after{animation:scan 5s linear infinite}}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(460%)}}
.privacy{margin-top:clamp(28px,5vw,48px);display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:720px){.privacy{grid-template-columns:repeat(4,1fr)}}
.privacy .card{padding:20px}
.privacy h3{font-size:1.02rem;margin:10px 0 4px}
.privacy p{margin:0;color:var(--ink-2);font-size:.93rem}
.privacy .icon{color:var(--brand)}
.privacy-head{display:flex;align-items:center;gap:10px;margin-top:clamp(36px,6vw,64px)}
.privacy-head h3{margin:0;font-size:1.3rem}

/* OTT */
.ott-grid{display:grid;gap:18px}
@media (min-width:960px){.ott-grid{grid-template-columns:1.25fr 1fr}}
.ott-grid h3{font-size:1.1rem;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.ott-grid h3 .n{font:700 .8rem/1 var(--font-body);padding:4px 8px;border-radius:8px;background:var(--brand-soft);color:var(--brand-strong)}
.apps .chip{font-weight:600;color:var(--ink)}
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:560px){.cats{grid-template-columns:repeat(4,1fr)}}
.cat{position:relative;border-radius:16px;padding:16px 14px;min-height:96px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;color:#fff;overflow:hidden;background:var(--cg)}
.cat .icon{position:absolute;top:12px;right:12px;opacity:.9}
.cat b{font-family:var(--font-display);font-size:1.02rem}
.cat span{font-size:.8rem;opacity:.85}
.cat-live{--cg:linear-gradient(140deg,#6d28d9,#312e81)}
.cat-sports{--cg:linear-gradient(140deg,#0e7490,#1e3a8a)}
.cat-bhakti{--cg:linear-gradient(140deg,#c2410c,#9f1239)}
.cat-kids{--cg:linear-gradient(140deg,#be185d,#6d28d9)}
.cat-more{margin-top:12px;color:var(--ink-2);font-size:.92rem}
.marquee{position:relative;overflow:hidden;margin:6px 0 26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:10px;width:max-content}
@media (prefers-reduced-motion:no-preference){html:not(.motion-off) .marquee .track{animation:slide 46s linear infinite}}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee .chip{background:var(--surface);font-weight:600;color:var(--ink)}
.fineprint{font-size:.82rem;color:var(--muted);margin-top:14px}

/* AI chat mock */
.chat{border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-2);overflow:hidden;max-width:520px;margin:0 auto;width:100%}
.chat-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.chat-h .av{width:40px;height:40px;border-radius:50%;background:var(--btn-grad);display:grid;place-items:center;color:#fff}
.chat-h b{display:block;font-family:var(--font-display)}
.chat-h small{color:var(--muted);display:flex;align-items:center;gap:6px}
.chat-h small::before{content:"";width:7px;height:7px;border-radius:50%;background:#1faa59}
.chat-b{padding:18px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:85%;padding:10px 14px;border-radius:16px;font-size:.95rem;line-height:1.45}
.msg.in{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:6px}
.msg.out{align-self:flex-end;background:var(--btn-grad);color:#fff;border-bottom-right-radius:6px}
.msg small{display:block;font-size:.72rem;opacity:.7;margin-top:4px}
.msg.note{align-self:center;background:transparent;border:1px dashed var(--line-2);color:var(--muted);font-size:.82rem;text-align:center}
.typing{display:inline-flex;gap:4px;align-self:flex-start;padding:12px 14px;border-radius:16px;background:var(--surface-2)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5}
@media (prefers-reduced-motion:no-preference){html:not(.motion-off) .typing i{animation:blink 1.2s infinite}html:not(.motion-off) .typing i:nth-child(2){animation-delay:.2s}html:not(.motion-off) .typing i:nth-child(3){animation-delay:.4s}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

/* cloud */
.cloud-card{position:relative;border-radius:var(--radius-lg);padding:clamp(26px,5vw,52px);background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,#6a2ee0,#c026d3,#0e7490) border-box;border:2px solid transparent;box-shadow:var(--shadow-2);display:grid;gap:26px}
@media (min-width:900px){.cloud-card{grid-template-columns:1.2fr 1fr;align-items:center}}
.cloud-card h2{font-size:clamp(1.7rem,4.6vw,2.6rem)}
.cloud-icons{display:flex;gap:12px;margin-bottom:18px}
.inline-form{display:flex;flex-wrap:wrap;gap:10px}
.inline-form input{flex:1 1 220px}

/* why */
.why{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.why{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.why{grid-template-columns:repeat(3,1fr)}}
.why .card h3{font-size:1.14rem;margin:14px 0 6px}
.why .card p{margin:0;color:var(--ink-2)}
.why .card.wide{background:var(--btn-grad);color:#fff;border:0}
.why .card.wide h3{color:#fff}
.why .card.wide p{color:rgba(255,255,255,.88)}
.why .card.wide .tile-ico{background:rgba(255,255,255,.16);box-shadow:none}

/* trust band */
.band{background:var(--band-bg);color:#fff;border-radius:var(--radius-lg);padding:clamp(28px,5vw,56px);position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:-40% -10% auto auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(192,38,211,.35),transparent 65%);pointer-events:none}
.band h2{color:#fff;font-size:clamp(1.7rem,4.6vw,2.6rem);max-width:18em}
.band p{color:rgba(255,255,255,.84)}
.band-grid{position:relative;display:grid;gap:18px;grid-template-columns:1fr 1fr;margin-top:26px}
@media (min-width:900px){.band-grid{grid-template-columns:repeat(4,1fr)}}
.band-grid div{padding:16px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.band-grid b{display:block;font:600 1.02rem/1.25 var(--font-display);margin:10px 0 4px}
.band-grid span{font-size:.88rem;color:rgba(255,255,255,.78)}
.band .founder{position:relative;margin:26px 0 0;font-size:.95rem;color:rgba(255,255,255,.84)}

/* contact + forms */
.contact{display:grid;gap:22px}
@media (min-width:960px){.contact{grid-template-columns:.9fr 1.1fr}}
.cline{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.cline .icon{color:var(--brand);margin-top:2px}
.cline b{display:block;font-family:var(--font-display)}
.cline a,.cline span{color:var(--ink-2)}
.form{display:grid;gap:14px}
.form .row2{display:grid;gap:14px}
@media (min-width:560px){.form .row2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:6px}
.field label,.field .lbl{font-size:.9rem;font-weight:600;color:var(--ink)}
.field .hint{font-size:.8rem;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
.demo-note{display:none;margin:0;padding:12px 14px;border-radius:12px;background:var(--brand-soft);color:var(--brand-strong);font-size:.92rem;font-weight:500}
.demo-note.is-on{display:block}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--ink-2)}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--brand);flex:none}

/* footer */
.ftr{padding:56px 0 32px;border-top:1px solid var(--line);background:var(--bg)}
.ftr-grid{display:grid;gap:28px;grid-template-columns:1fr 1fr}
@media (min-width:900px){.ftr-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.ftr-grid .brand-col{grid-column:1/-1}
@media (min-width:900px){.ftr-grid .brand-col{grid-column:auto}}
.ftr .ftr-h{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:var(--font-body);font-weight:700;margin-bottom:12px}
.ftr li{margin:8px 0}
.ftr a{color:var(--ink-2);text-decoration:none}
.ftr a:hover{color:var(--brand)}
.ftr .legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted);display:grid;gap:10px}
.ftr .toggles{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.proto{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:var(--brand-strong);background:var(--brand-soft);padding:6px 10px;border-radius:999px}

/* reveal on scroll (only when JS has marked the page ready) */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}
.motion-off .rv{opacity:1!important;transform:none!important;transition:none!important}
.motion-off *{animation:none!important}

/* ---------- auth pages ---------- */
.auth{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1fr;background:var(--hero-bg)}
@media (min-width:1000px){.auth{grid-template-columns:1fr 1fr}}
.auth-side{display:none;position:relative;overflow:hidden;padding:48px;background:var(--band-bg);color:#fff}
@media (min-width:1000px){.auth-side{display:flex;flex-direction:column;justify-content:space-between}}
.auth-side h2{color:#fff;font-size:2.4rem;max-width:12em}
.auth-side p{color:rgba(255,255,255,.84);max-width:30em}
.auth-side .orb{position:absolute;right:-120px;top:22%;width:520px;height:520px;opacity:.95}
.auth-side ul{display:grid;gap:12px;position:relative}
.auth-side li{display:flex;gap:10px;align-items:center;color:rgba(255,255,255,.9)}
.auth-side li .icon{color:#c4b5fd}
.auth-main{display:flex;flex-direction:column;padding:20px}
.auth-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.auth-card{width:100%;max-width:520px;margin:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:clamp(22px,5vw,40px)}
.auth-card h1{font-size:clamp(1.6rem,5vw,2.1rem);margin-bottom:.3em}
.auth-card .lead{color:var(--ink-2);margin-bottom:22px}
.steps{display:flex;gap:8px;margin-bottom:22px}
.steps i{flex:1;height:5px;border-radius:5px;background:var(--line)}
.steps i.on{background:var(--btn-grad)}
.roles{display:grid;gap:12px;margin-bottom:22px}
.role{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px;border:1.5px solid var(--line-2);border-radius:16px;cursor:pointer;background:var(--surface);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.role:hover{border-color:var(--brand)}
.role input{position:absolute;opacity:0;pointer-events:none}
.role .tile-ico{width:44px;height:44px;border-radius:12px}
.role b{display:block;font-family:var(--font-display);font-size:1.08rem;margin-bottom:2px}
.role span{display:block;color:var(--ink-2);font-size:.92rem;line-height:1.45}
.role .tick{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);flex:none;display:grid;place-items:center}
.role:has(input:checked){border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}
.role:has(input:checked) .tick{border-color:var(--brand);background:var(--brand)}
.role:has(input:checked) .tick::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.role:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:3px}
.segmented{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:var(--surface-2);margin-bottom:20px}
.segmented label{position:relative;text-align:center;padding:10px 8px;border-radius:10px;font-weight:600;font-size:.94rem;cursor:pointer;color:var(--ink-2)}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented label:has(input:checked){background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.segmented label:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:1px}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick label{position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;border:1px solid var(--line-2);font-size:.9rem;font-weight:500;cursor:pointer;color:var(--ink-2);background:var(--surface)}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick label:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand-strong)}
.pick label:has(input:focus-visible){outline:3px solid var(--brand);outline-offset:2px}
.tel{display:flex}
.tel span{display:grid;place-items:center;padding:0 12px;border:1px solid var(--line-2);border-right:0;border-radius:12px 0 0 12px;background:var(--surface-2);color:var(--ink-2);font-weight:600}
.tel input{border-radius:0 12px 12px 0}
.pw{position:relative}
.pw button{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:40px;min-width:48px;border:0;border-radius:10px;background:transparent;color:var(--brand);font-weight:600;font-size:.86rem;padding:0 10px;cursor:pointer}
.pw input{padding-right:64px}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.85rem;margin:6px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-foot{margin-top:18px;text-align:center;color:var(--ink-2);font-size:.95rem}
.handoff{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 14px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.handoff .icon{color:var(--brand);width:20px;height:20px;margin-top:1px}
.step[hidden]{display:none!important}
.mail{margin-top:22px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg-soft)}
.mail-h{padding:12px 16px;border-bottom:1px solid var(--line);font-size:.84rem;color:var(--ink-2);display:grid;gap:3px}
.mail-h b{color:var(--ink)}
.mail-b{padding:22px 18px;background:var(--surface)}
.mail-b h3{font-size:1.2rem;margin-bottom:8px}
.mail-b p{color:var(--ink-2);font-size:.94rem}
.mail-url{display:block;margin-top:12px;font:500 .8rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all;color:var(--muted)}
.mail-url b{color:var(--brand-strong)}
.tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}

/* utilities that replace inline styles (strict CSP: no style attributes in HTML) */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.cta-row{margin:22px 0 0}
.fig{margin:0}
.mt{margin-top:12px}
.mt-lg{margin-top:26px}
.muted-lead{color:var(--ink-2);margin:0}
.eyebrow.on-dark{color:#d8c8ff}
.cline.last{border-bottom:0}
.ftr-blurb{color:var(--ink-2);margin:14px 0 0;max-width:26em}
.sheet-toggles{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.device-card{margin-top:14px;display:flex;gap:14px;align-items:flex-start}
.device-card .fi{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand);flex:none}
.device-card h3{font-size:1.04rem;margin:0 0 4px}
.device-card p{margin:0;color:var(--ink-2)}
@media (max-width:559px){.hdr-actions .theme-btn{display:none}}

/* auth pages: role-specific fields */
.auth-card[data-role="customer"] [data-for="reseller"],.auth-card[data-role="reseller"] [data-for="customer"]{display:none!important}
.roles{border:0;padding:0;margin:0 0 22px;min-width:0}
.linkish{display:inline-flex;align-items:center;gap:6px;min-height:44px;border:0;background:none;padding:0 4px 0 0;margin:0 0 8px;color:var(--brand);font-weight:600;cursor:pointer}
.acts2{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 12px}
.auth-top-actions{display:flex;gap:8px;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:.92rem}
.field .segmented{margin-bottom:0}
.auth-card .tile-ico{margin-bottom:4px}
.logo.on-dark{color:#fff;position:relative;z-index:1}
.logo.on-dark b{color:#d8c8ff}
.auth-side-copy{position:relative;z-index:1}
.auth-side .orb.hero-visual{position:absolute;right:-110px;top:9%;width:540px;margin:0;opacity:.95;order:0}
/* poster on the always-dark side panel */
.poster-dark{--brand:#a78bfa;--glass:rgba(12,8,26,.62);--line:rgba(255,255,255,.16);--ink:#f4f0ff;--muted:#c4bde0;--c-broadband:#a78bfa;--c-calling:#22d3ee;--c-wcam:#fb7185;--c-ott:#fbbf24;--c-ai:#e879f9;--c-cloud:#94a3b8}
.poster-dark .ps-h0{stop-color:#7c3aed;stop-opacity:.5}
.poster-dark .ps-c0{stop-color:#fbe7ff}
.poster-dark .ps-c1{stop-color:#b794ff}
.poster-dark .ps-c2{stop-color:#6d28d9}
.poster-dark .ps-c3{stop-color:#1e0b4b}
.poster-dark .ps-o0{stop-color:#a78bfa}
.poster-dark .ps-o1{stop-color:#f0abfc}
.poster-dark .p-net line{opacity:.26}
.poster-dark .p-net circle{opacity:.75}

/* print */
@media print{.hdr,.hero-canvas,.stage,.scroll-hint,.sheet{display:none!important}.hero{min-height:auto}}