/* =============================================================
   VipRix — Redesign layer · "Technical Editorial"
   -------------------------------------------------------------
   Loaded LAST so it settles the cascade against the older
   !important layers in responsive.css / cyan-buttons.css.

   COLOR SYSTEM IS UNCHANGED. Every colour below resolves to a
   token already defined in style.css (:root / [data-theme]) or
   to a brand hex already used in the project:
     #0d0d1a  #00d4ff  #0097b2  #0084a3  #17184B
     #FAFAFA  #18181B  #1a2744  #0ef
   What changes: type, rhythm, layout, surface treatment, motion.
   ============================================================= */

/* ── Palette mirror ───────────────────────────────────────────
   These are NOT new colours. They are the exact values already
   declared in style.css, repeated here because only index.html
   loads style.css — on the other nine pages every var(--accent),
   var(--border-strong), var(--text-muted) … resolved to nothing,
   so those declarations were dropped and fell back to
   currentColor/transparent.

   Declared at :root / html:not([data-theme]) so that any page
   defining its own tokens at higher specificity still wins.
   ------------------------------------------------------------- */
:root {
  --bg: #0d0d1a;
  --surface: #151525;
  --surface-2: #1e1e32;
  --text: #FAFAFA;
  --text-secondary: #D4D4D8;
  --text-muted: #A1A1AA;
  --text-subtle: #71717A;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);
  --accent: #00d4ff;
  --accent-hover: #33e5ff;
  --accent-dim: rgba(0, 212, 255, 0.08);
  --accent-border: rgba(0, 212, 255, 0.22);
}

html:not([data-theme="dark"]) {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface-2: #F5F5F3;
  --text: #18181B;
  --text-secondary: #3F3F46;
  --text-muted: #71717A;
  --text-subtle: #A1A1AA;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.15);
  --accent: #0097b2;
  --accent-hover: #007a91;
  --accent-dim: rgba(0, 151, 178, 0.08);
  --accent-border: rgba(0, 151, 178, 0.2);
}

/* ── Type + spacing tokens ── */
:root {
  /* Headers, main titles and the menu */
  --font-display: 'Alumni Sans Collegiate One', 'Archivo', system-ui, sans-serif;
  /* Body text. Black Ops One ships a single 400 weight, so every
     heavier declaration below is normalised to avoid faux-bold. */
  --font-body: 'Black Ops One', system-ui, -apple-system, sans-serif;
  --font-mono: 'Black Ops One', ui-monospace, monospace;

  /* 8pt rhythm */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --section-y: clamp(72px, 9vw, 128px);
  --rule: 1px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* =============================================================
   1 · TYPOGRAPHY
   ============================================================= */
body {
  font-family: var(--font-body);
  font-size: 30px;
  line-height: 1.65;
  letter-spacing: -0.006em;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
}

/* !important (not higher specificity) because the per-page inline
   <style> blocks declare fonts at (0,1,1) without it — this keeps one
   display face across every page instead of Outfit/Poppins/Syne. */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title {
  font-family: var(--font-display) !important;
  font-optical-sizing: auto;
}

/* Display headings: tight, confident, no decorative outline. */
/* The outlined "3D cyan frame" heading treatment is retired. The
   light-mode rules for it are declared at (0,2,2) in responsive.css,
   so both theme variants are matched explicitly here. */
.section-title,
.contact-info h3,
.auth-form h2,
.legal-header h1,
.pricing-header h1,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .contact-info h3,
html[data-theme="dark"] .auth-form h2,
html:not([data-theme="dark"]) .section-title,
html:not([data-theme="dark"]) .contact-info h3,
html:not([data-theme="dark"]) .auth-form h2 {
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
}

.section-title {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  margin-bottom: 0;
  text-wrap: balance;
}

html:not([data-theme="dark"]) .section-title {
  color: #18181B !important;
  -webkit-text-fill-color: #18181B !important;
}

/* Icons inside headings keep their own colour */
.section-title i,
.contact-info h3 i,
.auth-form h2 i {
  -webkit-text-stroke: 0 !important;
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  font-size: 0.72em;
  vertical-align: 0.06em;
  margin-right: 0.35em;
}

/* Mono eyebrow — replaces the pill chip with a technical index. */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: var(--sp-4);
}

