/* ============ ORIPA ENGINE LP ============ */
:root {
  --bg: #08060a;
  --bg-2: #0c0a10;
  --bg-3: #120f14;
  --ink: #efe8dc;
  --muted: #a89a83;
  --gold-1: #fff2c2;
  --gold-2: #f5d484;
  --gold-3: #d4a24a;
  --gold-4: #8a5a17;
  --gold-5: #3d2709;
  --ember-1: #ff8a3a;
  --ember-2: #ff4e14;
  --ember-3: #8a1e05;
  --gold-grad: linear-gradient(180deg, #fff2c2 0%, #f5d484 28%, #d4a24a 62%, #8a5a17 100%);
  --gold-grad-flat: linear-gradient(180deg, #ffe089 0%, #c78a2f 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }

a { color: inherit; text-decoration: none; }

.gold {
  background: linear-gradient(180deg, #fff2c2 0%, #f2cd76 40%, #c78a2f 80%, #8a5a17 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============ HEADER ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(8, 6, 10, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 162, 74, 0.2);
  height: 68px;
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}
.brand { display: flex; align-items: center; height: 100%; overflow: visible; }
.brand-logo {
  height: 120px;
  width: auto;
  display: block;
  margin: -26px 0;
  filter: drop-shadow(0 4px 14px rgba(212, 162, 74, 0.4));
}
.nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
}
.nav a {
  color: var(--ink);
  opacity: 0.8;
  transition: color 0.2s, opacity 0.2s;
  position: relative;
}
.nav a:hover {
  opacity: 1;
  color: var(--gold-2);
}
.header-cta {
  background: linear-gradient(180deg, #ff6a3a 0%, #e23c1a 55%, #9a1e08 100%);
  color: #fff6e8 !important;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow:
    0 0 0 1px rgba(255, 200, 150, 0.35) inset,
    0 6px 18px rgba(230, 60, 20, 0.55),
    0 0 24px rgba(255, 140, 60, 0.35);
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.header-cta::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%);
  pointer-events: none;
}
.header-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 210, 170, 0.5) inset,
    0 10px 26px rgba(230, 60, 20, 0.75),
    0 0 36px rgba(255, 140, 60, 0.55);
}
.cta-icon { font-size: 14px; }

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold-2);
  margin: 0 auto;
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 120px 0 60px;
  background:
    radial-gradient(ellipse at 60% 40%, #1a0a05 0%, #0c0507 40%, #050305 100%),
    #050305;
  overflow: hidden;
}
.hero::before {
  /* left-side glow to avoid cut-off look */
  content: "";
  position: absolute;
  top: 40%; left: 0;
  width: 600px; height: 1000px;
  transform: translate(-20%, -50%);
  background: radial-gradient(ellipse at 80% 50%, rgba(255, 140, 50, 0.25) 0%, rgba(200, 60, 20, 0.12) 30%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
.hero::after {
  /* extra sparks scattered across entire hero */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 8% 28%, rgba(255, 220, 130, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 14% 52%, rgba(255, 240, 160, 0.85), transparent 60%),
    radial-gradient(2.5px 2.5px at 6% 72%, rgba(255, 200, 100, 0.9), transparent 60%),
    radial-gradient(2px 2px at 18% 38%, rgba(255, 255, 220, 0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 78%, rgba(255, 220, 130, 0.85), transparent 60%),
    radial-gradient(2px 2px at 4% 90%, rgba(255, 240, 170, 0.8), transparent 60%),
    radial-gradient(2.5px 2.5px at 12% 18%, rgba(255, 200, 100, 0.9), transparent 60%),
    radial-gradient(1px 20px at 10% 40%, rgba(255, 230, 150, 0.6), transparent 70%),
    radial-gradient(20px 1px at 24% 60%, rgba(255, 210, 120, 0.55), transparent 70%),
    radial-gradient(1px 18px at 6% 70%, rgba(255, 220, 130, 0.55), transparent 70%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 3px rgba(255, 180, 60, 0.5));
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-explosion {
  position: absolute;
  top: 40%; left: 60%;
  width: 1200px; height: 1200px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 220, 0.9) 0%,
      rgba(255, 220, 120, 0.8) 4%,
      rgba(255, 160, 50, 0.7) 10%,
      rgba(255, 90, 20, 0.55) 20%,
      rgba(200, 40, 10, 0.35) 35%,
      rgba(80, 15, 5, 0.2) 55%,
      transparent 75%);
  filter: blur(1px);
}
.hero-explosion::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 240, 0.95) 0%, rgba(255, 220, 140, 0.7) 12%, transparent 40%);
  filter: blur(4px);
}
.hero-rays {
  position: absolute;
  top: 40%; left: 50%;
  width: 1800px; height: 1800px;
  transform: translate(-50%, -50%);
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, transparent 5deg,
      transparent 12deg, rgba(255, 220, 130, 0.45) 13.5deg, transparent 16deg,
      transparent 24deg, rgba(255, 240, 160, 0.5) 26deg, rgba(255, 180, 80, 0.25) 28deg, transparent 31deg,
      transparent 40deg, rgba(255, 200, 100, 0.4) 42deg, transparent 44deg,
      transparent 54deg, rgba(255, 230, 150, 0.55) 56deg, rgba(255, 170, 70, 0.3) 58deg, transparent 62deg,
      transparent 72deg, rgba(255, 210, 120, 0.4) 74deg, transparent 76deg,
      transparent 86deg, rgba(255, 240, 170, 0.5) 88deg, transparent 92deg,
      transparent 104deg, rgba(255, 200, 100, 0.45) 106deg, rgba(255, 160, 60, 0.25) 108deg, transparent 111deg,
      transparent 122deg, rgba(255, 230, 140, 0.5) 124deg, transparent 127deg,
      transparent 138deg, rgba(255, 210, 120, 0.4) 140deg, transparent 143deg,
      transparent 156deg, rgba(255, 240, 170, 0.55) 158deg, rgba(255, 180, 80, 0.3) 160deg, transparent 164deg,
      transparent 176deg, rgba(255, 200, 100, 0.4) 178deg, transparent 181deg,
      transparent 192deg, rgba(255, 230, 140, 0.5) 194deg, transparent 197deg,
      transparent 208deg, rgba(255, 210, 120, 0.45) 210deg, rgba(255, 160, 60, 0.25) 212deg, transparent 215deg,
      transparent 226deg, rgba(255, 240, 170, 0.5) 228deg, transparent 231deg,
      transparent 242deg, rgba(255, 200, 100, 0.4) 244deg, transparent 247deg,
      transparent 258deg, rgba(255, 230, 150, 0.55) 260deg, rgba(255, 170, 70, 0.3) 262deg, transparent 266deg,
      transparent 276deg, rgba(255, 210, 120, 0.4) 278deg, transparent 281deg,
      transparent 292deg, rgba(255, 240, 170, 0.5) 294deg, transparent 297deg,
      transparent 308deg, rgba(255, 200, 100, 0.45) 310deg, rgba(255, 160, 60, 0.25) 312deg, transparent 315deg,
      transparent 326deg, rgba(255, 230, 140, 0.5) 328deg, transparent 331deg,
      transparent 342deg, rgba(255, 210, 120, 0.4) 344deg, transparent 347deg,
      transparent 360deg);
  mix-blend-mode: screen;
}
@keyframes slow-rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }

