:root {
      --twi-primary: #2563eb;      /* soft blue */
      --twi-primary-soft: #eff6ff;
      --twi-accent: #0ea5e9;       /* cyan accent */
      --twi-bg: #f9fafb;           /* page background */
      --twi-surface: #ffffff;      /* card background */
      --twi-border: #e5e7eb;
      --twi-text-main: #111827;
      --twi-text-muted: #6b7280;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background-color: var(--twi-bg);
      color: var(--twi-text-main);
    }

    .navbar {
      background-color: #ffffff;
      border-bottom: 1px solid var(--twi-border);
    }

    .twi-logo {
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: .85rem;
      color: #111827;
    }

    .twi-logo span {
      color: var(--twi-primary);
    }

    .hero {
      background: radial-gradient(circle at top left, #e0f2fe, #eff6ff 40%, #f9fafb 100%);
      border-bottom: 1px solid var(--twi-border);
    }

    .twi-pill {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: 0.25rem 0.8rem;
      border-radius: 999px;
      background: rgba(191,219,254,0.65);
      color: #1d4ed8;
      font-size: .75rem;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .twi-section-title {
      font-weight: 600;
      letter-spacing: .09em;
      text-transform: uppercase;
      font-size: .78rem;
      color: #9ca3af;
      margin-bottom: .25rem;
    }

    .twi-section-heading {
      font-weight: 600;
      color: #111827;
    }

    .twi-subtle {
      color: var(--twi-text-muted);
    }

    .btn-twi-primary {
      background: linear-gradient(135deg, var(--twi-primary), #1d4ed8);
      border: none;
      color: #f9fafb;
      border-radius: 999px;
      padding-inline: 1.5rem;
      box-shadow: 0 12px 30px rgba(37,99,235,0.35);
    }

    .btn-twi-primary:hover {
      background: linear-gradient(135deg, #1d4ed8, #1e40af);
      color: #f9fafb;
    }

    .btn-twi-ghost {
      border-radius: 999px;
      border: 1px solid var(--twi-border);
      color: #111827;
      background: #ffffff;
    }

    .btn-twi-ghost:hover {
      background: #eff6ff;
      border-color: #bfdbfe;
      color: #1f2937;
    }

    .twi-card {
      background: var(--twi-surface);
      border-radius: 1rem;
      border: 1px solid var(--twi-border);
      box-shadow: 0 10px 25px rgba(15,23,42,0.03);
      transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }

    .twi-card:hover {
      transform: translateY(-2px);
      border-color: #bfdbfe;
      box-shadow: 0 16px 36px rgba(15,23,42,0.08);
    }

    .twi-badge-soft {
      background-color: #e0f2fe;
      color: #1d4ed8;
      border-radius: 999px;
      font-size: .7rem;
      padding: 0.25rem 0.6rem;
    }

    .newsletter-pill {
      border-radius: 999px;
      padding: 0.15rem 0.65rem;
      font-size: .7rem;
      border: 1px solid #d1d5db;
      color: var(--twi-text-muted);
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      background-color: #ffffff;
    }

    .newsletter-pill .dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #22c55e;
    }

    .twi-chip {
      border-radius: 999px;
      border: 1px solid #d1d5db;
      padding: 0.25rem 0.9rem;
      font-size: .8rem;
      color: #4b5563;
      background: #ffffff;
      cursor: pointer;
      white-space: nowrap;
    }

    .twi-chip.active {
      border-color: var(--twi-primary);
      background: var(--twi-primary-soft);
      color: #1d4ed8;
    }

    .twi-feature-icon {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #eff6ff;
      color: var(--twi-primary);
      margin-bottom: .5rem;
    }

    .twi-subscribe-card {
      background: linear-gradient(135deg, #eff6ff, #e0f2fe);
      border-radius: 1.25rem;
      border: 1px solid #bfdbfe;
      box-shadow: 0 18px 40px rgba(148,163,184,0.35);
    }

    footer {
      background-color: #f3f4f6;
      border-top: 1px solid var(--twi-border);
    }

    footer a {
      color: #6b7280;
      text-decoration: none;
    }

    footer a:hover {
      color: #111827;
      text-decoration: underline;
    }

    .input-group-text {
      background-color: #f9fafb;
      border-color: #d1d5db;
    }

    .form-control {
      border-color: #d1d5db;
    }

    .form-control:focus {
      border-color: var(--twi-primary);
      box-shadow: 0 0 0 .12rem rgba(37,99,235,0.2);
    }

    .badge-rounded {
      border-radius: 999px;
      padding: 0.25rem 0.65rem;
      font-size: .7rem;
    }

    @media (min-width: 768px) {
      .hero-padding {
        padding-top: 4rem;
        padding-bottom: 4.5rem;
      }
    }

    @media (max-width: 767.98px) {
      .hero-padding {
        padding-top: 2.5rem;
        padding-bottom: 3rem;
      }
    }