.elementor-13 .elementor-element.elementor-element-227bb48{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-92bc394 *//* ==========================================================
   HERO SECTION — CSS
   Nova Growth — palette: Digital Growth
   (Midnight Blue base / Neon Lime accent / Silver secondary)
   ========================================================== */

/* ---------- tokens ---------- */
:root{
  --bg:#0B132B;
  --bg-2:#0E1731;
  --line: rgba(141,153,174,0.18);
  --accent:#00FF66;
  --accent-dim: rgba(0,255,102,0.14);
  --accent-text:#00FF66;
  --secondary:#8D99AE;
  --text:#F8F9FA;
  --text-muted:#A6AFC4;
}

/* ---------- reset (scoped to page) ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter', sans-serif;
  /* NOTE: background color intentionally NOT set here.
     It is applied only to .hero-section below, so the rest
     of your page keeps its own background untouched. */
}

/* ==========================================================
   HERO CONTAINER
   ========================================================== */
.hero-section{
  position:relative;
  background:var(--bg);      /* background lives HERE — hero only */
  color:var(--text);
  overflow:hidden;
  border-bottom:1px solid var(--line);
  padding:96px 0 90px;               /* desktop default */
}
.hero-section .wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}
.hero-section a{ color:inherit; text-decoration:none; }

.hero-section h1,
.hero-section .display{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  letter-spacing:-0.02em;
}
.hero-section .mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size:12px;
}

/* ==========================================================
   AMBIENT BACKGROUND — continuous animation (drift + glow pulse)
   ========================================================== */
.hero-section .grid-bg{
  position:absolute; inset:-20% -10%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.35;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 10%, transparent 75%);
  animation: hero-drift 40s linear infinite;   /* continuous */
  pointer-events:none;
}
@keyframes hero-drift{
  from{ background-position: 0 0, 0 0; }
  to{ background-position: 560px 560px, 560px 560px; }
}

.hero-section .glow{
  position:absolute;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, var(--accent-dim), transparent 70%);
  top:-180px; right:-120px;
  pointer-events:none;
  animation: hero-glow-pulse 6s ease-in-out infinite;   /* continuous */
}
@keyframes hero-glow-pulse{
  0%,100%{ opacity:.8; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.12); }
}

.hero-inner{ position:relative; z-index:2; }

/* ==========================================================
   HERO COLUMNS — heading/text LEFT, "Build your setup" box RIGHT
   (stacks to a single column on tablet/mobile)
   ========================================================== */
.hero-section .hero-columns{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:56px;
  align-items:start;
}
.hero-section .hero-text-col{ min-width:0; }
.hero-section .hero-text-col h1{ max-width:100%; }
.hero-section .hero-text-col .sub{ max-width:100%; }
.hero-section .builder{ margin-top:0; }   /* was margin-top:46px when stacked under text */

/* ==========================================================
   ENTRANCE ANIMATION (text/elements fade + rise on load)
   Staggered via data-delay attribute (1..6)
   ========================================================== */
.reveal{
  opacity:0;
  transform:translateY(22px);
  animation: hero-reveal .8s cubic-bezier(.16,.8,.32,1) forwards;
}
.reveal[data-delay="1"]{ animation-delay:.05s; }
.reveal[data-delay="2"]{ animation-delay:.18s; }
.reveal[data-delay="3"]{ animation-delay:.32s; }
.reveal[data-delay="4"]{ animation-delay:.46s; }
.reveal[data-delay="5"]{ animation-delay:.62s; }
.reveal[data-delay="6"]{ animation-delay:.76s; }

@keyframes hero-reveal{
  to{ opacity:1; transform:translateY(0); }
}

/* respect reduced motion everywhere in the hero */
@media (prefers-reduced-motion: reduce){
  .hero-section *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ==========================================================
   TEXT BLOCK
   ========================================================== */
.hero-section .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--accent-text);
  margin-bottom:22px;
}
.hero-section .eyebrow::before{
  content:''; width:16px; height:1px; background:var(--accent);
}

.hero-section h1{
  font-size:clamp(30px, 5.4vw, 62px);
  max-width:820px;
  line-height:1.08;
}
.hero-section h1 em{ font-style:normal; color:var(--accent-text); }

.hero-section .sub{
  margin-top:22px;
  max-width:560px;
  color:var(--text-muted);
  font-size:17px;
}

/* ==========================================================
   SENTENCE BUILDER (signature interactive element)
   ========================================================== */
.hero-section .builder{
  margin-top:46px;
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border:1px solid var(--line);
  border-radius:20px;
  padding:34px 34px 28px;
  max-width:760px;
}
.hero-section .builder-label{ color:var(--text-muted); margin-bottom:16px; }

