@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&display=swap');

:root{
  --brand:#0459B2;
  --brand-dark:#023d85;
  --brand-deep:#052447;
  --navy:#071A35;
  --sky:#38BDF8;
  --sky-deep:#0EA5E9;
  --coral:#FF6B4A;
  --cream:#F3F8FF;
  --ink:#0B1B33;
  --gray:#5C6C86;
}

*{-webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;}
body{
  font-family:'Urbanist', sans-serif;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.92); transition:opacity .7s ease, transform .7s cubic-bezier(.16,.84,.44,1);}
.reveal-scale.in{opacity:1; transform:scale(1);}
.stagger > * { transition-delay:calc(var(--i) * 90ms); }

/* ---------- Buttons ---------- */
.btn-lime{
  background:#FFFFFF;
  color:var(--navy);
  font-weight:800;
  border-radius:999px;
  padding:.9rem 1.7rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, background .3s ease, color .3s ease;
  box-shadow:0 0 0 0 rgba(56,189,248,0);
}
.btn-lime:hover{ transform:translateY(-3px) scale(1.02); background:var(--sky); color:var(--navy); box-shadow:0 14px 30px -10px rgba(56,189,248,.55); }
.btn-lime:active{ transform:translateY(-1px) scale(.99); }

.btn-brand{
  background:var(--brand);
  color:#fff;
  font-weight:800;
  border-radius:999px;
  padding:.7rem 1.35rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:transform .3s cubic-bezier(.16,.84,.44,1), background .3s ease, box-shadow .3s ease;
  box-shadow:0 8px 20px -8px rgba(4,89,178,.45);
}
.btn-brand:hover{ background:var(--brand-dark); transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(4,89,178,.55); }
.btn-brand:active{ transform:translateY(0); }

.btn-ghost{
  border:1.5px solid rgba(255,255,255,.35);
  color:#fff;
  font-weight:700;
  border-radius:999px;
  padding:.85rem 1.6rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:all .3s ease;
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6); }

.btn-navy{
  background:var(--navy);
  color:#fff;
  font-weight:800;
  border-radius:999px;
  padding:.9rem 1.7rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:transform .35s cubic-bezier(.16,.84,.44,1), background .3s ease;
}
.btn-navy:hover{ transform:translateY(-3px) scale(1.02); background:var(--brand); }

.btn-outline-navy{
  border:1.5px solid rgba(11,27,51,.18);
  color:var(--navy);
  font-weight:700;
  border-radius:999px;
  padding:.85rem 1.6rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:all .3s ease;
}
.btn-outline-navy:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ---------- Hero backdrop ---------- */
.hero-sky{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(56,189,248,.16), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--brand-dark) 45%, var(--brand) 100%);
  position:relative;
}
.hero-sky::before{
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.06;
  pointer-events:none;
  z-index:1;
}

/* ---------- Duotone hero photo (blue, never green) ---------- */
.hero-photo{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  pointer-events:none;
}
.hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  filter:grayscale(1) contrast(1.15) brightness(.95);
  opacity:.65;
  transform:scale(1.02);
}
.hero-photo::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(155deg, var(--sky) 0%, var(--brand) 45%, var(--navy) 100%);
  mix-blend-mode:color;
}
.hero-photo::before{
  content:'';
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(7,26,53,.25) 0%, var(--navy) 92%);
}
.hero-photo.compact::before{
  background:linear-gradient(180deg, rgba(7,26,53,.45) 0%, var(--navy) 88%);
}

.cloud{
  position:absolute; border-radius:999px; filter:blur(2px);
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.15) 70%);
  opacity:.3;
  animation:drift 22s ease-in-out infinite;
  z-index:1;
}
@keyframes drift{
  0%,100%{ transform:translateX(0) translateY(0); }
  50%{ transform:translateX(24px) translateY(-14px); }
}

