:root{
      --blue-dark:#081a2b;
      --blue:#0b2540;
      --gold:#d4af37;
      --gold-light:#f5e3a1;
      --text:#e8dcc0;
    }
    

    /* HERO */
    .digital_header{
      padding:70px 20px 30px;
      text-align:center;
      position:relative;
    }
    .digital_header::before{
      content:"";position:absolute;inset:0;
      background:radial-gradient(circle,rgba(212,175,55,.18),transparent 60%);
    }
    .digital_banner {
      padding-top: 120px;
      padding: 40px 16px;
    }
    .digital_btn{
      top: 18px;
      left: 18px;
      padding: 6px 14px;
      font-size: .7rem;
      letter-spacing: 1px;
      border-radius: 20px;
      background: rgba(212,175,55,.15);
      color: var(--gold-light);
      border: 1px solid rgba(212,175,55,.45);
      margin: 15px 7px;
    }
    .digi-grid-btn{
      top: 18px;
      left: 18px;
      padding: 6px 14px;
      font-size: .75rem;
      letter-spacing: 1px;
      border-radius: 20px;
      background: rgba(212,175,55,.15);
      color: var(--gold-light);
      border: 1px solid rgba(212,175,55,.45);
      margin: 13px 0px;
    }

    .dg-h3{
      margin-top: 0px;
    }
    .dg-card-block{
      padding: 0px 30px 0px;
    }

    .hero{position:relative;max-width:960px;margin:auto}
    .hero h1{font-size:3rem;margin-bottom:14px}
    .hero p{color:var(--text);font-size:1.1rem;max-width:760px;margin:0 auto 28px}

    .digital_case{
      text-align: center;
      max-width: 925px;
      margin: 0 auto 40px;
    }

    .digital_grid{
      max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
    }

    .digi_h3{
      margin-top: 20px;
    }

    .road-map-text{
      font-size: 1.4rem;
      margin-bottom: 0px;
      margin-top: 0px;
      color: var(--gold);
    }

    .dg-popular{
      box-shadow: 0 0 0 1px rgba(212,175,55,.6), 0 40px 90px rgba(212,175,55,.25);
    }

    .cta-main{
      display:inline-block;
      padding:16px 44px;
      border-radius:50px;
      background:linear-gradient(135deg,var(--gold),var(--gold-light));
      color:#081a2b;
      font-weight:600;
      text-decoration:none;
      box-shadow:0 14px 40px rgba(212,175,55,.5);
    }

    /* TRUST STRIP */
    .trust-strip{
      display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
      margin-top:22px;color:var(--text)
    }
    .trust-strip div{font-size:.95rem}



    .packages{
      max-width:1200px;margin:auto;
      display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px
    }
    .card{
      padding:32px 28px;
      border-radius:26px;
      border:1px solid rgba(212,175,55,.4);
      background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);
      backdrop-filter:blur(10px);
      transition:.35s ease;
    }
    .card:hover{transform:translateY(-10px);box-shadow:0 35px 80px rgba(0,0,0,.5)}

    .badge{
      display:inline-block;padding:6px 16px;border-radius:20px;
      font-size:.75rem;letter-spacing:1px;margin-bottom:14px;
      border:1px solid rgba(212,175,55,.5)
    }
    .price{font-size:1.7rem;margin:10px 0}
    .old-price{font-size:1.1rem;color:#c9b37a;text-decoration:line-through;display:block;margin-bottom:6px}
    .urgency{font-size:.8rem;color:#ffd700;letter-spacing:.5px;margin-top:6px}
    .price span{font-size:.9rem;color:var(--text)}

    ul{list-style:none;margin:14px 0}
    li{font-size:.95rem;color:var(--text);margin-bottom:6px}
    li i{color:var(--gold);margin-right:8px}

    .card a{
      display:block;text-align:center;margin-top:18px;
      padding:14px;border-radius:30px;
      background:linear-gradient(135deg,var(--gold),var(--gold-light));
      color:#081a2b;font-weight:600;text-decoration:none
    }

    /* FAQ */
    .faq{max-width:900px;margin:auto}
    details{
      border:1px solid rgba(212,175,55,.35);
      border-radius:18px;padding:18px 22px;margin-bottom:14px
    }
    summary{cursor:pointer;font-weight:600}
    details p{margin-top:10px;color:var(--text)}

    /* STICKY MOBILE CTA */
    .mobile-cta{
      display:none;position:fixed;bottom:0;left:0;right:0;
      background:rgba(8,26,43,.92);padding:14px;z-index:999
    }
    .mobile-cta a{
      display:block;text-align:center;
      padding:16px;border-radius:40px;
      background:linear-gradient(135deg,var(--gold),var(--gold-light));
      color:#081a2b;font-weight:600;text-decoration:none
    }

    @media(max-width:768px){
      .hero h1{font-size:2.2rem}
      .mobile-cta{display:block}
    }

    .dg-pckg-btn {padding:8px 18px;border-radius:20px;border:1px solid rgba(212,175,55,.5);background:transparent;color:var(--gold);cursor:pointer;margin:0 6px}
    .dg-pckg-btn.active {background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#081a2b}
    .dg_benefits {display: none;}

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

    .dev-case-header {max-width: 1400px;}


    .dev-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
    .dev-card{padding:32px 28px;border-radius:26px;border:1px solid rgba(212,175,55,.4);background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);backdrop-filter:blur(10px);transition:.35s ease}
    .dev-card:hover{transform:translateY(-8px);box-shadow:0 35px 80px rgba(0,0,0,.5)}
    .dev-title {
      position: relative;
  bottom: 35px;
    }

    .dev-card canvas {
  width: 100% !important;
  height: 100% !important;
  position: relative;
  bottom: 45px;
}

.dev-card {
  height: 220px;        /* fixed chart height */
}

    @media (max-width: 600px) {
  .dev-grid, .dg-plans-grid, .packages, .digital_grid {
    grid-template-columns: 1fr;
  }
}


    @media(max-width: 991px){
      .dg-card-block{
        padding: 0px 20px 0px;
      }
    }