@font-face {
  font-family: "Dana";
  src: url("/fonts/DanaVF.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Dana";
  src: url("/fonts/DanaVF.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Dana";
  src: url("/fonts/DanaVF.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
}

:root {
  --navy: #28356A;
  --purple: #6D5FA8;
  --blue: #4A90E2;
  --teal: #3AB398;
  --yellow: #FFC845;
  --coral: #FF6B6B;
  --ink: #151D43;
  --muted: #68708B;
  --surface: #FFFFFF;
  --warm: #FFFDF9;
  --line: rgba(40,53,106,.11);
  --shadow-sm: 0 10px 30px rgba(40,53,106,.08);
  --shadow-md: 0 22px 55px rgba(40,53,106,.14);
  --radius: 28px;
  --shell: min(1180px, calc(100% - 40px));
  --header-h: 82px;
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink:#F7F4FF; --muted:#B9BFDA; --surface:#101C50; --warm:#08133B;
  --line:rgba(205,213,255,.14); --navy:#E9E9FF; --shadow-sm:0 10px 30px rgba(0,0,0,.2);
  --shadow-md:0 24px 60px rgba(0,0,0,.3); color-scheme:dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: "Dana", Tahoma, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 18%, rgba(74,144,226,.07), transparent 26%),
    radial-gradient(circle at 83% 32%, rgba(255,200,69,.08), transparent 24%),
    var(--warm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition:background-color .45s var(--ease),color .3s var(--ease);
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shell { width: var(--shell); margin-inline: auto; }
.section-pad { padding: 110px 0; }
.section-anchor { scroll-margin-top: 96px; }

.skip-link {
  position: fixed; top: 10px; inset-inline-start: 10px; z-index: 9999;
  transform: translateY(-150%);
  padding: 10px 14px; border-radius: 10px;
  background: var(--navy); color: #fff;
}
.skip-link:focus { transform: none; }

/* Header */
.site-header {
  position: fixed;
  top: 0; inset-inline: 0;
  z-index: 1000;
  transition: .35s var(--ease);
}
.site-header::before {
  content:"";
  position:absolute; inset:0;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0) saturate(100%);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  transition: .35s var(--ease);
}
.site-header.scrolled::before {
  background: rgba(255,255,255,.94);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 35px rgba(40,53,106,.08);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.header-inner {
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
  position: relative;
  z-index: 2;
}
.site-header.scrolled .header-inner { min-height: 70px; }

.brand {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.brand-logo { width:112px;height:auto;display:block; }
.brand-logo-dark { display:none; }
[data-theme="dark"] .brand-logo-light { display:none; }
[data-theme="dark"] .brand-logo-dark { display:block; }
.brand-mark { color: var(--coral); font-size: .62em; transform: translateY(-4px); }
.brand-red { color: var(--coral); }
.brand-teal { color: var(--teal); }
.brand-navy { color: var(--navy); }

.desktop-nav {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.5vw, 32px);
}
.nav-link {
  position: relative;
  padding: 29px 0 25px;
  font-size: 14px; font-weight: 700;
  color: #303851;
  transition: color .2s ease;
}
.nav-link::after {
  content:"";
  position:absolute; height:2px; border-radius:9px;
  inset-inline: 50%; bottom: 17px;
  background: linear-gradient(90deg, var(--purple), #7F56FF);
  transition: inset-inline .25s var(--ease);
}
.nav-link:hover, .nav-link.active { color: var(--purple); }
.nav-link.active::after, .nav-link:hover::after { inset-inline: 0; }

.header-actions { display:flex; align-items:center; gap:10px; direction:ltr; }
.theme-toggle {
  width:43px;height:43px;padding:0;position:relative;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.82);color:#263368;
  box-shadow:0 6px 18px rgba(40,53,106,.07);cursor:pointer;transition:.25s var(--ease);
}
.theme-toggle:hover { transform:translateY(-2px) rotate(8deg); }
.theme-icon { position:absolute;font-size:19px;line-height:1;transition:.35s var(--ease); }
.theme-icon.moon { transform:translateY(32px) rotate(-45deg);opacity:0; }
[data-theme="dark"] .theme-icon.sun { transform:translateY(-32px) rotate(45deg);opacity:0; }
[data-theme="dark"] .theme-icon.moon { transform:none;opacity:1; }
.pill-btn {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.86);
  color: var(--navy);
  border-radius: 999px;
  min-height: 43px;
  display: inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 0 16px;
  font-size: 13px; font-weight:800;
  box-shadow: 0 6px 18px rgba(40,53,106,.06);
  transition: .25s var(--ease);
  cursor:pointer;
}
.pill-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.login-btn {
  color:#fff; border-color:transparent;
  background: linear-gradient(135deg, #7659E7, #5336D4);
  padding-inline: 22px;
}
.language-btn svg { width:17px; }
.language-btn .chevron { width:14px; }

.menu-toggle {
  display:none; width:44px; height:44px;
  border:1px solid var(--line); border-radius:14px;
  background:#fff; align-items:center; justify-content:center;
  flex-direction:column; gap:5px; cursor:pointer;
}
.menu-toggle span {
  width:20px; height:2px; background:var(--navy); border-radius:10px;
  transition:.25s var(--ease);
}
.menu-toggle.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity:0; }
.menu-toggle.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: absolute; top: 100%; inset-inline: 16px;
  background: rgba(255,255,255,.97);
  border:1px solid var(--line);
  box-shadow: var(--shadow-md);
  border-radius: 22px;
  padding:16px;
  opacity:0; transform: translateY(-12px) scale(.98);
  pointer-events:none;
  transition:.25s var(--ease);
  z-index:2;
}
.mobile-menu.open { opacity:1; transform:none; pointer-events:auto; }
.mobile-nav { display:grid; }
.mobile-nav a {
  padding:14px 12px; border-bottom:1px solid var(--line);
  font-weight:750;
}
.mobile-actions { display:flex; gap:10px; padding-top:14px; }
.mobile-actions > * { flex:1; }

/* Hero */
.hero {
  min-height: min(840px, 100vh);
  padding-top: var(--header-h);
  position: relative;
  isolation: isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hero-backdrop {
  position:absolute; inset:0; z-index:-3;
  background:
    linear-gradient(90deg, rgba(255,255,255,.11), rgba(255,255,255,0) 34%),
    url("./assets/images/hero-background.webp") center/cover no-repeat;
  transform: scale(1.02);
  animation: heroBreath 12s ease-in-out infinite alternate;
}
.hero-backdrop::after {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%, rgba(255,253,249,.12));
}
.hero-inner {
  display:grid;
  grid-template-columns: minmax(360px,.82fr) minmax(440px,1.18fr);
  gap: clamp(26px,4vw,70px);
  align-items:center;
  direction:ltr;
  padding-block: 76px 105px;
}
.hero-copy { direction:rtl; text-align:right; max-width:510px; }
.eyebrow, .section-kicker {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:850;
  color: var(--purple);
  background: rgba(255,255,255,.74);
  border:1px solid rgba(109,95,168,.15);
  padding:8px 12px;
  border-radius:999px;
  box-shadow:0 8px 22px rgba(40,53,106,.05);
}
.eyebrow span { width:8px; height:8px; background:var(--coral); border-radius:50%; box-shadow:0 0 0 5px rgba(255,107,107,.12); }
.hero h1 {
  margin:18px 0 14px;
  font-size: clamp(56px,6.3vw,92px);
  line-height:.98;
  letter-spacing:-4px;
  color:#111B46;
}
.hero h1 strong {
  color: #5542C8;
  font-weight:900;
  text-shadow:0 9px 20px rgba(85,66,200,.12);
}
.hero-copy > p {
  margin:0; max-width:500px;
  color:#39415F;
  font-size:clamp(16px,1.4vw,19px);
  line-height:2;
  font-weight:550;
}
.hero-highlight { color:#6547D8;font-weight:850; }
.hero-cta-row { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-top:28px; }
.primary-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 24px;
  color:#fff; font-weight:850; font-size:15px;
  border-radius:999px;
  background:linear-gradient(135deg, #795AEF, #5632D6);
  box-shadow:0 13px 30px rgba(86,50,214,.25);
  transition:.28s var(--ease);
}
.primary-btn:hover { transform:translateY(-3px) scale(1.015); box-shadow:0 19px 40px rgba(86,50,214,.3); }
.primary-btn svg { transition:.25s var(--ease); }
.primary-btn:hover svg { transform:translateX(-3px); }
.text-link { color:var(--navy); font-weight:800; border-bottom:1px dashed rgba(40,53,106,.36); padding-bottom:3px; }
.hero-trust { display:flex; flex-wrap:wrap; gap:16px; margin-top:24px; color:#5B6380; font-size:12px; font-weight:720; }
.hero-trust span { display:inline-flex; align-items:center; gap:6px; }
.trust-dot { width:7px; height:7px; border-radius:50%; }
.trust-dot.teal { background:var(--teal); }
.trust-dot.purple { background:var(--purple); }
.trust-dot.yellow { background:var(--yellow); }

.hero-visual { direction:rtl; position:relative; min-height:520px; display:grid; place-items:center; }
.bobby {
  position:relative; z-index:2;
  width:min(620px, 100%);height:auto;
  object-fit:contain;
  filter: drop-shadow(0 28px 30px rgba(88,35,29,.2));
  animation: bobbyFloat 4.4s ease-in-out infinite;
  transform-origin:50% 85%;
  clip-path:inset(0 0 0 10px);
}
.bobby-halo {
  position:absolute; width:460px; height:250px; bottom:65px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,69,.28), rgba(255,255,255,0) 66%);
  filter:blur(4px);
}
.mascot-chip {
  position:absolute; z-index:3;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(10px);
  padding:10px 14px; border-radius:999px;
  font-size:12px; font-weight:850; color:var(--navy);
  animation: chipFloat 4.8s ease-in-out infinite;
}
.chip-one { top:23%; right:3%; }
.chip-two { bottom:21%; left:4%; animation-delay:-2s; color:var(--coral); }

.hero-stars .star {
  position:absolute; z-index:-1;
  color:var(--yellow);
  text-shadow:0 5px 14px rgba(255,200,69,.34);
  animation: starDrift 5s ease-in-out infinite;
}
.hero-stars .star svg { width:1em;height:1em;display:block;overflow:visible;stroke:none;fill:currentColor; }
.hero-stars .star svg path { stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill; }
.star-a { top:20%; left:44%; font-size:34px; color:#7b5bd3!important; transform:rotate(-15deg); }
.star-b { top:18%; right:15%; font-size:28px; color:var(--yellow)!important; animation-delay:-2s!important; }
.star-c { top:31%; left:55%; font-size:20px; color:var(--teal)!important; animation-delay:-3.4s!important; }

.hero-fade {
  position:absolute; bottom:-2px; inset-inline:0; height:90px; z-index:5;
  background:linear-gradient(to bottom, transparent, var(--warm));
  pointer-events:none;
}

/* App */
.app-section { position:relative; }
.app-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap:clamp(40px,6vw,86px);
  direction:ltr;
}
.app-visual {
  position:relative; min-height:500px;
  display:grid; place-items:center;
  direction:ltr;
}
.app-visual::before {
  content:"";
  position:absolute; inset:13% 7%;
  background:radial-gradient(circle, rgba(74,144,226,.15), rgba(109,95,168,.06) 46%, transparent 70%);
  border-radius:50%;
  filter:blur(5px);
}
.app-visual img {
  position:relative; z-index:2;
  width:min(610px,100%);
  filter: drop-shadow(0 28px 38px rgba(40,53,106,.14));
}
.app-orbit {
  position:absolute; border:1px solid rgba(109,95,168,.14);
  border-radius:50%;
  animation:spin 18s linear infinite;
}
.orbit-one { width:420px; height:420px; }
.orbit-two { width:520px; height:520px; border-style:dashed; animation-duration:29s; animation-direction:reverse; }
.app-copy { direction:rtl;text-align:center; }
.section-kicker { background:#fff; }
.section-kicker span { color:var(--coral); }
.app-kicker { margin-inline:auto; }
.app-kicker .app-kicker-text { color:inherit; }
.app-kicker-heart {
  width:17px;height:17px;flex:0 0 auto;fill:var(--coral);stroke:none;
  filter:drop-shadow(0 3px 6px rgba(255,107,107,.25));
}
.app-copy h2, .section-heading h2, .cta-copy h2 {
  margin:16px 0;
  color:#111B46;
  font-size:clamp(30px,3.35vw,44px);
  line-height:1.3;
  letter-spacing:-1.7px;
  text-wrap:balance;
}
.app-copy > p {
  color:var(--muted);font-size:16.5px;line-height:2.05;margin:0 auto 26px;max-width:590px;
  text-wrap:pretty;
}
.feature-list {
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:34px;padding-top:4px;
}
.feature {
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;
  transition:.27s var(--ease);
}
.feature:hover { transform:translateY(-6px);box-shadow:none;background:transparent; }
.feature img {
  width:78px;height:78px;object-fit:contain;border-radius:50%;
  filter:drop-shadow(0 10px 18px rgba(40,53,106,.1));
}
.feature h3 { margin:0 0 2px;font-size:14px;color:var(--navy);white-space:nowrap; }
.feature p { margin:0;font-size:12px;line-height:1.7;color:var(--muted); }

/* Roles */
.roles {
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,252,247,.95));
}
.roles::before {
  content:""; position:absolute; left:-8%; top:8%; width:370px; height:370px;
  border-radius:50%; background:rgba(109,95,168,.055); filter:blur(2px);
}
.section-heading { text-align:center; max-width:820px; margin:0 auto 52px; position:relative; }
.roles .section-heading { max-width:1120px; }
.roles .section-heading p { max-width:none;white-space:nowrap; }
.section-heading .section-kicker { margin:auto; }
.section-heading p {
  color:var(--muted);line-height:2;font-size:16px;margin:0 auto;max-width:820px;
  text-wrap:pretty;
}

.roles-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  position:relative;
}
.role-card {
  min-width:0;
  aspect-ratio: .75;
  position:relative;
  border-radius:30px;
  overflow:visible;
  box-shadow:0 16px 35px rgba(40,53,106,.11);
  background:transparent;
  transform-style:preserve-3d;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
  margin-bottom:22px;
}
.role-card:hover { transform:translateY(-9px); box-shadow:0 26px 50px rgba(40,53,106,.17); }
.role-card img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--ease);
  border-radius:inherit;
}
.role-card:hover img { transform:scale(1.035); }
.role-card::after {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.76) 0%, rgba(255,255,255,.50) 24%, transparent 48%);
  pointer-events:none;
  border-radius:inherit;
}
.role-overlay {
  position:relative; z-index:2; padding:25px 23px;
  display:flex; flex-direction:column; align-items:flex-start;
  height:100%;
}
.role-icon {
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 18%, white);
  color:var(--accent);
  font-weight:900; margin-bottom:8px;
}
.role-overlay h3 {
  color:var(--accent);margin:0 0 7px;font-size:17px;font-weight:900;
  white-space:nowrap;
}
.role-overlay p {
  margin:0;color:#37405B;line-height:1.85;font-size:13.25px;max-width:100%;
  text-wrap:pretty;
}
.role-overlay a {
  position:absolute;bottom:-20px;inset-inline-start:50%;transform:translateX(50%);
  display:inline-flex; align-items:center; gap:8px;
  min-height:39px; padding:0 17px;
  border-radius:999px;
  color:#fff; background:var(--accent);
  font-size:12px; font-weight:850;
  white-space:nowrap;width:max-content;
  box-shadow:0 10px 22px color-mix(in srgb, var(--accent) 30%, transparent);
  transition:.25s var(--ease);
}
.role-overlay a:hover { transform:translateX(50%) translateY(-3px) scale(1.03); }

