/* tokens borrowed from your new page */
:root{
    --ink:#0f172a; --muted:#6b7280;
    --surface:#eef2ff1a;            /* soft bluish canvas */
    --card:#ffffff; --line:rgba(15,23,42,.10);
    --radius:22px; --radius-sm:16px;
    --shadow:0 12px 40px rgba(2,6,23,.10);
    --primary:#f97316;              /* orange CTA */
    --primary-700:#ea580c;
    --outline:#2563eb;              /* blue outline */
}

/* section wrapper to match soft hero canvas */
.grad-prep{ background:linear-gradient(180deg,#eef2ff 0%, #f7f9ff 100%); padding:40px 0 50px }
.grad-prep .wrap{ width:min(1200px,92vw); margin:auto }

/* header area */
.gp-head h2{ font-size:clamp(28px,4vw,48px); margin:0 0 8px; color:#0b1220; font-weight:900; letter-spacing:-.02em }
.gp-head p{ margin:0 0 18px; color:var(--muted); font-size:clamp(15px,1.6vw,18px) }

/* stats row (same vibe as your “50K+, 4.9/5, 500K+” chips) */
.gp-stats{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;
    margin:12px 0 8px;
}
.stat{
    display:flex; align-items:center; gap:12px;
    background:var(--card); border:1px solid var(--line);
    border-radius:16px; padding:14px 16px; box-shadow:var(--shadow);
}
.stat-k{ font-weight:800; font-size:20px; color:#0b1220 }
.stat-l{ color:var(--muted); font-size:14px }

/* action buttons (orange pill + blue outline) */
.gp-actions{ display:flex; gap:12px; align-items:center; margin:12px 0 20px; flex-wrap:wrap }
.btn{
    display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
    text-decoration:none; font-weight:700; transition:.25s; white-space:nowrap;
}
.btn-primary{ background:var(--primary); color:#fff; padding:12px 20px; box-shadow:0 12px 26px rgba(249,115,22,.3) }
.btn-primary:hover{ background:var(--primary-700); transform:translateY(-2px) }
.btn-outline{
    color:var(--outline); border:2px solid var(--outline); background:#fff;
    padding:10px 18px;
}
.btn-outline:hover{ background:#eef2ff; transform:translateY(-2px) }
.btn-primary-sm{ background:var(--primary); color:#fff; padding:10px 16px; border-radius:999px }
.btn-primary-sm:hover{ background:var(--primary-700) }
.btn-outline-sm{ color:var(--outline); border:2px solid var(--outline); padding:8px 14px; border-radius:999px }
.btn-outline-sm:hover{ background:#eef2ff }

/* icon tiles (match your purple/blue/green gradient squares) */
.tile{
    width:52px; height:52px; border-radius:14px; display:grid; place-items:center; color:#fff;
    box-shadow:0 10px 22px rgba(2,6,23,.10);
}
.tile svg{ width:24px; height:24px }
.tile-blue{ background:linear-gradient(135deg,#3b82f6,#6366f1) }
.tile-purple{ background:linear-gradient(135deg,#8b5cf6,#6366f1) }
.tile-green{ background:linear-gradient(135deg,#22c55e,#16a34a) }
.tile-amber{ background:linear-gradient(135deg,#f59e0b,#f97316) }

/* cards grid */
.gp-grid{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr) }

/* card */
.gp-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;
}
.gp-card h3{ margin:4px 0 0; font-size:20px; color:#0b1220 }
.gp-card p{ margin:0; color:var(--muted) }
.bullets{ margin:8px 0 0 0; padding:0 0 0 18px; color:#374151 }
.gp-card .card-actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap }

/* responsive */
@media (max-width: 992px){
    .gp-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width: 640px){
    .gp-stats{ grid-template-columns:1fr; }
    .gp-actions{ justify-content:flex-start }
    .gp-grid{ grid-template-columns:1fr }
}