/* ============================================================
   SHINDO — Sun & Space page (Build_11)
   Palette from the app's two sheets: solar-irradiance gold, space-radiation violet.
   ============================================================ */
.mod--sun { --mc: #A99BFF; --mc-ink: #5E50C8; --sun: #F5C451; --sun-deep: #E8962E; --space: #0B0916; --cme: #FF8FB8; }

/* ---------- 1 · Hero ---------- */
.sun-hero { position: relative; height: 100svh; min-height: 720px; overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(70% 60% at 60% 100%, #3a1e0e 0%, rgba(58,30,14,0) 70%), linear-gradient(180deg, #07060f 0%, #120c1f 60%, #1d1110 100%); }
.sun-hero__star { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sun-hero__copy { position: absolute; z-index: 3; left: clamp(24px, 4.6vw, 88px); top: calc(var(--nav-h) + clamp(30px, 8vh, 96px)); max-width: min(720px, 88vw); display: grid; gap: 20px; pointer-events: none; will-change: transform, opacity; }
.sun-hero__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(42px, 4.6vw, 78px); line-height: 1.02; letter-spacing: -0.04em; text-shadow: 0 2px 30px rgba(0,0,0,0.4); }
.sun-hero__hint { margin: 0; font-size: 15px; color: rgba(255,255,255,0.66); max-width: 36ch; }
.sun-hero__phones { position: absolute; z-index: 2; right: clamp(24px, 6vw, 120px); top: calc(var(--nav-h) + 4vh); width: min(520px, 40vw); height: calc(100% - var(--nav-h) - 4vh); pointer-events: none; }
.sun-hero__phone.iphone { position: absolute; width: min(270px, 20vw); will-change: transform; }
.sun-hero__phone--a { left: 0; top: 4%; z-index: 2; }
.sun-hero__phone--b { right: 0; top: 14%; z-index: 1; opacity: 0.94; }

/* ---------- 3 · Journey (sticky) ---------- */
.sun-trip { position: relative; height: 340vh; margin: 0 var(--inset); border-radius: var(--radius-xl); background: var(--space); }
.sun-trip__sticky { position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: hidden; border-radius: var(--radius-xl); color: #fff;
  background: radial-gradient(80% 70% at 0% 50%, #2a1a10 0%, var(--space) 60%); }
.sun-trip__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trip-path { stroke: rgba(255,255,255,0.16); stroke-width: 2; stroke-dasharray: 3 12; }
.trip-trail { stroke: #FFD98A; stroke-width: 3; stroke-linecap: round; fill: none; opacity: 0.75; filter: drop-shadow(0 0 6px #FFC94D); }
.trip-goes rect { fill: #C9C4E8; } .trip-goes rect + rect, .trip-goes rect + rect + rect { fill: #5E6FB8; }
.trip-earth { fill: #3D7BD9; stroke: #9CC3FF; stroke-width: 2; }
.trip-space { transform-origin: 1400px 450px; transform-box: view-box; }
.trip-beam { mix-blend-mode: screen; }
.trip-scatter circle { fill: #FFF1C2; }
.trip-cloud ellipse { fill: rgba(255,255,255,0.13); }
.trip-city rect { fill: #1C1830; }
.trip-patch { fill: #FFE49A; filter: drop-shadow(0 0 14px #FFC94D); }
.trip-lbl { fill: rgba(255,255,255,0.75); font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; }
.sun-trip__copy { position: absolute; z-index: 2; left: clamp(24px, 4vw, 72px); top: clamp(90px, 13vh, 130px); max-width: min(560px, 46%); display: grid; gap: 16px; }
.sun-trip__read { position: absolute; z-index: 2; left: clamp(24px, 4vw, 72px); bottom: clamp(32px, 7vh, 72px); max-width: min(520px, 52%); display: grid; gap: 6px; }
.sun-trip__stage { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #FFE49A; min-height: 1.4em; }
.sun-trip__num { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: clamp(56px, 6vw, 100px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 400ms; }
.sun-trip__num.is-on { opacity: 1; }
.sun-trip__num small { font-size: 0.28em; font-weight: 500; color: rgba(255,255,255,0.7); letter-spacing: 0; }
.sun-trip__note { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,0.85); min-height: 3em; }
.sun-trip__clock { position: absolute; z-index: 2; right: clamp(24px, 4vw, 72px); bottom: clamp(32px, 7vh, 72px); margin: 0; display: grid; gap: 14px; text-align: right; }
.sun-trip__clock dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.sun-trip__clock dd { margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 38px); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- 4 · Beam ---------- */
.sun-beam { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding: clamp(80px, 10vw, 150px) clamp(24px, 4.6vw, 88px); }
.sun-beam__copy { display: grid; gap: 20px; }
.sun-beam__copy > p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.sun-beam__sum { margin: 6px 0 0; display: grid; gap: 0; border-top: 1px solid rgba(0,0,0,0.1); }
.sun-beam__sum div { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.1); }
.sun-beam__sum dt { color: var(--ink-soft); font-size: 15px; }
.sun-beam__sum dd { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sun-beam__sum dd small { font-size: 15px; color: var(--ink-soft); }
.sun-beam__sum .is-total dd { font-size: 34px; color: var(--sun-deep); }
.sun-beam__fine { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.sun-beam__stage { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius-xl); overflow: hidden; color: #fff; background: #0e1424; cursor: grab; touch-action: none; }
.sun-beam__stage.is-drag { cursor: grabbing; }
.sun-beam__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.sun-beam__angle { position: absolute; left: 24px; top: 22px; display: grid; gap: 2px; pointer-events: none; }
.sun-beam__angle b { font-family: var(--font-display); font-size: clamp(40px, 4vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sun-beam__angle span { font-size: 13px; color: rgba(255,255,255,0.7); }
.sun-beam__spread { position: absolute; left: 24px; bottom: 20px; font-size: 13px; color: rgba(255,255,255,0.75); pointer-events: none; }
.sun-beam__spread b { color: #FFE49A; font-size: 16px; font-variant-numeric: tabular-nums; }
.sun-beam__range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sun-beam__range:focus-visible + .sun-beam__card { outline: 2px solid #FFE49A; }
.sun-beam__card { position: absolute; right: 16px; top: 16px; width: min(34%, 260px); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.45); pointer-events: none; }

/* ---------- 5 · Day ---------- */
.sun-day { margin: 0 var(--inset); border-radius: var(--radius-xl); padding: clamp(70px, 8vw, 130px) clamp(24px, 4.6vw, 88px); color: #fff;
  background: radial-gradient(70% 60% at 50% 110%, #3a2610 0%, rgba(58,38,16,0) 70%), #120f0b; }
.sun-day__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 80px); align-items: end; margin-bottom: clamp(36px, 4vw, 60px); }
.sun-day__head > div { display: grid; gap: 16px; }
.sun-day__head p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.72); }
.sun-day__board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 28px; align-items: end; padding: 28px; border-radius: 28px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.sun-day__svg { width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.d-grid line { stroke: rgba(255,255,255,0.07); } .d-grid text, .d-axis text { fill: rgba(255,255,255,0.5); font-family: var(--font-mono); font-size: 14px; }
.d-ceiling { fill: none; stroke: rgba(255,255,255,0.4); stroke-width: 1.6; stroke-dasharray: 4 6; }
.d-area { fill: url(#dayFill); fill: rgba(245,196,81,0.22); }
.d-line { fill: none; stroke: var(--sun); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(245,196,81,0.6)); }
.d-head { stroke: rgba(255,255,255,0.5); stroke-dasharray: 3 5; }
.d-blocks rect { fill: var(--sun); transition: transform 900ms cubic-bezier(.5,0,.2,1), opacity 900ms; }
.sun-day__tally { display: grid; justify-items: center; gap: 6px; }
.d-stack { position: relative; width: 64px; height: 300px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column-reverse; overflow: hidden; }
.d-stack i { display: block; width: 100%; background: linear-gradient(180deg, #FFE49A, #E8962E); border-top: 1px solid rgba(18,15,11,0.55); animation: dDrop 600ms cubic-bezier(.3,1.4,.5,1) both; }
@keyframes dDrop { from { transform: translateY(-60px); opacity: 0; } }
.d-kwh { font-family: var(--font-display); font-weight: 600; font-size: 30px; font-variant-numeric: tabular-nums; }
.sun-day__tally span { font-size: 12px; color: rgba(255,255,255,0.6); }
.sun-day__clock { position: absolute; left: 40px; top: 24px; display: grid; gap: 2px; pointer-events: none; }
.d-hour { font-family: var(--font-display); font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.d-watts { font-size: 14px; color: #FFE49A; font-variant-numeric: tabular-nums; }
.sun-day__replay { position: absolute; right: 172px; top: 22px; padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.sun-day__replay:hover { background: rgba(255,255,255,0.12); }
.sun-day__stats { margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sun-day__stats div { padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.sun-day__stats dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.sun-day__stats dd { margin: 8px 0 0; font-family: var(--font-display); font-size: 26px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.sun-day__stats dd small { font-size: 14px; color: rgba(255,255,255,0.6); }
.d-clear svg { width: 30px; height: 30px; transform: rotate(-90deg); }
.d-clear circle { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 5; }
.d-clear .d-ring { stroke: var(--sun); stroke-linecap: round; stroke-dasharray: 100.5; stroke-dashoffset: 100.5; transition: stroke-dashoffset 1400ms var(--ease); }
.sun-day.is-done .d-ring { stroke-dashoffset: 37.2; }
.sun-day__fine { margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.5); max-width: 90ch; }

/* ---------- 6 · Flare ---------- */
.sp-flare { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 90px); align-items: center; margin: var(--inset) var(--inset) 0; border-radius: var(--radius-xl);
  padding: clamp(70px, 8vw, 130px) clamp(24px, 4.6vw, 88px); color: #fff; background: radial-gradient(60% 70% at 80% 40%, #251c46 0%, rgba(37,28,70,0) 70%), #0d0b18; overflow: hidden; }
.sp-flare__copy { display: grid; gap: 20px; align-content: start; }
.sp-flare__copy > p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.75); }
.sp-flare__hold { position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 14px; padding: 16px 26px 16px 18px; border-radius: 99px; border: 1px solid rgba(255,214,120,0.4);
  background: rgba(255,214,120,0.08); color: #fff; font: inherit; font-size: 16px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; transition: background 200ms; }
.sp-flare__hold:hover { background: rgba(255,214,120,0.14); }
.sp-flare__ring { position: relative; width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(#FFD166 calc(var(--charge, 0) * 1turn), rgba(255,255,255,0.12) 0); }
.sp-flare__ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #1a1528; }
.sp-flare__hold.is-hold { background: rgba(255,214,120,0.2); }
.sp-flare__r { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sp-flare__r li { display: grid; justify-items: center; gap: 2px; min-width: 56px; padding: 10px 10px 8px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.45); transition: all 300ms; }
.sp-flare__r li b { font-family: var(--font-display); font-size: 17px; }
.sp-flare__r li span { font-family: var(--font-mono); font-size: 11px; }
.sp-flare__r li.is-on { color: #1a1206; background: var(--rc, #FFD166); border-color: transparent; box-shadow: 0 0 24px var(--rc, #FFD166); }
.sp-flare__r li[data-r="1"] { --rc: #FFE07A; } .sp-flare__r li[data-r="2"] { --rc: #FFBA52; } .sp-flare__r li[data-r="3"] { --rc: #FF9142; } .sp-flare__r li[data-r="4"] { --rc: #FF6A4A; } .sp-flare__r li[data-r="5"] { --rc: #E8434A; }
.sp-flare__effect { margin: 0; min-height: 3.2em; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.85); }
.sp-flare__scope { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); overflow: hidden; }
.sp-flare__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-flare__sun { position: absolute; left: -12%; top: -22%; width: 40%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #FFF3C9 0%, #FFC24D 32%, rgba(240,138,44,0.5) 48%, rgba(240,138,44,0) 70%); transform: scale(var(--sw, 1)); transition: transform 120ms linear; opacity: 0.85; }
.sp-flare__sun i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,var(--fl, 0)) 0%, rgba(255,240,200,0) 60%); }
.sp-flare__scope.is-flash::after { content: ""; position: absolute; inset: 0; background: rgba(255,236,190,var(--fa, 0.3)); animation: flareFlash 900ms ease-out forwards; pointer-events: none; }
@keyframes flareFlash { to { opacity: 0; } }
.sp-flare__readout { position: absolute; right: 22px; top: 18px; display: grid; justify-items: end; gap: 2px; text-align: right; }
.sp-flare__readout span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.f-class { font-family: var(--font-display); font-size: clamp(44px, 4.4vw, 72px); font-weight: 600; line-height: 1; color: #C7BCFF; font-variant-numeric: tabular-nums; transition: color 200ms; }
.f-flux { font-size: 13px; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; }

/* ---------- 7 · Race (sticky) ---------- */
.sp-race { position: relative; height: 320vh; margin: var(--inset) var(--inset) 0; border-radius: var(--radius-xl); background: #090812; }
.sp-race__sticky { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; border-radius: var(--radius-xl); color: #fff;
  background: radial-gradient(50% 60% at 0% 50%, #2d1a0c 0%, rgba(45,26,12,0) 70%), radial-gradient(40% 50% at 100% 50%, #0f2140 0%, rgba(15,33,64,0) 70%), #090812; }
.sp-race__copy { position: absolute; z-index: 2; left: clamp(24px, 4vw, 72px); top: clamp(90px, 13vh, 130px); max-width: min(560px, 50%); display: grid; gap: 16px; }
.sp-race__clock { position: absolute; z-index: 2; right: clamp(24px, 4vw, 72px); top: clamp(90px, 13vh, 130px); display: grid; justify-items: end; gap: 4px; }
.sp-race__clock span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.r-time { font-family: var(--font-display); font-size: clamp(40px, 4.2vw, 68px); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-race__svg { position: absolute; left: 0; right: 0; top: 25%; height: 48%; width: 100%; }
.race-lanes path { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.race-lanes text { fill: rgba(255,255,255,0.45); font-family: var(--font-mono); font-size: 20px; letter-spacing: 0.1em; }
.race-photon { fill: #FFE49A; filter: drop-shadow(0 0 10px #FFD166); }
.race-protons circle { fill: #C7BCFF; }
.race-earth circle { fill: #2E6BD0; stroke: #9CC3FF; stroke-width: 3; }
.race-earth path { fill: none; stroke: rgba(160,230,170,0.7); stroke-width: 6; stroke-linecap: round; }
.race-earth.is-hit circle { filter: drop-shadow(0 0 22px var(--hit, #fff)); }
.sp-race__cards { position: absolute; z-index: 2; left: clamp(24px, 4vw, 72px); right: clamp(24px, 4vw, 72px); bottom: clamp(24px, 5vh, 56px); margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sp-race__cards li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 22px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); opacity: 0.35; transform: translateY(10px); transition: opacity 500ms, transform 500ms var(--ease), border-color 500ms; }
.sp-race__cards li.is-in { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--k) 55%, transparent); }
.sp-race__cards i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: #120f1c; background: var(--k); }
.sp-race__cards div { display: grid; gap: 4px; }
.sp-race__cards b { font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.sp-race__cards span { font-size: 13px; color: var(--k); }
.sp-race__cards p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.68); }
.sp-race__now { position: absolute; z-index: 3; right: clamp(24px, 4vw, 72px); top: calc(clamp(90px, 13vh, 130px) + 100px); width: min(340px, 26vw); border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,0.55); opacity: 0; transform: translateY(20px) scale(0.96); transition: opacity 600ms, transform 600ms var(--ease); }
.sp-race__now.is-in { opacity: 1; transform: none; }

/* ---------- 8 · Shield ---------- */
.sp-shield { position: relative; min-height: 100vh; margin: var(--inset) var(--inset) 0; border-radius: var(--radius-xl); overflow: hidden; color: #fff; background: #05060d; display: grid; align-items: center; }
.sp-shield__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-shield__copy { position: relative; z-index: 2; max-width: min(480px, 40%); margin-left: clamp(24px, 4.6vw, 88px); padding: 90px 0; display: grid; gap: 20px; }
.sp-shield__copy > p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.78); text-shadow: 0 1px 12px #05060d; }
.sp-shield__seg { justify-self: start; flex-wrap: wrap; }
.sp-shield__read { margin: 6px 0 0; display: grid; gap: 10px; }
.sp-shield__read div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; border-radius: 16px; background: rgba(10,12,24,0.7); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sp-shield__read dt { font-size: 14px; color: rgba(255,255,255,0.7); }
.sp-shield__read dd { margin: 0; font-weight: 600; text-align: right; }
.s-japan dd { color: #7FE3A6; }
.s-polar dd { color: #FFD166; transition: color 300ms; }
.sp-shield__phone.iphone { position: absolute; z-index: 2; right: clamp(24px, 4vw, 80px); top: 50%; width: min(250px, 18vw); transform: translateY(-50%); }

/* ---------- 9 · Orbit ---------- */
.sp-orbit { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding: clamp(80px, 10vw, 150px) clamp(24px, 4.6vw, 88px); }
.sp-orbit__copy { display: grid; gap: 20px; }
.sp-orbit__copy > p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.sp-orbit__copy > p.sp-orbit__fine { font-size: 13px; }
.sp-orbit__stage { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius-xl); overflow: hidden; color: #fff; background: radial-gradient(70% 70% at 0% 50%, #2a1a10 0%, #07070f 70%); }
.sp-orbit__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-orbit__date { position: absolute; left: 22px; top: 20px; display: grid; gap: 4px; }
.o-date { font-family: var(--font-display); font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.o-season { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #FFD166; min-height: 1.3em; }
.sp-orbit__strip { position: absolute; left: 18px; right: 18px; bottom: 16px; padding: 10px 14px 8px; border-radius: 16px; background: rgba(10,10,22,0.75); border: 1px solid rgba(255,255,255,0.1); }
.sp-orbit__strip span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.sp-orbit__trace { display: block; width: 100%; height: 56px; margin-top: 4px; }

/* ---------- 10 · Statement — a terminator sweeps from night into day ---------- */
.sp-dawn { padding: clamp(110px, 14vw, 220px) clamp(24px, 6vw, 140px); text-align: center; }
.sp-dawn h2 { margin: 0 auto; max-width: 22ch; font-family: var(--font-display); font-weight: 300; font-size: clamp(36px, 5vw, 84px); line-height: 1.08; letter-spacing: -0.035em;
  background: linear-gradient(100deg, #E8962E 0%, #F5C451 calc(var(--dawn, 0) * 140% - 22%), #3a3358 calc(var(--dawn, 0) * 140% - 2%), #2a2540 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Homepage row: sun-home — space above, ground below, one beam between ---------- */
.sun-home { position: relative; aspect-ratio: 16 / 13; width: 100%; border-radius: var(--radius-xl); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #0a0816 0%, #171030 45%, #3a2410 78%, #5a3a14 100%); perspective: 1200px; }
.sun-home__in { position: absolute; inset: 0; transform: rotateX(calc(var(--rx, 0deg) * 0.5)) rotateY(calc(var(--ry, 0deg) * 0.5)) scale(1.03); transition: transform 600ms var(--ease); }
.sun-home__stars { position: absolute; inset: 0 0 45% 0; background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 32% 8%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 58% 26%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 76% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 44% 40%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 8% 46%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 36%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 32%, #fff 50%, transparent 51%);
  animation: sunTwinkle 5s ease-in-out infinite alternate; opacity: 0.8; }
@keyframes sunTwinkle { to { opacity: 0.35; } }
.sun-home__sun { position: absolute; right: -9%; top: -14%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFF4CC 0%, #FFC94D 30%, rgba(240,138,44,0.45) 46%, rgba(240,138,44,0) 68%); }
.sun-home__sun::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,214,120,0.18) 0 2deg, transparent 2deg 9deg); -webkit-mask: radial-gradient(circle, transparent 34%, #000 40%, transparent 70%); mask: radial-gradient(circle, transparent 34%, #000 40%, transparent 70%); animation: sunSpin 60s linear infinite; }
@keyframes sunSpin { to { transform: rotate(360deg); } }
.sun-home__beam { position: absolute; right: 18%; top: 14%; width: 3px; height: 82%; transform-origin: top center; transform: rotate(32deg); background: linear-gradient(180deg, rgba(255,228,154,0.6), rgba(255,228,154,0.05)); border-radius: 3px; }
.sun-home__beam::after { content: ""; position: absolute; left: -5px; width: 13px; height: 13px; border-radius: 50%; background: #FFF1C2; box-shadow: 0 0 18px 6px rgba(255,201,77,0.8); animation: sunPhoton 3.2s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes sunPhoton { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.sun-home__card { position: absolute; margin: 0; width: 50%; z-index: 2; }
.sun-home__card img { display: block; width: 100%; border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08); }
.sun-home__card figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.sun-home__card--space { left: 5%; top: 5%; }
.sun-home__card--ground { right: 5%; bottom: 4%; }
.sun-home__card--ground figcaption { text-align: right; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sun-hero__copy { top: calc(var(--nav-h) + 24px); }
  .sun-hero__phones { left: 50%; right: auto; top: auto; bottom: -6%; width: 92vw; height: 62%; transform: translateX(-50%); }
  .sun-hero__phone.iphone { width: 40vw; max-width: 220px; }
  .sun-hero__phone--a { left: 8%; top: 8%; } .sun-hero__phone--b { right: 8%; top: 18%; }
  .sun-trip__copy { max-width: none; right: 24px; top: 84px; }
  .sun-trip__read { max-width: none; right: 24px; bottom: 112px; }
  .sun-trip__note { font-size: 14px; min-height: 0; }
  .sun-trip__clock dd { font-size: 22px; white-space: nowrap; }
  .sun-trip__clock dt { font-size: 9.5px; }
  .sun-trip__clock { left: 24px; right: 24px; bottom: 24px; display: flex; justify-content: space-between; text-align: left; }
  .sun-trip__clock div + div { text-align: right; }
  .sun-beam, .sp-orbit, .sp-flare { grid-template-columns: 1fr; }
  .sun-beam__card { width: 52%; }
  .sun-day__head { grid-template-columns: 1fr; }
  .sun-day__board { grid-template-columns: 1fr; padding: 16px; padding-top: 90px; }
  .sun-day__clock { left: 20px; top: 16px; }
  .sun-day__replay { right: 16px; top: 18px; }
  .sun-day__tally { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; }
  .d-stack { width: 100%; height: 22px; flex-direction: row; border-radius: 8px; grid-column: 1 / -1; }
  .d-stack i { height: 100% !important; width: var(--w); border-top: 0; border-right: 1px solid rgba(18,15,11,0.55); }
  .sun-day__tally { display: grid; grid-template-columns: auto auto 1fr; }
  .sun-day__stats { grid-template-columns: 1fr 1fr; }
  .sp-race__copy { max-width: none; right: 24px; top: 80px; }
  .sp-race__clock { top: auto; bottom: 46%; right: 24px; }
  .sp-race__svg { top: 26%; height: 34%; }
  .sp-race__cards { grid-template-columns: 1fr; gap: 8px; bottom: 18px; left: 16px; right: 16px; }
  .sp-race__cards li { padding: 9px 12px; align-items: center; } .sp-race__cards p, .sp-race__cards span { display: none; }
  .sp-race__cards i { width: 32px; height: 32px; font-size: 16px; }
  .sp-race__now { display: none; }
  .sp-shield { align-items: start; }
  .sp-shield__copy { max-width: none; margin: 0 20px; padding: 70px 0 54vh; }
  .sp-shield__phone.iphone { display: none; }
  .sun-home__card { width: 60%; } .sun-home__card figcaption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sun-home__stars, .sun-home__sun::before, .sun-home__beam::after { animation: none; }
}