@font-face {
  font-family: 'SG';
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url(/assets/home-fonts/spacegrotesk-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'JB';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/home-fonts/jetbrainsmono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'JB';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/home-fonts/jetbrainsmono-500.woff2) format('woff2');
}

:root {
  --s: min(100vw / 1505, 100vh / 760);
  /* Official WPSuite / K-Shield Swiss Cybersecurity Palette */
  --navy-deep: #030b13;
  --navy: #061a2a;
  --navy-2: #0b2a40;
  --teal: #12cdbf;
  --teal-bright: #40ebdc;
  --teal-deep: #007e84;
  --emerald: #8bd5ac;
  --ink: #ffffff;
  --ink-dark: #031520;
  --sub: #c6dce4;
  --lab: #7d9fae;
}

@media (max-width: 1023px) {
  :root {
    --s: clamp(0.75px, min(100vw / 920, 100vh / 1160), 1.15px);
  }
}

@media (max-width: 599px) {
  :root {
    --s: min(100vw / 430, 100vh / 720, 1.0px);
  }
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background: var(--navy-deep);
  color: var(--ink);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

body {
  font-family: 'SG', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

a, button, input, select, textarea {
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}

:focus-visible {
  outline: calc(2 * var(--s)) solid var(--teal-bright);
  outline-offset: calc(3 * var(--s));
}

/* Stage & Subtle Architectural Matrix Atmosphere */
.screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 50%, rgba(18, 205, 191, 0.16) 0%, rgba(11, 42, 64, 0.38) 40%, rgba(3, 11, 19, 0.98) 78%),
    linear-gradient(135deg, #030b13 0%, #061a2a 55%, #030b13 100%);
}

.matrix-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.matrix-bg canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Left Typography Readability Scrim */
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, rgba(3, 11, 19, 0.96) 0%, rgba(4, 15, 25, 0.86) 40%, rgba(6, 22, 36, 0.28) 58%, transparent 76%);
}

@media (max-width: 1023px) {
  .scrim {
    background: linear-gradient(180deg, rgba(3, 11, 19, 0.88) 0%, rgba(4, 16, 26, 0.82) 55%, rgba(3, 11, 19, 0.94) 100%);
  }
}

/* Main Flex Column Frame */
.frame {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(24 * var(--s)) calc(56 * var(--s)) calc(28 * var(--s));
  gap: calc(16 * var(--s));
}

@media (max-width: 1023px) {
  .frame {
    padding: calc(18 * var(--s)) calc(28 * var(--s)) calc(20 * var(--s));
  }
}

/* ============================================================================
 * HEADER: CLEAN, PRO, UPPERCASE NAVIGATION (NO CLUTTER)
 * ============================================================================ */
header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--s));
  padding-bottom: calc(16 * var(--s));
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  flex-shrink: 0;
  z-index: 20;
}

.header-left {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--s));
  flex-shrink: 0;
}

/* Official WPSuite Logo Mark */
.logo {
  position: relative;
  width: calc(40 * var(--s));
  height: calc(40 * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: invert(72%) sepia(56%) saturate(709%) hue-rotate(120deg) brightness(108%);
}

.wp-bar {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--s));
  font-family: 'JB', monospace;
  font-weight: 400;
  font-size: calc(12 * var(--s));
  color: var(--lab);
  white-space: nowrap;
}

.wp-brand-name {
  font-family: 'SG', sans-serif;
  font-weight: 700;
  font-size: calc(20 * var(--s));
  letter-spacing: calc(-0.3 * var(--s));
  color: #fff;
}

.wp-brand-name em {
  font-style: normal;
  color: var(--teal-bright);
  font-family: 'JB', monospace;
  font-weight: 500;
  font-size: calc(12 * var(--s));
  letter-spacing: calc(0.8 * var(--s));
  text-transform: uppercase;
  margin-left: calc(8 * var(--s));
}

.wp-bar .wp-sep {
  opacity: .32;
}

.wp-bar a.lang {
  color: var(--lab);
  font-size: calc(11.5 * var(--s));
  font-weight: 500;
  letter-spacing: calc(0.5 * var(--s));
  padding: calc(2 * var(--s)) calc(3 * var(--s));
  transition: color .18s ease;
}

.wp-bar a.lang.active {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: calc(4 * var(--s));
  text-decoration-color: var(--teal);
}

