:root{
  --bg:#0b1220;
  --ink:#e5f0ff;
  --ink-dim:#b6c3d9;
  --brand:#4ea7ff;
  --brand-2:#9bd1ff;
  --panel:rgba(255,255,255,.08);
  --accent:#34d399;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg) url('../img/bg-voip.png') center/cover fixed no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* overlay for contrast */
body::before{
  content:"";
  position:fixed; inset:0;
  background:radial-gradient(1200px 1200px at 10% -10%, rgba(78,167,255,.25), transparent 40%),
             radial-gradient(1200px 1200px at 110% 110%, rgba(52,211,153,.15), transparent 40%),
             rgba(4,6,18,.55);
  pointer-events:none; z-index:-1;
}

a{color:var(--brand)}
a:hover{color:var(--brand-2)}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  background:rgba(6,10,24,.42);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{max-width:1200px; margin:0 auto; padding:14px 18px; display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand img{height:34px; width:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.brand .name{font-weight:700; letter-spacing:.3px}
.navlinks{margin-left:auto; display:flex; gap:14px; flex-wrap:wrap}
.navlinks a{
  color:var(--ink); text-decoration:none; padding:8px 12px; border-radius:12px;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.navlinks a:hover{background:var(--panel); transform:translateY(-1px)}
.navlinks .cta{
  background:linear-gradient(180deg, #79c2ff, #2aa1ff);
  color:#04121f; font-weight:700; box-shadow:0 8px 24px rgba(42,161,255,.3);
}
.navlinks .cta:hover{transform:translateY(-1px) scale(1.02)}

/* Layout & panels */
.container{max-width:1100px; margin:0 auto; padding:0 18px}
.section{padding:56px 0}
.panel{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  overflow:hidden;
}

/* Hero */
.hero{padding:80px 0 60px}
.hero h1{font-size:clamp(28px,4.4vw,56px); margin:0 0 10px}
.hero p{font-size:clamp(16px,2.2vw,22px); color:var(--ink-dim); margin:0 0 24px}
.buttons{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  border:0; padding:12px 16px; border-radius:12px; font-weight:700; cursor:pointer; font-size:16px;
  color:#04121f; background:linear-gradient(180deg,#ffffff,#dbeafe);
}
.btn.secondary{background:rgba(255,255,255,.1); color:var(--ink); border:1px solid rgba(255,255,255,.12)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.2)}
.btn:active{transform:translateY(1px)}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.card{padding:18px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); position:relative; overflow:hidden}
.card h3{margin:4px 0 6px}
.price{font-size:28px; font-weight:800; margin:6px 0 10px}
.badge{position:absolute; top:14px; right:-30px; background:#22c55e; color:#042016; transform:rotate(35deg); padding:6px 40px; font-weight:800}

/* Forms */
form{display:flex; flex-direction:column; gap:12px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
input, select, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.15);
  background:rgba(10,15,30,.5); color:var(--ink)
}
input::placeholder,textarea::placeholder{color:#9fb1cc}
label{font-size:14px; color:var(--ink-dim)}

/* Footer */
.footer{padding:28px 0; color:var(--ink-dim); border-top:1px solid rgba(255,255,255,.08)}

/* Animations */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1; transform:none}
.parallax{transform:translateY(0); transition:transform .2s linear; will-change:transform}

link[rel="icon"]{image-rendering:auto}
@media (max-width:720px){ .navlinks{gap:8px} }