/* ============================================================
   Questant — spatial marketing surface
   A separate layer from system.css (which dresses the app shell).
   Direction: light open canvas, restrained futurism, editorial type,
   mascots as spatial participants, one focal object per screen.

   Fonts are self-hosted: the launch market is China, where
   fonts.googleapis.com is unreliable. Both faces are OFL.
   ============================================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* ground — cool-biased near-white, chosen rather than defaulted to #fff */
  --canvas: #fafbfe;
  --canvas-warm: #fdfcfa;
  --ink: #0b1524;
  --ink-mid: #3c4759;
  --ink-soft: #66718a;
  --line: rgba(11, 21, 36, .085);
  --line-strong: rgba(11, 21, 36, .14);
  --surface: rgba(255, 255, 255, .74);

  /* house accent, taken from the wordmark gradient */
  --q-cyan: #00c2ea;
  --q-blue: #1a6bff;
  --q-violet: #7a5cff;

  /* mascot accents — used locally, never as full-screen fills */
  --anto: #1a6bff;
  --candi: #b5895c;
  --mimi: #ff5fa2;
  --lumi: #4fb233;
  --nimo: #23b5e8;
  --ria: #ff8a00;

  --sp-display: 'Bricolage Grotesque', 'PingFang SC', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
  --sp-body: 'Figtree', 'PingFang SC', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
}

.sp * { box-sizing: border-box; }
.sp {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sp-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.sp a { color: inherit; text-decoration: none; }
.sp img { max-width: 100%; }

/* ---------- atmospheric layer ---------- */
/* One fixed canvas behind everything. Ambient drift while reading; short
   higher-energy bursts on achievement-like moments. */
#spaceCanvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.sp-aura {
  position: fixed; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(90px); opacity: .5;
}
.sp-aura.a1 { width: 46vw; height: 46vw; left: -12vw; top: -8vw; background: radial-gradient(circle, rgba(26,107,255,.17), transparent 68%); }
.sp-aura.a2 { width: 40vw; height: 40vw; right: -10vw; top: 18vh; background: radial-gradient(circle, rgba(122,92,255,.14), transparent 68%); }
.sp-aura.a3 { width: 38vw; height: 38vw; left: 24vw; bottom: -14vw; background: radial-gradient(circle, rgba(0,194,234,.12), transparent 68%); }
.sp main, .sp .sp-nav-outer, .sp footer { position: relative; z-index: 1; }

.sp-wrap { max-width: 1140px; margin: 0 auto; padding: 0 26px; }

/* ---------- nav ---------- */
.sp-nav-outer {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 251, 254, .72);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.sp-nav { display: flex; align-items: center; gap: 32px; height: 72px; }
.sp-nav .brand img { display: block; height: 32px; width: auto; }
.sp-navlinks { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.sp-navlinks > a { font-size: 14px; font-weight: 550; color: var(--ink-mid); transition: color .18s; }
.sp-navlinks > a:hover { color: var(--q-blue); }
.sp-lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.sp-lang button {
  border: 0; background: transparent; cursor: pointer; padding: 6px 13px;
  font: 600 12px var(--sp-body); color: var(--ink-soft); transition: .18s;
}
.sp-lang button.on { background: var(--ink); color: #fff; }
.sp-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; font: 600 14px var(--sp-body);
  padding: 11px 22px; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s;
}
.sp-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(11,21,36,.18); }
.sp-cta.accent { background: linear-gradient(120deg, var(--q-blue), var(--q-violet)); }
.sp-navtoggle { display: none; margin-left: auto; border: 1px solid var(--line-strong); background: transparent; border-radius: 11px; padding: 8px 11px; cursor: pointer; }

