/* =========================================================
   AI顧問Mirant LP — Design System
   ========================================================= */
:root{
  /* Brand colors */
  --blue:        #2F6BF5;
  --blue-2:      #2257DB;
  --blue-deep:   #173FB0;
  --blue-ink:    #102A66;
  --line-green:  #06C755;
  --line-green-d:#05A948;
  --yellow:      #FFD92E;
  --yellow-d:    #F4C400;

  /* Neutrals */
  --ink:    #182A4D;   /* headings on light */
  --body:   #4B5A75;   /* body text */
  --muted:  #8A98AD;
  --line:   #E4EAF3;   /* hairlines */
  --bg:     #FFFFFF;
  --bg-soft:#F2F6FF;   /* pale blue section */
  --bg-soft2:#EAF1FF;
  --white:  #FFFFFF;

  /* Effects */
  --radius:    18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 16px rgba(23,63,176,.08);
  --shadow:    0 14px 40px rgba(23,63,176,.12);
  --shadow-lg: 0 26px 70px rgba(23,63,176,.20);

  /* Layout */
  --maxw: 1080px;
  --gutter: 22px;
  --header-h: 70px;

  --sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  line-height:1.8;
  font-weight:500;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
h1,h2,h3,h4{ margin:0; line-height:1.4; font-weight:900; letter-spacing:.01em; }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding:72px 0; }
.section--soft{ background:var(--bg-soft); }
.center{ text-align:center; }

/* section eyebrow / heading system */
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:900; letter-spacing:.16em;
  color:var(--blue); margin-bottom:14px;
}
.kicker::before{ content:"#"; color:var(--yellow-d); font-size:15px; }
.eyebrow-en{
  display:block; font-size:13px; font-weight:900; letter-spacing:.3em;
  color:var(--blue); opacity:.55; margin-bottom:10px;
}
.sec-title{
  font-size:clamp(26px, 6vw, 40px);
  line-height:1.35; color:var(--ink);
}
.sec-title .hl{ color:var(--blue); }
.sec-lead{
  margin-top:18px; color:var(--body); font-size:16px; font-weight:500;
  max-width:680px;
}
.center .sec-lead{ margin-inline:auto; }

/* zig-zag divider mark like ＼ … ／ */
.flank{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:var(--white); font-weight:900; font-size:clamp(15px,3.6vw,19px);
  margin-bottom:16px;
}
.flank::before,.flank::after{
  content:""; width:2px; height:26px; background:currentColor; opacity:.85;
}
.flank::before{ transform:rotate(20deg); }
.flank::after{ transform:rotate(-20deg); }
.flank--ink{ color:var(--ink); }
.flank--blue{ color:var(--blue); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-weight:900; font-size:18px; letter-spacing:.02em;
  padding:18px 30px; border-radius:var(--radius-pill); border:none;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  line-height:1.2;
}
.btn-line{
  background:var(--line-green); color:#fff;
  box-shadow:0 10px 26px rgba(6,199,85,.36);
}
.btn-line:hover{ background:var(--line-green-d); transform:translateY(-2px); box-shadow:0 16px 34px rgba(6,199,85,.42); }
.btn-line .badge{
  background:#fff; color:var(--line-green); font-size:13px; font-weight:900;
  padding:3px 9px; border-radius:7px; letter-spacing:.04em;
}
.btn-block{ width:100%; padding:22px; font-size:clamp(19px,4.6vw,26px); }
.btn-sm{ padding:11px 20px; font-size:15px; }
.btn-sm .badge{ font-size:11px; padding:2px 7px; }

