
:root{
  --bg:#040814;
  --bg-2:#0a1227;
  --panel:rgba(12,20,44,.78);
  --panel-2:rgba(15,24,52,.92);
  --text:#f4f7ff;
  --muted:#aab6db;
  --line:rgba(116,148,255,.16);
  --cyan:#57e9ff;
  --blue:#2f8fff;
  --indigo:#4d5dff;
  --purple:#d24cff;
  --pink:#ff4fd8;
  --success:#4effb5;
  --shadow:0 24px 50px rgba(0,0,0,.35);
  --radius:24px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(87,233,255,.12), transparent 26%),
    radial-gradient(circle at 92% 0%, rgba(210,76,255,.15), transparent 28%),
    linear-gradient(180deg, #030611 0%, #081121 42%, #0b1330 100%);
  line-height:1.62;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
.container{width:min(calc(100% - 32px), var(--max));margin:0 auto}
.section{padding:42px 0}
.card,.panel,.service-card,.legal-card,.contact-card,.price-card,.resource-card,.mini-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}
.topbar{
  position:sticky;top:0;z-index:1000;
  background:rgba(3,8,20,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{
  min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 0 24px rgba(82,147,255,.24))}
.brand-text strong{display:block;font-size:1.05rem;letter-spacing:.06em}
.brand-text span{display:block;font-size:.78rem;color:var(--muted)}
.menu-toggle{
  display:none;background:transparent;border:1px solid var(--line);color:var(--text);
  width:48px;height:48px;border-radius:14px;align-items:center;justify-content:center;cursor:pointer;
}
.menu-toggle span,.menu-toggle span:before,.menu-toggle span:after{
  display:block;width:22px;height:2px;background:var(--text);border-radius:3px;position:relative;content:"";
}
.menu-toggle span:before{position:absolute;top:-7px}
.menu-toggle span:after{position:absolute;top:7px}
.nav-shell{display:flex;align-items:center;justify-content:flex-end;flex:1}
.nav-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:30px;color:var(--muted);font-weight:600;flex:1}
.nav-links a{padding:8px 0;position:relative}
.nav-links a.active,.nav-links a:hover{color:var(--text)}
.nav-links a.active:after,.nav-links a:hover:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
}
.dropdown{position:relative}
.dropdown > a:after{content:" ▾";font-size:.8em}
.dropdown-menu{
  display:none;position:absolute;top:calc(100% + 10px);left:0;min-width:240px;padding:12px;
  background:rgba(11,18,39,.98);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
}
.dropdown-menu a{display:block;padding:10px 12px;border-radius:12px}
.dropdown-menu a:hover{background:rgba(255,255,255,.05)}
.dropdown:hover .dropdown-menu{display:block}
.nav-cta{display:flex;gap:12px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 18px;border-radius:999px;font-weight:800;
  border:1px solid transparent;cursor:pointer;transition:.18s ease transform,.18s ease border-color,.18s ease opacity;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--blue) 48%,var(--purple));color:#050915}
