/*--------------------------------------------------------------
  CyberTitan Labs — redesign layer
  Loaded after style.css. Overrides legacy #hero/#header/.navbar-mobile
  rules by re-declaring the same selectors (later source wins on tied
  specificity). New sections use fresh classes that don't collide with
  the legacy stylesheet, so most of this file is additive, not override.
--------------------------------------------------------------*/

/* Tailwind's Play CDN generates a `.collapse { visibility: collapse }`
   utility (for hiding table rows) that collides with Bootstrap's own
   `.collapse` component class (JS-driven show/hide via display:none).
   Forcing visibility back to visible is safe: Bootstrap's display:none
   on the closed state already fully hides the element regardless of
   this property, so this only restores the *expanded* state. Without
   this, every Bootstrap collapse panel (FAQ answers, etc.) renders
   present-but-invisible text once opened. */
.collapse {
  visibility: visible !important;
}

:root {
  --ink: #05070d;
  --ink-2: #0a1220;
  --brand: #243e6d;
  --brand-light: #3a5a99;
  --electric: #4c8dff;
  --signal: #6ee7ff;
  --paper: #f3f5f9;
  --paper-2: #eef2fa;
  --ink-text: #101826;
  --mist: #dfe6f2;
}

html {
  background: var(--paper);
}

body {
  background: var(--paper);
}

/*--------------------------------------------------------------
# Focus states (keyboard accessibility)
--------------------------------------------------------------*/
/* Each page's inline .visually-hidden rule uses !important on
   height/width, which silently defeated the .skip-link:focus reveal.
   Matching !important here so the skip link actually becomes visible. */
.skip-link:focus {
  position: absolute !important;
  left: 1rem !important;
  top: 1rem !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  padding: 0.6rem 1.2rem !important;
  background: #fff !important;
  color: var(--ink-text) !important;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 10000;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 3px;
  border-radius: 4px;
}

/*--------------------------------------------------------------
# Preloader — circular progress ring + percentage
--------------------------------------------------------------*/
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--ink);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-ring-wrap {
  position: relative;
  width: 140px;
  height: 140px;
}
.preloader-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.preloader-ring-track {
  fill: none;
  stroke: rgba(76, 141, 255, 0.16);
  stroke-width: 3;
}
.preloader-ring-progress {
  fill: none;
  stroke: var(--electric);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  filter: drop-shadow(0 0 6px rgba(76, 141, 255, 0.65));
}
.preloader-percent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.35rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.02em;
}
.preloader-label {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(223, 230, 242, 0.5);
}
.preloader-dots {
  display: inline-block;
  width: 1.2em;
  animation: preloader-dots-cycle 1.2s steps(4) infinite;
  overflow: hidden;
  vertical-align: bottom;
}
@keyframes preloader-dots-cycle {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/*--------------------------------------------------------------
# Header / nav — glass, transparent to blurred on scroll
--------------------------------------------------------------*/
/* The blurred pane lives on a pseudo-element, NOT on #header itself.
   backdrop-filter (like transform and filter) makes an element the containing
   block for its position:fixed descendants — and .navbar-mobile, the
   full-screen mobile menu overlay, is a fixed descendant of #header. With the
   filter on the header, `inset: 0` resolved against the 96px header instead of
   the viewport, so the open menu was clipped to a sliver and its links were
   invisible. That hit every inner page always (.header-inner-pages) and the
   home page as soon as you scrolled (.header-scrolled). */
#header {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
#header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(135deg, rgba(5, 7, 13, 0.94), rgba(10, 18, 32, 0.94));
  transition: opacity 0.4s ease;
}
#header.header-scrolled::before,
#header.header-inner-pages::before {
  opacity: 1;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
