/*
Theme Name: CyberTheme
Theme URI: https://example.com
Author: You
Author URI: https://example.com
Description: A lightweight, custom-coded WordPress theme for a cybersecurity agency. Built for speed first, design second.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cybertheme
*/

/* ==========================================================================
   1. RESET — strip browser defaults so we control every pixel intentionally
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ==========================================================================
   1b. FONT FACES — self-hosted Poppins (only the weights actually used:
   400 body text, 600 headings/buttons, 700 site title/stat numbers).
   Loaded locally instead of Google Fonts CDN to avoid an extra DNS lookup
   and render-blocking external request.
   ========================================================================== */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-700.woff2') format('woff2');
}

/* ==========================================================================
   2. DESIGN TOKENS — change these variables to re-theme the entire site
   ========================================================================== */
:root {
  /* Colors */
  --color-bg: #0a0e14;
  --color-bg-alt: #10151f;
  --color-surface: #131924;
  --color-border: #1e2733;
  --color-text: #e6ebf2;
  --color-text-muted: #8b96a5;
  --color-accent: #ffe400;
  --color-accent-dim: #ccb600;
  --color-accent-glow: rgba(255, 228, 0, 0.35);

  /* Buttons use a slightly deeper yellow than the brand accent. At the size
     of a filled button, full #ffe400 reads as glaring; small accents (icons,
     links, stat numbers) stay on the brand colour. Tune these two values to
     make every button on the site lighter or darker. */
  --color-btn: #ecd200;
  --color-btn-hover: #d4bc00;
  --color-btn-text: #14180d;

  /* Typography */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Kept monospace on purpose — only used by the hero terminal window visual
     so it still reads as a real terminal after the Poppins switch. */
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Layout */
  --container-width: 1200px;
  --radius: 6px;
}

/* ==========================================================================
   3. BASE ELEMENTS
   ========================================================================== */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  font-weight: 600;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }

p {
  color: var(--color-text-muted);
}

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

.section {
  padding-block: var(--space-lg);
}

@media (max-width: 768px) {
  .section {
    padding-block: var(--space-md);
  }
}

/* Screen-reader only text (for accessibility, e.g. skip links) */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn--primary {
  background-color: var(--color-btn);
  color: var(--color-btn-text);
  /* A soft drop shadow rather than a neon halo — the glow made the button
     bloom against the dark background. */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.btn--primary:hover {
  background-color: var(--color-btn-hover);
  transform: translateY(-2px);
}

.btn__arrow {
  display: inline-flex;
  transition: transform 0.2s ease;
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.btn--ghost {
  border: 1px solid var(--color-border);
  color: var(--color-text);
  margin-inline-start: var(--space-xs);
}

.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--large {
  padding: 1rem 2.5rem;
  font-size: 1rem;
}

.text-accent {
  color: var(--color-accent);
}

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-xs);
}

.site-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Uploaded logo (Customize > Site Identity). WordPress outputs the image at
   its full natural size, so it must be capped here or a large upload will
   take over the whole header. */
.site-branding {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.custom-logo {
  width: auto;
  height: auto;
  max-height: 44px;
  max-width: 200px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .custom-logo {
    max-height: 36px;
    max-width: 150px;
  }
}

.primary-nav {
  display: flex;
  align-items: center;
}

#primary-menu {
  display: flex;
  gap: var(--space-md);
}

#primary-menu a {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

#primary-menu a:hover {
  color: var(--color-accent);
}

/* Highlight the nav item for the page currently being viewed.
   WordPress adds these classes to the <li> automatically via wp_nav_menu(). */
#primary-menu .current-menu-item > a,
#primary-menu .current_page_item > a {
  color: var(--color-accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}

.nav-toggle__bar {
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Dropdown submenus — any menu item with children in Appearance > Menus.
   Hidden until the parent is hovered or keyboard-focused. */
#primary-menu > li {
  position: relative;
}

#primary-menu .sub-menu {
  position: absolute;
  top: 100%;
  /* Right-anchored: the nav sits on the right of the header, so opening
     leftward keeps the panel inside the viewport. A hidden dropdown still
     occupies layout, so left-anchoring made the page scroll sideways. */
  right: 0;
  left: auto;
  z-index: 120;
  display: block;
  min-width: 210px;
  padding: 0.4rem 0;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

#primary-menu > li:hover > .sub-menu,
#primary-menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#primary-menu .sub-menu a {
  display: block;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* The sliding underline is for top-level items only */
#primary-menu .sub-menu a::after {
  display: none;
}

/* Small chevron marking items that have a dropdown */
#primary-menu .menu-item-has-children > a {
  padding-right: 14px;
}

#primary-menu .menu-item-has-children > a::before {
  content: '';
  position: absolute;
  right: 0;
  top: 45%;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.7;
}

