/* Vansuaritma.com - minimal premium UI, mobile-first */
:root{
  --bg:#f6f9fc;
  --surface:#ffffff;
  --text:#0b1220;
  --muted:#475569;
  --border:rgba(15,23,42,.10);
  --primary:#0b5bd3;   /* blue */
  --primary2:#0ea5e9;  /* sky */
  --accent:#14b8a6;    /* teal */
  --shadow: 0 18px 55px rgba(2,6,23,.10);
  --shadow2: 0 6px 20px rgba(2,6,23,.08);
  --radius: 18px;
  --max: 1120px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 520px at 14% -12%, rgba(14,165,233,.20), transparent 56%),
              radial-gradient(980px 540px at 86% -4%, rgba(11,91,211,.16), transparent 62%),
              var(--bg);
  line-height:1.5;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline: 3px solid rgba(14,165,233,.35);
  outline-offset: 2px;
  border-radius: 14px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}
.grid{display:grid;gap:16px}
.card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: 0 1px 0 rgba(2,6,23,.03);
}
.card.hover:hover{transform:translateY(-2px);box-shadow:var(--shadow2)}
.card{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card.pad{padding:18px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.7)}
.kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(2,132,199,1)}
h1,h2,h3{margin:0 0 10px 0;letter-spacing:-.03em}
h1{font-size:34px;line-height:1.08}
h2{font-size:22px}
h3{font-size:18px}
p{margin:0 0 12px 0;color:var(--muted)}
.muted{color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:999px;border:1px solid transparent;
  font-weight:700;cursor:pointer;white-space:nowrap;
}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;box-shadow:var(--shadow)}
.btn.primary:hover{filter:saturate(1.05);transform:translateY(-1px)}
.btn.outline:hover{background:rgba(255,255,255,.95);border-color:rgba(15,23,42,.18)}
.btn.accent:hover{filter:saturate(1.04);transform:translateY(-1px)}
.btn{transition:transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease}
.btn.outline{background:rgba(255,255,255,.8);border-color:var(--border)}
.btn.accent{background:linear-gradient(135deg,var(--accent),#22c55e);color:#042f2e}
.btn.sm{padding:10px 12px;font-size:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.spacer{height:18px}

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(246,249,252,.72);
  border-bottom:1px solid rgba(15,23,42,.07);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow: 0 14px 26px rgba(11,91,211,.20);
}
.brand strong{display:block;font-size:16px}
.brand small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(71,85,105,.9);margin-top:-2px}
.nav{display:none;gap:6px;align-items:center}
.nav a{padding:10px 12px;border-radius:12px;font-weight:700;color:rgba(71,85,105,1)}
.nav a.active{color:rgba(2,132,199,1);background:rgba(14,165,233,.10)}
.nav a:hover{background:rgba(15,23,42,.05);color:var(--text)}
.cta{display:none;gap:10px;align-items:center}
.mobile-actions{display:flex;gap:10px}
.hamburger{border:1px solid var(--border);background:rgba(255,255,255,.85);border-radius:12px;padding:10px 12px;font-weight:800}
.mobile-menu{display:none;padding:10px 0 14px 0}
.mobile-menu a{display:block;padding:12px 12px;border-radius:14px;font-weight:800}
.mobile-menu a.active{background:rgba(14,165,233,.10);color:rgba(2,132,199,1)}
.mobile-menu a:hover{background:rgba(15,23,42,.05)}

/* Hero */
.hero{padding:22px 0 12px}
.hero-grid{display:grid;gap:14px}
.hero .headline{font-size:36px}
.hero .sub{font-size:16px}
.hero-right{padding:18px}
.hero .card.pad{
  border-color: rgba(2,132,199,.12);
  background:
    radial-gradient(900px 320px at 20% 0%, rgba(14,165,233,.12), transparent 60%),
    radial-gradient(700px 320px at 90% 20%, rgba(11,91,211,.10), transparent 60%),
    rgba(255,255,255,.92);
}
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{padding:14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.75)}
.stat strong{display:block;font-size:18px}
.stat span{font-size:12px;color:var(--muted);font-weight:700}

/* Sections */
section{padding:18px 0}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:12px}
.section-title h1,.section-title h2{max-width: 780px}
.section-title p{max-width: 720px}
.section-title p{margin:0}
.cards{display:grid;gap:12px}
.cards.cols-3{grid-template-columns:1fr}
.cards.cols-2{grid-template-columns:1fr}
.badge{font-size:12px;font-weight:800;color:rgba(2,132,199,1)}
.price{font-weight:900;color:rgba(2,132,199,1)}
.list{display:grid;gap:8px;margin:0;padding-left:18px;color:var(--muted)}

/* FAQ */
.faq details{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.85);padding:12px}
.faq summary{cursor:pointer;font-weight:900}
.faq details p{margin-top:8px}

/* Footer */
footer{padding:24px 0;border-top:1px solid rgba(15,23,42,.08);background:rgba(255,255,255,.62)}
.footer-grid{display:grid;gap:14px}
.fine{font-size:12px;color:rgba(71,85,105,.9)}

/* Sticky mobile conversion bar */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background: rgba(255,255,255,.92);
  border-top:1px solid rgba(15,23,42,.12);
  backdrop-filter: blur(12px);
  padding:10px 12px;
}
.mobile-bar .row{justify-content:space-between}
.mobile-bar a{flex:1}
.mobile-bar a .btn{width:100%}

/* WhatsApp floating */
.wa-float{
  position:fixed;right:16px;bottom:76px;z-index:70;
}
.wa-float a{display:inline-flex}

/* Forms */
form{display:grid;gap:10px}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.92);
  outline:none;
  font-size:15px;
}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:rgba(14,165,233,.55);box-shadow:0 0 0 4px rgba(14,165,233,.14)}

/* Responsive */
@media (min-width: 900px){
  h1{font-size:48px}
  .hero{padding:34px 0 12px}
  .hero-grid{grid-template-columns: 1.35fr .65fr;align-items:stretch}
  .nav{display:flex}
  .cta{display:flex}
  .mobile-actions{display:none}
  .mobile-bar{display:none}
  .cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
}