/* =========================================================================
   BoostBusiness.AI — Onboarding Hub  ·  Apple-grade design system
   Apple.com structure + motion, tuned to the Ascendant Prism brand.
   Reference: 000 sandbox/apple-design-reference. Light/dark auto + toggle.
   ========================================================================= */

/* ---------------- Tokens: light (warm Apple neutral) ---------------- */
:root {
  --bg:          #fbfaf7;
  --tile:        #ffffff;
  --tile-alt:    #f1ece2;   /* stronger warm-grey for clear rhythm */
  --surface:     #ffffff;   /* cards */
  --surface-2:   #f4f0e8;
  --text:        #17150f;
  --text-2:      #5f5a50;
  --text-3:      #8a8474;
  --line:        #e3dccd;
  --line-2:      #d4ccbc;
  --accent:      #7c7561;   /* readable platinum-bronze on light */
  --accent-soft: #cfc9bc;
  --ink:         #050505;
  --paper:       #f6f1e8;
  --btn-bg:      #17150f;
  --btn-fg:      #f6f1e8;
  --gold:        #b08d3f;   /* rare warm accent for stars/proof */
  --glow:        rgba(124,117,97,.16);
  color-scheme: light;
}

/* ---------------- Tokens: dark (obsidian ladder w/ real depth) ------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #060606;
    --tile:      #0b0b0c;
    --tile-alt:  #15161a;   /* clearly lighter grey tile */
    --surface:   #1a1b1f;   /* cards lift off tiles */
    --surface-2: #212227;
    --text:      #f6f1e8;
    --text-2:    #aaa49a;
    --text-3:    #807a70;
    --line:      #2a2a30;
    --line-2:    #36363e;
    --accent:    #cfc9bc;
    --accent-soft:#cfc9bc;
    --btn-bg:    #f6f1e8;
    --btn-fg:    #050505;
    --gold:      #e8c878;
    --glow:      rgba(207,201,188,.16);
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --bg:#060606; --tile:#0b0b0c; --tile-alt:#15161a; --surface:#1a1b1f; --surface-2:#212227;
  --text:#f6f1e8; --text-2:#aaa49a; --text-3:#807a70; --line:#2a2a30; --line-2:#36363e;
  --accent:#cfc9bc; --accent-soft:#cfc9bc; --btn-bg:#f6f1e8; --btn-fg:#050505; --gold:#e8c878;
  --glow:rgba(207,201,188,.16); color-scheme: dark;
}

/* ---------------- On-dark editorial tiles (always obsidian) --------- */
.on-dark {
  --bg:#050505; --tile:#050505; --tile-alt:#0e0e10; --surface:#161619; --surface-2:#1d1d21;
  --text:#f6f1e8; --text-2:#b3ada2; --text-3:#8a857b; --line:#26262c; --line-2:#34343c;
  --accent:#cfc9bc; --accent-soft:#cfc9bc; --btn-bg:#f6f1e8; --btn-fg:#050505; --gold:#e8c878;
  --glow:rgba(207,201,188,.18);
  background:#050505; color:#f6f1e8;
}