/* orange CTA (FV theme) */
.btn-orange{
  background:linear-gradient(100deg,#EE7E1B 0%, #F6A621 100%);
  color:#fff; box-shadow:0 8px 22px rgba(238,126,27,.30);
}
.btn-orange:hover{ filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 14px 30px rgba(238,126,27,.4); }
.btn-orange .arr{
  display:grid; place-items:center; width:1.5em; height:1.5em; margin-left:auto;
  border-radius:50%; background:rgba(255,255,255,.22); font-size:1em; font-weight:900;
}

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:60;
  height:var(--header-h);
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:stretch;
}
.header .wrap{ max-width:none; width:100%; padding:0; display:flex; align-items:stretch; gap:0; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:900; padding-left:var(--gutter); margin-right:auto; }
.brand .mark{
  width:40px; height:40px; border-radius:11px;
  background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  display:grid; place-items:center; color:#fff; font-size:18px; font-weight:900;
  position:relative; box-shadow:0 4px 12px rgba(23,63,176,.3);
}
.brand .mark::after{ content:"✦"; position:absolute; top:-5px; right:-5px; color:var(--yellow); font-size:13px; }
.brand .name{ font-size:21px; color:var(--ink); letter-spacing:.01em; }
.brand .name em{ color:var(--blue); font-style:normal; }
.brand-logo{ height:38px; width:auto; display:block; }
.brand-logo--footer{ height:34px; filter:brightness(0) invert(1); }
.nav{ display:flex; align-items:center; gap:32px; padding-inline:28px; }
.nav a{ font-weight:900; font-size:15px; color:var(--ink); white-space:nowrap; }
.nav a:hover{ color:var(--blue); }
.header .btn-orange{ border-radius:0; padding-inline:30px; box-shadow:none; font-size:16px; }
.header .btn-line{ box-shadow:0 6px 16px rgba(6,199,85,.3); }

