/*
Theme Name: Null Threat Labs
Theme URI: https://nullthreat.com
Author: Null Threat Labs
Author URI: https://nullthreat.com
Description: A dark cybersecurity one-page theme with animated sections, cyber attack map, and full Customizer support.
Version: 4.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nullthreat
Tags: one-column, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ===========================
   CSS CUSTOM PROPERTIES
   =========================== */
:root {
  --nt-bg: hsl(240 10% 4%);
  --nt-bg-rgb: 10,10,14;
  --nt-fg: hsl(0 0% 95%);
  --nt-card: hsl(240 10% 7%);
  --nt-card-fg: hsl(0 0% 95%);
  --nt-primary: hsl(270 80% 60%);
  --nt-primary-fg: hsl(0 0% 100%);
  --nt-secondary: hsl(270 40% 15%);
  --nt-secondary-fg: hsl(270 80% 80%);
  --nt-muted: hsl(240 10% 12%);
  --nt-muted-fg: hsl(240 5% 55%);
  --nt-accent: hsl(270 100% 70%);
  --nt-accent-fg: hsl(0 0% 100%);
  --nt-border: hsl(270 20% 18%);
  --nt-destructive: hsl(0 84% 60%);
  --nt-radius: 0.5rem;
  --nt-container: 1400px;
  --nt-font-body: 'Inter', sans-serif;
  --nt-font-display: 'Space Grotesk', sans-serif;
}

/* Light mode */
.light {
  --nt-bg: hsl(0 0% 98%);
  --nt-bg-rgb: 250,250,250;
  --nt-fg: hsl(240 10% 10%);
  --nt-card: hsl(0 0% 100%);
  --nt-card-fg: hsl(240 10% 10%);
  --nt-primary: hsl(270 80% 55%);
  --nt-primary-fg: hsl(0 0% 100%);
  --nt-secondary: hsl(270 30% 92%);
  --nt-secondary-fg: hsl(270 60% 35%);
  --nt-muted: hsl(240 5% 92%);
  --nt-muted-fg: hsl(240 5% 40%);
  --nt-accent: hsl(270 90% 60%);
  --nt-accent-fg: hsl(0 0% 100%);
  --nt-border: hsl(240 6% 85%);
  --nt-destructive: hsl(0 84% 60%);
}
.light .site-header { background: hsl(0 0% 98% / 0.8); }
.light .hero__bg::after { background: linear-gradient(to bottom, hsl(0 0% 98% / 0.6), hsl(0 0% 98% / 0.8), var(--nt-bg)); }
.light .trust-banner__fade-l { background: linear-gradient(to right, var(--nt-bg), transparent); }
.light .trust-banner__fade-r { background: linear-gradient(to left, var(--nt-bg), transparent); }
.nt-btn--primary,
.nav-menu .nt-btn--primary {
  font-weight: 600;
  box-shadow: 0 4px 14px -3px hsl(270 80% 60% / 0.4);
}

/* Hero EASE bubble — matches React bg-card solid */
.hero__ease-bubble {
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: var(--nt-radius);
  background: var(--nt-card);
}
.hero__ease-title {
  font-size: 0.875rem;
  color: var(--nt-muted-fg);
  margin-bottom: 0.75rem;
}
.hero__ease-title strong {
  color: var(--nt-fg);
  font-weight: 700;
}

/* ===========================
   RESET & BASE
   =========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--nt-border); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--nt-font-body);
  background: var(--nt-bg);
  color: var(--nt-fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--nt-font-display); line-height: 1.15; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; height: auto; }

/* Hard lock icon sizes for critical sections (beats plugin/global SVG rules) */
#why-ntl .diff__card-icon > svg {
  width: 1.25rem !important; height: 1.25rem !important;
  min-width: 1.25rem !important; min-height: 1.25rem !important;
  max-width: 1.25rem !important; max-height: 1.25rem !important;
  display: block !important; flex: 0 0 auto !important;
}
#process .process__icon > svg {
  width: 1.5rem !important; height: 1.5rem !important;
  min-width: 1.5rem !important; min-height: 1.5rem !important;
  max-width: 1.5rem !important; max-height: 1.5rem !important;
  display: block !important; flex: 0 0 auto !important;
}
#industries .industry-card > svg {
  width: 2rem !important; height: 2rem !important;
  min-width: 2rem !important; min-height: 2rem !important;
  max-width: 2rem !important; max-height: 2rem !important;
  display: block !important; flex: 0 0 auto !important;
}
#trusted-by .trusted-by__icon {
  width: 1rem !important; height: 1rem !important;
  min-width: 1rem !important; min-height: 1rem !important;
  max-width: 1rem !important; max-height: 1rem !important;
  display: block !important; flex: 0 0 auto !important;
}

