/* =========================================================================
   RE:FRAME LP — Dark base / Pink-forward
   出典トンマナ: ../デザイン/トンマナ.md ・ ../デザイン/tokens.css
   決定(2026-07-06): 黒基調 / 主役=ピンク #FF5C8E / 水色は脇役 / teal=信頼の錨のみ
   ========================================================================= */

:root {
  /* ---- Surfaces (dark) --------------------------------------------- */
  --bg:         #0B0B0F;
  --bg-panel:   #141419;   /* 斜め分割パネル */
  --bg-card:    #1A1A22;   /* カード・カラム */
  --line:       #2A2A34;   /* ヘアライン */

  /* ---- Text -------------------------------------------------------- */
  --text:       #F4F4F7;
  --text-mute:  #9A9AA6;
  --text-dim:   #6C6C78;

  /* ---- Accents (3-tier) -------------------------------------------- */
  --pink:       #FF5C8E;   /* ★主役: 強調・CTA・主要数字・グリッチ右（彩度↓明度↑で可読性up） */
  --pink-ink:   #0B0B0F;   /* ピンク面上の文字 */
  --pink-soft:  rgba(255, 92, 142, 0.16);
  --cyan:       #35E5DD;   /* 脇役: ティック・小ラベル・グリッチ左・hover */
  --teal:       #0E8C99;   /* 信頼の錨: プラン見出し・協会バッジのみ */
  --white:      #FFFFFF;   /* 反転リリーフ面 */

  /* ---- Type -------------------------------------------------------- */
  --font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", Georgia, serif;
  --w-black: 900; --w-bold: 700; --w-med: 500; --w-reg: 400;

  --text-hero:   clamp(2.6rem, 1rem + 7vw, 6.5rem);
  --text-h2:     clamp(1.9rem, 1rem + 3vw, 3.2rem);
  --text-h3:     clamp(1.2rem, 1rem + 1vw, 1.7rem);
  --text-base:   clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --tracking-eyebrow: 0.4em;

  /* ---- Layout / shape ---------------------------------------------- */
  --maxw: 1180px;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --skew: -7deg;
  --radius-card: 14px;
  --radius-pill: 999px;

  /* ---- Motion ------------------------------------------------------ */
  --dur: 620ms;
  --dur-fast: 160ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- reset --------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.75;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* =========================================================================
   Utilities
   ========================================================================= */
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-block: var(--space-section); position: relative; }

.eyebrow {
  display: inline-block;
  font-size: 0.72rem; font-weight: var(--w-bold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--cyan);
}
.emph { color: var(--pink); font-weight: var(--w-bold); }         /* ★目立たせる文字=ピンク */
.emph-cy { color: var(--cyan); font-weight: var(--w-bold); }

/* number + vertical tick (structure marker) */
.tick { display: inline-flex; align-items: baseline; gap: 0.7rem; }
.tick .no { font-family: var(--font-serif); font-weight: var(--w-bold); color: var(--pink); font-size: 0.95rem; letter-spacing: 0.05em; }
.tick .no::before { content: ""; display: inline-block; width: 3px; height: 0.9em; background: var(--cyan); margin-right: 0.55rem; transform: translateY(1px); }

/* TikTok-style chromatic glitch (cyan left / pink right) */
.glitch { position: relative; color: var(--text); text-shadow: 0.035em 0 var(--pink), -0.035em 0 var(--cyan); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: var(--w-bold); font-size: 0.95rem;
  padding: 0.9rem 1.9rem; border-radius: var(--radius-pill); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.btn--primary { background: var(--pink); color: var(--pink-ink); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -14px rgba(255,92,142,0.6); }
.btn--ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line); }
.btn--ghost:hover { transform: translateY(-3px); border-color: var(--cyan); color: var(--cyan); }
.btn--lg { padding: 1.1rem 2.4rem; font-size: 1.05rem; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }

