@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700;900&family=Inter:wght@300;400;500;600;700;900&display=swap');

/* ── Reset & Base ── */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Noto Sans JP','Inter',sans-serif;color:#333;background:#fff;overflow-x:hidden}

/* ── Brand Tokens (from slide deck) ── */
:root{
  --ink:#111;
  --warm:#c49a6c;
  --warm-light:#d4a373;
  --warm-subtle:rgba(196,154,108,0.08);
  --gray-1:#333;
  --gray-2:#666;
  --gray-3:#999;
  --gray-4:#ccc;
  --gray-5:#e8e8e8;
  --gray-6:#f2f2f0;
  --bg-light:#f7f7f5;
  --bg-warm:#f4f1ec;
  --bg-charcoal:#1a1a1a;
  --bg-ink:#0d0d0d;
  --white-dim:rgba(255,255,255,0.7);
  --white-muted:rgba(255,255,255,0.45);
  --max-w:1200px;
  --section-py:120px;
}

/* ── Typography ── */
h1{font-size:clamp(36px,5vw,52px);font-weight:900;line-height:1.4;letter-spacing:-0.5px;color:var(--ink)}
h2{font-size:clamp(28px,3.5vw,36px);font-weight:700;line-height:1.4;letter-spacing:-0.3px;color:var(--ink)}
h3{font-size:clamp(18px,2vw,22px);font-weight:600;line-height:1.5;color:var(--gray-1)}
p,.text{font-size:18px;font-weight:400;line-height:1.9;color:var(--gray-2)}
.small{font-size:15px;color:var(--gray-3)}
.label-tag{display:inline-block;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--warm);margin-bottom:16px}
.divider{width:40px;height:2px;background:var(--warm);margin:20px 0;border-radius:1px}
.bright{font-weight:600}
.warm{color:var(--warm)}

