:root {
        --bg: #0b0f10;
        --surface: #121417;
        --card: #14181b;
        --elev: #0e1215;
        --fg: #e7e7e7;
        --muted: #a9b0b5;
        --line: #23272f;
        --accent: #ffffff;
        --radius: 16px;
        --radius-pill: 999px;
      }

      html, body {
        background: var(--bg);
        color: var(--fg);
        font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
        scroll-behavior: smooth;
        min-height: 100vh;
      }

      .rounded-4 { border-radius: var(--radius) !important; }
      .rounded-pill { border-radius: var(--radius-pill) !important; }
      .border-soft { border: 1px solid var(--line) !important; }

      /* Subtle grid/dots patterns to replace images */
      .pattern-grid {
        background:
          radial-gradient(transparent 0 0),
          radial-gradient(transparent 0 0),
          repeating-linear-gradient(0deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 1px, transparent 1px, transparent 56px),
          repeating-linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 1px, transparent 1px, transparent 56px);
        background-blend-mode: normal, normal, overlay, overlay;
        background-size: 100% 100%, 100% 100%, 56px 56px, 56px 56px;
        position: relative;
        overflow: hidden;
      }
      .pattern-grid::after {
        content: "";
        position: absolute;
        inset: -25%;
        background:
          radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,0.06), transparent 60%),
          radial-gradient(40% 40% at 20% 10%, rgba(255,255,255,0.04), transparent 60%),
          radial-gradient(40% 40% at 80% 90%, rgba(255,255,255,0.04), transparent 60%);
        pointer-events: none;
      }

      .pattern-dots {
        background:
          radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 1px);
        background-size: 14px 14px;
      }

      .pattern-stripes {
        background-image:
          repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 10px);
      }

      .bg-surface { background: var(--surface); }
      .bg-card { background: var(--card); }

      .navbar {
        background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)) !important;
        backdrop-filter: saturate(140%) blur(10px);
        border-bottom: 1px solid var(--line);
      }

      .brand-text {
        font-weight: 800;
        letter-spacing: 0.5px;
      }
      .brand-badge {
        padding: 0.2rem 0.6rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-pill);
        font-size: 0.75rem;
        color: var(--muted);
      }

      .btn-ghost {
        background: transparent;
        color: var(--fg);
        border: 1px solid var(--line);
      }
      .btn-ghost:hover {
        background: #1a1f24;
        color: var(--fg);
      }
      .btn-contrast {
        background: var(--fg);
        color: #0b0f10;
        border: 1px solid transparent;
      }
      .btn-contrast:hover {
        background: #ffffff;
        color: #000000;
        box-shadow: 0 0 0 0.25rem rgba(255,255,255,0.12);
      }

      .muted { color: var(--muted) !important; }
      .section-title {
        font-weight: 800;
        letter-spacing: -0.02em;
      }
      .lead-tight {
        line-height: 1.5;
        color: var(--muted);
      }

      .badge-pill {
        border: 1px solid var(--line);
        color: var(--fg);
        background: rgba(255,255,255,0.02);
        padding: 0.4rem 0.8rem;
        border-radius: var(--radius-pill);
        font-size: 0.85rem;
      }

      /* Carousel height and slide layout (no images) */
      .hero-carousel .carousel-item {
        min-height: 64vh;
        display: grid;
        place-items: center;
        padding: 3rem 0;
      }
      .hero-card {
        background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 2rem;
      }

      /* Timeline */
      .timeline {
        position: relative;
        padding-left: 1rem;
      }
      .timeline::before {
        content: "";
        position: absolute;
        left: 14px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--line);
      }
      .timeline-item {
        position: relative;
        padding-left: 2.5rem;
        margin-bottom: 1.25rem;
      }
      .timeline-item::before {
        content: "";
        position: absolute;
        left: 6px;
        top: 4px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid var(--fg);
        background: var(--bg);
      }

      /* Pricing */
      .price {
        font-weight: 800;
        font-size: 2rem;
      }

      /* Footer */
      .footer {
        border-top: 1px solid var(--line);
        background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
      }

      /* Inputs */
      .form-control, .form-select, .input-group-text {
        border-radius: var(--radius);
        background: var(--elev);
        border: 1px solid var(--line);
        color: var(--fg);
      }
      .form-control:focus {
        box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.1);
        border-color: #3a3f47;
      }

      /* Cards */
      .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--radius);
      }

      /* Links */
      a.link-muted {
        color: var(--muted);
        text-decoration: none;
      }
      a.link-muted:hover {
        color: var(--fg);
        text-decoration: underline;
      }

      /* Utility */
      .max-w-2xl { max-width: 720px; }
      .max-w-3xl { max-width: 960px; }
      .max-w-4xl { max-width: 1120px; }
      .opacity-80 { opacity: 0.8; }

      img.dark-friendly {
        filter: invert(1);
        mix-blend-mode: lighten;
        transition: filter 0.3s ease, transform 0.3s ease;
      }

      img.dark-friendly:hover {
          filter: invert(1);
  transition: filter 0.3s ease;
      }


      .brand-badge {
        transition: opacity 0.3s ease-in-out;
        display: inline-block;
      }
      
      
      .btn-outline-light-dim {
          color: rgba(255,255,255,0.85);
          border-color: rgba(255,255,255,0.3);
        }
        .btn-outline-light-dim:hover {
          color: #fff;
          border-color: rgba(255,255,255,0.6);
          background-color: rgba(255,255,255,0.1);
        }