/* VOLTIMOR DESIGN SYSTEM v2 | 2026-11-10
   Shared visual language. No routes, controls, API calls, events or data logic changed.
   Scoped by site body to avoid collisions between public / administration / client. */
:root{
 --vt-night:#07182c;--vt-deep:#0b2845;--vt-blue:#087fce;--vt-electric:#0797ef;
 --vt-ice:#dfeefa;--vt-silver:#c8d6e5;--vt-paper:#f3f7fb;--vt-white:#fff;
 --vt-ink:#132a43;--vt-muted:#5d7086;--vt-line:#d7e3ee;
 --vt-orange:#ee873d;--vt-purple:#8655bd;--vt-pink:#dc6d9c;
 --vt-focus:#0a91e8;--vt-shadow:0 12px 38px rgba(8,38,69,.09);
 --vt-font:Inter,'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--vt-font);overflow-x:hidden}
body,body *{min-width:0}
body img,body svg,body video{max-width:100%}
body img{height:auto}
body :is(h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;text-wrap:pretty;letter-spacing:-.026em}
body :is(p,small,span,td,th,label,li,dd,dt){overflow-wrap:anywhere}
body :is(input,textarea,select,button){font-family:inherit;max-width:100%}
body :is(input,select,textarea){min-height:42px}
body :is(button,.button,.btn,[role="button"]){white-space:normal;text-align:center;line-height:1.35;overflow-wrap:anywhere}
body :is(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--vt-focus)!important;outline-offset:3px!important}
body :is(.voltimor-brand-mark,.brand-mark.voltimor-brand-mark){background:transparent!important;box-shadow:none!important;flex:0 0 auto;overflow:visible!important;border:0!important}
body .voltimor-brand-mark img{display:block;width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 3px 10px rgba(2,146,233,.28))}
/* Sitewide visual identity: silver, electric blue, navy. Legacy colours remain small accents. */
body.public-site{
 --ink:var(--vt-ink);--muted:var(--vt-muted);--line:var(--vt-line);
 --brand:var(--vt-electric);--violet:var(--vt-purple);--coral:var(--vt-orange);
 --blue:var(--vt-electric);--soft:var(--vt-paper);
 background:var(--vt-white);color:var(--vt-ink);
}
.public-site .site-header{background:rgba(248,251,255,.97)!important;border-bottom:1px solid var(--vt-line);box-shadow:0 4px 18px rgba(8,35,62,.06)!important}
.public-site .nav-wrap{min-height:78px;gap:clamp(12px,2vw,26px);flex-wrap:wrap}
.public-site .brand{gap:12px;color:var(--vt-night);line-height:1.14}
.public-site .brand>span:last-child{font-size:clamp(.86rem,1.1vw,1.04rem)}
.public-site .brand small{margin-top:4px;font-size:.67rem;color:var(--vt-muted);letter-spacing:.015em;line-height:1.25}
.public-site .nav{gap:clamp(10px,1.5vw,22px);flex-wrap:wrap;align-items:center}
.public-site .nav a{line-height:1.35;overflow-wrap:normal}
.public-site .nav a:not(.button):hover{color:var(--vt-blue)!important}
.public-site :is(.button,.btn){border-radius:12px;transition:box-shadow .2s ease,background .2s ease,transform .2s ease}
.public-site .button:not(.ghost):not(.light){background:linear-gradient(135deg,#0368b9,#0797ef);color:#fff;box-shadow:0 9px 20px rgba(2,120,203,.20)}
.public-site .button.ghost{background:#fff;border:1px solid #bfd2e3;color:#124467}
.public-site .button:hover{box-shadow:0 12px 25px rgba(2,108,180,.19)}
.public-site .eyebrow,.public-site .conversion-kicker{color:#086fae!important}
.public-site :is(h1,h2,h3){color:#102b46;line-height:1.12}
.public-site h1{font-size:clamp(2.15rem,5.4vw,4.6rem);letter-spacing:-.046em;line-height:1.055;max-width:100%;overflow:visible}
.public-site h2{font-size:clamp(1.75rem,3.7vw,3.15rem);line-height:1.12}
.public-site .lead{font-size:clamp(1rem,1.35vw,1.24rem);line-height:1.58;color:#536a80;max-width:68ch}
.public-site .hero{background:radial-gradient(circle at 90% 12%,rgba(26,159,232,.14),transparent 34%),radial-gradient(circle at 12% 88%,rgba(177,205,227,.27),transparent 34%),linear-gradient(160deg,#fafdff,#eaf3fa)!important;overflow:visible}
.public-site .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,64px);align-items:center}
.public-site .hero-copy,.public-site .hero-product-stage,.public-site .hero-console{min-width:0;max-width:100%;overflow:visible}
.public-site .hero-copy h1,.public-site .hero-copy h1>span{max-width:100%;overflow-wrap:break-word;hyphens:auto;white-space:normal}
.public-site .hero-copy .lead{width:auto;max-width:64ch}
.public-site .hero .actions{align-items:stretch}
.public-site .hero .actions .button{min-height:48px}
.public-site .trust-row{row-gap:8px}
.public-site :is(.hero-console,.hero-conversion-card,.hero-brakki-speech){border-color:#cfdfeb;box-shadow:var(--vt-shadow)}
.public-site :is(.stage-tabs button,.hero-assurance-strip b,.hero-conversion-card li b){color:#066ca8}
.public-site .hero-assurance-strip{background:rgba(255,255,255,.92);border-color:#cfe0ec}
.public-site .hero-login-link{color:var(--vt-blue)}
.public-site :is(.card,.product-card,.feature-card,.pricing-card,.plan-card,.solution-card){border-color:var(--vt-line);box-shadow:0 10px 28px rgba(10,43,76,.065)}
.public-site :is(.card,.product-card,.feature-card,.pricing-card,.plan-card,.solution-card):hover{border-color:#93bfdf}
.public-site :is(section,.shell,.hero-grid,.hero-copy,.hero-product-stage){min-width:0}
.public-site .site-header :is(a,button){flex-shrink:0}
/* Presentation animation must never hide essential hero copy or CTA when JS is absent. */
.public-site .hero :is(h1,.lead,.eyebrow,.actions,.trust-row){visibility:visible!important;opacity:1!important}
/* Admin: align all views (dashboards, lists, reports, forms) */
body.admin-portal-body{
 --navy:var(--vt-night);--navy-2:var(--vt-deep);--navy-3:#174566;
 --paper:#f0f5fa;--surface:#fff;--surface-2:#f7fafc;
 --ink:#132d47;--muted:#61768c;--line:#d9e5ee;--line-strong:#c3d5e4;
 --orange:var(--vt-orange);--pink:var(--vt-pink);--purple:var(--vt-purple);
 --blue:var(--vt-blue);--accent:var(--vt-blue);--accent-2:#3ba9ee;
 color:var(--ink);background:var(--paper)
}
html[data-theme="dark"] body.admin-portal-body{
 --paper:#081726;--surface:#10263b;--surface-2:#183149;--ink:#f0f7ff;
 --muted:#b3c6d8;--line:#2c4960;--line-strong:#42607a;
}
.admin-portal-body .app-frame{grid-template-columns:minmax(225px,260px) minmax(0,1fr)}
.admin-portal-body .sidebar{background:linear-gradient(165deg,#06182b 0%,#093153 64%,#103b60 100%)!important;border-color:#225073!important}
.admin-portal-body .sidebar-brand{min-height:82px;height:auto;padding:14px 15px;gap:8px;border-color:#244968}
.admin-portal-body .sidebar-brand .brand{flex:1;min-width:0;gap:10px}
.admin-portal-body .brand-copy{min-width:0;flex:1;overflow:visible}
.admin-portal-body .brand-copy b{font-size:.89rem;line-height:1.27;overflow-wrap:break-word}
.admin-portal-body .brand-copy small{font-size:.69rem;line-height:1.35;color:#bbd3e7}
.admin-portal-body .nav-label{color:#9dbfd7}
.admin-portal-body .nav-item{gap:9px;min-height:42px;color:#d4e5f2;border:1px solid transparent;line-height:1.35}
.admin-portal-body .nav-item:hover{background:#164365;border-color:#275879;color:#fff}
.admin-portal-body .nav-item.active{background:#18507e!important;box-shadow:inset 3px 0 0 #67c8ff!important;color:#fff;border-color:#2a6594}
.admin-portal-body .admin-nav-number{background:rgba(204,229,248,.13);color:#d9eafa!important;flex:0 0 27px}
.admin-portal-body .nav-item.active .admin-nav-number{background:#d8edff;color:#0e4168!important}
.admin-portal-body .build-chip,.admin-portal-body .admin-context-card{background:rgba(255,255,255,.055);border-color:#336386;color:#e7f2fa}
.admin-portal-body .admin-header{background:var(--surface);border-color:var(--line);min-height:74px;gap:10px}
.admin-portal-body .admin-header-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.admin-portal-body .admin-content{padding:clamp(16px,2.4vw,32px)!important;min-width:0;overflow-x:clip}
.admin-portal-body .admin-content-inner{width:100%;max-width:1540px;min-width:0}
.admin-portal-body :is(h1,h2,h3,h4){line-height:1.2;max-width:100%;overflow-wrap:break-word}
.admin-portal-body :is(.admin-section-heading,.panel-heading,.hero-actions,.header-actions,.button-row,.inline-actions){gap:clamp(8px,1.3vw,16px);flex-wrap:wrap}
.admin-portal-body :is(.panel,.card,.metric-card,.product-card,.hero-panel,.hero-card,.operations-hero,.welcome-panel){min-width:0;max-width:100%;border-color:var(--line);border-radius:17px;box-shadow:0 7px 24px rgba(18,53,84,.06)}
.admin-portal-body :is(.operations-hero,.hero-card,.hero-panel,.welcome-panel){background-image:linear-gradient(130deg,rgba(6,125,206,.09),rgba(201,219,234,.11))}
.admin-portal-body :is(.button,.btn,button[type="submit"]){max-width:100%;min-height:38px;line-height:1.35}
.admin-portal-body .button.primary,.admin-portal-body .button.button-primary,.admin-portal-body button[type="submit"]:not(.secondary):not(.ghost){background:#087aca;color:#fff;border-color:#087aca}
.admin-portal-body :is(.button:hover,button[type="submit"]:hover){filter:brightness(1.03)}
.admin-portal-body :is(.data-table,.customer-table,.matrix-table,.identity-table){max-width:100%;table-layout:auto}
.admin-portal-body :is(.data-table-wrap,.customer-table-wrap,.identity-table-wrap,.matrix-table-wrap,[class*="table-wrap"]){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-portal-body :is(table){border-collapse:collapse}
.admin-portal-body :is(th,td){line-height:1.4;vertical-align:top}
.admin-portal-body :is(label,.field-help){line-height:1.45}
.admin-portal-body :is(input,select,textarea){border-color:var(--line-strong);background:var(--surface);color:var(--ink)}
.admin-portal-body :is(.form-grid,.dashboard-grid,.product-grid,.metric-grid,.plan-grid,.client-details-grid){min-width:0}
.admin-portal-body .provisioning-existing-form{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.admin-portal-body .provisioning-existing-form>*{min-width:0;max-width:100%}
.admin-portal-body .provisioning-form-note{grid-column:1/-1}
.admin-portal-body .provisioning-existing-form .button{grid-column:auto;min-width:0}
.admin-portal-body :is(.admin-language-switch,.admin-language-switch.compact){border-color:var(--line);overflow:visible}
.admin-portal-body .sidebar .admin-language-switch{border-color:#396786}
.admin-portal-body .admin-language-switch.compact button.active{background:#0e6fb0;color:#fff}
/* Client portal and authentication share the same typography, blue highlights and spacing. */
body.client-body,body.client-auth-body{
 --brand:var(--vt-blue);--blue:var(--vt-electric);--ink:var(--vt-ink);
 --muted:var(--vt-muted);--line:var(--vt-line);
 background:#f1f6fa;color:var(--vt-ink)
}
.client-body .client-sidebar{background:linear-gradient(165deg,#06182b,#0b3557)!important}
.client-body .client-brand,.client-body .client-brand strong{color:#f4faff}
.client-body .client-content{min-width:0;max-width:100%;padding:clamp(15px,2.5vw,32px)}
.client-body :is(.client-frame,.client-content,.client-main,.client-header){min-width:0}
.client-body :is(.client-panel,.client-card,.client-overview-card,.client-login-card){border-color:var(--vt-line);border-radius:16px;box-shadow:0 8px 24px rgba(12,49,79,.055)}
.client-body :is(.client-button,.button,button[type="submit"]):not(.ghost){border-radius:10px}
.client-body :is(.client-button.primary,.button.primary,button[type="submit"]){background:#087fce;color:white}
.client-body :is([class*="table-wrap"]){max-width:100%;overflow-x:auto}
.client-body .client-brand-mark{background:transparent!important;box-shadow:none!important}
body.auth-body,body.client-auth-body{font-family:var(--vt-font)}
body.auth-body .auth-card,body.client-auth-body :is(.client-auth-card,.client-login-card){max-width:min(100%,480px);box-shadow:0 24px 60px rgba(8,41,71,.15);border:1px solid var(--vt-line);border-radius:20px}
body.auth-body{background:radial-gradient(circle at 70% 12%,#1e6c9e 0,transparent 42%),linear-gradient(135deg,#07182c,#143f61)}
body :is(.brand,.sidebar-brand,.client-brand-row){overflow:visible}
@media(max-width:1250px){
 .public-site .nav-wrap{gap:12px}
 .public-site .nav{gap:12px;font-size:.81rem}
 .public-site .hero-grid{gap:28px}
 .admin-portal-body .provisioning-existing-form{grid-template-columns:repeat(2,minmax(0,1fr))}
 .admin-portal-body .admin-header-actions{gap:6px}
}
@media(max-width:980px){
 .public-site .hero-grid{grid-template-columns:minmax(0,1fr)}
 .public-site .hero-copy{max-width:780px}
 .public-site .hero-product-stage{max-width:780px;width:100%;margin-inline:auto}
 .public-site .nav-wrap{min-height:66px}
 .admin-portal-body .app-frame{grid-template-columns:minmax(0,1fr)}
 .admin-portal-body .admin-content{padding:18px!important}
}
@media(max-width:760px){
 .public-site .shell{width:min(100% - 30px,1180px)}
 .public-site .hero{padding:clamp(35px,7vw,62px) 0}
 .public-site .hero-grid{gap:24px}
 .public-site .hero-copy h1{font-size:clamp(2.1rem,9vw,3.6rem);letter-spacing:-.035em}
 .public-site .hero-copy .lead{font-size:1.03rem}
 .public-site .nav-wrap{flex-wrap:nowrap}
 .public-site .nav-toggle{flex:0 0 auto}
 .public-site .hero-conversion-card{grid-template-columns:minmax(0,1fr);gap:10px}
 .public-site .hero-conversion-card>*{grid-column:1!important;grid-row:auto!important}
 .public-site .hero-brakki-stage{min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
 .public-site .hero-brakki-figure{grid-column:1;grid-row:auto}
 .public-site .hero-brakki-speech{grid-column:1;grid-row:auto;margin-top:0}
 .public-site .hero-brakki-speech:after{display:none}
 .admin-portal-body .admin-content{padding:16px 12px 26px!important}
 .admin-portal-body .admin-section-heading{display:flex;flex-direction:column;align-items:flex-start}
 .admin-portal-body .admin-header{min-height:64px;padding-inline:10px}
 .admin-portal-body .provisioning-existing-form{grid-template-columns:minmax(0,1fr)}
 .admin-portal-body .provisioning-form-note{grid-column:1}
 .admin-portal-body :is(.panel,.card,.hero-card,.hero-panel){padding:clamp(12px,3vw,18px)}
 .client-body .client-content{padding:14px}
}
@media(max-width:420px){
 .public-site .brand>span:last-child{font-size:.8rem}
 .public-site .brand small{font-size:.61rem}
 .public-site .voltimor-brand-mark img{width:34px;height:34px}
 .public-site .actions .button{width:100%}
 .admin-portal-body .admin-content{padding:12px 9px 22px!important}
}
@media(prefers-reduced-motion:reduce){body *,body *::before,body *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}