:root{
  --bg:#fbfafa; --bg-soft:#f4f3f3; --ink:#0b0b0b; --muted:#6f6f6f; --muted-2:#9a9a9a;
  --line:#ececec; --card:#fff; --black:#050505; --teal:#3bb3a0; --tile:#f0efee;
  --grad: linear-gradient(110deg,#061a4d 0%,#0f45b8 45%,#3d8bf0 80%,#8fd0ff 100%);
  --hero-grad: url(img/bg/blue-2.jpg) center/cover, linear-gradient(160deg,#08205e 0%,#1b5fd6 55%,#bfe6ff 100%);
  --pill:999px; --max:100%; --gutter:clamp(16px,4vw,96px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
section[id]{scroll-margin-top:72px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-weight:500;letter-spacing:-.03em;line-height:1.1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border-radius:var(--pill);font:500 14px/1 inherit;font-family:inherit;border:1px solid transparent;cursor:pointer;transition:opacity .15s,scale .15s;white-space:nowrap}
.btn:hover{opacity:.88}
.btn:active{scale:.97}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-dark{background:var(--black);color:#fff}
.btn-light{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-outline{background:#fff;color:var(--ink);border-color:#d6d6d6}
.btn-ghost{background:transparent;color:#fff;border-color:#333}
.btn-grad{background:var(--grad);color:#fff}
.eyebrow{font-size:11.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.note{font-size:12px;color:var(--muted-2);margin-top:14px}
.center{text-align:center}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:18px;line-height:1;letter-spacing:-.04em}
.logo i{width:18px;height:18px;border-radius:5px;background:var(--grad);display:block}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(251,250,250,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;height:52px;gap:24px}
.nav-links{display:flex;gap:24px;margin:0 auto;font-size:11.5px}
.nav-links a:hover{color:var(--muted)}
.nav .btn{height:30px;padding:0 14px;font-size:11.5px}
.nav .logo{font-size:16px}

/* chips & progress */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--pill);font-size:10px;background:#e3f6f1;color:#2f9c88;transition:background .3s,color .3s}
.chip.wait{background:#fff4e0;color:#b7791f}
.chip.mod{background:#e6efff;color:#1f63d6}
.chip.wait::before,.chip.mod::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{rotate:360deg}}
.bar{display:inline-block;width:110px;height:4px;background:#eee;border-radius:4px;vertical-align:middle;margin-left:12px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--teal);border-radius:4px;transition:width .25s linear}

/* before / after slider */
.ba{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/3;user-select:none;touch-action:pan-y;cursor:ew-resize;background:#ddd}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;translate:-1px 0;pointer-events:none}
.ba .handle::after{content:"‹ ›";position:absolute;top:50%;left:50%;translate:-50% -50%;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:14px;letter-spacing:2px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.ba .tag{position:absolute;top:12px;font-size:11px;background:rgba(0,0,0,.55);color:#fff;border-radius:var(--pill);padding:4px 10px;backdrop-filter:blur(6px)}
.ba .tag.l{left:12px}.ba .tag.r{right:12px}

/* footer */
footer{padding-bottom:40px}
.f-row{display:grid;grid-template-columns:1fr;gap:18px;padding:40px 0;border-bottom:1px solid #e6e6e6}
.f-label{font-size:15px;color:#7a7a7a}
.f-muted{font-size:15px;color:#7a7a7a;max-width:680px;margin-top:4px}
.f-pills{display:flex;gap:8px;flex-wrap:wrap}
.f-pills a{font-size:13px;border:1px solid #e3e3e3;border-radius:999px;padding:10px 18px;transition:background .2s,color .2s}
.f-pills a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.f-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:20px;font-size:12px;color:#7a7a7a}
.f-bottom a:hover{color:var(--ink)}

@media (max-width:900px){
  .nav-links{display:none}
  .nav .wrap{justify-content:space-between}
}
[hidden]{display:none!important}