:root{
  --bg: #f7fbf8;
  --bg-1: #eef7f1;
  --bg-2: #e6f3eb;
  --surface: rgba(255,255,255,0.72);
  --surface-strong: rgba(255,255,255,0.92);
  --border: rgba(22,101,52,0.14);
  --border-soft: rgba(22,101,52,0.08);
  --brand-300: #4ade80;
  --brand-400: #22c55e;
  --brand-500: #16a34a;
  --brand-600: #15803d;
  --teal-900: #d8f3e4;
  --teal-700: #b8e6cc;
  --logo-blue: #2f7dfd;
  --text-0: #0a1210;
  --text-1: #3d4f47;
  --text-2: #5c7268;
  --text-3: #7a9086;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --container: 1180px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
section[id]{ scroll-margin-top: 64px; }
body{
  background:
    radial-gradient(ellipse 90% 55% at 15% -5%, rgba(34,197,94,.22), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 10%, rgba(74,222,128,.12), transparent 50%),
    linear-gradient(165deg, #e8f8ee 0%, var(--bg) 42%, #ffffff 100%);
  background-attachment: fixed;
  color: var(--text-0);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
html[data-lang="zh"] body{
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
}
html[data-lang="ko"] body{
  font-family: "Inter", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, sans-serif;
}
/* CJK: avoid English-style gaps between title segments */
html[data-lang="zh"] .hero-title .word,
html[data-lang="zh"] .hero-title .word.accent-word{
  margin-right: 0;
}
html[data-lang="zh"] .hero-title,
html[data-lang="ko"] .hero-title{
  word-break: keep-all;
  overflow-wrap: break-word;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer;}

/* ---------- background texture ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.018; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- scroll progress bar ---------- */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:200;
  background: linear-gradient(90deg, var(--logo-blue), var(--brand-400));
  box-shadow: 0 0 10px 1px rgba(34,197,94,.35);
  transition: width .12s linear;
}

/* ---------- side dot navigation ---------- */
.dot-nav{
  position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:90;
  display:flex; flex-direction:column; gap:14px;
}
.dot-nav button{
  width:9px; height:9px; border-radius:50%; border:1px solid var(--border);
  background: rgba(255,255,255,.7); padding:0; transition: all .35s var(--ease); position:relative;
}
.dot-nav button::after{
  content: attr(data-label); position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:11.5px; font-weight:600; color: var(--text-1); white-space:nowrap;
  background: rgba(255,255,255,.96); border:1px solid var(--border); padding:5px 10px; border-radius:8px;
  box-shadow: 0 8px 20px -10px rgba(22,101,52,.25);
  opacity:0; pointer-events:none; transition: opacity .25s var(--ease);
}
.dot-nav button:hover::after{ opacity:1; }
.dot-nav button.active{ background: var(--brand-400); border-color: var(--brand-400); box-shadow: 0 0 8px 1px rgba(34,197,94,.4); transform: scale(1.3); }
@media (max-width: 980px){ .dot-nav{ display:none; } }

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

/* ---------- nav ---------- */
.navbar{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 18px 0;
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.navbar.scrolled{
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
  padding: 12px 0;
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap: 24px;}
.logo{display:flex; align-items:center; line-height:0;}
.logo svg{width:148px; height:auto; display:block;}
.nav-links{display:flex; align-items:center; gap: 34px; list-style:none;}
.nav-links a{
  font-size: 14.5px; font-weight:500; color: var(--text-1);
  transition: color .25s var(--ease); position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1.5px;
  background: var(--brand-400); transform: scaleX(0); transform-origin: left center;
  transition: transform .35s var(--ease);
}
.nav-links a:hover{color: var(--text-0);}
.nav-links a:hover::after{ transform: scaleX(1); }
.nav-actions{display:flex; align-items:center; gap:14px;}
.lang-select{
  position: relative;
  flex-shrink: 0;
  z-index: 30;
}
.lang-select__trigger{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-0);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px 7px 14px;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.lang-select__trigger:hover{
  background: var(--surface-strong);
  border-color: rgba(22,101,52,.22);
}
.lang-select.is-open .lang-select__trigger{
  background: var(--surface-strong);
  box-shadow: 0 1px 3px rgba(22,101,52,.1);
}
.lang-select__chevron{
  flex-shrink: 0;
  color: var(--text-2);
  transition: transform .25s var(--ease);
}
.lang-select.is-open .lang-select__chevron{
  transform: rotate(180deg);
}
.lang-select__menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(10,18,16,.1), 0 2px 8px rgba(22,101,52,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lang-select__menu[hidden]{
  display: none;
}
.lang-select__menu li{
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-1);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang-select__menu li:hover{
  background: rgba(34,197,94,.1);
  color: var(--text-0);
}
.lang-select__menu li.is-active{
  background: rgba(34,197,94,.14);
  color: var(--brand-600);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 22px; border-radius: 999px; font-size: 14.5px; font-weight:600;
  border: 1px solid transparent; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  white-space: nowrap; will-change: transform;
}
.btn-primary{
  background: linear-gradient(180deg, var(--brand-400), var(--brand-500));
  color: #ffffff;
  border-color: transparent;
  box-shadow: none;
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: none;
}
.btn-secondary{
  background: var(--surface); border-color: var(--border); color: var(--text-0);
}
.btn-secondary:hover{ background: var(--surface-strong); transform: translateY(-2px); }
.btn-sm{ padding: 9px 18px; font-size: 13.5px; }

.nav-cta-mobile{display:none;}

/* ---------- coming soon modal ---------- */
.modal{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  pointer-events: none;
  visibility: hidden;
  overscroll-behavior: contain;
}
.modal.is-open{
  pointer-events: auto;
  visibility: visible;
}
.modal[hidden]{
  display: none !important;
}
/* Solid fade only — page content uses filter:blur instead of backdrop-filter */
.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(10, 28, 18, .42);
  cursor: pointer;
  opacity: 0;
  transition: opacity .28s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.modal.is-open .modal__backdrop{
  opacity: 1;
}
.modal__panel{
  position: relative;
  z-index: 1;
  width: min(100%, 400px);
  max-height: min(80dvh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 36px 32px 32px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.65) inset,
    0 24px 64px -20px rgba(22,101,52,.28);
  text-align: center;
  transform: scale(.96) translateY(10px);
  opacity: 0;
  transition: transform .36s var(--ease), opacity .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.modal.is-open .modal__panel{
  transform: scale(1) translateY(0);
  opacity: 1;
}
.modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.modal__close:hover{
  background: var(--bg-1);
  color: var(--text-0);
  border-color: var(--border-soft);
}
.modal__icon{
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(34,197,94,.16), rgba(34,197,94,.06));
  color: var(--brand-500);
  border: 1px solid var(--border-soft);
}
.modal__panel h3{
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-0);
  margin-bottom: 10px;
}
.modal__panel p{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-1);
}

body.modal-open{
  overflow: hidden;
  overscroll-behavior: none;
}
html.modal-open{
  overflow: hidden;
  overscroll-behavior: none;
}

/* Soften page content behind modal (works on mobile; avoids backdrop-filter lag) */
body > :not(.modal):not(script){
  transition: filter .32s var(--ease);
}
body:has(.modal.is-open) > :not(.modal):not(script){
  filter: blur(6px);
}

@media (max-width: 980px){
  body:has(.modal.is-open) > :not(.modal):not(script){
    filter: blur(4px);
  }
  .modal__panel{
    width: min(100%, 360px);
    padding: 32px 22px 26px;
  }
  .modal__panel h3{ font-size: 20px; }
  .modal__panel p{ font-size: 14px; }
}

/* ---------- hero ---------- */
.hero{
  position: relative; padding: 190px 0 140px; overflow: hidden;
}
.hero-glow{
  position:absolute; inset:-10% -10% auto -10%; height:900px; z-index:0; pointer-events:none;
}
.hero-glow::before, .hero-glow::after{
  content:""; position:absolute; border-radius:50%; filter: blur(110px);
}
.hero-glow::before{
  width:640px; height:640px; left:8%; top:0;
  background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.32), rgba(34,197,94,0) 70%);
}
.hero-glow::after{
  width:560px; height:560px; right:4%; top:80px;
  background: radial-gradient(circle at 60% 40%, rgba(47,125,253,.12), rgba(255,255,255,0) 70%);
}
.stripe-field{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.45;
  background: repeating-linear-gradient(115deg, rgba(22,163,74,0.06) 0px, rgba(22,163,74,0.06) 1px, transparent 1px, transparent 64px);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 20%, black, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 20%, black, transparent 75%);
}

