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

:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: rgba(17,17,17,.65);
  --muted2: rgba(17,17,17,.42);
  --card: rgba(17,17,17,.04);
  --card2: rgba(17,17,17,.07);
  --line: rgba(17,17,17,.10);
  --accent: #E8231A;
  --accent2: #C41F16;
  --max: 1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--fg);
  letter-spacing:.1px;
}

a{color:inherit;text-decoration:none}

.container{max-width:var(--max);margin:0 auto;padding:0 32px}

/* ── TOPBAR ── */
.topbar{
  position:sticky;top:0;z-index:30;
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
}
.brand__mark svg{width:28px;height:28px}
.brand__name{
  font-family:'Anton',sans-serif;
  font-size:20px;
  letter-spacing:.5px;
  color:var(--fg);
}
.brand__name em{color:var(--accent);font-style:normal}

.topbar__nav{display:flex;gap:18px}
.topbar__nav a{font-size:13px;color:var(--muted);font-weight:500}
.topbar__nav a:hover{color:var(--accent)}

.topbar__actions{display:flex;align-items:center;gap:10px}

/* ── BTNS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:8px;border:1.5px solid var(--line);
  background:transparent;font-size:13px;font-weight:600;cursor:pointer;
  font-family:'Inter',sans-serif;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.btn--primary:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}
.btn--ghost{background:transparent}

/* ── SECTIONS ── */
.section{padding:80px 0;position:relative;overflow:hidden}
.section--hero{padding:60px 0 90px}
.section--red{background:var(--accent);color:#fff}
.section--red .h2,.section--red .lead,.section--red .sublead,.section--red p{color:rgba(255,255,255,.92)}
.section--red .muted{color:rgba(255,255,255,.7)}
.section--alt{background:#f9f9f9}

/* ── TYPOGRAPHY ── */
.kicker{margin:0 0 16px;color:var(--accent);font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.h1{margin:0 0 16px;font-family:'Anton',sans-serif;font-size:56px;line-height:1.0;letter-spacing:.5px;font-weight:400}
.h2{margin:0 0 12px;font-family:'Anton',sans-serif;font-size:34px;letter-spacing:.5px;font-weight:400}
.h2--xl{font-size:52px}
.lead{margin:0 0 18px;font-size:18px;line-height:1.6;color:var(--muted)}
.sublead{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--muted)}
.micro{margin:0;color:var(--muted2);font-size:12px;line-height:1.5}
.em{font-weight:700;color:var(--accent)}

/* ── HERO ── */
.hero__grid{display:grid;grid-template-columns:1.3fr 0.8fr;gap:32px;align-items:start;margin-top:16px}
.why{margin-top:22px;padding-top:18px;border-top:2px solid var(--line)}
.ctaRow{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ── PAIN POINTS ── */
.pain{display:grid;grid-template-columns:1fr;gap:12px}
.pain__item{
  padding:18px;
  border:1.5px solid var(--line);border-radius:12px;
  background:#fff;
  display:flex;gap:14px;align-items:flex-start;
}
.pain__icon{flex-shrink:0;width:36px;height:36px;color:var(--accent)}
.pain__content{}
.pain__label{font-weight:800;letter-spacing:1.5px;font-size:11px;color:var(--accent);margin-bottom:5px;text-transform:uppercase}
.pain__item p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}

/* ── SPLIT CARDS ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.card{padding:22px;border:1.5px solid var(--line);border-radius:12px;background:var(--card)}
.card--red{background:var(--accent);border-color:var(--accent);color:#fff}
.card--red .card__title,.card--red li{color:rgba(255,255,255,.9)}
.card__title{font-family:'Anton',sans-serif;letter-spacing:1px;font-size:22px;color:var(--fg);margin-bottom:12px}
.card ul{margin:0;padding-left:18px;color:var(--muted)}
.card li{margin:8px 0;font-size:15px}

/* ── TRIPTYCH (Philosophy) ── */
.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.card--big{border:1.5px solid var(--line);border-radius:12px;padding:24px}
.eyebrow{font-weight:800;letter-spacing:2px;font-size:11px;color:var(--accent);margin-bottom:12px;text-transform:uppercase}
.quote{font-size:16px;line-height:1.6;color:var(--fg);margin:0 0 12px}

/* ── MONOZUKURI ── */
.monozukuri{
  margin-top:28px;padding:24px 28px;
  border-radius:12px;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;gap:24px;
}
.mono__jp{font-size:22px;font-weight:800;white-space:nowrap}
.mono__divider{width:1px;height:40px;background:rgba(255,255,255,.3);flex-shrink:0}
.mono__es{font-size:15px;line-height:1.5;opacity:.9}

/* ── TEAM ── */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.founder{
  padding:24px;border:1.5px solid var(--line);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
}
.founder__avatar{
  width:80px;height:80px;border-radius:50%;background:var(--card2);
  border:2px solid var(--line);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:28px;color:var(--accent);
}
.founder__role{color:var(--muted);font-size:13px}
.founder__name{font-family:'Anton',sans-serif;font-size:20px;letter-spacing:.5px}

.shogun{
  margin-top:16px;padding:28px;
  border:2px solid var(--accent);border-radius:12px;
  background:rgba(232,35,26,.04);
  text-align:center;position:relative;overflow:hidden;
}
.shogun::before{
  content:'';position:absolute;top:-40px;right:-40px;
  width:160px;height:160px;border-radius:50%;
  border:2px solid rgba(232,35,26,.12);
}
.shogun__title{font-weight:800;letter-spacing:2px;font-size:11px;color:var(--accent);text-transform:uppercase}
.shogun__name{margin-top:10px;font-family:'Anton',sans-serif;font-size:28px;letter-spacing:1px}
.shogun__role{color:var(--muted);margin-top:4px;font-weight:500}
.shogun__desc{margin:14px 0 0;color:var(--muted);line-height:1.5;max-width:500px;margin-left:auto;margin-right:auto}

.agents{margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.agent{
  padding:14px;border:1.5px solid var(--line);border-radius:10px;
  background:#fff;transition:border-color .15s;
}
.agent:hover{border-color:var(--accent)}
.agent__name{font-family:'Anton',sans-serif;font-size:16px;letter-spacing:.5px;color:var(--fg)}
.agent__role{margin-top:4px;color:var(--muted);font-size:13px}

/* ── RULES GRID ── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.rule{
  padding:18px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  display:flex;gap:14px;align-items:flex-start;
}
.rule__icon{flex-shrink:0;width:36px;height:36px;color:var(--accent)}
.rule__body{}
.rule__title{font-weight:800;letter-spacing:.8px;color:var(--fg);font-size:13px;margin-bottom:6px;text-transform:uppercase}
.rule p{margin:0;color:var(--muted);line-height:1.5;font-size:14px}

/* ── WINNING FORMULA ── */
.formula{margin-top:20px;display:grid;gap:10px}
.formula__line{
  padding:18px 22px;border-radius:10px;
  background:var(--accent);color:#fff;
  font-family:'Anton',sans-serif;font-size:20px;letter-spacing:.8px;
}

/* ── TIMELINE ── */
.timeline{margin-top:24px;display:grid;gap:12px}
.step{
  padding:20px;border-radius:12px;border-left:4px solid var(--accent);
  background:#fff;border:1.5px solid var(--line);border-left:4px solid var(--accent);
}
.step__when{font-family:'Anton',sans-serif;font-size:14px;letter-spacing:1px;color:var(--accent);margin-bottom:6px}
.step__what{color:var(--muted);line-height:1.5;font-size:15px}

.quality{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.quality__badge{
  display:inline-flex;padding:10px 16px;border-radius:999px;
  border:1.5px solid var(--accent);color:var(--accent);
  font-weight:800;letter-spacing:.5px;font-size:14px;
}

/* ── DECORATIVE CIRCLES ── */
.circle-deco{
  position:absolute;border-radius:50%;
  border:1.5px solid rgba(232,35,26,.15);
  pointer-events:none;
}

/* ── FOOTER ── */
.footer{padding:28px 0;border-top:1.5px solid var(--line)}
.footer__inner{display:flex;justify-content:space-between;gap:12px;color:var(--muted2);font-size:12px;align-items:center}
.footer__logo{font-family:'Anton',sans-serif;font-size:16px;color:var(--fg);letter-spacing:.5px}

/* ── RESPONSIVE ── */
@media (max-width: 960px){
  .topbar__nav{display:none}
  .hero__grid{grid-template-columns:1fr}
  .triptych{grid-template-columns:1fr}
  .agents{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .h1{font-size:40px}
  .h2{font-size:26px}
  .h2--xl{font-size:36px}
  .founders{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .agents{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .triptych{grid-template-columns:1fr}
  .monozukuri{flex-direction:column;text-align:center}
  .formula__line{font-size:16px}
}
