:root{
  --bg:#07080d;
  --bg2:#05060b;
  --panel:rgba(255,255,255,.05);
  --panel2:rgba(255,255,255,.035);
  --stroke:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.66);
  --muted2:rgba(255,255,255,.54);
  --silver:#d7dbe1;
  --cyan:#19b6ff;
  --cyan2:#2f67ff;
  --radius:18px;
  --max:1160px;
  --shadow:0 18px 70px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 640px at 16% 20%, rgba(25,182,255,.10), transparent 60%),
    radial-gradient(1200px 680px at 80% 18%, rgba(215,219,225,.08), transparent 62%),
    linear-gradient(180deg, #060711 0%, #07080d 55%, #05060b 100%);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(16px);
  background: rgba(7,8,13,.58);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand strong{font-weight:900;letter-spacing:.2px;display:block}
.brand span{color:rgba(255,255,255,.62);font-size:12.5px;display:block;margin-top:5px}
.mark{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22);position:relative;overflow:hidden}
.mark::after{content:"";position:absolute;inset:-60%;background:conic-gradient(from 90deg, rgba(25,182,255,0), rgba(25,182,255,.55), rgba(215,219,225,.35), rgba(25,182,255,0));animation:spin 7s linear infinite;opacity:.55}
@keyframes spin{to{transform:rotate(360deg)}}

.navlinks{display:flex;gap:10px;flex-wrap:wrap}
.navlinks a{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:rgba(255,255,255,.78)}
.navlinks a:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.92)}
.navlinks a.pill{border-color:rgba(25,182,255,.18);background:rgba(25,182,255,.06)}

.hero{
  position:relative;
  min-height: calc(100vh - 74px);
  display:grid;
  align-items:center;
  padding: 24px 0 32px;
}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 520px at 70% 30%, rgba(25,182,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.05));
}
.fiber{
  position:absolute;left:-20%;top:28%;width:140%;height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(25,182,255,.0) 18%, rgba(25,182,255,.9) 45%, rgba(215,219,225,.75) 55%, rgba(25,182,255,.0) 82%, transparent 100%);
  filter: blur(.2px);
  opacity:.85;
  transform: rotate(-7deg);
  animation: fiberSweep 6.8s ease-in-out infinite;
  box-shadow: 0 0 28px rgba(25,182,255,.25);
}
@keyframes fiberSweep{
  0%,100%{transform:translateX(-6%) rotate(-7deg);opacity:.55}
  50%{transform:translateX(6%) rotate(-7deg);opacity:.95}
}
.grain{position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.25"/></svg>');mix-blend-mode:overlay;opacity:.10}

.hero-inner{display:grid;grid-template-columns: 1.1fr .9fr;gap:14px;position:relative;z-index:1}
.hero-copy{padding:10px 0}
.kicker{display:inline-block;margin-bottom:12px;color:rgba(255,255,255,.68);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
.hero h1{margin:0 0 10px;font-size:52px;letter-spacing:-1.3px}
.hero h2{margin:0 0 12px;color:rgba(215,219,225,.86);font-size:20px;font-weight:650;letter-spacing:-.2px}
.hero p{margin:0;color:var(--muted);line-height:1.7;max-width:70ch;font-size:15.5px}

.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{height:48px;padding:0 18px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:rgba(255,255,255,.92);font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:.18s ease}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.btn.primary{background:linear-gradient(90deg, rgba(25,182,255,.22), rgba(215,219,225,.08));border-color:rgba(255,255,255,.16)}
.btn.small{height:42px;width:100%}

.hero-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.meta{flex:1;min-width:240px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.16);padding:12px 14px}
.meta span{display:block;color:rgba(255,255,255,.58);font-size:12px}
.meta b{display:block;margin-top:6px;font-size:14px;letter-spacing:.2px}

.hero-panel{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  padding:18px;
  backdrop-filter: blur(12px);
}
.panel-title{font-weight:900;letter-spacing:.2px;margin-bottom:12px}
.panel-row{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.14);color:rgba(255,255,255,.78);margin-bottom:10px}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(25,182,255,.92);box-shadow:0 0 14px rgba(25,182,255,.25)}
.panel-note{color:rgba(255,255,255,.64);font-size:13px;line-height:1.6;margin:10px 0 12px}

.section{padding:54px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.section-head h3{margin:0;font-size:20px;letter-spacing:-.2px}
.section-head p{margin:0;color:rgba(255,255,255,.64);max-width:72ch;line-height:1.65}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.card{border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);padding:16px}
.icon{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);margin-bottom:10px}
.card-title{font-weight:850;margin-bottom:6px}
.card-text{color:rgba(255,255,255,.66);font-size:13px;line-height:1.55}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.step{border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.030);padding:16px}
.step .n{width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);display:grid;place-items:center;font-weight:900;margin-bottom:10px}
.step-title{font-weight:900;margin-bottom:6px}
.step-text{color:rgba(255,255,255,.66);font-size:13px;line-height:1.55}