/* Mobile nav — below 768px, collapse into a toggled dropdown */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  #primary-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background-color: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  #primary-menu.is-open {
    max-height: 600px;
  }

  #primary-menu li {
    border-top: 1px solid var(--color-border);
  }

  #primary-menu a {
    display: block;
    padding: var(--space-sm) var(--space-sm);
  }

  /* Submenus sit inline and indented on mobile rather than floating,
     so everything is reachable by tapping without a hover state. */
  #primary-menu .sub-menu {
    position: static;
    min-width: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
  }

  #primary-menu .sub-menu a {
    padding-left: var(--space-md);
    color: var(--color-text-muted);
  }

  #primary-menu .menu-item-has-children > a::before {
    display: none;
  }
}

/* ==========================================================================
   7. HERO (base grid background — full hero styling is in section 19)
   ========================================================================== */
.hero__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 70%);
  opacity: 0.5;
}

/* ==========================================================================
   8. SECTION HEADINGS (shared across services/stats/cta)
   ========================================================================== */
.section__eyebrow {
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: 0.85rem;
  margin-bottom: var(--space-xs);
  text-align: center;
}

.section__title {
  text-align: center;
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   9. SERVICES GRID
   ========================================================================== */
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-sm);
}

/* Products has 6 cards — auto-fit alone puts 4 in row 1 and leaves the
   remaining 2 stranded on the left in row 2. Locking it to a fixed 3
   columns gives two full, evenly centered rows instead. The 1024px/600px
   breakpoints below still apply since this shares the .services__grid class. */
.products__grid {
  grid-template-columns: repeat(3, 1fr);
}

.service-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-sm);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.service-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
}

.service-card__icon {
  width: 44px;
  height: 44px;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
  transition: transform 0.25s ease;
}

.tilt-card:hover .service-card__icon {
  transform: scale(1.12);
}

.service-card__title {
  margin-bottom: var(--space-xs);
  font-size: 1.1rem;
}

.service-card__desc {
  font-size: 0.9rem;
}

@media (max-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .services__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   10. STATS
   ========================================================================== */
.stats {
  background-color: var(--color-bg-alt);
  border-block: 1px solid var(--color-border);
}

.products {
  background-color: var(--color-bg-alt);
  border-block: 1px solid var(--color-border);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  text-align: center;
}

.stat__number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--color-accent);
  font-weight: 700;
}

/* Stat numbers sit dimmed until they scroll into view, then flash up to
   full accent brightness as the count-up animation kicks in. */
.reveal .stat__number {
  color: var(--color-text-muted);
  transition: color 0.8s ease 0.15s;
}

.reveal.is-visible .stat__number {
  color: var(--color-accent);
}

.stat__label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

/* ==========================================================================
   11. CTA
   ========================================================================== */
.cta__inner {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
}

.cta__subtitle {
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-md);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.site-footer__branding {
  font-family: var(--font-heading);
  font-weight: 700;
}

.footer-nav ul {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.footer-nav a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.footer-nav a:hover {
  color: var(--color-accent);
}

.site-footer__copyright {
  width: 100%;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   13. SCROLL-REVEAL ANIMATIONS
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger children of a revealed group (e.g. service cards) for a
   subtle cascading effect instead of everything popping in at once. */
.reveal-group .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-group .reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal-group .reveal:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   14. INNER PAGE HERO (Services/About/Contact headers)
   ========================================================================== */
.page-hero {
  padding-block: var(--space-lg) var(--space-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.page-hero .section__eyebrow {
  margin-bottom: var(--space-xs);
}

.page-hero__intro {
  max-width: 600px;
  margin-inline: auto;
  margin-top: var(--space-sm);
}

/* Generic page.php content */
.page-content__title {
  margin-bottom: var(--space-md);
  text-align: center;
}

.page-content__body {
  max-width: 720px;
  margin-inline: auto;
}

.page-content__body p {
  margin-bottom: var(--space-sm);
}

/* ==========================================================================
   15. SERVICES DETAIL LIST (template-services.php)
   ========================================================================== */
.services-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.service-detail {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.service-detail:last-child {
  border-bottom: none;
}

.service-detail__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.service-detail__index {
  color: var(--color-accent);
  font-size: 0.9rem;
  opacity: 0.7;
}

.service-detail__desc {
  max-width: 720px;
}

/* ==========================================================================
   16. ABOUT PAGE CONTENT
   ========================================================================== */
.about-content {
  max-width: 720px;
  margin-inline: auto;
}

.about-content h2 {
  margin-bottom: var(--space-xs);
  margin-top: var(--space-md);
}

.about-content h2:first-child {
  margin-top: 0;
}

.about-content p {
  margin-bottom: var(--space-sm);
}

/* ==========================================================================
   17. CONTACT FORM
   ========================================================================== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.form-field input,
.form-field textarea {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.contact-form button {
  align-self: flex-start;
  margin-top: var(--space-xs);
}

.form-notice {
  padding: var(--space-sm);
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
  font-size: 0.95rem;
}

.form-notice--success {
  background-color: rgba(255, 228, 0, 0.1);
  border: 1px solid var(--color-accent);
  color: var(--color-text);
}

.form-notice--error {
  background-color: rgba(255, 80, 80, 0.08);
  border: 1px solid #ff5050;
  color: var(--color-text);
}

.form-notice--error ul {
  padding-left: 1.2rem;
  list-style: disc;
}

/* ==========================================================================
   18. GLOBAL POLISH — scrollbar, selection, scroll progress
   ========================================================================== */
::selection {
  background-color: var(--color-accent);
  color: #00131a;
}

html {
  scrollbar-color: var(--color-accent-dim) var(--color-bg);
  scrollbar-width: thin;
}

body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background: var(--color-bg);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-accent-dim);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 200;
  background: transparent;
}

.scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent-dim), var(--color-accent));
  box-shadow: 0 0 8px var(--color-accent-glow);
  transition: width 0.1s ease-out;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  margin-right: 0.5rem;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.site-title__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Underline hover animation for nav links */
#primary-menu a {
  position: relative;
}

