:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --brand:#0ea5a4;
  --brand-dark:#0b7b7a;
  --navy:#0f172a;
  --ring:rgba(14,165,164,.35);
}
*{box-sizing:border-box}
html,body{scroll-behavior:smooth; margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:24px}
.header{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:48px;height:48px;border-radius:8px}
.brand .name{font-weight:800;letter-spacing:.2px}
.tag{font-size:.9rem;color:var(--muted)}
nav a{margin-left:16px;font-weight:600;color:var(--ink)}
.hero{background:var(--navy);color:#fff;padding:72px 32px;border-radius:18px;margin-bottom:32px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.hero h1{font-size:2.5rem;margin:0 0 12px;color:#fff}
.hero p{font-size:1.1rem;color:#e2e8f0}
.hero .tagline{font-size:1.25rem;font-weight:600;color:var(--brand);margin-bottom:18px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.btn{display:inline-block;padding:14px 20px;border-radius:14px;border:1px solid #e2e8f0;background:var(--card);font-weight:700;color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.06);transition:transform .06s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.1)}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand-dark)}
.btn.primary:hover{background:var(--brand-dark)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{grid-column:span 12;background:var(--card);border:1px solid #e2e8f0;border-radius:18px;padding:22px;box-shadow:0 8px 20px rgba(0,0,0,.06)}
@media(min-width:900px){.card.span-6{grid-column:span 6} .card.span-4{grid-column:span 4}}
.card h3{margin:0 0 8px}
.card p{color:var(--muted);margin:0 0 12px}
.footer{margin-top:48px;padding:24px 0;color:var(--muted);font-size:.95rem;border-top:1px solid #e5e7eb}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#ecfeff;color:#0c4a6e;border:1px solid #bae6fd;font-weight:700;font-size:.8rem}
.hr{height:1px;background:#e5e7eb;margin:24px 0}
.form label{display:block;font-weight:700;margin:10px 0 6px}
.input,.textarea{width:100%;padding:12px 14px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;outline:none}
.input:focus,.textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
.textarea{min-height:120px;resize:vertical}
.small{color:var(--muted);font-size:.9rem;margin-top:8px}

/* Dark hero */
.hero-dark{background:var(--navy); color:#e5e7eb; border-radius:20px; padding:36px; box-shadow:0 18px 40px rgba(2,6,23,.35);}
.hero-dark .tagline{color:var(--brand); font-weight:700; margin-top:6px;}
.hero-grid{display:grid; grid-template-columns:1fr; gap:24px; align-items:center;}
@media(min-width:900px){.hero-grid{grid-template-columns:420px 1fr;}}
.hero-logo{background:#0b1220; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; display:flex; align-items:center; justify-content:center;}
.hero-logo img{max-width:100%; height:auto; border-radius:10px;}
.hero-copy h1{margin:0 0 10px; font-size:2.35rem; color:#fff;}
.hero-copy p{color:#cbd5e1;}
.hero-copy .cta-row .btn{border-color:#15223a;}

/* Sticky header */
.sticky{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(6px); background:rgba(248,250,252,.85); border-bottom:1px solid #e2e8f0;}
.container.header-wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.header.sticky-inner{padding:12px 0;}

/* Scroll-to-top button */
.to-top{position:fixed;right:18px;bottom:18px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--brand);color:#fff;border:1px solid var(--brand-dark);
  box-shadow:0 10px 24px rgba(0,0,0,.15);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .06s ease}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-2px)}
/* Metrics badges */
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.badge.kpi{background:#ecfeff;border:1px solid #bae6fd;color:#0c4a6e;font-weight:800;border-radius:999px;padding:6px 10px}
.logo-pill{display:inline-flex;align-items:center;gap:8px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:6px 10px}
.logo-dot{width:18px;height:18px;border-radius:999px;background:#0ea5a4}
.small-muted{color:#64748b;font-size:.9rem}

/* Cookie banner */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#0f172a;color:#fff;padding:16px;display:flex;justify-content:space-between;align-items:center;z-index:100}
.cookie-banner p{margin:0;font-size:.9rem}
.cookie-banner button{margin-left:12px;border:none;border-radius:6px;padding:6px 12px;font-weight:600;cursor:pointer}
.cookie-banner .accept{background:#0ea5a4;color:#fff}
.cookie-banner .decline{background:#475569;color:#fff}