.attack-map__stat-icon { width: 1rem !important; height: 1rem !important; max-width: 1rem !important; max-height: 1rem !important; }
.hero__badge svg { width: 1.25rem !important; height: 1.25rem !important; max-width: 1.25rem !important; max-height: 1.25rem !important; }
.service-card__icon { width: 2rem !important; height: 2rem !important; max-width: 2rem !important; max-height: 2rem !important; }
.site-logo svg { width: 2rem !important; height: 2rem !important; max-width: 2rem !important; max-height: 2rem !important; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--nt-bg); }
::-webkit-scrollbar-thumb { background: hsl(270 80% 60% / 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: hsl(270 80% 60% / 0.5); }

/* ===========================
   LAYOUT
   =========================== */
.nt-container {
  max-width: var(--nt-container);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 768px) { .nt-container { padding: 0 2rem; } }

.nt-section { padding: 6rem 0; position: relative; overflow: hidden; }
.nt-section--muted { background: hsl(240 10% 12% / 0.3); }
.light .nt-section--muted { background: hsl(240 5% 95%); }

/* ===========================
   UTILITIES
   =========================== */
.text-gradient-purple {
  background-image: linear-gradient(135deg, hsl(270 80% 60%), hsl(290 100% 70%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.glow-purple { box-shadow: 0 0 20px hsl(270 80% 60% / 0.3), 0 0 60px hsl(270 80% 60% / 0.1); }
.glow-purple-sm { box-shadow: 0 0 10px hsl(270 80% 60% / 0.2), 0 0 30px hsl(270 80% 60% / 0.05); }
.bg-grid-pattern {
  background-image:
    linear-gradient(hsl(270 80% 60% / 0.03) 1px, transparent 1px),
    linear-gradient(90deg, hsl(270 80% 60% / 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.nt-glow-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(100px);
}
.nt-section-heading { text-align: center; margin-bottom: 4rem; }
.nt-section-heading .nt-overline {
  font-size: 0.75rem; font-weight: 500; color: var(--nt-primary);
  text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.75rem; display: block;
}
.nt-section-heading h2 { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; }
.nt-section-heading p { margin-top: 1rem; color: var(--nt-muted-fg); max-width: 42rem; margin-left: auto; margin-right: auto; }

/* ===========================
   BUTTONS
   =========================== */
.nt-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 2rem; border-radius: var(--nt-radius);
  font-size: 0.875rem; font-weight: 600; transition: all 0.3s;
  cursor: pointer; border: none; text-decoration: none;
}
.nt-btn--primary { background: var(--nt-primary); color: var(--nt-primary-fg); }
.nt-btn--primary:hover { background: var(--nt-accent); }
.nt-btn--outline {
  background: transparent; border: 1px solid var(--nt-border);
  color: var(--nt-muted-fg);
}
.nt-btn--outline:hover { color: var(--nt-fg); border-color: hsl(270 80% 60% / 0.4); }

/* ===========================
   THEME TOGGLE
   =========================== */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--nt-radius);
  border: 1px solid var(--nt-border); background: none; cursor: pointer;
  color: var(--nt-muted-fg); transition: all 0.2s;
}
.theme-toggle:hover { color: var(--nt-primary); border-color: hsl(270 80% 60% / 0.5); }
.theme-toggle__icon { width: 1rem; height: 1rem; }
.theme-toggle__moon { display: none; }
.light .theme-toggle__sun { display: none; }
.light .theme-toggle__moon { display: block; }

/* ===========================
   HEADER / NAVBAR
   =========================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid var(--nt-border);
  background: hsl(240 10% 4% / 0.8);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.site-header .nt-container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1rem; padding-bottom: 1rem;
}
.site-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.site-logo svg { width: 2rem; height: 2rem; color: var(--nt-primary); flex-shrink: 0; }
.site-logo img,
.site-logo .custom-logo { height: 56px !important; width: auto !important; max-width: 160px !important; display: block; object-fit: contain; }
.site-logo span { font-family: var(--nt-font-display); font-size: 1.25rem; font-weight: 700; }

.nav-menu { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-menu a { font-size: 0.875rem; color: var(--nt-muted-fg); transition: color 0.2s; }
.nav-menu a:hover { color: var(--nt-primary); }

/* Nav Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown__trigger { background: none; border: none; cursor: pointer; font-size: 0.875rem; color: var(--nt-muted-fg); display: flex; align-items: center; gap: 0.25rem; transition: color 0.2s; font-family: inherit; }
.nav-dropdown__trigger:hover { color: var(--nt-primary); }
.nav-dropdown__menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 36rem; background: var(--nt-card); border: 1px solid var(--nt-border); border-radius: var(--nt-radius); padding: 1.5rem; margin-top: 0.75rem; z-index: 100; box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.nav-dropdown.is-open .nav-dropdown__menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.nav-dropdown__group h4 { font-family: var(--nt-font-display); font-size: 0.6875rem; font-weight: 600; color: var(--nt-primary); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.5rem; }
.nav-dropdown__group ul { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.nav-dropdown__group ul a { font-size: 0.8125rem; color: var(--nt-muted-fg); padding: 0.25rem 0; display: block; transition: color 0.2s; }
.nav-dropdown__group ul a:hover { color: var(--nt-primary); }

.nav-toggle { display: none; background: none; cursor: pointer; color: var(--nt-fg); }
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }

@media (max-width: 767px) {
  .nav-menu { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--nt-bg); border-top: 1px solid var(--nt-border); padding: 1.5rem; gap: 1rem; }
  .nav-menu.is-open { display: flex; }
  .nav-toggle { display: block; }
  .nav-dropdown__menu { position: static; transform: none; min-width: 0; margin-top: 0.5rem; box-shadow: none; border: none; padding: 0 0 0 1rem; background: transparent; }
  .nav-dropdown.is-open .nav-dropdown__menu { display: flex; flex-direction: column; gap: 1rem; }
}

/* ===========================
   HERO
   =========================== */
.hero { min-height: 100vh; padding-top: 5rem; position: relative; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0.3; }
.hero__bg-tint { position: absolute; inset: 0; background: hsl(270 80% 60% / 0.3); mix-blend-mode: color; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--nt-bg), hsl(240 10% 4% / 0.6), hsl(240 10% 4% / 0.8)); }
.hero .bg-grid-pattern { position: absolute; inset: 0; z-index: 0; }

.hero__inner { display: grid; gap: 2.25rem; align-items: start; position: relative; z-index: 10; padding: 4rem 0; }
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2.25rem;
    padding: 5rem 0;
  }
}

