/*
  main.css — modern UI foundation for creditcardbank.ru
  CSS layers, design tokens, utilities and component blueprints
  Version: 1.0.0

  Suggested layer order:
  reset → tokens → base → layout → components → utilities → states → print
*/

@charset "UTF-8";

@layer reset, tokens, base, layout, components, utilities, states, print;

/* --------------------------------------------------------------------------
   RESET
---------------------------------------------------------------------------- */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100%;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img,
  picture,
  svg,
  video,
  canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  svg {
    flex-shrink: 0;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button,
  select {
    text-transform: none;
  }

  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    cursor: pointer;
  }

  button:disabled,
  [aria-disabled="true"] {
    cursor: not-allowed;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding: 0;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  :target {
    scroll-margin-block: 6rem;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* --------------------------------------------------------------------------
   DESIGN TOKENS
---------------------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: light;

    /* Brand palette: finance/aggregator, clean and trustworthy */
    --color-brand-50: #eef8ff;
    --color-brand-100: #d8efff;
    --color-brand-200: #b8e3ff;
    --color-brand-300: #82ceff;
    --color-brand-400: #45b2fb;
    --color-brand-500: #1d95e8;
    --color-brand-600: #0f76c8;
    --color-brand-700: #0f5ea2;
    --color-brand-800: #124f86;
    --color-brand-900: #16436f;
    --color-brand-950: #0f2a49;

    --color-accent-50: #effef6;
    --color-accent-100: #d9fced;
    --color-accent-200: #b7f7db;
    --color-accent-300: #7fecbd;
    --color-accent-400: #40d897;
    --color-accent-500: #19bd78;
    --color-accent-600: #0d985f;
    --color-accent-700: #0d7a50;
    --color-accent-800: #106142;
    --color-accent-900: #0f5039;

    --color-warning-50: #fff8eb;
    --color-warning-100: #ffedc7;
    --color-warning-200: #ffda8a;
    --color-warning-300: #ffc24d;
    --color-warning-400: #ffa91f;
    --color-warning-500: #f98507;
    --color-warning-600: #dd6102;
    --color-warning-700: #b74206;
    --color-warning-800: #94320c;
    --color-warning-900: #792b0e;

    --color-danger-50: #fff1f2;
    --color-danger-100: #ffe4e6;
    --color-danger-200: #fecdd3;
    --color-danger-300: #fda4af;
    --color-danger-400: #fb7185;
    --color-danger-500: #f43f5e;
    --color-danger-600: #e11d48;
    --color-danger-700: #be123c;
    --color-danger-800: #9f1239;
    --color-danger-900: #881337;

    --color-neutral-0: #ffffff;
    --color-neutral-25: #fcfdff;
    --color-neutral-50: #f7f9fc;
    --color-neutral-100: #eef2f7;
    --color-neutral-200: #dde5ef;
    --color-neutral-300: #c9d5e3;
    --color-neutral-400: #98a8ba;
    --color-neutral-500: #6b7a90;
    --color-neutral-600: #4f5d72;
    --color-neutral-700: #364154;
    --color-neutral-800: #202b3d;
    --color-neutral-900: #111827;
    --color-neutral-950: #07111f;

    /* Semantic colors */
    --color-page: var(--color-neutral-50);
    --color-surface: var(--color-neutral-0);
    --color-surface-muted: var(--color-neutral-25);
    --color-surface-raised: var(--color-neutral-0);
    --color-text: var(--color-neutral-900);
    --color-text-muted: var(--color-neutral-600);
    --color-text-soft: var(--color-neutral-500);
    --color-heading: var(--color-neutral-950);
    --color-border: color-mix(in srgb, var(--color-neutral-200) 86%, white);
    --color-border-strong: var(--color-neutral-300);
    --color-link: var(--color-brand-700);
    --color-link-hover: var(--color-brand-600);
    --color-focus: var(--color-brand-400);

    /* Gradients */
    --gradient-hero: radial-gradient(circle at 16% 18%, rgba(64, 216, 151, 0.28), transparent 32%),
      radial-gradient(circle at 88% 6%, rgba(69, 178, 251, 0.26), transparent 34%),
      linear-gradient(135deg, #f8fcff 0%, #eef8ff 48%, #ecfff6 100%);
    --gradient-brand: linear-gradient(135deg, var(--color-brand-600), var(--color-accent-500));
    --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 1));

    /* Typography */
    --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
      "Noto Sans", "Liberation Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --text-xs: clamp(0.75rem, 0.73rem + 0.08vw, 0.8rem);
    --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
    --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
    --text-md: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
    --text-lg: clamp(1.18rem, 1.08rem + 0.48vw, 1.45rem);
    --text-xl: clamp(1.4rem, 1.16rem + 1vw, 2rem);
    --text-2xl: clamp(1.8rem, 1.35rem + 2vw, 3rem);
    --text-3xl: clamp(2.25rem, 1.6rem + 3vw, 4.25rem);

    --leading-tight: 1.12;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.72;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 650;
    --weight-bold: 750;
    --weight-black: 850;

    /* Spacing */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    --container-xs: 42rem;
    --container-sm: 56rem;
    --container-md: 72rem;
    --container-lg: 82rem;
    --container-xl: 92rem;
    --container-padding: clamp(1rem, 3vw, 2rem);

    /* Radius */
    --radius-xs: 0.375rem;
    --radius-sm: 0.625rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.125rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 42, 73, 0.06);
    --shadow-sm: 0 8px 22px rgba(15, 42, 73, 0.08);
    --shadow-md: 0 18px 45px rgba(15, 42, 73, 0.12);
    --shadow-lg: 0 28px 70px rgba(15, 42, 73, 0.16);
    --shadow-focus: 0 0 0 4px color-mix(in srgb, var(--color-focus) 28%, transparent);

    /* Borders and transitions */
    --border-width: 1px;
    --transition-fast: 150ms ease;
    --transition-base: 220ms ease;
    --transition-slow: 360ms ease;

    /* Layout */
    --header-height: 4.5rem;
    --z-dropdown: 40;
    --z-sticky: 50;
    --z-modal: 100;
    --z-toast: 120;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --color-page: #07111f;
      --color-surface: #0e1a2b;
      --color-surface-muted: #111f33;
      --color-surface-raised: #15243a;
      --color-text: #e7edf7;
      --color-text-muted: #adbbcd;
      --color-text-soft: #8797ad;
      --color-heading: #ffffff;
      --color-border: rgba(173, 187, 205, 0.18);
      --color-border-strong: rgba(173, 187, 205, 0.32);
      --color-link: #82ceff;
      --color-link-hover: #b8e3ff;
      --gradient-hero: radial-gradient(circle at 16% 18%, rgba(25, 189, 120, 0.18), transparent 34%),
        radial-gradient(circle at 88% 6%, rgba(69, 178, 251, 0.18), transparent 36%),
        linear-gradient(135deg, #07111f 0%, #0e1a2b 52%, #0d2530 100%);
      --gradient-card: linear-gradient(180deg, rgba(21, 36, 58, 0.92), rgba(14, 26, 43, 1));
      --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
      --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.32);
      --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.38);
      --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.44);
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-page: #07111f;
    --color-surface: #0e1a2b;
    --color-surface-muted: #111f33;
    --color-surface-raised: #15243a;
    --color-text: #e7edf7;
    --color-text-muted: #adbbcd;
    --color-text-soft: #8797ad;
    --color-heading: #ffffff;
    --color-border: rgba(173, 187, 205, 0.18);
    --color-border-strong: rgba(173, 187, 205, 0.32);
    --color-link: #82ceff;
    --color-link-hover: #b8e3ff;
    --gradient-hero: radial-gradient(circle at 16% 18%, rgba(25, 189, 120, 0.18), transparent 34%),
      radial-gradient(circle at 88% 6%, rgba(69, 178, 251, 0.18), transparent 36%),
      linear-gradient(135deg, #07111f 0%, #0e1a2b 52%, #0d2530 100%);
    --gradient-card: linear-gradient(180deg, rgba(21, 36, 58, 0.92), rgba(14, 26, 43, 1));
  }
}

