/* ============================================================
   KeyaQ — Landing Page
   引き算の美学 / legal-professional × fintech
   Palette is STRICT — defined once here, used everywhere.
   ============================================================ */

:root {
  /* ---- Locked brand palette ---- */
  --white: #FFFFFF;
  --blue:  #2DB1FF;   /* primary blue  */
  --navy:  #1A2B4C;   /* dark navy     */
  --yellow:#FFD93D;   /* yellow accent */
  --gray:  #7A8290;   /* muted gray    */

  /* Derived neutrals (kept low-chroma, tuned to navy) */
  --ink:        #16243f;            /* near-navy text on white            */
  --paper:      #fbfcfe;            /* faint cool off-white section bg    */
  --paper-2:    #f4f7fb;            /* slightly deeper panel bg           */
  --line:       #e7ecf3;           /* hairline rules on white            */
  --line-navy:  rgba(255,255,255,.12); /* hairline on navy               */
  --gray-soft:  #9aa3b1;           /* lighter gray for fine print        */

  /* ---- Tweakable accent (defaults to yellow) ---- */
  --accent: var(--yellow);

  /* On-navy text uses primary blue per brief */
  --on-navy-accent: var(--blue);

  /* Type */
  --serif: "Shippori Mincho", "Noto Serif JP", serif;
  --sans:  "Noto Sans JP", system-ui, sans-serif;

  /* Rhythm */
  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(80px, 11vw, 152px);
  --radius: 14px;
  --radius-lg: 22px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  font-size: 17px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .01em;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .02em;
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

/* ---------- layout helpers ---------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--paper { background: var(--paper); }

/* Eyebrow / kicker */
.kicker {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--gray);
  text-transform: uppercase;
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: var(--accent);
  display: inline-block;
}
.kicker--center { justify-content: center; }
.kicker--light { color: rgba(255,255,255,.6); }
.kicker--light::before { background: var(--on-navy-accent); }

.section-title {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.45;
}
.section-lead {
  margin-top: 22px;
  max-width: 56ch;
  color: var(--gray);
  font-size: 16px;
}
.center { text-align: center; }
.center .section-lead { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  border: none;
  cursor: pointer;
  padding: 15px 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s, color .25s;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn--primary {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(26,43,76,.55);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(26,43,76,.6); }
.btn--blue {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(45,177,255,.6);
}
.btn--blue:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(45,177,255,.7); }
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--line);
}
.btn--ghost:hover { border-color: var(--navy); transform: translateY(-2px); }
.btn--on-navy {
  background: var(--blue);
  color: #fff;
}
.btn--on-navy:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(45,177,255,.55); }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px -22px rgba(26,43,76,.4);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}
.logo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: .04em;
  color: var(--navy);
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.logo b { font-weight: 600; }
.logo .q {
  color: var(--blue);
  position: relative;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav__links a.nav-link {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray);
  transition: color .2s;
}
.nav__links a.nav-link:hover { color: var(--navy); }
.nav__cta { padding: 11px 24px; font-size: 14px; }
@media (max-width: 760px){
  .nav__links a.nav-link { display: none; }
}

/* ============================================================
   HERO (shared bits + 3 variants)
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero[hidden] { display: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy);
  background: color-mix(in srgb, var(--accent) 24%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, #fff);
  padding: 8px 16px 8px 13px;
  border-radius: 999px;
}
.badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--navy);
  position: relative;
}
.badge .dot::after {
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border: 1.5px solid var(--navy);
  opacity:.4;
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping { 0%{transform:scale(.6);opacity:.5} 80%,100%{transform:scale(1.7);opacity:0} }

.hero-catch {
  font-size: clamp(38px, 6.6vw, 78px);
  line-height: 1.28;
  letter-spacing: .015em;
  color: var(--navy);
}
.hero-catch .accent-underline {
  white-space: nowrap;
  background-image: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 90%, transparent 90%);
  background-repeat: no-repeat;
  padding-inline: .04em;
}
.hero-sub {
  color: var(--gray);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.95;
  max-width: 40ch;
}
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-note {
  font-size: 12.5px;
  color: var(--gray-soft);
  font-family: var(--sans);
  letter-spacing: .04em;
}

/* ---- geometric seal / key motif (pure CSS shapes) ---- */
.seal { position: relative; }
.seal .ring {
  position:absolute; border-radius:50%;
  border:1.5px solid var(--line);
}