#header.header-scrolled,
#header.header-inner-pages {
  border-bottom: 1px solid rgba(76, 141, 255, 0.22);
  box-shadow: 0 8px 30px -14px rgba(0, 0, 0, 0.5);
}
#header .logo img {
  max-height: 34px;
  /* the width/height attributes exist to give the browser the aspect ratio up
     front (no header reflow on load); width:auto stops the attribute width
     from winning over max-height and stretching the wordmark */
  width: auto;
}
.navbar a,
.navbar a:focus {
  font-family: "Inter", sans-serif;
  color: rgba(255, 255, 255, 0.82);
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
  color: #fff;
}
.navbar .getstarted,
.navbar .getstarted:focus {
  border: 1px solid var(--electric);
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  color: #fff;
  font-family: "Inter", sans-serif;
}
.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
  background: linear-gradient(135deg, var(--signal), var(--electric));
  color: var(--ink);
}
.mobile-nav-toggle {
  color: #fff;
}
.navbar-mobile {
  background: rgba(5, 7, 13, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.navbar-mobile ul {
  background-color: var(--paper);
}
.navbar-mobile a,
.navbar-mobile a:focus {
  color: var(--ink-text);
  font-family: "Inter", sans-serif;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
  color: var(--brand);
}
.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  color: #fff;
  margin: 4px 0;
}

/*--------------------------------------------------------------
# Hero — dark, interactive
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: auto;
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  display: flex;
  align-items: center;
}
#hero .container {
  padding-top: 96px;
  padding-bottom: 96px;
  position: relative;
  z-index: 3;
}
#hero h1 {
  margin: 0;
  color: #fff;
}

/* faint animated grid, masked so it fades toward the edges */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(76, 141, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 141, 255, 0.12) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, black 35%, transparent 85%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, black 35%, transparent 85%);
  animation: grid-drift 50s linear infinite;
}
@keyframes grid-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 460px 460px;
  }
}

/* cursor-reactive glow — --mx/--my set by redesign.js on mousemove */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(650px circle at var(--mx, 50%) var(--my, 28%), rgba(76, 141, 255, 0.24), transparent 62%);
}

/* vertical signal beams */
.hero-beam {
  position: absolute;
  top: -10%;
  width: 1px;
  height: 120%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(110, 231, 255, 0.55), transparent);
  animation: beam-drift 13s ease-in-out infinite;
}
.hero-beam:nth-of-type(1) {
  left: 12%;
  animation-delay: -1s;
}
.hero-beam:nth-of-type(2) {
  left: 52%;
  animation-delay: -5s;
}
.hero-beam:nth-of-type(3) {
  left: 86%;
  animation-delay: -9s;
}
@keyframes beam-drift {
  0%,
  100% {
    opacity: 0.12;
    transform: translateX(0);
  }
  50% {
    opacity: 0.5;
    transform: translateX(14px);
  }
}

/* fade the hero into the light section below */
.hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  z-index: 2;
  pointer-events: none;
  /* Fading from rgba(...,0) of the target color, not the bare "transparent"
     keyword — that interpolates through black on the way, leaving a muddy
     dark band right before the solid color. Matches the clients section's
     paper background directly below.
     A plain 2-stop linear-gradient alpha-blends in sRGB space, which bunches
     almost all of the perceived brightness change into the last ~15% of the
     fade — it reads as a hard edge even though the math is linear. The
     extra stops below follow an eased curve so the brightness ramps evenly. */
  background: linear-gradient(
    180deg,
    rgba(246, 248, 252, 0) 0%,
    rgba(246, 248, 252, 0.013) 8.1%,
    rgba(246, 248, 252, 0.049) 15.5%,
    rgba(246, 248, 252, 0.104) 22.5%,
    rgba(246, 248, 252, 0.175) 29%,
    rgba(246, 248, 252, 0.259) 35.3%,
    rgba(246, 248, 252, 0.352) 41.2%,
    rgba(246, 248, 252, 0.45) 47.1%,
    rgba(246, 248, 252, 0.55) 52.9%,
    rgba(246, 248, 252, 0.648) 58.8%,
    rgba(246, 248, 252, 0.741) 64.7%,
    rgba(246, 248, 252, 0.825) 70.6%,
    rgba(246, 248, 252, 0.896) 77.5%,
    rgba(246, 248, 252, 0.951) 84.5%,
    rgba(246, 248, 252, 0.987) 91.9%,
    var(--paper) 100%
  );
}