/* ---------------- Reset ---------------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } }
body {
  font-family: var(--font, 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display','SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif);
  background: var(--bg); color: var(--text);
  line-height: 1.47; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background .5s var(--ease,cubic-bezier(.28,.11,.32,1)), color .5s var(--ease,cubic-bezier(.28,.11,.32,1));
}
:root { --font:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',system-ui,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.28,.11,.32,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --maxw:1080px; --pill:980px; --r-card:22px; --r-sm:14px; }
img,svg,video { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 3px; border-radius: 6px; }

/* ---------------- Layout / tiles ---------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.tile { padding-block: clamp(76px, 11vw, 148px); background: var(--bg); transition: background .5s var(--ease), color .5s var(--ease); }
.tile--alt { background: var(--tile-alt); }
.tile--surface { background: var(--tile); }
.tile--tight { padding-block: clamp(52px, 7vw, 92px); }
.center { text-align: center; }

/* ---------------- Type ---------------- */
.eyebrow { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
h1,h2,h3 { font-weight: 600; letter-spacing: -.022em; line-height: 1.06; }
.display { font-size: clamp(2.8rem, 7.6vw, 5.75rem); font-weight: 600; line-height: 1.02; letter-spacing: -.038em; }
.h2 { font-size: clamp(2rem, 4.3vw, 3.25rem); letter-spacing: -.03em; line-height: 1.06; }
.h3 { font-size: clamp(1.18rem, 1.6vw, 1.4rem); font-weight: 600; letter-spacing: -.018em; }
.lead { font-size: clamp(1.18rem, 1.75vw, 1.5rem); font-weight: 400; line-height: 1.42; letter-spacing: -.012em; color: var(--text-2); }
.muted { color: var(--text-2); }
.measure { max-width: 40ch; } .measure-wide { max-width: 60ch; }
.center .measure, .center .measure-wide, .center .lead { margin-inline: auto; }

/* ---------------- Brand lockup (prominent) ---------------- */
.lockup { display: inline-flex; align-items: center; gap: 13px; }
.lockup .mark { color: var(--text); flex: 0 0 auto; }
.lockup .divider { width: 1px; background: currentColor; opacity: .18; align-self: stretch; }
.lockup .wm { line-height: 1; white-space: nowrap; text-transform: uppercase; }
.lockup .wm .l { font-weight: 200; letter-spacing: .16em; }
.lockup .wm .s { font-weight: 600; letter-spacing: .05em; }
/* nav size */
.nav .lockup .mark { width: 30px; height: 30px; }
.nav .lockup .wm { font-size: 1.04rem; letter-spacing: 0; }
/* hero / big size */
.lockup--lg .mark { width: 64px; height: 64px; }
.lockup--lg .divider { height: 44px; margin-inline: 4px; }
.lockup--lg .wm { font-size: 1.7rem; }

/* ---------------- Nav (frosted, slim) ---------------- */
.nav { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid transparent; transition: border-color .3s, background .4s; }
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 58px; max-width: 1220px; margin-inline: auto; padding-inline: 24px; }
.nav__actions { display: flex; align-items: center; gap: 4px; }
.nav__link { padding: 8px 13px; border-radius: var(--pill); font-size: .9rem; color: var(--text-2); transition: color .2s, background .2s; }
.nav__link:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.nav__link.active { color: var(--text); }
.toggle { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); transition: color .2s, transform .4s var(--ease-spring); }
.toggle:hover { color: var(--text); } .toggle:active { transform: rotate(40deg) scale(.85); }
.toggle svg { width: 18px; height: 18px; }
.toggle .moon { display: none; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .toggle .sun{display:none} :root:not([data-theme="light"]) .toggle .moon{display:block} }
[data-theme="dark"] .toggle .sun{display:none} [data-theme="dark"] .toggle .moon{display:block}

/* ---------------- Buttons ---------------- */
.btn { display: inline-flex; align-items: center; gap: .45em; font-size: 1.06rem; font-weight: 450; letter-spacing: -.01em; transition: transform .3s var(--ease-spring), background .25s, opacity .2s; }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); padding: .82em 1.55em; border-radius: var(--pill); }
.btn--primary:hover { transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0) scale(.98); }
.btn--lg { font-size: 1.14rem; padding: .95em 1.8em; }
.btn--text { color: var(--accent); padding: .82em .4em; }
.btn--text .chev, .btn--primary .arrow { transition: transform .3s var(--ease-spring); }
.btn--text:hover .chev { transform: translateX(5px); }
.btn--primary:hover .arrow { transform: translateX(3px); }

