:root {
  color-scheme: dark;
  --bg: #070a12;
  --surface: #101625;
  --surface-soft: rgba(16,22,37,.75);
  --border: rgba(148,163,184,.14);
  --text: #f8fafc;
  --muted: #94a3b8;
  --primary: #8b5cf6;
  --primary-2: #6366f1;
  --success: #22c55e;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--text); background: var(--bg); }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background-image: linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom,black,transparent 82%); pointer-events: none; }
a { color: inherit; }
button { font: inherit; }
.page-glow { position: fixed; z-index: -1; width: 620px; height: 620px; border-radius: 50%; filter: blur(120px); opacity: .16; pointer-events: none; }
.glow-one { top: -330px; left: 12%; background: #7c3aed; }
.glow-two { top: 35%; right: -380px; background: #2563eb; }
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 40px)); min-height: 78px; margin: 0 auto; transition: .2s ease; }
.site-header.scrolled { width: 100%; padding: 0 max(20px, calc((100% - 1180px)/2)); border-bottom: 1px solid var(--border); background: rgba(7,10,18,.82); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { filter: drop-shadow(0 12px 26px rgba(124,58,237,.38)); }
.brand strong { font-size: 18px; letter-spacing: -.035em; }
.brand small { margin-left: 7px; padding: 3px 7px; border: 1px solid rgba(196,181,253,.23); border-radius: 999px; color: #ddd6fe; background: rgba(124,58,237,.14); font-size: 8px; letter-spacing: .13em; vertical-align: 3px; }
.site-header nav { display: flex; gap: 28px; }
.site-header nav a { color: var(--muted); font-size: 12px; font-weight: 650; text-decoration: none; }
.site-header nav a:hover { color: white; }
.coffee-button { padding: 10px 14px; border: 1px solid rgba(251,191,36,.2); border-radius: 12px; color: #fde68a; background: rgba(245,158,11,.07); font-size: 11px; font-weight: 750; text-decoration: none; }
.coffee-button.large { padding: 13px 18px; }
main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.hero-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; min-height: 700px; padding: 70px 0 90px; }
.announcement { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(167,139,250,.18); border-radius: 999px; color: #c4b5fd; background: rgba(139,92,246,.07); font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.announcement span { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(34,197,94,.08); }
.hero-copy h1 { margin: 20px 0 0; font-size: clamp(48px,6vw,78px); line-height: .98; letter-spacing: -.065em; }
.hero-copy h1 em { display: block; color: transparent; background: linear-gradient(120deg,#c4b5fd,#818cf8 60%,#60a5fa); -webkit-background-clip: text; background-clip: text; font-style: normal; }
.hero-copy > p { max-width: 620px; margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.primary-cta, .secondary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 13px 18px; border-radius: 12px; font-size: 12px; font-weight: 800; text-decoration: none; }
.primary-cta { color: white; background: linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow: 0 18px 38px rgba(99,102,241,.22); }
.primary-cta span { font-size: 17px; }
.secondary-cta { border: 1px solid var(--border); color: #cbd5e1; background: rgba(148,163,184,.055); }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; color: #64748b; font-size: 10px; }
.trust-row span::first-letter { color: #86efac; }
.hero-visual { position: relative; perspective: 1400px; }
.browser-frame { overflow: hidden; border: 1px solid rgba(148,163,184,.18); border-radius: 20px; background: #0d1220; box-shadow: 0 45px 110px rgba(0,0,0,.45),0 0 0 8px rgba(255,255,255,.012); transform: rotateY(-6deg) rotateX(2deg); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: #111727; }
.browser-bar > span { width: 8px; height: 8px; border-radius: 50%; background: #334155; }
.browser-bar > span:first-child { background: #fb7185; }.browser-bar > span:nth-child(2){background:#fbbf24}.browser-bar > span:nth-child(3){background:#4ade80}
.browser-bar div { flex: 1; margin-left: 8px; padding: 6px 12px; border-radius: 7px; color: #64748b; background: #080b14; font-size: 8px; text-align: center; }
.dashboard-preview { display: grid; grid-template-columns: 105px 1fr; min-height: 430px; }
.dashboard-preview aside { display: flex; flex-direction: column; gap: 12px; padding: 16px 13px; border-right: 1px solid var(--border); background: #0a0f1c; }
.mini-logo { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 9px; }
.dashboard-preview aside > i { display: block; height: 24px; border-radius: 7px; background: #121a2c; }
.dashboard-preview aside > i.active { background: rgba(139,92,246,.18); box-shadow: inset 0 0 0 1px rgba(139,92,246,.15); }
.privacy-mini { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 9px; border: 1px solid var(--border); border-radius: 9px; color: #a78bfa; font-size: 8px; }
.dashboard-preview section { padding: 30px 26px; }
.dashboard-preview section > p { margin: 0; color: #a78bfa; font-size: 7px; font-weight: 800; letter-spacing: .17em; }
.dashboard-preview h2 { margin: 7px 0 20px; font-size: 25px; letter-spacing: -.05em; }
.preview-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.preview-metrics b { padding: 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 17px; background: #11182a; }
.preview-metrics small { display: block; margin-top: 4px; color: #64748b; font-size: 6px; font-weight: 500; }
.preview-metrics .active-metric { color: #86efac; }
.preview-add { display: flex; justify-content: space-between; align-items: center; margin: 13px 0; padding: 9px 9px 9px 12px; border: 1px solid var(--border); border-radius: 9px; color: #94a3b8; background: #0a0f1c; font-size: 8px; }
.preview-add button { padding: 7px 10px; border: 0; border-radius: 7px; color: white; background: linear-gradient(135deg,var(--primary),var(--primary-2)); font-size: 7px; }
.preview-list { display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 9px; margin-top: 7px; padding: 8px; border: 1px solid rgba(148,163,184,.09); border-radius: 9px; background: rgba(7,10,18,.5); }
.preview-list > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #ddd6fe; background: rgba(139,92,246,.15); font-size: 8px; font-weight: 800; }
.preview-list strong,.preview-list small { display:block; }.preview-list strong{font-size:8px}.preview-list small{margin-top:3px;color:#64748b;font-size:6px}
.preview-list i { width: 25px; height: 14px; border-radius: 999px; background: var(--primary); }.preview-list i.off{background:#334155}
.floating-card { position: absolute; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px; background: rgba(16,22,37,.88); box-shadow: 0 25px 50px rgba(0,0,0,.35); backdrop-filter: blur(14px); }
.floating-card span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #c4b5fd; background: rgba(139,92,246,.14); }
.floating-card strong,.floating-card small{display:block}.floating-card strong{font-size:9px}.floating-card small{margin-top:3px;color:#64748b;font-size:7px}
.focus-card { left: -36px; bottom: 38px; }.privacy-card{right:-18px;top:45px}.privacy-card span{color:#86efac;background:rgba(34,197,94,.1)}
.logo-strip { padding: 30px 0 70px; border-top: 1px solid var(--border); text-align: center; }
.logo-strip p { margin: 0 0 20px; color: #64748b; font-size: 10px; text-transform: uppercase; letter-spacing: .15em; }
.logo-strip div { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px,5vw,60px); color: #64748b; font-size: 13px; font-weight: 750; }
.section { padding: 100px 0; scroll-margin-top: 70px; }
.section-heading { max-width: 720px; margin-bottom: 45px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.eyebrow { margin: 0 0 10px; color: #a78bfa; font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.section-heading h2,.privacy-copy h2,.cta-section h2 { margin: 0; font-size: clamp(34px,5vw,54px); line-height: 1.08; letter-spacing: -.055em; }
.section-heading > p:last-child,.privacy-copy > p:not(.eyebrow),.cta-section > div > p:last-child { max-width: 650px; margin: 17px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.feature-grid article { min-height: 250px; padding: 25px; border: 1px solid var(--border); border-radius: 21px; background: var(--surface-soft); box-shadow: 0 25px 65px rgba(0,0,0,.12); opacity: 0; transform: translateY(16px); transition: .5s ease; }
.feature-grid article.revealed { opacity: 1; transform: translateY(0); }
.feature-grid .feature-large { grid-column: span 2; }
.feature-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #ddd6fe; background: rgba(139,92,246,.15); font-size: 18px; }
.feature-icon.blue{color:#bfdbfe;background:rgba(59,130,246,.12)}.feature-icon.green{color:#bbf7d0;background:rgba(34,197,94,.1)}.feature-icon.amber{color:#fde68a;background:rgba(245,158,11,.1)}
.feature-grid h3 { margin: 20px 0 0; font-size: 18px; letter-spacing: -.03em; }
.feature-grid p { max-width: 540px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.purple-feature { background: radial-gradient(circle at 100% 0,rgba(124,58,237,.16),transparent 42%),var(--surface-soft)!important; }
.feature-demo { display: flex; justify-content: space-between; align-items: center; max-width: 450px; margin-top: 26px; padding: 10px 10px 10px 14px; border: 1px solid var(--border); border-radius: 11px; color: #cbd5e1; background: rgba(7,10,18,.54); font-size: 10px; }
.feature-demo button { padding: 7px 10px; border: 0; border-radius: 8px; color: #fecdd3; background: rgba(244,63,94,.11); font-size: 9px; }
.privacy-feature ul { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0 0; padding: 0; list-style: none; }.privacy-feature li{padding:7px 10px;border:1px solid rgba(34,197,94,.14);border-radius:999px;color:#bbf7d0;background:rgba(34,197,94,.06);font-size:9px}
.steps-section { border-top: 1px solid var(--border); }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.steps-grid article { position: relative; padding: 28px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-soft); opacity:0;transform:translateY(16px);transition:.5s ease; }.steps-grid article.revealed{opacity:1;transform:translateY(0)}
.steps-grid article > span { position: absolute; top: 18px; right: 20px; color: rgba(148,163,184,.2); font-size: 34px; font-weight: 850; }
.step-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #c4b5fd; background: rgba(139,92,246,.14); }
.steps-grid h3 { margin: 36px 0 0; font-size: 17px; }.steps-grid p{margin:9px 0 0;color:var(--muted);font-size:11px;line-height:1.65}
.privacy-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; opacity:0;transform:translateY(16px);transition:.55s ease; }.privacy-section.revealed{opacity:1;transform:translateY(0)}
.privacy-visual { position: relative; display: grid; place-items: center; min-height: 390px; }
.shield-ring { display: grid; place-items: center; width: 230px; height: 230px; border: 1px solid rgba(167,139,250,.2); border-radius: 50%; background: radial-gradient(circle,rgba(139,92,246,.14),transparent 68%); box-shadow: 0 0 0 30px rgba(139,92,246,.025),0 0 0 65px rgba(139,92,246,.012); }
.shield-ring img { filter: drop-shadow(0 25px 50px rgba(124,58,237,.38)); }
.data-pill { position: absolute; padding: 9px 12px; border: 1px solid var(--border); border-radius: 999px; color: #cbd5e1; background: rgba(16,22,37,.9); box-shadow: 0 20px 40px rgba(0,0,0,.25); font-size: 9px; font-weight: 700; }.pill-one{top:55px;left:40px}.pill-two{right:20px;top:155px}.pill-three{bottom:50px;left:70px}
.privacy-copy a { display: inline-flex; gap: 8px; margin-top: 22px; color: #c4b5fd; font-size: 11px; font-weight: 750; text-decoration: none; }
.cta-section { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; margin: 70px 0 100px; padding: clamp(30px,5vw,58px); border: 1px solid rgba(167,139,250,.2); border-radius: 28px; background: radial-gradient(circle at 80% 10%,rgba(37,99,235,.15),transparent 33%),radial-gradient(circle at 10% 100%,rgba(124,58,237,.18),transparent 40%),#101625; opacity:0;transform:translateY(16px);transition:.55s ease; }.cta-section.revealed{opacity:1;transform:translateY(0)}
.cta-actions { display: flex; flex-direction: column; gap: 9px; min-width: 220px; }
.site-footer { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 25px; border-top: 1px solid var(--border); }
.footer-brand > p { max-width: 290px; margin: 14px 0 0; color: #64748b; font-size: 10px; line-height: 1.6; }
.site-footer { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; }
.footer-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }.footer-links div{display:grid;align-content:start;gap:10px}.footer-links strong{margin-bottom:3px;font-size:10px}.footer-links a{color:#64748b;font-size:10px;text-decoration:none}.footer-links a:hover{color:#cbd5e1}
.footer-bottom { grid-column: 1/-1; display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid rgba(148,163,184,.08); color: #475569; font-size: 9px; }.footer-bottom a{color:#a78bfa;text-decoration:none}
@media (max-width: 960px) { .site-header nav{display:none}.hero-section{grid-template-columns:1fr;padding-top:45px}.hero-copy{text-align:center}.hero-copy>p{margin-inline:auto}.hero-actions,.trust-row{justify-content:center}.hero-visual{max-width:760px;margin:0 auto}.feature-grid{grid-template-columns:1fr 1fr}.feature-grid .feature-large{grid-column:span 2}.privacy-section{grid-template-columns:1fr;gap:25px}.privacy-copy{text-align:center}.privacy-copy>p{margin-inline:auto}.cta-section{align-items:flex-start;flex-direction:column}.cta-actions{width:100%;flex-direction:row}.cta-actions a{flex:1}.site-footer{grid-template-columns:1fr}.footer-links{max-width:650px} }
@media (max-width: 650px) { main,.site-header,.site-footer{width:min(100% - 28px,1180px)}.site-header{min-height:68px}.coffee-button{font-size:0;padding:9px}.coffee-button::after{content:"☕";font-size:14px}.hero-section{min-height:auto;padding:44px 0 70px}.hero-copy h1{font-size:45px}.hero-copy>p{font-size:14px}.hero-actions{flex-direction:column}.dashboard-preview{grid-template-columns:78px 1fr}.dashboard-preview section{padding:22px 14px}.preview-metrics{grid-template-columns:1fr 1fr}.preview-metrics b:last-child{display:none}.floating-card{display:none}.logo-strip div{gap:18px;font-size:11px}.section{padding:75px 0}.feature-grid,.steps-grid{grid-template-columns:1fr}.feature-grid .feature-large{grid-column:span 1}.section-heading h2,.privacy-copy h2,.cta-section h2{font-size:36px}.data-pill{display:none}.privacy-visual{min-height:300px}.cta-actions{flex-direction:column}.site-footer{gap:35px}.footer-links{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column;gap:7px} }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.feature-grid article,.steps-grid article,.privacy-section,.cta-section{opacity:1;transform:none;transition:none}.browser-frame{transform:none} }