/* =========================================================
   susumate / すすメイト — style.css
   Theme: 旅路 × 空・宇宙（journey through the night into dawn）
   ========================================================= */

:root{
  /* --- color tokens --- */
  --bg-deep:      #0A0E27;
  --bg-navy:      #10163A;
  --bg-panel:     #171D48;
  --bg-panel-alt: #20245A;

  --accent-dawn:       #31a2f9;
  --accent-dawn-soft:  #bee1fb;
  --accent-aurora:     #8a85d3;
  --accent-aurora-soft:#dab1e5;

  --star-white:     #F6F4EC;
  --text-primary:   #EFEEFB;
  --text-secondary: #AEB8DE;
  --text-muted:     #7880A8;
  --line:        rgba(190,225,251,0.12);
  --line-strong: rgba(138,133,211,0.30);

  /* --- type tokens --- */
  --font-display: 'Shippori Mincho', serif;
  --font-body:    'Zen Kaku Gothic New', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --container-w: 1180px;
}

/* --- reset --- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg-navy);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }
button{ font: inherit; color: inherit; background:none; border:none; cursor:pointer; }

svg{ overflow: visible; }
svg path, svg circle, svg rect, svg line, svg polygon{
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}
.center{ text-align:center; }
.section{ padding: clamp(64px, 10vw, 128px) 0; position:relative; }

.br-pc{ display:inline; }

/* --- skip link --- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--accent-aurora); color: var(--bg-deep);
  padding: 12px 20px; border-radius: 8px; z-index: 999;
  font-weight:700;
}
.skip-link:focus{ left: 20px; top: 20px; }

/* --- focus visibility --- */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--accent-aurora);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- eyebrow label --- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--accent-aurora);
  margin: 0 0 14px;
  overflow-wrap: anywhere;
}
.eyebrow.center{ text-align:center; }

/* --- headings --- */
h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.5;
  color: var(--star-white);
  letter-spacing: 0.01em;
}
.lead{
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 46ch;
}
.lead.center{ margin: 20px auto 0; }
h2 + .lead{ margin-top: 20px; }
.problems h2, .roadmap h2, .articles h2{ margin: 0 auto; max-width: 20ch; }