/* Desktop Nav — ALL CAPS, Crisp & Readable */
nav {
  display: flex;
  align-items: center;
  gap: calc(32 * var(--s));
  flex-shrink: 0;
}

nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--s));
  font-family: 'SG', sans-serif;
  font-weight: 600;
  font-size: calc(13.5 * var(--s));
  line-height: 1;
  letter-spacing: calc(1.3 * var(--s));
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  transition: color .18s ease;
}

nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-7 * var(--s));
  height: calc(1.5 * var(--s));
  background: var(--teal-bright);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s cubic-bezier(.16,1,.3,1);
}

nav a svg {
  width: calc(9.5 * var(--s));
  height: calc(6 * var(--s));
  display: block;
  flex-shrink: 0;
  color: var(--teal);
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}

nav a[aria-expanded="true"] {
  color: var(--teal-bright);
}

nav a[aria-expanded="true"]::after {
  transform: scaleX(1);
}

nav a[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Burger (<=1023px) */
.burger {
  width: calc(40 * var(--s));
  height: calc(40 * var(--s));
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: calc(6 * var(--s));
  padding: calc(7 * var(--s));
  z-index: 60;
  flex-shrink: 0;
}

.burger span {
  display: block;
  width: 100%;
  height: calc(2 * var(--s));
  background: var(--teal-bright);
  transform-origin: center center;
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s cubic-bezier(.16,1,.3,1), width .28s cubic-bezier(.16,1,.3,1);
}

.burger span:nth-child(3) { width: 47%; }
body.nav-open .burger span:nth-child(1) { transform: translateY(calc(8 * var(--s))) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { width: 100%; transform: translateY(calc(-8 * var(--s))) rotate(-45deg); }

/* Clean Professional WPSuite Teal Buttons (.btn) */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: calc(210 * var(--s));
  height: calc(46 * var(--s));
  background: var(--teal);
  color: var(--ink-dark);
  padding: 0 calc(18 * var(--s));
  gap: calc(12 * var(--s));
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color .18s ease, transform .18s ease;
}

.btn span {
  position: relative;
  z-index: 1;
  font-family: 'SG', sans-serif;
  font-weight: 700;
  font-size: calc(13.5 * var(--s));
  line-height: 1;
  letter-spacing: calc(0.9 * var(--s));
  text-transform: uppercase;
}

.btn svg {
  position: relative;
  z-index: 1;
  width: calc(17 * var(--s));
  height: calc(14 * var(--s));
  display: block;
  flex-shrink: 0;
  transition: transform .18s cubic-bezier(.16,1,.3,1);
}

@media (max-width: 1023px) {
  nav, .btn-top { display: none; }
  .burger { display: flex; }
}

/* ============================================================================
 * 2-COLUMN MAIN STAGE GRID: Left (Hero + 5 Steps + Stats) | Right (Screens)
 * ============================================================================ */
.stage-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: calc(44 * var(--s));
  align-items: center;
}

.stage-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(26 * var(--s));
  min-width: 0;
}

/* Hero Section */
.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--s));
  font-family: 'JB', monospace;
  font-weight: 500;
  font-size: calc(12 * var(--s));
  letter-spacing: calc(1.4 * var(--s));
  color: var(--teal-bright);
  text-transform: uppercase;
  margin-bottom: calc(14 * var(--s));
  white-space: nowrap;
}

.hero-kicker::before {
  content: '';
  display: inline-block;
  width: calc(18 * var(--s));
  height: calc(1.5 * var(--s));
  background: var(--teal-bright);
}

.hero h1 {
  font-family: 'SG', sans-serif;
  font-weight: 700;
  font-size: calc(58 * var(--s));
  line-height: 1.06;
  letter-spacing: calc(-1.8 * var(--s));
  color: var(--ink);
  margin-bottom: calc(18 * var(--s));
  white-space: nowrap;
}

.hero h1 .ln {
  display: block;
  overflow: hidden;
  padding-bottom: calc(5 * var(--s));
  margin-bottom: calc(-5 * var(--s));
}

.hero h1 .ln > span {
  display: block;
}

.hero h1 .ln-accent > span {
  color: var(--teal-bright);
  transition: color .45s ease;
}

.hero h1 .ln-accent.is-decoded > span {
  color: var(--emerald);
}

