/* ===========================
   あっきーのAI動画生成所 LP
   カラーテーマ：水色・空色系
   =========================== */

:root {
  --color-bg:           #f4faff;
  --color-bg2:          #edf6ff;
  --color-sky:          #7ec8e3;
  --color-sky-light:    #c8e9f7;
  --color-sky-pale:     #e8f6fd;
  --color-sky-deep:     #4aacda;
  --color-blue:         #3a9fc5;
  --color-blue-dark:    #2178a0;
  --color-mint:         #e0f5f7;
  --color-ice:          #f0faff;
  --color-teal:         #5bbccc;
  --color-teal-light:   #a8dde8;
  --color-text:         #1a3545;
  --color-text-light:   #3d6478;
  --color-text-pale:    #7a9dae;
  --color-white:        #ffffff;
  --color-accent:       #3aabda;
  --color-accent-dark:  #1f85b0;
  --color-star:         #ffd166;

  --font-main:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-heading: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --radius:    18px;
  --radius-sm:  9px;
  --shadow:    0 4px 24px rgba(58,171,218,0.10);
  --shadow-md: 0 8px 36px rgba(58,171,218,0.18);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.9;
  font-size: 16px;
}
img  { max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; }

/* ─── Layout ─── */
.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 88px 0; }

/* ─── Labels / Headings ─── */
.section-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--color-accent);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 4vw, 34px);
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 16px;
}
.section-title span { color: var(--color-accent); }
.section-lead {
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 2;
  margin-bottom: 48px;
}

/* ─── Buttons ─── */
.btn {
  display: inline-block;
  padding: 18px 52px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .3s ease;
  border: none;
  text-align: center;
}
.btn-primary {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-blue) 100%);
  color: var(--color-white);
  box-shadow: 0 6px 24px rgba(58,171,218,.40);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(58,171,218,.50);
}
.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
}
.btn-outline:hover {
  background: var(--color-sky-light);
  transform: translateY(-2px);
}

/* ─── Fade-in animation ─── */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================
   NAVIGATION
   ======================== */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(244,250,255,.93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-sky-light);
  padding: 14px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: box-shadow .3s;
}
.site-nav.scrolled { box-shadow: var(--shadow); }
.nav-logo {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
.nav-logo span {
  display: block;
  font-size: 10px;
  color: var(--color-accent);
  font-family: var(--font-main);
  font-weight: 400;
  letter-spacing: .08em;
}
.nav-cta {
  font-size: 12px;
  font-weight: 700;
  background: var(--color-accent);
  color: white;
  padding: 9px 22px;
  border-radius: 50px;
  transition: all .3s;
}
.nav-cta:hover {
  background: var(--color-blue-dark);
  transform: translateY(-1px);
}
body { padding-top: 66px; }

/* ========================
   ① HERO
   ======================== */
#hero {
  background: linear-gradient(150deg, #e8f6fd 0%, #c8e9f7 40%, #e0f5f7 80%, #f4faff 100%);
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
}
/* 背景の丸い装飾 */
#hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126,200,227,.30) 0%, transparent 70%);
  pointer-events: none;
}
#hero::after {
  content: '';
  position: absolute;
  bottom: -50px; left: -50px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,245,247,.60) 0%, transparent 70%);
  pointer-events: none;
}
/* キャラクターふわふわ */
.hero-chara-wrap {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(260px, 30vw);
  animation: float 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes float {
  0%,100% { transform: translateY(-50%) translateY(0); }
  50%      { transform: translateY(-50%) translateY(-14px); }
}
.hero-chara-svg {
  width: 100%;
  filter: drop-shadow(0 12px 28px rgba(58,171,218,.28));
}

.hero-badge {
  display: inline-block;
  background: rgba(255,255,255,.75);
  color: var(--color-accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 6px 20px;
  border-radius: 50px;
  border: 1.5px solid var(--color-sky-light);
  margin-bottom: 28px;
  backdrop-filter: blur(6px);
}
.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 5vw, 48px);
  color: var(--color-text);
  line-height: 1.45;
  margin-bottom: 22px;
  font-weight: 700;
  max-width: 60%;
}
.hero-title .accent { color: var(--color-accent); }
.hero-subtitle {
  font-size: clamp(14px, 2vw, 16px);
  color: var(--color-text-light);
  line-height: 2;
  margin-bottom: 32px;
  max-width: 55%;
}
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.80);
  border: 1.5px solid var(--color-sky-light);
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 13px;
  color: var(--color-text);
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.hero-tag .ck { color: var(--color-accent); font-weight: 800; }
.hero-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.hero-cta-note { font-size: 12px; color: var(--color-text-pale); }

/* scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--color-text-pale);
  font-size: 10px; letter-spacing: .12em;
  animation: bounce 2.2s infinite;
}
.hero-scroll-hint .arrow {
  width: 16px; height: 16px;
  border-right: 2px solid var(--color-sky);
  border-bottom: 2px solid var(--color-sky);
  transform: rotate(45deg);
  margin-top: -4px;
}
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(7px); }
}

/* ========================
   ② EMPATHY
   ======================== */
#empathy { background: var(--color-white); }

.pain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}
.pain-card {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--color-sky);
  transition: transform .3s;
}
.pain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pain-card-icon  { font-size: 28px; margin-bottom: 12px; }
.pain-card-title { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; line-height: 1.5; }
.pain-card-text  { font-size: 13px; color: var(--color-text-light); line-height: 1.85; }

.empathy-message {
  background: var(--color-sky-pale);
  border-radius: var(--radius);
  padding: 32px 36px;
  text-align: center;
  font-size: 16px;
  color: var(--color-text);
  line-height: 2.1;
}
.empathy-message strong {
  display: block;
  font-size: 19px;
  color: var(--color-accent-dark);
  font-family: var(--font-heading);
  margin-top: 10px;
}

/* ========================
   ③ WHAT（サービス概要）
   ======================== */
#what {
  background: linear-gradient(160deg, var(--color-bg2) 0%, var(--color-mint) 100%);
}
.what-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.what-flow-step {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  width: 180px;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}
.what-flow-step .wf-icon { font-size: 36px; margin-bottom: 10px; display: block; }
.what-flow-step .wf-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--color-accent); margin-bottom: 6px; }
.what-flow-step .wf-title { font-size: 15px; font-weight: 700; color: var(--color-text); line-height: 1.4; }
.what-flow-arrow {
  font-size: 28px;
  color: var(--color-teal-light);
  font-weight: 700;
  flex-shrink: 0;
}
.what-desc {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 36px 40px;
  box-shadow: var(--shadow);
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 2;
  text-align: center;
}
.what-desc strong {
  display: block;
  font-size: clamp(18px, 2.8vw, 24px);
  font-family: var(--font-heading);
  color: var(--color-text);
  margin-bottom: 12px;
}

/* ========================
   ④ SOLUTION
   ======================== */
#solution { background: var(--color-white); }

.solution-points { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; }
.solution-point {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  transition: transform .3s;
}
.solution-point:hover { transform: translateX(6px); }
.solution-point-num {
  flex-shrink: 0;
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-blue));
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; margin-top: 2px;
}
.solution-point-title { font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; line-height: 1.5; }
.solution-point-text  { font-size: 14px; color: var(--color-text-light); line-height: 1.9; }

.solution-key-message {
  background: linear-gradient(135deg, var(--color-sky-pale), var(--color-mint));
  border-radius: var(--radius);
  padding: 36px 40px;
  text-align: center;
  font-size: 19px;
  font-family: var(--font-heading);
  color: var(--color-accent-dark);
  line-height: 1.7;
  border: 1.5px solid var(--color-sky-light);
}

/* ========================
   ⑤ CHARACTER SECTION
   ======================== */
#character { background: var(--color-bg2); }

.chara-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.chara-card {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform .3s;
}
.chara-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.chara-card-visual {
  background: linear-gradient(160deg, var(--color-sky-pale), var(--color-mint));
  padding: 28px 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}