.hero-section .sentence{
  font-family:'Space Grotesk'; font-weight:500;
  font-size:clamp(18px, 2.6vw, 27px);
  line-height:1.5;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 8px;
}

.hero-section .chip-select{ position:relative; display:inline-flex; align-items:center; }
.hero-section .chip-select select{
  appearance:none; -webkit-appearance:none;
  background:var(--accent-dim);
  color:var(--accent-text);
  border:1px solid rgba(0,255,102,0.4);
  border-radius:10px;
  padding:6px 34px 6px 14px;
  font-family:'Space Grotesk'; font-weight:600; font-size:inherit;
  cursor:pointer;
  max-width:100%;
}
.hero-section .chip-select::after{
  content:'▾'; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--accent-text); font-size:13px; pointer-events:none;
}
.hero-section .chip-select select:focus{ outline:2px solid var(--accent); outline-offset:2px; }

.hero-section .preview-card{
  margin-top:24px; padding:18px 20px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  display:flex; align-items:flex-start; gap:14px;
  transition:opacity .25s ease;
}
.hero-section .preview-card .tag{
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  background:var(--accent-dim); color:var(--accent-text);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono'; font-size:13px; font-weight:600;
}
.hero-section .preview-card .txt strong{ display:block; font-size:14.5px; margin-bottom:3px; }
.hero-section .preview-card .txt span{ color:var(--text-muted); font-size:13.5px; }

/* ==========================================================
   BUTTONS
   ========================================================== */
.hero-section .hero-ctas{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero-section .btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:999px;
  font-size:14px; font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.hero-section .btn-primary{ background:var(--accent); color:#04160B; }
.hero-section .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 24px -4px var(--accent-dim); }
.hero-section .btn-ghost{ border-color:var(--line); color:var(--text); }
.hero-section .btn-ghost:hover{ border-color:var(--secondary); }

/* ==========================================================
   STATS ROW
   ========================================================== */
.hero-section .stats-row{ display:flex; gap:44px; margin-top:64px; flex-wrap:wrap; }
.hero-section .stats-row .stat strong{
  display:block; font-family:'Space Grotesk'; font-size:26px; color:var(--accent-text);
}
.hero-section .stats-row .stat span{ color:var(--text-muted); font-size:13px; }

/* ==========================================================
   RESPONSIVE — TABLET (≤1024px)
   ========================================================== */
@media (max-width:1024px){
  .hero-section{ padding:80px 0 70px; }
  .hero-section .builder{ padding:28px 26px 24px; }
  .hero-section .stats-row{ gap:32px; margin-top:52px; }
  .hero-section .glow{ width:400px; height:400px; top:-140px; right:-100px; }
  .hero-section .hero-columns{ grid-template-columns: 1fr 1fr; gap:36px; }
}

/* ==========================================================
   RESPONSIVE — TABLET / SMALL LAPTOP (≤820px)
   ========================================================== */
@media (max-width:820px){
  .hero-section .wrap{ padding:0 22px; }
  .hero-section h1{ max-width:100%; }
  .hero-section .sub{ max-width:100%; }
  .hero-section .builder{ max-width:100%; }

  /* stack back to a single column: text on top, builder box below */
  .hero-section .hero-columns{ grid-template-columns: 1fr; gap:36px; }
  .hero-section .builder{ margin-top:0; }
}

/* ==========================================================
   RESPONSIVE — MOBILE (≤600px)
   ========================================================== */
@media (max-width:600px){
  .hero-section{ padding:64px 0 52px; }
  .hero-section .eyebrow{ margin-bottom:16px; font-size:11px; }
  .hero-section h1{ line-height:1.14; }
  .hero-section .sub{ font-size:15.5px; margin-top:16px; }

  .hero-section .builder{
    margin-top:32px; padding:22px 18px 20px; border-radius:16px;
  }
  .hero-section .sentence{ font-size:17px; gap:8px 6px; }
  .hero-section .chip-select select{ padding:6px 30px 6px 12px; }

  .hero-section .preview-card{ flex-direction:column; gap:10px; padding:16px; }

  /* buttons keep the same inline/auto-width style as desktop —
     no full-width stacking on mobile */
  .hero-section .hero-ctas{ margin-top:26px; }

  .hero-section .stats-row{
    margin-top:40px; gap:22px 28px;
  }
  .hero-section .stats-row .stat strong{ font-size:22px; }

  .hero-section .grid-bg{ background-size:40px 40px; }
  .hero-section .glow{ width:280px; height:280px; top:-100px; right:-80px; }
}

/* ==========================================================
   RESPONSIVE — VERY SMALL MOBILE (≤380px)
   ========================================================== */
@media (max-width:380px){
  .hero-section .wrap{ padding:0 16px; }
  .hero-section .sentence{ font-size:15.5px; }
}/* End custom CSS */