:root{
  --bg:#0b1020;
  --paper:#ffffff;
  --paper2:#f6f8fd;
  --ink:#0b1220;
  --ink2:#111a2f;
  --muted:#5b667a;
  --line:rgba(15,23,42,.12);
  --shadow: 0 18px 55px rgba(2,8,23,.12);
  --shadow2: 0 10px 22px rgba(2,8,23,.10);
  --r12:12px;
  --r16:16px;
  --r20:20px;
  --r24:24px;
  --container: 1160px;

  /* brand-ish accents (adaptable) */
  --accent:#7c3aed;
  --accent2:#22c55e;
  --accent3:#06b6d4;
  --accentInk:#2b125a;

  --t: 160ms;
  --ease: cubic-bezier(.2,.9,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.12), transparent 65%),
              radial-gradient(1100px 550px at 90% 5%, rgba(6,182,212,.10), transparent 60%),
              var(--paper);
  line-height:1.45;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{width:min(var(--container), calc(100% - 40px)); margin-inline:auto}

.skip{
  position:absolute; left:-999px; top:8px;
  padding:10px 12px; border-radius:10px;
  background:var(--ink); color:#fff; z-index:9999;
}
.skip:focus{left:12px}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{
  display:flex; align-items:center;
  padding:8px 10px;
  border-radius:14px;
  transition: background var(--t) var(--ease);
}
.brand:hover{background: rgba(15,23,42,.04)}
.brand img{height:36px; width:auto}

.navMenu{
  display:flex; align-items:center; gap:18px;
}
.navMenu a{
  font-weight:600;
  font-size:14px;
  color:rgba(17,26,47,.78);
  padding:10px 10px;
  border-radius:12px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.navMenu a:hover{background: rgba(15,23,42,.05); color:rgba(17,26,47,.95)}
.navMenu .cta{
  margin-left:6px;
  background: linear-gradient(135deg, rgba(124,58,237,1), rgba(6,182,212,1));
  color:#fff;
  padding:10px 14px;
  border-radius:14px;
  box-shadow: 0 10px 26px rgba(124,58,237,.22);
}
.navMenu .cta:hover{filter:saturate(1.05) brightness(1.02)}

.navToggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.8);
  box-shadow: 0 6px 18px rgba(2,8,23,.06);
  cursor:pointer;
}
.navToggle span{
  display:block;
  width:18px;
  height:2px;
  margin:4px auto;
  background: rgba(17,26,47,.78);
  border-radius:2px;
}

.hero{
  position:relative;
  padding: 44px 0 28px;
  overflow:hidden;
}
.heroBg{position:absolute; inset:0; pointer-events:none}
.gridDots{
  position:absolute; inset:-40px -40px auto auto;
  width: 520px; height: 260px;
  background-image: radial-gradient(rgba(15,23,42,.14) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.35;
  mask-image: radial-gradient(circle at 30% 30%, #000 40%, transparent 72%);
  transform: rotate(-8deg);
}
.glow{
  position:absolute;
  width: 620px; height: 620px;
  border-radius: 999px;
  filter: blur(36px);
  opacity:.45;
}
.glowA{left:-220px; top:-220px; background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.75), transparent 60%)}
.glowB{right:-240px; top:-200px; background: radial-gradient(circle at 35% 35%, rgba(6,182,212,.75), transparent 60%)}
.ring{
  position:absolute;
  border-radius: 999px;
  border:1px solid rgba(124,58,237,.18);
  box-shadow: inset 0 0 0 1px rgba(6,182,212,.12);
  opacity:.6;
}
.ringA{width: 520px; height:520px; left:-120px; bottom:-260px}
.ringB{width: 420px; height:420px; right:-160px; bottom:-240px; border-color: rgba(6,182,212,.18)}

