:root{
  --bg: #ffffff;
  --text: #0b1020;
  --muted: #5a6275;
  --brand: #4f46e5;
  --brand-2: #22d3ee;
  --card: #f7f8ff;
  --ring: rgba(79,70,229,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--text); background:var(--bg); line-height:1.6;
}
a{color:var(--brand); text-decoration: none}
a:hover{text-decoration: underline}
.container{max-width:1100px; margin:0 auto; padding: 2rem 1rem}

.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(10px);
  border-bottom: 1px solid #eef0ff;
  display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem;
}
.logo{font-weight:800; letter-spacing:.5px; font-size:1.25rem}
.nav a{margin:0 .5rem; font-weight:600; color:#1b2350}
.nav a:hover{color:var(--brand)}

.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; padding:3rem 0}
.hero .accent{background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.cta{display:flex; gap:.75rem; margin-top:1rem}
.btn{display:inline-block; border:1px solid var(--brand); background:var(--brand); color:white; padding:.7rem 1rem; border-radius:.8rem; font-weight:700; box-shadow:0 8px 30px -12px var(--brand)}
.btn:hover{filter:brightness(.95); text-decoration:none}
.btn.ghost{background:transparent; color:var(--brand); border-color:var(--brand); box-shadow:none}

.gradient-card{position:relative; height:220px; border-radius:1.2rem; background:linear-gradient(135deg,#e0e7ff, #ccfbf1)}
.gradient-card .glare{position:absolute; inset:0; background:radial-gradient(600px 120px at 30% -10%, rgba(255,255,255,.9), transparent)}
.gradient-card .dots{position:absolute; inset:0; background:radial-gradient(circle at 20% 80%, rgba(79,70,229,.2), transparent 30%), radial-gradient(circle at 80% 20%, rgba(34,211,238,.2), transparent 30%)}
.gradient-card .tag{position:absolute; left:1rem; bottom:1rem; padding:.35rem .55rem; background:rgba(0,0,0,.65); color:#fff; border-radius:.5rem; font-size:.85rem}

.features{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2rem 0}
.feature{background:var(--card); padding:1rem; border-radius:1rem; border:1px solid #e9ebff}
.grid.two-col{display:grid; grid-template-columns:1fr 1fr; gap:2rem}
.ticks{list-style:none; padding:0; margin:0}
.ticks li{padding-left:1.6rem; position:relative; margin:.35rem 0}
.ticks li:before{content:"✓"; position:absolute; left:.4rem; color:var(--brand)}

.faq details{background:#fafbff; border:1px solid #eef0ff; padding:1rem; border-radius:.8rem; margin:.6rem 0}
.faq summary{font-weight:700; cursor:pointer}

.contact-form{background:var(--card); border:1px solid #e9ebff; padding:1rem; border-radius:1rem}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.form-grid label{display:flex; flex-direction:column; gap:.4rem; font-weight:600}
.form-grid .full{grid-column:1 / -1}
.form-grid .chk{flex-direction:row; align-items:center; gap:.6rem; font-weight:400}
input, select, textarea{
  border:1px solid #dfe3ff; padding:.7rem .8rem; border-radius:.6rem; background:#fff;
  outline:none; box-shadow:0 0 0 0 var(--ring);
}
input:focus, select:focus, textarea:focus{box-shadow:0 0 0 4px var(--ring); border-color:var(--brand)}
label{color:#1b2350}
.small{font-size:.9rem; color:var(--muted)}

.page-header{padding:2rem 0 1rem}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.card{background:var(--card); border:1px solid #e9ebff; padding:1rem; border-radius:1rem}
.card ul{padding-left:1.2rem}

.cta-banner{margin:2rem 0; padding:1.5rem; background:linear-gradient(90deg,#eef2ff,#ecfeff); border:1px solid #e5e7ff; border-radius:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}

.legal{max-width:850px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{border:1px solid #e9ebff; padding:.6rem .7rem; text-align:left}
.table th{background:#f5f7ff}

.site-footer{border-top:1px solid #eef0ff; padding:2rem 1rem; background:#fcfdff}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem}
.legal-list{list-style:none; padding:0; margin:0}
.legal-list li{margin:.3rem 0}

.cookie-banner{
  position:fixed; inset:auto 1rem 1rem 1rem; background:#111827; color:#fff; padding:1rem; border-radius:.9rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid rgba(255,255,255,.15)
}
.cookie-banner a{color:#a5b4fc}
.cookie-actions{display:flex; gap:.5rem}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding:2rem 0}
  .features{grid-template-columns:1fr}
  .grid.two-col{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
}