/* ---------- editorial type scale ---------- */
.sp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 11.5px var(--sp-body); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft);
}
.sp-eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .5; }
.sp h1, .sp h2, .sp h3 { font-family: var(--sp-display); font-weight: 700; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.sp h1 { font-size: clamp(42px, 6.4vw, 82px); line-height: 1.02; }
.sp h2 { font-size: clamp(30px, 4.1vw, 52px); line-height: 1.08; }
.sp h3 { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.25; letter-spacing: -.02em; }
.sp .sp-sub { font-size: 17px; line-height: 1.72; color: var(--ink-soft); max-width: 34em; }
.sp .sp-micro { font-size: 13px; color: var(--ink-soft); }

/* ---------- hero ---------- */
.sp-hero { position: relative; padding: 58px 0 0; overflow: hidden; display: flex; flex-direction: column; }
/* Full-bleed wash. The copy stays inside the 1140px measure for readability,
   but the light spans the whole viewport so the hero is one wide surface. */
.sp-hero-glow {
  position: absolute; inset: -18% -12% auto -12%; height: 130%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 52% at 50% 4%, rgba(26,107,255,.22), transparent 70%),
    radial-gradient(46% 44% at 12% 32%, rgba(0,194,234,.22), transparent 70%),
    radial-gradient(50% 46% at 88% 26%, rgba(122,92,255,.24), transparent 70%);
  animation: heroDrift 20s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: translate3d(-1.6%, 0, 0) scale(1); }
  to   { transform: translate3d(1.6%, -2.2%, 0) scale(1.07); }
}
.sp-hero-inner { position: relative; z-index: 2; text-align: center; padding-top: 22px; }
.sp-hero h1 { margin: 18px auto 20px; font-size: clamp(46px, 8.6vw, 116px); max-width: 13ch; }
.sp-hero .sp-sub { margin: 0 auto; max-width: 38em; font-size: 18px; }
.sp-hero .sp-micro { margin-top: 4px; }
.sp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 14px; justify-content: center; }
.sp-btn-big {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  padding: 15px 30px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 15.5px var(--sp-body);
  background: linear-gradient(120deg, var(--q-blue), var(--q-violet)); color: #fff;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s;
}
.sp-btn-big:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(26,107,255,.3); }
.sp-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 26px; border-radius: 999px; cursor: pointer;
  font: 600 15.5px var(--sp-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px); transition: transform .2s, border-color .2s;
}
.sp-btn-ghost:hover { transform: translateY(-2px); border-color: var(--q-blue); }

/* The cast is the banner: it spans the viewport and sits directly under the
   headline, so hero copy and artwork read as a single surface rather than as
   a text column with a picture bolted to its right. */
.sp-hero-band {
  position: relative; z-index: 1; width: 100%;
  margin-top: -14px; display: grid; justify-items: center;
}
.sp-hero-band img {
  display: block; width: min(100%, 1420px); height: auto;
  filter: drop-shadow(0 34px 64px rgba(11,21,36,.20));
  animation: heroFloat 7.5s ease-in-out infinite;
}
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

/* ---------- section rhythm ---------- */
.sp-sec { padding: 96px 0; position: relative; }
.sp-sec-head { max-width: 620px; margin-bottom: 52px; }
.sp-sec-head.mid { margin-left: auto; margin-right: auto; text-align: center; }
.sp-sec-head h2 { margin: 14px 0 16px; }

/* ---------- the focal demo: a framed window, like a product surface ---------- */
/* Presenting the session inside a window rather than as loose page content
   makes it read as "this is the app", not "this is marketing copy". */