/* callout box (charcoal + pink keyword) */
.callout { background: var(--bg-card); border-left: 3px solid var(--pink);
  padding: 1.25rem 1.6rem; font-weight: var(--w-med); border-radius: 0 var(--radius-card) var(--radius-card) 0; }

/* section heading */
.head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.head h2 { font-weight: var(--w-black); font-size: var(--text-h2); line-height: 1.14; letter-spacing: -0.01em; margin-top: 0.6rem; }
.head p { color: var(--text-mute); max-width: 42rem; margin-top: 0.9rem; }

/* =========================================================================
   Motion
   ========================================================================= */
@keyframes riseIn { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes slideDiag { from { opacity: 0; transform: translate3d(38px, -18px, 0); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; }
.reveal.in { animation: riseIn var(--dur) var(--ease) forwards; }
.reveal-diag { opacity: 0; }
.reveal-diag.in { animation: slideDiag var(--dur) var(--ease) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .16s; } .d3 { animation-delay: .27s; }
.d4 { animation-delay: .38s; } .d5 { animation-delay: .49s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-diag { opacity: 1 !important; animation: none !important; }
  .btn { transition: none; }
}

/* =========================================================================
   Nav
   ========================================================================= */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  transition: background var(--dur-fast) var(--ease); }
.nav.scrolled { background: rgba(11,11,15,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { font-family: var(--font-serif); font-weight: var(--w-bold); font-size: 1.35rem; letter-spacing: 0.04em; }
.brand b { color: var(--pink); }
.nav-links { display: flex; align-items: center; gap: 1.8rem; font-size: 0.85rem; font-weight: var(--w-med); }
.nav-links a:not(.btn):hover { color: var(--cyan); }
@media (max-width: 780px) { .nav-links .hide-sm { display: none; } }

/* =========================================================================
   1 — HERO
   ========================================================================= */
.hero { position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: center; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--bg-panel); clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%); }
.hero::after { content: ""; position: absolute; top: -5%; bottom: -5%; left: 58%; width: 5px; z-index: 1;
  background: linear-gradient(180deg, var(--cyan), var(--pink));
  transform: skewX(var(--skew)); box-shadow: 0 0 28px rgba(255,92,142,0.45); }
.hero-glow { position: absolute; z-index: 0; width: 46vw; height: 46vw; right: -10vw; top: -10vw;
  background: radial-gradient(circle, var(--pink-soft), transparent 65%); filter: blur(20px); pointer-events: none; }
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 8rem clamp(1.25rem, 4vw, 2.5rem) 7rem;
  display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: 3rem; }

.hero .eyebrow { margin-bottom: 1.4rem; }
.hero-thesis { font-family: var(--font-serif); font-weight: var(--w-bold);
  font-size: var(--text-hero); line-height: 1.04; letter-spacing: -0.015em; }
.hero-thesis .met { font-style: italic; color: var(--pink); }
.hero-jp { margin-top: 1.8rem; font-size: 1.06rem; color: var(--text-mute); max-width: 32rem; line-height: 1.95; }
.hero-jp b { color: var(--text); font-weight: var(--w-bold); }
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.4rem; }

/* stat card — inverted white for pop */
.stat-card { background: var(--white); color: #101014; border-radius: 18px; padding: 2.2rem 2rem;
  transform: rotate(2.5deg); box-shadow: 0 34px 90px -30px rgba(0,0,0,0.85); }
.stat-card .kpi + .kpi { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid #ececf0; }
.stat-card .num { font-weight: var(--w-black); font-size: clamp(2.1rem, 1rem + 3vw, 3.1rem); line-height: 1; }
.stat-card .num small { font-size: 1.15rem; margin-left: 0.15rem; }
.stat-card .num.pink { color: var(--pink); }
.stat-card .num.teal { color: var(--teal); }
.stat-card .lab { font-size: 0.85rem; color: #6a6a73; font-weight: var(--w-med); line-height: 1.5; margin-top: 0.35rem; }

/* hero ticker */
.ticker { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  background: #000; border-top: 1px solid var(--line);
  display: flex; justify-content: center; gap: clamp(1.2rem, 4vw, 3.5rem); flex-wrap: wrap;
  padding: 1rem 1.5rem; font-size: 0.88rem; font-weight: var(--w-med); color: var(--text-mute); }
.ticker b { color: var(--text); font-weight: var(--w-black); }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 7rem; gap: 2.5rem; }
  .hero::before { clip-path: polygon(0 0, 100% 0, 100% 28%, 0 42%); }
  .hero::after { display: none; }
  .stat-card { transform: none; }
}

