:root{
  --bg:#0b0c10;
  --panel:#10131a;
  --panel2:#0f1117;
  --text:#e8e9ee;
  --muted:#b6b8c5;
  --line:#232737;
  --brand:#4cc9f0;
  --brand2:#3df2c4;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(900px 550px at 15% 0%, rgba(76,201,240,.28), transparent 60%),
    radial-gradient(1100px 650px at 105% 15%, rgba(61,242,196,.22), transparent 60%),
    radial-gradient(800px 520px at 70% 110%, rgba(76,201,240,.18), transparent 55%),
    radial-gradient(700px 460px at -10% 70%, rgba(61,242,196,.14), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.9}
.container{width:min(1240px, 94vw); margin:0 auto;}

.site-header{position:sticky; top:0; z-index:10; backdrop-filter: blur(10px); background: rgba(11,12,16,.65); border-bottom: 1px solid rgba(35,39,55,.6);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.brand-mark{display:inline-flex; width:34px; height:34px; border-radius:10px; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow: var(--shadow);}
.brand-text{font-size:16px}

.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--muted); font-weight:600}
.nav a:hover{color:var(--text)}
.nav-cta{padding:10px 14px; border-radius:12px; border:1px solid rgba(76,201,240,.55); color:var(--text) !important; background: rgba(76,201,240,.12)}

.nav-toggle{display:none; background:transparent; border:1px solid rgba(35,39,55,.9); color:var(--text); border-radius:12px; padding:8px 10px;}

.hero{padding:56px 0 26px;}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:start}
.hero-top{margin-bottom:18px;}
.pill-top{display:block; text-align:center;}

.pill{display:inline-block; padding:10px 14px; border-radius:999px; background: rgba(16,19,26,.7); border:1px solid rgba(35,39,55,.8); color:var(--muted)}
.pill strong{color:var(--text)}
.hero h1{font-size:44px; line-height:1.08; margin:14px 0 10px;}
.sub{color:var(--muted); font-size:18px; max-width:60ch}
.hero-actions{display:flex; gap:12px; margin:18px 0 14px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:14px; border:1px solid rgba(35,39,55,.9); background: rgba(16,19,26,.75); font-weight:700}
.btn.primary{background: linear-gradient(135deg, var(--brand), var(--brand2)); border-color: transparent;}
.btn.block{width:100%}