.hero__content { display: flex; flex-direction: column; gap: 2rem; }
.hero__title { font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 700; line-height: 1.1; }
.hero__rotating-word { position: relative; display: inline-block; }
.hero__word { display: inline-block; }

.hero__subtitle { font-size: 1.125rem; color: var(--nt-muted-fg); max-width: 36rem; line-height: 1.7; }

.hero__badges { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.hero__badge { display: flex; align-items: center; gap: 0.5rem; color: var(--nt-secondary-fg); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: color 0.2s; }
a.hero__badge:hover { color: var(--nt-primary); }
.hero__badge svg { width: 1.25rem; height: 1.25rem; color: var(--nt-primary); }

.hero__pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; max-width: 28rem; padding-top: 1rem; }
.hero__pillar {
  border-radius: var(--nt-radius); border: 1px solid var(--nt-border);
  background: hsl(240 10% 7% / 0.5); padding: 0.5rem 0.75rem;
  text-align: center; font-size: 0.75rem; font-weight: 500;
  color: var(--nt-muted-fg); transition: all 0.3s; cursor: pointer;
}
.hero__pillar:hover { border-color: hsl(270 80% 60% / 0.5); color: var(--nt-secondary-fg); }
.light .hero__pillar { background: hsl(0 0% 100% / 0.5); }

/* ===========================
   CONTACT FORM (HERO)
   =========================== */
.contact-card {
  border-radius: var(--nt-radius);
  border: 1px solid var(--nt-border);
  background: var(--nt-card);
  padding: 1.25rem 1.5rem;
  max-width: 34rem;
  margin-left: auto;
}
.contact-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.25rem; }
.contact-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-bottom: 0.75rem; }
@media (max-width: 1023px) {
  .contact-card { max-width: 100%; margin-left: 0; }
}
@media (max-width: 480px) {
  .contact-card .form-row { grid-template-columns: 1fr; }
  .contact-card .service-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 1.125rem; }
}
.contact-card textarea { margin-bottom: 0.75rem; min-height: 5.5rem; }
.contact-card input,
.contact-card textarea {
  width: 100%; border-radius: var(--nt-radius); border: 1px solid var(--nt-border);
  background: var(--nt-muted); padding: 0.55rem 0.875rem; font-size: 0.875rem;
  color: var(--nt-fg); outline: none; transition: border-color 0.2s;
}
.contact-card input:focus,
.contact-card textarea:focus { border-color: var(--nt-primary); }
.contact-card input::placeholder,
.contact-card textarea::placeholder { color: var(--nt-muted-fg); }
.contact-card textarea { resize: none; }
.contact-card .service-label { font-size: 0.875rem; color: var(--nt-muted-fg); margin-bottom: 0.5rem; }
.contact-card .service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem 0.75rem; margin-bottom: 0.75rem; }
.contact-card .service-grid label {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem;
  color: var(--nt-muted-fg); cursor: pointer;
}
.contact-card .service-grid label:hover { color: var(--nt-fg); }
.contact-card .service-grid input[type="checkbox"] { accent-color: var(--nt-primary); }
.contact-card button[type="submit"] {
  width: 100%; padding: 0.65rem; border-radius: var(--nt-radius);
  background: var(--nt-primary); color: var(--nt-primary-fg);
  font-size: 0.875rem; font-weight: 600; border: none; cursor: pointer;
  transition: background 0.2s;
}
.contact-card button[type="submit"]:hover { background: var(--nt-accent); }