.muted-inline{color:rgba(255,255,255,.58);font-weight:600}

.home-tariffs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.plan{position:relative;border-radius:22px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.14));padding:16px;box-shadow: var(--shadow)}
.plan::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(420px 160px at 30% 0%, rgba(25,182,255,.10), transparent 60%);opacity:.8;pointer-events:none}
.plan .badge{position:absolute;top:12px;right:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(25,182,255,.22);background:rgba(25,182,255,.08);color:rgba(25,182,255,.95);font-size:12px;font-weight:850}
.plan.popular{border-color:rgba(25,182,255,.28);box-shadow:0 18px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(25,182,255,.12) inset}
.plan.popular::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg, rgba(25,182,255,.0), rgba(25,182,255,.22), rgba(215,219,225,.10), rgba(25,182,255,0));filter:blur(16px);opacity:.55;pointer-events:none}
.speed{font-size:34px;font-weight:950;letter-spacing:-.6px;margin-top:8px}
.speed span{display:block;margin-top:6px;font-size:12px;font-weight:750;color:rgba(255,255,255,.62);letter-spacing:.16em;text-transform:uppercase}
.price{margin-top:12px;font-size:18px;font-weight:900;color:rgba(215,219,225,.92)}
.price span{font-size:12px;font-weight:700;color:rgba(255,255,255,.58);margin-left:6px}
.plan .btn{width:100%;margin-top:14px;height:44px;border-radius:14px}

.glass{border-radius:22px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);padding:18px;box-shadow: var(--shadow);backdrop-filter: blur(12px)}
.glass.big{padding:22px}

.form{display:grid;gap:10px}
label{display:grid;gap:6px;color:rgba(255,255,255,.74);font-size:12.5px}
input,select,textarea{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.92);
  padding:12px 12px;
  font:inherit;
  outline:none;
}
textarea{min-height:120px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.check{grid-auto-flow:column;grid-template-columns: 18px 1fr;align-items:start;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.14)}
.check input{width:18px;height:18px;margin-top:2px}
.check a{color:rgba(25,182,255,.92);font-weight:850}

.notice{margin-top:10px;color:rgba(255,255,255,.78);font-size:13px;line-height:1.6}
.notice.ok{color:rgba(180,255,230,.92)}
.notice.bad{color:rgba(255,180,180,.92)}

.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pay-card{position:relative}
.pay-bank{font-weight:950;letter-spacing:.2px;margin-bottom:10px}
.pay-number{font-size:22px;font-weight:950;letter-spacing:.08em;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.16);cursor:pointer;user-select:all}
.pay-actions{margin-top:12px}
.pay-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay-meta span{display:block;color:rgba(255,255,255,.60);font-size:12px}
.pay-meta b{display:block;margin-top:6px}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contact-item{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.contact-item span{color:rgba(255,255,255,.62)}
.contact-item a{color:rgba(25,182,255,.92);font-weight:850}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}
.small{color:rgba(255,255,255,.62);font-size:13px;line-height:1.6;margin-top:10px}

.cta-fixed{position:fixed;right:16px;bottom:16px;display:grid;gap:10px;z-index:60}
.fab{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.40);backdrop-filter: blur(12px);
  color:rgba(255,255,255,.92);font-weight:850}
.fab small{font-weight:650;color:rgba(255,255,255,.70)}

.footer{border-top:1px solid rgba(255,255,255,.08);padding:34px 0;color:rgba(255,255,255,.62);background:rgba(0,0,0,.10)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot-links{display:flex;gap:12px;flex-wrap:wrap}
.foot-links a{padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}

@media (max-width: 1040px){
  .hero-inner{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .home-tariffs{grid-template-columns:repeat(2,1fr)}
  .pay-grid{grid-template-columns:1fr}
  .pay-meta{grid-template-columns:1fr}
  .hero h1{font-size:44px}
}
@media (max-width: 640px){
  .nav{flex-direction:column;align-items:flex-start}
  .navlinks{width:100%}
  .navlinks a{flex:1;text-align:center}
  .hero{min-height: auto; padding-top: 18px}
  .hero h1{font-size:36px}
  .hero h2{font-size:18px}
  .row{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .home-tariffs{grid-template-columns:1fr}
  .cta-fixed{right:12px;left:12px}
  .fab{width:100%}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}