:root{
      --primary:#4F46E5; /* Indigo */
      --accent:#10B981;  /* Green */
      --bg:#F9FAFB;
      --text:#0F172A;
      --muted:#6B7280;
      --card:#ffffff;
      --radius:14px;
      --max-width:1100px;
      --shadow: 0 8px 30px rgba(2,6,23,0.08);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background: linear-gradient(180deg,var(--bg),#ffffff 40%);
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
    }
    .container{max-width:var(--max-width);margin:0 auto;padding:24px;}
    header{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
    .logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px;color:var(--primary)}
    .logo .mark{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#7C3AED);color:white;font-weight:800}
    nav{display:flex;gap:18px;align-items:center}
    nav a{text-decoration:none;color:var(--muted);font-size:14px}
    .btn{background:var(--primary);color:white;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;display:inline-block;border:none;cursor:pointer;font-size:14px}
    .btn.secondary{background:transparent;color:var(--text);border:1px solid rgba(15,23,42,0.06)}
    .hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding:40px 0 48px;}
    .hero h1{font-size:40px;margin:0 0 12px;line-height:1.05}
    .hero p{color:var(--muted);margin:0 0 20px}
    .cta-row{display:flex;gap:12px;flex-wrap:wrap}
    .card{background:var(--card);padding:18px;border-radius:14px;box-shadow:var(--shadow);}
    .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
    .feature{display:flex;gap:12px;align-items:flex-start}
    .feature .icon{width:56px;height:56px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#7C3AED);color:white;font-weight:700}
    .features-col{margin-top:28px}
    .pricing{display:flex;gap:18px;margin-top:26px;align-items:stretch}
    .price-card{flex:1;padding:20px;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfbff);border:1px solid rgba(15,23,42,0.04)}
    .price{font-size:28px;font-weight:700;margin:8px 0}
    footer{margin-top:60px;padding:36px 0;border-top:1px solid rgba(15,23,42,0.04)}
    .muted{color:var(--muted);font-size:14px}
    @media (max-width:980px){
      .hero{grid-template-columns:1fr;gap:16px}
      .feature-grid{grid-template-columns:repeat(2,1fr)}
      .pricing{flex-direction:column}
    }
    @media (max-width:560px){
      .feature-grid{grid-template-columns:1fr}
      header{padding:12px 0}
      .logo{font-size:18px}
      .hero h1{font-size:28px}
    }
    .inline-form{display:flex;gap:8px}
    input[type="email"], input[type="text"], textarea{
      padding:12px 14px;
      border-radius:10px;
      border:1px solid rgba(15,23,42,0.08);
      flex:1;
      min-width:160px;
      font-size:14px;
    }
    textarea{min-height:100px;resize:vertical}
    .success{color:var(--accent);margin-top:8px;font-weight:700}
    .pill{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.6);font-weight:600;color:var(--text);font-size:13px}
    .feature h4{margin:0;font-size:16px}
    .feature p{margin:6px 0 0;color:var(--muted);font-size:14px}
    .small{font-size:13px;color:var(--muted)}
    .msg{margin-top:12px}
    ul{padding-left:18px}
    /* Ripple effect */
.btn {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  animation: ripple 0.6s linear;
  transform: scale(0);
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Loading spinner */
.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top: 3px solid white;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Toast Message */
.toast {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  animation: fadeIn 0.4s ease;
}
.toast.success {
  background: #4ade80;
  color: #0f5132;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}