:root {
  --bg: #f7f7f3;
  --paper: #ffffff;
  --text: #111827;
  --muted: #667085;
  --line: #e6e7eb;
  --accent: #ffdf5d;
  --dark: #111827;
  --radius: 24px;
  --shadow: 0 18px 50px rgba(17, 24, 39, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
}

a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

.promo-bar {
  display: block;
  background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 10px 16px;
  line-height: 1.4;
}
.promo-bar:hover { filter: brightness(1.06); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 247, 243, .88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(17, 24, 39, .06);
}

.nav {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
  font-weight: 800;
}
.brand-word span { color: #6366f1; }

.nav-links { display: flex; gap: 26px; font-size: 14px; font-weight: 600; color: #414651; }
.nav-links a:hover { color: #000; }
.nav-actions { display: flex; align-items: center; gap: 10px; }

.language-select {
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  padding: 9px 34px 9px 13px;
  color: #344054;
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 750;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-small { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn-dark { background: var(--dark); color: white; }
.btn-primary { background: var(--accent); color: #111827; box-shadow: 0 10px 30px rgba(255, 223, 93, .3); }
.btn-outline { border: 1px solid #cfd2d8; background: white; }
.btn-light { background: white; color: #111827; }

.hero { padding: 92px 0 82px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; }
.eyebrow, .kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #6b7280;
}
.hero h1 {
  margin: 0;
  font-size: clamp(42px, 6.2vw, 78px);
  line-height: 1.02;
  letter-spacing: -.065em;
  max-width: 760px;
}
.hero-lead {
  margin: 28px 0 0;
  max-width: 660px;
  color: var(--muted);
  font-size: 18px;
}
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
.text-link { font-weight: 700; font-size: 14px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 28px; color: #58606c; font-size: 13px; font-weight: 600; }
.hero-meta .meta-bonus {
  color: #4f46e5;
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 700;
}

.hero-visual { position: relative; min-height: 530px; }
.phone {
  width: 300px;
  height: 560px;
  border: 10px solid #17191f;
  border-radius: 44px;
  background: #17191f;
  box-shadow: 0 34px 80px rgba(17,24,39,.22);
  position: absolute;
  right: 50px;
  top: 0;
  transform: rotate(4deg);
}
.phone-top {
  position: absolute; width: 96px; height: 24px; border-radius: 0 0 16px 16px;
  background: #17191f; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
}
.phone-screen {
  height: 100%;
  border-radius: 34px;
  background: #f3f4f6;
  overflow: hidden;
}
.mini-header {
  display:flex; align-items:center; justify-content:space-between;
  background:#0a0a0a; color:#f4f4f5;
  padding:26px 16px 10px;
}
.mini-word { font-weight:800; font-size:13px; letter-spacing:-.02em; }
.mini-word span { color:#a5b4fc; }
.mini-lang {
  font-size:10px; font-weight:700; color:#d4d4d8;
  border:1px solid rgba(255,255,255,.18); border-radius:6px; padding:3px 7px;
}
.app-body { padding:16px 15px 18px; }
.lesson-pill {
  display:inline-block; background:#ede9fe; color:#6d28d9;
  font-size:9px; font-weight:800; letter-spacing:.02em;
  padding:5px 9px; border-radius:99px;
}
.app-title { margin:11px 0 4px; font-size:16px; letter-spacing:-.03em; color:#111827; }
.app-sub { margin:0 0 14px; font-size:10px; line-height:1.5; color:#6b7280; }
.lang-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lang-tile {
  border-radius:14px; padding:11px 11px 10px; color:#fff; min-height:82px;
  display:flex; flex-direction:column; gap:5px;
  box-shadow:0 8px 18px rgba(17,24,39,.12);
}
.lang-flag { font-size:16px; line-height:1; }
.lang-tile b { font-size:12px; font-weight:800; letter-spacing:-.02em; margin-top:auto; }
.lang-status { display:flex; align-items:center; gap:4px; font-size:7px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; opacity:.95; }
.lang-status i { width:5px; height:5px; border-radius:50%; background:#4ade80; display:inline-block; }
.lang-status.off i { background:rgba(255,255,255,.55); }
.lt-en { background:linear-gradient(150deg,#3b82f6,#1d4ed8); }
.lt-fr { background:linear-gradient(150deg,#8b5cf6,#6d28d9); }
.lt-es { background:linear-gradient(150deg,#f59e0b,#c2410c); }
.lt-ja { background:linear-gradient(150deg,#f43f5e,#be123c); }
.app-cta {
  margin-top:14px; text-align:center; font-size:11px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#6366f1 0%,#818cf8 100%);
  padding:12px; border-radius:12px;
}

.floating-card {
  position:absolute;background:white;border:1px solid rgba(17,24,39,.06);border-radius:18px;
  box-shadow:var(--shadow);padding:16px 18px;
}
.card-one { left:0; bottom:66px; width:230px; transform:rotate(-3deg); }
.card-one strong { display:block;font-size:13px; }
.card-one span { display:block;color:#777f8b;font-size:11px;margin-top:3px; }
.card-two { right:0; top:72px; font-weight:800; font-size:12px; }
.spark { margin-right:8px; }

.language-strip { background:#111827;color:white; }
.strip-inner { min-height:68px;display:flex;align-items:center;justify-content:center;gap:17px;flex-wrap:wrap;font-size:14px; }
.strip-inner > span:first-child { color:#9ba2ad; text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:800; }

/* Section rhythm
   - Primary sections (#why, #how, #safety, #teach, final CTA): English kicker
     label + large heading (clamp 34–58), left-aligned.
   - Supplementary section (#for-you): small muted label + medium heading,
     set off by a top hairline so it reads as an aside, not a main section. */
.section { padding: 108px 0; }
.section.alt { background:white; }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.narrow { max-width: 620px; }
.section-head h2, .split h2, .teacher-card h2, .dark-section h2, .cta-box h2 {
  margin: 0;
  font-size: clamp(34px,4.7vw,58px);
  letter-spacing: -.055em;
  line-height: 1.05;
}
.section-head p:last-child { color:var(--muted);margin-top:18px;font-size:17px;max-width:690px; }

.section.supplementary { padding: 76px 0; }
.section.supplementary > .container { border-top: 1px solid var(--line); padding-top: 54px; }
.eyebrow-label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.section.supplementary .split h2 { font-size: clamp(26px,3vw,36px); letter-spacing: -.04em; }

.feature-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.feature-card { background:white;border:1px solid var(--line);border-radius:var(--radius);padding:30px;min-height:260px; }
.icon-box { width:52px;height:52px;border-radius:16px;background:#f3f4f6;display:grid;place-items:center;font-weight:800;font-size:18px; }
.feature-card h3 { margin:50px 0 8px;font-size:20px;letter-spacing:-.03em; }
.feature-card p { margin:0;color:var(--muted);font-size:14px; }

.steps { max-width:850px;margin:0 auto 42px; }
.step { display:grid;grid-template-columns:80px 1fr;gap:22px;padding:27px 0;border-bottom:1px solid var(--line); }
.step:first-child { border-top:1px solid var(--line); }
.step-number { color:#8a909a;font-size:12px;font-weight:800;letter-spacing:.12em;padding-top:6px; }
.step h3 { margin:0;font-size:23px;letter-spacing:-.03em; }
.step p { margin:7px 0 0;color:var(--muted); }
.center { text-align:center; }

.split { display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start; }
.use-list { border-top:1px solid var(--line); }
.use-item { display:grid;grid-template-columns:55px 1fr;gap:20px;align-items:start;padding:23px 0;border-bottom:1px solid var(--line); }
.use-item span { font-size:11px;color:#9096a0;font-weight:800;letter-spacing:.1em; }
.use-item p { margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em; }

.dark-section { background:#111827;color:white; }
.safety-grid { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start; }
.kicker.light { color:#9da4af; }
.muted { color:#aeb4c0;max-width:550px;margin-top:20px; }
.safety-list { border-top:1px solid #343a46; }
.safety-list > div { padding:24px 0;border-bottom:1px solid #343a46;display:grid;gap:6px; }
.safety-list strong { font-size:18px; }
.safety-list span { color:#aeb4c0;font-size:14px; }

.teacher-card {
  display:flex;align-items:center;justify-content:space-between;gap:60px;
  background:white;border:1px solid var(--line);border-radius:32px;padding:46px;
}
.teacher-card > div { max-width:720px; }
.teacher-card h2 { font-size:clamp(30px,4vw,48px); }
.teacher-card p:last-child { color:var(--muted);margin:16px 0 0; }
.founder-note { max-width:720px;margin-top:30px;padding-left:16px;border-left:2px solid #6366f1; }
.founder-note p { margin:0;color:var(--muted);font-size:14px; }
.founder-sign { margin-top:8px !important;font-size:13px;color:#8a909a; }
.placeholder-note { color:#8a909a;font-size:11px;margin-top:12px; }

.cta-section { padding:0 0 108px; }
.cta-box { background:var(--accent);border-radius:36px;padding:70px;text-align:center; }
.cta-box p { margin:18px auto 30px;max-width:620px; }
.cta-box .kicker { margin-bottom:14px; }

footer { background:#0b0f17;color:#fff;padding:54px 0 24px; }
.footer-grid { display:grid;grid-template-columns:1fr 1fr auto;gap:40px;align-items:center; }
.footer-brand .brand-word span { color:#a5b4fc; }
.footer-grid p { color:#9da4af;font-size:13px; }
.footer-links { display:flex;gap:18px;font-size:12px;color:#c1c6cf; }
.copyright { border-top:1px solid #252b35;margin-top:34px;padding-top:20px;color:#727987;font-size:11px; }

@media (max-width: 900px) {
  .nav-links { display:none; }
  .hero { padding-top:60px; }
  .hero-grid, .split, .safety-grid { grid-template-columns:1fr;gap:50px; }
  .hero-visual { min-height:520px; }
  .phone { left:50%;right:auto;transform:translateX(-50%) rotate(3deg); }
  .card-one { left:3%; }
  .card-two { right:3%; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:auto; }
  .feature-card h3 { margin-top:30px; }
  .teacher-card { flex-direction:column;align-items:flex-start; }
  .footer-grid { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
  .container { width:min(100% - 28px,1160px); }
  .nav { height:68px; }
  .nav-actions .btn { display:none; }
  .brand { font-size:17px; }
  .hero { padding:48px 0 58px; }
  .hero h1 { font-size:42px; }
  .hero-lead { font-size:16px; }
  .hero-actions { align-items:flex-start;flex-direction:column;gap:16px; }
  .hero-meta { gap:10px 14px; }
  .hero-visual { min-height:500px; margin-top:10px; }
  .phone { width:270px;height:510px; }
  .floating-card { display:none; }
  .section { padding:76px 0; }
  .section-head h2, .split h2, .dark-section h2, .cta-box h2 { font-size:38px; }
  .step { grid-template-columns:48px 1fr; }
  .teacher-card { padding:30px; }
  .cta-box { padding:48px 24px;border-radius:28px; }
  .cta-section { padding-bottom:76px; }
}