/* --- buttons --- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease, background-color .25s ease;
}
.btn-primary{
  background: var(--accent-dawn);
  color: var(--bg-deep);
}
.btn-primary:hover{
  background: var(--accent-dawn-soft);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(49,162,249,0.25);
}
.btn-outline{
  background: transparent;
  border: 1.5px solid var(--line-strong);
  color: var(--text-primary);
}
.btn-outline:hover{
  border-color: var(--accent-aurora);
  color: var(--accent-aurora);
  transform: translateY(-2px);
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 200;
  background: rgba(10,14,39,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.site-header.is-scrolled{
  background: rgba(10,14,39,0.86);
  border-bottom-color: var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  height: 74px;
}
.logo{
  display:flex;
  align-items:center;
  flex: 0 0 auto;
  width: min(80px, 18vw);
}
.logo-image{
  width: 100%;
  height: auto;
  max-height: 21px;
  object-fit: contain;
}

.main-nav{
  display:flex;
  align-items:center;
  gap: clamp(14px, 2.2vw, 32px);
  font-size: 0.88rem;
}
.main-nav a{
  color: var(--text-secondary);
  padding: 6px 2px;
  position:relative;
  transition: color .25s ease;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:-4px;
  height:1.5px;
  background: var(--accent-aurora);
  transition: right .25s ease;
}
.main-nav a:hover,
.main-nav a.is-current{ color: var(--star-white); }
.main-nav a:hover::after,
.main-nav a.is-current::after{ right:0; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width: 32px; height: 32px;
}
.nav-toggle span{
  display:block;
  width: 100%;
  height: 1.5px;
  background: var(--star-white);
  transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  padding-top: 74px;
  background: var(--bg-deep);
  overflow: hidden;
}
.hero-bg{
  position:absolute; inset:0;
  z-index:0;
}
.stars{
  position:absolute; inset:0;
  background-repeat: repeat;
}
.stars-far{
  background-image:
    radial-gradient(1.6px 1.6px at 10% 20%, var(--star-white), transparent),
    radial-gradient(1.4px 1.4px at 30% 65%, var(--star-white), transparent),
    radial-gradient(1.2px 1.2px at 55% 15%, var(--star-white), transparent),
    radial-gradient(1.6px 1.6px at 75% 45%, var(--star-white), transparent),
    radial-gradient(1.3px 1.3px at 90% 75%, var(--star-white), transparent),
    radial-gradient(1.5px 1.5px at 20% 85%, var(--star-white), transparent),
    radial-gradient(1.2px 1.2px at 65% 90%, var(--star-white), transparent),
    radial-gradient(1.4px 1.4px at 40% 35%, var(--star-white), transparent);
  background-size: 600px 600px;
  opacity: 0.55;
  animation: twinkle 6s ease-in-out infinite;
}
.stars-near{
  background-image:
    radial-gradient(2px 2px at 15% 40%, var(--accent-aurora-soft), transparent),
    radial-gradient(1.8px 1.8px at 48% 20%, var(--star-white), transparent),
    radial-gradient(2px 2px at 82% 30%, var(--accent-aurora-soft), transparent),
    radial-gradient(1.6px 1.6px at 68% 70%, var(--star-white), transparent),
    radial-gradient(2px 2px at 25% 78%, var(--star-white), transparent);
  background-size: 420px 420px;
  opacity: 0.7;
  animation: twinkle 4.5s ease-in-out infinite reverse;
}
@keyframes twinkle{
  0%, 100%{ opacity: 0.35; }
  50%{ opacity: 0.85; }
}
.comet{
  position:absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--star-white);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
  opacity:0;
}
.comet::before{
  content:"";
  position:absolute;
  top:50%; right:0;
  width: 120px; height:1px;
  transform: translateY(-50%);
  background: linear-gradient(to left, var(--star-white), transparent);
}
.comet-a{ top: 18%; left: 8%; animation: shoot-a 9s linear infinite; }
.comet-b{ top: 32%; left: 55%; animation: shoot-b 13s linear infinite 3s; }
@keyframes shoot-a{
  0%{ opacity:0; transform: translate(0,0) rotate(-28deg); }
  4%{ opacity:1; }
  16%{ opacity:0; transform: translate(320px, 170px) rotate(-28deg); }
  100%{ opacity:0; transform: translate(320px, 170px) rotate(-28deg); }
}
@keyframes shoot-b{
  0%{ opacity:0; transform: translate(0,0) rotate(-20deg); }
  3%{ opacity:1; }
  13%{ opacity:0; transform: translate(260px, 100px) rotate(-20deg); }
  100%{ opacity:0; transform: translate(260px, 100px) rotate(-20deg); }
}
.horizon-glow{
  position:absolute;
  left:0; right:0; bottom:-10%;
  height: 60%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(218,177,229,0.22), rgba(218,177,229,0) 70%);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  z-index:2;
  padding-top: 40px;
  padding-bottom: 100px;
}
.hero-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  line-height: 1.15;
  color: var(--star-white);
  margin: 0 0 28px;
}
.hero-sub{
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--text-secondary);
  max-width: 44ch;
  margin-bottom: 40px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap: 16px; }

.scroll-cue{
  position:absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 10px;
  z-index:2;
  color: var(--text-muted);
}
.scroll-cue-line{
  width:1px; height: 36px;
  background: linear-gradient(to bottom, var(--accent-aurora), transparent);
  animation: cue-drop 2.2s ease-in-out infinite;
}
.scroll-cue-text{
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
}
@keyframes cue-drop{
  0%,100%{ transform: scaleY(0.6); opacity:0.4; }
  50%{ transform: scaleY(1); opacity:1; }
}

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 90px);
  align-items:center;
}
.about-text h2{ margin-bottom: 22px; }
.about-text p{ margin-bottom: 16px; max-width: 52ch; }
.feature-list{
  margin-top: 28px;
  display:flex;
  flex-direction: column;
  gap: 16px;
}
.feature-list li{
  display:flex;
  align-items:center;
  gap: 14px;
  color: var(--text-primary);
  font-size: 0.95rem;
}
.feature-list svg{
  width: 26px; height:26px;
  flex-shrink:0;
  color: var(--accent-dawn);
}

.about-visual{ display:flex; justify-content:center; }
.orbit-art{ width: 100%; max-width: 380px; color: var(--accent-aurora); }
.orbit-ring{ fill:none; stroke: var(--line-strong); stroke-width: 1; }
.orbit-core{ fill: var(--bg-panel); stroke: var(--accent-dawn); stroke-width: 1.5; }
.orbit-dot{ stroke:none; }
.orbit-dot-a{ fill: var(--accent-dawn); animation: orbit-a 14s linear infinite; transform-origin: 200px 200px; }
.orbit-dot-b{ fill: var(--accent-aurora); animation: orbit-b 20s linear infinite; transform-origin: 200px 200px; }
.orbit-dot-c{ fill: var(--star-white); animation: orbit-c 26s linear infinite reverse; transform-origin: 200px 200px; }
@keyframes orbit-a{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@keyframes orbit-b{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@keyframes orbit-c{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

/* =========================================================
   CARD GRID (problems / articles shared)
   ========================================================= */