.hero .sub {
  font-family: 'JB', monospace;
  font-weight: 400;
  font-size: calc(15 * var(--s));
  line-height: 1.54;
  letter-spacing: calc(-0.25 * var(--s));
  color: var(--sub);
  margin-bottom: calc(24 * var(--s));
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--s));
  flex-wrap: wrap;
}

.btn-cta {
  height: calc(50 * var(--s));
  padding: 0 calc(22 * var(--s));
}

.btn-secondary-link {
  font-family: 'JB', monospace;
  font-weight: 500;
  font-size: calc(13.5 * var(--s));
  color: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  padding-bottom: calc(5 * var(--s));
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}

/* K-Shield 5-Step Progression Track (Synchronized with Real Screens) */
.kshield-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(4, 16, 26, 0.72);
  backdrop-filter: blur(8px);
}

.kstep {
  position: relative;
  padding: calc(11 * var(--s)) calc(12 * var(--s)) calc(13 * var(--s));
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--s));
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  transition: background-color .2s ease;
}

.kstep:last-child { border-right: 0; }

.kstep-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: calc(2 * var(--s));
  background: var(--teal-bright);
  transform: scaleX(0);
  transform-origin: left center;
}

.kstep.active {
  background: rgba(18, 205, 191, 0.10);
}

.kstep.active .kstep-bar {
  animation: stepProgress 6.5s linear forwards;
}

@keyframes stepProgress {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

.kstep-num {
  font-family: 'JB', monospace;
  font-size: calc(10 * var(--s));
  color: var(--lab);
  font-variant-numeric: tabular-nums;
}

.kstep.active .kstep-num {
  color: var(--teal-bright);
}

.kstep-title {
  font-family: 'SG', sans-serif;
  font-weight: 700;
  font-size: calc(14 * var(--s));
  color: #fff;
  letter-spacing: calc(-0.2 * var(--s));
}

.kstep-desc {
  font-family: 'JB', monospace;
  font-size: calc(10.5 * var(--s));
  color: var(--lab);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kstep.active .kstep-desc {
  color: var(--sub);
}

/* Clean Stats Section */
.stats {
  display: flex;
  align-items: center;
  gap: calc(30 * var(--s));
  flex-shrink: 0;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--s));
  cursor: pointer;
}

.stat .num {
  font-family: 'JB', monospace;
  font-weight: 500;
  font-size: calc(28 * var(--s));
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color .18s ease;
}

.stat.s2 .num {
  color: var(--teal-bright);
}

.stat .lab {
  font-family: 'SG', sans-serif;
  font-weight: 400;
  font-size: calc(15.5 * var(--s));
  line-height: 1.15;
  letter-spacing: calc(-0.2 * var(--s));
  color: var(--lab);
  white-space: nowrap;
}

.rule {
  position: relative;
  width: 1px;
  height: calc(52 * var(--s));
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

/* ============================================================================
 * RIGHT STAGE: REAL K-SHIELD SCREENS (CLEAN ARCHITECTURAL FRAME OVER MATRIX)
 * ============================================================================ */
.stage-right {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.screens-deck {
  position: relative;
  width: 100%;
  max-width: calc(650 * var(--s));
  padding-top: calc(14 * var(--s));
}

/* Secondary Layered Real Screen behind the active screen */
.screen-card-back {
  position: absolute;
  top: 0;
  right: calc(-12 * var(--s));
  width: 92%;
  height: calc(320 * var(--s));
  background: #041320;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 calc(20 * var(--s)) calc(50 * var(--s)) rgba(0, 0, 0, 0.7);
  overflow: hidden;
  opacity: 0.38;
  transform: translate3d(0, calc(-4 * var(--s)), 0);
  transition: opacity .4s ease;
  pointer-events: none;
}

.screen-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  filter: saturate(0.8) brightness(0.7);
}

/* Primary Active Real K-Shield Screen Window (Flat, Crisp, Non-Gadget) */
.screen-card-front {
  position: relative;
  z-index: 3;
  width: 100%;
  background: rgba(4, 16, 26, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 2px solid var(--teal);
  box-shadow: 0 calc(28 * var(--s)) calc(70 * var(--s)) rgba(0, 0, 0, 0.85);
  transition: border-color .25s ease, transform .25s ease;
}

.screen-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--s));
  padding: calc(10 * var(--s)) calc(14 * var(--s));
  background: #030d17;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.screen-chrome-left {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--s));
  min-width: 0;
}

