:root{ --ink:#0f172a; --steel:#5980A6; --line:#e3e8ef; }

h1,h2,h3{ letter-spacing:-.025em; }
h1{ letter-spacing:-.035em; }

/* ---------- buttons ---------- */
.btn-primary{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:#fff; line-height:1;
  padding:.66rem 1.1rem; border-radius:.7rem; white-space:nowrap; background:var(--steel);
  box-shadow:0 1px 2px rgba(15,23,42,.12); transition:background .18s ease, box-shadow .18s ease, transform .18s ease; }
.btn-primary:hover{ background:#476a8d; transform:translateY(-1px); box-shadow:0 10px 22px -12px rgba(71,106,141,.8); }
.btn-dark{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:#fff; line-height:1;
  padding:.66rem 1.1rem; border-radius:.7rem; white-space:nowrap; background:var(--ink); transition:.18s ease; }
.btn-dark:hover{ background:#1e293b; transform:translateY(-1px); }
.btn-ghost{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--ink); line-height:1;
  padding:.66rem 1.1rem; border-radius:.7rem; background:#fff; border:1px solid var(--line); transition:.18s ease; }
.btn-ghost:hover{ border-color:#c6cfda; background:#f8fafc; }
.btn-outline-light{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:#fff; line-height:1;
  padding:.66rem 1.1rem; border-radius:.7rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); transition:.18s ease; }
.btn-outline-light:hover{ background:rgba(255,255,255,.14); }

/* ---------- nav (light, always) ---------- */
header[data-nav] .nav-link{ color:#475569; }
header[data-nav] .nav-link:hover, header[data-nav] .nav-link.is-active{ color:var(--ink); background:rgba(15,23,42,.05); }
header[data-nav] .nav-signin{ color:#475569; }
header[data-nav] .nav-signin:hover{ color:var(--ink); }
header[data-nav].scrolled{ background:rgba(255,255,255,.85); backdrop-filter:blur(14px) saturate(1.3);
  border-color:var(--line); box-shadow:0 1px 0 rgba(15,23,42,.04); }

/* ---------- hero: clean light mesh ---------- */
.hero-light{ position:relative; isolation:isolate; background:#fff; overflow:hidden; }
.hero-light::before{ content:""; position:absolute; inset:-30% -10% auto -10%; height:150%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 40% at 20% 0%, rgba(89,128,166,.14), transparent 62%),
    radial-gradient(36% 38% at 88% 4%, rgba(142,197,255,.14), transparent 62%); }
.hero-light::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 74%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 74%); }

/* dark section (CTA / deep dive) */
.section-dark{ background:var(--ink); color:#fff; }

/* subtle tinted band */
.band{ background:var(--paper,#f6f8fb); }

/* product screenshot frame */
.shot{ border-radius:14px; box-shadow:0 40px 80px -30px rgba(15,23,42,.35), 0 12px 30px -18px rgba(15,23,42,.20);
  border:1px solid var(--line); overflow:hidden; background:#fff; }

/* MacBook device frame — bezel + camera + aluminium base, so a screenshot reads as a real laptop */
.macbook{ position:relative; margin-bottom:17px; padding:11px 11px;
  background:linear-gradient(#17171a,#0e0e10); border:1px solid #2c2c31;
  border-radius:16px 16px 9px 9px;
  box-shadow:0 44px 84px -30px rgba(15,23,42,.42), 0 14px 32px -18px rgba(15,23,42,.28); }
.macbook::before{ content:""; position:absolute; top:4.5px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:#26262b; box-shadow:inset 0 0 0 1px #3a3a41; z-index:3; }
.macbook::after{ content:""; position:absolute; left:-5.5%; right:-5.5%; bottom:-16px; height:16px;
  background:linear-gradient(#e7e9ed,#c6c9cf 52%,#a7abb2); border-radius:0 0 15px 15px;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.5), 0 15px 24px -11px rgba(15,23,42,.4); }
/* the screen is a real MacBook 16:10, so every frame is the same shape whatever it holds */
.macbook .mb-scr{ position:relative; z-index:1; border-radius:6px; overflow:hidden; background:#fff; aspect-ratio:16/10; }

/* platform tabs — pill selector for the screenshot showcase */
.tab-pill{ cursor:pointer; border-radius:9999px; padding:7px 17px; font-size:14px; font-weight:600;
  background:#fff; box-shadow:inset 0 0 0 1px #e3e8ef; color:#475569;
  transition:box-shadow .15s, color .15s, background .15s; }
.tab-pill:hover{ box-shadow:inset 0 0 0 1px #93b6d3; color:#0f172a; }
.tab-pill.is-active{ background:#0f172a; color:#fff; box-shadow:none; }
.tab-panel{ animation:tabfade .3s ease both; }
@keyframes tabfade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* photo frame */
.photo{ border-radius:14px; overflow:hidden; position:relative; background:#e6eaf0; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* eyebrow label */
.eyebrow{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#476a8d; }

/* accent word in headings */
.accent{ color:var(--steel); }

/* organic blob behind the hero mockup */
.blob{ position:absolute; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 32% 30%, #bcd3e6, #6f97ba 72%);
  border-radius:42% 58% 63% 37% / 45% 44% 56% 55%; opacity:.55; filter:blur(3px); }
.blob-2{ background:radial-gradient(circle at 60% 40%, #cfe4ff, #93b6d3 72%); border-radius:60% 40% 47% 53% / 55% 52% 48% 45%; opacity:.5; }

/* hero workflow diagram */
.workflow-figure{ width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.workflow-figure::-webkit-scrollbar{ display:none; }
.workflow-figure svg{ display:block; width:100%; height:auto; margin-inline:auto; }
/* below the diagram's legible width, let it scroll instead of shrinking to nothing */
@media (max-width:899px){
  .workflow-figure svg{ width:880px; min-width:880px; }
  .workflow-figure{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
                            mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
}

/* floating cards around the hero mockup */
.float-card{ box-shadow:0 26px 54px -24px rgba(15,23,42,.38), 0 8px 20px -10px rgba(15,23,42,.16); }

/* colored feature card */
.feature-card{ border-radius:26px; overflow:hidden; }

/* marquee mask */
.marquee-mask{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
                       mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }

/* FAQ accordion */
details.faq{ border-bottom:1px solid var(--line); }
details.faq summary{ list-style:none; cursor:pointer; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary .chev{ transition:transform .25s ease; }
details.faq[open] summary .chev{ transform:rotate(180deg); }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }
[data-stagger]>*{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
[data-stagger].is-in>*{ opacity:1; transform:none; }
[data-stagger].is-in>*:nth-child(2){ transition-delay:.06s }
[data-stagger].is-in>*:nth-child(3){ transition-delay:.12s }
[data-stagger].is-in>*:nth-child(4){ transition-delay:.18s }
[data-stagger].is-in>*:nth-child(5){ transition-delay:.24s }
[data-stagger].is-in>*:nth-child(6){ transition-delay:.30s }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal,[data-stagger]>*{ opacity:1; transform:none; }
}