/* X1 "Aurora": a night-sky page. Live aurora light behind a centered headline, frosted-glass cards,
   a photo deck that tilts flat as you scroll, cursor spotlights on every card. Committed dark look. */
:root {
  --bg: #04060F; --fg: #F2F6FF; --muted: #9AA7C2; --line: rgba(255,255,255,0.08);
  --card-bg: rgba(255,255,255,0.035); --card-line: rgba(255,255,255,0.09);
  --brand: #2F6BFF; --accent: #5CE1FF; --btn-bg: #FFFFFF; --btn-fg: #04060F; --glow: rgba(92,225,255,0.32); --spot: rgba(92,225,255,0.10);
  --chip-bg: rgba(255,255,255,0.06); --nav-bg: rgba(4,6,15,0.55); --nav-line: rgba(255,255,255,0.08); --nav-fg: #F2F6FF; --nav-muted: #9AA7C2; --nav-solid: #04060F;
  --mq-bg: transparent; --seg-bg: rgba(255,255,255,0.04); --seg-on: #FFFFFF; --seg-on-fg: #04060F;
  --path2-bg: linear-gradient(135deg, #1D4FE0 0%, #0B1E5B 100%); --path2-fg: #FFFFFF; --path2-muted: rgba(255,255,255,0.82);
  --mon-bg: #070B1A; --mon-bg-solid: #070B1A; --mon-fg: #F2F6FF; --mon-muted: #9AA7C2; --mon-line: rgba(255,255,255,0.08); --mon-line-strong: rgba(255,255,255,0.4); --mon-em: #5CE1FF;
  --contact-bg: linear-gradient(135deg, #1F5BFF 0%, #0A1F66 100%); --t2-bg: linear-gradient(160deg, #1F5BFF 0%, #0B2A8A 100%); --t2-fg: #FFFFFF;
  --display: "Sora", "Segoe UI", system-ui, sans-serif; --sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --serif: "Instrument Serif", Georgia, serif; --mark: "Poppins", "Segoe UI", system-ui, sans-serif;
  --r: 28px; --wrap: 1200px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 1.05rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.eyebrow { font-size: 0.8rem; font-weight: 600; color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase; }
.sec { padding-block: clamp(80px, 11vw, 140px); position: relative; }
.head { display: grid; gap: 14px; text-align: center; justify-items: center; margin-bottom: 44px; }
.head h2 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.2rem); }
.head p { color: var(--muted); font-size: 1.15rem; max-width: 38rem; }
.center { display: flex; justify-content: center; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font-family: var(--sans); font-weight: 600; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer; transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease; position: relative; }
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn.primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 12px 40px var(--glow); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--card-line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); }

/* Card + cursor spotlight */
.card { background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--r); position: relative; overflow: hidden; }
.spot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 60%); z-index: 3; }
.spot:hover::after { opacity: 1; }

/* Nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; background: var(--nav-bg); backdrop-filter: saturate(170%) blur(18px); -webkit-backdrop-filter: saturate(170%) blur(18px); border-bottom: 1px solid var(--nav-line); }
.nav .bar { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--nav-fg); }
.brand img { width: 34px; }
.brand span { font-family: var(--mark); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.18em; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav ul a { display: block; padding: 8px 14px; border-radius: 999px; color: var(--nav-muted); text-decoration: none; font-size: 0.94rem; font-weight: 500; transition: color .2s ease, background-color .2s ease; }
.nav ul a:hover { color: var(--nav-fg); background: var(--chip-bg); }
.nav .btn { padding: 10px 20px; font-size: 0.9rem; }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--nav-line); background: transparent; color: var(--nav-fg); cursor: pointer; align-items: center; justify-content: center; }
.burger svg { width: 22px; height: 22px; }
.mmenu { display: none; }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--brand), var(--accent)); }

/* Marquee */
.marquee { padding-block: 22px; overflow: hidden; border-block: 1px solid var(--line); background: var(--mq-bg); }
.track { display: flex; gap: 48px; width: max-content; animation: slide 42s linear infinite; }
.track span { font-weight: 600; font-size: 1.05rem; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 48px; }
.track span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }

/* Size picker */
.seg { position: relative; display: inline-flex; padding: 6px; border-radius: 999px; background: var(--seg-bg); border: 1px solid var(--card-line); gap: 4px; margin: 0 auto 30px; }
.seg-ind { position: absolute; top: 6px; bottom: 6px; left: 6px; width: 0; border-radius: 999px; background: var(--seg-on); box-shadow: 0 6px 20px var(--glow); transition: left .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1); }
.seg button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--muted); font-family: var(--sans); font-weight: 600; font-size: 0.98rem; padding: 12px 24px; border-radius: 999px; cursor: pointer; transition: color .3s ease; }
.seg button[aria-selected="true"] { color: var(--seg-on-fg); }
.panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); min-height: 470px; border-radius: 36px; }
.panel figure { margin: 0; position: relative; min-height: 320px; overflow: hidden; }
.panel figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform 1.2s ease; }
.panel .copy { padding: clamp(28px, 4vw, 56px); display: grid; gap: 18px; align-content: center; transition: opacity .35s ease, transform .35s ease; position: relative; z-index: 2; }
.panel.fade .copy { opacity: 0; transform: translateY(8px); }
.panel.fade figure img { opacity: 0; transform: scale(1.04); }
.panel h3 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.7rem); }
.panel p { color: var(--muted); font-size: 1.1rem; }
.ex { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ex li, .path li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.ex svg, .path li svg { width: 20px; height: 20px; color: var(--accent); margin-top: 3px; }
.start { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); font-weight: 600; }
.start small { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Paths */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.path { padding: clamp(28px, 4vw, 48px); display: grid; gap: 14px; align-content: start; transition: transform .3s ease; transform-style: preserve-3d; }
.path .ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--chip-bg); color: var(--accent); }
.path .ico svg { width: 26px; height: 26px; }
.path h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.path p { color: var(--muted); font-size: 1.08rem; }
.path ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.path.alt { background: var(--path2-bg); border-color: transparent; color: var(--path2-fg); }
.path.alt h3 { color: var(--path2-fg); }
.path.alt p { color: var(--path2-muted); }
.path.alt .ico { background: rgba(255,255,255,0.14); color: var(--path2-fg); }
.foundation { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.foundation span { font-size: 0.86rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.14); color: var(--path2-fg); }