/* Values */
.content-strip { padding-top:30px; }
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.value-card {
  position:relative; overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,.76);
  padding:30px;
  border-radius:24px;
  box-shadow:0 12px 28px rgba(40,53,106,.06);
}
.value-number {
  position:absolute; left:18px; top:3px;
  font-size:70px; font-weight:900;
  color:rgba(109,95,168,.08);
  letter-spacing:-5px;
}
.value-card h3 { margin:0 0 9px;color:var(--navy);font-size:17px;white-space:nowrap; }
.value-card p { margin:0;color:var(--muted);line-height:1.95;font-size:14.25px;text-wrap:pretty; }

/* CTA */
.cta-section { padding:20px 0 90px; }
.cta-banner {
  position:relative; overflow:hidden;
  min-height:410px;
  border-radius:36px;
  box-shadow:0 26px 60px rgba(40,53,106,.14);
  isolation:isolate;
}
.cta-bg {
  position:absolute; inset:0; z-index:-2;
  background:url("./assets/images/cta-background.webp") center/cover no-repeat;
  transition:transform 1s var(--ease);
}
.cta-banner:hover .cta-bg { transform:scale(1.015); }
.cta-banner::after {
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(255,255,255,0) 35%, rgba(255,248,235,.25) 60%, rgba(255,247,231,.66) 100%);
}
.cta-copy {
  width:min(520px, 55%);
  margin-inline-start:auto;
  padding:62px 56px;
  text-align:right;
}
.section-kicker.light { background:rgba(255,255,255,.65); color:var(--navy); }
.cta-copy h2 { font-size:clamp(32px,3.8vw,48px);margin-bottom:12px; }
.cta-copy p { color:#38415D;line-height:1.9;font-size:16px;max-width:460px;text-wrap:pretty; }
.cta-btn { margin-top:9px; }

/* Footer */
.site-footer {
  padding:74px 0 24px;
  background:
    radial-gradient(circle at 10% 20%, rgba(74,144,226,.08), transparent 26%),
    #fff;
  border-top:1px solid rgba(40,53,106,.06);
}
.footer-grid {
  display:grid;
  grid-template-columns:1.45fr repeat(4, .75fr);
  gap:42px;
}
.footer-brand p { max-width:330px; color:var(--muted); font-size:13px; line-height:1.9; }
.footer-logo { margin-bottom:10px; }
.socials { display:flex; gap:9px; margin-top:18px; }
.socials a {
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--line);
  color:var(--navy); background:#fff;
  transition:.25s var(--ease);
}
.socials a:hover { transform:translateY(-3px); color:var(--purple); box-shadow:var(--shadow-sm); }
.footer-col { display:flex; flex-direction:column; gap:11px; }
.footer-col h3 { margin:5px 0 8px; color:var(--navy); font-size:14px; }
.footer-col a { color:#69708B; font-size:12.5px; transition:.2s ease; }
.footer-col a:hover { color:var(--purple); transform:translateX(-3px); }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-top:1px solid var(--line);
  padding-top:22px; margin-top:48px;
  color:#8A90A5; font-size:11.5px;
}
.footer-bottom b { color:var(--coral); }