/* Engineering-drawing index numbers per section */
#services .section-label::before,
#why-us .section-label::before,
#portfolio .section-label::before,
#testimonials .section-label::before,
#contact .section-label::before {
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);
  border-right: var(--rule) solid var(--accent-border);
  padding-right: 10px;
}
#services .section-label::before { content: "01"; }
#why-us .section-label::before { content: "02"; }
#portfolio .section-label::before { content: "03"; }
#testimonials .section-label::before { content: "04"; }
#contact .section-label::before { content: "05"; }

.section-subtitle {
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 58ch; /* readable measure */
  color: var(--text-muted);
}

/* Authored content left some subtitles empty — don't reserve space. */
.section-subtitle:empty,
.feature-info p:empty {
  display: none !important;
}

/* Numeric data reads as data. */
.stat-number,
.hero-stat-number,
.plan .price,
.detail-row .value {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* =============================================================
   2 · SECTION HEADERS — asymmetric editorial block
   Replaces six identical centred stacks with a ruled two-column
   masthead: title left, supporting copy in a narrow right column.
   ============================================================= */
.section-header {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  column-gap: var(--sp-8);
  row-gap: var(--sp-3);
  text-align: left;
  margin-bottom: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: var(--rule) solid var(--border);
  position: relative;
}

/* Tick mark riding the hairline, aligned to the index number */
.section-header::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: var(--rule);
  background: var(--accent);
}

.section-header .section-label { grid-column: 1; margin-bottom: var(--sp-2); }
.section-header .section-title { grid-column: 1; }
.section-header .section-subtitle {
  grid-column: 2;
  margin: 0;
  padding-bottom: 0.4em;
}

/* why-us keeps its own two-column layout; just align the type. */
.why-us-text { text-align: left; }

@media (max-width: 860px) {
  .section-header {
    grid-template-columns: 1fr;
    row-gap: var(--sp-3);
  }
  .section-header .section-subtitle { grid-column: 1; }
}

/* =============================================================
   3 · ATMOSPHERE — blueprint rules + film grain
   responsive.css disables body pseudo-elements, so these are
   re-enabled deliberately (and only these).
   ============================================================= */
html[data-theme="dark"] body::before,
html:not([data-theme="dark"]) body::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--accent-dim) var(--rule), transparent var(--rule)) !important;
  /* older sheets set `background: none !important`, which also resets
     size/repeat — these need the same weight to survive. */
  background-size: 25% 100% !important;
  background-repeat: repeat !important;
  opacity: 0.55;
}

html[data-theme="dark"] body::after,
html:not([data-theme="dark"]) body::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E") !important;
  background-size: 140px 140px !important;
  background-repeat: repeat !important;
}

@media (max-width: 1023px) {
  html[data-theme="dark"] body::before,
  html:not([data-theme="dark"]) body::before { display: none !important; }
  html[data-theme="dark"] body::after,
  html:not([data-theme="dark"]) body::after { opacity: 0.12; }
}

/* Content sits above the atmosphere layers.
   NOTE: .header and .viprix-top-bar are `position: fixed` with their own
   stacking (z-index 1000 / 100). They must NOT be given `position:
   relative` here — that drops them out of fixed positioning and the bar
   stops sitting at the top of the page. Only static wrappers are lifted. */
#main, main, .footer, .viprix-fire-wrap {
  position: relative;
  z-index: 2;
}

/* =============================================================
   4 · SECTION RHYTHM
   ============================================================= */
