:root {
  --ink: #0E1319;
  --surface: #1B2430;
  --surface-glass: rgba(35, 46, 60, 0.6);
  --surface-2: #232E3C;
  --surface-3: #2B3747;
  --hairline: rgba(247, 247, 242, 0.09);
  --teal: #4FD1C5;
  --teal-bright: #6FE3D6;
  --violet: #8D7FE0;
  --amber: #F2A65A;
  --cream: #F7F7F2;
  --muted: #9AA7B5;
  --grad-iris: linear-gradient(135deg, var(--teal-bright), var(--violet));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: -apple-system, "SF Pro Rounded", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.ambient { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; opacity: 0.28; }
.ambient-a { width: 480px; height: 480px; top: -200px; left: -160px; background: radial-gradient(circle, var(--teal) 0%, transparent 70%); }
.ambient-b { width: 460px; height: 460px; top: 400px; right: -200px; background: radial-gradient(circle, var(--violet) 0%, transparent 70%); }
.ambient-c { width: 400px; height: 400px; bottom: -180px; left: 30%; background: radial-gradient(circle, var(--amber) 0%, transparent 70%); opacity: 0.14; }

/* ---------- nav ---------- */
nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  backdrop-filter: blur(14px);
  background: rgba(14, 19, 25, 0.72);
  border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: 0.01em; }