/* ---------- Floating mock cards ---------- */
.card-stage{ perspective:1400px; }
.float-card{
  transform-style:preserve-3d;
  animation:bob 6s ease-in-out infinite;
  transition:transform .25s ease-out;
  will-change:transform;
}
.float-card:nth-child(1){ animation-delay:0s; }
.float-card:nth-child(2){ animation-delay:.7s; }
.float-card:nth-child(3){ animation-delay:1.4s; }
.float-card:nth-child(4){ animation-delay:2.1s; }
.float-card:nth-child(5){ animation-delay:2.8s; }
@keyframes bob{
  0%,100%{ transform:translateY(0px) rotate(var(--rot,0deg)); }
  50%{ transform:translateY(-16px) rotate(var(--rot,0deg)); }
}

/* ---------- Marquee ---------- */
.marquee-track{
  display:flex; width:max-content;
  animation:scroll-left 26s linear infinite;
}
.marquee-track.reverse{ animation:scroll-right 30s linear infinite; }
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes scroll-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }

/* ---------- Blobs ---------- */
.blob{
  position:absolute; border-radius:50%;
  filter:blur(60px);
  opacity:.35;
  pointer-events:none;
}

/* ---------- Badge / eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:.4rem .9rem; border-radius:999px;
}

/* ---------- Tilt cards ---------- */
.tilt{ transition:transform .4s cubic-bezier(.16,.84,.44,1), box-shadow .4s ease; }
.tilt:hover{ transform:translateY(-8px) rotate(-.3deg); box-shadow:0 24px 50px -20px rgba(4,89,178,.35); }

/* ---------- Feature module rows ---------- */
.mockup-frame{
  background:#fff;
  border-radius:1.5rem;
  box-shadow:0 30px 60px -30px rgba(4,89,178,.4);
  border:1px solid rgba(4,89,178,.08);
}

/* ---------- Accordion ---------- */
.acc-panel{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.16,.84,.44,1); }
.acc-item.open .acc-panel{ max-height:400px; }
.acc-item.open .acc-chevron{ transform:rotate(135deg); }
.acc-chevron{ transition:transform .35s ease; }

/* ---------- Tab underline ---------- */
.tab-btn{ position:relative; }
.tab-btn.active{ color:var(--sky); }
.tab-btn.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:var(--sky); border-radius:99px;
}

/* ---------- Pricing highlight ---------- */
.plan-pop{
  background:linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
  color:#fff;
}

/* ---------- Count up ---------- */
.count{ font-variant-numeric:tabular-nums; }

/* ---------- Scrollbar ---------- */
::-selection{ background:var(--sky); color:var(--navy); }

/* ---------- Nav ---------- */
#siteNav{ background:rgba(255,255,255,.92); }
.nav-link{ position:relative; color:var(--navy); }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:var(--brand); transition:width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--brand); }

