:root{--bg:#fff;--mist:#f3f6fa;--ink:#14213d;--muted:#51607a;--line:#dbe3ee;--indigo:#3b4cca;--indigo-d:#2c3aa3;--teal:#0e9aa7;--r:10px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:750}h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}h3{font-size:1.15rem}
a{color:var(--indigo)}a:hover{color:var(--indigo-d)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}.narrow{max-width:720px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:10}.skip:focus{left:0}
.top{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.logo{font-weight:800;font-size:1.3rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
nav#nav{display:flex;align-items:center;gap:1.1rem}
nav#nav a:not(.btn){color:var(--ink);text-decoration:none;font-size:.95rem;padding:.3rem 0;border-bottom:2px solid transparent}
nav#nav a[aria-current]:not(.btn){border-color:var(--indigo)}
.menu{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:.45rem .8rem;font:inherit;color:var(--ink);cursor:pointer}
.btn{display:inline-block;background:var(--indigo);color:#fff;text-decoration:none;border:2px solid var(--indigo);border-radius:8px;padding:.7rem 1.2rem;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--indigo-d);color:#fff}.btn.ghost{background:#fff;color:var(--indigo)}.btn.ghost:hover{background:var(--mist)}.btn.small{padding:.4rem .9rem;font-size:.9rem}
.hero{background:linear-gradient(160deg,#fff 40%,var(--mist));padding:4.5rem 0 4rem}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:3rem;align-items:center}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch}.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.stack{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.stack li{background:#fff;border:1px solid var(--line);border-left:5px solid var(--indigo);border-radius:var(--r);box-shadow:0 1px 2px rgba(20,33,61,.05)}
.stack li:nth-child(even){border-left-color:var(--teal);margin-left:1.2rem}
.stack a{display:block;padding:.8rem 1.1rem;text-decoration:none;color:var(--ink);font-weight:600}.stack a:hover{background:var(--mist)}
.sec{padding:3.5rem 0}.alt{background:var(--mist)}
.band{background:var(--mist);padding:3rem 0 2.2rem;border-bottom:1px solid var(--line)}.band h1{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.2rem}
.card{border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;background:#fff}.card h2,.card h3{margin-bottom:.4rem;font-size:1.15rem}.card p{margin:.2rem 0 .8rem;color:var(--muted)}
.card a:not(.btn){color:var(--ink);text-decoration:none}.card a:not(.btn):hover{color:var(--indigo)}
.reasons{list-style:none;counter-reset:r;margin:0;padding:0;display:grid;gap:1rem}
.reasons li{counter-increment:r;display:grid;grid-template-columns:2.4rem 1fr;gap:.2rem 1rem}
.reasons li::before{content:counter(r);grid-row:span 2;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--indigo);color:#fff;display:grid;place-items:center;font-weight:700}
.reasons span{color:var(--muted)}
.ticks{padding:0;list-style:none}.ticks li{padding:.5rem 0 .5rem 1.8rem;position:relative;border-bottom:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:.3rem;top:1.05rem;width:.7rem;height:.35rem;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.cta{background:var(--ink);color:#fff;padding:3rem 0;text-align:center}.cta p{color:#c9d3e6}.cta .btn{background:#fff;color:var(--ink);border-color:#fff}
.crumbs{padding-top:1rem;font-size:.9rem;color:var(--muted)}.crumbs a{color:var(--muted)}
.note{background:var(--mist);border-left:4px solid var(--teal);padding:.8rem 1rem;border-radius:6px;color:var(--muted)}
.list{list-style:none;padding:0}.list li{padding:.5rem 0}
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem}
form label{display:block;font-weight:600;margin:1rem 0 .3rem}
input,select,textarea{width:100%;font:inherit;padding:.65rem .8rem;border:1px solid #9aa8c0;border-radius:8px;background:#fff;color:var(--ink)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#b3261e}
.err{color:#b3261e;margin:.3rem 0 0;font-size:.9rem}#status{margin-top:1rem;font-weight:600}form .btn{margin-top:1.2rem}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.foot{background:var(--mist);border-top:1px solid var(--line);padding:2rem 0;color:var(--muted)}.small-print{font-size:.85rem}
@media(max-width:820px){.hero-grid,.two{grid-template-columns:1fr}.menu{display:block}
nav#nav{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:1rem 1.25rem}
nav#nav.open{display:flex}.hero{padding:3rem 0}.stack li:nth-child(even){margin-left:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* v1.1 visuals */
.ico{width:34px;height:34px;fill:none;stroke:var(--indigo);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.6rem}
.card{transition:transform .25s,box-shadow .25s,border-color .25s}.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(59,76,202,.12);border-color:#b9c3f0}
.hero{position:relative;overflow:hidden}.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;animation:drift 14s ease-in-out infinite alternate}
.hero::before{width:380px;height:380px;background:#8f9cf5;top:-120px;right:-80px}.hero::after{width:320px;height:320px;background:#6fd3d9;bottom:-140px;left:20%;animation-delay:-6s}
.hero-grid{position:relative;z-index:1}.art{position:absolute;right:-30px;top:-40px;width:340px;opacity:.5;z-index:-1}
.art svg{width:100%}.orbit circle{fill:none;stroke:var(--indigo);stroke-dasharray:4 6;transform-origin:160px 130px;animation:spin 40s linear infinite}.orbit circle+circle{animation-duration:26s;animation-direction:reverse;stroke:var(--teal)}
.nodes circle{fill:var(--teal);animation:pulse 3s ease-in-out infinite}.nodes circle:nth-child(2n){fill:var(--indigo);animation-delay:-1.4s}.core{fill:var(--indigo)}
.stack li{animation:rise .6s both}.stack li:nth-child(2){animation-delay:.08s}.stack li:nth-child(3){animation-delay:.16s}.stack li:nth-child(4){animation-delay:.24s}.stack li:nth-child(5){animation-delay:.32s}.stack li:nth-child(6){animation-delay:.4s}.stack li:nth-child(7){animation-delay:.48s}
.hero h1,.hero .lead,.hero .actions{animation:rise .7s both}.hero .lead{animation-delay:.1s}.hero .actions{animation-delay:.2s}
.vendors{border-bottom:1px solid var(--line);padding:1.6rem 0;background:#fff}.vendors p{margin:0 0 .7rem;color:var(--muted);font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}.chips span{border:1px solid var(--line);background:var(--mist);border-radius:999px;padding:.2rem .8rem;font-size:.85rem;color:var(--ink)}
.card .chips{margin-top:.6rem}.steps{counter-reset:s;list-style:none;padding:0}.steps li{counter-increment:s;padding:.7rem 0 .7rem 3rem;position:relative;border-left:2px solid var(--line);margin-left:1rem}
.steps li::before{content:counter(s);position:absolute;left:-1rem;top:.6rem;width:2rem;height:2rem;border-radius:50%;background:var(--indigo);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem}
.band .ico{width:44px;height:44px}.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}.js .rv.in{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:scale(1.4);opacity:.6}}@keyframes drift{to{transform:translate(40px,30px)}}
@media(max-width:820px){.art{display:none}}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}.hero::before,.hero::after,.orbit circle,.nodes circle{animation:none}}
.ticks.cols{columns:2;column-gap:2.5rem}.ticks.cols li{break-inside:avoid}@media(max-width:820px){.ticks.cols{columns:1}}
/* v1.3 AI + cyber backdrop */
:root{--net:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none'%3E%3Cg stroke='%233b4cca' stroke-opacity='.2'%3E%3Cpath d='M20 40L90 20L150 70L220 40M90 20L70 110L150 70L190 150L70 110L40 190L120 210L190 150L220 210M150 70L150 -10M70 110L-10 120M190 150L250 130'/%3E%3C/g%3E%3Cg fill='%230e9aa7' fill-opacity='.55'%3E%3Ccircle cx='20' cy='40' r='3'/%3E%3Ccircle cx='90' cy='20' r='3'/%3E%3Ccircle cx='150' cy='70' r='4'/%3E%3Ccircle cx='220' cy='40' r='3'/%3E%3Ccircle cx='70' cy='110' r='4'/%3E%3Ccircle cx='190' cy='150' r='3'/%3E%3Ccircle cx='40' cy='190' r='3'/%3E%3Ccircle cx='120' cy='210' r='4'/%3E%3Ccircle cx='220' cy='210' r='3'/%3E%3C/g%3E%3C/svg%3E")}
.netbg,.band::before{position:absolute;inset:0;background:var(--net);animation:netmove 60s linear infinite;-webkit-mask-image:linear-gradient(100deg,transparent 5%,#000 70%);mask-image:linear-gradient(100deg,transparent 5%,#000 70%);pointer-events:none}
.band{position:relative;overflow:hidden}.band::before{content:"";opacity:.8}.band .wrap{position:relative}
.netbg::after{content:"";position:absolute;left:0;right:0;height:120px;background:linear-gradient(transparent,rgba(14,154,167,.16),transparent);animation:scan 7s ease-in-out infinite}
.floaters span{position:absolute;font:600 .8rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--indigo);background:rgba(255,255,255,.7);border:1px solid #c9d1f5;border-radius:999px;padding:.35rem .7rem;animation:bob 6s ease-in-out infinite;pointer-events:none}
.floaters span:nth-child(1){left:52%;top:12%}.floaters span:nth-child(2){left:78%;top:20%;animation-delay:-1s}.floaters span:nth-child(3){left:60%;top:48%;animation-delay:-2s}.floaters span:nth-child(4){left:88%;top:55%;animation-delay:-3s}
.floaters span:nth-child(5){left:46%;top:74%;animation-delay:-4s}.floaters span:nth-child(6){left:70%;top:82%;animation-delay:-5s}.floaters span:nth-child(7){left:92%;top:8%;animation-delay:-2.5s}.floaters span:nth-child(8){left:40%;top:30%;animation-delay:-3.5s}
.gap{height:2.5rem}h2.rv{margin-top:.5rem}
@keyframes netmove{to{background-position:240px 240px}}@keyframes scan{0%,100%{top:-120px}50%{top:100%}}@keyframes bob{50%{transform:translateY(-12px)}}
@media(max-width:820px){.floaters{display:none}}
@media(prefers-reduced-motion:reduce){.netbg,.band::before,.netbg::after,.floaters span{animation:none}}
.logo{display:flex;align-items:center;gap:.6rem}.logo img{height:44px;width:auto}.logo b{color:#2b86d1}
/* v1.5 scenes */
.scene{position:relative;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fff,var(--mist));padding:1rem;overflow:hidden}
.scene svg{width:100%;height:auto;display:block}.lk line{stroke:#c3ccf3;stroke-width:2;stroke-dasharray:5 6}
.nd rect{fill:#fff;stroke:var(--indigo);stroke-width:1.5}.nd text{font:600 12px system-ui,sans-serif;fill:var(--ink)}
.nd.s rect{fill:#eef0fd;stroke-width:2.5;animation:ring 2.4s ease-in-out infinite}.nd.r rect{fill:#fdeeee;stroke:#d64545}.nd.r text{fill:#8f1f1f}
.logs{list-style:none;margin:.6rem 0 0;padding:0;position:relative;height:1.7rem;font:600 .85rem ui-monospace,Menlo,Consolas,monospace;color:var(--indigo-d)}
.logs li{position:absolute;inset:0;opacity:0;animation:logc 12s infinite}.logs li::before{content:"> ";color:var(--teal)}
.logs li:nth-child(2){animation-delay:3s}.logs li:nth-child(3){animation-delay:6s}.logs li:nth-child(4){animation-delay:9s}
@keyframes logc{0%{opacity:0;transform:translateY(6px)}4%,22%{opacity:1;transform:none}27%,100%{opacity:0}}
@keyframes ring{50%{stroke-width:4;stroke:var(--teal)}}
.logo b{color:#2b86d1}
@media(prefers-reduced-motion:reduce){.nd.s rect{animation:none}.logs li:first-child{opacity:1;animation:none}}
/* v1.6 design styles: one per page, chosen in build.mjs styleMap */
[data-style=glass]{background:linear-gradient(135deg,#e3e9ff,#dff5f6 50%,#efe6ff) fixed}
[data-style=glass] .card,[data-style=glass] .scene{background:rgba(255,255,255,.45);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.75);box-shadow:0 8px 30px rgba(59,76,202,.14)}
[data-style=glass] .band,[data-style=glass] .alt{background:transparent}
[data-style=fluent]{--indigo:#0f6cbd;--indigo-d:#0b5394;--r:4px}
[data-style=fluent] .card{border:0;border-top:3px solid var(--indigo);border-radius:4px;box-shadow:0 1.6px 3.6px rgba(0,0,0,.13),0 .3px .9px rgba(0,0,0,.11)}
[data-style=fluent] .card:hover{background:linear-gradient(135deg,#fff,#eaf3fb)}[data-style=fluent] .btn{border-radius:4px}
[data-style=material]{font-family:Roboto,system-ui,sans-serif;--r:12px}
[data-style=material] .card{border:0;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.2),0 1px 1px rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12)}
[data-style=material] .card:hover{box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14)}[data-style=material] .btn{border-radius:20px;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}[data-style=material] .band{background:#e8eaf6}
[data-style=bento] .grid{grid-template-columns:repeat(4,1fr);grid-auto-flow:dense}[data-style=bento] .card{border:0;border-radius:22px;background:var(--mist)}
[data-style=bento] .card:nth-child(1){grid-column:span 2;grid-row:span 2;background:linear-gradient(145deg,#e7ebff,#dff5f6)}[data-style=bento] .card:nth-child(4){grid-column:span 2}[data-style=bento] .card:nth-child(7){grid-column:span 2}
@media(max-width:820px){[data-style=bento] .grid{grid-template-columns:1fr}[data-style=bento] .card{grid-column:auto!important;grid-row:auto!important}}
[data-style=skeuo]{background:repeating-linear-gradient(90deg,#eceff3 0 2px,#e5e8ed 2px 4px)}
[data-style=skeuo] .card,[data-style=skeuo] .scene{position:relative;background:linear-gradient(#fdfdfd,#d8dce3);border:1px solid #9aa1ad;border-radius:10px;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(0,0,0,.14),0 3px 6px rgba(0,0,0,.25)}
[data-style=skeuo] .card::after{content:"";position:absolute;right:10px;top:10px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#7d8693)}
[data-style=skeuo] .btn{background:linear-gradient(#5668e0,#2c3aa3);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 4px rgba(0,0,0,.3)}
[data-style=minimal] .card{border:0;border-top:1px solid var(--ink);border-radius:0;background:transparent;padding:1rem 0;transition:padding .25s}[data-style=minimal] .card:hover{padding-left:.6rem;transform:none;box-shadow:none}
[data-style=minimal] .band{background:#fff}[data-style=minimal] a{text-underline-offset:4px}
[data-style=neumorphism]{background:#e8ecf3}[data-style=neumorphism] .card,[data-style=neumorphism] .scene{background:#e8ecf3;border:0;border-radius:20px;box-shadow:8px 8px 16px #c5cad6,-8px -8px 16px #fff}
[data-style=neumorphism] .band,[data-style=neumorphism] .alt,[data-style=neumorphism] .foot,[data-style=neumorphism] .top{background:#e8ecf3}
[data-style=neumorphism] input,[data-style=neumorphism] select,[data-style=neumorphism] textarea{background:#e8ecf3;border:1px solid #9aa8c0;box-shadow:inset 4px 4px 8px #c5cad6,inset -4px -4px 8px #fff;border-radius:14px}[data-style=neumorphism] .btn{border-radius:14px;box-shadow:6px 6px 12px #c5cad6,-6px -6px 12px #fff}
[data-style=liquid]{background:radial-gradient(500px 360px at 12% 10%,#bfe9ee,transparent),radial-gradient(520px 380px at 90% 30%,#d5d9ff,transparent),radial-gradient(480px 360px at 40% 95%,#ffd9ee,transparent),#f6f8fd fixed}
[data-style=liquid] .card,[data-style=liquid] .scene{background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.25));backdrop-filter:blur(22px) saturate(1.8);border:1px solid rgba(255,255,255,.85);border-radius:28px;box-shadow:inset 0 1px 1px #fff,inset 0 -10px 18px rgba(255,255,255,.35),0 12px 32px rgba(14,154,167,.18)}
[data-style=liquid] .band,[data-style=liquid] .alt{background:transparent}[data-style=liquid] .btn{border-radius:999px}
[data-style=maximal]{background:radial-gradient(circle at 10% 20%,#ffe1f1 0 12%,transparent 13%),radial-gradient(circle at 90% 70%,#dff5f6 0 14%,transparent 15%),#fffaf0}
[data-style=maximal] h1{background:linear-gradient(90deg,#3b4cca,#ff4fa3,#0e9aa7);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
[data-style=maximal] .card{background:linear-gradient(135deg,#fff3c4,#ffd1f0);border:3px solid var(--indigo);border-radius:18px;box-shadow:6px 6px 0 var(--teal),12px 12px 0 #ff6ba8}[data-style=maximal] .card:nth-child(odd){transform:rotate(-.6deg)}
[data-style=maximal] .band,[data-style=maximal] .alt{background:transparent}
[data-style=flat] .card{border:0;border-radius:0;background:#eef2ff}[data-style=flat] .card:nth-child(3n+2){background:#e3f6f7}[data-style=flat] .card:nth-child(3n){background:#fff4e0}[data-style=flat] .card:hover{transform:none;box-shadow:none}
[data-style=flat] .band{background:var(--indigo);color:#fff}[data-style=flat] .band h1,[data-style=flat] .band .lead{color:#fff}[data-style=flat] .band .ico{stroke:#fff}[data-style=flat] .band::before{opacity:.3}
[data-style=brutal]{--ink:#111}[data-style=brutal] .card,[data-style=brutal] .scene{border:3px solid #111;border-radius:0;box-shadow:6px 6px 0 #111;background:#fff}[data-style=brutal] .card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #111}
[data-style=brutal] .band{background:#ffe14d;border-bottom:3px solid #111}[data-style=brutal] h1,[data-style=brutal] h2{text-transform:uppercase;font-weight:900}[data-style=brutal] .btn{border:3px solid #111;border-radius:0;background:#ff5c8a;color:#111;box-shadow:4px 4px 0 #111}
[data-style=clay]{background:#fff7fb}[data-style=clay] .card,[data-style=clay] .scene{border:0;border-radius:28px;background:#ffeaf3;box-shadow:inset -6px -6px 12px rgba(0,0,0,.07),inset 6px 6px 12px rgba(255,255,255,.9),8px 12px 24px rgba(255,107,168,.22)}
[data-style=clay] .card:nth-child(3n+2){background:#e5f6fb}[data-style=clay] .card:nth-child(3n){background:#fff3d6}[data-style=clay] .band{background:#ffeaf3}[data-style=clay] .btn{border-radius:999px;box-shadow:inset -3px -3px 6px rgba(0,0,0,.18),inset 3px 3px 6px rgba(255,255,255,.35),4px 8px 14px rgba(59,76,202,.3)}
/* dark styles: cyber (holographic/cyberpunk) and oled; dark is used only where requested */
[data-style=cyber],[data-style=oled]{--bg:#070a1a;--mist:#0c1226;--ink:#e8ecff;--muted:#9aa6c9;--line:#25305a;--indigo:#6f9bff;--indigo-d:#a6c0ff;--teal:#00e5ff}
[data-style=oled]{--bg:#000;--mist:#0a0a0a;--line:#1f1f1f;--indigo:#5eead4;--indigo-d:#99f6e4;--teal:#5eead4}
[data-style=cyber] .top,[data-style=oled] .top{background:rgba(5,6,12,.9)}[data-style=cyber] .card,[data-style=oled] .card,[data-style=cyber] .scene,[data-style=oled] .scene{background:var(--mist)}
[data-style=cyber] .btn,[data-style=oled] .btn,[data-style=cyber] .cta .btn,[data-style=oled] .cta .btn{color:#001018;background:var(--teal);border-color:var(--teal)}
[data-style=cyber] .cta,[data-style=oled] .cta{background:var(--mist);border-top:1px solid var(--line)}[data-style=cyber] .band,[data-style=oled] .band{background:var(--mist)}
[data-style=cyber] .alt,[data-style=oled] .alt,[data-style=cyber] .foot,[data-style=oled] .foot{background:var(--mist)}[data-style=cyber] .chips span,[data-style=oled] .chips span{background:#0f1830;color:var(--ink)}
[data-style=cyber] .nd rect,[data-style=oled] .nd rect{fill:#0c1226}[data-style=cyber] .nd text,[data-style=oled] .nd text{fill:#e8ecff}[data-style=cyber] .nd.r rect,[data-style=oled] .nd.r rect{fill:#2a0f1a}[data-style=cyber] .nd.r text,[data-style=oled] .nd.r text{fill:#ff9ab0}[data-style=cyber] .lk line,[data-style=oled] .lk line{stroke:#2c3d73}
[data-style=cyber] .note,[data-style=oled] .note{background:#0f1830}[data-style=cyber] .card a:not(.btn),[data-style=oled] .card a:not(.btn){color:var(--ink)}
[data-style=cyber] h1{background:linear-gradient(90deg,#00e5ff,#ff2bd6,#7affc8);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-style=cyber] .card,[data-style=cyber] .scene{border:1px solid rgba(0,229,255,.45);box-shadow:0 0 18px rgba(0,229,255,.15),inset 0 0 22px rgba(255,43,214,.07);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
[data-style=cyber]::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
[data-style=oled] .card{border:1px solid #1f1f1f}
@media(max-width:820px){[data-style=cyber] nav#nav,[data-style=oled] nav#nav{background:var(--bg)}}
.soon{cursor:default;opacity:.75}
/* v1.8 scene kit + per-style chrome */
.zn{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:6 6}.ln{stroke:#9fb0e8;stroke-width:2;fill:none}.ln.red{stroke:#d64545;stroke-dasharray:6 6}
.tx{font:600 11px system-ui,sans-serif;fill:var(--ink)}.tx.m{fill:var(--muted);font-weight:500}.tx.g{fill:#15803d}.tx.r{fill:#c0261d}
.ecg{fill:none;stroke:#16a34a;stroke-width:2.5;stroke-dasharray:28 10;animation:ecg 1s linear infinite}.ecg.red{animation:none;stroke:#d64545}.bk{fill:var(--line)}@keyframes ecg{to{stroke-dashoffset:-38}}
.nd path,.nd ellipse{fill:#fff;stroke:var(--indigo);stroke-width:1.5}[data-style=cyber] .nd path,[data-style=cyber] .nd ellipse,[data-style=oled] .nd path,[data-style=oled] .nd ellipse{fill:#0c1226}
[data-style=cyber] .tx.g,[data-style=oled] .tx.g{fill:#5cf2a5}[data-style=cyber] .tx.r,[data-style=oled] .tx.r{fill:#ff8a9a}
[data-style=glass] .top{background:rgba(255,255,255,.5);backdrop-filter:blur(14px)}[data-style=liquid] .top{background:rgba(255,255,255,.35);backdrop-filter:blur(24px) saturate(1.8);border-radius:0 0 24px 24px}
[data-style=brutal] .top{background:#ffe14d;border-bottom:3px solid #111}[data-style=skeuo] .top{background:linear-gradient(#f4f6f9,#cfd4dc);border-bottom:1px solid #8b93a1}
[data-style=cyber] .top{border-bottom:1px solid #00e5ff;box-shadow:0 0 14px rgba(0,229,255,.3)}[data-style=material] .top{border:0;box-shadow:0 2px 4px rgba(0,0,0,.2)}
[data-style=maximal] .top{background:linear-gradient(90deg,#ffe1f1,#dff5f6,#fff3c4)}[data-style=minimal] .top{border:0;background:#fff}[data-style=neumorphism] .top{box-shadow:0 6px 12px #c5cad6;border:0}
[data-style=clay] nav#nav a:not(.btn){background:#fff;border-radius:999px;padding:.3rem .8rem;box-shadow:2px 3px 8px rgba(255,107,168,.25)}[data-style=clay] .top{background:#fff0f6}
[data-style=flat] .top{background:#fff;border-bottom:4px solid var(--indigo)}[data-style=fluent] .top{background:rgba(243,246,250,.85);backdrop-filter:blur(20px)}
[data-style=bento] .band{background:linear-gradient(120deg,#e7ebff,#dff5f6)}[data-style=skeuo] .band{background:linear-gradient(#e9ecf1,#cfd5de);border-bottom:2px solid #8b93a1}
[data-style=brutal] .band::before,[data-style=flat] .band::before{display:none}
/* v1.9 themed backdrops */
.band{position:relative}.bgart{position:absolute;inset:0;width:100%;height:100%;color:var(--indigo);opacity:.4;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 15%,#000 75%);mask-image:linear-gradient(90deg,transparent 15%,#000 75%)}
.band::before{display:none}.c2{color:var(--teal)}.env{color:var(--indigo);opacity:.3;pointer-events:none}
@media(prefers-reduced-motion:reduce){.bgart *,.env *{animation:none}}
/* v2.0 playable chips, platform links */
.floaters{position:absolute;inset:0;z-index:2;pointer-events:none}.floaters span{pointer-events:auto;cursor:grab;touch-action:none;user-select:none}
.floaters span.drag{animation:none;cursor:grabbing;box-shadow:0 10px 24px rgba(59,76,202,.35);z-index:3}.floaters span:focus-visible{outline:3px solid var(--teal)}
.floaters span:nth-child(9){left:36%;top:60%;animation-delay:-1.5s}.floaters span:nth-child(10){left:84%;top:38%;animation-delay:-2.2s}.floaters span:nth-child(11){left:64%;top:66%;animation-delay:-3.2s}.floaters span:nth-child(12){left:50%;top:90%;animation-delay:-4.4s}
.hint{position:absolute;right:1.25rem;bottom:.6rem;margin:0;font-size:.8rem;color:var(--muted);z-index:2}
.chips a{border:1px solid var(--indigo);background:#fff;border-radius:999px;padding:.2rem .8rem;font-size:.85rem;color:var(--indigo);text-decoration:none;font-weight:600;transition:transform .2s,box-shadow .2s}.chips a:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(59,76,202,.25)}
@media(max-width:820px){.hint{display:none}}
/* v2.1 immersive themed headers */
b.bx{color:#2b86d1;font-weight:inherit}.bgart{opacity:.6}
:where(body[data-svc]) .band{background:linear-gradient(115deg,color-mix(in srgb,var(--indigo) 16%,#fff),color-mix(in srgb,var(--teal) 16%,#fff));padding:4.2rem 0 3.2rem}
body[data-svc] .band .wrap{text-shadow:0 1px 0 rgba(255,255,255,.6)}
/* v2.2 3D layer: depth scenes, tilt cards, 3D hero stack */
.scene{perspective:1000px}.deep{position:relative;transform-style:preserve-3d;transition:transform .18s ease-out;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
.deep svg{width:100%;height:auto;display:block}.envl{position:absolute;inset:0;height:100%;opacity:.4;color:var(--indigo);transform:translateZ(-60px) scale(1.18);pointer-events:none}.deep .main{position:relative;transform:translateZ(0)}
.ctl{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}.ctl button{font:600 .85rem system-ui,sans-serif;border:1px solid var(--indigo);background:transparent;color:var(--indigo);border-radius:999px;padding:.3rem .9rem;cursor:pointer}.ctl button:hover,.ctl button:focus-visible{background:var(--indigo);color:#fff}
.cap{margin:.5rem 0 0;color:var(--muted);font-size:.9rem;min-height:1.4rem}.scene.ix .logs{display:none}
.card{transform-style:preserve-3d}.card:hover{transform:perspective(900px) translateZ(16px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 22px 40px rgba(20,33,61,.22)}.js .rv.in.card:hover{transform:perspective(900px) translateZ(16px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.bgart{transition:transform .25s ease-out;transform:translate3d(calc(var(--mx,0)*-18px),calc(var(--my,0)*-12px),0) scale(1.08)}
.stage3d{position:relative;height:420px;perspective:1200px;cursor:grab;touch-action:none;user-select:none}.stage3d.drag{cursor:grabbing}
.rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(58deg + var(--rx,0deg))) rotateZ(var(--rz,-32deg))}
.spin{position:absolute;inset:0;transform-style:preserve-3d;animation:spinz 70s linear infinite}.stage3d:hover .spin,.stage3d.drag .spin{animation-play-state:paused}
.slab{position:absolute;left:50%;top:50%;width:280px;height:165px;margin:-82px 0 0 -140px;border-radius:20px;display:flex;flex-direction:column;justify-content:center;padding:0 1.3rem;color:#fff;text-decoration:none;transform:translateZ(calc(var(--i,0)*var(--gap,34px) - 85px));transition:transform .5s,filter .25s,box-shadow .25s;box-shadow:0 24px 44px rgba(20,33,61,.3),inset 0 0 0 1px rgba(255,255,255,.45)}
.slab::after{content:"";position:absolute;right:16px;top:16px;width:10px;height:10px;border-radius:50%;background:#7affc8;box-shadow:0 0 10px #7affc8;animation:pulse 2s ease-in-out infinite}
.stage3d:hover .slab{--gap:66px}.slab:hover,.slab:focus-visible{filter:brightness(1.18);box-shadow:0 0 44px rgba(14,154,167,.8),inset 0 0 0 2px #fff;outline:none}.slab b{font-size:1.3rem}.slab span{font-size:.85rem;opacity:.92}
.slab:nth-child(1){--i:0;background:linear-gradient(135deg,#b45309,#475569)}.slab:nth-child(2){--i:1;background:linear-gradient(135deg,#00796b,#3949ab)}.slab:nth-child(3){--i:2;background:linear-gradient(135deg,#1e6fd9,#00a6b8)}
.slab:nth-child(4){--i:3;background:linear-gradient(135deg,#0f2f4a,#0891b2)}.slab:nth-child(5){--i:4;background:linear-gradient(135deg,#6d28d9,#0891b2)}.slab:nth-child(6){--i:5;background:linear-gradient(135deg,#be185d,#c2410c)}
.tip{position:absolute;left:0;right:0;bottom:-6px;text-align:center;margin:0;font-size:.8rem;color:var(--muted)}@keyframes spinz{to{transform:rotateZ(360deg)}}
.hero .floaters{z-index:3}
@media(max-width:820px){.stage3d{height:330px}.slab{width:215px;height:130px;margin:-65px 0 0 -107px}}
@media(prefers-reduced-motion:reduce){.spin{animation:none}.deep,.bgart,.slab{transition:none}}
/* v2.3 3D selector rings (fallback = plain grid without JS) */
.hero-grid{grid-template-columns:1fr}.hero .lead{max-width:62ch}
.ring3d{margin:.5rem 0 1rem}.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.9rem}
.tabs button{font:600 .9rem system-ui,sans-serif;border:2px solid var(--indigo);background:#fff;color:var(--indigo);border-radius:999px;padding:.4rem 1.1rem;cursor:pointer}.tabs button[aria-selected=true]{background:var(--indigo);color:#fff}
.ring3d .stage{position:relative}.ring3d .rings .ring{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-bottom:1rem}
.c3{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem;border-radius:16px;border:1px solid var(--line);background:linear-gradient(160deg,#fff,var(--mist));color:var(--ink);text-decoration:none;box-shadow:0 10px 24px rgba(20,33,61,.12)}.c3 b{font-size:1.05rem}.c3 span{color:var(--muted);font-size:.9rem}
.ring3d .nav,.ring3d .sel{display:none}.ring3d .tip{display:none}
.on3d .stage{height:340px;perspective:1100px;overflow:hidden;cursor:grab;touch-action:pan-y;border-radius:18px;background:radial-gradient(ellipse at 50% 85%,color-mix(in srgb,var(--indigo) 18%,transparent),transparent 65%),linear-gradient(180deg,var(--mist),#fff);user-select:none}.on3d .stage.drag{cursor:grabbing}
.on3d .rings{position:absolute;inset:0;transform-style:preserve-3d}.on3d .rings .ring{display:none;position:absolute;left:50%;top:50%;width:0;height:0;margin:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.on3d .rings .ring.on{display:block}
.on3d .c3{position:absolute;width:210px;height:240px;left:-105px;top:-120px;backface-visibility:hidden;transition:opacity .4s,box-shadow .3s}
.on3d .c3.front{box-shadow:0 0 0 3px var(--indigo),0 26px 44px color-mix(in srgb,var(--indigo) 40%,transparent)}.on3d .c3 .ico{width:42px;height:42px}
.on3d .nav{display:grid;place-items:center;position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:50%;border:2px solid var(--indigo);background:#fff;color:var(--indigo);font-size:1.6rem;cursor:pointer;z-index:2}.on3d .nav.prev{left:10px}.on3d .nav.next{right:10px}.on3d .nav:hover{background:var(--indigo);color:#fff}
.on3d .sel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding:1rem 1.3rem;border:1px solid var(--line);border-radius:14px;background:#fff}.on3d .sel h3{margin:0 0 .2rem}.on3d .sel p{margin:0;color:var(--muted);max-width:70ch}
.on3d .tip{display:block;text-align:center;color:var(--muted);font-size:.85rem;margin:.6rem 0 0}
@media(max-width:820px){.on3d .stage{height:300px}.on3d .c3{width:176px;height:220px;left:-88px;top:-110px}}
@media(prefers-reduced-motion:reduce){.on3d .rings .ring,.on3d .c3{transition:none}}
/* v2.4 galaxy (canvas 3D) */
.ongal .stage,.ongal .tip{display:none}.ongal .gtip.tip{display:block;text-align:center;color:var(--muted);font-size:.85rem;margin:.6rem 0 0}
.gstage{position:relative;height:440px;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#243b92 0%,#0c1533 62%,#070b1f 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 24px 50px rgba(20,33,61,.28)}
.gstage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}.gstage canvas.g3gl{cursor:default;pointer-events:none}.gstage canvas:active{cursor:grabbing}.gstage canvas:focus-visible{outline:3px solid #22d3ee;outline-offset:-3px}
.ongal .sel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding:1rem 1.3rem;border:1px solid var(--line);border-radius:14px;background:#fff}.ongal .sel h3{margin:0 0 .2rem}.ongal .sel p{margin:0;color:var(--muted);max-width:70ch}
@media(max-width:820px){.gstage{height:360px}}
/* v2.5 game layer: effects, transitions, HUD */
.fxc{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}
.card,.btn,button,.chips a,nav#nav a{touch-action:manipulation}.card{touch-action:pan-y;user-select:none;-webkit-user-select:none}.card p,.card li,.card h2,.card h3{user-select:text}
@keyframes enter{from{opacity:0;transform:perspective(900px) rotateX(5deg) translateY(16px)}to{opacity:1;transform:none}}
@keyframes leave{to{opacity:0;transform:perspective(900px) rotateY(-9deg) scale(.95) translateZ(-40px)}}
main{animation:enter .55s cubic-bezier(.2,.8,.2,1) both}html.leaving main{animation:leave .23s ease-in both}
input,textarea,select{transition:box-shadow .2s,transform .2s}input:focus,textarea:focus,select:focus{outline:none;box-shadow:0 0 0 3px var(--teal),0 10px 24px rgba(20,33,61,.18);transform:translateY(-2px)}
.hud{position:fixed;left:14px;bottom:14px;z-index:60;display:flex;align-items:center;gap:.5rem;padding:.35rem .8rem;border-radius:999px;background:rgba(10,16,40,.88);color:#e8ecff;font:600 .78rem ui-monospace,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.25),inset 0 0 0 1px rgba(120,180,255,.35)}
.hud[hidden]{display:none}.hud i{display:block;width:70px;height:6px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}.hud u{display:block;height:100%;width:0;background:linear-gradient(90deg,#22d3ee,#a78bfa);transition:width .4s}
.fxbtn{position:fixed;right:14px;bottom:14px;z-index:60;padding:.35rem .8rem;border-radius:999px;border:1px solid rgba(120,180,255,.5);background:rgba(10,16,40,.88);color:#e8ecff;font:600 .78rem ui-monospace,Menlo,Consolas,monospace;cursor:pointer}
.toast{position:fixed;left:50%;bottom:64px;transform:translate(-50%,20px);z-index:61;padding:.6rem 1.1rem;border-radius:12px;background:rgba(10,16,40,.94);color:#fff;font:600 .9rem system-ui,sans-serif;box-shadow:0 14px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(34,211,238,.5);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}.toast.on{opacity:1;transform:translate(-50%,0)}
.card.dragging{z-index:5;cursor:grabbing}
html.nofx main{animation:none}html.nofx .fxc{display:none}
@media(max-width:820px){.hud{display:none}.fxbtn{bottom:10px}}
@media(prefers-reduced-motion:reduce){main{animation:none}html.leaving main{animation:none}}
/* v2.7 detail panels (opened from the 3D map) */
.dtls{margin-top:1.4rem;perspective:1400px}
.dtl{margin:0 0 1.4rem;scroll-margin-top:90px}
.dtl-in{position:relative;overflow:hidden;padding:1.6rem 1.7rem;border-radius:22px;border:1px solid var(--line);background:linear-gradient(160deg,#fff 0%,var(--mist) 100%);box-shadow:0 2px 0 rgba(255,255,255,.9) inset,0 1px 0 var(--line),0 18px 40px rgba(20,33,61,.14),0 40px 80px rgba(59,76,202,.12);transform-style:preserve-3d;transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out}
.dtl-in::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--indigo),#22d3ee,#a78bfa)}
.dtl-in::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--indigo) 22%,transparent),transparent 70%);pointer-events:none}
.dtl-k{margin:.2rem 0 .3rem;font:700 .75rem ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo)}
.dtl h3{margin:0 0 .6rem;font-size:1.6rem;outline:none}
.dtl-lead{margin:0 0 1.1rem;font-size:1.05rem;max-width:72ch}
.dtl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-bottom:1.1rem}
.dtl-pt{padding:1rem 1.1rem;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:0 10px 22px rgba(20,33,61,.09);transform-style:preserve-3d}
.dtl-pt b{display:block;margin-bottom:.3rem;color:var(--indigo)}.dtl-pt p{margin:0;color:var(--muted)}
.dtl-ex{margin:0 0 1.1rem;padding:.9rem 1.1rem;border-left:4px solid #22d3ee;border-radius:0 12px 12px 0;background:color-mix(in srgb,#22d3ee 9%,#fff);font-style:italic}
.dtl-links{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1rem}
.dtl-nav{display:none;gap:.6rem;flex-wrap:wrap;margin:0;padding-top:.9rem;border-top:1px solid var(--line)}
.ongal .dtl-nav{display:flex}
.dtl-nav button{font:600 .9rem system-ui,sans-serif;border:2px solid var(--indigo);background:#fff;color:var(--indigo);border-radius:999px;padding:.45rem 1.1rem;cursor:pointer}
.dtl-nav button:hover,.dtl-nav button:focus-visible{background:var(--indigo);color:#fff}
.dtl-nav button[data-a=map]{margin:0 auto}
.ongal .dtl.enter .dtl-in{animation:dtlIn .75s cubic-bezier(.2,.8,.2,1) backwards}
.ongal .dtl.enter .dtl-pt{animation:dtlPt .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:.18s}.ongal .dtl.enter .dtl-pt:nth-child(2){animation-delay:.27s}.ongal .dtl.enter .dtl-pt:nth-child(3){animation-delay:.36s}.ongal .dtl.enter .dtl-pt:nth-child(4){animation-delay:.45s}
@keyframes dtlIn{from{opacity:0;transform:rotateX(-16deg) translateY(36px) translateZ(-120px) scale(.95)}to{opacity:1;transform:none}}
@keyframes dtlPt{from{opacity:0;transform:translateZ(-60px) translateY(22px) rotateY(10deg)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ongal .dtl.enter .dtl-in,.ongal .dtl.enter .dtl-pt{animation:none}}

/* v2.8 Net-Monit version control */
.vctl{margin:0 0 1rem}.vctl label{display:block;font-weight:700;margin-bottom:.3rem}
.vctl select{width:100%;max-width:340px;padding:.6rem .8rem;border:2px solid var(--indigo);border-radius:12px;background:#fff;font:600 1rem system-ui,sans-serif;color:var(--ink)}
.vpanel{padding:1rem 1.1rem;margin-bottom:1rem;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 10px 22px rgba(20,33,61,.09)}.vpanel h3{margin:0 0 .4rem}.vpanel p{margin:.4rem 0}
.vbadge{display:inline-block;margin-left:.4rem;padding:.1rem .6rem;border-radius:999px;font:700 .72rem system-ui,sans-serif;background:var(--mist);color:var(--muted);vertical-align:middle}.vbadge.on{background:var(--indigo);color:#fff}
.tablewrap{overflow-x:auto}.vtable{border-collapse:collapse;width:100%;background:#fff;border:1px solid var(--line);border-radius:12px}.vtable th,.vtable td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--line)}.vtable thead th{background:var(--mist)}

/* v2.9 quick-select chips, service/product stacks, 3D flow */
.gchips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 0}
.gchips button{font:600 .85rem system-ui,sans-serif;padding:.4rem .9rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 4px 10px rgba(20,33,61,.08);transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.gchips button:hover{transform:translateY(-2px);box-shadow:0 10px 18px rgba(59,76,202,.2)}
.gchips button[aria-pressed=true]{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.sv .dtl-in{padding-bottom:1.4rem}
.sp{margin:0 0 1.1rem;padding:1rem 1.2rem;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:0 10px 22px rgba(20,33,61,.08)}
.sp h4{margin:0 0 .5rem;font:700 .8rem ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo)}
.sp p{margin:.3rem 0}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-bottom:1.1rem}.sp-grid>.sp{margin:0}
.sp.why{border-left:5px solid var(--indigo)}.sp.warn{border-left:5px solid #e0803a;background:color-mix(in srgb,#e0803a 6%,#fff)}.sp.warn h4{color:#b4571a}
.sp.spec{background:linear-gradient(160deg,#fff,color-mix(in srgb,var(--indigo) 7%,#fff))}
.sp-scene .scene{margin-top:.4rem}
.sp .chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.sp .chips b{margin-right:.3rem;font-size:.85rem;color:var(--muted)}
.pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}.pills li{padding:.35rem .9rem;border-radius:999px;background:color-mix(in srgb,#22d3ee 14%,#fff);border:1px solid color-mix(in srgb,#22d3ee 40%,#fff);font-weight:600}
/* 3D flow: numbered cards joined by arrows, a signal travels along them */
.flow,.dtl-grid{counter-reset:f;perspective:1000px}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.6rem}
.flow li,.dtl-grid .dtl-pt{counter-increment:f;position:relative;padding:1.1rem 1rem 1rem;border-radius:14px;border:1px solid var(--line);background:linear-gradient(160deg,#fff,var(--mist));box-shadow:0 14px 26px rgba(20,33,61,.12),0 2px 0 rgba(255,255,255,.9) inset;transform:rotateY(-7deg) translateZ(0);transform-origin:right center;transition:transform .25s,box-shadow .25s}
.flow li:hover,.dtl-grid .dtl-pt:hover{transform:rotateY(0) translateZ(18px) translateY(-4px);box-shadow:0 22px 36px rgba(59,76,202,.22)}
.flow li::before,.dtl-grid .dtl-pt::before{content:counter(f);position:absolute;top:-14px;left:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:800 .85rem system-ui,sans-serif;color:#fff;background:linear-gradient(145deg,#6f7df0,var(--indigo));box-shadow:0 6px 12px rgba(59,76,202,.4)}
.flow li:not(:last-child)::after,.dtl-grid .dtl-pt:not(:last-child)::after{content:"";position:absolute;right:-1.35rem;top:50%;width:1.1rem;height:1.1rem;border-top:3px solid var(--indigo);border-right:3px solid var(--indigo);transform:translateY(-50%) rotate(45deg) scale(.7);opacity:.55}
.ongal .dtl.enter .flow li::before,.ongal .dtl.enter .dtl-grid .dtl-pt::before{animation:sig 2.4s ease-in-out infinite}
.ongal .dtl.enter .flow li:nth-child(2)::before,.ongal .dtl.enter .dtl-grid .dtl-pt:nth-child(2)::before{animation-delay:.5s}
.ongal .dtl.enter .flow li:nth-child(3)::before,.ongal .dtl.enter .dtl-grid .dtl-pt:nth-child(3)::before{animation-delay:1s}
.ongal .dtl.enter .flow li:nth-child(4)::before,.ongal .dtl.enter .dtl-grid .dtl-pt:nth-child(4)::before{animation-delay:1.5s}
@keyframes sig{0%,70%,100%{box-shadow:0 6px 12px rgba(59,76,202,.4);transform:none}35%{box-shadow:0 0 0 7px rgba(34,211,238,.35),0 6px 16px rgba(34,211,238,.7);transform:scale(1.18)}}
@media(max-width:700px){.flow li:not(:last-child)::after,.dtl-grid .dtl-pt:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-1.35rem;transform:translateX(-50%) rotate(135deg) scale(.7)}.flow li,.dtl-grid .dtl-pt{transform:none}}
@media(prefers-reduced-motion:reduce){.flow li,.dtl-grid .dtl-pt{transform:none;transition:none}.ongal .dtl.enter .flow li::before,.ongal .dtl.enter .dtl-grid .dtl-pt::before{animation:none}}
.js .dtl .rv{opacity:1;transform:none}

/* v3.0.0: 3D flow stage (WebGL2). The .f3list step cards remain as the fallback and as the text alternative. */
.sp-flow{margin-top:1.1rem}
.f3stage{position:relative;height:clamp(300px,44vw,440px);border-radius:18px;overflow:hidden;background:#0a1330;border:1px solid rgba(120,160,255,.28);box-shadow:0 22px 44px -26px rgba(10,20,60,.6);margin:.4rem 0 0}
.f3stage::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 55%,rgba(60,90,200,.18),transparent 70%);pointer-events:none}
.f3stage:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.f3gl{position:absolute;inset:0}.f3gl canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.f3gl .f3h{cursor:grab;touch-action:pan-y}.f3gl .f3h:active{cursor:grabbing}
.f3bar{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:.75rem 0 .45rem}
.f3bar button{font:600 .9rem system-ui,sans-serif;border:2px solid var(--indigo);background:#fff;color:var(--indigo);border-radius:999px;padding:.4rem .95rem;cursor:pointer;min-height:40px}
.f3bar button:hover,.f3bar button:focus-visible,.f3bar button[aria-pressed=true]{background:var(--indigo);color:#fff}
.f3bar .f3b{min-width:44px}.f3chips{display:flex;gap:.3rem;flex-wrap:wrap}.f3chips .f3c{padding:.4rem .75rem;min-width:44px}
.f3cap{margin:.2rem 0 .3rem;color:var(--ink);max-width:78ch;min-height:3.4em}.f3cap b{color:var(--indigo)}
[data-style=cyber] .f3cap b,[data-style=oled] .f3cap b{color:var(--teal)}
.f3list.live{margin-top:.8rem}.f3list.live li{cursor:pointer}.f3list.live li.on{outline:2px solid var(--teal);outline-offset:3px;border-radius:16px}
@media(max-width:820px){.f3stage{height:clamp(340px,112vw,470px)}.f3cap{min-height:5.2em}.f3chips{order:-1;flex:1 1 100%}.f3bar .f3b{min-height:44px}}
body[data-svc="cloud-solutions"]{--indigo:#1e6fd9;--indigo-d:#1e6fd9;--teal:#00a6b8}
body[data-svc="cloud-desktop"]{--indigo:#0f6cbd;--indigo-d:#0f6cbd;--teal:#2b88d8}
body[data-svc="managed-it"]{--indigo:#3949ab;--indigo-d:#3949ab;--teal:#1f9d8f}
body[data-svc="network-solutions"]{--indigo:#00796b;--indigo-d:#00796b;--teal:#3949ab}
body[data-svc="disaster-recovery"]{--indigo:#b45309;--indigo-d:#b45309;--teal:#475569}
body[data-svc="support-consulting"]{--indigo:#334155;--indigo-d:#334155;--teal:#0e9aa7}
body[data-svc="web-applications"]{--indigo:#6d28d9;--indigo-d:#6d28d9;--teal:#0284c7}
body[data-svc="mobile-applications"]{--indigo:#be185d;--indigo-d:#be185d;--teal:#6d28d9}
body[data-svc="web-design-development"]{--indigo:#c2410c;--indigo-d:#c2410c;--teal:#be185d}
body[data-svc="seo"]{--indigo:#15803d;--indigo-d:#15803d;--teal:#1d4ed8}
body[data-svc="digital-marketing"]{--indigo:#be123c;--indigo-d:#be123c;--teal:#b45309}
body[data-svc="ecommerce"]{--indigo:#be185d;--indigo-d:#be185d;--teal:#b45309}
body[data-svc="hosting-maintenance"]{--indigo:#0369a1;--indigo-d:#0369a1;--teal:#15803d}
body[data-svc="ai-solutions"]{--indigo:#6d28d9;--indigo-d:#6d28d9;--teal:#0891b2}.band[data-h="0"]::before{filter:hue-rotate(0deg)}
.band[data-h="1"]::before{filter:hue-rotate(22deg)}
.band[data-h="2"]::before{filter:hue-rotate(44deg)}
.band[data-h="3"]::before{filter:hue-rotate(66deg)}
.band[data-h="4"]::before{filter:hue-rotate(88deg)}
.band[data-h="5"]::before{filter:hue-rotate(110deg)}
.band[data-h="6"]::before{filter:hue-rotate(132deg)}
.band[data-h="7"]::before{filter:hue-rotate(154deg)}
.band[data-h="8"]::before{filter:hue-rotate(176deg)}
.band[data-h="9"]::before{filter:hue-rotate(198deg)}
.band[data-h="10"]::before{filter:hue-rotate(220deg)}
.band[data-h="11"]::before{filter:hue-rotate(242deg)}
.band[data-h="12"]::before{filter:hue-rotate(264deg)}
.band[data-h="13"]::before{filter:hue-rotate(286deg)}
.band[data-h="14"]::before{filter:hue-rotate(308deg)}
.band[data-h="15"]::before{filter:hue-rotate(330deg)}