.hero-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 230, 150, 0.95), transparent 60%),
    radial-gradient(2px 2px at 22% 48%, rgba(255, 200, 100, 0.9), transparent 60%),
    radial-gradient(1px 1px at 38% 18%, rgba(255, 240, 170, 0.8), transparent 60%),
    radial-gradient(2.5px 2.5px at 48% 62%, rgba(255, 180, 80, 0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 30%, rgba(255, 220, 130, 0.9), transparent 60%),
    radial-gradient(1px 1px at 62% 74%, rgba(255, 255, 220, 0.85), transparent 60%),
    radial-gradient(2px 2px at 72% 40%, rgba(255, 200, 100, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 68%, rgba(255, 230, 150, 0.9), transparent 60%),
    radial-gradient(1px 1px at 84% 20%, rgba(255, 240, 170, 0.85), transparent 60%),
    radial-gradient(2.5px 2.5px at 88% 54%, rgba(255, 180, 70, 0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 80%, rgba(255, 220, 130, 0.9), transparent 60%),
    radial-gradient(1px 1px at 96% 34%, rgba(255, 255, 220, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 86%, rgba(255, 210, 110, 0.85), transparent 60%),
    radial-gradient(2px 2px at 44% 92%, rgba(255, 240, 170, 0.9), transparent 60%),
    radial-gradient(1px 1px at 68% 12%, rgba(255, 220, 130, 0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 18% 70%, rgba(255, 200, 100, 0.9), transparent 60%);
  background-size: 100% 100%;
  filter: drop-shadow(0 0 3px rgba(255, 180, 60, 0.6));
}
.hero-particles::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(4px 1px at 20% 40%, rgba(255, 240, 160, 0.7), transparent),
    radial-gradient(1px 4px at 40% 60%, rgba(255, 200, 100, 0.6), transparent),
    radial-gradient(5px 1px at 60% 35%, rgba(255, 220, 130, 0.6), transparent),
    radial-gradient(1px 5px at 75% 55%, rgba(255, 180, 80, 0.5), transparent),
    radial-gradient(4px 1px at 85% 75%, rgba(255, 240, 160, 0.6), transparent);
  mix-blend-mode: screen;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: center;
}

.hero-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  font-size: clamp(32px, 5.4vw, 72px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.6));
}
.t-line { display: block; }
.t-line:not(.t-accent) {
  background: linear-gradient(180deg, #ffffff 0%, #d9d2c2 60%, #8a7f6a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.t-accent .brush {
  display: inline-block;
  font-size: 1.35em;
  padding: 0 0.08em;
  background: linear-gradient(180deg, #fff2c2 0%, #f5d484 28%, #d4a24a 62%, #8a5a17 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  position: relative;
}
.t-accent .brush::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.06em;
  height: 0.12em;
  background: linear-gradient(90deg, transparent, #d4a24a 20%, #fff2c2 50%, #d4a24a 80%, transparent);
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.8;
}

.hero-sub {
  background: linear-gradient(90deg, rgba(255, 220, 140, 0.08), rgba(255, 220, 140, 0.02));
  border-top: 1px solid rgba(245, 212, 132, 0.35);
  border-bottom: 1px solid rgba(245, 212, 132, 0.35);
  padding: 16px 24px;
  margin-bottom: 36px;
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 17px);
  text-align: center;
  letter-spacing: 0.03em;
}
.sub-line { display: block; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 720px;
}
.stat {
  position: relative;
  text-align: center;
  padding: 0 28px;
}
.stat-label {
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.stat-num {
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 20px rgba(212, 162, 74, 0.4);
}
.stat-num .unit { font-size: 0.5em; margin-left: 2px; }
.stat-caption {
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}
.stat-laurel {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 28px; height: 64px;
  pointer-events: none;
}
.stat-laurel.left { left: 0; }
.stat-laurel.right { right: 0; transform: translateY(-50%) scaleX(-1); }
.stat-laurel::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 64'><path d='M14 2 Q8 10 8 20 Q8 30 12 38 Q14 44 14 62' fill='none' stroke='%23d4a24a' stroke-width='1.5'/><path d='M10 10 Q6 14 5 18 Q8 18 11 15 Z M9 18 Q5 22 4 26 Q7 26 10 23 Z M8 26 Q4 30 3 34 Q6 34 9 31 Z M8 34 Q4 38 3 42 Q6 42 9 39 Z M9 42 Q5 46 5 50 Q8 50 11 47 Z M10 50 Q7 54 7 58 Q10 58 12 55 Z' fill='%23d4a24a' opacity='0.9'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

.hero-visual {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.hero-visual::after {
  /* ember sparks - radiating thin streaks */
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 900px;
  background:
    radial-gradient(1px 60px at 50% 8%, rgba(255, 240, 170, 0.85), transparent 70%),
    radial-gradient(60px 1px at 8% 50%, rgba(255, 220, 130, 0.85), transparent 70%),
    radial-gradient(60px 1px at 92% 50%, rgba(255, 220, 130, 0.85), transparent 70%),
    radial-gradient(1px 60px at 50% 92%, rgba(255, 200, 100, 0.75), transparent 70%),
    radial-gradient(1.5px 45px at 22% 18%, rgba(255, 230, 150, 0.8), transparent 70%),
    radial-gradient(1.5px 45px at 78% 18%, rgba(255, 230, 150, 0.8), transparent 70%),
    radial-gradient(1.5px 45px at 22% 82%, rgba(255, 210, 120, 0.75), transparent 70%),
    radial-gradient(1.5px 45px at 78% 82%, rgba(255, 210, 120, 0.75), transparent 70%),
    radial-gradient(45px 1.5px at 18% 22%, rgba(255, 220, 130, 0.75), transparent 70%),
    radial-gradient(45px 1.5px at 82% 22%, rgba(255, 220, 130, 0.75), transparent 70%),
    radial-gradient(45px 1.5px at 18% 78%, rgba(255, 200, 100, 0.7), transparent 70%),
    radial-gradient(45px 1.5px at 82% 78%, rgba(255, 200, 100, 0.7), transparent 70%),
    radial-gradient(2px 2px at 35% 20%, rgba(255, 255, 220, 1), transparent 60%),
    radial-gradient(2px 2px at 65% 22%, rgba(255, 240, 170, 1), transparent 60%),
    radial-gradient(2px 2px at 20% 45%, rgba(255, 230, 150, 1), transparent 60%),
    radial-gradient(2.5px 2.5px at 80% 42%, rgba(255, 220, 130, 1), transparent 60%),
    radial-gradient(2px 2px at 30% 72%, rgba(255, 240, 170, 1), transparent 60%),
    radial-gradient(2.5px 2.5px at 70% 78%, rgba(255, 200, 100, 1), transparent 60%),
    radial-gradient(1.5px 1.5px at 15% 60%, rgba(255, 255, 220, 0.95), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(255, 230, 150, 0.95), transparent 60%);
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 4px rgba(255, 180, 60, 0.8));
  mix-blend-mode: screen;
}
.hero-emblem {
  position: relative;
  width: 100%; max-width: 420px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.hero-emblem::before {
  /* treasure box - dark 3D container */
  content: "";
  position: absolute;
  top: 12%; left: 10%; right: 10%; bottom: 12%;
  background:
    linear-gradient(145deg, #1a110a 0%, #0a0604 50%, #050302 100%);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(212, 162, 74, 0.4) inset,
    0 0 0 2px rgba(0, 0, 0, 0.6),
    0 0 0 3px rgba(212, 162, 74, 0.25),
    0 30px 80px rgba(0, 0, 0, 0.9),
    0 0 120px rgba(255, 140, 40, 0.35);
  z-index: 0;
  transform: perspective(1200px) rotateX(6deg) rotateY(-8deg);
}
.hero-emblem::after {
  /* highlight on top edge of box */
  content: "";
  position: absolute;
  top: 12%; left: 10%; right: 10%;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(212, 162, 74, 0.7), rgba(255, 230, 150, 0.9), rgba(212, 162, 74, 0.7), transparent);
  border-radius: 2px;
  z-index: 1;
  transform: perspective(1200px) rotateX(6deg) rotateY(-8deg);
  filter: blur(0.5px);
}
.emblem-logo {
  position: relative; z-index: 2;
  width: 78%;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(255, 180, 60, 0.5));
  transform: perspective(1200px) rotateX(4deg) rotateY(-6deg);
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-cards { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fcard {
  position: absolute;
  width: 180px; height: 252px;
  border-radius: 10px;
  padding: 4px;
  background: linear-gradient(135deg, #fff2c2 0%, #f5d484 25%, #8a5a17 50%, #d4a24a 75%, #fff2c2 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7), 0 0 26px rgba(212, 162, 74, 0.45);
}
.fcard-inner {
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, rgba(255, 220, 140, 0.18) 0%, transparent 40%),
    linear-gradient(135deg, #2a1508, #4a2d10 50%, #1a0d05);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.fcard-inner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(245, 212, 132, 0.06) 10px 12px);
  pointer-events: none;
  z-index: 1;
}
.card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  z-index: 2;
  display: block;
}
.fcard-inner:has(.card-img:not([style*="display: none"])) .card-label { display: none; }
.card-label {
  position: relative;
  font-size: 11px;
  color: var(--gold-2);
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.06em;
}
.fcard.c1 { top: -8%; left: -10%; transform: rotate(-14deg); animation-delay: 0s; }
.fcard.c2 { top: -12%; right: -2%; transform: rotate(12deg); animation-delay: -1.5s; }
.fcard.c3 { bottom: 4%; left: -4%; transform: rotate(-8deg); animation-delay: -3s; }
.fcard.c4 { bottom: -4%; right: -10%; transform: rotate(16deg); animation-delay: -4.5s; }
@keyframes card-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-8px) rotate(var(--r, 0deg)); }
}
.fcard.c1 { --r: -14deg; }
.fcard.c2 { --r: 12deg; }
.fcard.c3 { --r: -8deg; }
.fcard.c4 { --r: 16deg; }

.hero-footnote {
  position: absolute;
  bottom: 20px; left: 24px;
  font-size: 10px;
  color: rgba(168, 154, 131, 0.4);
  letter-spacing: 0.05em;
  z-index: 3;
}

/* ============ SECTION COMMON ============ */
section { position: relative; }
.section-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.3;
  text-align: left;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.section-title.center { text-align: center; }
.section-title.sm { font-size: clamp(22px, 2.6vw, 30px); }
.section-title-wrap { text-align: center; margin-bottom: 60px; }
.section-title-wrap .section-title { text-align: center; }
.section-title-wrap::after {
  content: "";
  display: block;
  width: 64px; height: 2px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-3), transparent);
}
.section-lead {
  color: var(--ink);
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.9;
  opacity: 0.85;
  margin-top: 20px;
}