/* terminal card */
.terminal-card {
  background: rgba(10, 18, 32, 0.86);
  border: 1px solid rgba(76, 141, 255, 0.28);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.terminal-body {
  min-height: 210px;
}
.terminal-caret {
  display: inline-block;
  width: 0.55ch;
  margin-left: 1px;
  background: var(--signal);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}
.terminal-line-ok {
  color: var(--signal);
}
.terminal-line-dim {
  color: rgba(223, 230, 242, 0.55);
}
.terminal-line-cmd {
  color: #fff;
}
.terminal-body {
  color: #fff;
}

/*--------------------------------------------------------------
# Footer — dark bookend to match the hero
--------------------------------------------------------------*/
#footer {
  background: var(--ink);
}
#footer .footer-top {
  background: var(--ink-2);
}
#footer .footer-top .footer-contact h3,
#footer .footer-top h4 {
  color: #fff;
}
#footer .footer-top .footer-contact p {
  color: rgba(223, 230, 242, 0.65);
}
#footer .footer-links a {
  color: rgba(223, 230, 242, 0.8);
  font-family: "Inter", sans-serif;
  font-size: 14px;
}
#footer .footer-links a:hover {
  color: var(--signal);
}
#footer .footer-top .social-links a {
  background: var(--electric);
}
#footer .footer-top .social-links a:hover {
  background: var(--signal);
  color: var(--ink);
}
#footer .footer-bottom {
  color: rgba(223, 230, 242, 0.55);
  font-family: "Inter", sans-serif;
}
#footer .footer-bottom a {
  color: rgba(223, 230, 242, 0.75);
}
#footer .footer-bottom a:hover {
  color: var(--signal);
}

/* Below md, Bootstrap stacks the three footer-top columns full-width but
   leaves their original alignment: contact/links land left, social lands
   right (an inline text-align:right in includes/footer.php, since the
   template only ever expected it beside the other two columns). Centering
   all three, plus the bottom legal row, so a stacked single column reads as
   one deliberate block instead of three columns that forgot they stacked. */
@media (max-width: 767.98px) {
  #footer .footer-top {
    text-align: center;
  }
  #footer .footer-contact img {
    margin-left: auto;
    margin-right: auto;
  }
  #footer .footer-links {
    justify-content: center;
  }
  #footer .social-links {
    text-align: center !important;
    justify-content: center;
  }
  #footer .footer-bottom .row {
    justify-content: center;
    text-align: center;
  }
}

/*--------------------------------------------------------------
# Back to top
--------------------------------------------------------------*/
.back-to-top {
  background: var(--electric);
}
.back-to-top:hover {
  background: var(--signal);
  color: var(--ink);
}

/*--------------------------------------------------------------
# Clients strip — flex-wrap so logo count is never a layout problem
--------------------------------------------------------------*/
.clients-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 3.5rem;
}
.client-logo {
  width: 130px;
  height: 56px;
  object-fit: contain;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.client-logo:hover,
.client-logo:focus-visible {
  transform: translateY(-3px) scale(1.04);
  filter: drop-shadow(0 8px 16px rgba(16, 24, 38, 0.15));
}

/*--------------------------------------------------------------
# Shared section building blocks (new markup only — no legacy collision)
--------------------------------------------------------------*/
.section-eyebrow {
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
}

.tc-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(16, 24, 38, 0.25);
  border-color: rgba(76, 141, 255, 0.35);
}
.tc-card-num {
  position: absolute;
  top: 0.5rem;
  right: 1.25rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 3.75rem;
  line-height: 1;
  color: rgba(36, 62, 109, 0.06);
  pointer-events: none;
  user-select: none;
}

/*--------------------------------------------------------------
# Spec panel — dark floating card for stats/status on light sections
--------------------------------------------------------------*/
/* Shares .services-panel for its surface, same as .faq-panel, so all three
   cards on the page stay identical by construction. */
.spec-panel {
  overflow: hidden;
}
.spec-panel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--mist);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
}
.spec-panel-row:last-of-type {
  border-bottom: none;
}
.spec-panel-row span:first-child {
  color: #5c6c87;
}
.spec-panel-row span:last-child {
  color: var(--ink-text);
  font-weight: 500;
  text-align: right;
}
.spec-panel-cta {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: var(--brand);
}
.spec-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e9e5a;
  box-shadow: 0 0 0 3px rgba(30, 158, 90, 0.18);
  animation: spec-dot-pulse 2s ease-in-out infinite;
}
@keyframes spec-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.badge-tag {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: var(--paper-2);
  border: 1px solid var(--mist);
  color: var(--ink-text);
}

.tc-accordion-trigger[aria-expanded="true"] .tc-chevron {
  transform: rotate(180deg);
}
.tc-chevron {
  transition: transform 0.25s ease;
}