/* Reveal */
.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .72s var(--ease), transform .72s var(--ease);
}
.reveal.in-view { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.10s; }
.reveal-delay-2 { transition-delay:.18s; }
.reveal-delay-3 { transition-delay:.26s; }

/* Animations */
@keyframes heroBreath { to { transform:scale(1.045) translate3d(-.3%,.3%,0); } }
@keyframes bobbyFloat {
  0%,100% { transform:translateY(0) rotate(-1deg); }
  50% { transform:translateY(-13px) rotate(1.2deg); }
}
@keyframes chipFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes starDrift { 0%,100%{transform:translateY(0) rotate(-10deg)} 50%{transform:translateY(-14px) rotate(10deg)} }
@keyframes spin { to { transform:rotate(360deg); } }

/* Responsive */
@media (max-width: 1080px) {
  :root { --shell:min(100% - 32px, 1000px); }
  .desktop-nav { gap:16px; }
  .nav-link { font-size:12.5px; }
  .header-actions .language-btn span { display:none; }
  .hero-inner { grid-template-columns:.92fr 1.08fr; gap:20px; }
  .hero-visual { min-height:470px; }
  .roles-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
  .role-card { aspect-ratio:.78; }
  .footer-grid { grid-template-columns:1.2fr repeat(2,1fr); }
  .roles .section-heading p { white-space:normal;max-width:850px; }
}