/* ============ ABOUT / FEATURES ============ */
.about {
  padding: 100px 0 120px;
  background: #0a0709;
}
.about::before { display: none; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.feat-card {
  background: linear-gradient(180deg, #140f08 0%, #0a0706 100%);
  border: 1px solid rgba(212, 162, 74, 0.25);
  border-radius: 10px;
  padding: 28px 18px;
  text-align: center;
  position: relative;
  transition: transform 0.3s, border-color 0.3s;
  overflow: hidden;
}
.feat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 212, 132, 0.6), transparent);
}
.feat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 212, 132, 0.5);
}
.feat-icon {
  width: 84px; height: 84px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 162, 74, 0.25), transparent 70%);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-2);
  filter: drop-shadow(0 4px 12px rgba(212, 162, 74, 0.35));
}
.feat-icon svg { width: 56px; height: 56px; }
.feat-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-2);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.feat-desc {
  font-size: 11.5px;
  color: var(--ink);
  opacity: 0.75;
  line-height: 1.7;
}

/* ============ HOOK ============ */
.hook {
  padding: 100px 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(140, 60, 15, 0.15), transparent 60%),
    #0a0709;
  overflow: hidden;
}
.hook::before, .hook::after {
  content: "";
  position: absolute;
  width: 200px; height: 280px;
  background:
    linear-gradient(135deg, rgba(212, 162, 74, 0.15), transparent 60%),
    linear-gradient(45deg, #1a0d05, #2a1508);
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0.7;
}
.hook::before {
  top: 50px; left: -60px;
  transform: rotate(-18deg);
}
.hook::after {
  bottom: 60px; left: 6%;
  transform: rotate(12deg);
  width: 160px; height: 220px;
}
.hook-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.hook-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 900;  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.5;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}
.hook-desc {
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 2;
  color: var(--ink);
  opacity: 0.85;
  margin-bottom: 28px;
}
.hook-pill {
  display: inline-block;
  background: linear-gradient(90deg, rgba(212, 162, 74, 0.12), rgba(212, 162, 74, 0.04));
  border: 1px solid rgba(212, 162, 74, 0.5);
  padding: 10px 22px;
  border-radius: 999px;
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ============ PHONE MOCK (reference-faithful) ============ */
.hook-phone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
}
.phone {
  width: 300px;
  height: 600px;
  background: #0a0709;
  border-radius: 44px;
  padding: 10px;
  position: relative;
  box-shadow:
    0 0 0 2px #2a1a08,
    0 0 0 3px #d4a24a,
    0 0 0 5px #2a1a08,
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 80px rgba(255, 140, 40, 0.35);
}
.phone-notch {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 24px;
  background: #000;
  border-radius: 999px;
  z-index: 5;
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, #ffbf5a 0%, #ff7a2a 12%, #d84818 28%, #6a1a08 55%, #1a0806 85%, #050303 100%);
  position: relative;
}
/* burst rays */
.phone-ray {
  position: absolute;
  top: 50%; left: 50%;
  width: 140%; height: 140%;
  transform: translate(-50%, -58%);
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, rgba(255, 240, 170, 0.55) 3deg, rgba(255, 220, 130, 0.25) 8deg, transparent 14deg,
      transparent 24deg, rgba(255, 230, 150, 0.45) 28deg, transparent 36deg,
      transparent 48deg, rgba(255, 240, 170, 0.5) 54deg, transparent 62deg,
      transparent 76deg, rgba(255, 220, 130, 0.4) 82deg, transparent 90deg,
      transparent 110deg, rgba(255, 240, 160, 0.5) 116deg, transparent 124deg,
      transparent 144deg, rgba(255, 220, 130, 0.4) 150deg, transparent 158deg,
      transparent 180deg, rgba(255, 240, 170, 0.55) 186deg, rgba(255, 220, 130, 0.25) 192deg, transparent 198deg,
      transparent 216deg, rgba(255, 230, 150, 0.45) 222deg, transparent 230deg,
      transparent 248deg, rgba(255, 240, 170, 0.5) 254deg, transparent 262deg,
      transparent 280deg, rgba(255, 220, 130, 0.4) 286deg, transparent 294deg,
      transparent 310deg, rgba(255, 240, 160, 0.5) 316deg, transparent 324deg,
      transparent 340deg, rgba(255, 220, 130, 0.4) 346deg, transparent 354deg);
  filter: blur(0.5px);
}
/* inner bright core */
.phone-screen::before {
  content: "";
  position: absolute;
  top: 45%; left: 50%;
  transform: translate(-50%, -50%);
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 220, 0.6) 0%, rgba(255, 200, 100, 0.3) 30%, transparent 70%);
  filter: blur(4px);
  pointer-events: none;
  z-index: 1;
}