/* ---------- Mobile menu ---------- */
.mobile-menu{ max-height:0; overflow:hidden; transition:max-height .4s ease; background:#fff; }
.mobile-menu.open{ max-height:520px; }

/* ---------- Logo ---------- */
.logo-invert{ filter:brightness(0) invert(1); }

/* ---------- Utility ---------- */
.text-balance{ text-wrap:balance; }
@media (prefers-reduced-motion: reduce){
  .float-card, .cloud, .marquee-track, .reveal, .reveal-scale{ animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; }
}

/* ---------- Cookie consent banner ---------- */
#cookieBanner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  transform:translateY(110%);
  transition:transform .5s cubic-bezier(.16,.84,.44,1);
  padding:16px;
}
#cookieBanner.show{ transform:translateY(0); }
.cookie-card{
  max-width:1080px; margin:0 auto;
  background:var(--navy);
  border-radius:1.5rem;
  box-shadow:0 -10px 50px -12px rgba(4,89,178,.5), 0 0 0 1px rgba(255,255,255,.06);
  padding:20px 22px;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px;
}
.cookie-icon{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background:rgba(56,189,248,.15);
  display:flex; align-items:center; justify-content:center;
}
.cookie-text{ flex:1 1 280px; color:rgba(255,255,255,.7); font-size:.875rem; line-height:1.5; }
.cookie-text strong{ color:#fff; }
.cookie-text a{ color:var(--sky); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.cookie-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cookie-btn-manage{
  color:rgba(255,255,255,.75); font-weight:700; font-size:.875rem;
  padding:.7rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  transition:all .25s ease; white-space:nowrap;
}
.cookie-btn-manage:hover{ background:rgba(255,255,255,.08); color:#fff; }
.cookie-btn-reject{
  color:rgba(255,255,255,.75); font-weight:700; font-size:.875rem;
  padding:.7rem 1rem; border-radius:999px; background:transparent;
  transition:all .25s ease; white-space:nowrap;
}
.cookie-btn-reject:hover{ color:#fff; }
.cookie-btn-accept{
  background:var(--sky); color:var(--navy); font-weight:800; font-size:.875rem;
  padding:.7rem 1.4rem; border-radius:999px; white-space:nowrap;
  transition:transform .3s cubic-bezier(.16,.84,.44,1), background .3s ease, box-shadow .3s ease;
  box-shadow:0 8px 20px -8px rgba(56,189,248,.5);
}
.cookie-btn-accept:hover{ background:#fff; transform:translateY(-2px); }

/* ---------- Cookie preferences modal ---------- */
#cookieModalOverlay{
  position:fixed; inset:0; z-index:210;
  background:rgba(7,26,53,.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
#cookieModalOverlay.show{ opacity:1; pointer-events:auto; }
.cookie-modal{
  background:#fff; border-radius:1.75rem; max-width:560px; width:100%;
  max-height:88vh; overflow-y:auto;
  padding:28px 28px 24px;
  transform:scale(.95) translateY(10px); transition:transform .35s cubic-bezier(.16,.84,.44,1);
  box-shadow:0 40px 80px -20px rgba(7,26,53,.4);
}
#cookieModalOverlay.show .cookie-modal{ transform:scale(1) translateY(0); }
.cookie-pref-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:1px solid rgba(11,27,51,.07);
}
.cookie-pref-row:last-of-type{ border-bottom:none; }
.cookie-toggle{
  position:relative; width:44px; height:26px; border-radius:999px; flex-shrink:0;
  background:rgba(11,27,51,.15); cursor:pointer; transition:background .25s ease; border:none;
}
.cookie-toggle[data-on="true"]{ background:var(--brand); }
.cookie-toggle[disabled]{ opacity:.55; cursor:not-allowed; background:var(--brand); }
.cookie-toggle-knob{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition:transform .25s cubic-bezier(.16,.84,.44,1); box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.cookie-toggle[data-on="true"] .cookie-toggle-knob{ transform:translateX(18px); }


/* ---------- Motion layer (all of it switched off under prefers-reduced-motion) ---------- */
#scrollBar{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:300; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--brand),var(--sky)); pointer-events:none; }
/* cards in a row arrive one after another (their --i index is already in the markup) */
.reveal{ transition-delay:calc(var(--i,0) * 90ms); }
/* icon tile springs when its card is hovered */
.tilt .rounded-2xl{ transition:transform .45s cubic-bezier(.34,1.56,.64,1), background-color .3s ease; }
.tilt:hover .rounded-2xl{ transform:scale(1.14) rotate(-6deg); }
.tilt:hover svg{ animation:wiggle .7s ease; }
@keyframes wiggle{ 0%,100%{ transform:rotate(0) } 25%{ transform:rotate(-10deg) } 55%{ transform:rotate(8deg) } 80%{ transform:rotate(-3deg) } }
/* mock-up panels fill in row by row once they scroll into view */
.mockup-frame .space-y-2\.5 > *{ opacity:0; transform:translateX(18px); }
.mockup-frame.in .space-y-2\.5 > *{ opacity:1; transform:none;
  transition:opacity .55s ease, transform .6s cubic-bezier(.16,.84,.44,1); transition-delay:calc(.35s + var(--k,0) * 140ms); }
/* bullet lists tick in one by one */
.reveal ul.space-y-3 > li{ opacity:0; transform:translateX(-12px); }
.reveal.in ul.space-y-3 > li{ opacity:1; transform:none;
  transition:opacity .5s ease, transform .55s cubic-bezier(.16,.84,.44,1); transition-delay:calc(.25s + var(--k,0) * 110ms); }
.reveal.in ul.space-y-3 > li > span:first-child{ animation:tick .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay:calc(.45s + var(--k,0) * 110ms); }
@keyframes tick{ from{ transform:scale(0) rotate(-90deg) } to{ transform:scale(1) rotate(0) } }
/* primary buttons: soft glow pulse + light sweep */
.btn-brand, .btn-lime{ position:relative; overflow:hidden; }
.btn-brand::after, .btn-lime::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg); transition:left .7s ease; }
.btn-brand:hover::after, .btn-lime:hover::after{ left:130%; }
.pulse-cta{ animation:ctaPulse 2.8s ease-in-out infinite; }
@keyframes ctaPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(4,89,178,.35) } 60%{ box-shadow:0 0 0 14px rgba(4,89,178,0) } }
/* eyebrow gets a live dot */
.eyebrow::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:currentColor; vertical-align:middle; animation:blink 2.2s ease-in-out infinite; }
@keyframes blink{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.7) } }
/* hero clouds follow the scroll slightly */
.cloud{ will-change:transform; }
/* live activity feed */
.feed{ position:relative; height:76px; max-width:430px; margin:2rem auto 0; }
.feed-item{ text-align:left; position:absolute; inset:0; display:flex; align-items:center; gap:.85rem; padding:.9rem 1.1rem; background:#fff;
  border:1px solid rgba(11,27,51,.06); border-radius:1.1rem; box-shadow:0 18px 40px -22px rgba(4,89,178,.45);
  opacity:0; transform:translateY(18px) scale(.97); transition:opacity .55s ease, transform .6s cubic-bezier(.16,.84,.44,1); }