/* ---------- hero (FV — light theme) ---------- */
.hero{
  position:relative; overflow:hidden;
  color:var(--ink);
  padding:0;
}
.hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(135deg, rgba(27,83,192,.045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(45deg, rgba(27,83,192,.03) 0 1px, transparent 1px 52px),
    linear-gradient(155deg,#FBFCFE 0%, #EBF1F8 50%, #DCE6F3 100%);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.02fr .98fr; gap:30px; align-items:stretch;
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);
}
.hero-copy{ padding:64px 0 72px; align-self:center; }
.hero-badge{
  display:inline-block; border:2.5px solid #16306E; color:#16306E;
  font-weight:900; font-size:clamp(15px,3.6vw,21px); padding:8px 18px; border-radius:5px;
  letter-spacing:.02em;
}
.hero h1{
  margin-top:18px;
  font-size:clamp(38px, 6.6vw, 60px);
  line-height:1.2; letter-spacing:.005em; color:#15233F;
}
.hero h1 .b{ color:var(--blue); }
.hero-tagline{
  margin-top:18px; font-weight:900; line-height:1.3; color:#15233F;
  font-size:clamp(20px,5vw,32px); letter-spacing:.01em;
}
.hero-tagline .eq{
  display:inline-block; margin:0 .1em; color:var(--blue);
}
.hero-desc{
  margin-top:24px; color:#1B53C0; font-weight:700;
  font-size:clamp(15px,3.9vw,19px); line-height:1.9; max-width:520px;
}
.hero-desc strong{ color:#15233F; font-weight:900; }
.hero-actions{ margin-top:32px; display:flex; flex-direction:column; gap:16px; max-width:470px; }
.hero-actions .btn{ padding:20px 26px; font-size:clamp(17px,4.2vw,20px); border-radius:8px; justify-content:flex-start; }
.hero-chips{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
.hero-chips span{
  font-size:13px; font-weight:900; color:#16306E;
  background:rgba(27,83,192,.07); border:1px solid rgba(27,83,192,.18);
  padding:7px 15px; border-radius:var(--radius-pill);
}
.hero-note{
  margin-top:22px; max-width:520px;
  font-size:12.5px; font-weight:500; line-height:1.75; color:#5A6B86;
  display:flex; gap:5px;
}
.hero-note-mark{ color:var(--blue); font-weight:900; flex:none; }
.hero-photo{ position:relative; align-self:stretch; min-height:100%; display:flex; justify-content:flex-end; align-items:flex-end; }
.hero-photo image-slot{
  width:100%; height:100%; min-height:clamp(440px,54vw,620px);
}
.hero-photo-img{
  display:block; width:auto; height:100%; min-height:480px; max-width:108%;
  object-fit:contain; object-position:bottom right;
  filter:drop-shadow(0 18px 40px rgba(23,63,176,.18));
}

/* sticky mobile CTA bar */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  display:none;
}
.sticky-cta .btn{ width:100%; padding:15px; font-size:18px; }

/* ---------- problem / pain ---------- */
.pain-list{ display:grid; gap:14px; margin-top:34px; max-width:760px; margin-inline:auto; }
.pain-item{
  display:flex; align-items:flex-start; gap:16px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 22px; box-shadow:var(--shadow-sm); font-weight:700; color:var(--ink);
  font-size:clamp(15px,3.6vw,17px);
}
.pain-item .ck{
  flex:none; width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff;
  display:grid; place-items:center; font-size:16px; font-weight:900; margin-top:2px;
}
.pain-arrow{
  margin:36px auto 0; width:0; height:0;
  border-left:34px solid transparent; border-right:34px solid transparent;
  border-top:28px solid var(--blue);
}

/* ---------- about ---------- */
.about-card{
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:clamp(28px,5vw,48px);
  border:1px solid var(--line); position:relative;
}
.about-price{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px;
  font-weight:900; color:var(--blue); font-size:clamp(20px,4.6vw,28px);
  padding-bottom:22px; margin-bottom:24px; border-bottom:2px dashed var(--line);
}
.about-price small{ font-size:15px; color:var(--body); font-weight:700; }
.about-body p{ color:var(--body); font-size:16px; font-weight:500; }
.about-body p + p{ margin-top:18px; }
.about-body strong{ color:var(--ink); font-weight:900; }
.about-quote{
  margin-top:26px; padding:20px 24px; background:var(--bg-soft); border-radius:var(--radius);
  border-left:5px solid var(--yellow); font-weight:900; color:var(--ink); font-size:clamp(16px,3.8vw,19px);
}

/* ---------- features ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:42px; }
.feat-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:30px; position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.feat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.feat-card .no{
  font-size:54px; font-weight:900; color:var(--bg-soft2); line-height:1;
  position:absolute; top:18px; right:22px;
}
.feat-tag{ display:inline-block; font-size:11px; font-weight:900; letter-spacing:.18em; color:var(--blue); margin-bottom:6px; }
.feat-card h3{ font-size:clamp(19px,4.4vw,23px); color:var(--ink); position:relative; }
.feat-meta{ display:inline-block; margin-top:8px; font-size:12px; font-weight:900; color:var(--line-green); background:rgba(6,199,85,.1); padding:4px 12px; border-radius:var(--radius-pill); }
.feat-card p{ margin-top:16px; color:var(--body); font-size:15px; font-weight:500; }
.feat-note{ margin-top:14px !important; font-size:13px !important; color:var(--muted) !important; }

/* ---------- user data ---------- */
.data-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:40px; }
.data-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:26px 26px 28px;
}
.data-head{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.data-head .tag{ font-size:11px; font-weight:900; letter-spacing:.12em; color:#fff; background:var(--blue); padding:4px 10px; border-radius:7px; }
.data-head h3{ font-size:17px; color:var(--ink); }
.bar-row{ display:grid; grid-template-columns:96px 1fr 44px; align-items:center; gap:12px; margin-bottom:12px; }
.bar-row .lbl{ font-size:13px; font-weight:700; color:var(--body); }
.bar-track{ height:10px; background:var(--bg-soft); border-radius:var(--radius-pill); overflow:hidden; }
.bar-fill{ height:100%; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--blue),var(--blue-deep)); }
.bar-row .val{ font-size:13px; font-weight:900; color:var(--blue); text-align:right; }
.data-note{ margin-top:16px; font-weight:900; color:var(--ink); font-size:14px; }

