
:root{
  --bg:#07111c;
  --bg-soft:#0d1726;
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.10);
  --text:#edf4ff;
  --muted:#a8b7cf;
  --primary:#2d7ff0;
  --primary-strong:#1f5fc4;
  --primary-soft:#58c8ff;
  --success:#27ae60;
  --danger:#d9534f;
  --shadow:0 24px 70px rgba(0,0,0,.28);
  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:18px;
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(88,200,255,.16), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(45,127,240,.14), transparent 26%),
    linear-gradient(180deg, #07111c 0%, #0b1524 50%, #07111c 100%);
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
.container{width:min(calc(100% - 32px), var(--container));margin:0 auto}
.topbar{
  position:sticky;top:0;z-index:1000;background:rgba(7,17,28,.78);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08)
}
.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand-mark{
  width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-soft));
  box-shadow:0 14px 28px rgba(45,127,240,.34);position:relative;overflow:hidden
}
.brand-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg, rgba(255,255,255,.24), transparent 55%)}
.brand-text strong{display:block;font-size:1rem;letter-spacing:.02em}
.brand-text span{display:block;font-size:.82rem;color:var(--muted)}
.nav-toggle{
  display:none;width:48px;height:48px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04);
  color:#fff;align-items:center;justify-content:center;cursor:pointer;padding:0
}
.nav-toggle svg{width:22px;height:22px}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:18px 22px}
.nav-links.mobile-open{display:flex}
.nav-links a{color:var(--muted);font-size:.95rem;transition:color .2s ease, opacity .2s ease}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a.active{color:#fff}
.nav-cta,.btn-primary,.btn-secondary,.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:999px;
  font-weight:700;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease
}
.nav-cta,.btn-primary{
  color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-soft));box-shadow:0 14px 30px rgba(45,127,240,.28)
}
.btn-secondary,.btn-outline{color:#fff;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.nav-cta:hover,.btn-primary:hover,.btn-secondary:hover,.btn-outline:hover{transform:translateY(-1px)}
.hero{padding:78px 0 52px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr);gap:34px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:#d8e8ff;font-size:.92rem;margin-bottom:20px
}
.eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-soft));
  box-shadow:0 0 0 8px rgba(88,200,255,.08)
}
h1{margin:0 0 20px;font-size:clamp(2.4rem,5vw,4.6rem);line-height:.98;letter-spacing:-.05em;max-width:13ch}
h1 span{
  background:linear-gradient(135deg,#fff 15%,#b5ddff 55%,#58c8ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-copy{margin:0 0 26px;color:var(--muted);font-size:1.08rem;max-width:66ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.hero-stats,.grid-3,.grid-2,.services-grid,.mini-grid,.breadcrumbs,.info-grid,.use-grid,.feature-grid,.kpi-grid{
  display:grid;gap:14px
}
.hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat,.card,.feature-card,.mini-card,.service-card,.content-box,.offer-item,.faq-item,.kpi-card{
  border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.04)
}
.stat{padding:18px}
.stat strong{display:block;font-size:1.04rem;margin-bottom:5px}
.stat span{display:block;font-size:.92rem;color:var(--muted)}
.hero-panel{
  position:relative;border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  padding:26px;overflow:hidden;box-shadow:var(--shadow);min-height:540px
}
.hero-panel::before{
  content:"";position:absolute;width:340px;height:340px;right:-80px;top:-110px;
  background:radial-gradient(circle, rgba(88,200,255,.28), transparent 62%);pointer-events:none
}
.hero-panel::after{
  content:"";position:absolute;width:280px;height:280px;left:-70px;bottom:-120px;
  background:radial-gradient(circle, rgba(45,127,240,.22), transparent 64%);pointer-events:none
}
.panel-shell{position:relative;z-index:1;display:grid;gap:16px}
.panel-card,.mini-card{border-radius:22px;border:1px solid rgba(255,255,255,.09);background:rgba(8,18,31,.72);backdrop-filter:blur(8px)}
.panel-card{padding:22px}
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.panel-top h2,.section-head h2,.section-title{margin:0;font-size:clamp(1.8rem,4vw,3rem);line-height:1.05;letter-spacing:-.04em}
.panel-top .small{font-size:1.08rem;letter-spacing:0}
.panel-badge{padding:8px 12px;border-radius:999px;font-size:.8rem;color:#dff2ff;background:rgba(88,200,255,.12);border:1px solid rgba(88,200,255,.2)}
.infra-map{display:grid;gap:14px}
.infra-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.infra-node{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.infra-node strong{display:block;font-size:.96rem;margin-bottom:4px}
.infra-node span{display:block;color:var(--muted);font-size:.88rem}
.infra-link{width:40px;height:2px;background:linear-gradient(90deg, rgba(88,200,255,.2), rgba(88,200,255,.9), rgba(88,200,255,.2));border-radius:999px}
.mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mini-card{padding:16px}
.mini-card strong{display:block;margin-bottom:4px;font-size:.92rem}
.mini-card span{display:block;color:var(--muted);font-size:.85rem}
section{padding:46px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:24px}
.section-head p,.section-intro,.lead{margin:10px 0 0;color:var(--muted);max-width:74ch}
.services-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.service-card{height:100%;padding:24px;background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));box-shadow:var(--shadow);transition:transform .25s ease,border-color .25s ease}
.service-card:hover{transform:translateY(-4px);border-color:rgba(88,200,255,.24)}
.icon-wrap{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg, rgba(45,127,240,.22), rgba(88,200,255,.18));
  border:1px solid rgba(255,255,255,.08);margin-bottom:18px
}
.service-card h3,.card h3,.feature-card h3,.kpi-card h3{margin:0 0 10px;font-size:1.16rem}
.service-card p,.card p,.feature-card p,.kpi-card p,.content-box p,.faq-item p{margin:0 0 16px;color:var(--muted);font-size:.96rem}
.service-card ul,.check-list,.service-bullets,.faq-list{
  margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:.93rem;color:#d8e8ff
}
.service-card li,.check-list li,.service-bullets li{position:relative;padding-left:18px}
.service-card li::before,.check-list li::before,.service-bullets li::before{
  content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-soft))
}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card,.feature-card,.content-box,.faq-item,.kpi-card{padding:24px}
.section-alt{
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015))
}
.quote-card{
  margin-top:18px;padding:20px 22px;border-left:3px solid var(--primary-soft);border-radius:18px;background:rgba(255,255,255,.03);color:#dbe8ff
}
.breadcrumbs{grid-auto-flow:column;justify-content:start;align-items:center;font-size:.9rem;color:var(--muted);margin-bottom:18px}
.breadcrumbs span.sep{opacity:.5}
.page-hero{padding:54px 0 26px}
.page-hero h1{max-width:14ch}
.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi-card strong{display:block;font-size:1.6rem;line-height:1;margin-bottom:8px}
.faq-item h3{margin:0 0 8px}
.offer-section{padding-top:28px;padding-bottom:78px}
.offer-wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:22px;align-items:stretch}
.offer-info,.offer-form,.benefit-box{
  border-radius:var(--radius-xl);border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));box-shadow:var(--shadow)
}
.offer-info,.offer-form,.benefit-box{padding:28px}
.offer-info-grid{display:grid;gap:14px;margin-top:18px}
.offer-item{padding:16px 18px}
.offer-item strong{display:block;margin-bottom:6px}
.offer-item span{display:block;color:var(--muted);font-size:.94rem}
form{display:grid;gap:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:8px;font-size:.95rem;font-weight:600}
input,textarea,select{
  width:100%;min-height:56px;padding:14px 16px;color:#fff;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;outline:none;transition:border-color .2s ease, background .2s ease, transform .2s ease
}
select option{color:#111}
textarea{min-height:160px;resize:vertical}
input::placeholder,textarea::placeholder{color:#8fa4c5}
input:focus,textarea:focus,select:focus{border-color:rgba(88,200,255,.8);background:rgba(255,255,255,.08)}
.consent{display:flex;align-items:flex-start;gap:12px;font-size:.92rem;color:var(--muted)}
.consent input{width:18px;min-height:18px;padding:0;margin-top:3px;border-radius:6px;flex:0 0 auto}
.submit-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.form-note{color:var(--muted);font-size:.9rem}
.alert{margin-bottom:16px;padding:14px 16px;border-radius:14px}
.alert.success{background:rgba(39,174,96,.15);border:1px solid rgba(39,174,96,.4);color:#b8f5d1}
.alert.error{background:rgba(217,83,79,.15);border:1px solid rgba(217,83,79,.4);color:#ffd1cc}
footer{padding:26px 0 36px;border-top:1px solid rgba(255,255,255,.08);color:var(--muted);font-size:.92rem}
.footer-wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
@media (max-width:1180px){
  .services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-grid,.offer-wrap,.grid-2{grid-template-columns:1fr}
  .hero-panel{min-height:auto}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .topbar{padding:8px 0}
  .nav{min-height:64px;align-items:center;flex-direction:row;padding:0}
  .brand-mark{width:38px;height:38px;border-radius:12px}
  .brand-text strong{font-size:.95rem}
  .brand-text span{font-size:.76rem}
  .nav-toggle{display:inline-flex}
  .nav-links{
    display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:1001;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:10px;padding:14px;border:1px solid rgba(255,255,255,.10);border-radius:20px;
    background:rgba(7,17,28,.97);backdrop-filter:blur(14px);box-shadow:0 20px 40px rgba(0,0,0,.28)
  }
  .nav-links a{width:100%;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03)}
  .nav-links .nav-cta{width:100%}
  .hero{padding-top:42px}
  .hero-stats,.form-grid,.mini-grid,.grid-3,.kpi-grid{grid-template-columns:1fr}
  .section-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .container{width:min(calc(100% - 20px), var(--container))}
  .services-grid{grid-template-columns:1fr}
  h1{max-width:100%}
  .hero-actions,.submit-row{display:grid;grid-template-columns:1fr}
  .nav-cta,.btn-primary,.btn-secondary,.btn-outline{width:100%}
  .infra-row{grid-template-columns:1fr}
  .infra-link{width:2px;height:28px;margin:0 auto;background:linear-gradient(180deg, rgba(88,200,255,.2), rgba(88,200,255,.9), rgba(88,200,255,.2))}
}