/* WPForms dark theme override */
.contact-card .wpforms-container { margin:0; padding:0; }
.contact-card .wpforms-container .wpforms-form input[type="text"],
.contact-card .wpforms-container .wpforms-form input[type="email"],
.contact-card .wpforms-container .wpforms-form input[type="tel"],
.contact-card .wpforms-container .wpforms-form input[type="number"],
.contact-card .wpforms-container .wpforms-form textarea,
.contact-card .wpforms-container .wpforms-form select {
  background: var(--nt-muted) !important; border: 1px solid var(--nt-border) !important;
  color: var(--nt-fg) !important; border-radius: var(--nt-radius) !important;
  padding: 0.625rem 1rem !important; font-size: 0.875rem !important;
}
.contact-card .wpforms-container .wpforms-form input:focus,
.contact-card .wpforms-container .wpforms-form textarea:focus { border-color: var(--nt-primary) !important; }
.contact-card .wpforms-container .wpforms-form .wpforms-field-label,
.contact-card .wpforms-container .wpforms-form label,
.wpforms-form .wpforms-field-label,
.wpforms-form label,
body .wpforms-field-label { color: hsl(270 100% 70%) !important; font-size: 0.875rem !important; }
.wpforms-form .wpforms-field-sublabel, body .wpforms-field-sublabel { color: hsl(240 5% 55%) !important; }
.contact-card .wpforms-container .wpforms-form .wpforms-field-checkbox label,
.contact-card .wpforms-container .wpforms-form .wpforms-field-radio label,
.wpforms-form .wpforms-field-checkbox label,
.wpforms-form .wpforms-field-radio label,
.wpforms-form .wpforms-field-label-inline,
body .wpforms-field-label-inline { color: hsl(270 80% 80%) !important; font-size: 0.8125rem !important; }
.contact-card .wpforms-container .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form button[type="submit"],
.wpforms-form button[type="submit"],
.wpforms-form .wpforms-submit,
.wpforms-form input[type="submit"],
body .wpforms-submit {
  width: 100% !important; padding: 0.75rem !important; border-radius: var(--nt-radius) !important;
  background: hsl(270 80% 60%) !important; color: #fff !important;
  font-weight: 600 !important; font-size: 0.875rem !important; border: none !important;
  cursor: pointer; transition: background 0.2s;
}
.wpforms-form button[type="submit"]:hover, .wpforms-form .wpforms-submit:hover, body .wpforms-submit:hover { background: hsl(270 100% 70%) !important; }
.contact-card .wpforms-container .wpforms-form .wpforms-field-container { margin-bottom: 0; }
.contact-card .wpforms-container .wpforms-form .wpforms-required-label { color: hsl(0 80% 60%); }
.wpforms-form .wpforms-field-checkbox ul, .wpforms-form .wpforms-field-radio ul {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.375rem 0.75rem !important; list-style: none !important; padding: 0 !important; margin: 0 !important;
}
@media (max-width: 480px) { .wpforms-form .wpforms-field-checkbox ul, .wpforms-form .wpforms-field-radio ul { grid-template-columns: 1fr !important; } }

/* ===========================
   TRUST MARQUEE
   =========================== */
.trust-banner {
  position: relative;
  padding: 1.5rem 0;
  background: hsl(270 40% 15% / 0.3);
  border-top: 1px solid var(--nt-border);
  border-bottom: 1px solid var(--nt-border);
  overflow: hidden;
}
.light .trust-banner { background: hsl(270 30% 92% / 0.5); }

.trust-banner__fade-l,
.trust-banner__fade-r {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8rem;
  z-index: 10;
  pointer-events: none;
}
.trust-banner__fade-l { left: 0; background: linear-gradient(to right, var(--nt-bg), transparent); }
.trust-banner__fade-r { right: 0; background: linear-gradient(to left, var(--nt-bg), transparent); }

.trust-banner__viewport {
  overflow: hidden;
}

.trust-banner__track-set {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  width: max-content;
  min-width: 100%;
  will-change: transform;
}

.trust-banner--marquee .trust-banner__track-set {
  animation: marquee var(--trust-speed, 30s) linear infinite;
}

.trust-banner__track {
  display: inline-flex !important;
  align-items: center;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: clamp(1.5rem, 2vw, 3rem);
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: clamp(1.5rem, 2vw, 3rem);
  vertical-align: top;
}

.trust-banner--compact .trust-banner__track {
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
  justify-content: space-evenly;
  padding-inline: min(5vw, 2rem);
  padding-right: 0;
}

.trust-banner__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--nt-muted-fg);
  font-weight: 500;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.trust-banner__logo {
  height: 2rem;
  width: 2rem;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 0.25rem;
}