/* ---------------- Hero ---------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(96px, 14vw, 200px); }
.hero__glow { position: absolute; inset: -35% -15% auto -15%; height: 70%; pointer-events: none; background: radial-gradient(50% 100% at 50% 0%, var(--glow), transparent 72%); will-change: transform; }
.hero__inner { position: relative; z-index: 1; will-change: transform, opacity; }
.hero .lead { margin-top: 26px; }
.hero__cta { margin-top: 40px; display: flex; gap: 20px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero__lockup { margin-bottom: 30px; display: inline-flex; }
.scrollcue { margin-top: 52px; display: inline-flex; color: var(--text-2); opacity: .55; }
.scrollcue svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: no-preference){ .scrollcue svg { animation: bob 2.1s var(--ease) infinite; } }
@keyframes bob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(7px); } }

/* ---------------- Cards / grid ---------------- */
.grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.card { position: relative; display: flex; flex-direction: column; padding: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; transition: transform .45s var(--ease-out), border-color .35s, background .35s; }
.card[href]::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent); pointer-events:none; opacity:0; transition:opacity .35s; }
.card[href]:hover { transform: translateY(-6px); border-color: var(--line-2); }
.card[href]:hover::after { opacity:1; }
.card__icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); color: var(--text); margin-bottom: 22px; transition: transform .45s var(--ease-spring); }
.card[href]:hover .card__icon { transform: scale(1.08) rotate(-3deg); }
.card__icon svg { width: 23px; height: 23px; }
.card h3 { font-size: 1.22rem; }
.card p { color: var(--text-2); font-size: 1rem; margin-top: 9px; flex: 1; line-height: 1.45; }
.card__foot { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; }
.card__go { font-size: .92rem; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.card__go .arrow { transition: transform .3s var(--ease-spring); }
.card[href]:hover .card__go .arrow { transform: translateX(5px); }

/* ---------------- Steps ---------------- */
.steps { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); margin-top: 48px; text-align: left; }
.step { padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.step__n { font-family: var(--mono); font-size: 1.5rem; font-weight: 300; color: var(--accent); letter-spacing: .04em; }
.step h3 { margin: 16px 0 8px; font-size: 1.22rem; }
.step p { color: var(--text-2); font-size: 1rem; }

/* ---------------- Badges ---------------- */
.badge { font-family: var(--mono); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--pill); border: 1px solid color-mix(in srgb, var(--text-2) 42%, transparent); color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.badge--ready { color: #1c7a4d; border-color: #1c7a4d55; }
.badge--ready .dot { background: #21a366; box-shadow: 0 0 0 3px #21a36622; }
[data-theme="dark"] .badge--ready, :root:not([data-theme="light"]) .badge--ready, .on-dark .badge--ready { color:#5ad394; border-color:#5ad39440; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .badge--ready{color:#5ad394;border-color:#5ad39440} }

/* ---------------- Motifs ---------------- */
/* review card */
.reviewcard { max-width: 460px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px 30px; text-align: left; }
.reviewcard .stars { color: var(--gold); letter-spacing: 3px; font-size: 1.05rem; }
.reviewcard p { margin-top: 14px; font-size: 1.12rem; line-height: 1.5; color: var(--text); letter-spacing: -.01em; }
.reviewcard .who { margin-top: 16px; font-size: .9rem; color: var(--text-2); display: flex; align-items: center; gap: 10px; }
.reviewcard .ava { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-weight: 600; font-size: .8rem; color: var(--accent); }
/* engine diagram */
.engine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.engine__node { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 20px 16px; text-align: center; position: relative; }
.engine__node svg { width: 24px; height: 24px; color: var(--accent); margin: 0 auto 10px; }
.engine__node b { font-size: .98rem; font-weight: 600; display: block; }
.engine__node span { font-size: .82rem; color: var(--text-2); }
.engine__arrow { display: none; }
@media (min-width: 921px) {
  .engine__node:not(:last-child)::before {
    content: "→"; position: absolute; right: -15px; top: 50%; transform: translateY(-50%);
    color: var(--accent); font-size: 1rem; opacity: .55; z-index: 2; line-height: 1;
  }
}
/* proof stat */
.proof { display: flex; gap: clamp(24px,5vw,72px); justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.proof__n { font-size: clamp(2.4rem,5vw,3.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.proof__l { margin-top: 10px; font-size: .95rem; color: var(--text-2); max-width: 22ch; margin-inline: auto; }
.disclaimer { margin-top: 28px; font-size: .8rem; color: var(--text-3); }

/* ---------------- Spotlight (Apple two-up feature tile) ---------------- */
.spotlight { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px,5vw,68px); align-items: center; }
.spotlight__media { position: relative; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line-2); background: #000; aspect-ratio: 16/10; display: block; transition: transform .5s var(--ease-out); }
.spotlight__media:hover { transform: translateY(-4px); }
.spotlight__media img { width: 100%; height: 100%; object-fit: cover; }
.spotlight__play { position: absolute; inset: 0; display: grid; place-items: center; }
.spotlight__play i { width: 66px; height: 66px; border-radius: 50%; background: rgba(246,241,232,.94); color: #050505; display: grid; place-items: center; backdrop-filter: blur(4px); transition: transform .4s var(--ease-spring); }
.spotlight__media:hover .spotlight__play i { transform: scale(1.08); }
.spotlight__play svg { width: 22px; height: 22px; margin-left: 3px; }
.spotlight__body .h2 { margin-top: 14px; }
.spotlight__body p { color: var(--text-2); font-size: 1.08rem; line-height: 1.5; margin-top: 16px; }
.spotlight__body .cta { margin-top: 26px; }
@media (max-width: 780px) { .spotlight { grid-template-columns: 1fr; gap: 28px; } }

/* ---------------- Video frame ---------------- */
.videoframe { border: 1px solid var(--line-2); border-radius: var(--r-card); overflow: hidden; background: #000; }
.videoframe video { width: 100%; height: auto; }

/* ---------------- How-to ---------------- */
.howto { display: grid; gap: 2px; margin-top: 44px; }
.howto__item { display: flex; gap: 24px; padding: 24px; border-radius: var(--r-sm); transition: background .35s; }
.howto__item:hover { background: var(--surface-2); }
.howto__n { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: .85rem; border: 1px solid var(--line-2); color: var(--accent); }
.howto__b h3 { font-size: 1.12rem; } .howto__b p { color: var(--text-2); margin-top: 5px; }

/* ---------------- Lineup (Apple "explore the lineup" cross-links) ---------------- */
.lineup { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 46px; }
.lineup__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 24px 18px; text-align: center; transition: transform .4s var(--ease-out), border-color .3s; }
.lineup__card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.lineup__card .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; margin: 0 auto 14px; color: var(--text); transition: transform .4s var(--ease-spring); }
.lineup__card:hover .ic { transform: scale(1.08); }
.lineup__card .ic svg { width: 20px; height: 20px; }
.lineup__card b { font-size: 1rem; font-weight: 600; display: block; letter-spacing: -.01em; }
.lineup__card .st { font-size: .72rem; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin-top: 6px; display: block; }
.lineup__card .st.rdy { color: #1c7a4d; }
[data-theme="dark"] .lineup__card .st.rdy, :root:not([data-theme="light"]) .lineup__card .st.rdy { color: #5ad394; }
@media (max-width: 780px) { .lineup { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- Info list ---------------- */
.infocard { margin: 32px auto 0; max-width: 600px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px 32px; text-align: left; }
.infolist { list-style: none; padding: 0; margin: 0; }
.infolist li { position: relative; padding: 18px 0 18px 34px; color: var(--text); font-size: 1.06rem; border-top: 1px solid var(--line); }
.infolist li:first-child { border-top: 0; }
.infolist li::before { position: absolute; left: 2px; top: 18px; color: var(--accent); font-weight: 600; }
.infolist--check li::before { content: "✓"; } .infolist--arrow li::before { content: "→"; }

/* ---------------- Spec chips (detail hero) ---------------- */
.specs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.spec { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); border: 1px solid color-mix(in srgb, var(--text-2) 40%, transparent); border-radius: var(--pill); padding: 7px 14px; display: inline-flex; align-items: center; gap: 8px; }
.spec .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* ---------------- Coming soon ---------------- */
.soon-hero { position: relative; overflow: hidden; text-align: center; padding-top: clamp(88px,12vw,164px); padding-bottom: clamp(28px,4vw,52px); }
.soon-pill { margin-bottom: 26px; }
.soon-icon { width: 92px; height: 92px; border-radius: 24px; display: grid; place-items: center; margin: 0 auto 30px; background: var(--surface); border: 1px solid var(--line-2); color: var(--accent); }
.soon-icon svg { width: 44px; height: 44px; }

/* ---------------- Footer (Apple-style directory) ---------------- */
.foot { background: var(--tile-alt); border-top: 1px solid var(--line); padding-block: 56px 36px; color: var(--text-2); font-size: .9rem; }
.foot__in { max-width: 1220px; margin-inline: auto; padding-inline: 24px; }
.foot__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.foot__brand p { margin-top: 16px; max-width: 30ch; color: var(--text-2); line-height: 1.5; }
.foot__col h4 { font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: 14px; letter-spacing: -.01em; }
.foot__col a { display: block; padding: 6px 0; color: var(--text-2); transition: color .2s; }
.foot__col a:hover { color: var(--text); }
.foot__legal { padding-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; font-size: .8rem; }
.klabel { font-family: var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color: var(--accent); }

/* ---------------- Motion: reveal + parallax ---------------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .js .reveal { opacity:1 !important; transform:none !important; transition:none; } }

/* ---------------- Responsive ---------------- */
@media (max-width: 920px) { .steps, .grid { grid-template-columns: repeat(2, 1fr); } .engine { grid-template-columns: repeat(2,1fr); } .foot__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) {
  .nav .lockup .wm { display: none; }   /* logo mark only on small — avoids crowding */
}
@media (max-width: 600px) {
  .wrap { padding-inline: 20px; }
  .steps, .grid, .engine { grid-template-columns: 1fr; }
  .nav__link.hide-sm { display: none; }
  .howto__item { padding: 18px 6px; gap: 16px; }
  .hero__cta { flex-direction: column; gap: 10px; }
  .hero__cta .btn--primary { width: 100%; justify-content: center; }
  .lockup--lg .wm { font-size: 1.3rem; } .lockup--lg .mark { width: 52px; height: 52px; }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 24px 24px; }
  .foot__brand { grid-column: 1 / -1; }   /* lockup gets its own row on mobile */
}