/*--------------------------------------------------------------
# Contact form status messages
# Previously scoped to a `.contact` ancestor class that this markup no
# longer has, so `display:none` never applied and all three could show
# at once regardless of actual form state.
--------------------------------------------------------------*/
.php-email-form .loading,
.php-email-form .error-message,
.php-email-form .sent-message {
  display: none;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.php-email-form .loading {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: var(--paper-2);
  color: var(--ink-text);
  font-weight: 500;
}
.php-email-form .loading.d-block {
  display: flex;
}
.php-email-form .loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--mist);
  border-top-color: var(--electric);
  animation: loading-spin 0.7s linear infinite;
}
@keyframes loading-spin {
  to { transform: rotate(360deg); }
}
.php-email-form .error-message {
  background: #fdecea;
  color: #b3261e;
  border: 1px solid #f5c2bd;
}
.php-email-form .sent-message {
  background: #e8f8ee;
  color: #1e7b41;
  border: 1px solid #b9e6c9;
}

/*--------------------------------------------------------------
# Services — full-section dark IDE backdrop, mirrors the hero
--------------------------------------------------------------*/
.services-ide {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  /* the legacy template gives every section 60px of its own padding, which was
     stacking on top of the container's padding below — at both ends. Both
     run-ins (from About above, into the CTA below) read as one huge empty
     band until the container padding was zeroed out. */
  padding-top: 2rem;
  padding-bottom: 3rem;
}
.services-ide > .container {
  position: relative;
  z-index: 2;
  padding-top: 0;
  padding-bottom: 0;
}
/* The claw-mark "slash" — a full dark code window masked down to three torn
   claw gashes. The mask is assets/img/claw-slash.svg, generated (and
   regenerable) by tools/claw-slash-gen.py: three tapered blades with
   multi-octave torn edges, fibre whiskers, and detached microtears.
   mask-size:contain keeps the SVG's own proportions (no stretch-distortion);
   mask-position:center drops the cluster into the gap the two content boxes
   leave open. Scoped to .services-slash-row-wrap, not the section, so the
   tear can never reach up into the heading. */
.services-slash-row-wrap {
  position: relative;
}
/* The heading sits above the tear, so the claw tips can run up behind it. */
.services-ide .section-title {
  position: relative;
  z-index: 3;
}
@media (min-width: 992px) {
  .services-slash-row-wrap {
    min-height: 48rem;
    display: flex;
    align-items: center;
    /* pulled up so the tips overlap the intro copy instead of leaving a band
       of empty paper between the heading and the cards */
    margin-top: -6rem;
  }
  .services-slash-row-wrap > .row {
    flex: 1 1 auto;
    /* wider than any Bootstrap gutter class goes: the two cards stay exactly
       half each, but the slot between them is wide enough for the middle claw
       mark to read as a tear rather than a dark stripe. The extra wrapper
       height does the same for the tips above and the tails below. */
    --bs-gutter-x: 6rem;
  }
}
/* The content sits above the tear, always. Both backdrop layers stay at
   z-index 0 and paint in DOM order (shadow slab, then window); the row is
   lifted to 2 so a panel can never be written over by the code behind it. */
.services-slash-row-wrap > .row {
  position: relative;
  z-index: 2;
}

/* Depth: the same claw shape as a flat dark slab whose drop-shadow spills onto
   the white page around every torn edge, so the gash reads as cut *through* the
   paper rather than painted on it. Kept on a separate, non-animating layer —
   the window itself scrolls its contents, and filtering an animated layer would
   force a full re-raster every frame. Absolutely positioned, so it is not a
   flex item of the wrapper above. */
