*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#020713;color:#f7fbff;font-family:Inter,system-ui,sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}.shell{width:min(1180px,calc(100% - 48px));margin:auto}.nav{height:76px;position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:36px;padding:0 max(24px,calc((100vw - 1180px)/2));background:rgba(2,7,19,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(141,220,255,.09)}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.08em}.brand>span:last-child span,.footer .brand span:last-child span{color:#16c9ff}.mark{width:34px;height:34px;border:1px solid #1688ff;border-radius:9px;display:grid;place-items:center;font-size:11px;background:#061224}.nav nav{display:flex;gap:28px;margin-left:auto}.nav nav a{font-size:13px;color:#8da2b8}.navcta{font-size:12px;border:1px solid #173b5b;padding:10px 14px;border-radius:8px}.navcta b{color:#ff8a00;margin-left:8px}.hero{min-height:680px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:60px;padding:50px 0 70px}.eyebrow{font-size:11px;letter-spacing:.18em;color:#16c9ff;font-weight:750}.eyebrow i{display:inline-block;width:7px;height:7px;background:#16c9ff;border-radius:50%;box-shadow:0 0 14px #16c9ff;margin-right:9px}.orange-text{color:#ff8a00}.hero h1,.section h2,.company h2,.page-hero h1{font-size:clamp(48px,6vw,82px);line-height:.96;letter-spacing:-.055em;margin:20px 0 26px}.hero h1 span,.section h2 span,.company h2 span,.page-hero h1 span{color:#7f96ac;font-weight:400}.lead,.page-hero>p:last-child{font-size:18px;color:#9bb0c4;max-width:680px}.actions{display:flex;gap:12px;margin-top:34px}.btn{padding:13px 18px;border-radius:9px;font-size:13px;font-weight:750;border:1px solid #173b5b}.primary{background:linear-gradient(90deg,#16c9ff,#1688ff);color:#00101b;border:0}.primary:hover{background:linear-gradient(90deg,#ff8a00,#ffb123)}.microproof{display:flex;gap:12px;align-items:center;color:#647b91;font-size:11px;margin-top:34px;text-transform:uppercase}.microproof i,.rail i{width:4px;height:4px;border-radius:50%;background:#1688ff}.microproof i{background:#ff8a00}.hero-system{height:520px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid rgba(22,136,255,.15);border-radius:50%}.o1{width:400px;height:400px}.o2{width:285px;height:285px}.core{width:150px;height:150px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(22,201,255,.45);background:radial-gradient(circle,rgba(22,201,255,.12),#071a2d 62%);box-shadow:0 0 80px rgba(22,136,255,.14)}.core small,.core em{font-size:8px;letter-spacing:.16em;color:#6f8ba4;font-style:normal}.node{position:absolute;width:145px;padding:14px;border:1px solid #173b5b;border-radius:10px;background:#061224}.node b{font-size:10px;color:#16c9ff}.node span{display:block;color:#72899f;font-size:10px}.n1{top:40px;left:40px}.n2{right:15px;top:120px}.n3{bottom:55px;right:55px}.n4{left:5px;bottom:130px}.node.orange{border-color:rgba(255,138,0,.35)}.node.orange b{color:#ff8a00}.rail{height:54px;border-block:1px solid #10263e;background:#030912;display:flex;align-items:center;justify-content:center;gap:24px;font-size:10px;letter-spacing:.13em;color:#61788e}.rail .hot{background:#ff8a00}.section{padding:120px 0}.section-head{display:grid;grid-template-columns:1.3fr .7fr;gap:80px;align-items:end;margin-bottom:60px}.section-head>p{color:#8198ad}.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.cap-grid article{min-height:300px;padding:26px;border:1px solid #153651;border-radius:14px;background:linear-gradient(180deg,#071426,#050c16);display:flex;flex-direction:column}.cap-grid article>span{font-size:11px;color:#16c9ff}.cap-grid h3{font-size:22px;margin:54px 0 12px}.cap-grid p{font-size:13px;color:#849aaf}.cap-grid footer{margin-top:auto;font-size:9px;letter-spacing:.12em;color:#5d768d}.cap-grid .ignite{border-color:rgba(255,138,0,.24);background:radial-gradient(circle at 90% 5%,rgba(255,138,0,.08),transparent 32%),#07111d}.cap-grid .ignite>span,.cap-grid .ignite footer{color:#ff8a00}.darkband,.company{background:#050b12;border-block:1px solid #10253b}.proof{display:grid;grid-template-columns:repeat(4,1fr);padding:30px 0}.proof div{padding:8px 26px;border-right:1px solid #15324b}.proof strong{display:block;font-size:13px}.proof span{font-size:10px;color:#6e859b}.orange-proof strong{color:#ff8a00}.partner-card{display:grid;grid-template-columns:1fr 1fr;gap:70px;border:1px solid #153651;border-radius:18px;padding:54px;background:radial-gradient(circle at 82% 40%,rgba(22,136,255,.08),transparent 30%),#050b12}.partner-card h2{font-size:48px}.partner-card p{color:#8198ad}.partner-card a{color:#ff8a00}.network{position:relative;min-height:280px;display:grid;place-items:center}.network b{width:110px;height:110px;border-radius:50%;border:1px solid #16c9ff;display:grid;place-items:center;background:#071a2d}.network span{position:absolute;border:1px solid #173b5b;padding:12px 16px;border-radius:9px;font-size:9px;background:#061224}.network .sa{left:0;top:55px}.network .uk{right:0;bottom:55px;border-color:rgba(255,138,0,.32);color:#ff8a00}.company{padding:120px 0}.company-grid{display:grid;grid-template-columns:1fr .85fr;gap:80px;align-items:center}.company-grid p{color:#8198ad}.company-card{border:1px solid #153651;border-radius:16px;padding:30px;background:#071426}.company-card small{font-size:9px;color:#16c9ff}.company-card dt,.company-card dd{border-bottom:1px solid #142b40;padding:11px 0;margin:0;font-size:12px}.company-card dt{float:left;clear:left;width:42%;color:#71889e}.company-card dd{margin-left:42%}.company-card footer{margin-top:24px;color:#ff8a00;font-size:11px}.contact{padding:120px 0;display:grid;grid-template-columns:1fr .8fr;gap:90px;align-items:center}.contact-box{border:1px solid #153651;border-radius:16px;background:#050b12;overflow:hidden}.contact-box a{display:grid;grid-template-columns:80px 1fr 20px;padding:20px;border-bottom:1px solid #15324b}.contact-box small{font-size:8px;color:#71889e}.contact-box p{padding:4px 20px 14px;font-size:10px;color:#61788e}.footer{min-height:110px;border-top:1px solid #10253b;display:flex;align-items:center;gap:30px;color:#61788e;font-size:10px}.footer .brand{margin-right:auto}.inner{min-height:70vh}.page-hero{padding:120px 0 70px}.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.cases article{padding:28px;border:1px solid #15334e;border-radius:14px;background:#050b12;min-height:260px}.case-top{display:flex;justify-content:space-between;font-size:9px;color:#6d859b}.case-top em{color:#1688ff}.cases h3{font-size:25px}.cases p{color:#8298ad;font-size:13px}.case-orange{background:radial-gradient(circle at 90% 10%,rgba(255,138,0,.05),transparent 30%),#071019!important}.narrow{max-width:900px}.project-form{display:grid;gap:18px;border:1px solid #153651;border-radius:16px;padding:28px;background:#050b12}.project-form label,.login-card label{display:grid;gap:8px;font-size:12px;color:#8da2b8}.project-form input,.project-form select,.project-form textarea,.login-card input{width:100%;background:#061224;border:1px solid #173b5b;border-radius:9px;padding:13px;color:#f7fbff}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.notice{padding:14px;border-radius:10px;margin-bottom:18px}.notice.success{border:1px solid rgba(22,201,255,.26)}.notice.error{border:1px solid rgba(255,138,0,.28);color:#ffd6a8}.control-auth-body{min-height:100vh;display:grid;place-items:center}.login-card{width:min(430px,calc(100% - 30px));border:1px solid #153651;border-radius:18px;padding:34px;background:#050b12}.login-card form{display:grid;gap:16px}.control-side{position:fixed;inset:0 auto 0 0;width:250px;padding:26px 18px;border-right:1px solid #10253b;background:#020713}.control-side nav{display:grid;gap:6px;margin-top:44px}.control-side nav a,.control-side button{background:transparent;border:0;color:#8da2b8;padding:11px 12px;text-align:left}.control-side form{position:absolute;bottom:22px}.control-main{margin-left:250px;padding:46px}.control-header{display:flex;justify-content:space-between;align-items:end}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.metric-grid article,.control-panel{border:1px solid #153651;border-radius:14px;background:#071426;padding:24px}.metric-grid small{font-size:9px;color:#16c9ff}.metric-grid strong{display:block;font-size:34px}.orange-card small{color:#ff8a00}@media(max-width:900px){.nav nav{display:none}.hero,.section-head,.company-grid,.contact,.partner-card{grid-template-columns:1fr}.cap-grid,.proof,.cases,.metric-grid{grid-template-columns:1fr 1fr}.control-side{width:210px}.control-main{margin-left:210px}}@media(max-width:620px){.shell{width:min(100% - 30px,1180px)}.hero{min-height:auto}.hero-system{height:360px;transform:scale(.88)}.cap-grid,.proof,.cases,.metric-grid,.form-grid{grid-template-columns:1fr}.proof div{border-right:0;border-bottom:1px solid #15324b}.control-side{position:static;width:auto}.control-side form{position:static}.control-main{margin-left:0}.page-hero{padding-top:90px}}.control-user{position:absolute;left:30px;right:18px;bottom:72px;display:grid;gap:2px}.control-user strong{font-size:11px;color:#dbe7f2}.control-user span{font-size:9px;color:#61788e}.control-two{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:34px}.control-form{display:grid;gap:13px}.control-form label{display:grid;gap:7px;font-size:10px;letter-spacing:.06em;color:#71889e}.control-form input,.control-form select,.control-form textarea{width:100%;border:1px solid #173b5b;border-radius:8px;background:#050b12;color:#f7fbff;padding:10px 11px;font:inherit}.control-form textarea{resize:vertical}.control-form .check{display:flex;align-items:center;gap:8px}.control-form .check input{width:auto}.data-list{display:grid;gap:8px}.data-list>a,.static-row{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border:1px solid #15324b;border-radius:9px;background:#050b12}.data-list>a:hover{border-color:#16c9ff}.data-list strong,.static-row strong{font-size:12px}.data-list span,.static-row span{display:block;margin-top:3px;font-size:9px;color:#71889e}.data-list b{color:#16c9ff}.compact{gap:6px}.muted{color:#71889e}.control-panel h3{font-size:14px;margin-top:28px}.version-list{display:grid;gap:10px}.version-list article{border:1px solid #15324b;border-radius:9px;padding:14px;background:#050b12}.version-list strong{font-size:13px}.version-list span{display:block;color:#16c9ff;font-size:9px;margin-top:3px}.version-list p{font-size:11px!important}.price-table{display:grid;gap:1px;background:#15324b}.price-head,.price-row{display:grid;grid-template-columns:1.6fr repeat(3,.7fr);gap:12px;padding:11px 12px;background:#050b12;align-items:center}.price-head{font-size:8px;letter-spacing:.1em;color:#71889e}.price-row{font-size:10px}.price-row strong,.price-row small{display:block}.price-row small{color:#71889e;margin-top:2px}.audit-list{display:grid}.audit-list article{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #15324b}.audit-list strong{font-size:11px}.audit-list span,.audit-list time{display:block;font-size:9px;color:#71889e}.audit-list article>div:last-child{text-align:right}@media(max-width:900px){.control-two{grid-template-columns:1fr}}@media(max-width:650px){.control-user{position:static;margin:20px 12px}.price-head,.price-row{grid-template-columns:1fr 1fr}.price-head span:nth-child(n+3){display:none}}
/* Phase 3 Commercial Workflow */
.control-table{width:100%;border-collapse:collapse;font-size:13px}
.control-table th{color:#6f879e;font-size:9px;letter-spacing:.1em;text-align:left;padding:12px;border-bottom:1px solid #17324f}
.control-table td{padding:15px 12px;border-bottom:1px solid #10263e;color:#dbe7f2;vertical-align:top}
.control-table td strong{display:block}.control-table td small{display:block;color:#71889e;margin-top:4px}
.control-table a{color:#16c9ff}.control-table a:hover{color:#ff8a00}
.empty-cell{text-align:center!important;color:#71889e!important;padding:36px!important}
.status-pill{display:inline-flex;padding:5px 8px;border:1px solid #173b5b;border-radius:999px;color:#8ddcff;font-size:9px;letter-spacing:.08em;text-transform:uppercase;background:#061224}
.control-form{display:grid;gap:18px}.control-form label{display:grid;gap:8px;font-size:11px;color:#8da2b8}
.control-form input,.control-form select,.control-form textarea,.inline-form select,.accept-form input{width:100%;background:#061224;border:1px solid #173b5b;border-radius:9px;padding:11px 12px;color:#f7fbff;font:inherit}
.quote-row{display:grid;grid-template-columns:1.2fr 1.5fr repeat(4,.75fr);gap:10px;padding:14px;border:1px solid #153651;border-radius:12px;margin-bottom:12px;background:#050b12}
.quote-row label{font-size:9px}.control-actions{display:flex;gap:14px;align-items:center;margin-top:18px}.accept-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;flex:1}
.scope-lock{border-color:rgba(255,138,0,.28);background:radial-gradient(circle at 90% 10%,rgba(255,138,0,.06),transparent 30%),#071019}.scope-lock code{display:block;overflow:auto;padding:12px;background:#020713;border-radius:8px;color:#8ddcff;font-size:10px}
.inline-form{display:flex;gap:10px}.inline-form select{max-width:260px}
@media(max-width:1100px){.quote-row{grid-template-columns:1fr 1fr 1fr}.quote-row label:nth-child(2){grid-column:span 2}}
@media(max-width:720px){.control-table{display:block;overflow-x:auto}.quote-row{grid-template-columns:1fr}.quote-row label:nth-child(2){grid-column:auto}.accept-form{grid-template-columns:1fr}.control-actions{align-items:stretch;flex-direction:column}}
.flow-strip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}.flow-strip a{border:1px solid #173b5b;padding:10px 12px;border-radius:9px;color:#16c9ff}.flow-strip i{font-style:normal;color:#ff8a00}
/* Phase 4 Partner Portal */
.partner-body{min-height:100vh;background:#03070d;color:#f7fbff}
.partner-side{position:fixed;inset:0 auto 0 0;width:250px;padding:26px 18px;border-right:1px solid #10253b;background:linear-gradient(180deg,#020713,#04101d)}
.partner-brand small{display:block;margin:16px 0 0 4px;color:#8ddcff;font-size:10px;letter-spacing:.08em}
.partner-side nav{display:grid;gap:5px;margin-top:40px}
.partner-side nav a{padding:11px 12px;border-radius:8px;color:#8da2b8;font-size:13px}
.partner-side nav a:hover{background:#071426;color:#fff}
.partner-side footer{position:absolute;left:18px;right:18px;bottom:20px;border-top:1px solid #10253b;padding-top:16px}
.partner-side footer small{color:#ff8a00;font-size:9px;letter-spacing:.1em}
.partner-side footer form{margin-top:8px}.partner-side footer button{border:0;background:transparent;color:#71889e;padding:6px 0;cursor:pointer}
.partner-main{margin-left:250px;padding:46px}
.partner-main .control-header h1{margin-bottom:4px}
.panel-title{display:flex;justify-content:space-between;gap:30px;align-items:flex-start}
.check-row{display:flex;flex-wrap:wrap;gap:18px;padding:14px 0}.check-row label{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.check-row input{width:auto!important}
@media(max-width:900px){.partner-side{width:210px}.partner-main{margin-left:210px;padding:30px}}
@media(max-width:650px){.partner-side{position:static;width:auto}.partner-side nav{grid-template-columns:1fr 1fr}.partner-side footer{position:static;margin-top:20px}.partner-main{margin-left:0;padding:22px}}
/* Phase 5 Client Portal */
.client-body{min-height:100vh;background:#03070d;color:#f7fbff}.client-side{position:fixed;inset:0 auto 0 0;width:250px;padding:26px 18px;border-right:1px solid #10253b;background:linear-gradient(180deg,#020713,#05111d)}.client-brand small{display:block;margin:16px 0 0 4px;color:#8ddcff;font-size:10px;letter-spacing:.08em}.client-brand em{display:block;margin:5px 0 0 4px;color:#ff8a00;font-size:9px;font-style:normal}.client-side nav{display:grid;gap:5px;margin-top:38px}.client-side nav a{padding:10px 12px;border-radius:8px;color:#8da2b8;font-size:13px}.client-side nav a:hover{background:#071426;color:#fff}.client-side footer{position:absolute;left:18px;right:18px;bottom:20px;border-top:1px solid #10253b;padding-top:16px}.client-side footer small{color:#16c9ff;font-size:9px;letter-spacing:.1em}.client-side footer button{border:0;background:transparent;color:#71889e;padding:6px 0;cursor:pointer}.client-main{margin-left:250px;padding:46px}.client-main code{display:block;margin-top:16px;padding:12px;border-radius:8px;background:#020713;color:#8ddcff}@media(max-width:900px){.client-side{width:210px}.client-main{margin-left:210px;padding:30px}}@media(max-width:650px){.client-side{position:static;width:auto}.client-side nav{grid-template-columns:1fr 1fr}.client-side footer{position:static;margin-top:20px}.client-main{margin-left:0;padding:22px}}
/* Phase 6 Mission Control */
.health-pill{display:inline-flex;padding:5px 8px;border-radius:999px;border:1px solid #173b5b;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.health-healthy{color:#8ddcff;border-color:rgba(22,201,255,.35);background:rgba(22,201,255,.06)}
.health-degraded{color:#ffc928;border-color:rgba(255,201,40,.35);background:rgba(255,201,40,.05)}
.health-incident,.health-offline{color:#ff9b71;border-color:rgba(255,138,0,.42);background:rgba(255,138,0,.08)}
.health-maintenance{color:#9cb3ca}.health-unknown{color:#6f879e}
.mini-form{display:inline-block;margin-left:10px}.mini-form button{border:0;background:transparent;color:#ff8a00;font-size:11px;cursor:pointer;padding:0}
.token-code{font-size:12px;word-break:break-all;border:1px solid rgba(255,138,0,.25)}
/* ============================================================
SaaSv3 V3.6 Visual System Consolidation · Phase 6.1
Original V3.6 System Concept is the visual source of truth.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#020713;--bg2:#061224;--surface:#08182c;--surface2:#0b223d;--surfaceNeutral:#060b12;--text:#f7fbff;--muted:#8da2b8;--line:#17324f;--accent:#16c9ff;--accent2:#1688ff;--blue:#0a57c8;--ice:#8ddcff;--warn:#ff8a00;--gold:#ffc928;--radius:3px;--ease:cubic-bezier(.2,.75,.25,1)}
html,body{background:var(--bg);color:var(--text)}body{font-family:Manrope,Arial,sans-serif}.grain{position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.brand{font-weight:600;letter-spacing:-.035em}.brand strong{font-size:18px;letter-spacing:-.04em}.brand strong span{color:var(--accent)}.brand-glyph{width:25px;height:25px;position:relative;display:block;flex:0 0 25px}.brand-glyph i{position:absolute;width:8px;height:8px;border:1px solid var(--accent);transform:rotate(45deg)}.brand-glyph i:nth-child(1){left:0;top:8px}.brand-glyph i:nth-child(2){left:8px;top:0}.brand-glyph i:nth-child(3){left:15px;top:11px;background:var(--accent);box-shadow:0 0 18px rgba(22,201,255,.35)}
.eyebrow,.label,.console-tag,.side-system,.nav-divider,.ops-topline,.status-pill,.health-pill,.control-table th,.control-form label,.metric-grid small,.control-user small,.portal-side footer small{font-family:'DM Mono',monospace!important;letter-spacing:.1em;text-transform:uppercase}.eyebrow{font-weight:500;font-size:10px;color:var(--accent)}.eyebrow i,.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(22,201,255,.5);animation:v36pulse 2s infinite;margin-right:8px}@keyframes v36pulse{50%{box-shadow:0 0 0 7px rgba(22,201,255,0)}}
/* public system language */
.system-nav{background:linear-gradient(to bottom,rgba(2,7,19,.94),rgba(2,7,19,.78));border-color:rgba(22,201,255,.1);backdrop-filter:blur(18px);height:76px}.system-nav nav a{font-size:12px;color:#879bab;position:relative}.system-nav nav a.active,.system-nav nav a:hover{color:#fff}.system-nav nav a.active:after{content:'';position:absolute;left:0;right:0;bottom:-27px;height:1px;background:var(--accent);box-shadow:0 0 12px rgba(22,201,255,.35)}.navcta{border-radius:0;border-color:rgba(22,201,255,.3);font:500 10px 'DM Mono',monospace;letter-spacing:.06em;background:rgba(22,201,255,.04)}.navcta span{color:#dbe8f0}.navcta b{color:var(--accent)}
.hero{position:relative}.hero:after{content:'';position:absolute;z-index:-1;right:-15vw;top:0;width:70vw;height:100%;background:radial-gradient(circle at 55% 40%,rgba(22,201,255,.08),transparent 28%)}.hero h1,.section h2,.company h2,.page-hero h1{font-weight:600;letter-spacing:-.065em}.btn{border-radius:0;font:500 10px 'DM Mono',monospace;letter-spacing:.04em}.btn.primary,.primary{background:var(--accent);color:#041018;border-color:var(--accent)}.btn.primary:hover,.primary:hover{background:#fff;color:#041018}.hero-system{border:1px solid rgba(22,201,255,.11);background:linear-gradient(145deg,rgba(10,20,30,.6),rgba(4,8,13,.22));overflow:hidden}.hero-system:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(22,201,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(22,201,255,.05) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(circle at center,#000 20%,transparent 75%)}.hero-system .node,.network span,.company-card,.contact-box,.cap-grid article,.partner-card,.cases article,.project-form{border-radius:0}.hero-system .node{background:rgba(6,13,20,.92);box-shadow:0 20px 55px rgba(0,0,0,.25)}.hero-system .core{border-radius:50%}.cap-grid article{background:linear-gradient(180deg,#071421,#050b12);border-color:#173044}.cap-grid article:hover{border-color:rgba(22,201,255,.35);transform:translateY(-3px);transition:.3s var(--ease)}.rail{font-family:'DM Mono',monospace}.company-card,.partner-card,.contact-box{background:#050b12;border-color:#183247}
/* operations shell */
.ops-shell{background:var(--bg);min-height:100vh}.ops-shell:before{content:'';position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(22,201,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(22,201,255,.018) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 100%)}
.ops-side{position:fixed;inset:0 auto 0 0;width:266px;padding:28px 20px;border-right:1px solid rgba(22,201,255,.12);background:linear-gradient(180deg,#020713 0,#04101b 62%,#020713 100%);z-index:20}.ops-brand{padding:4px 6px}.side-system{display:flex;align-items:center;gap:7px;margin:30px 6px 26px;padding:11px 0;border-top:1px solid #13283b;border-bottom:1px solid #13283b;font-size:8px;color:#60798d}.side-system .pulse{margin:0;width:5px;height:5px}.side-system b{color:#a9bac7;font-weight:500}.side-system small{margin-left:auto;color:var(--accent);font:500 8px 'DM Mono',monospace}
.ops-side nav{display:grid!important;gap:1px!important;margin-top:0!important}.ops-side nav>a{position:relative;padding:9px 10px!important;border:1px solid transparent!important;border-radius:0!important;color:#71889a!important;font-size:11px!important;background:transparent!important;transition:.18s ease}.ops-side nav>a:before{content:'';position:absolute;left:0;top:50%;width:0;height:1px;background:var(--accent);transition:.18s}.ops-side nav>a:hover,.ops-side nav>a.active{color:#eaf2f7!important;background:rgba(22,201,255,.035)!important;border-color:rgba(22,201,255,.08)!important;padding-left:17px!important}.ops-side nav>a.active:before{width:9px}.ops-side nav>a.active{color:var(--accent)!important}.nav-divider{padding:18px 10px 6px;color:#3f5a70;font-size:7px;letter-spacing:.15em}.portal-side nav .nav-divider{padding-top:20px}
.ops-main{margin-left:266px!important;padding:0!important;min-height:100vh;position:relative}.ops-topline{height:46px;border-bottom:1px solid rgba(22,201,255,.1);display:flex;justify-content:space-between;align-items:center;padding:0 34px;color:#526b80;font-size:8px;background:rgba(2,7,19,.75);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.ops-topline>div{display:flex;align-items:center;gap:8px}.ops-topline .pulse{margin:0;width:5px;height:5px}.ops-topline b{color:var(--accent);font-weight:500}.ops-topline i{width:1px;height:12px;background:#183247;margin:0 7px}.ops-content{padding:38px 42px 70px;max-width:1700px}.control-header{align-items:flex-end;border-bottom:1px solid rgba(22,201,255,.1);padding-bottom:24px;margin-bottom:25px}.control-header h1{font-size:clamp(35px,4vw,58px);line-height:.96;letter-spacing:-.06em;margin:8px 0 0;font-weight:600}.control-header>span,.console-tag{font:500 8px 'DM Mono',monospace;color:#617b8e;border:1px solid #173147;padding:8px 10px}.control-subline{margin:10px 0 0;color:#71899b;font-size:12px;max-width:680px}
.metric-grid{gap:1px!important;background:#173044;border:1px solid #173044;margin:0 0 28px}.metric-grid article{border:0!important;border-radius:0!important;background:#06101b!important;min-height:132px;padding:20px!important;position:relative}.metric-grid article:after{content:'';position:absolute;right:13px;top:13px;width:4px;height:4px;border-radius:50%;background:#214c69}.metric-grid article:hover:after{background:var(--accent);box-shadow:0 0 12px rgba(22,201,255,.5)}.metric-grid small{font-size:8px!important;color:#60798b!important}.metric-grid strong{font-size:36px!important;letter-spacing:-.055em;margin:22px 0 3px}.metric-grid article>span{font-size:9px;color:#577084}.metric-grid .orange-card:after{background:var(--warn)}.metric-grid .orange-card small{color:var(--warn)!important}
.control-panel{position:relative;border:1px solid #173044!important;border-radius:0!important;background:rgba(5,12,20,.86)!important;padding:25px!important;margin-top:18px;box-shadow:none!important}.control-panel:before{content:'';position:absolute;left:-1px;top:-1px;width:22px;height:1px;background:var(--accent)}.control-panel h2{font-size:20px;letter-spacing:-.035em;margin:0 0 10px;font-weight:600}.control-panel p{color:#7d93a4;line-height:1.7;font-size:12px}.system-panel{display:grid;grid-template-columns:55px 1fr;gap:18px;max-width:1050px}.panel-index{font:500 10px 'DM Mono',monospace;color:var(--accent);border-right:1px solid #173044;padding-top:2px}.text-link{font:500 9px 'DM Mono',monospace;color:var(--accent);letter-spacing:.06em}.flow-strip{gap:7px}.flow-strip a{border-radius:0!important;background:#06111c;padding:8px 10px!important;font:500 8px 'DM Mono',monospace!important;letter-spacing:.05em}.flow-strip i{font-family:'DM Mono',monospace}
.control-table{font-size:11px!important}.control-table th{font-size:7px!important;color:#536e83!important;padding:10px 12px!important;border-bottom:1px solid #173044!important;background:#040b13}.control-table td{padding:12px!important;border-bottom:1px solid #10283b!important}.control-table tbody tr:hover td{background:rgba(22,201,255,.025)}.control-table td small{font-size:9px!important}.status-pill,.health-pill{border-radius:0!important;font-size:7px!important;padding:5px 6px!important;background:#050d16!important}.health-healthy{color:var(--accent)!important}.health-degraded{color:var(--gold)!important}.health-incident,.health-offline{color:var(--warn)!important}
.control-form input,.control-form select,.control-form textarea,.inline-form select,.accept-form input,.project-form input,.project-form select,.project-form textarea,.login-card input{border-radius:0!important;background:#040c14!important;border-color:#18364e!important;font-size:11px!important}.control-form input:focus,.control-form select:focus,.control-form textarea:focus,.login-card input:focus{outline:0;border-color:rgba(22,201,255,.55);box-shadow:0 0 0 1px rgba(22,201,255,.08)}.quote-row{border-radius:0!important;background:#040b12!important}.check-row input{accent-color:var(--accent)}
.control-user{left:26px!important;right:22px!important;bottom:72px!important;border-top:1px solid #13283b;padding-top:14px}.control-user small{font-size:6px;color:#435d72}.control-user strong{font-size:11px!important}.control-user span{font:400 8px 'DM Mono',monospace;color:#5b7488}.ops-side .signout,.ops-side>form{position:absolute;left:20px;right:20px;bottom:20px!important}.ops-side .signout button,.ops-side>form button,.portal-side footer button{font:500 8px 'DM Mono',monospace!important;letter-spacing:.08em;color:#5e778b!important;padding:7px 5px!important}.ops-side .signout button:hover,.portal-side footer button:hover{color:var(--warn)!important}
/* partner/client inherit command language but with lower density */
.partner-main,.client-main{margin-left:266px!important}.partner-brand,.client-brand{padding:4px 6px}.partner-brand>small,.client-brand>small{display:block!important;margin:17px 0 4px!important;font:500 7px 'DM Mono',monospace!important;color:#4c667b!important;letter-spacing:.12em}.partner-brand>b,.client-brand>b{display:block;font-size:12px;color:#dce8ef;font-weight:500}.client-brand em{font:500 7px 'DM Mono',monospace!important;letter-spacing:.07em;color:var(--warn)!important}.portal-side footer{position:absolute!important;left:20px!important;right:20px!important;bottom:20px!important;border-top:1px solid #13283b!important;padding-top:13px!important}.partner-main .control-header,.client-main .control-header{margin-bottom:24px}
/* auth */
.control-auth-body{position:relative;overflow:hidden;background:#020713!important}.control-auth-body:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(22,201,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(22,201,255,.04) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at center,#000 10%,transparent 72%)}.auth-ambient{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(22,201,255,.09),transparent 65%);pointer-events:none}.auth-brand{position:absolute;left:34px;top:28px;display:flex;align-items:center;gap:11px}.auth-brand strong{letter-spacing:-.04em}.auth-brand strong span{color:var(--accent)}.auth-brand small{margin-left:10px;font:500 7px 'DM Mono',monospace;color:#526b80;letter-spacing:.12em}.login-card{position:relative;border-radius:0!important;background:rgba(5,12,20,.93)!important;border-color:#1b4058!important;padding:34px!important;box-shadow:0 40px 100px rgba(0,0,0,.35)}.login-card:before{content:'';position:absolute;left:-1px;top:-1px;width:50px;height:1px;background:var(--accent)}
@media(max-width:900px){.ops-side{width:220px}.ops-main,.partner-main,.client-main{margin-left:220px!important}.ops-content{padding:30px 26px}.system-panel{grid-template-columns:38px 1fr}.ops-topline{padding:0 25px}.ops-topline>div:last-child{display:none}}
@media(max-width:650px){.ops-side{position:static!important;width:auto!important;min-height:auto;padding:18px}.ops-side nav{grid-template-columns:1fr 1fr}.side-system{margin:15px 5px}.nav-divider{grid-column:1/-1}.control-user,.ops-side .signout,.ops-side>form,.portal-side footer{position:static!important;margin-top:18px}.ops-main,.partner-main,.client-main{margin-left:0!important}.ops-content{padding:24px 16px 55px}.ops-topline{position:static}.metric-grid{grid-template-columns:1fr 1fr!important}.control-header{align-items:flex-start;gap:15px}.system-nav .brand strong{font-size:16px}}
/* =========================================================
Phase 6.2 Readability / Contrast Consolidation
Keeps V3.6 visual language while improving legibility.
========================================================= */
:root{
--bg:#050b14;
--bg2:#081321;
--surface:#0a1827;
--surface2:#0d2235;
--surfaceNeutral:#07111b;
--text:#f7fbff;
--muted:#a4b6c7;
--muted2:#8299ad;
--line:#25445b;
--lineSoft:#183247;
--accent:#20d1ff;
--accent2:#2796ff;
--blue:#0a57c8;
--ice:#a4e7ff;
--warn:#ff930d;
--gold:#ffd04a;
}
/* Main canvas: still dark, but not crushed into near-black */
html,body{
background:
radial-gradient(circle at 70% 8%,rgba(20,78,123,.13),transparent 36%),
linear-gradient(180deg,#07101b 0%,#050b14 48%,#040912 100%) !important;
color:var(--text);
}
/* Technical grid stays visible without muddying content */
.ops-shell{
background:transparent !important;
}
.ops-shell:before{
background-image:
linear-gradient(rgba(73,153,202,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(73,153,202,.035) 1px,transparent 1px) !important;
}
/* Left rail: distinct layer from main canvas */
.control-side,
.partner-side,
.client-side{
background:
linear-gradient(180deg,rgba(7,18,30,.99),rgba(5,13,23,.99)) !important;
border-right:1px solid #224158 !important;
}
/* Brand and operator area */
.control-user strong{
color:#f2f7fb !important;
}
.control-user span,
.control-user small{
color:#91a6b8 !important;
}
/* Navigation has stronger default and active contrast */
.control-side nav a,
.control-side nav button,
.partner-side nav a,
.client-side nav a{
color:#9fb2c2 !important;
font-size:12px !important;
}
.control-side nav a:hover,
.partner-side nav a:hover,
.client-side nav a:hover{
color:#f7fbff !important;
background:rgba(31,108,154,.11) !important;
}
.control-side nav a.active,
.partner-side nav a.active,
.client-side nav a.active{
color:#eaf8ff !important;
background:linear-gradient(90deg,rgba(22,201,255,.12),rgba(22,201,255,.025)) !important;
border-color:#23506a !important;
}
/* Section/divider labels */
.nav-divider,
.side-system,
.console-tag,
.ops-topline{
color:#718fa5 !important;
}
/* Main content shell gains a little more brightness */
.control-main,
.partner-main,
.client-main{
color:#f7fbff;
}
/* Primary panel surfaces now sit clearly above the canvas */
.metric-grid article,
.control-panel{
background:
linear-gradient(180deg,rgba(12,28,43,.96),rgba(8,20,32,.96)) !important;
border-color:#294a61 !important;
}
.control-panel:before{
background:#27d0ff !important;
}
/* Metric cards */
.metric-grid small{
color:#8ea8bb !important;
}
.metric-grid strong{
color:#f8fbff !important;
}
.metric-grid article span{
color:#93a8b9 !important;
}
/* Headings and page subtitles */
.control-header h1,
.control-panel h2,
.control-panel h3{
color:#fbfdff !important;
}
.control-header p,
.control-panel p,
.muted{
color:#9fb2c2 !important;
}
/* Tables: significantly easier scan/read */
.control-table th{
color:#829caf !important;
background:#081522 !important;
border-bottom-color:#2a4a60 !important;
}
.control-table td{
color:#e5edf4 !important;
border-bottom-color:#1b384c !important;
}
.control-table td small{
color:#91a7b9 !important;
}
.control-table tbody tr:nth-child(even) td{
background:rgba(11,29,44,.28);
}
.control-table tbody tr:hover td{
background:rgba(31,129,184,.075) !important;
}
/* Empty states should be readable, not disappear */
.empty-cell{
color:#9aafc0 !important;
}
/* Links/actions */
.control-table a,
.text-link{
color:#3ad7ff !important;
}
.control-table a:hover,
.text-link:hover{
color:#ff9a19 !important;
}
/* Forms */
.control-form label,
.project-form label,
.login-card label{
color:#9aafc0 !important;
}
.control-form input,
.control-form select,
.control-form textarea,
.project-form input,
.project-form select,
.project-form textarea,
.login-card input{
background:#081521 !important;
color:#f6fbff !important;
border-color:#31536a !important;
}
.control-form input::placeholder,
.control-form textarea::placeholder,
.login-card input::placeholder{
color:#6f899d !important;
}
.control-form input:focus,
.control-form select:focus,
.control-form textarea:focus,
.login-card input:focus{
outline:none;
border-color:#2bd2ff !important;
box-shadow:0 0 0 2px rgba(32,209,255,.08);
}
/* Status pills stay technical but no longer disappear */
.status-pill,
.health-pill{
background:#091824 !important;
border-color:#31536a !important;
color:#a8bfd0 !important;
}
.health-healthy{color:#43dcff !important;border-color:#24728b !important}
.health-degraded{color:#ffd65a !important;border-color:#806b2a !important}
.health-incident,
.health-offline{color:#ffad73 !important;border-color:#854a29 !important}
/* Flow + small technical controls */
.flow-strip a,
.version-list article,
.data-list>a,
.static-row,
.price-row,
.price-head{
background:#081522 !important;
border-color:#24445a !important;
}
.data-list span,
.static-row span,
.version-list p,
.price-row small,
.audit-list span,
.audit-list time{
color:#91a7b9 !important;
}
/* Top system chrome */
.ops-topbar{
background:rgba(5,13,23,.92) !important;
border-bottom-color:#1c394d !important;
}
/* Public/portal body copy also gets the stronger muted tone */
.lead,
.page-hero>p:last-child,
.section-head>p,
.partner-card p,
.company-grid p,
.cases p{
color:#9eb3c4 !important;
}
/* Keep orange scarce and meaningful */
.orange-card{
background:
radial-gradient(circle at 90% 4%,rgba(255,147,13,.08),transparent 32%),
linear-gradient(180deg,rgba(15,28,40,.98),rgba(9,19,29,.98)) !important;
}
/* Slight text-size lift where the screenshots were hardest to scan */
.control-panel p{font-size:13px !important}
.control-table{font-size:12px !important}
.control-table th{font-size:8px !important}
.control-table td small{font-size:10px !important}
/* Phase 7 Operations */
.release-transition{display:flex;gap:6px;align-items:center}.release-transition select{background:#081521;color:#eaf7ff;border:1px solid #31536a;padding:5px 7px;font-size:10px}.release-transition button{border:1px solid #31536a;background:#091824;color:#3ad7ff;padding:5px 8px;cursor:pointer}.release-transition button:hover{border-color:#ff930d;color:#ffb45e}
/* =========================================================
Phase 7.1 UI Refinement
Sidebar hierarchy + lighter neutral operational canvas
========================================================= */
:root{
--bg:#0b1117;
--bg2:#0d151d;
--surface:#111b24;
--surface2:#14232e;
--surfaceNeutral:#0d161e;
--text:#f5f8fb;
--muted:#a9b7c3;
--muted2:#8798a7;
--line:#284352;
--lineSoft:#1b303c;
--accent:#22cfff;
--accent2:#2c91ff;
--ice:#a8e7fa;
--warn:#ff9418;
--gold:#ffd04a;
}
/* Main app canvas: graphite first, navy second */
html,
body,
.control-body,
.partner-body,
.client-body{
background:
radial-gradient(circle at 78% 2%, rgba(19,72,103,.08), transparent 33%),
linear-gradient(180deg,#0b1117 0%,#0a1016 100%) !important;
}
/* Remove full-page visual weight from the technical grid */
.ops-shell:before{
opacity:.32 !important;
background-image:
linear-gradient(rgba(93,139,165,.022) 1px,transparent 1px),
linear-gradient(90deg,rgba(93,139,165,.022) 1px,transparent 1px) !important;
background-size:96px 96px !important;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),rgba(0,0,0,.1) 68%,transparent 100%);
}
/* Main content breathes more */
.control-main{
background:
radial-gradient(circle at 70% 8%,rgba(31,95,129,.055),transparent 30%) !important;
padding-bottom:72px !important;
}
.control-main,
.partner-main,
.client-main{
color:var(--text);
}
/* Content panels become neutral and calmer */
.control-panel,
.metric-grid article{
background:
linear-gradient(180deg,rgba(18,29,38,.96),rgba(14,23,31,.98)) !important;
border-color:#2a4555 !important;
box-shadow:none !important;
}
.metric-grid article{
min-height:132px;
}
.control-panel{
margin-bottom:22px;
}
.control-panel:before{
opacity:.85;
}
/* Main headers get a little more separation from body */
.control-header{
margin-bottom:26px !important;
padding-bottom:22px !important;
border-bottom:1px solid #1d3441 !important;
}
.control-header h1{
letter-spacing:-.045em;
}
/* ---------------------------------------------------------
Sidebar
--------------------------------------------------------- */
.control-side{
width:270px !important;
background:
linear-gradient(180deg,#09131c 0%,#0a151e 100%) !important;
border-right:1px solid #243d4c !important;
padding:28px 20px 20px !important;
display:flex !important;
flex-direction:column !important;
height:100vh !important;
overflow:hidden !important;
}
/* Brand block: compact but present */
.control-side .brand,
.control-brand{
flex:0 0 auto;
margin-bottom:24px !important;
}
/* Core status bar */
.side-system{
flex:0 0 auto;
margin-bottom:14px !important;
padding:11px 0 !important;
border-top:1px solid #203744 !important;
border-bottom:1px solid #203744 !important;
}
/* Scroll only the menu, never the operator block */
.control-side nav{
flex:1 1 auto !important;
min-height:0 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
padding:10px 4px 18px 0 !important;
margin:0 !important;
scrollbar-width:thin;
scrollbar-color:#27485b transparent;
}
.control-side nav::-webkit-scrollbar{width:5px}
.control-side nav::-webkit-scrollbar-track{background:transparent}
.control-side nav::-webkit-scrollbar-thumb{background:#27485b;border-radius:6px}
/* Navigation sections are more compact */
.nav-divider{
margin:22px 0 8px 10px !important;
padding:0 !important;
font-size:8px !important;
letter-spacing:.18em !important;
color:#6f8899 !important;
}
.nav-divider:first-child{
margin-top:8px !important;
}
/* Menu rows */
.control-side nav a{
min-height:40px !important;
display:flex !important;
align-items:center !important;
padding:9px 12px 9px 16px !important;
margin:2px 0 !important;
border:1px solid transparent !important;
color:#aebdca !important;
font-size:12px !important;
line-height:1.2 !important;
position:relative !important;
background:transparent !important;
}
.control-side nav a:before{
content:"";
position:absolute;
left:6px;
width:4px;
height:4px;
border-radius:50%;
background:#34586b;
opacity:.65;
}
.control-side nav a:hover{
color:#f4fbff !important;
background:rgba(40,92,119,.09) !important;
border-color:#223e4c !important;
}
.control-side nav a.active{
color:#f7fcff !important;
background:
linear-gradient(90deg,rgba(25,120,163,.19),rgba(25,120,163,.045)) !important;
border-color:#2c5c72 !important;
}
.control-side nav a.active:before{
width:5px;
height:5px;
background:#26d3ff;
box-shadow:0 0 12px rgba(38,211,255,.55);
opacity:1;
}
/* Make lower system group visually distinct */
.control-side nav a[href="/control/users"]{
margin-top:4px !important;
}
/* Operator block now occupies its own footer area */
.control-user{
position:static !important;
flex:0 0 auto !important;
margin-top:10px !important;
padding:14px 6px 0 !important;
border-top:1px solid #203744 !important;
background:linear-gradient(180deg,rgba(9,19,28,0),#0a151e 18%) !important;
min-height:86px;
}
.control-user small{
display:block !important;
margin-bottom:5px !important;
color:#698294 !important;
font-size:7px !important;
letter-spacing:.15em !important;
}
.control-user strong{
display:block !important;
color:#f4f8fb !important;
font-size:12px !important;
line-height:1.2 !important;
}
.control-user span{
display:block !important;
margin-top:3px !important;
color:#8ea1b0 !important;
font-size:9px !important;
}
/* Signout no longer floats over content */
.control-signout,
.control-side .signout,
.control-side form[action*="logout"]{
position:static !important;
flex:0 0 auto !important;
margin:8px 6px 0 !important;
}
/* Main frame needs to follow wider sidebar */
.control-main{
margin-left:270px !important;
}
.ops-topbar{
left:270px !important;
}
/* Topbar is quieter */
.ops-topbar{
background:rgba(9,16,22,.88) !important;
border-bottom-color:#1b303c !important;
backdrop-filter:blur(8px);
}
/* Tables: neutral graphite bands instead of blue-on-blue */
.control-table th{
background:#101a22 !important;
color:#8da2b1 !important;
}
.control-table td{
color:#e4ebf0 !important;
}
.control-table tbody tr:nth-child(even) td{
background:rgba(25,39,49,.34) !important;
}
.control-table tbody tr:hover td{
background:rgba(38,82,104,.12) !important;
}
/* Secondary copy */
.control-header p,
.control-panel p,
.metric-grid article span,
.control-table td small{
color:#a1b0bc !important;
}
/* Buttons stay crisp */
.btn.primary{
box-shadow:none !important;
}
/* Mobile/tablet: no fixed rail */
@media(max-width:900px){
.control-side{
position:static !important;
width:100% !important;
height:auto !important;
max-height:none !important;
overflow:visible !important;
}
.control-side nav{
max-height:none !important;
overflow:visible !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:4px !important;
}
.nav-divider{
grid-column:1 / -1;
}
.control-main{
margin-left:0 !important;
}
.ops-topbar{
left:0 !important;
}
.control-user{
min-height:auto;
}
}
@media(max-width:560px){
.control-side nav{
grid-template-columns:1fr !important;
}
}
/* Phase 8 Automation */
.header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.mini-form input{background:#081521;color:#f6fbff;border:1px solid #31536a;padding:5px 7px;font-size:10px;min-width:160px}
/* =========================================================
Phase 8.1 Baseline Typography Refinement
Reduce visual heaviness while preserving V3 command system
========================================================= */
/* General type rhythm */
body{
font-weight:400 !important;
letter-spacing:-0.005em;
}
/* Large page headings were visually too dominant on dark canvas */
.control-header h1{
font-size:clamp(36px,4.2vw,58px) !important;
font-weight:650 !important;
line-height:1.02 !important;
letter-spacing:-.045em !important;
}
/* Section headings */
.control-panel h2{
font-size:20px !important;
font-weight:620 !important;
letter-spacing:-.02em !important;
}
.control-panel h3{
font-weight:600 !important;
}
/* Body copy gets lighter and slightly more air */
.control-header p,
.control-panel p,
.metric-grid article span,
.control-table td,
.control-table td small,
.control-form label{
font-weight:400 !important;
}
/* Dashboard metric numerals were too shouty */
.metric-grid strong{
font-size:clamp(26px,2.1vw,40px) !important;
font-weight:620 !important;
letter-spacing:-.035em !important;
}
/* Sidebar calmer and less dense */
.control-side nav a{
font-size:11.5px !important;
font-weight:400 !important;
color:#a7b4bf !important;
}
.control-side nav a.active{
font-weight:500 !important;
}
.nav-divider{
font-size:7.5px !important;
font-weight:500 !important;
}
.control-user strong{
font-weight:600 !important;
}
.control-user span{
font-weight:400 !important;
}
/* Tables */
.control-table{
font-size:11.5px !important;
}
.control-table th{
font-size:7.5px !important;
font-weight:550 !important;
letter-spacing:.11em !important;
}
.control-table td strong{
font-weight:560 !important;
}
/* Status labels feel more technical, less bold */
.status-pill,
.health-pill{
font-weight:500 !important;
letter-spacing:.07em !important;
}
/* Buttons */
.btn,
button{
font-weight:520 !important;
}
/* Form controls */
.control-form input,
.control-form select,
.control-form textarea{
font-weight:400 !important;
}
/* Confirmation action */
.confirm-step-form{
display:flex;
gap:8px;
align-items:center;
flex-wrap:wrap;
}
.confirm-step-form input{
min-width:220px;
background:#0d1821;
border:1px solid #31536a;
color:#edf5fa;
padding:8px 10px;
font-size:11px;
}
.confirm-step-form button{
border:1px solid #386178;
background:#112430;
color:#41d8ff;
padding:8px 12px;
cursor:pointer;
}
.confirm-step-form button:hover{
border-color:#ff9418;
color:#ffb45e;
}
/* Reduce strong-white dominance slightly */
.control-header h1,
.control-panel h2,
.control-panel h3,
.metric-grid strong{
color:#eef4f8 !important;
}
/* Slightly softer supporting text */
.control-header p,
.control-panel p,
.metric-grid article span{
color:#9eacb7 !important;
}
/* Lower dashboard density */
.metric-grid article{
padding:26px 22px !important;
}
/* Improve long-page comfort */
.control-main{
line-height:1.52;
}
/* Desktop widescreen no longer over-amplifies headings */
@media(min-width:1500px){
.control-header h1{
font-size:56px !important;
}
}
/* Narrow screens */
@media(max-width:700px){
.control-header h1{
font-size:38px !important;
}
.metric-grid strong{
font-size:28px !important;
}
}
/* =========================================================
Phase 8.2 Brand Balance
More SaaSv3 identity without returning to visual heaviness
========================================================= */
:root{
--brand-navy:#061327;
--brand-blue:#0d63d8;
--brand-electric:#168cff;
--brand-cyan:#22d4ff;
--brand-ice:#a9e8ff;
--brand-orange:#ff8d0b;
--brand-gold:#ffd04a;
}
/* Typography: restore presence without going back to oversized */
.control-header h1{
font-size:clamp(42px,4.8vw,66px) !important;
font-weight:690 !important;
line-height:.98 !important;
letter-spacing:-.052em !important;
}
.control-panel h2{
font-size:22px !important;
font-weight:650 !important;
}
.control-panel h3{
font-size:16px !important;
font-weight:620 !important;
}
.control-header p,
.control-panel p{
font-size:13px !important;
}
.control-side nav a{
font-size:12px !important;
}
.control-table{
font-size:12px !important;
}
.control-table th{
font-size:8px !important;
}
.metric-grid strong{
font-size:clamp(30px,2.4vw,44px) !important;
font-weight:660 !important;
}
/* Main brand in sidebar */
.ops-brand{
gap:12px !important;
min-height:40px;
}
.ops-brand strong{
font-size:22px !important;
font-weight:720 !important;
letter-spacing:-.045em !important;
color:#f7fbff !important;
}
.ops-brand strong span{
color:var(--brand-cyan) !important;
text-shadow:0 0 18px rgba(34,212,255,.16);
}
.brand-glyph{
width:29px !important;
height:29px !important;
flex-basis:29px !important;
}
.brand-glyph i{
width:9px !important;
height:9px !important;
border-color:var(--brand-cyan) !important;
}
.brand-glyph i:nth-child(3){
background:linear-gradient(135deg,var(--brand-cyan),var(--brand-electric)) !important;
box-shadow:0 0 20px rgba(34,212,255,.42) !important;
}
/* Heritage logo is a quiet secondary mark, not the primary UI logo */
.heritage-brand{
height:74px;
margin:12px 2px 4px;
position:relative;
overflow:hidden;
border-top:1px solid rgba(34,212,255,.09);
border-bottom:1px solid rgba(34,212,255,.07);
}
.heritage-brand img{
position:absolute;
width:118px;
height:auto;
right:-10px;
top:-20px;
opacity:.22;
filter:saturate(1.12) contrast(1.05);
}
.heritage-brand:before{
content:"BRAND CORE";
position:absolute;
left:6px;
bottom:12px;
z-index:2;
font:500 7px 'DM Mono',monospace;
letter-spacing:.16em;
color:#6f8fa4;
}
.heritage-brand:after{
content:"";
position:absolute;
left:6px;
bottom:5px;
width:44px;
height:1px;
background:linear-gradient(90deg,var(--brand-orange),transparent);
}
/* More logo colours in the shell, carefully */
.side-system{
border-top-color:rgba(34,212,255,.18) !important;
border-bottom-color:rgba(22,140,255,.12) !important;
}
.side-system small{
color:var(--brand-cyan) !important;
}
.ops-topline .pulse,
.side-system .pulse{
background:var(--brand-cyan) !important;
box-shadow:0 0 12px rgba(34,212,255,.55);
}
/* Active nav gets blue + cyan rather than only cyan */
.control-side nav a.active{
background:
linear-gradient(90deg,rgba(13,99,216,.20),rgba(34,212,255,.055)) !important;
border-color:#2c6d8c !important;
}
.control-side nav a.active:before{
background:var(--brand-cyan) !important;
box-shadow:0 0 12px rgba(34,212,255,.55);
}
.control-side nav a:hover{
background:rgba(13,99,216,.08) !important;
}
/* Panels get tiny brand edges instead of becoming blue slabs */
.control-panel{
position:relative;
}
.control-panel:after{
content:"";
position:absolute;
left:-1px;
top:18px;
width:1px;
height:52px;
background:linear-gradient(180deg,var(--brand-cyan),rgba(22,140,255,.2),transparent);
}
.metric-grid{
border-color:#285066 !important;
background:#285066 !important;
}
.metric-grid article{
background:
radial-gradient(circle at 96% 8%,rgba(22,140,255,.045),transparent 25%),
#111c25 !important;
}
.metric-grid article:after{
background:var(--brand-blue) !important;
}
.metric-grid article:hover:after{
background:var(--brand-cyan) !important;
}
.metric-grid .orange-card:after{
background:var(--brand-orange) !important;
}
.metric-grid .orange-card small{
color:var(--brand-orange) !important;
}
/* Small controlled colour moments in headings */
.eyebrow,
.control-header .eyebrow{
color:var(--brand-cyan) !important;
}
.console-tag{
border-color:#28516a !important;
color:#8ca5b7 !important;
}
.flow-strip a,
.control-table a,
.text-link{
color:var(--brand-cyan) !important;
}
.flow-strip a:hover,
.control-table a:hover,
.text-link:hover{
color:var(--brand-orange) !important;
}
/* Brand colour separator on topbar */
.ops-topline{
box-shadow:inset 0 -1px 0 rgba(22,140,255,.05);
}
.ops-topline:after{
content:"";
position:absolute;
left:34px;
bottom:-1px;
width:90px;
height:1px;
background:linear-gradient(90deg,var(--brand-cyan),var(--brand-blue),transparent);
opacity:.65;
}
/* Subtle brand flare on dashboard header */
.branded-header{
position:relative;
overflow:hidden;
}
.brand-orbit-mark{
position:absolute;
right:150px;
top:-42px;
width:180px;
height:180px;
pointer-events:none;
opacity:.17;
}
.brand-orbit-mark span,
.brand-orbit-mark i{
position:absolute;
border-radius:50%;
border:1px solid var(--brand-electric);
}
.brand-orbit-mark span{
inset:20px;
}
.brand-orbit-mark i{
inset:48px;
border-color:var(--brand-cyan);
}
.brand-orbit-mark b{
position:absolute;
width:10px;
height:10px;
border-radius:50%;
right:35px;
top:76px;
background:var(--brand-orange);
box-shadow:0 0 18px rgba(255,141,11,.45);
}
/* Brand-aware buttons */
.btn.primary,
button.primary{
background:linear-gradient(90deg,var(--brand-cyan),var(--brand-electric)) !important;
color:#031019 !important;
}
.btn.primary:hover,
button.primary:hover{
background:linear-gradient(90deg,var(--brand-orange),var(--brand-gold)) !important;
}
/* Status and info surfaces receive a little ice blue */
.status-pill,
.health-pill{
color:#b9d7e6 !important;
}
/* Footer/user area slight orange accent */
.control-user{
border-top-color:#294b5e !important;
}
.control-user:before{
content:"";
display:block;
width:34px;
height:1px;
margin-bottom:10px;
background:linear-gradient(90deg,var(--brand-orange),transparent);
}
/* Mobile heritage mark collapses */
@media(max-width:900px){
.heritage-brand{
display:none;
}
}
@media(max-width:700px){
.control-header h1{
font-size:42px !important;
}
}
/* =========================================================
Phase 8.3 UI Modernisation
Visual polish only — no logic changes
========================================================= */
:root{
--ui-bg:#080d13;
--ui-bg-elevated:#0d141c;
--ui-bg-soft:#101922;
--ui-surface:rgba(17,27,36,.88);
--ui-surface-strong:rgba(20,32,43,.96);
--ui-surface-soft:rgba(13,22,30,.82);
--ui-border:rgba(139,178,201,.14);
--ui-border-soft:rgba(139,178,201,.08);
--ui-border-strong:rgba(77,190,255,.28);
--ui-text:#f4f8fb;
--ui-muted:#9baab6;
--ui-muted-soft:#6f808d;
--ui-cyan:#22d3ff;
--ui-blue:#348cff;
--ui-ice:#a8e7fa;
--ui-orange:#ff9a24;
--ui-gold:#ffd04a;
--ui-success:#53d6c0;
--ui-warning:#ffc55c;
--ui-danger:#ff8d78;
--ui-radius-xs:6px;
--ui-radius-sm:9px;
--ui-radius:14px;
--ui-radius-lg:20px;
--ui-shadow-sm:0 10px 30px rgba(0,0,0,.18);
--ui-shadow:0 24px 70px rgba(0,0,0,.28);
--ui-shadow-strong:0 32px 90px rgba(0,0,0,.36);
--ui-ease:cubic-bezier(.22,.61,.36,1);
}
/* Typography */
html,body{
font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.eyebrow,.nav-divider,.side-system,.ops-topline,.console-tag,
.control-table th,.metric-grid small,.control-user small,code,.status-pill,.health-pill{
font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace !important;
}
.control-header h1{
font-size:clamp(44px,4.65vw,64px) !important;
font-weight:700 !important;
line-height:.98 !important;
letter-spacing:-.052em !important;
}
.control-panel h2{font-size:22px !important;font-weight:650 !important;letter-spacing:-.025em !important}
.control-panel h3{font-size:16px !important;font-weight:620 !important}
.control-header p,.control-panel p{line-height:1.68 !important}
/* Canvas */
html,body,.public-body,.control-body,.partner-body,.client-body{
background:
radial-gradient(circle at 75% 4%,rgba(40,108,148,.075),transparent 34%),
radial-gradient(circle at 16% 78%,rgba(18,87,126,.045),transparent 28%),
linear-gradient(180deg,#090e14 0%,#070c12 100%) !important;
color:var(--ui-text) !important;
}
.ops-shell:before{
opacity:.19 !important;
background-image:
linear-gradient(rgba(114,152,173,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(114,152,173,.018) 1px,transparent 1px) !important;
background-size:110px 110px !important;
}
.grain{opacity:.035 !important}
/* Top chrome */
.ops-topbar,.system-nav,.nav{
background:rgba(7,13,19,.78) !important;
border-bottom:1px solid var(--ui-border-soft) !important;
backdrop-filter:blur(16px) saturate(120%);
}
.nav nav a{color:#a7b4bf !important;transition:color .18s var(--ui-ease),transform .18s var(--ui-ease)}
.nav nav a:hover{color:#f7fbff !important;transform:translateY(-1px)}
.navcta{
border-color:var(--ui-border-strong) !important;
background:rgba(18,31,41,.64) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.navcta:hover{border-color:rgba(34,211,255,.52) !important;box-shadow:0 0 0 1px rgba(34,211,255,.06),0 10px 24px rgba(0,0,0,.16)}
/* Sidebar */
.ops-side,.control-side,.partner-side,.client-side,.portal-side{
background:linear-gradient(180deg,rgba(9,20,29,.985),rgba(8,16,24,.985)) !important;
border-right:1px solid var(--ui-border-soft) !important;
box-shadow:10px 0 40px rgba(0,0,0,.08);
}
.side-system{border-top:1px solid rgba(34,211,255,.10) !important;border-bottom:1px solid rgba(52,140,255,.08) !important}
.control-side nav a,.partner-side nav a,.client-side nav a{
border-radius:var(--ui-radius-sm) !important;
transition:background .18s var(--ui-ease),border-color .18s var(--ui-ease),color .18s var(--ui-ease),transform .18s var(--ui-ease),box-shadow .18s var(--ui-ease);
}
.control-side nav a:hover,.partner-side nav a:hover,.client-side nav a:hover{
transform:translateX(2px);
background:rgba(52,140,255,.075) !important;
border-color:rgba(82,159,203,.16) !important;
}
.control-side nav a.active,.partner-side nav a.active,.client-side nav a.active{
background:linear-gradient(90deg,rgba(52,140,255,.15),rgba(34,211,255,.035)) !important;
border-color:rgba(82,174,222,.24) !important;
box-shadow:inset 2px 0 0 var(--ui-cyan),0 8px 20px rgba(0,0,0,.10);
}
.nav-divider{color:#657d8d !important;opacity:.9}
/* Brand */
.ops-brand strong{color:#f7fbff !important}
.ops-brand strong span{color:var(--ui-cyan) !important;text-shadow:0 0 18px rgba(34,211,255,.14)}
.heritage-brand{border-top-color:rgba(34,211,255,.07) !important;border-bottom-color:rgba(52,140,255,.06) !important}
.heritage-brand img{opacity:.20 !important;filter:saturate(1.12) contrast(1.05) brightness(1.02)}
/* Cards/panels */
.metric-grid{
gap:1px !important;
background:var(--ui-border-soft) !important;
border:1px solid var(--ui-border) !important;
border-radius:var(--ui-radius) !important;
overflow:hidden;
box-shadow:var(--ui-shadow-sm);
}
.metric-grid article{
position:relative;
background:
radial-gradient(circle at 92% 8%,rgba(52,140,255,.045),transparent 26%),
linear-gradient(180deg,rgba(19,31,41,.96),rgba(14,24,32,.98)) !important;
border:0 !important;
transition:transform .18s var(--ui-ease),background .18s var(--ui-ease),box-shadow .18s var(--ui-ease);
}
.metric-grid article:hover{
transform:translateY(-2px);
background:
radial-gradient(circle at 92% 8%,rgba(34,211,255,.065),transparent 28%),
linear-gradient(180deg,rgba(21,34,45,.98),rgba(15,25,34,.99)) !important;
box-shadow:0 14px 30px rgba(0,0,0,.14);
z-index:2;
}
.metric-grid article:before{
content:"";position:absolute;inset:0 0 auto 0;height:1px;
background:linear-gradient(90deg,rgba(34,211,255,.35),rgba(52,140,255,.12),transparent 72%);
opacity:.45;
}
.control-panel,.system-panel{
border:1px solid var(--ui-border) !important;
border-radius:var(--ui-radius) !important;
background:linear-gradient(180deg,rgba(17,27,36,.90),rgba(13,22,30,.94)) !important;
box-shadow:var(--ui-shadow-sm);
overflow:hidden;
}
.control-panel:hover{border-color:rgba(82,159,203,.20) !important}
/* Tables */
.control-table{border-collapse:separate !important;border-spacing:0 !important;width:100%}
.control-table thead th{
background:linear-gradient(180deg,rgba(16,27,36,.98),rgba(13,23,31,.98)) !important;
color:#8195a4 !important;
border-bottom:1px solid var(--ui-border) !important;
padding-top:12px !important;padding-bottom:12px !important;
}
.control-table tbody td{
border-bottom:1px solid rgba(139,178,201,.08) !important;
padding-top:14px !important;padding-bottom:14px !important;
background:rgba(13,22,30,.16);
transition:background .16s var(--ui-ease);
}
.control-table tbody tr:nth-child(even) td{background:rgba(18,30,39,.22) !important}
.control-table tbody tr:hover td{background:rgba(52,140,255,.055) !important}
.control-table tbody tr:last-child td{border-bottom:0 !important}
.empty-cell{color:#8294a2 !important;padding:28px 18px !important;text-align:center}
/* Pills */
.status-pill,.health-pill{
border:1px solid rgba(126,169,194,.20) !important;
background:rgba(13,24,32,.76) !important;
border-radius:999px !important;
padding:5px 9px !important;
}
.health-healthy{color:#87eadb !important;border-color:rgba(83,214,192,.28) !important;background:rgba(83,214,192,.055) !important}
.health-degraded{color:#ffd37a !important;border-color:rgba(255,197,92,.28) !important;background:rgba(255,197,92,.055) !important}
.health-incident,.health-offline{color:#ffad9e !important;border-color:rgba(255,141,120,.28) !important;background:rgba(255,141,120,.055) !important}
/* Buttons */
.btn,button{
border-radius:var(--ui-radius-sm) !important;
transition:transform .16s var(--ui-ease),box-shadow .16s var(--ui-ease),border-color .16s var(--ui-ease),background .16s var(--ui-ease),color .16s var(--ui-ease);
}
.btn.primary,button.primary{
background:linear-gradient(135deg,var(--ui-cyan),var(--ui-blue)) !important;
color:#031019 !important;
border:1px solid rgba(93,211,255,.36) !important;
box-shadow:0 10px 22px rgba(26,128,190,.15);
}
.btn.primary:hover,button.primary:hover{transform:translateY(-1px);box-shadow:0 13px 28px rgba(26,128,190,.20)}
.btn.ghost,button.ghost{
background:rgba(17,28,37,.66) !important;
border:1px solid var(--ui-border) !important;
color:#b7c4ce !important;
}
.btn.ghost:hover,button.ghost:hover{
color:#f6fbff !important;border-color:rgba(34,211,255,.24) !important;background:rgba(23,38,49,.78) !important
}
/* Forms */
.control-form input,.control-form select,.control-form textarea,
.project-form input,.project-form select,.project-form textarea,
.login-card input,.confirm-step-form input{
background:rgba(9,18,25,.84) !important;
border:1px solid rgba(101,154,184,.25) !important;
color:#edf4f8 !important;
border-radius:var(--ui-radius-sm) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
transition:border-color .16s var(--ui-ease),box-shadow .16s var(--ui-ease),background .16s var(--ui-ease);
}
.control-form input:focus,.control-form select:focus,.control-form textarea:focus,
.login-card input:focus,.confirm-step-form input:focus{
outline:none !important;
border-color:rgba(34,211,255,.58) !important;
box-shadow:0 0 0 3px rgba(34,211,255,.075),inset 0 1px 0 rgba(255,255,255,.025) !important;
background:rgba(10,21,29,.94) !important;
}
/* Public hero/cards */
.hero:before{
content:"";
position:absolute;
inset:-12% -10% auto 38%;
height:72%;
background:radial-gradient(circle,rgba(34,211,255,.11),rgba(52,140,255,.035) 36%,transparent 68%);
filter:blur(24px);
pointer-events:none;
}
.hero-system,.cap-grid article,.proof,.cases article,.partner-card,.company-grid article{
border-radius:var(--ui-radius) !important;
border-color:var(--ui-border) !important;
background:linear-gradient(180deg,rgba(17,27,36,.88),rgba(13,22,30,.93)) !important;
box-shadow:var(--ui-shadow-sm);
}
/* Auth */
.control-auth-body{
background:radial-gradient(circle at 50% 35%,rgba(34,211,255,.065),transparent 34%),linear-gradient(180deg,#080d13,#060b11) !important;
}
.login-card{
border:1px solid var(--ui-border) !important;
border-radius:var(--ui-radius-lg) !important;
background:linear-gradient(180deg,rgba(17,27,36,.94),rgba(12,20,28,.98)) !important;
box-shadow:var(--ui-shadow-strong);
}
/* Responsive */
@media(max-width:900px){
.control-main,.partner-main,.client-main{padding-left:22px !important;padding-right:22px !important}
.metric-grid,.control-panel{border-radius:var(--ui-radius-sm) !important}
}
@media(max-width:620px){
.control-header h1{font-size:40px !important}
.control-table{font-size:11px !important}
.metric-grid article{padding:22px 18px !important}
}
/* Phase 9 Orchestration UI */
.policy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.policy-card{border:1px solid var(--ui-border,rgba(139,178,201,.14));border-radius:14px;padding:18px;background:rgba(10,19,27,.42)}
.policy-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.policy-card-head small{display:block;font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;letter-spacing:.12em;color:#718b9d;margin-bottom:7px}
.policy-card h3{margin:0 0 7px}
.policy-card code{display:inline-block;padding:4px 7px;border:1px solid rgba(34,211,255,.13);border-radius:6px;color:#71dfff;background:rgba(34,211,255,.025)}
.policy-card .check-row{margin:14px 0}
.policy-meta{display:flex;flex-wrap:wrap;gap:7px 12px;margin:12px 0;color:#8195a4;font-size:10px}
@media(max-width:1000px){.policy-grid{grid-template-columns:1fr}}
/* =========================================================
Phase 9.0.1 Automation Error UX
========================================================= */
.automation-alert{
margin:0 0 20px;
border:1px solid rgba(139,178,201,.14);
border-radius:14px;
padding:16px 18px;
background:linear-gradient(180deg,rgba(17,27,36,.94),rgba(13,22,30,.97));
box-shadow:0 12px 34px rgba(0,0,0,.16);
}
.automation-alert div{
display:grid;
grid-template-columns:auto 1fr;
gap:4px 14px;
align-items:center;
}
.automation-alert small{
grid-column:1 / -1;
font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
font-size:8px;
letter-spacing:.13em;
color:#7890a0;
}
.automation-alert strong{
font-size:15px;
font-weight:650;
}
.automation-alert span{
color:#aab8c2;
line-height:1.5;
}
.automation-alert-error{
border-color:rgba(255,141,120,.28);
background:
radial-gradient(circle at 98% 12%,rgba(255,141,120,.06),transparent 30%),
linear-gradient(180deg,rgba(21,28,34,.96),rgba(14,22,29,.98));
box-shadow:inset 3px 0 0 rgba(255,141,120,.72),0 12px 34px rgba(0,0,0,.16);
}
.automation-alert-error strong{
color:#ffb0a2;
}
.automation-alert-success{
border-color:rgba(83,214,192,.24);
box-shadow:inset 3px 0 0 rgba(83,214,192,.68),0 12px 34px rgba(0,0,0,.16);
}
.automation-alert-success strong{
color:#8ee7d9;
}
@media(max-width:720px){
.automation-alert div{grid-template-columns:1fr}
}
/* =========================================================
Phase 10 Provider Control UI
========================================================= */
.provider-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}
.provider-admin-grid .control-panel{margin:0}
.control-panel code{color:#6bdfff;background:rgba(34,211,255,.035);border:1px solid rgba(34,211,255,.12);border-radius:6px;padding:3px 6px}
@media(max-width:900px){.provider-admin-grid{grid-template-columns:1fr}}
/* =========================================================
Phase 10.2.1 Operator Help + Tours UI Hotfix
========================================================= */
.context-help-actions{
position:fixed;right:22px;bottom:22px;z-index:600;
display:flex;gap:8px;align-items:center
}
.context-help-btn,.context-tour-btn{
height:42px;min-width:42px;
border:1px solid rgba(91,208,255,.28);
background:rgba(8,22,32,.94);
color:#7fe5ff;border-radius:12px;
display:grid;place-items:center;
text-decoration:none;
font-family:var(--font-mono);font-size:12px;
cursor:pointer;
box-shadow:0 12px 34px rgba(0,0,0,.28)
}
.context-tour-btn{padding:0 14px}
.context-help-btn:hover,.context-tour-btn:hover{
border-color:rgba(91,208,255,.6);
background:rgba(11,31,44,.98)
}
.help-search-panel{margin-bottom:18px}
.help-search-form{display:grid;grid-template-columns:1fr auto;gap:12px}
.help-search-form input{min-height:50px}
.help-section{margin-bottom:18px}
.help-section-heading{margin-bottom:18px}
.help-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.help-card{
position:relative;display:block;padding:20px;
border:1px solid rgba(133,180,202,.16);
border-radius:14px;background:rgba(255,255,255,.012);
text-decoration:none;color:inherit;min-height:150px
}
.help-card:hover{border-color:rgba(77,211,255,.38);transform:translateY(-1px)}
.help-card h3{margin:0 28px 10px 0;font-size:18px}
.help-card p{margin:0;color:var(--text-muted);line-height:1.6}
.help-card-arrow{position:absolute;right:18px;top:18px;color:#55dcff}
.help-article{max-width:980px}
.help-article h2{font-size:26px;margin:0 0 12px}
.help-article h3{font-size:18px;margin:28px 0 10px}
.help-article p,.help-article li{font-size:15px;line-height:1.75;color:var(--text-muted)}
.help-article strong{color:var(--text)}
.help-context-link{margin-top:28px;padding-top:22px;border-top:1px solid rgba(133,180,202,.14)}
/* Tour uses independent fixed layers instead of modifying page stacking contexts. */
.tour-layer{
position:fixed;
inset:0;
z-index:2147483000;
pointer-events:none;
}
.tour-card{
position:fixed;
right:34px;
bottom:80px;
z-index:2147483002;
pointer-events:auto;
width:min(420px,calc(100vw - 40px));
padding:22px;
border-radius:16px;
border:1px solid rgba(80,215,255,.42);
background:linear-gradient(180deg,rgba(13,30,41,.99),rgba(8,22,31,.995));
box-shadow:0 28px 90px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.015) inset
}
.tour-card:before{
content:"";
position:absolute;
inset:-1px;
border-radius:16px;
pointer-events:none;
box-shadow:0 0 42px rgba(42,204,255,.08)
}
.tour-kicker{
font-family:var(--font-mono);
font-size:10px;letter-spacing:.16em;
color:#52d9ff;margin-bottom:10px
}
.tour-card h3{font-size:22px;margin:0 0 10px;color:#f4f8fb}
.tour-card p{color:#b8c5ce;line-height:1.62;margin:0 0 16px}
.tour-progress{font-family:var(--font-mono);font-size:10px;color:#79a8bb;margin-bottom:16px}
.tour-actions{display:flex;justify-content:space-between;gap:10px}
.tour-actions>div{display:flex;gap:8px}
.tour-spotlight{
position:fixed;
z-index:2147482999;
pointer-events:none;
border:1px solid rgba(74,219,255,.82);
border-radius:14px;
box-shadow:
0 0 0 4px rgba(36,207,255,.08),
0 0 34px rgba(36,207,255,.20);
background:rgba(44,205,255,.025);
transition:left .16s ease,top .16s ease,width .16s ease,height .16s ease
}
/* Gentle page dimming only. Does not create a competing overlay layer. */
html.tour-open .control-main,
html.tour-open .control-side{
filter:brightness(.58) saturate(.78);
transition:filter .18s ease
}
/* Keep fixed tour controls readable while tour is open. */
html.tour-open .context-help-actions{opacity:.28;pointer-events:none}
@media(max-width:1050px){
.help-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
.help-card-grid{grid-template-columns:1fr}
.help-search-form{grid-template-columns:1fr}
.context-help-actions{right:14px;bottom:14px}
.tour-card{right:14px;left:14px;bottom:68px;width:auto}
}
/* =========================================================
Phase 10.3 Public UI Finalisation
SaaSv3 public experience — authoritative public layer
========================================================= */
.public-body{
--p-bg:#070b10;
--p-bg-2:#0a1118;
--p-panel:#0d151d;
--p-panel-2:#101b25;
--p-line:rgba(154,190,210,.14);
--p-line-strong:rgba(76,201,255,.29);
--p-text:#f4f8fb;
--p-muted:#9babb6;
--p-muted-2:#667a88;
--p-cyan:#2dd6ff;
--p-blue:#318cff;
--p-orange:#ff9418;
--p-gold:#ffc34f;
--p-green:#66dfc8;
--p-shell:min(1240px,calc(100vw - 72px));
--p-radius:20px;
--p-shadow:0 30px 100px rgba(0,0,0,.35);
min-height:100vh;
margin:0;
background:
radial-gradient(circle at 78% 8%,rgba(38,128,190,.08),transparent 30%),
radial-gradient(circle at 12% 45%,rgba(18,102,151,.045),transparent 24%),
var(--p-bg)!important;
color:var(--p-text)!important;
font-family:"Segoe UI Variable","Segoe UI",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif!important;
font-size:16px;
line-height:1.5;
overflow-x:hidden;
}
.public-body *{box-sizing:border-box}
.public-body a{color:inherit}
.pub-shell{width:var(--p-shell);margin-inline:auto}
.pub-main{position:relative;z-index:2}
.pub-inner{padding-top:92px}
.pub-noise{
position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.18;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
.pub-ambient{position:fixed;border-radius:999px;filter:blur(100px);pointer-events:none;z-index:0;opacity:.16}
.pub-ambient-a{width:380px;height:380px;background:#0d83d8;right:-190px;top:13vh}
.pub-ambient-b{width:300px;height:300px;background:#ff8213;left:-210px;top:72vh;opacity:.06}
/* NAV */
.pub-nav{
position:fixed;left:18px;right:18px;top:16px;height:70px;z-index:400;
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
padding:0 18px 0 14px;border:1px solid transparent;border-radius:17px;
transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,backdrop-filter .25s ease;
}
.pub-nav-scrolled{
background:rgba(7,12,18,.80);border-color:var(--p-line);
backdrop-filter:blur(20px) saturate(130%);
box-shadow:0 18px 60px rgba(0,0,0,.24);
}
.pub-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;width:max-content}
.pub-brand-symbol{
position:relative;width:43px;height:43px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
background:radial-gradient(circle,rgba(48,155,225,.15),rgba(7,14,20,.96) 70%);
border:1px solid rgba(85,202,255,.22)
}
.pub-brand-symbol img{width:62px;height:62px;object-fit:contain;opacity:.95}
.pub-brand-word{font-size:22px;font-weight:760;letter-spacing:-.055em;color:#f7fbff}
.pub-brand-word b{color:var(--p-cyan);font-weight:760}
.pub-nav-links{display:flex;align-items:center;gap:6px;padding:5px;border:1px solid rgba(157,193,211,.08);border-radius:12px;background:rgba(255,255,255,.018)}
.pub-nav-links a{
position:relative;text-decoration:none;color:#9baab5;font-size:12px;font-weight:600;
padding:10px 14px;border-radius:8px;transition:color .18s ease,background .18s ease
}
.pub-nav-links a:hover{color:#fff;background:rgba(255,255,255,.035)}
.pub-nav-links a.active{color:#eaf8ff;background:rgba(45,214,255,.07)}
.pub-nav-links a.active:after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;transform:translateX(-50%);background:var(--p-cyan);border-radius:50%;box-shadow:0 0 10px var(--p-cyan)}
.pub-nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.pub-live{font-family:"SFMono-Regular",Consolas,monospace;font-size:9px;letter-spacing:.11em;color:#718693;display:flex;align-items:center;gap:7px;margin-right:6px}
.pub-live i,.pub-status-dot{width:6px;height:6px;border-radius:50%;background:var(--p-green);box-shadow:0 0 12px rgba(102,223,200,.7)}
.pub-nav-cta{
display:flex;align-items:center;gap:16px;text-decoration:none;color:#071017;background:#eaf7fc;
border-radius:10px;padding:11px 12px 11px 15px;font-size:11px;font-weight:760;letter-spacing:.02em;
transition:transform .18s ease,box-shadow .18s ease
}
.pub-nav-cta b{font-size:15px;color:#0b86c3}
.pub-nav-cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(25,147,205,.18)}
.pub-menu{display:none;background:none;border:0;width:42px;height:42px;padding:0;position:relative}
.pub-menu span{position:absolute;width:18px;height:1px;background:#e8f4f9;left:12px;top:17px;transition:.2s}
.pub-menu span+span{top:24px;width:13px;left:17px}
.pub-scroll-progress{position:absolute;left:16px;right:16px;bottom:-1px;height:1px;overflow:hidden}
.pub-scroll-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--p-cyan),var(--p-blue),var(--p-orange));transform:scaleX(0);transform-origin:left}
/* TYPOGRAPHY / COMMON */
.pub-kicker{
display:flex;align-items:center;gap:9px;margin:0 0 18px;
font-family:"SFMono-Regular",Consolas,monospace;font-size:10px;font-weight:600;letter-spacing:.13em;color:#78a1b6
}
.pub-section-no{display:block;font-family:"SFMono-Regular",Consolas,monospace;font-size:10px;color:var(--p-orange);margin-bottom:8px}
.public-body h1,.public-body h2,.public-body h3{margin-top:0;color:var(--p-text)}
.public-body h1,.public-body h2{letter-spacing:-.055em}
.public-body h1 em,.public-body h2 em{font-style:normal;font-weight:430;color:#93a9b5}
.pub-btn{
display:inline-flex;align-items:center;justify-content:center;gap:18px;
min-height:48px;padding:0 18px;border-radius:11px;text-decoration:none;
font-size:12px;font-weight:700;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease
}
.pub-btn b{font-size:16px}
.pub-btn-primary{background:linear-gradient(135deg,var(--p-cyan),var(--p-blue));color:#041017;border:1px solid rgba(120,223,255,.5);box-shadow:0 14px 34px rgba(35,153,214,.13)}
.pub-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(35,153,214,.2)}
.pub-btn-ghost{border:1px solid var(--p-line);background:rgba(255,255,255,.018);color:#c3d0d7}
.pub-btn-ghost:hover{border-color:var(--p-line-strong);background:rgba(45,214,255,.035);color:#fff}
.pub-btn-light{background:#f2f8fb;color:#071018;border:1px solid white;min-width:205px}
.pub-btn-light b{color:#0f83be}
.pub-text-link{display:inline-flex;gap:12px;align-items:center;margin-top:24px;color:#dcecf4;text-decoration:none;font-size:13px;font-weight:700}
.pub-text-link b{color:var(--p-cyan)}
.pub-section{padding:118px 0}
.pub-section-head{display:grid;grid-template-columns:.7fr 1.45fr 1fr;gap:58px;align-items:end;margin-bottom:48px}
.pub-section-head h2{font-size:clamp(40px,4vw,64px);line-height:.99;margin:0;font-weight:690}
.pub-section-head>p{margin:0;color:var(--p-muted);font-size:15px;line-height:1.75;max-width:470px}
.pub-section-head-compact{grid-template-columns:.75fr 2fr;margin-bottom:42px}
.pub-section-head-compact h2{font-size:clamp(38px,3.6vw,58px)}
/* REVEAL */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
[data-reveal].is-revealed{opacity:1;transform:none}
/* HERO */
.pub-hero{
--mx:75%;--my:30%;position:relative;min-height:850px;padding:154px 0 0;overflow:hidden;
background:
radial-gradient(circle at var(--mx) var(--my),rgba(40,162,225,.115),transparent 28%),
linear-gradient(180deg,rgba(17,41,56,.09),transparent 45%)
}
.pub-hero:before{
content:"";position:absolute;inset:80px 0 0;pointer-events:none;opacity:.34;
background-image:linear-gradient(rgba(142,184,206,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(142,184,206,.035) 1px,transparent 1px);
background-size:80px 80px;mask-image:linear-gradient(to bottom,#000,transparent 75%)
}
.pub-hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center;position:relative;z-index:2}
.pub-hero-copy{padding-top:24px}
.pub-hero-copy h1{font-size:clamp(58px,6.25vw,96px);line-height:.91;margin:0 0 28px;font-weight:720;max-width:820px}
.pub-hero-copy h1 em{display:inline-block;color:#92a8b5}
.pub-lead{max-width:700px;color:#a7b5be;font-size:18px;line-height:1.72;margin:0}
.pub-hero-actions{display:flex;gap:10px;margin-top:34px}
.pub-hero-proof{display:flex;align-items:center;gap:20px;margin-top:54px}
.pub-hero-proof div{display:grid;gap:2px}
.pub-hero-proof strong{font-size:11px;font-weight:700;color:#dbe8ee}
.pub-hero-proof span{font-size:10px;color:#677c89}
.pub-hero-proof>i{width:1px;height:28px;background:var(--p-line)}
.pub-core-wrap{position:relative;height:570px;isolation:isolate}
.pub-core-grid{position:absolute;inset:25px;background-image:linear-gradient(rgba(100,173,206,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(100,173,206,.07) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(circle,#000 30%,transparent 72%);opacity:.55}
.pub-core-glow{position:absolute;width:310px;height:310px;border-radius:50%;background:rgba(28,147,211,.12);filter:blur(65px);left:50%;top:50%;transform:translate(-50%,-50%)}
.pub-core-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(79,185,229,.15);transform:translate(-50%,-50%)}
.ring-a{width:390px;height:390px}
.ring-b{width:510px;height:510px;border-style:dashed;opacity:.6;animation:pubSpin 38s linear infinite}
@keyframes pubSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.pub-core-center{
position:absolute;left:50%;top:50%;width:188px;height:188px;transform:translate(-50%,-50%);border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
border:1px solid rgba(65,208,255,.31);
background:radial-gradient(circle at 38% 30%,rgba(28,120,171,.22),rgba(7,16,23,.97) 68%);
box-shadow:0 0 0 10px rgba(43,188,237,.022),0 0 90px rgba(37,168,225,.13)
}
.pub-core-center img{position:absolute;width:125px;height:125px;opacity:.075;object-fit:contain}
.pub-core-center small{font-family:"SFMono-Regular",Consolas,monospace;letter-spacing:.16em;font-size:8px;color:#5e91aa;margin-bottom:6px}
.pub-core-center strong{font-size:17px;letter-spacing:-.025em;z-index:1}
.pub-core-center span{font-family:"SFMono-Regular",Consolas,monospace;font-size:7px;letter-spacing:.08em;color:#618293;margin-top:8px;z-index:1}
.pub-core-node{
position:absolute;width:184px;padding:14px 15px;border-radius:12px;background:rgba(8,19,27,.88);
border:1px solid rgba(106,171,201,.15);backdrop-filter:blur(9px);box-shadow:0 18px 45px rgba(0,0,0,.22)
}
.pub-core-node:before{content:"";position:absolute;width:40px;height:1px;background:linear-gradient(90deg,rgba(46,204,255,.35),transparent);left:14px;top:-1px}
.pub-core-node i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--p-cyan);right:13px;top:13px;box-shadow:0 0 10px rgba(45,214,255,.6)}
.pub-core-node small{font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;color:#587989;display:block;margin-bottom:8px}
.pub-core-node strong{font-size:12px;display:block}
.pub-core-node span{font-size:9px;color:#718693;display:block;margin-top:4px}
.node-ai{left:6%;top:17%}.node-software{right:0;top:23%}.node-web{left:0;bottom:17%}.node-ops{right:5%;bottom:12%}
.node-ops:before{background:linear-gradient(90deg,var(--p-orange),transparent)}
.node-ops i{background:var(--p-orange);box-shadow:0 0 10px rgba(255,148,24,.5)}
.pub-core-scan{position:absolute;left:50%;top:50%;width:450px;height:1px;background:linear-gradient(90deg,transparent,rgba(45,214,255,.42),transparent);transform:translate(-50%,-50%) rotate(-16deg);animation:pubScan 4.4s ease-in-out infinite alternate}
@keyframes pubScan{from{opacity:.15;transform:translate(-50%,-130px) rotate(-16deg)}to{opacity:.65;transform:translate(-50%,130px) rotate(-16deg)}}
.pub-signal-rail{position:absolute;left:0;right:0;bottom:0;height:54px;border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line);overflow:hidden;background:rgba(8,14,20,.75);display:flex;align-items:center}
.pub-signal-rail>div{display:flex;align-items:center;gap:28px;width:max-content;animation:pubTicker 34s linear infinite}
.pub-signal-rail>div:after{content:"AI RECEPTIONIST • AI FRONTDESK • CUSTOM SOFTWARE • WEB & COMMERCE • MANAGED DEPLOYMENT • PROVIDER ORCHESTRATION";white-space:nowrap;font-family:"SFMono-Regular",Consolas,monospace;font-size:9px;letter-spacing:.13em;color:#728692}
.pub-signal-rail span{white-space:nowrap;font-family:"SFMono-Regular",Consolas,monospace;font-size:9px;letter-spacing:.13em;color:#728692}
.pub-signal-rail i{width:4px;height:4px;background:var(--p-cyan);border-radius:50%;opacity:.65}
@keyframes pubTicker{to{transform:translateX(-44%)}}
/* BENTO */
.pub-intro{padding-top:132px}
.pub-bento{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.pub-bento-card{
position:relative;min-height:390px;padding:28px;border:1px solid var(--p-line);border-radius:var(--p-radius);
background:linear-gradient(180deg,rgba(15,25,34,.9),rgba(9,17,24,.96));overflow:hidden
}
.pub-bento-card:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(45,214,255,.32),transparent)}
.pub-card-top{display:flex;justify-content:space-between;align-items:center;font-family:"SFMono-Regular",Consolas,monospace;font-size:9px;letter-spacing:.12em;color:#65808e}
.pub-card-top b{font-weight:500;color:#3f6273}
.pub-bento-card h3{font-size:clamp(30px,3vw,46px);line-height:1.02;margin:56px 0 14px;max-width:640px}
.pub-bento-card>p{max-width:610px;color:#91a2ad;font-size:14px;line-height:1.7}
.pub-bento-card>a{position:absolute;left:28px;bottom:25px;text-decoration:none;font-size:11px;font-weight:700;color:#cbeaf6}
.pub-bento-card>a:hover{color:var(--p-cyan)}
.pub-bento-ai{background:radial-gradient(circle at 80% 72%,rgba(20,127,181,.11),transparent 35%),linear-gradient(180deg,rgba(15,25,34,.9),rgba(9,17,24,.96))}
.pub-mini-interface{position:absolute;right:30px;bottom:30px;width:330px;padding:16px;border:1px solid rgba(107,182,215,.14);border-radius:12px;background:rgba(5,13,19,.78)}
.pub-mini-interface>span{font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;color:#6f8794;display:flex;align-items:center;gap:7px}
.pub-mini-interface .live{width:5px;height:5px;border-radius:50%;background:var(--p-green);box-shadow:0 0 8px rgba(102,223,200,.7)}
.pub-mini-interface strong{display:block;font-size:11px;margin:10px 0;color:#b9cad2}
.pub-mini-interface div{height:28px;display:flex;align-items:flex-end;gap:4px}
.pub-mini-interface div b{width:7px;background:#1a627e;border-radius:3px 3px 0 0}
.pub-mini-interface div b:nth-child(1){height:30%}.pub-mini-interface div b:nth-child(2){height:65%}.pub-mini-interface div b:nth-child(3){height:45%}.pub-mini-interface div b:nth-child(4){height:90%;background:var(--p-cyan)}
.pub-bento-code h3,.pub-bento-web h3,.pub-bento-ops h3{margin-top:43px}
.pub-code-window{position:absolute;right:24px;bottom:58px;width:45%;display:grid;gap:8px;padding:14px;border-left:1px solid var(--p-line)}
.pub-code-window small{font-family:"SFMono-Regular",Consolas,monospace;font-size:7px;color:#526e7b;margin-bottom:4px}
.pub-code-window code{font-size:9px;color:#76919f;background:none;border:0;padding:0;display:flex;gap:12px}
.pub-code-window code span{color:#3f6172}.pub-code-window code.hot{color:#78dff7}
.pub-browser-mock{position:absolute;right:24px;bottom:50px;width:48%;border:1px solid rgba(119,180,207,.14);border-radius:10px;overflow:hidden;background:#071018}
.pub-browser-mock>div{height:28px;border-bottom:1px solid var(--p-line);display:flex;align-items:center;gap:5px;padding:0 9px}
.pub-browser-mock>div i{width:4px;height:4px;border-radius:50%;background:#3b5664}.pub-browser-mock>div span{font-family:"SFMono-Regular",Consolas,monospace;font-size:6px;color:#4e6d7b;margin-left:5px}
.pub-browser-mock section{padding:14px;display:grid;grid-template-columns:1.2fr .8fr;gap:8px;height:110px}
.pub-browser-mock section b{display:block;border-radius:5px;background:linear-gradient(135deg,#112938,#0c1923)}
.pub-browser-mock section b:first-child{grid-row:span 2;background:linear-gradient(135deg,#173d50,#0b202c)}
.pub-health-line{position:absolute;right:24px;bottom:105px;width:47%;display:flex;justify-content:space-between;font-family:"SFMono-Regular",Consolas,monospace;font-size:7px;color:#637e8b}
.pub-health-line strong{font-size:7px;color:#87dfcf;display:flex;gap:6px;align-items:center}.pub-health-line strong i{width:5px;height:5px;border-radius:50%;background:var(--p-green)}
.pub-health-bars{position:absolute;right:24px;bottom:58px;width:47%;height:34px;display:flex;gap:5px;align-items:flex-end}
.pub-health-bars b{flex:1;background:#17465a;border-radius:2px 2px 0 0}.pub-health-bars b:nth-child(1){height:32%}.pub-health-bars b:nth-child(2){height:46%}.pub-health-bars b:nth-child(3){height:60%}.pub-health-bars b:nth-child(4){height:51%}.pub-health-bars b:nth-child(5){height:77%;background:#176a84}.pub-health-bars b:nth-child(6){height:90%;background:var(--p-cyan)}.pub-health-bars b:nth-child(7){height:72%}
/* PROCESS */
.pub-process{border-top:1px solid rgba(141,180,201,.08);border-bottom:1px solid rgba(141,180,201,.08);background:rgba(255,255,255,.01)}
.pub-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--p-line);border:1px solid var(--p-line);border-radius:var(--p-radius);overflow:hidden}
.pub-process-grid article{background:#0a1219;padding:32px;min-height:285px}
.pub-process-grid article>span{font-family:"SFMono-Regular",Consolas,monospace;font-size:9px;color:var(--p-cyan)}
.pub-process-grid article small{display:block;margin-top:62px;font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;letter-spacing:.13em;color:#5e7a88}
.pub-process-grid h3{font-size:26px;line-height:1.08;margin:12px 0}
.pub-process-grid p{color:#879aa6;font-size:13px;line-height:1.7;margin:0}
/* WORK */
.pub-work-preview{background:radial-gradient(circle at 50% 25%,rgba(20,101,145,.05),transparent 40%)}
.pub-case-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}
.pub-case{
position:relative;display:block;min-height:320px;padding:28px;border:1px solid var(--p-line);border-radius:var(--p-radius);
background:linear-gradient(180deg,#0d161e,#091118);text-decoration:none;overflow:hidden
}
.pub-case-large{grid-row:span 2;min-height:654px}
.pub-case-meta{display:flex;justify-content:space-between;font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;letter-spacing:.1em;color:#66818f}
.pub-case-meta small{color:#4d6876}
.pub-case h3{font-size:31px;line-height:1.06;max-width:650px;margin:68px 0 14px}
.pub-case-large h3{font-size:47px;margin-top:110px}
.pub-case p{color:#8195a1;font-size:13px;line-height:1.65;max-width:520px}
.pub-case footer{position:absolute;left:28px;right:28px;bottom:22px;display:flex;justify-content:space-between;border-top:1px solid var(--p-line);padding-top:14px;font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;color:#758e9b}
.pub-case footer b{font-size:15px;color:var(--p-cyan)}
.pub-case-orange:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-80px;top:-80px;background:rgba(255,148,24,.09);filter:blur(10px)}
.pub-case-orbit{position:absolute;right:45px;bottom:80px;width:220px;height:220px;border:1px solid rgba(51,189,237,.12);border-radius:50%}
.pub-case-orbit:before{content:"";position:absolute;inset:30px;border:1px dashed rgba(51,189,237,.14);border-radius:50%}
.pub-case-orbit i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--p-cyan);top:15px;left:95px;box-shadow:0 0 15px rgba(45,214,255,.5)}
.pub-case-orbit i+i{top:auto;left:auto;right:20px;bottom:50px;background:var(--p-orange)}
.pub-case-orbit b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:30px;color:#dff7ff}
.pub-case-orbit span{position:absolute;right:-18px;top:48%;font-family:"SFMono-Regular",Consolas,monospace;font-size:7px;color:#667f8b}
/* PARTNER */
.pub-partner-strip{border-top:1px solid var(--p-line)}
.pub-partner-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}
.pub-partner-grid h2{font-size:clamp(42px,4.4vw,68px);line-height:.98;margin:12px 0 20px}
.pub-partner-grid>div>p:not(.pub-kicker){color:#92a3ad;line-height:1.7;max-width:560px}
.pub-network-map{position:relative;height:440px;border:1px solid var(--p-line);border-radius:var(--p-radius);background:radial-gradient(circle at 50% 50%,rgba(38,131,179,.08),transparent 43%),#091219;overflow:hidden}
.pub-network-map:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(134,177,198,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(134,177,198,.035) 1px,transparent 1px);background-size:42px 42px}
.pub-network-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:94px;height:94px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(45,214,255,.28);background:#08141c;font-weight:760;font-size:18px;letter-spacing:-.05em;z-index:2;box-shadow:0 0 50px rgba(32,155,210,.12)}
.pub-network-center b{color:var(--p-cyan)}
.pub-network-node{position:absolute;padding:12px 14px;border:1px solid var(--p-line);background:rgba(8,18,25,.88);border-radius:10px;z-index:2}
.pub-network-node i{width:5px;height:5px;border-radius:50%;background:var(--p-cyan);position:absolute;right:10px;top:10px}
.pub-network-node strong{display:block;font-size:10px}.pub-network-node span{display:block;font-size:8px;color:#6f8490;margin-top:3px}
.map-sa{left:9%;bottom:18%}.map-uk{right:10%;top:17%}
.pub-network-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(45,214,255,.32),transparent);width:38%;left:29%;top:59%;transform:rotate(-13deg)}
.line-b{left:50%;top:40%;transform:rotate(-31deg)}
.pub-final-cta{position:relative;padding:90px 0;background:linear-gradient(135deg,#148fcc,#35c9f3);overflow:hidden}
.pub-final-cta:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:60px 60px;opacity:.25}
.pub-final-cta .pub-shell{position:relative;display:flex;justify-content:space-between;gap:50px;align-items:end}
.pub-final-cta .pub-kicker{color:#083348}
.pub-final-cta h2{font-size:clamp(42px,4.5vw,68px);line-height:.98;margin:0;color:#04121a}
.pub-final-cta h2 em{color:rgba(4,18,26,.58)}
/* PAGE HERO */
.pub-page-hero{position:relative;padding:135px 0 92px;border-bottom:1px solid var(--p-line);overflow:hidden}
.pub-page-hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-130px;top:-180px;background:rgba(23,135,192,.08);filter:blur(30px)}
.pub-page-hero-grid{display:grid;grid-template-columns:1.45fr .55fr;gap:80px;align-items:end;position:relative;z-index:2}
.pub-page-hero h1{font-size:clamp(58px,6vw,92px);line-height:.92;margin:0;font-weight:720}
.pub-page-side{border-left:1px solid var(--p-line);padding-left:30px}
.pub-page-side p{font-size:15px;line-height:1.75;color:#91a2ad;margin:0}
.pub-index-list{display:grid;gap:6px;margin-top:25px;font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;letter-spacing:.09em;color:#587482}
.pub-page-note{display:block;margin-top:28px;font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;letter-spacing:.11em;color:var(--p-orange)}
/* SYSTEMS */
.pub-system-stack{display:grid;gap:14px}
.pub-system-row{
min-height:410px;border:1px solid var(--p-line);border-radius:var(--p-radius);padding:30px;
display:grid;grid-template-columns:120px 1fr .85fr;gap:35px;align-items:center;background:linear-gradient(180deg,#0c151d,#091118);overflow:hidden
}
.pub-system-index{height:100%;border-right:1px solid var(--p-line);display:flex;flex-direction:column;justify-content:space-between;padding-right:22px}
.pub-system-index span{font-family:"SFMono-Regular",Consolas,monospace;color:var(--p-cyan);font-size:11px}
.pub-system-index small{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;letter-spacing:.12em;color:#506d7b}
.pub-system-copy h2{font-size:clamp(38px,3.6vw,58px);line-height:1;margin:0 0 18px}
.pub-system-copy>p{color:#91a2ad;line-height:1.72;max-width:590px}
.pub-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.pub-tags span,.pub-work-tags span{border:1px solid var(--p-line);border-radius:999px;padding:7px 10px;font-size:9px;color:#7f95a1}
.pub-system-visual{height:270px;border:1px solid rgba(128,184,208,.12);border-radius:14px;background:#071018;padding:22px;position:relative;overflow:hidden}
.voice-wave{height:150px;display:flex;align-items:center;justify-content:center;gap:4px}
.voice-wave i{width:3px;background:#1d617b;border-radius:5px;animation:wave 1.4s ease-in-out infinite alternate}
.voice-wave i:nth-child(3n){background:var(--p-cyan)}
.voice-wave i:nth-child(2n){animation-delay:.2s}.voice-wave i:nth-child(5n){animation-delay:.4s}
@keyframes wave{from{height:12px}to{height:90px}}
.visual-voice small,.visual-voice strong{display:block}.visual-voice small{font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;color:#5f7a87}.visual-voice strong{font-size:11px;margin-top:8px;color:#aac0cb}
.visual-frontdesk>div{display:flex;justify-content:space-between;font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;color:#63808e}.visual-frontdesk>div b{color:#78dfcd}
.visual-frontdesk ul{list-style:none;padding:0;margin:55px 0 0;display:grid;gap:18px}.visual-frontdesk li{display:flex;gap:10px;align-items:center;font-size:11px;color:#94aab5;border-bottom:1px solid rgba(134,178,198,.08);padding-bottom:12px}.visual-frontdesk li i{width:6px;height:6px;border-radius:50%;background:var(--p-cyan)}
.visual-code{display:grid;align-content:center;gap:15px}.visual-code code{font-size:10px;color:#75909e;background:none;border:0;padding:0;display:flex;gap:18px}.visual-code code span{color:#395d6f;width:55px}.visual-code code.accent{color:#75e0f8}
.web-frame{position:absolute;inset:24px;border:1px solid rgba(128,184,208,.13);border-radius:10px;overflow:hidden}.web-frame header{height:32px;border-bottom:1px solid var(--p-line);display:flex;gap:5px;align-items:center;padding:0 10px}.web-frame header i{width:5px;height:5px;border-radius:50%;background:#405b68}.web-frame main{display:grid;grid-template-columns:1.3fr .7fr;grid-template-rows:1fr 1fr;gap:8px;padding:12px;height:190px}.web-frame main b{background:linear-gradient(135deg,#112c3b,#0c1922);border-radius:6px}.web-frame main b:first-child{grid-row:span 2;background:linear-gradient(135deg,#17465c,#0d2330)}
.pub-operate-band{background:#09131b;border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line)}
.pub-operate-grid{display:grid;grid-template-columns:1fr .8fr;gap:80px;align-items:center}
.pub-operate-grid h2{font-size:50px;margin:0 0 15px}.pub-operate-grid p{color:#8ca0ab;line-height:1.7}
.pub-ops-console{display:grid;gap:1px;border:1px solid var(--p-line);border-radius:14px;overflow:hidden;background:var(--p-line)}
.pub-ops-console span{display:flex;align-items:center;gap:10px;padding:15px;background:#0a151d;font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;color:#708995}.pub-ops-console i{width:6px;height:6px;border-radius:50%;background:var(--p-green)}.pub-ops-console .orange i{background:var(--p-orange)}
/* WORK PAGE */
.pub-work-stack{display:grid;gap:14px}
.pub-work-case{min-height:410px;border:1px solid var(--p-line);border-radius:var(--p-radius);background:#0a131a;padding:30px;display:grid;grid-template-columns:70px 1.2fr .8fr;gap:30px;align-items:center;overflow:hidden}
.pub-work-number{height:100%;border-right:1px solid var(--p-line);font-family:"SFMono-Regular",Consolas,monospace;font-size:10px;color:#567280;padding-top:5px}
.pub-work-main h2{font-size:clamp(34px,3.4vw,54px);line-height:1.02;margin:48px 0 14px;max-width:760px}.pub-work-main>p{color:#879aa6;line-height:1.7;max-width:650px}
.pub-work-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:23px}
.pub-work-diagram{position:relative;height:260px;border:1px solid var(--p-line);border-radius:14px;background:radial-gradient(circle,rgba(32,142,195,.09),transparent 50%)}
.diagram-comtech .d-core{position:absolute;left:50%;top:50%;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);border:1px solid rgba(45,214,255,.28);font-weight:700}
.diagram-comtech span{position:absolute;font-family:"SFMono-Regular",Consolas,monospace;font-size:7px;color:#65808e}.diagram-comtech span:nth-of-type(1){left:10%;top:20%}.diagram-comtech span:nth-of-type(2){right:10%;top:22%}.diagram-comtech span:nth-of-type(3){left:12%;bottom:18%}.diagram-comtech span:nth-of-type(4){right:10%;bottom:20%}
.pub-work-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--p-line);border:1px solid var(--p-line);border-radius:14px;overflow:hidden}.pub-work-metrics div{background:#081219;padding:24px 14px;min-height:130px;display:flex;flex-direction:column;justify-content:flex-end}.pub-work-metrics strong{font-size:30px;color:#eaf6fb}.pub-work-metrics span{font-size:9px;color:#718692;margin-top:5px}
.pub-work-case-accent{background:radial-gradient(circle at 88% 50%,rgba(255,148,24,.06),transparent 28%),#0a131a}
.pub-meter-visual{height:230px;padding:24px;border:1px solid var(--p-line);border-radius:14px;background:#081119;display:flex;flex-direction:column;justify-content:center}.pub-meter-visual>span{font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;color:#617a87}.pub-meter-visual div{height:90px;display:flex;align-items:flex-end;gap:4px;margin:18px 0}.pub-meter-visual i{flex:1;background:#164e65;border-radius:2px 2px 0 0}.pub-meter-visual i:nth-child(3n){height:75%}.pub-meter-visual i:nth-child(4n){height:45%}.pub-meter-visual i:nth-child(5n){height:90%;background:var(--p-orange)}.pub-meter-visual strong{font-size:10px;color:#9ab0bb}
.pub-proof-band{padding-top:40px}.pub-proof-grid{display:grid;grid-template-columns:1.4fr repeat(3,.65fr);gap:1px;border:1px solid var(--p-line);background:var(--p-line);border-radius:var(--p-radius);overflow:hidden}.pub-proof-grid>div{background:#0a131a;padding:26px}.pub-proof-grid small{font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;color:#66818f}.pub-proof-grid h2{font-size:30px;margin:12px 0}.pub-proof-grid strong{display:block;color:var(--p-cyan);font-family:"SFMono-Regular",Consolas,monospace;font-size:10px;margin-bottom:48px}.pub-proof-grid span{font-size:12px;color:#9aabb4}
/* COMPANY / PARTNERS */
.pub-company-story{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}.pub-company-story h2{font-size:clamp(42px,4vw,64px);line-height:1}.pub-company-story>div:last-child{padding-top:32px}.pub-company-story>div:last-child p{font-size:18px;line-height:1.75;color:#9aaab4;margin:0 0 20px}
.pub-principles,.pub-partner-benefits{background:rgba(255,255,255,.01);border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line)}
.pub-principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--p-line);border:1px solid var(--p-line);border-radius:var(--p-radius);overflow:hidden}
.pub-principle-grid article{background:#0a131a;padding:26px;min-height:285px}.pub-principle-grid article>span{font-family:"SFMono-Regular",Consolas,monospace;color:var(--p-orange);font-size:9px}.pub-principle-grid h3{font-size:24px;line-height:1.08;margin:78px 0 12px}.pub-principle-grid p{font-size:12px;line-height:1.7;color:#8296a2}
.pub-company-facts{display:grid;grid-template-columns:.75fr 1.25fr;gap:100px}.pub-company-facts h2{font-size:48px}.pub-company-facts dl{margin:0;border-top:1px solid var(--p-line)}.pub-company-facts dl div{display:grid;grid-template-columns:.55fr 1fr;padding:18px 0;border-bottom:1px solid var(--p-line)}.pub-company-facts dt{font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;color:#617d8a;text-transform:uppercase;letter-spacing:.08em}.pub-company-facts dd{margin:0;font-size:13px;color:#c4d1d7}
.pub-partner-model{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px;align-items:center}.pub-partner-model-copy h2{font-size:50px;line-height:1;margin:0 0 20px}.pub-partner-model-copy>p{color:#8fa1ab;line-height:1.75}
.pub-partner-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center}.pub-partner-flow>div{min-height:155px;border:1px solid var(--p-line);border-radius:14px;background:#0a131a;padding:20px;display:flex;flex-direction:column;justify-content:flex-end}.pub-partner-flow>div.core{border-color:rgba(45,214,255,.25);background:radial-gradient(circle at 50% 30%,rgba(33,150,201,.08),transparent 45%),#0a131a}.pub-partner-flow small{font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;color:#607d8a}.pub-partner-flow strong{font-size:13px;margin-top:7px}.pub-partner-flow>i{font-style:normal;color:#477080}
.pub-partner-map-section{border-top:1px solid var(--p-line)}
/* CONTACT */
.pub-contact-section{padding-top:78px}
.pub-contact-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:start}
.pub-contact-info{position:sticky;top:120px}.pub-contact-info h2{font-size:47px;margin:0 0 34px}.pub-contact-info>a{position:relative;display:grid;gap:5px;padding:18px 35px 18px 0;border-top:1px solid var(--p-line);text-decoration:none}.pub-contact-info>a:last-of-type{border-bottom:1px solid var(--p-line)}.pub-contact-info>a small,.pub-contact-location small{font-family:"SFMono-Regular",Consolas,monospace;font-size:7px;letter-spacing:.11em;color:#5e7c89}.pub-contact-info>a strong{font-size:14px;color:#c8d6dc}.pub-contact-info>a b{position:absolute;right:3px;top:25px;color:var(--p-cyan)}.pub-contact-location{display:grid;gap:7px;margin-top:34px}.pub-contact-location span{font-size:11px;color:#758b97}.pub-contact-note{display:flex;gap:12px;margin-top:30px;padding:14px;border:1px solid rgba(255,148,24,.13);border-radius:11px;background:rgba(255,148,24,.025)}.pub-contact-note i{width:6px;height:6px;background:var(--p-orange);border-radius:50%;margin-top:6px;flex:0 0 auto}.pub-contact-note p{font-size:10px;line-height:1.6;color:#8195a0;margin:0}
.pub-form-card{border:1px solid var(--p-line);border-radius:var(--p-radius);background:linear-gradient(180deg,#0d171f,#091118);padding:30px;box-shadow:var(--p-shadow)}
.pub-form-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--p-line);padding-bottom:16px;margin-bottom:26px;font-family:"SFMono-Regular",Consolas,monospace;font-size:8px;color:#6e8895}.pub-form-head small{color:#486575}
.pub-project-form{display:grid;gap:18px}.pub-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pub-project-form label{display:grid;gap:8px}.pub-project-form label>span{font-size:10px;font-weight:650;color:#879ba6}.pub-project-form input,.pub-project-form select,.pub-project-form textarea{width:100%;border:1px solid rgba(125,173,196,.17);border-radius:10px;background:#071018;color:#eaf3f7;padding:13px 14px;font:inherit;font-size:12px;outline:0;transition:border-color .18s,box-shadow .18s}.pub-project-form input:focus,.pub-project-form select:focus,.pub-project-form textarea:focus{border-color:rgba(45,214,255,.46);box-shadow:0 0 0 3px rgba(45,214,255,.055)}.pub-project-form textarea{resize:vertical;min-height:160px}.pub-submit{border:0;cursor:pointer;width:max-content}
.pub-notice{display:grid;gap:4px;border-radius:10px;padding:13px 14px;margin-bottom:18px;font-size:11px}.pub-notice-success{border:1px solid rgba(102,223,200,.2);background:rgba(102,223,200,.05)}.pub-notice-success strong{color:#82e4d2}.pub-notice-error{border:1px solid rgba(255,132,108,.2);background:rgba(255,132,108,.05)}.pub-notice-error strong{color:#ffab9a}.pub-notice span{color:#9aadb6}
.pub-404{min-height:calc(100vh - 180px);display:flex;align-items:center;padding:130px 0}.pub-404-code{display:block;font-size:clamp(120px,18vw,260px);font-weight:800;line-height:.7;letter-spacing:-.08em;color:rgba(100,168,199,.065)}.pub-404 h1{font-size:clamp(58px,7vw,105px);line-height:.9;margin:-20px 0 20px}.pub-404>div>p:not(.pub-kicker){color:#8ca0ab;margin-bottom:28px}
/* FOOTER */
.pub-footer{position:relative;z-index:2;background:#05090d;border-top:1px solid var(--p-line)}
.pub-footer-top{display:grid;grid-template-columns:1fr 1.4fr;gap:90px;padding:72px 0 58px}.pub-brand-footer .pub-brand-symbol{width:48px;height:48px}.pub-brand-footer .pub-brand-word{font-size:26px}.pub-footer-brand>p{max-width:360px;color:#6f838e;font-size:12px;line-height:1.7;margin-top:20px}
.pub-footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.pub-footer-nav>div{display:grid;align-content:start;gap:9px}.pub-footer-nav small{font-family:"SFMono-Regular",Consolas,monospace;font-size:7px;letter-spacing:.13em;color:#47616e;margin-bottom:9px}.pub-footer-nav a,.pub-footer-nav span{text-decoration:none;font-size:11px;color:#899aa4}.pub-footer-nav a:hover{color:var(--p-cyan)}
.pub-footer-bottom{display:flex;justify-content:space-between;gap:30px;padding:18px 0;border-top:1px solid rgba(141,180,201,.08);font-family:"SFMono-Regular",Consolas,monospace;font-size:7px;letter-spacing:.07em;color:#49616d}
/* RESPONSIVE */
@media(max-width:1100px){
.public-body{--p-shell:min(100% - 48px,1240px)}
.pub-nav{grid-template-columns:1fr auto}.pub-nav-links{position:fixed;left:18px;right:18px;top:94px;display:none;flex-direction:column;align-items:stretch;padding:10px;background:rgba(7,13,19,.97);border:1px solid var(--p-line);box-shadow:var(--p-shadow)}.pub-nav-links a{padding:14px}.pub-menu{display:block}.pub-menu-open .pub-nav-links{display:flex}.pub-menu-open .pub-menu span{transform:rotate(45deg);top:21px;width:18px;left:12px}.pub-menu-open .pub-menu span+span{transform:rotate(-45deg);top:21px;width:18px;left:12px}
.pub-live{display:none}
.pub-hero{min-height:auto;padding-bottom:85px}.pub-hero-grid{grid-template-columns:1fr}.pub-core-wrap{height:520px;margin-top:20px}
.pub-section-head{grid-template-columns:.55fr 1.45fr;gap:35px}.pub-section-head>p{grid-column:2}
.pub-bento{grid-template-columns:1fr}.pub-bento-card{min-height:390px}
.pub-partner-grid,.pub-operate-grid,.pub-company-story,.pub-company-facts,.pub-partner-model,.pub-contact-grid{grid-template-columns:1fr;gap:50px}.pub-network-map{height:390px}
.pub-page-hero-grid{grid-template-columns:1fr;gap:42px}.pub-page-side{max-width:600px}
.pub-system-row{grid-template-columns:80px 1fr}.pub-system-visual{grid-column:2}
.pub-work-case{grid-template-columns:55px 1fr}.pub-work-case>:last-child{grid-column:2}
.pub-principle-grid{grid-template-columns:1fr 1fr}
.pub-proof-grid{grid-template-columns:1fr 1fr}
.pub-contact-info{position:static}
}
@media(max-width:720px){
.public-body{--p-shell:calc(100vw - 32px)}
.pub-nav{left:8px;right:8px;top:8px;height:62px;padding:0 9px}.pub-nav-scrolled{border-radius:14px}.pub-brand-symbol{width:38px;height:38px}.pub-brand-symbol img{width:55px;height:55px}.pub-brand-word{font-size:20px}.pub-nav-cta{display:none}.pub-nav-links{left:8px;right:8px;top:78px}
.pub-inner{padding-top:70px}
.pub-hero{padding-top:112px}.pub-hero-copy h1{font-size:clamp(49px,14vw,70px)}.pub-lead{font-size:15px}.pub-hero-actions{flex-direction:column;align-items:stretch}.pub-btn{width:100%}.pub-hero-proof{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pub-hero-proof>i{display:none}.pub-hero-proof div:last-child{grid-column:1/-1}
.pub-core-wrap{height:440px;transform:scale(.92);margin-inline:-14px}.ring-b{width:420px;height:420px}.ring-a{width:325px;height:325px}.pub-core-center{width:155px;height:155px}.pub-core-node{width:148px;padding:11px}.node-ai{left:0}.node-software{right:0}.node-web{left:0}.node-ops{right:0}
.pub-section{padding:82px 0}.pub-section-head,.pub-section-head-compact{grid-template-columns:1fr;gap:18px}.pub-section-head>p{grid-column:auto}.pub-section-head h2,.pub-section-head-compact h2{font-size:42px}
.pub-bento-card{padding:22px;min-height:420px}.pub-bento-card h3{font-size:34px;margin-top:35px}.pub-mini-interface,.pub-code-window,.pub-browser-mock,.pub-health-line,.pub-health-bars{left:22px;right:22px;width:auto}.pub-mini-interface{bottom:65px}.pub-code-window{bottom:65px}.pub-browser-mock{bottom:65px}.pub-health-line{bottom:110px}.pub-health-bars{bottom:66px}
.pub-process-grid,.pub-principle-grid{grid-template-columns:1fr}.pub-process-grid article,.pub-principle-grid article{min-height:240px}.pub-process-grid article small,.pub-principle-grid h3{margin-top:45px}
.pub-case-grid{grid-template-columns:1fr}.pub-case-large{grid-row:auto;min-height:470px}.pub-case-large h3{font-size:35px;margin-top:65px}.pub-case-orbit{opacity:.45;right:-50px}
.pub-partner-grid{gap:40px}.pub-network-map{height:340px}.map-sa{left:5%}.map-uk{right:5%}
.pub-final-cta{padding:68px 0}.pub-final-cta .pub-shell{display:grid;gap:30px}.pub-final-cta h2{font-size:42px}.pub-btn-light{width:100%}
.pub-page-hero{padding:105px 0 65px}.pub-page-hero h1{font-size:52px}.pub-page-side{padding-left:18px}
.pub-system-row{grid-template-columns:1fr;padding:22px;gap:20px}.pub-system-index{height:auto;border-right:0;border-bottom:1px solid var(--p-line);padding:0 0 12px;flex-direction:row}.pub-system-index small{writing-mode:horizontal-tb;transform:none}.pub-system-visual{grid-column:auto;height:235px}.pub-system-copy h2{font-size:38px}
.pub-work-case{grid-template-columns:1fr;padding:22px}.pub-work-number{height:auto;border-right:0;border-bottom:1px solid var(--p-line);padding-bottom:10px}.pub-work-case>:last-child{grid-column:auto}.pub-work-main h2{font-size:35px;margin-top:38px}.pub-work-metrics{grid-template-columns:1fr}.pub-work-metrics div{min-height:90px}
.pub-proof-grid{grid-template-columns:1fr}.pub-proof-grid strong{margin-bottom:20px}
.pub-company-story,.pub-company-facts{gap:25px}.pub-company-story>div:last-child{padding-top:0}.pub-company-story>div:last-child p{font-size:15px}.pub-company-facts dl div{grid-template-columns:1fr;gap:6px}
.pub-partner-flow{grid-template-columns:1fr}.pub-partner-flow>i{transform:rotate(90deg);justify-self:center}.pub-partner-flow>div{min-height:110px}
.pub-contact-grid{gap:35px}.pub-form-card{padding:21px}.pub-form-grid{grid-template-columns:1fr}
.pub-footer-top{grid-template-columns:1fr;gap:45px;padding-top:55px}.pub-footer-nav{grid-template-columns:1fr 1fr}.pub-footer-bottom{display:grid;gap:7px}
}
@media(prefers-reduced-motion:reduce){
.ring-b,.pub-core-scan,.pub-signal-rail>div,.voice-wave i{animation:none!important}
[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}
/* =========================================================
Phase 10.3.1 Public UI Refinement
Final visual polish after full-page acceptance review
========================================================= */
/* More legible public baseline */
.public-body{
--p-shell:min(1280px,calc(100vw - 68px));
font-size:17px;
}
/* Header presence and CTA legibility */
.pub-nav{height:74px;padding-left:16px;padding-right:16px}
.pub-brand-symbol{width:46px;height:46px}
.pub-brand-symbol img{width:66px;height:66px}
.pub-brand-word{font-size:23px}
.pub-nav-links a{font-size:12.5px;padding:11px 15px}
.pub-nav-cta{
min-width:148px;
justify-content:space-between;
font-size:11.5px;
}
.pub-nav-cta span{
display:inline!important;
visibility:visible!important;
opacity:1!important;
color:#071017!important;
font-size:11.5px!important;
line-height:1!important;
}
/* Hero gets a little more authority without changing composition */
.pub-hero{padding-top:148px}
.pub-hero-grid{grid-template-columns:1.01fr .99fr;gap:32px}
.pub-hero-copy h1{font-size:clamp(62px,6.5vw,102px)}
.pub-lead{font-size:18.5px;line-height:1.68;max-width:720px}
.pub-core-wrap{height:610px;transform:scale(1.035);transform-origin:center}
.pub-core-ring.ring-a{border-color:rgba(79,185,229,.21)}
.pub-core-ring.ring-b{border-color:rgba(79,185,229,.19)}
.pub-core-center{
width:198px;height:198px;
border-color:rgba(65,208,255,.40);
box-shadow:0 0 0 10px rgba(43,188,237,.025),0 0 105px rgba(37,168,225,.18)
}
.pub-core-node{
border-color:rgba(106,171,201,.21);
background:rgba(8,19,27,.94);
}
.pub-core-node strong{font-size:12.5px}
.pub-core-node span{font-size:9.5px}
.pub-hero-proof strong{font-size:12px}
.pub-hero-proof span{font-size:10.5px}
/* Microcopy was too microscopic on a full desktop canvas */
.pub-kicker{font-size:10.5px}
.pub-section-no{font-size:10.5px}
.pub-card-top{font-size:9.5px}
.pub-case-meta{font-size:8.5px}
.pub-page-note,.pub-index-list{font-size:8.5px}
.pub-footer-nav small,.pub-contact-info>a small,.pub-contact-location small{font-size:7.5px}
.pub-footer-nav a,.pub-footer-nav span{font-size:11.5px}
/* Tighten empty space while preserving premium rhythm */
.pub-section{padding:102px 0}
.pub-intro{padding-top:112px}
.pub-section-head{margin-bottom:42px}
.pub-process{padding-top:94px;padding-bottom:94px}
.pub-work-preview{padding-top:100px;padding-bottom:100px}
.pub-partner-strip{padding-top:100px;padding-bottom:100px}
/* Stronger body copy */
.pub-section-head>p,
.pub-partner-grid>div>p:not(.pub-kicker),
.pub-operate-grid p,
.pub-partner-model-copy>p{
font-size:15.5px;
}
.pub-bento-card>p,
.pub-case p,
.pub-process-grid p,
.pub-principle-grid p,
.pub-work-main>p{
font-size:13.5px;
}
/* Bento polish */
.pub-bento-card{
border-color:rgba(154,190,210,.17);
transition:transform .28s cubic-bezier(.22,.61,.36,1),
border-color .28s ease,
box-shadow .28s ease,
background .28s ease;
}
.pub-bento-card:hover{
transform:translateY(-3px);
border-color:rgba(65,205,255,.30);
box-shadow:0 26px 70px rgba(0,0,0,.25);
}
.pub-bento-card:hover:after{
background:linear-gradient(90deg,transparent,rgba(45,214,255,.56),transparent);
}
.pub-bento-ai{min-height:410px}
.pub-bento-card h3{font-weight:700}
/* Work cards feel more authored */
.pub-case{
transition:transform .28s cubic-bezier(.22,.61,.36,1),
border-color .28s ease,
box-shadow .28s ease;
}
.pub-case:hover{
transform:translateY(-3px);
border-color:rgba(65,205,255,.30);
box-shadow:0 28px 75px rgba(0,0,0,.26);
}
.pub-case-large h3{max-width:690px}
/* Process block less empty */
.pub-process-grid article{min-height:265px}
.pub-process-grid article small{margin-top:48px}
/* Bright final CTA stays bold but reads more refined */
.pub-final-cta{
background:
radial-gradient(circle at 78% 20%,rgba(255,255,255,.18),transparent 26%),
linear-gradient(125deg,#138ec9 0%,#2abde7 55%,#38cef1 100%);
}
.pub-final-cta .pub-shell{align-items:center}
.pub-final-cta .pub-btn-light{
min-width:220px;
min-height:52px;
justify-content:space-between;
padding-inline:18px;
}
.pub-final-cta .pub-btn-light span{
display:inline!important;
visibility:visible!important;
opacity:1!important;
color:#071018!important;
font-size:12px!important;
}
/* Footer readability */
.pub-footer-brand>p{font-size:12.5px}
.pub-footer-bottom{font-size:7.5px}
/* Make interactive buttons unmistakably clickable */
.pub-btn,.pub-nav-cta{
position:relative;
overflow:hidden;
}
.pub-btn:after,.pub-nav-cta:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.22) 48%,transparent 68%);
transform:translateX(-130%);
transition:transform .55s ease;
pointer-events:none;
}
.pub-btn:hover:after,.pub-nav-cta:hover:after{transform:translateX(130%)}
/* Signal rail slightly easier to read */
.pub-signal-rail span,
.pub-signal-rail>div:after{
font-size:9.5px;
}
/* Section accent line gives long page a stronger cadence */
.pub-section-head>div:first-child{
position:relative;
padding-top:14px;
}
.pub-section-head>div:first-child:before{
content:"";
position:absolute;
left:0;top:0;
width:32px;height:1px;
background:linear-gradient(90deg,var(--p-orange),rgba(255,148,24,0));
}
/* Responsive corrections after desktop refinement */
@media(max-width:1100px){
.public-body{--p-shell:min(100% - 48px,1280px)}
.pub-core-wrap{transform:scale(.98)}
}
@media(max-width:720px){
.public-body{--p-shell:calc(100vw - 32px);font-size:16px}
.pub-nav{height:62px}
.pub-brand-symbol{width:38px;height:38px}
.pub-brand-word{font-size:20px}
.pub-hero{padding-top:112px}
.pub-core-wrap{height:440px;transform:scale(.90)}
.pub-section{padding:78px 0}
.pub-intro{padding-top:84px}
.pub-process,.pub-work-preview,.pub-partner-strip{padding-top:78px;padding-bottom:78px}
.pub-bento-card:hover,.pub-case:hover{transform:none}
}
/* =========================================================
Phase 10.3.2 Hero Transition Fix
Separate proof row from signal rail cleanly
========================================================= */
.pub-hero{
min-height:900px;
padding-bottom:108px;
}
.pub-hero-copy{
padding-bottom:34px;
}
.pub-hero-proof{
position:relative;
z-index:4;
margin-top:44px;
padding:16px 18px;
width:max-content;
max-width:100%;
border:1px solid rgba(145,185,204,.10);
border-radius:12px;
background:rgba(8,16,23,.72);
backdrop-filter:blur(10px);
box-shadow:0 16px 42px rgba(0,0,0,.18);
}
.pub-hero-proof strong{
font-size:11.5px;
line-height:1.15;
}
.pub-hero-proof span{
font-size:10px;
line-height:1.3;
}
.pub-signal-rail{
bottom:0;
height:58px;
z-index:5;
background:rgba(6,12,17,.96);
border-top:1px solid rgba(140,183,204,.13);
border-bottom:1px solid rgba(140,183,204,.10);
box-shadow:0 -14px 40px rgba(0,0,0,.10);
}
.pub-signal-rail:before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:70px;
z-index:2;
background:linear-gradient(90deg,#070b10 30%,transparent);
pointer-events:none;
}
.pub-signal-rail:after{
content:"";
position:absolute;
inset:0 0 0 auto;
width:70px;
z-index:2;
background:linear-gradient(270deg,#070b10 30%,transparent);
pointer-events:none;
}
.pub-signal-rail>div{
padding-left:26px;
}
.pub-intro{
padding-top:122px;
}
@media(max-width:1100px){
.pub-hero{
min-height:auto;
padding-bottom:105px;
}
.pub-hero-proof{
width:100%;
justify-content:flex-start;
}
}
@media(max-width:720px){
.pub-hero{
padding-bottom:92px;
}
.pub-hero-copy{
padding-bottom:10px;
}
.pub-hero-proof{
margin-top:34px;
padding:14px;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.pub-hero-proof>i{
display:none;
}
.pub-hero-proof div:last-child{
grid-column:1/-1;
}
.pub-signal-rail{
height:52px;
}
.pub-intro{
padding-top:86px;
}
}
/* =========================================================
Phase 11 Operations Intelligence
========================================================= */
.oi-header{display:flex;justify-content:space-between;align-items:end;gap:28px}
.oi-overall{min-width:220px;border:1px solid var(--c-border);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.015)}
.oi-overall>span,.oi-overall>small{font-family:var(--font-mono);font-size:8px;letter-spacing:.11em;color:var(--c-muted)}
.oi-overall strong{display:flex;align-items:center;gap:9px;font-size:18px;margin:7px 0 4px;text-transform:uppercase}
.oi-overall strong i{width:7px;height:7px;border-radius:50%;background:#52d6b4;box-shadow:0 0 10px rgba(82,214,180,.5)}
.oi-overall.oi-attention strong i{background:#f0a74b}.oi-overall.oi-degraded strong i{background:#f27669}
.oi-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.oi-metrics article{border:1px solid var(--c-border);border-radius:14px;background:rgba(255,255,255,.012);padding:18px}
.oi-metrics span{font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;color:var(--c-muted)}
.oi-metrics strong{display:block;font-size:34px;line-height:1;margin:20px 0 8px}
.oi-metrics small{font-size:10px;color:var(--c-muted)}
.oi-grid{display:grid;gap:14px;margin-bottom:14px}.oi-grid-main{grid-template-columns:1.2fr .8fr}.oi-grid-secondary,.oi-grid-tertiary{grid-template-columns:1fr 1fr}
.oi-panel-head{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:18px}
.oi-panel-head h2{font-size:23px;margin:3px 0 0}.oi-panel-head .eyebrow{margin:0}
.oi-panel-head>a,.oi-panel-head>span{font-family:var(--font-mono);font-size:8px;color:#64d9f6;text-decoration:none}
.oi-list,.oi-runtime-list,.oi-maint-list,.oi-provider-list,.oi-event-list{display:grid;gap:1px;background:rgba(126,175,198,.08);border:1px solid rgba(126,175,198,.08);border-radius:10px;overflow:hidden}
.oi-attention-row{display:grid;grid-template-columns:18px 1fr auto 20px;gap:12px;align-items:center;padding:13px;background:#0a141c;text-decoration:none;color:inherit}
.oi-attention-row:hover{background:#0d1a23}.oi-priority i{display:block;width:7px;height:7px;border-radius:50%;background:#f0a74b}.priority-1 .oi-priority i{background:#f27669;box-shadow:0 0 10px rgba(242,118,105,.35)}.priority-3 .oi-priority i{background:#68bfe1}
.oi-attention-row small{display:block;font-family:var(--font-mono);font-size:7px;color:#5f7d8b}.oi-attention-row strong{display:block;font-size:12px;margin:2px 0}.oi-attention-row span{font-size:9px;color:var(--c-muted)}
.oi-attention-row>b{font-family:var(--font-mono);font-size:7px;font-weight:500;color:#91a8b3;text-transform:uppercase}.oi-attention-row em{font-style:normal;color:#55dcff}
.oi-empty{display:grid;place-items:center;text-align:center;padding:58px 20px;border:1px dashed rgba(115,176,201,.15);border-radius:10px}.oi-empty i{width:8px;height:8px;border-radius:50%;background:#55d9b7;margin-bottom:10px}.oi-empty strong{font-size:13px}.oi-empty span{font-size:10px;color:var(--c-muted);margin-top:5px}.oi-empty.compact{padding:24px}
.oi-runtime-row,.oi-maint-row,.oi-provider-row,.oi-event-row{display:grid;align-items:center;gap:11px;padding:12px;background:#0a141c}
.oi-runtime-row{grid-template-columns:10px 1fr auto}.oi-runtime-row>i,.oi-provider-row>i{width:7px;height:7px;border-radius:50%}.oi-runtime-row>i.good,.oi-provider-row>i.good{background:#55d9b7}.oi-runtime-row>i.warn,.oi-provider-row>i.warn{background:#f0a74b}.oi-runtime-row>i.bad{background:#f27669}
.oi-runtime-row strong,.oi-provider-row strong,.oi-maint-row strong,.oi-event-row strong{display:block;font-size:11px}.oi-runtime-row span,.oi-provider-row span,.oi-maint-row span,.oi-event-row span{display:block;font-size:8px;color:var(--c-muted);margin-top:2px}.oi-runtime-row>b,.oi-provider-row>b{font-family:var(--font-mono);font-size:7px;color:#718d9b;text-transform:uppercase}
.oi-table{border:1px solid rgba(126,175,198,.08);border-radius:10px;overflow:hidden}.oi-table-head,.oi-table-row{display:grid;grid-template-columns:1.1fr .8fr .55fr;gap:12px;align-items:center;padding:11px 13px}.oi-table-head{font-family:var(--font-mono);font-size:7px;color:#567582;background:#091219}.oi-table-row{border-top:1px solid rgba(126,175,198,.08);text-decoration:none;color:inherit;background:#0a141c}.oi-table-row:hover{background:#0d1a23}.oi-table-row strong{display:block;font-size:10px}.oi-table-row small,.oi-table-row>span:nth-child(2){font-size:8px;color:var(--c-muted)}.oi-table-row b{font-family:var(--font-mono);font-size:7px;font-weight:500;color:#8ca5b0;text-transform:uppercase}
.oi-maint-row{grid-template-columns:48px 1fr auto}.oi-date{border-right:1px solid var(--c-border);padding-right:10px;text-align:center}.oi-date strong{font-size:18px}.oi-date span{font-family:var(--font-mono);font-size:7px;color:#6fd9f3}.oi-maint-row>small{font-family:var(--font-mono);font-size:7px;color:#758e9b}
.oi-provider-row{grid-template-columns:10px 1fr auto;text-decoration:none;color:inherit}.oi-provider-row:hover{background:#0d1a23}
.oi-event-row{grid-template-columns:8px 1fr auto}.oi-event-row>i{width:5px;height:5px;border-radius:50%;background:#6abedc}.oi-event-row>i.sev-critical,.oi-event-row>i.sev-error{background:#f27669}.oi-event-row>i.sev-warning{background:#f0a74b}.oi-event-row time{font-family:var(--font-mono);font-size:7px;color:#5b7581}
@media(max-width:1050px){.oi-metrics{grid-template-columns:1fr 1fr}.oi-grid-main,.oi-grid-secondary,.oi-grid-tertiary{grid-template-columns:1fr}}
@media(max-width:650px){.oi-header{display:grid}.oi-overall{width:100%}.oi-metrics{grid-template-columns:1fr}.oi-attention-row{grid-template-columns:16px 1fr 16px}.oi-attention-row>b{display:none}.oi-table-head,.oi-table-row{grid-template-columns:1fr .55fr}.oi-table-head span:nth-child(2),.oi-table-row>span:nth-child(2){display:none}}
/* =========================================================
Phase 12 RBAC + Operational Governance
========================================================= */
.governance-header{display:flex;justify-content:space-between;align-items:end;gap:30px}
.governance-rule{min-width:260px;border:1px solid var(--c-border);border-radius:14px;background:rgba(255,255,255,.012);padding:14px 16px}
.governance-rule span,.governance-rule small{display:block;font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;color:var(--c-muted)}
.governance-rule strong{display:block;font-size:13px;color:#65ddf8;margin:8px 0 5px}
.governance-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:14px}
.governance-summary article{border:1px solid var(--c-border);border-radius:12px;background:rgba(255,255,255,.012);padding:14px}
.governance-summary article span{font-family:var(--font-mono);font-size:7px;color:#5f7e8d}.governance-summary article strong{display:block;font-size:12px;margin:12px 0 3px}.governance-summary article small{font-size:8px;color:var(--c-muted)}
.governance-panel-head{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:18px}.governance-panel-head h2{font-size:23px;margin:4px 0 0}.governance-panel-head>span,.governance-panel-head>a{font-family:var(--font-mono);font-size:8px;color:#66dafa;text-decoration:none}
.governance-matrix-wrap{overflow:auto;border:1px solid rgba(120,176,200,.10);border-radius:10px}
.governance-matrix{width:100%;min-width:1180px;border-collapse:collapse;background:#09131a}
.governance-matrix th,.governance-matrix td{border-bottom:1px solid rgba(120,176,200,.08);border-right:1px solid rgba(120,176,200,.06);padding:10px;text-align:center}
.governance-matrix th{position:sticky;top:0;background:#0b1720;z-index:2;font-family:var(--font-mono);font-size:7px;color:#7894a1;vertical-align:bottom}
.governance-matrix th:first-child,.governance-matrix td:first-child{text-align:left;width:320px;position:sticky;left:0;background:#0a151d;z-index:1}
.governance-matrix th:first-child{z-index:3;background:#0b1720}
.governance-matrix td:first-child strong{display:block;font-size:10px}.governance-matrix td:first-child code{display:block;background:none;border:0;padding:0;margin:3px 0;font-size:7px;color:#5cd8f7}.governance-matrix td:first-child small{display:block;color:var(--c-muted);font-size:8px;line-height:1.45;padding-right:12px}
.governance-matrix td.granted{color:#65ddc1;font-size:14px}.governance-matrix td.denied{color:#314d5a}
.governance-group td{position:static!important;background:#071017!important;font-family:var(--font-mono);font-size:7px;letter-spacing:.12em;color:#e59a35!important;padding:8px 10px!important}
.governance-matrix td:first-child b{display:inline-block;margin-top:6px;border-radius:999px;padding:3px 6px;font-family:var(--font-mono);font-size:6px;font-weight:500}.risk-low{color:#6d96a8;border:1px solid rgba(109,150,168,.2)}.risk-medium{color:#6fd8f4;border:1px solid rgba(111,216,244,.2)}.risk-high{color:#eeb05a;border:1px solid rgba(238,176,90,.2)}.risk-critical{color:#ef796d;border:1px solid rgba(239,121,109,.24)}
.governance-user-list{display:grid;gap:1px;background:rgba(120,176,200,.08);border:1px solid rgba(120,176,200,.08);border-radius:10px;overflow:hidden}
.governance-user-row{display:grid;grid-template-columns:1.2fr .7fr .4fr 1.5fr;gap:16px;align-items:center;background:#0a141c;padding:13px}
.governance-user-identity{display:flex;align-items:center;gap:10px}.governance-user-identity>i{width:7px;height:7px;border-radius:50%}.governance-user-identity>i.active{background:#55d9b7}.governance-user-identity>i.disabled{background:#6b7780}.governance-user-row strong{display:block;font-size:10px}.governance-user-row span,.governance-user-row small{font-size:7px;color:var(--c-muted)}.governance-user-row form{display:grid;grid-template-columns:1fr .65fr auto;gap:7px}.governance-user-row select{min-width:0;background:#071018;color:#c7d5dc;border:1px solid var(--c-border);border-radius:7px;padding:8px;font-size:9px}.governance-readonly{justify-self:end;font-family:var(--font-mono);font-size:7px;color:#607b87}
.governance-denied{text-align:center;max-width:680px;margin:50px auto;padding:50px}.governance-lock{width:62px;height:62px;border:1px solid rgba(239,121,109,.35);border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;color:#ef796d;font-size:26px}.governance-denied code{display:inline-block;margin:8px 0 16px;color:#66dafa;background:#071018;border:1px solid var(--c-border);border-radius:7px;padding:8px 10px}.governance-denied p{color:var(--c-muted);font-size:11px;line-height:1.7;max-width:520px;margin:0 auto 22px}
@media(max-width:1200px){.governance-summary{grid-template-columns:repeat(3,1fr)}.governance-user-row{grid-template-columns:1fr 1fr}.governance-user-row form{grid-column:1/-1}}
@media(max-width:700px){.governance-header{display:grid}.governance-rule{width:100%}.governance-summary{grid-template-columns:1fr 1fr}.governance-user-row{grid-template-columns:1fr}.governance-user-row form{grid-template-columns:1fr}.governance-readonly{justify-self:start}}
/* =========================================================
Phase 13 Notifications & Escalation
========================================================= */
.ops-top-actions{display:flex;align-items:center;gap:13px}
.ops-top-actions>span{display:flex;align-items:center;gap:7px}
.ops-notification-bell{display:flex;align-items:center;gap:6px;text-decoration:none;font-family:var(--font-mono);font-size:7px;letter-spacing:.08em;color:#617e8b;border-right:1px solid rgba(118,174,199,.14);padding-right:12px}
.ops-notification-bell>i{width:5px;height:5px;border-radius:50%;background:#315765}.ops-notification-bell.has-unread{color:#6ee1fb}.ops-notification-bell.has-unread>b{min-width:16px;height:16px;padding:0 4px;border-radius:999px;display:grid;place-items:center;background:#27c8f2;color:#041017;font-size:7px;box-shadow:0 0 12px rgba(39,200,242,.3)}
.control-side nav a{position:relative}.nav-notification-count{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;background:rgba(48,205,244,.13);border:1px solid rgba(48,205,244,.23);color:#68ddf8;font-family:var(--font-mono);font-size:7px}
.notification-header{display:flex;justify-content:space-between;align-items:end;gap:28px}
.notification-unread-card,.notification-transport-card{min-width:190px;border:1px solid var(--c-border);border-radius:13px;background:rgba(255,255,255,.012);padding:14px 16px}
.notification-unread-card span,.notification-unread-card small,.notification-transport-card span,.notification-transport-card small{display:block;font-family:var(--font-mono);font-size:7px;letter-spacing:.1em;color:var(--c-muted)}
.notification-unread-card strong{display:block;font-size:34px;line-height:1;margin:10px 0 6px}.notification-transport-card strong{display:block;font-size:14px;margin:10px 0 6px;color:#67def8}
.notification-layout{display:grid;grid-template-columns:1fr 310px;gap:14px}
.notification-toolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:16px}
.notification-toolbar>div{display:flex;gap:4px}.notification-toolbar a{text-decoration:none;font-size:9px;color:#718b98;padding:7px 9px;border-radius:7px}.notification-toolbar a.active{background:rgba(51,205,243,.07);color:#6edff9}.notification-toolbar>a{font-family:var(--font-mono);font-size:7px;color:#66daf8}
.notification-list{display:grid;gap:8px}
.notification-row{display:grid;grid-template-columns:12px minmax(0,1fr) 90px 140px;gap:14px;align-items:center;border:1px solid rgba(120,177,201,.12);border-radius:12px;background:#09141c;padding:15px}
.notification-row.status-unread{border-color:rgba(63,205,243,.22);background:linear-gradient(90deg,rgba(29,137,175,.05),#09141c 28%)}
.notification-marker i{display:block;width:7px;height:7px;border-radius:50%;background:#66bfdf}.severity-warning .notification-marker i{background:#eeae58}.severity-critical .notification-marker i{background:#ef766a;box-shadow:0 0 12px rgba(239,118,106,.3)}.severity-info .notification-marker i{background:#567c8e}
.notification-meta{display:flex;gap:10px;align-items:center;font-family:var(--font-mono);font-size:7px;color:#5d7885}.notification-meta span:first-child{color:#66d8f4}.severity-warning .notification-meta span:first-child{color:#eeb15c}.severity-critical .notification-meta span:first-child{color:#ef8278}.notification-meta time{margin-left:auto}
.notification-copy h3{font-size:13px;margin:5px 0}.notification-copy>p{font-size:8px;color:var(--c-muted);margin:0}.notification-copy blockquote{margin:8px 0 0;padding:8px 10px;border-left:2px solid rgba(238,174,88,.45);background:rgba(238,174,88,.035);font-size:9px;color:#94a9b3}
.notification-state span{font-family:var(--font-mono);font-size:7px;color:#768f9a;text-transform:uppercase}
.notification-actions{display:grid;gap:5px}.notification-actions form,.notification-actions .btn{width:100%}.notification-actions .btn{font-size:8px;min-height:30px;padding:0 8px}.notification-source{text-decoration:none;font-family:var(--font-mono);font-size:7px;color:#64daf7;text-align:center;margin-top:2px}
.notification-empty{display:grid;place-items:center;text-align:center;padding:68px 20px;border:1px dashed rgba(121,180,204,.14);border-radius:10px}.notification-empty.compact{padding:24px 12px}.notification-empty i{width:7px;height:7px;border-radius:50%;background:#55d7b5;margin-bottom:10px}.notification-empty strong{font-size:12px}.notification-empty span{font-size:9px;color:var(--c-muted);margin-top:5px}
.notification-preferences h2{font-size:22px;margin:4px 0 8px}.notification-preferences>p:not(.eyebrow){font-size:10px;color:var(--c-muted);line-height:1.65;margin-bottom:20px}.notification-preferences form{display:grid;gap:9px}
.notification-toggle{display:flex!important;justify-content:space-between;align-items:center;gap:12px;padding:11px;border:1px solid rgba(120,177,201,.10);border-radius:9px;background:#09131a}.notification-toggle span{display:grid;gap:2px}.notification-toggle strong{font-size:10px}.notification-toggle small{font-size:8px;color:var(--c-muted)}
.notification-select{display:grid;gap:6px;margin:7px 0}.notification-select>span{font-size:8px;color:#78929f}.notification-select select,.field-stack select,.field-stack input{background:#071018;color:#c4d4db;border:1px solid var(--c-border);border-radius:8px;padding:9px;font-size:9px}
.notification-transport-note{margin-top:22px;padding-top:16px;border-top:1px solid var(--c-border)}.notification-transport-note span,.notification-transport-note small{display:block;font-family:var(--font-mono);font-size:7px;color:#607c89}.notification-transport-note strong{display:block;color:#6bdcf7;margin:7px 0;font-size:12px}
.notification-processed{margin-bottom:14px;border:1px solid rgba(86,214,180,.2);background:rgba(86,214,180,.04);color:#78dfc5;border-radius:9px;padding:10px 13px;font-size:9px}
.notification-rule-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}.notification-rule-metrics article{border:1px solid var(--c-border);border-radius:12px;padding:15px;background:rgba(255,255,255,.012)}.notification-rule-metrics span{font-family:var(--font-mono);font-size:7px;color:#617e8c}.notification-rule-metrics strong{display:block;font-size:28px;margin:15px 0 5px}.notification-rule-metrics small{font-size:8px;color:var(--c-muted)}
.notification-management-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:14px}.notification-side-stack{display:grid;gap:14px;align-content:start}
.notification-panel-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:15px}.notification-panel-head h2{font-size:21px;margin:4px 0 0}
.notification-rule{border:1px solid rgba(120,177,201,.12);border-radius:11px;background:#09141c;padding:14px;margin-bottom:9px}.notification-rule-title{display:flex;justify-content:space-between;align-items:start;gap:14px;padding-bottom:12px;border-bottom:1px solid rgba(120,177,201,.08)}.notification-rule-title span{font-family:var(--font-mono);font-size:7px;color:#5fd7f5}.notification-rule-title h3{font-size:13px;margin:4px 0 2px}.notification-rule-title small{font-size:7px;color:var(--c-muted)}
.rule-enabled{display:flex!important;align-items:center;gap:6px;font-size:8px;color:#8fa5af}
.notification-rule-grid{display:grid;grid-template-columns:1.2fr .6fr .8fr 1.2fr;gap:10px;margin-top:12px}.notification-rule fieldset{border:1px solid rgba(120,177,201,.08);border-radius:8px;padding:9px;min-width:0}.notification-rule legend{font-family:var(--font-mono);font-size:7px;color:#637e8a;padding:0 4px}.notification-rule fieldset>label:not(.field-stack){display:flex;gap:6px;align-items:center;margin:5px 0;font-size:8px;color:#91a5af}.field-stack{display:grid!important;gap:5px;margin-bottom:8px}.field-stack>span{font-size:7px;color:#6d8793}
.notification-rule-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.notification-rule-footer>span{font-family:var(--font-mono);font-size:7px;color:#607b88}.notification-rule-footer .btn{min-height:30px;font-size:8px}
.notification-escalation-list,.notification-delivery-list{display:grid;gap:1px;background:rgba(120,177,201,.07);border-radius:9px;overflow:hidden}.notification-escalation-row{display:grid;grid-template-columns:8px 1fr auto;gap:9px;align-items:center;padding:10px;background:#09141c}.notification-escalation-row>i{width:6px;height:6px;border-radius:50%;background:#6b8997}.notification-escalation-row>i.state-pending{background:#eeae58}.notification-escalation-row>i.state-escalated{background:#ef766a}.notification-escalation-row>i.state-cancelled{background:#55d7b5}.notification-escalation-row strong,.notification-delivery-row strong{display:block;font-size:9px}.notification-escalation-row span,.notification-delivery-row span{display:block;font-size:7px;color:var(--c-muted);margin-top:2px}.notification-escalation-row>b{font-family:var(--font-mono);font-size:7px;color:#718d99;text-transform:uppercase}
.notification-delivery-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px;background:#09141c}.notification-delivery-row>b{font-family:var(--font-mono);font-size:7px;text-transform:uppercase}.delivery-dispatched{color:#63d9bd}.delivery-queued{color:#6bdaf5}.delivery-failed{color:#ef766a}.delivery-suppressed{color:#778994}
@media(max-width:1200px){.notification-layout,.notification-management-grid{grid-template-columns:1fr}.notification-rule-grid{grid-template-columns:1fr 1fr}.notification-preferences{order:-1}.notification-rule-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:750px){.notification-header{display:grid}.notification-unread-card,.notification-transport-card{width:100%}.notification-row{grid-template-columns:10px 1fr}.notification-state,.notification-actions{grid-column:2}.notification-actions{grid-template-columns:1fr 1fr}.notification-rule-grid,.notification-rule-metrics{grid-template-columns:1fr}.ops-notification-bell>span{display:none}}