/* =========================================================================
   2 — WHY NOW
   ========================================================================= */
.why { background: var(--bg-panel); clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.why-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 2rem 1.8rem; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.why-card:hover { transform: translateY(-4px); border-color: var(--pink); }
.why-card .big { font-family: var(--font-serif); font-weight: var(--w-black); font-size: clamp(2.4rem, 1rem + 4vw, 3.6rem);
  color: var(--pink); line-height: 1; }
.why-card .big small { font-size: 1.3rem; }
.why-card h3 { font-size: 1.05rem; font-weight: var(--w-bold); margin: 0.8rem 0 0.5rem; }
.why-card p { color: var(--text-mute); font-size: 0.95rem; }
@media (max-width: 820px) { .why-grid { grid-template-columns: 1fr; } .why { clip-path: none; } }

/* =========================================================================
   3 — ABOUT (RE:FRAMEとは)
   ========================================================================= */
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: center; }
.about-def { font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem); font-weight: var(--w-black); line-height: 1.35; }
.about-def s { text-decoration-color: var(--pink); text-decoration-thickness: 3px; color: var(--text-dim); }
.about-tags { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.8rem; }
.about-tags span { font-family: var(--font-serif); font-weight: var(--w-bold); letter-spacing: 0.12em;
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.5rem 1.3rem; font-size: 0.85rem; color: var(--cyan); }
.about-copy p { color: var(--text-mute); }
.about-copy p + p { margin-top: 1.1rem; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* =========================================================================
   4 — STRENGTHS (WHY US)
   ========================================================================= */
.str-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.str-item { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.8rem; }
.str-item .idx { font-family: var(--font-serif); font-weight: var(--w-black); font-size: 1.8rem; color: var(--pink); line-height: 1; }
.str-item h3 { font-size: 1.1rem; font-weight: var(--w-bold); margin-bottom: 0.4rem; }
.str-item p { color: var(--text-mute); font-size: 0.95rem; }
.str-exclusive { grid-column: 1 / -1; display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
  background: linear-gradient(100deg, var(--bg-card), rgba(14,140,153,0.14)); border: 1px solid var(--teal);
  border-radius: var(--radius-card); padding: 1.6rem 1.8rem; }
.badge-teal { background: var(--teal); color: #fff; font-weight: var(--w-black); font-size: 0.78rem; letter-spacing: 0.18em;
  padding: 0.55rem 1.1rem; border-radius: var(--radius-pill); white-space: nowrap; }
.str-exclusive p { flex: 1; min-width: 15rem; font-size: 0.98rem; }
@media (max-width: 820px) { .str-list { grid-template-columns: 1fr; } }

/* =========================================================================
   5 — RESULTS
   ========================================================================= */
.result-hero { background: var(--bg-card); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; }
.result-hero::after { content: ""; position: absolute; top: 0; right: 0; width: 40%; height: 100%;
  background: radial-gradient(circle at top right, var(--pink-soft), transparent 70%); pointer-events: none; }
.result-hero .label { font-family: var(--font-serif); font-weight: var(--w-bold); color: var(--cyan); letter-spacing: 0.08em; }
.result-hero h3 { font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); font-weight: var(--w-black); margin: 0.5rem 0 1.8rem; }
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; position: relative; z-index: 1; }
.result-stats .st .n { font-weight: var(--w-black); font-size: clamp(1.6rem, 1rem + 2.4vw, 2.6rem); color: var(--pink); line-height: 1; }
.result-stats .st:nth-child(even) .n { color: var(--cyan); }   /* ピンク⇄水色で交互 */
.result-stats .st .n small { font-size: 1rem; }
.result-stats .st .l { font-size: 0.82rem; color: var(--text-mute); margin-top: 0.4rem; }
.result-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.4rem; }
.result-more .rc { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.5rem; }
.result-more .rc .t { font-weight: var(--w-bold); margin-bottom: 0.3rem; }
.result-more .rc .m { color: var(--pink); font-weight: var(--w-black); font-size: 1.3rem; }
.result-more .rc:nth-child(even) .m { color: var(--cyan); }   /* 中央カードは水色でアクセント */
.result-more .rc .s { color: var(--text-mute); font-size: 0.85rem; }
@media (max-width: 820px) { .result-stats { grid-template-columns: repeat(2, 1fr); } .result-more { grid-template-columns: 1fr; } }