.sp-window {
  position: relative; max-width: 860px; margin: 0 auto;
  border-radius: 26px; overflow: visible;
  background: rgba(255,255,255,.82); border: 1px solid var(--line);
  backdrop-filter: blur(22px);
  box-shadow: 0 34px 90px rgba(11,21,36,.13), 0 2px 6px rgba(11,21,36,.05);
}
.sp-titlebar {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 20px; border-bottom: 1px solid var(--line);
  border-radius: 26px 26px 0 0; background: rgba(255,255,255,.5);
}
.sp-titlebar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); display: block; }
.sp-titlebar i:nth-child(1) { background: #ff6b6b55; }
.sp-titlebar i:nth-child(2) { background: #ffc93c55; }
.sp-titlebar i:nth-child(3) { background: #4fb23355; }
.sp-titlebar span {
  margin-left: 8px; font: 500 12px var(--sp-body); color: var(--ink-soft);
  letter-spacing: .02em;
}
.sp-stage { position: relative; padding: 30px 34px 26px; }

/* ---------- the mascot as a pet that lives beside the window ---------- */
/* Sprite strip rather than a GIF: these renders have feathered shadows, and
   GIF's 1-bit alpha would fringe them against the card. A strip also keeps
   full alpha AND lets JS pick the frame, so the expression can answer to the
   learner's state instead of looping blindly. */
.sp-pet-dock { position: absolute; right: -18px; bottom: -8px; width: 168px; pointer-events: none; z-index: 3; }
.sp-pet {
  width: 168px; height: 187px;
  background-image: url('/brand/sprites/lumi.png');
  background-repeat: no-repeat;
  background-size: 1008px 187px;      /* 6 frames x 168 */
  background-position: 0 0;
  filter: drop-shadow(0 14px 20px rgba(11,21,36,.18));
  /* No transition on background-position: a sprite frame swap must be
     instantaneous. Easing it (even with steps()) holds the previous face on
     screen and the reaction reads as lag. */
  animation: petIdle 3.4s ease-in-out infinite;
  transform-origin: 50% 92%;
}
/* frame index per expression — order of the strip */
.sp-pet[data-expr="curious"]   { background-position: 0 0; }
.sp-pet[data-expr="thinking"]  { background-position: -168px 0; }
.sp-pet[data-expr="surprised"] { background-position: -336px 0; }
.sp-pet[data-expr="happy"]     { background-position: -504px 0; }
.sp-pet[data-expr="proud"]     { background-position: -672px 0; }
.sp-pet[data-expr="peaceful"]  { background-position: -840px 0; }

/* Ambient "alive" motion: a slow breath-bob with a touch of sway. Kept in
   transform so it never disturbs background-position (the expression). */
@keyframes petIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  28%      { transform: translateY(-7px) rotate(-1.6deg); }
  55%      { transform: translateY(-2px) rotate(.9deg); }
  78%      { transform: translateY(-6px) rotate(-.5deg); }
}
/* A brief celebratory hop, triggered on a real achievement. */
.sp-pet.hop { animation: petHop .72s cubic-bezier(.3,1.4,.4,1); }
@keyframes petHop {
  0%   { transform: translateY(0) scale(1); }
  28%  { transform: translateY(-26px) scale(1.06, .95); }
  55%  { transform: translateY(0) scale(.96, 1.05); }
  74%  { transform: translateY(-9px) scale(1.02, .99); }
  100% { transform: translateY(0) scale(1); }
}
.sp-pet-say {
  position: absolute; right: 132px; bottom: 128px; white-space: nowrap;
  background: var(--ink); color: #fff; font: 600 12px var(--sp-body);
  padding: 7px 13px; border-radius: 13px 13px 3px 13px;
  opacity: 0; transform: translateY(6px) scale(.94); transform-origin: 100% 100%;
  transition: opacity .3s, transform .3s cubic-bezier(.2,.9,.3,1.3);
  pointer-events: none;
}
.sp-pet-say.show { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .sp-pet-dock { right: -8px; bottom: -6px; width: 108px; }
  .sp-pet { width: 108px; height: 120px; background-size: 648px 120px; }
  .sp-pet[data-expr="thinking"]  { background-position: -108px 0; }
  .sp-pet[data-expr="surprised"] { background-position: -216px 0; }
  .sp-pet[data-expr="happy"]     { background-position: -324px 0; }
  .sp-pet[data-expr="proud"]     { background-position: -432px 0; }
  .sp-pet[data-expr="peaceful"]  { background-position: -540px 0; }
  .sp-pet-say { right: 84px; bottom: 88px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-pet, .sp-pet.hop { animation: none; }
}
.sp-stage-rail { display: flex; gap: 7px; margin-bottom: 26px; }
.sp-stage-rail i {
  height: 3px; flex: 1; border-radius: 3px; background: var(--line-strong);
  transition: background .45s ease;
}
.sp-stage-rail i.done { background: linear-gradient(90deg, var(--q-cyan), var(--q-violet)); }
.sp-stage-label { font: 600 11.5px var(--sp-body); letter-spacing: .13em; text-transform: uppercase; color: var(--lumi); }
.sp-stage-body { min-height: 230px; margin: 16px 0 22px; }
.sp-step { display: none; animation: spFade .5s cubic-bezier(.2,.8,.3,1); }
.sp-step.on { display: block; }
@keyframes spFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sp-step .q { font-family: var(--sp-display); font-size: clamp(22px,2.6vw,30px); font-weight: 700; letter-spacing: -.025em; line-height: 1.25; margin: 0 0 14px; }
.sp-step .ctx { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 6px; }
.sp-bubble {
  border-radius: 20px; padding: 15px 19px; font-size: 15.5px; line-height: 1.62; margin: 12px 0;
  border: 1px solid var(--line); background: #fff;
}
.sp-bubble.learner { background: rgba(26,107,255,.07); border-color: rgba(26,107,255,.22); }
.sp-bubble.coach { background: rgba(79,178,51,.07); border-color: rgba(79,178,51,.24); }
.sp-bubble .who { display: block; font: 600 11px var(--sp-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; }
.sp-saved {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 6px;
  font: 600 13px var(--sp-body); color: var(--lumi);
  background: rgba(79,178,51,.1); border: 1px solid rgba(79,178,51,.26);
  padding: 9px 16px; border-radius: 999px;
}
.sp-stage-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- domains: one accent each, asymmetric, not a card grid ---------- */
.sp-domains { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sp-domain {
  position: relative; display: flex; align-items: center; gap: 20px;
  padding: 26px 28px; border-radius: 26px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(14px);
  transition: transform .28s cubic-bezier(.2,.8,.3,1), border-color .28s;
}
.sp-domain::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: .85;
}
.sp-domain::after {
  content: ''; position: absolute; right: -30%; top: -60%; width: 60%; height: 220%;
  background: radial-gradient(circle, var(--accent), transparent 68%);
  opacity: .09; pointer-events: none;
}
.sp-domain:not(.soon):hover { transform: translateY(-5px); border-color: var(--accent); }
.sp-domain img { width: 68px; height: auto; flex-shrink: 0; }
.sp-domain h3 { margin-bottom: 6px; }
.sp-domain p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.sp-domain.soon { opacity: .55; }
.sp-soon {
  position: absolute; top: 16px; right: 18px;
  font: 600 10px var(--sp-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--line-strong); padding: 3px 9px; border-radius: 999px;
}

/* ---------- alternating feature rows ---------- */
.sp-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; padding: 60px 0; }
.sp-feat.flip .sp-feat-art { order: 2; }
.sp-feat-art { position: relative; display: grid; place-items: center; }
.sp-feat-art img { width: 100%; max-width: 380px; height: auto; filter: drop-shadow(0 22px 40px rgba(11,21,36,.13)); }
.sp-feat-art .halo {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 66%); opacity: .13; filter: blur(28px);
}
.sp-feat h2 { font-size: clamp(25px, 3vw, 36px); margin-bottom: 16px; }
.sp-feat p { font-size: 16.5px; line-height: 1.76; color: var(--ink-soft); margin: 0; }

/* ---------- parent band ---------- */
.sp-parent {
  border-radius: 38px; padding: 58px 48px; position: relative; overflow: hidden;
  /* Light card rather than a dark slab. These mascot renders carry a feathered
     light shadow baked into the artwork; against a dark fill that reads as a
     halo no matter how precisely the edge is matted. Keeping any band that
     holds a cutout near-white removes the failure mode instead of chasing it. */
  background: linear-gradient(126deg, rgba(0,194,234,.07), rgba(122,92,255,.08) 60%, rgba(26,107,255,.05)), rgba(255,255,255,.80);
  border: 1px solid var(--line);
  backdrop-filter: blur(22px);
  box-shadow: 0 34px 90px rgba(11,21,36,.10), 0 2px 6px rgba(11,21,36,.04);
  display: grid; max-width: 900px; margin: 0 auto;
}
.sp-parent::after {
  content: ''; position: absolute; right: -8%; top: -30%; width: 46%; height: 180%;
  background: radial-gradient(circle, rgba(122,92,255,.17), transparent 66%); opacity: .5;
}
.sp-parent > * { position: relative; z-index: 1; }
.sp-parent h2 { color: var(--ink); margin-bottom: 16px; }
.sp-parent .sp-eyebrow { color: var(--ink-soft); }
.sp-parent p { color: var(--ink-mid); font-size: 16px; line-height: 1.74; margin: 0 0 26px; }
.sp-parent ul { list-style: none; padding: 0; margin: 0 0 30px; }
.sp-parent li { font-size: 15px; color: var(--ink-mid); padding-left: 26px; position: relative; margin-bottom: 11px; }
.sp-parent li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--q-cyan); }
.sp-parent .sp-btn-ghost { background: var(--ink); border-color: transparent; color: #fff; }

/* ---------- faq ---------- */
.sp-faq { max-width: 760px; margin: 0 auto; }
.sp-q { border-bottom: 1px solid var(--line); padding: 24px 4px; }
.sp-q summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 22px; align-items: center;
  font-family: var(--sp-display); font-weight: 600; font-size: 18px; letter-spacing: -.015em;
}
.sp-q summary::-webkit-details-marker { display: none; }
.sp-q summary::after { content: '+'; color: var(--q-blue); font-size: 21px; font-weight: 300; flex-shrink: 0; transition: transform .25s; }
.sp-q[open] summary::after { transform: rotate(45deg); }
.sp-q p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.78; color: var(--ink-soft); max-width: 62ch; }

