
:root{
  --bg: #ffffff;
  --text:#0f172a;
  --muted:#475569;
  --brand:#ff4d6d;
  --brand-2:#5eead4;
  --accent:#f59e0b;
  --card:#f8fafc;
  --ring:#a7f3d0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color:var(--text); background:var(--bg);}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:14px 22px;border-radius:14px;background:linear-gradient(135deg,var(--brand),#ff7aa2);color:#fff;font-weight:700;box-shadow:0 8px 20px rgba(255,77,109,.25);transition:transform .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,77,109,.35); text-decoration:none}
.btn-outline{background:#fff;color:var(--brand);border:2px solid var(--brand); box-shadow:none}
.tag{display:inline-flex;align-items:center;gap:8px;background:rgba(94,234,212,.2);border:1px solid var(--ring);color:#0f766e;padding:8px 12px;border-radius:999px;font-weight:600}
header.site-header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #e2e8f0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:20px;letter-spacing:.5px}
.brand img{width:36px;height:36px}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--muted);font-weight:600}
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 10% -10%, #ffe4e9, transparent), radial-gradient(900px 500px at 110% 10%, #d1fae5, transparent)}
.hero .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:80px 0}
h1{font-size:48px;line-height:1.05;margin:0 0 16px}
p.lead{font-size:18px;color:#334155}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.floating{position:absolute;filter:blur(0.2px);opacity:.35;animation:float 12s ease-in-out infinite}
.floating.blob-1{width:360px;height:360px;left:-120px;top:-80px;background:radial-gradient(circle at 30% 30%, #ffb4c6, transparent 60%), radial-gradient(circle at 80% 70%, #a7f3d0, transparent 60%);border-radius:50%}
.floating.blob-2{width:280px;height:280px;right:-80px;top:40px;background:radial-gradient(circle at 40% 40%, #fde68a, transparent 60%), radial-gradient(circle at 70% 70%, #93c5fd, transparent 60%);border-radius:50%;animation-duration:14s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(16px)}}
.section{padding:72px 0}
.section h2{font-size:34px;margin:0 0 14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border:1px solid #e2e8f0;border-radius:20px;padding:22px;box-shadow:0 8px 24px rgba(2,6,23,.04)}
.card h3{margin:0 0 8px}
.card p{color:#475569;margin:0}
.icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg, #a78bfa, #60a5fa); color:#fff;font-weight:900;box-shadow:0 6px 16px rgba(59,130,246,.25)}
.banner{display:grid;grid-template-columns:1.4fr .6fr;gap:22px;align-items:center;background:linear-gradient(135deg,#ffedd5,#fff1f2);border:1px solid #fed7aa;border-radius:22px;padding:22px}
.banner .badge{font-weight:800;color:#ea580c}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:16px}
.stat{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:16px;text-align:center}
.stat h4{font-size:28px;margin:0}
.stat span{color:#64748b;font-size:14px}
.marquee{overflow:hidden;white-space:nowrap;border-top:1px dashed #e2e8f0;border-bottom:1px dashed #e2e8f0;background:#fff; padding:10px 0}
.marquee .track{display:inline-block;animation:scroll 28s linear infinite}
.marquee img{height:28px;margin:0 28px;opacity:.7;filter:grayscale(90%)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
footer{background:#0b1220;color:#cbd5e1;margin-top:60px}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:24px;padding:40px 0}
footer a{color:#e2e8f0}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand img{width:38px;height:38px}
.subtle{color:#94a3b8}
small, .tiny{font-size:12px;color:#94a3b8}
hr.sep{border:0;height:1px;background:#1f2937;margin:16px 0}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.price-card{border:2px solid #e2e8f0;border-radius:22px;padding:26px;background:#fff;position:relative;overflow:hidden}
.ribbon{position:absolute;right:-40px;top:16px;background:var(--brand);color:#fff;padding:6px 60px;transform:rotate(35deg);font-weight:800}
.price{font-size:42px;font-weight:900;margin:2px 0}
ul.clean{list-style:none;padding:0;margin:0}
ul.clean li{display:flex;gap:10px;margin:8px 0}
.badge{display:inline-block;font-weight:800;font-size:12px;padding:6px 10px;border-radius:999px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe}
.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #cbd5e1}
textarea.input{min-height:140px}
.cookie{position:fixed;left:20px;right:20px;bottom:20px;background:#111827;color:#f9fafb;border-radius:16px;padding:16px;display:none;align-items:center;justify-content:space-between;gap:14px;z-index:100}
.cookie p{margin:0;color:#cbd5e1}
.cookie .actions{display:flex;gap:8px}
.cookie .actions button{border:0;padding:10px 14px;border-radius:10px;font-weight:700}
.cookie .actions .accept{background:var(--brand);color:#fff}
.cookie .actions .decline{background:#374151;color:#fff}
.hero-illustration{width:100%;height:360px;border-radius:22px;border:1px solid #e2e8f0;background:conic-gradient(from 180deg at 50% 50%, #fda4af, #fde68a, #a7f3d0, #93c5fd, #fda4af); position:relative; overflow:hidden}
.spark{position:absolute;border-radius:50%;opacity:.8;mix-blend-mode:screen;animation:spark 9s ease-in-out infinite}
.spark.s1{width:120px;height:120px;left:12%;top:18%;background:radial-gradient(#fff,#fde68a 60%, transparent 70%)}
.spark.s2{width:160px;height:160px;left:62%;top:40%;background:radial-gradient(#fff,#93c5fd 60%, transparent 70%);animation-delay:1.2s}
.spark.s3{width:100px;height:100px;left:40%;top:70%;background:radial-gradient(#fff,#fca5a5 60%, transparent 70%);animation-delay:2.1s}
@keyframes spark{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.05)}}
.reveal{opacity:0;transform:translateY(14px);transition:all .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@media (max-width: 960px){
  .hero .inner{grid-template-columns:1fr; padding-top:48px}
  .grid-3{grid-template-columns:1fr; gap:16px}
  .pricing{grid-template-columns:1fr; gap:16px}
  .footer-inner{grid-template-columns:1fr 1fr}
  .contact-card{grid-template-columns:1fr}
  .banner{grid-template-columns:1fr}
}
