/* ============================================================
   TOKENS
   Cool neutrals lifted from the dashboard app, brand accents
   kept from the marketing site.
   ============================================================ */
:root{
  --bg:#f5f7fa; --panel:#ffffff; --raised:#eef2f7; --raised2:#e3e9f1;
  --line:#d8dee6; --line2:#e6ebf1;
  --fg:#1a2230; --muted:#5a6776; --faint:#8a97a5;

  --accent:#2f6fe0; --accent2:#1f52b3; --accent-soft:#e8f0fd; --accent-line:#2f6fe033;
  --ok:#1a9c73; --ok-soft:#e4f5ee;
  --danger:#ff6b4a; --danger-deep:#e5502f; --danger-text:#c23c1e; --danger-soft:#ffece7;
  --amber:#f5a623; --amber-text:#9a6206; --amber-soft:#fdf1dc;
  --purple:#8b5cf6; --purple-text:#6535d8; --purple-soft:#f0eafe;

  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1200px;
  --shadow-sm:0 1px 2px #1a223010;
  --shadow:0 2px 4px #1a223010, 0 8px 24px #1a223010;
  --shadow-lg:0 24px 60px #1a22301f;

  /* One typeface for everything the reader reads; a real monospace stays for
     code samples only. --display/--hand are aliases so older page CSS resolves. */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:var(--body); --hand:var(--body);
  --panel2:var(--raised); --navy:#1b3f8c; --teal:var(--ok); --on-accent:#ffffff;
  --r:12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 var(--body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit; text-decoration:none}
p{margin:0}
img,svg{max-width:100%}
::selection{background:#2f6fe024}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}

h1,h2,h3,h4{margin:0; font-family:var(--body); font-weight:700; letter-spacing:-.021em; line-height:1.12; color:var(--fg)}
h1{font-size:clamp(36px,4.6vw,54px); font-weight:800; letter-spacing:-.032em}
h2{font-size:clamp(27px,3.1vw,38px); letter-spacing:-.026em}
h3{font-size:17px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ---------- buttons: flat, tight, corporate ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--body);
  font-weight:600; font-size:14.5px; line-height:1; padding:11px 17px; border-radius:8px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .13s, border-color .13s, color .13s, box-shadow .13s}
.btn-primary{background:var(--accent); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent2)}
.btn-outline,.btn-ghost{background:var(--panel); color:var(--fg); border-color:var(--line); box-shadow:var(--shadow-sm)}
.btn-outline:hover,.btn-ghost:hover{border-color:var(--faint); background:var(--raised)}
.btn-quiet{background:transparent; color:var(--muted); font-weight:500}
.btn-quiet:hover{color:var(--fg)}
.btn-coral{background:var(--danger-deep); color:#fff; box-shadow:var(--shadow-sm)}
.btn-coral:hover{background:#cf4423}
.btn-lg{font-size:15.5px; padding:14px 22px; border-radius:9px}
/* light-on-dark variant, for buttons sitting on the blue CTA card */
.on-ink .btn-outline,.on-ink .btn-ghost,
.cta-card .btn-outline,.cta-card .btn-ghost{background:#ffffff0d; color:#fff; border-color:#ffffff26; box-shadow:none}
.on-ink .btn-outline:hover,.on-ink .btn-ghost:hover,
.cta-card .btn-outline:hover,.cta-card .btn-ghost:hover{background:#ffffff17; border-color:#ffffff45}

/* ---------- header ---------- */
.topbar{position:sticky; top:0; z-index:60; background:#f5f7fadd; backdrop-filter:blur(12px) saturate(1.4); border-bottom:1px solid var(--line)}
.topbar-in{display:flex; align-items:center; gap:32px; height:64px}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:17.5px; letter-spacing:-.022em; flex:none}
.brand .mark{position:relative; width:27px; height:27px; flex:none; transition:transform .32s cubic-bezier(.34,1.36,.64,1)}
.brand .mark svg{display:block; width:100%; height:100%}
/* Hover gimmick: the mark lifts and emits one monitoring-style ping ring.
   Fires once per hover — the animation restarts each time :hover applies. */
.brand .mark::after{content:""; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--accent); opacity:0; pointer-events:none}
.brand{transition:color .16s}
.brand:hover{color:var(--accent2)}
.brand:hover .mark{transform:scale(1.07)}
.brand:hover .mark::after{animation:brand-ping .75s cubic-bezier(.2,.7,.4,1)}
.brand:active .mark{transform:scale(.97); transition-duration:.09s}
@keyframes brand-ping{
  from{opacity:.5; transform:scale(1)}
  to{opacity:0; transform:scale(1.9)}
}

.nav{display:flex; align-items:center; gap:1px; flex:1}
.nav a{position:relative; color:var(--muted); font-size:14.5px; font-weight:500; padding:8px 13px; border-radius:7px; transition:color .12s, background .12s}
.nav a:hover{color:var(--fg); background:var(--raised)}
.nav a[aria-current]{color:var(--fg); font-weight:600}
.nav a[aria-current]::after{content:""; position:absolute; left:13px; right:13px; bottom:-14px; height:2px; background:var(--accent); border-radius:2px}

.topbar-cta{display:flex; align-items:center; gap:8px; flex:none}

/* CSS-only mobile menu */
.mnav-toggle{display:none}
.mnav-btn{display:none; align-items:center; justify-content:center; width:38px; height:38px; flex:none; margin-left:auto;
  border:1px solid var(--line); border-radius:8px; background:var(--panel); cursor:pointer; color:var(--fg)}
.mnav-btn .bar{display:block; width:16px; height:1.75px; background:currentColor; border-radius:2px; position:relative; transition:transform .18s, background .18s}
.mnav-btn .bar::before,.mnav-btn .bar::after{content:""; position:absolute; left:0; width:16px; height:1.75px; background:currentColor; border-radius:2px; transition:transform .18s, top .18s}
.mnav-btn .bar::before{top:-5px} .mnav-btn .bar::after{top:5px}
.mnav-toggle:checked ~ .topbar-in .mnav-btn .bar{background:transparent}
.mnav-toggle:checked ~ .topbar-in .mnav-btn .bar::before{top:0; transform:rotate(45deg)}
.mnav-toggle:checked ~ .topbar-in .mnav-btn .bar::after{top:0; transform:rotate(-45deg)}
.mnav{display:none; flex-direction:column; padding:10px 20px 18px; border-bottom:1px solid var(--line); background:var(--panel)}
/* :not(.btn) matters — a bare `.mnav a` outranks `.btn-primary` on specificity
   and would repaint the Start free button's label in the body colour. */
.mnav a:not(.btn){color:var(--fg); font-size:15.5px; font-weight:500; padding:12px 10px; border-radius:8px}
.mnav a:not(.btn):hover{background:var(--raised)}
.mnav a[aria-current]{color:var(--accent2); background:var(--accent-soft); font-weight:600}
.mnav .sep,.mnav .mnav-sep{height:1px; background:var(--line2); margin:9px 2px}
.mnav .row,.mnav .mnav-row{display:flex; gap:9px; margin-top:4px}
.mnav .row .btn,.mnav .mnav-row .btn{flex:1}
@media(max-width:940px){
  .nav,.topbar-cta{display:none}
  .mnav-btn{display:inline-flex}
  .mnav-toggle:checked ~ .mnav{display:flex}
}

/* ---------- section scaffolding ---------- */
.section{padding:96px 0}
.section.tight{padding-top:0}
.sec-head{max-width:60ch}
.sec-head.center{margin:0 auto; text-align:center}
.sec-head .kicker{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--accent); margin-bottom:16px}
.sec-head .kicker::before{content:""; width:18px; height:1px; background:var(--accent); opacity:.55}
.sec-head.center .kicker::before{display:none}
.sec-head p{color:var(--muted); font-size:17.5px; line-height:1.6; margin-top:16px}
.sec-head + *{margin-top:44px}

/* the small label that used to be a pill eyebrow — now a quiet blue kicker */
.hp-eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--accent); margin-bottom:18px}
.hp-eyebrow .pulse{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px #1a9c7326; flex:none}

/* ---------- shared surfaces ---------- */
.card{border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:30px 28px 32px; box-shadow:var(--shadow-sm)}
.card .ci{width:34px; height:34px; border-radius:8px; display:grid; place-items:center; margin-bottom:16px; color:var(--accent2); background:var(--accent-soft)}
.card .ci.coral{color:var(--danger-text); background:var(--danger-soft)}
.card .ci.amber{color:var(--amber-text); background:var(--amber-soft)}
.card .ci.mint{color:var(--ok); background:var(--ok-soft)}
.card .ci.purple{color:var(--purple-text); background:var(--purple-soft)}
.card h3{font-size:19px; letter-spacing:-.02em}
.card > p{color:var(--muted); font-size:15px; line-height:1.62; margin-top:11px}

.tick{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:11px}
.tick li{display:flex; gap:10px; font-size:14.5px; color:var(--fg); line-height:1.55}
.tick li svg{flex:none; margin-top:3px; color:var(--ok)}
.tick li span{color:var(--muted)}

/* ---------- closing CTA card, reused at the bottom of nearly every page ---------- */
.cta{padding:96px 0 0}
.cta-band{padding:0}
.cta-card{position:relative; overflow:hidden; border-radius:14px; padding:64px 40px; text-align:center;
  background:linear-gradient(160deg,#2f6fe0 0%,#255cc0 48%,#1b3f8c 100%)}
.cta-card::before{content:""; position:absolute; top:-160px; right:-120px; width:440px; height:440px; border-radius:50%;
  background:radial-gradient(closest-side,#ff6b4a30,transparent 70%)}
.cta-card::after{content:""; position:absolute; bottom:-180px; left:-100px; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(closest-side,#ffffff1f,transparent 70%)}
.cta-card > *{position:relative}
.cta-card h2{color:#fff; max-width:22ch; margin:0 auto}
.cta-card p{color:#d7e4fb; font-size:17.5px; line-height:1.6; margin:16px auto 28px; max-width:52ch}
.cta-actions{display:flex; gap:11px; justify-content:center; flex-wrap:wrap}

@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none !important}
  .brand:hover .mark{transform:none} .brand:hover .mark::after{animation:none} }

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); background:var(--panel); margin-top:96px}
.footer-top{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px; padding:56px 0 44px}
.footer-brand .brand{margin-bottom:14px}
.footer-brand p{color:var(--muted); font-size:14px; max-width:34ch; line-height:1.65}
.footer-brand .footer-eu{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:13px; color:var(--muted); font-weight:500; transition:color .12s}
.footer-brand a.footer-eu:hover{color:var(--accent)}
.footer-brand .footer-eu .flags{display:inline-flex; align-items:center; gap:5px}
.footer-brand .footer-eu .flags svg{display:block; width:19px; height:13px; border-radius:2px}
.footer-col h4{font-size:13.5px; font-weight:600; letter-spacing:-.01em; color:var(--fg); margin:0 0 14px}
.footer-col a{display:block; color:var(--muted); font-size:14px; padding:5px 0; transition:color .12s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; border-top:1px solid var(--line2); flex-wrap:wrap}
.footer-bottom .legal{color:var(--faint); font-size:12.5px; line-height:1.65}
.footer-bottom .legal .legal-ent{color:var(--faint)}
.footer-bottom .legal a{color:var(--muted)}
.footer-bottom .legal a:hover{color:var(--accent)}
.footer-status{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); font-weight:500}
.footer-status .dot{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px #1a9c7326}
@media(max-width:840px){
  .footer-top{grid-template-columns:1fr 1fr; gap:32px; padding:44px 0 32px}
  .footer-brand{grid-column:1 / -1}
}