@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Noto+Serif+JP:wght@300;400;500;600&family=Noto+Sans+JP:wght@300;400;500&display=swap');

:root {
  --forest:    #1c2b1a;
  --forest-mid:#2d4a2a;
  --moss:      #4a6741;
  --sage:      #7a9e6e;
  --sage-light:#a8c49a;
  --stone:     #e8e2d8;
  --parchment: #f4f0e8;
  --cream:     #faf8f4;
  --white:     #ffffff;
  --ink:       #1a1a16;
  --ink-soft:  #3d3d30;
  --muted:     #8a8878;
  --border:    rgba(74,103,65,0.15);
  --amazon:    #FF9900;
  --amazon-dk: #e08800;
  --ease:      cubic-bezier(0.25,0.1,0.25,1);
  --ease-out:  cubic-bezier(0.0,0.0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.75;
  overflow-x: hidden;
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; transition: background 0.4s var(--ease), box-shadow 0.4s; }
.site-header.scrolled { background: rgba(28,43,26,0.96); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
.logo { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 600; color: var(--cream); text-decoration: none; letter-spacing: 0.04em; display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 32px; height: 32px; background: var(--sage); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--sage-light); }
.nav-cta { background: var(--sage) !important; color: white !important; padding: 9px 22px; border-radius: 3px; font-size: 11px !important; letter-spacing: 0.16em; transition: background 0.2s !important; }
.nav-cta:hover { background: var(--moss) !important; }

.hero { min-height: 100svh; background: var(--forest); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 80px; }
.hero-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 60% 80% at 80% 30%, rgba(74,103,65,0.25) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 10% 70%, rgba(45,74,42,0.3) 0%, transparent 60%); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 80px 80px; }
.hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-light); margin-bottom: 28px; border: 1px solid rgba(122,158,110,0.35); padding: 6px 16px; border-radius: 2px; }
.hero-tag-dot { width: 5px; height: 5px; background: var(--sage); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
.hero-title { font-family: 'Playfair Display', serif; font-size: clamp(44px, 5.5vw, 80px); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; color: var(--cream); margin-bottom: 28px; }
.hero-title em { font-style: italic; color: var(--sage-light); }
.hero-desc { font-size: 15px; line-height: 1.9; color: rgba(244,240,232,0.55); max-width: 400px; margin-bottom: 44px; }
.hero-buttons { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--sage); color: var(--forest); text-decoration: none; padding: 15px 32px; border-radius: 3px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.2s, transform 0.2s; }
.btn-primary:hover { background: var(--sage-light); transform: translateY(-2px); }
.btn-outline { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); text-decoration: none; padding: 15px 28px; border-radius: 3px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; transition: border-color 0.2s, color 0.2s, gap 0.2s; }
.btn-outline:hover { border-color: var(--sage); color: var(--sage-light); gap: 12px; }
.btn-outline::after { content: '→'; }
.hero-right { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hero-stat { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(8px); padding: 20px 28px; border-radius: 4px; width: 100%; }
.hero-stat-num { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 600; color: var(--cream); line-height: 1; margin-bottom: 4px; }
.hero-stat-num span { font-size: 18px; color: var(--sage-light); }
.hero-stat-label { font-size: 12px; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.hero-scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.3); z-index: 2; }
.scroll-arrow { width: 1px; height: 40px; background: linear-gradient(var(--sage), transparent); position: relative; overflow: hidden; }
.scroll-arrow::after { content: ''; position: absolute; top: -100%; left: 0; width: 1px; height: 100%; background: var(--sage-light); animation: scrollDown 1.8s ease-in-out infinite; }
@keyframes scrollDown { 0%{top:-100%} 100%{top:200%} }