.btn-secondary{background:rgba(255,255,255,.03);border-color:var(--line);color:var(--text)}
.btn-outline{background:transparent;border-color:rgba(87,233,255,.24);color:var(--cyan)}
.badge{
  display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(87,233,255,.18);background:rgba(87,233,255,.08);color:var(--cyan);
  text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-size:.78rem
}
.word-art,.section h2 .accent,.page-title .accent,.hero h1 .accent{
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--purple),var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero{padding:86px 0 56px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
h1,h2,h3,h4{line-height:1.08;margin:0 0 14px}
h1{font-size:clamp(2.4rem,5vw,5rem);letter-spacing:-.045em}
h2{font-size:clamp(1.8rem,3vw,3rem);letter-spacing:-.03em}
h3{font-size:1.18rem}
.lead,.page-intro,.section-head p,.service-card p,.panel p,.contact-card p,.legal-card p,.resource-card p,.mini-card p,.faq-item p,.price-card p{color:var(--muted)}
.hero p{max-width:65ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.notice{
  margin-top:18px;padding:16px 18px;border-radius:18px;border:1px dashed rgba(116,148,255,.2);
  background:rgba(255,255,255,.03);color:var(--muted)
}
.hero-card{padding:26px;display:grid;place-items:center;min-height:100%;position:relative;overflow:hidden}
.hero-card:before{
  content:"";position:absolute;inset:auto -100px -100px auto;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle, rgba(210,76,255,.2), transparent 66%);
}
.logo-hero{width:min(100%,440px);filter:drop-shadow(0 0 40px rgba(82,147,255,.18))}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.service-card,.panel,.contact-card,.legal-card,.price-card,.resource-card,.mini-card{padding:24px}
.section-head{max-width:780px;margin-bottom:26px}
.icon-badge{
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(87,233,255,.18), rgba(210,76,255,.16));
  border:1px solid rgba(116,148,255,.16);font-weight:900;margin-bottom:16px
}
.list-clean{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.list-clean li,.check-list li{
  padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)
}
.check-list{padding-left:18px;margin:16px 0 0}
.process{display:grid;gap:14px}
.step{
  display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;
  padding:16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)
}
.step-num{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--cyan),var(--indigo),var(--purple));
  color:#ffffff;font-weight:900;font-size:clamp(1.8rem,2.6vw,2.2rem);line-height:1
}
.mega-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.quick-link{
  padding:18px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)
}
.quick-link strong{display:block;margin-bottom:6px}
.quick-link span{display:block;color:var(--muted);font-size:.95rem}
.quote-box{
  padding:20px;border-radius:20px;background:linear-gradient(135deg, rgba(87,233,255,.08), rgba(210,76,255,.08));
  border:1px solid rgba(116,148,255,.16)
}
.page-hero{padding:72px 0 26px}
.page-title{max-width:16ch}
.split-hero{display:grid;grid-template-columns:1fr .8fr;gap:20px;align-items:center}
.contact-form{display:grid;gap:14px}
.field{display:grid;gap:8px}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);color:var(--text)
}
.field textarea{min-height:160px;resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.faq-list{display:grid;gap:14px}
.faq-item{padding:22px}
.resource-card h3,.price-card h3{margin-bottom:8px}
.tag{
  display:inline-flex;padding:7px 12px;border-radius:999px;background:rgba(210,76,255,.12);
  border:1px solid rgba(210,76,255,.2);color:#f0c1ff;font-weight:800;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px
}
.price-card.featured{border-color:rgba(210,76,255,.45)}
.buy-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.resource-actions,.buy-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.table-like{display:grid;gap:10px;margin-top:16px}
.table-like div{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.footer{margin-top:28px;border-top:1px solid var(--line);padding:28px 0 44px}
.footer-grid{display:grid;grid-template-columns:1.1fr .8fr .8fr .8fr;gap:20px}
.footer p,.footer li{color:var(--muted)}
.footer ul{padding-left:18px;margin:0}
.legal-strip{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);color:#8fa1cf;font-size:.9rem}
.email-link{color:var(--cyan)}
.center{text-align:center}
.small{font-size:.92rem}
.kicker{font-weight:800;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}
@media (max-width:1100px){
  .hero-grid,.grid-4,.grid-3,.grid-2,.footer-grid,.buy-grid,.split-hero,.form-grid,.mega-links{grid-template-columns:1fr}
}
@media (max-width:900px){
  .menu-toggle{display:inline-flex}
  .nav{padding:14px 0;align-items:flex-start}
  .nav-shell{
    position:absolute;left:0;right:0;top:84px;background:rgba(4,8,20,.98);border-bottom:1px solid var(--line);
    padding:18px 16px 20px;display:none;flex-direction:column;align-items:flex-start
  }
  .nav-shell.open{display:flex}
  .nav-links{width:100%;flex-direction:column;align-items:flex-start;gap:10px}
  .nav-links a{width:100%}
  .dropdown{width:100%}
  .dropdown-menu{position:static;display:block;min-width:auto;padding:8px 0 0;border:none;box-shadow:none;background:transparent}
}
@media (max-width:560px){
  .container{width:min(calc(100% - 20px),var(--max))}
  .hero{padding-top:64px}
  .btn{width:100%}
  .hero-actions,.buy-actions,.resource-actions{flex-direction:column}
  h1{font-size:clamp(2.2rem,8vw,3.2rem)}
}