/* ---------- topics (newsletter) ---------- */
.topic-list{ margin-top:36px; display:grid; gap:14px; }
.topic-item{
  display:grid; grid-template-columns:auto 1fr; gap:6px 22px; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 24px; box-shadow:var(--shadow-sm);
}
.topic-date{ font-size:13px; font-weight:900; color:var(--blue); white-space:nowrap; }
.topic-title{ font-size:clamp(15px,3.6vw,17px); font-weight:700; color:var(--ink); }

/* ---------- teacher / instructor ---------- */
.teacher{ display:grid; grid-template-columns:340px 1fr; gap:48px; align-items:center; }
.teacher-photo{ position:relative; }
.teacher-photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.teacher-photo::before{
  content:""; position:absolute; left:-16px; top:-16px; right:24px; bottom:24px;
  border:3px solid var(--blue); border-radius:var(--radius-lg); z-index:-1; opacity:.25;
}
.teacher-body .kicker{ margin-bottom:10px; }
.teacher-name{
  font-size:clamp(28px,6vw,42px); color:var(--ink); line-height:1.2;
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
}
.teacher-roma{ font-size:14px; font-weight:900; letter-spacing:.16em; color:var(--muted); }
.teacher-body p{ margin-top:16px; color:var(--body); font-size:16px; font-weight:500; }
.teacher-highlight{
  margin-top:22px !important; display:inline-block;
  background:linear-gradient(transparent 58%, rgba(255,217,46,.65) 58%);
  font-size:clamp(18px,4.4vw,24px) !important; font-weight:900 !important; color:var(--ink) !important;
}
@media (max-width: 900px){
  .teacher{ grid-template-columns:1fr; gap:28px; }
  .teacher-photo{ max-width:320px; margin-inline:auto; }
  .teacher-photo::before{ right:16px; bottom:16px; }
}

/* ---------- voice ---------- */
.voice-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:42px; }
.voice-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:30px; display:flex; flex-direction:column;
}
.voice-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.voice-head image-slot{ width:54px; height:54px; flex:none; }
.voice-avatar{ width:54px; height:54px; flex:none; border-radius:50%; object-fit:cover; }
.voice-who .biz{ font-size:14px; font-weight:900; color:var(--ink); }
.voice-who .role{ font-size:12px; font-weight:700; color:var(--muted); }
.voice-card h3{ font-size:clamp(18px,4.2vw,21px); color:var(--blue); line-height:1.5; }
.voice-card p{ margin-top:14px; color:var(--body); font-size:14.5px; font-weight:500; line-height:1.85; }
.voice-card p + p{ margin-top:12px; }

/* ---------- plans ---------- */
.plan-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:42px; align-items:start; }
.plan-card{
  background:var(--white); border:2px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:0; overflow:hidden; position:relative;
}
.plan-card.is-featured{ border-color:var(--blue); box-shadow:var(--shadow); }
.plan-ribbon{
  text-align:center; font-weight:900; font-size:14px; padding:12px;
  background:var(--bg-soft); color:var(--blue);
}
.plan-card.is-featured .plan-ribbon{ background:linear-gradient(90deg,var(--blue),var(--blue-deep)); color:#fff; }
.plan-body{ padding:30px; }
.plan-name{ font-size:16px; font-weight:900; color:var(--ink); }
.plan-price{ display:flex; align-items:baseline; gap:4px; margin:14px 0 6px; color:var(--ink); }
.plan-price .cur{ font-size:24px; font-weight:900; color:var(--blue); }
.plan-price .num{ font-size:clamp(44px,11vw,58px); font-weight:900; color:var(--blue); line-height:1; letter-spacing:-.02em; }
.plan-price .per{ font-size:15px; font-weight:700; color:var(--body); }
.plan-tax{ font-size:13px; color:var(--muted); font-weight:700; }
.plan-feats{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:13px; }
.plan-feats li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; font-weight:700; color:var(--ink); }
.plan-feats li::before{ content:"✓"; flex:none; width:24px; height:24px; border-radius:50%; background:rgba(6,199,85,.12); color:var(--line-green); font-weight:900; display:grid; place-items:center; font-size:14px; margin-top:1px; }
.plan-feats li small{ display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-top:2px; }