.brand-dot, .brand img { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.brand-dot {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAARwElEQVRogdWZa5Ac1XXHf7e7570zs7M7+9aupBWSdqUFIRBCAgkn2GDjchxDwDgC4jfC/h7HruAULoxjh3xwVT4YY6eMH7whdtkEx8EuiI0EFgKEVg9Wq9eu9v2anffsdPc9+dAzvSuwsJNgV+VWzUx3z7l9//9zzj2Pbvh/PtS7daPPjRxOVZbsqw3D2CRKbRAkKbZu0WiUYc6iyCqRIcdxjlmR4L6H1m5dfDfW/T8RuOvcoS5dNe5wnOoeZZoDoFQ1X6gWz00a1UzOckplEDAiYQKNcSfa3a6teCwogta2c8QMmA/bmD96rO+yiT8pgb2nj2zRrn03yrjJKZf19IuvWguHjpM9Mkw1X/CExPvyfsS7JIKViJHsv4jGyzZJ89WXu2YoZIg4TxlG4KsP928b/KMSuHPoYFpZ1v2i1MeLY9POmSeeDcy9/AbadlZISQ18DX6dyAoS3jkYAZOmHZey6uYb7FBnqyXI92xDfeHH/VfOv+sEPntq8EOI80MnX4qd+O6TgZl9r3ngVtxh7Z9fyfhLb7BULq8gIjUDCFYgSFv3es6dHFy+LoIoSO+6nNWfvNk2o+GiDpi3Pb1px7PvDgERtffs4ftE+OL0f70iJ779uOFUlgBIdneQH59BtAYg3bcWQ5tMnxj2gHnza7cRmjq6EFuzMDuOiGAoRVvPRUycedOzSCzM2s/cqpt3b1OC3PfU5h3/gFLyTvDMd/rznueft9a7ue8J8vmhbz1mnHn0GaUdF4VCKUUoHqMhnaa8mAWlqJbKdG3cxPzICChQalk/Silae3qZHx/F1Q4K6Nm0lWqlTDGbAQVStVl4+XVlZ7IqsXVg96apc2sGrv3AM8eefPKCJIx30vxkd9O/inZvG7zvAWPyl/tRpokZDIBSgCI/MUOyrQ3DMFAK3MoSwWDkPPBKqZo8WFYQ26kCCmUYtHauYebcKU8eMK0AyrSYeW4fw994QGnRdzgbur6DyAU95YIE9p49fJ9Wcvvg1x8051875gkbBs1rezBMVQOoyJyboKmz2ycljmCalgeyTqI2F0dqpKBr/WYmTh2vObFCGSYtq9Zi1OYsHjzC8P0PmgKf+PDgvq/8jwh89tTgh0T44tC3HjEWXj3qa1I7LtmxKZq6ulHKA5idmCDV2um7VX5mmsam9prSFcozBw2NTRQXM/6ua+/ZwMTIiZoMpDt7yExPoF3HJ509eITR7z6q0Nz9kcMv3fAHEbhz6GAacX44/cIrMvHcS1iREIFIpKZRsMsVlgpFEulWqJOYmaKpZRUoxfzkGC3p1b58HXC8uYVcdhaFoqN3IzMjw/4GTzS3UikWWaoUfRxWKIgZCDDzixdZfPFVYcl5+Mbf/rb59xIQy7rfKZQahh58zFCAYZps/vB1JNpaqLtFcTFDIBgi2pAApViYPke6tQeFopjL0BBp8l2jboVINEG5lAeg66LNjJ323DIcixMIhsgvzvohMZZMcdElOzGUhUJx9tuPGpKvNJg4X39HAntPH9milPr4iQefsJxyBYBqsczgU/9Oe18f3QMXe4JKsTA5QbyxhUAgBCjymVkaG9tRKAxl1hyjNhSI9ui0dK9lbvQMojVWIEAq3c7C9Jgv2rJqLe09Gzjx2ovYVQ+DrlQY+cGTAaWNT9+675WBCxLQrn13cWLWmdn/OitThNaa4V//Bly4+JrrMJUBSpifGiWd7sZQBrMzI7Q194KC7OIMoUC0zhUrGKRcyAKwuu9SRoYHUcqguXM1s+NnEBGUMljdfxmWGeTUkQPoWm6pj9l9B6iOTzuG7fz97yRw17lDXSjjpjOP/iwgWpPsbifR1X7eTc69OcjY8SNs3f0XhMIxtHZZyEyRbupBi2Z+fhTDsBg+e4Alu+TPc6pVJkdOYFoW4yeOIdqlubOH7MwkruMQCIbYsPVqMtNjTI6cOG/N9rXr6eztAxFGf/JswMD46O2/PtjxNgK6atzhlMt69qVDgJAbm8Kygqy7eidN3d2ekEBmdpLBA79kyyXXkUp2Ul0qUioXCFoh5rLjXhQRobpUZqmUp1wqYC9VQATXcZgcGSIQDlMp5KmUi8SSKXoHtnPm2EFyC7PLwNdcxM4P/jXxhiamznqk5g6+ilupatPmtrqc5WvJqe6ZfvGgpW3bs7sWFkZGyZwbI9XRxbpLryQ3N8P8xAhLlSIHX/kpl/RfRyycYmzqKAKIdinlFymX8n794xdyIoQiMSLRJHalgl0uk+5aTbwxzfDr+3C1i1LQ0buRrnUDzI6e5uX/eBxxXb8Q1LbN3IFXzc4rdu4B/pm6o3/izOuNlqvmB7/xoDH38iEvPNYTkVqO5anmdto61lHMZpiYPAniEo+1kC/O4To22cwM2nWxLBPX9XxYRBDR3kdrDGUST6UxTJNwNE6pkEUpRU//JbR3r2f8xFFGTg6C6NpcanWVp4S2y7ez5VOf01I2mh+6ceuiAaBsvUtEjMWjwwAkVnUQSSVRlrU8GSEzP8XQ0f0UCxk2rNlOU2IVueIsWrtkMzO0t6Z5/EcPsP+Fn/HN+79CKBxGGQZK1T8KVzvkMjNorSkXc3Su28gV772RcjbPSz9/nNGTg35+AC+Mx5KNNHesAmBh6DiGKMOynKt8FzIMY1M1X6zauUIQFIWJacLxBhpbW7ECIRCFXSpRLuWxKxUyi1NkFqcwzACIUMxn0K7DHbfdwrreNQBcfdV2rn/vNTzz81+B8upuqSU+13UoF7NEY0mmR04xfvJNH7QVDBKKxgnHYhjKQlyHcj7L4swUglDNZ3HyBTsSTfQDz1oAGtYXz00aiIAC7bqUFnOUs3lQCkMZhMIxYpEkgUQ7SgyqdpnF7BSIUCkVUEp59U5tKBSGaaGUB9yrrZdDc6VYIBxLILZNsqWNUCiCCFQrZSqFHHOZeUS7yIo9VG+USlNThNYkNvgWENHppfmsVe9PREApz3GUgEZTKeepVAq1/QCmaSEi2EsVRDRKmTzy+I/ZeeXldHa08dobR/jl87/BX7UexupH4mJXKwQDYQrz8yy6Vc9dZXnjC2+ZXiefzVrK0ellAo4knUqFepfkKUyhBERJ7Vehat0TAq7jFV2uU/WaLxFGR8e48dZPE2+Iky8W/Os+MP/cw6UdGwmEcF37PKDLW8Ajs3JPiIAulZRySfoE/DuuNEHd4qJWkPBkapdrMz1wqhZttAu5XLY+2Y9CK4OB+KBUbekV4fYtxhKW16mDVBpM13PX2reRNcMh/8b+JFnWgN+g147NQMBrCw3zvDCp/Y+L1t410cv/r7SIYZiAYIVCKzS8kuQKv1lxHAg2iIHKLruQoeaspoSDYPnaxusBvN7VoCHVRENTC5FYEkOgnMsxMTKEFfQW11qjDFDIsnlWWEhEE4+YZIuOt2dQWIEwgpDu7SGSTIIL5Wye3Mw0xYU5tPsWy9VIROJJR2HO+QSUyHC0q10LghKFEQyQaEqTTLcRDERRKAqL82SnppksDPngDGUgCKFIA5VSDjSgVE1ZylebiHDr9lbuvLaTv3ngCCOzRcLROCjBtCwmjw75csFIhGSqlba+tZhmELdqk81Mk5kfY2mpjIiQbO4i4KgTyxZwnWOBRCwYiMew80U6ezZSzGUYP3EMx7E9OCsa9Gi8kXhTmuJihmJugWhDHLtSxHUdb7NzvgUQ4eWTGaJBmMqUMQyTSEMCREhvWEvHQD9jr7zBzMlTLJVKzJTOMD12GkQwrQCphna6Wvo5PfYa4ViCcCgeENs97hMwwsEXnSVXJzevN+Zeep3Rk4f9cFn/FYFoopFkqoVyMc/M6GnPLVLN5DPzxBtbyGVmPBKcP0SE09NFTk3lMUyLeFOr50LRMFNHhpg+OkTnpgF23HQr48eOMnp8ORs7dpXZzAgzC2cREdp6N6NctMbd72/ih9ZuXdS2c6Rx6+a6zc/b0LFkI20967DMAFOjJ1mcmwIFl+x+P4mmdi8KmSaJ5jbC0QZvntaIdtHa9RNSOBonmW7HNEwECEUjNPf2ICjGBg/z8r89jrvksPO6j9Lbv632oOD86NSxbqtgu29885Pew2E/daqg9Wh69zZXBS1fg7HGNO1r1qPEZOrsMNmFabTWhMIRtr33I5w7dpixk4Oku1YTicZRKKINjaTaVtGQaiGaaCIWT5FItZJq7SYaT6FQhJJxmnq7KczMk5uao613HWbQQrQwduoY+3/xGKV8lvdcczsb11+NYRiICKYZYM2mna5lBR/292H9wKT6QzMUMpqvvBREiDYkEcdm8vSb5DKzvkVSrR1s2f1BDv36WeZnx4gmGoknmykVs8SSjSjDi+3BYJhwJEYo2oAVDKMQzIBF6+b1VBZzxNMtxJqbqBYKTJ85RbpzLeFYg2/9yXMneP6F71PIzdPV2gfA6oGrsKyIspbkkbcR+MHGq8ZF3Ke7P/YhG6Uo5hYo5DLn5YLVm7aypu8yDjz3FJVSAcsKsGrdAGeOvYpCEUs047ou67ZuJxiK+DHfCFgkOtpwqlW6Lt6MUoqRAwfp7OvHCoXQtsPU2RPEEk00Nnfg1xAijE0eZ3TyKArFwK6bbMPVT3xt76bJtxEAMAzr3lB7i5Xetc2rnWq+pwyDi3ddj1u1ee2Fn6JdFwX0DlzBmaOvoF2XhlQzuflpECGZamepUvRzgFutEox4hM4dOET3lkvQrnDm4EHWbdlWa/o1sxNncKpLdHRc5Ee9uuXXXrKbxlSnZbrqq+dhXnnycP+2QUG+t+bTt9hmJAQIwUiU7dffzOixQ4yeOFxLSsLq/q1Mnj1BpeQ9y4nEkhTzi57y/IyLvwnrHdrM8Clae9ahDEW1XGJieIg1Gy/zM28+N8f8/Did7X0YhtePBMJRtr/vkw4u3/nHuzYfuyABANtQXzCj4WLv3j1aRNC2w6u/+gmZuUkffHPnaiqFPNn5KUBoaGyikJn1jlNN5Ofnfdm6CzrFMoGgl3nHjgzSfdEAIkJ2fppyIUtb+zqf7NJSkfHJIRAXAa764F4dCMZyUZMvvRXv2wj8uP/KeR0wb2u+5grVdv01VKtlliolv7WLJVMkm1qZOPumDzCaSJHPeqCbu3qYmThTq9+XSZRyOSLROCLC+PBxulZv9LK2CJOjQySTbcQb0p7biKC1jeO69F3+Adb071KGYe655zObF34vAYCnN+14Viv52uo7b5XGywd8MGYwQPf6AU4fOeADiyWbKWQW/D2TaukkMzteK8eWC8BKMU8o0uDfa+z0m3R3b6Je4wwP7Wdt1xYsM1gjDt0btrHj/Z/Vllb3fuPO/l/8LqwXfDr99KYdX0YZ31//d3vd5LYBBEG7mpOvv4R2Xb9DakikyGfmlkmK4T9akVpIlFpiU6L889HhQ/T0XOy7mOu6HDv5G6+CxQN/7V/9ras0D923t++eC+G88PsBpcR889xnUMYPNnzp87rl+l24dpVqteIDiyQbKeUXETSCEAhHqBZLy75fd6N6NHJsTMMCBK2FqfFhVrX2+dGuWi3juEv0Xf4Brr35i2KI9f1Tzf13vtNbmj/oFdNfDu67RzRfzrx4UM5++xHDLZW9uJ9MUcot+gA61/ehHMXYmWNvaQW9k1i8GeUK+eJ8TUcGq9r7GR0fRIBgOMLOG+6StZt2YWl17317++75fa+Y/uCXfB85/NINLDkP60I5PvrQE9bsvlf8d2P10b/jzzh96MB5j8lXtoemGaAp0cHMwsj5fypF7yXvYfv7PuEEgrGcYZh7LuTz/2sCALfs39+kTf7J0OpT1fEZZ+QnzwRmDxxE2/ZbJOVtp7LyWg24YQVZs3knF+++xU6m2i1cvhM1+dLvijbvCoH6uHXfKwOm49ytMG/Rlaqe/e1Bc37wDbXw5nGq+TxvgbuSBaFYgrbezXSu2yprNl/lWlZEGY5+0tTq3rcmqT8agfr42H++1hky9R6puntMZW0xRBlOvmAXJ6dYymQCbqUMoggGIkQTKTvZvIpwKB5QLhrbfcOygg9bS/LIytrmT0pg5bjzuYNJXZGrTWVtwjU2KCFF1U6b2sAwrDmljQXLVcPacY+6ZmTfv9y+Pvdurf3/evw3lzqvMVwGXBkAAAAASUVORK5CYII="); background-size: cover; background-position: center; }
.mock-ring-wrap { position: relative; width: 108px; height: 108px; margin: 14px auto 6px; }
.mock-ring-halo { position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient(circle, rgba(79,209,197,0.28) 0%, transparent 68%); }
.mock-ring { width: 108px; height: 108px; transform: rotate(-90deg); position: relative; z-index: 1; }
.mock-ring-track { fill: none; stroke: var(--surface-2); stroke-width: 8; }
.mock-ring-progress { fill: none; stroke: url(#mockRingGrad); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 282.6; stroke-dashoffset: 90; }
.mock-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mock-ring-num { font-family: ui-monospace, monospace; font-size: 26px; font-weight: 700; }
.mock-ring-unit { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.mock-ring-label { text-align: center; font-size: 11px; color: var(--muted); margin: 6px 0 14px; }
.mock-row { display: flex; align-items: center; justify-content: space-between; background: var(--surface-glass); border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
.mock-row-title { font-size: 12px; font-weight: 650; }
.mock-row-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }
.mock-switch { width: 32px; height: 18px; border-radius: 20px; background: var(--grad-iris); position: relative; flex-shrink: 0; }
.mock-switch::after { content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); right: 2px; top: 2.5px; }
.mock-switch.off { background: var(--surface-3); }
.mock-switch.off::after { background: var(--cream); left: 2px; right: auto; }
.mock-stats { display: flex; gap: 5px; margin-top: 10px; }
.mock-stat { flex: 1; background: var(--surface-glass); border: 1px solid var(--hairline); border-radius: 9px; padding: 7px 3px; text-align: center; }
.mock-stat b { display: block; font-family: ui-monospace, monospace; font-size: 12px; }
.mock-stat span { font-size: 7.5px; color: var(--muted); }
.float-chip {
  position: absolute; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 10px 14px; font-size: 12px; font-weight: 600;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  animation: floaty 4.5s ease-in-out infinite;
}
.chip-a { top: 10px; left: calc(50% - 220px); animation-delay: 0s; }
.chip-b { bottom: 30px; right: calc(50% - 230px); animation-delay: 1.2s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 720px) { .float-chip { display: none; } }

/* ---------- features ---------- */
.section { position: relative; z-index: 1; padding: 70px 24px; }
.section-head { text-align: center; max-width: 560px; margin: 0 auto 46px; }
.eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); font-weight: 700; margin-bottom: 10px; }
.section-head h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 750; letter-spacing: -0.01em; margin: 0 0 12px; }
.section-head p { color: var(--muted); font-size: 15.5px; margin: 0; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 860px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  background: var(--surface-glass); border: 1px solid var(--hairline); border-radius: 18px;
  padding: 24px 22px; transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-spring);
}
.feature-card:hover { border-color: rgba(79,209,197,0.28); transform: translateY(-3px); }
.feature-icon {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--grad-iris); color: var(--ink); margin-bottom: 16px;
}
.feature-card h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 8px; }
.feature-card p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.55; }