/* ---------- hero liquid field (metaball goo) ---------- */
.liquid-field{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  --liquid-symbols: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><g fill='%2316a34a'><circle cx='8' cy='10' r='1.4'/><circle cx='28' cy='8' r='1'/><circle cx='48' cy='14' r='1.2'/><circle cx='14' cy='30' r='1'/><circle cx='36' cy='28' r='1.3'/><circle cx='50' cy='36' r='1'/><circle cx='10' cy='46' r='1.2'/><circle cx='30' cy='48' r='1'/><path d='M18 16h2v-3h3v-2h-3v-3h-2v3h-3v2h3z' opacity='.9'/><path d='M42 22h1.6v-2.4h2.4v-1.6h-2.4V15.6H42v2.4h-2.4v1.6H42z' opacity='.75'/><path d='M22 40l1.2-2.6 2.6-1.2-2.6-1.2L22 32.4l-1.2 2.6-2.6 1.2 2.6 1.2z' opacity='.85'/><path d='M44 44l.9-2 2-0.9-2-.9L44 38.2l-.9 2-2 .9 2 .9z' opacity='.7'/></g></svg>");
}
.liquid-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.liquid-pattern{
  position:absolute; inset:-8%;
  background-image: var(--liquid-symbols);
  background-size: 56px 56px;
  background-repeat: repeat;
}
.liquid-pattern-dim{
  opacity: .14;
  filter: saturate(.9);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 38%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 38%, #000 10%, transparent 78%);
}
.liquid-goo{
  position:absolute; inset:-12% -8% 20% -8%;
  filter: url(#liquid-goo);
  opacity: .42;
  mix-blend-mode: multiply;
}
.liquid-cell{
  position:absolute;
  left:50%; top:40%;
  width: 220px; height: 220px;
  margin: 0;
  border-radius: 42% 58% 52% 48% / 48% 42% 58% 52%;
  background:
    radial-gradient(circle at 35% 32%, rgba(134,239,172,.85), rgba(34,197,94,.45) 38%, rgba(22,163,74,.28) 68%, transparent 78%),
    radial-gradient(circle at 70% 70%, rgba(47,125,253,.18), transparent 55%);
  transform: translate(-50%, -50%);
  will-change: left, top, width, height, border-radius;
}
.liquid-cell:nth-child(2){
  background:
    radial-gradient