/* ---------- Hero A : centered, max whitespace ---------- */
.heroA { padding-block: clamp(70px, 12vw, 150px) clamp(70px,11vw,140px); }
.heroA .wrap { display:flex; flex-direction:column; align-items:center; text-align:center; gap:34px; position:relative; z-index:2; }
.heroA .hero-sub { max-width: 46ch; }
.heroA .hero-actions { justify-content:center; }
.heroA .stage {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.heroA .ring-1 { width: min(86vw, 760px); aspect-ratio:1; border-radius:50%; border:1px solid var(--line); position:absolute; }
.heroA .ring-2 { width: min(64vw, 540px); aspect-ratio:1; border-radius:50%; border:1px solid var(--line); position:absolute; }
.heroA .ring-3 {
  width: min(44vw, 360px); aspect-ratio:1; border-radius:50%; position:absolute;
  border:1.5px dashed color-mix(in srgb, var(--blue) 40%, #fff);
}
.heroA .tick {
  position:absolute; width:9px; height:9px; border-radius:50%;
  background: var(--blue);
  top: calc(50% - min(32vw,270px)); left:50%;
}

/* ---------- Hero B : split, asymmetric geometry ---------- */
.heroB { padding-block: clamp(56px, 8vw, 110px) clamp(70px,10vw,130px); }
.heroB .grid {
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px,5vw,72px); align-items:center;
}
.heroB .col-text { display:flex; flex-direction:column; gap:30px; }
.heroB .art {
  position:relative; aspect-ratio: 1/1.02; width:100%;
  border-left: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.heroB .composition { position:relative; width:78%; aspect-ratio:1; }
.heroB .c-ring-lg { position:absolute; inset:0; border:1.5px solid var(--navy); border-radius:50%; opacity:.9; }
.heroB .c-ring-md { position:absolute; inset:18%; border:1.5px solid var(--blue); border-radius:50%; }
.heroB .c-disc {
  position:absolute; inset:40%; border-radius:50%;
  background: var(--accent);
}
.heroB .c-line-v { position:absolute; left:50%; top:-10%; bottom:-10%; width:1px; background:var(--line); }
.heroB .c-line-h { position:absolute; top:50%; left:-10%; right:-10%; height:1px; background:var(--line); }
.heroB .c-dot { position:absolute; width:11px; height:11px; border-radius:50%; background:var(--navy); }
.heroB .c-dot.n { top:-5px; left:calc(50% - 5px); }
.heroB .c-dot.e { right:-5px; top:calc(50% - 5px); background:var(--blue); }
@media (max-width: 860px){
  .heroB .grid { grid-template-columns: 1fr; }
  .heroB .art { border-left:none; order:-1; aspect-ratio: 16/11; }
  .heroB .composition { width: 52%; }
}

/* ---------- Hero C : editorial oversized type ---------- */
.heroC { padding-block: clamp(60px,9vw,120px) clamp(70px,10vw,130px); }
.heroC .frame { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block: clamp(34px,5vw,64px); }
.heroC .meta-row {
  display:flex; justify-content:space-between; align-items:flex-start;
  font-family:var(--sans); font-size:12.5px; letter-spacing:.18em; color:var(--gray);
  text-transform:uppercase; margin-bottom:34px; gap:20px; flex-wrap:wrap;
}
.heroC .big {
  font-size: clamp(44px, 9.5vw, 124px);
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--navy);
}
.heroC .big .lite { color: var(--gray); }
.heroC .big .mark { color: var(--blue); }
.heroC .foot {
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  margin-top: clamp(28px,4vw,50px); flex-wrap:wrap;
}
.heroC .foot .hero-sub { max-width: 38ch; }

/* ============================================================
   PROBLEM
   ============================================================ */
.problem-grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 60px;
}
.pcard {
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px 32px;
  position:relative;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.pcard:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -34px rgba(26,43,76,.5); border-color: color-mix(in srgb, var(--navy) 16%, var(--line)); }