.services-slash-row-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #0d1526;
  -webkit-mask-image: url("../img/claw-slash.svg");
  mask-image: url("../img/claw-slash.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 3px 5px rgba(16, 24, 38, 0.34)) drop-shadow(0 18px 34px rgba(16, 24, 38, 0.2));
}
.services-slash-window {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(165deg, var(--ink) 0%, var(--ink-2) 100%);
  -webkit-mask-image: url("../img/claw-slash.svg");
  mask-image: url("../img/claw-slash.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* What shows through the tear: three drifting columns of monospace text.
   Columns 1 and 3 are this site's own assets/js/redesign.js, read off disk and
   highlighted in includes/slash-backdrop.php; column 2 is a deployment log.
   Each column holds its content twice and slides -50%, so the loop is seamless;
   the three speeds differ slightly for a parallax feel. */
/* Below lg the two cards stack, so the "crack" the tear shows through turns
   from a vertical slot into a horizontal one between them. Same mechanic as
   desktop — the tear stays an absolute full-bleed layer behind the cards —
   it just needs the stacked gap widened from Bootstrap's 1.5rem gutter to
   something the claw can actually read through. */
@media (max-width: 991.98px) {
  .services-slash-row-wrap > .row {
    --bs-gutter-y: 5rem;
  }
  /* stacked, the cards are exactly as wide as the wrapper, so the tear had no
     room to read at the sides — bleeding it out past both edges lets the claw
     catch light beyond the cards as well as through the crack. Safe to
     overflow the container: .services-ide clips at the section boundary, so
     this cannot create a horizontal scrollbar. */
  .services-slash-window {
    inset: 0 -1.75rem;
  }
}
@media (max-width: 575.98px) {
  .services-slash-row-wrap > .row {
    --bs-gutter-y: 4rem;
  }
}

.slash-cols {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.slash-col {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
/* --slash-dur is set per column in includes/slash-backdrop.php, derived from
   that column's line count, so every column drifts at the same px/sec. */
.slash-track {
  will-change: transform;
  animation: slash-drift var(--slash-dur, 150s) linear infinite;
}
@keyframes slash-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .slash-track { animation: none; }
}
.slash-cols pre {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.65;
  white-space: pre;
  color: rgba(210, 216, 227, 0.9);
}
.slash-cols .tok-comment { color: rgba(170, 178, 194, 0.85); font-style: italic; }
.slash-cols .tok-kw      { color: rgba(216, 158, 209, 0.95); }
.slash-cols .tok-str     { color: rgba(168, 212, 138, 0.95); }
.slash-cols .tok-num     { color: rgba(224, 172, 122, 0.95); }
.slash-cols .log-ts      { color: rgba(150, 160, 178, 0.8); }
.slash-cols .log-svc     { color: rgba(109, 168, 255, 0.95); }
.slash-cols .log-ok      { color: rgba(168, 212, 138, 0.95); }
.slash-cols .log-warn    { color: rgba(232, 178, 106, 0.95); }
.slash-cols .log-dim     { color: rgba(198, 206, 219, 0.72); }

/* Services content boxes — the same white card language as the "Advantages"
   cards in the About section (white, --mist hairline, soft lift shadow, ghost
   numeral), so the two panels read as the intact page and the claw tear reads
   as what is underneath it. Very slightly translucent with a blur, so a hint
   of the code behind shows without ever competing with the text. */
.services-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--mist);
  border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(16, 24, 38, 0.4), 0 2px 6px rgba(16, 24, 38, 0.05);
  padding: 2.25rem;
}
/* One service per row: the two-up reading comes from the pair of cards, not
   from a grid inside them. */
.services-list-item {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--mist);
}
.services-list-item:first-child {
  padding-top: 0;
}
.services-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.services-list-item strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink-text);
  font-weight: 600;
}
.services-list-item p {
  color: #5c6c87;
}
.services-list-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(76, 141, 255, 0.12);
  color: var(--brand);
  font-size: 21px;
}
/* Sits below the tear entirely, on plain paper, so it stays legible. */
.services-panel-note {
  max-width: 44rem;
  margin-top: 2.5rem;
  font-size: 0.95rem;
  color: #5c6c87;
}
@media (max-width: 767.98px) {
  .services-panel {
    padding: 1.5rem;
  }
}

/*--------------------------------------------------------------
# FAQ dark panel
--------------------------------------------------------------*/
/* Shares .services-panel for its surface (white, hairline, soft lift) so the
   two stay identical by construction; this only adds the layout it needs as a
   full-height column beside the accordion. */
.faq-panel {
  overflow: hidden;
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.faq-panel-cta {
  align-self: flex-start;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  border: 1px solid var(--electric);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.faq-panel-cta:hover,
.faq-panel-cta:focus {
  background: linear-gradient(135deg, var(--brand-light), var(--electric));
  color: #fff;
}

/*--------------------------------------------------------------
# Reduced motion
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-grid,
  .hero-beam {
    animation: none !important;
  }
  .terminal-caret {
    animation: none !important;
    opacity: 1;
  }
  .tc-card:hover {
    transform: none;
  }
  .spec-panel-dot {
    animation: none !important;
    opacity: 1;
  }
}