.card-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.articles-grid{ grid-template-columns: repeat(3, 1fr); }

.problem-card, .article-card{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.problem-card:hover, .article-card:hover{
  transform: translateY(-4px);
  border-color: var(--accent-aurora);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
}
.problem-icon{
  display:inline-flex;
  width: 44px; height:44px;
  align-items:center; justify-content:center;
  border-radius: 12px;
  background: rgba(138,133,211,0.10);
  color: var(--accent-aurora);
  margin-bottom: 18px;
}
.problem-icon svg{ width: 24px; height:24px; }
.problem-card h3, .article-card h3{
  font-family: var(--font-display);
  color: var(--star-white);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 10px;
}
.problem-card p, .article-card p{ font-size: 0.92rem; margin:0; }

.bridge-line{
  margin-top: 48px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--star-white);
}

.article-tag{
  display:inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--accent-dawn);
  border: 1px solid rgba(49,162,249,0.35);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.article-card p{ margin-bottom: 18px; }
.article-link, .waypoint-link{
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-aurora);
  display:inline-flex;
  align-items:center;
  gap: 6px;
}
.article-link span, .waypoint-link span{ transition: transform .25s ease; }
.article-link:hover span, .waypoint-link:hover span{ transform: translateX(4px); }

.articles .center .btn, .roadmap .center .btn{ margin-top: 44px; }

/* =========================================================
   LOWER PAGES / LISTING
   ========================================================= */
