/* ============================================================
   lp_style.css — AI Creative One LP スタイルシート
   KIDOKU inc.
   ============================================================ */

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --red: #E81B1B;
  --red-dark: #C01515;
  --black: #0A0A0A;
  --white: #FAFAFA;
  --gray-50: #F8F8F8;
  --gray-100: #F0F0F0;
  --gray-200: #E0E0E0;
  --gray-400: #9A9A9A;
  --gray-600: #555555;

  /* Fonts */
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-display: 'Bebas Neue', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Type Scale
     xs   : 11px  — label / badge / footer
     sm   : 13px  — body / list / caption
     md   : 15px  — lead / button / nav
     lg   : 18px  — card summary
     xl   : 24px  — card title
     2xl  : 32px  — feat main title
     3xl  : 44px  — section title / CTA
     4xl  : 56px  — hero title              */
  --text-xs:  11px;
  --text-sm:  13px;
  --text-md:  15px;
  --text-lg:  18px;
  --text-xl:  24px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-4xl: 56px;

  /* Display Number Scale
     num-sm  : 48px  — price / comp-time / step-n
     num-md  : 64px  — stat-num
     num-lg  : 96px  — cost-big-num / cost-bottom-big
     num-xl  : 120px — decorative bg numbers           */
  --num-sm:  48px;
  --num-md:  64px;
  --num-lg:  96px;
  --num-xl: 120px;

  /* Spacing */
  --section-y: 100px;
  --section-x:  80px;
  --card-pad:   32px;
  --gap-grid:   24px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Line Heights */
  --lh-tight:  1.15;
  --lh-normal: 1.5;
  --lh-loose:  1.85;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-jp); background: var(--white); color: var(--black); cursor: none; overflow-x: hidden; }

/* ── Custom Cursor ─────────────────────────────────────────── */
.cursor      { position: fixed; width: 10px; height: 10px; background: var(--red); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: transform 0.1s; }
.cursor-ring { position: fixed; width: 36px; height: 36px; border: 1.5px solid var(--red); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: transform 0.15s, opacity 0.2s; opacity: 0.6; }

/* ── NAV ───────────────────────────────────────────────────── */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--section-x); height: 64px; background: rgba(250,250,250,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-200); }
.nav-logo     { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-img { height: 45px; width: auto; display: block; object-fit: contain; }
.nav-cta      { display: flex; align-items: center; gap: 12px; }
.btn-ghost    { font-size: var(--text-sm); font-weight: 600; color: var(--black); text-decoration: none; padding: 8px 16px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); transition: border-color 0.2s; }
.btn-ghost:hover  { border-color: var(--black); }
.btn-primary  { font-size: var(--text-sm); font-weight: 700; color: white; text-decoration: none; padding: 9px 20px; background: var(--red); border-radius: var(--radius-sm); transition: background 0.2s, transform 0.15s; }
.btn-primary:hover { background: var(--red-dark); transform: translateY(-1px); }

