:root{
  --teal:#1D9E75; --teal-d:#0F6E56; --teal-l:#5DCAA5; --teal-bg:#E1F5EE;
  --ink:#0D1013; --ink-2:#17191C; --page:#F4FBF8;
  --t1:#15171A; --t2:#5F5E5A; --line:#D3D1C7;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Noto Sans JP','Noto Sans KR','Noto Sans SC',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--t1); line-height:1.55; background:#fff; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.ja-only,.vi-only,.ko-only,.zh-only{display:none}

/* nav */
.nav{position:sticky; top:0; z-index:20; background:rgba(13,16,19,.92); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid rgba(255,255,255,.07)}
.nav .row{display:flex; align-items:center; gap:14px; height:62px}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:500; font-size:17px}
.brand .mark{width:32px; height:32px; border-radius:9px; background:var(--teal); display:flex; align-items:center; justify-content:center}
.nav nav{display:flex; gap:20px; margin-left:14px; font-size:14px; color:#9AA0A6}
.nav nav a{text-decoration:none}
.nav nav a:hover{color:#fff}
.nav .right{margin-left:auto; display:flex; align-items:center; gap:12px}
.langsel{appearance:none; -webkit-appearance:none; color-scheme:dark; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.22); border-radius:9px; padding:8px 12px; font-size:13px; font-family:inherit; cursor:pointer}
.langsel option{background:#17191C; color:#fff}
/* flag strip */
.flagstrip{margin-top:30px}
.flagstrip .cap{font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 0 12px}
.flags{display:flex; flex-wrap:wrap; gap:9px 11px; align-items:center}
.flag{height:19px; width:auto; border-radius:2px; opacity:.92; transition:opacity .15s, transform .15s}
.flag:hover{opacity:1; transform:translateY(-2px)}
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:11px; padding:10px 16px; font-size:14px; font-weight:500; text-decoration:none; cursor:pointer; border:none}
.btn-teal{background:var(--teal); color:#fff}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.22)}
.btn-white{background:#fff; color:var(--teal-d)}

/* hero */
.hero{background:radial-gradient(90% 70% at 88% -10%, #1B4B37 0%, var(--ink) 58%); color:#fff; padding:46px 0 64px}
.hero .grid{display:flex; gap:30px; align-items:center; flex-wrap:wrap}
.hero .copy{flex:1 1 320px; min-width:280px}
.pill{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; padding:7px 14px; border-radius:999px; margin-bottom:20px}
.pill-teal{background:rgba(93,202,165,.14); color:var(--teal-l)}
.dot{width:9px; height:9px; border-radius:50%; background:var(--teal-l); display:inline-block; animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(93,202,165,.55)}70%{box-shadow:0 0 0 9px rgba(93,202,165,0)}100%{box-shadow:0 0 0 0 rgba(93,202,165,0)}}
.h1{font-size:clamp(34px,6vw,52px); font-weight:500; line-height:1.06; letter-spacing:-.02em; margin:0 0 18px}
.accent{color:var(--teal-l)}
.sub{font-size:clamp(15px,2.4vw,17px); color:#B7BCC2; margin:0 0 26px; max-width:430px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.hero .art{flex:0 0 300px; display:flex; justify-content:center}

/* sections */
.section{padding:56px 0}
.section.alt{background:var(--page)}
.section.teal{background:var(--teal-d); color:#fff}
.section.dark{background:var(--ink-2); color:#fff}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; padding:7px 14px; border-radius:999px}
.center{text-align:center}
.h2{font-size:clamp(24px,4vw,32px); font-weight:500; line-height:1.15; letter-spacing:-.01em; margin:14px 0 0}
.split{display:flex; gap:34px; align-items:center; flex-wrap:wrap}
.split .copy{flex:1 1 300px; min-width:270px}
.split .art{flex:0 0 200px; display:flex; justify-content:center}
.feat{list-style:none; padding:0; margin:18px 0 26px}
.feat li{display:flex; gap:12px; align-items:flex-start; font-size:15px; margin:0 0 13px}
.feat i{flex:0 0 auto; margin-top:1px}
.muted-teal{color:#CFEFE3}
.muted-dark{color:#B7BCC2}

/* steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.step{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 16px; text-align:center}
.stepc{position:relative; width:46px; height:46px; border-radius:14px; background:var(--teal-bg); color:var(--teal-d); display:inline-flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:12px}
.stepn{position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; background:var(--teal); color:#fff; font-size:11px; font-weight:500; display:flex; align-items:center; justify-content:center}
.step h3{font-size:15px; font-weight:500; margin:0 0 5px; color:var(--t1)}
.step p{font-size:13px; color:var(--t2); margin:0}

/* footer */
.foot{background:var(--ink); color:#fff; padding:40px 0 30px}
.foot .top{display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between}
.foot .links{display:flex; gap:26px; flex-wrap:wrap; font-size:14px}
.foot .links a{color:#9AA0A6; text-decoration:none}
.foot .links a:hover{color:#fff}
.foot .legal{margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; color:#7A8089; display:flex; gap:18px; flex-wrap:wrap}
.foot .legal a{color:#7A8089; text-decoration:none}
.foot .legal a:hover{color:#fff}

/* legal/terms page */
.legal-hero{background:var(--ink); color:#fff; padding:48px 0 36px}
.legal-hero h1{font-size:clamp(26px,4vw,36px); font-weight:500; margin:10px 0 6px}
.legal-hero .updated{font-size:13px; color:#9AA0A6}
.legal-body{max-width:760px; margin:0 auto; padding:40px 24px 70px}
.legal-body h2{font-size:19px; font-weight:500; margin:30px 0 10px; color:var(--t1)}
.legal-body p{font-size:15.5px; color:#33352F; margin:0 0 14px}
.legal-body ul{margin:0 0 16px; padding-left:22px}
.legal-body li{font-size:15px; color:#33352F; margin:0 0 8px}
.legal-body a{color:var(--teal-d)}
.legal-state{font-size:14px; color:var(--t2); padding:20px 0}

@media (max-width:760px){
  .nav nav{display:none}
  .hero .art{flex-basis:100%}
  .steps{grid-template-columns:repeat(2,1fr)}
  .split .art{flex-basis:100%; order:-1}
  .section.dark .split{flex-direction:column}
}
@media (max-width:430px){
  .steps{grid-template-columns:1fr}
}