@media (max-width: 820px) {
  :root { --header-h:72px; --shell:min(100% - 28px, 720px); }
  .desktop-nav, .header-actions { display:none; }
  .header-inner { grid-template-columns:auto 1fr auto; }
  .menu-toggle { display:flex; justify-self:end; }
  .brand { font-size:25px; }

  .hero { min-height:auto; padding-top:var(--header-h); }
  .hero-inner {
    grid-template-columns:1fr;
    grid-template-areas:"visual" "copy";
    padding-block:36px 85px;
    gap:0;
  }
  .hero-copy { grid-area:copy; text-align:center; margin:auto; }
  .hero-visual { grid-area:visual; min-height:430px; }
  .hero h1 { font-size:clamp(50px,12vw,76px); }
  .hero-copy > p { margin-inline:auto; }
  .hero-cta-row, .hero-trust { justify-content:center; }
  .bobby { width:min(490px,92vw); }
  .mascot-chip { display:none; }

  .section-pad { padding:82px 0; }
  .app-grid { grid-template-columns:1fr; gap:28px; }
  .app-copy { text-align:center; }
  .app-visual { min-height:auto; }
  .app-copy > p { max-width:640px; margin-inline:auto; }
  .feature-list { max-width:620px; margin-inline:auto; text-align:right; }
  .orbit-one { width:330px; height:330px; }
  .orbit-two { width:420px; height:420px; }

  .value-grid { grid-template-columns:1fr; }
  .cta-banner { min-height:520px; }
  .cta-banner::after { background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,248,235,.86) 67%, rgba(255,247,231,.95)); }
  .cta-copy { width:100%; padding:270px 28px 34px; text-align:center; }
  .cta-copy p { margin-inline:auto; }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .footer-brand { grid-column:1/-1; }
}