.phone-congrats {
  position: absolute;
  top: 54px; left: 0; right: 0;
  text-align: center;
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-style: italic;
  font-size: 26px;
  background: linear-gradient(180deg, #ffffff 0%, #fff2c2 30%, #f5d484 55%, #c78a2f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 8px rgba(255, 200, 100, 0.8));
  letter-spacing: 0.04em;
  z-index: 3;
}

.phone-card {
  position: absolute;
  top: 110px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 176px; height: 246px;
  border-radius: 10px;
  padding: 4px;
  background: linear-gradient(135deg, #fff2c2 0%, #f5d484 20%, #d4a24a 40%, #8a5a17 60%, #d4a24a 80%, #fff2c2 100%);
  background-size: 250% 250%;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(255, 200, 100, 0.55),
    0 0 80px rgba(255, 140, 40, 0.35);
  z-index: 3;
}

.phone-card-inner {
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, rgba(255, 230, 150, 0.25) 0%, transparent 40%),
    repeating-linear-gradient(45deg, #1a0d05 0 7px, #2a1508 7px 14px);
  border-radius: 6px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.phone-card-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 220, 0.15) 48%, transparent 56%);
  pointer-events: none;
}
.phone-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  z-index: 1;
  display: block;
}
.phone-card-placeholder {
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 1;
}
.phone-card-grade {
  position: absolute;
  top: 10px; left: 10px;
  background: linear-gradient(180deg, #ff5a2a, #c4401a);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.phone-big {
  position: absolute;
  top: 372px; left: 0; right: 0;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  font-size: 36px;
  color: #fff;
  letter-spacing: 0.04em;
  z-index: 3;
  text-shadow:
    0 0 8px #ff8a3a,
    0 0 16px #ff4e14,
    3px 3px 0 #5a1a08,
    -3px -3px 0 #5a1a08,
    3px -3px 0 #5a1a08,
    -3px 3px 0 #5a1a08,
    0 4px 10px rgba(0, 0, 0, 0.6);
}
.phone-big::before { display: none; }

.phone-sim-btn {
  position: absolute;
  bottom: 46px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 212, 132, 0.6);
  color: var(--gold-2);
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  z-index: 3;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.phone-sparkles {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    radial-gradient(3px 3px at 18% 24%, #fff, transparent 60%),
    radial-gradient(2px 2px at 82% 18%, #ffe089, transparent 60%),
    radial-gradient(2px 2px at 66% 36%, #fff, transparent 60%),
    radial-gradient(3px 3px at 28% 44%, #ffe089, transparent 60%),
    radial-gradient(2px 2px at 88% 50%, #fff, transparent 60%),
    radial-gradient(2px 2px at 14% 62%, #ffe089, transparent 60%),
    radial-gradient(3px 3px at 74% 66%, #fff, transparent 60%),
    radial-gradient(2px 2px at 22% 80%, #ffe089, transparent 60%),
    radial-gradient(2px 2px at 58% 86%, #fff, transparent 60%),
    radial-gradient(2px 2px at 86% 82%, #ffe089, transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 14%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 32%, #fff, transparent 60%);
}
.phone-caption {
  color: var(--muted);
  font-size: 10px;
  opacity: 0.6;
}

/* ============ REASONS ============ */
.reasons {
  padding: 100px 0 120px;
  background: #0a0709;
}
.reasons::before {
  display: none;
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-3), transparent);
  opacity: 0.5;
}
.reason-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 60px;
}
.reason-card {
  background: linear-gradient(180deg, #140f08 0%, #0a0706 100%);
  border: 1px solid rgba(212, 162, 74, 0.3);
  border-radius: 12px;
  padding: 40px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.reason-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 212, 132, 0.8), transparent);
}
.reason-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 212, 132, 0.6);
  box-shadow: 0 10px 40px rgba(212, 162, 74, 0.2);
}
.reason-icon {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-2);
  filter: drop-shadow(0 4px 12px rgba(212, 162, 74, 0.4));
}
.reason-icon svg { width: 56px; height: 56px; }
.reason-title {
  font-family: "Noto Serif JP", serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--gold-2);
  margin-bottom: 14px;
  letter-spacing: 0.03em;
}
.reason-desc {
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink);
  opacity: 0.75;
}

/* ============ RESULTS + VOICE ============ */
.results {
  padding: 100px 0 120px;
  background: #0a0709;
}
.results::before {
  display: none;
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-3), transparent);
  opacity: 0.5;
}
.results-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 20px;
}
.results-main .section-title { margin-bottom: 32px; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}
.kpi {
  background: linear-gradient(180deg, #140f08 0%, #0a0706 100%);
  border: 1px solid rgba(212, 162, 74, 0.3);
  border-radius: 12px;
  padding: 32px 18px 28px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 300px;
}
.kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 212, 132, 0.8), transparent);
}
.kpi-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--gold-2);
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  color: var(--gold-2);
}
.kpi-icon svg { width: 26px; height: 26px; display: block; }
.kpi-badge {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.kpi-number {
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  font-size: clamp(42px, 4.4vw, 58px);
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: auto;
}
.kpi-unit { font-size: 0.45em; margin-left: 4px; }
.kpi-delta {
  margin-top: 8px;
  font-size: 15px;
  color: #ff6b3d;
  font-weight: 900;
  letter-spacing: 0.05em;
}
.kpi-gauge-wrap {
  position: relative;
  width: 150px; height: 150px;
  margin: auto auto 0;
}
.kpi-gauge { width: 100%; height: 100%; }
.kpi-gauge-fg {
  transition: stroke-dashoffset 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kpi-gauge-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  font-size: 46px;
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kpi-gauge-num .kpi-unit { font-size: 0.45em; margin-left: 2px; }

.voice {
  background: linear-gradient(180deg, #140f08 0%, #0a0706 100%);
  border: 1px solid rgba(212, 162, 74, 0.3);
  border-radius: 12px;
  padding: 24px;
  position: relative;
}
.voice::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 212, 132, 0.8), transparent);
}
.voice-title {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  color: var(--gold-2);
  margin-bottom: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.voice-list { display: flex; flex-direction: column; gap: 14px; }
.voice-card {
  display: flex;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(212, 162, 74, 0.2);
}
.voice-card:last-child { border-bottom: none; padding-bottom: 0; }
.voice-avatar {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5d484, #8a5a17);
  color: #1a0d05;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 14px;
}
.voice-text {
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink);
  opacity: 0.85;
  margin-bottom: 4px;
}
.voice-author {
  font-size: 10px;
  color: var(--muted);
}