/* options */
.opt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
.opt-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:24px;
}
.opt-tag{ display:inline-block; font-size:11px; font-weight:900; letter-spacing:.12em; color:#fff; background:var(--blue); padding:4px 11px; border-radius:7px; margin-bottom:12px; }
.opt-card h3{ font-size:17px; color:var(--ink); }
.opt-card .meta{ margin-top:8px; font-size:13px; font-weight:700; color:var(--muted); }
.opt-card .price{ margin-top:14px; font-size:18px; font-weight:900; color:var(--blue); }

/* ---------- flow ---------- */
.flow-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:42px; }
.flow-step{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:28px 22px; text-align:center; position:relative;
}
.flow-step .step-no{
  width:48px; height:48px; margin:0 auto 16px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff;
  display:grid; place-items:center; font-weight:900; font-size:19px; box-shadow:0 6px 16px rgba(23,63,176,.3);
}
.flow-step .step-en{ font-size:11px; font-weight:900; letter-spacing:.2em; color:var(--muted); }
.flow-step h3{ margin-top:6px; font-size:17px; color:var(--ink); }
.flow-step p{ margin-top:10px; font-size:13.5px; font-weight:500; color:var(--body); }
.flow-step:not(:last-child)::after{
  content:"›"; position:absolute; right:-13px; top:50%; transform:translateY(-50%);
  font-size:30px; font-weight:900; color:var(--blue); z-index:2;
}

/* ---------- founder ---------- */
.founder{ display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:center; margin-top:42px; }
.founder image-slot{ width:100%; aspect-ratio:4/5; }
.founder .who{ font-size:13px; font-weight:900; letter-spacing:.04em; color:var(--blue); }
.founder h3{ font-size:clamp(22px,5vw,30px); color:var(--ink); margin-top:6px; }
.founder .role{ font-size:14px; font-weight:700; color:var(--muted); margin-top:4px; }
.founder p{ margin-top:20px; color:var(--body); font-size:15.5px; font-weight:500; }
.founder p + p{ margin-top:14px; }

