:root{
  --bg: #070912;
  --panel: rgba(10, 12, 18, 0.58);
  --panel2: rgba(10, 12, 18, 0.42);
  --text: rgba(240,244,255,0.92);
  --muted: rgba(240,244,255,0.68);
  --muted2: rgba(240,244,255,0.58);
  --accent: rgba(0, 255, 170, 0.95);
  --accent2: rgba(140, 120, 255, 0.95);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* ✅ Plasma canvas */
.plasma{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;            /* show *something* even if JS fails */
  transition: opacity 600ms ease;
}

.vignette{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(0,255,170,0.12), transparent 55%),
    radial-gradient(800px 520px at 85% 20%, rgba(140,120,255,0.10), transparent 55%),
    radial-gradient(1200px 900px at 50% 90%, rgba(0,0,0,0.55), transparent 70%),
    linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.70));
}

.container{
  width: min(1180px, 92vw);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(7,9,18,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: var(--text);
}
.brand__logo{ width: 38px; height: 38px; object-fit: contain; }
.brand__name{ font-weight: 900; }

.nav{ display:flex; align-items:center; gap: 18px; }
.nav a{
  color: var(--muted);
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 10px;
  border-radius: 10px;
}
.nav a:hover{ color: var(--text); background: rgba(255,255,255,0.05); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform 150ms ease, background 150ms ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{
  color: rgba(0,0,0,0.92);
  background: linear-gradient(135deg, rgba(0,255,170,0.95), rgba(140,120,255,0.95));
}
.btn--soft{ color: var(--text); background: rgba(255,255,255,0.06); }
.btn--ghost{ color: var(--text); background: transparent; }

/* Hero */
.hero{ padding: 60px 0 24px; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 26px;
  align-items: start;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-weight: 750;
  width: fit-content;
}
.pill__dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(0,255,170,0.5);
}
h1{
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.02;
  margin: 16px 0 12px;
  letter-spacing: -0.6px;
}
.gradient{
  background: linear-gradient(135deg, rgba(0,255,170,0.95), rgba(140,120,255,0.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 60ch;
}
.cta{ display:flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }

.highlights{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.highlight{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.highlight__title{ font-weight: 900; }
.highlight__text{ margin-top: 6px; color: var(--muted2); font-weight: 650; font-size: 13.5px; }

/* Glass card */
.glasscard{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--panel);
  box-shadow: 0 30px 90px rgba(0,0,0,0.40);
  overflow: hidden;
}
.glasscard__head{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}
.chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
  font-weight: 800;
}
.chip--ok{
  background: rgba(0,255,170,0.12);
  border-color: rgba(0,255,170,0.28);
  color: rgba(0,255,170,0.95);
}
.glasscard__title{ padding: 14px 14px 4px; font-weight: 900; font-size: 18px; }
.glasscard__list{ padding: 6px 14px 14px; }
.row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.row:last-child{ border-bottom: 0; }
.row__k{ font-weight: 850; }
.row__v{ color: var(--muted); font-weight: 700; }
.glasscard__footer{ padding: 14px; }
.btn--full{ width: 100%; }

/* Sections */
.section{ padding: 46px 0; }
.section--alt{ padding: 54px 0; }
.section__head{
  display:flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 18px;
}
.section__head h2{ margin: 0; font-size: 30px; }
.section__head p{ margin: 0; color: var(--muted); max-width: 60ch; }

.cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.card{
  padding: 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.card h3{ margin: 0 0 8px; }
.card p{ margin: 0 0 12px; color: var(--muted); line-height: 1.6; }
.card ul{ margin: 0; padding-left: 18px; color: var(--muted2); }
.card__link{
  display: inline-flex;
  margin-top: 12px;
  font-weight: 800;
  text-decoration: none;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.card__link:hover{ background: rgba(255,255,255,0.08); }

.split{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; align-items: center; }
.lead2{ color: var(--muted); line-height: 1.65; font-size: 16.5px; margin: 10px 0 12px; }
.ticks{ display:grid; gap: 10px; }
.tick{ padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: var(--muted); font-weight: 700; }

.flow{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--panel2);
  padding: 18px;
}
.flow__title{ font-weight: 900; margin-bottom: 10px; }
.flow__row{ display:flex; flex-wrap: wrap; gap: 10px; align-items:center; }
.node{ padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05); font-weight: 900; color: var(--muted); }
.node--ok{ background: rgba(0,255,170,0.12); border-color: rgba(0,255,170,0.28); color: rgba(0,255,170,0.92); }
.arrow{ color: rgba(255,255,255,0.35); font-weight: 900; }
.flow__note{ margin-top: 10px; color: var(--muted2); }

.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step{ padding: 18px 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); }
.step__n{ font-weight: 950; color: rgba(255,255,255,0.55); }
.step__t{ font-weight: 900; margin-top: 6px; }
.step__p{ color: var(--muted); margin-top: 8px; line-height: 1.6; }

.footer{ padding: 38px 0 46px; border-top: 1px solid rgba(255,255,255,0.06); }
.footer__inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.footer__brand{ display:flex; gap: 12px; align-items:center; }
.footer__brand img{ width: 48px; height: 48px; object-fit: contain; }
.footer__name{ font-weight: 950; }
.footer__tag{ color: var(--muted2); margin-top: 2px; }
.footer__cta h3{ margin: 0 0 6px; font-size: 22px; }
.footer__cta p{ margin: 0 0 14px; color: var(--muted); line-height: 1.65; }
.footer__tiny{ margin-top: 12px; color: rgba(240,244,255,0.55); font-size: 12.5px; }

/* Responsive */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr 1fr; }
  .split{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .footer__inner{ grid-template-columns: 1fr; }
  .nav{ display:none; }
  .highlights{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .cards{ grid-template-columns: 1fr; }
}

/* Mobile tidy-up: Typical workflow + What we deliver */
@media (max-width: 700px){
  .flow__row{
    flex-direction: column;
    align-items: stretch;
  }
  .node{
    width: 100%;
    text-align: center;
  }
  .arrow{
    display: none;
  }
  .row{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .row__v{
    text-align: left;
  }
}


#plasma{
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto !important;
}

/* =========================================================
   Mobile: Aurora fallback (CSS only)
   ========================================================= */
@keyframes auroraDrift{
  0%   { transform: translate3d(-2%, -1%, 0) rotate(0.5deg); }
  50%  { transform: translate3d(2%, 2%, 0) rotate(-0.6deg); }
  100% { transform: translate3d(-1%, 1%, 0) rotate(0.4deg); }
}
@keyframes auroraPulse{
  0%   { opacity: 0.75; }
  50%  { opacity: 0.95; }
  100% { opacity: 0.8; }
}

@media (max-width: 980px){
  /* Hide plasma on mobile */
  #plasma{
    display: none !important;
  }

  /* Aurora backdrop */
  body::before{
    content:"";
    position: fixed;
    inset: -20%;
    z-index: 0;
    pointer-events: none;

    background:
      radial-gradient(60% 45% at 18% 12%, rgba(0,255,170,0.22), transparent 62%),
      radial-gradient(55% 40% at 82% 18%, rgba(140,120,255,0.22), transparent 60%),
      radial-gradient(50% 50% at 50% 78%, rgba(64,130,255,0.18), transparent 66%),
      conic-gradient(from 120deg at 50% 50%, rgba(0,255,170,0.10), rgba(140,120,255,0.12), rgba(0,0,0,0) 45%);

    filter: blur(12px) saturate(120%);
    animation: auroraDrift 18s ease-in-out infinite alternate;
    opacity: 0.9;
  }

  /* Vignette + depth */
  body::after{
    content:"";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
      radial-gradient(1200px 900px at 50% 95%, rgba(0,0,0,0.70), transparent 70%),
      linear-gradient(to bottom, rgba(6,8,16,0.55), rgba(6,8,16,0.90));

    animation: auroraPulse 12s ease-in-out infinite;
  }

  /* Ensure content stays above background layers */
  .container, header, main, footer, .topbar, .vignette{
    position: relative;
    z-index: 2;
  }
}
/* =========================================
   MOBILE MENU LAYER FIX (burger behind text)
   ========================================= */

/* Ensure the header sits above all page content */
.topbar{
  position: sticky; /* already is, keep it */
  top: 0;
  z-index: 9999 !important;
}

/* If you have a header wrapper, keep it above too */
header, .site-header{
  position: relative;
  z-index: 9999 !important;
}

/* The burger button itself */
.burger, .menu-toggle, .nav-toggle, .hamburger{
  position: relative;
  z-index: 10000 !important;
}

/* The mobile menu panel/overlay - adjust selector to your actual class/id */
.mobile-menu,
.mobileNav,
.nav-mobile,
#mobileMenu,
.menu-panel,
.nav-panel,
.nav-drawer,
.drawer,
.offcanvas,
.offcanvas-menu{
  position: fixed !important;   /* IMPORTANT: fixed overlay */
  left: 0;
  right: 0;
  top: 0;                       /* or top: var(--topbar-height) if you use one */
  z-index: 10001 !important;
}

/* If you use a dark overlay behind the menu */
.menu-overlay,
.nav-overlay,
.drawer-overlay,
#menuOverlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
}



.footer__tag a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

.footer__tag a:hover {
  text-decoration: underline;
}