
:root{
  --bg:#0b1020;
  --fg:#121a34;
  --text:#f5fbff;
  --muted:#c7d2f3;
  --accent:#39e4cf;
  --accent-2:#3ea7ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),#0f1630);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
body{padding-top:84px}
a{color:var(--accent-2);text-decoration:none}
a.btn{color:#061019}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.navbar-sendoo{position:fixed;top:0;left:0;right:0;background:rgba(15,22,48,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(255,255,255,.12);z-index:1030;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.navbar-sendoo .brand-logo{height:48px;width:auto;border-radius:12px;box-shadow:0 0 0 0 rgba(62,167,255,0.0)}
.navbar-sendoo .brand-logo{filter: drop-shadow(0 6px 14px rgba(62,167,255,.25))}
.navbar-sendoo .brand-name{font-weight:800;letter-spacing:.4px;font-size:1.125rem}
.navbar-sendoo .nav-link{color:var(--text);opacity:.85}
.navbar-sendoo .nav-link:hover,.navbar-sendoo .nav-link:focus{opacity:1}
.navbar-sendoo .nav-link.active{opacity:1;text-decoration:underline;text-underline-offset:6px}
.navbar-sendoo .btn{margin-left:8px}
.site-header{position:sticky;top:0;background:rgba(15,22,48,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid rgba(255,255,255,.12);z-index:10}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:36px;width:36px;border-radius:10px}
.brand-name{font-weight:700;letter-spacing:.5px}
.nav a{margin-left:16px}
.nav .btn{margin-left:24px}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));font-weight:700;box-shadow:0 10px 20px rgba(62,167,255,.28);transition:transform .15s ease, box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(62,167,255,.35)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--text)}
.btn.btn-ghost{color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.hero{padding:80px 0 40px;background: radial-gradient(1200px 600px at 50% -200px, rgba(62,167,255,.28), transparent)}
.hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
h1{font-size:44px;line-height:1.1;margin:0}
.highlight{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lead{font-size:18px;color:var(--muted);max-width:800px}
.cta-group{display:flex;gap:12px;margin-top:8px}
.trust{display:flex;gap:14px;list-style:none;padding:0;margin:10px 0 0;color:var(--muted);flex-wrap:wrap}
.section{padding:64px 0}
.section.alt{background:rgba(255,255,255,.05)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:18px}
.card h3,.card p{color:var(--text)}
.price-card{display:flex;justify-content:space-between;align-items:center;gap:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:24px;margin-top:14px}
.price{font-size:36px;font-weight:800}
.feature-list{list-style:disc;margin:12px 0 0 22px;color:var(--text)}
.tiny{font-size:12px;color:var(--muted)}
.muted{color:var(--muted);margin-top:12px}
.cta{text-align:center}
.usp-banner{position:relative;isolation:isolate}
.usp-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg, rgba(62,167,255,.2), rgba(57,228,207,.18));border:1px solid rgba(255,255,255,.22);border-radius:22px;padding:22px 24px;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.usp-text .badge-unique{display:inline-block;padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#061019;font-weight:800;margin-bottom:8px;letter-spacing:.6px}
.usp-text h2{margin:0}
.usp-text .lead{margin:6px 0 0;color:#e7f3ff}
.usp-cta .btn{white-space:nowrap}
.usp-glow,.usp-glow-2,.usp-glow-3{position:absolute;border-radius:999px;filter:blur(40px);opacity:.28;z-index:-1}
.usp-glow{width:220px;height:220px;background:var(--accent);top:-40px;left:-20px}
.usp-glow-2{width:260px;height:260px;background:var(--accent-2);right:-40px;bottom:-30px}
.usp-glow-3{width:180px;height:180px;background:#7c5cff;left:40%;top:-20px;opacity:.18}
@media (max-width:768px){.usp-inner{flex-direction:column;align-items:flex-start}}
.site-footer{border-top:1px solid rgba(255,255,255,.16);padding:24px 0}
.footer-top{padding-bottom:12px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:16px;padding-top:16px}
.footer-logo{height:44px;width:auto;border-radius:10px}
.social-pill{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);color:var(--text);background:transparent;font-weight:600}
.social-pill:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.form{display:grid;gap:12px;max-width:560px}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="password"],
.form input[type="number"],
.form textarea{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);color:var(--text)}
.form button{justify-self:start}
/* smaller privacy checkbox */
.form .form-check{display:flex;align-items:flex-start;gap:8px}
.form .form-check{cursor:pointer}
.form .form-check-input{width:16px;height:16px;margin-top:3px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.02);-webkit-appearance:checkbox;appearance:checkbox;pointer-events:auto}
.form .form-check-input:focus{box-shadow:none;border-color:rgba(255,255,255,.55)}
.form .form-check-label{color:var(--muted)}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr 1fr} .price-card{flex-direction:column;align-items:flex-start} }
@media (max-width:600px){ h1{font-size:34px} .grid-3{grid-template-columns:1fr} .nav a{display:none} .nav .btn{display:inline-block} }

@media (min-width:992px){
  .navbar-sendoo .brand-logo{height:56px}
  .navbar-sendoo .brand-name{font-size:1.25rem}
}

@media (max-width:991.98px){
  body{padding-top:70px}
}

/* Eyes background effect */
.eyes-fx{position:fixed;inset:0;pointer-events:none;z-index:0}
.eyes-fx .eye{position:absolute;width:64px;height:64px;opacity:.15;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));background-repeat:no-repeat;background-size:contain;animation:eyes-float var(--dur,8s) ease-in-out infinite alternate, eyes-sway calc(var(--dur,8s)*1.2) ease-in-out infinite alternate, eyes-rot calc(var(--dur,8s)*2) ease-in-out infinite alternate}
.eyes-fx .eye.s{width:36px;height:36px;opacity:.10}
.eyes-fx .eye.m{width:52px;height:52px;opacity:.13}
.eyes-fx .eye.l{width:78px;height:78px;opacity:.18}
@keyframes eyes-float{from{transform:translateY(var(--y0,0))}to{transform:translateY(calc(var(--y0,0) - 20px))}}
@keyframes eyes-sway{from{margin-left:0}to{margin-left:16px}}
@keyframes eyes-rot{from{rotate:-2deg}to{rotate:2deg}}
@media (prefers-reduced-motion: reduce){
  .eyes-fx .eye{animation:none}
}