.pcard .num {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--gray);
  letter-spacing: .1em;
}
.pcard .glyph {
  width:46px; height:46px; margin: 16px 0 20px;
  border-radius: 12px;
  background: var(--paper-2);
  display:flex; align-items:center; justify-content:center;
  color: var(--navy);
}
.pcard .glyph svg { width:22px; height:22px; }
.pcard h3 { font-size: 19px; margin-bottom: 12px; }
.pcard p { font-size: 14.5px; color: var(--gray); line-height: 1.9; }
.pcard .strike { position:relative; }
@media (max-width: 820px){ .problem-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FEATURES
   ============================================================ */
.feat-list { display:flex; flex-direction:column; gap: clamp(28px,4vw,44px); margin-top: 64px; }
.feature {
  display:grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px,5vw,68px);
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.feature:nth-child(even) .feature__media { order: 2; }
.feature__body { padding: clamp(34px,4vw,58px); }
.feature__index {
  font-family: var(--sans); font-weight:700; font-size:13px; letter-spacing:.2em;
  color: var(--blue); margin-bottom:18px;
}
.feature__body h3 { font-size: clamp(23px,2.6vw,30px); margin-bottom:18px; }
.feature__body p { color: var(--gray); font-size:15.5px; }
.feature__points { list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:13px; }
.feature__points li { display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink); }
.feature__points li svg { width:18px; height:18px; flex:0 0 auto; margin-top:3px; color: var(--blue); }