.chara-card-body { padding: 16px 16px 22px; }
.chara-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-accent);
  background: var(--color-sky-pale);
  border-radius: 50px;
  padding: 3px 12px;
  margin-bottom: 8px;
}
.chara-card-name { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.chara-card-desc { font-size: 12px; color: var(--color-text-light); line-height: 1.7; }

.chara-note {
  background: var(--color-sky-pale);
  border-radius: var(--radius);
  padding: 24px 28px;
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 2;
  border-left: 4px solid var(--color-sky);
}
.chara-note strong { color: var(--color-text); }

/* ========================
   ⑥ SERVICE FLOW
   ======================== */
#service { background: var(--color-white); }

.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 48px;
  position: relative;
}
.flow-steps::before {
  content: '';
  position: absolute;
  left: 27px; top: 48px; bottom: 48px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-sky) 0%, var(--color-teal-light) 100%);
}
.flow-step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 20px 0;
  position: relative;
}
.flow-step-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  background: var(--color-white);
  border: 2.5px solid var(--color-sky);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: var(--shadow);
  position: relative; z-index: 1;
}
.flow-step-body {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 22px 26px;
  flex: 1;
  box-shadow: var(--shadow);
}
.flow-step-num  { font-size: 11px; font-weight: 700; letter-spacing: .15em; color: var(--color-accent); margin-bottom: 4px; }
.flow-step-title{ font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.flow-step-text { font-size: 13px; color: var(--color-text-light); line-height: 1.9; }

.service-support-box {
  background: var(--color-sky-pale);
  border-radius: var(--radius);
  padding: 32px 36px;
  border: 1.5px solid var(--color-sky-light);
  text-align: center;
}
.service-support-box p  { font-size: 15px; color: var(--color-text-light); line-height: 2; }
.service-support-box strong {
  display: block;
  font-size: 20px;
  font-family: var(--font-heading);
  color: var(--color-accent-dark);
  margin-bottom: 12px;
}

/* ========================
   ⑦ PORTFOLIO
   ======================== */
#portfolio { background: var(--color-bg2); }

.portfolio-grid { display: flex; flex-direction: column; gap: 44px; }
.portfolio-case {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.portfolio-case-header {
  background: linear-gradient(135deg, var(--color-sky-pale), var(--color-mint));
  padding: 24px 30px 20px;
  border-bottom: 1px solid var(--color-sky-light);
}
.portfolio-case-num   { font-size: 11px; font-weight: 700; letter-spacing: .15em; color: var(--color-accent); margin-bottom: 6px; }
.portfolio-case-title { font-size: 17px; font-weight: 700; color: var(--color-text); line-height: 1.5; }
.portfolio-case-body  { padding: 28px 30px; }
.portfolio-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--color-accent); margin-bottom: 6px; }
.portfolio-text  { font-size: 14px; color: var(--color-text-light); line-height: 1.9; margin-bottom: 20px; padding-left: 12px; border-left: 3px solid var(--color-sky-light); }

.portfolio-chara-preview {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, var(--color-sky-pale), var(--color-mint));
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.portfolio-chara-icon { font-size: 56px; flex-shrink: 0; }
.portfolio-chara-info {}
.portfolio-chara-name { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.portfolio-chara-desc { font-size: 13px; color: var(--color-text-light); line-height: 1.7; }

.portfolio-video-wrap {
  background: var(--color-bg2);
  border-radius: var(--radius-sm);
  aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  border: 1.5px dashed var(--color-sky-light);
  overflow: hidden;
}
.portfolio-video-placeholder { text-align: center; color: var(--color-text-pale); }
.portfolio-video-placeholder .play-icon { font-size: 40px; display: block; margin-bottom: 8px; color: var(--color-sky); }
.portfolio-video-placeholder p { font-size: 12px; }
.portfolio-video-wrap iframe { width: 100%; height: 100%; border: none; }

.portfolio-change {
  background: var(--color-sky-pale);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
}
.portfolio-change-title { font-size: 13px; font-weight: 700; color: var(--color-accent-dark); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.portfolio-change p { font-size: 13px; color: var(--color-text-light); line-height: 1.9; }

/* ========================
   ⑧ PRICING
   ======================== */
#pricing { background: var(--color-white); }

.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.pricing-card {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 38px 28px;
  box-shadow: var(--shadow);
  text-align: center;
  position: relative;
  transition: transform .3s;
}
.pricing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.pricing-card.featured {
  background: linear-gradient(160deg, var(--color-sky-pale), var(--color-mint));
  border: 2px solid var(--color-sky);
}
.pricing-badge {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--color-accent);
  color: white; font-size: 12px; font-weight: 700;
  padding: 4px 20px; border-radius: 50px; white-space: nowrap;
}
.pricing-label { font-size: 13px; font-weight: 700; color: var(--color-text-pale); margin-bottom: 12px; letter-spacing: .08em; }
.pricing-price { font-size: 14px; color: var(--color-text-pale); text-decoration: line-through; margin-bottom: 4px; }
.pricing-price.main {
  font-size: 42px; font-weight: 800; color: var(--color-accent-dark);
  text-decoration: none; line-height: 1; margin-bottom: 6px;
  font-family: var(--font-heading);
}
.pricing-unit { font-size: 16px; font-weight: 400; color: var(--color-text-light); }
.pricing-note { font-size: 12px; color: var(--color-text-pale); margin-top: 12px; line-height: 1.8; }

.pricing-reason {
  background: var(--color-bg2);
  border-radius: var(--radius);
  padding: 26px 30px;
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 2;
}
.pricing-reason strong { color: var(--color-text); font-weight: 700; }

/* ========================
   ⑨ URGENCY
   ======================== */
#urgency {
  background: linear-gradient(135deg, var(--color-blue-dark) 0%, var(--color-teal) 100%);
  color: var(--color-white);
}
#urgency .section-title  { color: var(--color-white); }
#urgency .section-label  { color: var(--color-sky-light); }
#urgency .section-lead   { color: rgba(255,255,255,.78); }

