/* ==========================================================================
   Rovix AI — site.css (v3)
   Light, card-based layout in Rovix blues with Rovix yellow for actions.
   Plus Jakarta Sans (Rovix brand face) at moderate sizes.
   ========================================================================== */

@font-face{font-family:"Jakarta";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/jakarta-latin.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}
@font-face{font-family:"Jakarta";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(../fonts/jakarta-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* blues */
  --navy-900:#001A2C;
  --navy-800:#00263F;
  --brand-700:#003756;   /* Rovix deep blue */
  --brand-600:#005686;   /* Rovix primary blue */
  --blue-500:#0A6FB0;
  --sky-400:#2A9FE3;
  --sky-300:#7CC6F1;
  --sky-200:#BFE3F8;
  --sky-100:#DDEFFA;
  --sky-50:#EEF7FD;
  --ice:#F6FAFD;
  --white:#FFFFFF;
  /* accents */
  --yellow:#FFC530;      /* Rovix yellow */
  --yellow-2:#FFD666;
  --yellow-50:#FFF7DD;
  --yellow-ink:#7A5600;
  --green:#14955A;
  --green-50:#E6F6EE;
  --red:#D9443E;
  --red-50:#FDEDEC;
  /* text */
  --ink:#0B2133;
  --ink-2:#3D5466;
  --ink-3:#6A7E8E;
  --line:#E2EBF2;
  --line-2:#CFDDE8;
  /* aliases used by the dark product mockups */
  --field:#003756;--field-2:#0A4568;--field-3:#11577F;--sage:#AFC6D8;--line-d:rgba(175,198,216,.2);--brass:#FFC530;--brass-hi:#FFD666;--coral:#E5533D;--ok:#2FA36B;--moss:#55606B;--paper:#F6FAFD;--sheet:#fff;

  --f:"Jakarta",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1200px;
  --gut:clamp(16px,4vw,32px);
  --sec:clamp(52px,6vw,80px);
  --r-xl:32px;--r-lg:22px;--r-md:16px;--r-sm:12px;
  --sh-sm:0 1px 2px rgba(0,38,63,.06),0 2px 8px rgba(0,38,63,.05);
  --sh-md:0 2px 4px rgba(0,38,63,.05),0 12px 32px rgba(0,38,63,.09);
  --sh-lg:0 4px 10px rgba(0,38,63,.06),0 30px 70px rgba(0,38,63,.16);
  --ease:cubic-bezier(.22,.8,.18,1);
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--f);font-size:1rem;line-height:1.65;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
main{overflow-x:clip}
@supports not (overflow:clip){html,body,main{overflow-x:hidden}}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--sky-400);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:999;background:var(--yellow);color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.022em;line-height:1.15;text-wrap:balance;color:inherit}
.h1{font-size:clamp(2.1rem,1.3rem + 3vw,3.5rem);line-height:1.1;letter-spacing:-.03em}
.h2{font-size:clamp(1.7rem,1.2rem + 1.7vw,2.5rem);line-height:1.15;letter-spacing:-.026em}
.h3{font-size:clamp(1.12rem,1rem + .4vw,1.3rem);line-height:1.3;letter-spacing:-.012em}
.lead{font-size:clamp(1.02rem,.96rem + .25vw,1.15rem);line-height:1.65;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
p{text-wrap:pretty}
.muted{color:var(--ink-2)}
.tnum{font-variant-numeric:tabular-nums}
mark,.hl{background:linear-gradient(transparent 58%,rgba(255,197,48,.55) 58%,rgba(255,197,48,.55) 92%,transparent 92%);color:inherit;padding:0 .08em;background-size:0 100%;background-repeat:no-repeat;transition:background-size 1.1s var(--ease) .3s}
.hl.on,.no-js .hl,.reduced .hl{background-size:100% 100%}
.dark mark,.dark .hl{background-image:linear-gradient(transparent 60%,rgba(255,197,48,.45) 60%,rgba(255,197,48,.45) 92%,transparent 92%)}

/* eyebrow pill */
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:999px;background:var(--sky-50);color:var(--brand-600);font-size:.8rem;font-weight:650;letter-spacing:.01em;box-shadow:inset 0 0 0 1px var(--sky-100)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--sky-400);box-shadow:0 0 0 3px rgba(42,159,227,.18)}
.dark .pill{background:rgba(255,255,255,.08);color:#D9ECF9;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.dark .pill i{background:var(--yellow);box-shadow:0 0 0 3px rgba(255,197,48,.2)}
.lamp{--s:9px;width:var(--s);height:var(--s);border-radius:50%;flex:none;display:inline-block;background:var(--yellow);box-shadow:0 0 0 3px rgba(255,197,48,.2)}
.lamp.ok{background:var(--green);box-shadow:0 0 0 3px rgba(20,149,90,.15)}
.lamp.miss{background:var(--red);box-shadow:0 0 0 3px rgba(217,68,62,.15)}
.lamp.off{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.5}
.btn:not(.btn-blue):not(.btn-ghost) .lamp{background:var(--ink);box-shadow:0 0 0 3px rgba(11,33,51,.14)}  /* dot stays visible on yellow buttons */

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec);position:relative}
.sec.tight{padding-block:calc(var(--sec)*.6)}
/* two plain white sections in a row: one section gap between them, not two stacked paddings */
.sec:not(.bg-ice):not(.bg-sky):not(.ba-sec)+.sec:not(.bg-ice):not(.bg-sky):not(.ba-sec),
.sec:not(.bg-ice):not(.bg-sky):not(.ba-sec)+script+.sec:not(.bg-ice):not(.bg-sky):not(.ba-sec){padding-top:calc(var(--sec)*.4)}
.bg-ice{background:var(--ice)}
.bg-sky{background:var(--sky-50)}
.dark{color:#EAF4FB}
.shead{text-align:center;max-width:720px;margin:0 auto clamp(28px,3vw,44px);display:flex;flex-direction:column;align-items:center;gap:14px}
.shead .lead{margin-inline:auto}
.shead.left{text-align:left;align-items:flex-start;margin-left:0}
.panel{border-radius:var(--r-xl);position:relative;overflow:hidden;isolation:isolate}
.panel-navy{background:radial-gradient(900px 500px at 85% -10%,rgba(42,159,227,.35),transparent 60%),radial-gradient(700px 500px at 0% 110%,rgba(0,86,134,.6),transparent 60%),linear-gradient(160deg,var(--brand-700),var(--navy-900));color:#EAF4FB}
.panel-sky{background:linear-gradient(160deg,var(--sky-50),var(--sky-100))}
.panel-ice{background:var(--ice);box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- buttons ---------- */
.btn{--bg:var(--yellow);--fg:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;background:var(--bg);color:var(--fg);
  font-weight:650;font-size:.97rem;letter-spacing:-.005em;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;
  transition:background .25s,color .25s,box-shadow .3s,transform .3s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.35);transform:translateX(-101%) skewX(-12deg);transition:transform .6s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(255,197,48,.7)}
.btn:hover::after{transform:translateX(101%) skewX(-12deg)}
.btn svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-blue{--bg:var(--brand-600);--fg:#fff}
.btn-blue:hover{box-shadow:0 10px 24px -8px rgba(0,86,134,.55)}
.btn-ghost{--bg:#fff;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--brand-600),0 8px 20px -10px rgba(0,38,63,.25)}
.dark .btn-ghost{--bg:rgba(255,255,255,.06);--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.dark .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
.btn-sm{min-height:42px;padding:0 18px;font-size:.9rem}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.center .ctas,.ctas.center{justify-content:center}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--brand-600);font-size:.95rem}
.panel-navy .link{color:var(--yellow)}
.link svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(4px)}
.dark .link{color:var(--sky-300)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);color:#fff;transition:transform .45s var(--ease),background .3s,box-shadow .3s,color .3s}
.nav.solid{background:rgba(0,38,63,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav.hide{transform:translateY(-100%)}
.nav .wrap{height:100%;display:flex;align-items:center;gap:24px;position:relative}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:750;font-size:1.25rem;letter-spacing:-.03em;line-height:1}
.logo svg{width:28px;height:28px;flex:none}
.logo small{font-size:.66em;font-weight:600;opacity:.75;margin-left:-3px;align-self:flex-start;margin-top:-1px}
.logo-img{height:34px;width:auto;display:block}
.logo .wm{display:inline-flex;align-items:center;gap:9px}
.logo .wm[hidden]{display:none}
.menu{display:flex;align-items:center;gap:2px}
.nav .wrap>nav{flex:1;display:flex;justify-content:center}  /* logo left, links centred, button right */
.menu>li{position:static}
.menu>li>a,.menu>li>button{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;font-size:.93rem;font-weight:550;color:rgba(255,255,255,.85);transition:color .2s,background .2s}
.menu>li>a:hover,.menu>li>button:hover,.menu>li.open>a,.menu a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.09)}
.menu>li.has-mega{display:flex;align-items:center}
.menu>li.has-mega>a{padding-right:4px}
.menu>li.has-mega>.tog{padding:9px 10px 9px 4px}
.menu .chev{width:9px;height:9px;transition:transform .3s var(--ease)}
.menu>li.open .chev{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% - 6px);left:50%;translate:-50% 0;}
.js .mega{translate:none}
.mega{width:min(660px,calc(100% - 2 * var(--gut)));background:#fff;color:var(--ink);border-radius:20px;padding:10px;
  box-shadow:var(--sh-lg),0 0 0 1px rgba(0,38,63,.06);display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top center;
  transition:opacity .22s,transform .3s var(--ease),visibility 0s .3s}
.mega::before{content:"";position:absolute;inset:-22px 0 auto 0;height:22px}
.menu>li.open .mega{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .3s var(--ease),visibility 0s}
.mega a{display:flex;gap:12px;padding:11px 12px;border-radius:14px;transition:background .2s}
.mega a:hover{background:var(--sky-50)}
.mega .ic{width:38px;height:38px;border-radius:11px;background:var(--sky-50);display:grid;place-items:center;flex:none;color:var(--brand-600);transition:background .2s,color .2s}
.mega a:hover .ic{background:var(--brand-600);color:#fff}
.mega .ic svg{width:18px;height:18px}
.mega b{display:block;font-weight:650;font-size:.92rem;line-height:1.25}
.mega span{display:block;font-size:.8rem;color:var(--ink-3);line-height:1.4;margin-top:2px}
.mega .all{grid-column:1/-1;justify-content:space-between;align-items:center;background:var(--ice);font-weight:650;font-size:.9rem;margin-top:4px}
.mega .all svg{width:18px;height:18px}
.nav .btn{margin-left:0;flex:none}
.burger{display:none;width:44px;height:44px;margin-left:auto;border-radius:12px;place-items:center;color:inherit}
.burger i{display:block;width:22px;height:1.75px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease),opacity .2s}
.burger i+i{margin-top:6px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7.75px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7.75px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:99;background:var(--navy-800);color:#fff;padding:calc(var(--nav-h) + 12px) var(--gut) 40px;overflow-y:auto;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .55s var(--ease),visibility 0s .55s}
.drawer.open{clip-path:inset(0);visibility:visible;transition:clip-path .55s var(--ease),visibility 0s}
.drawer details{border-bottom:1px solid rgba(255,255,255,.1)}
.drawer summary,.drawer>a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:1.25rem;font-weight:650;list-style:none;cursor:pointer}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary span{transition:transform .3s var(--ease);display:inline-block}
.drawer details[open] summary span{transform:rotate(45deg)}
.drawer>a{border-bottom:1px solid rgba(255,255,255,.1)}
.drawer details a{display:block;padding:9px 0;color:#B9D6EA;font-size:1rem}
.drawer details div{padding-bottom:12px}
.drawer .btn{margin-top:24px;width:100%}
.nav-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--yellow);transform-origin:left;transform:scaleX(0);pointer-events:none}
@media(max-width:1080px){.menu,.nav .btn{display:none}.burger{display:grid}}