/* =========================================================================
   6 — VOICES
   ========================================================================= */
.voices { background: var(--bg-panel); }
.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.voice { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 2rem 1.8rem; position: relative; }
.voice .mark { font-family: var(--font-serif); font-size: 3.4rem; line-height: 0.6; color: var(--pink); opacity: 0.5; }
.voice p { margin: 0.6rem 0 1.4rem; font-size: 0.98rem; }
.voice .who { color: var(--cyan); font-weight: var(--w-bold); font-size: 0.88rem; }
@media (max-width: 820px) { .voice-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   7 — SERVICE (5工程)
   ========================================================================= */
.svc-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8rem; }
.svc-step { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.6rem 1.3rem; position: relative; }
.svc-step .no { font-family: var(--font-serif); font-weight: var(--w-black); color: var(--pink); font-size: 1.1rem; }
.svc-step h3 { font-size: 1.05rem; font-weight: var(--w-bold); margin: 0.5rem 0 0.6rem; }
.svc-step p { color: var(--text-mute); font-size: 0.86rem; line-height: 1.65; }
.svc-step:not(:last-child)::after { content: "→"; position: absolute; right: -0.55rem; top: 1.6rem; color: var(--cyan); font-weight: var(--w-black); z-index: 2; }
@media (max-width: 900px) { .svc-flow { grid-template-columns: 1fr 1fr; } .svc-step::after { display: none; } }

/* =========================================================================
   8 — FLOW (5ステップ) + speed callout
   ========================================================================= */
.flow-line { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; counter-reset: step; }
.flow-node { text-align: center; position: relative; }
.flow-node .dot { width: 46px; height: 46px; margin: 0 auto 0.9rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-card); border: 2px solid var(--pink); font-family: var(--font-serif); font-weight: var(--w-black); color: var(--pink); }
.flow-node h3 { font-size: 0.98rem; font-weight: var(--w-bold); }
.flow-node p { color: var(--text-mute); font-size: 0.82rem; margin-top: 0.3rem; }
.flow-node:not(:last-child)::before { content: ""; position: absolute; top: 23px; left: 50%; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--pink), var(--cyan)); z-index: 0; }
.flow-node .dot { position: relative; z-index: 1; }
.speed-callout { margin-top: 2.6rem; text-align: center; font-size: clamp(1.1rem, 1rem + 1vw, 1.5rem); font-weight: var(--w-bold); }
@media (max-width: 820px) { .flow-line { grid-template-columns: 1fr; gap: 1.4rem; } .flow-node:not(:last-child)::before { display: none; } }

/* =========================================================================
   9 — PRICING
   ========================================================================= */