.btn, .nav-cta{
  min-height:44px;
  line-height:1;
}
.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.trust{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.trust-item{padding:8px 12px; border-radius:999px; background: rgba(16,19,26,.6); border:1px solid rgba(35,39,55,.7); color:var(--muted); font-weight:600}

.hero-card{background: rgba(16,19,26,.78); border:1px solid rgba(35,39,55,.85); border-radius:18px; padding:18px; box-shadow: var(--shadow)}
.hero-card h3{margin:0 0 10px}
.hero-card ul{margin:0 0 16px; padding-left:18px; color:var(--muted)}
.hero-card .btn{margin-top:6px;}
.fine{color:var(--muted); font-size:13px; margin-top:10px}

.section{padding:54px 0}
.section.alt{background: rgba(16,19,26,.35); border-top:1px solid rgba(35,39,55,.45); border-bottom:1px solid rgba(35,39,55,.45)}
.section h2{font-size:30px; margin:0 0 8px}
.muted{color:var(--muted); margin-top:0}

.grid{display:grid; gap:14px}
.grid.cards{grid-template-columns: repeat(4, 1fr); margin-top:18px}
.card{display:flex; flex-direction:column; background: rgba(16,19,26,.78); border:1px solid rgba(35,39,55,.85); border-radius:18px; padding:18px; box-shadow: var(--shadow)}
.card h3{margin:0 0 8px}
.price{font-size:28px; margin:0 0 6px}
.price span{font-size:14px; color:var(--muted); font-weight:600}

.card p{margin:0 0 10px; color:var(--muted)}
.card p.price{color:var(--text)}
.checks{list-style:none; padding:0; margin:12px 0 0}
.checks li{margin:8px 0; padding-left:24px; position:relative; color:var(--muted)}
.checks li::before{content:"✓"; position:absolute; left:0; color:var(--brand2); font-weight:900}

.callout{display:flex; gap:18px; align-items:stretch; justify-content:space-between; margin-top:18px; padding:18px; border-radius:18px; background: linear-gradient(135deg, rgba(76,201,240,.18), rgba(61,242,196,.12)); border:1px solid rgba(35,39,55,.7)}
.callout-side{max-width:380px; display:flex; flex-direction:column; justify-content:space-between; gap:12px}
.bullets{margin:0; padding-left:18px; color:var(--muted)}

.grid.chips{grid-template-columns: repeat(4, 1fr); margin-top:18px}

.two-col{display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start; margin-top:14px}
.process{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.step{padding:10px 12px; border-radius:14px; border:1px solid rgba(35,39,55,.8); background: rgba(16,19,26,.6); color:var(--muted); font-weight:700}
.num{display:inline-flex; width:22px; height:22px; border-radius:999px; align-items:center; justify-content:center; background: rgba(124,92,255,.20); color:var(--text); margin-right:8px; border:1px solid rgba(124,92,255,.4)}

.form{background: rgba(16,19,26,.78); border:1px solid rgba(35,39,55,.85); border-radius:18px; padding:18px; box-shadow: var(--shadow)}
.form label{display:block; font-weight:700; margin:12px 0 8px}
.form input,.form select,.form textarea{
  width:100%; margin-top:6px; padding:12px 12px; border-radius:14px;
  border:1px solid rgba(35,39,55,.9); background: rgba(11,12,16,.65); color:var(--text);
}
.form textarea{resize:vertical}
.help{display:block; color:var(--muted); font-weight:600; font-size:12px; margin-top:6px}
.inline{display:flex !important; align-items:center; gap:10px; font-weight:700}
.inline input{width:auto; margin:0}
.honeypot{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}

.form-wide{max-width: 980px; margin: 0 auto}
.form-section{margin:22px 0 8px}
.form-grid{grid-template-columns: repeat(3, 1fr)}
.checkbox-grid{grid-template-columns: repeat(3, 1fr)}

.footer{padding:22px 0; border-top:1px solid rgba(35,39,55,.6); background: rgba(11,12,16,.75)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer-links{display:flex; gap:10px; align-items:center; color:var(--muted); flex-wrap:wrap}
.footer-links a{color:var(--muted); font-weight:700}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;}
  .grid.cards{grid-template-columns: repeat(2, 1fr)}
  .grid.chips{grid-template-columns: repeat(2, 1fr)}
  .two-col{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .checkbox-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 640px){
  .hero h1{font-size:34px}
  .grid.cards{grid-template-columns:1fr}
  .grid.chips{grid-template-columns:1fr}
  .checkbox-grid{grid-template-columns: 1fr}
  .nav{display:none; position:absolute; right:4vw; top:62px; flex-direction:column; background: rgba(11,12,16,.92); border:1px solid rgba(35,39,55,.9); padding:12px; border-radius:16px; width:min(92vw, 340px)}
  .nav a{padding:10px 10px; width:100%}
  .nav-toggle{display:inline-flex}
}


/* Industries marquee */
.marquee{
  position:relative;
  overflow:hidden;
  margin-top:18px;
  border-radius:18px;
  border:1px solid rgba(35,39,55,.65);
  background: rgba(16,19,26,.35);
}
.marquee::before, .marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:60px;
  z-index:2;
  pointer-events:none;
}
.marquee::before{left:0; background: linear-gradient(90deg, rgba(11,12,16,1), rgba(11,12,16,0));}
.marquee::after{right:0; background: linear-gradient(270deg, rgba(11,12,16,1), rgba(11,12,16,0));}

.marquee-track{
  display:flex;
  gap:12px;
  width:max-content;
  padding:16px;
  animation: marquee 24s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused;}

@keyframes marquee{
  0%{transform: translateX(0);}
  100%{transform: translateX(-50%);}
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(35,39,55,.75);
  background: rgba(16,19,26,.65);
  color:var(--text);
  white-space:nowrap;
  font-weight:700;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}

.inline-link{color:var(--text); text-decoration:underline; text-underline-offset:3px;}

.nav-login{padding:10px 12px; border-radius:12px; border:1px solid rgba(35,39,55,.9); background: rgba(16,19,26,.55); color:var(--text) !important;}

/* Full-bleed helper */
.full-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
}

