/* CyberNodeX starter site — clean, responsive, easy to edit */
:root{
  --bg:#050b16;          /* deep navy */
  --panel:#0b1326;       /* dark panel */
  --panel2:#081022;      /* alt panel */
  --text:#eaf2ff;        /* cool white */
  --muted:#a6b7d6;       /* muted blue-grey */
  --brand:#00b7ff;       /* cyan */
  --brand2:#2f6bff;      /* electric blue */
  --brand3:#8fd7ff;      /* highlight */
  --border:rgba(143,215,255,.14);
  --shadow: 0 14px 35px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(0,183,255,.22), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(47,107,255,.18), transparent 48%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
  background-position: 0 0, 0 0, center, center;
  color:var(--text); } color:var(--text); }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
code{ background:rgba(255,255,255,.06); padding:.1rem .35rem; border-radius:.4rem; }

.container{ width:min(1120px, 92vw); margin-inline:auto; }
.section{ padding:64px 0; }
.section-alt{ background:linear-gradient(180deg, rgba(255,255,255,.03), transparent); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ left:16px; top:16px; width:auto; height:auto; padding:10px 12px; background:#000; border:1px solid var(--border); border-radius:10px; z-index:9999; }

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(5,11,22,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.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:700; }
.brand-mark{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  border:1px solid rgba(143,215,255,.18);
  color:#051015; font-weight:800;
}
.brand-name{ letter-spacing:.2px; }

.nav-toggle{ display:none; background:transparent; border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:12px; cursor:pointer; }
.nav-menu{ display:flex; list-style:none; gap:18px; padding:0; margin:0; align-items:center; }
.nav-menu a{ color:var(--muted); font-weight:600; }
.nav-menu a:hover{ color:var(--brand3); text-decoration:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  border:1px solid rgba(143,215,255,.18);
  color:#061016; font-weight:800; border:none;
  box-shadow: var(--shadow);
}
.btn:hover{ filter:brightness(1.05); text-decoration:none; }
.btn-small{ padding:10px 12px; border-radius:12px; }
.btn-ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--border);
  box-shadow:none;
}
.btn-ghost:hover{ background:rgba(255,255,255,.04); }

.hero{ position:relative; overflow:hidden; padding:72px 0 56px; }
.hero-inner{ display:grid; grid-template-columns: 1.35fr .85fr; gap:26px; align-items:start; }
.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.02);
  color:var(--muted); font-weight:600; font-size:.95rem;
}
h1{ font-size: clamp(2rem, 3.5vw, 3.1rem); margin:.9rem 0 .6rem; letter-spacing:-.02em; }
.lead{ color:var(--muted); font-size:1.08rem; line-height:1.6; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 10px; }
.micro{ color:var(--muted); font-size:.95rem; line-height:1.5; }

.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px 18px 16px;
  box-shadow: var(--shadow);
}
.h3{ margin:0 0 10px; font-size:1.15rem; }
.card-row{ display:flex; gap:16px; margin-top:10px; }
.link{ color:var(--brand3); font-weight:700; }
.link:hover{ text-decoration:none; filter:brightness(1.1); }

.hero-wave{
  position:absolute; inset:auto -20% -55% -20%;
  height:340px;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,183,255,.35), transparent 58%),
    radial-gradient(circle at 70% 55%, rgba(47,107,255,.30), transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(143,215,255,.16), transparent 55%);
  pointer-events:none;
}

.section-head{ max-width:720px; margin-bottom:22px; }
.section-head h2{ font-size:1.8rem; margin:0 0 8px; letter-spacing:-.02em; }
.section-head p{ margin:0; color:var(--muted); line-height:1.6; }

.grid{ display:grid; gap:16px; }
.cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px 16px 14px;
}
.card h3{ margin:0 0 8px; font-size:1.12rem; }
.card p{ margin:0; color:var(--muted); line-height:1.55; }

.pricing{ grid-template-columns: repeat(3, minmax(0, 1fr)); align-items:stretch; }
.price-card{
  position:relative;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
}
.price-card header{ margin-bottom:10px; }
.price-card .price{
  font-size:2rem; margin:8px 0 0; font-weight:800;
}
.price span{ font-size:1rem; color:var(--muted); font-weight:700; margin-left:6px; }
.price-card ul{ margin:14px 0 16px; padding-left:18px; color:var(--muted); line-height:1.7; }
.price-card.featured{
  background:linear-gradient(180deg, rgba(34,197,94,.10), rgba(96,165,250,.08));
  border-color: rgba(96,165,250,.25);
}
.badge{
  position:absolute; top:14px; right:14px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  padding:6px 10px; border-radius:999px;
  font-size:.85rem; color:var(--text); font-weight:700;
}

