@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }
:root { --ink:#e8f0ff; --muted:#9eafc9; --blue:#5b9cff; --blue-2:#2563d8; --navy:#071225; --panel:#0d1d36; --line:rgba(143,178,230,.18); --orange:#f59e0b; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--navy); color:var(--ink); font-family:'DM Sans',sans-serif; }
a { color:inherit; }
.landing-shell { max-width:1280px; margin:auto; padding:0 42px; overflow:hidden; }
.landing-nav { height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.landing-brand { display:flex; align-items:center; gap:10px; text-decoration:none; font:700 17px 'Manrope',sans-serif; letter-spacing:.2px; }
.landing-brand img { width:42px; height:42px; }
.landing-brand strong { color:var(--blue); }
.landing-nav nav, .landing-footer nav { display:flex; align-items:center; gap:26px; }
.landing-nav nav a, .landing-footer a { color:var(--muted); text-decoration:none; font-size:13px; font-weight:600; transition:color .2s; }
.landing-nav nav a:hover, .landing-footer a:hover { color:var(--ink); }
.nav-login { padding:10px 15px; border:1px solid rgba(91,156,255,.4); border-radius:8px; color:var(--ink)!important; background:rgba(91,156,255,.08); }
.eyebrow { display:inline-flex; align-items:center; gap:7px; color:#8cbcff; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; }
.landing-hero { min-height:650px; display:grid; grid-template-columns: minmax(0, .88fr) minmax(400px, 1.12fr); align-items:center; gap:58px; position:relative; }
.landing-hero::before { content:''; position:absolute; width:520px; height:520px; right:-120px; top:20px; background:radial-gradient(circle,rgba(37,99,216,.27),transparent 68%); pointer-events:none; }
.hero-copy { position:relative; z-index:1; padding:55px 0; }
.hero-copy h1 { max-width:650px; margin:20px 0 22px; font:800 clamp(42px,5.6vw,76px)/1.03 'Manrope',sans-serif; letter-spacing:-2.5px; }
.hero-copy h1 em { color:var(--blue); font-style:normal; }
.hero-lead { max-width:570px; color:var(--muted); font-size:17px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; margin-top:32px; }
.button { display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius:8px; font-weight:700; font-size:14px; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-2)); box-shadow:0 12px 28px rgba(37,99,216,.3); }
.text-link { color:var(--ink); font-size:13px; text-decoration:none; font-weight:600; }
.text-link i { color:var(--blue); margin-left:5px; }
.hero-proof { display:flex; align-items:center; gap:8px; color:#a9bddc; font-size:12px; margin-top:28px; }
.hero-proof i { color:#57d39b; }
.hero-visual { min-height:445px; position:relative; display:flex; align-items:center; justify-content:center; }
.visual-grid { position:absolute; inset:35px 0; background-image:linear-gradient(rgba(116,157,219,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(116,157,219,.09) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent); }
.dashboard-card { position:relative; z-index:1; width:min(430px,85%); padding:25px; border:1px solid rgba(150,190,255,.24); border-radius:15px; background:linear-gradient(145deg,rgba(19,45,79,.93),rgba(8,23,44,.94)); box-shadow:0 28px 70px rgba(0,0,0,.34); }
.dashboard-top, .dashboard-legend { display:flex; justify-content:space-between; align-items:center; color:#a8bad5; font-size:12px; }
.live-dot { color:#69d6a3; font-size:11px; }.stock-total { display:flex; align-items:baseline; gap:10px; margin:30px 0 22px; }.stock-total strong { font:800 48px 'Manrope'; letter-spacing:-2px; }.stock-total span { color:#90a6c5; font-size:12px; }.stock-bars { height:135px; display:flex; align-items:flex-end; gap:13px; padding:0 8px 15px; border-bottom:1px solid var(--line); }.stock-bars span { width:100%; height:var(--bar); border-radius:5px 5px 2px 2px; background:linear-gradient(to top,#2563d8,#76b0ff); opacity:.9; }.stock-bars span:nth-child(4),.stock-bars span:nth-child(6) { background:linear-gradient(to top,#c97812,#ffc861); }.dashboard-legend { justify-content:flex-start; gap:18px; margin-top:16px; }.dashboard-legend i { width:7px; height:7px; display:inline-block; border-radius:50%; margin-right:5px; }.legend-blue { background:var(--blue); }.legend-orange { background:var(--orange); }
.floating-card { position:absolute; z-index:2; display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid rgba(150,190,255,.22); border-radius:10px; background:#102845; box-shadow:0 15px 35px rgba(0,0,0,.28); }.floating-card i { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:rgba(87,211,155,.14); color:#62dca5; }.floating-card b,.floating-card small { display:block; }.floating-card b { font-size:11px; }.floating-card small { color:#91a9c8; font-size:10px; margin-top:3px; }.floating-entry { top:75px; left:-5px; }.floating-alert { right:-8px; bottom:65px; }.floating-alert i { color:#f7bc54; background:rgba(245,158,11,.14); }
.section-intro { text-align:center; padding:70px 0 35px; border-top:1px solid var(--line); }.section-intro h2,.resource-heading h2,.landing-cta h2 { max-width:650px; margin:14px auto 10px; font:700 clamp(27px,3vw,40px)/1.15 'Manrope'; letter-spacing:-1px; }.section-intro p,.resource-heading p { color:var(--muted); margin:0; font-size:15px; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; padding-bottom:100px; }.step-card { padding:25px; border:1px solid var(--line); border-radius:12px; background:rgba(13,29,54,.62); }.step-featured { background:linear-gradient(145deg,rgba(29,75,140,.65),rgba(13,29,54,.8)); border-color:rgba(91,156,255,.38); }.step-number { color:#7189aa; font:700 11px 'Manrope'; letter-spacing:1px; }.step-card > i { display:block; color:var(--blue); font-size:25px; margin:27px 0 17px; }.step-card h3 { margin:0 0 8px; font:700 17px 'Manrope'; }.step-card p { color:var(--muted); font-size:13px; line-height:1.6; margin:0; }
.resources-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:75px; padding:80px 0; border-top:1px solid var(--line); }.resource-heading h2 { margin-left:0; }.resource-heading p { line-height:1.65; }.resource-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.resource-list > div { display:flex; align-items:flex-start; gap:13px; padding:18px; border:1px solid var(--line); border-radius:10px; background:rgba(13,29,54,.48); }.resource-list i { color:var(--blue); font-size:20px; }.resource-list b,.resource-list small { display:block; }.resource-list b { font-size:13px; margin-bottom:5px; }.resource-list small { color:var(--muted); font-size:11px; line-height:1.45; }
.audience-section { padding:75px 0 85px; border-top:1px solid var(--line); }.compact-intro { padding:0 0 30px; border:0; }.audience-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.audience-grid article { padding:22px 18px; border:1px solid var(--line); border-radius:10px; background:rgba(13,29,54,.48); }.audience-grid i { color:var(--blue); font-size:22px; }.audience-grid h3 { margin:18px 0 7px; font:700 15px 'Manrope'; }.audience-grid p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.operation-section { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:70px; padding:80px 0; border-top:1px solid var(--line); }.operation-copy h2 { max-width:510px; margin:14px 0; font:700 clamp(27px,3vw,40px)/1.15 'Manrope'; letter-spacing:-1px; }.operation-copy > p { max-width:510px; color:var(--muted); font-size:14px; line-height:1.7; }.check-list { display:grid; gap:10px; padding:0; margin:25px 0 0; list-style:none; }.check-list li { color:#b5c7e0; font-size:13px; }.check-list i { color:#57d39b; margin-right:8px; }.operation-flow { display:flex; align-items:center; justify-content:center; gap:14px; min-height:240px; padding:28px 18px; border:1px solid rgba(91,156,255,.28); border-radius:14px; background:linear-gradient(145deg,rgba(20,61,115,.58),rgba(13,29,54,.7)); }.operation-flow > div { display:flex; flex-direction:column; align-items:center; text-align:center; }.operation-flow span { color:#7293c0; font:700 10px 'Manrope'; }.operation-flow div > i { display:grid; place-items:center; width:58px; height:58px; margin:12px 0; border-radius:50%; background:rgba(91,156,255,.14); color:var(--blue); font-size:23px; border:1px solid rgba(91,156,255,.35); }.operation-flow b { font-size:13px; }.operation-flow small { margin-top:5px; color:var(--muted); font-size:10px; }.flow-arrow { color:#6689b8; font-size:17px; }
.faq-section { padding:70px 0 85px; border-top:1px solid var(--line); }.faq-list { max-width:820px; margin:auto; display:grid; gap:10px; }.faq-list details { padding:17px 19px; border:1px solid var(--line); border-radius:9px; background:rgba(13,29,54,.48); }.faq-list summary { cursor:pointer; color:var(--ink); font:700 14px 'Manrope'; list-style:none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary::before { content:'+'; color:var(--blue); margin-right:10px; font-size:18px; }.faq-list details[open] summary::before { content:'−'; }.faq-list p { margin:11px 0 0 25px; color:var(--muted); font-size:13px; line-height:1.6; }
.landing-cta { display:flex; align-items:center; justify-content:space-between; gap:25px; margin:35px 0 80px; padding:35px 40px; border:1px solid rgba(91,156,255,.32); border-radius:14px; background:linear-gradient(105deg,rgba(20,61,115,.75),rgba(13,29,54,.78)); }.landing-cta h2 { margin:12px 0 0; font-size:28px; }.landing-cta .button { flex-shrink:0; }.landing-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0 32px; border-top:1px solid var(--line); color:#7e93b1; font-size:12px; }
.pain-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--line); }.pain-strip > div { display:flex; align-items:center; gap:13px; padding:19px 22px; background:#0b1b32; }.pain-strip i { color:#f5b84b; font-size:20px; }.pain-strip b,.pain-strip small { display:block; }.pain-strip b { font:700 13px 'Manrope'; }.pain-strip small { color:var(--muted); font-size:11px; margin-top:3px; }
.product-preview { display:grid; grid-template-columns:.7fr 1.3fr; align-items:center; gap:65px; padding:105px 0 95px; border-bottom:1px solid var(--line); }.preview-copy h2 { max-width:430px; margin:15px 0; font:700 clamp(28px,3vw,43px)/1.12 'Manrope'; letter-spacing:-1px; }.preview-copy p { max-width:430px; color:var(--muted); font-size:14px; line-height:1.7; margin-bottom:24px; }.product-window { position:relative; overflow:visible; border:1px solid rgba(117,165,232,.35); border-radius:12px; background:#0b1730; box-shadow:0 28px 70px rgba(0,0,0,.32); transform:perspective(1200px) rotateY(-4deg); }.window-bar { display:flex; align-items:center; gap:12px; height:38px; padding:0 13px; border-bottom:1px solid rgba(143,178,230,.13); color:#a3b7d3; font-size:10px; }.window-dots { display:flex; gap:4px; }.window-dots i { width:6px; height:6px; border-radius:50%; background:#476488; }.window-status { margin-left:auto; color:#64d6a2; }.window-status i { display:inline-block; width:5px; height:5px; margin-right:4px; border-radius:50%; background:#64d6a2; }.window-body { display:flex; min-height:245px; }.window-sidebar { display:flex; flex-direction:column; align-items:center; gap:18px; width:43px; padding:15px 0; border-right:1px solid rgba(143,178,230,.13); }.window-sidebar strong { color:#70a7ff; font-size:12px; margin-bottom:4px; }.window-sidebar span { width:15px; height:4px; border-radius:3px; background:#334d70; }.window-sidebar .active { background:#5f9eff; box-shadow:0 0 10px rgba(91,156,255,.7); }.window-content { flex:1; padding:18px; }.window-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }.window-heading small { display:block; color:#73a9ff; font-size:7px; letter-spacing:1px; }.window-heading b { display:block; margin-top:4px; font:700 18px 'Manrope'; }.window-heading em { padding:5px 8px; border:1px solid rgba(91,156,255,.3); border-radius:5px; color:#9bbbe8; font-size:8px; font-style:normal; }.window-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.window-metrics > div { padding:10px; border:1px solid rgba(91,156,255,.2); border-radius:7px; background:rgba(31,65,118,.25); }.window-metrics i { display:block; color:#5f9eff; font-size:13px; margin-bottom:8px; }.window-metrics strong,.window-metrics b,.window-metrics small { display:block; }.window-metrics strong { color:#a9bddb; font-size:8px; }.window-metrics b { margin:4px 0; font:700 17px 'Manrope'; }.window-metrics small { color:#7189aa; font-size:7px; }.window-metrics .metric-warning { border-color:rgba(245,158,11,.25); }.window-metrics .metric-warning i { color:#f5b84b; }.window-chart { margin-top:12px; padding:10px; border:1px solid rgba(91,156,255,.15); border-radius:7px; }.chart-title { display:flex; justify-content:space-between; color:#a7b9d3; font-size:9px; }.chart-title small { color:#6f86a8; }.chart-bars { display:flex; align-items:flex-end; gap:8px; height:65px; margin-top:8px; padding:0 8px; border-bottom:1px solid rgba(143,178,230,.15); }.chart-bars i { flex:1; min-height:8px; border-radius:3px 3px 0 0; background:linear-gradient(#65a5ff,#2563d8); }.preview-label { position:absolute; right:-16px; bottom:-13px; padding:6px 10px; border:1px solid rgba(91,156,255,.3); border-radius:5px; background:#122a4c; color:#94b9ea; font-size:9px; }
@media (max-width: 850px) { .landing-shell { padding:0 22px; }.landing-nav nav a:not(.nav-login) { display:none; }.landing-hero { grid-template-columns:1fr; min-height:auto; gap:20px; padding:65px 0 30px; }.hero-copy { padding:0; }.hero-visual { min-height:390px; }.product-preview,.resources-section,.operation-section { grid-template-columns:1fr; gap:35px; }.product-preview { padding:75px 0; }.product-window { transform:none; }.audience-grid { grid-template-columns:repeat(2,1fr); }.steps-grid { padding-bottom:70px; }.landing-cta { align-items:flex-start; flex-direction:column; margin-bottom:60px; } }
@media (max-width: 560px) { .landing-shell { padding:0 16px; }.landing-nav { height:74px; }.landing-brand { font-size:15px; }.nav-login { padding:9px 11px; font-size:12px!important; }.hero-copy h1 { font-size:43px; letter-spacing:-1.8px; }.hero-lead { font-size:15px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }.hero-visual { min-height:340px; }.dashboard-card { width:92%; padding:19px; }.floating-entry { left:-4px; top:34px; }.floating-alert { right:-4px; bottom:25px; }.floating-card { padding:9px; }.floating-card small { font-size:9px; }.pain-strip { grid-template-columns:1fr; }.pain-strip > div { padding:15px 17px; }.steps-grid,.resource-list,.audience-grid { grid-template-columns:1fr; }.resources-section,.audience-section,.operation-section,.faq-section { padding:65px 0; }.operation-flow { gap:6px; padding:20px 8px; }.operation-flow div > i { width:48px; height:48px; font-size:18px; }.flow-arrow { font-size:13px; }.window-content { padding:12px 9px; }.window-metrics { gap:4px; }.window-metrics > div { padding:7px 5px; }.window-metrics b { font-size:13px; }.landing-cta { padding:26px 22px; }.landing-cta h2 { font-size:24px; }.landing-footer { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.button { transition:none; } }