/* Industries marquee */
.marquee{
  overflow:hidden;
  position:relative;
  padding:10px 0;
  border-radius:0;
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:0;
  animation: marquee 22s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state: paused;}
.marquee-group{
  display:flex;
  gap:14px;
  padding-left:14px;
}
@keyframes marquee{
  from{transform: translateX(0);}
  to{transform: translateX(-50%);}
}

/* --- Subtle animated background accents (Version 3 tweak) --- */
/* Keep the page mostly black, with small moving blue/green glow spots + a faint tech grid */

html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .10; /* faint grid */
  /* fade the grid so it’s not obvious */
  mask-image: radial-gradient(circle at 50% 20%, rgba(0,0,0,1) 0%, rgba(0,0,0,.8) 40%, rgba(0,0,0,0) 78%);
}

body::before,
body::after{
  content:"";
  position: fixed;
  width: 420px;
  height: 420px;
  filter: blur(170px);
  opacity: .18; /* subtle glow */
  z-index: -2;
  pointer-events: none;
  animation: nwGlowDrift 34s ease-in-out infinite alternate;
}

body::before{
  background: var(--brand);
  top: 14%;
  left: 6%;
  animation-duration: 40s;
}

body::after{
  background: var(--brand2);
  bottom: 10%;
  right: 6%;
  animation-duration: 46s;
}

@keyframes nwGlowDrift{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(120px,-90px) scale(1.18); }
  100%{ transform: translate(-80px,120px) scale(1); }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation: none; }
}


/* ===== Portfolio / Work section ===== */
.work-grid{display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:14px}
.work-card{
  border-radius:18px;
  border:1px solid rgba(35,39,55,.85);
  background: rgba(16,19,26,.70);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.work-thumb{height:170px; border-bottom:1px solid rgba(35,39,55,.65);
  background:
    radial-gradient(circle at 20% 20%, rgba(76,201,240,.22), transparent 58%),
    radial-gradient(circle at 80% 70%, rgba(61,242,196,.18), transparent 58%),
    rgba(11,12,16,.35);
}
.work-thumb.well{
  background:
    radial-gradient(circle at 18% 22%, rgba(76,201,240,.24), transparent 58%),
    radial-gradient(circle at 78% 72%, rgba(61,242,196,.18), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
}
.work-thumb.maad{
  background:
    radial-gradient(circle at 22% 28%, rgba(61,242,196,.20), transparent 58%),
    radial-gradient(circle at 76% 62%, rgba(76,201,240,.16), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
}
.work-body{padding:16px}
.work-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.work-top h3{margin:0}
.work-tag{
  font-size:12px; font-weight:800; color: var(--text);
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(35,39,55,.8);
  background: rgba(11,12,16,.35);
}
.work-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.chip.small{padding:8px 10px; font-size:12px}
.work-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

/* ===== Get Started (Landscape form) ===== */
.get-started-wrap{margin-top:14px}
.form.landscape{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.form.landscape label{margin:0}
.form.landscape .span-2{grid-column: 1 / -1}
.form.landscape .block{width:100%}
@media (max-width: 900px){
  .work-grid{grid-template-columns: 1fr}
  .form.landscape{grid-template-columns: 1fr}
}


/* Wider CTA form + spacing from buttons */
.cta-form{
    max-width:1200px;
    margin:60px auto 0 auto;
    padding:32px;
}


/* ===== Bottom CTA form width + spacing fix ===== */

.cta-form{
    width:100%;
    max-width:1180px;
    margin:80px auto 0 auto;
    padding:32px;
}

.cta-buttons{
    margin-bottom:50px;
}



/* ===== Fix: Build Your Website Today form spacing + full-width ===== */
#get-started .form-wide{
  max-width: var(--max);
  width: 100%;
  margin: 44px auto 0 auto; /* space from steps/buttons */
  padding: 0;
}

#get-started .get-started-head .process{
  margin-top: 14px;
  margin-bottom: 22px; /* adds breathing room before the form */
}

@media (max-width: 980px){
  #get-started .form-wide{
    margin-top: 28px;
  }
}