#primary-menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  transition: width 0.25s ease;
}

#primary-menu a:hover::after,
#primary-menu .current-menu-item > a::after,
#primary-menu .current_page_item > a::after {
  width: 100%;
}

/* ==========================================================================
   19. HERO — radar sweep, glow orbs, layout, terminal card, cycling text
   ========================================================================== */
.hero {
  position: relative;
  padding-block: var(--space-xl) var(--space-lg);
  overflow: hidden;
  text-align: left;
}

.hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-lg);
  align-items: center;
}

.hero__inner {
  max-width: 640px;
}

.hero__radar {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  opacity: 0.4;
}

.hero__radar::before,
.hero__radar::after {
  content: '';
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}

.hero__radar::after {
  inset: 32%;
}

/* Overlay sits at the exact same box as .hero__radar but stays outside it,
   so its contents render at full opacity instead of inheriting the rings'
   0.4 opacity. */
.hero__radar-overlay {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  pointer-events: none;
  z-index: 0;
}

.hero__radar-chip {
  position: absolute;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background-color: rgba(19, 25, 36, 0.85);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  white-space: nowrap;
  animation: float-glow 7s ease-in-out infinite;
}

.hero__radar-chip--1 {
  top: 18%;
  right: 6%;
  animation-duration: 6s;
}

.hero__radar-chip--2 {
  bottom: 24%;
  left: 6%;
  animation-duration: 8s;
  animation-direction: reverse;
}

.hero__radar-chip--3 {
  bottom: 6%;
  right: 24%;
  animation-duration: 9s;
}

@media (max-width: 1100px) {
  .hero__radar-chip {
    display: none;
  }
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.hero__glow--1 {
  width: 400px;
  height: 400px;
  top: -10%;
  left: -5%;
  background: radial-gradient(circle, var(--color-accent-glow), transparent 70%);
  animation: float-glow 8s ease-in-out infinite;
}

.hero__glow--2 {
  width: 350px;
  height: 350px;
  bottom: -15%;
  right: 5%;
  background: radial-gradient(circle, rgba(255, 228, 0, 0.15), transparent 70%);
  animation: float-glow 10s ease-in-out infinite reverse;
}

@keyframes float-glow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -20px); }
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: 0.9rem;
  margin-bottom: var(--space-sm);
}

.hero__title {
  margin-bottom: var(--space-sm);
}

.hero__cycle {
  display: inline-block;
  min-height: 1.2em;
}

.hero__subtitle {
  font-size: 1.1rem;
  max-width: 520px;
  margin-bottom: var(--space-md);
}

.hero__actions {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn--ghost {
    margin-inline-start: 0;
  }
}

/* Cursor-follow glow on the primary CTA button */
.btn--glow-cursor {
  position: relative;
  overflow: hidden;
}

