/* KangooPay — global stylesheet (shared by the Vue app) */
:root{
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display: 'IBM Plex Sans', system-ui, sans-serif;
  --serif: 'Space Grotesk', system-ui, sans-serif;

  --bg: #F6F8FC;
  --bg-soft: #EAF0F8;
  --ink: #0B1220;
  --ink-2: #28303F;
  --ink-3: #5A6678;
  --line: #E1E7F1;
  --line-soft: #ECF0F7;
  --card: #FFFFFF;

  --sky: #38BDF8;
  --sky-soft: #E2F4FE;
  --blue: #0058BD;
  --blue-2: #1F6CC5;
  --yellow: #FBC91B;
  --yellow-2: #F2B705;

  --accent: var(--blue);
  --accent-soft: #E0EBF7;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;

  --gutter: clamp(20px, 4vw, 56px);
  --max: 1520px;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
  overflow-x: hidden;
}
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; }
::selection{ background: var(--yellow); color: var(--ink); }

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

/* Sub-pages: paint a solid page backdrop as a real element so the page colour
   never depends on body's background being painted (robust in embedded/preview
   contexts that zero out html/body backgrounds). Home keeps its own backdrop. */
.is-subpage::before{ content:""; position: fixed; inset: 0; z-index: -1; background: var(--bg); }
body.is-subpage{ background: var(--bg) !important; min-height: 100vh; }
.bg-grid{
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(11,18,32,.07) 1.1px, transparent 1.6px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 85% 55% at center top, black 18%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 85% 55% at center top, black 18%, transparent 74%);
}

/* —— TYPE —— */
.display{ font-family: var(--display); font-size: clamp(46px, 7vw, 100px); line-height: .98; letter-spacing: -0.04em; font-weight: 600; }
.h1{ font-family: var(--display); font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -0.032em; font-weight: 600; }
.h2{ font-family: var(--display); font-size: clamp(25px, 2.4vw, 35px); line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; }
.h3{ font-family: var(--display); font-size: 19px; line-height: 1.3; letter-spacing: -0.012em; font-weight: 600; }
.eyebrow{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); display:inline-flex; align-items:center; }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--accent); margin-right: 9px; }
.lede{ font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); line-height: 1.5; max-width: 60ch; }
.mono{ font-family: var(--mono); }

/* —— BUTTONS —— */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 999px;
  font-weight: 500; font-size: 15px; border: 1px solid transparent; white-space: nowrap;
  transition: transform .1s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn svg{ width: 16px; height: 16px; }
.btn-primary{ background: var(--ink); color: var(--bg); }
.btn-primary:hover{ background: var(--accent); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--ink); }
.btn-yellow{ background: var(--yellow); color: var(--ink); }
.btn-yellow:hover{ background: var(--yellow-2); }

