:root{
  --bg: #0b1020; --panel: #0f172a; --card:#111827; --ink:#e5e7eb; --muted:#c7d2fe;
  --brandA:#3b82f6; --brandB:#22d3ee; --outline: rgba(255,255,255,.08);
}
:root[data-theme="light"]{
  --bg:#f9fafb; --panel:#ffffff; --card:#ffffff; --ink:#111827; --muted:#475569;
  --brandA:#2563eb; --brandB:#0ea5e9; --outline: rgba(2,6,23,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in oklab, var(--brandB) 20%, transparent), transparent 60%),
    radial-gradient(800px 400px at 80% 0%, color-mix(in oklab, var(--brandA) 18%, transparent), transparent 60%),
    var(--bg);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:1180px; margin:0 auto; padding:0 20px}

/* Beta banner */
.banner{background:linear-gradient(90deg, var(--brandA), var(--brandB)); color:#03122a; text-align:center; padding:8px 12px; font-weight:800}

/* Header/Nav */
.header{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background:color-mix(in oklab, var(--bg) 70%, transparent); border-bottom:1px solid var(--outline)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:32px}
.menu{display:flex; gap:20px; align-items:center}
.menu a{padding:8px 10px; border-radius:10px}
.menu a:hover{background:color-mix(in oklab, var(--brandA) 15%, transparent); color:#fff}
.cta{background:linear-gradient(90deg, var(--brandA), var(--brandB)); color:#03122a; padding:10px 14px; border-radius:12px; font-weight:800; box-shadow:0 6px 20px color-mix(in oklab, var(--brandB) 30%, transparent)}
.toggle{display:flex; align-items:center; gap:8px}
.mode{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--outline); border-radius:12px; cursor:pointer}

/* Burger/Drawer */
.burger{display:none; width:42px; height:42px; border:1px solid var(--outline); border-radius:12px; align-items:center; justify-content:center}
.burger span, .burger::before, .burger::after{content:""; display:block; width:20px; height:2px; background:currentColor; margin:3px 0; transition:.2s}
.burger.active::before{transform:translateY(5px) rotate(45deg)}
.burger.active::after{transform:translateY(-5px) rotate(-45deg)}
.burger.active span{opacity:0}
.drawer{display:none; border-top:1px solid var(--outline); background:color-mix(in oklab, var(--bg) 90%, transparent)}
.drawer a{display:block; padding:14px 6px; border-bottom:1px solid var(--outline)}
.drawer .cta{display:block; margin:12px 0; text-align:center}

/* Hero */
.hero{padding:80px 0 40px; position:relative; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:center}
.badge{display:inline-flex; gap:10px; align-items:center; border:1px solid var(--outline); padding:8px 12px; border-radius:999px; color:var(--muted); background:color-mix(in oklab, var(--bg) 80%, white 0%)}
.h1{font-size:48px; line-height:1.1; font-weight:900; margin:12px 0 12px}
.h1 .grad{background:linear-gradient(90deg, var(--brandA), var(--brandB)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{opacity:.9; font-size:18px}
.hero .card{background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 90%, transparent), color-mix(in oklab, var(--panel) 70%, transparent)); border:1px solid var(--outline); border-radius:20px; padding:16px; backdrop-filter: blur(6px)}
.hero .mini{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px}
.kpi{display:flex; align-items:center; gap:10px; background:color-mix(in oklab, var(--brandA) 12%, transparent); border:1px solid var(--outline); padding:10px 12px; border-radius:14px}
.kpi .dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(90deg, var(--brandA), var(--brandB))}

.form{display:flex; gap:10px; margin-top:18px}
.input{flex:1; background:color-mix(in oklab, var(--bg) 85%, white 0%); color:var(--ink); border:1px solid var(--outline); border-radius:12px; padding:12px 14px}
.btn{background:linear-gradient(90deg, var(--brandA), var(--brandB)); color:#03122a; padding:12px 16px; border-radius:12px; border:0; font-weight:900; cursor:pointer}
.btn:active{transform:translateY(1px)}

/* Sections */
.section{padding:64px 0; border-top:1px solid var(--outline)}
.h2{font-size:28px; font-weight:900; margin:0 0 8px}
.sub{opacity:.85; margin-bottom:26px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 90%, transparent), color-mix(in oklab, var(--panel) 70%, transparent)); border:1px solid var(--outline); border-radius:18px; padding:18px}

/* Pricing */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.tier{border:1px solid var(--outline); border-radius:18px; padding:18px; background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 95%, transparent), color-mix(in oklab, var(--panel) 75%, transparent))}
.tier .price{font-size:34px; font-weight:900; margin:8px 0}
.tier ul{padding-left:18px}
.tier .buy{display:block; text-align:center; margin-top:12px}
.highlight{outline:2px solid color-mix(in oklab, var(--brandA) 40%, transparent); box-shadow:0 0 0 8px color-mix(in oklab, var(--brandA) 10%, transparent) inset}

/* Founder */
.founder{display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:center}
.badgelite{display:inline-block; padding:6px 10px; border:1px solid var(--outline); border-radius:999px; opacity:.9}

/* FAQ */
.faq{max-width:900px}
.qa{border:1px solid var(--outline); border-radius:14px; padding:14px 16px; margin:10px 0; background:color-mix(in oklab, var(--panel) 80%, transparent)}

/* Footer + Newsletter */
.footer{padding:36px 0; opacity:.95}
.footer .row{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:18px}
.newsletter{margin-top:12px}
.newsletter form{display:flex; gap:10px; flex-wrap:wrap}
.newsletter input[type="email"]{flex:1; min-width:220px; background:color-mix(in oklab, var(--bg) 85%, white 0%); color:var(--ink); border:1px solid var(--outline); border-radius:12px; padding:10px 12px}
.newsletter button{padding:10px 14px}

/* Demo / Skills */
.chat{max-width:900px; margin:0 auto; background:var(--card); border:1px solid var(--outline); border-radius:16px; padding:16px}
.bubble{padding:12px 14px; border-radius:12px; margin:8px 0; max-width:80%}
.user{background:color-mix(in oklab, var(--brandA) 18%, transparent); margin-left:auto}
.ai{background:color-mix(in oklab, var(--panel) 85%, transparent); border:1px solid var(--outline)}
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.switch{display:flex; gap:6px; align-items:center; border:1px solid var(--outline); border-radius:12px; padding:6px 10px}
.inputbar{display:flex; gap:10px; margin-top:12px}
.inputbar input{flex:1} .note{opacity:.8; font-size:14px}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.skill{position:relative; border:1px solid var(--outline); background:var(--card); border-radius:14px; padding:16px; overflow:hidden}
.skill h3{margin:0 0 6px}
.skill p{opacity:.9}
.skill .soon{position:absolute; top:10px; right:-40px; transform:rotate(35deg); background:linear-gradient(90deg,var(--brandA),var(--brandB)); color:#03122a; padding:6px 60px; font-weight:800}
.skill .actions{margin-top:10px}

@media (max-width: 980px){
  .hero .wrap{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr; gap:14px}
  .founder{grid-template-columns:1fr}
  .menu{display:none}
  .burger{display:flex}
  .drawer{display:block}
  .grid{grid-template-columns:1fr}
}