@media (max-width: 560px) {
  :root { --shell:calc(100% - 22px); }
  .hero-inner { padding-top:22px; }
  .hero-visual { min-height:350px; }
  .hero h1 { letter-spacing:-2.6px; margin-top:12px; }
  .hero-copy > p { font-size:14px; line-height:1.95; }
  .hero-cta-row { flex-direction:column; gap:13px; }
  .primary-btn { width:min(100%, 310px); }
  .hero-trust { gap:10px; }
  .star-a { left:12%; }
  .star-b { right:8%; }

  .section-pad { padding:66px 0; }
  .app-copy h2, .section-heading h2 { font-size:34px; }
  .feature { grid-template-columns:62px 1fr; border-radius:18px; }
  .feature img { width:58px; height:58px; }

  .roles-grid { grid-template-columns:1fr; gap:18px; }
  .role-card { max-width:410px; width:100%; margin-inline:auto; aspect-ratio:.76; }
  .role-overlay { padding:24px 25px; }
  .role-overlay h3 { font-size:20px; }
  .role-overlay p { font-size:13px; }

  .cta-section { padding-bottom:58px; }
  .cta-banner { min-height:470px; border-radius:27px; }
  .cta-copy { padding-top:245px; }
  .cta-copy h2 { font-size:34px; }

  .site-footer { padding-top:54px; }
  .footer-grid { gap:30px 24px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal { opacity:1; transform:none; }
}

/* Dark mode: the reference's night-sky mood while retaining the same content hierarchy. */
[data-theme="dark"] body {
  background:radial-gradient(circle at 18% 10%,rgba(100,64,211,.22),transparent 25%),
             radial-gradient(circle at 82% 32%,rgba(39,89,177,.2),transparent 28%),#08133B;
}
[data-theme="dark"] .site-header::before { background:transparent; }
[data-theme="dark"] .site-header.scrolled::before { background:rgba(7,17,55,.92);box-shadow:0 12px 35px rgba(0,0,0,.22); }
[data-theme="dark"] .nav-link { color:#E5E8FA; }
[data-theme="dark"] .nav-link:hover,[data-theme="dark"] .nav-link.active { color:#B8A6FF; }
[data-theme="dark"] .brand-logo { filter:drop-shadow(0 2px 10px rgba(0,0,0,.16)); }
[data-theme="dark"] .pill-btn,[data-theme="dark"] .theme-toggle { background:rgba(19,31,82,.88);color:#F6F4FF;border-color:rgba(255,255,255,.14); }
[data-theme="dark"] .login-btn { background:linear-gradient(135deg,#8068ED,#5C3FD0); }
[data-theme="dark"] .hero-backdrop { filter:saturate(1.12) brightness(.48) hue-rotate(13deg); }
[data-theme="dark"] .hero-backdrop::after { background:linear-gradient(180deg,rgba(5,12,43,.08),rgba(9,17,56,.08) 55%,#08133B 100%); }
[data-theme="dark"] .hero h1,[data-theme="dark"] .app-copy h2,[data-theme="dark"] .section-heading h2 { color:#FFF; }
[data-theme="dark"] .hero h1 strong { color:#B79AFF;text-shadow:0 0 34px rgba(141,105,255,.32); }
[data-theme="dark"] .hero-highlight { color:#B79AFF; }
[data-theme="dark"] .hero-copy>p,[data-theme="dark"] .text-link,[data-theme="dark"] .hero-trust { color:#E1E4F4; }
[data-theme="dark"] .eyebrow,[data-theme="dark"] .section-kicker { background:rgba(26,39,91,.76);color:#D0C5FF;border-color:rgba(184,166,255,.2); }
[data-theme="dark"] .mascot-chip { background:rgba(18,31,81,.86);color:#F7F5FF;border-color:rgba(255,255,255,.15); }
[data-theme="dark"] .hero-fade { background:linear-gradient(to bottom,transparent,#08133B); }
[data-theme="dark"] .app-section { background:radial-gradient(circle at 25% 45%,rgba(65,104,204,.13),transparent 32%); }
[data-theme="dark"] .value-card { background:rgba(18,31,80,.76);border-color:rgba(255,255,255,.1); }
[data-theme="dark"] .feature,[data-theme="dark"] .feature:hover { background:transparent; }
[data-theme="dark"] .feature h3,[data-theme="dark"] .value-card h3 { color:#F6F4FF; }
[data-theme="dark"] .roles { background:linear-gradient(180deg,rgba(10,21,62,.5),rgba(15,27,72,.96)); }
[data-theme="dark"] .section-heading p,[data-theme="dark"] .app-copy>p,[data-theme="dark"] .feature p,[data-theme="dark"] .value-card p { color:#B9BFDA; }
[data-theme="dark"] .content-strip { background:#0F1B4A; }
[data-theme="dark"] .cta-banner::after { background:linear-gradient(90deg,rgba(4,10,39,.12) 30%,rgba(8,18,58,.5) 67%,rgba(9,19,57,.82)); }
[data-theme="dark"] .cta-copy h2 { color:#FFF; }
[data-theme="dark"] .cta-copy p { color:#E2E6F7; }
[data-theme="dark"] .site-footer { background:radial-gradient(circle at 10% 20%,rgba(77,99,190,.16),transparent 30%),#071138;border-top-color:rgba(255,255,255,.08); }
[data-theme="dark"] .footer-col h3,[data-theme="dark"] .mobile-footer-links summary { color:#F2F0FF; }
[data-theme="dark"] .footer-col a,[data-theme="dark"] .footer-brand p { color:#AEB6D5; }
[data-theme="dark"] .socials a { background:#101E50;color:#EDEAFF; }

@media (max-width:820px) {
  [data-theme="dark"] body { background:#08133B; }
  [data-theme="dark"] .site-header::before { background:transparent; }
  [data-theme="dark"] .site-header.scrolled::before { background:rgba(7,17,55,.94); }
  [data-theme="dark"] .menu-toggle { background:#111F52;border-color:rgba(255,255,255,.1); }
  [data-theme="dark"] .menu-toggle span { background:#F4F1FF; }
  [data-theme="dark"] .mobile-menu { background:rgba(10,21,61,.98); }
  [data-theme="dark"] .mobile-nav a { background:#111F50;color:#E7E9F7; }
  [data-theme="dark"] .mobile-hero-sheet { background:#0B1744; }
  [data-theme="dark"] .mobile-hero-sheet h1,[data-theme="dark"] .mobile-section-head h2 { color:#FFF; }
  [data-theme="dark"] .mobile-hero-sheet p,[data-theme="dark"] .mobile-section-head p { color:#B9BFDA; }
  [data-theme="dark"] .mobile-proof-row span,[data-theme="dark"] .mobile-feature-card { background:#111F50;color:#C7CBE0; }
  [data-theme="dark"] .mobile-app-showcase { background:radial-gradient(circle at 70% 20%,rgba(58,179,152,.13),transparent 30%),radial-gradient(circle at 10% 80%,rgba(109,95,168,.26),transparent 36%),#0E1D50;border-color:rgba(255,255,255,.08); }
  [data-theme="dark"] .mobile-app-chip { background:rgba(18,31,77,.92); }
  [data-theme="dark"] .mobile-app-chip b,[data-theme="dark"] .mobile-feature-card h3 { color:#F4F1FF; }
  [data-theme="dark"] .mobile-app-chip span,[data-theme="dark"] .mobile-feature-card p { color:#AEB6D5; }
  [data-theme="dark"] .cta-banner::after { background:linear-gradient(90deg,rgba(4,10,39,0),rgba(8,18,58,.22) 45%,rgba(9,19,57,.85) 100%); }
}

@supports not (color: color-mix(in srgb, red 50%, white)) {
  .role-icon { background:#fff; }
}

/* Pointer parallax is additive and harmless when unset. */
@media (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .bobby { translate: var(--px, 0) var(--py, 0); transition: translate .18s ease-out; }
}


/* ===== Mobile Product Experience v3 ===== */
.mobile-product-hero,
.mobile-app-experience,
.mobile-footer-links,
.mobile-action-dock,
.role-scroll-dots { display:none; }

.cta-section { width:100%; padding:0; }
.cta-banner { min-height:500px; border-radius:0; box-shadow:none; }
.cta-content { min-height:500px; display:flex; align-items:center; }
.cta-copy { margin-inline-end:auto;margin-inline-start:0;padding-inline:0;text-align:right; }
.cta-copy h2 span,.cta-copy p span { display:block;white-space:nowrap; }
.shooting-star { position:relative;width:27px;height:22px;display:inline-grid;place-items:center; }
.shooting-star svg { position:relative;z-index:2;width:19px;height:19px;fill:#FFD044;stroke:#F5A900;stroke-width:1.2;filter:drop-shadow(0 3px 6px rgba(255,190,30,.45)); }
.shooting-star i {
  position:absolute;width:25px;height:3px;left:-13px;top:11px;border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,208,68,.85));transform:rotate(-18deg);
}
.shooting-star i::before,.shooting-star i::after { content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:#FFE788;left:5px; }
.shooting-star i::before { top:-5px; }.shooting-star i::after { top:5px;left:10px; }
.cta-btn:hover .shooting-star { animation:shootingStar .65s var(--ease); }
@keyframes shootingStar { 50% { transform:translate(4px,-3px) rotate(8deg) scale(1.12); } }

@media (min-width:821px) {
  .hero-visual { min-height:470px; }
  .bobby { width:min(500px,88%); }
  .bobby-halo { width:390px; height:205px; }
}

@media (max-width:820px) {
  :root { --header-h:64px; --shell:min(calc(100% - 28px),720px); }
  html { scroll-padding-top:76px; }
  body { padding-bottom:calc(82px + env(safe-area-inset-bottom)); background:#FFFDF9; }

  .site-header::before {
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .site-header.scrolled::before {
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
  }
  [data-theme="dark"] .site-header.scrolled::before { background:rgba(7,17,55,.94); }
  .header-inner,.site-header.scrolled .header-inner { min-height:64px; }
  .desktop-nav,.header-actions { display:none; }
  .header-inner { grid-template-columns:auto 1fr auto; gap:12px; }
  .brand { gap:0; }
  .brand-logo { width:90px; }
  .menu-toggle {
    display:flex; justify-self:end; width:42px; height:42px; border-radius:14px;
    border-color:rgba(40,53,106,.08); box-shadow:0 7px 20px rgba(40,53,106,.07);
  }

  .mobile-menu {
    position:fixed; top:72px; right:12px; left:12px; bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:1001; padding:18px; border-radius:26px; background:rgba(255,255,255,.98);
    box-shadow:0 28px 80px rgba(24,31,68,.22); transform:translateY(18px) scale(.98); overflow-y:auto;
  }
  .mobile-menu.open { transform:none; }
  body.menu-open::after {
    content:""; position:fixed; inset:0; z-index:999; background:rgba(20,28,62,.28);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  }
  .mobile-nav { display:grid; gap:7px; }
  .mobile-nav a {
    min-height:54px; padding:0 16px; display:flex; align-items:center; border:0; border-radius:15px;
    color:var(--navy); font-size:14px; font-weight:800; background:#FAFAFD;
  }
  .mobile-nav a:first-child { color:#fff; background:linear-gradient(135deg,#7860D9,#5D48C7); }
  .mobile-actions { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }

  /* mobile-only hero */
  .hero-inner,.hero-fade { display:none; }
  .mobile-product-hero { display:block; width:100%; padding-top:var(--header-h); }
  .hero { min-height:0; padding-top:0; display:block; overflow:hidden; background:#F7FBFF; }
  .hero-backdrop {
    inset:0 0 auto; height:390px; background-position:62% center; animation:none; transform:scale(1.02);
  }
  .hero-backdrop::after {
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04) 50%,rgba(247,251,255,.92) 100%);
  }
  .hero-stars { opacity:.75; }
  .star-a { top:16%; left:8%; font-size:22px; }
  .star-b { top:13%; right:9%; font-size:20px; }
  .star-c { top:31%; left:14%; font-size:15px; }

  .mobile-hero-scene {
    position:relative; height:340px; max-width:720px; margin:0 auto; overflow:hidden;
  }
  .mobile-scene-badge {
    position:absolute; top:18px; right:16px; z-index:4; display:inline-flex; align-items:center; gap:7px;
    padding:9px 12px; border-radius:999px; color:var(--navy); background:rgba(255,255,255,.84);
    border:1px solid rgba(255,255,255,.95); box-shadow:0 10px 28px rgba(40,53,106,.10);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-size:11px; font-weight:850;
  }
  .mobile-scene-badge i { color:var(--coral); font-style:normal; }
  .mobile-bobby {
    position:absolute; z-index:3; width:min(245px,63vw);height:auto; bottom:8px; left:50%; transform:translateX(-50%);
    filter:drop-shadow(0 24px 26px rgba(89,39,29,.22)); animation:mobileBobbyFloat 4.8s ease-in-out infinite;
    clip-path:inset(0 0 0 10px);
  }
  .mobile-float-tag {
    position:absolute; z-index:4; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.86);
    border:1px solid rgba(255,255,255,.88); color:#4B5470; box-shadow:0 10px 26px rgba(40,53,106,.10);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:10px; font-weight:800;
  }
  .mobile-float-tag-a { left:16px; top:104px; }
  .mobile-float-tag-b { right:18px; top:190px; color:var(--purple); }

  .mobile-hero-sheet {
    position:relative; z-index:5; width:calc(100% - 22px); max-width:690px; margin:-34px auto 0;
    padding:25px 20px 18px; border-radius:28px 28px 0 0;
    background:radial-gradient(circle at 10% 0,rgba(74,144,226,.07),transparent 31%),#FFFDF9;
    box-shadow:0 -16px 38px rgba(40,53,106,.09); text-align:right;
  }
  .mobile-overline { display:inline-flex; align-items:center; color:var(--purple); font-size:11px; font-weight:850; }
  .mobile-hero-sheet h1 {
    margin:8px 0 9px; font-size:clamp(39px,11vw,55px); line-height:1.08; letter-spacing:-2.1px; color:#17204C;
  }
  .mobile-hero-sheet h1 strong { color:#5845CB; }
  .mobile-hero-sheet>p { margin:0; color:#626B84; font-size:13.3px; line-height:1.85; }
  .mobile-main-cta {
    width:100%; min-height:54px; margin-top:19px; padding:0 18px; display:flex; align-items:center;
    justify-content:space-between; border-radius:17px; color:#fff; background:linear-gradient(135deg,#795FE6,#5639CC);
    box-shadow:0 14px 29px rgba(86,57,204,.27); font-size:14px; font-weight:900;
  }
  .mobile-main-cta svg { width:21px; height:21px; direction:ltr; }
  .mobile-proof-row {
    margin-top:15px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; color:#68708A;
    font-size:10.5px; font-weight:750;
  }
  .mobile-proof-row span {
    min-height:32px; display:flex; align-items:center; justify-content:center; gap:6px;
    border:1px solid rgba(40,53,106,.07); border-radius:12px; background:#fff;
  }
  .mobile-proof-row i { width:7px; height:7px; border-radius:50%; background:var(--dot); }

  /* mobile app section */
  .app-section { padding:62px 0 50px; overflow:hidden; }
  .app-grid { display:none; }
  .mobile-app-experience { display:block; }
  .mobile-section-head { max-width:560px; }
  .mobile-section-head h2 {
    margin:9px 0; color:#17204C; font-size:clamp(32px,8.5vw,43px); line-height:1.28; letter-spacing:-1.4px;
  }
  .mobile-section-head p { margin:0; max-width:500px; color:var(--muted); font-size:13px; line-height:1.85; }

  .mobile-app-showcase {
    position:relative; min-height:330px; margin-top:28px; border-radius:28px; overflow:hidden; display:grid; place-items:center;
    background:radial-gradient(circle at 70% 20%,rgba(58,179,152,.14),transparent 30%),
               radial-gradient(circle at 10% 80%,rgba(109,95,168,.16),transparent 36%),
               linear-gradient(160deg,#F4F8FF,#FFFDF9);
    border:1px solid rgba(40,53,106,.07);
  }
  .mobile-app-glow {
    position:absolute; width:230px; height:230px; border-radius:50%; background:rgba(74,144,226,.16); filter:blur(36px);
  }
  .mobile-app-showcase>img {
    position:relative; z-index:2; width:min(480px,104%); transform:translateY(14px);
    filter:drop-shadow(0 22px 30px rgba(40,53,106,.16));
  }
  .mobile-app-chip {
    position:absolute; z-index:3; width:128px; padding:10px 11px; border-radius:15px; background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.96); box-shadow:0 12px 25px rgba(40,53,106,.10);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .mobile-app-chip b,.mobile-app-chip span { display:block; }
  .mobile-app-chip b { color:var(--navy); font-size:10.5px; margin-bottom:2px; }
  .mobile-app-chip span { color:#7A8196; font-size:9px; }
  .mobile-app-chip-top { top:18px; right:16px; }
  .mobile-app-chip-bottom { bottom:18px; left:15px; }

  .mobile-feature-rail {
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain;
    scrollbar-width:none; padding:20px max(14px,calc((100vw - min(100vw - 28px,720px))/2)) 10px;
  }
  .mobile-feature-rail::-webkit-scrollbar { display:none; }
  .mobile-feature-card {
    flex:0 0 min(76vw,315px); min-height:150px; scroll-snap-align:center; display:grid; grid-template-columns:66px 1fr;
    gap:13px; align-items:center; padding:18px; border-radius:22px;
    border:1px solid color-mix(in srgb,var(--mobile-accent) 18%,transparent);
    background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--mobile-accent) 13%,transparent),transparent 43%),#fff;
    box-shadow:0 12px 28px rgba(40,53,106,.07);
  }
  .mobile-feature-card img { width:63px; height:63px; object-fit:contain; }
  .mobile-feature-card h3 { margin:0 0 5px; color:var(--navy); font-size:15px; }
  .mobile-feature-card p { margin:0; color:#737A91; font-size:11.5px; line-height:1.7; }

  /* roles carousel */
  .roles { padding:66px 0 58px; overflow:hidden; }
  .roles .section-heading { margin:0 0 28px; text-align:right; }
  .roles .section-heading .section-kicker { margin-inline:0; }
  .section-heading h2 { margin:10px 0;font-size:clamp(29px,7.4vw,36px);line-height:1.4;letter-spacing:-1px; }
  .section-heading p { margin:0;font-size:14px;line-height:1.9; }

  .roles-grid {
    display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain; scrollbar-width:none; margin-inline:calc((100vw - 100%)/-2);
    padding-inline:max(14px,calc((100vw - min(100vw - 28px,720px))/2));padding-bottom:34px;
  }
  .roles-grid::-webkit-scrollbar { display:none; }
  .role-card {
    flex:0 0 min(78vw,340px); width:auto; max-width:none; aspect-ratio:.76; margin:0; scroll-snap-align:center;
    border-radius:27px; box-shadow:0 18px 38px rgba(40,53,106,.13);
  }
  .role-card:hover { transform:none; }
  .role-overlay { padding:23px 21px; }
  .role-overlay p { max-width:100%;font-size:13px;line-height:1.8; }
  .role-overlay a { min-height:40px; font-size:11.5px; }

  .role-scroll-dots { display:flex; justify-content:center; gap:6px; margin-top:15px; }
  .role-scroll-dots span {
    width:6px; height:6px; border-radius:999px; background:rgba(40,53,106,.16); transition:.25s ease;
  }
  .role-scroll-dots span.active { width:20px; background:var(--purple); }

  /* compact values */
  .content-strip { padding:10px 0 62px; }
  .value-grid { display:grid; grid-template-columns:1fr; gap:10px; }
  .value-card { min-height:104px; padding:20px 19px 19px 72px; border-radius:19px; background:#fff; }
  .value-number {
    left:17px; top:50%; transform:translateY(-50%); font-size:48px; color:rgba(109,95,168,.11);
  }
  .value-card h3 { margin-bottom:5px; font-size:15px; }
  .value-card p { font-size:13.25px;line-height:1.8; }

  /* full-width campaign banner */
  .cta-banner,.cta-content { min-height:500px; }
  .cta-bg { background-position:37% center; }
  .cta-banner::after {
    background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,247,229,.12) 40%,rgba(255,247,229,.72) 73%,rgba(255,247,229,.94) 100%);
  }
  .cta-content { align-items:center; }
  .cta-copy { width:min(480px,78%);margin-inline-end:auto;margin-inline-start:0;padding:42px 0;text-align:right; }
  .cta-copy h2 { margin:12px 0 9px; font-size:clamp(31px,7vw,43px); line-height:1.42; }
  .cta-copy p { max-width:390px;margin-inline:0;font-size:14px;line-height:1.9; }
  .cta-btn { width:auto; min-width:180px; }

  /* mobile footer */
  .site-footer { padding:48px 0 calc(24px + env(safe-area-inset-bottom)); }
  .footer-grid { display:block; }
  .footer-brand { padding:0; }
  .footer-brand p { max-width:470px; margin:10px 0 0; font-size:12.5px; line-height:1.85; }
  .footer-brand .socials { margin-top:16px; }
  .footer-grid>.footer-col { display:none; }

  .mobile-footer-links { display:grid; margin-top:28px;}
  .mobile-footer-links details { border-bottom:1px solid var(--line); }
  .mobile-footer-links details:last-child { border-bottom:0; }
  .mobile-footer-links summary {
    min-height:55px; display:flex; align-items:center; justify-content:space-between; list-style:none; cursor:pointer;
    color:var(--navy); font-size:13px; font-weight:850;
  }
  .mobile-footer-links summary::-webkit-details-marker { display:none; }
  .mobile-footer-links summary span { color:var(--purple); font-size:18px; transition:.25s ease; }
  .mobile-footer-links details[open] summary span { transform:rotate(45deg); }
  .mobile-footer-links details>div { display:grid; gap:12px; padding:0 0 17px; }
  .mobile-footer-links details a { color:#767E94; font-size:12px; }

  .footer-bottom { margin-top:26px; padding-top:19px; flex-direction:column; align-items:flex-start; gap:8px; }

  /* sticky conversion dock */
  .mobile-action-dock {
    display:block; position:fixed; z-index:998; right:10px; left:10px; bottom:calc(8px + env(safe-area-inset-bottom));
    pointer-events:none; transition:.25s ease;
  }
  .mobile-action-dock a {
    min-height:62px; padding:8px 12px 8px 10px; display:grid; grid-template-columns:40px 1fr 32px;
    align-items:center; gap:10px; border-radius:20px; color:#fff; background:rgba(40,53,106,.96);
    box-shadow:0 16px 40px rgba(25,33,72,.28); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    pointer-events:auto;
  }
  .mobile-dock-icon {
    width:40px; height:40px; display:grid; place-items:center; border-radius:13px; color:#fff;
    background:linear-gradient(135deg,#8067E3,#634ACD); font-size:18px;
  }
  .mobile-dock-copy { min-width:0; }
  .mobile-dock-copy b,.mobile-dock-copy small { display:block; }
  .mobile-dock-copy b { font-size:13px; margin-bottom:1px; }
  .mobile-dock-copy small {
    color:rgba(255,255,255,.70); font-size:9.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .mobile-dock-arrow {
    width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:var(--navy);
    background:#fff; font-size:14px; font-weight:900;
  }

  @keyframes mobileBobbyFloat {
    0%,100% { transform:translateX(-50%) translateY(0) rotate(-1deg); }
    50% { transform:translateX(-50%) translateY(-7px) rotate(1deg); }
  }
}

@media (max-width:480px) {
  :root { --shell:calc(100% - 22px); }
  .mobile-hero-scene { height:318px; }
  .hero-backdrop { height:370px; background-position:59% center; }
  .mobile-bobby { width:min(218px,61vw); }
  .mobile-float-tag-a { top:94px; }
  .mobile-float-tag-b { top:172px; }
  .mobile-hero-sheet {
    width:calc(100% - 16px); margin-top:-28px; padding:22px 16px 16px; border-radius:25px 25px 0 0;
  }
  .mobile-hero-sheet h1 { font-size:clamp(38px,11.8vw,48px); }
  .mobile-app-showcase { min-height:285px; }
  .mobile-app-showcase>img { width:110%; }
  .mobile-app-chip { width:116px; padding:9px; }
  .mobile-feature-card { flex-basis:82vw; }
  .role-card { flex-basis:84vw; }

  .cta-banner,.cta-content { min-height:490px; }
  .cta-bg {
    background-size:auto 62%; background-repeat:no-repeat; background-position:top center; background-color:#FFF4DF;
  }
  .cta-banner::after {
    background:linear-gradient(180deg,rgba(255,244,223,0) 0%,rgba(255,244,223,.02) 31%,rgba(255,244,223,.68) 50%,#FFF4DF 65%,#FFF4DF 100%);
  }
  .cta-content { align-items:flex-end; }
  .cta-copy { width:100%; padding:0 0 38px; }
  .cta-copy h2 { font-size:30px; }
  .cta-copy p { max-width:315px; }
}

@media (max-width:370px) {
  .mobile-scene-badge { right:11px; top:14px; }
  .mobile-float-tag { font-size:9px; }
  .mobile-float-tag-a { left:10px; }
  .mobile-float-tag-b { right:10px; }
  .mobile-proof-row { gap:5px; }
  .mobile-proof-row span { font-size:9.6px; }
  .mobile-app-chip-bottom { display:none; }
  .footer-bottom { font-size:10.5px; }
}


.anchor-proxy {
  position: absolute;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-margin-top: 82px;
}
.anchor-proxy-features {
  transform: translateY(260px);
}
@media (max-width:820px) {
  .anchor-proxy-features { transform: translateY(440px); }
}

/* ===== Responsive refinement: tablet and mobile ===== */
@media (max-width:820px) {
  html,body { width:100%;max-width:100%;overflow-x:clip; }
  body { padding-bottom:0; }
  main,section,header,footer { max-width:100%; }
  .shell { width:calc(100% - 32px);max-width:720px; }

  .mobile-action-dock { display:none!important; }

  .mobile-product-hero { padding-top:0; }
  .mobile-hero-scene { height:390px;max-width:100%;padding-top:var(--header-h); }
  .hero-backdrop { height:430px;background-position:58% center; }
  .mobile-bobby { width:min(270px,54vw);bottom:16px; }
  .mobile-float-tag { display:none; }
  .mobile-hero-sheet {
    width:calc(100% - 32px);max-width:680px;margin:-24px auto 0;padding:30px 24px 24px;
    border-radius:28px;box-shadow:0 18px 46px rgba(40,53,106,.11);text-align:center;
  }
  .mobile-overline { justify-content:center; }
  .mobile-hero-sheet h1 { font-size:clamp(40px,8vw,54px);line-height:1.14;text-align:center;text-wrap:balance; }
  .mobile-hero-sheet>p { max-width:570px;margin-inline:auto;font-size:14.5px;line-height:2;text-align:center;text-wrap:pretty; }
  .mobile-main-cta { max-width:360px;margin:22px auto 0;justify-content:center;gap:14px; }
  .mobile-proof-row { max-width:440px;margin:16px auto 0; }

  .app-section { padding:82px 0 70px;overflow:clip; }
  .mobile-section-head { max-width:620px;margin-inline:auto;text-align:center; }
  .mobile-section-head h2 { font-size:clamp(31px,6.5vw,42px);line-height:1.35;text-align:center;text-wrap:balance; }
  .mobile-section-head p { max-width:560px;margin-inline:auto;font-size:14.5px;line-height:1.95;text-align:center;text-wrap:pretty; }
  .mobile-app-showcase { width:100%;max-width:640px;min-height:360px;margin:32px auto 0; }
  .mobile-app-showcase>img { width:min(520px,92%); }

  .mobile-feature-rail {
    width:calc(100% - 32px);max-width:720px;margin:22px auto 0;padding:0;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;overflow:visible;
  }
  .mobile-feature-card {
    min-width:0;min-height:190px;padding:20px 14px;display:flex;flex-direction:column;
    justify-content:center;text-align:center;gap:12px;
  }
  .mobile-feature-card img { width:70px;height:70px; }
  .mobile-feature-card h3 { font-size:14px;white-space:normal; }
  .mobile-feature-card p { font-size:12px;line-height:1.8;text-wrap:pretty; }

  .roles { padding:76px 0 80px;overflow:clip; }
  .roles .section-heading { max-width:680px;margin:0 auto 38px;text-align:center; }
  .roles .section-heading h2,.roles .section-heading p { text-align:center;white-space:normal; }
  .roles .section-heading p { max-width:650px;margin-inline:auto;font-size:14.5px; }
  .roles-grid {
    width:100%;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:48px 18px;overflow:visible;
  }
  .role-card { width:100%;max-width:none;aspect-ratio:.76;margin:0; }
  .role-overlay { align-items:center;text-align:center; }
  .role-overlay h3 { white-space:normal; }
  .role-overlay p { text-align:center;text-wrap:pretty; }
  .role-scroll-dots { display:none; }

  .cta-banner,.cta-content { min-height:620px; }
  .cta-bg { background-position:center top; }
  .cta-banner::after {
    background:linear-gradient(180deg,rgba(255,244,223,0) 0%,rgba(255,244,223,.12) 42%,rgba(255,244,223,.9) 67%,#FFF4DF 100%);
  }
  .cta-content { align-items:flex-end;justify-content:center; }
  .cta-copy { width:100%;max-width:600px;margin:0 auto;padding:0 0 46px;text-align:center; }
  .cta-copy h2 { font-size:clamp(31px,6vw,41px);line-height:1.42;text-align:center;text-wrap:balance; }
  .cta-copy h2 span,.cta-copy p span { white-space:normal; }
  .cta-copy p { max-width:430px;margin:0 auto;font-size:15px;text-align:center; }
  .cta-btn { margin:18px auto 0; }

  .site-footer { text-align:center; }
  .footer-brand { display:flex;flex-direction:column;align-items:center; }
  .footer-brand p { max-width:520px;margin-inline:auto; }
  .socials { justify-content:center; }
  .mobile-footer-links { max-width:620px; }
  .mobile-footer-links summary { justify-content:center;gap:10px; }
  .mobile-footer-links details>div { justify-items:center; }
  .footer-bottom { align-items:center;text-align:center; }
}

@media (max-width:560px) {
  :root { --shell:calc(100% - 24px); }
  .shell { width:var(--shell); }
  .header-inner { width:calc(100% - 24px); }
  .mobile-menu { right:12px;left:12px; }

  .mobile-hero-scene { height:328px; }
  .hero-backdrop { height:380px;background-position:56% center; }
  .mobile-bobby { width:min(224px,58vw);bottom:12px; }
  .mobile-hero-sheet { width:calc(100% - 20px);padding:25px 18px 20px;border-radius:25px; }
  .mobile-hero-sheet h1 { font-size:clamp(38px,11vw,48px); }
  .mobile-hero-sheet>p { font-size:13.5px;line-height:1.9; }
  .mobile-proof-row { gap:6px; }
  .mobile-proof-row span { font-size:10px; }

  .app-section { padding:68px 0 58px; }
  .mobile-section-head h2 { font-size:clamp(29px,8.5vw,36px); }
  .mobile-section-head p { font-size:13.5px; }
  .mobile-app-showcase { min-height:285px;border-radius:24px; }
  .mobile-app-showcase>img { width:100%; }
  .mobile-app-chip { width:112px;padding:8px; }

  .mobile-feature-rail { width:calc(100% - 24px);grid-template-columns:1fr;gap:12px; }
  .mobile-feature-card { min-height:0;padding:18px;display:grid;grid-template-columns:64px minmax(0,1fr);text-align:center; }
  .mobile-feature-card img { width:62px;height:62px; }
  .mobile-feature-card div { text-align:center; }
  .mobile-feature-card h3 { font-size:15px; }
  .mobile-feature-card p { font-size:12.5px; }

  .roles { padding:64px 0 72px; }
  .roles .section-heading { margin-bottom:32px; }
  .roles .section-heading h2 { font-size:clamp(28px,8vw,34px); }
  .roles .section-heading p { font-size:13.5px;line-height:1.9; }
  .roles-grid { grid-template-columns:1fr;gap:50px; }
  .role-card { width:min(100%,390px);margin-inline:auto; }
  .role-overlay { padding:24px 22px; }
  .role-overlay p { font-size:13px; }

  .cta-banner,.cta-content { min-height:570px; }
  .cta-bg { background-size:auto 58%;background-position:top center; }
  .cta-copy { padding:0 16px 38px; }
  .cta-copy h2 { font-size:clamp(28px,8vw,34px); }
  .cta-copy p { font-size:14px; }
  .cta-btn { width:min(100%,240px); }
}