.services, .why-us, .portfolio, .testimonials, .contact {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* Hairline between stacked sections instead of hard colour joins */
.why-us, .portfolio, .testimonials, .contact {
  border-top: var(--rule) solid var(--border);
}

/* =============================================================
   5 · BUTTONS
   The outlined cyan button is the site's established language —
   it is kept, but retuned: squarer corners, monospace uppercase
   label, thinner rule, calmer motion. Selectors are raised to
   (0,1,1)+ so they settle against `a.btn-primary` in
   cyan-buttons.css rather than losing silently.
   ============================================================= */
a.btn, a.btn-primary, a.btn-secondary,
button.btn, button.btn-primary,
.btn, .btn-submit, .submit-btn,
.nav-cta, a.nav-cta,
.carousel-card-cta, a.carousel-card-cta,
.btn-login, .auth-tab {
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  border-width: var(--rule) !important;
  transition: background-color 0.22s var(--ease-out),
              color 0.22s var(--ease-out),
              border-color 0.22s var(--ease-out),
              transform 0.22s var(--ease-out) !important;
}

a.btn:hover, a.btn-primary:hover,
.btn:hover, .nav-cta:hover, .carousel-card-cta:hover {
  transform: translateY(-1px) !important;
}
.btn:active, .nav-cta:active,
a.btn:active { transform: translateY(0) !important; }

/* One high-emphasis action per screen (skill rule: primary-action).
   The hero CTA is the only solid fill; colours are existing tokens. */
.hero-buttons .btn-primary,
.hero-video-content .btn-primary,
a.hero-cta-solid {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #0d0d1a !important;
  -webkit-text-fill-color: #0d0d1a !important;
}
.hero-buttons .btn-primary:hover,
.hero-video-content .btn-primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

/* Corner radius is set at (0,3,1)+ in older sheets — match it. */
.header .nav-links a.nav-cta,
.contact-form-wrap .submit-btn,
.contact-form-wrap button[type="submit"],
.auth-card .btn-submit,
.login-card .btn-login,
.card .btn-submit {
  border-radius: 4px !important;
}

/* Icon buttons were only reached by the bare `button` selector. */
.coverflow-btn, button.coverflow-btn,
.mobile-toggle, button.mobile-toggle {
  font-family: var(--font-mono) !important;
  border-radius: 4px !important;
}

/* Touch targets (skill rule: touch-target-size).
   .theme-toggle is deliberately excluded — a min-height here stretches
   the switch into a tall oval. It gets an expanded hit area instead. */
.btn, .nav-cta, .coverflow-btn, .auth-tab {
  min-height: 44px;
}

/* =============================================================
   6 · HEADER / NAV
   ============================================================= */
.header .container {
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}

.header .nav-links a:not(.nav-cta) {
  font-family: var(--font-display) !important;
  font-size: 0.76rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Logo: drop the outlined 3D treatment, keep the exact colours. */
.header .logo-brand .logo-text,
.viprix-top-bar .logo-brand .logo-text,
.topbar-left .logo-brand .logo-text,
.sidebar-logo .logo-brand .logo-text,
.auth-logo .logo-brand .logo-text,
.login-logo .logo-brand .logo-text,
.logo .logo-brand .logo-text,
#login-screen .logo-brand .logo-text,
.card .logo-brand .logo-text {
  font-family: var(--font-display) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  font-size: 1.22rem !important;
}

.header .logo-brand .logo-slogan,
.viprix-top-bar .logo-brand .logo-slogan,
.topbar-left .logo-brand .logo-slogan,
.sidebar-logo .logo-brand .logo-slogan,
.auth-logo .logo-brand .logo-slogan,
.login-logo .logo-brand .logo-slogan,
.logo .logo-brand .logo-slogan,
#login-screen .logo-brand .logo-slogan,
.card .logo-brand .logo-slogan {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.2em !important;
  font-size: 0.52rem !important;
}

/* =============================================================
   6b · THEME SWITCH — squared segmented control
   The old pill used slate greys (#e2e8f0 / #334155 / #0f172a) that
   sit outside the brand palette and read as a stock UI widget. This
   is a precise two-cell switch: hairline frame, cyan indicator block,
   icons riding above it. Brand tokens only.
   ============================================================= */
/* Geometry. The painted properties are declared theme-qualified below,
   because cyan-buttons.css colours this control from
   `html[data-theme="dark"] .theme-toggle` — specificity (0,2,1). */
.theme-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 58px !important;
  height: 30px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: border-color 0.22s var(--ease-out) !important;
}

html[data-theme="dark"] .theme-toggle,
html:not([data-theme="dark"]) .theme-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: var(--border-strong) !important;
  border-radius: 4px !important;
}
html[data-theme="dark"] .theme-toggle:hover,
html:not([data-theme="dark"]) .theme-toggle:hover {
  border-color: var(--accent) !important;
}