/* ============ FLOW ============ */
.flow {
  padding: 100px 0 120px;
  background: #0a0709;
}
.flow::before {
  display: none;
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-3), transparent);
  opacity: 0.5;
}
.flow-steps {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  margin-top: 50px;
}
.flow-step {
  flex: 1;
  background: linear-gradient(180deg, #140f08 0%, #0a0706 100%);
  border: 1px solid rgba(212, 162, 74, 0.3);
  border-radius: 10px;
  padding: 20px 12px;
  text-align: center;
  position: relative;
  min-width: 0;
}
.flow-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 212, 132, 0.7), transparent);
}
.flow-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f5d484, #c78a2f);
  color: #1a0d05;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}
.flow-icon {
  width: 84px; height: 84px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 162, 74, 0.2), transparent 70%);
  filter: drop-shadow(0 4px 10px rgba(212, 162, 74, 0.3));
}
.flow-icon svg { width: 58px; height: 58px; }
.flow-desc {
  font-size: 11px;
  color: var(--ink);
  opacity: 0.8;
  line-height: 1.6;
}
.flow-arrow {
  color: var(--gold-3);
  display: flex;
  align-items: center;
  font-size: 14px;
  flex: 0 0 auto;
}

/* ============ CTA ============ */
.cta {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, #2a1508 0%, #0a0709 70%);
}
.cta-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 140, 40, 0.3), transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(255, 100, 30, 0.2), transparent 60%);
  pointer-events: none;
}
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}
.cta-headline {
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.5;
  margin-bottom: 0;
  letter-spacing: 0.02em;
}
.cta-logo {
  display: none;
  filter: drop-shadow(0 8px 24px rgba(212, 162, 74, 0.5));
}
.cta-right {
  background: linear-gradient(180deg, rgba(20, 15, 8, 0.95) 0%, rgba(10, 7, 6, 0.95) 100%);
  border: 1px solid rgba(212, 162, 74, 0.4);
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
  position: relative;
}
.cta-right::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}
.cta-eyebrow {
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}
.cta-title {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 24px;
}
.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(180deg, #ff7a3a 0%, #e23c1a 55%, #8a1a08 100%);
  color: #fff6e8;
  font-weight: 900;
  font-size: 22px;
  padding: 22px 30px;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(255, 210, 170, 0.45) inset,
    0 0 0 3px rgba(0, 0, 0, 0.4),
    0 10px 30px rgba(230, 60, 20, 0.6),
    0 0 50px rgba(255, 140, 60, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.cta-btn::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 45%, transparent 55%);
  pointer-events: none;
}
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 220, 180, 0.6) inset,
    0 0 0 3px rgba(0, 0, 0, 0.4),
    0 14px 44px rgba(230, 60, 20, 0.8),
    0 0 70px rgba(255, 140, 60, 0.6);
}
.cta-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: inherit;
}
.cta-btn-icon svg { width: 22px; height: 22px; display: block; }
.cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
}
.cta-icon svg { width: 16px; height: 16px; display: block; }
.cta-badges {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.cta-badges > span {
  font-size: 11px;
  color: var(--ink);
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============ FOOTER ============ */
.site-footer {
  background: #050305;
  padding: 60px 0 20px;
  border-top: 1px solid rgba(212, 162, 74, 0.2);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(212, 162, 74, 0.15);
}
.footer-logo {
  height: 120px;
  width: auto;
  margin-bottom: 18px;
  display: block;
}
.footer-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}
.footer-label {
  font-size: 11px;
  color: var(--gold-2);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  font-weight: 700;
}
.footer-name {
  font-size: 15px;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 10px;
}
.footer-addr {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-nav a {
  font-size: 12px;
  color: var(--ink);
  opacity: 0.7;
  transition: color 0.2s, opacity 0.2s;
}
.footer-nav a:hover { opacity: 1; color: var(--gold-2); }
.footer-copy {
  text-align: center;
  padding-top: 24px;
  font-size: 10px;
  color: var(--muted);
  opacity: 0.6;
  letter-spacing: 0.05em;
}

/* ============ SCROLL REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .nav { display: none; }
  .mobile-menu-btn { display: flex; margin-left: auto; }
  .header-cta { display: none; }
  .mobile-menu-btn + .header-cta { display: flex; }

  .hero { padding: 140px 0 40px; min-height: auto; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero-visual { order: -1; min-height: 320px; }
  .hero-emblem { max-width: 260px; }
  .hero-sub { padding: 12px 16px; font-size: 12px; }
  .hero-stats { gap: 8px; }
  .stat { padding: 0 22px; }
  .stat-laurel { width: 18px; height: 46px; }
  .hero-footnote { position: static; text-align: center; margin-top: 30px; }

  .fcard { width: 108px; height: 152px; padding: 2px; border-radius: 8px; }

  .about, .hook, .reasons, .results, .flow, .cta { padding: 60px 0 70px; }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hook-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hook::before, .hook::after { display: none; }
  .hook-title br { display: none; }

  .reason-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .reason-card { padding: 28px 16px; }

  .results-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi { padding: 24px; }
  .kpi-number { font-size: 52px; }

  .flow-steps {
    flex-direction: column;
    gap: 12px;
  }
  .flow-arrow { transform: rotate(90deg); align-self: center; }

  .cta-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  .cta-left { text-align: center; }
  .cta-logo { margin: 0 auto; }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  .footer-logo { margin-left: auto; margin-right: auto; }
  .footer-nav { align-items: center; }
}

@media (max-width: 640px) {
  .hero-title { font-size: 36px; }
  .stat-num { font-size: 30px; }
  .feat-card { padding: 24px 14px; }
  .feature-grid { gap: 10px; }
}