/* ── HERO ──────────────────────────────────────────────────── */
.hero          { min-height: auto; padding-top: 64px; display: grid; grid-template-columns: 1fr 1fr; background: var(--white); overflow: hidden; position: relative; }
.hero-bg-right { position: absolute; top: 64px; right: 0; width: 50%; height: 50%; background: #F3F3F3; z-index: 0; }
.hero-left     { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--section-y) 64px 60px var(--section-x); }
.hero-right    { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0; background-image: url("lp_images/lpfv.png"); background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero-eyebrow  { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; color: var(--red); text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.hero-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: var(--red); }
.hero-title    { font-size: 53px; line-height: var(--lh-tight); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 24px; }
.hero-title .red { color: var(--red); }
.hero-title .sub { font-size: var(--text-xl); font-weight: 400; color: var(--gray-600); display: block; margin-top: 12px; line-height: var(--lh-normal); }
.hero-body     { font-size: var(--text-md); line-height: var(--lh-loose); color: var(--gray-600); max-width: 550px; margin-bottom: 36px; }
.hero-tags     { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.tag           { font-size: var(--text-xs); font-weight: 600; padding: 6px 14px; border-radius: var(--radius-sm); letter-spacing: 0.04em; }
.tag-red   { background: #FEE2E2; color: var(--red); }
.tag-black { background: var(--black); color: white; }
.tag-gray  { background: var(--gray-100); color: var(--gray-600); }
.hero-actions { display: flex; align-items: center; gap: 20px; }
.btn-hero      { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-md); font-weight: 700; color: white; text-decoration: none; padding: 16px 32px; background: var(--red); border-radius: var(--radius-sm); box-shadow: 0 4px 20px rgba(232,27,27,0.25); transition: background 0.2s, transform 0.15s, box-shadow 0.2s; }
.btn-hero:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(232,27,27,0.35); }
.btn-arrow  { transition: transform 0.2s; }
.btn-hero:hover .btn-arrow { transform: translateX(4px); }
.btn-link   { font-size: var(--text-sm); font-weight: 600; color: var(--gray-600); text-decoration: none; border-bottom: 1px solid var(--gray-200); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; }
.btn-link:hover { color: var(--black); border-color: var(--black); }

/* Hero Mockup */
.hero-mockup   { width: 97%; height: 97%; position: relative; margin: auto; }
.app-window    { background: #111; border-radius: var(--radius-lg); padding: 20px; box-shadow: 0 32px 80px rgba(0,0,0,0.22); }
.window-bar    { display: flex; gap: 7px; margin-bottom: 16px; }
.dot           { width: 10px; height: 10px; border-radius: 50%; }
.dot-r { background: #FF5F57; } .dot-y { background: #FEBC2E; } .dot-g { background: #28C840; }
.app-grid      { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.app-card      { aspect-ratio: 1; border-radius: var(--radius-md); position: relative; overflow: hidden; }
.app-card-label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); padding: 20px 8px 7px; font-size: 9px; color: white; font-weight: 500; }
.ac1 { background: linear-gradient(135deg,#667eea,#764ba2); }
.ac2 { background: linear-gradient(135deg,#f093fb,#f5576c); }
.ac3 { background: linear-gradient(135deg,#4facfe,#00f2fe); }
.ac4 { background: linear-gradient(135deg,#43e97b,#38f9d7); }
.ac5 { background: linear-gradient(135deg,#fa709a,#fee140); }
.ac6 { background: linear-gradient(135deg,#a18cd1,#fbc2eb); }
.stat-pill  { position: absolute; background: white; border-radius: 100px; padding: 10px 18px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); display: flex; align-items: center; gap: 10px; }
.pill-l     { bottom: 30px; left: 60px; }
.pill-r     { top: 60px; right: 30px; }
.pill-emoji { font-size: 18px; }
.pill-num   { font-family: var(--font-display); font-size: var(--num-sm); line-height: 1; color: var(--red); }
.pill-lbl   { font-size: var(--text-xs); color: var(--gray-600); font-weight: 500; }

/* ── TICKER ────────────────────────────────────────────────── */
.ticker       { background: var(--red); overflow: hidden; padding: 14px 0; }
.ticker-track { display: flex; gap: 48px; animation: scroll 22s linear infinite; width: max-content; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-item  { font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: 0.12em; color: white; white-space: nowrap; display: flex; align-items: center; gap: 48px; }
.ticker-item::after { content: '◆'; font-size: 8px; }

/* ── SECTION 共通 ──────────────────────────────────────────── */
section    { padding: var(--section-y) var(--section-x); }
.sec-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; color: var(--red); text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.sec-label::before { content: ''; width: 24px; height: 1.5px; background: var(--red); }
.sec-title { font-size: var(--text-3xl); font-weight: 900; letter-spacing: -0.02em; line-height: var(--lh-tight); margin-bottom: 16px; }
.sec-sub   { font-size: var(--text-md); line-height: var(--lh-loose); color: var(--gray-600); max-width: 560px; margin-bottom: 56px; }
.text-red  { color: var(--red); }

/* ── PROBLEM ───────────────────────────────────────────────── */
.problem { background: var(--gray-50); position: relative; overflow: hidden; }
.problem::before { content: 'PROBLEM'; position: absolute; top: 40px; right: 40px; font-family: var(--font-display); font-size: var(--num-xl); color: var(--gray-100); pointer-events: none; user-select: none; }
.prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); margin-bottom: 40px; }
.prob-card { background: white; border-radius: var(--radius-md); padding: var(--card-pad) 28px; border: 1px solid var(--gray-200); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; }
.prob-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.07); }
.prob-card:hover .prob-num { color: rgba(232,27,27,0.08); }
.prob-num  { font-family: var(--font-display); font-size: var(--num-lg); color: var(--gray-100); line-height: 1; position: absolute; top: 16px; right: 20px; transition: color 0.3s; }
.prob-tag  { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; color: var(--red); text-transform: uppercase; background: #FEE2E2; padding: 4px 10px; border-radius: var(--radius-sm); margin-bottom: 14px; }
.prob-ttl  { font-size: var(--text-xl); font-weight: 900; line-height: var(--lh-normal); margin-bottom: 12px; letter-spacing: -0.01em; position: relative; z-index: 1; }
.prob-body { font-size: var(--text-sm); color: var(--gray-600); line-height: var(--lh-loose); position: relative; z-index: 1; }
.prob-bottom      { background: var(--black); border-radius: var(--radius-md); padding: 28px 36px; display: flex; gap: 20px; }
.prob-bottom-text { font-size: var(--text-lg); font-weight: 700; color: white; line-height: var(--lh-normal);  }
.prob-bottom-text span { color: var(--red); }

/* ── COST ──────────────────────────────────────────────────── */
.cost { background: white; }
.cost-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.cost-card   { border-radius: var(--radius-md); padding: var(--card-pad) 28px; background: var(--gray-50); border: 1px solid var(--gray-200); position: relative; overflow: hidden; }
.cost-card::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--red); }
.cost-cat    { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--red); text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.cost-big-num  { font-family: var(--font-display); font-size: var(--num-md); line-height: 1; color: var(--black); margin-bottom: 4px; }
.cost-big-unit { font-size: var(--text-sm); font-weight: 700; color: var(--gray-600); margin-bottom: 20px; }
.cost-divider  { width: 32px; height: 2px; background: var(--red); margin-bottom: 16px; }
.cost-detail   { font-size: var(--text-sm); line-height: var(--lh-loose); color: var(--gray-600); margin-bottom: 20px; }
.cost-detail strong { color: var(--black); font-weight: 700; }
.cost-alarm    { font-size: var(--text-md); font-weight: 900; color: var(--red); line-height: var(--lh-normal); }
.cost-bottom   { background: var(--black); border-radius: var(--radius-md); margin-top: 44px; padding: 40px 48px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.cost-bottom-text { font-size: var(--text-lg); font-weight: 700; color: white; line-height: var(--lh-loose); }
.cost-bottom-text span { color: var(--red); }
.cost-bottom-num  { text-align: center; }
.cost-bottom-big  { font-family: var(--font-display); font-size: var(--num-lg); color: var(--red); line-height: 1; }
.cost-bottom-lbl  { font-size: var(--text-xs); color: rgba(255,255,255,0.4); margin-top: 4px; }

/* ── SOLUTION ──────────────────────────────────────────────── */
.solution { background: var(--black); }
.solution .sec-label       { color: rgba(232,100,100,0.9); }
.solution .sec-label::before { background: rgba(232,100,100,0.9); }
.solution .sec-title { color: white; }
.solution .sec-sub   { color: rgba(255,255,255,0.45); }
.compare-wrap { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 0; align-items: stretch; margin-bottom: 56px; }
.comp-card    { border-radius: var(--radius-md); overflow: hidden; }
.comp-img     { width: 100%; height: 200px; object-fit: cover; display: block; filter: brightness(0.7); }
.comp-card.before .comp-img { filter: brightness(0.5) grayscale(0.4); }
.comp-body    { padding: 28px var(--card-pad); display: flex; flex-direction: column; height: 100%; }
.comp-card.before .comp-body { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-top: none; }
.comp-card.after  .comp-body { background: var(--red); }
.comp-lbl  { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }
.comp-card.before .comp-lbl { color: rgba(255,255,255,0.35); }
.comp-card.after  .comp-lbl { color: rgba(255,255,255,0.75); }
.comp-ttl  { font-size: var(--text-lg); font-weight: 700; margin-bottom: 16px; color: white; }
.comp-list { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 24px; }
.comp-list li { font-size: var(--text-sm); padding: 8px 12px; border-radius: var(--radius-sm); display: flex; align-items: flex-start; gap: 8px; }
.comp-card.before .comp-list li { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.5); }
.comp-card.before .comp-list li::before { content: '✕'; color: rgba(255,80,80,0.7); flex-shrink: 0; }
.comp-card.after  .comp-list li { background: rgba(255,255,255,0.15); color: white; }
.comp-card.after  .comp-list li::before { content: '✓'; color: white; flex-shrink: 0; }
.comp-time     { font-family: var(--font-display); font-size: var(--num-sm); line-height: 1; margin-top: auto; }
.comp-card.before .comp-time { color: rgba(255,255,255,0.35); }
.comp-card.after  .comp-time { color: white; }
.comp-time-lbl { font-size: var(--text-xs); }
.comp-card.before .comp-time-lbl { color: rgba(255,255,255,0.35); }
.comp-card.after  .comp-time-lbl { color: rgba(255,255,255,0.75); }
.comp-vs   { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--text-xl); color: rgba(255,255,255,0.15); padding-top: 100px; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(255,255,255,0.06); border-radius: var(--radius-md); overflow: hidden; gap: 1px; }
.stat      { background: rgba(255,255,255,0.02); padding: 32px 20px; text-align: center; }
.stat-num  { font-family: var(--font-display); font-size: var(--num-md); color: var(--red); line-height: 1; margin-bottom: 8px; }
.stat-lbl  { font-size: var(--text-xs); color: rgba(255,255,255,0.45); line-height: var(--lh-normal); }

/* ── FEATURES ──────────────────────────────────────────────── */
/* ── FEATURES — Bento Grid ─────────────────────────────────── */
.features   { background: var(--white); }
.feat-grid  { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 300px 260px; gap: 8px; }
.feat       { border-radius: var(--radius-md); overflow: hidden; position: relative; cursor: pointer; }
.feat-img-wrap { position: absolute; inset: 0; }
.feat-img   { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.feat:hover .feat-img { transform: scale(1.06); }
.feat-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 24px; background: rgba(0,0,0,0.82); z-index: 1; }
.feat-icon  { display: none; }
.feat-name  { font-size: var(--text-lg); font-weight: 900; color: white; margin-bottom: 6px; line-height: var(--lh-normal); }
.feat-desc  { font-size: var(--text-sm); line-height: var(--lh-loose); color: rgba(255,255,255,0.7); }
.feat-badge { display: inline-block; font-size: var(--text-xs); font-weight: 700; padding: 3px 8px; background: var(--red); color: white; border-radius: var(--radius-sm); margin-bottom: 10px; letter-spacing: 0.06em; }

/* Bento placement */
.feat.main  { grid-column: 1; grid-row: 1 / 3; }
.feat.main .feat-name  { font-size: var(--text-2xl); }
.feat.main .feat-content { background: rgba(0,0,0,0.82); }

/* ── VIDEO DEMO ────────────────────────────────────────────── */
.videodemo { background: var(--black); }
.videodemo .sec-label       { color: rgba(232,100,100,0.9); }
.videodemo .sec-label::before { background: rgba(232,100,100,0.9); }
.videodemo .sec-title { color: white; }
.videodemo .sec-sub   { color: rgba(255,255,255,0.45); }
.video-wrap     { display: grid; grid-template-columns: 1fr 280px; gap: var(--gap-grid); align-items: start; }
.video-frame    { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius-lg); overflow: hidden; background: #111; box-shadow: 0 32px 80px rgba(0,0,0,0.5); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius-lg); }
.video-chapters { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: var(--card-pad); }
.chapter-label  { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; color: rgba(255,255,255,0.35); text-transform: uppercase; margin-bottom: 16px; }
.chapter-list   { list-style: none; display: flex; flex-direction: column; gap: 0; }
.chapter-item   { display: flex; align-items: baseline; gap: 12px; padding: 11px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; transition: background 0.2s; border-radius: var(--radius-sm); }
.chapter-item:last-child  { border-bottom: none; }
.chapter-item:hover       { background: rgba(255,255,255,0.06); }
.chapter-item:hover .chapter-time  { color: var(--red); }
.chapter-item:hover .chapter-title { color: white; }
.chapter-time   { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--red); flex-shrink: 0; min-width: 36px; font-weight: 500; }
.chapter-title  { font-size: var(--text-sm); color: rgba(255,255,255,0.6); line-height: var(--lh-normal); }
.video-yt-link  { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: var(--text-sm); font-weight: 700; color: var(--red); text-decoration: none; padding: 11px 14px; border: 1px solid rgba(232,27,27,0.3); border-radius: var(--radius-md); transition: background 0.2s, border-color 0.2s; }
.video-yt-link:hover { background: rgba(232,27,27,0.1); border-color: var(--red); color: white; }
.video-yt-link svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── HOW-TO ────────────────────────────────────────────────── */
.howto    { background: var(--gray-50); }
.steps    { max-width: 680px; margin: 0 auto; }
.step     { display: grid; grid-template-columns: 72px 1fr; gap: 28px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--gray-200); }
.step:last-child { border-bottom: none; }
.step-n   { font-family: var(--font-display); font-size: var(--num-sm); line-height: 1; color: var(--gray-200); transition: color 0.3s; }
.step:hover .step-n { color: var(--red); }
.step-ttl { font-size: var(--text-xl); font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.step-body { font-size: var(--text-sm); line-height: var(--lh-loose); color: var(--gray-600); }

/* ── USE CASES ─────────────────────────────────────────────── */
.usecases   { background: white; }
.tabs       { display: flex; gap: 8px; margin-bottom: 36px; }
.tab        { font-size: var(--text-sm); font-weight: 600; padding: 9px 20px; border-radius: 100px; border: 1.5px solid var(--gray-200); background: white; cursor: pointer; transition: all 0.2s; font-family: var(--font-jp); }
.tab.active, .tab:hover { background: var(--black); border-color: var(--black); color: white; }
.cases-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.case       { border-radius: var(--radius-md); aspect-ratio: 3/4; position: relative; overflow: hidden; }
.case-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,0.7) 100%); }
.case-lbl   { position: absolute; bottom: 14px; left: 14px; font-size: 18px; font-weight: 700; color: white; }
.case:hover .case-overlay { background: linear-gradient(transparent 30%, rgba(0,0,0,0.8) 100%); }
.cc1 { background: linear-gradient(160deg,#E0C3FC,#8EC5FC); }
.cc2 { background: linear-gradient(160deg,#FFECD2,#FCB69F); }
.cc3 { background: linear-gradient(160deg,#A1C4FD,#C2E9FB); }
.cc4 { background: linear-gradient(160deg,#FD746C,#FF9068); }

/* ── PRICING ───────────────────────────────────────────────── */
.pricing    { background: var(--gray-50); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.price-card { background: white; border-radius: var(--radius-md); border: 1.5px solid var(--gray-200); padding: 36px 28px; position: relative; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.price-card:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0,0,0,0.09); }
.price-card.popular { border-color: var(--red); border-width: 2px; }
.popular-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--red); color: white; font-size: var(--text-xs); font-weight: 700; padding: 4px 16px; border-radius: 100px; white-space: nowrap; }
.price-plan { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--gray-400); text-transform: uppercase; margin-bottom: 10px; }
.price-amt  { font-family: var(--font-display); font-size: var(--num-sm); line-height: 1; color: var(--black); margin-bottom: 4px; }
.price-unit { font-size: var(--text-sm); font-weight: 500; color: var(--gray-600); font-family: var(--font-jp); }
.price-desc { font-size: var(--text-sm); color: var(--gray-600); line-height: var(--lh-normal); margin: 18px 0; padding: 14px 0; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.price-feats { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 28px; }
.price-feats li { font-size: var(--text-sm); color: var(--gray-600); display: flex; align-items: flex-start; gap: 8px; }
.price-feats li::before { content: '✓'; color: var(--red); font-weight: 700; flex-shrink: 0; }
.price-btn { display: block; text-align: center; padding: 13px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 700; text-decoration: none; transition: all 0.2s; margin-top: auto; }
.price-btn.outline { border: 1.5px solid var(--gray-200); color: var(--black); }
.price-btn.outline:hover { border-color: var(--black); background: var(--black); color: white; }
.price-btn.red  { background: var(--red); color: white; box-shadow: 0 4px 16px rgba(232,27,27,0.22); }
.price-btn.red:hover  { background: var(--red-dark); }
.price-btn.dark { background: var(--black); color: white; }
.price-btn.dark:hover { background: #222; }
.price-note { text-align: center; margin-top: 28px; font-size: var(--text-lg); color: var(--gray-600); grid-column: 1 / -1; }

/* ── CREDIT CHARGE ─────────────────────────────────────────── */
.credit-charge-lp { background: var(--gray-50); }
.cc-lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); max-width: 720px; margin: 0 auto; }
.cc-lp-card { background: white; border-radius: var(--radius-md); border: 1.5px solid var(--gray-200); padding: 36px 28px; text-align: center; position: relative; transition: transform 0.2s, box-shadow 0.2s; }
.cc-lp-card:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0,0,0,0.09); }
.cc-lp-card--best { border-color: var(--red); border-width: 2px; }
.cc-lp-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--red); color: white; font-size: var(--text-xs); font-weight: 700; padding: 4px 16px; border-radius: 100px; white-space: nowrap; }
.cc-lp-plan { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--gray-400); text-transform: uppercase; margin-bottom: 12px; }
.cc-lp-amt  { font-family: var(--font-display); font-size: var(--num-sm); line-height: 1; color: var(--black); margin-bottom: 4px; }
.cc-lp-card--best .cc-lp-amt { color: var(--red); }
.cc-lp-unit { font-size: var(--text-sm); font-weight: 500; color: var(--gray-600); font-family: var(--font-jp); }
.cc-lp-price { font-size: 28px; font-weight: 700; color: var(--black); margin: 16px 0 4px; }
.cc-lp-card--best .cc-lp-price { color: var(--red); }
.cc-lp-per  { font-size: var(--text-sm); color: var(--gray-400); }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq      { background: white; }
.faq-list { max-width: 680px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--gray-100); }
.faq-btn  { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 22px 0; background: none; border: none; cursor: pointer; font-family: var(--font-jp); font-size: 16pt; font-weight: 700; text-align: left; gap: 16px; }
.faq-icon { width: 28px; height: 28px; flex-shrink: 0; border: 1.5px solid var(--gray-200); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--red); transition: transform 0.3s, background 0.2s; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--red); color: white; border-color: var(--red); }
.faq-ans  { font-size: var(--text-sm); line-height: var(--lh-loose); color: var(--gray-600); max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding-bottom 0.3s; }
.faq-item.open .faq-ans { max-height: 300px; padding-bottom: 22px; }

/* ── CTA BANNER ────────────────────────────────────────────── */
.cta { background: var(--red); padding: var(--section-y) var(--section-x); text-align: center; position: relative; overflow: hidden; }
.cta::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255,255,255,0.04) 20px, rgba(255,255,255,0.04) 40px); }
.cta > * { position: relative; z-index: 1; }
.cta-title { font-size: var(--text-3xl); font-weight: 900; color: white; letter-spacing: -0.02em; margin-bottom: 14px; line-height: var(--lh-tight); }
.cta-sub   { font-size: var(--text-md); color: rgba(255,255,255,0.7); margin-bottom: 44px; }
.cta-btns  { display: flex; align-items: center; justify-content: center; gap: 14px; }
.cta-white { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-md); font-weight: 700; color: var(--red); text-decoration: none; padding: 15px 32px; background: white; border-radius: var(--radius-sm); box-shadow: 0 4px 20px rgba(0,0,0,0.15); transition: transform 0.2s, box-shadow 0.2s; }
.cta-white:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.cta-out   { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-md); font-weight: 700; color: white; text-decoration: none; padding: 14px 32px; border: 2px solid rgba(255,255,255,0.4); border-radius: var(--radius-sm); transition: border-color 0.2s, background 0.2s; }
.cta-out:hover { border-color: white; background: rgba(255,255,255,0.1); }