section { padding: 96px 48px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-label { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--moss); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.section-label::before { content: ''; width: 28px; height: 1px; background: var(--sage); }
.section-heading { font-family: 'Playfair Display', serif; font-size: clamp(34px, 3.5vw, 52px); font-weight: 600; line-height: 1.12; color: var(--forest); margin-bottom: 16px; }
.section-heading em { font-style: italic; color: var(--moss); }
.section-sub { font-size: 14px; color: var(--muted); line-height: 1.9; max-width: 500px; }

.ranking-section { background: var(--white); }
.ranking-head { margin-bottom: 60px; }
.rank-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid var(--border); }
.rank-card { padding: 48px 40px; border-right: 1px solid var(--border); text-decoration: none; color: inherit; display: block; position: relative; overflow: hidden; transition: background 0.3s; }
.rank-card:last-child { border-right: none; }
.rank-card:hover { background: var(--parchment); }
.rank-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.rank-card:nth-child(1)::before { background: #b8860b; }
.rank-card:nth-child(2)::before { background: #909090; }
.rank-card:nth-child(3)::before { background: #8b5a2b; }
.rank-num { font-family: 'Playfair Display', serif; font-size: 72px; font-weight: 700; line-height: 1; margin-bottom: 20px; display: block; }
.rank-card:nth-child(1) .rank-num { color: rgba(184,134,11,0.15); }
.rank-card:nth-child(2) .rank-num { color: rgba(144,144,144,0.12); }
.rank-card:nth-child(3) .rank-num { color: rgba(139,90,43,0.12); }
.rank-medal { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; display: block; }
.rank-card:nth-child(1) .rank-medal { color: #b8860b; }
.rank-card:nth-child(2) .rank-medal { color: #909090; }
.rank-card:nth-child(3) .rank-medal { color: #8b5a2b; }
.rank-name { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--forest); margin-bottom: 12px; }
.rank-desc { font-size: 13px; color: var(--muted); line-height: 1.8; margin-bottom: 18px; }
.rank-stars { color: var(--sage); letter-spacing: 4px; font-size: 13px; }
.rank-arrow { position: absolute; bottom: 36px; right: 36px; font-size: 20px; color: var(--sage); opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.3s; }
.rank-card:hover .rank-arrow { opacity: 1; transform: none; }

.articles-section { background: var(--parchment); }
.articles-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 52px; gap: 20px; }
.view-all { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss); text-decoration: none; display: flex; align-items: center; gap: 8px; transition: gap 0.2s, color 0.2s; white-space: nowrap; }
.view-all:hover { gap: 14px; color: var(--forest); }
.view-all::after { content: '→'; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.article-card { background: var(--white); text-decoration: none; color: inherit; display: flex; flex-direction: column; border: 1px solid var(--border); transition: transform 0.3s, box-shadow 0.3s; }
.article-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(28,43,26,0.1); }
.card-top { aspect-ratio: 16/10; position: relative; overflow: hidden; }
.card-bg { width: 100%; height: 100%; transition: transform 0.5s var(--ease); }
.article-card:hover .card-bg { transform: scale(1.06); }
.card-bg.bg-cage { background: linear-gradient(135deg, #2d4a2a 0%, #1c3520 50%, #142810 100%); }
.card-bg.bg-substrate { background: linear-gradient(135deg, #6b5a3a 0%, #4a3d25 50%, #332a18 100%); }
.card-bg.bg-shelter { background: linear-gradient(135deg, #3a4a35 0%, #2a3828 50%, #1c2818 100%); }
.card-bg.bg-feed { background: linear-gradient(135deg, #4a5a2a 0%, #384420 50%, #283015 100%); }
.card-bg.bg-uvb { background: linear-gradient(135deg, #2a3a5a 0%, #1c2840 50%, #121c30 100%); }
.card-bg.bg-water { background: linear-gradient(135deg, #2a4a5a 0%, #1c3840 50%, #122830 100%); }
.card-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 56px; transition: transform 0.4s var(--ease); }
.article-card:hover .card-icon { transform: translate(-50%, -56%) scale(1.1); }
.card-label { position: absolute; top: 14px; left: 14px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; background: rgba(28,43,26,0.75); color: var(--sage-light); padding: 5px 12px; backdrop-filter: blur(6px); }
.card-body { padding: 24px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.card-title { font-family: 'Noto Serif JP', serif; font-size: 16px; font-weight: 600; line-height: 1.55; color: var(--forest); margin-bottom: 10px; transition: color 0.2s; }
.article-card:hover .card-title { color: var(--moss); }
.card-excerpt { font-size: 13px; color: var(--muted); line-height: 1.85; flex: 1; margin-bottom: 16px; }
.card-meta { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); display: flex; align-items: center; gap: 8px; }
.card-meta::before { content: ''; width: 20px; height: 1px; background: var(--sage); }

.article-hero { background: var(--forest); padding: 140px 48px 80px; position: relative; overflow: hidden; }
.article-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(74,103,65,0.2) 0%, transparent 70%); }
.article-hero-inner { max-width: 840px; position: relative; z-index: 1; }
.article-badge { display: inline-block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-light); border: 1px solid rgba(122,158,110,0.35); padding: 6px 16px; margin-bottom: 28px; }
.article-page-title { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 52px); font-weight: 700; line-height: 1.18; color: var(--cream); margin-bottom: 24px; }
.article-meta-row { font-size: 12px; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.breadcrumb { background: var(--parchment); padding: 14px 48px; font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--border); }
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--moss); }
.article-body-wrap { max-width: 760px; margin: 0 auto; padding: 72px 48px 100px; }
.article-body p { font-family: 'Noto Serif JP', serif; font-size: 15px; line-height: 2.1; color: var(--ink-soft); margin-bottom: 22px; }
.article-body h2 { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 600; color: var(--forest); margin: 60px 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.article-body h3 { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 600; color: var(--forest-mid); margin: 40px 0 14px; padding-left: 14px; border-left: 3px solid var(--sage); }
.article-body ul, .article-body ol { padding-left: 22px; margin-bottom: 22px; }
.article-body li { font-family: 'Noto Serif JP', serif; font-size: 15px; line-height: 2; color: var(--ink-soft); margin-bottom: 8px; }
.merit-box { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 40px 0; }
@media (max-width: 600px) { .merit-box { grid-template-columns: 1fr; } }
.merit, .demerit { padding: 28px; }
.merit { background: #f2f8f0; border-top: 2px solid var(--sage); }
.demerit { background: #faf2f0; border-top: 2px solid #c47a5a; }
.merit h4 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--moss); margin-bottom: 14px; }
.demerit h4 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #9a4a2a; margin-bottom: 14px; }
.merit ul, .demerit ul { padding-left: 18px; }
.merit li, .demerit li { font-size: 13px; line-height: 1.85; font-family: 'Noto Sans JP', sans-serif; }
.rating-box { margin: 52px 0; background: var(--forest); padding: 52px; text-align: center; }
.rating-label { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sage-light); margin-bottom: 20px; }
.rating-num { font-family: 'Playfair Display', serif; font-size: 88px; font-weight: 700; color: var(--cream); line-height: 1; margin-bottom: 12px; }
.rating-stars { font-size: 20px; color: var(--sage-light); letter-spacing: 6px; margin-bottom: 18px; }
.rating-comment { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.85; font-family: 'Noto Serif JP', serif; }
.amazon-placeholder { border: 1.5px dashed rgba(255,153,0,0.5); padding: 28px 32px; margin: 36px 0; background: #fffaf0; }
.amazon-placeholder strong { display: block; font-size: 14px; font-weight: 600; color: #b07000; margin-bottom: 8px; }
.amazon-placeholder p { font-size: 13px; color: #9a7020; line-height: 1.7; font-family: 'Noto Sans JP', sans-serif; }
.amazon-cta { margin: 52px 0; padding: 44px; border: 2px solid var(--amazon); text-align: center; }
.amazon-cta p { font-size: 14px; color: var(--muted); margin-bottom: 22px; font-family: 'Noto Serif JP', serif; }
.amazon-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--amazon); color: white; text-decoration: none; padding: 16px 40px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; transition: background 0.2s, transform 0.2s; }
.amazon-btn:hover { background: var(--amazon-dk); transform: translateY(-2px); }
.static-hero { background: var(--forest); padding: 130px 48px 60px; }
.static-hero h1 { font-family: 'Playfair Display', serif; font-size: 44px; font-weight: 700; color: var(--cream); margin-bottom: 8px; }
.static-body { max-width: 760px; margin: 0 auto; padding: 72px 48px 100px; }
.static-body h2 { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 600; color: var(--forest); margin: 52px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.static-body p, .static-body li { font-family: 'Noto Serif JP', serif; font-size: 14px; line-height: 2; color: var(--ink-soft); margin-bottom: 14px; }
.static-body ul { padding-left: 20px; margin-bottom: 18px; }
.site-footer { background: var(--ink); padding: 80px 48px 44px; }
.footer-top { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 64px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 40px; }
.footer-brand .logo { color: var(--cream); display: inline-flex; margin-bottom: 18px; }
.footer-brand p { font-size: 13px; color: rgba(255,255,255,0.32); line-height: 1.9; max-width: 300px; }
.footer-col h4 { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.25); margin-bottom: 22px; }
.footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,0.45); text-decoration: none; margin-bottom: 13px; transition: color 0.2s; }
.footer-col a:hover { color: var(--sage-light); }
.footer-bottom { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.footer-disclaimer { font-size: 11px; line-height: 1.8; color: rgba(255,255,255,0.2); max-width: 640px; }
.footer-copy { font-size: 11px; color: rgba(255,255,255,0.18); white-space: nowrap; }
@media (max-width: 960px) {
  .site-header { padding: 0 28px; }
  section { padding: 72px 28px; }
  .hero-content { grid-template-columns: 1fr; gap: 48px; padding: 0 28px; }
  .rank-grid { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; }
  .article-hero { padding: 120px 28px 60px; }
  .article-body-wrap { padding: 52px 28px 80px; }
  .site-footer { padding: 60px 28px 36px; }
  .breadcrumb { padding: 14px 28px; }
}
@media (max-width: 640px) {
  .site-header { padding: 0 20px; }
  .nav-links li:not(:last-child) { display: none; }
  section { padding: 60px 20px; }
  .hero-content { padding: 0 20px; }
  .hero-right { display: none; }
  .article-grid { grid-template-columns: 1fr; }
  .article-hero { padding: 110px 20px 52px; }
  .article-body-wrap { padding: 44px 20px 72px; }
  .site-footer { padding: 52px 20px 32px; }
  .breadcrumb { padding: 12px 20px; }
  .rating-box { padding: 36px 24px; }
  .rating-num { font-size: 64px; }
  .articles-header { flex-direction: column; align-items: flex-start; }
}
.rank-list { display: flex; flex-direction: column; gap: 2px; margin: 20px 0 36px; }
.rank-list-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; background: var(--white); border: 1px solid var(--border); transition: background 0.2s; }
.rank-list-item:hover { background: var(--parchment); }
.rank-list-num { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--border); min-width: 36px; line-height: 1.3; flex-shrink: 0; }
.rank-list-item:nth-child(1) .rank-list-num { color: #c8960a; }
.rank-list-item:nth-child(2) .rank-list-num { color: #909090; }
.rank-list-item:nth-child(3) .rank-list-num { color: #a0643c; }
.rank-list-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
a.rank-list-name { font-family: 'Noto Serif JP', serif; font-size: 15px; font-weight: 600; color: var(--forest); text-decoration: none; line-height: 1.5; transition: color 0.2s; }
a.rank-list-name:hover { color: var(--moss); text-decoration: underline; }
.rank-list-note { font-size: 12px; color: var(--muted); line-height: 1.7; }
@media (max-width: 640px) {
  .rank-list-item { padding: 12px 14px; gap: 12px; }
  .rank-list-num { font-size: 18px; min-width: 28px; }
  a.rank-list-name { font-size: 14px; }
  }

/* ═══════════════════════════════════════════════════════════════════════
   Phase 12-A Sprint 1 — Foundation Layer
   AI Turtle Concierge Design System
   Brand: Ancient Guide Concierge — premium / warm intelligence / quiet confidence
   Scope: Tokens only. No structural changes.
═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens ──────────────────────────────────────────────── */
:root {
  /* Brand palette — AI Concierge OS */
  --bg-primary:    #081411;
  --bg-secondary:  #10241d;
  --accent-gold:   #C9A96B;
  --accent-gold-dim: rgba(201,169,107,.55);
  --accent-cyan:   #7ED7C1;
  --accent-cyan-dim: rgba(126,215,193,.45);

  /* Glass surface tokens */
  --glass-bg:      rgba(255,255,255,.045);
  --glass-bg-hover:rgba(255,255,255,.075);
  --glass-border:  rgba(255,255,255,.09);
  --glass-border-gold: rgba(201,169,107,.22);
  --glass-blur:    12px;
  --glass-shadow:  0 8px 32px rgba(8,20,17,.38);
  --glass-shadow-hover: 0 16px 48px rgba(8,20,17,.52);

  /* Spacing scale (8-base) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 128px;

  /* Typography scale */
  --text-xs:    .70rem;
  --text-sm:    .82rem;
  --text-base:  .94rem;
  --text-md:    1.06rem;
  --text-lg:    1.22rem;
  --text-xl:    1.52rem;
  --text-2xl:   2.00rem;
  --text-3xl:   2.80rem;

  /* Letter spacing */
  --tracking-tight:  -.02em;
  --tracking-normal:  .01em;
  --tracking-wide:    .10em;
  --tracking-wider:   .18em;
  --tracking-widest:  .26em;

  /* Motion — soft only (no bounce / no flash) */
  --dur-fast:   160ms;
  --dur-base:   260ms;
  --dur-slow:   480ms;
  --dur-reveal: 680ms;
  --ease-soft:  cubic-bezier(.22,.68,0,1.0);
  --ease-reveal:cubic-bezier(.16,1,.3,1);

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-pill:9999px;

  /* Z-index */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-topbar:  300;
}

/* ── 2. Typography improvements ───────────────────────────────────── */

/* Serif heading — Playfair Display */
.t-heading {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: var(--tracking-tight);
}
.t-heading-italic {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-style: italic;
  line-height: 1.22;
}

/* Body copy — Noto Serif JP */
.t-body {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: var(--tracking-normal);
}

/* Caption / label */
.t-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.t-label-gold {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-gold);
}

/* Eyebrow pill — reusable across sections */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-gold);
  background: rgba(201,169,107,.08);
  border: 1px solid rgba(201,169,107,.22);
  border-radius: var(--radius-pill);
  padding: 5px 16px;
}
.eyebrow-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
  flex-shrink: 0;
  animation: eyebrow-pulse 2.4s ease-in-out infinite;
}
@keyframes eyebrow-pulse {
  0%,100% { opacity:.45; transform:scale(1); }
  50%      { opacity:1;   transform:scale(1.28); }
}

/* ── 3. Glass card component ──────────────────────────────────────── */

/*
  Usage:
  <div class="glass-card">...</div>
  <div class="glass-card glass-card--gold">...</div>   ← gold border accent
  <div class="glass-card glass-card--sm">...</div>     ← compact padding
*/
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  transition:
    background  var(--dur-base) var(--ease-soft),
    box-shadow  var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft),
    transform   var(--dur-base) var(--ease-soft);
  will-change: transform;
}
.glass-card:hover {
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow-hover);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-3px);
}
/* Gold accent variant */
.glass-card--gold {
  border-color: var(--glass-border-gold);
  background: rgba(201,169,107,.04);
}
.glass-card--gold:hover {
  border-color: rgba(201,169,107,.38);
  background: rgba(201,169,107,.07);
}
/* Cyan accent variant */
.glass-card--cyan {
  border-color: rgba(126,215,193,.22);
  background: rgba(126,215,193,.04);
}
.glass-card--cyan:hover {
  border-color: rgba(126,215,193,.38);
  background: rgba(126,215,193,.07);
}
/* Compact size modifier */
.glass-card--sm {
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius-md);
}
/* Large size modifier */
.glass-card--lg {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius-lg);
}
/* No hover effect (static display) */
.glass-card--static:hover {
  transform: none;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  border-color: var(--glass-border);
}