.fineprint{ color:var(--muted); margin-top:14px; }

.split{ display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:start; }
.callout{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
}
.callout h3{ margin:0 0 6px; }
.callout p{ margin:0 0 12px; color:var(--muted); line-height:1.6; }
.callout hr{ border:none; border-top:1px solid var(--border); margin:14px 0; }

.ticks{ list-style:none; padding:0; margin:14px 0 0; }
.ticks li{
  padding-left:26px; margin:10px 0; color:var(--muted); line-height:1.5;
  position:relative;
}
.ticks li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  width:18px; height:18px; display:grid; place-items:center;
  color: var(--brand);
  font-weight:900;
}

.stats{ display:grid; gap:12px; }
.stat{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px 14px 12px;
}
.kicker{ margin:0; color:var(--muted); font-weight:700; font-size:.9rem; }
.big{ margin:6px 0 0; font-size:1.4rem; font-weight:900; letter-spacing:-.02em; }

.contact-grid{ display:grid; grid-template-columns: 1fr .9fr; gap:16px; align-items:start; }
.form{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
}
label{ display:block; font-weight:700; margin-bottom:12px; }
input, textarea{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:var(--text);
  outline:none;
}
input:focus, textarea:focus{ border-color: rgba(96,165,250,.6); box-shadow:0 0 0 3px rgba(96,165,250,.18); }

.contact-card{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
}
.clean{ list-style:none; padding:0; margin:10px 0 0; color:var(--muted); line-height:1.8; }
.note{
  margin-top:14px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:16px;
  padding:12px;
  color:var(--muted);
}

.site-footer{
  border-top:1px solid var(--border);
  padding:26px 0;
  color:var(--muted);
}
.footer-inner{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* Accessibility */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .nav-toggle{ display:inline-flex; }
  .nav-menu{
    position:absolute;
    right:4vw; top:64px;
    background:rgba(11,15,22,.95);
    border:1px solid var(--border);
    border-radius:18px;
    padding:10px;
    box-shadow: var(--shadow);
    display:none;
    flex-direction:column;
    width:min(280px, 92vw);
    align-items:stretch;
  }
  .nav-menu.open{ display:flex; }
  .nav-menu a{ padding:10px 12px; border-radius:12px; }
  .nav-menu a:hover{ background:rgba(255,255,255,.04); }
}
@media (max-width: 560px){
  .cards{ grid-template-columns: 1fr; }
  .hero{ padding-top:56px; }
}


/* Logo */
.brand-logo{
  height:40px;
  width:auto;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
@media (max-width: 560px){
  .brand-logo{ height:34px; }
}

.hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 25%, rgba(143,215,255,.22), transparent 55%),
    linear-gradient(120deg, rgba(0,183,255,.10), rgba(47,107,255,.08), transparent 55%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
  opacity:.55;
  pointer-events:none;
  mask-image: radial-gradient(circle at 50% 35%, black 35%, transparent 70%);
}
.hero{ position:relative; }

.card, .price-card, .form, .contact-card, .callout, .hero-card, .stat{
  backdrop-filter: blur(6px);
}
.card:hover, .price-card:hover{
  border-color: rgba(143,215,255,.30);
  transform: translateY(-2px);
  transition: transform .18s ease, border-color .18s ease;
}