@media (max-width: 767px) {
  .trust-banner {
    padding: 1.125rem 0;
  }

  .trust-banner--compact .trust-banner__track {
    gap: 1rem;
    padding-inline: 1rem;
  }

  .trust-banner__item {
    font-size: 0.8125rem;
  }
}

@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ===========================
   CYBER ATTACK MAP
   =========================== */
.attack-map__wrapper {
  position: relative; border-radius: var(--nt-radius); border: 1px solid var(--nt-border);
  background: hsl(240 10% 7% / 0.3); overflow: hidden;
}
.attack-map__wrapper svg { width: 100%; height: auto; display: block; min-height: 300px; }
.attack-map__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 28rem; margin: 0 auto 2rem; }
.attack-map__stat { text-align: center; }
.attack-map__stat-icon { width: 1rem; height: 1rem; color: var(--nt-primary); margin: 0 auto 0.25rem; }
.attack-map__stat-value { font-family: var(--nt-font-display); font-size: clamp(1.125rem,2vw,1.25rem); font-weight: 700; }
.attack-map__stat-label { font-size: 0.625rem; color: var(--nt-muted-fg); text-transform: uppercase; letter-spacing: 0.1em; }
.attack-map__feed {
  position: absolute; bottom: 1rem; left: 1rem; max-width: 16rem;
  border-radius: var(--nt-radius); border: 1px solid var(--nt-border);
  background: hsl(240 10% 7% / 0.8); backdrop-filter: blur(8px); padding: 0.75rem;
}
.attack-map__feed-title { font-size: 0.625rem; color: var(--nt-primary); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 500; display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.375rem; }
.attack-map__feed-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--nt-destructive); animation: pulse 2s infinite; }
.attack-map__feed-item { font-size: 0.625rem; color: var(--nt-muted-fg); line-height: 1.4; }
.attack-map__feed-item .type { color: var(--nt-destructive); font-weight: 500; }
.attack-map__link { display: flex; justify-content: center; margin-top: 1.5rem; }
.attack-map__link a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--nt-muted-fg); transition: color 0.2s; }
.attack-map__link a:hover { color: var(--nt-primary); }
.attack-map__link svg { width: 1rem; height: 1rem; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ===========================
   STATS COUNTER
   =========================== */
.stats { padding: 5rem 0; position: relative; }
.stats::before, .stats::after { content:''; position:absolute; left:0; right:0; height:1px; background: linear-gradient(to right, transparent, hsl(270 80% 60% / 0.4), transparent); }
.stats::before { top: 0; }
.stats::after { bottom: 0; }
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 1024px) { .stats__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.stats__item { text-align: center; }
.stats__value { font-family: var(--nt-font-display); font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 700; }
.stats__label { font-size: clamp(0.625rem, 1.2vw, 0.875rem); color: var(--nt-muted-fg); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 500; margin-top: 0.5rem; }

/* ===========================
   DIFFERENTIATOR
   =========================== */
.diff__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 52rem; margin: 0 auto; }
@media (min-width: 768px) { .diff__grid { grid-template-columns: 1fr 1fr; } }
.diff__card {
  border-radius: var(--nt-radius); border: 1px solid var(--nt-border);
  background: var(--nt-card); padding: 1.5rem; transition: border-color 0.3s;
}
.diff__card:hover { border-color: hsl(270 80% 60% / 0.3); }
.diff__card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.diff__card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; min-width: 2.5rem; min-height: 2.5rem;
  max-width: 2.5rem; max-height: 2.5rem;
  border-radius: var(--nt-radius);
  border: 1px solid hsl(270 80% 60% / 0.2); background: var(--nt-secondary); flex-shrink: 0;
}
#why-ntl .diff__card-icon > svg {
  width: 1.25rem !important; height: 1.25rem !important;
  min-width: 1.25rem !important; min-height: 1.25rem !important;
  max-width: 1.25rem !important; max-height: 1.25rem !important;
  display: block; flex: none;
  color: var(--nt-primary);
}
.diff__card h3 { font-weight: 600; font-size: 1rem; }
.diff__card p { font-size: 0.875rem; color: var(--nt-muted-fg); line-height: 1.6; padding-left: 3.25rem; }

/* ===========================
   PROCESS — SECURITY CYCLE
   =========================== */