/* ---------- closing ---------- */
.sp-closing { text-align: center; padding: 96px 0 84px; }
.sp-closing h2 { margin: 0 auto 30px; max-width: 16em; }

/* ---------- footer ---------- */
.sp-foot { border-top: 1px solid var(--line); padding: 52px 0 38px; }
.sp-foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 32px; }
.sp-foot img { height: 28px; width: auto; margin-bottom: 14px; }
.sp-foot h4 { font: 600 11px var(--sp-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; }
.sp-foot ul { list-style: none; padding: 0; margin: 0; }
.sp-foot li { margin-bottom: 9px; }
.sp-foot li a { font-size: 13.5px; color: var(--ink-soft); }
.sp-foot li a:hover { color: var(--q-blue); }
.sp-foot-note { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft); }

/* ---------- long-form reading (about / blog) ---------- */
/* Narrower measure than the marketing sections: ~66ch keeps prose readable. */
.sp-doc { max-width: 720px; margin: 0 auto; padding: 72px 0 30px; }
.sp-doc h1 { font-size: clamp(34px, 4.6vw, 58px); margin-bottom: 22px; }
.sp-doc .standfirst { font-size: 19px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 44px; }
.sp-doc h2 { font-size: clamp(23px, 2.6vw, 30px); margin: 54px 0 16px; }
.sp-doc h3 { margin: 30px 0 10px; }
.sp-doc p { font-size: 16.5px; line-height: 1.82; color: var(--ink-mid); margin: 0 0 18px; }
.sp-doc ul { margin: 0 0 20px; padding-left: 22px; }
.sp-doc li { font-size: 16px; line-height: 1.76; color: var(--ink-mid); margin-bottom: 8px; }
.sp-doc blockquote {
  margin: 30px 0; padding: 22px 26px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(10px);
  font-family: var(--sp-display); font-size: 18.5px; font-weight: 600; line-height: 1.55;
  letter-spacing: -.015em; color: var(--ink); position: relative; overflow: hidden;
}
.sp-doc blockquote::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--q-cyan), var(--q-violet));
}