.screen-badge {
  font-family: 'JB', monospace;
  font-weight: 500;
  font-size: calc(10 * var(--s));
  letter-spacing: calc(0.6 * var(--s));
  text-transform: uppercase;
  color: var(--ink-dark);
  background: var(--teal-bright);
  padding: calc(2.5 * var(--s)) calc(7 * var(--s));
  white-space: nowrap;
}

.screen-path {
  font-family: 'JB', monospace;
  font-size: calc(11.5 * var(--s));
  color: var(--sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen-tabs {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--s));
}

.screen-tab {
  font-family: 'JB', monospace;
  font-size: calc(10.5 * var(--s));
  color: var(--lab);
  padding: calc(3.5 * var(--s)) calc(7 * var(--s));
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all .16s ease;
}

.screen-tab.active {
  color: var(--ink-dark);
  background: #ffffff;
  border-color: #ffffff;
  font-weight: 500;
}

.screen-viewport {
  position: relative;
  width: 100%;
  height: calc(340 * var(--s));
  overflow: hidden;
  background: #071928;
  cursor: zoom-in;
}

.screen-viewport img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
  transition: transform .35s ease, opacity .25s ease;
}

.screen-viewport.switching img {
  opacity: 0.35;
}

.screen-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--s));
  padding: calc(10 * var(--s)) calc(14 * var(--s));
  background: #030d17;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.screen-caption {
  font-family: 'JB', monospace;
  font-size: calc(11.5 * var(--s));
  color: var(--sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen-zoom-btn {
  font-family: 'JB', monospace;
  font-size: calc(11 * var(--s));
  color: var(--teal-bright);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--s));
}

@media (max-width: 1023px) {
  .stage-grid {
    grid-template-columns: 1fr;
    gap: calc(16 * var(--s));
  }
  .hero h1 { font-size: calc(42 * var(--s)); }
  .screen-viewport { height: calc(210 * var(--s)); }
  .screen-card-back { height: calc(190 * var(--s)); }
}

@media (max-width: 599px) {
  .wp-brand-name em, .wp-bar .wp-sep-main { display: none; }
  .hero h1 { font-size: calc(32 * var(--s)); }
  .hero .sub { font-size: calc(12 * var(--s)); margin-bottom: calc(12 * var(--s)); }
  .kshield-steps { display: flex; overflow-x: auto; }
  .kstep { min-width: calc(110 * var(--s)); flex-shrink: 0; }
  .screen-viewport { height: calc(155 * var(--s)); }
  .screen-card-back { display: none; }
  .stats { gap: calc(14 * var(--s)); }
  .stat .num { font-size: calc(20 * var(--s)); }
  .stat .lab { font-size: calc(12 * var(--s)); }
  .rule { height: calc(40 * var(--s)); }
}

/* Fullscreen Screen Capture Lightbox Modal */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(2, 9, 16, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(28 * var(--s));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-frame {
  width: min(94vw, 1240px);
  max-height: 90vh;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #020a12;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: 'JB', monospace;
  font-size: 13px;
  color: #fff;
}

.lightbox-close {
  font-family: 'JB', monospace;
  font-size: 12px;
  color: #fff;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.lightbox-img-wrap {
  overflow-y: auto;
  max-height: calc(90vh - 52px);
  background: #fff;
}

.lightbox-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile Menu (#menu) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(3, 11, 19, 0.97);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(96 * var(--s)) calc(32 * var(--s)) calc(32 * var(--s));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s;
}

body.nav-open .menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(78 * var(--s));
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.menu-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--s));
}

.menu-eyebrow {
  font-family: 'JB', monospace;
  font-size: calc(11.5 * var(--s));
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal-bright);
}

.menu-list { list-style: none; display: flex; flex-direction: column; }

.menu-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.mrow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14 * var(--s)) 0;
  font-family: 'SG', sans-serif;
  font-weight: 700;
  font-size: calc(22 * var(--s));
  letter-spacing: calc(0.8 * var(--s));
  text-transform: uppercase;
  color: var(--ink);
  text-align: left;
}

