:root{
  --firebolt:#F04511;
  --firebolt-2:#D5A31E;
  --bg0:#0b0f0c;
  --bg1:#121713;
  --ink:#EAEAEA;
  --muted:#B7BDC3;
  --card:rgba(18, 25, 20, .72);
  --stroke:rgba(255,255,255,.10);
  --shadow:0 12px 34px rgba(0,0,0,.55);
  --radius:18px;
  --maxw:1180px;
}

/* subtle “circuit” pattern (SVG data URI) */
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 15% 15%, rgba(94,155,81,.25), transparent 55%),
    radial-gradient(800px 520px at 85% 40%, rgba(240,69,17,.20), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='2'%3E%3Cpath d='M10 40h140v40h80v-30h120'/%3E%3Cpath d='M60 200h120v-60h70v30h160'/%3E%3Cpath d='M330 20v70h-80v40h150'/%3E%3Ccircle cx='150' cy='80' r='4'/%3E%3Ccircle cx='180' cy='140' r='4'/%3E%3Ccircle cx='250' cy='90' r='4'/%3E%3Ccircle cx='330' cy='90' r='4'/%3E%3Ccircle cx='180' cy='200' r='4'/%3E%3Ccircle cx='250' cy='170' r='4'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.55;
  pointer-events:none;
  mix-blend-mode:overlay;
}

a{ color:inherit; }
h1,h2,h3{
  font-family:Poppins, Inter, system-ui, sans-serif;
  margin:0 0 .5rem 0;
  letter-spacing:-.02em;
}
h1{ font-size:clamp(2.0rem, 3.2vw, 3.1rem); }
h2{ font-size:clamp(1.5rem, 2.2vw, 2.1rem); }
h3{ font-size:1.2rem; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 18px; }
.section{ padding:74px 0; position:relative; }
.section--tight{ padding:44px 0; }

.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background:rgba(8, 11, 9, .55);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; }
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; font-weight:800;
}
.brand__dot{
  width:12px; height:12px; border-radius:999px;
  background:linear-gradient(135deg, var(--firebolt), var(--firebolt-2));
  box-shadow:0 0 18px rgba(240,69,17,.55);
}
.nav__links{ display:flex; flex-wrap:wrap; gap:14px; }
.nav__links a{
  text-decoration:none;
  padding:8px 10px;
  border-radius:999px;
  color:var(--muted);
  border:1px solid transparent;
}
.nav__links a:hover{
  color:var(--ink);
  border-color:rgba(240,69,17,.28);
  box-shadow:0 0 0 2px rgba(240,69,17,.12) inset;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.15rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
}
.btn--primary{
  background:linear-gradient(135deg, rgba(240,69,17,.95), rgba(213,163,30,.92));
  color:#0b0f0c;
  box-shadow:0 16px 42px rgba(240,69,17,.20);
  border-color:rgba(255,255,255,.14);
}
.btn--ghost{
  background:rgba(12, 16, 13, .35);
  color:var(--ink);
}
.btn--ghost:hover{ border-color:rgba(240,69,17,.35); }

.hero{
  padding:86px 0 40px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:26px;
  align-items:center;
}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:.45rem .75rem;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
}
.pill__spark{
  width:10px; height:10px; border-radius:999px;
  background:var(--firebolt);
  box-shadow:0 0 18px rgba(240,69,17,.7);
}
.lede{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.lede::before{
  content:"";
  position:absolute; inset:-40%;
  background:radial-gradient(circle at 30% 30%, rgba(94,155,81,.25), transparent 40%),
             radial-gradient(circle at 70% 40%, rgba(240,69,17,.18), transparent 38%);
  transform:rotate(10deg);
}
.lede__inner{ position:relative; padding:22px; }
.lede__title{ font-weight:800; }
.lede__list{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.lede__list li{ display:flex; gap:10px; color:var(--muted); }
.tick{
  width:22px; height:22px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(240,69,17,.18);
  border:1px solid rgba(240,69,17,.35);
  color:var(--firebolt-2);
  flex:0 0 auto;
}

.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}
.card p{ margin:.35rem 0 0; color:var(--muted); }

.feature{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:22px;
  align-items:center;
}
.kicker{ color:var(--muted); margin:.35rem 0 0; max-width:70ch; }

.mini-swatch-row{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:18px;
}
.mini-swatch{
  width:98px; height:56px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  color:rgba(255,255,255,.92);
}
.s-green{ background:linear-gradient(135deg,#1f4a2a,#2a6a3a); }
.s-black{ background:linear-gradient(135deg,#0b0b0b,#1f1f1f); }
.s-red{ background:linear-gradient(135deg,#7c1111,#b62626); }
.s-blue{ background:linear-gradient(135deg,#10335d,#1f4f99); }
.s-white{ background:linear-gradient(135deg,#e9e9e9,#ffffff); color:#0b0f0c; }
.s-yellow{ background:linear-gradient(135deg,#bda10e,#d9c14c); color:#0b0f0c; }
.s-purple{ background:linear-gradient(135deg,#3c1b66,#6a3ea1); }

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:14px;
}
.gallery figure{ margin:0; }
.gallery img{
  width:100%; height:220px; object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
}
.gallery figcaption{ margin-top:.4rem; color:var(--muted); font-size:.95rem; }

.form input, .form select, .form textarea{
  width:100%;
  padding:.85rem .9rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
  color:var(--ink);
  outline:none;
}
.form input:focus, .form select:focus, .form textarea:focus{
  border-color:rgba(240,69,17,.40);
  box-shadow:0 0 0 3px rgba(240,69,17,.16);
}
.footer{ padding:34px 0; border-top:1px solid rgba(255,255,255,.10); color:var(--muted); }

@media (max-width: 900px){
  .hero__grid, .feature{ grid-template-columns:1fr; }
  .nav__links{ display:none; }
  .menu-toggle{ display:inline-flex; }
}
@media (min-width: 901px){
  .menu-toggle{ display:none; }
}
/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.lightbox.is-open{ display:block; }

.lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}

.lightbox__content{
  position:relative;
  max-width:min(1000px, 92vw);
  margin:6vh auto 0;
  background:rgba(12, 16, 13, .78);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.65);
  overflow:hidden;
}

.lightbox__content::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(94,155,81,.20), transparent 45%),
    radial-gradient(circle at 70% 40%, rgba(240,69,17,.16), transparent 42%);
  pointer-events:none;
}

#lightbox-img{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  max-height:70vh;
  object-fit:contain;
  background:rgba(0,0,0,.25);
}

.lightbox figcaption{
  position:relative;
  padding:14px 16px 18px;
  border-top:1px solid rgba(255,255,255,.10);
}

.lightbox__title{
  font-weight:800;
  margin-bottom:4px;
}

.lightbox__caption{
  color:var(--muted);
}

.lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:var(--ink);
  cursor:pointer;
  z-index:2;
}
.lightbox__close:hover{
  border-color:rgba(240,69,17,.35);
  box-shadow:0 0 0 3px rgba(240,69,17,.14);
}

/* Make gallery images feel clickable */
.gallery img{
  cursor: zoom-in;
}
/* Zoho form embed inside card */
#zf_div_NaoV1gLlQOfG6ZZWhldfTg1MUe3XkddRGGMDCMdsx-8 iframe{
  border-radius: 12px;
  background: transparent;
}

/* Anchor offset for fixed nav */
.anchor-offset{
  position: relative;
  top: -90px; /* match nav height */
  display: block;
  height: 0;
  visibility: hidden;
}