.sp-principles { display: grid; gap: 14px; margin: 28px 0; }
.sp-principle {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  padding: 24px 26px; backdrop-filter: blur(10px);
}
.sp-principle h3 { margin: 0 0 8px; font-size: 18px; }
.sp-principle p { font-size: 14.5px; line-height: 1.66; color: var(--ink-soft); margin: 0; }

.sp-cast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 30px 0 12px; }
.sp-cast figure {
  margin: 0; text-align: center; padding: 22px 14px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(10px);
  position: relative; overflow: hidden;
}
.sp-cast figure::after {
  content: ''; position: absolute; left: 50%; top: -40%; width: 120%; height: 120%;
  transform: translateX(-50%); background: radial-gradient(circle, var(--accent), transparent 62%);
  opacity: .1; pointer-events: none;
}
.sp-cast img { width: 66px; height: auto; position: relative; z-index: 1; }
.sp-cast b { display: block; font-family: var(--sp-display); font-size: 15.5px; margin-top: 10px; }
.sp-cast span { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin-top: 3px; }

.sp-post {
  max-width: 760px; margin: 0 auto 44px; border-radius: 30px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(16px);
}
.sp-post-art { display: grid; place-items: center; padding: 30px; position: relative; }
.sp-post-art::before {
  content: ''; position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle, var(--q-cyan), transparent 66%); opacity: .12; filter: blur(26px);
}
.sp-post-art img { width: 100%; max-width: 330px; height: auto; position: relative; z-index: 1; }
.sp-post-body { padding: 8px 34px 36px; }
.sp-post-meta { font: 600 11.5px var(--sp-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sp-post-body h2 { font-size: clamp(24px, 2.9vw, 33px); margin: 12px 0 16px; }
.sp-post-body h3 { margin: 30px 0 10px; }
.sp-post-body p { font-size: 16.5px; line-height: 1.82; color: var(--ink-mid); margin: 0 0 17px; }
.sp-post-body ul { margin: 0 0 18px; padding-left: 22px; }
.sp-post-body li { font-size: 15.5px; line-height: 1.74; color: var(--ink-mid); margin-bottom: 7px; }

@media (max-width: 760px) {
  .sp-cast { grid-template-columns: repeat(2, 1fr); }
  .sp-post-body { padding: 6px 22px 28px; }
  .sp-doc { padding: 48px 0 20px; }
}

/* ---------- scroll reveal ---------- */
.sp-rise { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1); }
.sp-rise.in { opacity: 1; transform: none; }

@media (max-width: 940px) {
  .sp-navlinks {
    position: fixed; inset: 72px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--canvas); border-bottom: 1px solid var(--line); padding: 12px 26px 22px; display: none;
  }
  .sp-navlinks.open { display: flex; }
  .sp-navlinks > a { padding: 14px 2px; border-bottom: 1px solid var(--line); }
  .sp-navlinks .sp-lang, .sp-navlinks .sp-cta { margin-top: 14px; align-self: flex-start; }
  .sp-navtoggle { display: block; }
  .sp-hero-inner { padding-top: 10px; }
  .sp-hero-band img { width: 132%; max-width: none; }
  .sp-domains { grid-template-columns: 1fr; }
  .sp-feat, .sp-feat.flip { grid-template-columns: 1fr; gap: 30px; padding: 42px 0; }
  .sp-feat .sp-feat-art, .sp-feat.flip .sp-feat-art { order: -1; }
  .sp-parent { grid-template-columns: 1fr; padding: 40px 26px; border-radius: 30px; }
  .sp-foot-grid { grid-template-columns: 1fr 1fr; }
  .sp-sec { padding: 62px 0; }
  .sp-stage { padding: 28px 22px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .sp *, .sp *::before, .sp *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .sp-rise { opacity: 1; transform: none; }
}