
:root{
  --bg:#061113; --bg2:#0a1719; --surface:rgba(10,28,31,.72); --surface2:rgba(15,38,41,.78);
  --surface-solid:#102326; --text:#effffe; --muted:#91aaa8; --line:rgba(153,255,244,.12);
  --accent:#20e5cc; --accent2:#68f5e2; --brand:#20e5cc; --good:#50d890; --warn:#ffc861;
  --danger:#ff6b79; --info:#69b9ff; --hold:#ff9a63; --radius:24px; --radius-sm:14px;
  --shadow:0 24px 80px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.055);
  --wallpaper:
    radial-gradient(circle at 82% 18%, rgba(32,229,204,.18), transparent 30%),
    radial-gradient(circle at 8% 92%, rgba(71,121,255,.14), transparent 32%),
    linear-gradient(135deg,#061113,#091c1f 48%,#041012);
  --glass:blur(24px) saturate(118%); --ambient:.9;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);min-height:100vh;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:var(--wallpaper);background-size:cover;background-position:center;z-index:-3;transition:background .5s ease}
body:after{content:"";position:fixed;inset:0;background:rgba(2,9,11,calc(.74 - var(--ambient)*.22));z-index:-2;pointer-events:none;transition:background .35s}
a{color:inherit;text-decoration:none}button,input,select{font:inherit}
::selection{background:rgba(32,229,204,.25)}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.055;z-index:-1;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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.shell{display:grid;grid-template-columns:88px 250px minmax(0,1fr);min-height:100vh}
.icon-rail{position:sticky;top:0;height:100vh;padding:18px 14px;border-right:1px solid var(--line);background:rgba(3,12,14,.72);backdrop-filter:var(--glass);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:20}
.mark{width:52px;height:52px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(0,0,0,.26));box-shadow:0 10px 24px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.07);display:grid;place-items:center;margin-bottom:10px}
.mark img{width:32px;height:32px;object-fit:contain}.rail-btn{width:48px;height:48px;border:0;border-radius:16px;color:#aec4c2;background:transparent;display:grid;place-items:center;cursor:pointer;transition:.22s}
.rail-btn:hover,.rail-btn.active{background:rgba(255,255,255,.075);color:white;box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)}.rail-btn.active{color:var(--accent);background:rgba(32,229,204,.08)}
.rail-spacer{flex:1}.side{position:sticky;top:0;height:100vh;padding:22px 16px 22px;border-right:1px solid var(--line);background:rgba(4,15,17,.60);backdrop-filter:var(--glass);overflow:auto;z-index:15}
.brand{display:flex;align-items:center;gap:12px;padding:8px 8px 22px}.brand img{width:150px;max-height:38px;object-fit:contain;object-position:left center}.eyebrow{color:var(--accent);letter-spacing:.16em;text-transform:uppercase;font-size:11px;font-weight:800}
.nav-section{margin:17px 7px 7px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#5f7776;font-weight:800}
.nav-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;color:#91aaa8;font-size:13px;margin:3px 0;transition:.2s}
.nav-link:hover{background:rgba(255,255,255,.055);color:#eafffd}.nav-link.active{background:linear-gradient(90deg,rgba(32,229,204,.12),rgba(32,229,204,.025));color:var(--accent);box-shadow:inset 0 0 0 1px rgba(32,229,204,.1)}
.nav-dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8}.main{min-width:0}.topbar{position:sticky;top:0;z-index:14;display:flex;gap:12px;align-items:center;padding:16px 24px;background:rgba(5,16,18,.48);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.search{flex:1;max-width:650px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);height:44px;border-radius:16px;color:#dcefed;padding:0 16px;outline:none}
.search:focus{border-color:rgba(32,229,204,.4);box-shadow:0 0 0 3px rgba(32,229,204,.08)}
.top-pill{height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.055);color:#d2e2e0;display:flex;align-items:center;gap:8px;white-space:nowrap}
.avatar{width:31px;height:31px;border-radius:50%;background:linear-gradient(145deg,#1de2ca,#103f45);display:grid;place-items:center;color:#021210;font-weight:900}
.content{padding:28px clamp(18px,3vw,42px) 70px;max-width:1680px;margin:auto}.hero{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:34px;min-height:360px;background:linear-gradient(135deg,rgba(7,25,28,.84),rgba(6,19,21,.58));box-shadow:var(--shadow);padding:clamp(30px,5vw,68px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:34px;align-items:end}
.hero:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 180deg,transparent,rgba(32,229,204,.08),transparent 35%,rgba(70,110,255,.08),transparent 70%);animation:spinSlow 26s linear infinite;pointer-events:none}
.hero>*{position:relative}.hero h1{font-size:clamp(42px,6vw,88px);line-height:.92;letter-spacing:-.055em;margin:14px 0 18px;max-width:960px}.hero p{font-size:clamp(16px,1.6vw,22px);line-height:1.6;color:#9db8b6;max-width:850px;margin:0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{border:0;border-radius:14px;padding:13px 17px;font-weight:750;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:var(--accent);color:#001411;box-shadow:0 12px 32px rgba(32,229,204,.18)}.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn-ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:#e7f7f5}.btn-ghost:hover{background:rgba(255,255,255,.095)}
.hero-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.kpi{padding:20px;border-radius:22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.075);backdrop-filter:blur(18px);box-shadow:inset 0 1px rgba(255,255,255,.04)}.kpi b{display:block;font-size:30px;letter-spacing:-.04em}.kpi span{font-size:12px;color:#8ca5a3}
.section{margin-top:42px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:16px}.section h2{margin:0;font-size:clamp(26px,3vw,42px);letter-spacing:-.04em}.section-sub{color:#829d9b;max-width:760px;line-height:1.6}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.card{grid-column:span 4;position:relative;padding:22px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);background:var(--surface);backdrop-filter:var(--glass);box-shadow:0 18px 48px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.04);overflow:hidden;transition:.22s}
.card:hover{transform:translateY(-3px);border-color:rgba(32,229,204,.18)}.card.wide{grid-column:span 8}.card.full{grid-column:1/-1}.card.half{grid-column:span 6}.card.small{grid-column:span 3}
.card h3{margin:0 0 7px;font-size:18px}.card p{margin:0;color:#87a19f;line-height:1.55;font-size:13px}.meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}.tag,.status{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.06);font-size:11px;color:#a8bfbd}.tag.accent{background:rgba(32,229,204,.09);color:var(--accent);border-color:rgba(32,229,204,.12)}
.metric{font-size:36px;font-weight:800;letter-spacing:-.05em}.label{font-size:11px;color:#789391;text-transform:uppercase;letter-spacing:.11em;font-weight:800}.muted{color:#799493}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative}.time-step{padding:18px 16px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);position:relative}.time-step:after{content:"→";position:absolute;right:-10px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:22px;animation:nudge 1.4s ease-in-out infinite}.time-step:last-child:after{display:none}.time-step b{display:block;font-size:16px}.time-step span{display:block;color:#789391;margin-top:5px;font-size:12px}
.progress{height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#62d2ff);border-radius:inherit;transform-origin:left;animation:grow 1.2s ease both}
.table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.07);border-radius:20px}.table{width:100%;border-collapse:collapse;min-width:700px}.table th,.table td{text-align:left;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.055);font-size:13px}.table th{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#64817f;background:rgba(255,255,255,.025)}.table tr:hover td{background:rgba(255,255,255,.025)}
.flow{display:flex;align-items:center;gap:9px;overflow:auto;padding:5px}.flow-node{min-width:130px;padding:16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);text-align:center}.flow-arrow{color:var(--accent);font-size:20px;animation:nudge 1.3s ease-in-out infinite}
.heatmap{display:grid;grid-template-columns:repeat(8,minmax(30px,1fr));gap:6px}.bin{aspect-ratio:1;border-radius:8px;background:hsl(calc(165 + var(--v)*25),65%,calc(18% + var(--v)*25%));opacity:.9;display:grid;place-items:center;font-size:9px;color:rgba(255,255,255,.6)}
.map{position:relative;min-height:420px;border-radius:28px;overflow:hidden;background:
 radial-gradient(circle at 15% 65%,rgba(38,232,204,.16),transparent 25%),
 radial-gradient(circle at 72% 27%,rgba(80,140,255,.17),transparent 22%),
 linear-gradient(145deg,#122528,#0b1518 55%,#162328);border:1px solid rgba(255,255,255,.08)}
.map:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:34px 34px;transform:perspective(500px) rotateX(55deg) scale(1.8);transform-origin:center 80%;opacity:.55}
.route{position:absolute;left:12%;top:54%;width:72%;height:2px;background:linear-gradient(90deg,var(--accent),#7de8ff,#f2d272);transform:rotate(-12deg);box-shadow:0 0 16px rgba(32,229,204,.4)}.node{position:absolute;width:14px;height:14px;border:3px solid #061113;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(32,229,204,.14),0 0 18px rgba(32,229,204,.45)}
.chart{width:100%;height:230px}.chart path.line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:700;stroke-dashoffset:700;animation:draw 1.8s .2s forwards}.chart path.area{fill:url(#g);opacity:.35}.barset{display:flex;align-items:end;height:160px;gap:9px;padding-top:20px}.bar{flex:1;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,var(--accent),rgba(32,229,204,.18));height:var(--h);animation:growY .8s ease both;transform-origin:bottom}
.alert{padding:14px;border-radius:15px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.04);display:flex;align-items:flex-start;gap:11px;margin:8px 0}.alert-dot{width:9px;height:9px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 5px rgba(255,200,97,.08);margin-top:4px}.alert.danger .alert-dot{background:var(--danger)}.alert.good .alert-dot{background:var(--good)}
.module-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0 24px}.module-tab{padding:9px 12px;border-radius:12px;color:#86a09e;border:1px solid transparent;font-size:12px}.module-tab:hover,.module-tab.active{color:#eafffd;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.06)}.module-tab.active{color:var(--accent);background:rgba(32,229,204,.08)}
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}.page-title h1{margin:5px 0 0;font-size:clamp(34px,4vw,60px);letter-spacing:-.05em}.crumb{font-size:12px;color:#668481}.crumb a:hover{color:var(--accent)}
.filterbar{display:flex;gap:8px;flex-wrap:wrap}.filter{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.04);color:#91aaa8;padding:8px 11px;border-radius:12px;cursor:pointer}.filter.active,.filter:hover{color:var(--accent);background:rgba(32,229,204,.07)}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.price-card{padding:24px;border-radius:26px;border:1px solid rgba(255,255,255,.08);background:rgba(8,24,27,.76);position:relative}.price-card.featured{border-color:rgba(32,229,204,.26);box-shadow:0 0 0 1px rgba(32,229,204,.08),0 20px 60px rgba(0,0,0,.25)}.price{font-size:38px;font-weight:850;letter-spacing:-.05em;margin:14px 0}.price small{font-size:12px;color:#74918f;font-weight:500}.price-list{padding:0;list-style:none;color:#91aaa8;font-size:13px;line-height:1.8}.price-list li:before{content:"✓";color:var(--accent);margin-right:8px}
.check{display:flex;gap:12px;padding:13px;border-radius:15px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);margin:7px 0;cursor:pointer}.check input{accent-color:var(--accent);width:18px;height:18px}.check.done{opacity:.58}.check.done strong{text-decoration:line-through}
.drawer{position:fixed;right:18px;bottom:18px;width:min(390px,calc(100vw - 36px));max-height:80vh;overflow:auto;padding:18px;border-radius:26px;background:rgba(7,20,22,.94);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 90px rgba(0,0,0,.48);backdrop-filter:blur(26px);z-index:80;transform:translateY(calc(100% + 40px));transition:.3s}.drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:center}.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:15px 0}.preset{aspect-ratio:1.15;border-radius:14px;border:1px solid rgba(255,255,255,.12);cursor:pointer}.preset[data-p="quadratic"]{background:linear-gradient(135deg,#061113,#0d4240)}.preset[data-p="aurora"]{background:linear-gradient(135deg,#12142b,#274d51,#8c586f)}.preset[data-p="sand"]{background:linear-gradient(135deg,#281d18,#8e6f56,#d1b88e)}.preset[data-p="storm"]{background:linear-gradient(135deg,#101a25,#45606a,#1e313c)}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}.modal-back.open{display:flex}.modal{width:min(680px,100%);padding:25px;border-radius:28px;background:#0a1a1d;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 100px rgba(0,0,0,.55)}.modal h2{margin-top:0}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.toast-stack{position:fixed;right:18px;top:76px;z-index:120;display:grid;gap:8px}.toast{padding:13px 15px;border-radius:15px;background:rgba(10,30,32,.96);border:1px solid rgba(32,229,204,.16);box-shadow:0 18px 50px rgba(0,0,0,.28);animation:toastIn .3s ease}
.palette{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.58);display:none;padding:12vh 20px 20px}.palette.open{display:block}.palette-box{width:min(760px,100%);margin:auto;border-radius:26px;padding:15px;background:#091719;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 100px rgba(0,0,0,.6)}.palette input{width:100%;height:52px;border:0;border-bottom:1px solid rgba(255,255,255,.08);background:transparent;color:white;font-size:17px;outline:0;padding:0 10px}.palette-results{max-height:50vh;overflow:auto;padding-top:8px}.pal-item{display:flex;justify-content:space-between;gap:10px;padding:12px;border-radius:13px;color:#9ab3b1}.pal-item:hover{background:rgba(255,255,255,.055);color:white}.pal-item small{color:#5e7b79}
.loader-screen{position:fixed;inset:0;z-index:999;background:#061113;display:grid;place-items:center;transition:opacity .6s,visibility .6s}.loader-screen.hide{opacity:0;visibility:hidden}.loader-inner{text-align:center}.gear-wrap{width:230px;height:170px;position:relative;margin:auto}.gear{position:absolute;border:4px solid var(--accent);border-radius:18px;box-shadow:0 0 28px rgba(32,229,204,.11),inset 0 0 20px rgba(32,229,204,.08);animation:gear 4s linear infinite}.gear:nth-child(even){animation-direction:reverse}.gear.g1{width:70px;height:70px;left:80px;top:45px}.gear.g2{width:48px;height:48px;left:29px;top:62px}.gear.g3{width:42px;height:42px;right:34px;top:67px}.gear.g4{width:34px;height:34px;left:97px;top:5px}.gear.g5{width:30px;height:30px;left:101px;bottom:4px}.gear:before,.gear:after{content:"";position:absolute;background:#061113;border:3px solid var(--accent);border-radius:8px}.gear:before{width:15px;height:15px;left:50%;top:-12px;transform:translateX(-50%)}.gear:after{width:15px;height:15px;left:50%;bottom:-12px;transform:translateX(-50%)}.loader-title{font-size:26px;font-weight:900;letter-spacing:.14em}.loader-title span{color:var(--accent)}.loader-sub{color:#5d7b78;margin-top:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.footer{margin-top:60px;padding:30px 0;border-top:1px solid var(--line);color:#607d7a;font-size:12px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@keyframes gear{to{transform:rotate(360deg)}}@keyframes spinSlow{to{transform:rotate(360deg)}}@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}@keyframes grow{from{transform:scaleX(0)}}@keyframes growY{from{transform:scaleY(.03)}}@keyframes draw{to{stroke-dashoffset:0}}@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:1150px){.shell{grid-template-columns:76px minmax(0,1fr)}.side{display:none}.card{grid-column:span 6}.card.small{grid-column:span 6}.pricing-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}}
@media(max-width:720px){.shell{display:block}.icon-rail{position:fixed;bottom:0;top:auto;height:68px;width:100%;flex-direction:row;padding:9px 12px;border-right:0;border-top:1px solid var(--line);justify-content:space-around}.mark,.rail-spacer,.icon-rail .desktop-only{display:none}.rail-btn{width:44px;height:44px}.topbar{padding:12px 14px}.top-pill.hide-mobile{display:none}.content{padding:20px 13px 94px}.hero{padding:30px 20px;min-height:500px}.hero h1{font-size:48px}.hero-kpis{grid-template-columns:1fr 1fr}.grid{gap:11px}.card,.card.wide,.card.half,.card.small{grid-column:1/-1}.timeline{grid-template-columns:1fr 1fr}.time-step:nth-child(2):after{display:none}.pricing-grid{grid-template-columns:1fr}.page-title{align-items:flex-start;flex-direction:column}.map{min-height:330px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body.focus-mode:after{background:rgba(2,9,11,.92)}body.focus-mode .card,body.focus-mode .hero{background:rgba(7,20,22,.92);backdrop-filter:none}
body.immersive-mode{--ambient:1.25}body.immersive-mode .card{background:rgba(10,28,31,.55)}