.urgency-points { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.urgency-point {
  display: flex; gap: 18px; align-items: flex-start;
  background: rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 24px 26px;
  border: 1px solid rgba(255,255,255,.15);
}
.urgency-icon  { font-size: 28px; flex-shrink: 0; margin-top: 2px; }
.urgency-title { font-size: 16px; font-weight: 700; color: var(--color-white); margin-bottom: 6px; }
.urgency-text  { font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.9; }

.urgency-conclusion {
  background: rgba(255,255,255,.13);
  border-radius: var(--radius);
  padding: 32px 36px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.22);
}
.urgency-conclusion p { font-size: 18px; font-family: var(--font-heading); color: var(--color-white); line-height: 1.8; }

/* ========================
   ⑩ OFFER
   ======================== */
#offer {
  background: linear-gradient(160deg, var(--color-sky-pale) 0%, var(--color-bg) 100%);
}
.offer-box {
  background: var(--color-white);
  border-radius: 26px;
  padding: 52px 44px;
  box-shadow: var(--shadow-md);
  text-align: center;
  border: 2px solid var(--color-sky-light);
}
.offer-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 4vw, 32px);
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.5;
}
.offer-subtitle { font-size: 14px; color: var(--color-text-pale); margin-bottom: 32px; }
.offer-benefits  { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; text-align: left; }
.offer-benefit {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--color-sky-pale);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}
.offer-benefit-check { color: var(--color-accent); font-size: 18px; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.offer-benefit-text  { font-size: 14px; color: var(--color-text); line-height: 1.7; }
.offer-benefit-text strong { display: block; font-size: 15px; color: var(--color-text); margin-bottom: 2px; }

.offer-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.offer-cta-note { font-size: 12px; color: var(--color-text-pale); }

/* ========================
   ⑪ CLOSING
   ======================== */
#closing { background: var(--color-bg); text-align: center; }
.closing-inner { max-width: 620px; margin: 0 auto; }
.closing-signature {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--color-sky-pale);
  border-radius: 50px;
  padding: 10px 26px;
  font-size: 14px; font-weight: 700; color: var(--color-text);
  margin-bottom: 32px;
}
.closing-message {
  font-family: var(--font-heading);
  font-size: clamp(22px, 4vw, 36px);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 22px;
}
.closing-message .accent { color: var(--color-accent); }
.closing-sub {
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 2.1;
  margin-bottom: 44px;
}
.closing-sub .highlight {
  background: linear-gradient(transparent 60%, var(--color-sky-light) 60%);
}

/* ========================
   FOOTER
   ======================== */
footer {
  background: var(--color-text);
  color: rgba(255,255,255,.60);
  text-align: center;
  padding: 36px 24px;
  font-size: 13px;
  line-height: 2;
}
footer strong { display: block; color: white; font-size: 16px; margin-bottom: 4px; }

/* ========================
   RESPONSIVE
   ======================== */
@media (max-width: 680px) {
  section { padding: 60px 0; }

  .hero-title, .hero-subtitle { max-width: 100%; }
  .hero-chara-wrap { display: none; }
  .hero-tags       { gap: 8px; }

  .pain-grid      { grid-template-columns: 1fr; }
  .what-flow      { flex-direction: column; align-items: center; }
  .what-flow-arrow{ transform: rotate(90deg); }
  .chara-showcase { grid-template-columns: 1fr; }
  .pricing-grid   { grid-template-columns: 1fr; }

  .what-desc      { padding: 28px 22px; }
  .offer-box      { padding: 36px 20px; }
  .flow-steps::before { left: 26px; }
  .solution-point { flex-direction: column; gap: 12px; }
}