:root{
  --bg-1: hsl(220 20% 68%);
  --bg-2: hsl(230 22% 56%);
  --bg-3: hsl(210 18% 42%);

  --glass: hsla(0,0%,100%,.28);
  --glass-strong: hsla(0,0%,100%,.36);
  --glass-detail: hsla(0,0%,100%,.34);
  --stroke: rgba(255,255,255,.66);
  --inner-stroke: rgba(0,0,0,.08);
  --shadow: 0 24px 60px rgba(10, 15, 30, .32);

  --primary: hsl(218 100% 56%);
  --secondary: hsl(266 75% 62%);
  --accent: hsl(185 75% 48%);

  --text: hsl(220 20% 12%);
  --text-2: hsl(220 10% 24%);
  --text-3: hsl(220 8% 40%);

  --success: hsla(152,63%,40%,.98);
  --warning: hsla(45,93%,47%,.95);
  --danger:  hsla(4,79%,56%,.95);

  --blur: 30px;
  --blur-strong: 48px;

  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 14px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1000px 700px at 90% -10%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(135deg, var(--bg-1), var(--bg-2) 40%, var(--bg-3) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(255,255,255,.045), rgba(255,255,255,.045)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0, rgba(0,0,0,.012) 1px, transparent 1px, transparent 2px);
  mix-blend-mode:overlay;
}
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(90vw 70vh at 50% 120%, rgba(0,0,0,.28), transparent 60%),
    radial-gradient(70vw 50vh at 50% -10%, rgba(255,255,255,.12), transparent 55%);
}

.container{ max-width:1200px; margin:0 auto; padding:28px 20px 56px; }

/* ===== Header ===== */
header{
  position:relative;
  border-radius:var(--r-xl);
  padding:32px 24px 22px;
  backdrop-filter: blur(var(--blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.35);
  background: var(--glass);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow:hidden; isolation:isolate;
}
header::after{
  content:"";
  position:absolute; inset:-2px; pointer-events:none;
  background:
    radial-gradient(900px 340px at -10% -10%, rgba(255,255,255,.50), transparent 60%),
    radial-gradient(700px 280px at 110% -20%, rgba(255,255,255,.38), transparent 60%);
  opacity:.85;
}

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; }
.branding{ display:flex; align-items:center; gap:14px; }
.logo{
  font-weight:800; font-size:28px; letter-spacing:.4px;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.pill{
  font-size:12px; font-weight:800; color:#fff; padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  box-shadow: 0 10px 22px rgba(0,103,255,.28);
}

.actions{ display:flex; align-items:center; gap:10px; }
.glass-btn{
  border:1px solid var(--stroke);
  background: hsla(0,0%,100%,.32);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius:12px;
  color:var(--text-2);
  font-weight:700;
  padding:10px 14px;
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .2s ease;
  box-shadow: 0 10px 22px rgba(15,23,42,.16), inset 0 0 0 1px var(--inner-stroke);
}
.glass-btn:hover{ transform:translateY(-1px); filter:saturate(1.06); }

h1{
  margin:6px 0 6px; font-size:34px; line-height:1.15; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.7));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.subtitle{ color:var(--text-3); font-size:15.5px; margin-bottom:18px; }

/* ===== Footer ===== */
footer{
  margin-top:34px; border-radius:24px; padding:28px 22px;
  background: hsla(0,0%,100%,.26);
  border:1px solid var(--stroke);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(15,23,42,.22);
}
.footer-content{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; }
.footer-section{ min-width:220px; flex:1; }
.footer-section h3{ margin:0 0 12px; font-size:15px; font-weight:800; color:var(--primary); }
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin:10px 0; }
.footer-links a{
  color:var(--text-3); text-decoration:none; font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; gap:8px;
  transition: color .2s ease, transform .2s ease;
}
.footer-links a:hover{ color:var(--primary); transform: translateX(3px); }
.footer-links a i{ color:var(--secondary); font-size:12.5px; }
.footer-bottom{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--stroke);
  color:var(--text-3); font-size:13.2px; text-align:center;
}
.company{ color:var(--primary); font-weight:800; }

/* ===== Pricing Cards ===== */
.pricing-grid {
  margin-top: 40px;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.pricing-card {
  border-radius: var(--r-lg);
  padding: 24px 20px;
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(var(--blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.25);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15,23,42,.28);
}

.pricing-card h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
}

.pricing-card .price {
  font-size: 24px;
  font-weight: 800;
  margin: 12px 0;
  color: var(--secondary);
}

.pricing-card p {
  font-size: 14.5px;
  color: var(--text-2);
  margin-bottom: 12px;
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.pricing-card ul li {
  margin: 8px 0;
  font-size: 14px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pricing-card ul li::before {
  content: "✔";
  color: var(--success);
  font-weight: 800;
}

.pricing-card button {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #fff;
  transition: transform .2s ease, filter .2s ease;
}

.pricing-card button:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
}