:root{
      --cs-blue: #2f55d4;   /* from logo vibe */
      --cs-cyan: #44d7e6;   /* accent */
      --cs-green: #37c67a;  /* Store accent */
      --cs-ink: #0f172a;    /* dark text */
      --cs-muted: #64748b;  /* muted text */
      --cs-bg: #f6f8fc;     /* soft background */
      --cs-border: rgba(15, 23, 42, 0.10);
    }

    html { scroll-behavior: smooth; }
    body { color: var(--cs-ink); }
    .navbar { backdrop-filter: blur(10px); }
    .navbar-brand span.code { color: var(--cs-blue); }
    .navbar-brand span.store { color: var(--cs-green); }

    .btn-cs-primary{
      --bs-btn-bg: var(--cs-blue);
      --bs-btn-border-color: var(--cs-blue);
      --bs-btn-hover-bg: #2648b9;
      --bs-btn-hover-border-color: #2648b9;
      --bs-btn-color: #fff;
      --bs-btn-hover-color: #fff;
      border-radius: 0.9rem;
      padding: .75rem 1.15rem;
    }
    .btn-cs-outline{
      --bs-btn-color: var(--cs-blue);
      --bs-btn-border-color: rgba(47, 85, 212, 0.35);
      --bs-btn-hover-bg: rgba(47, 85, 212, 0.08);
      --bs-btn-hover-border-color: rgba(47, 85, 212, 0.55);
      border-radius: 0.9rem;
      padding: .75rem 1.15rem;
    }

    .hero{
      position: relative;
      overflow: hidden;
      background: radial-gradient(1200px 600px at 15% 20%, rgba(68, 215, 230, 0.35), transparent 60%),
                  radial-gradient(1000px 550px at 85% 35%, rgba(55, 198, 122, 0.20), transparent 62%),
                  linear-gradient(135deg, #0b1228, #0f1b3f 60%, #0b1228);
      color: #fff;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(600px 300px at 30% 10%, rgba(47,85,212,0.50), transparent 60%),
        radial-gradient(500px 280px at 70% 70%, rgba(68,215,230,0.35), transparent 62%);
      opacity:.65;
      pointer-events:none;
    }
    .hero .container{ position: relative; z-index: 1; }
    .hero-kicker{
      color: rgba(255,255,255,0.72);
      max-width: 58ch;
    }
    .hero-card{
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 1.25rem;
    }

    .section{
      padding: 5rem 0;
    }
    .section-muted{
      background: var(--cs-bg);
      border-top: 1px solid var(--cs-border);
      border-bottom: 1px solid var(--cs-border);
    }

    .cs-badge{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.45rem .75rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.80);
      font-size: .9rem;
    }
    .dot{
      width: .55rem;
      height: .55rem;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--cs-cyan), var(--cs-blue));
      box-shadow: 0 0 0 6px rgba(68,215,230,0.15);
    }

    .card{
      border: 1px solid var(--cs-border);
      border-radius: 1.25rem;
      box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
    }
    .service-icon{
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(68,215,230,0.18), rgba(47,85,212,0.18));
      border: 1px solid rgba(47,85,212,0.20);
      display:flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 auto;
    }
    .service-icon svg{ opacity: .9; }
    .muted{ color: var(--cs-muted); }

    .form-control, .form-select{
      border-radius: 0.9rem;
      border-color: var(--cs-border);
      padding: .75rem .9rem;
    }
    .form-control:focus{
      border-color: rgba(47,85,212,0.45);
      box-shadow: 0 0 0 .25rem rgba(47,85,212,0.12);
    }

    footer{
      border-top: 1px solid var(--cs-border);
      background: #fff;
    }
    footer a{ color: var(--cs-muted); text-decoration: none; }
    footer a:hover{ color: var(--cs-blue); text-decoration: underline; }

    .anchor-offset{ scroll-margin-top: 90px; }