/* --------------------------------------------------------------------------
   BASE
---------------------------------------------------------------------------- */
@layer base {
  html {
    font-family: var(--font-sans);
    background: var(--color-page);
    color: var(--color-text);
    accent-color: var(--color-brand-600);
  }

  body {
    background:
      radial-gradient(circle at top left, color-mix(in srgb, var(--color-brand-100) 52%, transparent), transparent 34rem),
      var(--color-page);
    color: var(--color-text);
    font-size: var(--text-base);
  }

  ::selection {
    background: color-mix(in srgb, var(--color-brand-300) 55%, transparent);
    color: var(--color-neutral-950);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--color-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  h1,
  .h1 {
    font-size: var(--text-3xl);
    letter-spacing: -0.045em;
  }

  h2,
  .h2 {
    font-size: var(--text-2xl);
    letter-spacing: -0.035em;
  }

  h3,
  .h3 {
    font-size: var(--text-xl);
    letter-spacing: -0.025em;
  }

  h4,
  .h4 {
    font-size: var(--text-lg);
  }

  p {
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  a {
    color: var(--color-link);
    transition: color var(--transition-fast), opacity var(--transition-fast);
  }

  a:hover {
    color: var(--color-link-hover);
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    box-shadow: var(--shadow-focus);
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--color-border);
  }

  strong,
  b {
    font-weight: var(--weight-bold);
    color: var(--color-heading);
  }

  small {
    font-size: var(--text-sm);
  }

  code,
  kbd,
  pre {
    font-family: var(--font-mono);
  }

  input,
  textarea,
  select {
    inline-size: 100%;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
  }

  input,
  select {
    min-block-size: 3rem;
    padding-inline: var(--space-4);
  }

  textarea {
    min-block-size: 8rem;
    padding: var(--space-3) var(--space-4);
    resize: vertical;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--color-text-soft);
  }

  input:disabled,
  textarea:disabled,
  select:disabled {
    opacity: 0.6;
    background: var(--color-surface-muted);
  }

  label {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    color: var(--color-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }
}

/* --------------------------------------------------------------------------
   LAYOUT
---------------------------------------------------------------------------- */
@layer layout {
  .page,
  .site {
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .main,
  main {
    flex: 1;
  }

  .container {
    inline-size: min(100% - (var(--container-padding) * 2), var(--container-xl));
    margin-inline: auto;
  }

  .container--xs { max-inline-size: var(--container-xs); }
  .container--sm { max-inline-size: var(--container-sm); }
  .container--md { max-inline-size: var(--container-md); }
  .container--lg { max-inline-size: var(--container-lg); }

  .section {
    padding-block: clamp(2.25rem, 6vw, 5rem);
  }

  .section--compact {
    padding-block: clamp(1.5rem, 4vw, 3rem);
  }

  .section__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: clamp(1.25rem, 3vw, 2rem);
  }

  .section__title {
    max-inline-size: 15ch;
  }

  .section__text {
    max-inline-size: 62ch;
    margin-block-start: var(--space-3);
  }

  .stack {
    display: grid;
    gap: var(--stack-gap, var(--space-4));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-3));
  }

  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: var(--split-align, center);
  }

  @media (min-width: 56rem) {
    .split {
      grid-template-columns: minmax(0, var(--split-left, 1fr)) minmax(0, var(--split-right, 1fr));
    }
  }

  .auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--auto-grid-min, 17rem)), 1fr));
    gap: var(--auto-grid-gap, var(--space-5));
  }

  .content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }

  @media (min-width: 64rem) {
    .content-grid--sidebar {
      grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
      align-items: start;
    }
  }
}

