:root { --bg:#f8f7fb; --surface:rgba(255,255,255,.76); --surface-strong:#fff; --text:#17151e; --muted:#676171; --line:rgba(105,48,196,.15); --accent:#8c42ee; --accent-soft:rgba(140,66,238,.12); --glow:rgba(152,77,255,.5); --map-dot:rgba(133,64,222,.2); --shadow:0 18px 50px rgba(35,18,66,.1); --green:#3a9d6b; --blue:#368ce5; --yellow:#a87c08; }
:root[data-theme="dark"] { --bg:#05050a; --surface:rgba(12,10,20,.76); --surface-strong:#0d0b16; --text:#f7f4ff; --muted:#b2aabd; --line:rgba(183,117,255,.18); --accent:#b26cff; --accent-soft:rgba(178,108,255,.13); --glow:rgba(176,79,255,.72); --map-dot:rgba(180,111,255,.3); --shadow:0 20px 55px rgba(0,0,0,.35); --green:#78d69f; --blue:#61b8ff; --yellow:#e9c64e; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font-family:Arial,Helvetica,sans-serif; overflow-x:hidden; transition:background .3s,color .3s; } a { color:inherit; }
.navbar { height:82px; padding:0 clamp(22px,5vw,74px); display:flex; align-items:center; gap:28px; position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 84%,transparent); backdrop-filter:blur(16px); border-bottom:1px solid transparent; transition:.25s; }.navbar.scrolled { border-color:var(--line); box-shadow:0 8px 30px rgba(10,5,25,.08); }.brand { text-decoration:none; display:flex; align-items:center; gap:12px; font-size:22px; letter-spacing:3px; }.brand-ring { width:32px; height:32px; border-radius:50%; border:2px solid var(--text); box-shadow:0 0 8px var(--accent),0 0 20px var(--glow),inset 0 0 10px var(--accent-soft); }.nav-links { display:flex; gap:28px; margin:auto; }.nav-links a,.nav-button { font-size:12px; font-weight:700; letter-spacing:.4px; text-decoration:none; }.nav-links a { color:var(--muted); }.nav-links a:hover,.nav-links .active { color:var(--accent); }.nav-button,.primary-button { border:1px solid color-mix(in srgb,var(--accent) 46%,transparent); background:var(--accent-soft); border-radius:12px; padding:14px 18px; font-size:12px; font-weight:800; letter-spacing:.3px; text-decoration:none; transition:.2s; }.nav-button:hover,.primary-button:hover { transform:translateY(-2px); background:color-mix(in srgb,var(--accent) 22%,transparent); box-shadow:0 10px 24px var(--accent-soft); }.mobile-actions { display:none; gap:8px; }.theme-toggle,.menu-toggle { border:1px solid var(--line); background:var(--surface); color:var(--text); width:40px; height:40px; border-radius:10px; font-size:19px; cursor:pointer; }.menu-toggle { display:none; }
.hero { min-height:calc(100vh - 82px); max-width:1440px; margin:auto; padding:72px clamp(24px,6vw,88px) 54px; display:grid; grid-template-columns:minmax(300px,.82fr) minmax(520px,1.18fr); align-items:center; gap:20px; }.eyebrow,.section-kicker { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:1.3px; margin:0 0 15px; }.triangle { font-size:25px; vertical-align:-3px; }.hero h1 { max-width:620px; font-size:clamp(42px,5.2vw,76px); line-height:1.04; letter-spacing:-2.8px; margin:0; }.hero h1 span,.insight-copy h2 span { color:var(--accent); text-shadow:0 0 26px var(--accent-soft); }.hero-text { max-width:520px; color:var(--muted); font-size:18px; line-height:1.7; margin:26px 0 32px; }.hero-actions { display:flex; align-items:center; gap:22px; }.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; color:var(--text); }.primary-button span { color:var(--accent); font-size:19px; }.text-link { color:var(--muted); font-size:11px; font-weight:800; text-decoration:none; }.text-link:hover { color:var(--accent); }
.map-stage { min-height:520px; position:relative; isolation:isolate; border-radius:24px; overflow:hidden; background:radial-gradient(circle at 52% 49%,var(--accent-soft),transparent 20%),linear-gradient(135deg,color-mix(in srgb,var(--surface-strong) 80%,transparent),transparent); }.map-stage::before { content:""; position:absolute; inset:6% 2%; border-radius:50%; background:radial-gradient(ellipse,transparent 36%,var(--accent-soft) 37%,transparent 38%); opacity:.85; }.map-grid { position:absolute; inset:0; opacity:.7; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%); }.map-stage canvas,.mini-map canvas { position:absolute; inset:0; width:100%; height:100%; }.map-core { position:absolute; left:53%; top:50%; width:122px; height:122px; translate:-50% -50%; display:grid; place-items:center; border:3px solid var(--accent); border-radius:50%; color:var(--text); font-size:72px; text-shadow:0 0 14px var(--accent); box-shadow:0 0 16px var(--accent),0 0 55px var(--glow),inset 0 0 34px var(--accent-soft); z-index:2; }.core-pulse { position:absolute; inset:-30px; border:1px solid var(--accent); border-radius:50%; opacity:.7; animation:pulse 2.8s infinite; }.map-card { position:absolute; z-index:3; display:flex; align-items:center; gap:10px; min-width:148px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,var(--surface-strong) 82%,transparent); box-shadow:var(--shadow); backdrop-filter:blur(10px); }.map-card small,.map-card strong { display:block; font-size:9px; letter-spacing:.5px; }.map-card small { color:var(--muted); }.map-card strong { color:var(--text); margin-top:3px; }.card-icon { color:var(--accent); font-size:19px; }.card-flow { left:16%; top:16%; }.card-events { right:6%; top:17%; }.card-parking { left:9%; bottom:25%; }.card-congestion { right:9%; bottom:18%; }
.split-panel,.workflow,.use-cases,.insight,.cta { max-width:1280px; margin:0 auto 34px; width:calc(100% - 48px); }.split-panel { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }.panel { padding:42px clamp(26px,4vw,52px); min-height:290px; }.panel + .panel { border-left:1px solid var(--line); }.panel h2,.workflow h2,.use-cases h2 { font-size:26px; margin:0 0 16px; letter-spacing:-.8px; }.panel p:not(.section-kicker) { color:var(--muted); line-height:1.65; font-size:14px; max-width:520px; }.signal-row,.node-row { display:flex; flex-wrap:wrap; gap:13px; margin:27px 0 18px; }.signal-row span { width:60px; color:var(--accent); display:grid; text-align:center; gap:7px; font-size:21px; }.signal-row small { color:var(--muted); font-size:9px; }.node-row { justify-content:space-between; }.node-row span { color:var(--muted); font-size:10px; text-align:center; display:grid; gap:8px; }.node-row b { width:47px; height:47px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--text); font-size:16px; box-shadow:0 0 16px var(--accent-soft); }
.workflow { padding:46px 34px 34px; border-radius:18px; border:1px solid var(--line); background:var(--surface); text-align:center; }.centered { text-align:center; }.workflow h2 { font-size:24px; }.steps { list-style:none; padding:16px 0 0; margin:0; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }.steps li { position:relative; padding:0 9px; }.steps li:not(:last-child)::after { content:""; position:absolute; top:49px; left:68%; width:64%; border-top:1px dotted var(--accent); }.step-number { color:var(--accent); font-size:12px; font-weight:800; }.step-icon { width:61px; height:61px; margin:8px auto 12px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--text); font-size:27px; box-shadow:0 0 20px var(--accent-soft); }.steps h3 { color:var(--accent); font-size:11px; margin:0 0 8px; letter-spacing:.6px; }.steps p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.use-cases { padding:6px 4px; }.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.case-card { min-height:330px; padding:28px; border-radius:16px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); position:relative; overflow:hidden; }.case-card::before { content:""; position:absolute; inset:auto -20% -55% auto; width:260px; height:220px; border-radius:50%; opacity:.7; background:radial-gradient(circle,var(--accent-soft),transparent 65%); }.case-number { color:var(--accent); font-weight:800; font-size:13px; }.case-card h3 { margin:15px 0 10px; font-size:19px; }.case-card p,.case-card li { position:relative; color:var(--muted); font-size:13px; line-height:1.6; }.case-card ul { list-style:"✓  "; color:var(--green); padding-left:18px; }.case-card li { padding-left:5px; }.case-card strong { position:relative; display:block; margin-top:20px; font-size:12px; }.accent-line { color:var(--accent)!important; font-size:16px!important; margin-top:34px; }
.insight { display:grid; grid-template-columns:1.1fr .85fr .95fr; min-height:320px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }.mini-map { position:relative; min-height:320px; overflow:hidden; background:radial-gradient(circle at 50% 50%,var(--accent-soft),transparent 55%),linear-gradient(45deg,transparent 48%,var(--line) 49%,transparent 50%); }.mini-route { position:absolute; left:11%; top:58%; width:76%; height:2px; background:var(--accent); box-shadow:0 0 10px var(--accent),0 0 26px var(--accent); rotate:-18deg; }.metrics { margin:auto 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }.metrics div { display:flex; justify-content:space-between; padding:15px; border-bottom:1px solid var(--line); }.metrics span { font-size:10px; color:var(--muted); }.metrics strong { font-size:14px; }.green { color:var(--green); }.blue { color:var(--blue); }.yellow { color:var(--yellow); }.metrics p { padding:13px 15px; margin:0; color:var(--accent); font-size:10px; }.metrics p b { display:block; margin-top:7px; color:var(--muted); }.insight-copy { padding:45px 34px; }.insight-copy h2 { margin:0 0 18px; font-size:30px; line-height:1.18; letter-spacing:-1px; }.insight-copy > p:last-child { color:var(--muted); line-height:1.7; font-size:13px; }
.cta { min-height:185px; padding:32px 40px; display:grid; grid-template-columns:90px 1fr auto; gap:25px; align-items:center; border:1px solid var(--line); border-radius:18px; background:linear-gradient(100deg,var(--surface),var(--accent-soft)); box-shadow:var(--shadow); }.cta-orbit { width:66px; height:66px; border:3px solid var(--text); border-radius:50%; box-shadow:0 0 14px var(--accent),0 0 35px var(--glow); }.cta h2 { margin:0 0 8px; font-size:25px; }.cta p:not(.section-kicker) { margin:0; max-width:610px; color:var(--muted); font-size:13px; line-height:1.6; } footer { max-width:1280px; width:calc(100% - 48px); margin:0 auto; padding:28px 0 40px; display:flex; justify-content:space-between; color:var(--muted); font-size:10px; letter-spacing:1px; } footer a { text-decoration:none; color:var(--accent); font-weight:800; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s ease; }.reveal.visible { opacity:1; transform:none; } @keyframes pulse { 0%,100% { transform:scale(.88); opacity:.65; } 50% { transform:scale(1.08); opacity:.15; } }
@media (max-width:950px) { .nav-links { gap:16px; }.hero { grid-template-columns:1fr; padding-top:54px; text-align:center; }.hero-copy { display:flex; flex-direction:column; align-items:center; }.map-stage { width:min(700px,100%); min-height:470px; margin:auto; }.split-panel,.insight { grid-template-columns:1fr; }.panel + .panel { border-left:0; border-top:1px solid var(--line); }.insight > * { min-height:260px; }.metrics { margin:24px; }.steps { grid-template-columns:repeat(3,1fr); row-gap:26px; }.steps li::after { display:none; }.case-grid { grid-template-columns:1fr; }.case-card { min-height:250px; }.cta { grid-template-columns:66px 1fr; }.cta .primary-button { grid-column:2; justify-self:start; } }
@media (max-width:700px) { .navbar { height:72px; padding:0 20px; }.nav-links { position:fixed; right:0; top:72px; width:min(300px,82vw); padding:28px; flex-direction:column; align-items:center; background:var(--surface-strong); border:1px solid var(--line); border-radius:0 0 0 16px; box-shadow:var(--shadow); transform:translateX(105%); transition:transform .3s; }.nav-links.open { transform:translateX(0); }.nav-button { display:none; }.mobile-actions { display:flex; margin-left:auto; }.menu-toggle { display:inline-grid; place-items:center; }.hero { min-height:auto; padding:55px 24px 35px; }.hero h1 { font-size:clamp(42px,12vw,58px); }.hero-text { font-size:16px; }.hero-actions { flex-direction:column; gap:18px; }.map-stage { min-height:385px; }.map-core { width:96px; height:96px; font-size:55px; }.map-card { min-width:auto; padding:8px; }.map-card small { font-size:7px; }.map-card strong { font-size:8px; }.card-flow { left:5%; top:12%; }.card-events { right:3%; top:14%; }.card-parking { left:4%; bottom:16%; }.card-congestion { right:3%; bottom:11%; }.split-panel,.workflow,.use-cases,.insight,.cta { width:calc(100% - 32px); }.panel { padding:30px 24px; }.signal-row { justify-content:center; }.node-row { justify-content:center; gap:18px; }.workflow { padding:35px 18px; }.steps { grid-template-columns:repeat(2,1fr); }.steps li:last-child { grid-column:1 / -1; }.insight-copy { padding:34px 24px; }.cta { padding:30px 24px; grid-template-columns:1fr; text-align:center; }.cta-orbit { margin:auto; }.cta .primary-button { grid-column:auto; justify-self:center; } footer { width:calc(100% - 32px); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }