/* ===== layout.css — nawigacja, hero, sekcje, siatki, responsywność ===== */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:rgba(7,10,20,.72);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:900;font-size:1.25rem;letter-spacing:1px;
  background:linear-gradient(90deg,var(--neon),var(--ice));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo span{color:var(--hot);-webkit-text-fill-color:var(--hot)}
.nav-right{display:flex;align-items:center;gap:14px}

header{position:relative;z-index:1;padding:90px 0 70px;text-align:center}
.tag{display:inline-block;font-weight:700;font-size:.72rem;
  letter-spacing:3px;text-transform:uppercase;color:var(--neon);
  border:1px solid rgba(0,240,200,.4);padding:6px 16px;border-radius:999px;margin-bottom:28px}
.sub{max-width:560px;margin:26px auto 0;font-size:1.15rem;color:var(--mut);position:relative;z-index:2}
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.meta{margin-top:24px;font-weight:500;font-size:.82rem;color:var(--mut)}
.meta b{color:var(--gold)}

.hero-phone{margin:60px auto 0;width:230px;height:460px;border-radius:34px;
  border:3px solid rgba(255,255,255,.12);position:relative;overflow:hidden;
  background:linear-gradient(180deg,#0a1430,#05080f);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(0,240,200,.12)}
.hero-phone .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:80px;height:5px;border-radius:6px;background:rgba(255,255,255,.2)}
.hero-phone .m{position:absolute;top:18px;right:16px;font-weight:700;color:var(--neon)}
.pp{position:absolute;height:9px;border-radius:5px}

section{padding:80px 0;position:relative}
.grid{display:grid;gap:20px;margin-top:46px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.langs{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}

.final{text-align:center;background:
  radial-gradient(ellipse at 50% 0%,rgba(0,240,200,.14),transparent 60%);
  border-top:1px solid rgba(255,255,255,.07);padding:100px 0}
.final h2{font-size:clamp(2.2rem,6vw,4rem)}
footer{padding:40px 0;text-align:center;color:var(--mut);font-size:.85rem;
  border-top:1px solid rgba(255,255,255,.06);font-weight:500}

@media(max-width:820px){
  .g3,.g2,.strip{grid-template-columns:1fr}
}