/* =========================================================
   Lánate — homepage (desktop). Tokens follow the app design
   system (Lanate-Design-System.lib.pen → lanate-design-tokens.md).
   v0.2: sky-led palette, soft blue-tinted elevation, no hard extrusions.
   ========================================================= */
@font-face { font-family: 'Metropolis'; src: url('../assets/fonts/Metropolis-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../assets/fonts/Metropolis-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../assets/fonts/Metropolis-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Metropolis'; src: url('../assets/fonts/Metropolis-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* app tokens */
  --ink: #010101;            /* color.text.primary / color.action.primary */
  --sky: #62C5FE;            /* color.brand.primary */
  --lime: #D2EF51;           /* color.brand.secondary (accent only) */
  --page: #F0F0F0;           /* color.background.page */
  --line: #E8E8E8;           /* color.border.card */
  --text-2: #707070;         /* color.text.secondary */
  --white: #FFFFFF;
  --error: #FF0000;          /* color.feedback.error */
  /* supporting blues (illustration palette) */
  --sky-deep: #008BD7;
  --sky-soft: #E8F6FF;
  --lime-soft: #F4FFD0;

  --font: 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(32px, 3.33vw, 64px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* soft elevation, tinted towards the brand blue */
  --e1: 0 1px 2px rgba(6, 38, 66, .06), 0 4px 12px -2px rgba(6, 38, 66, .08);
  --e2: 0 2px 6px rgba(6, 38, 66, .06), 0 14px 34px -10px rgba(6, 38, 66, .24);
  --e3: 0 4px 14px rgba(6, 38, 66, .08), 0 40px 80px -28px rgba(6, 38, 66, .45);
  --glass: rgba(255, 255, 255, .8);

  /* phone geometry (overwritten by JS from the viewport) */
  --ph: 684px; --pw: 316px; --ps: .86; --pr: 40px; --bez: 6px;
  --phone-ring: rgba(255, 255, 255, 0);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { margin: 0; font-family: var(--font); font-weight: 500; color: var(--ink); background: var(--white); overflow-x: hidden; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, h4 { margin: 0; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
i[data-icon] { display: inline-flex; font-style: normal; }
.noscript { padding: 40px; font-size: 18px; }
body.is-loading { overflow: hidden; }
::selection { background: var(--sky); color: var(--ink); }

/* ---------- buttons ---------- */
.btn-pill {
  height: 46px; padding: 0 20px 0 24px; border-radius: 23px; border: 0;
  background: var(--ink); color: var(--white); text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 14px/1 var(--font); letter-spacing: -.005em; white-space: nowrap;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .3s;
}
.btn-pill .ic { width: 18px; height: 18px; transition: transform .5s var(--ease-out); }
.btn-pill:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.btn-pill:hover .ic { transform: translate(2px, -2px); }
.btn-pill:focus-visible, .fab-btn:focus-visible, .faq-q:focus-visible, .lang button:focus-visible, .dl-card:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 3px; }
.btn-light { background: var(--white); color: var(--ink); }
.btn-lg { height: 58px; padding: 0 26px 0 30px; border-radius: 29px; font-size: 16px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 76px;
  display: flex; align-items: center; padding: 0 var(--gutter);
  color: var(--ink); background: var(--nav-bg, transparent);
  transition: color .5s var(--ease-out), background-color .5s var(--ease-out);
}
.nav.is-blur { backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.nav[data-theme="dark"] { color: var(--white); }
.nav-logo { display: block; width: 104px; color: currentColor; }
.nav-logo .logo { width: 100%; height: auto; }
.nav-links { display: flex; gap: 30px; margin-left: 56px; font-size: 15px; font-weight: 500; }
.nav-links a { text-decoration: none; position: relative; padding: 6px 0; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lang { display: flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; }
.lang button { height: 32px; min-width: 40px; border: 0; border-radius: 16px; background: none; cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: .02em; transition: background .3s, color .3s; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.nav[data-theme="dark"] .lang button[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.nav[data-theme="dark"] .nav-cta { background: var(--white); color: var(--ink); }

/* ---------- story stage ---------- */
.story { position: relative; height: 1000vh; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.bg, .scene { position: absolute; inset: 0; }
.bg-sky { background: var(--sky); }
.scene { z-index: 10; pointer-events: none; }
.scene a, .scene button { pointer-events: auto; }

.kicker { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 15px; background: var(--sky-soft); color: var(--ink); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.h-mod { font-size: clamp(40px, 4vw, 68px); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; }
.p-mod { font-size: clamp(17px, 1.35vw, 22px); line-height: 1.5; font-weight: 500; max-width: 28em; margin-top: 3vh; }

/* hero */
.sc-hero { z-index: 11; }
.hero-copy { position: absolute; left: var(--gutter); top: 16vh; width: max-content; max-width: 58vw; }
.mask { display: block; overflow: hidden; padding: .08em 0 .1em; margin: -.08em 0 -.1em; }
.mask-in { display: block; }
.hero-kicker { display: block; font-size: clamp(28px, 2.7vw, 48px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.hero-num { display: block; font-size: min(11.2vw, 19.5vh); font-weight: 700; line-height: .9; letter-spacing: -.055em; margin-top: .06em; }
.hero-num .mask-in { display: flex; align-items: flex-start; }
.hero-cur { font-size: .17em; letter-spacing: 0; margin: .3em 0 0 .25em; font-weight: 600; }
.hero-lead { font-size: clamp(20px, 1.6vw, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin-top: 4.2vh; max-width: 19em; }
.hero-sub { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; margin-top: 12px; max-width: 26em; opacity: .78; }
.dl-card {
  margin-top: 4.4vh; display: inline-flex; align-items: center; gap: 16px; padding: 10px 22px 10px 10px;
  border-radius: 22px; background: var(--ink); color: var(--white); text-decoration: none; pointer-events: auto;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.dl-card:hover { transform: translateY(-3px); box-shadow: var(--e3); }
.dl-qr { width: 76px; height: 76px; border-radius: 14px; background: var(--white); padding: 7px; }
.dl-qr svg { width: 100%; height: 100%; }
.dl-text { display: flex; flex-direction: column; gap: 6px; }
.dl-text strong { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.dl-text span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; opacity: .72; }
.dl-text .ic { width: 14px; height: 14px; }
.dl-arrow { margin-left: 10px; }
.dl-arrow .ic { width: 22px; height: 22px; transition: transform .5s var(--ease-out); }
.dl-card:hover .dl-arrow .ic { transform: translate(2px, -2px); }

/* why: blocks on the side opposite to the phone */
.why-block { position: absolute; top: 50%; translate: 0 -50%; width: min(35vw, 580px); }
.side-r { left: 56vw; }
.side-l { left: var(--gutter); }
.pt-kicker { font-size: 14px; font-weight: 600; opacity: .62; letter-spacing: -.005em; }
.pt-meta { display: flex; align-items: center; gap: 14px; margin: 2.6vh 0 2.4vh; font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.pt-bar { position: relative; width: 120px; height: 3px; border-radius: 2px; background: rgba(1, 1, 1, .14); overflow: hidden; }
.pt-bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.pt-t { font-size: clamp(36px, 3.4vw, 58px); font-weight: 600; line-height: 1.04; letter-spacing: -.04em; }
.pt-d { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.55; margin-top: 2.6vh; max-width: 28em; opacity: .82; }

/* rig: phone + attached elements */
.rig { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 12; }
.rig-back, .rig-front { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.rig-back { z-index: 1; }
.phone { position: absolute; z-index: 2; width: var(--pw); height: var(--ph); left: calc(var(--pw) / -2); top: calc(var(--ph) / -2); }
.rig-front { z-index: 3; }
.phone-body {
  position: absolute; inset: 0; border-radius: var(--pr); background: #0E1215;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 1px var(--phone-ring), var(--e3);
}
.phone-screen { position: absolute; inset: var(--bez); border-radius: calc(var(--pr) - var(--bez)); overflow: hidden; background: var(--white); isolation: isolate; }
.screen-scaler { position: absolute; left: 0; top: 0; width: 360px; height: 780px; transform: scale(var(--ps)); transform-origin: 0 0; }
.phone-glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 28%); }

.obj { position: absolute; left: calc(var(--x) * var(--pw)); top: calc(var(--y) * var(--ph)); width: calc(var(--w) * var(--pw)); translate: -50% -50%; }
.obj .art { width: 100%; height: auto; overflow: visible; }
.obj-in { position: relative; }
.float { animation: bob 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -7px, 0); } }

/* glass information cards (hero): .gcard = anchor (GSAP), .gcard-body = visuals (CSS float) */
.gcard { position: absolute; left: calc(var(--x) * var(--pw)); top: calc(var(--y) * var(--ph)); translate: -50% -50%; }
.gcard-body {
  width: max-content; max-width: 252px; display: flex; align-items: center; gap: 12px;
  padding: 11px 18px 11px 11px; border-radius: 20px; background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: var(--e2), inset 0 0 0 1px rgba(255, 255, 255, .7);
  font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em;
}
.gcard-ic { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--sky); }
.gcard-ic .ic { width: 20px; height: 20px; }

/* fees: white sheet over the sky */
.sheet { position: absolute; left: 0; right: 0; top: 9vh; bottom: -2px; z-index: 5; background: var(--white); border-radius: 44px 44px 0 0; box-shadow: 0 -24px 60px -34px rgba(6, 38, 66, .45); }
.fees-a, .fees-b, .fees-c { position: absolute; }
.fees-a { left: 54vw; top: 15vh; width: min(38vw, 600px); }
.fees-b { left: 71vw; top: 15vh; width: calc(29vw - var(--gutter)); }
.fees-c { left: 42vw; top: 6vh; width: calc(58vw - var(--gutter)); }
.fees-label { font-size: 16px; font-weight: 600; margin-top: 4vh; color: var(--text-2); }
.fees-big { font-size: clamp(56px, 5.6vw, 100px); font-weight: 700; letter-spacing: -.05em; line-height: 1; margin-top: 10px; white-space: nowrap; }
.fees-big-s { font-size: clamp(42px, 3.6vw, 64px); }
.fees-big small { font-size: .3em; font-weight: 600; letter-spacing: 0; margin-left: .15em; }
.fees-big small.cur-l { margin: 0 .2em 0 0; }
.fees-line { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; margin-top: 2.2vh; max-width: 26em; color: #3C3C3C; }
.ticket {
  position: absolute; z-index: 1; left: 50vw; top: 9vh; translate: -50% 0;
  width: clamp(340px, 26vw, 440px); padding: 28px 28px 26px; border-radius: 26px; background: var(--white);
  box-shadow: var(--e3), 0 0 0 1px rgba(6, 38, 66, .05);
}
.ticket .tk-k { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.ticket .tk-s { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin-top: 8px; }
.tk-cut { position: relative; height: 26px; margin: 16px -28px 10px; }
.tk-cut::before { content: ''; position: absolute; left: 24px; right: 24px; top: 12px; border-top: 1.5px dashed var(--line); }
.tk-cut::after, .tk-cut i { content: ''; position: absolute; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--sky-soft); }
.tk-cut::after { right: -13px; }
.tk-cut i { left: -13px; }
.tk-row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; font-size: 16px; }
.tk-row span:first-child { color: var(--text-2); }
.tk-row b { font-weight: 600; }
.tk-sum { border-top: 1.5px solid var(--ink); margin-top: 8px; padding-top: 16px; }
.tk-sum span:first-child { color: var(--ink); font-weight: 600; }
.tk-sum b { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.plan-chart { position: absolute; left: 42vw; right: var(--gutter); top: 39vh; height: 30vh; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4vw; align-items: end; }
.pc-col { display: flex; flex-direction: column; gap: 10px; height: 100%; justify-content: flex-end; }
.pc-v { font-size: clamp(13px, 1vw, 16px); font-weight: 600; letter-spacing: -.01em; }
.pc-bar { position: relative; height: 72%; border-radius: 16px; background: var(--sky-soft); overflow: hidden; }
.pc-bar i { position: absolute; inset: 0; border-radius: 16px; background: var(--sky); transform-origin: bottom; transform: scaleY(0); }
.pc-col:last-child .pc-bar i { background: linear-gradient(var(--lime) 0 10px, var(--sky) 10px); }
.pc-d { font-size: 13px; color: var(--text-2); }
.rates {
  position: absolute; left: var(--gutter); right: calc(var(--gutter) + 76px); bottom: 4vh;
  display: grid; grid-template-columns: repeat(3, auto) 1fr; align-items: end; gap: 0 3.2vw;
  padding-top: 2.4vh; border-top: 1px solid var(--line);
}
.rate { display: flex; flex-direction: column; gap: 6px; }
.rate-l { font-size: 13px; font-weight: 600; color: var(--text-2); }
.rate-v { font-size: clamp(26px, 2.3vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.rate-notes { justify-self: end; max-width: 30em; font-size: 13px; line-height: 1.5; text-align: right; }
.rate-notes p + p { margin-top: 4px; color: var(--text-2); }

/* security: darkness opening out of the phone */
.portal {
  position: absolute; inset: 0; z-index: 6; visibility: hidden;
  background: radial-gradient(56% 64% at 72% 48%, rgba(98, 197, 254, .26), rgba(98, 197, 254, 0) 70%), var(--ink);
}

/* steps */
.sc-steps { z-index: 9; }
.steps-head { position: absolute; left: var(--gutter); top: 13vh; width: min(34vw, 540px); }
.steps-head .h-mod { font-size: clamp(30px, 2.8vw, 48px); }
.steps-track { position: absolute; left: 0; top: 0; height: 100%; width: 300vw; display: flex; }
.step-panel { position: relative; width: 100vw; height: 100%; flex: none; }
.step-copy { position: absolute; left: var(--gutter); top: 35vh; width: min(30vw, 480px); }
.step-num { display: block; font-size: clamp(100px, 10vw, 172px); font-weight: 700; letter-spacing: -.07em; line-height: .78; color: var(--white); }
.step-t { font-size: clamp(30px, 2.75vw, 46px); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; margin-top: 3.4vh; }
.step-d { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.55; margin-top: 2vh; max-width: 25em; opacity: .82; }
.step-art { position: absolute; right: var(--gutter); top: 0; bottom: 0; width: min(30vw, 480px); }
.step-art .obj { left: auto; top: auto; translate: none; }
.road { position: absolute; left: 0; bottom: 5vh; width: 300vw; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .42); }
.road-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 2px; background: var(--white); }
.road-node { position: absolute; left: calc(50vw + var(--n) * 100vw); top: 50%; translate: -50% -50%; width: 42px; height: 42px; border-radius: 50%; background: var(--white); box-shadow: var(--e2); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.fly { position: absolute; left: 50vw; top: 50vh; width: 0; height: 0; }
.fly .obj { left: 0; top: 0; translate: -50% -50%; }
.step-chip { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 22px; background: var(--glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--e2); font-size: 15px; font-weight: 600; }
.step-chip i { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; }
.step-chip .ic { width: 15px; height: 15px; }

/* security copy + art */
.sc-sec { color: var(--white); }
.sec-col { position: absolute; left: var(--gutter); top: 14vh; width: min(30vw, 470px); }
.sec-col .h-mod { font-size: clamp(34px, 3vw, 52px); }
.sec-desc { font-size: clamp(15px, 1.1vw, 18px); line-height: 1.55; margin-top: 2.4vh; opacity: .7; }
.ticks { display: flex; gap: 8px; margin-top: 3.2vh; }
.tick { width: 44px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.tick i { display: block; height: 100%; background: var(--sky); transform-origin: left; transform: scaleX(0); }
.sec-pts { position: relative; margin-top: 5vh; height: 30vh; }
.sec-pt { position: absolute; left: 0; top: 0; width: 100%; }
.sec-pt .pt-idx { font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--sky); }
.sec-pt .pt-t { font-size: clamp(26px, 2.2vw, 38px); margin-top: 1.4vh; }
.sec-pt .pt-d { font-size: clamp(15px, 1.15vw, 18px); margin-top: 1.6vh; opacity: .78; }
.sec-art { position: absolute; left: 46.5vw; top: 50%; width: min(25vw, 44vh); translate: -50% -50%; }
.sec-art .art, .cdf-art .art { width: 100%; height: auto; }

.sc-condusef .kicker { background: var(--white); }
.cdf-copy { position: absolute; left: var(--gutter); top: 24vh; width: min(40vw, 640px); }
.cdf-copy .h-mod { margin-top: 3.4vh; font-size: clamp(40px, 4vw, 68px); }
.cdf-text { font-size: clamp(18px, 1.45vw, 24px); line-height: 1.45; margin: 3vh 0 4.4vh; max-width: 22em; }
.cdf-art { position: absolute; right: 12vw; top: 50%; width: min(30vw, 52vh); translate: 0 -50%; }

.scroll-hint { position: absolute; left: var(--gutter); bottom: 3.6vh; z-index: 13; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.scroll-hint i { width: 2px; height: 30px; background: rgba(1, 1, 1, .16); position: relative; overflow: hidden; border-radius: 1px; }
.scroll-hint i::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: currentColor; animation: hint 1.8s var(--ease-out) infinite; }
@keyframes hint { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }

/* =========================================================
   Phone screens (360×780 logical px)
   ========================================================= */
.scr { position: absolute; inset: 0; background: var(--white); overflow: hidden; color: var(--ink); font-family: var(--font); font-size: 14px; }
.scr::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.scr .ic { width: 22px; height: 22px; }
.sb { height: 46px; padding: 2px 26px 0 32px; display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; }
.sb-r { display: flex; align-items: center; gap: 6px; }
.sb-r svg { fill: currentColor; display: block; }
.nb { position: relative; height: 54px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.nb-back { position: absolute; left: 12px; top: 15px; }
.s-pad { padding: 0 16px; position: relative; }
.s-h { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin: 10px 0 4px; }
.s-sub { font-size: 13px; color: var(--text-2); }
.s-l { font-size: 14px; color: var(--text-2); }
.s-amt { font-size: 36px; font-weight: 700; letter-spacing: -.025em; margin: 6px 0 20px; }
.s-amt small { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.s-band { height: 8px; background: var(--page); }
.s-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 54px; border-bottom: .5px solid var(--line); }
.s-v { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.s-total { font-size: 18px; font-weight: 700; }
.s-foot { position: absolute; left: 16px; right: 16px; bottom: 34px; }
.s-pill { height: 48px; border-radius: 24px; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; }
.s-cap { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 20px 0 6px; }

.home-top { position: relative; background: var(--sky); height: 336px; }
.home-bar { height: 50px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
.home-logo .logo { width: 86px; height: auto; }
.home-limit { padding: 22px 16px 0; }
.hl-k { font-size: 16px; font-weight: 600; }
.hl-amt { display: flex; align-items: baseline; gap: 8px; font-size: 62px; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 10px 0 26px; }
.hl-amt small { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.home-body { padding: 22px 16px 0; }
.hb-t { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.hb-steps { list-style: none; padding: 0; margin: 0; }
.hb-steps li { display: flex; align-items: center; gap: 12px; height: 52px; border-bottom: .5px solid var(--line); font-size: 15px; font-weight: 500; }
.hb-steps .ic { margin-left: auto; width: 16px; height: 16px; opacity: .5; }
.hb-n { width: 28px; height: 28px; border-radius: 50%; background: var(--sky-soft); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.hb-trust { margin-top: 16px; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--sky-soft); font-size: 13px; font-weight: 600; }
.hb-trust .ic { width: 20px; height: 20px; }
.tabbar { position: absolute; left: 34px; right: 34px; bottom: 16px; height: 62px; padding: 6px; border-radius: 31px; background: var(--white); box-shadow: 0 6px 24px rgba(1, 1, 1, .1); display: flex; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 25px; color: #8C8F96; }
.tab b { font-size: 11px; font-weight: 600; }
.tab.is-on { background: var(--sky-soft); color: var(--ink); }

.req-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); margin-top: 12px; }
.req-ic { width: 44px; height: 44px; border-radius: 13px; background: var(--sky-soft); display: grid; place-items: center; }
.req-t { font-size: 15px; font-weight: 600; }
.req-t small { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin-top: 3px; }
.req-ck { --ck: 0; margin-left: auto; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); position: relative; display: grid; place-items: center; }
.req-ck::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--sky); transform: scale(var(--ck)); }
.req-ck .ic { position: relative; width: 16px; height: 16px; color: var(--ink); opacity: var(--ck); }
.req-time { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 14px; border-radius: 16px; background: var(--sky-soft); font-size: 13px; line-height: 1.45; }
.req-clock { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--sky); display: grid; place-items: center; }

.term-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; }
.term-v { font-size: 15px; font-weight: 600; }
.term-v b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.slider { --v: 0; position: relative; height: 30px; margin: 18px 0 6px; }
.sl-track, .sl-fill { position: absolute; top: 13px; height: 5px; border-radius: 3px; }
.sl-track { left: 0; right: 0; background: var(--line); }
.sl-fill { left: 0; width: calc(var(--v) * (100% - 26px) + 13px); background: var(--sky); }
.sl-knob { position: absolute; top: 2px; left: calc(var(--v) * (100% - 26px)); width: 26px; height: 26px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px rgba(1, 1, 1, .06), 0 2px 4px rgba(6, 38, 66, .16), 0 6px 14px rgba(6, 38, 66, .16); }
.sl-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); }
.term-note { display: flex; gap: 10px; align-items: center; margin-top: 24px; padding: 12px 14px; border-radius: 14px; background: var(--sky-soft); font-size: 13px; line-height: 1.4; font-weight: 500; }

.lock-banner { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--sky-soft); font-size: 13px; font-weight: 600; line-height: 1.35; margin: 6px 0 8px; }
.lock-banner.is-on { background: var(--sky); }
.mask-f { font-weight: 600; letter-spacing: .02em; }
.sec-chip { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--page); font-size: 12px; font-weight: 600; }
.sec-chip .ic { width: 16px; height: 16px; }

.rv-list { padding-top: 4px; }
.rv-hl { position: absolute; left: 6px; right: 6px; top: 4px; height: 54px; border-radius: 14px; background: var(--sky-soft); z-index: 0; opacity: 0; }

.chart { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 4px; margin-top: 22px; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bar-v { font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.bar { width: 32px; height: 150px; border-radius: 9px; background: var(--sky-soft); transform-origin: bottom; overflow: hidden; position: relative; }
.bar i { position: absolute; inset: 0; background: var(--sky); transform-origin: bottom; transform: scaleY(0); }
.bar-d { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.plan-note { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13px; font-weight: 500; }
.plan-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px var(--lime-soft); }

.prog { display: flex; gap: 6px; margin: 6px 0 14px; }
.prog i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.prog i.on { background: var(--sky); }
.field { padding: 12px 0 11px; border-bottom: .5px solid var(--line); }
.field .s-l { display: block; font-size: 12px; }
.fv { display: block; min-height: 23px; margin-top: 5px; font-size: 16px; font-weight: 600; letter-spacing: .005em; white-space: nowrap; }
.fv.is-typing::after { content: ''; display: inline-block; width: 2px; height: 18px; margin-left: 2px; vertical-align: -3px; background: var(--sky); }

.stepper { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 18px; }
.stepper .s-amt { margin: 0; }
.stp { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; font-size: 22px; font-weight: 500; }
.stp.on { background: var(--ink); color: var(--white); box-shadow: none; }
.ck { --on: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--sky); display: inline-grid; place-items: center; opacity: var(--on); transform: scale(calc(.4 + var(--on) * .6)); }
.ck .ic { width: 13px; height: 13px; }

.res { text-align: center; padding-top: 14px; }
.res-badge { --on: 0; position: relative; width: 104px; height: 104px; margin: 6px auto 18px; border-radius: 50%; background: var(--sky); display: grid; place-items: center; transform: scale(calc(.6 + var(--on) * .4)); opacity: calc(.2 + var(--on)); box-shadow: 0 12px 28px -10px rgba(0, 110, 180, .55); }
.res-badge .ic { width: 50px; height: 50px; stroke-width: 2.6; }
.res-ring { position: absolute; inset: -14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--sky); opacity: calc(var(--on) * .45); }
.res-amt { font-size: 34px; font-weight: 700; letter-spacing: -.025em; }
.tline { list-style: none; padding: 0; margin: 26px 0 0; text-align: left; }
.tline li { --on: 0; display: flex; align-items: center; gap: 12px; height: 50px; border-bottom: .5px solid var(--line); font-size: 15px; font-weight: 600; opacity: calc(.35 + var(--on) * .65); }
.tline i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--sky) calc(var(--on) * 100%), var(--page)); }
.tline .ic { width: 16px; height: 16px; opacity: var(--on); }

.aviso { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: var(--page); font-size: 12.5px; line-height: 1.5; color: #3B3B3B; margin-top: 4px; }
.aviso b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.aviso .ic { flex: none; width: 22px; height: 22px; color: var(--ink); }
.flags { list-style: none; padding: 0; margin: 0; }
.flags li { --on: 0; display: flex; align-items: center; gap: 12px; height: 48px; border-bottom: .5px solid var(--line); font-size: 15px; font-weight: 600; opacity: calc(.3 + var(--on) * .7); }
.flags i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #FFE5E5; color: var(--error); transform: scale(calc(.6 + var(--on) * .4)); }
.flags .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.official { display: flex; gap: 10px; align-items: center; margin-top: 18px; padding: 13px 14px; border-radius: 14px; background: var(--sky); font-size: 13px; font-weight: 600; }

/* =========================================================
   Flow sections
   ========================================================= */
.wrap { padding: 0 var(--gutter); max-width: 1920px; margin: 0 auto; }
.head-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 6vw; align-items: end; margin-bottom: 9vh; }
.h-sec { font-size: clamp(44px, 4.5vw, 80px); font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.p-sec { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.55; max-width: 30em; }

.sec-partners { position: relative; z-index: 2; background: var(--white); padding: 22vh 0 18vh; overflow: hidden; }
.marquee { overflow: hidden; padding: 1.4vh 0; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.partner { display: flex; align-items: center; gap: .42em; padding-right: .42em; font-size: clamp(54px, 6vw, 108px); font-weight: 600; letter-spacing: -.045em; line-height: 1.12; white-space: nowrap; color: var(--ink); }
.partner span { opacity: .14; transition: opacity .5s var(--ease-out); }
.partner:hover span { opacity: 1; }
.partner i { width: .22em; height: .22em; border-radius: 50%; background: var(--sky); flex: none; }

.sec-blog { background: var(--sky-soft); padding: 20vh 0 22vh; }
.h-blog { font-size: clamp(96px, 12vw, 210px); letter-spacing: -.06em; line-height: .82; }
.head-side { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 1.8vw, 32px); }
.post { display: flex; flex-direction: column; border-radius: 26px; background: var(--white); color: inherit; text-decoration: none; overflow: hidden; box-shadow: var(--e1); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.post:hover { transform: translateY(-6px); box-shadow: var(--e3); }
.post-art { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.post[data-post="0"] .post-art { background: var(--sky); }
.post[data-post="1"] .post-art { background: var(--lime); }
.post[data-post="2"] .post-art { background: #CDEBFF; }
.post-art .obj { left: var(--x); top: var(--y); width: var(--w); translate: -50% -50%; }
.post-art .art { width: 100%; height: auto; }
.post-art .obj-in { transition: transform .8s var(--ease-out); }
.post:hover .post-art .obj:first-child .obj-in { transform: translateY(-6px); }
.post:hover .post-art .obj:last-child .obj-in { transform: translate(6px, -10px); }
.post-body { padding: 26px 28px 34px; }
.post time { font-size: 13px; font-weight: 600; color: var(--text-2); }
.post h3 { font-size: clamp(19px, 1.45vw, 24px); font-weight: 600; letter-spacing: -.015em; line-height: 1.28; margin: 12px 0 12px; }
.post p { font-size: 15.5px; line-height: 1.55; color: #4A4A4A; }

.sec-faq { background: var(--white); padding: 20vh 0 20vh; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 6vw; align-items: start; }
.faq-head { position: sticky; top: 16vh; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.faq-art { width: min(15vw, 230px); margin-top: 4vh; }
.faq-art .art { width: 100%; height: auto; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 30px 0; background: none; border: 0; cursor: pointer; text-align: left; font-size: clamp(19px, 1.55vw, 26px); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.faq-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); display: grid; place-items: center; transition: background .4s, color .4s, box-shadow .4s; }
.faq-ic .ic { width: 20px; height: 20px; transition: transform .6s var(--ease-out); }
.faq-q:hover .faq-ic { background: var(--sky); box-shadow: inset 0 0 0 1.5px var(--sky); }
.faq-item.is-open .faq-ic { background: var(--ink); color: var(--white); box-shadow: none; }
.faq-item.is-open .faq-ic .ic { transform: rotate(45deg); }
.faq-a { height: 0; overflow: hidden; }
.faq-a p { padding: 0 90px 32px 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; color: #3E3E3E; }

.sec-cta { position: relative; background: var(--sky); padding: 22vh 0 0; overflow: hidden; }
.cta-row { display: grid; grid-template-columns: 1.25fr 1fr; gap: 6vw; align-items: end; }
.h-cta { font-size: clamp(48px, 5.3vw, 96px); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.cta-side { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.cta-actions { display: flex; gap: 16px; align-items: center; }
.cta-qr { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 18px; background: var(--white); font-size: 14px; font-weight: 600; box-shadow: var(--e1); }
.cta-qr [data-qr] { width: 58px; height: 58px; }
.cta-qr [data-qr] svg { width: 100%; height: 100%; }
.cta-mark { padding: 14vh var(--gutter) 0; margin-bottom: -1.2vw; color: var(--white); }
.cta-mark .logo-mark { width: 100%; height: auto; overflow: visible; }

/* footer */
.footer { position: relative; z-index: 2; background: var(--ink); color: var(--white); padding: 14vh 0 5vh; font-size: 14px; }
.ft-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.15fr; gap: 4vw; padding-bottom: 8vh; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ft-logo { display: block; width: 150px; color: var(--white); }
.ft-logo .logo { width: 100%; height: auto; }
.ft-entity { margin-top: 24px; font-size: 13px; line-height: 1.55; opacity: .72; max-width: 290px; }
.footer h4 { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 18px; }
.ft-h-gap { margin-top: 30px; }
.ft-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-items: baseline; }
.ft-dl dt { font-size: 12.5px; opacity: .55; }
.ft-dl dd { margin: 0; }
.ft-social { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 26px; }
.footer a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, .45); transition: text-decoration-color .3s, color .3s; }
.footer a:hover { color: var(--sky); text-decoration-color: currentColor; }
.ft-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ft-small { font-size: 13px; line-height: 1.65; opacity: .8; }
.ft-legal { display: grid; grid-template-columns: 1fr 1fr; gap: 4vh 4vw; padding: 7vh 0; }
.ft-wide { grid-column: 1 / -1; }
.ft-block p { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .78); max-width: 92ch; }
.ft-block p + p { margin-top: 12px; }
.ft-bottom { display: flex; justify-content: space-between; gap: 24px; padding: 4vh 76px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.pending { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; background: rgba(98, 197, 254, .18); color: var(--sky); font-size: 12px; font-weight: 600; letter-spacing: .01em; vertical-align: 1px; }

/* floating buttons */
.fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab-btn { height: 52px; min-width: 52px; padding: 0 15px; border: 0; border-radius: 26px; display: inline-flex; align-items: center; gap: 0; cursor: pointer; font-size: 14px; font-weight: 600; background: var(--white); color: var(--ink); box-shadow: var(--e2); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.fab-btn:hover { transform: translateY(-2px); box-shadow: var(--e3); }
.fab-btn span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .5s var(--ease-out), margin .5s var(--ease-out); }
.fab-btn:hover span, .fab-btn:focus-visible span, .fab-btn[aria-expanded="true"] span { max-width: 140px; margin-left: 10px; }
.fab-btn .ic { width: 22px; height: 22px; }
.fab-btn-dark { background: var(--ink); color: var(--white); }
.fab-panel { position: absolute; right: 0; bottom: 140px; width: 330px; padding: 24px; border-radius: 26px; background: var(--white); color: var(--ink); box-shadow: var(--e3), 0 0 0 1px rgba(6, 38, 66, .05); transform-origin: 90% 100%; }
.fab-panel[hidden] { display: none; }
.fab-qr { width: 196px; height: 196px; margin: 0 auto; padding: 10px; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--line); }
.fab-qr svg { width: 100%; height: 100%; }
.fab-dl p { text-align: center; font-size: 17px; font-weight: 600; margin-top: 16px; }
.fab-stores { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.fab-stores button { height: 36px; padding: 0 14px; border-radius: 18px; border: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: var(--page); cursor: pointer; }
.fab-stores button.is-on { background: var(--ink); color: var(--white); }
.fab-stores button:disabled { opacity: .45; cursor: not-allowed; }
.fab-stores .ic { width: 14px; height: 14px; }
.fb-t { font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; margin-bottom: 16px; }
.fb-field { display: block; margin-bottom: 10px; }
.fb-field textarea, .fb-field input { width: 100%; padding: 13px 14px; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--line); font: 500 15px/1.45 var(--font); color: var(--ink); resize: none; outline: none; transition: box-shadow .25s; }
.fb-field textarea:focus, .fb-field input:focus { box-shadow: inset 0 0 0 1.5px var(--ink); }
.fb-field .is-invalid { box-shadow: inset 0 0 0 1.5px var(--error); }
.fb-privacy { font-size: 12px; line-height: 1.5; color: var(--text-2); margin: 4px 0 14px; }
.fb-privacy a { text-decoration: underline; color: var(--ink); }
.fb-done { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--sky-soft); font-size: 14px; font-weight: 600; }

/* loader */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--sky); display: grid; place-items: center; }
.loader [data-logo] { width: 180px; color: var(--ink); }
.loader .logo { width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .float, .scroll-hint i::after { animation: none; }
}