:root{
    --bg:#ffffff; --bg-soft:#f8fafc; --surface:#ffffff;
    --text:#111827; --muted:#6b7280; --border:#e5e7eb;
    --primary:#2563eb; --primary-2:#0ea5e9; --ring:rgba(37,99,235,.2);
    --container: 1180px;
    --r-lg:16px; --r-xl:24px;
    --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem; --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem; --s-20:5rem;
    --f-12:.75rem; --f-14:.875rem; --f-16:1rem; --f-18:1.125rem; --f-20:1.25rem; --f-24:1.5rem; --f-28:1.75rem; --f-32:2rem; --f-40:2.5rem; --f-56:3.5rem;
}
@media (max-width:1024px){:root{--f-56:3rem;--f-40:2.25rem}}
@media (max-width:640px){:root{--f-56:2.25rem;--f-40:1.875rem;--f-32:1.5rem}}
body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;line-height:1.55;color:var(--text);background:linear-gradient(180deg,var(--bg),var(--bg-soft))}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--s-6)}


/* Header */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.75);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-block:var(--s-4);gap:var(--s-6)}
.brand{display:flex;align-items:center;gap:var(--s-3)}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 6px 18px rgba(37,99,235,.25)}
.brand-title{font-weight:800;font-size:var(--f-18)}
.nav-links{display:flex;gap:var(--s-5);align-items:center}
.nav-links a{font-size:var(--f-14);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.1rem;border-radius:12px;border:1px solid transparent;font-weight:700;cursor:pointer;transition:all .2s}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 12px 20px var(--ring)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:#fff;border-color:var(--border)}


/* Hero */
.hero{padding-block:var(--s-16)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-12);align-items:center}
.kicker{font-size:var(--f-14);font-weight:800;color:var(--primary-2);letter-spacing:.06em;text-transform:uppercase}
.h1{font-size:var(--f-56);line-height:1.1;letter-spacing:-.02em}
.lead{font-size:var(--f-18);color:var(--muted);margin-top:var(--s-5)}
.hero-cta{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-8)}
.preview{aspect-ratio:16/10;border-radius:var(--r-xl);background:#fff;border:1px solid var(--border);box-shadow:0 6px 24px rgba(2,6,23,.06)}


/* Sections */
section{padding-block:var(--s-16)}
.section-head{display:flex;flex-direction:column;gap:var(--s-3);margin-bottom:var(--s-10)}
.h2{font-size:var(--f-40);line-height:1.15}
.sub{font-size:var(--f-18);color:var(--muted)}


/* Products grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.product{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s-6);box-shadow:0 6px 24px rgba(2,6,23,.06);display:flex;flex-direction:column;gap:var(--s-5)}
.product .tag{font-size:var(--f-12);font-weight:800;color:var(--primary-2);letter-spacing:.06em;text-transform:uppercase}
.product h3{font-size:var(--f-24)}
.product p{color:var(--muted)}
.product .actions{display:flex;gap:var(--s-3);flex-wrap:wrap}


/* Blog grid */
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.post{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 6px 24px rgba(2,6,23,.06)}
.post img{aspect-ratio:16/9}
.post .pad{padding:var(--s-6)}
.post h3{font-size:var(--f-20);margin-bottom:.25rem}
.meta{font-size:var(--f-12);color:var(--muted)}


/* Footer */
.footer{padding-block:var(--s-12);border-top:1px solid var(--border)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-6)}
.foot-col h4{font-size:var(--f-14);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--s-3);color:#0f172a}
.foot-col a{display:block;color:var(--muted);font-size:var(--f-14);padding:.25rem 0}


@media (max-width:1024px){.hero-grid{grid-template-columns:1fr}.grid-3,.blog,.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3,.blog,.foot-grid{grid-template-columns:1fr}.hero{padding-block:var(--s-12)}section{padding-block:var(--s-12)}}


/* reveal */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .6s, transform .6s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}