.page-hero{
  position: relative;
  padding: clamp(128px, 16vw, 180px) 0 clamp(64px, 9vw, 104px);
  background:
    radial-gradient(60% 90% at 85% 20%, rgba(138,133,211,0.12), transparent 58%),
    radial-gradient(60% 90% at 15% 90%, rgba(49,162,249,0.12), transparent 64%),
    var(--bg-deep);
  overflow: hidden;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 14% 28%, var(--star-white), transparent),
    radial-gradient(1.2px 1.2px at 42% 18%, var(--star-white), transparent),
    radial-gradient(1.6px 1.6px at 78% 38%, var(--accent-aurora-soft), transparent),
    radial-gradient(1.2px 1.2px at 64% 72%, var(--star-white), transparent);
  background-size: 520px 520px;
  opacity: 0.42;
  pointer-events:none;
}
.page-hero .container{ position: relative; z-index: 1; }
.page-hero h1{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.35;
  color: var(--star-white);
  margin: 0 0 24px;
}
.breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.breadcrumb a{
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color .25s ease, text-decoration-color .25s ease;
}
.breadcrumb a:hover{
  color: var(--star-white);
  text-decoration-color: var(--accent-aurora);
}
.breadcrumb a::after{
  content:"/";
  display:inline-block;
  margin-left: 8px;
  color: var(--text-muted);
}
.section-heading{
  max-width: 720px;
  margin-bottom: 38px;
}
.content-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.content-card{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px;
}
.content-card h2,
.content-card h3{
  font-family: var(--font-display);
  color: var(--star-white);
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 12px;
}
.content-card p{
  font-size: 0.94rem;
  margin: 0 0 18px;
}
.card-meta{
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.card-status{
  display:inline-flex;
  align-items:center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(138,133,211,0.34);
  border-radius: 999px;
  color: var(--accent-aurora);
  font-size: 0.82rem;
  font-weight: 700;
}
.next-section{
  background: linear-gradient(180deg, rgba(10,14,39,0), rgba(10,14,39,0.42));
}
.next-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  gap: clamp(28px, 5vw, 72px);
  align-items:center;
}
.related-links{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.related-links a{
  display:flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(22,28,70,0.72);
  color: var(--text-primary);
  font-weight: 700;
  transition: border-color .25s ease, transform .25s ease, color .25s ease;
}
.related-links a::after{
  content:"→";
  color: var(--accent-aurora);
}
.related-links a:hover{
  border-color: var(--accent-aurora);
  color: var(--accent-aurora);
  transform: translateY(-2px);
}
.about-detail-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* =========================================================
   ROADMAP (signature constellation timeline)
   ========================================================= */
.roadmap-path{
  position: relative;
  max-width: 720px;
  margin: 64px auto 0;
  padding-left: 52px;
}
.roadmap-track{
  position:absolute;
  left: 11px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow:hidden;
}
.roadmap-track-fill{
  position:absolute;
  top:0; left:0; right:0;
  height: 0%;
  background: linear-gradient(to bottom, var(--accent-aurora), var(--accent-dawn));
  transition: height 1s cubic-bezier(.2,.8,.2,1);
}
.waypoint{
  position: relative;
  padding-bottom: 52px;
}
.waypoint:last-child{ padding-bottom: 0; }
.waypoint-star{
  position:absolute;
  left: -52px;
  top: 6px;
  width: 24px; height:24px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 2px solid var(--line-strong);
  transition: all .5s ease;
}
.waypoint-star::after{
  content:"";
  position:absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all .5s ease;
}
.waypoint.is-active .waypoint-star{
  border-color: var(--accent-aurora);
  box-shadow: 0 0 0 5px rgba(138,133,211,0.14), 0 0 18px rgba(138,133,211,0.55);
}
.waypoint.is-active .waypoint-star::after{
  background: var(--accent-aurora);
}
.waypoint-content{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 28px;
  transition: border-color .4s ease, transform .4s ease;
}
.waypoint.is-active .waypoint-content{
  border-color: rgba(138,133,211,0.35);
}
.waypoint-num{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-dawn);
  letter-spacing: 0.05em;
}
.waypoint-content h3{
  font-family: var(--font-display);
  color: var(--star-white);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 8px 0 10px;
}
.waypoint-content p{ font-size: 0.94rem; margin: 0 0 16px; max-width: 48ch; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{
  background: linear-gradient(180deg, var(--bg-navy), var(--bg-deep));
}
.cta-band h2{ margin-bottom: 32px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  padding: 56px 0 32px;
}
.footer-grid{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 40px;
}
.footer-logo{
  display: inline-flex;
  align-items: center;
  width: min(88px, 24vw);
}
.footer-logo-image{
  width: 100%;
  height: auto;
  max-height: 24px;
  object-fit: contain;
}
.footer-tagline{
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 6px;
}
.footer-nav{ display:flex; gap: 28px; flex-wrap:wrap; font-size: 0.9rem; }
.footer-nav a:hover{ color: var(--star-white); }
.footer-fine{
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }
.problem-card.reveal:nth-child(2){ transition-delay: .08s; }
.problem-card.reveal:nth-child(3){ transition-delay: .16s; }
.problem-card.reveal:nth-child(4){ transition-delay: .24s; }
.article-card.reveal:nth-child(2){ transition-delay: .1s; }
.article-card.reveal:nth-child(3){ transition-delay: .2s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-visual{ order:-1; max-width: 280px; margin: 0 auto; }
  .card-grid{ grid-template-columns: repeat(2, 1fr); }
  .articles-grid{ grid-template-columns: repeat(2, 1fr); }
  .content-grid{ grid-template-columns: repeat(2, 1fr); }
  .next-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .br-pc{ display: inline; }
  .nav-toggle{ display:flex; }
  .main-nav{
    position: fixed;
    inset: 74px 0 0 0;
    background: rgba(10,14,39,0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content:center;
    align-items:center;
    gap: 36px;
    font-size: 1.2rem;
    transform: translateX(100%);
    transition: transform .35s ease;
  }
  body.nav-open .main-nav{ transform: translateX(0); }
  body.nav-open{ overflow:hidden; }
}

@media (max-width: 640px){
  .hero-inner.container{
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero .eyebrow,
  .hero-sub{
    max-width: 260px;
  }
  .hero .eyebrow{
    line-height: 1.8;
  }
  .card-grid{ grid-template-columns: 1fr; }
  .articles-grid{ grid-template-columns: 1fr; }
  .content-grid,
  .about-detail-grid{ grid-template-columns: 1fr; }
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    width: min(100%, 260px);
  }
  .hero-actions .btn{
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    justify-content:center;
    text-align:center;
    white-space: normal;
  }
  .roadmap-path{ padding-left: 44px; }
  .waypoint-star{ left: -44px; }
  .page-hero h1{ font-size: clamp(1.9rem, 10vw, 2.5rem); }
  .content-card{ padding: 24px 20px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}