.process__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .process__grid { grid-template-columns: repeat(4, 1fr); gap: 0; } }
.process__step { position: relative; text-align: center; padding: 1.5rem 1rem; }
.process__connector { display: none; }
@media (min-width: 768px) {
  .process__connector { display: block; position: absolute; top: 5rem; left: calc(50% + 1.75rem); right: 0; height: 1px; background: linear-gradient(to right, hsl(270 80% 60% / 0.4), hsl(270 80% 60% / 0.1)); }
}
.process__phase { font-size: 0.625rem; font-family: monospace; color: hsl(270 80% 60% / 0.5); text-transform: uppercase; letter-spacing: 0.3em; display: block; margin-bottom: 0.75rem; }
#process .process__icon {
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem !important; height: 3.5rem !important;
  min-width: 3.5rem !important; min-height: 3.5rem !important;
  max-width: 3.5rem !important; max-height: 3.5rem !important;
  border-radius: 50%;
  border: 1px solid hsl(270 80% 60% / 0.3); background: var(--nt-card);
  margin: 0 auto 1.25rem; transition: all 0.3s;
}
.process__step:hover .process__icon { border-color: hsl(270 80% 60% / 0.6); }
#process .process__icon > svg {
  width: 1.5rem !important; height: 1.5rem !important;
  min-width: 1.5rem !important; min-height: 1.5rem !important;
  max-width: 1.5rem !important; max-height: 1.5rem !important;
  display: block; flex: none;
  color: var(--nt-primary);
}
.process__step h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; }
.process__step p { font-size: 0.875rem; color: var(--nt-muted-fg); line-height: 1.6; }

/* ===========================
   TRUSTED BY
   =========================== */
.trusted-by { padding: 4rem 0; border-top: 1px solid var(--nt-border); border-bottom: 1px solid var(--nt-border); }
.light .trusted-by { background: hsl(240 5% 95%); }
.trusted-by__label {
  text-align: center; font-size: 0.75rem; font-weight: 500; color: var(--nt-muted-fg);
  text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 2.5rem;
}
.trusted-by__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem 3rem; max-width: 52rem; margin: 0 auto; }
.trusted-by__item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--nt-muted-fg); font-weight: 500; opacity: 0.7; }
.trusted-by__icon { width: 1rem; height: 1rem; color: hsl(270 80% 60% / 0.4); }

/* ===========================
   SERVICES BENTO GRID
   =========================== */
.services__grid {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: hsl(270 20% 18% / 0.5);
  border-radius: var(--nt-radius); overflow: hidden;
  border: 1px solid var(--nt-border);
}
@media (min-width: 640px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  background: var(--nt-card); padding: 1.75rem; position: relative;
  transition: all 0.5s; cursor: pointer;
}
.service-card:hover { background: hsl(270 80% 60% / 0.04); }
.service-card::before {
  content:''; position: absolute; top:0; left:0; right:0; height: 1px;
  background: linear-gradient(to right, transparent, var(--nt-primary), transparent);
  transform: scaleX(0); transition: transform 0.4s;
}
.service-card:hover::before { transform: scaleX(1); }
.service-card__tag {
  display: inline-block; font-size: 0.625rem; font-weight: 500;
  color: hsl(270 80% 60% / 0.6); text-transform: uppercase; letter-spacing: 0.2em;
  border: 1px solid hsl(270 80% 60% / 0.2); border-radius: 9999px;
  padding: 0.125rem 0.625rem; margin-bottom: 1rem;
}
.service-card__icon { width: 2rem; height: 2rem; color: var(--nt-primary); margin-bottom: 1.25rem; transition: all 0.3s; }
.service-card:hover .service-card__icon { color: var(--nt-accent); filter: drop-shadow(0 0 8px hsl(270 80% 60% / 0.6)); }
.service-card__title { font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; }
.service-card__desc { font-size: 0.875rem; color: var(--nt-muted-fg); line-height: 1.6; transition: color 0.3s; }
.service-card:hover .service-card__desc { color: hsl(0 0% 95% / 0.7); }
.light .service-card:hover .service-card__desc { color: hsl(240 10% 30%); }
.service-card__arrow { margin-top: 1rem; font-size: 0.75rem; font-weight: 500; color: var(--nt-primary); opacity: 0; transform: translateX(-0.5rem); transition: all 0.3s; }
.service-card:hover .service-card__arrow { opacity: 1; transform: translateX(0); }

/* ===========================
   INDUSTRIES
   =========================== */
.industries__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; align-items: stretch; }
@media (min-width: 1024px) { .industries__grid { grid-template-columns: repeat(4,1fr); } }
.industry-card {
  border-radius: var(--nt-radius); border: 1px solid var(--nt-border);
  background: var(--nt-card); padding: 1.5rem; transition: all 0.3s; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start;
}
.industry-card:hover { border-color: hsl(270 80% 60% / 0.4); }
#industries .industry-card > svg {
  width: 2rem !important; height: 2rem !important;
  min-width: 2rem !important; min-height: 2rem !important;
  max-width: 2rem !important; max-height: 2rem !important;
  display: block; flex: none;
  color: var(--nt-primary); margin-bottom: 0.75rem; transition: color 0.3s;
}
.industry-card:hover > svg { color: var(--nt-accent); }
.industry-card h3 { font-weight: 600; margin-bottom: 0.25rem; }
.industry-card p { font-size: 0.75rem; color: var(--nt-muted-fg); }

