:root{
  --bg:#0e1116; --card:#151a22; --muted:#7d8aa6;
  --text:#e6e9ef; --accent:#56d1c8; --accent-2:#8be3da;
  --ring:rgba(86,209,200,.35);
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin:0 auto;padding:2rem}
.container.narrow{max-width:800px}
.center{text-align:center}

.site-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-bottom:1px solid #1f2430;position:sticky;top:0;background:rgba(14,17,22,.8);backdrop-filter:saturate(120%) blur(6px);z-index:10}
.logo{font-weight:800;letter-spacing:.5px}
.site-header nav a{margin-left:1rem;color:#cbd3e1}
.site-header nav a.active{color:#fff}
.site-header .btn{margin-left:1rem}

.site-footer{border-top:1px solid #1f2430;padding:2rem;text-align:center;color:#a7b1c6}

.hero{padding:6rem 2rem 3rem;background:radial-gradient(80% 60% at 50% 0, rgba(86,209,200,.12),transparent 60%)}
.hero .tagline{color:#cfd6e6;margin-bottom:1.25rem}
.hero .cta .btn{margin-right:.75rem}
.trust-strip{display:flex;gap:1rem;flex-wrap:wrap;color:var(--muted);padding:0;margin:1.5rem 0 0;list-style:none}

.section-title{text-align:center;margin:0 0 1rem 0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid #202735;border-radius:16px;padding:1.25rem;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.card.link{display:block;transition:transform .18s ease, box-shadow .18s ease}
.card.link:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.35)}

.btn{display:inline-block;padding:.6rem 1rem;border-radius:12px;background:#202735;color:#dfe7f5;border:1px solid #2a3242}
.btn.ghost{background:transparent;border-color:#2a3242}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0b1116;border:none}

.list{margin:.4rem 0 0 0;padding-left:1.1rem}
.tags{display:flex;gap:.5rem;flex-wrap:wrap;padding:0;margin:.4rem 0 0;list-style:none}
.tags li{background:#1a2030;border:1px solid #2a3242;border-radius:999px;padding:.25rem .6rem;color:#c7d0e2}

.split{display:grid;grid-template-columns:2fr 1.2fr;gap:2rem}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.form label span{display:block;margin-bottom:.35rem;color:#cbd3e1}
input,select,textarea{width:100%;padding:.7rem .8rem;border-radius:12px;border:1px solid #2a3242;background:#121720;color:#e8eefc;outline:0}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
.form .check{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 1rem}
.form .advanced{margin:1rem 0}
.status{margin-top:.75rem;color:#cbd3e1}
/* Optional: make Skip to content visible on focus */
.skip-link{position:absolute;left:-999px;top:auto}
.skip-link:focus{left:16px;top:12px;background:#000;color:#fff;padding:.5rem .75rem;border-radius:8px;z-index:1000}

/* ====== Animated background + hero accents (moved from index.html) ====== */
.bg-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% -10%, rgba(86,209,200,.12), transparent 60%), #0b1017;
}
/* Ensure content stays above the animated canvas */
.site-header, main, footer{
  position: relative;
  z-index: 1;
}
.hero-overlay{
  background:linear-gradient(to bottom, rgba(11,16,23,.45), transparent 30%);
}
.gradient-text{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Compact pill badges (tools) */
.pill-badges{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:1rem 0 0}
.pill-badges li{
  border:1px solid #202735; border-radius:999px; padding:.35rem .7rem;
  background:rgba(21,26,34,.72); color:#cfe6e3; font-weight:600; letter-spacing:.2px;
  backdrop-filter:saturate(120%) blur(6px);
}
/* Glassy cards to float nicely on animated bg */
.card.soft{
  background:rgba(21,26,34,.72);
  backdrop-filter:saturate(120%) blur(6px);
  border:1px solid #202735;
}
/* small utilities (so we can avoid inline styles) */
.mt-5{ margin-top:1.25rem; }
.mt-4{ margin-top:1rem; }
.m-0{ margin:0; }
.muted{ color:#cfd7ea; }
.lead-block{ display:block; margin-bottom:.35rem; }

/* Fallback background when JavaScript is disabled */
.bg-fallback{
  position:fixed; inset:0; z-index:-1;
  background:radial-gradient(70% 60% at 50% 0, rgba(86,209,200,.12), transparent 65%), #0b1017;
}

/* ================= NEW DESIGN (namespaced .nx- to avoid conflicts) ================= */
.nx-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.nx-center{text-align:center}

/* Header */
.nx-header{position:sticky;top:0;z-index:10;border-bottom:1px solid #202735;
  background:rgba(14,17,22,.78);backdrop-filter:saturate(120%) blur(8px)}
.nx-header .nx-wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.nx-logo{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.3px;color:var(--text)}
.nx-dot{width:10px;height:10px;border-radius:50%;display:inline-block;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 14px var(--accent)}
.nx-nav{display:flex;align-items:center;gap:16px}
.nx-nav a{color:#cfd6e6}
.nx-nav a:hover, .nx-nav a.active{color:#fff}
.nx-drawer{display:none}
.nx-menu{display:none;background:transparent;border:0;color:#cfd6e6;font-size:1.2rem}
@media (max-width:860px){
  .nx-nav{display:none}
  .nx-menu{display:block}
  .nx-drawer{display:none;position:absolute;left:0;right:0;top:64px;background:#0f141d;border-bottom:1px solid #202735;z-index:12}
  .nx-drawer a{display:block;padding:14px 20px;border-top:1px solid #141a24;color:#dbe3f4}
}

/* Buttons */
.nx-btn{display:inline-block;padding:.6rem 1rem;border-radius:12px;border:1px solid #2a3242;
  background:#1d2330;color:#e8eefc;transition:transform .15s ease, box-shadow .15s ease}
.nx-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.nx-btn--primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:#071116}
.nx-btn--ghost{background:transparent}
.nx-btn--outline{background:transparent;border-color:#2a3242}

/* Hero */
.nx-hero{padding:84px 0 48px}
.nx-hero .nx-wrap{display:grid;grid-template-columns:1.35fr .9fr;gap:28px;align-items:center}
@media (max-width:960px){.nx-hero .nx-wrap{grid-template-columns:1fr}}
.nx-kicker{color:#d8e1f3;margin:0 0 .75rem}
.nx-display{font-size:2.8rem;line-height:1.1;margin:0 0 .35rem}
.nx-subtitle{color:#cfd6ea;max-width:60ch;margin:.35rem 0 1rem}
.nx-cta{display:flex;gap:.75rem;flex-wrap:wrap}
.nx-hero-card{background:rgba(21,26,34,.72);border:1px solid #202735;border-radius:18px;padding:18px;
  backdrop-filter:saturate(120%) blur(6px)}
.nx-hero-card h3{margin:.2rem 0 .4rem}

/* Sections */
.nx-section{padding:56px 0}
.nx-section-title{text-align:center;margin:0 0 18px 0}

/* Grid + cards */
.nx-grid{display:grid;gap:16px}
.nx-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nx-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.nx-grid--3,.nx-grid--2{grid-template-columns:1fr}}
.nx-card{background:rgba(21,26,34,.72);border:1px solid #202735;border-radius:16px;padding:18px;
  transition:transform .18s ease, box-shadow .18s ease;backdrop-filter:saturate(120%) blur(6px)}
.nx-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.35)}
.nx-card--link{display:block;position:relative;padding-right:44px}
.nx-card--link .nx-arrow{position:absolute;right:16px;top:18px;opacity:.65;transition:transform .18s ease}
.nx-card--link:hover .nx-arrow{transform:translateX(4px);opacity:.9}

/* Contact CTA */
.nx-contact-cta{padding:64px 0;background:radial-gradient(70% 60% at 50% 0, rgba(86,209,200,.10), transparent 60%)}
.nx-contact-cta h2{text-align:center;margin:0 0 .4rem}
.nx-contact-cta p{text-align:center;color:#cfd6ea;margin:.2rem 0 1rem}
.nx-contact-cta .nx-cta{justify-content:center}

/* Footer */
.nx-footer{border-top:1px solid #202735}
.nx-footer .nx-wrap{padding:24px 0;text-align:center;color:#b7c2da}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
.reveal.delay-1{transition-delay:.08s}
.reveal.delay-2{transition-delay:.16s}
.reveal.delay-3{transition-delay:.24s}

/* Ensure canvas layering for new header/footer */
.nx-header, main, .nx-footer{position:relative;z-index:1}

/* ===== Contact form alignment (works without inline styles) ===== */
#contact label span{display:block;margin-bottom:.35rem;color:#cbd3e1}
#contact .check{display:flex;align-items:center;gap:.6rem;line-height:1;margin:.5rem 0 1rem}
#contact input[type="checkbox"]{width:1rem;height:1rem;accent-color:var(--accent)}