/* Monday */
.monday { background: var(--mon-bg); color: var(--mon-fg); overflow: hidden; }
.m-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; position: relative; z-index: 1; }
.m-grid h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; font-size: clamp(3rem, 1.6rem + 4.4vw, 5.4rem); line-height: 0.98; color: var(--mon-fg); margin-top: 14px; }
.m-grid h2 em { color: var(--mon-em); }
.m-grid .intro { color: var(--mon-muted); margin-top: 20px; max-width: 26rem; font-size: 1.1rem; }
.toggle { position: relative; display: inline-flex; margin-top: 28px; border: 1px solid var(--mon-line-strong); border-radius: 999px; padding: 4px; gap: 4px; }
.tg-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px; background: var(--mon-fg); transition: left .4s cubic-bezier(.2,.8,.2,1), width .4s cubic-bezier(.2,.8,.2,1); }
.toggle button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--mon-fg); font-family: var(--sans); font-size: 0.92rem; font-weight: 600; padding: 10px 22px; border-radius: 999px; cursor: pointer; transition: color .3s ease; }
.toggle button[aria-pressed="true"] { color: var(--mon-bg-solid); }
.day { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mon-line-strong); }
.day li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 20px; padding-block: 20px; border-bottom: 1px solid var(--mon-line); align-items: baseline; }
.day time { font-size: 0.84rem; color: var(--mon-muted); font-variant-numeric: tabular-nums; }
.day span { font-family: var(--serif); font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); line-height: 1.2; transition: opacity .3s ease, transform .3s ease, color .3s ease; }
.day.after span { color: var(--mon-em); }
.day.swap span { opacity: 0; transform: translateY(8px); }
.note { margin-top: 14px; font-size: 0.8rem; color: var(--mon-muted); }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 16px; }
.tile { padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: transform .3s ease, border-color .3s ease; }
.tile h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); letter-spacing: -0.025em; }
.tile p { color: var(--muted); }
.tile .meta { font-size: 0.8rem; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; }
.t1 { grid-column: span 4; grid-row: span 2; justify-content: flex-end; min-height: 470px; }
.t1 img, .t4 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.t1::before, .t4::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4,10,24,0) 35%, rgba(4,10,24,0.9) 100%); }
.t1 > *:not(img), .t4 > *:not(img) { position: relative; z-index: 2; }
.t1 h3, .t4 h3 { color: #FFFFFF; }
.t1 p, .t4 p { color: #D7E0EB; max-width: 30rem; }
.t1 .meta, .t4 .meta { color: #8FDcff; }
.t1:hover img, .t4:hover img { transform: scale(1.05); }
.t2 { grid-column: span 2; background: var(--t2-bg); border-color: transparent; }
.t2 h3, .t2 p, .t2 .meta { color: var(--t2-fg); }
.t2 p { opacity: .86; }
.t3 { grid-column: span 2; }
.t4 { grid-column: span 4; justify-content: flex-end; min-height: 300px; }
.t5 { grid-column: span 2; }
.t6 { grid-column: span 6; }
.big { font-family: var(--display); font-size: clamp(3rem, 2rem + 3.4vw, 5rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--fg) 20%, var(--accent) 140%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.stats span { display: block; color: var(--muted); font-size: 0.95rem; margin-top: 8px; }
.src { font-size: 0.85rem; color: var(--muted); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; position: relative; }
.steps li { padding: 28px; display: grid; gap: 8px; align-content: start; }
.steps .n { width: 40px; height: 40px; border-radius: 12px; background: var(--chip-bg); color: var(--accent); font-family: var(--display); font-weight: 700; display: grid; place-items: center; }
.steps h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.steps p { color: var(--muted); font-size: 0.98rem; }

/* About + contact */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.about { border-radius: 36px; padding: clamp(28px, 4vw, 52px); display: grid; gap: 16px; align-content: start; }
.about h2, .contact h2 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.2rem); }
.about p { color: var(--muted); font-size: 1.1rem; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.facts span { font-size: 0.9rem; font-weight: 500; padding: 8px 14px; border-radius: 999px; background: var(--chip-bg); }
.contact { border-radius: 36px; background: var(--contact-bg); border-color: transparent; color: #FFFFFF; padding: clamp(28px, 4vw, 52px); display: grid; gap: 16px; align-content: start; }
.contact h2 { color: #FFFFFF; }
.contact .eyebrow { color: #9FE3FF; }
.contact p { color: rgba(255,255,255,0.86); font-size: 1.1rem; }
.email { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem); user-select: all; overflow-wrap: anywhere; }
.contact .row { display: flex; gap: 10px; flex-wrap: wrap; }
.contact .btn.w { background: #FFFFFF; color: #0B2A5E; }
.contact .btn.o { background: rgba(255,255,255,0.14); color: #FFFFFF; }
.status { min-height: 1.3em; font-size: 0.92rem; color: rgba(255,255,255,0.85); }
.next { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; counter-reset: n; }
.next li { counter-increment: n; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; color: rgba(255,255,255,0.92); }
.next li::before { content: counter(n); width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.18); display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; }
footer { padding-block: 32px; color: var(--muted); font-size: 0.9rem; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; }

/* Reveal: transform-only so content is always readable */
.rv { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.js .rv.pre { transform: translateY(30px); }

@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
  .rv, .panel .copy, .panel figure img, .day span, .seg-ind, .tg-ind, .tile, .path, .t1 img, .t4 img { transition: none; }
}
@media (max-width: 960px) {
  .nav ul, .nav .bar > .btn { display: none; }
  .burger { display: inline-flex; }
  .mmenu.open { display: grid; gap: 4px; padding: 8px clamp(16px, 4vw, 40px) 18px; border-bottom: 1px solid var(--nav-line); background: var(--nav-solid); }
  .mmenu a { padding: 13px 4px; color: var(--nav-fg); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--nav-line); }
  .mmenu a.btn { margin-top: 10px; justify-content: center; border: 0; color: var(--btn-fg); }
  .panel, .duo, .m-grid, .paths { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t1, .t4, .t6 { grid-column: span 2; }
  .t2, .t3, .t5 { grid-column: span 1; }
  .t1 { min-height: 380px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .t1, .t2, .t3, .t4, .t5, .t6 { grid-column: span 1; }
  .stats, .steps { grid-template-columns: minmax(0, 1fr); }
  .seg button { padding: 10px 14px; font-size: 0.9rem; }
  .day li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .brand span { display: none; }
}

.card { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.card:hover { border-color: rgba(92,225,255,0.28); }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 120px) 0; text-align: center; isolation: isolate; }
.aurora { position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .7; mix-blend-mode: screen; animation: float 18s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 52vw; height: 40vw; left: 4%; top: 6%; background: radial-gradient(circle, #1F5BFF 0%, transparent 65%); }
.aurora i:nth-child(2) { width: 46vw; height: 36vw; right: 2%; top: 0; background: radial-gradient(circle, #19C7E6 0%, transparent 65%); animation-duration: 22s; animation-delay: -6s; }
.aurora i:nth-child(3) { width: 34vw; height: 30vw; left: 34%; top: 26%; background: radial-gradient(circle, #6D4BFF 0%, transparent 65%); opacity: .45; animation-duration: 26s; animation-delay: -12s; }
@keyframes float { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vw, 3vw) scale(1.12); } 100% { transform: translate(-3vw, -2vw) scale(.95); } }
.gridfloor { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: -1; background-image: linear-gradient(rgba(92,225,255,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(92,225,255,0.12) 1px, transparent 1px); background-size: 56px 56px; transform: perspective(600px) rotateX(62deg); transform-origin: bottom; mask-image: linear-gradient(180deg, transparent 0%, #000 70%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%); opacity: .5; }
.hero-c { display: grid; justify-items: center; gap: 24px; }
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.badge { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #DDE8FF; background: rgba(4,6,15,0.6); }
.badge::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--a), rgba(92,225,255,0.1), #5CE1FF, #2F6BFF, rgba(92,225,255,0.1) 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 4s linear infinite; }
@keyframes spin { to { --a: 360deg; } }
.badge b { width: 8px; height: 8px; border-radius: 50%; background: #5CE1FF; box-shadow: 0 0 12px #5CE1FF; }
.hero h1 { font-size: clamp(3rem, 1.4rem + 6vw, 6.8rem); font-weight: 700; letter-spacing: -0.05em; max-width: 13ch; line-height: 0.98; }
.sheen { background: linear-gradient(100deg, #5CE1FF 0%, #FFFFFF 25%, #6E8BFF 50%, #5CE1FF 75%, #FFFFFF 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 7s linear infinite; }
@keyframes sheen { to { background-position: -200% 0; } }
.hero .lede { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); color: var(--muted); max-width: 36rem; }
.hero .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips span { font-size: 0.86rem; color: var(--muted); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--card-line); background: rgba(255,255,255,0.03); }
.stage { perspective: 1400px; margin-top: clamp(48px, 7vw, 88px); }
.deck { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 18px; transform: rotateX(var(--rx, 22deg)) scale(var(--sc, .94)); transform-origin: 50% 0%; transition: transform .1s linear; position: relative; }
.deck figure { margin: 0; border-radius: 26px; overflow: hidden; height: clamp(260px, 30vw, 420px); position: relative; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 40px 120px rgba(31,91,255,0.25); }
.deck figure:nth-child(2) { height: clamp(300px, 34vw, 470px); }
.deck figure:not(:nth-child(2)) { margin-top: 40px; }
.deck img { width: 100%; height: 100%; object-fit: cover; }
.deck figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(4,6,15,0.55)); }
.float { position: absolute; z-index: 3; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 18px; background: rgba(10,16,34,0.72); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); text-align: left; box-shadow: 0 20px 50px rgba(0,0,0,0.4); animation: bob 6s ease-in-out infinite; }
.float i { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #2F6BFF, #5CE1FF); display: grid; place-items: center; color: #04060F; }
.float i.ok { background: linear-gradient(135deg, #2EBE73, #9BF2C3); }
.float svg { width: 18px; height: 18px; }
.float b { display: block; font-size: 0.9rem; color: #FFFFFF; }
.float small { color: var(--muted); font-size: 0.8rem; }
.f1 { left: 2%; bottom: 18%; } .f2 { right: 2%; top: 10%; animation-delay: -3s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.fade-bottom { height: 120px; margin-top: -120px; position: relative; z-index: 4; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }

/* Section atmosphere */
#fit::before, #services::before, #fixes::before { content: ""; position: absolute; left: 50%; top: 40px; width: 70vw; height: 420px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(31,91,255,0.18), transparent 70%); pointer-events: none; z-index: -1; }
#fit, #services, #fixes { isolation: isolate; }
.monday::before { content: ""; position: absolute; right: -10%; top: -20%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(92,225,255,0.14), transparent 60%); pointer-events: none; }
.is-after .monday::before { background: radial-gradient(circle, rgba(92,225,255,0.26), transparent 60%); }
.contact { box-shadow: 0 30px 90px rgba(31,91,255,0.35); }
.steps li::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #5CE1FF, transparent); opacity: .6; }

@media (prefers-reduced-motion: reduce) { .aurora i, .badge::before, .sheen, .float { animation: none; } .deck { transform: none; } }
@media (max-width: 900px) {
  .deck { grid-template-columns: 1fr 1fr; transform: none; }
  .deck figure:nth-child(1) { display: none; }
  .deck figure:not(:nth-child(2)) { margin-top: 0; }
  .f1 { left: 8px; bottom: 6%; } .f2 { right: 8px; top: 4%; }
}
@media (max-width: 560px) { .deck { grid-template-columns: 1fr; } .deck figure:nth-child(3) { display: none; } .f2 { display: none; } }

/* ===== Cross-device hardening ===== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }
body { -webkit-tap-highlight-color: transparent; }
.wrap { padding-left: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right, 0px)); }
picture { display: contents; }
.aurora i { will-change: transform; }
.paused .aurora i, .paused .badge::before, .paused .sheen, .paused .float, .mq-paused .track { animation-play-state: paused; }
/* Glass blur only where it is cheap: large screens with a mouse. Phones get a solid tint instead. */
.card { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (hover: hover) and (min-width: 900px) { .card { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }
@media (max-width: 900px) {
  .card { background: rgba(255,255,255,0.045); }
  .aurora i { filter: blur(60px); mix-blend-mode: normal; opacity: .55; }
  .aurora i:nth-child(3) { display: none; }
  .gridfloor { opacity: .3; }
}
/* Comfortable touch targets */
.seg button, .toggle button, .btn, .burger { min-height: 44px; }
.toggle button { padding: 10px 22px; }
@media (hover: none) { .spot::after { display: none; } .btn:hover, .tile:hover { transform: none; } }

/* Pre-rendered picker panes (all text is in the page for search and AI crawlers) */
.panel { display: block; min-height: 0; }
.pane { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); min-height: 470px; }
.pane[hidden] { display: none; }
.pane figure { margin: 0; position: relative; min-height: 320px; overflow: hidden; }
.pane figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pane .copy { padding: clamp(28px, 4vw, 56px); display: grid; gap: 18px; align-content: center; position: relative; z-index: 2; }
.pane h3 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.7rem); }
.pane p { color: var(--muted); font-size: 1.1rem; }
.pane.enter { animation: paneIn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes paneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.day[hidden] { display: none; }
.day.enter span { animation: paneIn .45s cubic-bezier(.2,.8,.2,1) both; }
.day.enter li:nth-child(2) span { animation-delay: .04s; } .day.enter li:nth-child(3) span { animation-delay: .08s; } .day.enter li:nth-child(4) span { animation-delay: .12s; } .day.enter li:nth-child(5) span { animation-delay: .16s; }
.day.after span { color: var(--mon-em); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-grid .head { text-align: left; justify-items: start; margin-bottom: 0; }
.faq { border-top: 1px solid var(--card-line); }
.faq details { border-bottom: 1px solid var(--card-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 2px; min-height: 44px; font-family: var(--display); font-weight: 600; font-size: 1.08rem; color: var(--fg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--chip-bg); color: var(--accent); display: grid; place-items: center; transition: transform .25s ease; }
.faq summary .pm svg { width: 16px; height: 16px; }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 2px 24px; max-width: 44rem; }
footer .wrap { align-items: center; }
footer a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .pane.enter, .day.enter span { animation: none; } .faq summary .pm { transition: none; } }
@media (max-width: 960px) { .pane, .faq-grid { grid-template-columns: minmax(0, 1fr); } }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #FFFFFF; color: #04060F; padding: 10px 14px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.badge { margin: 0; }
.chips li, .facts li, .foundation li { display: contents; }

.path ul.foundation { display: flex; flex-wrap: wrap; gap: 8px; }
.brand { min-height: 44px; }

/* ===== v2: multi-page additions ===== */
.nav ul a[aria-current="page"] { color: var(--nav-fg); background: var(--chip-bg); }
.mmenu a[aria-current="page"] { color: var(--accent); }

/* Inner-page hero */
.phero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(64px, 9vw, 112px) clamp(40px, 6vw, 72px); text-align: center; }
.phero .aurora { height: 140%; opacity: .75; }
.phero .hero-c { gap: 18px; }
.phero h1 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.2rem); letter-spacing: -0.045em; max-width: 16ch; line-height: 1; }
.phero .lede { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); color: var(--muted); max-width: 38rem; }
.phero .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sec.tight { padding-block: clamp(56px, 8vw, 96px); }
.more { margin-top: 28px; display: flex; justify-content: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--accent); min-height: 44px; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* Fixes */
.fixgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fix { padding: clamp(24px, 3vw, 32px); display: grid; gap: 12px; align-content: start; scroll-margin-top: 96px; }
.fix .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--chip-bg); color: var(--accent); }
.fix .ico svg { width: 24px; height: 24px; }
.fix h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem); letter-spacing: -0.025em; line-height: 1.12; }
.fix p { color: var(--muted); }
.fix dl { margin: 0; display: grid; gap: 10px; }
.fix dt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.fix dd { margin: 2px 0 0; color: var(--muted); }
.fix dd.do { color: var(--fg); }
.for { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.for li { font-size: 0.8rem; font-weight: 500; padding: 5px 11px; border-radius: 999px; background: var(--chip-bg); color: var(--muted); }
.fix.feature { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; gap: 0; background: var(--t2-bg); border-color: transparent; }
.fix.feature figure { margin: 0; position: relative; min-height: 300px; }
.fix.feature figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fix.feature .copy { padding: clamp(24px, 3vw, 36px); display: grid; gap: 12px; align-content: center; }
.fix.feature h3, .fix.feature dd.do { color: #FFFFFF; }
.fix.feature p, .fix.feature dd { color: rgba(255,255,255,0.84); }
.fix.feature dt { color: #9FE3FF; }
.fix.feature .ico { background: rgba(255,255,255,0.16); color: #FFFFFF; }
.fix.feature .for li { background: rgba(255,255,255,0.14); color: #FFFFFF; }
.tag { display: inline-block; justify-self: start; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.16); color: #FFFFFF; }
a.fix { text-decoration: none; color: inherit; transition: transform .25s ease, border-color .25s ease; }
a.fix:hover { transform: translateY(-3px); }
a.fix .go { margin-top: 4px; color: var(--accent); font-weight: 600; font-size: 0.95rem; display: inline-flex; gap: 6px; align-items: center; }
a.fix .go svg { width: 15px; height: 15px; }
.fixnote { margin-top: 22px; text-align: center; color: var(--muted); font-size: 0.95rem; }

/* Who I help */
.biz-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.biz-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--card-line); background: rgba(255,255,255,0.03); color: var(--fg); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: border-color .2s ease, background-color .2s ease; }
.biz-nav a:hover { border-color: var(--accent); background: var(--chip-bg); }
.biz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border-radius: 36px; scroll-margin-top: 90px; }
.biz + .biz { margin-top: 18px; }
.biz:nth-of-type(even) figure { order: 2; }
.biz figure { margin: 0; position: relative; min-height: 320px; overflow: hidden; }
.biz figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.biz .noimg { display: grid; place-items: center; background: var(--path2-bg); color: #FFFFFF; }
.biz .noimg svg { width: 96px; height: 96px; opacity: .9; }
.biz .copy { padding: clamp(28px, 4vw, 52px); display: grid; gap: 16px; align-content: center; }
.biz h2 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); }
.biz .kinds { color: var(--muted); font-size: 0.98rem; }
.biz h3 { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.biz .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.biz ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.biz li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; color: var(--muted); }
.biz li svg { width: 18px; height: 18px; color: var(--accent); margin-top: 4px; }
.biz li a { color: var(--fg); text-decoration-color: rgba(92,225,255,0.5); text-underline-offset: 3px; }
.biz .pain li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); margin: 10px 0 0 6px; }

/* Trust */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.trust li { padding: 26px; display: grid; gap: 8px; align-content: start; }
.trust h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
.trust p { color: var(--muted); font-size: 0.98rem; }
.trust .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--chip-bg); color: var(--accent); }
.trust .ico svg { width: 20px; height: 20px; }

/* Call-to-action band */
.ctaband { border-radius: 36px; background: var(--contact-bg); border-color: transparent; color: #FFFFFF; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px 40px; align-items: center; box-shadow: 0 30px 90px rgba(31,91,255,0.35); }
.ctaband h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); color: #FFFFFF; }
.ctaband p { color: rgba(255,255,255,0.86); font-size: 1.1rem; margin-top: 12px; max-width: 34rem; }
.ctaband .row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.w { background: #FFFFFF; color: #0B2A5E; }
.btn.o { background: rgba(255,255,255,0.14); color: #FFFFFF; }

/* Contact page */
.cgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 18px; align-items: start; }
.formcard { padding: clamp(24px, 4vw, 48px); border-radius: 36px; scroll-margin-top: 90px; }
.formcard h2 { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.5rem); }
.formcard > p { color: var(--muted); margin-top: 10px; }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 16px; margin-top: 28px; }
.form .full { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; align-content: start; }
.field > label, .field legend { font-weight: 600; font-size: 0.95rem; color: var(--fg); padding: 0; }
.field .opt { font-weight: 500; color: var(--muted); font-size: 0.85rem; }
.field .req { color: var(--accent); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--fg); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); border-radius: 14px; padding: 13px 15px; min-height: 50px; transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; }
.form textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.form input::placeholder, .form textarea::placeholder { color: #6F7C98; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(92,225,255,0.22); }
.form [aria-invalid="true"] { border-color: #FF7A8A !important; }
.err { font-size: 0.86rem; color: #FF9AA7; min-height: 0; }
.err:empty { display: none; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.pills label { position: relative; display: inline-flex; }
.pills input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pills span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); color: var(--muted); font-weight: 500; font-size: 0.94rem; cursor: pointer; transition: all .2s ease; user-select: none; }
.pills span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,0.4); flex-shrink: 0; transition: all .2s ease; }
.pills input[type="radio"] + span::before { border-radius: 50%; }
.pills input:checked + span { color: var(--fg); border-color: var(--accent); background: rgba(92,225,255,0.12); }
.pills input:checked + span::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px #04060F; }
.pills input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.pills.invalid span { border-color: rgba(255,122,138,0.6); }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--muted); font-size: 0.95rem; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #5CE1FF; }
.fine { font-size: 0.86rem; color: var(--muted); }
.fine a { color: var(--accent); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.submit { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.submit .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.formerr { color: #FFB3BD; font-size: 0.95rem; }
.formerr:empty { display: none; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(4,6,15,0.25); border-top-color: #04060F; animation: rot .8s linear infinite; display: none; }
.sending .spin { display: inline-block; }
@keyframes rot { to { transform: rotate(360deg); } }
.ack { display: grid; gap: 16px; margin-top: 8px; }
.ack[hidden] { display: none; }
.ack .ok { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #2EBE73, #9BF2C3); color: #04060F; }
.ack .ok svg { width: 28px; height: 28px; }
.ack h2 { outline: none; }
.ack p { color: var(--muted); font-size: 1.05rem; }
.ack p b { color: var(--fg); }
.ack dl { margin: 6px 0 0; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); border-top: 1px solid var(--card-line); }
.ack dt, .ack dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--card-line); }
.ack dt { color: var(--muted); font-size: 0.92rem; padding-right: 16px; }
.ack dd { color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.ack .preview { font-size: 0.85rem; color: #FFD38A; }
.ack .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.side { display: grid; gap: 18px; }
.side .contact { gap: 14px; }
.side .contact h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); }
.side .contact p { font-size: 1rem; }
.side .mini { border-radius: 28px; padding: clamp(24px, 3vw, 32px); display: grid; gap: 12px; }
.side .mini h2 { font-size: 1.4rem; }
.side .mini p { color: var(--muted); }
.side .email { font-size: 1.1rem; }
.side .row { display: flex; gap: 10px; flex-wrap: wrap; }
.side .status { color: var(--muted); }
.next.dark li { color: var(--muted); }
.next.dark li::before { background: var(--chip-bg); color: var(--accent); }

/* Prose (privacy) */
.prose { max-width: 46rem; margin-inline: auto; }
.prose h2 { font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.8rem); margin-top: 44px; letter-spacing: -0.025em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); font-size: 1.04rem; }
.prose p { margin-top: 14px; }
.prose ul { margin: 14px 0 0; padding-left: 1.2rem; display: grid; gap: 8px; }
.prose strong { color: var(--fg); }
.prose .updated { font-size: 0.9rem; }

