.badge {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-4);
      border-radius: 12px;
      padding: 4px 12px;
      font-size:16px;
      font-weight: 600;
      line-height: 18px;
    }
    .badge-default { background: var(--c-gray-50); color: var(--c-slate); }
    .badge-primary { background: var(--c-gray-100); color: var(--c-blue); }
    .badge-green   { background: #D1FAE5; color: #065F46; }
    .badge-gold    { background: #FEF3C7; color: #92400E; }
    .badge-purple  { background: #E0E7FF; color: #3730A3; }
    .badge-white   { background: rgba(255,255,255,0.15); color: var(--c-white); box-shadow: rgba(255,255,255,0.3) 0px 0px 0px 1px inset; }

    /* ============================================================
       CARDS — Design System
       ============================================================ */
    .card {
      background: var(--c-white);
      border: 1px solid var(--c-gray-300);
      border-radius: var(--r-card);
      transition: border-color var(--t), box-shadow var(--t), transform var(--t);
    }
    .card:hover {
      border-color: var(--c-gray-400);
      box-shadow: var(--shadow-floating);
    }
    .card-dark {
      background: #1A1F2E;
      border: 1px solid var(--c-charcoal);
      border-radius: var(--r-card);
      transition: border-color var(--t), box-shadow var(--t);
    }
    .card-dark:hover {
      border-color: var(--c-gray-600);
      box-shadow: rgba(0,0,0,0.3) 0px 4px 8px;
    }
    .card-pad { padding: var(--sp-24); }
    .card-pad-lg { padding: var(--sp-32); }

    /* ============================================================
       FORMS — Design System
       ============================================================ */
    .form-label {
      display: block;
      font-size: var(--text-body-xs);
      font-weight: 600;
      color: var(--c-charcoal);
      margin-bottom: var(--sp-8);
    }
    .form-input, .form-select {
      width: 100%;
      height: 52px;
      padding: 13px 16px;
      font-family: var(--font-primary);
      font-size: 17px;
      font-weight: 400;
      line-height: 1;
      color: var(--c-navy);
      background: var(--c-white);
      border: 1px solid var(--c-gray-600);
      border-radius: var(--r-input);
      outline: none;
      transition: border-color var(--t), box-shadow var(--t);
      appearance: none;
    }
    .form-input::placeholder { color: var(--c-gray-500); }
    .form-input:focus, .form-select:focus {
      border-color: var(--c-blue);
      box-shadow: var(--c-blue) 0px 0px 0px 2px inset;
    }
    .form-input:disabled {
      background: var(--c-gray-50);
      color: var(--c-gray-300);
      border-color: var(--c-gray-200);
    }
    .form-group { margin-bottom: var(--sp-16); }

    /* ============================================================
       HEADER — Sticky Navigation
       ============================================================ */
    #site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--c-white);
      border-bottom: 1px solid var(--c-gray-200);
      box-shadow: var(--shadow-sticky);
    }
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      gap: var(--sp-24);
    }
    /* Logo */
    .logo { display: flex; align-items: center; gap: var(--sp-12); flex-shrink: 0; }
    .logo-mark {
      width: 40px; height: 40px;
      background: var(--c-blue);
      border-radius: var(--r-btn);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .logo-mark svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2.5; }
    .logo-text { display: flex; flex-direction: column; }
    .logo-name { font-size: 17px; font-weight: 600; color: var(--c-navy); line-height: 1.1; }
    .logo-sub  { font-size:16px; color: var(--c-slate); line-height: 1.2; }

    /* Nav */
    .site-nav { display: flex; align-items: center; gap: 0; flex: 1; justify-content: center; }
    .site-nav a {
      font-size:16px;
      font-weight: 500;
      color: var(--c-navy);
      padding: var(--sp-8) 12px;
      border-radius: var(--r-btn);
      transition: color var(--t), background var(--t);
      white-space: nowrap;
    }
    .site-nav a:hover { color: var(--c-blue); background: var(--c-gray-50); }
    .site-nav a.active { font-weight: 600; color: var(--c-blue); }

    /* Header actions */
    .header-actions { display: flex; align-items: center; gap: var(--sp-16); flex-shrink: 0; }
    .header-phone {
      font-size:18px;
      font-weight: 600;
      color: var(--c-navy);
      white-space: nowrap;
    }
    .header-phone:hover { color: var(--c-blue); }

    /* Burger */
    .burger {
      display: none; flex-direction: column; gap: 5px;
      padding: var(--sp-8); border-radius: var(--r-btn);
      transition: background var(--t);
    }
    .burger:hover { background: var(--c-gray-50); }
    .burger span { display: block; width: 22px; height: 2px; background: var(--c-navy); border-radius: 2px; transition: var(--t); }

    /* ============================================================
       MOBILE MENU
       ============================================================ */
    .mob-menu {
      display: none;
      position: fixed; inset: 0; z-index: 999;
      background: rgba(13,15,18,0.5);
    }
    .mob-menu.open { display: block; }
    .mob-panel {
      position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 85vw);
      background: var(--c-white);
      padding: var(--sp-24);
      display: flex; flex-direction: column; gap: var(--sp-12);
      box-shadow: var(--shadow-dialog);
      overflow-y: auto;
    }
    .mob-panel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-8); }
    .mob-close { width: 36px; height: 36px; border-radius: var(--r-btn); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--c-slate); transition: background var(--t); }
    .mob-close:hover { background: var(--c-gray-50); color: var(--c-navy); }
    .mob-nav { display: flex; flex-direction: column; gap: var(--sp-4); }
    .mob-nav a { display: block; padding: 12px var(--sp-16); font-size: var(--text-body-sm); font-weight: 500; color: var(--c-navy); border-radius: var(--r-btn); transition: background var(--t), color var(--t); }
    .mob-nav a:hover { background: var(--c-gray-50); color: var(--c-blue); }
    .mob-divider { height: 1px; background: var(--c-gray-200); margin: var(--sp-8) 0; }