/* Brand blending */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}
.brand-wrap{
  padding:8px;
  border-radius:14px;
  background:
    linear-gradient(135deg, rgba(0,183,255,.35), rgba(47,107,255,.25));
  border:1px solid rgba(143,215,255,.35);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.brand-logo{
  height:34px;
  width:auto;
  display:block;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.brand-title{
  font-weight:900;
  letter-spacing:.4px;
  font-size:1.05rem;
}
.brand-sub{
  font-size:.8rem;
  color:var(--brand3);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* Accent text */
.accent{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 560px){
  .brand-logo{ height:28px; }
  .brand-title{ font-size:.95rem; }
}


/* === Text-only branding (logo look, no logo background) === */
.brand.brand-textonly{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.05;
  text-decoration:none;
}

.brand-title-text{
  font-weight:900;
  letter-spacing:.06em;
  text-transform:none;
  font-size:1.05rem;
  /* Metallic-blue feel without cheesy glow */
  background: linear-gradient(180deg, rgba(234,242,255,1) 0%, rgba(143,215,255,1) 40%, rgba(47,107,255,1) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.brand-sub-text{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(143,215,255,.95);
}

/* Hero brand styling */
.hero-brand{
  font-weight:900;
  letter-spacing:.02em;
  background: linear-gradient(135deg, rgba(234,242,255,1), rgba(143,215,255,1), rgba(47,107,255,1));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.hero-sub{
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(143,215,255,.95);
  font-size: clamp(1.05rem, 2.0vw, 1.35rem);
}

/* Tidy: ensure header brand doesn't look cramped on mobile */
@media (max-width: 560px){
  .brand-title-text{ font-size:.98rem; }
  .brand-sub-text{ font-size:.72rem; }
}

/* Remove any previous logo-wrapper visuals if they exist */



/* Header logo (transparent PNG) */
.brand-logoheader{
  display:flex;
  align-items:center;
  text-decoration:none;
}
.header-logo{
  height:42px;
  width:auto;
  display:block;
  /* subtle shadow only so it sits on dark header */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
@media (max-width: 560px){
  .header-logo{ height:36px; }
}

/* === Bigger logo (header) === */
.header-logo{
  height:64px !important;
}
@media (max-width: 900px){
  .header-logo{ height:54px !important; }
}
@media (max-width: 560px){
  .header-logo{ height:46px !important; }
}

/* Hero logo lockup */
.hero-logo{
  height:86px;
  width:auto;
  display:block;
  margin:0 0 14px;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.55));
}
@media (max-width: 900px){
  .hero-logo{ height:72px; }
}
@media (max-width: 560px){
  .hero-logo{ height:62px; }
}

/* Live nodes canvas */
.nodes-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode: screen;
}
/* Ensure hero content is above effects */
.hero-inner{ position:relative; z-index:2; }
.hero-bg{ z-index:1; }
.hero-wave{ z-index:1; }

/* === Oversized branding (clear & bold) === */
.header-logo{
  height:90px !important;
}
@media (max-width: 900px){
  .header-logo{ height:72px !important; }
}
@media (max-width: 560px){
  .header-logo{ height:60px !important; }
}

.hero-logo{
  height:130px !important;
}
@media (max-width: 900px){
  .hero-logo{ height:105px !important; }
}
@media (max-width: 560px){
  .hero-logo{ height:86px !important; }
}


/* ===== FINAL FIX: BIG LOGO, FIXED HEADER HEIGHT ===== */
.site-header{
  height:80px;
}

.header-inner{
  height:100%;
  align-items:center;
}

/* Keep header height fixed, scale logo visually */
.brand-logoheader{
  position:relative;
  height:100%;
}

.header-logo{
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%) scale(1.6);
  height:72px !important;
  max-height:none;
}

/* Tablet */
@media (max-width: 900px){
  .site-header{ height:70px; }
  .header-logo{
    height:60px !important;
    transform:translateY(-50%) scale(1.4);
  }
}

/* Mobile */
@media (max-width: 560px){
  .site-header{ height:60px; }
  .header-logo{
    height:52px !important;
    transform:translateY(-50%) scale(1.25);
  }
}

/* ===== BIGGER READABLE LOGO (header stays fixed height) ===== */
.site-header{
  height:80px;            /* keep fixed */
  overflow:visible;       /* allow logo to overflow without stretching header */
}

.header-inner{
  height:100%;
  align-items:center;
  gap:18px;
}

.brand-logoheader{
  position:relative;
  height:100%;
  width:360px;            /* reserve room so nav doesn't collide */
  flex:0 0 auto;
}

.nav{ margin-left:auto; }

.header-logo{
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%) scale(2.35);
  transform-origin:left center;
  height:86px !important;   /* BIG */
  width:auto;
  max-height:none;
  z-index:80;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}

/* Tablet */
@media (max-width: 900px){
  .site-header{ height:70px; }
  .brand-logoheader{ width:300px; }
  .header-logo{
    height:72px !important;
    transform:translateY(-50%) scale(2.05);
  }
}

/* Mobile */
@media (max-width: 560px){
  .site-header{ height:60px; }
  .brand-logoheader{ width:240px; }
  .header-logo{
    height:62px !important;
    transform:translateY(-50%) scale(1.85);
  }
}

/* ===== Extra live effects (tasteful) ===== */

/* Cursor spotlight (moves with mouse in hero) */
.spotlight{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.55;
  background: radial-gradient(600px 420px at var(--mx, 50%) var(--my, 35%),
    rgba(0,183,255,.22),
    rgba(47,107,255,.10) 35%,
    transparent 70%);
  transition: opacity .3s ease;
}
@media (prefers-reduced-motion: reduce){
  .spotlight{ display:none; }
}

/* Shimmer border on hero card (subtle premium) */
.hero-card{
  position:relative;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: conic-gradient(from 180deg, rgba(0,183,255,.0), rgba(143,215,255,.18), rgba(47,107,255,.0));
  opacity:.55;
  filter: blur(10px);
  animation: spin 10s linear infinite;
  pointer-events:none;
}
.hero-card::after{
  content:"";
  position:absolute;
  inset:1px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius:20px;
  pointer-events:none;
}
.hero-card > *{ position:relative; z-index:2; }

@keyframes spin{
  to{ transform: rotate(360deg); }
}

/* Floating glow for primary CTA */
.btn{
  position:relative;
}
.btn::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:16px;
  background: radial-gradient(circle at 30% 30%, rgba(0,183,255,.22), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(47,107,255,.18), transparent 55%);
  opacity:.0;
  transition: opacity .2s ease;
  pointer-events:none;
}
.btn:hover::after{ opacity:1; }

/* Scroll reveal */
.reveal{
  opacity:0;
  transform: translateY(14px) scale(.99);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ===== Live Chat (popup) ===== */
.chat-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:999;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(143,215,255,.30);
  background: linear-gradient(135deg, rgba(0,183,255,.18), rgba(47,107,255,.16));
  color:var(--text);
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.chat-fab-text{ font-size:.95rem; }

.chat-widget{
  position:fixed;
  right:18px;
  bottom:78px;
  width:min(380px, calc(100vw - 36px));
  height:520px;
  max-height: calc(100vh - 110px);
  z-index:999;
  border-radius:18px;
  border:1px solid rgba(143,215,255,.22);
  background: rgba(7,12,24,.92);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  backdrop-filter: blur(12px);
  overflow:hidden;
  display:none;
  transform: translateY(10px);
  opacity: 0;
}
.chat-widget.open{
  display:flex;
  flex-direction:column;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}

.chat-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(0,183,255,.12), rgba(47,107,255,.10));
}
.chat-title{ margin:0; font-weight:900; letter-spacing:.02em; }
.chat-subtitle{ margin:4px 0 0; color:var(--muted); font-size:.9rem; }
.chat-close{
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  border-radius:12px;
  padding:6px 10px;
  cursor:pointer;
}