/* —— NAV —— */
.nav{ position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; }
.nav.scrolled{ backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--line-soft); }
.nav-inner{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 18px; height: 78px; }
.logo{ display:flex; align-items:center; gap: 10px; font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; font-size: 19px; }
.logo .mark{ width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: var(--bg); display:grid; place-items:center; font-weight: 700; font-size: 16px; position: relative; }
.logo .mark::after{ content:""; position:absolute; right:-3px; bottom:-3px; width:11px; height:11px; background: var(--yellow); border-radius: 3px; border: 2px solid var(--bg); }
.nav-links{ display:flex; gap: 30px; justify-content:center; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav-links a{ display:inline-flex; align-items:center; gap: 5px; }
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover .cv{ stroke: var(--ink); }
.nav-links .cv{ width: 10px; height: 6px; fill:none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-cta{ justify-self:end; display:flex; gap: 10px; align-items:center; }
.nav-cta .btn{ height: 42px; padding: 0 18px; font-size: 14.5px; }
.lang{ display:inline-flex; align-items:center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.lang:hover{ border-color: var(--ink); color: var(--ink); }
.lang .globe{ width: 16px; height: 16px; fill:none; stroke: currentColor; stroke-width: 1.6; }
.lang .cv{ width: 10px; height: 6px; fill:none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn-outline{ background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover{ background: var(--blue); color: #fff; border-color: var(--blue); }
/* hamburger + mobile menu */
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 11px; border:1px solid var(--line); border-radius:12px; background:var(--card); cursor:pointer; justify-self:end; }
.nav-toggle span{ display:block; width:100%; height:2px; background:var(--ink); border-radius:2px; transition:transform .22s ease, opacity .18s ease; }
.nav.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-mobile{ display:none; overflow:hidden; max-height:0; transition:max-height .3s ease; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-top:1px solid transparent; }
.nav.menu-open .nav-mobile{ max-height:560px; border-top:1px solid var(--line-soft); }
.nav-mobile-inner{ padding:10px var(--gutter) 24px; display:flex; flex-direction:column; }
.nav-mobile a.mlink{ display:block; padding:14px 4px; font-size:16px; font-weight:500; color:var(--ink-2); border-bottom:1px solid var(--line-soft); }
.nav-mobile a.mlink:hover{ color:var(--ink); }
.nav-mobile .mcta{ display:flex; flex-direction:column; gap:11px; margin-top:18px; }
.nav-mobile .mcta .btn{ height:50px; width:100%; font-size:15px; }
@media (max-width: 1024px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-inner{ grid-template-columns: 1fr auto; }
  .nav-toggle{ display:inline-flex; }
  .nav-mobile{ display:block; }
}
@media (max-width: 640px){ .nav-cta .lang{ display:none; } }

/* —— TOP GRADIENT WASH + ANNOUNCE (Highnote-style) —— */
#app{ position: relative; }
.topwash{ position:absolute; top:0; left:0; right:0; height: clamp(760px, 98vh, 1100px); z-index:0; pointer-events:none; overflow:hidden;
  background-image: radial-gradient(132% 124% at 50% 122%, #FBC91B 0%, #FFE07A 8%, #FFF4CE 15%, #E3F4FC 27%, #C2E7FA 41%, #9DD8F6 55%, #7FCBF2 68%, #AEDCF6 80%, #DCEFFC 91%, var(--bg) 100%);
  animation: washglow 16s ease-in-out infinite; }
.topwash::before{ content:""; position:absolute; inset:0; transform-origin:50% 122%;
  background-image: repeating-radial-gradient(circle at 50% 122%, rgba(255,255,255,0) 0 6.5%, rgba(255,255,255,.10) 6.5% 13%);
  animation: washripple 13s ease-in-out infinite; }
.topwash::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:34%; background: linear-gradient(to bottom, rgba(246,248,252,0), var(--bg)); z-index:1; }
@keyframes washglow{ 0%,100%{ filter: brightness(1) saturate(1);} 50%{ filter: brightness(1.045) saturate(1.07);} }
@keyframes washripple{ 0%{ transform: scale(1); opacity:.85;} 50%{ transform: scale(1.13); opacity:.45;} 100%{ transform: scale(1); opacity:.85;} }
@media (prefers-reduced-motion: reduce){ .topwash, .topwash::before{ animation: none !important; } }

.announce{ position: relative; z-index: 40; text-align:center; font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 11px 16px; background: rgba(11,18,32,.06); }
.announce a{ display:inline-flex; align-items:center; gap:8px; }
.announce a:hover{ text-decoration: underline; }
.announce .arr{ transition: transform .15s ease; }
.announce a:hover .arr{ transform: translateX(3px); }

.btn-white{ background:#fff; color: var(--ink); border-color:#fff; }
.btn-white:hover{ background: var(--bg-soft); color: var(--ink); }

/* —— SECTION —— */
section{ position: relative; z-index: 1; }
.section{ padding: clamp(72px, 9vw, 132px) 0; border-top: 1px solid var(--line-soft); }
.section-head{ display:flex; gap: 56px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 52px; }
.section-head .left{ max-width: 56ch; }
.section-head .eyebrow{ margin-bottom: 18px; }
.section-head .lede{ max-width: 42ch; }

/* —— HERO (headline left, supporting right) —— */
.hero{ position:relative; overflow:hidden;
  padding: clamp(36px,4.5vw,72px) 0 clamp(44px,5.5vw,88px);
  min-height: calc(100vh - 118px); min-height: calc(100svh - 118px);
  display:flex; flex-direction:column; justify-content:center; }
.hero > .container{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.hero-grid{ display:grid; grid-template-columns: 1.22fr .78fr; gap: clamp(36px,5vw,76px); align-items:center; width:100%; }
.hero-left{ display:flex; flex-direction:column; align-items:flex-start; }
.hero-right{ display:flex; flex-direction:column; align-items:flex-start; }
.hero .pill{ margin:0 0 clamp(14px,1.8vw,22px); }

.pill{ display:inline-flex; align-items:center; gap:9px; height:34px; padding:0 14px 0 9px; border-radius:999px; background: rgba(255,255,255,.68); border:1px solid rgba(255,255,255,.85); font-size:13px; color:var(--ink-2); backdrop-filter: blur(6px); }
.pill .tag{ font-family:var(--mono); font-size:11px; padding:2px 8px; border-radius:999px; background:var(--ink); color:#fff; }

.hero .display{ font-size: clamp(40px,5.1vw,90px); line-height:.96; letter-spacing:-0.042em; margin:0; color:var(--ink); max-width:none; text-align:left; white-space:nowrap; }
.hero .display .it{ color: var(--blue-2); }
.hero .display .ul{ position:relative; }
.hero .display .ul::after{ content:""; position:absolute; left:.02em; right:.02em; bottom:.04em; height:.075em; background:var(--yellow); border-radius:4px; }

.hero-sub{ font-family:var(--display); font-weight:600; font-size: clamp(16px,1.5vw,20px); letter-spacing:-0.022em; margin:0 0 12px; color:var(--ink); text-align:left; }
.hero .lede{ margin:0; max-width: 40ch; text-align:left; color:var(--ink-2); font-size: clamp(14px,1.05vw,15.5px); }
.hero-cta{ display:flex; gap:12px; margin-top: clamp(26px,3vw,34px); flex-wrap:wrap; justify-content:flex-start; }
.btn-lg{ height:56px; padding:0 28px; font-size:16px; font-weight:600; }
.hero-meta{ margin-top:26px; display:flex; flex-direction:row; flex-wrap:wrap; gap:14px 26px; color:var(--ink-2); font-size:13.5px; }
.hero-meta .item{ display:flex; align-items:center; gap:9px; }
.hero-meta .item .d{ width:13px; height:13px; border-radius:50%; background: rgba(255,255,255,.7); border:3px solid var(--blue); flex:none; }

@media (max-width: 940px){
  .hero{ min-height:0; padding: clamp(44px,8vw,76px) 0; }
  .hero-grid{ grid-template-columns:1fr; gap:30px; align-items:start; }
  .hero .display{ max-width:16ch; white-space:normal; }
}

/* —— HERO MOTION (Coframe-inspired) —— */
.hero{ position: relative; overflow: hidden; }
.hero > .container{ position: relative; z-index: 1; }
.hero-aurora{ position:absolute; inset:-25% -15%; z-index:0; pointer-events:none; filter: blur(72px); opacity:.42; }
.hero-aurora i{ position:absolute; display:block; width:46vw; height:46vw; border-radius:50%; }
.hero-aurora .a1{ background: var(--sky); top:-12%; left:1%; animation: aur1 22s ease-in-out infinite; }
.hero-aurora .a2{ background: var(--blue); top:6%; right:-2%; opacity:.5; animation: aur2 27s ease-in-out infinite; }
.hero-aurora .a3{ background: var(--yellow); bottom:-24%; left:30%; opacity:.6; animation: aur3 31s ease-in-out infinite; }
@keyframes aur1{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(7%, 9%) scale(1.16);} }
@keyframes aur2{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-9%, 6%) scale(1.1);} }
@keyframes aur3{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(6%, -7%) scale(1.2);} }

.word-slot{ display:inline-block; min-width: 2.1em; text-align: center; }
.hero .display .it{ display:inline-block; transition: opacity .22s ease, transform .22s ease; }
.hero .display .it.swap{ opacity:0; transform: translateY(.32em); }
.word-enter-active, .word-leave-active{ transition: transform .42s cubic-bezier(.2,.75,.2,1), opacity .42s ease; }
.word-enter-from{ opacity:0; transform: translateY(.55em); }
.word-leave-to{ opacity:0; transform: translateY(-.55em); }

.receipt .bar i{ transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.receipt .head .status::before{ animation: blip 1.7s ease-in-out infinite; }
@keyframes blip{ 0%,100%{ box-shadow: 0 0 0 0 rgba(31,122,58,.5);} 70%{ box-shadow: 0 0 0 6px rgba(31,122,58,0);} }
.hero-visual{ animation: floaty 7s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

@media (prefers-reduced-motion: reduce){
  .hero-aurora i, .hero-visual, .receipt .head .status::before{ animation: none !important; }
}

/* —— HERO ORBIT (payment-method carousel) —— */
.hero-orbit{ position: relative; width: 100%; max-width: 400px; margin: 0 auto; aspect-ratio: 1; }
.orbit-dash{ position:absolute; border-radius:50%; border:1px dashed var(--line); pointer-events:none; }
.orbit-dash.d1{ inset: 8%; }
.orbit-dash.d2{ inset: 27%; }
.orbit-ring{ position:absolute; inset:0; }
.ring-outer{ animation: orbitspin 46s linear infinite; }
.ring-inner{ animation: orbitspin 34s linear infinite reverse; }
@keyframes orbitspin{ to{ transform: rotate(360deg); } }
.orbit-item{ position:absolute; transform: translate(-50%, -50%); }
.orbit-chip{ width: 74px; height: 74px; border-radius: 50%; background:#fff; border:1px solid var(--line-soft);
  box-shadow: 0 12px 26px -14px rgba(11,18,32,.28); display:grid; place-items:center; text-align:center;
  font-weight:700; font-size:11.5px; line-height:1.05; letter-spacing:-.02em; padding:6px;
  animation: orbitspin 46s linear infinite reverse; }
.orbit-chip.sm{ width: 60px; height: 60px; font-size:10.5px; box-shadow: 0 10px 22px -14px rgba(11,18,32,.26); }
.ring-inner .orbit-chip{ animation: orbitspin 34s linear infinite normal; }
.orbit-chip:hover{ box-shadow: 0 16px 30px -12px rgba(11,18,32,.4); }
.pm-lbl{ display:block; transition: opacity .2s ease, transform .2s ease; }
.pm-lbl.swap{ opacity:0; transform: translateY(.2em); }
.lbl-enter-active, .lbl-leave-active{ transition: opacity .35s ease, transform .35s ease; }
.lbl-enter-from{ opacity:0; transform: translateY(.28em); }
.lbl-leave-to{ opacity:0; transform: translateY(-.28em); }
.orbit-core{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:96px; height:96px;
  border-radius:50%; background: var(--ink); display:grid; place-items:center; z-index:2;
  box-shadow: 0 22px 44px -18px rgba(11,18,32,.55); }
.orbit-core .mark{ font-family: var(--display); font-weight:700; font-size:40px; color:#fff; position:relative; }
.orbit-core .mark::after{ content:""; position:absolute; right:-7px; bottom:2px; width:13px; height:13px; background: var(--yellow); border-radius:4px; }
.orbit-core::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid var(--blue); opacity:.3; animation: corepulse 2.8s ease-out infinite; }
@keyframes corepulse{ 0%{ transform: scale(1); opacity:.4; } 70%{ transform: scale(1.5); opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .ring-outer, .ring-inner, .orbit-chip, .orbit-core::before{ animation: none !important; }
}

/* —— RECEIPT —— */
.hero-visual{ position: relative; }
.receipt{ background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: 0 34px 64px -34px rgba(11,15,20,.22), 0 2px 0 rgba(11,15,20,.02); }
.receipt .head{ display:flex; justify-content:space-between; align-items:center; }
.receipt .head .lbl{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.receipt .head .status{ display:inline-flex; gap:6px; align-items:center; padding: 4px 10px; border-radius: 999px; background: #E6F7EC; color: #1F7A3A; font-size: 11px; font-family: var(--mono); }
.receipt .head .status::before{ content:""; width:6px; height:6px; border-radius:50%; background: #1F7A3A; }
.receipt .amount{ font-size: 42px; letter-spacing: -0.03em; line-height: 1; margin: 18px 0 22px; font-weight: 500; }
.receipt .amount small{ font-size: 15px; color: var(--ink-3); margin-left: 8px; font-weight: 400; }
.receipt .row{ display:flex; justify-content: space-between; padding: 11px 0; border-top: 1px dashed var(--line); color: var(--ink-2); font-family: var(--mono); font-size: 13px; }
.receipt .row span:last-child{ color: var(--ink); }
.receipt .bar{ height: 8px; border-radius: 999px; background: var(--bg-soft); margin-top: 18px; overflow: hidden; }
.receipt .bar i{ display:block; height: 100%; width: 76%; background: linear-gradient(90deg, var(--sky), var(--blue)); border-radius: 999px; }

.hero-visual .sticker{ position: absolute; top: -20px; right: -8px; background: var(--yellow); color: var(--ink); padding: 8px 13px; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; transform: rotate(4deg); box-shadow: 0 10px 22px -12px rgba(11,15,20,.35); z-index: 2; }
.hero-visual .floating{ position: absolute; left: -34px; bottom: -30px; background: var(--ink); color: var(--bg); padding: 14px 16px; border-radius: var(--r-md); font-family: var(--mono); font-size: 12px; line-height: 1.5; box-shadow: 0 22px 44px -22px rgba(11,15,20,.5); max-width: 230px; z-index: 2; }
.hero-visual .floating b{ color: var(--yellow); font-weight: 500; }
@media (max-width: 540px){ .hero-visual .floating{ left: -6px; bottom: -44px; } .hero-visual .sticker{ right: 2px; } }

/* —— TRUST —— */
.trust{ padding: 30px 0; border-top:1px solid var(--line-soft); }
.trust-grid{ display:flex; align-items:center; gap: 40px; justify-content: space-between; flex-wrap: wrap; }
.trust .label{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.trust .marks{ display:flex; gap: 38px; flex-wrap: wrap; align-items: center; }
.trust .wm{ font-weight: 600; letter-spacing: -0.02em; color: var(--ink-2); font-size: 19px; opacity: .72; }
.trust .wm.s{ font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }

/* —— PAYMENT METHODS —— */
.methods{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 960px){ .methods{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .methods{ grid-template-columns: 1fr; } }
.method{ background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; min-height: 176px; display:flex; flex-direction: column; gap: 12px; transition: transform .15s ease, border-color .15s ease; }
.method:hover{ transform: translateY(-3px); border-color: var(--ink); }
.method .glyph{ width: 46px; height: 30px; border-radius: 6px; background: var(--bg-soft); border: 1px solid var(--line); font-family: var(--mono); font-size: 10px; color: var(--ink-3); display:grid; place-items:center; letter-spacing: 0.04em; flex:none; }
.method.card .glyph{ background: linear-gradient(135deg, var(--sky), var(--blue)); border: 0; color: #fff; }
.method.wallet .glyph{ background: var(--ink); color: var(--yellow); border: 0; }
.method.bank .glyph{ background: var(--yellow); border: 0; color: var(--ink); }
.method .name{ font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin-top: auto; }
.method .desc{ font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }
.method.apm .desc{ margin-top: 0; }
.method.apm .glyph{ background: var(--blue); border: 0; color: #fff; }
.method .subs{ display:flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.method .subs span{ display:flex; align-items:center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.method .subs span i{ width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); flex:none; }
.method .subs span small{ font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--ink-3); letter-spacing: 0.02em; }

/* —— COVERAGE / MAP —— */
.cov-head{ display:flex; gap: 56px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 40px; }
.cov-head .left{ max-width: 56ch; }
.cov-head .eyebrow{ margin-bottom: 18px; }
.cov-head .lede{ max-width: 40ch; }
.cov-head h2 .it{ color: var(--blue); }

.map-wrap{ background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 30px); }
.map-legend{ display:flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.map-legend .leg{ display:inline-flex; align-items:center; gap: 9px; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); font-size: 14px; font-weight: 500; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.map-legend .leg .lk{ width: 10px; height: 10px; border-radius: 50%; flex:none; }
.map-legend .leg b{ font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--ink-3); }
.map-legend .leg:hover{ border-color: var(--ink); }
.map-legend .leg.active{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
.map-legend .leg.active b{ color: rgba(255,255,255,.6); }

.map-stage{ position: relative; margin-top: 6px; }
.world-map{ display:block; width: 100%; height: auto; }
.map-dots circle{ fill: color-mix(in srgb, var(--ink) 18%, transparent); }
.mk-ring{ fill: none; stroke-width: 2; opacity: .9; transform-box: fill-box; transform-origin: center; }
.mk-dot{ stroke: var(--card); stroke-width: 2.5; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: r .12s ease; }
.mk-dot:hover{ r: 8; }
.mk-arc{ fill: none; stroke-width: 1.4; opacity: .35; stroke-linecap: round; transition: opacity .3s ease; }
.mk-arc.dim{ opacity: .05; }
.mk-g{ opacity: 0; }
.mk-g.show{ opacity: 1; transition: opacity .45s ease; }
.mk-g.dim{ opacity: .12 !important; transition: opacity .3s ease; }
@keyframes mkpulse{ 0%{ transform: scale(1); opacity:.85; } 70%{ transform: scale(2.6); opacity:0; } 100%{ transform: scale(2.6); opacity:0; } }
.mk-ring{ animation: mkpulse 2.6s ease-out infinite; }

.map-tip{ position: absolute; z-index: 5; transform: translate(-50%, -118%); background: var(--ink); color: var(--bg); border-radius: 10px; padding: 10px 13px; pointer-events: none; min-width: 132px; box-shadow: 0 16px 32px -16px rgba(11,15,20,.6); }
.map-tip .tn{ font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.map-tip .tm{ font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.62); margin-top: 3px; display:flex; align-items:center; gap: 6px; }
.map-tip .tm .tk{ width: 7px; height: 7px; border-radius: 50%; }
.map-tip::after{ content:""; position:absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }

.map-foot{ display:flex; flex-wrap: wrap; gap: 14px; align-items:center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.map-foot .flags{ display:flex; }
.map-foot .flags i{ width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--card); margin-left: -8px; display:grid; place-items:center; font-style: normal; font-size: 11px; font-family: var(--sans); font-weight: 600; color: #fff; }
.map-foot .flags i:first-child{ margin-left: 0; }

/* —— EXPLORER PANEL SHELL —— */
.explorer-shell{ position:relative; overflow:hidden; background:linear-gradient(180deg,#EAF3FC 0%,#E3EDFB 100%); border:1px solid #D9E6F6; border-radius:var(--r-xl); padding: clamp(26px,3.4vw,52px); }
.explorer-shell::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(to right, rgba(10,80,180,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(10,80,180,.05) 1px, transparent 1px); background-size:54px 54px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 8%, #000, transparent 72%); mask-image: radial-gradient(ellipse 70% 70% at 70% 8%, #000, transparent 72%); }
.explorer-shell > *{ position:relative; z-index:1; }
.explorer-shell .section-head{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-bottom: clamp(26px,3vw,40px); }
.explorer-shell .section-head h2{ margin:0; }
.explorer-shell .section-head .left{ display:flex; flex-direction:column; gap:16px; }
.explorer-shell .section-head .eyebrow{ margin:0; }
.explorer-shell .section-head .left{ max-width:none; }
.explorer-shell .section-head .lede{ max-width:54ch; margin:0; }
.explorer-shell .ex2-regions{ background:#fff; border-color:#D9E6F6; }

/* —— EXPLORER v2 (category board) —— */
.ex2-bar{ display:flex; flex-direction:column; gap:14px; margin-bottom:6px; }
.ex2-regions{ display:inline-flex; gap:4px; padding:4px; background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; width:fit-content; }
.ex2-reg{ height:34px; padding:0 18px; border:0; background:transparent; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ink-3); letter-spacing:.02em; cursor:pointer; transition:background .15s ease, color .15s ease; }
.ex2-reg:hover{ color:var(--ink); }
.ex2-reg.active{ background:var(--ink); color:#fff; }
.ex2-countries{ display:flex; gap:8px; flex-wrap:wrap; }
.ex2-country{ display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 16px 0 7px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:14.5px; font-weight:500; color:var(--ink-2); cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.ex2-country:hover{ border-color:var(--ink); }
.ex2-country.active{ background:var(--accent-soft); border-color:var(--blue); color:var(--blue); }
.ex2-country .fc{ width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--mono); font-size:9px; font-weight:600; color:#fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }

.ex2-head{ display:flex; align-items:center; gap:18px; margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
.ex2-flag{ width:58px; height:58px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--mono); font-size:14px; font-weight:500; color:#fff; box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); }
.ex2-head h3{ font-family:var(--display); font-size:clamp(28px,3.4vw,44px); font-weight:600; letter-spacing:-0.03em; margin:0; line-height:1; }
.ex2-count{ font-family:var(--mono); font-size:12px; color:var(--ink-3); margin:7px 0 0; }
.ex2-head .explore{ margin-left:auto; font-size:14px; font-weight:600; color:var(--blue); display:inline-flex; align-items:center; gap:7px; }
.ex2-head .explore svg{ width:15px; height:15px; transition:transform .15s ease; }
.ex2-head .explore:hover svg{ transform:translateX(3px); }
@media (max-width:520px){ .ex2-head .explore{ display:none; } }

.ex2-cols{ margin-top:22px; display:grid; grid-template-columns:repeat(auto-fit, minmax(216px, 1fr)); gap:16px; align-items:start; }
.ex2-col{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; }
.ex2-collabel{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.ex2-collabel .cdot{ width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none; }
.ex2-collabel b{ margin-left:auto; font-family:var(--sans); font-weight:600; font-size:12px; color:var(--ink); background:var(--bg-soft); border-radius:999px; padding:2px 9px; }
.ex2-list{ display:flex; flex-direction:column; gap:8px; }
.ex2-tile{ display:flex; align-items:center; gap:11px; min-height:48px; padding:9px 14px; border-radius:12px; background:var(--bg); border:1px solid var(--line-soft); transition:background .12s ease, border-color .12s ease, transform .12s ease; }
.ex2-tile:hover{ background:var(--card); border-color:var(--ink); transform:translateX(3px); }
.ex2-tile .pmdot{ width:9px; height:9px; border-radius:50%; flex:none; }
.ex2-tile .pmn{ font-weight:700; font-size:14px; letter-spacing:-0.02em; line-height:1.15; }
.ex2-tile .pmn small{ display:block; font-weight:500; font-size:10px; letter-spacing:.04em; color:var(--ink-3); margin-top:2px; text-transform:uppercase; }
.ex-fade{ animation: exfade .35s ease; }
@keyframes exfade{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }

/* —— INDUSTRIES —— */
.ind-hl{ color: var(--blue-2); }
.h1 .acc{ color: var(--blue-2); }
.industries{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px){ .industries{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px){ .industries{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .industries{ grid-template-columns: 1fr; } }
.industry{ background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; min-height: 196px; display:flex; flex-direction: column; gap: 12px; transition: transform .15s ease, border-color .15s ease; }
.industry:hover{ transform: translateY(-3px); border-color: var(--ink); }
.industry .ix{ font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.industry .it{ font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin-top: 4px; }
.industry .id{ font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.industry .stat{ margin-top: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-2); display:flex; align-items:baseline; gap: 8px; }
.industry .stat b{ font-family: var(--sans); font-size: 23px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; }

/* —— CODE —— */
.code-wrap{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
@media (max-width: 920px){ .code-wrap{ grid-template-columns: 1fr; gap: 40px; } }
.code-feat{ display:flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.code-feat .cf{ display:flex; gap: 14px; align-items: flex-start; }
.code-feat .cf .n{ font-family: var(--mono); font-size: 12px; color: var(--blue); border: 1px solid var(--accent-soft); background: var(--accent-soft); border-radius: 6px; padding: 3px 7px; flex:none; }
.code-feat .cf .t{ font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.code-feat .cf .t b{ color: var(--ink); font-weight: 600; }
.code-cta{ margin-top: 30px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.code-cta .btn svg{ width:16px; height:16px; }

.editor{ background: #0C1118; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(11,15,20,.5); border: 1px solid #1b2230; }
.editor .bar{ display:flex; align-items:center; gap: 8px; padding: 14px 16px; background: #11161F; border-bottom: 1px solid #1b2230; }
.editor .bar .dots{ display:flex; gap: 7px; }
.editor .bar .dots i{ width: 11px; height: 11px; border-radius: 50%; background: #2A323D; }
.editor .bar .tab{ margin-left: 8px; font-family: var(--mono); font-size: 12px; color: #6B7686; }
.editor .bar .lang{ margin-left: auto; font-family: var(--mono); font-size: 11px; color: #FBC91B; background: rgba(251,201,27,.12); padding: 3px 9px; border-radius: 999px; }
.editor .bar .langtabs{ display:flex; gap:2px; margin-left:10px; flex-wrap:wrap; }
.editor .bar .langtabs button{ font-family:var(--mono); font-size:12px; color:#6B7686; background:transparent; border:0; padding:4px 10px; border-radius:7px; cursor:pointer; transition:color .12s ease, background .12s ease; }
.editor .bar .langtabs button:hover{ color:#C7D0DC; }
.editor .bar .langtabs button.active{ color:#FBC91B; background:rgba(251,201,27,.12); }
.editor .bar .reroll{ margin-left:auto; display:grid; place-items:center; width:28px; height:28px; border-radius:7px; border:0; background:transparent; color:#6B7686; cursor:pointer; transition:color .12s ease, background .12s ease; }
.editor .bar .reroll:hover{ color:#FBC91B; background:rgba(255,255,255,.06); }
.editor .bar .reroll svg{ width:15px; height:15px; }
.editor pre{ min-height: 432px; }
.editor pre{ margin: 0; padding: 22px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: #C7D0DC; }
.editor .cm{ color: #5A6573; }
.editor .kw{ color: #7AB7FF; }
.editor .st{ color: #FBC91B; }
.editor .fn{ color: #6FE3B0; }
.editor .nm{ color: #F2A35E; }
.editor .pr{ color: #C792EA; }

/* —— SECURITY —— */
.sec-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px){ .sec-grid{ grid-template-columns: 1fr; } }
.sec-card{ background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; display:flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.sec-card .badge{ display:inline-flex; align-items:center; gap: 9px; height: 34px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; width: fit-content; }
.sec-card .badge .ic{ width: 18px; height: 18px; border-radius: 5px; display:grid; place-items:center; }
.sec-card.pci .badge .ic{ background: var(--blue); color:#fff; }
.sec-card.gdpr .badge .ic{ background: var(--yellow); color: var(--ink); }
.sec-card .st{ font-size: 22px; font-weight: 500; letter-spacing: -0.018em; }
.sec-card .sd{ font-size: 14.5px; color: var(--ink-3); line-height: 1.55; }
.sec-card ul{ margin: 6px 0 0; padding: 0; list-style: none; display:flex; flex-direction: column; gap: 10px; }
.sec-card li{ display:flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.sec-card li svg{ width: 18px; height: 18px; flex:none; color: var(--blue); margin-top: 1px; }
.sec-strip{ display:flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--line-soft); }
.sec-strip .chip{ display:flex; align-items:center; gap: 9px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.sec-strip .chip .k{ width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }

/* —— CERT / REGULATORY CARDS —— */
.cert-row{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }
@media (max-width: 820px){ .cert-row{ grid-template-columns: 1fr; } }
.cert-card{ background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; display:flex; flex-direction: column; gap: 14px; transition: transform .15s ease, border-color .15s ease; }
.cert-card:hover{ transform: translateY(-3px); border-color: var(--ink); }
.cert-card .medal{ width: 48px; height: 48px; color: var(--blue); }
.cert-card .medal svg{ width: 100%; height: 100%; }
.cert-card .ct{ font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.cert-card .cd{ font-size: 14.5px; color: var(--ink-3); line-height: 1.55; }
.cert-card .ctag{ margin-top: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }

/* —— CONTACT FORM —— */
.contact-shell{ position:relative; overflow:hidden; background:var(--ink); color:var(--bg); border-radius:var(--r-xl); padding: clamp(28px,4vw,64px); box-shadow:0 50px 90px -54px rgba(11,18,32,.55); }
.contact-shell::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px); background-size:56px 56px; -webkit-mask-image: radial-gradient(ellipse 75% 80% at 60% 10%, #000, transparent 72%); mask-image: radial-gradient(ellipse 75% 80% at 60% 10%, #000, transparent 72%); }
.contact-shell .eyebrow{ color:rgba(255,255,255,.5); }
.contact-shell .eyebrow .dot{ background:var(--yellow); }
.contact-shell .h1{ color:#fff; }
.contact-shell .acc{ color:var(--yellow); }
.contact-shell .lede{ color:rgba(255,255,255,.62); }
.contact-shell .ci-point{ color:rgba(255,255,255,.82); }
.contact-shell .ci-point svg{ color:var(--yellow); }
.contact-wrap{ position:relative; z-index:1; display:grid; grid-template-columns:.82fr 1.18fr; gap: clamp(32px,4vw,60px); align-items:start; }
@media (max-width: 920px){ .contact-wrap{ grid-template-columns:1fr; gap:34px; } }
.contact-intro .eyebrow{ margin-bottom:18px; }
.contact-intro .lede{ margin-top:16px; max-width:34ch; }
.ci-points{ margin-top:28px; display:flex; flex-direction:column; gap:13px; }
.ci-point{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); }
.ci-point svg{ width:18px; height:18px; color:var(--blue); flex:none; margin-top:1px; }

.contact-card{ position:relative; background:rgba(255,255,255,.045); color:var(--bg); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding: clamp(20px,2.3vw,32px); }
.contact-card::before{ content:none; }
.ctf-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
@media (max-width:560px){ .ctf-grid{ grid-template-columns:1fr; } }
.ctf-field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.ctf-field.full{ grid-column:1 / -1; }
.ctf-label{ font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:6px; line-height:1.3; }
.ctf-label .req{ color:var(--yellow); }
.ctf-input, .ctf-select, .ctf-textarea{ width:100%; font:inherit; font-size:15px; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:0 14px; height:48px; outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.ctf-input::placeholder, .ctf-textarea::placeholder{ color:rgba(255,255,255,.4); }
.ctf-input:focus, .ctf-select:focus, .ctf-textarea:focus{ border-color:var(--yellow); background:rgba(255,255,255,.08); box-shadow:0 0 0 3px rgba(251,201,27,.18); }
.ctf-select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23A6B0C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.ctf-select option{ color:#0B1220; }
.ctf-select.is-empty{ color:rgba(255,255,255,.45); }
.ctf-textarea{ height:auto; min-height:130px; padding:14px; resize:vertical; line-height:1.55; }
.ctf-count{ align-self:flex-end; font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.45); margin-top:-2px; }
.ctf-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ctf-chip{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 15px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:rgba(255,255,255,.8); font-size:14px; font-weight:500; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.ctf-chip:hover{ border-color:rgba(255,255,255,.4); color:#fff; }
.ctf-chip.on{ background:rgba(251,201,27,.16); border-color:var(--yellow); color:var(--yellow); }
.ctf-chip .ck{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); transition:background .15s ease; }
.ctf-chip.on .ck{ background:var(--yellow); }
.ctf-consent{ grid-column:1/-1; font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.55; }
.ctf-consent a{ color:var(--yellow); font-weight:600; }
.ctf-actions{ grid-column:1/-1; display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:2px; }
.ctf-actions .btn{ height:54px; padding:0 30px; font-size:16px; font-weight:600; }
.ctf-ok{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#5FD08A; }
.ctf-ok svg{ width:18px; height:18px; }
.ctf-sending{ opacity:.92; cursor:default; }
.ctf-sending:hover{ transform:none; }
.ctf-spin{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(11,18,32,.28); border-top-color:var(--ink); animation:ctfspin .7s linear infinite; }
@keyframes ctfspin{ to{ transform:rotate(360deg); } }
.ctf-ok{ animation: ctfpop .35s ease; }
@keyframes ctfpop{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* —— CTA —— */
.cta{ background: var(--ink); color: var(--bg); border-radius: var(--r-xl); padding: clamp(40px, 6vw, 76px); position: relative; overflow: hidden; }
.cta::before{ content:""; position:absolute; inset:0; background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 90% at 80% 20%, black, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 20%, black, transparent 70%); }
.cta-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; position: relative; z-index: 1; }
@media (max-width: 820px){ .cta-grid{ grid-template-columns: 1fr; gap: 36px; } }
.cta h2{ color: var(--bg); }
.cta h2 .it{ color: var(--yellow); }
.cta .lede{ color: rgba(250,250,247,.7); margin-top: 18px; }
.signup{ background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 24px; backdrop-filter: blur(6px); }
.signup label{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(250,250,247,.55); display:block; margin-bottom: 8px; }
.signup .field{ display:flex; gap: 10px; margin-bottom: 14px; }
.signup input{ flex: 1; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--bg); padding: 0 18px; font: inherit; font-size: 15px; outline: none; transition: border-color .15s ease; }
.signup input::placeholder{ color: rgba(250,250,247,.4); }
.signup input:focus{ border-color: var(--yellow); }
.signup .note{ font-size: 12px; color: rgba(250,250,247,.5); display:flex; align-items:center; gap: 8px; margin-top: 4px; }
.signup .note svg{ width: 14px; height: 14px; color: var(--yellow); }
.signup .btn{ width: 100%; justify-content: center; }

/* —— FOOTER —— */
.footer{ padding: clamp(56px, 7vw, 88px) 0 40px; border-top: 1px solid var(--line-soft); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 820px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 460px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer .blurb{ font-size: 14px; color: var(--ink-3); line-height: 1.55; max-width: 30ch; margin: 16px 0 0; }
.footer .col h4{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; font-weight: 500; }
.footer .col a{ display:block; font-size: 14.5px; color: var(--ink-2); padding: 6px 0; }
.footer .col a:hover{ color: var(--ink); }
.footer-base{ display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-3); }
.footer-base .badges{ display:flex; gap: 12px; flex-wrap: wrap; }
.footer-base .fb-legal{ display:flex; flex-direction:column; gap:6px; max-width: 66ch; }
.footer-base .fb-copy{ color: var(--ink-2); font-weight:500; }
.footer-base .fb-note{ font-size: 12px; line-height:1.55; color: var(--ink-3); }
.footer-base .badges span{ font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }

/* —— LAYOUT TWEAK VARIANTS —— */
body[data-layout="centered"] .hero-grid{ grid-template-columns: 1fr; text-align: center; justify-items: center; }
body[data-layout="centered"] .hero .lede{ margin-left: auto; margin-right: auto; }
body[data-layout="centered"] .hero-cta{ justify-content: center; }
body[data-layout="centered"] .hero-meta{ justify-content: center; }
body[data-layout="centered"] .hero-visual{ display: none; }
body[data-layout="centered"] .section-head{ flex-direction: column; align-items: center; text-align: center; }
body[data-layout="centered"] .section-head .left{ display:flex; flex-direction: column; align-items: center; }

body[data-density="compact"] .section{ padding: clamp(52px, 6vw, 92px) 0; }
body[data-density="airy"] .section{ padding: clamp(88px, 11vw, 168px) 0; }

.reveal{ opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity: 1; transform: none; }