/* assets/css/style.css */
:root{
  --teal:#14b8a6; --teal-600:#0d9488; --dark:#0b1320; --slate:#334155; --bg:#f5fbfa;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;color:var(--slate);background:var(--bg)}
a{color:var(--teal-600);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.tiny{font-size:.85rem;opacity:.8}
.lead{font-size:1.2rem;opacity:.95}
.list-plain{list-style:none;padding:0;margin:.25rem 0}
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:14px;border:1px solid #cbd5e1;font-weight:600;transition:transform .15s ease, box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.btn-ghost{background:#fff}
.btn-dark{background:var(--dark);color:#fff;border-color:transparent}
.btn-teal{background:var(--teal);color:#fff;border-color:transparent}
.btn-lg{font-size:1.1rem;padding:1rem 1.4rem;border-radius:18px}

.site-header{position:sticky;top:0;background:#fffddf0c;background:#ffffffd9;backdrop-filter:saturate(130%) blur(8px);border-bottom:1px solid #e2e8f0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--dark);letter-spacing:.5px}
.logo-text{text-transform:lowercase;font-size:1.1rem}
.logo-mark{width:36px;height:36px;animation:float 3s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-4px)}}

.menu{display:flex;gap:1rem;align-items:center}
.menu a{padding:.5rem .6rem;border-radius:10px;border:1px solid transparent}
.menu a:hover{border-color:#e2e8f0;background:#ffffff80}
.hamburger{display:none}
#nav-toggle{display:none}

.hero{padding:2.5rem 0 1.2rem;background:linear-gradient(180deg,#ecfeff 0%, #fff 100%)}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem;align-items:center}
.hero-text h1{font-size:2.1rem;line-height:1.15;margin:.2rem 0 .6rem}
.hero-text .badges{display:flex;gap:1rem;list-style:none;padding:0;margin:1rem 0 0}
.hero-art{position:relative;min-height:260px}
.bubbles span{position:absolute;border-radius:999px;background:radial-gradient(circle at 30% 30%,#fff, #a7f3d0 60%, #22d3ee);opacity:.7;animation:bubble 6s ease-in-out infinite}
.b1{width:80px;height:80px;left:10%;top:20%}
.b2{width:50px;height:50px;left:45%;top:8%;animation-delay:.6s}
.b3{width:90px;height:90px;left:70%;top:35%;animation-delay:1.1s}
.b4{width:40px;height:40px;left:20%;top:65%;animation-delay:1.6s}
.b5{width:65px;height:65px;left:58%;top:70%;animation-delay:.2s}
@keyframes bubble{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}
.sparkles span{position:absolute;width:10px;height:10px;background:#fff;border-radius:2px;box-shadow:0 0 24px #fff;animation:blink 2.6s ease-in-out infinite}
.sparkles span:nth-child(1){left:12%;top:15%}
.sparkles span:nth-child(2){left:64%;top:22%}
.sparkles span:nth-child(3){left:82%;top:66%}
@keyframes blink{0%,100%{opacity:.4;transform:scale(.9) rotate(12deg)}50%{opacity:1;transform:scale(1.1) rotate(0)}}

.cards{gap:1rem;margin:1.4rem auto}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.grid-3 .card, .grid-2 .about-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:1rem}
.card .icon{width:40px;height:40px}
.card.hover-bounce{transition:transform .15s ease}
.card.hover-bounce:hover{transform:translateY(-3px) scale(1.01)}

.strip{background:#0b1320;color:#e2e8f0}
.strip-inner{padding:1.6rem 0}
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;list-style:none;padding:0;margin:1rem 0}

.steps{padding:1.2rem 0}
.stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.step{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:1rem;position:relative;overflow:hidden}
.step-num{position:absolute;top:-16px;right:-6px;background:var(--teal);color:#fff;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;box-shadow:0 10px 18px rgba(20,184,166,.25)}

.faq details{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:.8rem;margin:.6rem 0}
.faq summary{cursor:pointer;font-weight:600}

.cta-wide{background:linear-gradient(180deg,#fff 0%, #e6fffb 100%);padding:1.4rem 0;text-align:center}
.wave{display:inline-block;animation:w 1.6s ease-in-out infinite}
@keyframes w{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
.shine{background:linear-gradient(90deg,#0d9488,#14b8a6,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative}
.shine::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0,rgba(255,255,255,.8) 30%,transparent 60%);transform:translateX(-120%);animation:shine 3.2s infinite}
@keyframes shine{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.bubble-pop{position:relative}
.bubble-pop::after{content:"";position:absolute;left:50%;top:110%;width:10px;height:10px;border-radius:999px;background:radial-gradient(circle,#fff,#99f6e4);animation:pop 2.2s infinite}
@keyframes pop{0%{transform:translate(-50%,0) scale(.3);opacity:.6}40%{transform:translate(-50%,-10px) scale(1);opacity:1}100%{opacity:0;transform:translate(-50%,-20px) scale(.2)}}

.site-footer{margin-top:2rem;padding:1.2rem 0;border-top:1px solid #e2e8f0;background:#fff}
.stats{list-style:none;padding:0;display:flex;gap:1.2rem}
.stats li{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:1rem;min-width:120px}
.count{font-size:2rem;font-weight:800;color:var(--dark)}

.form.card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:1rem}
.form label{display:grid;gap:.4rem;font-weight:600}
.form input,.form select,.form textarea{padding:.7rem;border:1px solid #cbd5e1;border-radius:10px;font:inherit}
.form .hp{display:none}
.checks{display:flex;gap:1rem;margin:.6rem 0}
.form-actions{display:flex;align-items:center;gap:1rem;margin-top:.6rem}

.alert{border-left:4px solid #ef4444;background:#fff;padding:.6rem;border-radius:10px;margin:.8rem 0}

.cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;background:#ffffff;box-shadow:0 10px 24px rgba(0,0,0,.08);border:1px solid #e2e8f0;border-radius:14px;padding:.7rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;z-index:60;transform:translateY(120%);opacity:0;transition:all .3s}
.cookie.show{transform:translateY(0);opacity:1}

.icon{display:block}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1rem 0}
.service-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:1rem}
.pricing{margin:1.2rem 0;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:1rem}

.strip a,.pricing a{text-decoration:none}

@media (max-width: 860px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2,.service-grid{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .hamburger{display:grid}
  .menu{position:absolute;top:62px;right:1rem;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:.6rem;display:none;flex-direction:column;min-width:210px}
  #nav-toggle:checked ~ .menu{display:flex}
  .hamburger span, .hamburger span::before, .hamburger span::after{content:"";display:block;width:24px;height:2px;background:#475569;border-radius:2px;position:relative}
  .hamburger span::before{position:absolute;top:-7px}
  .hamburger span::after{position:absolute;top:7px}
}

@media (prefers-reduced-motion: reduce){
  .logo-mark, .bubbles span, .sparkles span, .bubble-pop::after, .shine::after, .wave{animation:none}
}