.feed-item.show{ opacity:1; transform:none; }
.feed-item.gone{ opacity:0; transform:translateY(-18px) scale(.97); }
.feed-dot{ width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:.8rem; }
@media (prefers-reduced-motion: reduce){
  #scrollBar{ display:none }
  .mockup-frame .space-y-2\.5 > *, .reveal ul.space-y-3 > li, .feed-item{ opacity:1 !important; transform:none !important; transition:none !important; }
  .reveal ul.space-y-3 > li > span:first-child, .pulse-cta, .eyebrow::before, .tilt:hover svg{ animation:none !important; }
  .feed-item{ position:static; margin-bottom:.5rem } .feed{ height:auto }
}
/* A full-colour illustration used as a section background (the "Pick a role" band). Unlike the duotone photo above it keeps
   its own colours; a navy wash that gets darker toward the bottom keeps the white heading and tabs readable. */
.hero-photo.illustration img{ filter:saturate(1.05); opacity:.9; object-position:center 35%; transform:none; }
.hero-photo.illustration::after{ display:none; }
.hero-photo.illustration::before{ background:linear-gradient(180deg, rgba(7,26,53,.30) 0%, rgba(7,26,53,.42) 35%, rgba(7,26,53,.78) 70%, var(--navy) 98%); }
/* the heading sits on the bright sky in the middle of the picture, so give it a soft shadow to stay readable */
#demo h2, #demo h2 + p{ text-shadow:0 2px 14px rgba(7,26,53,.65); }
#demo .eyebrow{ background:rgba(7,26,53,.62); }