/* ai-os.my home: page rules around the deck stylesheet (deck.css). Plan: docs/plan/LANDING_MERGE_PLAN.md */
body.aios-home-body { margin: 0; background: #060a14; color: #eef2fb; font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.aios-home, .aios-home * { box-sizing: border-box; }
.aios-home :where(h1, h2, h3, p, ul, li, table) { margin: 0; padding: 0; }
.aios-home a { color: inherit; text-decoration: none; }

/* fixed backdrop: drifting network + two glows that move per section */
.aios-home #bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.aios-home .glow { z-index: 0; }

/* each section is the deck's 1920-wide stage, scaled to the window (640-wide on phones) */
.aios-home .stage-wrap { position: relative; z-index: 1; width: 100%; overflow: hidden; }
.aios-home .stage-wrap > .slide { transform-origin: 0 0; }
.aios-home .slide .foot { pointer-events: none; }

/* opening: the 3D scroll scene (home3d.js); the deck cover is used only in present mode */
.aios-home .present-only { display: none; }
.aios-home.present .present-only { display: block; }
.aios-home.present ~ .scene3d, body.aios-present .scene3d { display: none; }
.scene3d { position: relative; z-index: 2; height: 100vh; height: 100svh; overflow: hidden; background: #060a14; }
.scene3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene3d::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(6,10,20,.78) 0%, rgba(6,10,20,.35) 34%, rgba(6,10,20,0) 55%), linear-gradient(0deg, rgba(6,10,20,.85) 0%, rgba(6,10,20,0) 22%); }
.scene3d .beat { position: absolute; z-index: 2; left: clamp(20px, 6vw, 96px); bottom: 14vh; max-width: min(640px, 46vw); opacity: 0; transform: translateY(24px); pointer-events: none; color: #eef2fb; }
.scene3d .beat.b1 { opacity: 1; transform: none; pointer-events: auto; }
.scene3d h1, .scene3d .beat-h { margin: 0; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: clamp(40px, 5.2vw, 84px); line-height: 1.02; letter-spacing: -.03em; }
.scene3d em { font-style: normal; color: #ffbf47; }
.scene3d .beat-cta { display: flex; gap: 22px; align-items: center; margin-top: 32px; flex-wrap: wrap; }
.scene3d .btn3 { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 18px; color: #eef2fb; text-decoration: none; }
.scene3d .btn3-primary { padding: 15px 30px; border-radius: 999px; background: linear-gradient(100deg, #3d6df2, #6e9bff); box-shadow: 0 16px 50px rgba(61,109,242,.45); transition: transform .2s, box-shadow .2s; }
.scene3d .btn3-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 70px rgba(61,109,242,.6); }
.scene3d .btn3-link { border-bottom: 1px solid rgba(238,242,251,.5); padding-bottom: 3px; }
.scene3d .scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: 26px; transform: translateX(-50%); font: 12px 'JetBrains Mono', monospace; letter-spacing: 4px; text-transform: uppercase; color: #9aa8c4; transition: opacity .4s; }
.scene3d .scroll-cue::after { content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(#9aa8c4, transparent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
/* the loader sits under the copy: the headline paints at once (LCP), frames fade in behind it */
.scene3d .scene-loader { position: absolute; inset: 0; z-index: 1; display: grid; place-items: end center; padding-bottom: 7vh; background: #060a14; transition: opacity .6s; }
.scene3d .scene-loader span { width: 120px; height: 1px; background: rgba(255,255,255,.15); overflow: hidden; }
.scene3d .scene-loader i { display: block; height: 100%; width: 0; background: #6e9bff; transition: width .2s; }
.scene3d .scene-loader.done { opacity: 0; pointer-events: none; }
@media (max-width: 767.98px) {
  .scene3d::after { background: linear-gradient(180deg, rgba(6,10,20,.85) 0%, rgba(6,10,20,0) 34%), linear-gradient(0deg, rgba(6,10,20,.9) 0%, rgba(6,10,20,0) 26%); }
  .scene3d .beat { top: 92px; bottom: 28px; left: 20px; right: 20px; max-width: none; display: flex; flex-direction: column; justify-content: space-between; }
  .scene3d h1, .scene3d .beat-h { font-size: 38px; }
  .scene3d .beat-cta { margin: 0; flex-direction: column; gap: 14px; align-items: stretch; text-align: center; }
  .scene3d .btn3-primary { width: 100%; text-align: center; }
  .scene3d .scroll-cue { display: none; }
}
.scene3d.still .beat { opacity: 1; transform: none; pointer-events: auto; }
.scene3d.still .b2, .scene3d.still .b3 { display: none; }

/* cover: the deck's opening, generalised; clears the fixed site nav */
.aios-home .slide[data-id="cover"] { padding-top: 190px; }
.aios-home.mob .slide[data-id="cover"] { padding-top: 150px; }
.aios-home .cover-logos img.aios { height: 74px; width: auto; }
.aios-home .cover-cta { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.aios-home .btn { display: inline-flex; align-items: center; gap: 14px; font-family: var(--disp); font-weight: 600; font-size: 30px; padding: 22px 40px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; pointer-events: auto; }
.aios-home .btn:hover { transform: translateY(-2px); }
.aios-home .btn-primary { background: linear-gradient(100deg, #3d6df2, #6e9bff); border-color: transparent; box-shadow: 0 18px 60px rgba(61,109,242,.45); }
.aios-home .btn-primary:hover { box-shadow: 0 22px 80px rgba(61,109,242,.6); }
.aios-home .btn-ghost { color: #cfe0ff; }

/* the live phone: a pulsing ring, a ghost finger that taps through real screens, a callout */
.aios-home .phone-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.aios-home .phone.tour { box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 8px rgba(255,255,255,.02), 0 0 80px rgba(110,155,255,.35); }
.aios-home .phone.tour::after { content: ""; position: absolute; inset: -14px; border-radius: 68px; border: 3px solid rgba(110,155,255,.7); animation: ring 2.4s ease-out infinite; pointer-events: none; }
@keyframes ring { 0% { opacity: .9; transform: scale(.98); } 100% { opacity: 0; transform: scale(1.08); } }
.aios-home .phone.tour.mine::after { animation: none; opacity: 0; }
/* a real phone status bar: the app starts below the notch */
.aios-home .phone .sbar { position: absolute; z-index: 1; inset: 0 0 auto 0; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; background: #fff; color: #0b1222; font: 600 15px 'Inter', system-ui, sans-serif; }
.aios-home .phone .sbar i { display: inline-flex; gap: 5px; align-items: center; font-style: normal; }
.aios-home .phone .sbar svg { display: block; }
.aios-home .phone iframe { top: 38px; height: 880px; }
.aios-home .phone .notch { top: 14px; width: 96px; height: 26px; }
/* LIVE pill sits above the phone, never over the screen */
.aios-home .phone .badge-live { white-space: nowrap; top: -58px; right: auto; left: 50%; transform: translateX(-50%); }
.aios-home .phone-stage { padding-top: 46px; }
.aios-home .finger { position: absolute; z-index: 5; left: 50%; top: 60%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 30%, rgba(255,255,255,.35) 31% 60%, rgba(255,255,255,0) 61%);
  box-shadow: 0 6px 22px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: left .75s cubic-bezier(.4,0,.2,1), top .75s cubic-bezier(.4,0,.2,1), opacity .3s, transform .15s; }
.aios-home .finger.on { opacity: 1; }
.aios-home .finger.press { transform: scale(.78); }
.aios-home .finger.press::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(255,255,255,.9); animation: tap .55s ease-out forwards; }
@keyframes tap { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.aios-home .tap-callout { position: absolute; right: calc(100% - 10px); top: 120px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-family: var(--disp); font-size: 34px; color: var(--amber); white-space: nowrap; transform: rotate(-4deg); pointer-events: none; transition: opacity .4s; }
.aios-home .tap-callout b { color: #fff; font-weight: 700; }
.aios-home .tap-callout svg { color: var(--amber); margin-right: -20px; }
.aios-home .phone-stage.mine .tap-callout { opacity: 0; }
.aios-home .phone-cap { font-size: 22px; color: var(--mute); text-align: center; max-width: 420px; }
.aios-home .phone-cap .tour-state { color: #cfe0ff; font-weight: 600; }
.aios-home .dash { grid-template-columns: 1fr 470px; }
.aios-home.mob .tap-callout { position: static; transform: none; align-items: center; font-size: 30px; }
.aios-home.mob .tap-callout svg { transform: rotate(60deg); margin: 0; }

/* AI employee on WhatsApp */
.aios-home .ai-grid { display: grid; grid-template-columns: 720px 1fr; gap: 70px; margin-top: 40px; align-items: start; }
.aios-home .wa-head { display: flex; align-items: center; gap: 16px; padding: 4px 6px 16px; border-bottom: 1px solid #1f2c33; margin-bottom: 6px; font-size: 22px; }
.aios-home .wa-head i { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg,#3d6df2,#22d3ee); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--disp); font-weight: 700; }
.aios-home .wa-head small { display: block; font-family: var(--mono); font-size: 16px; color: #8fa3ad; }
.aios-home .bub.sys { align-self: center; background: rgba(255,191,71,.12); border: 1px solid rgba(255,191,71,.45); color: #ffd98a; font-family: var(--mono); font-size: 18px; border-radius: 12px; }
.aios-home .verbs { display: grid; gap: 18px; }

/* proof: AIOS portfolio as deck cards */
.aios-home .works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.aios-home .work { overflow: hidden; display: flex; flex-direction: column; }
.aios-home .work .helix-media-link { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1222; border-bottom: 1px solid var(--line); }
.aios-home .work img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.aios-home .work:hover img { transform: scale(1.04); }
.aios-home .work-body { padding: 28px 30px 32px; display: grid; gap: 10px; }
.aios-home .work-body small { font-family: var(--mono); font-size: 18px; color: var(--blue); letter-spacing: 2px; text-transform: uppercase; }
.aios-home .work-body h3 { font-size: 34px; }
.aios-home .work-body p { font-size: 22px; color: var(--mute); line-height: 1.45; }
.aios-home .more-link { font-family: var(--mono); font-size: 22px; color: #cfe0ff; pointer-events: auto; }

/* questions (FAQPage) */
.aios-home .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 46px; align-items: start; }
.aios-home .faq { padding: 0; overflow: hidden; }
.aios-home .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px; padding: 28px 32px; pointer-events: auto; }
.aios-home .faq summary::-webkit-details-marker { display: none; }
.aios-home .faq summary h3 { flex: 1; font-size: 30px; line-height: 1.25; }
.aios-home .faq-x { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font: 400 30px var(--mono); color: var(--blue); transition: transform .3s, background .3s; }
.aios-home .faq[open] .faq-x { transform: rotate(45deg); background: rgba(110,155,255,.12); }
.aios-home .faq[open] { border-color: rgba(110,155,255,.4); }
.aios-home .faq p { padding: 0 32px 30px; font-size: 24px; line-height: 1.55; color: var(--mute); }
.aios-home.mob .faq-grid { grid-template-columns: 1fr; }
.aios-home.mob .faq summary h3 { font-size: 26px; }
.aios-home.mob .faq p { font-size: 22px; }

/* next step + contact */
.aios-home .next-grid { display: grid; grid-template-columns: 1fr 760px; gap: 60px; margin-top: 50px; align-items: start; }
.aios-home .nsteps { display: grid; gap: 22px; }
.aios-home .nstep { padding: 32px 36px; display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; }
.aios-home .nstep b { grid-row: span 2; font-family: var(--mono); font-size: 48px; color: var(--amber); }
.aios-home .nstep h3 { font-size: 36px; }
.aios-home .nstep p { font-size: 24px; color: var(--mute); }
.aios-home .contact-card { padding: 40px 42px; pointer-events: auto; }
.aios-home .contact-card h3 { font-size: 36px; margin-bottom: 8px; }
.aios-home .contact-card > p { font-size: 22px; color: var(--mute); margin-bottom: 26px; }
.aios-home .cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.aios-home .cf-field { display: grid; gap: 8px; }
.aios-home .cf-full { grid-column: 1 / -1; }
.aios-home .cf-field label { font-family: var(--mono); font-size: 17px; letter-spacing: 1px; color: var(--mute); text-transform: uppercase; }
.aios-home .cf-field input, .aios-home .cf-field textarea { width: 100%; font: 24px var(--text); color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; outline: none; transition: border-color .2s, box-shadow .2s; }
.aios-home .cf-field textarea { min-height: 150px; resize: vertical; }
.aios-home .cf-field input:focus, .aios-home .cf-field textarea:focus { border-color: rgba(110,155,255,.7); box-shadow: 0 0 0 4px rgba(110,155,255,.15); }
.aios-home .cf-submit { margin-top: 22px; width: 100%; justify-content: center; border: 0; cursor: pointer; }
.aios-home .cf-note { margin-top: 14px; font-size: 19px; color: var(--dim); text-align: center; }
.aios-home [data-contact-ajax] .contact-field-error { font-size: 18px; }

/* phones (set by home.js below 820 px): the 640-wide stage reflows into one column */
.aios-home.mob .slide { width: 640px; min-height: 0; padding: 92px 34px 120px; }
.aios-home.mob .slide .foot { left: 34px; right: 34px; bottom: 44px; font-size: 17px; gap: 14px; }
.aios-home.mob .slide .foot span:last-child { flex: none; }
.aios-home.mob h2 { font-size: 50px !important; line-height: 1.08; max-width: none !important; }
.aios-home.mob #coverH { font-size: 82px !important; }
.aios-home.mob .eyebrow { font-size: 19px; letter-spacing: 3px; }
.aios-home.mob .cover-logos { gap: 18px; }
.aios-home.mob .cover-logos img.aios { height: 52px; }
.aios-home.mob .cover-logos img.omh { height: 50px; }
.aios-home.mob .btn { font-size: 26px; padding: 20px 30px; }
.aios-home.mob .pill { font-size: 19px; }
.aios-home.mob .qgrid, .aios-home.mob .race, .aios-home.mob .cols2, .aios-home.mob .kpis, .aios-home.mob .dash,
.aios-home.mob .stairs, .aios-home.mob .ai-grid, .aios-home.mob .works, .aios-home.mob .next-grid, .aios-home.mob .cmp,
.aios-home.mob .ms, .aios-home.mob .ev-grid, .aios-home.mob .one-grid { grid-template-columns: 1fr !important; }
.aios-home.mob .qgrid { gap: 18px; margin-top: 40px; }
.aios-home.mob .q { padding: 30px 32px; }
.aios-home.mob .q b { font-size: 64px; margin-bottom: 10px; }
.aios-home.mob .race { height: auto; }
.aios-home.mob .lane { min-height: 420px; }
.aios-home.mob .pain { flex-direction: column; gap: 40px !important; align-items: stretch !important; }
.aios-home.mob .pain .ring-wrap { align-self: center; }
.aios-home.mob .flow3 { flex-direction: column; align-items: stretch; }
.aios-home.mob .flow3 .arrow { transform: rotate(90deg); align-self: center; }
.aios-home.mob .net-wrap svg { width: 100%; height: auto; }
.aios-home.mob .dash > div:last-child { order: -1; }
.aios-home.mob .phones { flex-direction: column; gap: 50px !important; }
.aios-home.mob .one-win { height: auto; min-height: 640px; }
.aios-home.mob .reply table { font-size: 18px; }
.aios-home.mob .sugg { flex-wrap: wrap; }
.aios-home.mob .tline { display: none; }
.aios-home.mob .ms { margin-top: 30px; gap: 34px; }
.aios-home.mob .fr, .aios-home.mob .ftotal { grid-template-columns: 1fr; gap: 14px; }
.aios-home.mob .ftotal .n { text-align: left; }
.aios-home.mob .brow { grid-template-columns: 1fr 120px; }
.aios-home.mob .brow .btrack { grid-column: 1 / -1; grid-row: 2; }
.aios-home.mob .cf-grid { grid-template-columns: 1fr; }
.aios-home.mob .demo-head { flex-direction: column; align-items: flex-start !important; gap: 20px; }

/* present mode (?present): the same sections as Timothy's keyboard deck */
body.aios-present { overflow: hidden; background: #000; }
body.aios-present .aios-public-nav, body.aios-present .aios-public-footer { display: none !important; }
.aios-home.present #present-stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.aios-home.present #present-stage > .stage-box { position: relative; width: 1920px; height: 1080px; flex: none; transform-origin: center center; overflow: hidden; background: var(--bg); }
.aios-home.present .stage-wrap { position: absolute; inset: 0; height: 1080px !important; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
.aios-home.present .stage-wrap.cur { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.aios-home.present .stage-wrap > .slide { transform: none !important; height: 1080px; }
.aios-home.present #bar, .aios-home.present #hud { display: block; }

.aios-home.present #bg { position: absolute; width: 1920px; height: 1080px; }
.aios-home.present .glow { position: absolute; }

/* without JavaScript every section shows its end state */
.aios-home:not(.js) :is(.a, .pop, .q, .w, .bub, .tl, .reply, .st, .fd) { opacity: 1; transform: none; filter: none; }
.aios-home:not(.js) .stage-wrap > .slide { width: 100%; max-width: 1920px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .aios-home .a, .aios-home .pop, .aios-home .q, .aios-home .w, .aios-home .bub, .aios-home .tl, .aios-home .reply, .aios-home .st, .aios-home .fd { transition: none !important; animation: none !important; }
  .aios-home .grad { animation: none; }
}

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Splash (intro.js): navy like the scene, logo drawn and flown to the navbar; the CSS failsafe hides it if JS never runs */
.splash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; pointer-events: none;
  animation: splashFailsafe 0s linear 6s forwards; }
.splash-bg { position: absolute; inset: 0; pointer-events: auto;
  background: radial-gradient(60% 50% at 50% 50%, rgba(110,155,255,.10), transparent 70%), #060a14; }
.splash-logo { position: relative; width: min(78vw, 560px); height: auto; overflow: visible; transform-origin: 0 0; will-change: transform; }
.splash .sweep { stroke-dasharray: 1320; stroke-dashoffset: 1320; }
.splash .trace { stroke-dasharray: 1043; stroke-dashoffset: 1043; filter: drop-shadow(0 0 6px rgba(157,184,255,.8)); }
.splash .mark { opacity: 0; }
.splash .ltr { transform: translateY(260px); }
html.splashing .aios-public-logo { visibility: hidden; }
@keyframes splashFailsafe { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .splash { display: none; } }