/* Invisible expanded hit area — control stays 58x30 visually while
   meeting the 44px touch minimum (skill rule: touch-target-size). */
.theme-toggle::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -7px;
  border-radius: 6px;
  background: none !important;
}

/* Indicator block slides between the two cells. */
.theme-toggle-knob {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 26px !important;
  height: 24px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  z-index: 1 !important;
  transition: transform 0.26s var(--ease-out) !important;
}
html[data-theme="dark"] .theme-toggle-knob {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  transform: translateX(28px) !important;
}
html:not([data-theme="dark"]) .theme-toggle-knob {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  transform: translateX(0) !important;
}

/* Icons sit above the indicator. */
.theme-toggle .theme-toggle-sun,
.theme-toggle .theme-toggle-moon {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  transition: color 0.2s var(--ease-out) !important;
}
.theme-toggle .theme-toggle-sun  { left: 9px !important; right: auto !important; }
.theme-toggle .theme-toggle-moon { right: 9px !important; left: auto !important; }

/* Whichever icon sits on the cyan block takes the dark ink. */
html[data-theme="dark"] .theme-toggle .theme-toggle-moon { color: #0d0d1a !important; }
html[data-theme="dark"] .theme-toggle .theme-toggle-sun  { color: var(--text-muted) !important; }
html:not([data-theme="dark"]) .theme-toggle .theme-toggle-sun  { color: #0d0d1a !important; }
html:not([data-theme="dark"]) .theme-toggle .theme-toggle-moon { color: var(--text-muted) !important; }

/* =============================================================
   7 · HERO — technical HUD framing over the 3D canvas
   Inline <style> in index.html sits later in the document, so
   these use raised specificity rather than relying on order.
   ============================================================= */
.hero-video .hero-video-content {
  padding-left: clamp(20px, 6vw, 84px) !important;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

.hero-video .hero-video-content .hero-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
  font-size: clamp(2.1rem, 6.2vw, 4.6rem) !important;
  text-wrap: balance;
}

.hero-video .hero-video-content .hero-description {
  font-family: var(--font-mono) !important;
  font-size: clamp(0.76rem, 1.1vw, 0.88rem) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  max-width: 46ch !important;
  margin-top: var(--sp-5) !important;
  padding-left: 18px;
  border-left: var(--rule) solid var(--accent-border);
  line-height: 1.8 !important;
}

/* =============================================================
   8 · SURFACES — hairline cards with corner ticks
   (Backgrounds stay on their existing tokens.)
   ============================================================= */
.stat-card,
.feature-item,
.testimonial-card,
.coverflow-slide,
.card-inner {
  border-radius: 6px !important;
}

.stat-card {
  position: relative;
  border: var(--rule) solid var(--border-strong) !important;
  box-shadow: none !important;
  padding: var(--sp-5) !important;
  overflow: hidden;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.stat-card:hover {
  border-color: var(--accent-border) !important;
  transform: translateY(-2px);
}

/* --- Contrast correction -------------------------------------
   Stat and testimonial cards were filled with saturated #0084a3
   (dark) / #00d4ff (light). Even pure white on #0084a3 only
   reaches 4.35:1, so their small labels failed WCAG AA. They now
   sit on the page surface with a hairline — which is also the
   direction of this redesign. Both values are existing tokens.
   Form cards intentionally KEEP the teal/cyan fill.
   ------------------------------------------------------------- */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .testimonial-card {
  background-color: var(--surface) !important;
  background-image: none !important;
}
html:not([data-theme="dark"]) .stat-card,
html:not([data-theme="dark"]) .testimonial-card {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

.testimonial-card {
  border: var(--rule) solid var(--border-strong) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .testimonial-text,
html[data-theme="dark"] .testimonial-card p {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}
html:not([data-theme="dark"]) .stat-label,
html:not([data-theme="dark"]) .testimonial-text,
html:not([data-theme="dark"]) .testimonial-card p {
  color: var(--text-secondary) !important;
  -webkit-text-fill-color: var(--text-secondary) !important;
}
html:not([data-theme="dark"]) .testimonial-card h4,
html:not([data-theme="dark"]) .testimonial-card .testimonial-name {
  color: #18181B !important;
  -webkit-text-fill-color: #18181B !important;
}

/* Light-mode eyebrow: #0097b2 on white is only 3.46:1 at 11px.
   Label takes the body ink; the index keeps the muted token. */
html:not([data-theme="dark"]) .section-label {
  color: #18181B !important;
  -webkit-text-fill-color: #18181B !important;
}
.section-label::before {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

/* Corner tick — engineering drawing motif */
.stat-card::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-top: var(--rule) solid var(--accent);
  border-right: var(--rule) solid var(--accent);
  opacity: 0.6;
}

.stat-number {
  font-size: clamp(2rem, 3.4vw, 2.9rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

.stat-label {
  font-family: var(--font-mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-top: var(--sp-2) !important;
}

.feature-item {
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: var(--rule) solid var(--border);
}
.feature-item:last-child { border-bottom: 0; }

.feature-icon {
  border-radius: 4px !important;
  flex-shrink: 0;
}

.feature-info h4 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Service carousel cards — same hairline-surface language as the
   stat/testimonial cards. Previously filled #0084a3 / #00d4ff, which
   put cyan labels on a cyan field (2.46:1 dark, 1.95:1 light).
   Declared at (0,2,2) because index.html styles these from an inline
   <style> block that sits later in the document. */
html[data-theme="dark"] .carousel-3d-card .card-inner {
  background: var(--surface-2) !important;
  border: var(--rule) solid var(--accent-border) !important;
}
html:not([data-theme="dark"]) .carousel-3d-card .card-inner {
  background: #FFFFFF !important;
  border: var(--rule) solid rgba(0, 151, 178, 0.28) !important;
}
html[data-theme="dark"] .carousel-3d-card.active .card-inner {
  border-color: var(--accent) !important;
}
html:not([data-theme="dark"]) .carousel-3d-card.active .card-inner {
  border-color: #0097b2 !important;
}

html:not([data-theme="dark"]) .carousel-3d-card h3 {
  color: #18181B !important;
  -webkit-text-fill-color: #18181B !important;
}
html:not([data-theme="dark"]) .carousel-3d-card .short-desc,
html:not([data-theme="dark"]) .detail-row .value {
  color: var(--text-secondary) !important;
  -webkit-text-fill-color: var(--text-secondary) !important;
}
/* #0097b2 on white is 3.46:1 — under AA for an 11px label. The mono
   uppercase treatment carries the distinction instead of colour. */
html:not([data-theme="dark"]) .detail-row .label {
  color: #18181B !important;
  -webkit-text-fill-color: #18181B !important;
}
.carousel-3d-card h3 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.025em !important;
}
.carousel-3d-card .short-desc { line-height: 1.6 !important; }
.detail-row .label {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Portfolio */
.coverflow-tag {
  font-family: var(--font-mono) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
}
.coverflow-info h3 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.025em !important;
}
.coverflow-btn { border-radius: 4px !important; }

/* Testimonials */
.testimonial-card { border-radius: 6px !important; }
.testimonial-text { line-height: 1.75 !important; }

/* Forms keep their teal/cyan fill (set deliberately earlier); only the
   shape and label treatment change. Label size stays at 0.74rem rather
   than shrinking further — text on the #0084a3 form fill tops out at
   ~4.4:1, so legibility should not be reduced any further here. */
.field label,
.form-group label {
  font-family: var(--font-mono) !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Dashboard/employee login screens pin Poppins via `#login-screen *`
   (specificity 1,0,0). Matched here so the app screens share the
   site's typography instead of a fourth font family. */
#login-screen,
#login-screen *:not(i):not([class*="fa-"]) {
  font-family: var(--font-body) !important;
}
#login-screen h1, #login-screen h2, #login-screen h3,
#login-screen .logo-brand .logo-text {
  font-family: var(--font-display) !important;
}
#login-screen .field label,
#login-screen .btn-login {
  font-family: var(--font-mono) !important;
}

/* =============================================================
   9 · FOOTER
   ============================================================= */
.footer {
  border-top: var(--rule) solid var(--border);
}
.footer-bottom,
.footer-bottom-links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

/* =============================================================
   10 · MOTION
   ============================================================= */
.reveal {
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

/* Staggered entrance for grids (skill rule: stagger-sequence) */
.stats-grid.visible .stat-card {
  animation: vr-rise 0.5s var(--ease-out) backwards;
}
.stats-grid.visible .stat-card:nth-child(1) { animation-delay: 0.04s; }
.stats-grid.visible .stat-card:nth-child(2) { animation-delay: 0.09s; }
.stats-grid.visible .stat-card:nth-child(3) { animation-delay: 0.14s; }
.stats-grid.visible .stat-card:nth-child(4) { animation-delay: 0.19s; }

.why-us-text.visible .feature-item {
  animation: vr-rise 0.45s var(--ease-out) backwards;
}
.why-us-text.visible .feature-item:nth-child(1) { animation-delay: 0.06s; }
.why-us-text.visible .feature-item:nth-child(2) { animation-delay: 0.12s; }
.why-us-text.visible .feature-item:nth-child(3) { animation-delay: 0.18s; }
.why-us-text.visible .feature-item:nth-child(4) { animation-delay: 0.24s; }

@keyframes vr-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Visible focus for keyboard users (skill rule: focus-states) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  html[data-theme="dark"] body::after,
  html:not([data-theme="dark"]) body::after { display: none !important; }
}

/* =============================================================
   11 · RESPONSIVE REFINEMENTS
   ============================================================= */
@media (max-width: 767px) {
  :root { --section-y: clamp(56px, 12vw, 80px); }

  .section-header {
    margin-bottom: var(--sp-6);
    padding-top: var(--sp-4);
  }

  .hero-video .hero-video-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-video .hero-video-content .hero-description {
    padding-left: 14px;
    letter-spacing: 0.1em !important;
  }

  /* Body copy stays >=16px on phones (skill rule: readable-font-size).
     responsive.css sets .92rem !important here, so this needs the
     same weight. */
  body { font-size: 1rem; }
  .section-subtitle,
  .testimonial-text { font-size: 1rem !important; line-height: 1.65 !important; }

  .feature-item { padding: var(--sp-3) 0; }

  /* The always-visible menu made the fixed header ~200px tall — a
     quarter of the viewport. Tighten it back without hiding anything
     (skill rules: content-priority, fixed-element-offset). */
  .header .container {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    row-gap: 0 !important;
  }
  .header .nav-links {
    gap: 0 12px !important;
    padding-top: 4px !important;
    margin-top: 2px !important;
  }
  .header .nav-links a:not(.nav-cta) {
    font-size: 0.7rem !important;
    padding: 3px 2px !important;
  }
  /* 44px minimum tap height, including the CTA (skill rule:
     touch-target-size). responsive.css pins these at 40px inside a
     (hover:none) query, so this needs !important to settle. */
  .header .nav-links a,
  .header .nav-links a:not(.nav-cta) {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .header .nav-links .nav-cta {
    padding: 6px 14px !important;
    min-height: 44px !important;
  }
  .header .logo-brand .logo-text { font-size: 1rem !important; }
  .header .logo-icon { width: 34px !important; height: 34px !important; }

  /* Carousel / slider indicators to a 44px tap area (skill rule:
     touch-target-size). The dot itself stays small; the hit area grows. */
  .carousel-dot,
  .coverflow-dot,
  .testimonial-dot {
    min-width: 44px !important;
    min-height: 44px !important;
    background-clip: content-box !important;
    padding: 16px 0 !important;
  }
  .carousel-dots-container,
  .coverflow-dots,
  .testimonial-dots { gap: 2px !important; }
}