.mrow svg { width: calc(14 * var(--s)); height: calc(9 * var(--s)); color: var(--teal); transition: transform .25s; }
.menu-item.open .mrow { color: var(--teal-bright); }
.menu-item.open .mrow svg { transform: rotate(180deg); }

.msub {
  display: none;
  flex-direction: column;
  gap: calc(10 * var(--s));
  padding: calc(2 * var(--s)) 0 calc(16 * var(--s)) calc(14 * var(--s));
}
.menu-item.open .msub { display: flex; }
.msub a { font-family: 'JB', monospace; font-size: calc(14 * var(--s)); color: var(--sub); }

.menu-foot { position: relative; z-index: 2; display: flex; flex-direction: column; gap: calc(14 * var(--s)); }
.btn-menu { width: 100%; height: calc(50 * var(--s)); }
.menu-note { font-family: 'JB', monospace; font-size: calc(12 * var(--s)); color: var(--lab); text-align: center; }

/* Interactive WPSuite K-Shield Console Drawer */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(2, 9, 16, 0.78);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s;
}
.drawer-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100vw, calc(690 * var(--s)));
  z-index: 90;
  background: var(--navy);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(34 * var(--s)) calc(40 * var(--s));
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.16,1,.3,1);
}
.drawer-backdrop.open + .drawer, .drawer.open { transform: translateX(0); }

.drawer-top-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--teal);
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: calc(18 * var(--s));
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.drawer-kicker { font-family: 'JB', monospace; font-size: calc(11.5 * var(--s)); color: var(--teal-bright); margin-bottom: calc(6 * var(--s)); }
.drawer-title { font-family: 'SG', sans-serif; font-weight: 700; font-size: calc(27 * var(--s)); color: #fff; }
.drawer-close { font-family: 'JB', monospace; font-size: calc(12 * var(--s)); color: var(--sub); padding: calc(8 * var(--s)) calc(12 * var(--s)); border: 1px solid rgba(255, 255, 255, 0.2); }
.drawer-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(16 * var(--s)); padding: calc(14 * var(--s)) 0; }
.wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--s)); }
.wp-tier { border: 1px solid rgba(255, 255, 255, 0.14); background: var(--navy-2); padding: calc(14 * var(--s)); display: flex; flex-direction: column; gap: calc(7 * var(--s)); text-align: left; }
.wp-tier.selected { border-color: var(--teal-bright); background: rgba(18, 205, 191, 0.12); }
.wp-tier-head { display: flex; align-items: baseline; justify-content: space-between; }
.wp-tier-name { font-family: 'SG', sans-serif; font-weight: 700; font-size: calc(18 * var(--s)); color: #fff; }
.wp-tier-price { font-family: 'SG', sans-serif; font-weight: 700; font-size: calc(20 * var(--s)); color: var(--teal-bright); }
.wp-tier-price small { font-family: 'JB', monospace; font-weight: 400; font-size: calc(10.5 * var(--s)); color: var(--sub); margin-left: calc(4 * var(--s)); }
.wp-tier-meta { font-family: 'JB', monospace; font-size: calc(11 * var(--s)); color: var(--emerald); }
.wp-tier-desc { font-family: 'JB', monospace; font-size: calc(11.5 * var(--s)); line-height: 1.45; color: var(--sub); }
.wp-audit-box { border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(3, 11, 19, 0.65); padding: calc(16 * var(--s)); display: flex; flex-direction: column; gap: calc(12 * var(--s)); }
.wp-audit-label { font-family: 'JB', monospace; font-size: calc(11.5 * var(--s)); color: var(--teal-bright); }
.wp-input-row { display: flex; gap: calc(10 * var(--s)); }
.wp-input { flex: 1; height: calc(44 * var(--s)); background: var(--navy-deep); border: 1px solid rgba(255, 255, 255, 0.22); padding: 0 calc(14 * var(--s)); font-family: 'JB', monospace; font-size: calc(13.5 * var(--s)); color: #fff; user-select: text; -webkit-user-select: text; }
.wp-run-btn { height: calc(44 * var(--s)); padding: 0 calc(18 * var(--s)); background: var(--teal); color: var(--ink-dark); font-family: 'SG', sans-serif; font-weight: 700; font-size: calc(14 * var(--s)); text-transform: uppercase; letter-spacing: calc(0.5 * var(--s)); white-space: nowrap; }
.wp-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(8 * var(--s)) calc(16 * var(--s)); font-family: 'JB', monospace; font-size: calc(12 * var(--s)); color: var(--sub); }
.wp-check-item { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.10); padding-bottom: calc(5 * var(--s)); }
.wp-check-status { color: var(--emerald); font-variant-numeric: tabular-nums; }
.drawer-foot { display: flex; align-items: center; justify-content: space-between; padding-top: calc(14 * var(--s)); border-top: 1px solid rgba(255, 255, 255, 0.12); font-family: 'JB', monospace; font-size: calc(12 * var(--s)); color: var(--lab); }

