/* =====================
   ItProSphere — Shared Styles
   Save as /assets/site.css and link from all pages
   ===================== */

/* Theme tokens */
:root{
  --bg1:#0b0d12; --bg2:#0e1420; --bg3:#0d1728;
  --ink:#e8eeff; --muted:#9bb0d6;
  --brand:#4da3ff; --brand-2:#6de0ff;
  --radius:18px; --shadow:0 20px 40px rgba(0,0,0,.35);

  /* Gradients */
  --grad-bg: radial-gradient(1200px 800px at 80% -10%, rgba(77,163,255,.12), transparent),
             linear-gradient(180deg, var(--bg1), var(--bg2) 60%, var(--bg1));
  --grad-header: linear-gradient(180deg, rgba(13,23,40,.88), rgba(11,13,18,.88));
  --grad-panel: radial-gradient(280px 200px at 85% -20%, rgba(109,224,255,.10), transparent),
                linear-gradient(180deg,#121827,#0f1624);
  --grad-btn: linear-gradient(180deg,#1a2233,#131a28);
  --grad-primary: linear-gradient(180deg,#4da3ff,#2a7fe0);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--grad-bg); color:var(--ink); font:16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif}
img{max-width:100%; height:auto}
a{color:inherit; text-decoration:none}

/* Layout */
.wrap{max-width:1120px; margin:0 auto; padding:24px}
.pad{padding:26px}
.card{background:var(--grad-panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); box-shadow:var(--shadow)}

/* Header & Nav */
header.site{position:sticky; top:0; background:var(--grad-header); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.06); z-index:50}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
.logo{display:flex; align-items:center; gap:12px; font-weight:800}
.logo-mark{width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:var(--shadow)}
.links{display:flex; gap:18px; align-items:center}

/* Hero */
.hero{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; padding:56px 0 24px}
h1{font-size: clamp(28px, 4vw, 42px); line-height:1.15; margin:0 0 14px; font-weight:800}
.lead{color:var(--muted); font-size: clamp(14px, 2.2vw, 18px); margin:0 0 22px}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; background:var(--grad-btn); border:1px solid rgba(255,255,255,.08); color:var(--ink); box-shadow:var(--shadow); transition: transform .12s ease, border-color .2s ease}
.btn:hover{transform: translateY(-1px); border-color: rgba(77,163,255,.6)}
.btn.primary{background: var(--grad-primary); color:#041022}
.btn.ghost{background: transparent; border-color: rgba(255,255,255,.14)}

/* Grids, sections */
.grid{display:grid; grid-template-columns: repeat(3,1fr); gap:18px}
.pricing{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:18px}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 22px}
.badge{font-size:12px; letter-spacing:.3px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); color:#cfe0ff; background:#0f1726}
.checks{display:grid; gap:10px; margin:14px 0}
.check{display:flex; align-items:flex-start; gap:10px; color:#cfe0ff}

/* Support page bits */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px}
.kpi{padding:14px; border-radius:12px; background:#0f1626; border:1px solid rgba(255,255,255,.06); text-align:center}
.kpi b{display:block; font-size:20px}

/* Footer */
footer.site{margin:32px 0 80px; color:var(--muted)}

/* Responsive */
@media (max-width: 980px){ .hero{grid-template-columns: 1fr; padding-top:34px} }
@media (max-width: 880px){ .grid{grid-template-columns: 1fr 1fr} .pricing{grid-template-columns:1fr} }