/* =========================================================
       1. DESIGN TOKENS
       EDIT THESE VARIABLES TO REBRAND THE ENTIRE WEBSITE
    ========================================================== */

    :root {
      --bg: #f8fafc;
      --surface: rgba(255, 255, 255, 0.70);
      --surface-solid: #ffffff;

      --primary: #4F46E5;
      --primary-dark: #3730A3;

      --pink: #EC4899;

      --text: #111827;
      --text-muted: #64748b;
      --text-light: #94a3b8;

      --border: rgba(255, 255, 255, 0.95);
      --border-soft: rgba(148, 163, 184, 0.16);

      --shadow-soft:
        0 20px 60px rgba(15, 23, 42, 0.07);

      --shadow-hover:
        0 24px 70px rgba(79, 70, 229, 0.18);

      --radius-lg: 28px;
      --radius-md: 20px;
      --radius-sm: 14px;

      --container-width: 1180px;
    }


    /* =========================================================
       2. GLOBAL STYLES
    ========================================================== */

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background:
        radial-gradient(
          circle at 10% 5%,
          rgba(99, 102, 241, 0.08),
          transparent 28%
        ),
        radial-gradient(
          circle at 90% 15%,
          rgba(236, 72, 153, 0.06),
          transparent 25%
        ),
        var(--bg);

      color: var(--text);
      font-family: "Inter", sans-serif;
      font-size: 16px;
      line-height: 1.7;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .navbar-brand {
      font-family: "Plus Jakarta Sans", sans-serif;
      font-weight: 800;
      letter-spacing: -0.04em;
    }

    a {
      text-decoration: none;
    }

    .container-premium {
      width: min(
        calc(100% - 32px),
        var(--container-width)
      );
      margin-inline: auto;
    }


    /* =========================================================
       3. GLASS MATERIAL
    ========================================================== */

    .glass {
      background: var(--surface);
      border: 1px solid var(--border);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: var(--shadow-soft);
    }


    /* =========================================================
       4. NAVIGATION
    ========================================================== */

    .navbar-wrapper {
      position: sticky;
      top: 16px;
      z-index: 1000;
      padding-top: 16px;
    }

    .premium-navbar {
      width: min(
        calc(100% - 32px),
        var(--container-width)
      );

      margin: 0 auto;
      padding: 12px 14px 12px 20px;

      border-radius: 18px;

      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.95);

      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);

      box-shadow:
        0 12px 40px rgba(15, 23, 42, 0.07);
    }

    .navbar-brand {
      color: var(--text);
      font-size: 1.15rem;
    }

    .brand-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      width: 34px;
      height: 34px;

      margin-right: 8px;

      border-radius: 10px;

      color: white;

      background:
        linear-gradient(
          135deg,
          var(--primary),
          var(--pink)
        );

      box-shadow:
        0 8px 20px rgba(79, 70, 229, 0.25);
    }

    .nav-link {
      color: #475569 !important;
      font-size: 0.9rem;
      font-weight: 600;
      padding-inline: 14px !important;
      transition: 0.25s ease;
    }

    .nav-link:hover {
      color: var(--primary) !important;
    }


    /* =========================================================
       5. BUTTONS
       EDIT BUTTON TEXT DIRECTLY IN HTML
    ========================================================== */

    .btn-premium {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      min-height: 50px;
      padding: 0 22px;

      border-radius: 14px;
      border: 1px solid transparent;

      font-size: 0.92rem;
      font-weight: 700;

      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
    }

    .btn-primary-premium {
      color: white;

      background:
        linear-gradient(
          135deg,
          #4F46E5,
          #6366F1
        );

      box-shadow:
        0 10px 28px rgba(79, 70, 229, 0.25);
    }

    .btn-primary-premium:hover {
      color: white;
      transform: translateY(-4px);

      box-shadow:
        0 18px 38px rgba(79, 70, 229, 0.32);
    }

    .btn-secondary-premium {
      color: var(--text);

      background: rgba(255,255,255,0.72);

      border-color:
        rgba(148,163,184,0.20);
    }

    .btn-secondary-premium:hover {
      color: var(--primary);

      transform: translateY(-4px);

      box-shadow:
        0 15px 35px rgba(15,23,42,0.10);
    }


    /* =========================================================
       6. HERO
    ========================================================== */

    .hero-section {
      padding: 100px 0 80px;
    }

    .hero-container {
      position: relative;

      overflow: hidden;

      padding:
        90px 60px
        70px;

      border-radius:
        var(--radius-lg);

      background:
        linear-gradient(
          135deg,
          rgba(255,255,255,0.78),
          rgba(255,255,255,0.52)
        );

      border:
        1px solid rgba(255,255,255,0.95);

      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);

      box-shadow:
        0 30px 90px rgba(15,23,42,0.08);
    }

    /* Decorative ambient light */

    .hero-container::before {
      content: "";

      position: absolute;

      width: 450px;
      height: 450px;

      top: -250px;
      right: -150px;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(99,102,241,0.17),
          transparent 70%
        );

      pointer-events: none;
    }

    .hero-container::after {
      content: "";

      position: absolute;

      width: 350px;
      height: 350px;

      bottom: -220px;
      left: -120px;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(236,72,153,0.10),
          transparent 70%
        );

      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;

      max-width: 850px;

      margin: 0 auto;

      text-align: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;

      margin-bottom: 24px;
      padding: 8px 13px;

      border-radius: 100px;

      background:
        rgba(79,70,229,0.07);

      color: var(--primary);

      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .eyebrow-dot {
      width: 7px;
      height: 7px;

      border-radius: 50%;

      background: #6366F1;

      box-shadow:
        0 0 0 5px rgba(99,102,241,0.10);
    }

    .hero-title {
      margin-bottom: 26px;

      font-size:
        clamp(3rem, 7vw, 5.7rem);

      line-height: 1.02;

      letter-spacing: -0.065em;
    }

    .gradient-text {
      background:
        linear-gradient(
          100deg,
          #4F46E5 10%,
          #7C3AED 48%,
          #EC4899 90%
        );

      -webkit-background-clip: text;
      background-clip: text;

      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    .hero-subtitle {
      max-width: 650px;

      margin:
        0 auto 34px;

      color: var(--text-muted);

      font-size: 1.05rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;

      justify-content: center;

      gap: 12px;

      margin-bottom: 60px;
    }


    /* =========================================================
       7. DASHBOARD MOCKUP
       Replace this mockup with your real product screenshot
       if required.
    ========================================================== */

    .dashboard-wrapper {
      position: relative;
      z-index: 3;

      max-width: 1000px;

      margin:
        0 auto
        -145px;
    }

    .dashboard-window {
      overflow: hidden;

      border-radius: 22px;

      background: #ffffff;

      border:
        1px solid rgba(255,255,255,0.95);

      box-shadow:
        0 35px 90px rgba(15,23,42,0.16);
    }

    .window-bar {
      display: flex;
      align-items: center;

      height: 48px;

      padding: 0 16px;

      background: #f8fafc;

      border-bottom:
        1px solid #eef2f7;
    }

    .window-dots {
      display: flex;
      gap: 6px;
    }

    .window-dot {
      width: 8px;
      height: 8px;

      border-radius: 50%;

      background: #cbd5e1;
    }

    .dashboard-body {
      display: grid;

      grid-template-columns:
        190px 1fr;

      min-height: 450px;
    }

    .dashboard-sidebar {
      padding: 22px 14px;

      background:
        linear-gradient(
          180deg,
          #f8fafc,
          #f1f5f9
        );

      border-right:
        1px solid #eef2f7;
    }

    .sidebar-logo {
      height: 28px;
      width: 100px;

      margin:
        0 10px
        25px;

      border-radius: 7px;

      background:
        #e2e8f0;
    }

    .sidebar-item {
      height: 38px;

      margin-bottom: 7px;
      padding: 0 11px;

      border-radius: 9px;

      display: flex;
      align-items: center;
      gap: 9px;

      color: #94a3b8;

      font-size: 0.72rem;
      font-weight: 600;
    }

    .sidebar-item.active {
      color: var(--primary);

      background:
        rgba(79,70,229,0.08);
    }

    .dashboard-main {
      padding: 26px;

      background: #ffffff;
    }

    .fake-title {
      width: 180px;
      height: 22px;

      margin-bottom: 8px;

      border-radius: 6px;

      background: #e2e8f0;
    }

    .fake-subtitle {
      width: 270px;
      height: 10px;

      margin-bottom: 25px;

      border-radius: 5px;

      background: #f1f5f9;
    }

    .stat-grid {
      display: grid;

      grid-template-columns:
        repeat(3, 1fr);

      gap: 14px;

      margin-bottom: 18px;
    }

    .fake-card {
      min-height: 105px;

      padding: 16px;

      border-radius: 14px;

      background:
        #f8fafc;

      border:
        1px solid #eef2f7;
    }

    .fake-line {
      width: 65px;
      height: 8px;

      margin-bottom: 14px;

      border-radius: 5px;

      background: #e2e8f0;
    }

    .fake-number {
      width: 80px;
      height: 22px;

      border-radius: 5px;

      background: #cbd5e1;
    }

    .chart-card {
      min-height: 220px;

      padding: 20px;

      border-radius: 16px;

      background:
        linear-gradient(
          145deg,
          #f8fafc,
          #ffffff
        );

      border:
        1px solid #eef2f7;
    }

    .chart-placeholder {
      height: 145px;

      margin-top: 20px;

      border-radius: 10px;

      background:
        linear-gradient(
          180deg,
          rgba(79,70,229,0.06),
          rgba(79,70,229,0.015)
        );

      position: relative;
      overflow: hidden;
    }

    .chart-placeholder::after {
      content: "";

      position: absolute;

      left: 5%;
      right: 5%;
      bottom: 35px;

      height: 70px;

      border-top:
        3px solid #6366F1;

      transform:
        skewY(-5deg);

      opacity: 0.65;
    }


    /* =========================================================
       8. SOCIAL PROOF
    ========================================================== */

    .logo-strip {
      padding:
        100px 0
        65px;
    }

    .logo-label {
      margin-bottom: 24px;

      color: var(--text-light);

      text-align: center;

      font-size: 0.75rem;
      font-weight: 700;

      text-transform: uppercase;

      letter-spacing: 0.13em;
    }

    .logos {
      display: grid;

      grid-template-columns:
        repeat(5, 1fr);

      gap: 20px;

      align-items: center;
    }

    .logo-placeholder {
      text-align: center;

      color: #64748b;

      opacity: 0.38;

      font-family:
        "Plus Jakarta Sans",
        sans-serif;

      font-size: 1.1rem;
      font-weight: 800;

      letter-spacing: -0.04em;

      filter: grayscale(1);
    }


    /* =========================================================
       9. SECTION HEADINGS
    ========================================================== */

    .section {
      padding: 90px 0;
    }

    .section-heading {
      max-width: 650px;

      margin-bottom: 45px;
    }

    .section-kicker {
      margin-bottom: 12px;

      color: var(--primary);

      font-size: 0.76rem;
      font-weight: 800;

      letter-spacing: 0.12em;

      text-transform: uppercase;
    }

    .section-title {
      margin-bottom: 14px;

      font-size:
        clamp(2.2rem, 5vw, 3.6rem);

      line-height: 1.08;
    }

    .section-description {
      color: var(--text-muted);
    }


    /* =========================================================
       10. BENTO FEATURES
    ========================================================== */

    .bento-grid {
      display: grid;

      grid-template-columns:
        1.15fr 0.85fr;

      grid-template-rows:
        270px 270px;

      gap: 18px;
    }

    .feature-card {
      position: relative;

      overflow: hidden;

      padding: 30px;

      border-radius:
        var(--radius-md);

      background:
        rgba(255,255,255,0.72);

      border:
        1px solid rgba(255,255,255,0.95);

      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      box-shadow:
        var(--shadow-soft);

      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    }

    .feature-card:hover {
      transform:
        translateY(-4px);

      box-shadow:
        var(--shadow-hover);
    }

    .feature-card:nth-child(1) {
      grid-row: span 2;
    }

    .feature-card:nth-child(2) {
      background:
        linear-gradient(
          145deg,
          rgba(79,70,229,0.10),
          rgba(255,255,255,0.75)
        );
    }

    .feature-icon {
      display: inline-flex;

      align-items: center;
      justify-content: center;

      width: 48px;
      height: 48px;

      margin-bottom: 22px;

      border-radius: 14px;

      color: var(--primary);

      background:
        rgba(79,70,229,0.08);

      font-size: 1.25rem;
    }

    .feature-title {
      margin-bottom: 10px;

      font-size: 1.25rem;
    }

    .feature-text {
      max-width: 470px;

      color: var(--text-muted);

      font-size: 1rem;
    }

    .feature-visual {
      position: absolute;

      right: 30px;
      bottom: 25px;

      width: 55%;
      height: 105px;

      border-radius: 14px;

      background:
        rgba(248,250,252,0.9);

      border:
        1px solid #eef2f7;

      box-shadow:
        0 12px 30px rgba(15,23,42,0.05);
    }

    .feature-card:nth-child(1)
      .feature-visual {
      width: 75%;
      height: 150px;
    }

    .mini-bars {
      display: flex;

      align-items: end;

      gap: 8px;

      height: 100%;

      padding: 20px;
    }

    .mini-bar {
      flex: 1;

      border-radius:
        6px 6px 2px 2px;

      background:
        linear-gradient(
          180deg,
          #818cf8,
          #c7d2fe
        );
    }

    .mini-bar:nth-child(1) {
      height: 35%;
    }

    .mini-bar:nth-child(2) {
      height: 55%;
    }

    .mini-bar:nth-child(3) {
      height: 45%;
    }

    .mini-bar:nth-child(4) {
      height: 75%;
    }

    .mini-bar:nth-child(5) {
      height: 90%;
    }


    /* =========================================================
       11. PRICING
    ========================================================== */

    .pricing-section {
      padding: 110px 0;
    }

    .pricing-grid {
      display: grid;

      grid-template-columns:
        repeat(3, 1fr);

      gap: 18px;

      align-items: center;
    }

    .pricing-card {
      position: relative;

      padding: 34px 30px;

      border-radius:
        var(--radius-md);

      background:
        rgba(255,255,255,0.72);

      border:
        1px solid rgba(255,255,255,0.95);

      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      box-shadow:
        var(--shadow-soft);

      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    }

    .pricing-card:hover {
      transform:
        translateY(-4px);

      box-shadow:
        var(--shadow-hover);
    }

    .pricing-card.popular {
      transform:
        scale(1.035);

      border:
        1px solid rgba(99,102,241,0.45);

      box-shadow:
        0 25px 75px rgba(79,70,229,0.17);
    }

    .pricing-card.popular:hover {
      transform:
        scale(1.035)
        translateY(-4px);
    }

    .popular-badge {
      position: absolute;

      top: -13px;
      left: 50%;

      transform:
        translateX(-50%);

      padding:
        5px 13px;

      border-radius: 100px;

      color: white;

      background:
        linear-gradient(
          100deg,
          var(--primary),
          var(--pink)
        );

      font-size: 0.68rem;
      font-weight: 800;

      white-space: nowrap;

      box-shadow:
        0 8px 20px rgba(79,70,229,0.25);
    }

    .plan-name {
      margin-bottom: 10px;

      font-size: 1.15rem;
    }

    .plan-description {
      min-height: 50px;

      color: var(--text-muted);

      font-size: 0.84rem;
    }

    .price {
      margin:
        25px 0;

      font-family:
        "Plus Jakarta Sans",
        sans-serif;

      font-size: 3rem;
      font-weight: 800;

      letter-spacing: -0.06em;
    }

    .price small {
      color: var(--text-muted);

      font-family: "Inter", sans-serif;

      font-size: 0.8rem;

      font-weight: 500;

      letter-spacing: normal;
    }

    .feature-list {
      margin:
        25px 0
        30px;

      padding: 0;

      list-style: none;
    }

    .feature-list li {
      display: flex;

      gap: 10px;

      margin-bottom: 12px;

      color: #475569;

      font-size: 0.87rem;
    }

    .feature-list i {
      color: var(--primary);
      font-size: 1rem;
    }

    .pricing-card .btn-premium {
      width: 100%;
    }


    /* =========================================================
       12. FINAL CTA
    ========================================================== */

    .final-cta {
      padding: 90px 0;
    }

    .cta-box {
      position: relative;

      overflow: hidden;

      padding:
        75px 35px;

      border-radius:
        var(--radius-lg);

      text-align: center;

      background:
        linear-gradient(
          135deg,
          #111827,
          #1e1b4b
        );

      color: white;

      box-shadow:
        0 30px 80px rgba(15,23,42,0.16);
    }

    .cta-box::before {
      content: "";

      position: absolute;

      width: 450px;
      height: 450px;

      top: -250px;
      left: 20%;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(99,102,241,0.35),
          transparent 70%
        );
    }

    .cta-content {
      position: relative;
      z-index: 2;
    }

    .cta-title {
      margin-bottom: 15px;

      font-size:
        clamp(2.2rem, 5vw, 3.8rem);
    }

    .cta-description {
      max-width: 550px;

      margin:
        0 auto 28px;

      color: #cbd5e1;
    }


    /* =========================================================
       13. FOOTER
    ========================================================== */

    footer {
      padding: 65px 0 35px;
    }

    .footer-grid {
      display: grid;

      grid-template-columns:
        2fr repeat(3, 1fr);

      gap: 40px;

      padding-bottom: 45px;

      border-bottom:
        1px solid var(--border-soft);
    }

    .footer-brand-text {
      max-width: 300px;

      margin-top: 15px;

      color: var(--text-muted);

      font-size: 0.9rem;
    }

    .footer-heading {
      margin-bottom: 18px;

      font-family: "Inter", sans-serif;

      font-size: 1rem;
      font-weight: 700;
    }

    .footer-links {
      display: flex;

      flex-direction: column;

      gap: 10px;
    }

    .footer-links a {
      color: var(--text-muted);

      font-size: 0.9rem;

      transition: 0.2s ease;
    }

    .footer-links a:hover {
      color: var(--primary);
    }

    .footer-bottom {
      display: flex;

      justify-content: space-between;
      align-items: center;

      gap: 20px;

      padding-top: 25px;

      color: var(--text-light);

      font-size: 0.75rem;
    }

    .footer-social {
      display: flex;

      gap: 12px;
    }

    .footer-social a {
      display: flex;

      align-items: center;
      justify-content: center;

      width: 32px;
      height: 32px;

      border-radius: 9px;

      color: var(--text-muted);

      background:
        rgba(255,255,255,0.65);

      border:
        1px solid var(--border-soft);

      transition: 0.2s ease;
    }

    .footer-social a:hover {
      color: var(--primary);

      transform:
        translateY(-2px);
    }


    /* =========================================================
       14. RESPONSIVE DESIGN
    ========================================================== */

    @media (max-width: 991px) {

      .hero-container {
        padding:
          70px 30px
          50px;
      }

      .dashboard-body {
        grid-template-columns: 150px 1fr;
      }

      .bento-grid {
        grid-template-columns: 1fr 1fr;

        grid-template-rows:
          300px 300px;
      }

      .feature-card:nth-child(1) {
        grid-row: auto;
      }

      .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin-inline: auto;
      }

      .pricing-card.popular {
        transform: none;
        order: -1;
      }

      .pricing-card.popular:hover {
        transform: translateY(-4px);
      }

      .footer-grid {
        grid-template-columns:
          repeat(2, 1fr);
      }

      .footer-grid > :first-child {
        grid-column: span 2;
      }
    }


    @media (max-width: 767px) {

      .navbar-wrapper {
        top: 8px;
        padding-top: 8px;
      }

      .premium-navbar {
        width:
          calc(100% - 20px);

        padding:
          10px 14px;
      }

      .hero-section {
        padding:
          55px 0
          40px;
      }

      .hero-container {
        padding:
          55px 20px
          35px;

        border-radius: 22px;
      }

      .hero-title {
        font-size:
          clamp(2.65rem, 13vw, 4rem);
      }

      .hero-subtitle {
        font-size: 0.95rem;
      }

      .hero-actions {
        flex-direction: column;

        width: 100%;
      }

      .hero-actions .btn-premium {
        width: 100%;
      }

      .dashboard-wrapper {
        margin-bottom: -70px;
      }

      .dashboard-body {
        grid-template-columns: 1fr;
      }

      .dashboard-sidebar {
        display: none;
      }

      .dashboard-main {
        padding: 15px;
      }

      .stat-grid {
        grid-template-columns: 1fr;
      }

      .chart-card {
        min-height: 180px;
      }

      .logos {
        grid-template-columns:
          repeat(2, 1fr);

        gap: 25px;
      }

      .logo-strip {
        padding-top: 115px;
      }

      .section {
        padding: 65px 0;
      }

      .bento-grid {
        display: flex;

        flex-direction: column;
      }

      .feature-card {
        min-height: 270px;
      }

      .feature-card:nth-child(1)
        .feature-visual {
        width: 75%;
      }

      .footer-grid {
        grid-template-columns:
          1fr 1fr;

        gap: 30px;
      }

      .footer-grid > :first-child {
        grid-column: span 2;
      }

      .footer-bottom {
        flex-direction: column;

        align-items: flex-start;
      }
    }


    @media (max-width: 480px) {

      .container-premium {
        width:
          calc(100% - 20px);
      }

      .hero-container {
        padding:
          45px 15px
          25px;
      }

      .eyebrow {
        font-size: 0.7rem;
      }

      .dashboard-window {
        border-radius: 15px;
      }

      .dashboard-main {
        padding: 12px;
      }

      .bento-grid {
        gap: 12px;
      }

      .feature-card {
        padding: 24px;
      }

      .pricing-card {
        padding: 28px 22px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .footer-grid > :first-child {
        grid-column: auto;
      }
    }

/* =========================================================
   NOVAFLOW FINAL PREMIUM DARK-NAVY THEME
   ========================================================= */

:root {
  --bg: #090d18;
  --surface: rgba(19, 27, 45, 0.76);
  --surface-solid: #111827;
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --pink: #a855f7;
  --text: #f8fafc;
  --text-muted: #9aa8bd;
  --text-light: #71809a;
  --border: rgba(255,255,255,0.09);
  --border-soft: rgba(255,255,255,0.07);
  --shadow-soft: 0 24px 70px rgba(0,0,0,0.24);
  --shadow-hover: 0 28px 80px rgba(99,102,241,0.16);
}

html { background: #090d18 !important; }

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(99,102,241,0.14), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(168,85,247,0.10), transparent 28%),
    #090d18 !important;
  color: var(--text) !important;
}

