/* ============================================================
   GetBoost — Website  ·  Design draft v7
   Modern SaaS / Apple-vibe · blue-led · pharmacy SaaS (FR)
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Blue (primary #396FEE — several shades, Fincome style) */
  --blue-50:#EFF4FF;  --blue-100:#DEE9FE; --blue-200:#C4D7FC;
  --blue-300:#9FBDF9; --blue-400:#6E97F4; --blue-500:#4D7CF1;
  --blue-600:#396FEE; --blue-700:#2A5AD8; --blue-800:#1E45B0; --blue-900:#143178;

  /* Pharma green (sparingly, keeps the pharma nod) */
  --green-400:#34D399; --green-500:#22C55E; --green-600:#16A34A;

  /* Yellow — highlights / underlines only */
  --yellow-300:#FCD34D; --yellow-400:#FBBF24; --yellow-500:#F5A800;

  /* Orange (for eyebrow badges / accents) */
  --orange-500:#F97316;

  /* Greys */
  --ink:#0E1729; --slate-700:#334155; --slate-600:#475569;
  --muted:#64748B; --faint:#93A1B5; --line:#E6ECF4; --line-2:#EDF1F8;

  /* Surfaces */
  --bg:#F5F8FD; --surface:#FFFFFF; --tint:#EFF4FF;
  --navy:#080E22; --navy-2:#0C1733; --navy-soft:#13224A;

  /* Brand logo (Google-style rings) */
  --g-blue:#4285F4; --g-red:#EA4335; --g-yellow:#FBBC05; --g-green:#34A853;

  /* Accent (tweakable highlight) */
  --accent:var(--yellow-400);
  --accent-soft:#FEF3C7;

  /* Type (tweakable) */
  --font-display:'Schibsted Grotesk', system-ui, sans-serif;
  --font-body:'Hanken Grotesk', system-ui, sans-serif;

  /* Shape (tweakable via [data-btn]) */
  --btn-radius:999px;
  --card-radius:22px;

  /* Shadows — soft, layered, Apple-ish */
  --sh-sm:0 1px 2px rgba(16,32,64,.05), 0 2px 6px rgba(16,32,64,.04);
  --sh-md:0 8px 24px rgba(20,40,90,.08), 0 2px 8px rgba(20,40,90,.05);
  --sh-lg:0 24px 60px rgba(18,38,86,.14), 0 8px 20px rgba(18,38,86,.07);
  --sh-blue:0 18px 42px rgba(57,111,238,.34);

  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

[data-btn="rounded"]{ --btn-radius:14px; }
[data-btn="soft"]{ --btn-radius:11px; --card-radius:18px; }
[data-btn="sharp"]{ --btn-radius:6px; --card-radius:12px; }

*{ box-sizing:border-box; }
/* Keyboard-only focus ring (accessibility, UI) */
:focus-visible{ outline:3px solid var(--blue-500); outline-offset:2px; border-radius:6px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline:none; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.08;
  letter-spacing:-.02em; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
section{ position:relative; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:.78rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--blue-700);
  background:var(--blue-50); border:1px solid var(--blue-100);
  padding:7px 14px; border-radius:999px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange-500); }
.eyebrow.on-dark{ color:#BFD3FF; background:rgba(91,141,251,.12); border-color:rgba(91,141,251,.22); }

.lead{ color:var(--muted); font-size:1.18rem; line-height:1.55; }
.section-head{ max-width:660px; margin-inline:auto; text-align:center; display:flex;
  flex-direction:column; align-items:center; gap:18px; }
.section-head h2{ font-size:clamp(1.9rem, 1.1rem + 2.6vw, 3rem); }
.section-head .lead{ margin-top:2px; }

/* highlight underline (the yellow PDF-style accent) */
.hl{ position:relative; white-space:nowrap; }
.hl::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:.06em; height:.32em;
  background:var(--accent); opacity:.55; border-radius:4px; z-index:-1;
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease) .2s; }
.reveal.in .hl::after, .in .hl::after{ transform:scaleX(1); }
.grad-text{ background:linear-gradient(100deg,var(--blue-700),var(--blue-500) 55%,var(--green-500));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:600; font-size:1rem; line-height:1;
  padding:15px 26px; border-radius:var(--btn-radius); border:1px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.btn svg{ width:18px; height:18px; }
.btn-primary{ color:#fff; background:linear-gradient(180deg,var(--blue-500),var(--blue-700));
  box-shadow:var(--sh-blue); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 24px 52px rgba(57,111,238,.42); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line);
  box-shadow:var(--sh-sm); }
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--blue-200); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ transform:translateY(-2px); box-shadow:var(--sh-lg); }
.btn-light{ background:#fff; color:var(--blue-700); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.25); }
.btn-darkline{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.28); }
.btn-darkline:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.2); border-color:rgba(255,255,255,.45); }
.btn-lg{ padding:18px 32px; font-size:1.06rem; }
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }

/* ---------- Reveal animation ----------
   End-state is the DEFAULT (visible). The hidden pre-animation state is
   only applied once JS adds `.reveal-on` to <html>, so the page is never
   blank without JS / if IntersectionObserver never fires / in print. */
.reveal,.reveal-sc{ transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms); will-change:opacity,transform; }
html.reveal-on .reveal{ opacity:0; transform:translateY(30px); }
html.reveal-on .reveal.in{ opacity:1; transform:none; }
html.reveal-on .reveal-sc{ opacity:0; transform:translateY(28px) scale(.97); }
html.reveal-on .reveal-sc.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html.reveal-on .reveal, html.reveal-on .reveal-sc{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}
@media print{
  html.reveal-on .reveal, html.reveal-on .reveal-sc{ opacity:1 !important; transform:none !important; }
}

/* ---------- Decorative backgrounds ---------- */
.blob{ position:absolute; border-radius:50%; filter:blur(64px); opacity:.6;
  pointer-events:none; z-index:0; animation:float 16s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(24px,-30px) scale(1.08);} }
.grid-faint{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:54px 54px; -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%); opacity:.5; }
.dotgrid{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(57,111,238,.16) 1.4px, transparent 1.4px);
  background-size:26px 26px; -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 70%);
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 70%); opacity:.5; }

/* ---------- Shine + glow utilities ---------- */
.shine{ position:relative; overflow:hidden; isolation:isolate; }
.shine::after{ content:""; position:absolute; top:-30%; left:-120%; width:55%; height:160%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); transition:left .85s var(--ease); pointer-events:none; z-index:4; }
.shine:hover::after{ left:160%; }
.shine.on-dark::after{ background:linear-gradient(100deg,transparent,rgba(120,160,255,.30),transparent); }

.glow-h{ position:relative; }
.glow-h::before{ content:""; position:absolute; inset:-1.5px; border-radius:inherit; z-index:-1;
  background:linear-gradient(135deg,var(--blue-500),rgba(57,111,238,0) 55%); opacity:0;
  transition:opacity .45s var(--ease); filter:blur(13px); }
.glow-h:hover::before{ opacity:.55; }

/* Floating colored confetti dots (newsletter) */
@keyframes drift{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(6px,-12px);} }
.confetti{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.confetti i{ position:absolute; width:9px; height:9px; border-radius:50%; opacity:.7;
  animation:drift 7s ease-in-out infinite; }

/* Animated sheen for the brand/gradient bands */
@keyframes sheen{ 0%{ background-position:0% 50%;} 100%{ background-position:200% 50%;} }