/* Footer v2 */
footer.v2 { padding-block: 56px 32px; }
footer.v2 .wrap { display: block; border-top: 0; padding-top: 0; }
footer.v2 .fgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--line); padding-top: 40px; }
footer.v2 .brand { margin-bottom: 12px; }
footer.v2 p { color: var(--muted); max-width: 22rem; }
footer.v2 h2 { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); margin-bottom: 12px; }
footer.v2 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
footer.v2 ul a { display: inline-flex; align-items: center; min-height: 36px; color: var(--muted); text-decoration: none; }
footer.v2 ul a:hover { color: var(--fg); }
footer.v2 .legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; }

/* Sticky mobile call-to-action */
.mcta { display: none; }
@media (max-width: 700px) {
  .mcta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px max(12px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px)); background: rgba(4,6,15,0.94); border-top: 1px solid var(--nav-line); transform: translateY(110%); transition: transform .3s ease; }
  .mcta.show { transform: none; }
  .mcta .btn { justify-content: center; padding: 12px 14px; font-size: 0.95rem; }
  body.has-mcta { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 960px) {
  .fixgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biz, .cgrid { grid-template-columns: minmax(0, 1fr); }
  .biz:nth-of-type(even) figure { order: 0; }
  .biz figure { min-height: 260px; }
  .ctaband { grid-template-columns: minmax(0, 1fr); }
  footer.v2 .fgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  footer.v2 .fgrid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .fixgrid, .trust { grid-template-columns: minmax(0, 1fr); }
  .fix.feature { grid-column: span 1; grid-template-columns: minmax(0, 1fr); }
  .fix.feature figure { min-height: 220px; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .biz .two { grid-template-columns: minmax(0, 1fr); }
  .ack dl { grid-template-columns: minmax(0, 1fr); }
  .ack dt { border-bottom: 0; padding-bottom: 0; }
  .ack dd { padding-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } a.fix, .mcta { transition: none; } }

/* Keep coloured cards coloured on phones (the generic phone card tint must not override them) */
.contact.card { background: var(--contact-bg); }
.path.alt.card { background: var(--path2-bg); }
.tile.t2.card { background: var(--t2-bg); }
.fix.feature.card { background: var(--t2-bg); }
.ctaband.card { background: var(--contact-bg); }
.prefer { margin-top: 10px; font-size: 0.98rem; color: var(--muted); }
@media (min-width: 961px) { .prefer { display: none; } }

.check.small { font-size: 0.88rem; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin-top: 2px; min-height: 32px; align-items: center; }
.check.small input { width: 18px; height: 18px; margin: 0; }
.form input:disabled { opacity: .45; }
.prefer a { display: inline-block; padding-block: 10px; }

/* v1.7: plain-language lede, call info, Quick Win, commitments, shorter phone home page */
.hero .lede2 { font-size: 0.98rem; color: var(--muted); max-width: 34rem; opacity: .9; margin-top: -10px; }
.callnote { font-size: 0.86rem; color: var(--muted); margin-top: -8px; }
.callinfo { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.18); }
.callinfo .ci-t { font-size: 0.78rem !important; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9FE3FF !important; margin: 0 !important; }
.callinfo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.callinfo li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.96rem; color: rgba(255,255,255,0.9); }
.callinfo .ci { width: 22px; height: 22px; display: grid; place-items: center; color: #9FE3FF; margin-top: 1px; }
.callinfo .ci svg { width: 18px; height: 18px; }
.qw { border-radius: 36px; padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px 40px; align-items: center; background: linear-gradient(135deg, rgba(31,91,255,0.18), rgba(92,225,255,0.06)); }
.qw-copy { display: grid; gap: 14px; }
.qw h2 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); }
.qw p { color: var(--muted); font-size: 1.05rem; max-width: 40rem; }
.qw-cta { display: grid; gap: 12px; justify-items: start; }
.commit { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.commit li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--card-line); font-size: 0.92rem; font-weight: 500; }
.commit svg { width: 15px; height: 15px; color: var(--accent); }
@media (max-width: 960px) { .qw { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .steps li { padding: 18px; }
  .steps h3 { font-size: 1.08rem; }
  .steps p { font-size: 0.9rem; }
  #fixes .fixgrid { gap: 10px; }
  #fixes a.fix { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px; }
  #fixes a.fix .ico { width: 40px; height: 40px; grid-row: span 3; }
  #fixes a.fix p { font-size: 0.92rem; }
  .pane figure { min-height: 200px; }
  .pane .copy { padding: 22px; gap: 12px; }
  .pane .ex { gap: 6px; }
  .sec.tight { padding-block: 52px; }
  .monday.sec { padding-block: 64px; }
  .day li { padding-block: 14px; }
  .deck figure:nth-child(2) { height: 300px; }
}
@media (max-width: 640px) {
  /* Phone home page: shorter, same content order */
  #how .steps li p { display: none; }
  #how .steps li { padding: 14px 16px; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; }
  #how .steps .n { width: 34px; height: 34px; }
  #fit .pane figure { display: none; }
  #fit .head { margin-bottom: 24px; }
  #who { display: none; }
  .sec.tight { padding-block: 44px; }
  .head { margin-bottom: 28px; }
  footer.v2 { padding-block: 40px 28px; }
  footer.v2 .fgrid { gap: 22px; padding-top: 28px; }
}
/* Home teaser: 4 fixes fill one row on desktop, 2x2 on tablets */
#fixes .fixgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { #fixes .fixgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #fixes .fixgrid { grid-template-columns: minmax(0, 1fr); } }

/* v1.9: two feature cards and one wide card keep the 12-card fixes grid free of gaps */
.fixgrid { grid-auto-flow: row dense; }
.fix.feature.flip figure { order: 2; }
@media (min-width: 961px) { .fix.wide { grid-column: span 2; } }
@media (max-width: 640px) { .fix.feature.flip figure { order: 0; } }

/* ===== v2.0 hybrid look: light pages for reading; the dark aurora stays on the top banner,
   page banners, menu bar, call band and footer. Tokens first, then the few hard-coded colours. ===== */
:root {
  --bg: #F5F7FB; --fg: #0B1530; --muted: #4A5670; --line: rgba(11,21,48,0.10);
  --card-bg: #FFFFFF; --card-line: rgba(11,21,48,0.09);
  --brand: #1F5BFF; --accent: #1747D1; --btn-bg: #1F5BFF; --btn-fg: #FFFFFF; --glow: rgba(31,91,255,0.22); --spot: rgba(31,91,255,0.06);
  --chip-bg: #EAF0FF;
  --seg-bg: #FFFFFF; --seg-on: #0B1530; --seg-on-fg: #FFFFFF;
  --mon-bg: #EAF0FF; --mon-bg-solid: #EAF0FF; --mon-fg: #0B1530; --mon-muted: #4A5670; --mon-line: rgba(11,21,48,0.10); --mon-line-strong: rgba(11,21,48,0.28); --mon-em: #1747D1;
  --shadow: 0 1px 2px rgba(11,21,48,0.04), 0 10px 30px rgba(11,21,48,0.06);
  color-scheme: light;
}
/* Dark zones keep the original aurora tokens */
.hero, .phero, .nav, footer, .mcta {
  --bg: #04060F; --fg: #F2F6FF; --muted: #9AA7C2; --line: rgba(255,255,255,0.08);
  --card-bg: rgba(255,255,255,0.035); --card-line: rgba(255,255,255,0.12);
  --accent: #5CE1FF; --btn-bg: #FFFFFF; --btn-fg: #04060F; --glow: rgba(92,225,255,0.32); --chip-bg: rgba(255,255,255,0.08);
  --nav-bg: rgba(4,6,15,0.88); --nav-line: rgba(255,255,255,0.08); --nav-fg: #F2F6FF; --nav-muted: #B4C0D8; --nav-solid: #04060F;
  color-scheme: dark; color: var(--fg);
}
.hero, .phero, footer { background: #04060F; }
.nav { background: var(--nav-bg); }
.phero { padding-bottom: clamp(48px, 7vw, 88px); }
.phero + .sec { padding-top: clamp(40px, 6vw, 72px) !important; }
.hero .fade-bottom { background: linear-gradient(180deg, transparent, #F5F7FB); }
.hero { padding-bottom: 0; }
footer.v2 { margin-top: clamp(40px, 6vw, 72px); }
footer.v2 .fgrid { border-top: 0; padding-top: 0; }

/* Cards on light pages */
.card { box-shadow: var(--shadow); }
.card:hover { border-color: rgba(31,91,255,0.28); }
@media (max-width: 900px) { .card { background: #FFFFFF; } }
.contact, .ctaband { box-shadow: 0 24px 60px rgba(31,91,255,0.22); }
.steps li::before { background: linear-gradient(90deg, transparent, var(--brand), transparent); opacity: .35; }
.steps li.hl { border-color: rgba(31,91,255,0.45); box-shadow: 0 0 0 1px rgba(31,91,255,0.25), var(--shadow); }
.steps li.hl .n { background: var(--brand); color: #FFFFFF; }
#fit::before, #services::before, #fixes::before { background: radial-gradient(50% 50% at 50% 50%, rgba(31,91,255,0.07), transparent 70%); }
.monday::before { background: radial-gradient(circle, rgba(31,91,255,0.10), transparent 60%); }
.is-after .monday::before { background: radial-gradient(circle, rgba(31,91,255,0.18), transparent 60%); }
.biz-nav a { background: #FFFFFF; }
.biz li a { text-decoration-color: rgba(31,91,255,0.4); }
.t1 .meta, .t4 .meta { color: #9FE3FF; }
.big { background: linear-gradient(180deg, var(--fg) 20%, var(--brand) 140%); -webkit-background-clip: text; background-clip: text; }
.more.row2 { gap: 12px 22px; flex-wrap: wrap; align-items: center; }

/* Form on a light card */
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea { background: #FFFFFF; border-color: rgba(11,21,48,0.20); }
.form input::placeholder, .form textarea::placeholder { color: #6B7690; }
.form input:focus, .form textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,91,255,0.18); }
.form [aria-invalid="true"] { border-color: #C2283C !important; }
.err, .formerr { color: #B42335; }
.pills span { border-color: rgba(11,21,48,0.18); background: #FFFFFF; }
.pills span::before { border-color: rgba(11,21,48,0.40); }
.pills input:checked + span { background: #EAF0FF; border-color: var(--brand); }
.pills input:checked + span::before { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 3px #FFFFFF; }
.pills.invalid span { border-color: rgba(194,40,60,0.55); }
.check input { accent-color: #1F5BFF; }
.spin { border-color: rgba(255,255,255,0.35); border-top-color: #FFFFFF; }
.ack .preview { color: #7A4F00; }
.ack .ok { color: #04260F; }

/* Phone bottom bar stays dark */
.mcta .btn.ghost { color: #F2F6FF; }

/* v2.0 shorter phone home page */
@media (max-width: 640px) {
  .hero .chips { display: none; }
  #fixes a.fix { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; padding: 14px 16px; }
  #fixes a.fix .ico { grid-row: auto; }
  #fixes a.fix p { display: none; }
  #fixes a.fix .go { margin: 0; font-size: 0; gap: 0; }
  #fixes a.fix .go svg { width: 18px; height: 18px; }
  #fixes a.fix h3 { font-size: 1.08rem; }
  #fixes a.fix h3 br { display: none; }
  .monday .intro { margin-top: 12px; }
  .monday .toggle { margin-top: 18px; }
  .day li { padding-block: 10px; }
  .day span { font-size: 1.3rem; }
  .commit { gap: 6px; margin-top: 16px; }
  .commit li { padding: 5px 10px; font-size: 0.8rem; }
  #how .more.row2 .btn { display: none; }
  #how .more { margin-top: 16px; }
  #fit .pane .copy > p:not(.start) { font-size: 1rem; }
}

/* ===== v3.0 simpler site: business cards, fixes filter, plain fix cards, before/after, services list ===== */
.phero + .sec { padding-top: clamp(40px, 6vw, 72px) !important; }

/* Home: who I help cards */
.bcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.bcard { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; height: 100%; padding: 0 0 18px; text-decoration: none; color: var(--fg); transition: transform .25s ease, border-color .25s ease; }
.bcard:hover { transform: translateY(-3px); }
.bcard figure { margin: 0 0 8px; aspect-ratio: 4 / 3; overflow: hidden; }
.bcard figure img { width: 100%; height: 100%; object-fit: cover; }
.bcard .bc-t { padding-inline: 18px; font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.02em; line-height: 1.2; }
.bcard .bc-k { padding-inline: 18px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.bcard .go { padding-inline: 18px; margin-top: 6px; color: var(--accent); font-weight: 600; font-size: 0.92rem; display: inline-flex; gap: 6px; align-items: center; }
.bcard .go svg { width: 15px; height: 15px; }

/* Fixes: filter, business panel, plain cards */
.ffilter { display: grid; gap: 10px; justify-items: center; margin-bottom: 22px; }
.ffilter[hidden] { display: none; }
.ff-l { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ff-b { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ff-b button { min-height: 44px; padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(11,21,48,0.16); background: #FFFFFF; color: var(--fg); font: inherit; font-weight: 600; font-size: 0.94rem; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.ff-b button:hover { border-color: var(--brand); }
.ff-b button[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: #FFFFFF; }
.bizpanel { padding: clamp(22px, 3vw, 32px); margin-bottom: 18px; display: grid; gap: 8px; background: #EAF0FF; border-color: rgba(31,91,255,0.18); box-shadow: none; }
.bizpanel[hidden] { display: none; }
.bizpanel h2 { font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem); }
.bizpanel .kinds { color: var(--muted); }
.bizpanel .bp-l { margin-top: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.bizpanel ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; }
.ff-count { text-align: center; color: var(--muted); font-size: 0.92rem; margin-bottom: 14px; }
.ff-count:empty { display: none; }
.fix[hidden] { display: none; }
.fixgrid { grid-auto-flow: row; }

/* Home: before / after (static, no toggle) */
.ba { margin-top: 18px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 14px; }
.ba h3 { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); letter-spacing: -0.02em; }
.ba-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.ba-cols > div { border-radius: 18px; padding: 16px 18px; background: #F5F7FB; }
.ba-cols > div.after { background: #EAF0FF; }
.ba-l { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.after .ba-l { color: var(--accent); }
.ba ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ba li { display: grid; grid-template-columns: 4.8rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
.ba time { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ba .note { margin: 0; font-size: 0.8rem; color: var(--muted); }

/* How it works: services as one simple list */
.svc-list { list-style: none; margin: 0; padding: 6px clamp(20px, 3vw, 34px); }
.svc-list li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 8px 28px; padding-block: 18px; border-bottom: 1px solid var(--line); align-items: baseline; }
.svc-list li:last-child { border-bottom: 0; }
.svc-list h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
.svc-list .meta { display: block; margin-top: 4px; font-size: 0.82rem; font-weight: 600; color: var(--accent); }
.svc-list p { color: var(--muted); }
.stat { margin: 18px auto 0; max-width: 46rem; text-align: center; color: var(--muted); font-size: 0.95rem; }
.stat .src { display: block; margin-top: 4px; font-size: 0.85rem; }

/* Contact: one side card for email + next steps */
.mini-h { font-size: 1.1rem; margin-top: 8px; letter-spacing: -0.02em; }

@media (max-width: 1100px) {
  .bcards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bcards li { grid-column: span 2; }
  .bcards li:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 960px) { .svc-list li { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .bcards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bcards li, .bcards li:nth-child(4) { grid-column: auto; }
  .bcard { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; padding: 10px 14px 10px 10px; align-items: center; }
  .bcard figure { grid-row: span 2; margin: 0; width: 88px; aspect-ratio: 1; border-radius: 14px; }
  .bcard .bc-t, .bcard .bc-k { padding-inline: 0; }
  .bcard .bc-k { font-size: 0.84rem; }
  .bcard .go { display: none; }
  .ba-cols { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ba li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ff-b button { padding: 8px 14px; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) { .bcard, .ff-b button { transition: none; } }
@media (max-width: 640px) {
  #who { display: block; }   /* v2.0 hid an older section with this id on phones */
  .ba li { grid-template-columns: 4.2rem minmax(0, 1fr); gap: 8px; }
  .ba li span { font-size: 0.95rem; }
}

/* v3.3: homepage promo video (plays only when tapped) */
.promo .vcard { position: relative; max-width: 960px; margin-inline: auto; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: #04060F; border: 1px solid var(--card-line); box-shadow: 0 1px 2px rgba(11,21,48,0.06), 0 24px 60px rgba(11,21,48,0.16); }
.promo video { display: block; width: 100%; height: 100%; object-fit: cover; background: #04060F; }
.promo .vplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: clamp(64px, 9vw, 92px); height: clamp(64px, 9vw, 92px); border: 0; border-radius: 50%; background: rgba(255,255,255,0.95); color: #1F5BFF; cursor: pointer; box-shadow: 0 0 0 10px rgba(255,255,255,0.18), 0 12px 30px rgba(4,6,15,0.35); transition: transform .2s ease; }
.promo .vplay:hover { transform: translate(-50%, -50%) scale(1.06); }
.promo .vplay:focus-visible { outline: 3px solid #5CE1FF; outline-offset: 4px; }
.promo .vplay svg { width: 38%; height: 38%; margin-left: 6%; }
.promo .vlen { position: absolute; right: clamp(14px, 2.4vw, 24px); bottom: clamp(12px, 2.2vw, 22px); background: rgba(4,6,15,0.6); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-weight: 600; font-size: 0.85rem; padding: 6px 12px; border-radius: 999px; }
.promo .vplay, .promo .vlen { display: none; }
.promo .vcard.ready .vplay { display: grid; }
.promo .vcard.ready .vlen { display: inline-block; }
.promo .vcard.ready.on .vplay, .promo .vcard.ready.on .vlen { display: none; }
@media (prefers-reduced-motion: reduce) { .promo .vplay { transition: none; } }
@media (max-width: 640px) { .promo .vplay { width: 52px; height: 52px; top: 40%; box-shadow: 0 0 0 7px rgba(255,255,255,0.18), 0 8px 20px rgba(4,6,15,0.35); } }   /* keeps the button clear of the cover headline on phones */

/* v3.5: About page values row */
.values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.values li { padding: 24px 22px; display: grid; gap: 8px; align-content: start; }
.values h3 { font-size: 1.2rem; letter-spacing: -0.02em; color: var(--accent); }
.values p { color: var(--muted); font-size: 0.98rem; }
@media (max-width: 1100px) { .values { display: flex; flex-wrap: wrap; justify-content: center; } .values li { flex: 0 1 calc((100% - 32px) / 3); } }
@media (max-width: 640px) { .values { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .values li { padding: 20px; } }