@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,300;0,400;0,700;0,900&display=swap");
:root{
--yellow-500:#FFD119;--yellow-300:#FFD943;--yellow-100:#FFF3C2;--yellow-50:#FFF9E3;--yellow-600:#EDC217;
--ink-900:#161513;--ink-700:#44474B;--ink-500:#6E7178;--ink-400:#8B8E90;--ink-200:#E2E8F0;--ink-100:#F6F7F8;
--on-yellow-900:#413503;--on-yellow-700:#4E4313;--white:#FFFFFF;--page:#F1F2F4;
--green-500:#23A26D;--red-500:#E5484D;--blue-500:#2F6FED;
--brand:var(--yellow-500);--brand-hover:rgba(255,209,25,.8);--brand-soft:var(--yellow-50);
--text-body:var(--ink-900);--text-secondary:var(--ink-700);--text-muted:var(--ink-400);--text-on-brand:var(--ink-900);
--surface-page:var(--page);--surface-card:var(--white);--surface-panel:var(--ink-100);--surface-panel-alt:var(--ink-200);
--positive:var(--green-500);--link:var(--ink-900);--link-hover:var(--ink-700);--border-subtle:var(--ink-200);
--grad-hero:radial-gradient(circle at 20% 0%,rgba(255,217,67,.35),transparent 45%),radial-gradient(circle at 85% 90%,rgba(255,209,25,.28),transparent 40%);
--grad-brand:linear-gradient(180deg,#FFE04D 0%,#FFD119 100%);
--font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--font-alt:"Lato","Inter",sans-serif;
--text-h1:50px;--text-h2:40px;--text-h3:30px;--text-lead:20px;--text-body-size:18px;--text-small:14px;--text-caption:13px;
--leading-tight:1.17;--leading-body:1.625;--tracking-heading:-0.025em;
--radius-pill:100px;--radius-card:20px;--radius-panel:16px;--radius-control:12px;
--shadow-card:0 8px 28px rgba(23,24,28,.07);--shadow-float:0 16px 48px rgba(23,24,28,.12);--shadow-nav:0 2px 12px rgba(23,24,28,.05);
--ease-out:cubic-bezier(.22,.61,.36,1);--dur-fast:150ms;--dur-base:250ms;--container:1280px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);font-family:var(--font-sans);color:var(--text-body);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
img{max-width:100%}
.container{max-width:var(--container);margin:0 auto;padding:16px 24px;display:flex;flex-direction:column;gap:16px}
.ref-row{display:flex;justify-content:center}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-pill);font-size:var(--text-caption);font-weight:600;letter-spacing:.01em;background:var(--ink-100);color:var(--ink-500)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:600;border:none;cursor:pointer;white-space:nowrap;text-decoration:none;height:54px;padding:0 30px;font-size:20px;border-radius:var(--radius-control);background:var(--grad-brand);color:var(--text-on-brand);transition:filter var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:hover{filter:brightness(1.04);color:var(--text-on-brand)}
.btn:active{transform:scale(.98)}
.btn.md{height:48px;font-size:16px}
.btn.pill{border-radius:var(--radius-pill)}
.btn.dark{background:var(--ink-900);color:var(--white)}
.btn.dark:hover{background:#000}
.navbar{display:flex;align-items:center;gap:40px;padding:14px 32px;background:var(--surface-card);border-radius:var(--radius-card);box-shadow:var(--shadow-nav)}
.navbar .logo{height:40px;display:block}
.navbar nav{display:flex;gap:36px;flex:1;justify-content:center}
.navbar nav a{font-size:16px;font-weight:500;color:var(--link);transition:color var(--dur-fast) var(--ease-out)}
.hero{background:var(--grad-hero);border-radius:var(--radius-card);padding:72px 64px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.stack{display:flex;flex-direction:column;gap:28px}
.section-title{display:flex;flex-direction:column;gap:16px;max-width:640px}
.section-title .kicker{font-size:var(--text-lead);color:var(--text-secondary);font-weight:400}
.section-title h1,.section-title h2{margin:0;font-size:var(--text-h1);line-height:var(--leading-tight);letter-spacing:var(--tracking-heading);font-weight:700;color:var(--text-body)}
.section-title .lead{margin:0;font-size:var(--text-lead);line-height:var(--leading-body);color:var(--text-secondary)}
.hero img{width:100%;max-width:520px;justify-self:center}
.features{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.feature-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:40px 32px 0;border-radius:var(--radius-card);background:var(--surface-card);box-shadow:var(--shadow-card);overflow:hidden;min-height:420px}
.feature-card.yellow{background:var(--grad-brand);box-shadow:none}
.feature-card h3{margin:0;font-size:var(--text-h3);font-weight:700;line-height:var(--leading-tight);letter-spacing:var(--tracking-heading);color:var(--ink-900)}
.feature-card p{margin:0;font-size:var(--text-body-size);line-height:var(--leading-body);color:var(--text-secondary);max-width:320px}
.feature-card.yellow p{color:var(--ink-700)}
.feature-card img{width:78%;margin-top:auto;display:block;border-radius:12px 12px 0 0}
.license{background:var(--surface-card);border-radius:var(--radius-card);padding:72px 64px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.license img{width:100%;max-width:480px;justify-self:center}
.panel{display:flex;align-items:center;gap:20px;padding:24px 28px;border-radius:var(--radius-panel);background:var(--surface-panel);max-width:520px}
.panel p{margin:0;font-size:var(--text-small);line-height:var(--leading-body);color:var(--ink-700);flex:1}
.panel .arrow{width:48px;height:48px;flex:0 0 48px;border-radius:50%;border:none;cursor:pointer;background:var(--brand);color:var(--ink-900);font-size:20px;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background var(--dur-fast) var(--ease-out)}
.panel .arrow:hover{background:var(--brand-hover)}
.cta{background:var(--grad-brand);border-radius:var(--radius-card);padding:80px 64px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.cta h2{margin:0;font-size:var(--text-h2);font-weight:700;letter-spacing:var(--tracking-heading);color:var(--ink-900);max-width:560px;line-height:var(--leading-tight)}
.cta p{margin:0;font-size:var(--text-lead);color:var(--ink-700);max-width:520px;line-height:var(--leading-body)}
.footer{padding:48px 40px;background:var(--surface-card);border-radius:var(--radius-card);display:flex;flex-direction:column;gap:24px}
.footer .row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer .logo{height:32px;display:block}
.footer .divider{height:1px;background:var(--border-subtle)}
.footer .legal{margin:0;font-size:var(--text-caption);line-height:var(--leading-body);color:var(--text-muted);max-width:720px}
@media(max-width:900px){
.hero,.license{grid-template-columns:1fr;padding:48px 28px}
.features{grid-template-columns:1fr}
.navbar nav{display:none}
.navbar{gap:16px;justify-content:space-between}
.section-title h1,.section-title h2{font-size:36px}
.cta{padding:56px 28px}
.cta h2{font-size:30px}
}