:root { --bg:#070914; --bg2:#0b1020; --bg3: #0c1121; --s:rgba(15,20,36,.62); --s2:rgba(255,255,255,.05); --ln:rgba(220,235,255,.12); --tx:#f5f7ff; --txw:#101826; --mu:#a3aec6; --cy:#63ddff; --vi:#927bff; --gr:#66e9b1; --max:1220px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 50% 0,#111b34,#070914 40%,#05060c); color:var(--tx); font:400 16px/1.65 Manrope,system-ui,sans-serif; overflow-x:hidden; }
body.light { --bg:#edf2f8; --bg2:#f7f9fc; --bg3: #fbfdfe; --s:rgba(255,255,255,.72); --s2:rgba(10,24,45,.05); --ln:rgba(10,22,40,.13); --tx:#101826; --txw:#101826; --mu:#4f5c72; --cy:#0a8fb5; --vi:#6a4fe0; background:linear-gradient(160deg,#eef4fb,#f9fbff); }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--cy); outline-offset:3px; }
#scene { position:fixed; inset:0; width:100%; height:100%; z-index:0; transition:opacity .4s; pointer-events:auto; touch-action:none; cursor:grab; }
#scene.drag { cursor:grabbing; }
.glow { position:fixed; left:0; top:0; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%; background:radial-gradient(circle,rgba(10,143,181,.05),transparent 35%); pointer-events:none; z-index:1; }
.site-header { position:fixed; top:0; left:0; right:0; height:72px; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:0 max(20px,calc((100vw - var(--max))/2)); background:linear-gradient(180deg,rgba(5,7,14,.7),transparent); backdrop-filter:blur(12px); }
body.light .site-header { background:linear-gradient(180deg,rgba(238,244,251,.85),transparent); }
.logo { display:flex; align-items:center; gap:10px; font:700 20px "Space Grotesk"; letter-spacing:-.04em; }
.logo-core { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:linear-gradient(140deg,var(--cy),var(--vi)); color:#06101a;box-shadow:0 0 30px rgba(99,221,255,.3); }
body.light .logo-core { color:#fff; box-shadow:0 0 30px rgba(10,143,181,.3); }
.nav { display:flex; gap:30px; }
.nav a { font-size:14px; color:var(--mu); transition:.2s; }
.nav a:hover { color:var(--tx); }
.hr { display:flex; gap:10px; align-items:center; }
.mini, .hcta, .burger { border:1px solid var(--ln); background:var(--s); backdrop-filter:blur(14px); border-radius:80px; cursor:pointer; }
.mini, .burger { width:38px; height:38px; }
.hcta { padding:9px 15px; font-size:13px; font-weight:700; }
.hcta span { color:var(--cy); }
.burger { display:none; }
.scroll-ui { position:fixed; z-index:10; right:20px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:9px; color:var(--mu); font-size:11px; letter-spacing:.2em; writing-mode:vertical-rl; }
.scroll-track { height:90px; width:2px; background:var(--ln); position:relative; }
.scroll-track span { position:absolute; left:0; top:0; width:100%; height:8%; background:var(--cy); box-shadow:0 0 12px var(--cy); }
main { position:relative; z-index:2; pointer-events:none; }
main > section { pointer-events:auto; }
.kicker { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--cy); margin-bottom:16px; padding:6px 12px; border:1px solid var(--ln); border-radius:99px; background:var(--s); }
.kicker span { width:7px; height:7px; border-radius:50%; background:var(--cy); box-shadow:0 0 12px var(--cy); animation:pulse 2s infinite; }
.sol-head div h2 { color:var(--tx); }
@keyframes pulse { 50%{opacity:.3;transform:scale(.7)} }
h1, h2, h3 { font-family:"Space Grotesk"; margin:0; }
em { font-style:normal; color:transparent; background:linear-gradient(95deg,var(--cy),var(--vi),var(--cy)); background-size:200%; -webkit-background-clip:text; background-clip:text; animation:shine 6s linear infinite; }
@keyframes shine { to{background-position:200%} }
h2 { font-size:clamp(2.4rem,4.8vw,4.6rem); line-height:1.02; letter-spacing:-.055em; }
body.light .sub { color:var(--mu); font-size:16px; max-width:430px; margin:0; }
.sub { color:var(--mu); font-size:16px; max-width:430px; margin:0; }
.button { display:inline-flex; align-items:center; gap:10px; padding: 9px 15px; border-radius:80px; font-size:14px; font-weight:700; cursor:pointer; transition:.25s; }
.solid { background:var(--tx); color:var(--bg); border-color:var(--tx); }
.outline { background:var(--s); border:1px solid var(--tx); }
.button:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(10,143,181,.2); }
.hero { min-height:100vh; padding:130px max(20px,calc((100vw - var(--max))/2)) 0; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; position:relative; pointer-events:none; }
.hero-copy { pointer-events:auto; }
.hero-copy>* { animation:up .9s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--d,0)*.12s); }
@keyframes up { from{opacity:0;transform:translateY(30px)} }
.hero h1 { font-size:clamp(3.2rem,6.6vw,6.4rem); line-height:.95; letter-spacing:-.065em; }
.hero-copy>p { color:var(--mu); font-size:17px; max-width:560px; margin:24px 0 0; }
.acts { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.idea { margin-top:34px; padding-left:16px; border-left:2px solid var(--cy); color:var(--mu); font-size:14px; }
.idea strong { color:var(--tx); }
.anchor { height:min(62vh,560px); pointer-events:none; }
.ticker { grid-column:1/-1; overflow:hidden; border-block:1px solid var(--ln); margin:50px calc(-1*max(20px,calc((100vw - var(--max))/2))) 0; padding:16px 0; background:var(--s); backdrop-filter:blur(10px); }
.track { display:flex; gap:44px; width:max-content; animation:mq 30s linear infinite; font:600 20px "Space Grotesk"; color:var(--mu); }
.track b { color:var(--cy); }
@keyframes mq { to{transform:translateX(-50%)} }
.section { max-width:var(--max); margin:auto; padding:120px 20px; position:relative; }
.sys-head, .sol-head, .proc-head { display:flex; justify-content:space-between; align-items:end; gap:60px; margin-bottom:44px; }
.network-wrapper { overflow: hidden; }
.network-bar { display: flex; justify-content: space-between; padding: 14px 24px; color: var(--mu); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--ln); }
.network-bar:last-child { border-bottom: none; border-top: 1px solid var(--ln); }
.network-bar b { color: var(--gr); }
#stage-2 { height: 460px; position: relative; overflow: hidden; background: radial-gradient(circle at center, rgba(10,143,181,0.06) 0%, transparent 60%), linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/40px 40px, linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/40px 40px; }
body.light #stage-2 { background: radial-gradient(circle at center, rgba(10,143,181,0.04) 0%, transparent 60%), linear-gradient(rgba(10,24,45,.03) 1px,transparent 1px) 0 0/40px 40px, linear-gradient(90deg,rgba(10,24,45,.03) 1px,transparent 1px) 0 0/40px 40px; }
.network-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; filter: drop-shadow(0 0 6px rgba(10, 143, 181, 0.3)); }
.net-wire { stroke: var(--ln); stroke-width: 2; fill: none; transition: stroke .3s; }
.net-flow { stroke: var(--cy); stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 12 35; animation: dataFlow 1.8s linear infinite; opacity: 0.9; }
@keyframes dataFlow { from { stroke-dashoffset: 47; } to { stroke-dashoffset: 0; } }
.map-node { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; background: rgba(10,16,29,.85); border: 1px solid var(--ln); backdrop-filter: blur(12px); padding: 8px 20px 8px 8px; border-radius: 100px; cursor: pointer; z-index: 2; width: auto; white-space: nowrap; transition: border-color .2s, transform .2s, box-shadow .2s; }
body.light .map-node { background: rgba(255,255,255,.95); }
.map-node:hover { border-color: var(--cy); transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 8px 25px rgba(10,143,181,.15); }
.node-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--bg2); color: var(--cy); display: grid; place-items: center; font-size: 11px; font-weight: 800; border: 1px solid var(--ln); }
.map-node div { text-align: left; }
.map-node b { display: block; font-size: 14px; line-height: 1.2; color: var(--tx); }
.map-node small { display: block; font-size: 11px; color: var(--mu); margin-top: 2px; }
.center-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: 140px; height: 140px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient(circle, var(--bg2), var(--bg)); border: 2px solid var(--cy); box-shadow: 0 0 30px rgba(10,143,181,.2), inset 0 0 15px rgba(106,79,224,.1); }
body.light .center-core { background: #fff; }
.center-core-icon { font-size: 24px; color: var(--cy); margin-bottom: 2px; animation: pulse 2s infinite; }
.center-core span { font: 700 18px "Space Grotesk"; letter-spacing: -0.02em; color: var(--tx); }
.center-core small { font-size: 10px; color: var(--mu); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }
.n1 { left: 24%; top: 22%; }
.n2 { left: 76%; top: 22%; }
.n3 { left: 14%; top: 50%; }
.n4 { left: 86%; top: 50%; }
.n5 { left: 24%; top: 78%; }
.n6 { left: 76%; top: 78%; }
#stage-2:has(.n1:hover) .net-wire.w1, #stage-2:has(.n2:hover) .net-wire.w2, #stage-2:has(.n3:hover) .net-wire.w3, #stage-2:has(.n4:hover) .net-wire.w4, #stage-2:has(.n5:hover) .net-wire.w5, #stage-2:has(.n6:hover) .net-wire.w6 { stroke: var(--vi); stroke-width: 3; }
.contrast { display:grid; grid-template-columns:1fr 48px 1fr; gap:14px; margin-top:14px; align-items:center; }
.contrast article { padding:28px; border:1px solid var(--ln); border-radius:18px; background:var(--s); backdrop-filter:blur(14px); }
.contrast .on { border-color:rgba(10,143,181,.4); }
.tag { font-size:12px; font-weight:700; color:var(--mu); letter-spacing:.05em; }
.contrast h3 { font-size:26px; margin:8px 0 20px; }
.flow { display:flex; align-items:center; gap:8px; font-size:13px; position:relative; }
.flow span { padding:9px 12px; background:var(--s2); border:1px solid var(--ln); border-radius:9px; }
.flow b { color:#ff6b7a; animation:blink 1.6s infinite; }
.on .flow b { color:var(--cy); animation:none; }
@keyframes blink { 50%{opacity:.2} }
.on .flow:after { content:""; position:absolute; left:0; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--cy); box-shadow:0 0 14px var(--cy); animation:run 2.4s linear infinite; }
@keyframes run { to{left:100%} }
.contrast p { color:var(--mu); font-size:14px; margin:20px 0 0; }
.arrow { width:44px; height:44px; border-radius:50%; border:1px solid var(--ln); display:grid; place-items:center; color:var(--cy); }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { padding:28px; min-height:260px; border:1px solid var(--ln); border-radius:18px; background-color:var(--s); backdrop-filter:blur(12px); transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .2s,border-color .3s; }
.card:hover { border-color:rgba(10,143,181,.4); }
.ico { width:46px; height:46px; display:grid; place-items:center; font-size:20px; border:1px solid var(--ln); border-radius:12px; color:var(--cy); background:var(--s2); }
.card h3 { font-size:22px; margin:44px 0 8px; }
.card p { font-size:14px; color:var(--mu); margin:0; }
.story { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; }
.sticky { position:sticky; top:120px; align-self:start; }
#clock { font:700 clamp(2.6rem,5vw,4.4rem) "Space Grotesk"; letter-spacing:-.05em; color:var(--cy); margin:30px 0 4px; transition:opacity .3s; }
#sit { color:var(--mu); max-width:470px; transition:opacity .3s; min-height:110px; }
.list { display:grid; gap:12px; }
.item { text-align:left; border:1px solid var(--ln); border-radius:16px; background:var(--s); padding:26px; cursor:pointer; transition:.3s; position:relative; overflow:hidden; }
.item.active { border-color:rgba(10,143,181,.45); transform:translateX(10px); }
.item.active:after { content:""; position:absolute; left:0; bottom:0; height:3px; background:linear-gradient(90deg,var(--cy),var(--vi)); animation:fill 5s linear; }
@keyframes fill { from{width:0}to{width:100%} }
.item span { font-size:12px; font-weight:700; color:var(--cy); }
.item strong { display:block; font:600 21px "Space Grotesk"; margin-top:10px; }
.item p { font-size:14px; color:var(--mu); margin:6px 0 0; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; position:relative; }
.steps:before { content:""; position:absolute; top:22px; left:4%; right:4%; height:2px; background:linear-gradient(90deg,var(--cy),var(--vi)); transform:scaleX(0); transform-origin:left; transition:transform 1.8s .3s; }
.steps.visible:before { transform:none; }
.step { position:relative; }
.step>span { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--bg2); border:2px solid var(--cy); font:700 14px "Space Grotesk"; color:var(--cy); margin-bottom:18px; }
.step div { padding:22px; border:1px solid var(--ln); border-radius:16px; background:var(--s); min-height:190px; }
.step h3 { font-size:24px; margin-bottom:8px; }
.step p { font-size:14px; color:var(--mu); margin:0; }
.work { display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; }
.browser { padding:14px; transform:perspective(1100px) rotateY(var(--ry,-6deg)) rotateX(var(--rx,2deg)); transition:transform .25s; }
.dots { display:flex; align-items:center; gap:6px; height:30px; font-size:12px; color:var(--mu); }
.dots i { width:8px; height:8px; border-radius:50%; background:var(--mu); opacity:.5; }
.dots b { margin-left:8px; font-weight:500; }
.page { height:380px; border:1px solid var(--ln); border-radius:10px; margin:10px 8px 6px 8px; padding:48px; background:radial-gradient(circle at 80% 35%,rgba(10,143,181,.2),transparent 30%),linear-gradient(145deg,#101626,#080b12); color:#f5f7ff; position:relative; overflow:hidden; }
.page:after { content:""; position:absolute; right:50px; top:60px; width:150px; height:150px; border-radius:50%; border:1px solid rgba(10,143,181,.5); box-shadow:0 0 60px rgba(10,143,181,.25); animation:spin 14s linear infinite; }
@keyframes spin { to{transform:rotate(360deg) scale(1.1)} }
.page small { font-size:12px; color:var(--cy); letter-spacing:.1em; }
.page h3 { font-size:32px; line-height:1.05; max-width:420px; margin-top:16px; }
.fake { margin-top:28px; display:inline-block; padding:9px 16px; border-radius:7px; background:#fff; color:#0b101b; font-size:12px; font-weight:800; }
.tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.tags span { font-size:12px; padding:7px 12px; border:1px solid var(--ln); border-radius:9px; color:var(--mu); }
.work-copy p { color:var(--mu); margin:20px 0 0; }
.final { display:grid; gap:14px; padding-bottom:80px; }
.fcard { padding:60px; min-height:380px; position:relative; overflow:hidden; background:linear-gradient(135deg,rgba(10,143,181,.09),rgba(106,79,224,.06),var(--s)); }
.fcard:before { content:""; position:absolute; width:380px; height:380px; border:1px solid rgba(10,143,181,.25); border-radius:50%; right:-100px; top:-100px; border-top-color:var(--cy); animation:spin 18s linear infinite; }
.fcard h2 { position:relative; max-width:820px; }
.pts { display:flex; gap:12px; flex-wrap:wrap; margin-top:44px; position:relative; }
.pts span { font-size:14px; padding:10px 16px; border:1px solid var(--ln); border-radius:99px; background:var(--s2); }
.cta { text-align:center; border:1px solid var(--ln); border-radius:20px; padding:80px 20px; background:radial-gradient(circle at 50% 0,rgba(10,143,181,.16),transparent 50%),var(--s); }
.cta h2 { max-width:850px; margin:0 auto; }
.cta p { margin:20px auto 28px; color:var(--mu); max-width:480px; }
.modal { display:none; position:fixed; inset:0; z-index:100; place-items:center; }
.modal.open { display:grid; }
.back { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(12px); }
.mcard { width:min(620px,calc(100% - 28px)); position:relative; padding:40px; border:1px solid var(--ln); border-radius:20px; background:var(--bg2); animation:up .4s both; }
.x { position:absolute; right:14px; top:12px; width:34px; height:34px; border-radius:9px; border:1px solid var(--ln); background:var(--s); cursor:pointer; font-size:20px; }
.mcard h2 { font-size:34px; letter-spacing:-.04em; }
.opts { display:grid; gap:10px; margin-top:26px; }
.opts button { padding:15px; text-align:left; border:1px solid var(--ln); border-radius:12px; background:var(--s); cursor:pointer; font-size:15px; transition:.2s; }
.opts button:hover { border-color:var(--cy); transform:translateX(6px); }
.rc { color:var(--mu); margin:14px 0 22px; }
.rg { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:24px; }
.rg span { padding:11px; border:1px solid var(--ln); border-radius:9px; font-size:14px; color:var(--mu); }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s,transform .8s; }
.reveal.visible { opacity:1; transform:none; }
@media (max-width:980px) { .hero { grid-template-columns:1fr; } .anchor { order:-1; height:340px; margin-top:-30px; } .grid3 { grid-template-columns:1fr 1fr; } .story, .work, .sys-head, .sol-head, .proc-head { grid-template-columns:1fr; display:grid; gap:30px; } .sticky { position:static; } .steps { grid-template-columns:1fr 1fr; } .steps:before { display:none; } .fl { justify-content:flex-start; } }
@media (max-width:720px) { .nav { display:none; position:absolute; top:72px; left:10px; right:10px; flex-direction:column; gap:0; background:var(--bg2); border:1px solid var(--ln); border-radius:14px; padding:8px; } .nav-open .nav { display:flex; } .nav a { padding:13px; } .hcta { display:none; } .burger { display:block; } .scroll-ui { display:none; } .hero { padding-top:100px; } .hero h1 { font-size:3.1rem; } .section { padding:80px 18px; } #stage-2 { height:auto; } .map-node { padding:6px 14px 6px 6px; transform:translate(-50%, -50%) scale(0.9); } .map-node:hover { transform:translate(-50%, -50%) scale(1); } .node-icon { width: 28px; height: 28px; } .center-core { width: 110px; height: 110px; } .n1 { left: 28%; top: 18%; } .n2 { left: 72%; top: 18%; } .n3 { left: 18%; top: 50%; } .n4 { left: 82%; top: 50%; } .n5 { left: 28%; top: 82%; } .n6 { left: 72%; top: 82%; } .contrast { grid-template-columns:1fr; } .arrow { margin:auto; transform:rotate(90deg); } .grid3, .steps { grid-template-columns:1fr; } .page { height:300px; padding:30px; } .page h3 { font-size:25px; } .page:after { width:90px; height:90px; } .fcard { padding:36px 22px; } footer { grid-template-columns:1fr; } .mcard { padding:30px 22px; } .mcard h2 { font-size:28px; } }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } .reveal { opacity:1; transform:none; } }
.dash-layout { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 60px; align-items: center; }
.dash-mockup { display: flex; background: var(--bg2); border: 1px solid var(--ln); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.08); min-height: 440px; transform: perspective(1000px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform 0.2s, border-color 0.3s; }
.dash-mockup:hover { border-color: rgba(10,143,181,.4); }
.dash-sidebar { width: 180px; padding: 24px 16px; border-right: 1px solid var(--ln); background: var(--s); display: flex; flex-direction: column; gap: 34px; }
.d-logo { display: flex; align-items: center; gap: 10px; font: 700 16px "Space Grotesk"; color: var(--tx); }
.d-nav { display: flex; flex-direction: column; gap: 6px; }
.d-nav a { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mu); padding: 10px 14px; border-radius: 10px; transition: 0.2s; font-weight: 500; }
.d-nav a.active, .d-nav a:hover { background: var(--s2); color: var(--tx); }
.d-nav a.active span { color: var(--cy); }
.dash-main { flex: 1; padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; background: radial-gradient(circle at top right, rgba(10,143,181,.05), transparent 40%); }
.d-header { display: flex; justify-content: space-between; align-items: flex-start; }
.d-header h4 { font: 600 18px "Space Grotesk"; margin: 0 0 4px; color: var(--tx); }
.d-header small { color: var(--mu); font-size: 12px; }
.d-filter { font-size: 11px; font-weight: 700; color: var(--tx); padding: 6px 12px; border: 1px solid var(--ln); border-radius: 6px; background: var(--s); cursor: pointer; }
.d-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.d-card { background: var(--s); border: 1px solid var(--ln); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.d-card span { font-size: 12px; color: var(--mu); margin-bottom: 8px; font-weight: 600; }
.d-card b { font: 700 22px "Space Grotesk"; color: var(--tx); line-height: 1; }
.d-card small { font-size: 10px; font-weight: 700; margin-top: 8px; }
.d-card small.up { color: var(--gr); }
.d-card small.down { color: #ff6b7a; }
.d-bottom { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; flex: 1; }
.d-head { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 16px; }
.d-head span { font-size: 13px; font-weight: 700; color: var(--tx); }
.d-head small { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: var(--s2); }
.d-chart-area { padding-bottom: 0; }
.chart-wrapper { position: relative; width: 100%; height: 120px; margin-top: auto; }
.line-chart { width: 100%; height: 100%; overflow: visible; }
.chart-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.chart-fill { opacity: 0; transition: opacity 1s 1s; }
.dash-mockup.animate .chart-line { stroke-dashoffset: 0; }
.dash-mockup.animate .chart-fill { opacity: 1; }
.chart-dots span { position: absolute; width: 8px; height: 8px; background: var(--bg2); border: 2px solid var(--cy); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.4s cubic-bezier(0.2, 2, 0.6, 1); }
.dash-mockup.animate .chart-dots span { transform: translate(-50%, -50%) scale(1); }
.dash-mockup.animate .chart-dots span:nth-child(1) { transition-delay: 0.4s; }
.dash-mockup.animate .chart-dots span:nth-child(2) { transition-delay: 0.7s; }
.dash-mockup.animate .chart-dots span:nth-child(3) { transition-delay: 1.0s; }
.dash-mockup.animate .chart-dots span:nth-child(4) { transition-delay: 1.3s; }
.dash-mockup.animate .chart-dots span:nth-child(5) { transition-delay: 1.6s; }
.d-list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.d-list li { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.d-list .icon { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.d-list span { color: var(--mu); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-list b { color: var(--tx); font-family: "Space Grotesk"; }
.dash-copy h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-top: 10px; }
.dash-copy p { color: var(--mu); font-size: 16px; margin: 16px 0 24px; max-width: 480px; }
.check-list { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 14px; }
.check-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--tx); font-weight: 500; }
.check-list span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(10,143,181,.15); color: var(--cy); font-size: 11px; border: 1px solid rgba(10,143,181,.3); }
@media(max-width: 1080px) { .dash-layout { grid-template-columns: 1fr; } .dash-sidebar { display: none; } }
@media(max-width: 600px) { .d-stats { grid-template-columns: 1fr 1fr; } .d-bottom { grid-template-columns: 1fr; } }
.reveal.eff-blur { transform: translateY(20px) scale(0.95); filter: blur(12px); transition: opacity 1s, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1s; }
.reveal.eff-blur.visible { filter: blur(0); }
.reveal.eff-left { transform: translateX(-80px); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.eff-right { transform: translateX(80px); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.eff-3d { transform: perspective(1200px) rotateX(-25deg) translateY(40px); transform-origin: center bottom; transition: opacity 0.9s, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.template-track { margin-top: 50px; position: relative; overflow: hidden; margin-inline: calc(-1 * max(20px, calc((100vw - var(--max)) / 2))); padding: 20px 0; }
.template-track::before, .template-track::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.template-track::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.template-track::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.marquee { display: flex; overflow: hidden; user-select: none; gap: 20px; padding-top: 10px; }
.mt-14 { margin-top: 20px; }
.marquee-content { display: flex; flex-shrink: 0; gap: 20px; min-width: 100%; justify-content: space-around; }
.scroll-left { animation: scrollLeft 35s linear infinite; }
.scroll-right { animation: scrollRight 35s linear infinite; }
.marquee:hover .marquee-content { animation-play-state: paused; }
@keyframes scrollLeft { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 20px)); } }
@keyframes scrollRight { from { transform: translateX(calc(-100% - 20px)); } to { transform: translateX(0); } }
.t-card { width: 290px; height: 200px; background: var(--s); border: 1px solid var(--ln); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; transition: border-color 0.3s, transform 0.3s; cursor: pointer; }
.t-card:hover { border-color: var(--cy); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(10,143,181,.1); }
.t-browser { padding: 12px 14px; border-bottom: 1px solid var(--ln); display: flex; gap: 6px; background: var(--s2); }
.t-browser i { width: 8px; height: 8px; border-radius: 50%; background: var(--mu); opacity: 0.5; }
.t-body { flex: 1; padding: 18px; background: radial-gradient(circle at top right, rgba(10,143,181,.06), transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.t-body h4 { font-family: "Space Grotesk"; margin: 0; font-size: 17px; color: var(--tx); }
.t-body small { color: var(--mu); font-size: 12px; }
.t-skeleton { width: 100%; height: 50px; background: var(--bg2); border-radius: 6px; margin-bottom: 12px; border: 1px solid var(--ln); }
.t-skeleton.hero-box { height: 65px; background: linear-gradient(135deg, rgba(10,143,181,.1), rgba(106,79,224,.1)); border-color: rgba(10,143,181,.2); }
body::before { content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: url("data:image/svg+xml,... noiseFilter..."); opacity: 0.03; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.card { padding: 36px 30px; min-height: 250px; border: 1px solid var(--ln); border-radius: 18px; background-color: var(--s); backdrop-filter: blur(12px); position: relative; overflow: hidden; transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: transform 0.2s, border-color 0.3s; }
.card h3 { font-size: 22px; margin: 0 0 14px 0; position: relative; z-index: 2; }
.card p { font-size: 15px; color: var(--mu); margin: 0; line-height: 1.6; position: relative; z-index: 2; }
.bg-icon { position: absolute; right: -25px; bottom: -30px; font-size: 150px; color: var(--tx); opacity: 0.03; z-index: 1; transform: rotate(-15deg); transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; }
body.light .bg-icon { opacity: 0.05; }
.card:hover { border-color: rgba(10,143,181,.4); }
.card:hover .bg-icon { color: var(--cy); opacity: 0.1; transform: rotate(0deg) scale(1.05); }
@media (max-width: 720px) { .grid3 { grid-template-columns: 1fr; } .card { min-height: 200px; padding: 28px 24px; } .bg-icon { font-size: 120px; right: -15px; bottom: -20px; } }
.browser .page { height:auto; aspect-ratio:16/10; padding:0; border-radius:12px; background:var(--bg2); }
.browser .page:after { display:none; }
.browser .page img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.browser { background: #fcfdff; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; }
.project-feedback { margin-top: 35px; padding: 24px; background: linear-gradient(145deg, var(--s2), transparent); border-left: 3px solid var(--cy); border-radius: 0 16px 16px 0; position: relative; transition: transform 0.3s ease, background 0.3s ease; }
.project-feedback:hover { background: var(--s); transform: translateX(4px); }
.quote-icon { color: var(--cy); font-size: 18px; opacity: 0.6; margin-bottom: 12px; }
.project-feedback blockquote { margin: 0 0 16px 0; font-size: 14.5px; line-height: 1.6; color: var(--tx); font-style: italic; opacity: 0.9; }
.project-feedback .client-info strong { display: block; font-size: 15px; color: var(--tx); font-family: "Space Grotesk", sans-serif; letter-spacing: -0.02em; }
.project-feedback .client-info span { font-size: 12px; color: var(--cy); font-weight: 600; }
.project-feedback blockquote.collapsed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.read-more-btn { background: none; border: none; color: var(--cy); font-size: 13px; font-weight: 700; padding: 0; margin-bottom: 16px; cursor: pointer; transition: opacity 0.2s; }
.read-more-btn:hover { opacity: 0.7; text-decoration: underline; }
.site-header { width: 90vw; margin: 20px 5vw; border-radius: 20px; box-shadow:0 0 30px rgba(255, 255, 255, 0.603); }
body.light .site-header { background: linear-gradient(310deg, #ffffffad, #ffffff); box-shadow:0 0 30px rgba(10,143,181,.3); }
.section-container { background: var(--bg3); pointer-events: auto; }
.t-img-box { width: 100%; height: 110px; overflow: hidden; border-bottom: 1px solid var(--ln); background: var(--bg2); }
.t-img-box img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.t-card:hover .t-img-box img { transform: scale(1.08); }
.t-body { flex: 1; padding: 16px 18px; background: radial-gradient(circle at top right, rgba(10,143,181,.06), transparent 60%); display: flex; flex-direction: column; justify-content: center; }
.template-bg-skeletons { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: flex; justify-content: center; align-items: center; overflow: hidden; opacity: 0.2; -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 65%); mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 65%); }
body.light .template-bg-skeletons { opacity: 0.15; }
#templates > .sys-head, #templates > .template-track, #templates > .t-cta { position: relative; z-index: 2; }
.s-head { padding: 14px 18px; border-bottom: 2px solid var(--ln); display: flex; gap: 8px; background: var(--s2); }
.s-head i { width: 10px; height: 10px; border-radius: 50%; background: var(--ln); }
.s-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.s-hero { width: 100%; height: 140px; background: var(--ln); border-radius: 8px; }
.s-nav { width: 30%; height: 20px; background: var(--ln); border-radius: 6px; margin-bottom: 20px;}
.s-box { width: 100%; height: 80px; background: var(--ln); border-radius: 8px; }
.s-lines p { height: 12px; background: var(--s2); border-radius: 4px; margin: 0 0 10px 0; width: 100%; border: 1px solid var(--ln);}
.s-lines p:last-child { width: 70%; }
.s-grid { display: flex; gap: 16px; height: 120px;}
.s-grid span { flex: 1; background: var(--s2); border: 1px solid var(--ln); border-radius: 8px; }
footer.footer { display: block !important; border-top: 1px solid var(--ln); padding: 80px 20px 30px; background: radial-gradient(circle at 50% 100%, rgba(10,143,181,.05), transparent 60%), var(--bg); position: relative; z-index: 2; width: 100%; }
footer.footer .container { max-width: var(--max); margin: auto; }
.footer-main { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1fr !important; gap: 40px; padding-bottom: 60px; align-items: start; }
.footer-brand p { max-width: 280px; color: var(--mu); font-size: 14px; margin-top: 16px; line-height: 1.7; }
.footer-column { display: flex !important; flex-direction: column !important; gap: 14px; }
.footer-column h4 { color: var(--tx); font-size: 14px; margin: 0 0 6px 0; font-family: "Space Grotesk", sans-serif; letter-spacing: 0.05em; }
.footer-column a, .footer-column span { color: var(--mu); font-size: 12px; transition: color 0.2s ease, transform 0.2s ease; width: max-content; text-decoration: none; }
.footer-column a:hover { color: var(--cy); transform: translateX(5px); }
.social-icons { display: flex !important; flex-direction: row !important; gap: 16px; margin-top: 8px; }
.social-icons a { color: var(--mu); font-size: 18px; transition: all 0.2s ease; }
.social-icons a:hover { color: var(--cy); transform: translateY(-4px); }
.footer-bottom { padding-top: 24px; border-top: 1px solid var(--ln); display: flex !important; justify-content: space-between !important; align-items: center; color: var(--mu); font-size: 9px; width: 100%; }
@media (max-width: 980px) { .footer-main { grid-template-columns: 1fr 1fr !important; gap: 50px; } }
@media (max-width: 600px) { .footer-main { grid-template-columns: 1fr !important; gap: 40px; } .footer-bottom { flex-direction: column; gap: 15px; text-align: center; } }
.scroll-top-btn { position: fixed; bottom: 30px; right: 30px; width: 45px; height: 45px; border-radius: 50%; background: var(--s); backdrop-filter: blur(12px); color: var(--cy); border: 1px solid var(--ln); display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; box-shadow: 0 10px 20px rgba(0,0,0,0.2); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; z-index: 999; }
.scroll-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--bg2); border-color: var(--cy); transform: translateY(-4px); }
#toast-container { position: fixed; bottom: 30px; right: 30px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--s); backdrop-filter: blur(20px); border: 1px solid var(--ln); border-left: 4px solid var(--cy); border-radius: 10px; padding: 14px 20px; display: flex; align-items: center; gap: 12px; color: var(--tx); font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,0.3); opacity: 0; transform: translateX(-100%); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.toast.show { opacity: 1; transform: translateX(0); }
.toast i { color: var(--cy); font-size: 20px; }
.mcard .x { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 0 !important; padding-bottom: 2px !important; }
#stage-2 { position: relative; width: 100%; padding: 40px 20px; background: var(--bg); border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); }
.fd-body { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; position: relative; }
.fd-col { position: relative; z-index: 2; }
.col-center { display: flex; flex-direction: column; align-items: center; }
.col-head { font-size: 11px; font-weight: 700; color: var(--mu); letter-spacing: 1px; margin-bottom: 30px; text-align: center; }
.fd-col:first-child .col-head { text-align: left; }
.fd-col:last-child .col-head { text-align: right; }
.dot-green { width: 8px; height: 8px; background: #10b981; border-radius: 50%; box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
.dot-blue { width: 8px; height: 8px; background: var(--cy); border-radius: 50%; box-shadow: 0 0 0 3px rgba(10,143,181,0.2); }
.pill { padding: 2px 10px; border: 1px solid var(--ln); border-radius: 20px; background: var(--s2); color: var(--tx); }
.flow-line { position: absolute; top: 55%; height: 1px; background: var(--ln); z-index: 1; }
.left-line { left: 30%; width: 8%; }
.right-line { right: 30%; width: 8%; }
.flow-laser { height: 2px; width: 0%; background: var(--cy); transform: translateY(-0.5px); transition: width 1s linear; }
.customer-box { background: #ffffff66; border: 1px solid var(--ln); border-radius: 12px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.cb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.avatar { width: 32px; height: 32px; background: var(--bg); color: var(--tx); border: 1px solid var(--ln); border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.cb-info { flex: 1; }
.cb-info strong { display: block; font-size: 14px; color: var(--tx); }
.cb-info span { font-size: 11px; color: var(--mu); }
.cb-chat { background: var(--bg); border: 1px solid var(--ln); padding: 12px; border-radius: 8px; font-size: 12px; color: var(--tx); margin-bottom: 20px; line-height: 1.5; }
.customer-box button { width: 100%; background: black; color: #fff; border: none; border-radius: 6px; padding: 10px; font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.customer-box button:disabled { background: var(--ln); color: var(--mu); cursor: not-allowed; }
.core-rings-wrapper { position: relative; width: 240px; height: 240px; display: grid; place-items: center; }
.core-glow { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle, rgba(10,143,181,0.08) 0%, transparent 65%); z-index: 0; transition: 0.3s ease; }
.core-rings-wrapper.active .core-glow { background: radial-gradient(circle, rgba(10,143,181,0.15) 0%, transparent 70%); }
.ring { position: absolute; border-radius: 50%; transition: all 0.5s; z-index: 1; }
.ring-outer { width: 100%; height: 100%; border: 1px solid rgba(10,143,181,0.15); }
.ring-inner { width: 78%; height: 78%; border: 1px dashed rgba(10,143,181,0.3); }
.core-rings-wrapper.active .ring-inner { border-color: var(--cy); animation: spinRing 5s linear infinite; }
.core-rings-wrapper.active .ring-outer { border-color: rgba(10,143,181,0.4); }
@keyframes spinRing { to { transform: rotate(360deg); } }
.core-content { display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; text-align: center; }
.core-logo { width: 44px; height: 44px; background: #111827; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 8px 16px rgba(0,0,0,0.15); transition: transform 0.3s ease; }
.core-rings-wrapper.active .core-logo { transform: scale(1.05); }
.core-title { font-size: 18px; color: var(--tx); margin-bottom: 6px; }
.core-status { font-size: 11px; color: var(--mu); margin-bottom: 20px; transition: 0.3s; }
.core-steps { font-size: 8px; color: #9ca3af; letter-spacing: 1px; }
.business-stack { display: flex; flex-direction: column; gap: 10px; }
.bs-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg); border: 1px solid var(--ln); border-radius: 10px; opacity: 0.5; transition: all 0.4s ease; }
.bs-card.completed { opacity: 1; border-color: rgba(16,185,129,0.4); box-shadow: 0 5px 15px rgba(16,185,129,0.1); }
.bs-card .icon { width: 28px; height: 28px; background: var(--s2); border: 1px solid var(--ln); color: var(--tx); border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
.bs-info { flex: 1; }
.bs-info strong { display: block; font-size: 12px; color: var(--tx); margin-bottom: 2px; }
.bs-info span { display: block; font-size: 10px; color: var(--mu); }
.bs-card .check { color: #10b981; font-size: 12px; opacity: 0; transform: scale(0); transition: 0.4s; }
.bs-card.completed .check { opacity: 1; transform: scale(1); }
@media(max-width: 900px) { .fd-body { grid-template-columns: 1fr; padding: 20px 10px; gap: 40px; } .flow-line { display: none; } .fd-col:first-child .col-head, .fd-col:last-child .col-head { text-align: center; } }