.heroGrid{
  position:relative;
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 36px;
  align-items:center;
}
.heroCopy{padding: 8px 0}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(124,58,237,.18);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 28px rgba(2,8,23,.06);
  font-weight:700;
  font-size:13px;
  color: rgba(17,26,47,.82);
}
.pillDot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  box-shadow: 0 0 0 4px rgba(124,58,237,.10);
}
h1{
  margin: 16px 0 10px;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height:1.02;
  letter-spacing: -0.03em;
}
.accent{
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{
  margin: 0;
  font-size: 16.5px;
  color: rgba(17,26,47,.78);
  max-width: 56ch;
}
.heroActions{
  display:flex;
  gap:12px;
  margin-top: 18px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 16px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.9);
  color: rgba(17,26,47,.92);
  font-weight:800;
  font-size: 14px;
  cursor:pointer;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  box-shadow: 0 10px 22px rgba(2,8,23,.08);
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn.primary{
  border:0;
  background: linear-gradient(135deg, rgba(124,58,237,1), rgba(6,182,212,1));
  color:#fff;
  box-shadow: 0 16px 40px rgba(124,58,237,.22);
}
.btn.ghost{
  background: rgba(255,255,255,.75);
}
.btn.full{width:100%}

.heroStats{
  margin-top: 18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.stat{
  flex: 0 0 auto;
  min-width: 160px;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.76);
  box-shadow: 0 14px 34px rgba(2,8,23,.07);
}
.statValue{font-size:18px; font-weight:900; letter-spacing:-.02em}
.statLabel{margin-top:2px; font-size:12.5px; font-weight:700; color: rgba(17,26,47,.64)}

.trustRow{
  margin-top: 14px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.trustPill{
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  font-size:12px;
  font-weight:800;
  color: rgba(17,26,47,.72);
}

/* hero visual: layered cards */
.heroVisual{
  position:relative;
  height: 520px;
  min-height: 420px;
}
.stackCard{
  position:absolute;
  width: min(380px, 100%);
  border-radius: 22px;
  border:1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(120% 80% at 80% 10%, rgba(6,182,212,.14), transparent 60%),
    rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
  overflow:hidden;
}
.stackTop{
  display:flex;
  gap:12px;
  align-items:center;
}
.stackIcon{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(6,182,212,.14));
  border:1px solid rgba(15,23,42,.10);
  color: rgba(17,26,47,.85);
}
.stackIcon svg{width:22px; height:22px; color: rgba(17,26,47,.82)}
.stackTitle{font-weight:900; letter-spacing:-.02em}
.stackMeta{font-size:12.5px; font-weight:700; color: rgba(17,26,47,.62); margin-top:2px}

.c1{left:0; top: 56px}
.c2{right:0; top: 18px}
.c3{left:28px; bottom: 52px}
.c4{right: 22px; bottom: 22px}

.sparkline{
  margin-top: 14px;
  display:flex;
  gap:6px;
  align-items:flex-end;
  height: 54px;
}
.sparkline span{
  width: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(124,58,237,.9), rgba(6,182,212,.9));
  opacity:.9;
}
.sparkline span:nth-child(1){height:20%}
.sparkline span:nth-child(2){height:40%}
.sparkline span:nth-child(3){height:32%}
.sparkline span:nth-child(4){height:66%}
.sparkline span:nth-child(5){height:52%}
.sparkline span:nth-child(6){height:80%}
.sparkline span:nth-child(7){height:62%}
.sparkline span:nth-child(8){height:92%}

.miniGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
}
.miniGrid div{
  height: 34px;
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.55);
}
.miniGrid div:nth-child(2){background: rgba(124,58,237,.10)}
.miniGrid div:nth-child(5){background: rgba(6,182,212,.10)}

.barRow{
  margin-top: 14px;
  display:flex;
  gap:8px;
  align-items:flex-end;
  height: 56px;
}
.barRow i{
  flex:1;
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.55);
}
.barRow i:nth-child(1){height:26%}
.barRow i:nth-child(2){height:44%}
.barRow i:nth-child(3){height:68%; background: rgba(124,58,237,.10)}
.barRow i:nth-child(4){height:52%}
.barRow i:nth-child(5){height:80%; background: rgba(6,182,212,.10)}