/* Hover states */
@media (hover: hover) {
  nav a:hover { color: #ffffff; }
  nav a:hover::after { transform: scaleX(1); }
  .wp-bar a.lang:hover, .btn-secondary-link:hover { color: var(--teal-bright); border-color: var(--teal-bright); }
  .btn:hover, .wp-run-btn:hover { background: var(--teal-bright); }
  .btn:hover svg { transform: translateX(calc(3 * var(--s))); }
  .kstep:hover { background: rgba(255, 255, 255, 0.05); }
  .stat:hover .num { color: var(--teal-bright); }
  .screen-card-front:hover { border-color: rgba(255, 255, 255, 0.35); }
  .screen-tab:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
}

#s-probe {
  position: absolute;
  width: calc(100 * var(--s));
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ===== Ajouts home-v3 (fusion avec le site : liens réels, tiroirs rendus côté serveur) ===== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;left:8px;top:-60px;z-index:200;background:var(--teal);color:var(--ink-dark);padding:8px 14px;font-weight:700}
.skip-link:focus{top:8px}
:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}
a.stat{color:inherit;text-decoration:none}
a.wp-brand-name{text-decoration:none}
.wp-bar a.lang{color:var(--lab);font-size:calc(11.5 * var(--s));font-weight:500;letter-spacing:calc(0.5 * var(--s));padding:calc(2 * var(--s)) calc(3 * var(--s));text-decoration:none;transition:color .18s ease}
.wp-bar a.lang.active{color:#fff;text-decoration:underline;text-underline-offset:calc(4 * var(--s));text-decoration-color:var(--teal)}
.nav-login{opacity:.78}
.drawer, .drawer *{user-select:text;-webkit-user-select:text}
.drawer button, .drawer .drawer-close{user-select:none;-webkit-user-select:none}
.drawer-panel{display:none;flex-direction:column;gap:calc(16 * var(--s))}
.drawer-panel.is-active{display:flex}
a.wp-run-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.wp-tier .wp-run-btn{margin-top:auto;height:calc(36 * var(--s));font-size:calc(12.5 * var(--s));padding:0 calc(12 * var(--s))}
.wp-tier-alt{font-family:'JB',monospace;font-size:calc(11 * var(--s));color:var(--teal-bright);text-decoration:underline;text-underline-offset:calc(3 * var(--s))}
.wp-tier-desc{flex:1}
a.wp-check-item{color:inherit;text-decoration:none;transition:border-color .18s ease}
a.wp-check-item:hover,a.wp-check-item:focus-visible{border-bottom-color:var(--teal-bright)}
.wp-cta-row{display:flex;gap:calc(14 * var(--s));align-items:center;flex-wrap:wrap}
.drawer-foot nav{display:flex;gap:calc(14 * var(--s));flex-wrap:wrap}
.drawer-foot a{color:var(--lab);text-decoration:none}
.drawer-foot a:hover{color:var(--teal-bright)}
.drawer-foot nav a{text-transform:none;letter-spacing:0;font-size:calc(12 * var(--s))}
.wp-checks.one{grid-template-columns:1fr}
.menu-close{position:absolute;top:calc(22 * var(--s));right:calc(28 * var(--s));width:calc(44 * var(--s));height:calc(44 * var(--s));display:flex;align-items:center;justify-content:center;color:var(--teal-bright);font-size:calc(26 * var(--s));line-height:1;z-index:3}
.menu-legal{display:flex;gap:14px;flex-wrap:wrap;font-family:'JB',monospace;font-size:calc(12 * var(--s))}
.menu-legal a{color:var(--lab);text-decoration:none}
@media (max-width:599px){.wp-grid{grid-template-columns:1fr}.wp-checks{grid-template-columns:1fr}}