/* ===========================
   WHY US / PILLARS
   =========================== */
.pillars__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
@media (min-width: 1024px) { .pillars__grid { grid-template-columns: repeat(4,1fr); } }
.pillar-card {
  border-radius: var(--nt-radius); border: 1px solid var(--nt-border);
  background: var(--nt-card); padding: 1.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.pillar-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  border: 1px solid hsl(270 80% 60% / 0.3);
  background: var(--nt-secondary);
}
.pillar-card__icon svg { width: 1.5rem; height: 1.5rem; color: var(--nt-primary); }
.pillar-card h3 { font-weight: 600; }
.pillar-card__focus { font-size: 0.75rem; font-weight: 500; color: var(--nt-primary); text-transform: uppercase; letter-spacing: 0.1em; }
.pillar-card p:last-child { font-size: 0.875rem; color: var(--nt-muted-fg); line-height: 1.6; }
a.pillar-card--link { text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
a.pillar-card--link:hover { border-color: hsl(270 80% 60% / 0.5); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

/* Service detail pages: lock checklist icon sizing to match Lovable 1:1 */
body[class*="page-template-page-service-"] .pillar-card ul li svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  flex: 0 0 auto !important;
  display: block !important;
  margin-top: 0.125rem;
}

/* ===========================
   ABOUT (MISSION / VISION)
   =========================== */
.about__grid { display: grid; gap: 4rem; }
@media (min-width: 1024px) { .about__grid { grid-template-columns: 1fr 1fr; } }
.about__block { display: flex; flex-direction: column; gap: 1.5rem; }
.about__block .nt-overline { font-size: 0.75rem; font-weight: 500; color: var(--nt-primary); text-transform: uppercase; letter-spacing: 0.15em; }
.about__block h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.2; }
.about__block p { color: var(--nt-muted-fg); line-height: 1.7; }

/* ===========================
   CTA
   =========================== */
.cta { position: relative; padding: 6rem 0; text-align: center; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; background: linear-gradient(135deg, hsl(270 80% 60% / 0.1), var(--nt-bg), hsl(270 100% 70% / 0.05)); }
.cta__inner { position: relative; z-index: 10; max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.cta__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 9999px; border: 1px solid hsl(270 80% 60% / 0.3);
  background: hsl(270 80% 60% / 0.1); padding: 0.375rem 1rem;
  font-size: 0.75rem; font-weight: 500; color: var(--nt-primary);
}
.cta__badge svg { width: 0.875rem; height: 0.875rem; }
.cta h2 { font-size: clamp(1.75rem, 5vw, 3.75rem); font-weight: 700; line-height: 1.1; }
.cta p { font-size: 1.125rem; color: var(--nt-muted-fg); max-width: 36rem; }
.cta__buttons { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.cta__buttons .nt-btn {
  padding: 0.625rem 2rem !important;
  font-size: 0.875rem !important;
  font-weight: 600;
  border-radius: 0.375rem;
}
.cta__buttons .nt-btn svg {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem;
  min-height: 1rem;
  flex-shrink: 0;
}
@media (min-width: 640px) { .cta__buttons { flex-direction: row; } }

/* ===========================
   FOOTER
   =========================== */
.site-footer { border-top: 1px solid var(--nt-border); background: var(--nt-card); padding: 3rem 0; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } }
.footer__brand p { font-size: 0.875rem; color: var(--nt-muted-fg); margin-top: 1rem; }
.footer__social { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.footer__social a { font-size: 0.75rem; color: var(--nt-muted-fg); transition: color 0.2s; }
.footer__social a:hover { color: var(--nt-primary); }
.footer__col h4 { font-family: var(--nt-font-display); font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer__col a { font-size: 0.875rem; color: var(--nt-muted-fg); transition: color 0.2s; }
.footer__col a:hover { color: var(--nt-primary); }
.footer__col li { font-size: 0.875rem; color: var(--nt-muted-fg); }
.footer__copy { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--nt-border); text-align: center; font-size: 0.75rem; color: var(--nt-muted-fg); }

/* About page hero grid */
@media (min-width: 1024px) {
  .about-page__hero-grid { grid-template-columns: 1fr 1fr; }
}

/* ===========================
   ANIMATIONS (scroll-triggered via JS)
   =========================== */
.nt-reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.6s, transform 0.6s; }
.nt-reveal.is-visible { opacity: 1; transform: translateY(0); }
.nt-reveal[data-delay="1"] { transition-delay: 0.1s; }
.nt-reveal[data-delay="2"] { transition-delay: 0.2s; }
.nt-reveal[data-delay="3"] { transition-delay: 0.3s; }
.nt-reveal[data-delay="4"] { transition-delay: 0.4s; }
.nt-reveal[data-delay="5"] { transition-delay: 0.5s; }