.btn--glow-cursor::before {
  content: '';
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.btn--glow-cursor:hover::before {
  opacity: 1;
}

/* Terminal card visual */
.hero__visual {
  display: flex;
  justify-content: center;
}

.terminal-card {
  width: 100%;
  max-width: 420px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px var(--color-accent-glow);
  animation: float-card 6s ease-in-out infinite;
}

@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.terminal-card__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.terminal-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.terminal-card__dot--red { background-color: #ff5f57; }
.terminal-card__dot--yellow { background-color: #febc2e; }
.terminal-card__dot--green { background-color: #28c840; }

.terminal-card__label {
  margin-left: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.terminal-card__body {
  padding: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.8;
}

.terminal-card__body p {
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
}

.terminal-card__prompt {
  color: var(--color-accent);
  margin-right: 0.5rem;
}

.terminal-card__line-dim {
  color: var(--color-text-muted) !important;
}

.terminal-card__line-ok {
  color: #4ade80 !important;
}

.terminal-card__line-warn {
  color: #facc15 !important;
}

.terminal-card__cursor {
  animation: blink-cursor 1s step-end infinite;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (max-width: 480px) {
  .terminal-card__body {
    font-size: 0.7rem;
  }

  .terminal-card__body p {
    white-space: normal;
    word-break: break-word;
  }
}

@media (max-width: 900px) {
  .hero__layout {
    grid-template-columns: 1fr;
  }

  .hero__inner {
    max-width: 100%;
    text-align: center;
    margin-inline: auto;
  }

  .hero__eyebrow,
  .hero__actions {
    justify-content: center;
  }

  .hero__subtitle {
    margin-inline: auto;
  }

  .hero__visual {
    margin-top: var(--space-md);
  }
}

/* ==========================================================================
   20. TILT CARDS (service cards) — gradient border glow on hover
   ========================================================================== */
.tilt-card {
  position: relative;
  will-change: transform;
  transform-style: preserve-3d;
}

.tilt-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(135deg, var(--color-accent), transparent 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.tilt-card:hover::before {
  opacity: 1;
}

/* ==========================================================================
   21. WHY CHOOSE US SECTION
   ========================================================================== */
.why-us__layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-lg);
  align-items: start;
}

.why-us__desc {
  margin-top: var(--space-sm);
  max-width: 420px;
}

.why-us__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.why-us__item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.why-us__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.why-us__num {
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: 1.1rem;
  opacity: 0.6;
  flex-shrink: 0;
}

.why-us__item-title {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.why-us__item-desc {
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .why-us__layout {
    grid-template-columns: 1fr;
  }
}

/* Stat cards glass style */
.stat-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-sm);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.stat-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
}

/* ==========================================================================
   22. BACK TO TOP BUTTON
   ========================================================================== */
.back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.2s ease, color 0.2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ==========================================================================
   23. FOOTER REDESIGN
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-lg) var(--space-md);
  background-color: var(--color-bg-alt);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
}

.footer-col__title {
  font-size: 0.9rem;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.footer-col__desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
  max-width: 320px;
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-nav a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.footer-nav a:hover {
  color: var(--color-accent);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.site-footer__copyright {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* ==========================================================================
   24. ABOUT PAGE — EXPERTISE SPLIT PANEL & VISION CARD
   ========================================================================== */
.expertise__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: stretch;
}

.expertise__text {
  background-color: var(--color-accent);
  color: #00131a;
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.expertise__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  opacity: 0.75;
  margin-bottom: var(--space-xs);
}

.expertise__title {
  margin-bottom: var(--space-sm);
}

.expertise__desc {
  color: rgba(0, 19, 26, 0.75);
  margin-bottom: var(--space-md);
}

.btn--primary-inverse {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn--primary-inverse:hover {
  background-color: var(--color-surface);
  transform: translateY(-2px);
}

.expertise__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.expertise__stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-md);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.expertise__stat:nth-child(2n) {
  border-right: none;
}

.expertise__stat:nth-child(3),
.expertise__stat:nth-child(4) {
  border-bottom: none;
}

.expertise__stat-number {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-accent);
}

.reveal .expertise__stat-number {
  color: var(--color-text-muted);
  transition: color 0.8s ease 0.15s;
}

.reveal.is-visible .expertise__stat-number {
  color: var(--color-accent);
}

.expertise__stat-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .expertise__layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .expertise__stats {
    grid-template-columns: 1fr;
  }

  .expertise__stat {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .expertise__stat:last-child {
    border-bottom: none;
  }
}

.about-vision {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-md);
  background: linear-gradient(180deg, rgba(255, 228, 0, 0.1), transparent 65%);
}

.about-vision__title {
  margin-bottom: var(--space-sm);
}

.about-vision__subtitle {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.about-vision__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
  max-width: 480px;
  margin-inline: auto;
}

.about-vision__list li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--color-text-muted);
}

.about-vision__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* ==========================================================================
   25. DETAIL CARD GRID (Services page, Products page)
   ========================================================================== */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.detail-card {
  position: relative;
  overflow: hidden;
}

.detail-card__index {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 700px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Detail list — horizontal icon+text rows, used where there are too few
   items to fill a grid evenly (e.g. the 3-item Services page). */
.detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.detail-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.detail-row:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
}

.detail-row .service-card__icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.detail-row__body {
  min-width: 0;
}

.detail-row__body .service-card__title {
  margin-bottom: 0.4rem;
}

@media (max-width: 600px) {
  .detail-row {
    flex-direction: column;
  }
}

/* ==========================================================================
   26. CONTACT PAGE
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-lg);
  align-items: start;
}

.contact-info__desc {
  margin-bottom: var(--space-md);
}

.contact-info__method {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  transition: color 0.2s ease;
}

.contact-info__method:hover {
  color: var(--color-accent);
}

.contact-info__method:last-child {
  border-bottom: 1px solid var(--color-border);
}

.contact-info__icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.contact-info__stats {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.contact-info__stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
}

.reveal .contact-info__stat-number {
  color: var(--color-text-muted);
  transition: color 0.8s ease 0.15s;
}

.reveal.is-visible .contact-info__stat-number {
  color: var(--color-accent);
}

.contact-info__stat-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.contact-form-wrap {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: border-color 0.3s ease;
}

.contact-form-wrap:focus-within {
  border-color: var(--color-accent);
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   27. STATEMENT SECTION — a big centered breather between homepage sections
   ========================================================================== */
