/* Apple-inspired treatment: near-black canvas, huge centred type, slim translucent nav, large radii,
   scroll-driven scale. Loaded last so it overrides the base styles. */
:root[data-theme=dark]{--canvas:#000;--surface:#161618;--soft:#232326;--line:#2a2a2d;--muted:#a1a1a6;--ink:#f5f5f7;--shadow:0 30px 80px #000a;--radius:30px}
:root:not([data-theme=dark]){--radius:30px}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',sans-serif}
h1,h2,h3{letter-spacing:-.045em;font-weight:700}

/* Slim translucent nav */
.site-header{background:color-mix(in srgb,var(--canvas) 72%,transparent);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid #ffffff14}
.nav{height:52px}
.brand{font-size:16px}.brand-icon{width:26px;height:26px}
.nav-links{font-size:12px;gap:26px;font-weight:500}
.button.small{min-height:30px;padding:6px 14px;font-size:12px;gap:8px}
.icon-button.theme-toggle{width:30px;height:30px;font-size:14px}

/* Centred hero */
.hero{grid-template-columns:1fr;text-align:center;justify-items:center;padding-block:110px 40px;gap:56px;position:relative;isolation:isolate}
.hero:before{content:'';position:absolute;z-index:-1;left:50%;top:-40px;width:min(1100px,120%);height:620px;transform:translateX(-50%);background:radial-gradient(closest-side,#4c9ef52e,#c7b7f01f 45%,transparent 72%);filter:blur(30px);animation:glow 10s ease-in-out infinite alternate}
@keyframes glow{to{transform:translateX(-46%) scale(1.08);opacity:.8}}
.hero-copy{display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(64px,10.5vw,148px);line-height:.94;letter-spacing:-.06em;margin:22px 0 26px;background:linear-gradient(180deg,var(--ink) 30%,color-mix(in srgb,var(--ink) 45%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 span{background:linear-gradient(90deg,#4c9ef5,#c7b7f0 45%,#f5b9e7 75%,#f2c64b);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy>p:not(.fine-print){max-width:640px;font-size:21px;line-height:1.5;color:var(--muted)}
.hero-actions{justify-content:center}
.hero .button{min-height:48px;padding:12px 26px;gap:12px}
.text-link{font-weight:600;color:#4c9ef5}.text-link:hover{text-decoration:underline}
.hero-orbit{transform:none;min-height:0;width:min(1000px,100%);grid-template-columns:repeat(3,1fr);grid-template-rows:230px;gap:20px}
.hero-orbit .orbit-card{border-radius:32px}
.hero-orbit .orbit-note{display:none}

/* Section headings: bigger, centred */
.section-bar{flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:40px}
.section-bar h2{font-size:clamp(40px,6vw,80px);letter-spacing:-.055em}
.section-bar>p{max-width:560px;font-size:19px}
.feature-copy h2,.developer-heading h2{letter-spacing:-.055em}
.feature-section{padding-block:120px}
.care-grid article,.developer-card,.art-panel,.mb-stage{border-radius:32px}
.eyebrow{font-weight:600}

/* Scroll-driven product frame: scales and rises as it enters, like a product reveal */
.app-embed,.mb-stage{transform:scale(var(--enter,1)) translateY(calc((1 - var(--enter,1)) * 60px));transform-origin:50% 0;will-change:transform}
.app-embed{border-radius:28px;box-shadow:var(--shadow)}

/* Statement: words light up as you scroll */
.statement{padding-block:140px 80px}
.statement-text{max-width:1000px;margin:0 auto;font-size:clamp(30px,4.6vw,60px);font-weight:700;line-height:1.12;letter-spacing:-.045em;text-align:center}
.statement-text .w{color:var(--ink);opacity:calc(.22 + var(--lit,0) * .78);transition:opacity .15s linear}
.feature-index a{border-radius:22px}
.faq-section h2{font-size:clamp(40px,5vw,72px)}
.availability h2{font-size:clamp(52px,8vw,120px);letter-spacing:-.06em}

@media(max-width:760px){
  .hero{padding-block:70px 20px}.hero h1{font-size:64px}.hero-copy>p:not(.fine-print){font-size:18px}
  .hero-orbit{grid-template-columns:1fr;grid-template-rows:none;width:min(420px,92%)}
  .hero-orbit .orbit-card{min-height:170px}
}
@media(prefers-reduced-motion:reduce){.hero:before{animation:none}.app-embed,.mb-stage{transform:none!important}.statement-text .w{opacity:1}}