/* --------------------------------------------------------------------------
   COMPONENTS
---------------------------------------------------------------------------- */
@layer components {
  /* Header / navigation */
  .site-header,
  .header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    min-block-size: var(--header-height);
    border-block-end: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
    background: color-mix(in srgb, var(--color-surface) 86%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
  }

  .site-header__inner,
  .header__inner {
    min-block-size: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-heading);
    font-weight: var(--weight-black);
    letter-spacing: -0.03em;
  }

  .logo img,
  .logo svg {
    max-block-size: 2.5rem;
  }

  .nav,
  .main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .nav__link,
  .main-nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }

  .nav__link:hover,
  .nav__link[aria-current="page"],
  .main-nav a:hover,
  .main-nav a[aria-current="page"] {
    color: var(--color-brand-700);
    background: var(--color-brand-50);
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .mobile-menu-button {
    display: inline-flex;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-heading);
  }

  @media (min-width: 56rem) {
    .mobile-menu-button {
      display: none;
    }
  }

  @media (max-width: 55.99rem) {
    .nav,
    .main-nav {
      display: none;
    }

    .nav[data-open="true"],
    .main-nav[data-open="true"] {
      position: fixed;
      inset: var(--header-height) var(--container-padding) auto;
      display: grid;
      padding: var(--space-3);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      background: var(--color-surface-raised);
      box-shadow: var(--shadow-lg);
    }
  }

  /* Buttons */
  .btn,
  .button,
  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    --btn-bg: var(--color-surface);
    --btn-fg: var(--color-heading);
    --btn-border: var(--color-border-strong);
    --btn-shadow: var(--shadow-xs);

    display: inline-flex;
    min-block-size: 3rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-5);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    box-shadow: var(--btn-shadow);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1;
    text-align: center;
    transition:
      transform var(--transition-fast),
      box-shadow var(--transition-fast),
      background var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast);
  }

  .btn:hover,
  .button:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-ghost:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  .btn:active,
  .button:active,
  .btn-primary:active,
  .btn-secondary:active,
  .btn-ghost:active {
    transform: translateY(0);
  }

  .btn-primary,
  .button--primary,
  .btn.is-primary {
    --btn-bg: var(--gradient-brand);
    --btn-fg: #ffffff;
    --btn-border: transparent;
    --btn-shadow: 0 12px 24px rgba(15, 118, 200, 0.22);
  }

  .btn-secondary,
  .button--secondary,
  .btn.is-secondary {
    --btn-bg: var(--color-brand-50);
    --btn-fg: var(--color-brand-800);
    --btn-border: color-mix(in srgb, var(--color-brand-200) 78%, transparent);
  }

  .btn-ghost,
  .button--ghost,
  .btn.is-ghost {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-shadow: none;
  }

  .btn--sm { min-block-size: 2.375rem; padding-inline: var(--space-4); }
  .btn--lg { min-block-size: 3.5rem; padding-inline: var(--space-7); font-size: var(--text-base); }
  .btn--full { inline-size: 100%; }

  /* Hero */
  .hero {
    position: relative;
    overflow: clip;
    padding-block: clamp(3rem, 8vw, 7rem);
    background: var(--gradient-hero);
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: auto -12rem -18rem auto;
    inline-size: 36rem;
    block-size: 36rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-brand-300) 24%, transparent);
    filter: blur(32px);
    pointer-events: none;
  }

  .hero__inner {
    position: relative;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  @media (min-width: 60rem) {
    .hero__inner {
      grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
    }
  }

  .hero__eyebrow,
  .eyebrow {
    display: inline-flex;
    inline-size: fit-content;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
    padding: 0.4rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-accent-300) 48%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-accent-100) 70%, transparent);
    color: var(--color-accent-800);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
  }

  .hero__title {
    max-inline-size: 11ch;
  }

  .hero__text {
    max-inline-size: 58ch;
    margin-block-start: var(--space-5);
    font-size: var(--text-lg);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-7);
  }

  .hero-card {
    border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    border-radius: var(--radius-2xl);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    box-shadow: var(--shadow-lg);
    padding: clamp(1rem, 3vw, 1.5rem);
    backdrop-filter: blur(16px);
  }

  /* Category tiles */
  .category-grid {
    --auto-grid-min: 13.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--auto-grid-min)), 1fr));
    gap: var(--space-4);
  }

  .category-card {
    position: relative;
    display: grid;
    min-block-size: 10rem;
    align-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--gradient-card);
    color: var(--color-heading);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition:
      transform var(--transition-base),
      box-shadow var(--transition-base),
      border-color var(--transition-base);
  }

  .category-card::after {
    content: "";
    position: absolute;
    inset: auto -2rem -2rem auto;
    inline-size: 7rem;
    block-size: 7rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-brand-200) 42%, transparent);
    transition: transform var(--transition-base);
  }

  .category-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-brand-300) 75%, var(--color-border));
    box-shadow: var(--shadow-md);
  }

  .category-card:hover::after {
    transform: scale(1.18);
  }

  .category-card__icon {
    inline-size: 3rem;
    block-size: 3rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--color-brand-50);
    color: var(--color-brand-700);
  }

  .category-card__title {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
  }

  .category-card__meta {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* Cards: loans, credit cards, debit cards, RKO */
  .offers-grid,
  .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr));
    gap: var(--space-5);
  }

  .offer-card,
  .product-card {
    position: relative;
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    transition:
      transform var(--transition-base),
      box-shadow var(--transition-base),
      border-color var(--transition-base);
  }

  .offer-card:hover,
  .product-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--color-brand-300) 66%, var(--color-border));
    box-shadow: var(--shadow-md);
  }

  .offer-card__top,
  .product-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .offer-card__logo,
  .product-card__logo {
    display: grid;
    place-items: center;
    inline-size: 5.25rem;
    block-size: 3.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    overflow: hidden;
  }

  .offer-card__logo img,
  .product-card__logo img {
    max-inline-size: 82%;
    max-block-size: 82%;
    object-fit: contain;
  }

  .offer-card__org,
  .product-card__org {
    color: var(--color-text-soft);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
  }

  .offer-card__title,
  .product-card__title {
    color: var(--color-heading);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
  }

  .offer-card__title a,
  .product-card__title a {
    color: inherit;
  }

  .offer-card__title a:hover,
  .product-card__title a:hover {
    color: var(--color-brand-700);
  }

  .offer-card__stats,
  .product-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .stat {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
  }

  .stat__label {
    display: block;
    color: var(--color-text-soft);
    font-size: var(--text-xs);
  }

  .stat__value {
    display: block;
    margin-block-start: 0.15rem;
    color: var(--color-heading);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: 1.15;
  }

  .offer-card__footer,
  .product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-start: var(--space-2);
  }

  .top-badge,
  .badge {
    display: inline-flex;
    inline-size: fit-content;
    align-items: center;
    gap: 0.35rem;
    min-block-size: 1.75rem;
    padding-inline: 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--color-warning-100);
    color: var(--color-warning-800);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .badge--success { background: var(--color-accent-100); color: var(--color-accent-800); }
  .badge--brand { background: var(--color-brand-100); color: var(--color-brand-800); }
  .badge--danger { background: var(--color-danger-100); color: var(--color-danger-800); }
  .badge--muted { background: var(--color-neutral-100); color: var(--color-neutral-700); }

  /* Horizontal comparison list */
  .offer-list,
  .comparison-list {
    display: grid;
    gap: var(--space-4);
  }

  .comparison-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
  }

  @media (min-width: 48rem) {
    .comparison-card {
      grid-template-columns: 14rem minmax(0, 1fr) auto;
      align-items: center;
    }
  }

  .comparison-card__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .comparison-card__params {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: var(--space-3);
  }

  /* Filters / forms */
  .filter-panel,
  .calculator,
  .form-card {
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .filter-panel {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-4));
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-4);
  }

  .field {
    display: grid;
    gap: var(--space-2);
  }

  .field__hint,
  .field__error {
    font-size: var(--text-xs);
  }

  .field__hint {
    color: var(--color-text-soft);
  }

  .field__error {
    color: var(--color-danger-700);
  }

  .range-field {
    display: grid;
    gap: var(--space-3);
  }

  input[type="range"] {
    min-block-size: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    block-size: 0.5rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-brand-500), var(--color-accent-500));
  }

  input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: -0.375rem;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--color-brand-700);
    box-shadow: var(--shadow-sm);
  }

  .calculator__result {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--gradient-brand);
    color: #ffffff;
  }

  .calculator__result p,
  .calculator__result strong {
    color: inherit;
  }

  /* Search */
  .search-box {
    position: relative;
  }

  .search-box input {
    padding-inline-start: 2.75rem;
    border-radius: var(--radius-pill);
  }

  .search-box__icon {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block: 0;
    display: grid;
    place-items: center;
    color: var(--color-text-soft);
    pointer-events: none;
  }

  /* Article cards / editorial */
  .article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-5);
  }

  .article-card {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }

  .article-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }

  .article-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-surface-muted);
  }

  .article-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }

  .article-card:hover .article-card__media img {
    transform: scale(1.04);
  }

  .article-card__body {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
  }

  .article-card__date,
  .article-meta {
    color: var(--color-text-soft);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
  }

  .article-card__title {
    color: var(--color-heading);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
  }

  .prose {
    max-inline-size: 74ch;
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
  }

  .prose > * + * {
    margin-block-start: 1em;
  }

  .prose h2,
  .prose h3,
  .prose h4 {
    margin-block-start: 1.75em;
  }

  .prose a {
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .prose ul,
  .prose ol {
    padding-inline-start: 1.25rem;
  }

  .prose blockquote {
    padding: var(--space-4) var(--space-5);
    border-inline-start: 4px solid var(--color-brand-500);
    border-radius: var(--radius-md);
    background: var(--color-brand-50);
    color: var(--color-heading);
  }

  .prose table,
  .table {
    inline-size: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .prose th,
  .prose td,
  .table th,
  .table td {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    text-align: start;
  }

  .prose th,
  .table th {
    background: var(--color-surface-muted);
    color: var(--color-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
  }

  .table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
  }

  /* Breadcrumbs */
  .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-soft);
    font-size: var(--text-sm);
  }

  .breadcrumbs a {
    color: var(--color-text-muted);
  }

  .breadcrumbs a:hover {
    color: var(--color-brand-700);
  }

  .breadcrumbs__separator {
    opacity: 0.55;
  }

  /* Pagination */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }

  .pagination a,
  .pagination span {
    display: grid;
    min-inline-size: 2.5rem;
    block-size: 2.5rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
  }

  .pagination [aria-current="page"],
  .pagination .active {
    border-color: transparent;
    background: var(--gradient-brand);
    color: #ffffff;
  }

  /* Modal / drawer */
  .modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    place-items: center;
    padding: var(--container-padding);
    background: rgba(7, 17, 31, 0.58);
  }

  .modal[data-open="true"],
  .modal.is-open {
    display: grid;
  }

  .modal__dialog {
    inline-size: min(100%, 36rem);
    max-block-size: min(90dvh, 48rem);
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }

  .modal__header,
  .modal__body,
  .modal__footer {
    padding: var(--space-5);
  }

  .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border-block-end: 1px solid var(--color-border);
  }

  .modal__footer {
    border-block-start: 1px solid var(--color-border);
  }

  /* Footer */
  .site-footer,
  .footer {
    margin-block-start: var(--space-16);
    padding-block: var(--space-12) var(--space-8);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
  }

  .footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-8);
  }

  .footer__title {
    margin-block-end: var(--space-3);
    color: var(--color-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
  }

  .footer__links {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
  }

  .footer__links a {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .footer__links a:hover {
    color: var(--color-brand-700);
  }

  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-start: var(--space-10);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--text-xs);
  }

  /* Trust / disclaimers */
  .notice,
  .disclaimer {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .notice--success {
    border-color: color-mix(in srgb, var(--color-accent-300) 70%, transparent);
    background: var(--color-accent-50);
    color: var(--color-accent-900);
  }

  .notice--warning {
    border-color: color-mix(in srgb, var(--color-warning-300) 70%, transparent);
    background: var(--color-warning-50);
    color: var(--color-warning-900);
  }
}