.statement {
  text-align: center;
}

.statement__text {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  max-width: 900px;
  margin-inline: auto;
}

/* Each word animates in on its own slight delay (see .reveal-group stagger). */
.statement__word {
  display: inline-block;
}

.statement__word.reveal {
  transform: translateY(28px) scale(0.9);
}

.statement__word.reveal.is-visible {
  transform: translateY(0) scale(1);
}

/* ==========================================================================
   28. INTERACTIVE & GRAPHICAL ANIMATIONS
   Cursor-reactive card lighting, animated icons, marquee, scan sweep.
   All transform/opacity based so the browser can run them on the GPU.
   ========================================================================== */

/* Parallax wrapper inside the hero visual — keeps the terminal card centred
   while giving JS a transform-free element to move. */
.hero__parallax {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* --- Cursor spotlight on cards ------------------------------------------
   JS writes --spot-x/--spot-y as the cursor moves; this paints a soft
   accent glow that follows it. Sits at z-index 0 so card text stays above. */
.tilt-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius);
  background: radial-gradient(
    220px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(255, 228, 0, 0.09),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.tilt-card:hover::after {
  opacity: 1;
}

.tilt-card > * {
  position: relative;
  z-index: 1;
}

/* Index watermark is absolutely positioned — keep it that way. */
.tilt-card > .detail-card__index {
  position: absolute;
  z-index: 1;
}

/* --- Card icons: entrance + hover ring ---------------------------------- */
.reveal .service-card__icon,
.reveal .contact-info__icon {
  opacity: 0;
  transform: scale(0.5) rotate(-12deg);
  transition: opacity 0.5s ease 0.15s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}

.reveal.is-visible .service-card__icon,
.reveal.is-visible .contact-info__icon {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* Rotating conic ring that fades in behind a card's icon on hover. */
.service-card__icon {
  position: relative;
}

.service-card__icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--color-accent), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: spin-ring 4s linear infinite;
  animation-play-state: paused;
  z-index: -1;
}

.tilt-card:hover .service-card__icon::before,
.detail-row:hover .service-card__icon::before {
  opacity: 0.25;
  animation-play-state: running;
}

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

/* --- Animated underline under centered section titles -------------------- */
.section__title {
  position: relative;
  padding-bottom: 0.6rem;
}

.section__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-accent);
  transition: width 0.6s ease 0.25s;
}

.reveal.is-visible .section__title::after,
.section__title.reveal.is-visible::after {
  width: 64px;
}

/* Left-aligned headings (Why Us) anchor their underline to the left edge. */
.why-us__text .section__title::after {
  left: 0;
  transform: none;
}

/* --- Inner-page hero: grid backdrop + scan sweep ------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, black 10%, transparent 75%);
  opacity: 0.45;
  pointer-events: none;
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

/* A faint accent line that sweeps down the hero, like a scanner pass. */
.hero__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 140px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 228, 0, 0.05), transparent);
  animation: scan-sweep 7s ease-in-out infinite;
}

@keyframes scan-sweep {
  0%, 100% { transform: translateY(-140px); opacity: 0; }
  50% { transform: translateY(520px); opacity: 1; }
}

