:root{
      --bg: #070b14;
      --card: #0f172a;
      --muted: #94a3b8;
      --text: #f1f5f9;
      --glow: #38bdf8;
      --glow-2: #818cf8;
      --accent: #22d3ee;
      --border: rgba(56,189,248,0.18);
    }
*{box-sizing:border-box}
    body{
      margin:0;
      font-family: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
      background: radial-gradient(1000px 500px at 90% -10%, #1e293b 0%, transparent 50%), var(--bg);
      color:var(--text);
      -webkit-text-size-adjust:100%;
    }
    a{color:inherit;text-decoration:none}

    header{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(14px);
      background: rgba(7,11,20,0.85);
      border-bottom: 1px solid var(--border);
    }
    .nav-wrap{
      max-width:1120px; margin:0 auto; 
      padding:14px 20px; 
      display:flex; align-items:center; justify-content:space-between; gap:16px;
    }
    .brand{
      font-weight:800; font-size:1.05rem; letter-spacing:0.3px;
      background: linear-gradient(90deg, var(--glow), var(--glow-2));
      -webkit-background-clip:text; background-clip:text; color:transparent;
      white-space:nowrap;
    }
    .brand-sub{font-size:0.75rem; color:var(--muted); font-weight:500; display:block; line-height:1}
    nav{display:none} 
    .cta-nav{
      background: linear-gradient(90deg, var(--glow), var(--glow-2));
      color:#070b14; padding:10px 16px; border-radius:10px; font-weight:700; font-size:0.85rem;
    }

    @media(min-width: 820px){
      nav{display:flex; gap:24px; align-items:center}
      nav a{font-size:0.92rem; color:var(--muted); font-weight:500}
      nav a:hover{color:var(--text)}
      .cta-nav{display:none}
      
      .dropdown{position:relative}
      .dropdown-btn{
        background:none; border:none; color:var(--muted); 
        font-size:0.92rem; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:6px; padding:0;
      }
      .dropdown:hover .dropdown-btn{color:var(--text)}
      .dropdown-menu{
        position:absolute; top:140%; left:0; 
        background:var(--card); border:1px solid var(--border);
        border-radius:12px; padding:8px; min-width:220px;
        opacity:0; pointer-events:none; transform:translateY(8px);
        transition: all .2s ease;
        box-shadow: 0 12px 32px rgba(0,0,0,0.5);
      }
      .dropdown:hover .dropdown-menu{opacity:1; pointer-events:auto; transform:translateY(0)}
      .dropdown-menu a{
        display:block; padding:10px 12px; border-radius:8px; font-size:0.9rem; color:var(--muted);
      }
      .dropdown-menu a:hover{background:rgba(56,189,248,0.1); color:var(--text)}
    }

    /* ===== Page Content ===== */
    .container{max-width:1080px; margin:0 auto; padding:32px 20px}
    .header-block{
      text-align:center; margin-bottom:32px; padding-bottom:20px;
      border-bottom:1px solid var(--border);
    }
    .title{
      margin:0 0 6px;
      font-size: clamp(1.7rem, 4.5vw, 2.4rem);
      font-weight:800;
      background: linear-gradient(90deg, var(--glow), var(--glow-2));
      -webkit-background-clip:text; background-clip:text; color:transparent;
      line-height:1.2;
    }
    .subtitle{color:var(--muted); margin:0; font-size:0.95rem}
    .client-tag{
      display:inline-block; margin-top:10px; padding:6px 12px; 
      border:1px solid var(--border); border-radius:999px; 
      font-size:0.8rem; color:var(--muted); background:rgba(56,189,248,0.08);
    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      border:1px solid var(--border);
      border-radius:18px; padding:22px; 
      box-shadow: 0 0 0 1px rgba(56,189,248,0.05), 0 16px 32px rgba(0,0,0,0.4);
      margin-bottom:20px;
    }
    .card h2{margin:0 0 6px; font-size:1.2rem; font-weight:700}
    .muted{color:var(--muted); font-size:0.9rem}
    .badge{
      display:inline-block; padding:4px 10px; border-radius:999px; 
      background:rgba(129,140,248,0.15); border:1px solid rgba(129,140,248,0.3);
      font-size:0.75rem; color:#c7d2fe; margin-left:8px; font-weight:600;
    }

    /* ===== TABLE FOR DESKTOP ===== */
    .table-wrap{display:none}
    @media(min-width: 820px){
      .table-wrap{display:block; overflow-x:auto}
      table{
        width:100%; border-collapse:collapse; margin-top:14px; font-size:0.95rem; min-width:640px;
      }
      th, td{
        text-align:left; padding:14px 12px; 
        border-bottom:1px solid rgba(255,255,255,0.06);
      }
      th{color:var(--muted); font-weight:600; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.5px}
      tr:last-child td{border-bottom:none}
      .price{font-weight:700; color:var(--accent); white-space:nowrap}
      .total{font-size:1.05rem; font-weight:800}
    }

    /* ===== MOBILE CARDS FOR PRICING ===== */
    .price-list{display:grid; gap:12px}
    @media(min-width: 820px){
      .price-list{display:none}
    }
    .price-item{
      background:rgba(255,255,255,0.02);
      border:1px solid rgba(255,255,255,0.06);
      border-radius:14px; padding:14px;
    }
    .price-item .row{display:flex; justify-content:space-between; gap:12px; margin-bottom:4px}
    .price-item .row:last-child{margin-bottom:0}
    .price-item .label{color:var(--muted); font-size:0.85rem}
    .price-item .val{font-weight:700; color:var(--accent); font-size:0.95rem; text-align:right}
    .price-item .title{font-weight:700; font-size:0.95rem; margin-bottom:6px}

    .grid-2{display:grid; grid-template-columns:1fr; gap:20px}
    @media(min-width:960px){.grid-2{grid-template-columns:1fr 1fr}}

    .summary{
      background: rgba(34,211,238,0.05);
      border:1px solid rgba(34,211,238,0.22);
    }
    .notes{
      margin-top:16px; padding:14px; border-radius:12px;
      background:rgba(255,255,255,0.02); border:1px dashed var(--border);
      font-size:0.85rem; color:var(--muted); line-height:1.6;
    }
    
    .cta{
      text-align:center; margin-top:32px; padding:28px 20px;
      border-radius:18px;
      background: radial-gradient(500px 250px at 50% -20%, rgba(56,189,248,0.18), transparent 60%), var(--card);
      border:1px solid var(--border);
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      width:100%; max-width:340px;
      padding:14px 24px; border-radius:12px; font-weight:800; font-size:0.95rem;
      background: linear-gradient(90deg, var(--glow), var(--glow-2));
      color:#070b14; transition: transform .15s ease, box-shadow .15s ease;
    }
    .btn:hover{transform: translateY(-2px); box-shadow:0 12px 28px rgba(56,189,248,0.35)}
    .btn svg{width:18px; height:18px; flex-shrink:0}

    footer{color:var(--muted); text-align:center; font-size:0.8rem; padding:28px 20px; line-height:1.6; border-top:1px solid var(--border); margin-top:20px}