.tagRow{
  margin-top: 12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tagRow span{
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.60);
  font-weight:900;
  font-size:12px;
  color: rgba(17,26,47,.70);
}

/* sections */
.section{padding: 54px 0}
.section.alt{
  background: radial-gradient(800px 520px at 10% 10%, rgba(124,58,237,.08), transparent 60%),
              radial-gradient(900px 540px at 90% 20%, rgba(6,182,212,.07), transparent 62%),
              var(--paper2);
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.sectionHead{max-width: 66ch}
h2{
  margin:0;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.02em;
  line-height:1.12;
}
.sectionLead{
  margin: 10px 0 0;
  color: rgba(17,26,47,.72);
  font-weight:600;
}

.cards3{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.card{
  border:1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 16px 48px rgba(2,8,23,.08);
  padding: 18px;
}
.cardIcon{
  width: 44px; height:44px;
  border-radius: 16px;
  display:grid; place-items:center;
  border:1px solid rgba(15,23,42,.10);
  background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(6,182,212,.12));
  font-weight:900;
  color: rgba(17,26,47,.78);
}
h3{margin: 12px 0 8px; font-size: 18px; letter-spacing:-.01em}
.card p{margin:0; color: rgba(17,26,47,.74); font-weight:600}
.bullets{
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(17,26,47,.70);
  font-weight:700;
}
.bullets li{margin: 8px 0}
.bullets li::marker{color: rgba(124,58,237,.9)}

.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items:start;
  margin-top: 18px;
}
.featureList{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}
.feature{
  padding: 14px 14px;
  border-radius: 18px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
}
.fTitle{font-weight:900; letter-spacing:-.01em}
.fText{margin-top:4px; color: rgba(17,26,47,.70); font-weight:650; font-size:14px}

.panel{
  border-radius: 24px;
  border:1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(120% 90% at 80% 10%, rgba(6,182,212,.14), transparent 60%),
    rgba(255,255,255,.78);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panelHead{padding:18px 18px 10px}
.panelKicker{font-size:12px; font-weight:900; color: rgba(17,26,47,.64); text-transform:uppercase; letter-spacing:.08em}
.panelTitle{margin-top:6px; font-size:18px; font-weight:950; letter-spacing:-.01em}
.panelMeta{margin-top:6px; color: rgba(17,26,47,.70); font-weight:650; font-size:14px}
.panelGrid{
  padding: 8px 18px 10px;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.tile{
  height: 64px;
  border-radius: 18px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.55);
}
.t1{grid-column: span 2}
.t2{grid-column: span 4; background: rgba(124,58,237,.10)}
.t3{grid-column: span 3}
.t4{grid-column: span 3; background: rgba(6,182,212,.10)}
.t5{grid-column: span 4}
.t6{grid-column: span 2}

.panelFooter{
  padding: 0 18px 18px;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.chip{
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  font-size:12px;
  font-weight:900;
  color: rgba(17,26,47,.72);
}

.quotes{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.quote{
  margin:0;
  border-radius: 22px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 16px 48px rgba(2,8,23,.08);
  padding: 18px;
}
.quote blockquote{
  margin:0;
  font-size: 15px;
  color: rgba(17,26,47,.82);
  font-weight:700;
}
.quote figcaption{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:baseline;
  color: rgba(17,26,47,.70);
  font-weight:800;
  font-size: 13px;
}
.qRole{font-weight:700; color: rgba(17,26,47,.55)}

.logos{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.logoBadge{
  padding: 10px 12px;
  border-radius: 16px;
  border:1px dashed rgba(15,23,42,.16);
  background: rgba(255,255,255,.60);
  font-weight:900;
  font-size:12.5px;
  color: rgba(17,26,47,.68);
}

/* CTA + form */
.ctaSection{
  padding: 58px 0;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(124,58,237,.14), transparent 60%),
    radial-gradient(900px 520px at 85% 30%, rgba(6,182,212,.12), transparent 60%),
    linear-gradient(180deg, rgba(246,248,253,1), rgba(255,255,255,1));
  border-top:1px solid rgba(15,23,42,.06);
}
.ctaGrid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 18px;
  align-items:start;
}
.miniPoints{margin-top: 14px; display:grid; gap: 10px}
.miniPoint{
  padding: 12px 12px;
  border-radius: 18px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  font-weight:800;
  color: rgba(17,26,47,.76);
}
.miniPoint span{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:8px; background: rgba(124,58,237,.12); margin-right:8px}

.formCard{
  border-radius: 24px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  padding: 18px;
}
.form{
  display:grid;
  gap: 12px;
}
label span{
  display:block;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: rgba(17,26,47,.62);
  margin-bottom: 6px;
}
input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  font: inherit;
  font-weight:650;
  color: rgba(17,26,47,.92);
  outline:none;
  box-shadow: 0 8px 18px rgba(2,8,23,.05);
  transition: border var(--t) var(--ease), transform var(--t) var(--ease);
}
textarea{resize:vertical; min-height: 110px}
input:focus, select:focus, textarea:focus{
  border-color: rgba(124,58,237,.45);
}
.formFineprint{
  font-size:12.5px;
  font-weight:650;
  color: rgba(17,26,47,.60);
  margin-top: -4px;
}

/* footer */
.footer{
  padding: 26px 0;
  background: rgba(255,255,255,.9);
  border-top: 1px solid rgba(15,23,42,.08);
}
.footerGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr 1fr;
  gap: 14px;
  align-items:center;
}
.footerBrand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.footerBrand img{height:30px; width:auto}
.footerMeta{
  font-weight:800;
  color: rgba(17,26,47,.66);
  font-size:13px;
}
.footerLinks{display:flex; gap: 10px; flex-wrap:wrap; justify-content:center}
.footerLinks a{
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.78);
  font-size:13px;
  font-weight:800;
  color: rgba(17,26,47,.70);
}
.footerLinks a:hover{background: rgba(15,23,42,.05)}
.footerCopy{
  text-align:right;
  font-size: 13px;
  font-weight:800;
  color: rgba(17,26,47,.60);
}