/* CSS-only fallback: if JS fails to add .is-visible, auto-reveal after 1.5s */
@keyframes ntlRevealFallback {
  to { opacity: 1; transform: translateY(0); }
}
.nt-reveal { animation: ntlRevealFallback 0.6s ease 1.5s forwards; }
.nt-reveal[data-delay="1"] { animation-delay: 1.6s; }
.nt-reveal[data-delay="2"] { animation-delay: 1.7s; }
.nt-reveal[data-delay="3"] { animation-delay: 1.8s; }
.nt-reveal[data-delay="4"] { animation-delay: 1.9s; }
.nt-reveal[data-delay="5"] { animation-delay: 2.0s; }
/* When JS works and adds is-visible, cancel the fallback animation */
.nt-reveal.is-visible { animation: none; }

/* Logo dark/light switching */
.logo-dark { display: block !important; }
.logo-light { display: none !important; }
.light .logo-dark { display: none !important; }
.light .logo-light { display: block !important; }

/* ===========================
   EASE BUTTON (Hero)
   =========================== */
.hero__ease-btn,
a.hero__ease-btn,
a.hero__ease-btn:link,
a.hero__ease-btn:visited,
.hero__content > a[href*="ntl_ease_page"],
.hero__content > a[href*="/ease"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  padding: 0.875rem 2rem !important;
  min-height: 2.875rem;
  border-radius: var(--nt-radius) !important;
  border: 1px solid hsl(270 80% 70% / 0.35) !important;
  background-color: var(--nt-primary) !important;
  background-image: linear-gradient(135deg, hsl(270 80% 60%), hsl(282 95% 62%)) !important;
  color: var(--nt-primary-fg) !important;
  font-family: var(--nt-font-display);
  font-weight: 600 !important;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  text-align: center;
  line-height: 1.2;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  -webkit-text-fill-color: var(--nt-primary-fg) !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
}
.hero__ease-btn:hover,
.hero__content > a[href*="ntl_ease_page"]:hover,
.hero__content > a[href*="/ease"]:hover {
  background-color: hsl(270 80% 55%) !important;
  background-image: linear-gradient(135deg, hsl(270 80% 55%), hsl(282 95% 58%)) !important;
  color: var(--nt-primary-fg) !important;
}
.hero__ease-btn:focus-visible,
.hero__content > a[href*="ntl_ease_page"]:focus-visible,
.hero__content > a[href*="/ease"]:focus-visible {
  outline: 2px solid hsl(270 100% 75%);
  outline-offset: 2px;
}

/* ===========================
   EASE PAGE
   =========================== */
.ease-badge {
  display: inline-block;
  border: 1px solid hsl(270 80% 60% / 0.5);
  background: hsl(270 80% 60% / 0.1);
  border-radius: 9999px;
  padding: 0.375rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--nt-primary);
  margin-bottom: 1.5rem;
}
.ease-heading {
  font-family: var(--nt-font-display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.ease-heading__bar {
  width: 0.25rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--nt-primary);
}
.ease-acronym {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.ease-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.ease-card {
  border: 1px solid var(--nt-border);
  background: var(--nt-card);
  border-radius: var(--nt-radius);
  padding: 1.25rem;
}
.ease-callout {
  border: 1px solid hsl(270 80% 60% / 0.4);
  background: hsl(270 80% 60% / 0.05);
  border-radius: var(--nt-radius);
  padding: 2rem;
}
.ease-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.ease-step {
  border: 1px solid hsl(270 80% 60% / 0.3);
  background: hsl(270 80% 60% / 0.1);
  border-radius: var(--nt-radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (max-width: 768px) {
  .ease-grid { grid-template-columns: 1fr; }
  .ease-why-grid { grid-template-columns: 1fr; }

  /* Hero skyline mobile — push image up and zoom for better framing */
  .hero__bg img {
    object-position: center 70%;
    opacity: 0.2;
  }
  .hero { min-height: auto; padding-top: 5rem; padding-bottom: 2rem; }
  .hero__inner { padding: 2rem 0; gap: 2rem; }
  .hero__title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .hero__subtitle { font-size: 1rem; }
  .hero__pillars { max-width: 100%; }

  /* EASE button — full width on mobile, keep filled style + centered copy */
  .hero__ease-btn,
  .hero__content > a[href*="ntl_ease_page"],
  .hero__content > a[href*="/ease"] {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 0.875rem 1.25rem !important;
    font-size: 0.875rem;
    white-space: normal;
    text-wrap: balance;
  }
}

@media (max-width: 480px) {
  .hero__bg img {
    object-position: center 60%;
    opacity: 0.15;
  }
  .hero__badges { gap: 0.75rem; }
  .hero__badge { font-size: 0.75rem; }
  .hero__ease-btn,
  .hero__content > a[href*="ntl_ease_page"],
  .hero__content > a[href*="/ease"] {
    font-size: 0.8125rem;
    padding: 0.75rem 1rem !important;
  }
}