/* Navigation */
.premium-navbar {
  background: rgba(10,14,26,0.82) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 14px 45px rgba(0,0,0,0.24) !important;
}
.navbar-brand { color: #fff !important; }
.nav-link { color: #9aa8bd !important; }
.nav-link:hover { color: #fff !important; }
.navbar-toggler { color: #e2e8f0 !important; }

/* Buttons */
.btn-primary-premium {
  background: linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  color: #fff !important;
  box-shadow: 0 12px 32px rgba(99,102,241,0.28) !important;
}
.btn-primary-premium:hover {
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(99,102,241,0.38) !important;
}
.btn-secondary-premium {
  background: rgba(255,255,255,0.045) !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,0.11) !important;
}
.btn-secondary-premium:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-color: rgba(129,140,248,0.32) !important;
}

/* Hero */
.hero-section { background: transparent !important; }
.hero-container {
  background:
    radial-gradient(circle at 78% 12%, rgba(99,102,241,0.18), transparent 34%),
    linear-gradient(135deg, rgba(18,26,45,0.97), rgba(15,23,42,0.84)) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 35px 100px rgba(0,0,0,0.34) !important;
}
.hero-title { color: #fff !important; }
.hero-subtitle { color: #9aa8bd !important; }
.eyebrow {
  background: rgba(99,102,241,0.12) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(129,140,248,0.18);
}
.gradient-text {
  background: linear-gradient(100deg,#818cf8,#a855f7,#c084fc) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Dashboard */
.dashboard-window {
  background: #0b1020 !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.52) !important;
}
.window-bar {
  background: #111827 !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
.window-dot { background: #475569 !important; }
.dashboard-body { background: #0b1020 !important; }
.dashboard-sidebar {
  background: linear-gradient(180deg,#101827,#0b1120) !important;
  border-right-color: rgba(255,255,255,0.07) !important;
}
.sidebar-logo { background: rgba(255,255,255,0.10) !important; }
.sidebar-item { color: #64748b !important; }
.sidebar-item.active {
  color: #a5b4fc !important;
  background: rgba(99,102,241,0.14) !important;
}
.dashboard-main { background: #0b1020 !important; }
.fake-title { background: rgba(255,255,255,0.13) !important; }
.fake-subtitle { background: rgba(255,255,255,0.07) !important; }
.fake-line { background: rgba(255,255,255,0.11) !important; }
.fake-card {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.fake-number { background: linear-gradient(90deg,#818cf8,#a855f7) !important; }
.chart-card {
  background: linear-gradient(145deg,rgba(255,255,255,0.045),rgba(255,255,255,0.018)) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.chart-placeholder {
  background: linear-gradient(180deg,rgba(99,102,241,0.13),rgba(99,102,241,0.025)) !important;
}

/* Social proof */
.logo-strip {
  background: rgba(13,18,32,0.72) !important;
  border-top-color: rgba(255,255,255,0.045) !important;
  border-bottom-color: rgba(255,255,255,0.045) !important;
}
.logo-label { color: #71809a !important; }
.logo-placeholder { color: #94a3b8 !important; opacity: 0.48 !important; }

/* Sections */
.section { background: transparent !important; }
.section-title { color: #fff !important; }
.section-description { color: #9aa8bd !important; }
.section-kicker { color: #818cf8 !important; }

/* Feature cards */
.feature-card {
  background: linear-gradient(145deg,rgba(20,28,47,0.90),rgba(13,19,33,0.82)) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.20) !important;
}
.feature-card:nth-child(2) {
  background: linear-gradient(145deg,rgba(35,31,72,0.72),rgba(14,20,35,0.88)) !important;
}
.feature-card:hover {
  border-color: rgba(129,140,248,0.30) !important;
  box-shadow: 0 30px 75px rgba(0,0,0,0.30) !important;
}
.feature-icon {
  background: rgba(99,102,241,0.13) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(129,140,248,0.15);
}
.feature-title { color: #fff !important; }
.feature-text { color: #9aa8bd !important; }
.feature-visual {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.16) !important;
}

/* About */
.glass {
  background: linear-gradient(145deg,rgba(20,28,47,0.86),rgba(13,19,33,0.76)) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.glass > .row > .col-lg-6:last-child > div {
  background: linear-gradient(145deg,#1b2340,#17142f) !important;
}
.glass .bg-white {
  background: rgba(255,255,255,0.055) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.07);
}
.glass h4,.glass strong { color: #fff !important; }
.glass .text-secondary { color: #94a3b8 !important; }
.glass .progress { background: rgba(255,255,255,0.08) !important; }

/* Pricing */
.pricing-section {
  background: radial-gradient(circle at 50% 50%,rgba(99,102,241,0.06),transparent 42%) !important;
}
.pricing-grid.pricing-single {
  grid-template-columns: minmax(280px, 560px) !important;
  justify-content: center;
}
.pricing-card {
  background: linear-gradient(145deg,rgba(20,28,47,0.92),rgba(13,19,33,0.84)) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.25) !important;
}
.pricing-card.popular {
  transform: none !important;
  border-color: rgba(129,140,248,0.45) !important;
  box-shadow: 0 30px 80px rgba(99,102,241,0.12) !important;
}
.pricing-card.popular:hover { transform: translateY(-4px) !important; }
.plan-name,.price { color: #fff !important; }
.plan-description { color: #9aa8bd !important; }
.price small { color: #71809a !important; }
.feature-list li { color: #9aa8bd !important; }
.feature-list i { color: #818cf8 !important; }
.pricing-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  color: #818cf8;
  font-size: 0.82rem;
  font-weight: 700;
}

/* CTA */
.cta-box {
  background:
    radial-gradient(circle at 50% 0%,rgba(99,102,241,0.28),transparent 45%),
    linear-gradient(135deg,#111827,#211b4b) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.34) !important;
}
.cta-title { color: #fff !important; }
.cta-description { color: #cbd5e1 !important; }

/* Footer */
footer {
  background: #060914 !important;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-heading { color: #fff !important; }
.footer-brand-text,.footer-links a { color: #71809a !important; }
.footer-links a:hover { color: #a5b4fc !important; }
.footer-social a {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #71809a !important;
}
.footer-social a:hover { color: #a5b4fc !important; }
.footer-bottom { color: #64748b !important; }

/* Mobile */
@media (max-width: 991px) {
  .navbar-collapse {
    background: rgba(9,13,24,0.97) !important;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 18px;
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .pricing-grid.pricing-single {
    grid-template-columns: 1fr !important;
  }
}