.chat-body{
  flex:1;
  padding:14px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chat-bubble{
  max-width: 86%;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  line-height:1.45;
  font-size:.95rem;
}
.chat-bubble.bot{
  align-self:flex-start;
  background: rgba(255,255,255,.04);
}
.chat-bubble.user{
  align-self:flex-end;
  background: linear-gradient(135deg, rgba(0,183,255,.18), rgba(47,107,255,.16));
  border-color: rgba(143,215,255,.22);
}
.chat-meta{
  font-size:.78rem;
  color: var(--muted);
  margin-top:4px;
}

.chat-form{
  display:flex;
  gap:10px;
  padding:12px;
  border-top:1px solid rgba(255,255,255,.10);
}
.chat-input{
  flex:1;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:var(--text);
  outline:none;
}
.chat-send{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(143,215,255,.22);
  background: linear-gradient(135deg, rgba(0,183,255,.22), rgba(47,107,255,.18));
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}

.chat-footer{
  display:flex;
  gap:8px;
  padding:12px;
  border-top:1px solid rgba(255,255,255,.10);
  overflow:auto;
}
.chat-quick{
  flex:0 0 auto;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}

@media (max-width: 560px){
  .chat-fab{ right:14px; bottom:14px; }
  .chat-widget{ right:14px; bottom:70px; height: 520px; }
}

/* ===== User-friendly mobile polish ===== */
@media (max-width: 768px){
  .section{ padding: 48px 0; }
  h1{ font-size: 34px; line-height:1.15; }
  h2{ font-size: 26px; }
  .btn{ width:100%; justify-content:center; }
  .hero-cta{ flex-direction:column; }
  .card, .price-card{ padding:18px; }
}

/* FAQ */
.faq{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.faq-item{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  padding: 12px 14px;
}
.faq-item summary{
  cursor:pointer;
  font-weight:900;
  outline:none;
}
.faq-content{
  margin-top:10px;
  color: var(--muted);
  line-height:1.7;
}

/* ===== Link styling (email & text links) ===== */
a {
  color: #7dd3fc; /* cyber blue */
  text-decoration: none;
  font-weight: 600;
}

a:hover,
a:focus {
  color: #a5e2ff;
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px dashed rgba(125, 211, 252, 0.6);
  outline-offset: 2px;
}

/* ===== Logo visibility boost (no header resize) ===== */

/* Header logo scaled visually */
.header-logo {
  max-height: 100%;
  transform: scale(3);
  transform-origin: left center;
}

/* Keep header height fixed */
.site-header {
  overflow: hidden;
}

/* Large hero logo */
.hero-logo,
.hero-logo img {
  transform: scale(3);
  transform-origin: center;
}

/* Mobile safety */
@media (max-width: 768px) {
  .header-logo {
    transform: scale(2.2);
  }
  .hero-logo,
  .hero-logo img {
    transform: scale(2.2);
  }
}


/* ===== Centered header navigation (no header logo) ===== */
/* Desktop-only centering so mobile hamburger menu still works */
@media (min-width: 901px){
  .site-header .header-inner{
    justify-content: center !important;
    gap: 0 !important;
  }

  .site-header .nav{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .site-header .nav-menu{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
  }
}

/* Keep hamburger visible and clickable on mobile */
@media (max-width: 900px){
  .site-header .header-inner{
    justify-content: space-between !important;
  }
}

/* If there is a mobile toggle, keep it aligned but centered */
.site-header .nav-toggle{
  margin-right: 0 !important;
}


/* ===== Logo tagline colour ===== */
.logo-tagline,
.brand-tagline,
.hero-tagline {
  color: #7dd3fc; /* light cyber blue */
}


/* ===== MOBILE FIXES ===== */
@media (max-width: 768px) {
  /* Ensure header + hamburger are clickable */
  .site-header {
    position: relative;
    z-index: 9999;
  }

  .nav-toggle {
    display: block !important;
    position: relative;
    z-index: 10000;
    pointer-events: auto;
  }

  .nav {
    pointer-events: auto;
  }

  .nav-menu {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.95);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 28px 0;
    display: none;
    z-index: 9998;
  }

  .nav-menu.active {
    display: flex;
  }

  /* Center logo on mobile */
  .hero-logo,
  .hero-logo img {
    margin: 0 auto !important;
    display: block;
    transform-origin: center;
  }
}


/* ===== Mobile navigation fix ===== */
@media (max-width: 768px){
  .nav{ position:relative; }
  .nav-toggle{ display:inline-flex; align-items:center; gap:8px; }
  .nav-menu{
    display:none;
    position:absolute;
    top: calc(100% + 10px);
    left:50%;
    transform: translateX(-50%);
    flex-direction:column;
    align-items:stretch;
    width: min(320px, calc(100vw - 32px));
    padding: 10px;
    border-radius: 16px;
    background: rgba(7,12,24,.94);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 50px rgba(0,0,0,.6);
    z-index: 200;
  }
  .nav-menu.open{ display:flex; }
  .nav-menu li a{ padding: 12px 12px; border-radius: 12px; }
  .nav-menu li a.btn{ width:100%; text-align:center; }

  /* Keep header content centered */
  .site-header .header-inner{ justify-content:center; }

  /* Mobile hero: center logo + copy */
  .hero-copy{ text-align:center; }
  .hero-logo{ margin: 0 auto 10px; }
  .hero-cta{ justify-content:center; }
}


/* ===== Mobile menu overlay fix ===== */
/* Ensure header and nav sit above canvas/effects */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Keep nav toggle clickable */
.nav-toggle{
  position: relative;
  z-index: 10000;
}

/* Force mobile menu to overlay content */
@media (max-width: 900px){
  .nav{
    position: relative;
    z-index: 10000;
  }
  .nav-menu{
    position: absolute !important;
    top: 100%;
    left: 50% !important;
    transform: translateX(-50%);
    z-index: 10000 !important;
  }
}

/* Ensure background effects don't block clicks */
canvas, .nodes-canvas, #nodesCanvas, .fx-layer, .bg-fx{
  pointer-events: none !important;
}