/* ── 4. CTA Button redesign ──────────────────────────────────────── */

/*
  Tier system:
  .cta-primary   — gold gradient, full weight action
  .cta-secondary — outline ghost, soft action
  .cta-ghost     — text only, minimal

  Usage (replaces old .btn-primary / .btn-outline):
  <a href="..." class="cta-primary">3分診断をはじめる <span class="cta-arrow">→</span></a>
  <a href="..." class="cta-secondary">人気の亀を見る</a>
*/

/* Base CTA reset */
.cta-primary,
.cta-secondary,
.cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  min-height: 50px;
  border-radius: var(--radius-pill);
  transition:
    background    var(--dur-base) var(--ease-soft),
    box-shadow    var(--dur-base) var(--ease-soft),
    transform     var(--dur-fast) var(--ease-soft),
    border-color  var(--dur-base) var(--ease-soft),
    color         var(--dur-base) var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}
.cta-primary:focus-visible,
.cta-secondary:focus-visible,
.cta-ghost:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}

/* Primary — gold gradient */
.cta-primary {
  background: linear-gradient(112deg, #C9A96B 0%, #a07830 100%);
  color: #06110e;
  font-size: var(--text-md);
  padding: 15px 42px;
  box-shadow:
    0 5px 24px rgba(201,169,107,.32),
    0 0 0 1px rgba(201,169,107,.15),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.cta-primary:hover {
  background: linear-gradient(112deg, #d8bc84 0%, #b88c42 100%);
  transform: translateY(-2px);
  box-shadow:
    0 12px 36px rgba(201,169,107,.46),
    0 0 0 1px rgba(201,169,107,.24),
    inset 0 1px 0 rgba(255,255,255,.20);
}
.cta-primary:active { transform: translateY(0); }

/* Arrow child element */
.cta-arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-soft);
  font-style: normal;
}
.cta-primary:hover  .cta-arrow { transform: translateX(4px); }
.cta-secondary:hover .cta-arrow { transform: translateX(3px); }

/* Secondary — outline ghost */
.cta-secondary {
  background: transparent;
  color: rgba(201,169,107,.78);
  font-size: var(--text-sm);
  padding: 13px 28px;
  border: 1.5px solid rgba(201,169,107,.28);
  box-shadow: none;
}
.cta-secondary:hover {
  color: var(--accent-gold);
  border-color: rgba(201,169,107,.55);
  background: rgba(201,169,107,.06);
  transform: translateY(-1px);
}

/* Ghost — text only */
.cta-ghost {
  background: transparent;
  color: rgba(255,255,255,.45);
  font-size: var(--text-sm);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  min-height: 40px;
}
.cta-ghost:hover {
  color: var(--accent-gold);
  background: rgba(201,169,107,.06);
}

/* Size modifiers */
.cta-primary--sm  { font-size: var(--text-sm);  padding: 11px 28px; min-height: 42px; }
.cta-primary--lg  { font-size: var(--text-lg);  padding: 18px 56px; min-height: 58px; }
.cta-secondary--sm { font-size: var(--text-xs); padding: 9px 20px;  min-height: 38px; }

/* Disabled state */
.cta-primary[disabled],
.cta-secondary[disabled],
.cta-ghost[disabled] {
  opacity: .35;
  cursor: default;
  transform: none;
  pointer-events: none;
}

/* ── 5. Spacing utility classes ───────────────────────────────────── */

/* Margin top */
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }

/* Margin bottom */
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }

/* Gap utilities (for flex/grid parents) */
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }

/* Section vertical rhythm */
.section-rhythm { padding: var(--sp-7) 0; }
.section-rhythm--sm { padding: var(--sp-5) 0; }
.section-rhythm--lg { padding: var(--sp-8) 0; }

/* ── 6. Reveal animation (scroll-triggered) ───────────────────────── */

/* Uses IntersectionObserver — add class "revealed" when visible */
.reveal-soft {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  var(--dur-reveal) var(--ease-reveal),
    transform var(--dur-reveal) var(--ease-reveal);
}
.reveal-soft.revealed {
  opacity: 1;
  transform: none;
}
.reveal-soft--delay-1 { transition-delay: 80ms; }
.reveal-soft--delay-2 { transition-delay: 160ms; }
.reveal-soft--delay-3 { transition-delay: 240ms; }
.reveal-soft--delay-4 { transition-delay: 320ms; }

/* Fade-only variant (no vertical movement) */
.reveal-fade {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-reveal);
}
.reveal-fade.revealed { opacity: 1; }

/* ── Mobile overrides ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .cta-primary     { font-size: var(--text-base); padding: 14px 30px; }
  .cta-primary--lg { font-size: var(--text-md);   padding: 15px 36px; }
  .glass-card      { padding: var(--sp-4) var(--sp-3); border-radius: var(--radius-md); }
  .glass-card--lg  { padding: var(--sp-5) var(--sp-4); }
}
@media (max-width: 360px) {
  .cta-primary     { font-size: var(--text-sm);   padding: 12px 22px; min-height: 46px; }
  .glass-card      { padding: var(--sp-3) var(--sp-2); }
}

/* ═══════════════════════════════════════════════════════════════════════
   End of Phase 12-A Sprint 1
═══════════════════════════════════════════════════════════════════════ */