/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


.primary-color{
	color: rgba(124,92,255,0.95);
}

:root{
      --bg: #0b1020;
      --card: rgba(255,255,255,0.06);
      --card2: rgba(255,255,255,0.08);
      --text: #e9edf8;
      --muted: rgba(233,237,248,0.72);
      --line: rgba(255,255,255,0.12);
      --accent: #7c5cff;
      --accent2:#22c55e;
      --shadow: 0 18px 50px rgba(0,0,0,0.35);
      --radius: 18px;
      --max: 1100px;
    }

    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color: #777;
      /* background:
        radial-gradient(900px 500px at 10% 10%, rgba(124,92,255,0.28), transparent 55%),
        radial-gradient(900px 500px at 90% 30%, rgba(34,197,94,0.18), transparent 55%),
        linear-gradient(180deg, #070a14, var(--bg) 35%, #070a14);
      min-height: 100vh; */
    }

    .wrap{
      max-width: var(--max);
      margin: 0 auto;
      padding: 56px 18px 70px;
    }

    .header{
      text-align:center;
      margin-bottom: 26px;
    }
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.04);
      color: var(--muted);
      font-size: 13px;
      letter-spacing: 0.2px;
    }
    .dot{
      width: 8px; height: 8px; border-radius: 99px;
      background: var(--accent2);
      box-shadow: 0 0 0 6px rgba(34,197,94,0.12);
    }
    h1{
      margin: 14px 0 8px;
      font-size: clamp(28px, 3.8vw, 44px);
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
    .sub{
      max-width: 720px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 15.5px;
      line-height: 1.6;
    }

    .grid{
      margin-top: 26px;
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      align-items: stretch;
    }

    .card{
      position: relative;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      overflow: hidden;
      display:flex;
      flex-direction: column;
      min-height: 100%;
    }

    .card::before{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(450px 200px at 20% 0%, rgba(124,92,255,0.35), transparent 55%);
      opacity: 0.45;
      pointer-events:none;
      transform: translateY(-8px);
    }

    .card > *{ position:relative; z-index:1; }

    .plan{
      display:flex;
      align-items:flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .name{
      font-weight: 700;
      letter-spacing: -0.01em;
      font-size: 16px;
    }

    .badge{
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--muted);
      background: rgba(255,255,255,0.04);
      white-space: nowrap;
    }

    .price{
      margin-top: 10px;
      display:flex;
      align-items: baseline;
      gap: 6px;
    }
    .currency{ 
      color: #212529; 
      font-weight: 600; 
      font-size: 34px;
    }
    
    .amount{
      font-size: 34px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .per{ color: var(--muted); font-size: 13px; }

    .desc{
      margin: 10px 0 14px;
      color: #777;
      line-height: 1.55;
      font-size: 14px;
      min-height: 44px;
    }

    .features{
      list-style: none;
      padding: 0;
      margin: 0 0 16px;
      display:flex;
      flex-direction: column;
      gap: 10px;
      border-top: 1px solid rgba(255,255,255,0.10);
      padding-top: 14px;
      flex: 1 1 auto;
    }
    .features li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color: #777;
      font-size: 13.5px;
      line-height: 1.45;
    }
    .tick{
      width: 18px;
      height: 18px;
      border-radius: 6px;
      display:inline-grid;
      place-items:center;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.05);
      color: var(--accent2);
      flex: 0 0 auto;
      margin-top: 1px;
      font-weight: 900;
      font-size: 12px;
    }

    .cta{
      display:flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 4px;
    }

    .btn{
      appearance: none;
      border: 1px solid rgb(121,90,247,1);
      background: rgba(255,255,255,1);
      color: rgb(121,90,247,1);
      padding: 11px 14px;
      border-radius: 12px;
      font-weight: 700;
      font-size: 14px;
      text-align:center;
      text-decoration:none;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      cursor:pointer;
      user-select:none;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.26); }
    .btn:active{ transform: translateY(0px); }

    .btn-primary{
      background: linear-gradient(135deg, rgba(124,92,255,0.95), rgba(124,92,255,0.75));
      border-color: rgba(124,92,255,0.35);
      box-shadow: 0 10px 26px rgba(124,92,255,0.25);
      color:#fff;
    }
    .btn-primary:hover{ background: linear-gradient(135deg, rgba(124,92,255,1), rgba(124,92,255,0.82)); }

    .fine{
      color: #777;
      font-size: 12px;
      line-height: 1.45;
      margin: 0;
    }

    /* Featured card (best value) */
    .featured{
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
      border-color: rgba(124,92,255,0.45);
      box-shadow: 0 18px 70px rgba(124,92,255,0.18);
      transform: translateY(-6px);
    }
    .featured::after{
      content:"Best Value";
      position:absolute;
      top: 14px;
      right: 14px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.02em;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(124,92,255,0.22);
      border: 1px solid rgba(124,92,255,0.35);
      color: rgba(233,237,248,0.95);
      z-index:2;
    }

    /* Enterprise card styling */
    .enterprise::before{
      background: radial-gradient(450px 200px at 20% 0%, rgba(34,197,94,0.28), transparent 55%);
    }

    .footer-note{
      margin-top: 22px;
      text-align:center;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }

    /* Responsive */
    @media (max-width: 980px){
      .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .featured{ transform: none; }
    }
    @media (max-width: 560px){
      .wrap{ padding-top: 42px; }
      .grid{ grid-template-columns: 1fr; }
      .card{ padding: 16px; }
      .amount{ font-size: 32px; }
    }