/* ── Dark section overrides ── */
.dark{background:var(--bg-charcoal);color:#fff}
.dark h1,.dark h2{color:#fff}
.dark h3{color:rgba(255,255,255,0.9)}
.dark p,.dark .text{color:var(--white-dim)}
.dark .label-tag{color:var(--warm-light)}
.dark .divider{background:var(--warm-light)}
.dark .small{color:var(--white-muted)}

.ink{background:var(--bg-ink);color:#fff}
.ink h1,.ink h2{color:#fff}
.ink h3{color:rgba(255,255,255,0.9)}
.ink p,.ink .text{color:var(--white-dim)}
.ink .label-tag{color:var(--warm-light)}

/* ── Layout ── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 40px}
section{padding:var(--section-py) 0}

/* ── Header ── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-5);transition:background .3s}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:72px}
.site-header.scrolled{box-shadow:0 1px 8px rgba(0,0,0,0.06)}
.logo-text{font-family:'Inter','Noto Sans JP',sans-serif;font-size:15px;font-weight:600;letter-spacing:3px;color:var(--gray-3);text-decoration:none}
.logo-text:hover{color:var(--ink)}
nav{display:flex;align-items:center;gap:32px}
nav a{font-size:14px;font-weight:500;color:var(--gray-2);text-decoration:none;letter-spacing:0.5px;transition:color .2s}
nav a:hover{color:var(--ink)}
nav a.cta-btn{background:var(--ink);color:#fff;padding:10px 24px;border-radius:6px;font-weight:600;letter-spacing:1px}
nav a.cta-btn:hover{background:#333}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.hamburger span{display:block;width:24px;height:2px;background:var(--ink);transition:all .3s}

/* ── Hero ── */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--bg-ink);padding:120px 40px 80px}
.hero-brand{font-family:'Inter','Noto Sans JP',sans-serif;font-size:14px;font-weight:600;letter-spacing:8px;text-transform:uppercase;color:var(--warm-light);margin-bottom:48px}
.hero h1{font-size:clamp(32px,5vw,56px);font-weight:900;line-height:1.5;letter-spacing:0.5px;color:#fff}
.hero-sub{font-size:clamp(16px,2vw,20px);font-weight:400;color:rgba(255,255,255,0.5);letter-spacing:1px;margin-top:28px}
.hero-line{width:48px;height:1px;background:var(--warm-light);margin:36px auto}
.hero-footer{font-size:14px;color:rgba(255,255,255,0.3);letter-spacing:2px}

/* ── Section Backgrounds ── */
.bg-light{background:var(--bg-light)}
.bg-warm{background:var(--bg-warm)}
.bg-white{background:#fff}

/* ── Cards ── */
.card{background:var(--gray-6);border-radius:12px;padding:32px;margin:8px 0}
.card-outline{background:transparent;border:1px solid var(--gray-5);border-radius:12px;padding:32px;margin:8px 0}
.card-warm{background:var(--warm-subtle);border-radius:12px;padding:32px;margin:8px 0}
.dark .card{background:rgba(255,255,255,0.05)}
.dark .card-outline{border-color:rgba(255,255,255,0.1)}
.dark .card-warm{background:rgba(196,154,108,0.08)}
.ink .card{background:rgba(255,255,255,0.05)}

/* ── Grids ── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.split{display:flex;gap:60px;align-items:stretch}
.split>div{flex:1}

/* ── Tables ── */
table{width:100%;border-collapse:collapse;margin:16px 0}
th{text-align:left;font-size:13px;font-weight:600;letter-spacing:1px;color:var(--gray-3);padding:12px 0;border-bottom:2px solid var(--gray-5)}
td{font-size:16px;font-weight:400;color:var(--gray-1);padding:16px 0;border-bottom:1px solid var(--gray-5);vertical-align:top}
td:first-child{font-weight:500;color:var(--warm);padding-right:24px}
.dark th{color:rgba(255,255,255,0.4);border-color:rgba(255,255,255,0.1)}
.dark td{color:var(--white-dim);border-color:rgba(255,255,255,0.06)}
.dark td:first-child{color:var(--warm-light)}

/* ── Number List ── */
.num-list{list-style:none;padding:0}
.num-list li{font-size:18px;font-weight:400;color:var(--gray-1);padding:18px 0;border-bottom:1px solid var(--gray-5);display:flex;gap:20px;align-items:baseline}
.num-list li:last-child{border-bottom:none}
.num-list .num{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:var(--warm);min-width:24px;padding-top:2px}
.num-list .label{font-weight:600}
.dark .num-list li{color:var(--white-dim);border-color:rgba(255,255,255,0.06)}

/* ── Flow Steps ── */
.flow{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.flow-step{background:var(--gray-6);border-radius:10px;padding:20px;text-align:center;flex:1;min-width:120px}
.dark .flow-step{background:rgba(255,255,255,0.04)}
.flow-step .step-n{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--warm);margin-bottom:8px}
.flow-step .step-t{font-size:14px;font-weight:500;color:var(--gray-1);line-height:1.5}
.dark .flow-step .step-t{color:var(--white-dim)}
.flow-arr{font-size:16px;color:var(--gray-4);padding:0 6px;flex-shrink:0}
.dark .flow-arr{color:rgba(255,255,255,0.15)}

/* ── Big Numbers ── */
.big{font-family:'Inter',sans-serif;font-size:clamp(48px,6vw,64px);font-weight:900;line-height:1;color:var(--ink)}
.big-warm{font-family:'Inter',sans-serif;font-size:clamp(48px,6vw,64px);font-weight:900;line-height:1;color:var(--warm)}

/* ── Compare Columns ── */
.compare{display:flex;gap:32px}
.compare-col{flex:1;border-radius:12px;padding:36px;position:relative}
.compare-col.col-a{background:var(--warm-subtle);border:1px solid rgba(196,154,108,0.2)}
.compare-col.col-b{background:var(--gray-6);border:1px solid var(--gray-5)}
.dark .compare-col.col-a{background:rgba(196,154,108,0.06);border-color:rgba(196,154,108,0.15)}
.dark .compare-col.col-b{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.08)}
.model-tag{display:inline-block;font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:3px;padding:5px 14px;border-radius:4px;margin-bottom:16px}
.tag-m{background:rgba(196,154,108,0.15);color:var(--warm)}
.tag-b{background:rgba(100,100,100,0.1);color:var(--gray-2)}
.dark .tag-b{background:rgba(255,255,255,0.08);color:var(--white-dim)}

/* ── FAQ ── */
.faq-item{padding:24px 0;border-bottom:1px solid var(--gray-5)}
.faq-item:last-child{border-bottom:none}
.faq-q{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:10px}
.faq-a{font-size:16px;font-weight:400;color:var(--gray-2);line-height:1.8}

/* ── Person Cards ── */
.person-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.person-card{background:var(--gray-6);border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:8px}
.person-card .p-role{font-size:15px;font-weight:600;color:var(--warm)}
.person-card .p-desc{font-size:14px;font-weight:400;color:var(--gray-2);line-height:1.7}

/* ── CTA Section ── */
.cta-box{border:1px solid rgba(196,154,108,0.3);border-radius:16px;padding:60px;text-align:center;max-width:860px;margin:0 auto}
.cta-email{font-family:'Inter','Noto Sans JP',sans-serif;font-size:clamp(22px,3vw,30px);font-weight:700;color:var(--warm-light);letter-spacing:1px;margin:24px 0}

/* ── Stat Card (challenge section) ── */
.stat-card{text-align:center;padding:28px 20px}
.stat-card .stat-num{font-family:'Inter',sans-serif;font-size:clamp(28px,3vw,36px);font-weight:900;color:var(--warm)}
.stat-card .stat-label{font-size:14px;color:var(--white-dim);margin-top:12px;font-weight:500}
.stat-card .stat-note{font-size:13px;margin-top:12px;color:var(--white-muted)}

/* ── Footer ── */
.site-footer{background:var(--bg-ink);color:rgba(255,255,255,0.3);padding:60px 0 40px;text-align:center}
.site-footer .logo-text{color:rgba(255,255,255,0.25);font-size:13px;letter-spacing:6px}
.site-footer p{font-size:13px;margin-top:16px}

/* ── Utilities ── */
.text-center{text-align:center}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mt-4{margin-top:32px}
.mt-5{margin-top:48px}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}

/* ── Responsive ── */
@media(max-width:1024px){
  :root{--section-py:80px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .split{flex-direction:column;gap:40px}
  .compare{flex-direction:column}
  .flow{flex-wrap:wrap;gap:8px}
  .flow-arr{display:none}
  .flow-step{min-width:calc(33% - 8px)}
}
@media(max-width:768px){
  :root{--section-py:60px}
  .container{padding:0 24px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .person-grid{grid-template-columns:1fr}
  .flow-step{min-width:calc(50% - 8px)}
  nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;padding:24px 40px;border-bottom:1px solid var(--gray-5);gap:16px}
  nav.open{display:flex}
  .hamburger{display:flex}
  .hero{min-height:auto;padding:160px 24px 100px}
}