/* --------------------------------------------------------------------------
   UTILITIES
---------------------------------------------------------------------------- */
@layer utilities {
  .sr-only {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .skip-link {
    position: fixed;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    z-index: var(--z-toast);
    transform: translateY(-150%);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-heading);
    color: var(--color-surface);
    font-weight: var(--weight-bold);
    transition: transform var(--transition-fast);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .flow > * + * { margin-block-start: var(--flow-space, 1rem); }

  .text-balance { text-wrap: balance; }
  .text-pretty { text-wrap: pretty; }
  .text-center { text-align: center; }
  .text-left { text-align: start; }
  .text-right { text-align: end; }

  .text-xs { font-size: var(--text-xs); }
  .text-sm { font-size: var(--text-sm); }
  .text-base { font-size: var(--text-base); }
  .text-lg { font-size: var(--text-lg); }
  .text-xl { font-size: var(--text-xl); }
  .text-2xl { font-size: var(--text-2xl); }

  .font-medium { font-weight: var(--weight-medium); }
  .font-semibold { font-weight: var(--weight-semibold); }
  .font-bold { font-weight: var(--weight-bold); }

  .color-heading { color: var(--color-heading); }
  .color-text { color: var(--color-text); }
  .color-muted { color: var(--color-text-muted); }
  .color-soft { color: var(--color-text-soft); }
  .color-brand { color: var(--color-brand-700); }
  .color-success { color: var(--color-accent-700); }
  .color-warning { color: var(--color-warning-700); }
  .color-danger { color: var(--color-danger-700); }

  .bg-surface { background: var(--color-surface); }
  .bg-muted { background: var(--color-surface-muted); }
  .bg-brand { background: var(--gradient-brand); color: #ffffff; }

  .rounded-sm { border-radius: var(--radius-sm); }
  .rounded-md { border-radius: var(--radius-md); }
  .rounded-lg { border-radius: var(--radius-lg); }
  .rounded-xl { border-radius: var(--radius-xl); }
  .rounded-2xl { border-radius: var(--radius-2xl); }
  .rounded-pill { border-radius: var(--radius-pill); }

  .shadow-xs { box-shadow: var(--shadow-xs); }
  .shadow-sm { box-shadow: var(--shadow-sm); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-lg { box-shadow: var(--shadow-lg); }

  .border { border: 1px solid var(--color-border); }
  .border-strong { border: 1px solid var(--color-border-strong); }

  .d-none { display: none !important; }
  .d-block { display: block; }
  .d-grid { display: grid; }
  .d-flex { display: flex; }
  .inline-flex { display: inline-flex; }

  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .items-end { align-items: flex-end; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-1 { flex: 1 1 0%; }

  .gap-1 { gap: var(--space-1); }
  .gap-2 { gap: var(--space-2); }
  .gap-3 { gap: var(--space-3); }
  .gap-4 { gap: var(--space-4); }
  .gap-5 { gap: var(--space-5); }
  .gap-6 { gap: var(--space-6); }
  .gap-8 { gap: var(--space-8); }

  .p-0 { padding: 0; }
  .p-2 { padding: var(--space-2); }
  .p-3 { padding: var(--space-3); }
  .p-4 { padding: var(--space-4); }
  .p-5 { padding: var(--space-5); }
  .p-6 { padding: var(--space-6); }

  .px-4 { padding-inline: var(--space-4); }
  .px-5 { padding-inline: var(--space-5); }
  .py-2 { padding-block: var(--space-2); }
  .py-3 { padding-block: var(--space-3); }
  .py-4 { padding-block: var(--space-4); }
  .py-6 { padding-block: var(--space-6); }

  .mt-2 { margin-block-start: var(--space-2); }
  .mt-3 { margin-block-start: var(--space-3); }
  .mt-4 { margin-block-start: var(--space-4); }
  .mt-6 { margin-block-start: var(--space-6); }
  .mt-8 { margin-block-start: var(--space-8); }
  .mt-10 { margin-block-start: var(--space-10); }
  .mb-4 { margin-block-end: var(--space-4); }
  .mb-6 { margin-block-end: var(--space-6); }
  .mx-auto { margin-inline: auto; }

  .w-full { inline-size: 100%; }
  .max-w-xs { max-inline-size: var(--container-xs); }
  .max-w-sm { max-inline-size: var(--container-sm); }
  .max-w-md { max-inline-size: var(--container-md); }

  .overflow-hidden { overflow: hidden; }
  .overflow-auto { overflow: auto; }

  .position-relative { position: relative; }
  .sticky-top { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-4)); }

  .ratio-16x9 { aspect-ratio: 16 / 9; }
  .ratio-4x3 { aspect-ratio: 4 / 3; }
  .object-cover { object-fit: cover; }
  .object-contain { object-fit: contain; }

  .visually-muted { opacity: 0.72; }
  .nowrap { white-space: nowrap; }

  @media (max-width: 47.99rem) {
    .sm\:d-none { display: none !important; }
    .sm\:text-center { text-align: center; }
    .sm\:w-full { inline-size: 100%; }
  }

  @media (min-width: 48rem) {
    .md\:d-flex { display: flex; }
    .md\:d-grid { display: grid; }
    .md\:text-left { text-align: start; }
    .md\:w-auto { inline-size: auto; }
  }
}

/* --------------------------------------------------------------------------
   STATES / PROGRESSIVE ENHANCEMENTS
---------------------------------------------------------------------------- */
@layer states {
  [hidden] {
    display: none !important;
  }

  [aria-busy="true"] {
    cursor: progress;
  }

  .is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
  }

  .is-loading::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: 1.2rem;
    block-size: 1.2rem;
    margin: -0.6rem 0 0 -0.6rem;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: 50%;
    color: var(--color-brand-600);
    animation: spin 700ms linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @supports selector(:has(*)) {
    .field:has(input:required) label::after,
    .field:has(select:required) label::after,
    .field:has(textarea:required) label::after {
      content: "*";
      color: var(--color-danger-600);
    }

    .field:has(:invalid:not(:placeholder-shown)) input,
    .field:has(:invalid:not(:placeholder-shown)) select,
    .field:has(:invalid:not(:placeholder-shown)) textarea {
      border-color: var(--color-danger-500);
    }
  }
}

/* --------------------------------------------------------------------------
   PRINT
---------------------------------------------------------------------------- */
@layer print {
  @media print {
    :root {
      --color-page: #ffffff;
      --color-surface: #ffffff;
      --color-text: #111827;
      --color-heading: #000000;
      --color-border: #d1d5db;
    }

    body {
      background: #ffffff !important;
      color: #111827 !important;
    }

    .site-header,
    .header,
    .site-footer,
    .footer,
    .nav,
    .main-nav,
    .btn,
    .button,
    .filter-panel,
    .modal,
    .pagination {
      display: none !important;
    }

    a {
      color: #000000 !important;
      text-decoration: underline;
    }

    .container {
      inline-size: 100%;
      max-inline-size: none;
    }

    .offer-card,
    .product-card,
    .article-card,
    .comparison-card,
    .notice,
    .disclaimer {
      break-inside: avoid;
      box-shadow: none !important;
    }
  }
}