.feature__media {
  position:relative;
  min-height: 320px;
  background:
    radial-gradient(120% 120% at 80% 0%, var(--paper-2), var(--paper));
  display:flex; align-items:center; justify-content:center;
  padding: clamp(28px,4vw,48px);
}
/* mock: e-signature panel */
.mock-sign {
  width:100%; max-width: 380px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow: 0 30px 60px -40px rgba(26,43,76,.5);
  overflow:hidden;
}
.mock-sign .bar { display:flex; gap:6px; padding:13px 16px; border-bottom:1px solid var(--line); }
.mock-sign .bar i { width:9px; height:9px; border-radius:50%; background:var(--line); display:block; }
.mock-sign .body { padding:22px 20px; }
.mock-line { height:9px; border-radius:4px; background:var(--paper-2); margin-bottom:11px; }
.mock-line.s { width:55%; }
.mock-line.m { width:80%; }
.mock-sign .sig {
  margin-top:18px; border:1.5px dashed color-mix(in srgb,var(--blue) 45%,#fff);
  border-radius:10px; padding:16px; display:flex; align-items:center; justify-content:space-between;
}
.mock-sign .sig .scrawl {
  font-family: var(--serif); font-style:italic; color:var(--navy); font-size:22px;
}
.mock-sign .stamp {
  width:42px; height:42px; border-radius:50%;
  border:2px solid var(--blue); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-size:13px; letter-spacing:.02em;
}
.mock-sign .verified {
  display:flex; align-items:center; gap:8px; margin-top:16px;
  font-size:12.5px; color:var(--blue); font-weight:700; letter-spacing:.04em;
}
.mock-sign .verified svg { width:15px; height:15px; }

/* mock: template builder */
.mock-build { width:100%; max-width:380px; display:flex; flex-direction:column; gap:12px; }
.mock-build .tmpl-row {
  background:#fff; border:1px solid var(--line); border-radius:11px; padding:14px 16px;
  display:flex; align-items:center; gap:13px;
  box-shadow: 0 18px 40px -38px rgba(26,43,76,.45);
}
.mock-build .tmpl-row .ico {
  width:34px; height:34px; border-radius:8px; background:var(--paper-2);
  display:flex; align-items:center; justify-content:center; color:var(--navy); flex:0 0 auto;
}
.mock-build .tmpl-row .ico svg { width:17px; height:17px; }
.mock-build .tmpl-row.active { border-color: color-mix(in srgb,var(--blue) 55%,#fff); box-shadow: 0 18px 40px -30px rgba(45,177,255,.5); }
.mock-build .tmpl-row .meta { flex:1; }
.mock-build .tmpl-row .meta b { font-size:14px; color:var(--navy); font-family:var(--sans); font-weight:600; display:block; }
.mock-build .tmpl-row .meta span { font-size:12px; color:var(--gray); }
.mock-build .tmpl-row .pill {
  font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--blue);
  background: color-mix(in srgb,var(--blue) 12%,#fff); padding:4px 10px; border-radius:999px;
}
@media (max-width: 820px){
  .feature { grid-template-columns: 1fr; }
  .feature:nth-child(even) .feature__media { order: 0; }
  .feature__media { min-height: 280px; }
}

/* ============================================================
   PRICING
   ============================================================ */
.price-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:26px; margin-top:60px; }
.plan {
  border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 40px 38px 36px; background:#fff; position:relative;
  display:flex; flex-direction:column;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.plan:hover { transform: translateY(-4px); box-shadow:0 30px 60px -42px rgba(26,43,76,.5); }
.plan--featured { border-color: color-mix(in srgb,var(--navy) 28%,var(--line)); }
.plan__tag {
  align-self:flex-start; white-space:nowrap;
  font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.12em;
  padding:6px 13px; border-radius:999px; margin-bottom:22px;
}
.plan--free .plan__tag { color:var(--navy); background:var(--paper-2); }
.plan--biz .plan__tag { color:var(--navy); background: color-mix(in srgb,var(--accent) 30%,#fff); }
.plan h3 { font-size:27px; }
.plan .for { color:var(--gray); font-size:13.5px; margin-top:8px; letter-spacing:.04em; }
.plan .model {
  margin-top:26px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:10px;
}
.plan .model .big { font-family:var(--serif); font-size:30px; color:var(--navy); }
.plan .model .unit { color:var(--gray); font-size:14px; }
.plan .desc { color:var(--gray); font-size:14px; margin-top:16px; line-height:1.9; flex:1; }
.plan .price-note {
  margin-top:24px; padding:13px 16px; border-radius:10px;
  background:var(--paper); border:1px dashed var(--line);
  font-size:12.5px; color:var(--gray); display:flex; gap:9px; align-items:center;
}
.plan .price-note svg { width:15px; height:15px; flex:0 0 auto; color:var(--blue); }
.plan .btn { margin-top:24px; justify-content:center; }
@media (max-width: 760px){ .price-grid { grid-template-columns:1fr; } }

/* ============================================================
   TRUST  (dark navy section)
   ============================================================ */
.trust { background: var(--navy); color:#fff; position:relative; overflow:hidden; }
.trust .wrap { position:relative; z-index:2; }
.trust h2 { color:#fff; }
.trust .section-lead { color: rgba(255,255,255,.62); }
.trust__hero-line {
  font-family:var(--serif); font-size: clamp(24px,3.2vw,40px); line-height:1.5; color:#fff;
}
.trust__hero-line .b { color: var(--blue); }
.trust-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:60px; }
.tcard {
  border:1px solid var(--line-navy); border-radius:var(--radius);
  padding:30px 26px; background: rgba(255,255,255,.025);
  transition: background .3s, border-color .3s, transform .3s;
}
.tcard:hover { background: rgba(255,255,255,.05); transform:translateY(-3px); border-color: rgba(45,177,255,.4); }
.tcard .ico {
  width:44px; height:44px; border-radius:11px;
  border:1px solid rgba(45,177,255,.35); color:var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.tcard .ico svg { width:22px; height:22px; }
.tcard h3 { color:#fff; font-size:18px; margin-bottom:11px; }
.tcard p { color: rgba(255,255,255,.6); font-size:14px; line-height:1.9; }
.trust__deco { position:absolute; right:-6%; top:-20%; width:520px; aspect-ratio:1; pointer-events:none; opacity:.5; }
.trust__deco .r { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.07); inset:0; }
.trust__deco .r2 { inset:16%; border-color: rgba(45,177,255,.12); }
.trust__deco .r3 { inset:34%; }
@media (max-width: 820px){ .trust-grid { grid-template-columns:1fr; } }

/* ============================================================
   CTA / FORM
   ============================================================ */
.cta { background: var(--paper); }
.cta__card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(36px,5vw,68px);
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,64px);
  box-shadow: 0 40px 90px -60px rgba(26,43,76,.5);
}
.cta__intro h2 { font-size: clamp(26px,3.2vw,38px); }
.cta__intro .section-lead { margin-top:20px; }
.cta__bullets { list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:14px; }
.cta__bullets li { display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--ink); }
.cta__bullets li svg { width:18px; height:18px; color:var(--blue); flex:0 0 auto; margin-top:2px; }

.form { display:flex; flex-direction:column; gap:18px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-size:13px; font-weight:600; color:var(--navy); letter-spacing:.03em; }
.field label .req { color: var(--blue); margin-left:5px; font-size:11px; }
.field input, .field select, .field textarea {
  font-family:var(--sans); font-size:15px; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:10px;
  background:#fff; transition: border-color .2s, box-shadow .2s;
  width:100%;
}
.field textarea { resize:vertical; min-height:92px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(45,177,255,.12);
}
.form .btn { margin-top:6px; justify-content:center; }
.form__privacy { font-size:11.5px; color:var(--gray-soft); line-height:1.7; }
.form__ok {
  display:none; text-align:center; padding:30px 10px;
}
.form__ok.show { display:block; }
.form__ok .check {
  width:58px; height:58px; border-radius:50%; margin:0 auto 18px;
  background: color-mix(in srgb,var(--blue) 14%,#fff); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.form__ok .check svg { width:28px; height:28px; }
.form__ok h3 { font-size:21px; margin-bottom:10px; }
.form__ok p { color:var(--gray); font-size:14px; }
@media (max-width: 820px){ .cta__card { grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy); color: rgba(255,255,255,.7); padding-block: 70px 40px; }
.footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:40px; padding-bottom:46px; border-bottom:1px solid var(--line-navy); }
.footer__brand .logo { color:#fff; font-size:26px; }
.footer__brand .logo .q { color: var(--blue); }
.footer__brand p { margin-top:16px; font-size:13px; color: rgba(255,255,255,.5); max-width:34ch; line-height:1.9; }
.footer__col h4 { color:#fff; font-size:13px; font-family:var(--sans); font-weight:700; letter-spacing:.12em; margin-bottom:18px; }
.footer__col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.footer__col a { font-size:13.5px; color: rgba(255,255,255,.6); transition:color .2s; }
.footer__col a:hover { color: var(--blue); }
.footer__bottom {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-top:26px; font-size:12px; color: rgba(255,255,255,.4); flex-wrap:wrap;
}
.footer__bottom .badge-mini {
  font-size:11px; letter-spacing:.1em; padding:5px 12px; border-radius:999px;
  border:1px solid var(--line-navy); color: rgba(255,255,255,.55);
}
@media (max-width: 820px){ .footer__top { grid-template-columns:1fr; gap:32px; } }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s } .reveal[data-d="3"]{ transition-delay:.24s }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none} .badge .dot::after{animation:none} }