.guarantee { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--pink-soft); color: var(--pink);
  border: 1px solid var(--pink); border-radius: var(--radius-pill); padding: 0.6rem 1.4rem; font-weight: var(--w-bold); font-size: 0.9rem; margin-bottom: 1.8rem; }
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.plan { background: var(--bg-card); border: 1px solid var(--line); border-radius: 18px; padding: 2.2rem; position: relative; }
.plan--featured { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), 0 30px 70px -30px rgba(255,92,142,0.4); }
.plan .flag { position: absolute; top: -0.85rem; left: 2.2rem; background: var(--pink); color: var(--pink-ink);
  font-weight: var(--w-black); font-size: 0.72rem; letter-spacing: 0.14em; padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); }
.plan .pname { font-weight: var(--w-black); font-size: 1.3rem; }
.plan .pname span { color: var(--teal); font-family: var(--font-serif); }
.plan--featured .pname span { color: var(--pink); }
.plan .price { font-weight: var(--w-black); font-size: clamp(2rem, 1rem + 2.5vw, 2.8rem); margin: 0.8rem 0 0.2rem; }
.plan .price small { font-size: 1rem; color: var(--text-mute); font-weight: var(--w-med); }
.plan .sub { color: var(--text-mute); font-size: 0.9rem; margin-bottom: 1.4rem; }
.plan ul { display: grid; gap: 0.7rem; margin-bottom: 1.8rem; }
.plan li { position: relative; padding-left: 1.5rem; font-size: 0.94rem; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--cyan); font-weight: var(--w-black); }
.recruit { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.recruit .rp { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.5rem 1.6rem; }
.recruit .rp .rt { font-weight: var(--w-bold); }
.recruit .rp .rt small { color: var(--teal); font-family: var(--font-serif); font-weight: var(--w-bold); margin-left: 0.4rem; }
.recruit .rp .rpr { color: var(--pink); font-weight: var(--w-black); font-size: 1.15rem; margin: 0.3rem 0; }
.recruit .rp .rs { color: var(--text-mute); font-size: 0.85rem; }
@media (max-width: 820px) { .plan-grid, .recruit { grid-template-columns: 1fr; } }

/* =========================================================================
   10 — FAQ
   ========================================================================= */
.faq-list { display: grid; gap: 0.8rem; max-width: 52rem; }
.faq { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--bg-card); }
.faq summary { cursor: pointer; list-style: none; padding: 1.3rem 1.6rem; font-weight: var(--w-bold);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { color: var(--pink); font-family: var(--font-serif); font-weight: var(--w-black); margin-right: 0.6rem; }
.faq summary .plus { color: var(--cyan); font-weight: var(--w-black); font-size: 1.3rem; transition: transform var(--dur-fast) var(--ease); }
.faq[open] summary .plus { transform: rotate(45deg); }
.faq .a { padding: 0 1.6rem 1.4rem 3.2rem; color: var(--text-mute); font-size: 0.95rem; }

/* =========================================================================
   11 — CTA
   ========================================================================= */
.cta { position: relative; overflow: hidden; text-align: center; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle at 50% 120%, var(--pink-soft), transparent 60%); }
.cta-inner { position: relative; z-index: 1; }
.cta h2 { font-weight: var(--w-black); font-size: clamp(2rem, 1rem + 4vw, 3.6rem); line-height: 1.15; }
.cta h2 .glitch { display: inline-block; }
.cta-steps { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin: 2.2rem 0; color: var(--text-mute); }
.cta-steps .cs { display: flex; align-items: center; gap: 0.6rem; }
.cta-steps .cs b { color: var(--cyan); font-family: var(--font-serif); }
@media (max-width: 820px) { .cta-steps { flex-direction: column; align-items: center; gap: 0.8rem; } }

/* =========================================================================
   12 — FOOTER
   ========================================================================= */
.footer { border-top: 1px solid var(--line); padding-block: 3.5rem; }
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
.footer .brand { font-size: 1.5rem; margin-bottom: 0.6rem; }
.footer .co { color: var(--text-mute); font-size: 0.9rem; line-height: 1.9; }
.footer .co b { color: var(--text); }
.footer .fnote { color: var(--text-dim); font-size: 0.8rem; margin-top: 2.5rem; }