@layer tokens {
  :root {
    --color-bg: #f7f5ef;
    --color-surface: #ffffff;
    --color-surface-soft: #f0eee7;
    --color-surface-muted: #e8edf5;
    --color-surface-deep: #07152e;
    --color-surface-deeper: #030b1c;
    --color-text: #10192d;
    --color-text-muted: #5c6678;
    --color-text-subtle: #7c8798;
    --color-border: #d9dee7;
    --color-border-strong: #bac4d2;
    --color-primary: #0b5cff;
    --color-primary-hover: #0647cc;
    --color-primary-soft: #eaf1ff;
    --color-primary-bright: #6aa4ff;
    --color-accent: #ff5a3d;
    --color-accent-soft: #fff0ec;
    --color-focus: #0b5cff;
    --color-success: #087a58;
    --color-success-soft: #e9f8f2;
    --color-warning: #a55b00;
    --color-warning-soft: #fff5e6;
    --color-danger: #b42318;
    --color-danger-soft: #fff0ef;
    --color-inverse: #ffffff;
    --color-code-bg: #07111f;
    --color-code-text: #dce8ff;
    --color-backdrop: rgb(2 10 27 / 0.68);
    --search-bg: #ffffff;
    --search-text: #10192d;
    --search-placeholder: #727e90;
    --search-border: #c5cedb;
    --navbar-bg: rgb(5 18 43 / 0.88);
    --navbar-solid: #07152e;
    --navbar-border: rgb(255 255 255 / 0.14);
    --navbar-text: #ffffff;
    --navbar-text-muted: #c8d3e8;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;
    --shadow-overlay: 0 30px 80px rgb(5 18 43 / 0.24);
    --shadow-dialog: 0 40px 100px rgb(2 10 27 / 0.36);
    --shadow-focus: 0 0 0 4px rgb(11 92 255 / 0.16);
    --motion-fast: 140ms;
    --motion-normal: 240ms;
    --motion-slow: 700ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
    --content-max: 86rem;
    --content-reading: 70ch;
    --navbar-height: 5rem;
    --section-pad: clamp(5rem, 9vw, 9rem);
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-height) + 1.5rem); }
  body { min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--color-bg); color: var(--color-text); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
  body.search-dialog-open, body.nav-menu-open { overflow: hidden; }
  a { color: var(--color-primary); text-underline-offset: 0.22em; }
  a:hover { color: var(--color-primary-hover); }
  img { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; }
  button { touch-action: manipulation; }
  code, pre, .font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
  h1, h2, h3, h4, p { text-wrap: pretty; }
  .container, .container-xl, .container-xxl { max-width: var(--content-max); }
  ::selection { color: #fff; background: var(--color-primary); }
  .btn { --bs-btn-border-radius: var(--radius-pill); --bs-btn-font-weight: 700; --bs-btn-padding-x: 1.2rem; --bs-btn-padding-y: 0.72rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; letter-spacing: -0.01em; transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary-hover); --bs-btn-hover-border-color: var(--color-primary-hover); }
  .btn-light { --bs-btn-color: #07152e; --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-color: #07152e; --bs-btn-hover-bg: #edf2ff; --bs-btn-hover-border-color: #edf2ff; }
  .btn-ghost-light { color: #fff; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.34); }
  .btn-ghost-light:hover { color: #fff; background: rgb(255 255 255 / 0.13); border-color: rgb(255 255 255 / 0.58); }
  .form-control, .form-select { min-height: 48px; color: var(--color-text); background-color: var(--color-surface); border-color: var(--color-border-strong); border-radius: var(--radius-md); }
  .form-control:focus, .form-select:focus { color: var(--color-text); background-color: var(--color-surface); border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
  textarea.form-control { min-height: 11rem; resize: vertical; }
  .form-label { margin-bottom: 0.55rem; font-size: 0.88rem; font-weight: 750; }
  .form-text { color: var(--color-text-muted); }
  .alert { border: 1px solid currentColor; border-radius: var(--radius-md); }
  .table { --bs-table-bg: transparent; --bs-table-color: var(--color-text); --bs-table-border-color: var(--color-border); }
}

@layer typography {
  .text-eyebrow, .category-kicker, .sidebar-kicker, .footer-label { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--color-primary); font-size: 0.73rem; font-weight: 800; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; }
  .text-eyebrow-inverse { color: #a9c6ff; }
  .eyebrow-dot { width: 0.5rem; height: 0.5rem; background: var(--color-accent); border-radius: 50%; box-shadow: 0 0 0 5px rgb(255 90 61 / 0.14); }
  .hero-title { max-width: 10.5ch; margin: 1.15rem 0 1.5rem; font-size: clamp(3.25rem, 7.2vw, 7.6rem); font-weight: 850; letter-spacing: -0.075em; line-height: 0.88; }
  .hero-lead { max-width: 43rem; margin: 0; color: #c9d5ea; font-size: clamp(1.05rem, 1.55vw, 1.3rem); line-height: 1.65; }
  .inner-hero h1 { max-width: 13ch; margin: 0.85rem 0 1.4rem; font-size: clamp(3rem, 6.3vw, 6.5rem); font-weight: 850; letter-spacing: -0.07em; line-height: 0.91; }
  .inner-hero p { max-width: 44rem; color: #c8d4e9; font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
  .editorial-heading h2, .faq-intro h2, .category-story-heading h2, .tool-content-heading h2, .footer-lead h2 { margin: 0.8rem 0 0; font-size: clamp(2.2rem, 4.8vw, 5rem); font-weight: 820; letter-spacing: -0.06em; line-height: 0.98; }
  .editorial-heading p, .faq-intro p, .tool-content-heading p { max-width: 38rem; color: var(--color-text-muted); font-size: 1.03rem; }
  .section-number, .section-index { display: block; margin-bottom: 1.2rem; color: var(--color-accent); font-size: 0.85rem; font-weight: 850; letter-spacing: 0.18em; }
  .text-link { display: inline-flex; min-height: 44px; align-items: center; gap: 0.7rem; font-weight: 800; text-decoration: none; }
  .text-link .bi { transition: transform var(--motion-fast) var(--ease-standard); }
  .text-link:hover .bi { transform: translate(0.16rem, 0.16rem); }
  .text-link-inverse { color: #fff; }
  .text-link-inverse:hover { color: #bcd1ff; }
  .prose { max-width: var(--content-reading); }
  .prose h3 { margin-top: 2.2rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
  .prose p { color: var(--color-text-muted); }
}

@layer layout {
  .page-progress { position: fixed; inset: 0 0 auto; z-index: 1300; height: 3px; pointer-events: none; }
  .page-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--color-accent), var(--color-primary-bright)); transform: scaleX(0); transform-origin: left center; }

  .site-header { position: fixed; inset: 0 0 auto; z-index: 1100; }
  .main-navbar { --bs-navbar-color: var(--navbar-text-muted); --bs-navbar-hover-color: var(--navbar-text); --bs-navbar-active-color: var(--navbar-text); --bs-navbar-brand-color: var(--navbar-text); --bs-navbar-brand-hover-color: var(--navbar-text); min-height: var(--navbar-height); padding-block: 0; color: var(--navbar-text); background: var(--navbar-solid); border-bottom: 1px solid var(--navbar-border); transition: background-color var(--motion-normal), backdrop-filter var(--motion-normal), box-shadow var(--motion-normal); }
  .main-navbar.is-overlay { background: linear-gradient(180deg, rgb(3 11 28 / 0.86), rgb(3 11 28 / 0.35) 72%, transparent); border-bottom-color: transparent; }
  .site-header.is-scrolled .main-navbar { background: var(--navbar-bg); border-bottom-color: var(--navbar-border); box-shadow: 0 12px 30px rgb(2 10 27 / 0.14); backdrop-filter: blur(18px) saturate(130%); }
  .navbar-shell { position: static; min-height: var(--navbar-height); gap: 1.5rem; }
  .navbar-brand { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0; color: #fff; text-decoration: none; }
  .navbar-brand img { width: 2.4rem; height: 2.4rem; border-radius: 0.7rem; }
  .brand-copy { display: grid; line-height: 1.05; }
  .brand-copy strong { font-size: 1.02rem; font-weight: 850; letter-spacing: -0.035em; }
  .brand-copy small { margin-top: 0.3rem; color: #9fb0cc; font-size: 0.56rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; }
  .main-navbar .navbar-nav { gap: 0.2rem; }
  .main-navbar .nav-link { position: relative; display: inline-flex; min-height: 48px; align-items: center; gap: 0.4rem; padding-inline: 0.85rem !important; color: var(--navbar-text-muted); font-size: 0.87rem; font-weight: 750; text-decoration: none; }
  .main-navbar .nav-link::after { position: absolute; right: 0.85rem; bottom: 0.35rem; left: 0.85rem; height: 2px; content: ""; background: transparent; transform: scaleX(0); transform-origin: left; transition: transform var(--motion-normal) var(--ease-emphasis), background-color var(--motion-fast); }
  .main-navbar .nav-link:hover, .main-navbar .nav-link:focus-visible, .main-navbar .nav-link[aria-current="page"], .main-navbar .nav-link.is-active { color: #fff; }
  .main-navbar .nav-link:hover::after, .main-navbar .nav-link:focus-visible::after, .main-navbar .nav-link[aria-current="page"]::after, .main-navbar .nav-link.is-active::after { background: var(--color-accent); transform: scaleX(1); }
  .nav-link-button { border: 0; background: transparent; }
  .nav-caret { font-size: 0.72rem; transition: transform var(--motion-normal) var(--ease-emphasis); }
  .nav-link-button[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
  .nav-actions { display: flex; align-items: center; gap: 0.6rem; }
  .nav-search-button { display: inline-flex; min-width: 8.5rem; min-height: 44px; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem 0.55rem 1rem; color: #fff; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.22); border-radius: var(--radius-pill); }
  .nav-search-button:hover { background: rgb(255 255 255 / 0.14); }
  .nav-search-button span { margin-right: auto; font-size: 0.84rem; font-weight: 750; }
  .nav-search-button kbd { min-width: 1.55rem; padding: 0.1rem 0.35rem; color: #dbe6f7; font-size: 0.68rem; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.2); border-radius: 0.35rem; box-shadow: none; }
  .theme-control { width: 6.6rem; min-height: 44px; padding-left: 0.8rem; color: #fff; font-size: 0.77rem; background-color: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.22); border-radius: var(--radius-pill); }
  .theme-control:focus { color: #fff; background-color: #112448; border-color: #9bbdff; }
  .theme-control option { color: #10192d; }

  .mega-menu-panel { position: absolute; top: 100%; right: 0; left: 0; z-index: 1110; max-height: calc(100vh - var(--navbar-height)); overflow: auto; color: var(--color-text); background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-overlay); opacity: 0; transform: translateY(-1rem); transition: opacity var(--motion-normal) var(--ease-standard), transform var(--motion-normal) var(--ease-emphasis); }
  .mega-menu-panel.is-open { opacity: 1; transform: translateY(0); }
  .mega-menu-inner { display: grid; grid-template-columns: minmax(17rem, 0.75fr) minmax(0, 1.75fr); gap: clamp(2rem, 5vw, 6rem); padding-block: clamp(2.5rem, 5vw, 5rem); }
  .mega-menu-intro { align-self: start; max-width: 29rem; }
  .mega-menu-intro h2 { margin: 0.8rem 0 1rem; font-size: clamp(2rem, 3.4vw, 3.6rem); font-weight: 820; letter-spacing: -0.055em; line-height: 1; }
  .mega-menu-intro p { color: var(--color-text-muted); }
  .mega-menu-intro .text-eyebrow-inverse, .mega-menu-intro .text-link-inverse { color: var(--color-primary); }
  .mega-category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
  .mega-category-row { display: grid; min-height: 5.7rem; grid-template-columns: 2.2rem 2.8rem minmax(0, 1fr) 1.5rem; align-items: center; gap: 0.9rem; padding: 1rem; color: var(--color-text); border-bottom: 1px solid var(--color-border); text-decoration: none; transition: color var(--motion-fast), background-color var(--motion-fast), padding-left var(--motion-normal) var(--ease-emphasis); }
  .mega-category-row:nth-child(odd) { border-right: 1px solid var(--color-border); }
  .mega-category-row:hover, .mega-category-row:focus-visible, .mega-category-row.is-current { color: var(--color-primary); background: var(--color-primary-soft); padding-left: 1.35rem; }
  .mega-category-number { color: var(--color-text-subtle); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.08em; }
  .mega-category-icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; color: var(--color-primary); background: var(--color-primary-soft); border-radius: 50%; }
  .mega-category-copy { min-width: 0; }
  .mega-category-copy strong, .mega-category-copy small { display: block; }
  .mega-category-copy strong { font-size: 0.9rem; line-height: 1.3; }
  .mega-category-copy small { color: var(--color-text-muted); font-size: 0.74rem; }
  .mega-category-arrow { justify-self: end; }
  .nav-backdrop { position: fixed; inset: var(--navbar-height) 0 0; z-index: 1090; background: var(--color-backdrop); opacity: 0; backdrop-filter: blur(4px); transition: opacity var(--motion-normal); }
  .nav-backdrop.is-open { opacity: 1; }

  .global-search-dialog { width: min(56rem, calc(100vw - 2rem)); max-width: none; margin: auto; padding: 0; color: var(--color-text); background: transparent; border: 0; overflow: visible; }
  .global-search-dialog::backdrop { background: rgb(2 10 27 / 0.8); backdrop-filter: blur(12px); }
  .global-search-shell { overflow: hidden; background: var(--color-surface); border: 1px solid rgb(255 255 255 / 0.18); border-radius: var(--radius-xl); box-shadow: var(--shadow-dialog); }
  .global-search-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 2rem 2rem 1rem; }
  .global-search-header h2 { margin: 0.35rem 0 0; font-size: clamp(1.7rem, 4vw, 3rem); font-weight: 820; letter-spacing: -0.05em; }
  .search-close-button { display: grid; flex: 0 0 auto; place-items: center; color: var(--color-text); background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: 50%; }
  .global-search-field { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; margin: 1rem 2rem; padding: 0.8rem 1rem; background: var(--color-surface-soft); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); }
  .global-search-field:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
  .global-search-field > .bi { color: var(--color-primary); font-size: 1.2rem; }
  .global-search-field input { min-width: 0; min-height: 3rem; padding: 0; color: var(--search-text); font-size: clamp(1rem, 2vw, 1.25rem); background: transparent; border: 0; outline: 0; }
  .global-search-field input::placeholder { color: var(--search-placeholder); opacity: 1; }
  .global-search-field kbd { color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: none; }
  .search-results { max-height: min(27rem, 52vh); overflow: auto; margin: 0 2rem 1rem; border-top: 1px solid var(--color-border); }
  .search-option { display: grid; min-height: 4.8rem; grid-template-columns: 2rem minmax(0, 1fr) 1.5rem; align-items: center; gap: 1rem; padding: 0.9rem 0.4rem; color: var(--color-text); border-bottom: 1px solid var(--color-border); text-decoration: none; }
  .search-option:hover, .search-option:focus-visible, .search-option[aria-selected="true"] { color: var(--color-primary); background: var(--color-primary-soft); }
  .search-option-index { color: var(--color-text-subtle); font-size: 0.68rem; font-weight: 850; }
  .search-option strong, .search-option small { display: block; }
  .search-option small { color: var(--color-text-muted); font-size: 0.76rem; }
  .search-option > .bi { justify-self: end; }
  .search-empty { display: grid; gap: 0.2rem; padding: 2rem 0; }
  .search-empty span { color: var(--color-text-muted); }
  .search-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; padding: 1rem 2rem 2rem; color: var(--color-text-muted); font-size: 0.78rem; }
  .search-suggestions > span { font-weight: 800; }
  .search-suggestions a { padding: 0.45rem 0.75rem; color: var(--color-text); background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: var(--radius-pill); text-decoration: none; }

  .inner-hero { position: relative; display: flex; min-height: min(51rem, 90vh); align-items: center; overflow: hidden; padding: calc(var(--navbar-height) + 5rem) 0 6rem; color: #fff; background: radial-gradient(circle at 76% 38%, rgb(29 92 255 / 0.32), transparent 28%), linear-gradient(128deg, #030b1c 0%, #071a3a 58%, #0c3680 100%); }
  .inner-hero-grid, .hero-grid-pattern { position: absolute; inset: 0; opacity: 0.25; background-image: linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px); background-size: 5rem 5rem; mask-image: linear-gradient(to bottom, #000 0%, transparent 90%); }
  .inner-hero-layout, .tool-hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.55fr); align-items: end; gap: 4rem; }
  .inner-breadcrumb { position: relative; z-index: 3; margin-bottom: 3rem; }
  .inner-breadcrumb .breadcrumb { --bs-breadcrumb-divider-color: #8193af; --bs-breadcrumb-item-active-color: #aebed5; margin: 0; font-size: 0.78rem; }
  .inner-breadcrumb a { color: #dce6f6; }
  .inner-hero-index, .tool-hero-index { display: block; color: rgb(255 255 255 / 0.09); font-size: clamp(8rem, 20vw, 18rem); font-weight: 900; letter-spacing: -0.1em; line-height: 0.55; pointer-events: none; }
  .inner-hero-actions, .tool-hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
  .category-hero-metric { display: grid; min-height: 20rem; align-content: end; padding: 2rem; background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.18); border-radius: var(--radius-xl); backdrop-filter: blur(14px); }
  .category-hero-icon { display: grid; width: 4rem; height: 4rem; place-items: center; margin-bottom: auto; color: #fff; background: var(--color-primary); border-radius: 50%; }
  .category-hero-metric strong { font-size: clamp(5rem, 9vw, 8rem); font-weight: 850; letter-spacing: -0.08em; line-height: 0.9; }
  .category-hero-metric > span:not(.category-hero-icon) { font-size: 1.1rem; font-weight: 800; }
  .category-hero-metric small { margin-top: 0.8rem; color: #b9c8df; }
  .scroll-cue { position: absolute; right: clamp(1.5rem, 4vw, 4rem); bottom: 1.8rem; z-index: 3; display: inline-flex; min-height: 44px; align-items: center; gap: 0.8rem; color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; writing-mode: vertical-rl; }
  .scroll-cue .bi { font-size: 1rem; animation: scrollCue 1.8s var(--ease-standard) infinite; }

  .editorial-heading { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr); align-items: end; gap: clamp(2rem, 6vw, 7rem); margin-bottom: clamp(3rem, 6vw, 5.5rem); }
  .editorial-heading.compact { grid-template-columns: 1fr auto; }
  .editorial-heading-inverse { color: #fff; }
  .editorial-heading-inverse p { color: #b6c5dc; }
  .faq-layout { display: grid; grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr); gap: clamp(3rem, 7vw, 8rem); }

  .site-footer { position: relative; overflow: hidden; padding-top: clamp(5rem, 9vw, 9rem); color: #fff; background: #030b1c; }
  .footer-radiance { position: absolute; top: -20rem; left: 10%; width: 55rem; height: 55rem; background: radial-gradient(circle, rgb(11 92 255 / 0.28), transparent 65%); pointer-events: none; }
  .footer-main { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(30rem, 0.9fr); gap: clamp(4rem, 8vw, 9rem); padding-bottom: 5rem; }
  .footer-lead { max-width: 44rem; }
  .footer-lead h2 { color: #fff; }
  .footer-lead p { max-width: 38rem; margin: 1.5rem 0 2rem; color: #aebdd4; font-size: 1.05rem; }
  .footer-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .footer-label { margin-bottom: 1.3rem; color: #8fb2f6; }
  .footer-column nav { display: grid; }
  .footer-column a { display: grid; min-height: 46px; grid-template-columns: minmax(0, 1fr) 1rem; align-items: center; gap: 0.5rem; color: #d7e0ef; border-bottom: 1px solid rgb(255 255 255 / 0.12); font-size: 0.84rem; text-decoration: none; }
  .footer-column a:hover, .footer-column a:focus-visible { color: #fff; }
  .footer-meta { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.14); }
  .footer-brand { display: inline-flex; align-items: center; gap: 0.75rem; color: #fff; text-decoration: none; }
  .footer-brand img { border-radius: 0.7rem; }
  .footer-brand span { display: grid; line-height: 1.1; }
  .footer-brand small { margin-top: 0.2rem; color: #8fa0ba; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; }
  .footer-notes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.8rem 1.5rem; color: #8fa0ba; font-size: 0.72rem; }
  .footer-notes span { display: inline-flex; align-items: center; gap: 0.4rem; }
  .footer-wordmark { position: relative; z-index: 1; margin-bottom: -0.11em; color: rgb(255 255 255 / 0.035); font-size: clamp(5rem, 17vw, 16rem); font-weight: 900; letter-spacing: -0.085em; line-height: 0.75; text-align: center; white-space: nowrap; user-select: none; }
  .back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1080; display: grid; place-items: center; color: #fff; background: var(--color-primary); border: 0; border-radius: 50%; box-shadow: var(--shadow-overlay); opacity: 0; transform: translateY(1rem); pointer-events: none; transition: opacity var(--motion-normal), transform var(--motion-normal); }
  .back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

  @keyframes scrollCue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.35rem); } }

  @media (max-width: 1199.98px) {
    .mega-menu-inner { grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 1.35fr); gap: 2rem; }
    .footer-main { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 991.98px) {
    :root { --navbar-height: 4.5rem; }
    .main-navbar, .main-navbar.is-overlay { background: var(--navbar-solid); border-bottom-color: var(--navbar-border); }
    .navbar-collapse { padding: 1rem 0 1.5rem; }
    .main-navbar .navbar-nav { align-items: stretch !important; }
    .main-navbar .nav-link { width: 100%; justify-content: space-between; padding-inline: 0 !important; }
    .nav-actions { align-items: stretch; flex-direction: column; margin-top: 1rem; }
    .nav-search-button, .theme-control { width: 100%; }
    .mega-menu-panel { position: static; max-height: 65vh; margin-top: 0.5rem; border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--radius-lg); box-shadow: none; }
    .mega-menu-inner { display: block; padding: 1rem; }
    .mega-menu-intro { display: none; }
    .mega-category-list { grid-template-columns: 1fr; }
    .mega-category-row:nth-child(odd) { border-right: 0; }
    .inner-hero { min-height: auto; padding-top: calc(var(--navbar-height) + 5rem); }
    .inner-hero-layout, .tool-hero-layout { grid-template-columns: 1fr; gap: 2rem; }
    .category-hero-metric { min-height: 15rem; max-width: 31rem; }
    .footer-main { grid-template-columns: 1fr; }
  }
  @media (max-width: 767.98px) {
    .brand-copy small { display: none; }
    .global-search-header { padding: 1.4rem 1.4rem 0.6rem; }
    .global-search-field { margin: 0.8rem 1.4rem; }
    .search-results { margin-inline: 1.4rem; }
    .search-suggestions { padding: 0.8rem 1.4rem 1.5rem; }
    .editorial-heading, .editorial-heading.compact, .faq-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .inner-hero { padding-bottom: 5.5rem; }
    .inner-hero-index, .tool-hero-index { font-size: 8rem; }
    .scroll-cue { right: 1rem; bottom: 1rem; writing-mode: horizontal-tb; }
    .footer-directory { grid-template-columns: 1fr; }
    .footer-meta { align-items: flex-start; flex-direction: column; }
    .footer-notes { justify-content: flex-start; }
  }
  @media (max-width: 575.98px) {
    .global-search-dialog { width: calc(100vw - 1rem); }
    .global-search-shell { border-radius: var(--radius-lg); }
    .global-search-header h2 { font-size: 1.65rem; }
    .global-search-field { grid-template-columns: 1.2rem minmax(0, 1fr); }
    .global-search-field kbd { display: none; }
    .search-option { grid-template-columns: 1.6rem minmax(0, 1fr) 1.2rem; }
    .search-suggestions { display: none; }
    .inner-hero-actions, .tool-hero-actions { align-items: stretch; flex-direction: column; }
    .inner-hero-actions .btn, .tool-hero-actions .btn { width: 100%; }
  }
}

@layer components {
  .featured-tool-card, .tool-list-card, .related-tool-card, .related-category-card { color: inherit; text-decoration: none; }

  .featured-tool-card { position: relative; display: grid; min-width: clamp(18rem, 28vw, 25rem); min-height: 27rem; grid-template-rows: auto auto auto 1fr auto; padding: 2rem; overflow: hidden; color: #fff; background: rgb(255 255 255 / 0.055); border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--radius-xl); scroll-snap-align: start; transition: background-color var(--motion-normal), border-color var(--motion-normal), transform var(--motion-normal) var(--ease-emphasis); }
  .featured-tool-card::after { position: absolute; right: -5rem; bottom: -5rem; width: 12rem; height: 12rem; content: ""; background: radial-gradient(circle, rgb(79 137 255 / 0.35), transparent 70%); transition: transform var(--motion-slow) var(--ease-emphasis); }
  .featured-tool-card:hover, .featured-tool-card:focus-visible { color: #fff; background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.4); transform: translateY(-0.35rem); }
  .featured-tool-card:hover::after { transform: scale(1.35); }
  .featured-card-index { color: #91a5c5; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.14em; }
  .featured-card-icon { display: grid; width: 4rem; height: 4rem; place-items: center; margin: 2.5rem 0 2rem; color: #fff; background: var(--color-primary); border-radius: 50%; }
  .featured-card-icon .bi { font-size: 1.45rem; }
  .featured-card-category { color: #a8b9d4; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
  .featured-tool-card strong { margin-top: 0.6rem; font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 820; letter-spacing: -0.04em; line-height: 1.05; }
  .featured-tool-card p { margin: 1rem 0 2rem; color: #acbad0; font-size: 0.9rem; }
  .featured-card-link { display: inline-flex; align-items: center; gap: 0.65rem; margin-top: auto; font-size: 0.8rem; font-weight: 800; }

  .tool-list-card { display: grid; min-height: 12.5rem; grid-template-columns: 2.2rem 3.5rem minmax(0, 1fr) 2rem; align-items: start; gap: 1.25rem; padding: 1.6rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-normal) var(--ease-emphasis); }
  .tool-list-card:hover, .tool-list-card:focus-visible { color: var(--color-primary); background: var(--color-primary-soft); border-color: var(--color-primary); transform: translateY(-0.2rem); }
  .tool-list-index { padding-top: 0.35rem; color: var(--color-text-subtle); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.12em; }
  .tool-list-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; color: var(--color-primary); background: var(--color-primary-soft); border-radius: 50%; }
  .tool-list-copy small, .tool-list-copy strong { display: block; }
  .tool-list-copy small { color: var(--color-text-muted); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
  .tool-list-copy strong { margin-top: 0.35rem; font-size: 1.12rem; font-weight: 820; letter-spacing: -0.025em; line-height: 1.2; }
  .tool-list-copy p { margin: 0.8rem 0 0; color: var(--color-text-muted); font-size: 0.86rem; line-height: 1.55; }
  .tool-list-arrow { justify-self: end; color: var(--color-text-subtle); }

  .related-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
  .related-tool-card { display: grid; min-height: 7.5rem; grid-template-columns: 2.2rem 3.2rem minmax(0, 1fr) 1.5rem; align-items: center; gap: 1rem; padding: 1.35rem; border-bottom: 1px solid var(--color-border); transition: color var(--motion-fast), background-color var(--motion-fast), padding-left var(--motion-normal) var(--ease-emphasis); }
  .related-tool-card:nth-child(odd) { border-right: 1px solid var(--color-border); }
  .related-tool-card:hover, .related-tool-card:focus-visible { color: var(--color-primary); background: var(--color-primary-soft); padding-left: 1.7rem; }
  .related-tool-index { color: var(--color-text-subtle); font-size: 0.67rem; font-weight: 850; }
  .related-tool-card .tool-icon { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; color: var(--color-primary); background: var(--color-primary-soft); border-radius: 50%; }
  .related-tool-card small, .related-tool-card strong { display: block; }
  .related-tool-card small { color: var(--color-text-muted); font-size: 0.68rem; }
  .related-tool-card strong { font-size: 0.98rem; }

  .related-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .related-category-card { display: grid; min-height: 14rem; grid-template-columns: 1fr auto; align-content: space-between; gap: 1rem; padding: 1.8rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast); }
  .related-category-card:hover, .related-category-card:focus-visible { color: var(--color-primary); background: var(--color-primary-soft); border-color: var(--color-primary); }
  .related-category-card > span { color: var(--color-text-subtle); font-size: 0.7rem; font-weight: 850; }
  .related-category-card > .bi:first-of-type { grid-column: 2; grid-row: 1; color: var(--color-primary); font-size: 1.5rem; }
  .related-category-card strong { grid-column: 1 / -1; align-self: end; font-size: 1.35rem; font-weight: 820; letter-spacing: -0.035em; }
  .related-category-card small { color: var(--color-text-muted); }
  .related-category-card > .bi:last-child { justify-self: end; }

  .editorial-accordion { border-top: 1px solid var(--color-border-strong); }
  .editorial-accordion .accordion-item { color: var(--color-text); background: transparent; border-color: var(--color-border-strong); }
  .editorial-accordion .accordion-button { display: grid; min-height: 5.6rem; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 1.1rem; padding: 1.35rem 0.2rem; color: var(--color-text); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 780; background: transparent; box-shadow: none; }
  .editorial-accordion .accordion-button span { color: var(--color-text-subtle); font-size: 0.68rem; letter-spacing: 0.1em; }
  .editorial-accordion .accordion-button::after { grid-column: 3; }
  .editorial-accordion .accordion-button:not(.collapsed) { color: var(--color-primary); }
  .editorial-accordion .accordion-body { max-width: 46rem; padding: 0 3.5rem 1.8rem; color: var(--color-text-muted); }

  @media (max-width: 991.98px) {
    .related-category-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 767.98px) {
    .tool-list-card { min-height: 0; grid-template-columns: 1.8rem 3rem minmax(0, 1fr); }
    .tool-list-icon { width: 3rem; height: 3rem; }
    .tool-list-arrow { display: none; }
    .related-tool-grid { grid-template-columns: 1fr; }
    .related-tool-card:nth-child(odd) { border-right: 0; }
  }
  @media (max-width: 575.98px) {
    .featured-tool-card { min-width: 84vw; min-height: 24rem; padding: 1.5rem; }
    .tool-list-card { padding: 1.2rem; gap: 0.85rem; }
    .tool-list-copy p { display: none; }
  }
}

@layer components {
  .bi { display: inline-grid; width: 1em; height: 1em; place-items: center; font-style: normal; line-height: 1; vertical-align: -0.125em; }
  .bi::before { width: 1em; height: 1em; content: ""; background: currentColor; -webkit-mask: var(--ak-icon) center / contain no-repeat; mask: var(--ak-icon) center / contain no-repeat; }
  .bi { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l2.5%205.1L20%209l-4%203.9.9%205.6L12%2016l-4.9%202.5.9-5.6L4%209l5.5-.9z%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-123 { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%208h2v8M4%2016h4m3-6a2%202%200%201%201%204%200c0%202-4%203-4%206h4m3-6a2%202%200%200%201%204%200%202%202%200%200%201-2%202%202%202%200%200%201%202%202%202%202%200%200%201-4%200%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-arrow-left { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2012H5m5%205-5-5%205-5%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-arrow-left-right { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207h15l-3-3m3%203-3%203M21%2017H6l3-3m-3%203%203%203%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-arrow-repeat { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%207h-6V1m-10%2016h6v6%22%2F%3E%3Cpath%20d%3D%22M5.1%209A8%208%200%200%201%2018%204l2%203M18.9%2015A8%208%200%200%201%206%2020l-2-3%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-arrow-right { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14m-5-5%205%205-5%205%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-arrow-up { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019V5m-5%205%205-5%205%205%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-bezier2 { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%205h4v4H5zM15%2015h4v4h-4z%22%2F%3E%3Cpath%20d%3D%22M9%207c6%200%200%2010%206%2010M3%207h2m14%2010h2%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-braces-asterisk { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203H6a2%202%200%200%200-2%202v4l-2%203%202%203v4a2%202%200%200%200%202%202h2m8-18h2a2%202%200%200%201%202%202v4l2%203-2%203v4a2%202%200%200%201-2%202h-2%22%2F%3E%3Cpath%20d%3D%22M12%208v8m-3-2%206-4m-6%200%206%204%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-calendar3 { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%203v4M8%203v4M3%2010h18M7%2014h2m2%200h2m2%200h2M7%2018h2m2%200h2%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-chat-dots { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a4%204%200%200%201-4%204H8l-5%203V7a4%204%200%200%201%204-4h10a4%204%200%200%201%204%204z%22%2F%3E%3Cpath%20d%3D%22M8%2011h.01M12%2011h.01M16%2011h.01%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-check-circle-fill { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8%2012%202.5%202.5L16%209%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-check2-circle { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8%2012%202.5%202.5L16%209%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-chevron-down { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-clipboard { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%2214%22%20height%3D%2217%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%204V2h6v2M9%2010h6m-6%204h6%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-clock { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-clock-history { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-cloud-arrow-up { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2016l-4-4-4%204m4-4v9%22%2F%3E%3Cpath%20d%3D%22M20%2017.5a4.5%204.5%200%200%200-1.5-8.7A7%207%200%200%200%205%2010a4%204%200%200%200%200%208h3%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-code-square { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22m10%208-4%204%204%204m4-8%204%204-4%204%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-credit-card { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M2%2010h20M6%2015h4%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-credit-card-2-front { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M2%2010h20M6%2015h3M16%2014v3%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-diagram-3 { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%225%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2217%22%20width%3D%226%22%20height%3D%225%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2217%22%20width%3D%226%22%20height%3D%225%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M12%207v5M5%2017v-3h14v3%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-directional { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h10M7%2017h10m-7-13L7%207l3%203m4%204%203%203-3%203%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-download { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12m-5-5%205%205%205-5M4%2021h16%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-envelope { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-exclamation-triangle { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%202%2021h20z%22%2F%3E%3Cpath%20d%3D%22M12%209v5m0%203h.01%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-facebook { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%225%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22m8.6%2010.5%206.8-4m-6.8%207%206.8%204%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-file-diff { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpath%20d%3D%22M14%202v6h6M8%2013h3m-1.5-1.5v3M14%2018h3%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-file-earmark-image { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22m21%2015-5-5L5%2021%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-fire { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022c4%200%207-3%207-7%200-3-2-6-5-9%200%203-2%205-4%206%200-4-2-7-2-7-3%203-4%206-4%2010%200%204%204%207%208%207z%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-fonts { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019%209%205h3l5%2014M6%2014h9M16%207h5m-2.5%200v12%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-globe { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203a15%2015%200%200%201%200%2018M12%203a15%2015%200%200%200%200%2018%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-grid { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-house { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2011%209-8%209%208v9a1%201%200%200%201-1%201h-5v-7H9v7H4a1%201%200%200%201-1-1z%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-image { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22m21%2015-5-5L5%2021%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-images { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22m21%2015-5-5L5%2021%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-lightning { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m13%202-8%2012h7l-1%208%208-12h-7z%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-lightning-charge-fill { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m13%202-8%2012h7l-1%208%208-12h-7z%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-linkedin { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%225%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22m8.6%2010.5%206.8-4m-6.8%207%206.8%204%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-lock { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2210%22%20width%3D%2214%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2010V7a4%204%200%200%201%208%200v3%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-magic { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%204%205%205L9%2020l-5-5zM14%205l5%205M6%203v4M4%205h4M19%2015v4m-2-2h4%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-palette { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%200%200%200%2018h1.5a2%202%200%200%200%200-4H12a2%202%200%200%201%200-4h4a5%205%200%200%200%200-10z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%229%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%226%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%227%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-phone { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%2210%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M11%2018h2%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-search { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m20%2020-3.5-3.5%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-send { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%202-7%2020-4-9-9-4zM22%202%2011%2013%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-share { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%225%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22m8.6%2010.5%206.8-4m-6.8%207%206.8%204%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-shield-check { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%204%206v6c0%205%203.5%208%208%2010%204.5-2%208-5%208-10V6z%22%2F%3E%3Cpath%20d%3D%22m8.5%2012%202.2%202.2%204.8-5%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-shield-lock { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%204%206v6c0%205%203.5%208%208%2010%204.5-2%208-5%208-10V6z%22%2F%3E%3Cpath%20d%3D%22m8.5%2012%202.2%202.2%204.8-5%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-signpost-split { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022V4M6%204h12l2%203-2%203H6l-2-3zM6%2013h12l2%203-2%203H6l-2-3z%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-table { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18M9%204v16m6-16v16%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-telegram { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%202-7%2020-4-9-9-4zM22%202%2011%2013%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-terminal { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m7%209%203%203-3%203m5%200h5%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-text-indent-left { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2018h16M10%2012h10M4%2010l3%202-3%202z%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-tools { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200-5-5l2.1%202.1-2.4%202.4-2.1-2.1a4%204%200%200%200%205%205l6.4%206.4a2%202%200%201%201-2.8%202.8l-6.4-6.4%22%2F%3E%3Cpath%20d%3D%22m5%2019%204-4%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-trash { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M10%2011v6m4-6v6M9%207l1-3h4l1%203m-9%200%201%2014h10l1-14%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-twitter-x { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%225%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22m8.6%2010.5%206.8-4m-6.8%207%206.8%204%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-unlock { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2210%22%20width%3D%2214%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2010V7a4%204%200%200%201%207-2%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-upload { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021V9m-5%205%205-5%205%205M4%203h16%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-whatsapp { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a4%204%200%200%201-4%204H8l-5%203V7a4%204%200%200%201%204-4h10a4%204%200%200%201%204%204z%22%2F%3E%3Cpath%20d%3D%22M8%2011h.01M12%2011h.01M16%2011h.01%22%2F%3E%3C%2Fsvg%3E"); }
  .bi-x-circle-fill { --ak-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206m0-6-6%206%22%2F%3E%3C%2Fsvg%3E"); }
}
@layer components {
  .bi-arrow-up-right { --ak-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E"); }
  .bi-arrow-down-right { --ak-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 7 10 10M17 7v10H7'/%3E%3C/svg%3E"); }
  .bi-arrow-down { --ak-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14m7-7-7 7-7-7'/%3E%3C/svg%3E"); }
  .bi-stars { --ak-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3Zm7 11 .8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8L19 14ZM5 14l1 2.8L9 18l-3 1.2L5 22l-1-2.8L1 18l3-1.2L5 14Z'/%3E%3C/svg%3E"); }
  .bi-play-fill { --ak-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 4.5v15a1 1 0 0 0 1.55.83l11-7.5a1 1 0 0 0 0-1.66l-11-7.5A1 1 0 0 0 7 4.5Z'/%3E%3C/svg%3E"); }
  .bi-sliders { --ak-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h7m4 0h5M4 12h3m4 0h9M4 18h9m4 0h3'/%3E%3Ccircle cx='13' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='15' cy='18' r='2'/%3E%3C/svg%3E"); }
  .bi-person-x { --ak-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M3 21v-2a6 6 0 0 1 6-6c2 0 3.8.9 4.9 2.3M17 16l5 5m0-5-5 5'/%3E%3C/svg%3E"); }
  .bi-x-lg { --ak-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E"); }
}

@layer components {
  .smooth-wrapper,
  .smooth-content {
    min-height: 100%;
    width: 100%;
  }

  .hero-motion-art {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 1;
    width: min(42rem, 112%);
    aspect-ratio: 1;
    overflow: visible;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .hero-morph-shape {
    fill: url("#heroMotionGradient");
    opacity: 0.105;
  }

  .hero-draw-path,
  .hero-motion-path {
    fill: none;
    vector-effect: non-scaling-stroke;
  }

  .hero-draw-path {
    stroke: rgb(95 211 255 / 0.56);
    stroke-linecap: round;
    stroke-width: 1.6;
  }

  .hero-motion-path {
    stroke: rgb(255 255 255 / 0.12);
    stroke-dasharray: 3 9;
    stroke-width: 1;
  }

  .hero-motion-dot {
    fill: var(--color-accent);
    filter: drop-shadow(0 0 10px rgb(95 211 255 / 0.72));
  }

  .hero-morph-targets {
    visibility: hidden;
  }

  .hero-console,
  .hero-number,
  .hero-floating-tool {
    z-index: 3;
  }

  .hero-floating-tool-1 { top: 3%; left: -8%; }
  .hero-floating-tool-2 { top: 26%; right: -10%; }
  .hero-floating-tool-3 { right: 3%; bottom: 8%; }
  .hero-floating-tool-4 { bottom: 4%; left: -6%; }

  .gsap-enabled [data-reveal] {
    transition: none;
  }

  .split-line {
    overflow: clip;
  }

  .featured-tool-scroller.is-draggable {
    cursor: grab;
    user-select: none;
  }

  .featured-tool-scroller.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }

  .featured-tool-scroller.is-dragging a {
    pointer-events: none;
  }

  .motion-particle {
    position: fixed;
    z-index: 1400;
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
  }

  html.gsap-enabled .hero-story-timeline span {
    animation: none;
  }

  @media (max-width: 1199.98px) {
    .hero-motion-art { width: min(37rem, 108%); }
    .hero-floating-tool-1,
    .hero-floating-tool-2,
    .hero-floating-tool-3,
    .hero-floating-tool-4 { display: none; }
  }

  @media (max-width: 767.98px) {
    .hero-motion-art {
      width: min(31rem, 118%);
      opacity: 0.78;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-motion-dot { display: none; }
    .featured-tool-scroller.is-draggable { cursor: auto; }
  }
}

@layer components {
  .hero-floating-tool {
    width: max-content;
    max-width: 15.5rem;
    min-height: 3.4rem;
    padding: 0.68rem 0.88rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 14px 38px rgb(0 0 0 / 0.16);
  }

  .hero-floating-tool > .tool-icon {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 2.1rem;
    place-items: center;
    color: #fff;
    background: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.15);
    border-radius: 0.72rem;
  }

  .hero-floating-tool > span:last-child {
    display: grid;
    min-width: 0;
    gap: 0.16rem;
    line-height: 1.2;
  }

  .hero-floating-tool strong,
  .hero-floating-tool small {
    display: block;
    overflow-wrap: anywhere;
  }

  .hero-floating-tool strong {
    font-size: 0.72rem;
    font-weight: 780;
  }

  .hero-floating-tool small {
    color: rgb(229 237 251 / 0.72);
    font-size: 0.59rem;
    font-weight: 620;
  }

  .hero-floating-tool-1 { left: -4%; }
  .hero-floating-tool-2 { right: -3%; }
  .hero-floating-tool-4 { left: -3%; }
}

@layer pages {
  .home-hero { position: relative; display: flex; min-height: max(48rem, 100svh); align-items: center; overflow: hidden; padding: calc(var(--navbar-height) + 5rem) 0 6rem; color: #fff; background: radial-gradient(circle at 82% 26%, rgb(11 92 255 / 0.38), transparent 28%), radial-gradient(circle at 14% 78%, rgb(255 90 61 / 0.14), transparent 30%), linear-gradient(126deg, #020817 0%, #061633 55%, #0b3479 100%); }
  .hero-container { position: relative; z-index: 2; }
  .hero-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(25rem, 0.92fr); align-items: center; gap: clamp(3rem, 7vw, 8rem); }
  .hero-copy { padding-top: 2rem; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
  .hero-trust { display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; margin-top: 2rem; color: #aebdd4; font-size: 0.78rem; font-weight: 700; }
  .hero-trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
  .hero-trust .bi { color: #83aefc; }
  .hero-glow { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
  .hero-glow-one { top: 9%; right: -8rem; width: 31rem; height: 31rem; border: 1px solid rgb(255 255 255 / 0.12); }
  .hero-glow-two { right: 9%; bottom: -14rem; width: 42rem; height: 42rem; border: 1px solid rgb(255 255 255 / 0.08); }
  .hero-visual { position: relative; min-height: 35rem; }
  .hero-number { position: absolute; top: 50%; left: 50%; color: rgb(255 255 255 / 0.045); font-size: clamp(12rem, 24vw, 23rem); font-weight: 900; letter-spacing: -0.13em; line-height: 0.7; transform: translate(-50%, -50%); user-select: none; }
  .hero-orbit { position: absolute; inset: 0; display: grid; place-items: center; }
  .orbit-ring { position: absolute; border: 1px solid rgb(255 255 255 / 0.13); border-radius: 50%; }
  .orbit-ring-one { width: 29rem; height: 29rem; }
  .orbit-ring-two { width: 20rem; height: 20rem; border-style: dashed; animation: orbitSpin 35s linear infinite; }
  .orbit-dot { position: absolute; width: 0.7rem; height: 0.7rem; background: var(--color-accent); border-radius: 50%; box-shadow: 0 0 0 0.5rem rgb(255 90 61 / 0.12); }
  .orbit-dot-one { top: 9%; right: 24%; }
  .orbit-dot-two { bottom: 18%; left: 11%; background: #70a6ff; box-shadow: 0 0 0 0.5rem rgb(112 166 255 / 0.12); }
  .hero-console { position: relative; z-index: 3; width: min(100%, 31rem); margin: 3rem auto 0; padding: 1.25rem; background: rgb(5 18 43 / 0.66); border: 1px solid rgb(255 255 255 / 0.2); border-radius: 1.65rem; box-shadow: 0 40px 100px rgb(0 0 0 / 0.3); backdrop-filter: blur(22px) saturate(140%); }
  .hero-console-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #d7e1f2; font-size: 0.72rem; font-weight: 750; }
  .hero-console-topline > span { display: inline-flex; align-items: center; gap: 0.45rem; }
  .console-status i { width: 0.45rem; height: 0.45rem; background: #48d69d; border-radius: 50%; box-shadow: 0 0 0 0.3rem rgb(72 214 157 / 0.12); }
  .hero-console-search { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; margin: 1.2rem 0; padding: 0.85rem 1rem; color: #9eacc2; background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.12); border-radius: var(--radius-md); font-size: 0.8rem; }
  .hero-console-search kbd { color: #b9c7db; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.13); box-shadow: none; }
  .hero-story { min-height: 12rem; padding: 1.2rem 0.3rem 1rem; opacity: 1; transform: translateY(0); transition: opacity var(--motion-fast), transform var(--motion-fast); }
  .hero-story.is-changing { opacity: 0; transform: translateY(0.45rem); }
  .hero-story-label { color: #8eb5ff; font-size: 0.68rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
  .hero-story strong { display: block; margin-top: 0.65rem; font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 820; letter-spacing: -0.045em; line-height: 1.05; }
  .hero-story p { margin: 0.8rem 0 1rem; color: #aab8ce; font-size: 0.85rem; }
  .hero-story a { display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; font-size: 0.78rem; font-weight: 800; text-decoration: none; }
  .hero-story-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
  .hero-story-tabs button { display: grid; min-height: 4.2rem; align-content: center; justify-items: start; padding: 0.55rem; color: #8e9db5; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); text-align: left; }
  .hero-story-tabs button:hover, .hero-story-tabs button:focus-visible, .hero-story-tabs button[aria-selected="true"] { color: #fff; background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.13); }
  .hero-story-tabs span { font-size: 0.62rem; font-weight: 850; }
  .hero-story-tabs small { font-size: 0.68rem; }
  .hero-floating-tools { position: absolute; inset: 0; pointer-events: none; }
  .hero-floating-tool { position: absolute; display: inline-flex; max-width: 12rem; min-height: 44px; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; color: #fff; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 750; text-decoration: none; backdrop-filter: blur(12px); pointer-events: auto; }
  .hero-floating-tool:nth-child(1) { top: 3%; left: -8%; }
  .hero-floating-tool:nth-child(2) { top: 26%; right: -10%; }
  .hero-floating-tool:nth-child(3) { bottom: 8%; right: 3%; }
  .hero-floating-tool:nth-child(4) { bottom: 4%; left: -6%; }
  .hero-floating-tool:hover { color: #fff; background: rgb(255 255 255 / 0.14); }

  .featured-showcase { position: relative; overflow: hidden; padding-block: var(--section-pad); color: #fff; background: #07152e; }
  .featured-watermark { position: absolute; top: 0.1em; right: -0.06em; color: rgb(255 255 255 / 0.03); font-size: clamp(8rem, 25vw, 24rem); font-weight: 900; letter-spacing: -0.09em; line-height: 0.7; user-select: none; }
  .scroller-controls { display: flex; gap: 0.6rem; }
  .scroller-controls button { display: grid; place-items: center; color: #fff; background: transparent; border: 1px solid rgb(255 255 255 / 0.28); border-radius: 50%; }
  .scroller-controls button:hover { background: rgb(255 255 255 / 0.1); }
  .featured-tool-scroller { display: flex; gap: 1.5rem; overflow-x: auto; padding: 0.4rem 0 2rem; scroll-snap-type: x mandatory; scrollbar-color: #486389 transparent; scrollbar-width: thin; }

  .category-directory { padding-block: var(--section-pad); }
  .category-index { border-top: 1px solid var(--color-border-strong); }
  .category-index-row { display: grid; min-height: 12rem; grid-template-columns: 2.5rem 3.5rem minmax(13rem, 0.75fr) minmax(15rem, 1fr) minmax(12rem, 0.8fr) 3rem; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); padding: 2rem 0.4rem; border-bottom: 1px solid var(--color-border-strong); transition: background-color var(--motion-fast), padding-inline var(--motion-normal) var(--ease-emphasis); }
  .category-index-row:hover { padding-inline: 1rem; background: var(--color-surface); }
  .category-row-number { color: var(--color-text-subtle); font-size: 0.68rem; font-weight: 850; }
  .category-row-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; color: var(--color-primary); background: var(--color-primary-soft); border-radius: 50%; }
  .category-row-heading span { color: var(--color-text-muted); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
  .category-row-heading h3 { margin: 0.35rem 0 0; font-size: clamp(1.2rem, 2vw, 1.65rem); font-weight: 820; letter-spacing: -0.04em; }
  .category-index-row > p { margin: 0; color: var(--color-text-muted); font-size: 0.86rem; line-height: 1.55; }
  .category-row-tools { display: grid; gap: 0.35rem; }
  .category-row-tools a { color: var(--color-text-muted); font-size: 0.75rem; text-decoration: none; }
  .category-row-tools a:hover { color: var(--color-primary); }
  .category-row-link { display: grid; width: 3rem; height: 3rem; place-items: center; color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: 50%; }
  .category-row-link:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }

  .platform-story { position: relative; min-height: 52rem; overflow: hidden; padding-block: var(--section-pad); color: #fff; background: radial-gradient(circle at 22% 45%, rgb(11 92 255 / 0.38), transparent 30%), linear-gradient(130deg, #050f26, #08245a); }
  .platform-story .container { position: relative; z-index: 2; display: grid; min-height: 34rem; grid-template-columns: minmax(0, 1fr) minmax(23rem, 0.75fr); align-items: center; gap: clamp(4rem, 9vw, 10rem); }
  .platform-story-copy h2 { max-width: 11ch; margin: 0.8rem 0 1.5rem; font-size: clamp(3rem, 6vw, 6.5rem); font-weight: 850; letter-spacing: -0.075em; line-height: 0.9; }
  .platform-story-copy p { max-width: 40rem; color: #b6c5da; }
  .platform-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgb(255 255 255 / 0.17); border-left: 1px solid rgb(255 255 255 / 0.17); }
  .platform-stat-grid > div { min-height: 12rem; padding: 1.6rem; border-right: 1px solid rgb(255 255 255 / 0.17); border-bottom: 1px solid rgb(255 255 255 / 0.17); }
  .platform-stat-grid strong { display: block; font-size: clamp(3rem, 6vw, 5.4rem); font-weight: 850; letter-spacing: -0.08em; line-height: 0.95; }
  .platform-stat-grid span { color: #a8b8d0; font-size: 0.77rem; }
  .platform-story-visual { position: absolute; inset: 0; pointer-events: none; }
  .platform-orbit { position: absolute; border: 1px solid rgb(255 255 255 / 0.09); border-radius: 50%; }
  .platform-orbit-one { top: -15rem; right: -10rem; width: 48rem; height: 48rem; }
  .platform-orbit-two { bottom: -18rem; left: 28%; width: 42rem; height: 42rem; }
  .platform-symbol { position: absolute; top: 50%; right: 5%; color: rgb(255 255 255 / 0.035); font-size: 25rem; font-weight: 900; letter-spacing: -0.12em; transform: translateY(-50%); }

  .workflow-section { padding-block: var(--section-pad); }
  .workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); border-left: 1px solid var(--color-border-strong); }
  .workflow-grid li { position: relative; min-height: 21rem; padding: 2rem; border-right: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }
  .workflow-grid li > span { color: var(--color-text-subtle); font-size: 0.7rem; font-weight: 850; }
  .workflow-grid li > .bi { position: absolute; top: 2rem; right: 2rem; color: var(--color-primary); font-size: 1.5rem; }
  .workflow-grid h3 { margin: 7rem 0 1rem; font-size: clamp(1.45rem, 2.5vw, 2.1rem); font-weight: 820; letter-spacing: -0.045em; }
  .workflow-grid p { color: var(--color-text-muted); font-size: 0.9rem; }

  .home-faq { padding-block: var(--section-pad); background: var(--color-surface); }

  @keyframes orbitSpin { to { transform: rotate(360deg); } }
  @media (max-width: 1199.98px) {
    .hero-layout { grid-template-columns: 1fr 0.8fr; gap: 2rem; }
    .hero-floating-tool { display: none; }
    .category-index-row { grid-template-columns: 2.5rem 3.5rem minmax(11rem, 0.8fr) minmax(14rem, 1fr) 3rem; }
    .category-row-tools { display: none; }
  }
  @media (max-width: 991.98px) {
    .home-hero { min-height: auto; padding-top: calc(var(--navbar-height) + 5rem); }
    .hero-layout { grid-template-columns: 1fr; }
    .hero-copy { max-width: 48rem; }
    .hero-visual { min-height: 31rem; }
    .platform-story .container { grid-template-columns: 1fr; }
  }
  @media (max-width: 767.98px) {
    .hero-title { font-size: clamp(3.2rem, 15vw, 5.2rem); }
    .hero-visual { min-height: 28rem; }
    .orbit-ring-one { width: 23rem; height: 23rem; }
    .orbit-ring-two { width: 16rem; height: 16rem; }
    .hero-console { width: calc(100% - 1rem); }
    .category-index-row { grid-template-columns: 2rem 3rem minmax(0, 1fr) 3rem; min-height: 8.5rem; gap: 0.8rem; }
    .category-index-row > p, .category-row-tools { display: none; }
    .category-row-icon { width: 3rem; height: 3rem; }
    .platform-stat-grid { grid-template-columns: 1fr 1fr; }
    .workflow-grid { grid-template-columns: 1fr; }
    .workflow-grid li { min-height: 16rem; }
  }
  @media (max-width: 575.98px) {
    .home-hero { padding-bottom: 5rem; }
    .hero-actions { align-items: stretch; flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .hero-trust { gap: 0.6rem 1rem; }
    .hero-visual { min-height: 25rem; }
    .hero-console { margin-top: 1rem; }
    .hero-story-tabs small { display: none; }
    .hero-story-tabs button { min-height: 3.2rem; justify-items: center; }
    .category-index-row { grid-template-columns: 1.7rem 2.7rem minmax(0, 1fr) 2.7rem; padding-block: 1.4rem; }
    .platform-stat-grid > div { min-height: 9rem; padding: 1.1rem; }
    .platform-symbol { display: none; }
  }
}
@layer pages {
  .hero-section-marker { position: absolute; right: 1.2rem; top: 50%; z-index: 3; display: grid; grid-template-columns: auto; justify-items: center; gap: 0.55rem; color: #dbe6f8; font-size: 0.63rem; font-weight: 850; letter-spacing: 0.12em; transform: translateY(-50%); }
  .hero-section-marker i { display: block; width: 1px; height: 4.5rem; background: linear-gradient(to bottom, var(--color-accent) 0 25%, rgb(255 255 255 / 0.25) 25% 100%); }
  @media (max-width: 991.98px) { .hero-section-marker { display: none; } }
}

@layer pages {
  .hero-console { transition: border-color 520ms var(--ease-emphasis), box-shadow 520ms var(--ease-emphasis), transform 520ms var(--ease-emphasis); }
  .home-hero[data-story-index="1"] .hero-console { border-color: rgb(95 211 255 / 0.34); box-shadow: 0 34px 90px rgb(0 160 255 / 0.16); }
  .home-hero[data-story-index="2"] .hero-console { border-color: rgb(148 118 255 / 0.38); box-shadow: 0 34px 90px rgb(95 68 255 / 0.16); }
  .home-hero[data-story-index="3"] .hero-console { border-color: rgb(255 139 91 / 0.38); box-shadow: 0 34px 90px rgb(255 90 61 / 0.14); }
  .hero-story-tabs [role="tab"] { position: relative; overflow: hidden; }
  .hero-story-tabs [role="tab"]::after { position: absolute; inset: auto 0 0; height: 2px; content: ""; background: var(--color-primary-bright); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-normal) var(--ease-emphasis); }
  .hero-story-tabs [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
  .hero-story-timeline { height: 2px; margin-top: 1.1rem; overflow: hidden; background: rgb(255 255 255 / 0.12); }
  .hero-story-timeline span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--color-primary-bright), #fff); transform: scaleX(0); transform-origin: left; }
  .hero-story-timeline span.is-running { animation: heroStoryTimeline var(--story-duration, 6500ms) linear forwards; }
  .hero-story-meta { display: flex; align-items: center; justify-content: flex-end; gap: 0.65rem; margin-top: 0.75rem; color: #93a8c8; font-size: 0.65rem; font-weight: 850; letter-spacing: 0.14em; }
  .hero-story-meta i { width: 2.5rem; height: 1px; background: rgb(255 255 255 / 0.24); }
  .category-index-row { transition: background-color var(--motion-normal) var(--ease-standard), border-color var(--motion-normal) var(--ease-standard), transform var(--motion-normal) var(--ease-emphasis); }
  .category-index-row:hover, .category-index-row:focus-within { background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border)); transform: translateX(0.35rem); }
  .platform-stat-grid strong { font-variant-numeric: tabular-nums; }
  @keyframes heroStoryTimeline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @media (max-width: 767.98px) {
    .hero-story-meta { justify-content: flex-start; }
    .category-index-row:hover, .category-index-row:focus-within { transform: none; }
  }
}

@layer pages {
  .inner-hero-orbit { position: absolute; right: -12rem; bottom: -18rem; width: 42rem; height: 42rem; border: 1px solid rgb(255 255 255 / 0.09); border-radius: 50%; }
  .inner-hero-orbit span { position: absolute; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 50%; }
  .inner-hero-orbit span:first-child { inset: 5rem; }
  .inner-hero-orbit span:last-child { inset: 11rem; }

  .category-tools-section { padding-block: var(--section-pad); }
  .category-search-panel { display: grid; grid-template-columns: minmax(14rem, 0.45fr) minmax(0, 1.55fr); align-items: end; gap: 2rem; margin-bottom: 3rem; padding: 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .category-search-panel label { display: grid; }
  .category-search-panel label > span { font-weight: 820; letter-spacing: -0.02em; }
  .category-search-panel label small { color: var(--color-text-muted); }
  .category-search-field { position: relative; display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.75rem 1rem; background: var(--color-surface-soft); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); }
  .category-search-field:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
  .category-search-field .bi { color: var(--color-primary); }
  .category-search-field input { min-width: 0; min-height: 2.8rem; padding: 0; color: var(--color-text); background: transparent; border: 0; outline: 0; }
  .category-search-field > span { padding: 0.35rem 0.65rem; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
  .category-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .category-tool-item[hidden] { display: none; }
  .empty-state { display: grid; justify-items: center; gap: 0.75rem; padding: 4rem 1.5rem; text-align: center; background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
  .empty-state > .bi { color: var(--color-primary); font-size: 2rem; }
  .empty-state h3 { margin: 0; font-size: 1.5rem; font-weight: 820; }
  .empty-state p { margin: 0; color: var(--color-text-muted); }

  .category-story-section { padding-block: var(--section-pad); background: var(--color-surface); border-block: 1px solid var(--color-border); }
  .category-story-grid { display: grid; grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr); gap: clamp(3rem, 8vw, 9rem); }
  .category-story-heading h2 { max-width: 11ch; }
  .editorial-check-list { display: grid; gap: 0.8rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
  .editorial-check-list li { display: flex; align-items: flex-start; gap: 0.65rem; color: var(--color-text-muted); }
  .editorial-check-list .bi { flex: 0 0 auto; margin-top: 0.25rem; color: var(--color-primary); }

  .category-related-section { padding-block: var(--section-pad); }
  .category-faq-section { padding-block: var(--section-pad); background: var(--color-surface); }

  @media (max-width: 991.98px) {
    .category-story-grid { grid-template-columns: 1fr; gap: 2rem; }
  }
  @media (max-width: 767.98px) {
    .category-search-panel { grid-template-columns: 1fr; gap: 1rem; }
    .category-tool-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 575.98px) {
    .category-search-panel { padding: 1rem; }
    .category-search-field { grid-template-columns: 1.2rem minmax(0, 1fr); border-radius: var(--radius-lg); }
    .category-search-field > span { grid-column: 1 / -1; justify-self: start; }
  }
}

@layer pages {
  .tool-hero-glyph { position: absolute; right: 4%; bottom: -8%; color: rgb(255 255 255 / 0.035); font-size: clamp(18rem, 35vw, 34rem); transform: rotate(-8deg); pointer-events: none; }
  .tool-hero-meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.4rem; margin-top: 1.5rem; color: #adbdd5; font-size: 0.77rem; font-weight: 750; }
  .tool-hero-meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
  .tool-hero-meta .bi { color: #8db5ff; }
  .tool-hero-actions { align-self: end; justify-self: end; flex-direction: column; min-width: 18rem; }
  .tool-hero-actions .btn { width: 100%; }

  .tool-workspace-section { position: relative; padding-block: clamp(4rem, 7vw, 7rem); background: var(--color-bg); }
  .tool-layout-grid { display: grid; grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr); align-items: start; gap: 2rem; }
  .tool-sidebar-column { position: sticky; top: calc(var(--navbar-height) + 1.5rem); }
  .tool-sidebar { display: grid; gap: 1rem; }
  .sidebar-section { padding: 1.35rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .sidebar-current { color: #fff; background: linear-gradient(145deg, #07152e, #0a2b65); border-color: rgb(255 255 255 / 0.1); }
  .sidebar-current .sidebar-kicker { color: #96b7f7; }
  .sidebar-category-title { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: 0.8rem; margin: 1.1rem 0; }
  .sidebar-category-icon { display: grid; width: 3rem; height: 3rem; place-items: center; color: #fff; background: var(--color-primary); border-radius: 50%; }
  .sidebar-category-title strong, .sidebar-category-title small { display: block; }
  .sidebar-category-title strong { font-size: 0.95rem; }
  .sidebar-category-title small { color: #9fb0ca; font-size: 0.7rem; }
  .sidebar-primary-link { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 0.5rem; color: #fff; border-top: 1px solid rgb(255 255 255 / 0.14); font-size: 0.75rem; font-weight: 800; text-decoration: none; }
  .sidebar-tool-list { display: grid; margin: 1rem 0 0; padding: 0; list-style: none; }
  .sidebar-tool-list a { display: grid; min-height: 50px; grid-template-columns: 1.7rem minmax(0, 1fr) 1rem; align-items: center; gap: 0.55rem; color: var(--color-text); border-bottom: 1px solid var(--color-border); text-decoration: none; }
  .sidebar-tool-list li:last-child a { border-bottom: 0; }
  .sidebar-tool-list a:hover, .sidebar-tool-list a:focus-visible { color: var(--color-primary); }
  .sidebar-tool-list span { color: var(--color-text-subtle); font-size: 0.62rem; font-weight: 850; }
  .sidebar-tool-list strong { font-size: 0.76rem; line-height: 1.25; }
  .sidebar-search-cta h2 { margin: 0.75rem 0; font-size: 1.25rem; font-weight: 820; letter-spacing: -0.035em; }
  .sidebar-search-cta p { color: var(--color-text-muted); font-size: 0.78rem; }
  .tool-mobile-category { margin-bottom: 1rem; }
  .tool-mobile-category label { display: block; margin-bottom: 0.5rem; font-size: 0.78rem; font-weight: 800; }
  .tool-mobile-category select { width: 100%; min-height: 48px; padding: 0.7rem 1rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }

  .tool-workbench { overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: 0 20px 55px rgb(5 18 43 / 0.07); }
  .tool-workbench-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: 1.6rem 1.8rem; background: var(--color-surface-soft); border-bottom: 1px solid var(--color-border); }
  .tool-workbench-header h2 { margin: 0.3rem 0 0; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 820; letter-spacing: -0.05em; }
  .tool-workbench-header .section-number { margin-bottom: 0.6rem; }
  .tool-privacy-note { display: inline-flex; min-height: 40px; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; color: var(--color-success); background: var(--color-success-soft); border: 1px solid color-mix(in srgb, var(--color-success) 20%, var(--color-border)); border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
  .tool-workbench-body { padding: clamp(1rem, 3vw, 2rem); }
  .tool-widget { display: grid; gap: 1rem; }
  .tool-widget .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
  .tool-widget .toolbar { display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 0.85rem; background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .tool-widget .btn { min-height: 44px; }
  .tool-widget .btn-sm { min-height: 40px; }
  .tool-widget .input-group-text { color: var(--color-text-muted); background: var(--color-surface-soft); border-color: var(--color-border-strong); }
  .tool-widget .form-check-input { border-color: var(--color-border-strong); }
  .tool-widget .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
  .code-textarea, .output-pre { color: var(--color-code-text); background: var(--color-code-bg); border-color: #243451; }
  .output-pre { min-height: 10rem; margin: 0; padding: 1rem; overflow: auto; border: 1px solid #243451; border-radius: var(--radius-md); white-space: pre-wrap; }
  .result-panel, .preview-panel, .validation-result, .diff-output { min-height: 7rem; padding: 1rem; background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .result-label { display: block; color: var(--color-text-muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
  .result-value { display: block; margin-top: 0.4rem; font-size: clamp(1.35rem, 3vw, 2.1rem); font-weight: 820; letter-spacing: -0.04em; overflow-wrap: anywhere; }
  .drop-zone { display: grid; min-height: 12rem; place-items: center; padding: 2rem; text-align: center; background: var(--color-surface-soft); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
  .drop-zone:hover, .drop-zone:focus-within { background: var(--color-primary-soft); border-color: var(--color-primary); }
  .image-preview { display: grid; min-height: 12rem; place-items: center; overflow: hidden; background: repeating-conic-gradient(var(--color-surface-soft) 0 25%, var(--color-surface) 0 50%) 50% / 1.4rem 1.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .image-preview img { max-height: 28rem; object-fit: contain; }
  .color-preview { min-height: 9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .color-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.7rem; }
  .device-frame { overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); }
  .device-bar { padding: 0.6rem 1rem; background: var(--color-surface-soft); border-bottom: 1px solid var(--color-border); }
  .device-stage { min-height: 25rem; overflow: auto; }
  .preview-panel iframe { width: 100%; min-height: 28rem; border: 0; }
  .CodeMirror { min-height: 24rem; color: #e5eeff; background: #07111f; border: 1px solid #243451; border-radius: var(--radius-md); font-size: 0.88rem; }
  .CodeMirror-gutters { background: #0b1729; border-right-color: #243451; }

  .tool-guide-section { padding-block: var(--section-pad); background: var(--color-surface); border-block: 1px solid var(--color-border); }
  .tool-content-grid { display: grid; grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 1.35fr); gap: clamp(3rem, 8vw, 9rem); }
  .tool-content-heading h2 { max-width: 10ch; }
  .tool-editorial-lead { color: var(--color-text); font-size: clamp(1.2rem, 2.2vw, 1.75rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.45; }
  .tool-editorial-block > p:not(.tool-editorial-lead) { color: var(--color-text-muted); }
  .tool-guide-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--color-border); }
  .tool-guide-label { display: block; margin-bottom: 1rem; color: var(--color-primary); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
  .editorial-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
  .editorial-steps li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.8rem; padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
  .editorial-steps li > span { color: var(--color-text-subtle); font-size: 0.67rem; font-weight: 850; }
  .editorial-steps p { margin: 0; color: var(--color-text-muted); }
  .feature-list { margin: 0; }
  .tool-faq-section, .related-tools-section { padding-block: var(--section-pad); }
  .related-tools-section { background: var(--color-surface); border-top: 1px solid var(--color-border); }

  @media (max-width: 1199.98px) {
    .tool-layout-grid { grid-template-columns: 15rem minmax(0, 1fr); }
  }
  @media (max-width: 991.98px) {
    .tool-layout-grid { grid-template-columns: 1fr; }
    .tool-hero-actions { justify-self: start; }
    .tool-content-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 767.98px) {
    .tool-workbench-header { align-items: flex-start; flex-direction: column; }
    .tool-guide-columns { grid-template-columns: 1fr; }
  }
  @media (max-width: 575.98px) {
    .tool-workbench { border-radius: var(--radius-lg); }
    .tool-workbench-header { padding: 1.2rem; }
    .tool-workbench-body { padding: 1rem; }
    .tool-privacy-note { white-space: normal; }
    .tool-widget .toolbar .btn { width: 100%; }
  }
}

@layer themes {
  [data-bs-theme="dark"] {
    color-scheme: dark;
    --color-bg: #060e1c;
    --color-surface: #0d192b;
    --color-surface-soft: #122136;
    --color-surface-muted: #172841;
    --color-text: #f2f6fd;
    --color-text-muted: #b0bdd0;
    --color-text-subtle: #8291a8;
    --color-border: #263a56;
    --color-border-strong: #3b506e;
    --color-primary: #78a8ff;
    --color-primary-hover: #a6c5ff;
    --color-primary-soft: #142d58;
    --color-primary-bright: #8cb5ff;
    --color-accent: #ff785f;
    --color-accent-soft: #3b211f;
    --color-focus: #9dbdff;
    --color-success: #67ddb0;
    --color-success-soft: #10372c;
    --color-warning: #ffc078;
    --color-warning-soft: #3c2913;
    --color-danger: #ffaba5;
    --color-danger-soft: #3e1b20;
    --search-bg: #0d192b;
    --search-text: #f2f6fd;
    --search-placeholder: #8d9bb0;
    --search-border: #435974;
  }
  [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }
  [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { color: var(--color-text); background-color: var(--color-surface); }
  [data-bs-theme="dark"] .theme-control option { color: #fff; background: #0d192b; }
  [data-bs-theme="dark"] .tool-workbench { box-shadow: 0 20px 60px rgb(0 0 0 / 0.22); }
  [data-bs-theme="dark"] .table { --bs-table-striped-bg: rgb(255 255 255 / 0.025); --bs-table-hover-bg: rgb(120 168 255 / 0.08); }
}

@layer accessibility {
  .skip-link { position: fixed; z-index: 1400; left: 1rem; top: -7rem; padding: 0.75rem 1rem; color: var(--color-text); background: var(--color-surface); border: 3px solid var(--color-focus); border-radius: var(--radius-sm); }
  .skip-link:focus { top: 1rem; }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
  :where(button, .btn, input, select, .nav-link, .dropdown-item, .list-group-item, .sidebar-link) { min-height: 44px; }
  .icon-button { min-width: 44px; min-height: 44px; }
  [hidden] { display: none !important; }
  [data-reveal] { opacity: 0; transform: translateY(2.2rem); transition: opacity var(--motion-slow) var(--ease-emphasis), transform var(--motion-slow) var(--ease-emphasis); transition-delay: calc(var(--reveal-delay, 0) * 70ms); }
  [data-reveal="hero"] { transform: translateY(1rem); }
  [data-reveal-delay="1"] { --reveal-delay: 1; }
  [data-reveal-delay="2"] { --reveal-delay: 2; }
  [data-reveal-delay="3"] { --reveal-delay: 3; }
  [data-reveal-delay="4"] { --reveal-delay: 4; }
  [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
  }
}

@layer utilities {
  @media print {
    .main-navbar, .tool-sidebar, .site-footer, .back-to-top, .toast-container, .btn, form button { display: none !important; }
    body { color: #000; background: #fff; }
    .card { break-inside: avoid; border: 1px solid #999 !important; }
  }
}