/* responsive */
@media (max-width: 980px){
  .heroGrid{grid-template-columns: 1fr; gap: 22px}
  .heroVisual{height: 460px}
  .c1{left:0; top:0}
  .c2{right:0; top: 86px}
  .c3{left:0; bottom: 0}
  .c4{right:0; bottom: 44px}
  .cards3{grid-template-columns: 1fr; gap: 12px}
  .split{grid-template-columns: 1fr; gap: 14px}
  .ctaGrid{grid-template-columns: 1fr}
  .footerGrid{grid-template-columns: 1fr; text-align:left}
  .footerLinks{justify-content:flex-start}
  .footerCopy{text-align:left}
}

@media (max-width: 760px){
  .navToggle{display:block}
  .navMenu{
    position: fixed;
    left: 12px;
    right: 12px;
    top: 70px;
    display:grid;
    gap: 6px;
    padding: 10px;
    border-radius: 20px;
    border:1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.92);
    box-shadow: 0 22px 70px rgba(2,8,23,.18);
    transform: translateY(-14px);
    opacity:0;
    pointer-events:none;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  }
  .navMenu a{padding:12px 12px; font-size:14px}
  .navMenu .cta{margin-left:0; text-align:center}
  .menuOpen .navMenu{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
  }
  .hero{padding-top: 30px}
  .heroVisual{height: 520px}
  .stackCard{width: calc(100% - 6px)}
  .c1{left:0; top:0}
  .c2{left:0; top: 138px}
  .c4{left:0; top: 276px}
  .c3{left:0; top: 414px}
  .stat{min-width: 148px}
}


/* Contact form (HostGator / PHP) helpers */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formStatus {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.formStatus.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.formStatus[data-kind="ok"] {
  border-color: rgba(80, 220, 160, .35);
  background: rgba(80, 220, 160, .10);
}

.formStatus[data-kind="err"] {
  border-color: rgba(255, 120, 120, .35);
  background: rgba(255, 120, 120, .10);
}