/* ─────────────────────────────────────────────────────────────────────────
   Kolo × AMLBot — promo.kolo.xyz/amlbot/
   Ported 2026-10-21 from a standalone static handoff
   (Kolo_AMLBot_landing_final.zip). Design/copy are final — only the
   technical port (Astro, self-hosted assets, scoping) is ours.

   Loaded ONLY by src/pages/amlbot.astro (own <link>, not BaseLayout) — per
   project rule #1, every selector below is scoped under .aml-bot-page so
   nothing here can leak into any other page's styles.

   Two deviations from the original handoff files
   (export/kolo-amlbot-landing/{colors_and_type.css,index.html}):
   1. The handoff's `@import` of Onest from Google Fonts (external CDN) is
      dropped — this repo already self-hosts Onest (latin+cyrillic, weights
      400-700, covering every weight this page actually uses) via
      custom.css, loaded site-wide through BaseLayout. Same for the
      handoff's "Fixelvariable" family: this repo already self-hosts the
      real Fixel file under the family name "Fixel" — reused as-is instead
      of adding a second, differently-named @font-face for the same font.
   2. `html{scroll-behavior:smooth}` is kept targeting the real <html>
      element on purpose (needed for the in-page #faq anchor jump) — safe
      because this stylesheet is never linked from any other page.
   ───────────────────────────────────────────────────────────────────────── */