/* ---------- hero backgrounds (shades of blue) ---------- */
.hero-bg{position:relative;isolation:isolate;overflow:hidden;color:#EAF4FB;background:linear-gradient(170deg,var(--brand-700) 0%,var(--navy-900) 100%)}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(70px);z-index:-2;opacity:.75;will-change:transform}
.hero-bg .b1{width:620px;height:620px;left:-160px;top:-200px;background:radial-gradient(circle,#0A6FB0,transparent 65%);animation:drift1 18s ease-in-out infinite}
.hero-bg .b2{width:560px;height:560px;right:-140px;top:-120px;background:radial-gradient(circle,#2A9FE3,transparent 65%);opacity:.55;animation:drift2 22s ease-in-out infinite}
.hero-bg .b3{width:700px;height:500px;left:30%;bottom:-260px;background:radial-gradient(circle,#005686,transparent 65%);animation:drift3 26s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(120px,80px) scale(1.1)}}
@keyframes drift2{50%{transform:translate(-100px,120px) scale(.9)}}
@keyframes drift3{50%{transform:translate(-80px,-60px) scale(1.15)}}
.hero-bg .grid-lines{position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%)}
.dots{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s}
.dots.on{opacity:.8}
/* page-family tints */
.tone-solutions{background:linear-gradient(170deg,#0B5E80 0%,#00314D 55%,var(--navy-900) 100%)}
.tone-solutions .b2{background:radial-gradient(circle,#2CC1D6,transparent 65%)}
.tone-services{background:linear-gradient(170deg,#173E86 0%,#0A2C5C 55%,var(--navy-900) 100%)}
.tone-services .b2{background:radial-gradient(circle,#6E8CFF,transparent 65%)}
.tone-services .b1{background:radial-gradient(circle,#2A5FD0,transparent 65%)}
.tone-company{background:linear-gradient(170deg,var(--brand-600) 0%,var(--brand-700) 60%,var(--navy-900) 100%)}

/* ---------- home hero ---------- */
.hero{padding-block:calc(var(--nav-h) + clamp(36px,5vw,64px)) 0;text-align:center}
.hero .pill{margin-bottom:22px}
.hero h1{max-width:16ch;margin:0 auto}
.hero .lead{color:#C4DDEE;margin:22px auto 30px;max-width:58ch}
.hero .ctas{justify-content:center}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:28px;font-size:.88rem;color:#B9D6EA}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust svg{width:16px;height:16px;color:var(--yellow)}
.hero-stage{position:relative;margin-top:clamp(44px,5vw,64px);padding-bottom:clamp(40px,5vw,72px);text-align:left}
.float-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:#fff;color:var(--ink);box-shadow:var(--sh-lg);font-size:.82rem;line-height:1.3;white-space:nowrap}
.float-chip b{display:block;font-weight:700;font-size:.86rem}
.float-chip span{color:var(--ink-3)}
.float-chip .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--sky-50);color:var(--brand-600);flex:none}
.float-chip .ic svg{width:18px;height:18px}
.float-chip.c1{left:-28px;top:18%}
.float-chip.c2{right:-30px;top:44%}
.float-chip.c3{left:12%;bottom:22px}
@media(max-width:1100px){.float-chip{display:none}}

/* ---------- logo / client strip ---------- */
.clients{padding:28px 0;border-bottom:1px solid var(--line);background:#fff}
.clients .wrap{display:flex;align-items:center;gap:28px}
.clients p{flex:none;font-size:.82rem;color:var(--ink-3);font-weight:600;max-width:14ch;line-height:1.35}
.marq{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-track{display:flex;width:max-content;animation:marq 40s linear infinite}
.marq-track span{display:inline-flex;align-items:center;gap:10px;font-size:1.02rem;font-weight:700;letter-spacing:-.01em;color:#8FA3B3;padding-right:56px;white-space:nowrap}
.marq-track span::before{content:"";width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--sky-200),var(--sky-100))}
@keyframes marq{to{transform:translateX(-50%)}}
@media(max-width:700px){.clients .wrap{flex-direction:column;align-items:flex-start;gap:12px}.clients p{max-width:none}}

/* ---------- product suite tabs ---------- */
.tabbar{display:flex;gap:6px;padding:6px;border-radius:999px;background:var(--ice);box-shadow:inset 0 0 0 1px var(--line);margin:0 auto 28px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:color .25s,background .25s,box-shadow .25s;overflow:hidden}
.tabbar button svg{width:16px;height:16px}
.tabbar button[aria-selected="true"]{background:#fff;color:var(--brand-600);box-shadow:var(--sh-sm)}
.tabbar button .tp{position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:var(--yellow);transform-origin:left;transform:scaleX(0)}
.tabpanels{position:relative}
.tabpanel[hidden]{display:none}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bento .b-main{grid-column:span 7;grid-row:span 2}
.bento .b-side{grid-column:span 5}
.bento .b-wide{grid-column:span 12}
.bcard{border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px);position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:10px;min-width:0}
.bcard h3{font-size:1.2rem}
.bcard p{font-size:.94rem;color:var(--ink-2)}
.bcard.navy{background:linear-gradient(155deg,var(--brand-600),var(--brand-700) 55%,var(--navy-900));color:#EAF4FB}
.bcard.navy p{color:#C4DDEE}
.bcard.sky{background:linear-gradient(160deg,var(--sky-50),var(--sky-100))}
.bcard.white{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.bcard.yellow{background:linear-gradient(160deg,var(--yellow-50),#FFEFC2)}
.bcard .screen{margin-top:auto}
.bcard .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--brand-600);box-shadow:var(--sh-sm)}
.bcard.navy .ic{background:rgba(255,255,255,.1);color:var(--yellow);box-shadow:none}
.bcard .ic svg{width:20px;height:20px}
.bcard .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.rx-chip{font-size:.78rem;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#D9ECF9;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.bcard:not(.navy) .rx-chip{background:#fff;color:var(--brand-600);box-shadow:inset 0 0 0 1px var(--sky-100)}
@media(max-width:900px){.bento .b-main,.bento .b-side{grid-column:span 12;grid-row:auto}}

/* ---------- generic cards ---------- */
.card{background:#fff;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line),var(--sh-sm);padding:clamp(20px,2.2vw,28px);position:relative;transition:transform .4s var(--ease),box-shadow .4s}
.card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--sky-200),var(--sh-md)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:759px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3>:last-child:nth-child(odd){grid-column:1/-1}}  /* 3 across on tablets; no lone card on small tablets */
@media(max-width:900px){.grid-2:has(>.way){grid-template-columns:1fr}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.ficon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--sky-50);color:var(--brand-600);margin-bottom:16px;transition:transform .5s var(--ease),background .3s,color .3s}
.ficon svg{width:21px;height:21px}
.card:hover .ficon{background:var(--brand-600);color:#fff;transform:rotate(-8deg) scale(1.06)}
.card h3{font-size:1.06rem;margin-bottom:6px}
.card p{font-size:.93rem;color:var(--ink-2);line-height:1.6}
a.card .more{display:inline-flex;gap:6px;align-items:center;margin-top:14px;font-weight:650;font-size:.9rem;color:var(--brand-600)}
a.card .more svg{width:16px;height:16px;transition:transform .3s var(--ease)}
a.card:hover .more svg{transform:translateX(4px)}
/* tinted feature cards (rotating shades of blue) */
.tint-1{background:linear-gradient(160deg,#EEF7FD,#DDEFFA)}
.tint-2{background:linear-gradient(160deg,#F2F6FF,#E2EAFF)}
.tint-3{background:linear-gradient(160deg,#EDFAFB,#D7F1F4)}
.tint-4{background:linear-gradient(160deg,#FFF9E8,#FFF0C7)}
.tint-1,.tint-2,.tint-3,.tint-4{box-shadow:none}
.tint-1 .ficon,.tint-2 .ficon,.tint-3 .ficon,.tint-4 .ficon{background:#fff;box-shadow:var(--sh-sm)}

/* ---------- stats band ---------- */
.stats-panel{padding:clamp(32px,4vw,56px)}
.stats-panel .grid-3{gap:0}
.stat{padding:8px clamp(16px,2.5vw,36px);border-left:1px solid rgba(255,255,255,.14)}
.stat:first-child{border-left:0}
.stat b{display:block;font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem);font-weight:750;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.stat b em{font-style:normal;color:var(--yellow)}
.stat p{margin-top:12px;color:#C4DDEE;font-size:.95rem;max-width:34ch}
.stat cite{display:block;margin-top:10px;font-style:normal;font-size:.78rem;color:#8FB6D1}
.stat cite a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:980px){.stat{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding:24px 0}.stat:first-child{border-top:0}}
.stats-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,40px)}
.stats-head h2{max-width:22ch}
.stats-head p{color:#C4DDEE;max-width:40ch}

/* ---------- two ways ---------- */
.way{border-radius:var(--r-xl);padding:clamp(26px,3.4vw,44px);display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;isolation:isolate}
.way.p{background:linear-gradient(160deg,var(--brand-600),var(--brand-700) 60%,var(--navy-900));color:#EAF4FB}
.way.s{background:linear-gradient(160deg,var(--sky-50),var(--sky-100))}
.way h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);letter-spacing:-.025em}
.way>p{max-width:46ch;font-size:.97rem}
.way.p>p{color:#C4DDEE}.way.s>p{color:var(--ink-2)}
.way ul{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 18px}
.way li a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:.88rem;font-weight:600;transition:background .25s,transform .3s var(--ease)}
.way.p li a{background:rgba(255,255,255,.07)}
.way.p li a:hover{background:rgba(255,255,255,.14);transform:translateX(3px)}
.way.s li a{background:#fff;box-shadow:var(--sh-sm)}
.way.s li a:hover{transform:translateX(3px);box-shadow:var(--sh-md)}
.way li svg{width:16px;height:16px;flex:none;color:var(--yellow)}
.way.s li svg{color:var(--brand-600)}
.way .ctas{margin-top:auto}
.way .ring{position:absolute;width:420px;height:420px;border-radius:50%;right:-160px;bottom:-200px;border:1px solid rgba(255,255,255,.1);z-index:-1}
.way .ring::after{content:"";position:absolute;inset:60px;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.way.s .ring{border-color:rgba(0,86,134,.1)}
@media(max-width:560px){.way ul{grid-template-columns:1fr}}

/* ---------- industries (tabs as cards) ---------- */
.ind-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.ind-tab{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);text-align:left;font-weight:650;font-size:.95rem;position:relative;overflow:hidden;transition:box-shadow .3s,background .3s,color .3s}
.ind-tab .ic{width:36px;height:36px;border-radius:10px;background:var(--sky-50);color:var(--brand-600);display:grid;place-items:center;flex:none;transition:background .3s,color .3s}
.ind-tab .ic svg{width:18px;height:18px}
.ind-tab .tp{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--yellow);transform-origin:left;transform:scaleX(0)}
.ind-tab[aria-selected="true"]{background:var(--brand-700);color:#fff;box-shadow:var(--sh-md)}
.ind-tab[aria-selected="true"] .ic{background:rgba(255,255,255,.12);color:var(--yellow)}
@media(max-width:900px){.ind-tabs{grid-template-columns:1fr 1fr}}
.ind-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(160deg,var(--sky-50),#fff);box-shadow:inset 0 0 0 1px var(--line)}
.ind-panel[hidden]{display:none}
.ind-panel figure{position:relative;min-height:360px;overflow:hidden;background:var(--brand-700)}
.ind-panel figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ind-panel figure .badge{position:absolute;left:18px;bottom:18px;right:18px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.95);font-size:.85rem;font-weight:600;box-shadow:var(--sh-md)}
.ind-panel .body{padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;gap:14px}
.ind-panel h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);letter-spacing:-.022em}
.ind-panel p{color:var(--ink-2)}
.ind-panel ul{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 10px}
.ind-panel li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;font-weight:550;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.ind-panel li svg{width:16px;height:16px;flex:none;color:var(--green);margin-top:3px}
@media(max-width:900px){.ind-panel{grid-template-columns:1fr}.ind-panel figure{min-height:220px}}
@media(max-width:520px){.ind-panel ul{grid-template-columns:1fr}}

/* ---------- sticky steps (how it works) ---------- */
.steps-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.steps-visual{position:sticky;top:calc(var(--nav-h) + 40px)}
.steps-visual .vis{border-radius:var(--r-xl);padding:28px;min-height:400px;position:relative;overflow:hidden}
.vis-card{position:absolute;inset:28px;display:flex;flex-direction:column;justify-content:center;gap:12px;opacity:0;transform:translateY(20px) scale(.98);transition:opacity .5s,transform .6s var(--ease)}
.vis-card.on{opacity:1;transform:none}
.steps-list{display:flex;flex-direction:column;gap:16px}
.step{border-radius:var(--r-lg);padding:24px 26px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .4s,background .4s,transform .4s var(--ease);position:relative}
.step .tag{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--brand-600);background:var(--sky-50);padding:5px 10px;border-radius:999px;margin-bottom:12px}
.step h3{font-size:1.15rem;margin-bottom:6px}
.step p{color:var(--ink-2);font-size:.95rem}
.step .time{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.8rem;font-weight:600;color:var(--ink-3)}
.step .time svg{width:14px;height:14px}
.step.lit{box-shadow:inset 0 0 0 1.5px var(--sky-300),var(--sh-md);transform:translateX(6px)}
.step.lit .tag{background:var(--brand-600);color:#fff}
@media(max-width:900px){.steps-wrap{grid-template-columns:1fr}.steps-visual{display:none}.step.lit{transform:none}}

/* ---------- cases ---------- */
.case{display:flex;flex-direction:column;gap:12px;padding:0;overflow:hidden}
.case .screen{border-radius:0;min-height:170px;margin:0}
.case .cbody{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
.case .co{font-size:.8rem;font-weight:650;color:var(--brand-600);display:flex;gap:8px;align-items:center}

/* ---------- global ---------- */
.globe{padding:clamp(28px,4vw,56px)}
.globe-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
.capstats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
.capstats div{padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.capstats b{display:block;font-size:1.8rem;font-weight:750;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.capstats span{font-size:.84rem;color:#B9D6EA;display:block;margin-top:6px}
.map{position:relative;aspect-ratio:2/1}
.map canvas{position:absolute;inset:0;width:100%;height:100%}
.country-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.country-chips span{font-size:.8rem;font-weight:600;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.08);color:#D9ECF9;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.country-chips span.hub{background:var(--yellow);color:var(--ink);box-shadow:none}
@media(max-width:980px){.globe-grid{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,64px);align-items:start}
.faq-side{position:sticky;top:calc(var(--nav-h) + 32px);display:flex;flex-direction:column;gap:16px}
.faq-side .help{margin-top:8px;padding:22px;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--brand-600),var(--brand-700));color:#EAF4FB}
.faq-side .help b{display:block;font-size:1.05rem;margin-bottom:4px}
.faq-side .help p{font-size:.9rem;color:#C4DDEE;margin-bottom:14px}
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s,background .3s}
.faq details[open]{box-shadow:inset 0 0 0 1.5px var(--sky-200),var(--sh-sm);background:linear-gradient(180deg,#fff,var(--ice))}
.faq summary{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 20px;cursor:pointer;list-style:none;font-size:1rem;font-weight:650;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{width:28px;height:28px;border-radius:50%;flex:none;position:relative;background:var(--sky-50);transition:transform .35s var(--ease),background .25s}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.75px;background:var(--brand-600);translate:-50% -50%;border-radius:2px}
.faq .pm::after{transform:rotate(90deg);transition:transform .35s var(--ease)}
.faq details[open] .pm{background:var(--yellow);transform:rotate(180deg)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq .ans{overflow:hidden}
.faq .ans p{padding:0 20px 20px;color:var(--ink-2);font-size:.95rem;max-width:72ch}
.faq .ans a{color:var(--brand-600);text-decoration:underline;text-underline-offset:2px}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-side{position:static}}

/* ---------- blog cards ---------- */
.pc{display:flex;flex-direction:column;border-radius:var(--r-lg);background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.pc:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--sky-200),var(--sh-md)}
.pc .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--brand-700)}
.pc .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pc:hover .thumb img{transform:scale(1.05)}
.pc .pcb{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.pc .meta{font-size:.78rem;color:var(--ink-3);display:flex;gap:10px;align-items:center}
.pc .meta .cat{color:var(--brand-600);font-weight:700;background:var(--sky-50);padding:3px 8px;border-radius:999px}
.pc h3{font-size:1.04rem;line-height:1.35}
.pc p{color:var(--ink-2);font-size:.9rem}

/* ---------- CTA panel ---------- */
.cta-panel{padding:clamp(36px,5vw,72px) clamp(24px,5vw,72px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:center}
.cta-panel h2{max-width:20ch}
.cta-panel p{color:#C4DDEE;margin-top:14px;max-width:52ch}
.cta-panel .ctas{justify-content:flex-end}
.cta-panel .orbit{position:absolute;right:-120px;top:50%;width:520px;height:520px;translate:0 -50%;z-index:-1;opacity:.6}
.cta-panel .orbit i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.cta-panel .orbit i:nth-child(2){inset:70px}.cta-panel .orbit i:nth-child(3){inset:140px}
.cta-panel .orbit b{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--yellow);top:-5px;left:50%;box-shadow:0 0 0 5px rgba(255,197,48,.2)}
@media(max-width:860px){.cta-panel{grid-template-columns:1fr}.cta-panel .ctas{justify-content:flex-start}}

/* ---------- footer ---------- */
.foot{background:var(--navy-900);color:#EAF4FB;padding:clamp(44px,5vw,64px) 0 calc(32px + 76px + env(safe-area-inset-bottom,0px));position:relative;overflow:hidden}
.foot-top{display:grid;grid-template-columns:minmax(0,4fr) repeat(4,minmax(0,2fr));gap:28px}
.foot-top p{color:#9FBCD1;margin-top:16px;max-width:32ch;font-size:.92rem}
.foot h2{font-size:.86rem;font-weight:700;letter-spacing:0;margin-bottom:12px;color:#fff}
.foot li a{display:inline-block;padding:4px 0;color:#9FBCD1;font-size:.9rem;transition:color .2s,transform .25s var(--ease)}
.foot li a:hover{color:#fff;transform:translateX(3px)}
.foot .tlink{color:var(--yellow);font-weight:600}
.foot .socials{display:flex;gap:8px;margin-top:20px}
.foot .socials a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06)}
.foot .socials svg{width:18px;height:18px}
.foot-word{font-size:clamp(3.5rem,15vw,13rem);font-weight:800;letter-spacing:-.06em;line-height:.8;color:rgba(255,255,255,.04);margin:clamp(20px,3vw,36px) 0 16px;user-select:none;white-space:nowrap;overflow:hidden}
.foot-word .ch{display:inline-block}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:.84rem;color:#9FBCD1;border-top:1px solid rgba(255,255,255,.08);padding-top:22px}
.foot-bottom nav{display:flex;gap:18px;flex-wrap:wrap;padding-right:200px}  /* keep links clear of the Ask Rovix button */
@media(max-width:700px){.foot-bottom nav{padding-right:56px}}
@media(max-width:700px){.foot li a{padding:9px 0}.foot .tlink{display:inline-block;padding:10px 0}.foot-bottom nav{gap:6px 4px}.foot-bottom nav a{display:inline-block;padding:10px 8px}.foot-bottom nav a:first-child{padding-left:0}}
.foot-bottom a:hover{color:#fff}
@media(max-width:980px){.foot-top{grid-template-columns:1fr 1fr}.foot-top>div:first-child{grid-column:1/-1}}

/* ==========================================================================
   Inner pages
   ========================================================================== */
.phero{padding-block:calc(var(--nav-h) + clamp(28px,3.5vw,48px)) clamp(44px,4.5vw,64px)}
.crumbs{display:inline-flex;flex-wrap:wrap;gap:6px;font-size:.8rem;font-weight:600;color:#B9D6EA;margin-bottom:22px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.crumbs a:hover{color:#fff}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.crumbs [aria-current]{color:#fff}
.phero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:start}  /* mockup starts level with the eyebrow, not pushed down by a long intro */
.phero h1{max-width:18ch}
.phero .lead{color:#C4DDEE;margin:18px 0 28px}
.phero .trust{justify-content:flex-start;margin-top:24px}
@media(max-width:980px){.phero-grid{grid-template-columns:1fr}}
/* hero visual: app window */
.appwin{position:relative;border-radius:22px;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,10,20,.6),0 0 0 1px rgba(255,255,255,.3);padding:14px;transform-style:preserve-3d}
.appwin-bar{display:flex;align-items:center;gap:6px;padding:4px 6px 12px}
.appwin-bar i{width:9px;height:9px;border-radius:50%;background:#E2EBF2}
.appwin-bar i:nth-child(1){background:#FF8A80}.appwin-bar i:nth-child(2){background:#FFD666}.appwin-bar i:nth-child(3){background:#7DD3A8}
.appwin-bar span{margin-left:10px;font-size:.78rem;font-weight:650;color:var(--ink-3)}
.appwin-bar em{margin-left:auto;font-style:normal;font-size:.72rem;font-weight:700;color:var(--green);display:inline-flex;align-items:center;gap:6px;background:var(--green-50);padding:4px 9px;border-radius:999px}
.appwin-bar em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.arow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border-radius:14px;transition:background .4s,box-shadow .4s}
.arow+.arow{margin-top:4px}
.arow .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--sky-50);color:var(--brand-600);transition:background .4s,color .4s}
.arow .ic svg{width:19px;height:19px}
.arow b{display:block;font-size:.9rem;font-weight:650;line-height:1.3}
.arow span{display:block;font-size:.78rem;color:var(--ink-3);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arow .st{font-size:.7rem;font-weight:700;padding:4px 8px;border-radius:999px;background:var(--ice);color:var(--ink-3);white-space:nowrap}
.arow.live{background:var(--sky-50);box-shadow:inset 0 0 0 1px var(--sky-200)}
.arow.live .ic{background:var(--brand-600);color:#fff}
.arow.live .st{background:var(--yellow);color:var(--ink)}
.appwin .meter{margin:12px 6px 4px;height:6px;border-radius:6px;background:var(--ice);overflow:hidden}
.appwin .meter i{display:block;height:100%;width:30%;border-radius:6px;background:linear-gradient(90deg,var(--sky-400),var(--brand-600))}
.hero-float{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:#fff;color:var(--ink);box-shadow:var(--sh-lg);font-size:.8rem;font-weight:600;white-space:nowrap;z-index:2}
.hero-float .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--yellow-50);color:var(--yellow-ink)}
.hero-float .ic svg{width:16px;height:16px}
.hero-float.f1{left:-36px;bottom:-22px}
.hero-float.f2{right:-24px;top:-20px}
@media(max-width:1100px){.hero-float{display:none}}

/* quick answer */
.qa{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line),var(--sh-md);background:#fff;margin-top:calc(-1 * clamp(24px,2.6vw,36px));position:relative;z-index:2}
.qa .q{padding:clamp(24px,3vw,40px);background:linear-gradient(160deg,var(--sky-50),var(--sky-100));display:flex;flex-direction:column;gap:14px;justify-content:center;position:relative;overflow:hidden;isolation:isolate}
.qa .q::after{content:"?";position:absolute;right:-6px;bottom:-58px;z-index:-1;font-size:13rem;font-weight:800;line-height:1;color:var(--brand-600);opacity:.07;pointer-events:none}
.qa .q h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);letter-spacing:-.022em}
.qa .a{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:20px;justify-content:center}
.qa .a p{font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.7;color:var(--ink)}
.qa .a a{color:var(--brand-600);text-decoration:underline;text-underline-offset:2px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.facts div{padding:12px 14px;border-radius:14px;background:var(--ice);box-shadow:inset 0 0 0 1px var(--line)}
.facts b{display:block;font-size:1.25rem;font-weight:750;letter-spacing:-.025em;line-height:1.15;color:var(--brand-600);font-variant-numeric:tabular-nums}
.facts span{font-size:.76rem;color:var(--ink-3);display:block;margin-top:4px;line-height:1.35}
@media(max-width:900px){.qa{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}}

/* before / after */
/* Rally-style cards: a quiet white list of problems and a highlighted ice-blue card of fixes, each row with a matching icon */
.ba-sec{background:#F5F7F9;border-block:1px solid #E1E6EB}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;position:relative}
/* arrow badge in the gap between the cards (points down when they stack) */
.ba-arrow{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--brand-600);color:#fff;box-shadow:0 0 0 6px #F5F7F9,0 10px 24px -8px rgba(0,86,134,.6)}
.ba-arrow svg{width:20px;height:20px}
.ba-col{padding:clamp(24px,3vw,36px);border:1px solid var(--ink);border-radius:3px}
.ba-col.before{background:#fff;border-color:#CDD6DD}
.ba-col.after{background:#D9EEFC;border:1.5px solid var(--brand-600);box-shadow:0 22px 44px -22px rgba(0,86,134,.45)}
/* small badge above each card heading */
.ba-tag{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:5px 11px 5px 9px;border-radius:999px;font-size:.75rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.ba-tag svg{width:14px;height:14px}
.ba-col.before .ba-tag{background:#F1F4F6;color:var(--ink-3);box-shadow:inset 0 0 0 1px #DCE3E8}
.ba-col.after .ba-tag{background:var(--brand-600);color:#fff;box-shadow:0 6px 16px -6px rgba(0,86,134,.6)}
.ba-col h3{font-weight:750;font-size:clamp(1.45rem,1.15rem + 1vw,1.9rem);letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.ba-sub{margin:10px 0 16px;font-size:.92rem;color:var(--ink-2)}
.ba-col ul{display:grid;gap:2px}
.ba-col li{display:flex;gap:14px;align-items:center;min-height:58px;margin:0 -12px;padding:7px 12px;border-radius:6px;transition:background .25s;font-size:1rem;line-height:1.4;color:var(--ink)}
.ba-col .box{flex:none;width:32px;height:32px;transition:scale .3s var(--ease);display:grid;place-items:center;border-radius:4px}
.ba-col .box svg{width:16px;height:16px}
.ba-col.before .box{background:#F1F4F6;color:#8A97A2;box-shadow:inset 0 0 0 1px #DCE3E8}
.ba-col.before li{color:var(--ink-3)}
.ba-col.after .box{background:var(--brand-600);color:#fff}
.ba-col.after li b{font-weight:650}
/* hovering a row lights up the matching row on both cards */
.ba:has(li:nth-child(1):hover) li:nth-child(1),.ba:has(li:nth-child(2):hover) li:nth-child(2),.ba:has(li:nth-child(3):hover) li:nth-child(3),.ba:has(li:nth-child(4):hover) li:nth-child(4),.ba:has(li:nth-child(5):hover) li:nth-child(5),.ba:has(li:nth-child(6):hover) li:nth-child(6){background:#EEF2F5}
.ba:has(li:nth-child(1):hover) .after li:nth-child(1),.ba:has(li:nth-child(2):hover) .after li:nth-child(2),.ba:has(li:nth-child(3):hover) .after li:nth-child(3),.ba:has(li:nth-child(4):hover) .after li:nth-child(4),.ba:has(li:nth-child(5):hover) .after li:nth-child(5),.ba:has(li:nth-child(6):hover) .after li:nth-child(6){background:rgba(255,255,255,.65)}
.ba:has(li:nth-child(1):hover) li:nth-child(1) .box,.ba:has(li:nth-child(2):hover) li:nth-child(2) .box,.ba:has(li:nth-child(3):hover) li:nth-child(3) .box,.ba:has(li:nth-child(4):hover) li:nth-child(4) .box,.ba:has(li:nth-child(5):hover) li:nth-child(5) .box,.ba:has(li:nth-child(6):hover) li:nth-child(6) .box{scale:1.1}
@media(prefers-reduced-motion:reduce){.ba-col li,.ba-col .box{transition:none}}
/* faint watermark art: a tangled scribble behind the problems, the Rovix mark behind the fixes */
.ba-col{position:relative;overflow:hidden;isolation:isolate}
.ba-col::after{content:"";position:absolute;right:-28px;bottom:-34px;width:230px;height:230px;z-index:-1;pointer-events:none;background:no-repeat center/contain}
.ba-col.before::after{background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" fill="none" stroke="%238A97A2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 190c30-60 70 20 60-50s-70-40-30 10 110 40 90-30-80-70-50-10 90 90 120 20-40-90-70-40 10 120 60 110 60-60 20-90"/%3E%3Cpath d="M60 220c20-30 60-10 80-40s0-60 40-50 40 50 10 70-70 10-60-30 50-60 80-40"/%3E%3C/svg%3E');opacity:.22}
.ba-col.after::after{background-image:url("../img/logo/rovix-mark.png");opacity:.09;rotate:-10deg}
@media(max-width:560px){.ba-col::after{width:170px;height:170px}}
.ba-col.after li small{font-size:.92rem;color:var(--ink-2)}
.ba-sec .ba-note{border-radius:3px;background:#fff;box-shadow:inset 0 0 0 1px #CDD6DD}
.ba-note{margin-top:20px;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:.93rem;display:flex;gap:14px;align-items:flex-start}
.ba-note .ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--yellow-50);color:var(--yellow-ink)}
.ba-note .ic svg{width:18px;height:18px}
.ba-note cite{display:block;margin-top:6px;font-style:normal;font-size:.8rem;color:var(--ink-3)}
.ba-note cite a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:860px){.ba{grid-template-columns:1fr}.ba-arrow{position:relative;left:auto;top:auto;translate:none;rotate:90deg;justify-self:center;margin:-22px 0}}

/* solution */
.sol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:stretch;margin-bottom:clamp(40px,5vw,64px)}
.sol .body{display:flex;flex-direction:column;justify-content:center;gap:14px}
.sol .body p{color:var(--ink-2)}
.sol .body a{color:var(--brand-600);text-decoration:underline;text-underline-offset:2px}
.sol-vis{border-radius:var(--r-xl);padding:clamp(18px,2.5vw,28px);position:relative;overflow:hidden;min-height:280px;display:flex;flex-direction:column;justify-content:center}  /* same height as the text column, content centered */
.sol-vis figure{border-radius:20px;overflow:hidden;aspect-ratio:4/3}
.sol-vis figure img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.sol{grid-template-columns:1fr}}
/* hub diagram */
.hub{position:relative;aspect-ratio:1.35;min-height:260px}
.hub svg.wires{position:absolute;inset:0;width:100%;height:100%}
.hub svg.wires path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5;stroke-dasharray:4 6}
.hub svg.wires path.flow{stroke:var(--yellow);stroke-dasharray:10 300;stroke-width:2.2;stroke-linecap:round}
.hub .core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;text-align:center;background:#fff;color:var(--brand-700);box-shadow:0 0 0 10px rgba(255,255,255,.08),0 0 0 22px rgba(255,255,255,.04),var(--sh-lg);font-weight:800;letter-spacing:-.02em;font-size:1rem;line-height:1.1}
.hub .core small{display:block;font-size:.75rem;font-weight:600;color:var(--ink-3);letter-spacing:0}
.hub .node{position:absolute;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.95);color:var(--ink);font-size:.76rem;font-weight:650;line-height:1.25;box-shadow:var(--sh-md);max-width:34%}
.hub .node.c{translate:-50% -50%;max-width:44%}
.hub .node.l,.hub .node.r{translate:0 -50%}
.hub .node svg{width:15px;height:15px;color:var(--brand-600);flex:none}

/* compare */
.cmp-wrap{border-radius:var(--r-xl);background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--sh-md);overflow:hidden}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:760px;font-size:.9rem}
.cmp th,.cmp td{text-align:left;padding:16px 18px;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.5}
.cmp thead th{font-size:.82rem;font-weight:700;color:var(--ink-3);background:var(--ice);padding-top:20px;padding-bottom:20px}
.cmp tbody th{font-weight:650;color:var(--ink);width:20%}
.cmp td{color:var(--ink-2)}
.cmp td .x,.cmp td .y{display:inline-flex;width:20px;height:20px;border-radius:50%;place-items:center;margin-right:8px;vertical-align:-4px}
.cmp td .x{background:var(--red-50);color:var(--red)}
.cmp td .y{background:var(--yellow);color:var(--ink)}
.cmp td .x svg,.cmp td .y svg{width:12px;height:12px;margin:auto}
.cmp .us{background:linear-gradient(180deg,rgba(0,86,134,.06),rgba(0,86,134,.03));color:var(--ink);font-weight:600;position:relative;box-shadow:inset 1.5px 0 0 var(--sky-200),inset -1.5px 0 0 var(--sky-200)}
.cmp thead .us{background:linear-gradient(160deg,var(--brand-600),var(--brand-700));color:#fff;font-size:.9rem}
.cmp thead .us .tagline{display:block;font-size:.75rem;font-weight:600;color:var(--yellow);margin-top:2px}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr{transition:background .25s}
.cmp tbody tr:hover{background:var(--ice)}
/* mobile: criteria as cards */
.cmp-cards{display:none;flex-direction:column;gap:12px}
.cmp-card{border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.cmp-card h3{font-size:.98rem;padding:14px 16px;background:var(--ice)}
.cmp-card .us-row{padding:14px 16px;background:linear-gradient(160deg,var(--brand-600),var(--brand-700));color:#fff;font-size:.9rem}
.cmp-card .us-row b{display:block;font-size:.72rem;color:var(--yellow);margin-bottom:2px}
.cmp-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;padding:14px 16px;font-size:.84rem}
.cmp-card dt{color:var(--ink-3);font-weight:600}
.cmp-card dd{color:var(--ink-2)}
@media(max-width:900px){.cmp-wrap{display:none}.cmp-cards{display:flex}}

/* process timeline (horizontal) */
.tl{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px;position:relative}
.tl::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;background:var(--line)}
.tl .fill{position:absolute;left:24px;right:24px;top:24px;height:2px;background:linear-gradient(90deg,var(--sky-400),var(--brand-600));transform-origin:left;transform:scaleX(0)}  /* same blues as the numbers (blue to yellow went muddy green mid-line) */
.tl-step{position:relative;display:flex;flex-direction:column;gap:10px}
.tl-step .n{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:750;background:#fff;color:var(--brand-600);box-shadow:inset 0 0 0 2px var(--sky-100),var(--sh-sm);position:relative;z-index:1;transition:background .4s,color .4s,box-shadow .4s;font-variant-numeric:tabular-nums}
.tl-step.lit .n{background:var(--brand-600);color:#fff;box-shadow:0 0 0 6px rgba(42,159,227,.15)}
.tl-step .card{padding:20px}
.tl-step h3{font-size:1rem}
.tl-step p{font-size:.88rem}
@media(max-width:900px){.tl{grid-template-columns:1fr;gap:12px}.tl::before,.tl .fill{left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto}.tl .fill{transform:scaleY(0);transform-origin:top}.tl-step{flex-direction:row;align-items:flex-start;gap:14px}.tl-step .card{flex:1}}

/* who */
.who-c{display:flex;flex-direction:column;gap:8px}
.who-c .av{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:750;color:#fff;background:linear-gradient(135deg,var(--sky-400),var(--brand-600));margin-bottom:6px}
.who-c .av svg{width:22px;height:22px}

/* related */
.related a{display:flex;flex-direction:column;gap:6px}
.related b{font-size:1rem}
.related span{font-size:.88rem;color:var(--ink-2)}

/* article */
.article-hero{padding-block:calc(var(--nav-h) + clamp(28px,3.5vw,48px)) clamp(40px,4.5vw,60px)}
.article-hero h1{max-width:24ch;font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem)}
.article-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.article-meta span,.article-meta time{font-size:.8rem;font-weight:600;color:#D9ECF9;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.08)}
.article{max-width:740px;margin:0 auto}
.tldr{border-radius:var(--r-lg);background:linear-gradient(160deg,var(--sky-50),var(--sky-100));padding:22px 24px;margin:-36px 0 36px;position:relative;z-index:2;box-shadow:var(--sh-md)}
.tldr b{display:flex;gap:10px;align-items:center;font-size:.86rem;margin-bottom:8px;color:var(--brand-600)}
.tldr p{font-size:1.04rem;line-height:1.65}
.prose{font-size:1.04rem;line-height:1.75;color:#1F3546}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem);letter-spacing:-.022em;line-height:1.25;margin-top:1.9em;color:var(--ink)}
.prose h3{font-size:1.15rem;margin-top:1.5em;color:var(--ink)}
.prose a{color:var(--brand-600);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.3em}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--sky-400)}
.prose blockquote{border-left:4px solid var(--yellow);padding:12px 18px;background:var(--yellow-50);border-radius:0 12px 12px 0}
.prose table{width:100%;border-collapse:collapse;font-size:.9rem;display:block;overflow-x:auto;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.prose thead th{background:var(--sky-50);font-weight:700;color:var(--ink)}
.sources{margin-top:40px;padding:20px 22px;border-radius:16px;background:var(--ice);font-size:.88rem}
.sources h2{font-size:.95rem;margin-bottom:8px;letter-spacing:0}
.sources li{padding:3px 0;color:var(--ink-2);list-style:decimal;margin-left:1.2em}
.sources a{text-decoration:underline;text-underline-offset:2px}
.read-prog{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--yellow);transform-origin:left;transform:scaleX(0);z-index:120}

/* pricing / about / contact / legal */
.plan{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,28px) clamp(22px,2.6vw,30px)}
.plan.hi{background:linear-gradient(160deg,var(--brand-600),var(--brand-700) 60%,var(--navy-900));color:#EAF4FB;box-shadow:var(--sh-lg);transform:translateY(-8px)}
.plan.hi:hover{transform:translateY(-12px)}
.plan .tier{display:flex;justify-content:space-between;align-items:center}
.plan .tier .badge{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--yellow);color:var(--ink)}
.plan h3{font-size:1.5rem;letter-spacing:-.025em}
.plan .model{font-weight:650;color:var(--brand-600)}
.plan.hi .model{color:var(--yellow)}
.plan>p{color:var(--ink-2);font-size:.93rem;line-height:1.55}
.plan.hi>p{color:#C4DDEE}
.plan ul{display:flex;flex-direction:column;gap:7px;margin:4px 0 14px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.5}
.plan li svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--green)}
.plan.hi li svg{color:var(--yellow)}
.plan .btn{margin-top:auto}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:clamp(22px,3vw,36px)}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:7px;font-size:.86rem;font-weight:650}
.form input,.form select,.form textarea{width:100%;min-height:50px;padding:12px 15px;border-radius:12px;background:var(--ice);border:1.5px solid var(--line);font-weight:450;font-size:.97rem;transition:border-color .2s,box-shadow .2s,background .2s}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brand-600);background:#fff;box-shadow:0 0 0 4px rgba(42,159,227,.18)}
.form .note{font-size:.82rem;color:var(--ink-3);font-weight:450}
.form .note a{color:var(--brand-600);text-decoration:underline}
.form-status{grid-column:1/-1;font-size:.92rem;font-weight:600;min-height:1.4em;color:var(--brand-600)}
@media(max-width:640px){.form{grid-template-columns:1fr}}
.contact-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,48px);align-items:start}
.contact-side{display:flex;flex-direction:column;gap:12px}
.contact-side .card{padding:18px 20px}
.contact-side b{display:block;font-size:.8rem;color:var(--ink-3);font-weight:650;margin-bottom:2px}
.contact-side a,.contact-side span{font-size:1rem;font-weight:650}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.legal{max-width:760px;margin:0 auto}
.legal h2{font-size:1.25rem;margin:1.8em 0 .5em}
.legal p,.legal li{color:var(--ink-2);margin-top:.7em;line-height:1.75}
.legal ul{list-style:disc;padding-left:1.2em}

/* ---------- motion helpers ---------- */
.js [data-rv]{opacity:0}
.reduced [data-rv],.no-gsap [data-rv]{opacity:1!important;transform:none!important}
.curtain{position:fixed;inset:0;z-index:300;background:linear-gradient(160deg,var(--brand-600),var(--navy-900));display:grid;place-items:center;pointer-events:none;transform:translateY(100%)}
.curtain.cover{transform:none}
.curtain .lamp{--s:14px}
.curtain .bar{position:absolute;left:0;right:0;top:0;height:5px;background:var(--yellow)}
[data-spot]{position:relative}
[data-spot]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;z-index:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(42,159,227,.12),transparent 50%)}
[data-spot]:hover::after{opacity:1}
.float{animation:bob 6s ease-in-out infinite}
.float.d2{animation-delay:-2s}.float.d3{animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{.nav,.drawer,.foot-word{display:none}}

/* ==========================================================================
   Product mockups (dark UI vignettes, reused from v2)
   ========================================================================== */
.screen{background:var(--field);color:#EAF4FB;border-radius:16px;padding:16px;box-shadow:inset 0 0 0 1px var(--line-d),0 24px 50px -24px rgba(0,20,40,.55);position:relative;font-size:.9rem}
.screen-h{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:var(--sage);padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line-d)}

/* switchboard */
.board{margin-top:clamp(44px,6vw,80px);background:var(--field-2);border-radius:26px;position:relative;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 80px -40px rgba(0,0,0,.55);padding:clamp(18px,2.4vw,30px);
  display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,3fr) minmax(0,4.4fr);gap:0}
.board::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(175,198,216,.16) 1.2px,transparent 1.6px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.board-h{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;color:var(--sage);font-weight:500;padding:4px 6px 14px}
.board-h .tag{display:inline-flex;gap:8px;align-items:center;color:#EAF2F8}
.jacks{display:flex;flex-direction:column;gap:8px}
.jack{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(4,35,58,.55);
  box-shadow:inset 0 0 0 1px var(--line-d);transition:background .4s,box-shadow .4s}
.jack .ji{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(234,242,248,.06);color:#EAF2F8}
.jack .ji svg{width:18px;height:18px}
.jack b{display:block;font-weight:560;font-size:.92rem;line-height:1.2}
.jack .msg{display:block;font-size:.82rem;color:var(--sage);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.35em}
.jack .lamp{--s:9px;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(175,198,216,.45);transition:background .25s,box-shadow .25s}
.jack.live{background:rgba(255,197,48,.09);box-shadow:inset 0 0 0 1px rgba(255,197,48,.45)}
.jack.live .lamp{background:var(--brass);box-shadow:0 0 0 3px rgba(255,197,48,.2),0 0 16px rgba(255,197,48,.8)}
.cords{position:relative;min-height:100%}
.cords svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cords .cord{fill:none;stroke:rgba(175,198,216,.22);stroke-width:1.5}
.cords .pulse{fill:none;stroke:var(--brass);stroke-width:2.2;stroke-linecap:round;opacity:0}
.core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(176px,80%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 40%,var(--field-3),var(--field) 70%);box-shadow:0 0 0 1px rgba(255,197,48,.35),0 0 0 10px rgba(255,197,48,.05),0 20px 50px -10px rgba(0,0,0,.5)}
.core-in{display:flex;flex-direction:column;align-items:center;gap:8px}
.core b{font-weight:600;font-stretch:110%;font-size:1.05rem;letter-spacing:-.02em}
.core .state{font-size:.76rem;color:var(--sage);min-height:1.2em}
.core .ring{position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,197,48,.6);opacity:0}
.wave{display:flex;gap:3px;align-items:center;height:18px}
.wave i{width:3px;height:4px;border-radius:2px;background:var(--brass);transition:height .2s}
.wave.on i{animation:wv 1s ease-in-out infinite}
.wave.on i:nth-child(2){animation-delay:.1s}.wave.on i:nth-child(3){animation-delay:.2s}.wave.on i:nth-child(4){animation-delay:.3s}.wave.on i:nth-child(5){animation-delay:.4s}
@keyframes wv{0%,100%{height:4px}50%{height:17px}}
.log{display:flex;flex-direction:column;min-width:0}
.log-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.log-stats div{background:rgba(4,35,58,.55);border-radius:14px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--line-d)}
.log-stats b{display:block;font-size:1.6rem;font-weight:520;font-stretch:104%;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.log-stats span{font-size:.78rem;color:var(--sage)}
.log-list{position:relative;height:262px;overflow:hidden;border-radius:14px;background:rgba(4,35,58,.55);box-shadow:inset 0 0 0 1px var(--line-d);padding:6px}
.log-list::after{content:"";position:absolute;inset:auto 0 0 0;height:60px;background:linear-gradient(transparent,rgba(10,69,104,.95));pointer-events:none;border-radius:0 0 14px 14px}
.entry{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 10px;border-radius:10px}
.entry+.entry{border-top:1px solid var(--line-d)}
.entry .lamp{--s:8px;margin-top:6px}
.entry b{font-weight:560;font-size:.88rem;display:block;line-height:1.3}
.entry span{font-size:.8rem;color:var(--sage);display:block;line-height:1.35}
.entry em{font-style:normal;font-size:.76rem;color:var(--brass);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:2px}
.entry.fresh{background:rgba(255,197,48,.08)}
@media(max-width:980px){
  .board{grid-template-columns:1fr;gap:16px}
  .cords{display:none}
  .board-h.mid{display:none}
}
.board-note{margin-top:14px;font-size:.8rem;color:var(--sage);display:flex;gap:8px;align-items:center}
/* mini UIs inside screens */
.bub{max-width:86%;padding:10px 14px;border-radius:14px;font-size:.88rem;line-height:1.45;margin-bottom:8px}
.bub.in{background:rgba(234,242,248,.16);color:#F2F8FC;border-bottom-left-radius:4px}
.bub.out{background:rgba(255,197,48,.16);margin-left:auto;border-bottom-right-radius:4px;color:#FFF6DC}
.bub small{display:block;font-size:.72rem;color:var(--sage);margin-top:3px}
.call{display:flex;flex-direction:column;gap:10px}
.call-top{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;background:rgba(234,242,248,.05)}
.call-top .av{width:42px;height:42px;border-radius:50%;background:var(--field-3);display:grid;place-items:center;font-weight:560}
.call-top b{display:block;font-size:.95rem}.call-top span{font-size:.8rem;color:var(--sage)}
.call-top .wave{margin-left:auto}
.tline{font-size:.86rem;line-height:1.5;padding:10px 12px;border-radius:10px;background:rgba(234,242,248,.04)}
.tline b{color:var(--brass);font-weight:560;margin-right:6px}
.rec{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.85rem;padding:12px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,197,48,.35);background:rgba(255,197,48,.06)}
.rec dt{color:var(--sage)}.rec dd{font-weight:500}
.pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pcol{background:rgba(234,242,248,.04);border-radius:10px;padding:8px;min-height:230px}
.pcol-h{font-size:.74rem;font-weight:560;color:var(--sage);margin:2px 2px 8px;display:flex;justify-content:space-between}
.pcard{background:var(--field-2);border-radius:8px;padding:8px;margin-bottom:6px;font-size:.76rem;line-height:1.3;box-shadow:inset 0 0 0 1px var(--line-d)}
.pcard b{display:block;font-size:.8rem;font-weight:560}
.pcard span{color:var(--sage)}
.pcard.hot{box-shadow:inset 0 0 0 1px rgba(255,197,48,.6)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal span{font-size:.7rem;color:var(--sage);text-align:center;padding-bottom:2px}
.cal i{aspect-ratio:1;border-radius:7px;background:rgba(234,242,248,.05);position:relative;display:block}
.cal i.p::after{content:"";position:absolute;inset:26%;border-radius:4px;background:var(--brass)}
.cal i.p2::after{content:"";position:absolute;inset:26%;border-radius:4px;background:var(--sage)}
.post{display:flex;gap:12px;align-items:center;margin-top:14px;padding:12px;border-radius:12px;background:rgba(234,242,248,.05)}
.post .ph{width:56px;height:56px;border-radius:9px;background:linear-gradient(135deg,var(--field-3),#1A6A9A);flex:none}
.post b{font-size:.88rem;display:block}.post span{font-size:.78rem;color:var(--sage)}
.rank{display:flex;flex-direction:column;gap:8px}
.rrow{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:11px 12px;border-radius:11px;background:rgba(234,242,248,.04)}
.rrow .pos{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:520;background:rgba(234,242,248,.07);font-variant-numeric:tabular-nums}
.rrow.you{box-shadow:inset 0 0 0 1px rgba(255,197,48,.6);background:rgba(255,197,48,.07)}
.rrow.you .pos{background:var(--brass);color:var(--ink)}
.rrow b{font-size:.9rem;display:block}.rrow span{font-size:.76rem;color:var(--sage)}
.stars{color:var(--brass);letter-spacing:2px;font-size:.8rem}
.tasks{display:flex;flex-direction:column;gap:8px}
.task{display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:center;padding:11px 12px;border-radius:10px;background:rgba(234,242,248,.04);font-size:.88rem}
.task .bx{width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1.5px rgba(175,198,216,.55);display:grid;place-items:center}
.task.done .bx{background:var(--ok);box-shadow:none}
.task.done .bx::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.task .who{font-size:.72rem;color:var(--sage);padding:3px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-d)}
.bars{display:flex;align-items:flex-end;gap:8px;height:110px;margin-top:16px;padding-top:6px;border-top:1px solid var(--line-d)}
.bars i{flex:1;border-radius:4px 4px 0 0;background:rgba(175,198,216,.3);height:var(--h)}
.bars i:last-child{background:var(--brass)}
/* chat typing */
.bub.typing{display:none;width:58px;padding:12px 14px;gap:4px}
.bub.typing.on{display:flex}
.bub.typing i{width:6px;height:6px;border-radius:50%;background:#FFF6DC;animation:tdot 1s infinite}
.bub.typing i:nth-child(2){animation-delay:.15s}.bub.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.case .screen{min-height:150px}

.board{margin-top:0}
.hero .board-note{justify-content:center;color:#9FBCD1}
/* v3 fixes */
.country-chips span.hq{background:var(--yellow);color:var(--ink);box-shadow:none}
.bcard>.pill,.way>.pill,.qa .pill,.sol .pill,.faq-side>.pill{align-self:flex-start}
.bcard.navy .pill,.panel-navy .pill,.way.p .pill,.hero-bg .pill,.ba-col.after .pill{background:rgba(255,255,255,.08);color:#D9ECF9;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.bcard.navy .pill i,.panel-navy .pill i,.way.p .pill i,.hero-bg .pill i{background:var(--yellow);box-shadow:0 0 0 3px rgba(255,197,48,.2)}
.hero-bg .hl{background-image:linear-gradient(transparent 72%,rgba(255,197,48,.75) 72%,rgba(255,197,48,.75) 88%,transparent 88%)}
.float-chip.c1{left:-44px;top:auto;bottom:34%}
.float-chip.c2{right:-40px;top:auto;bottom:18%}
.tabbar button{flex:none}
@media(max-width:700px){.tabbar{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:20px;overflow:visible}.tabbar button{justify-content:flex-start;padding:10px 12px;border-radius:14px;font-size:.84rem;white-space:normal;text-align:left;line-height:1.25}.tabbar button svg{flex:none}}  /* phones: all platform tabs visible, no hidden sideways scroll */

/* ==========================================================================
   v3.1 — richer sections, interactive hub, finder, action bar, assistant
   ========================================================================== */

/* what we do tiles */
.wwd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wwd-tile{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;min-height:190px;transition:transform .4s var(--ease),box-shadow .4s;color:#fff}
.wwd-tile:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.wwd-tile .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.14);margin-bottom:6px}
.wwd-tile .ic svg{width:20px;height:20px}
.wwd-tile b{font-size:1.08rem;line-height:1.25}
.wwd-tile>span{font-size:.86rem;opacity:.85;line-height:1.45}
.wwd-tile>span:not(.ic){padding-right:44px}
.wwd-tile em{position:absolute;right:18px;bottom:18px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;transition:transform .35s var(--ease),background .3s}
.wwd-tile em svg{width:16px;height:16px}
.wwd-tile:hover em{transform:translateX(4px);background:var(--yellow);color:var(--ink)}
.wwd-tile.navy{background:linear-gradient(150deg,var(--brand-600),var(--navy-900))}
.wwd-tile.sky{background:linear-gradient(150deg,#1E8FD0,#0A5A96)}
.wwd-tile.indigo{background:linear-gradient(150deg,#4C63D2,#2A3C9E)}
.wwd-tile.yellow{background:linear-gradient(150deg,#FFD666,#F2B21B);color:var(--ink)}
.wwd-tile.yellow .ic{background:rgba(0,0,0,.08)}
.wwd-tile.yellow em{background:rgba(0,0,0,.1)}
.wwd-tile.yellow:hover em{background:var(--brand-700);color:#fff}
@media(max-width:980px){.wwd{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.wwd{grid-template-columns:1fr}.wwd-tile{min-height:0}}

/* proof numbers */
.proof-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:28px}
.proof{padding:18px 20px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.proof b{display:block;font-size:1.9rem;font-weight:750;letter-spacing:-.03em;line-height:1;color:var(--brand-600);font-variant-numeric:tabular-nums}
.proof span{display:block;font-size:.84rem;color:var(--ink-2);margin-top:6px}
@media(max-width:760px){.proof-row{grid-template-columns:1fr 1fr}}

/* feature cards: more color + motion */
.card.feat{overflow:hidden}
.card.feat::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--sky-400),var(--brand-600),var(--yellow));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.card.feat:hover::before{transform:scaleX(1)}
.card.feat .ficon{background:#fff;box-shadow:var(--sh-sm);color:var(--brand-600)}
.card.feat.tint-2 .ficon{color:#4C63D2}.card.feat.tint-3 .ficon{color:#0F8E9A}.card.feat.tint-4 .ficon{color:var(--yellow-ink)}
.card.feat:hover .ficon{background:var(--brand-600);color:#fff}
.card.feat.tint-4:hover .ficon{background:var(--yellow);color:var(--ink)}
.card.feat .ficon{position:relative;z-index:1}
.card.feat .ficon::after{content:"";position:absolute;inset:-6px;border-radius:16px;border:1.5px dashed rgba(0,86,134,.25);opacity:0;transition:opacity .3s;animation:spin 10s linear infinite}
.card.feat:hover .ficon::after{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* solution text smaller */
.sol .body p{font-size:.97rem;line-height:1.65}
.sol .body .h2{font-size:clamp(1.5rem,1.15rem + 1.3vw,2.1rem)}

/* interactive hub */
.hub{cursor:default}
.hub .ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed rgba(255,255,255,.18);translate:-50% -50%;pointer-events:none}
.hub .ring.r1{width:46%;aspect-ratio:1;animation:spin 40s linear infinite}
.hub .ring.r2{width:78%;aspect-ratio:1;border-style:solid;border-color:rgba(255,255,255,.08);animation:spin 70s linear infinite reverse}
.hub .ring i{position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(255,197,48,.2)}
.hub .ring.r2 i{background:var(--sky-300);box-shadow:0 0 0 4px rgba(124,198,241,.2)}
.hub .node{cursor:pointer;transition:scale .35s var(--ease),box-shadow .35s,background .3s,color .3s;z-index:2}
.hub .node:hover{scale:1.06;box-shadow:var(--sh-lg)}
.hub .node.on{background:var(--yellow);color:var(--ink)}
.hub .node.on svg{color:var(--ink)}
.hub .core{transition:scale .4s var(--ease),box-shadow .4s;z-index:3}
.hub .core.hit{scale:1.08;box-shadow:0 0 0 14px rgba(255,197,48,.25),0 0 0 28px rgba(255,197,48,.08),var(--sh-lg)}
.hub .core small{transition:color .3s}
.hub .core.hit small{color:var(--brand-600);font-weight:700}
.hub .spark{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--yellow);box-shadow:0 0 12px var(--yellow);translate:-50% -50%;pointer-events:none;z-index:2}
.hub .burst{position:absolute;left:50%;top:50%;width:60px;height:60px;border-radius:50%;border:2px solid var(--yellow);translate:-50% -50%;pointer-events:none;opacity:0;z-index:1}
.hub-hint{position:absolute;left:14px;bottom:12px;font-size:.78rem;color:#B9D6EA;display:flex;gap:6px;align-items:center}
.hub-hint svg{width:13px;height:13px}
.hub-hint:not(.on){animation:none}
@media(max-width:600px){.hub .node{font-size:.75rem;padding:6px 9px}.hub .node.l,.hub .node.r{max-width:38%}.hub-hint{left:0;right:0;bottom:-15px;justify-content:center;font-size:.75rem}.hub .core{width:96px;height:96px;font-size:.9rem}}

/* industry scenes */
.scene-wrap{background:linear-gradient(160deg,var(--brand-600),var(--navy-900));padding:22px;display:flex;align-items:center;position:relative;min-height:360px}
.scene{width:100%;background:#fff;color:var(--ink);border-radius:16px;padding:14px;box-shadow:var(--sh-lg);font-size:.86rem;display:flex;flex-direction:column;gap:10px}
.scene-h{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:700;color:var(--ink-3);padding-bottom:8px;border-bottom:1px solid var(--line)}
.scene-h em{font-style:normal;font-size:.7rem;color:var(--green);background:var(--green-50);padding:3px 8px;border-radius:999px}
.scene .st{font-style:normal;font-size:.75rem;font-weight:700;padding:4px 8px;border-radius:999px;background:var(--sky-50);color:var(--brand-600);white-space:nowrap}
.scene .st.hot{background:var(--yellow);color:var(--ink)}
.scene .st.warn{background:var(--red-50);color:var(--red)}
.listing,.ticket,.student{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--ice);box-shadow:inset 0 0 0 1px var(--line)}
.listing b,.ticket b,.student b{display:block;font-weight:700;font-size:.9rem}
.listing span,.ticket span,.student span{display:block;color:var(--ink-2);font-size:.8rem}
.listing small{display:block;color:var(--brand-600);font-weight:600;font-size:.74rem;margin-top:2px}
.listing>div,.ticket>div,.student>div{flex:1;min-width:0}
.listing .ph{width:64px;height:48px;border-radius:9px;background:linear-gradient(160deg,var(--sky-200),var(--sky-100));position:relative;flex:none;overflow:hidden}
.listing .ph .roof{position:absolute;left:14px;right:14px;top:10px;height:16px;background:var(--brand-600);clip-path:polygon(50% 0,100% 100%,0 100%)}
.listing .ph .door{position:absolute;left:22px;right:22px;top:24px;bottom:6px;background:var(--brand-700);border-radius:3px 3px 0 0}
.ticket>span{width:38px;height:38px;border-radius:10px;background:var(--yellow-50);color:var(--yellow-ink);display:grid;place-items:center;flex:none}
.ticket>span svg{width:18px;height:18px}
.row2{display:grid;grid-template-columns:1fr 1.6fr;gap:10px}
.minical{border-radius:12px;background:var(--brand-700);color:#fff;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.minical span{font-size:.7rem;color:#B9D6EA;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.minical b{font-size:1.4rem;line-height:1}
.minical small{font-size:.7rem;color:var(--yellow)}
.minichat{display:flex;flex-direction:column;gap:6px}
.minichat p{max-width:88%;padding:7px 10px;border-radius:12px;font-size:.78rem;line-height:1.4}
.minichat .in{background:var(--ice);box-shadow:inset 0 0 0 1px var(--line);border-bottom-left-radius:3px}
.minichat .out{background:var(--brand-600);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.pipe-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pipe-mini span{position:relative;padding:8px 10px;border-radius:10px;background:var(--ice);font-size:.74rem;font-weight:600;color:var(--ink-2);overflow:hidden}
.pipe-mini span::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--w);background:var(--yellow);border-radius:3px}
.pipe-mini b{color:var(--ink);margin-left:4px}
.slots{display:flex;flex-direction:column;gap:6px}
.slot{display:grid;grid-template-columns:44px 1fr 24px;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--ice);font-size:.8rem}
.slot b{font-variant-numeric:tabular-nums}
.slot span{color:var(--ink-2)}
.slot i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--brand-600);background:#fff}
.slot i svg{width:12px;height:12px}
.slot.done{opacity:.7}.slot.done i{color:var(--green)}
.slot.now{background:var(--yellow-50);box-shadow:inset 0 0 0 1.5px var(--yellow)}
.slot.now i{background:var(--yellow);color:var(--ink)}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi span{display:flex;flex-direction:column;padding:8px 10px;border-radius:10px;background:var(--sky-50);font-size:.7rem;color:var(--ink-3)}
.kpi b{font-size:1.05rem;color:var(--brand-600)}
.prog-row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:.8rem;align-items:center}
.prog-row b{font-variant-numeric:tabular-nums}
.prog-row i{grid-column:1/-1;display:block;height:7px;border-radius:7px;background:var(--ice);position:relative;overflow:hidden}
.prog-row i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:7px;background:linear-gradient(90deg,var(--sky-400),var(--brand-600))}
.stages{display:flex;gap:4px}
.stages span{flex:1;text-align:center;font-size:.66rem;font-weight:700;padding:6px 2px;border-radius:8px;background:var(--ice);color:var(--ink-3)}
.stages .done{background:var(--green-50);color:var(--green)}
.stages .now{background:var(--brand-600);color:#fff}
.student .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--sky-400),var(--brand-600));color:#fff;display:grid;place-items:center;font-weight:700;font-size:.78rem;flex:none}
.scene-wrap .badge{position:absolute;left:18px;bottom:18px;right:18px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.95);font-size:.82rem;font-weight:600;box-shadow:var(--sh-md)}
.ind-panel figure.scene-wrap{padding-bottom:72px}
.sol-vis .scene-wrap{min-height:0;padding:0;background:none;aspect-ratio:auto;overflow:visible}  /* scene shows in full; the panel matches the text height */
.sol-vis.panel-navy{padding:clamp(18px,2.5vw,28px)}

/* automation finder */
.finder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);padding:clamp(28px,4vw,56px);background:linear-gradient(150deg,#0E3C60 0%,var(--brand-700) 45%,#0D2E5C 100%);color:#EAF4FB;position:relative}
.finder::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 90% 0%,rgba(42,159,227,.35),transparent 60%);pointer-events:none}
.finder-in{position:relative;display:flex;flex-direction:column;gap:14px}
.finder-in .lead{color:#C4DDEE}
.finder-form{display:flex;gap:10px;margin-top:6px}
.finder-form input{flex:1;min-width:0;min-height:50px;padding:12px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:1rem}
.finder-form input::placeholder{color:#8FB6D1}
.finder-form input:focus{outline:none;border-color:var(--yellow);background:rgba(255,255,255,.12);box-shadow:0 0 0 4px rgba(255,197,48,.2)}
.finder-chips{display:flex;flex-wrap:wrap;gap:8px}
.finder-chips button{font-size:.8rem;font-weight:600;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:#D9ECF9;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background .25s,transform .3s var(--ease),color .25s}
.finder-chips button:hover,.finder-chips button.on{background:var(--yellow);color:var(--ink);transform:translateY(-2px)}
.finder-out{position:relative;border-radius:22px;background:#fff;color:var(--ink);padding:22px;min-height:320px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh-lg)}
.finder-empty{margin:auto;text-align:center;max-width:34ch;color:var(--ink-3);display:flex;flex-direction:column;align-items:center;gap:12px;font-size:.95rem}
.finder-empty .ic{width:48px;height:48px;border-radius:14px;background:var(--sky-50);color:var(--brand-600);display:grid;place-items:center}
.finder-empty .ic svg{width:22px;height:22px}
.plan-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.plan-head b{font-size:1.05rem}
.plan-head .st{font-size:.74rem;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--green-50);color:var(--green)}
.plan-list{display:flex;flex-direction:column;gap:8px}
.plan-item{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--ice);box-shadow:inset 0 0 0 1px var(--line)}
.plan-item .ic{width:40px;height:40px;border-radius:12px;background:#fff;color:var(--brand-600);display:grid;place-items:center;box-shadow:var(--sh-sm)}
.plan-item .ic svg{width:18px;height:18px}
.plan-item b{display:block;font-size:.9rem}
.plan-item span{display:block;font-size:.8rem;color:var(--ink-2);line-height:1.4}
.plan-item em{font-style:normal;font-size:.72rem;font-weight:700;color:var(--brand-600);background:var(--sky-50);padding:4px 8px;border-radius:999px;white-space:nowrap}
.plan-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:8px;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.plan-foot .btn{min-height:42px}
.finder-think{display:flex;gap:6px;align-items:center;margin:auto;color:var(--ink-3);font-size:.9rem}
.finder-think i{width:8px;height:8px;border-radius:50%;background:var(--brand-600);animation:tdot 1s infinite}
.finder-think i:nth-child(2){animation-delay:.15s}.finder-think i:nth-child(3){animation-delay:.3s}
@media(max-width:900px){.finder{grid-template-columns:1fr}}
@media(max-width:520px){.finder-form{flex-direction:column}.finder-form .btn{width:100%}}

/* sticky action bar */
.abar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:95;display:flex;gap:6px;padding:6px;border-radius:999px;background:rgba(0,38,63,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 40px -10px rgba(0,20,40,.5),inset 0 0 0 1px rgba(255,255,255,.1);
  transform:translateY(120%);opacity:0;transition:transform .5s var(--ease),opacity .4s}
.abar.show{transform:none;opacity:1}
.abar a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;color:#fff;font-size:.88rem;font-weight:650;white-space:nowrap;transition:background .25s}
.abar a:hover{background:rgba(255,255,255,.1)}
.abar a svg{width:17px;height:17px}
.abar a.main{background:var(--yellow);color:var(--ink)}
.abar a.main:hover{background:var(--yellow-2)}
@media(max-width:520px){.abar{left:12px;right:12px;translate:0;bottom:calc(10px + env(safe-area-inset-bottom,0px));justify-content:space-between}.abar a{padding:10px 12px;flex:1;justify-content:center}.abar a:not(.main) span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}
@media(max-width:520px){.abar{left:0;right:0;bottom:0;border-radius:0;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 -1px 0 var(--line),0 -10px 30px -12px rgba(0,20,40,.25)}.abar a{min-height:46px}.abar a:not(.main){color:var(--brand-600);background:var(--ice)}.abar a:not(.main):hover{background:var(--sky-100)}.ask{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}  /* phones: solid docked bar instead of a floating pill over content */

/* Ask Rovix assistant */
.ask{position:fixed;right:18px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:96;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.ask-fab{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;background:#fff;color:var(--brand-600);font-weight:700;font-size:.88rem;box-shadow:var(--sh-lg),inset 0 0 0 1.5px var(--sky-100);transition:transform .35s var(--ease),box-shadow .3s}
.ask-fab:hover{transform:translateY(-3px)}
.ask-fab svg{width:18px;height:18px;color:var(--yellow-ink)}
.ask-fab::before{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid rgba(255,197,48,.6);opacity:0;animation:askping 3s ease-out infinite}
.ask-fab{position:relative}
@keyframes askping{0%{transform:scale(.9);opacity:.9}60%{transform:scale(1.15);opacity:0}100%{opacity:0}}
.ask-panel{width:min(380px,calc(100vw - 36px));max-height:min(620px,calc(100vh - 170px));border-radius:22px;background:#fff;color:var(--ink);box-shadow:var(--sh-lg),0 0 0 1px rgba(0,38,63,.06);display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right}
.ask-panel[hidden]{display:none}
.ask-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(160deg,var(--brand-600),var(--brand-700));color:#fff}
.ask-head b{display:block;font-size:.95rem}
.ask-head span{font-size:.76rem;color:#B9D6EA}
.ask-av{width:36px;height:36px;border-radius:12px;background:var(--yellow);color:var(--ink);display:grid;place-items:center;flex:none}
.ask-av svg{width:18px;height:18px}
.ask-close{margin-left:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12)}
.ask-close svg{width:16px;height:16px}
.ask-log{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-height:120px}
.ask-msg{max-width:92%;padding:10px 13px;border-radius:14px;font-size:.88rem;line-height:1.5}
.ask-msg.u{align-self:flex-end;background:var(--brand-600);color:#fff;border-bottom-right-radius:4px}
.ask-msg.a{align-self:flex-start;background:var(--ice);border-bottom-left-radius:4px;box-shadow:inset 0 0 0 1px var(--line)}
.ask-msg.a a{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-weight:650;color:var(--brand-600);font-size:.82rem}
.ask-msg.a a svg{width:13px;height:13px}
.ask-sugg{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}
.ask-sugg button{font-size:.76rem;font-weight:600;padding:6px 10px;border-radius:999px;background:var(--sky-50);color:var(--brand-600);box-shadow:inset 0 0 0 1px var(--sky-100);text-align:left;transition:background .2s,color .2s}
.ask-sugg button:hover{background:var(--brand-600);color:#fff}
.ask-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.ask-form input{flex:1;min-width:0;min-height:42px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);font-size:.9rem}
.ask-form input:focus{outline:none;border-color:var(--brand-600);box-shadow:0 0 0 3px rgba(42,159,227,.18)}
.ask-foot{font-size:.74rem;color:var(--ink-3);padding:0 16px 12px}
.ask-foot a{color:var(--brand-600);font-weight:650;text-decoration:underline}
@media(max-width:520px){.ask{right:12px;bottom:calc(74px + env(safe-area-inset-bottom,0px))}.ask-fab span{display:none}.ask-fab{padding:12px}}
@media print{.abar,.ask{display:none}}
/* phones: Studio services two-up, feature cards as compact icon-left rows */
@media(max-width:620px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .svc-grid .card{padding:16px}
  .svc-grid .card .ficon{width:38px;height:38px;margin-bottom:10px}
  .svc-grid .card h3{font-size:.95rem}
  .svc-grid .card p{font-size:.84rem;line-height:1.45}
  .svc-grid .card .more{margin-top:8px;font-size:.84rem}
  .feat-grid{gap:12px}
  .feat-grid .card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;padding:18px}
  .feat-grid .card .ficon{grid-row:span 3;margin:0}
  .feat-grid .card h3{margin-top:2px}
}

/* ==========================================================================
   Mobile alignment pass: one left edge, one gutter, no squeezed columns
   ========================================================================== */
@media(max-width:700px){
  .shead,.shead.left{text-align:left;align-items:flex-start;margin-left:0;margin-right:0}  /* every section heading starts on the same left line */
  .shead .lead{margin-inline:0}
  .qa{margin-top:0}  /* "short answer" card no longer rides up over the hero mockup */
  .facts>:last-child:nth-child(odd){grid-column:1/-1}  /* no lone stat card */
  .cmp-card dl{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}  /* long option names no longer squeeze the answers */
  .prose table th,.prose table td{min-width:132px}  /* wide tables scroll cleanly instead of crushing the last column */
  .plan-item{grid-template-columns:36px 1fr;align-items:start}
  .plan-item .ic{width:36px;height:36px}
  .plan-item em{grid-column:2;justify-self:start}
  .crumbs{flex-wrap:nowrap;max-width:100%}
  .crumbs li{white-space:nowrap}
  .crumbs li:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
}

/* Mobile spacing pass: desktop-sized gaps left 120-185px of empty screen between sections on phones */
@media(max-width:700px){
  :root{--sec:44px}
  .shead{margin-bottom:28px}
  .phero{padding-bottom:44px}
  .foot{padding-top:44px}
}
.phero .lead:last-child{margin-bottom:0}  /* no button row after the intro text = no leftover gap */
.sol:last-child{margin-bottom:0}  /* about page: the split block ends its section, so its margin only doubled the padding */
.legal>:first-child{margin-top:0}  /* legal pages: first heading doesn't double the section spacing */
/* hub hint sits below the diagram at every width, so it never clashes with a bottom feature pill */
.hub{margin-bottom:34px}
.hub-hint{top:calc(100% + 10px);bottom:auto;left:0;right:0;justify-content:center}

/* pricing: three plan cards were too narrow side by side on tablets (buttons cut off) */
@media(max-width:980px){
  .grid-3:has(>.plan){grid-template-columns:minmax(0,560px);justify-content:center}
  .grid-3:has(>.plan)>.plan:last-child:nth-child(odd){grid-column:auto}
  .plan.hi,.plan.hi:hover{transform:none}
}
.plan .btn{white-space:normal;text-align:center}

/* small phones: hub diagram becomes core + a 2-column grid of features, so labels never crowd the core or spill */
@media(max-width:480px){
  .hub{aspect-ratio:auto;min-height:0;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0}
  .hub svg.wires,.hub .ring,.hub .burst{display:none}
  .hub .core{position:relative;left:auto;top:auto;translate:none;flex:0 0 96px;margin:6px calc((100% - 96px) / 2) 18px}
  .hub .node,.hub .node.c,.hub .node.l,.hub .node.r{position:relative;left:auto!important;right:auto!important;top:auto!important;translate:none;max-width:none;font-size:.78rem;flex:1 1 calc(50% - 4px)}
  .hub-hint{position:static;flex:0 0 100%;margin-top:6px}
}

/* phones: links that were under ~30px tall get a comfortable tap area (text size unchanged) */
@media(max-width:700px){
  a.link{min-height:44px;display:inline-flex;align-items:center}
  cite a,.card>a[href^="mailto:"],.card>a[href^="tel:"]{display:inline-block;padding-block:12px;margin-block:-10px}
}

/* ==========================================================================
   UI polish pass (desktop / tablet review)
   ========================================================================== */
.pill{width:fit-content;max-width:100%}  /* eyebrow pills never stretch to the column width */
.ba-col{border-radius:var(--r-lg);border-color:var(--line)}  /* before/after cards match every other card */
.hero-float.f2{top:-40px}  /* chip sits on the mockup's top corner: clear of the "Live" badge and the first row's text */
.related a .more{margin-top:auto;padding-top:6px}  /* "Explore" lines up across Related cards */
@media(min-width:981px){  /* desktop only: on phones these must stay stacked */
  .grid-4.related:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
.tl-step .card{flex:1}  /* process step cards share one height */
.cmp td:has(>.x),.cmp td:has(>.y){padding-left:46px;text-indent:-28px}  /* wrapped text hangs past the check icon */
.prose table th,.prose table td{min-width:132px}  /* article tables scroll instead of crushing columns */
@media(min-width:901px){
  /* each number sits centred over its card; the line runs from the first number's centre to the last's */
  .tl-step .n{align-self:center}
  .tl::before,.tl .fill{left:calc((100% - (var(--n,4) - 1) * 16px) / var(--n,4) / 2);right:calc((100% - (var(--n,4) - 1) * 16px) / var(--n,4) / 2)}
}
@media(min-width:981px){
  /* 3-up grids: centre a lone last card, or the last two, instead of leaving empty slots */
  .grid-3:not(:has(>.plan)){grid-template-columns:repeat(6,minmax(0,1fr))}
  .grid-3:not(:has(>.plan))>*{grid-column:span 2}
  .grid-3:not(:has(>.plan))>:last-child:nth-child(3n+1){grid-column:3/span 2}
  .grid-3:not(:has(>.plan))>:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
}
@media(max-width:980px) and (min-width:621px){
  /* tablets: 3-up grids were ~180px columns; use two, and centre an odd last card at half width */
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3>:last-child:nth-child(odd),.grid-4>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 10px)}
  .grid-4.related:has(>:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts:has(>:nth-child(3):last-child){grid-template-columns:1fr 1fr}
  .facts>:last-child:nth-child(odd){grid-column:1/-1}
}
@media(min-width:621px){.case .screen{min-height:190px}}  /* client-work chat headers share one height, so names and titles line up */

/* mobile interaction fixes */
.drawer .btn{justify-content:center;gap:10px;padding:14px 22px}  /* menu CTA: drawer link styles were pushing its text to the edge */
@media(max-width:700px){
  input,select,textarea{font-size:16px}  /* iPhone Safari zooms the page on focus when fields are under 16px */
  .ask:has(.ask-panel:not([hidden])) .ask-fab{display:none}  /* panel has its own close button; the fab was covering the page */
}

/* mobile review polish */
.ba-note{border-radius:16px}
.arow b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}  /* mockup titles end in "…" instead of being cut mid-word */
.shead .lead a{color:var(--brand-600);font-weight:650;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}  /* "All articles" reads as a link */
.prose h2,.prose h3{text-wrap:pretty}
.prose h3{line-height:1.3}
.prose table{background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0/40px 100% no-repeat local,linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) 100% 0/40px 100% no-repeat local,linear-gradient(90deg,rgba(0,38,63,.14),transparent) 0 0/14px 100% no-repeat scroll,linear-gradient(270deg,rgba(0,38,63,.14),transparent) 100% 0/14px 100% no-repeat scroll}  /* edge shadow shows the table scrolls sideways */
@media(max-width:700px){
  .ctas>.btn{flex:1 1 100%;justify-content:center}  /* stacked button pairs share one full width */
  .ba-col::after{display:none}  /* decorative swirl/logo sat on top of the last list item */
  h3{text-wrap:pretty}
}
@media(max-width:700px){
  .foot-bottom nav{gap:4px 18px;padding-right:56px}
  .foot-bottom nav a,.foot-bottom nav a:first-child{padding:10px 0}  /* wrapped legal links line up on the left edge */
  .finder-chips button{min-height:40px}  /* example chips: comfortable tap size */
}
.nav .logo{min-height:44px}  /* header logo link: full-size tap target */
@media(max-width:480px){
  .hub .core{flex-basis:112px;width:112px;height:112px;margin-inline:calc((100% - 112px) / 2)}
  .hub .core small{font-size:.68rem;padding-inline:8px}
  .hub .node,.hub .node.c,.hub .node.l,.hub .node.r{flex:0 0 calc(50% - 4px)}  /* strict 2-up grid */
  .hub .node:nth-last-child(3):nth-child(odd){flex-basis:100%}  /* odd last pill takes the full row */
}
.ba-col.after li small .dash{font-style:normal}
@media(max-width:700px){
  .ba-col.after li small{display:block;margin-top:2px}  /* phones: description on its own line under the title */
  .ba-col.after li small .dash{display:none}
}
@media(max-width:480px){
  .hub .node,.hub .node.c,.hub .node.l,.hub .node.r{min-width:0;padding:7px 8px;gap:6px;font-size:.74rem}  /* long words fit half a row */
}
@media(max-width:380px){.hub .node,.hub .node.c,.hub .node.l,.hub .node.r{font-size:.71rem;padding:7px 6px;gap:5px}.hub .node svg{width:13px;height:13px}}  /* narrowest phones: longest single words still fit */
@media(max-width:340px){.hub .node,.hub .node.c,.hub .node.l,.hub .node.r{flex-basis:100%}}  /* tiny phones (320px): one pill per row */

/* Header menu flicker fix: a closing dropdown stayed hoverable for its 0.3s fade, and its 22px
   hover "bridge" reached up over the menu links, so neighbouring menus kept stealing the hover from
   each other (open/close loops ~30x a second). Only the open panel takes the mouse now, and the
   bridge only spans the small gap between the link and the panel. */
.mega{pointer-events:none}
.menu>li.open .mega{pointer-events:auto}
.mega::before{inset:-6px 0 auto 0;height:6px}

/* Hero demo board: new log entries slide in by growing from 0 height; clip them so their text
   can't spill over the entry below while they grow. */
.entry{overflow:hidden}
/* Floating chips sit on the board's corners instead of over its rows and log list */
.float-chip.c1{left:-36px;top:-26px;bottom:auto}
.float-chip.c2{right:-34px;top:-26px;bottom:auto}

/* Heading reveal: SplitText wraps each line in a clip box exactly one line tall, which cut off the
   descenders of g, y, p, q, j. Extend the clip box below the line without shifting the layout. */
.line-mask-mask{padding-bottom:.22em;margin-bottom:-.22em}

/* Phones: the client strip is a static, wrapped list of every name (no scrolling), so all names
   are visible regardless of the phone's motion settings. */
@media(max-width:700px){
  .marq{-webkit-mask-image:none;mask-image:none;overflow:visible;width:100%}
  .marq-track{animation:none!important;transform:none!important;width:auto;flex-wrap:wrap;gap:12px 22px}
  .marq-track span{padding-right:0;font-size:.95rem}
  .marq-track span.dup{display:none}
}
@media(max-width:700px){
  .marq-track{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;width:100%}  /* tidy 2-column list */
  .marq-track span{white-space:normal;align-items:flex-start;line-height:1.3;font-size:.9rem}
  .marq-track span::before{flex:none;width:18px;height:18px;border-radius:6px;margin-top:1px}
}

/* Rovix chatbot widget: on phones, sit above the docked bottom contact bar instead of covering it */
@media(max-width:520px){
  .chatbot-root{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
}

/* The chatbot widget's stylesheet sets body{font-family:Inter} for the whole page; keep the site's
   own font everywhere (the widget sets Inter on its own .chatbot-root, so it keeps its look). */
html body{font-family:var(--f)}

/* The header's yellow scroll-progress line sits on the nav's bottom edge, which the open dropdown
   overlaps by a few px; draw the dropdown above it so the line doesn't cut across the panel. */
.nav .mega{z-index:2}
.nav-prog{z-index:1}

/* Official logo (tightly cropped, 560x90 source): show it at the same visual size as before */
.logo-img{height:22px;width:auto}

/* Two Aura widgets (voice pill + chat bubble) were both anchored bottom-right and overlapped.
   Split them to opposite corners: voice pill goes bottom-left, the chat bubble keeps its native
   bottom-right spot. The voice widget positions itself with inline styles, so override by ID with
   !important. On phones, lift it above the docked contact bar (.abar) like the chatbot already is. */
#realtor-voice-widget{left:16px!important;right:auto!important}
@media(max-width:520px){
  #realtor-voice-widget{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
}