:root{
  --bg:#6E657F;
  --bg-900:#3e3950;
  --text:#1F2430;
  --muted:#5a6170;
  --white:#ffffff;
  --accent:#FF8A2A;
  --accent-2:#FFC04D;
  --accent-red:#E45B4C;
  --accent-teal:#2EC7C9;
  --ok:#16a34a;
  --bad:#dc2626;
  --radius:16px;
  --shadow:0 10px 25px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:18px;line-height:1.6;background:#f9f9fb}
a{color:var(--accent-teal);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px,92%);margin-inline:auto}
header.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #eae7f5}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.5px}
.brand img{height:36px;width:auto;border-radius:8px}
.brand span{color:var(--bg)}
nav ul{display:flex;list-style:none;gap:22px;margin:0;padding:0;align-items:center}
nav a{color:var(--text);font-weight:600}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#1b1207;box-shadow:var(--shadow);border:none;cursor:pointer}
.btn.secondary{background:#ede7ff;color:#3a2e5c;box-shadow:none}
.btn:focus{outline:3px solid #00000022}
.hero{background:radial-gradient(1200px 600px at 15% -10%,#8b83a1 0%,#6E657F 35%,#4f4565 100%);color:var(--white);padding:88px 0 64px 0;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:auto -10% -160px -10%;height:320px;background:radial-gradient(600px 220px at 80% 10%,#ffd28a44,transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero h1{font-family:Sora,Inter,sans-serif;font-size:52px;line-height:1.15;margin:0 0 12px}
.hero p{opacity:.96;margin:0 0 22px}
.hero .card{background:#ffffff10;border:1px solid #ffffff30;border-radius:var(--radius);padding:18px}
.badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.badge{background:#ffffff18;border:1px solid #ffffff30;border-radius:999px;padding:8px 12px;font-size:.92rem}
.section{padding:72px 0}
.section h2{font-family:Sora,Inter,sans-serif;font-size:36px;line-height:1.2;margin:0 0 12px}
.section p.lead{color:var(--muted);margin-top:0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);border:1px solid #eeeaf7}
.card h3{margin-top:0;font-size:22px}

/* Old vs New */
.old-new{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.list{display:grid;gap:10px;padding-left:0;list-style:none}
.list li{display:flex;gap:10px;align-items:flex-start}
.icon{display:inline-flex;width:24px;height:24px;border-radius:999px;align-items:center;justify-content:center;box-shadow:var(--shadow);flex:0 0 24px}
.icon svg{width:16px;height:16px;display:block}
.icon.ok{background:var(--ok);color:#fff}
.icon.bad{background:var(--bad);color:#fff}

.process{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step .num{width:40px;height:40px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#1b1207;margin-bottom:8px}
.testimonials .quote{font-style:italic}
.faq details{background:#fff;border-radius:var(--radius);padding:16px 18px;border:1px solid #eeeaf7;box-shadow:var(--shadow)}
.faq details+details{margin-top:12px}
.faq summary{font-weight:700;cursor:pointer}
footer{background:#16131c;color:#bdb7d2;padding:38px 0;margin-top:60px}
footer a{color:#e6e1ff}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border:1px solid #d8d3e8;border-radius:12px;font-size:16px;background:#fff}
.form textarea{min-height:120px}
.form .full{grid-column:1/-1}
.form .actions{display:flex;gap:10px;align-items:center}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .old-new{grid-template-columns:1fr}
  .process{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .hero h1{font-size:40px}
}