/* ---------- faq ---------- */
.faq-list{ margin-top:38px; display:grid; gap:14px; max-width:840px; margin-inline:auto; }
.faq{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 56px 22px 24px; position:relative;
  font-weight:900; color:var(--ink); font-size:clamp(15px,3.6vw,17px); line-height:1.6;
  display:flex; gap:14px; align-items:flex-start;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .q{ flex:none; color:var(--blue); font-weight:900; font-size:18px; }
.faq summary::after{
  content:"＋"; position:absolute; right:22px; top:50%; transform:translateY(-50%);
  color:var(--blue); font-weight:900; font-size:20px; transition:transform .2s ease;
}
.faq[open] summary::after{ content:"−"; }
.faq .ans{ padding:0 24px 24px 58px; color:var(--body); font-size:15px; font-weight:500; }

/* ---------- final CTA ---------- */
.final{
  background:linear-gradient(160deg,var(--blue) 0%, var(--blue-2) 55%, var(--blue-deep) 100%);
  color:#fff; text-align:center; padding:80px 0; position:relative; overflow:hidden;
}
.final::before{
  content:""; position:absolute; left:-40px; top:30px; width:300px; height:300px;
  background-image:radial-gradient(rgba(255,255,255,.2) 2px, transparent 2.4px);
  background-size:22px 22px; opacity:.5;
}
.final h2{ font-size:clamp(26px,6.4vw,44px); line-height:1.4; position:relative; }
.final h2 .y{ color:var(--yellow); }
.final p{ margin-top:18px; font-weight:700; font-size:clamp(15px,3.8vw,18px); opacity:.95; position:relative; }
.final .hero-cta{ max-width:620px; margin:36px auto 0; position:relative; }

/* ---------- footer ---------- */
.footer{ background:var(--blue-ink); color:rgba(255,255,255,.75); padding:48px 0 110px; font-size:13px; }
.footer .brand .name{ color:#fff; }
.footer .brand .mark{ box-shadow:none; }
.footer-row{ display:flex; flex-wrap:wrap; gap:18px 40px; justify-content:space-between; align-items:center; }
.footer-links{ display:flex; flex-wrap:wrap; gap:10px 24px; font-weight:700; }
.footer-links a:hover{ color:#fff; }
.footer-copy{ margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font-size:12px; opacity:.7; }

/* ---------- reveal animation ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  .nav{ display:none; }
  .hero-grid{ grid-template-columns:1.15fr .85fr; gap:10px; align-items:end; }
  .hero-copy{ padding:36px 0 24px; position:relative; z-index:2; }
  .hero-photo{ max-width:none; margin:0; width:100%; justify-content:flex-end; align-items:flex-end; }
  .hero-photo-img{
    margin:0 0 0 auto; max-height:clamp(280px,60vw,460px); width:100%; max-width:none;
  }
  .hero-actions{ max-width:none; }
  .feat-grid, .data-grid, .voice-grid, .plan-grid{ grid-template-columns:1fr; }
  .opt-grid{ grid-template-columns:1fr; }
  .flow-grid{ grid-template-columns:repeat(2,1fr); }
  .flow-step:nth-child(2)::after{ display:none; }
  .founder{ grid-template-columns:1fr; gap:24px; }
  .founder image-slot{ max-width:300px; }
}
@media (max-width: 640px){
  :root{ --header-h:58px; }
  .section{ padding:54px 0; }
  .header .brand .name{ font-size:18px; }
  .header .btn-orange{ display:none; }   /* replaced by sticky bar on mobile */
  .header .btn-line{ display:none; }
  .sticky-cta{ display:block; }
  .footer{ padding-bottom:96px; }
  .topic-item{ grid-template-columns:1fr; gap:4px; }
  .flow-grid{ grid-template-columns:1fr; }
  .flow-step::after{ display:none !important; }
  .bar-row{ grid-template-columns:80px 1fr 40px; }
  /* mobile: image positioned at right, overlapping */
  .hero-grid{
    grid-template-columns:1fr;
    position:relative;
    min-height:520px;
  }
  .hero-copy{
    padding:24px 0 100px;
    position:relative;
    z-index:2;
  }
  .hero-copy h1,
  .hero-copy .hero-tagline,
  .hero-copy .hero-desc{
    text-shadow: 0 1px 3px rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,0.8);
  }
  .hero-photo{
    position:absolute;
    right:-10px;
    bottom:0;
    width:55%;
    max-width:240px;
    z-index:1;
  }
  .hero-photo-img{
    width:100%;
    height:auto;
    max-height:400px;
    object-fit:contain;
    object-position:bottom right;
  }
  .hero h1{ font-size:clamp(28px,8vw,38px); margin-top:12px; }
  .hero-tagline{ font-size:clamp(16px,4.5vw,22px); margin-top:14px; }
  .hero-badge{ font-size:clamp(13px,3.5vw,16px); padding:7px 14px; }
  .hero-desc{ font-size:14px; margin-top:16px; max-width:100%; }
  .hero-actions{ max-width:55%; margin-top:20px; }
  .hero-actions .btn{ padding:12px 16px; font-size:14px; }
  .hero-chips{ gap:8px; margin-top:20px; }
  .hero-chips span{ font-size:12px; padding:6px 12px; }
  .hero-note{ font-size:11px; margin-top:18px; display:none; }
}