
:root{
  --bg:#f5f5f1;
  --ink:#121514;
  --muted:#66706b;
  --line:#cfd4cf;
  --panel:#ffffff;
  --dark:#0c1512;
  --acid:#d8ff63;
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;
  line-height:1.55;
}
a{color:inherit}
.platform-wrap{min-height:100vh;display:flex;flex-direction:column}
.platform-header{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px clamp(20px,4vw,64px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);
}
.platform-brand{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-weight:700;letter-spacing:.04em;font-size:13px;line-height:1.08;
}
.brand-mark{display:flex;align-items:end;gap:3px;height:26px}
.brand-mark i{display:block;width:5px;background:var(--ink)}
.brand-mark i:nth-child(1){height:26px}
.brand-mark i:nth-child(2){height:17px}
.brand-mark i:nth-child(3){height:10px}
.platform-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.platform-actions a{
  text-decoration:none;border:1px solid var(--line);padding:9px 12px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.55);
}
.platform-actions a:hover{background:#fff}
.platform-main{width:min(1240px,100%);margin:0 auto;padding:clamp(46px,8vw,110px) clamp(20px,4vw,64px) 80px}
.eyebrow{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:#54605a;margin-bottom:18px;
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:48px;align-items:end}
.hero h1{
  margin:0;font-size:clamp(48px,8vw,104px);line-height:.94;letter-spacing:-.055em;font-weight:650;
  max-width:980px;
}
.hero h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400}
.hero-copy{font-size:clamp(17px,2vw,22px);color:#3f4844;margin:0 0 6px;max-width:540px}
.gateway-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(52px,7vw,92px)}
.gateway{
  min-height:390px;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,4vw,42px);
  text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--panel);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.gateway:hover{transform:translateY(-4px);border-color:#9aa49f;box-shadow:0 14px 40px rgba(18,21,20,.06)}
.gateway.dark{background:var(--dark);color:#f3f6f3;border-color:var(--dark)}
.gateway-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.gateway-tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.gateway-arrow{font-size:24px}
.gateway h2{font-size:clamp(36px,5vw,68px);line-height:.98;letter-spacing:-.045em;margin:44px 0 18px}
.gateway p{font-size:17px;max-width:620px;margin:0;color:#58615d}
.gateway.dark p{color:#c3cbc6}
.gateway-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.pill{display:inline-flex;border:1px solid currentColor;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.series-strip{
  margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,4vw,42px);
  background:#eef1ec;
}
.series-strip-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:end}
.series-strip h2{font-size:clamp(34px,5vw,58px);line-height:1;margin:8px 0 0;letter-spacing:-.04em}
.series-strip p{margin:0;color:#4c5751;font-size:17px}
.inline-cta{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-weight:800;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.platform-footer{
  margin-top:auto;border-top:1px solid var(--line);padding:22px clamp(20px,4vw,64px);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#68716c;font-size:12px;
}
.product-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);gap:44px;align-items:end}
.product-hero h1{font-size:clamp(50px,8vw,100px);line-height:.94;letter-spacing:-.055em;margin:0}
.product-hero p{margin:0;color:#46504b;font-size:18px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:64px}
.product-card{
  border:1px solid var(--line);border-radius:22px;padding:28px;background:#fff;min-height:330px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.product-card.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.product-card .status{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.product-card h2{font-size:36px;line-height:1.02;letter-spacing:-.035em;margin:24px 0 14px}
.product-card p{margin:0;color:#5e6762}
.product-card.active p{color:#c7cfca}
.product-card a{display:inline-flex;margin-top:26px;text-decoration:none;font-weight:800;border-bottom:1px solid currentColor;align-self:flex-start}
.product-note{margin-top:18px;padding:24px 26px;border:1px solid var(--line);border-radius:18px;color:#4d5752;background:#eef1ec}
@media(max-width:860px){
  .platform-header{position:static}
  .hero-grid,.product-hero,.series-strip-grid{grid-template-columns:1fr}
  .gateway-grid,.product-grid{grid-template-columns:1fr}
  .gateway{min-height:320px}
  .hero h1,.product-hero h1{font-size:clamp(44px,14vw,78px)}
  .platform-actions a.hide-mobile{display:none}
}