/* ── FOOTER ────────────────────────────────────────────────── */
footer      { background: var(--black); padding: 60px var(--section-x) 36px; }
.foot-top   { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.foot-logo  { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.foot-logo-img { height: 100px; width: auto; display: block; object-fit: contain; }
.foot-tag   { font-size: var(--text-xs); color: rgba(255,255,255,0.35); line-height: var(--lh-loose); margin-bottom: 16px; }
.foot-col-title { font-size: var(--text-xs); font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
.foot-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot-links a { font-size: var(--text-sm); color: rgba(255,255,255,0.35); text-decoration: none; transition: color 0.2s; }
.foot-links a:hover { color: white; }
.foot-bottom { padding-top: 28px; display: flex; align-items: center; justify-content: space-between; }
.foot-copy  { font-size: var(--text-xs); color: rgba(255,255,255,0.25); }
.foot-legal { display: flex; gap: 20px; }
.foot-legal a { font-size: var(--text-xs); color: rgba(255,255,255,0.25); text-decoration: none; transition: color 0.2s; }
.foot-legal a:hover { color: rgba(255,255,255,0.55); }

/* ── ANIMATIONS ────────────────────────────────────────────── */
.fi    { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fi.v  { opacity: 1; transform: translateY(0); }
.fi.d1 { transition-delay: 0.1s; }
.fi.d2 { transition-delay: 0.2s; }
.fi.d3 { transition-delay: 0.3s; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  section { padding: 80px 40px; }
  nav { padding: 0 28px; }
  .hero { grid-template-columns: 1fr; }
  .hero-bg-right { display: none; }
  .hero-right    { display: none; }
  .hero-left     { padding: 80px 40px; }
  .prob-grid     { grid-template-columns: 1fr 1fr; }
  .cost-grid     { grid-template-columns: 1fr; }
  .cost-bottom   { grid-template-columns: 1fr; text-align: center; }
  .compare-wrap  { grid-template-columns: 1fr 1fr; }
  .comp-vs       { display: none; }
  .stats-row     { grid-template-columns: 1fr; }
  .video-wrap    { grid-template-columns: 1fr; }
  .video-chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .feat-grid     { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 220px 220px; }
  .feat.main     { grid-column: 1 / 3; grid-row: 1; }
  .price-grid    { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .cc-lp-grid    { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .cases-grid    { grid-template-columns: 1fr 1fr; }
  footer         { padding: 56px 40px 32px; }
  .foot-top      { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root {
    --text-3xl: 32px;
    --text-4xl: 40px;
    --text-2xl: 26px;
    --num-md: 52px;
    --num-lg: 72px;
    --section-y: 64px;
    --section-x: 24px;
  }
  .hero-left      { padding: 64px 24px; }
  .prob-grid      { grid-template-columns: 1fr; }
  .compare-wrap   { grid-template-columns: 1fr; }
  .feat-grid      { grid-template-columns: 1fr; grid-template-rows: repeat(5, 220px); }
  .feat.main      { grid-column: 1; grid-row: auto; }
  .cases-grid     { grid-template-columns: 1fr 1fr; }
  .cta-btns       { flex-direction: column; }
  footer          { padding: 48px 24px 28px; }
  .foot-top       { grid-template-columns: 1fr; }
  .foot-bottom    { flex-direction: column; gap: 14px; text-align: center; }
  nav             { padding: 0 20px; }
  .video-chapters { grid-template-columns: 1fr; }
}