/* --- Marquee ticker ------------------------------------------------------ */
.marquee {
  overflow: hidden;
  padding-block: 0.9rem;
  background-color: var(--color-bg-alt);
  border-block: 1px solid var(--color-border);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.marquee__item:hover {
  color: var(--color-accent);
}

.marquee__item::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
  opacity: 0.6;
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* --- Directional reveal variants ---------------------------------------- */
.reveal--left {
  transform: translateX(-36px) scale(0.98);
}

.reveal--right {
  transform: translateX(36px) scale(0.98);
}

.reveal--left.is-visible,
.reveal--right.is-visible {
  transform: translateX(0) scale(1);
}

/* On narrow screens the layout is already stacked, so sliding in from the
   side would push content past the viewport edge and make the whole page
   scroll sideways. Fall back to the plain vertical reveal instead. */
@media (max-width: 900px) {
  .reveal--left,
  .reveal--right {
    transform: translateY(24px) scale(0.97);
  }

  .reveal--left.is-visible,
  .reveal--right.is-visible {
    transform: translateY(0) scale(1);
  }
}

/* --- Numbered badges (Why Us) -------------------------------------------- */
.why-us__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  opacity: 1;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.why-us__item:hover .why-us__num {
  border-color: var(--color-accent);
  transform: scale(1.1);
  box-shadow: 0 0 18px var(--color-accent-glow);
}

/* --- Motion opt-out ------------------------------------------------------
   Anything decorative that loops gets switched off for users who've asked
   their system for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .hero__scan,
  .hero__radar-chip,
  .service-card__icon::before {
    animation: none;
  }

  .hero__scan {
    display: none;
  }

  .reveal .service-card__icon,
  .reveal .contact-info__icon {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   29. ELEMENTOR BRIDGE
   Pages built in Elementor use Elementor's own markup, so these rules map
   the theme's design onto it. Add the class shown in each comment to a
   widget's Advanced > CSS Classes field to opt it into the theme styling.
   ========================================================================== */

/* --- Buttons: class "sx-btn" on a Button widget -------------------------- */
.sx-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background-color: var(--color-btn);
  color: var(--color-btn-text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.sx-btn .elementor-button:hover {
  background-color: var(--color-btn-hover);
  color: var(--color-btn-text);
  transform: translateY(-2px);
}

/* Dark button, for use on an accent-coloured background */
.sx-btn--inverse .elementor-button {
  background-color: var(--color-bg);
  color: var(--color-text);
  box-shadow: none;
}

.sx-btn--inverse .elementor-button:hover {
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* The theme styles bare <p> elements, which would otherwise beat the colour
   Elementor sets on a widget (an element selector wins over an inherited
   value). Inheriting here hands control back to the builder's colour picker. */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  color: inherit;
}

/* --- Cards: classes "service-card tilt-card" on an Icon Box widget -------
   Full height is only wanted when cards sit side by side in a row; add
   "sx-card-fill" for that. Stacked cards keep their natural height. */
.service-card.sx-card-fill {
  height: 100%;
}

/* --- Compact contact rows: class "sx-contact-item" on an Icon Box -------- */
.sx-contact-item.elementor-widget-icon-box {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.sx-contact-item.elementor-widget-icon-box:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.sx-contact-item .elementor-icon-box-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  text-align: left;
}

.sx-contact-item .elementor-icon-box-icon {
  margin: 0;
  flex-shrink: 0;
}

.sx-contact-item .elementor-icon {
  font-size: 20px;
  color: var(--color-accent);
}

.sx-contact-item .elementor-icon-box-title {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  color: var(--color-text);
}

.sx-contact-item .elementor-icon-box-description {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* --- Card grid: class "sx-card-grid" on a Column -------------------------
   Holds any number of cards and reflows on its own, so an odd count (10
   products, 6 services) never strands a single stretched card on the last
   row the way a fixed columns-per-row layout does. */
.elementor .elementor-column.sx-card-grid > .elementor-widget-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-md);
  align-content: start;
}

.elementor .elementor-column.sx-card-grid > .elementor-widget-wrap > .elementor-widget {
  width: 100%;
  margin: 0;
}

@media (max-width: 640px) {
  .elementor .elementor-column.sx-card-grid > .elementor-widget-wrap {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* --- Stats in a 2x2 block: class "sx-stat-grid" on a Column --------------
   Extra specificity (.elementor-column.sx-stat-grid) is required: Elementor
   sets display:flex on .elementor-widget-wrap and its stylesheet loads after
   the theme's, so an equally-specific rule would lose. */
.elementor .elementor-column.sx-stat-grid > .elementor-widget-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  align-content: center;
}

.elementor .elementor-column.sx-stat-grid > .elementor-widget-wrap > .elementor-widget {
  width: 100%;
  margin: 0;
}

/* Stay 2x2 on phones — stacking four full-width cards made the section
   enormously tall. The type steps down instead so labels stop wrapping. */
/* Stay 2x2 on phones — stacking four full-width cards made the section
   enormously tall. Type scales down further below (after the base counter
   rules, so the smaller sizes actually win the cascade). */
@media (max-width: 600px) {
  .elementor .elementor-column.sx-stat-grid > .elementor-widget-wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
}

.service-card .elementor-icon-box-wrapper {
  text-align: left;
}

.service-card .elementor-icon-box-icon {
  margin-bottom: var(--space-sm);
}

.service-card .elementor-icon {
  font-size: 34px;
  color: var(--color-accent);
  transition: transform 0.25s ease;
}

.service-card:hover .elementor-icon {
  transform: scale(1.12);
}

.service-card .elementor-icon-box-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.service-card .elementor-icon-box-description {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* --- Stat counters: classes "stat stat-card" on a Counter widget ---------
   Selectors are deliberately extra-specific here: Elementor's stylesheet
   loads after the theme's, so an equally-specific rule would lose to it. */
.elementor-widget-counter.stat-card .elementor-counter-number-wrapper {
  display: flex;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-accent);
}

.elementor-widget-counter.stat-card .elementor-counter-title {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* Cards in a row match height rather than staggering */
.elementor-widget-wrap > .service-card {
  align-self: stretch;
}

/* --- Bullet list: class "about-vision__list" on a Text Editor widget ----- */
.about-vision__list ul {
  list-style: none;
  padding: 0;
}

.about-vision__list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--color-text-muted);
}

.about-vision__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* Keep the animated underline working on Elementor headings */
.elementor-widget-heading.section__title .elementor-heading-title {
  display: inline-block;
}

/* --- Hero heading: class "sx-hero-title" on a Heading widget ------------- */
.sx-hero-title .elementor-heading-title {
  font-size: clamp(2.2rem, 5.5vw, 3.75rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Lead paragraph: class "sx-lead" on a Text Editor widget ------------- */
.sx-lead {
  font-size: 1.05rem;
  line-height: 1.7;
}

.sx-lead p {
  margin-bottom: 0;
}

/* --- Big statement line: class "sx-statement" on a Heading widget -------- */
.sx-statement .elementor-heading-title {
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 1.3;
}

/* Cards lift on hover. The theme's JS also adds cursor tilt and a spotlight
   glow to anything carrying .tilt-card, so Elementor cards inherit those. */
.elementor-widget-icon-box.service-card {
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.elementor-widget-icon-box.service-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

/* --- Forms: class "sx-form" on a form widget ----------------------------
   Plugin forms ship with light-theme defaults, so inputs and the submit
   button would be near-invisible on the dark background without this. */
.sx-form .wpforms-field-label,
.sx-form label {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Form plugins cap field width (e.g. .wpforms-field-medium), so the
   max-width override is what actually makes fields fill the column. */
.sx-form .wpforms-field-container .wpforms-field,
.sx-form .wpforms-field-small,
.sx-form .wpforms-field-medium,
.sx-form .wpforms-field-large {
  max-width: 100%;
}

.sx-form input[type="text"],
.sx-form input[type="email"],
.sx-form input[type="tel"],
.sx-form input[type="url"],
.sx-form input[type="number"],
.sx-form select,
.sx-form textarea {
  width: 100%;
  max-width: 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sx-form input:focus,
.sx-form select:focus,
.sx-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.sx-form ::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.sx-form button[type="submit"],
.sx-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  border: none;
  border-radius: var(--radius);
  background-color: var(--color-btn);
  color: var(--color-btn-text);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.sx-form button[type="submit"]:hover,
.sx-form input[type="submit"]:hover {
  background-color: var(--color-btn-hover);
  transform: translateY(-2px);
}

/* Validation messages stay readable on the dark surface */
.sx-form .wpforms-error {
  color: #ff7676;
  font-size: 0.85rem;
}

.sx-form input.wpforms-error,
.sx-form textarea.wpforms-error {
  border-color: #ff5050;
}

.sx-form .wpforms-confirmation-container-full {
  background-color: rgba(255, 228, 0, 0.1);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  color: var(--color-text);
  padding: var(--space-sm);
}

/* --- Hero decoration: class "sx-hero" on a Section ----------------------
   The theme's JS injects the radar, glow orbs, scan sweep and status chips
   into .sx-hero-decor behind the section's editable content. */
.sx-hero {
  position: relative;
  overflow: hidden;
}

.sx-hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* The section's real content must sit above the decoration */
.sx-hero > .elementor-container,
.sx-hero > .e-con-inner {
  position: relative;
  z-index: 2;
}

/* Radar rings are anchored to the hero's right side */
.sx-hero-decor .hero__radar,
.sx-hero-decor .hero__radar-overlay {
  top: 50%;
  right: -6%;
  margin-top: -300px;
}

@media (max-width: 900px) {
  .sx-hero-decor .hero__radar,
  .sx-hero-decor .hero__radar-overlay {
    right: -40%;
    opacity: 0.5;
  }
}

/* --- Marquee: class "sx-marquee" on a Section ---------------------------- */
.sx-marquee {
  overflow: hidden;
}

.sx-marquee .marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}

.sx-marquee:hover .marquee__track {
  animation-play-state: paused;
}

.sx-marquee .marquee__track > * {
  margin: 0;
  padding-right: var(--space-md);
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text-muted);
}

/* --- Statement: class "sx-statement" on a Heading ------------------------
   JS wraps each word so they cascade in; the heading itself stays one
   editable field in the builder. */
.sx-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px) scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.is-visible .sx-word {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .sx-word {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sx-marquee .marquee__track {
    animation: none;
  }
}

/* --- Terminal card: classes on a Section + Text Editor ------------------- */
.sx-terminal .elementor-widget-container {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.8;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px var(--color-accent-glow);
  animation: float-card 6s ease-in-out infinite;
}

.sx-terminal p {
  margin: 0;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
}

@media (max-width: 600px) {
  .sx-terminal p {
    white-space: normal;
    word-break: break-word;
  }
}

/* Elementor counters sit inside a card like the coded stats did */
.elementor-widget-counter.stat-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-sm);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.elementor-widget-counter.stat-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
}

/* Phone sizing for the stat cards. This block must come after the base
   counter rules above — at equal specificity the later rule wins, and an
   earlier media query would silently lose to them. */
@media (max-width: 600px) {
  .elementor-widget-counter.stat-card {
    padding: var(--space-sm) 0.6rem;
  }

  .elementor-widget-counter.stat-card .elementor-counter-number-wrapper {
    font-size: 1.6rem;
  }

  .elementor-widget-counter.stat-card .elementor-counter-title {
    font-size: 0.72rem;
    line-height: 1.35;
  }
}

/* ==========================================================================
   30. BLOG — listing grid, single article, typography
   Post content itself stays editable in the WordPress editor or Elementor;
   these rules only supply the surrounding layout and reading styles.
   ========================================================================== */

/* --- Listing grid -------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
}

.post-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.post-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.post-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-card:hover .post-card__thumb img {
  transform: scale(1.05);
}

/* Posts with no featured image still get a branded block */
.post-card__thumb-fallback {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(255, 228, 0, 0.12), transparent 60%),
    var(--color-bg-alt);
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  flex: 1;
}

.post-card__cat {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.post-card__title {
  font-size: 1.05rem;
  line-height: 1.35;
}

.post-card__title a {
  color: var(--color-text);
  transition: color 0.2s ease;
}

.post-card__title a:hover {
  color: var(--color-accent);
}

.post-card__excerpt {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.post-card__meta {
  margin-top: auto;
  padding-top: var(--space-xs);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.post-empty {
  text-align: center;
  color: var(--color-text-muted);
}

/* --- Single article ------------------------------------------------------ */
.post-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.post-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.post-hero__cat {
  text-align: center;
}

.post-hero__title {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}

.post-hero__meta {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.post-hero__sep {
  margin-inline: 0.5rem;
  color: var(--color-accent);
}

.post-featured {
  margin-top: var(--space-md);
}

.post-featured img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

/* --- Article typography — readable line length and rhythm ---------------- */
.entry-content {
  max-width: 760px;
  margin-inline: auto;
  font-size: 1.03rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.entry-content > * + * {
  margin-top: var(--space-sm);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: var(--color-text);
  margin-top: var(--space-md);
  line-height: 1.3;
}

.entry-content h2 { font-size: 1.6rem; }
.entry-content h3 { font-size: 1.3rem; }

.entry-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.3rem;
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li + li {
  margin-top: 0.4rem;
}

.entry-content img {
  border-radius: var(--radius);
}

.entry-content blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-sm);
  color: var(--color-text);
  font-style: italic;
}

.entry-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--color-border);
  padding: 0.6rem;
  text-align: left;
}

/* --- Tags and prev/next -------------------------------------------------- */
.post-footer {
  padding-bottom: var(--space-lg);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
}

.post-tags a {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.post-tags a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.post-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-sm);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.post-nav__link:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.post-nav__link--next {
  text-align: right;
}

.post-nav__label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.post-nav__title {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* --- ElementsKit "Blog Posts" widget (used on the Learn page) ------------
   DELIBERATELY ADDITIVE ONLY. This widget's colours, image height, spacing
   and typography are set in Elementor's own panel, and those settings win
   on specificity. Overriding them here would leave the controls in the
   builder looking broken — you'd change a colour and nothing would happen.
   So this adds only polish the widget does not control: a frame, a hover
   lift and an arrow nudge. Everything else stays yours to edit. */
/* Cards in a row match height, and the "Learn more" link sits on the
   baseline of each card. The widget doesn't expose these, so nothing here
   competes with a setting in the panel. */
/* ElementsKit's grid row carries -15px side margins as its gutter and the
   columns add 15px padding back. Nothing absorbs that negative margin, so
   the row hung 15px off the left edge — cards looked off-centre and the page
   scrolled sideways. Padding the widget container by the same 15px cancels
   it out symmetrically, without overriding the plugin's own gutter rules. */
.ekit-wid-con {
  padding-inline: 15px;
}

.ekit-row.post-items {
  align-items: stretch;
}

.ekit-row.post-items > .post-item {
  display: flex;
}

.elementskit-post-image-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.elementskit-post-image-card .elementskit-post-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.elementskit-post-image-card .btn-wraper {
  margin-top: auto;
}

.elementskit-post-image-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

/* Slow zoom on the featured image; the widget sets its size, not its scale */
.elementskit-post-image-card .elementskit-entry-thumb img {
  transition: transform 0.5s ease;
}

.elementskit-post-image-card:hover .elementskit-entry-thumb img {
  transform: scale(1.06);
}

/* The arrow slides out on hover — matches the site's other links */
.elementskit-post-image-card .elementskit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.2s ease;
}

.elementskit-post-image-card .elementskit-btn:hover {
  gap: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .elementskit-post-image-card,
  .elementskit-post-image-card .elementskit-entry-thumb img {
    transition: none;
  }
}

/* --- Pagination ---------------------------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.pagination .page-numbers:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.pagination .page-numbers.current {
  background-color: var(--color-btn);
  border-color: var(--color-btn);
  color: var(--color-btn-text);
  font-weight: 600;
}