.aml-bot-page {
  /* ---------- BRAND PALETTE ---------- */
  --kolo-green:        #13D659;
  --kolo-green-600:    #10B84D;
  --kolo-green-700:    #0C9A40;
  --kolo-green-300:    #6FE89A;
  --kolo-green-100:    #DFFAEA;
  --kolo-green-muted:  #31A35A;

  --kolo-violet:       #5846D9;
  --kolo-violet-900:   #302773;
  --kolo-violet-100:   #E7E3FB;

  --kolo-ink:          #191C1A;

  /* ---------- NEUTRAL SCALE ---------- */
  --gray-950: #131614;
  --gray-900: #191C1A;
  --gray-800: #2A2E2B;
  --gray-700: #3C413E;
  --gray-600: #5A615C;
  --gray-500: #767D78;
  --gray-400: #9AA19C;
  --gray-300: #C7CDC8;
  --gray-200: #E4E8E5;
  --gray-150: #ECEFEC;
  --gray-100: #F3F5F3;
  --gray-50:  #F8FAF8;
  --surface:  #F5F5F5;
  --white:    #FFFFFF;

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:            var(--white);
  --bg-subtle:     var(--gray-50);
  --surface-1:     var(--white);
  --surface-2:     var(--surface);
  --fg:            var(--kolo-ink);
  --fg-2:          var(--gray-500);
  --fg-3:          var(--gray-400);
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);

  --accent:        var(--kolo-green);
  --accent-hover:  var(--kolo-green-600);
  --accent-fg:     var(--kolo-ink);
  --on-accent:     #06351A;

  --btn-primary-bg:   var(--kolo-ink);
  --btn-primary-fg:   var(--white);
  --btn-primary-hover:#000000;

  --success: #13D659;
  --danger:  #E5484D;
  --warning: #F5A524;
  --info:    var(--kolo-violet);

  --btc:  #F7931A;
  --eth:  #627EEA;
  --usdt: #26A17B;
  --sol:  #14F195;

  /* ---------- TYPE FAMILIES (reuse the site's existing self-hosted fonts) ---------- */
  --font-display: 'Fixel', 'Onest', system-ui, -apple-system, Arial, sans-serif;
  --font-sans:    'Fixel', 'Onest', system-ui, -apple-system, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --text-display:  56px;
  --text-h1:       40px;
  --text-h2:       30px;
  --text-h3:       22px;
  --text-h4:       18px;
  --text-lg:       17px;
  --text-base:     15px;
  --text-sm:       13px;
  --text-xs:       11px;
  --text-amount:   34px;

  --lh-display:  1.04;
  --lh-h1:       1.08;
  --lh-h2:       1.14;
  --lh-h3:       1.22;
  --lh-h4:       1.3;
  --lh-lg:       1.5;
  --lh-base:     1.55;
  --lh-sm:       1.5;
  --lh-xs:       1.4;
  --lh-amount:   1.0;

  --ls-display: -0.02em;
  --ls-h1:      -0.02em;
  --ls-h2:      -0.015em;
  --ls-h3:      -0.01em;
  --ls-h4:      -0.005em;
  --ls-xs:       0.04em;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extra: 800;

  /* ---------- SPACING ---------- */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px;

  /* ---------- RADII ---------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(25,28,26,0.05);
  --shadow-sm: 0 1px 3px rgba(25,28,26,0.06), 0 1px 2px rgba(25,28,26,0.04);
  --shadow-md: 0 4px 16px rgba(25,28,26,0.07), 0 1px 3px rgba(25,28,26,0.05);
  --shadow-lg: 0 12px 36px rgba(25,28,26,0.10), 0 4px 10px rgba(25,28,26,0.05);
  --shadow-green: 0 8px 24px rgba(19,214,89,0.28);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;

  /* ============================ BASE ============================ */
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.aml-bot-page h1, .aml-bot-page h2, .aml-bot-page h3, .aml-bot-page h4 { font-family: var(--font-display); font-weight: var(--w-bold); margin: 0; text-wrap: balance; }
.aml-bot-page h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.aml-bot-page h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.aml-bot-page h3 { font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.aml-bot-page h4 { font-size: var(--text-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: var(--w-semibold); }
.aml-bot-page .display { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.aml-bot-page p { margin: 0; }
.aml-bot-page .overline { font-size: var(--text-xs); letter-spacing: var(--ls-xs); text-transform: uppercase; font-weight: var(--w-semibold); color: var(--fg-2); }
.aml-bot-page .amount { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--text-amount); line-height: var(--lh-amount); letter-spacing: -0.01em; font-feature-settings: "tnum" 1; }
.aml-bot-page .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.aml-bot-page a { color: var(--kolo-green-700); text-decoration: none; }

/* ============================ PAGE-SPECIFIC (was index.html's inline <style>) ============================ */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.aml-bot-page *{transition:none!important}}
.aml-bot-page a{color:var(--kolo-green-700)}.aml-bot-page a:hover{color:var(--kolo-green-600)}
.aml-bot-page a:focus-visible,.aml-bot-page button:focus-visible{outline:2px solid var(--kolo-green);outline-offset:2px}
.aml-bot-page .wrap{max-width:1200px;margin:0 auto}
.aml-bot-page .pad{padding-inline:clamp(16px,5cqw,80px)}
.aml-bot-page .btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 28px;border-radius:var(--radius-pill);background:var(--btn-primary-bg);color:var(--btn-primary-fg);font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;transition:background var(--dur) var(--ease),transform var(--dur-fast) var(--ease)}
.aml-bot-page .btn,.aml-bot-page .btn:hover{color:#fff}.aml-bot-page .btn:hover{background:var(--btn-primary-hover);box-shadow:var(--shadow-md)}.aml-bot-page .btn:active{transform:scale(.98)}
.aml-bot-page .btn.sm{height:44px;padding:0 20px;font-size:14px}
.aml-bot-page .ovl{font-size:var(--text-xs);letter-spacing:var(--ls-xs);text-transform:uppercase;font-weight:600}
.aml-bot-page .row{display:flex;align-items:center;gap:16px;background:var(--surface-2);border-radius:var(--radius-md);padding:16px 18px}
.aml-bot-page .num{flex:none;width:40px;height:40px;border-radius:50%;background:var(--kolo-ink);color:var(--kolo-green);display:flex;align-items:center;justify-content:center;font-weight:700;font-feature-settings:"tnum" 1}
.aml-bot-page .faq-item{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-1);transition:box-shadow var(--dur) var(--ease)}
.aml-bot-page .faq-item.open{box-shadow:var(--shadow-md);border-color:transparent}
.aml-bot-page .faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;background:transparent;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--fg)}
.aml-bot-page .faq-ic{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease)}
.aml-bot-page .faq-ic svg{transition:transform var(--dur) var(--ease)}
.aml-bot-page .foot a{color:#fff;text-decoration:none;font-size:15px}.aml-bot-page .foot a:hover{color:var(--kolo-green)}
.aml-bot-page .seg button{border:0;cursor:pointer;font:inherit;font-weight:600;font-size:13px;min-width:44px;height:36px;border-radius:var(--radius-pill);transition:background var(--dur) var(--ease)}
.aml-bot-page .btn{background:#0E1322;color:#fff}.aml-bot-page .btn:hover{background:#232A3D}.aml-bot-page .btn.on-dark,.aml-bot-page .btn.on-dark:hover{background:#13D659;color:#0E1322}.aml-bot-page .btn.on-dark:hover{background:#2BE070;box-shadow:0 10px 30px -10px rgba(19,214,89,.5)}
.aml-bot-page .num{background:#EEF0FB;color:#2B3FD9}
@media (max-width:560px){.aml-bot-page .hdr{flex-wrap:nowrap!important;gap:8px!important}.aml-bot-page .hdr-logos{gap:8px!important;min-width:0}.aml-bot-page .hdr-k{height:22px!important}.aml-bot-page .hdr-a{height:16px!important}.aml-bot-page .hdr .seg button{min-width:36px;height:32px;font-size:12px}.aml-bot-page .hdr .btn.sm{height:36px;padding:0 14px;font-size:13px}}
@media (max-width:440px){.aml-bot-page .hdr .btn.sm{display:none}}
@media (max-width:720px){.aml-bot-page .how-vis{display:none!important}.aml-bot-page .fgrid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 14px!important}.aml-bot-page .fgrid>:first-child{grid-column:1/-1}.aml-bot-page .fgrid a{font-size:14px;overflow-wrap:anywhere}.aml-bot-page .ai-row{gap:8px!important}.aml-bot-page .ai-l{flex:1 0 100%}.aml-bot-page .ai-row a{flex:1 1 0;justify-content:center}}