/* ---------- how it works ---------- */
.steps { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.step { display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid var(--hairline); }
.step:first-child { border-top: none; }
.step-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace; font-size: 13px; color: var(--teal); font-weight: 700;
}
.step h4 { margin: 3px 0 6px; font-size: 15px; }
.step p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* ---------- languages ---------- */
.lang-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 640px; margin: 0 auto; }
.lang-pill {
  font-size: 13px; color: var(--muted); background: var(--surface-glass); border: 1px solid var(--hairline);
  padding: 8px 16px; border-radius: 99px;
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; z-index: 1; margin: 40px 24px 0; padding: 56px 32px;
  text-align: center; border-radius: 28px;
  background: linear-gradient(135deg, rgba(79,209,197,0.14), rgba(141,127,224,0.14));
  border: 1px solid var(--hairline);
}
.cta-band h2 { font-size: clamp(24px, 3.6vw, 32px); margin: 0 0 12px; font-weight: 750; }
.cta-band p { color: var(--muted); margin: 0 0 26px; }

/* ---------- footer ---------- */
footer { position: relative; z-index: 1; padding: 50px 24px 40px; border-top: 1px solid var(--hairline); margin-top: 60px; }
.footer-inner { max-width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.footer-brand img { width: 22px; height: 22px; border-radius: 50%; }
.footer-links { display: flex; gap: 24px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.footer-links a { text-decoration: none; transition: color 200ms var(--ease-out); }
.footer-links a:hover { color: var(--cream); }
.footer-copy { font-size: 12.5px; color: var(--muted); margin-top: 24px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}