/* L00P Stream marketing site - calm/premium, matches the app. Theme model: JS sets data-theme on BEFORE first paint. Priority: user choice (localStorage) -> system preference -> light. CSS reads only the attribute — no @media fallback (avoids flicker on toggle). */ :root, :root[data-theme="light"]{ --bg:#fafafa; --bg-2:#fff; --panel:#fff; --text:#1d1d1f; --text-2:#86868b; --line:rgba(0,0,0,.08); --hair:rgba(0,0,0,.06); --brand:#2b61a9; --brand-hi:#3f7fd0; --gold:#c4a45a; --max:1120px; --radius:14px; --font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif; --mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace; } :root[data-theme="dark"]{ --bg:#000; --bg-2:#111; --panel:#111114; --text:#f5f5f7; --text-2:#a19c8a; --line:rgba(255,255,255,.08); --hair:rgba(255,255,255,.06); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--bg); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; letter-spacing:-0.008em} body{min-height:100vh; display:flex; flex-direction:column} main{flex:1} a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%; height:auto; display:block} /* Nav */ .nav{ position:sticky; top:0; z-index:100; background:color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(14px); border-bottom:1px solid var(--hair); } .nav-inner{max-width:var(--max); margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:24px} .nav .brand{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.01em; color:var(--text)} .nav .brand img{width:28px; height:28px; border-radius:8px} .nav .brand .wm span{color:var(--gold); margin:0 2px} .nav ul{list-style:none; display:flex; gap:22px; margin-left:auto} .nav ul a{color:var(--text-2); font-size:14px; font-weight:500} .nav ul a:hover{color:var(--text); text-decoration:none} .nav ul a.on{color:var(--text)} .nav .cta{padding:8px 18px; border-radius:10px; background:var(--brand); color:#fff; font-size:14px; font-weight:600} .nav .cta:hover{background:var(--brand-hi); text-decoration:none} .nav .theme-toggle:hover{color:var(--text)} @media (max-width:720px){ .nav ul{gap:14px} .nav ul li:not(:last-child){display:none} } /* Footer */ footer{border-top:1px solid var(--hair); padding:40px 24px 60px; margin-top:80px; color:var(--text-2); font-size:13.5px} .foot-inner{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns: 1fr auto; gap:20px; align-items:start} .foot-inner ul{list-style:none; display:flex; gap:20px; flex-wrap:wrap} .foot-inner a{color:var(--text-2)} .foot-inner a:hover{color:var(--text); text-decoration:none} @media (max-width:640px){ .foot-inner{grid-template-columns:1fr} } /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:12px; border:none; cursor:pointer; font:600 15px/1 var(--font); text-decoration:none; transition: transform .12s ease, background .12s ease; } .btn:hover{transform:translateY(-1px); text-decoration:none} .btn.primary{background:var(--brand); color:#fff} .btn.primary:hover{background:var(--brand-hi)} .btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line)} .btn.ghost:hover{background:var(--bg-2)} .btn.lg{padding:16px 30px; font-size:16px; border-radius:14px} /* Sections */ .section{max-width:var(--max); margin:0 auto; padding:70px 24px} .section.tight{padding:40px 24px} .eyebrow{font-size:12.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--brand); font-weight:600; margin-bottom:14px} h1{font-size:clamp(2.2rem, 6vw, 3.6rem); font-weight:600; letter-spacing:-0.025em; line-height:1.05} h2{font-size:clamp(1.7rem, 4.5vw, 2.4rem); font-weight:600; letter-spacing:-0.02em; line-height:1.15} h3{font-size:1.15rem; font-weight:600; letter-spacing:-0.01em; line-height:1.3} .sub{color:var(--text-2); font-size:clamp(1.05rem, 2vw, 1.2rem); line-height:1.55; margin-top:18px; max-width:640px} /* Cards + grid */ .grid{display:grid; gap:20px} .grid.g3{grid-template-columns:repeat(3, 1fr)} .grid.g2{grid-template-columns:repeat(2, 1fr)} @media (max-width:820px){ .grid.g3{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .grid.g3, .grid.g2{grid-template-columns:1fr} } .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px} .card h3{margin-bottom:8px} .card p{color:var(--text-2); font-size:14.5px; line-height:1.55} .card .icon{width:38px; height:38px; border-radius:10px; background:rgba(43,97,169,0.1); color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:14px} .card .icon svg{width:20px; height:20px} /* Hero */ .hero{padding:80px 24px 40px; text-align:center} .hero .headline{font-size:clamp(2.6rem, 7vw, 4.2rem); font-weight:600; letter-spacing:-0.028em; line-height:1.03; max-width:820px; margin:0 auto} .hero .sub{margin:22px auto 32px} .hero .cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap} .hero .demo{margin:56px auto 0; max-width:920px; border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,0.08)} .hero .demo img{width:100%; display:block} .hero .demo-placeholder{aspect-ratio:16/9; background:linear-gradient(135deg, #f4f4f6 0%, #ececee 100%); display:flex; align-items:center; justify-content:center; color:var(--text-2); font-size:14px} :root[data-theme="dark"] .hero .demo-placeholder{background:linear-gradient(135deg, #14141a 0%, #0e0e12 100%)} /* Splits / feature rows */ .split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center} @media (max-width:820px){ .split{grid-template-columns:1fr} } .split.reverse .txt{order:2} @media (max-width:820px){ .split.reverse .txt{order:0} } .split .visual{border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--panel); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:var(--text-2); font-size:13px} /* Tables */ table{width:100%; border-collapse:collapse} td,th{padding:14px 12px; text-align:left; border-bottom:1px solid var(--hair); font-size:14.5px} th{color:var(--text-2); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em} /* Utilities */ .center{text-align:center} .muted{color:var(--text-2)} .big{font-size:1.15rem} .warn-banner{background:#fffbe6; border:1px solid #ffe58f; color:#7a5b00; padding:14px 18px; border-radius:10px; margin-bottom:24px; font-size:14px} :root[data-theme="dark"] .warn-banner{background:rgba(255,229,143,.08); border-color:rgba(255,229,143,.3); color:#f0d878}