/*
Theme Name: MatrixWeb
Author: MatrixWeb
Description: Custom one-page theme for MatrixWeb (matrixweb.gr) — placeholder content, dev build only.
Version: 0.1.0
*/

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

:root {
  --teal: #2DD4BF;
  --sky: #38BDF8;
  --blue-mid: #0F5AF2;
  --blue: #3B82F6;
  --core: #5EEAD4;
  --blue-light: var(--sky);
  --violet: var(--blue);
  --gradient: linear-gradient(135deg, var(--teal), var(--blue-mid) 55%, var(--blue));
  --bg: #0A0E17;
  --panel: #0D1322;
  --card: rgba(255, 255, 255, 0.035);
  --card-border: rgba(255, 255, 255, 0.09);
  --text: #E6EAF2;
  --muted: #8A93A6;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

/* overflow-x: clip, not hidden -- hidden forces the browser to treat html/body
   as their own scroll container (any non-"visible" overflow value does), which
   breaks position:sticky on .site-header (it sticks until the first scroll,
   then scrolls away with the page instead of staying put). clip blocks the
   same horizontal overflow without creating a scroll container. */
html { scroll-behavior: smooth; overflow-x: clip; }

@keyframes mwCore { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ===== LANGUAGE SWITCH ===== */
html[data-lang="en"] .lang-el { display: none; }
html[data-lang="el"] .lang-en { display: none; }

.lang-switch {
  display: flex;
  gap: 0.4rem;
}

.lang-switch button {
  display: flex;
  align-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  line-height: 1;
  padding: 0.3rem 0.4rem;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s, border-color 0.2s;
}

.lang-switch button svg {
  display: block;
  border-radius: 2px;
}

.lang-switch button.active {
  opacity: 1;
  border-color: var(--card-border);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ===== ANIMATED NETWORK BACKGROUND ===== */
#canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ===== SHARED LAYOUT ===== */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.9rem;
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.section-head p {
  color: var(--muted);
  font-size: 1.02rem;
}

.accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

section {
  position: relative;
  z-index: 1;
  padding: 6rem 0;
}

/* opaque sections cover the fixed particle canvas once scrolled past the hero */
.panel { background: var(--panel); }
.panel-alt { background: #080a14; }

/* ===== HEADER / NAV ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5, 6, 12, 0.7);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  /* The header spans the full viewport width (logo pinned to the true
     left edge, actions to the true right) instead of sitting inside the
     shared 1180px content column like the rest of the page — that left a
     large empty gap on both sides on wide screens. */
  max-width: none;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: -0.02em;
}

.site-logo svg { width: 104px; height: 104px; flex-shrink: 0; }
.site-logo-text span { color: var(--muted); font-weight: 500; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 2.1rem;
  font-size: 1.05rem;
  color: var(--muted);
}

.site-nav ul li > a { white-space: nowrap; }

.nav-cta { font-size: 0.88rem; color: #fff; }

.site-nav a:hover { color: var(--text); }

.site-nav-mobile-extra { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.6rem;
  border-radius: 50px;
  font-size: 0.92rem;
  font-weight: 500;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}

.btn-primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 4px 24px rgba(56, 189, 248, 0.35);
}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(56, 189, 248, 0.45); }

/* Two-line button label (e.g. nav CTA "Free / Website Audit") — display:inline-block
   lets text-align:center actually center the wrapped lines relative to each other.
   Kept as a class rather than inline style so it doesn't override the .lang-en/.lang-el
   display:none toggle rule (an inline style would win over that stylesheet rule). */
.btn-label-2line { display: inline-block; text-align: center; line-height: 1.25; }

.btn-ghost {
  border: 1px solid var(--card-border);
  color: var(--text);
}

.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.25); }

/* ===== HERO ===== */
.hero {
  padding: 5.5rem 0 4rem;
  text-align: center;
  background: transparent; /* lets the background animation show through */
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 50px;
  padding: 0.4rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blue-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.badge-dot {
  width: 6px;
  height: 6px;
  background: var(--blue);
  border-radius: 50%;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 1.4rem;
  background: linear-gradient(135deg, #ffffff 0%, #c7d2e0 45%, #8a93a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .sub {
  max-width: 560px;
  margin: 0 auto 2.4rem;
  color: var(--muted);
  font-size: 1.08rem;
}

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 2.2rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.03em;
  margin-bottom: 3.5rem;
}

.hero-stats strong { color: var(--text); }

.hero-visual {
  position: relative;
  margin: 0 auto;
  border-radius: 24px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.02);
  padding: 3px;
  overflow: hidden;
}

.portfolio-showcase {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  border-radius: 21px;
  overflow: hidden;
}

.portfolio-col {
  position: relative;
  height: 340px;
  overflow: hidden;
  background: #fff;
}

.portfolio-scroll {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: portfolio-autoscroll 42s ease-in-out infinite;
}

.portfolio-col:nth-child(2) .portfolio-scroll { animation-delay: -6s; }
.portfolio-col:nth-child(3) .portfolio-scroll { animation-delay: -14s; }
.portfolio-col:nth-child(4) .portfolio-scroll { animation-delay: -21s; }
.portfolio-col:nth-child(5) .portfolio-scroll { animation-delay: -30s; }

.portfolio-scroll img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes portfolio-autoscroll {
  0%, 6% { transform: translateY(0); }
  50%, 56% { transform: translateY(-70%); }
  100% { transform: translateY(0); }
}

@media (max-width: 900px) {
  .portfolio-showcase { grid-template-columns: repeat(3, 1fr); }
  .portfolio-col:nth-child(4), .portfolio-col:nth-child(5) { display: none; }
}

@media (max-width: 560px) {
  .portfolio-showcase { grid-template-columns: repeat(2, 1fr); }
  .portfolio-col:nth-child(3) { display: none; }
}

/* ===== LOGO STRIP ===== */
.logo-strip { padding: 3rem 0; }

.logo-strip p {
  text-align: center;
  font-family: var(--font-body);
  font-size: 1.08rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.logo-strip-viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.logo-strip-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.4rem;
  width: max-content;
  animation: logo-marquee 32s linear infinite;
}

.logo-strip-viewport:hover .logo-strip-row,
.logo-strip-viewport:focus-within .logo-strip-row { animation-play-state: paused; }

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

@media (prefers-reduced-motion: reduce) {
  .logo-strip-row { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .logo-strip-row a[aria-hidden="true"] { display: none; }
}

.logo-strip-row a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 174px;
  padding: 0.5rem 1.5rem;
  background: #ffffff;
  border-radius: 10px;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}

.logo-strip-row a:hover,
.logo-strip-row a:focus-visible { opacity: 1; transform: translateY(-2px); }

.logo-strip-row img {
  max-height: 96px;
  max-width: 260px;
  width: auto;
  object-fit: contain;
}

.logo-tip {
  position: absolute;
  bottom: -2.2rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--card-border);
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.logo-strip-row a:hover .logo-tip,
.logo-strip-row a:focus-visible .logo-tip { opacity: 1; }

/* ===== CARD GRIDS ===== */
.grid {
  display: grid;
  gap: 1.25rem;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.grid-center-single { grid-template-columns: minmax(0, 380px); justify-content: center; }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.8rem;
}

a.card-link {
  display: block;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

a.card-link:hover,
a.card-link:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 12px 32px rgba(15, 90, 242, 0.15);
}

/* ===== BLOG PAGINATION ===== */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  color: var(--muted);
  font-size: 0.9rem;
  transition: border-color 0.2s, color 0.2s;
}

.page-numbers:hover,
.page-numbers:focus-visible {
  border-color: rgba(56, 189, 248, 0.4);
  color: var(--text);
}

.page-numbers.current {
  background: var(--blue, #0F5AF2);
  border-color: transparent;
  color: #fff;
}

/* ===== BLOG POST CONTENT (rendered from the block editor) ===== */
.blog-content {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text);
}

.blog-content > * + * { margin-top: 1.4rem; }

.blog-content h2,
.blog-content h3,
.blog-content h4 {
  font-family: var(--font-display, inherit);
  line-height: 1.3;
  margin-top: 2.4rem;
}

.blog-content h2 { font-size: 1.6rem; }
.blog-content h3 { font-size: 1.3rem; }
.blog-content h4 { font-size: 1.1rem; }

.blog-content p { color: var(--text); text-align: justify; }

.blog-content a {
  color: var(--blue-light, var(--blue));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-content ul,
.blog-content ol {
  padding-left: 1.4rem;
}

.blog-content li + li { margin-top: 0.5rem; }

.blog-content blockquote {
  border-left: 3px solid var(--blue, #0F5AF2);
  padding-left: 1.2rem;
  color: var(--muted);
  font-style: italic;
}

.blog-content img,
.blog-content figure {
  border-radius: 14px;
  max-width: 100%;
}

.blog-content pre {
  background: var(--panel, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.2rem;
  overflow-x: auto;
  font-size: 0.9rem;
}

.blog-content code {
  font-family: var(--font-mono, monospace);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.15em 0.4em;
  border-radius: 5px;
  font-size: 0.9em;
}

.blog-content pre code {
  background: none;
  padding: 0;
}

/* Single-post and blog-listing content column -- wider than the old 760px
   fixed reading width, still capped so long lines stay readable. */
.blog-wrap {
  max-width: 900px;
}

/* ===== BLOG LISTING (image-left cards) ===== */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

a.blog-list-item {
  display: flex;
  align-items: stretch;
  gap: 1.8rem;
  padding: 1.6rem;
}

.blog-list-thumb {
  flex: 0 0 240px;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.blog-list-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-width: 0;
}

.blog-list-body h3 {
  margin-bottom: 0.6rem;
}

@media (max-width: 640px) {
  .blog-list-item {
    flex-direction: column;
    padding: 1.2rem;
  }

  .blog-list-thumb {
    flex-basis: auto;
    aspect-ratio: 16 / 10;
  }
}

/* ===== PORTFOLIO ===== */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}

.portfolio-card { padding: 0; }

.portfolio-card-head {
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid var(--card-border);
  min-height: 196px;
  display: flex;
  flex-direction: column;
}

.portfolio-card-head h3 {
  font-size: 1.02rem;
  margin-bottom: 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.portfolio-card-head p { margin: 0 0 0.9rem; font-size: 0.84rem; color: var(--muted); }
.portfolio-card-head .btn { width: 100%; justify-content: center; margin-top: auto; }

/* Desktop-monitor mockup around each screenshot: bezel + stand, flat CSS
   shapes rather than an image asset so it scales/recolors with the theme.
   Deliberately generic (not modeled on any specific manufacturer's product
   shape, colorway, or logo) -- just a plain slim-bezel all-in-one monitor
   silhouette, the same genre as any modern display. */
.portfolio-monitor {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.6rem 1.6rem 1.8rem;
}

.portfolio-monitor-bezel {
  position: relative;
  width: 100%;
  background: linear-gradient(145deg, #2b3144, #171b28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 14px 14px 22px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.portfolio-monitor-bezel::before {
  /* webcam dot -- a generic feature of any modern all-in-one display */
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.portfolio-monitor-neck {
  width: 16%;
  height: 26px;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #2b3144, #171b28);
}

.portfolio-monitor-base {
  width: 36%;
  height: 8px;
  margin-top: 2px;
  border-radius: 6px;
  background: linear-gradient(180deg, #2b3144, #171b28);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* Uniform card size: crop every screenshot to the same aspect ratio (shows the
   top/hero portion as a thumbnail) instead of each card's natural full-page
   height — full length is still viewable via the click-to-expand lightbox. */
.portfolio-card-shot {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: var(--panel);
}

.portfolio-card-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.35s ease;
}

.portfolio-card-shot:hover img,
.portfolio-card-shot:focus-visible img { transform: scale(1.04); }

.portfolio-expand-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: rgba(5, 8, 20, 0);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.25s ease;
}

.portfolio-card-shot:hover .portfolio-expand-hint,
.portfolio-card-shot:focus-visible .portfolio-expand-hint {
  opacity: 1;
  background: rgba(5, 8, 20, 0.45);
}

/* Scrollable lightbox variant — the generic .lightbox-overlay img rule shrinks
   to fit the viewport (max-height:85vh), which for these very tall/narrow-
   aspect full-page screenshots squeezes the width down to near-nothing
   instead. Selectors below are deliberately compound (.lightbox-overlay
   .portfolio-lightbox, not just .portfolio-lightbox) to outrank the generic
   rule on specificity — a same-specificity override only wins by source
   order, which is fragile and in fact broke here once already. */
.lightbox-overlay.portfolio-lightbox { align-items: flex-start; overflow-y: auto; padding: 4rem 1.5rem 3rem; }
.portfolio-lightbox-scroll { max-width: min(92vw, 1100px); margin: 0 auto; }
.lightbox-overlay.portfolio-lightbox img {
  max-width: 100%;
  max-height: none;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-overlay.portfolio-lightbox .lightbox-close {
  position: fixed;
  /* Without this, it and .portfolio-lightbox-scroll both sit at the default
     stacking level (z-index:auto) inside .lightbox-overlay's stacking
     context, so paint order falls back to DOM order — the scroll wrapper
     comes after this button in the markup and was silently covering it
     completely. Confirmed via a direct screenshot crop of the button's own
     bounding box: nothing there. */
  z-index: 10;
}

@media (max-width: 900px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* Below this, two columns don't leave enough room for the card content
   (project name, tag, button) to shrink to fit -- grid tracks default to
   min-width:auto, so they refuse to compress below the content's intrinsic
   width and the row overflows the viewport instead of wrapping. */
@media (max-width: 640px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .portfolio-grid { gap: 1.25rem; }
}

.card-more {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--teal);
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-light);
  font-size: 1.1rem;
  margin-bottom: 1.1rem;
}

.card-icon svg { width: 20px; height: 20px; }

.contact-direct-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.4rem;
  font-weight: 600;
  color: var(--text);
  transition: color 0.2s ease;
}
.contact-direct-link .card-icon { flex-shrink: 0; }
.contact-direct-link:hover, .contact-direct-link:focus-visible { color: var(--blue-mid); }

.share-buttons { margin: 2.6rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--card-border); }
.share-label {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.9rem;
}
.share-buttons-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border);
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.share-btn svg { width: 18px; height: 18px; }
.share-btn:hover, .share-btn:focus-visible { transform: translateY(-3px); }
.share-btn--facebook:hover { background: #1877f2; }
.share-btn--x:hover { background: #000; }
.share-btn--linkedin:hover { background: #0a66c2; }
.share-btn--whatsapp:hover { background: #25d366; }
.share-btn--email:hover, .share-btn--copy:hover { background: var(--blue-mid); }
.share-btn--copied { background: var(--teal) !important; color: #06120f !important; }

.card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.card p { color: var(--muted); font-size: 0.9rem; }

.services-primary-grid { gap: 1.75rem; }
.services-primary-grid .card { padding: 2.4rem; }
.services-primary-grid .card-icon { width: 54px; height: 54px; }
.services-primary-grid .card-icon svg { width: 26px; height: 26px; }
.services-primary-grid .card h3 { font-size: 1.2rem; }
.services-primary-grid .card p { font-size: 0.98rem; }

.services-primary-grid .card {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.services-primary-grid .card:nth-child(odd) { transform: translateX(-60px); }
.services-primary-grid .card:nth-child(even) { transform: translateX(60px); }
.services-primary-grid .card.in-view { opacity: 1; transform: translateX(0); }

.services-primary-grid .card:nth-child(1), .services-primary-grid .card:nth-child(2) { transition-delay: 0s; }
.services-primary-grid .card:nth-child(3), .services-primary-grid .card:nth-child(4) { transition-delay: 0.1s; }
.services-primary-grid .card:nth-child(5), .services-primary-grid .card:nth-child(6) { transition-delay: 0.2s; }
.services-primary-grid .card:nth-child(7), .services-primary-grid .card:nth-child(8) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .services-primary-grid .card { opacity: 1; transform: none; transition: none; }
}

/* ===== OUTCOMES ===== */
.outcome-card .tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.8rem;
}

.outcome-card .stat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.3rem;
}

.outcome-card .stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.outcome-card p { color: var(--muted); font-size: 0.88rem; }

/* ===== TECH STACK ===== */
.stack-panel {
  border-radius: 24px;
  border: 1px solid var(--card-border);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(45, 212, 191, 0.06));
  padding: 3rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.stack-panel h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  margin-bottom: 0.8rem;
}

.stack-panel > div:first-child p { color: var(--muted); margin-bottom: 1.6rem; }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
}

.tag-pill svg { width: 14px; height: 14px; flex-shrink: 0; }

.stack-terminal {
  border-radius: 14px;
  background: #0a0d16;
  border: 1px solid var(--card-border);
  overflow: hidden;
}

.stack-terminal-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--card-border);
}

.stack-terminal-bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.stack-terminal-bar span:nth-child(1) { background: #ff5f56; }
.stack-terminal-bar span:nth-child(2) { background: #ffbd2e; }
.stack-terminal-bar span:nth-child(3) { background: #27c93f; }

.stack-terminal-body {
  padding: 1.2rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--text);
}

.stack-terminal-body .t-muted { color: var(--muted); }
.stack-terminal-body .t-blue { color: var(--sky); }
.stack-terminal-body .t-teal { color: var(--teal); }

/* ===== TESTIMONIALS ===== */
.testimonial-card .stars { color: var(--blue-light); font-size: 0.85rem; margin-bottom: 1rem; }
.testimonial-card blockquote { font-size: 0.95rem; margin-bottom: 1.4rem; }

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gradient);
  flex-shrink: 0;
}

.testimonial-author strong { display: block; font-size: 0.88rem; }
.testimonial-author span { color: var(--muted); font-size: 0.78rem; }

/* ===== TEAM ===== */
.team-section .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.team-section h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-bottom: 1.2rem;
}

.team-section p.lead { color: var(--muted); margin-bottom: 1.6rem; }

.check-list li {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  font-size: 0.92rem;
}

.check-list li::before {
  content: "✓";
  color: var(--blue-light);
  font-weight: 700;
}

.team-visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  border-radius: 20px;
  background: #0A0E17;
}

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

/* ===== COMPANY PAGE: vision + founder ===== */
.vision-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.vision-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.vision-item-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 90, 242, 0.12);
  color: var(--blue-light);
  font-weight: 700;
}

.vision-item p { font-weight: 600; line-height: 1.5; }

.founder-section .wrap {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  gap: 3rem;
  align-items: center;
}

.founder-photo {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1;
}

.founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.founder-section .lead { text-align: justify; }

.founder-credentials {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--card-border);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

/* ===== FAQ PAGE ===== */
.faq-categories {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.faq-category-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3625rem;
  margin-bottom: 1.2rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.faq-item {
  background: var(--panel);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.0425rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item-icon {
  flex-shrink: 0;
  display: flex;
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.faq-item-icon .faq-icon-v {
  transform-origin: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-item[open] .faq-item-icon { color: var(--blue-light); }
.faq-item[open] .faq-icon-v { transform: scaleY(0); opacity: 0; }

.faq-item-a {
  padding: 0 1.4rem 1.3rem;
  color: var(--muted);
  font-size: 0.9825rem;
  line-height: 1.7;
  text-align: justify;
}

.faq-item:hover { border-color: rgba(56, 189, 248, 0.3); }

/* ===== FINAL CTA ===== */
.cta-panel {
  border-radius: 24px;
  border: 1px solid var(--card-border);
  background: var(--panel);
  padding: 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.cta-panel h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.5vw, 2.2rem);
  margin-bottom: 1rem;
}

.cta-panel p.lead { color: var(--muted); margin-bottom: 1.6rem; }

.cta-panel .check-list { margin-bottom: 0; }

.contact-form { display: grid; gap: 0.9rem; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem; /* stays >=16px so iOS Safari doesn't auto-zoom on focus */
}

.contact-form select {
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-form select option { background: var(--panel); color: var(--text); }

.contact-form textarea { min-height: 90px; resize: vertical; }

.contact-form .btn-primary {
  border: none;
  cursor: pointer;
  width: 100%;
}

.consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
  cursor: pointer;
}

.consent-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 0.15rem;
  accent-color: var(--blue);
  cursor: pointer;
}

.form-note { font-size: 0.76rem; color: var(--muted); text-align: center; }

/* ===== FOOTER ===== */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 2.2rem 0;
  background: var(--bg);
}

.site-footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}

.site-footer .copy { color: var(--muted); font-size: 0.82rem; }

.footer-badges { margin-bottom: 0.4rem; }
.footer-badges img { height: 168px; width: auto; display: block; border-radius: 10px; }

.badge-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.2s ease;
}
.badge-trigger:hover, .badge-trigger:focus-visible { transform: scale(1.04); }

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 8, 20, 0.88);
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay img {
  max-width: min(90vw, 640px);
  max-height: 85vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.18); }

.footer-links { display: flex; gap: 1.5rem; font-size: 0.82rem; color: var(--muted); }
.footer-links a { transition: color 0.2s ease; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--blue-mid); }

/* Hidden until scrolled past THRESHOLD (see footer.php), then fades/slides in. Sits
   stacked above the mobile-only WhatsApp button (see .joinchat position) rather than
   beside it, since there's no horizontal room for both on a narrow phone screen. */
.scroll-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 998;
}
.scroll-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover, .scroll-top-btn:focus-visible { transform: translateY(-3px); }

@media (max-width: 768px) {
  .scroll-top-btn { bottom: 92px; }
}

/* ===== SERVICE PAGES ===== */
.svc-hero { padding: 4.5rem 0 4rem; }

.svc-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.svc-hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
}

.svc-hero-copy .sub { color: var(--muted); font-size: 1.05rem; margin-bottom: 2rem; max-width: 34rem; }
.svc-hero-ctas { justify-content: flex-start; margin-bottom: 0; }

/* shared visual panel */
.svc-viz {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 20px;
  border: 1px solid var(--card-border);
  background: var(--panel);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- code --- */
.svc-browser { width: 78%; border-radius: 12px; border: 1px solid var(--card-border); background: #0a0d16; overflow: hidden; }
.svc-browser-bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.6rem 0.8rem; background: rgba(255,255,255,0.04); border-bottom: 1px solid var(--card-border); }
.svc-browser-bar > span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.svc-browser-url { flex: 1; height: 12px; margin-left: 0.5rem; border-radius: 6px; background: rgba(255,255,255,0.07); }
.svc-browser-body { position: relative; padding: 1.2rem 1rem 1.6rem; display: grid; gap: 0.7rem; }
.svc-code-line {
  height: 10px;
  width: var(--w);
  border-radius: 5px;
  background: rgba(255,255,255,0.12);
  transform-origin: left;
  animation: svcType 3.6s ease-in-out var(--d) infinite;
}
.svc-code-accent { background: linear-gradient(90deg, var(--teal), var(--blue)); opacity: 0.75; }
@keyframes svcType {
  0% { transform: scaleX(0); }
  22%, 78% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
.svc-caret { position: absolute; bottom: 0.65rem; left: 1rem; width: 8px; height: 13px; background: var(--teal); animation: svcBlink 1s steps(1) infinite; }
@keyframes svcBlink { 50% { opacity: 0; } }

/* --- chart --- */
.svc-viz-chart { padding: 2.2rem; align-items: flex-end; }
.svc-chart-bars { position: absolute; inset: 2.2rem; display: flex; align-items: flex-end; gap: 8%; }
.svc-bar {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(59,130,246,0.65), rgba(15,90,242,0.15));
  transform-origin: bottom;
  animation: svcGrow 1s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d) both;
}
@keyframes svcGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.svc-chart-line { position: absolute; inset: 2.2rem; width: calc(100% - 4.4rem); height: calc(100% - 4.4rem); }
.svc-chart-line path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: svcDraw 1.6s ease-out 0.5s forwards; }
@keyframes svcDraw { to { stroke-dashoffset: 0; } }
.svc-chart-dot { fill: var(--teal); opacity: 0; animation: svcPop 0.4s ease-out 2s forwards, svcPulseDot 2s ease-in-out 2.4s infinite; }
@keyframes svcPop { to { opacity: 1; } }
@keyframes svcPulseDot { 50% { r: 7; } }

/* --- nodes --- */
.svc-viz-nodes svg { width: 82%; height: 82%; }
.svc-node-links path { stroke-dasharray: 6 8; opacity: 0.45; animation: svcFlow 1.4s linear infinite; }
@keyframes svcFlow { to { stroke-dashoffset: -14; } }
.svc-node-sats circle { animation: svcSat 2.4s ease-in-out infinite; }
.svc-node-sats circle:nth-child(2n) { animation-delay: 0.6s; }
.svc-node-sats circle:nth-child(3n) { animation-delay: 1.2s; }
@keyframes svcSat { 50% { opacity: 0.45; } }
.svc-node-core { animation: svcCore 2s ease-in-out infinite; }
@keyframes svcCore { 50% { r: 20; opacity: 0.8; } }

/* --- wireframe --- */
.svc-viz-wire { flex-direction: column; gap: 1rem; padding: 2rem; align-items: stretch; justify-content: center; }
.svc-wire-nav { display: flex; justify-content: space-between; align-items: center; }
.svc-wire-logo { width: 60px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--teal), var(--blue)); }
.svc-wire-links { width: 120px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.1); }
.svc-wire-hero { display: grid; gap: 0.6rem; margin: 0.4rem 0; }
.svc-wire-block, .svc-wire-short, .svc-wire-btn, .svc-wire-card {
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  animation: svcShimmer 2.8s ease-in-out var(--d) infinite;
}
.svc-wire-block { height: 18px; width: 70%; }
.svc-wire-short { height: 12px; width: 45%; }
.svc-wire-btn { height: 22px; width: 110px; border-radius: 12px; background: rgba(56,189,248,0.35); }
.svc-wire-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.svc-wire-card { height: 54px; }
@keyframes svcShimmer { 50% { background-color: rgba(94, 234, 212, 0.22); } }

/* --- pulse --- */
.svc-viz-pulse { flex-direction: column; padding: 2rem; gap: 1rem; align-items: stretch; }
.svc-pulse-head { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--teal); }
.svc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: svcLive 1.4s ease-in-out infinite; }
@keyframes svcLive { 50% { opacity: 0.3; box-shadow: 0 0 0 5px rgba(45,212,191,0.15); } }
.svc-viz-pulse svg { width: 100%; height: 42%; }
.svc-pulse-path { stroke-dasharray: 640; stroke-dashoffset: 640; animation: svcHeartbeat 3.2s linear infinite; }
@keyframes svcHeartbeat { 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -640; } }
.svc-pulse-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.svc-pulse-meta strong { color: var(--text); }

/* --- server --- */
.svc-viz-server { flex-direction: column; gap: 1.4rem; }
.svc-rack { width: 62%; display: grid; gap: 0.7rem; }
.svc-rack-unit {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: #0a0d16;
}
.svc-led { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: svcLed 1.6s steps(1) var(--d) infinite; }
.svc-led-teal { background: var(--teal); }
@keyframes svcLed { 50% { opacity: 0.15; } }
.svc-rack-slots { flex: 1; height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0 14px, transparent 14px 20px); }
.svc-rack-flow { display: flex; gap: 0.5rem; }
.svc-rack-flow span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: svcFlowDot 2.1s ease-in-out var(--d) infinite; }
@keyframes svcFlowDot { 0%, 100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(-8px); opacity: 1; } }

/* --- shield --- */
.svc-viz-shield svg { width: 42%; height: 42%; position: relative; z-index: 1; }
.svc-shield-ring {
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(45, 212, 191, 0.45);
  animation: svcRing 3s ease-out var(--d) infinite;
}
@keyframes svcRing { from { transform: scale(0.8); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }
.svc-shield-check { stroke-dasharray: 12; stroke-dashoffset: 12; animation: svcCheck 2.6s ease-out 0.6s infinite; }
@keyframes svcCheck { 25%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -12; } }

/* --- radar --- */
.svc-radar { position: relative; width: 64%; aspect-ratio: 1; }
.svc-radar-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--s); height: var(--s);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.svc-radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(45,212,191,0.4), transparent 70deg);
  animation: svcSweep 4s linear infinite;
}
@keyframes svcSweep { to { transform: rotate(360deg); } }
.svc-radar-blip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: svcBlip 4s ease-out var(--d) infinite; }
@keyframes svcBlip { 0%, 12% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,212,191,0.5); } 45% { opacity: 0.15; box-shadow: 0 0 0 8px rgba(45,212,191,0); } 100% { opacity: 0.15; } }

/* --- features / steps / stats --- */
.svc-feature-grid { gap: 1.5rem; }

/* ===== VISIBILITY AUDIT — SCORE GAUGES ===== */
.score-gauge-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.score-gauge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  background: var(--panel);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text);
}

.score-gauge-svg text { font-family: var(--font-body); }

@media (max-width: 900px) {
  .score-gauge-grid { grid-template-columns: repeat(3, 1fr); }
}

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

.svc-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.svc-reveal.in-view { opacity: 1; transform: translateY(0); }

.svc-steps { max-width: 720px; margin: 0 auto; display: grid; gap: 0; }
.svc-step {
  display: flex;
  gap: 1.6rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--card-border);
}
.svc-step:last-child { border-bottom: none; }
.svc-step-num {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  flex-shrink: 0;
  padding-top: 0.15rem;
}
.svc-step-body h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.35rem; }
.svc-step-body p { color: var(--muted); font-size: 0.94rem; }

.svc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }
.svc-stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.svc-stat-label { color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }

.svc-cta-actions { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .svc-viz *, .svc-viz svg * { animation: none !important; }
  .svc-code-line { transform: none; }
  .svc-bar { transform: none; }
  .svc-chart-line path { stroke-dashoffset: 0; }
  .svc-chart-dot, .svc-pulse-path { opacity: 1; stroke-dashoffset: 0; }
  .svc-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .svc-hero-grid { grid-template-columns: 1fr; }
  .svc-stats { gap: 1.2rem; }
}

@media (max-width: 560px) {
  .svc-stats { grid-template-columns: 1fr; }
  .svc-hero-ctas { flex-direction: column; align-items: stretch; }
  .svc-hero-ctas .btn { width: 100%; }
  .svc-step { gap: 1rem; }
}

/* ===== RESPONSIVE ===== */
/* Header/nav switches to the mobile hamburger menu at a wider breakpoint than
   the rest of the layout (1360px vs 900px) — with 8 nav items + CTA + lang
   switch, the desktop nav bar itself runs out of room and overflows well
   before other sections need to stack, so it needs its own, earlier cutoff.
   This keeps moving up as nav items are added (1100 -> 1280 -> 1360 so far,
   for Portfolio then FAQ) -- if another item gets added, re-verify the
   overflow window with Playwright before picking the next value rather than
   guessing; it isn't perfectly linear with item count. */
@media (max-width: 1360px) {
  .nav-toggle { display: flex; }
  .site-header > .wrap > .lang-switch { display: none; }
  .nav-cta-item { display: none; }

  .site-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.6rem;
    background: var(--panel);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease;
  }
  .site-nav.is-open { max-height: 70vh; opacity: 1; overflow-y: auto; }

  .site-nav ul { flex-direction: column; gap: 0; padding: 0.75rem 1.5rem; }
  .site-nav ul li { border-bottom: 1px solid var(--card-border); }
  .site-nav ul li:last-child { border-bottom: none; }
  .site-nav ul a { display: block; padding: 0.9rem 0; }

  .site-nav-mobile-extra {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1.5rem;
    border-top: 1px solid var(--card-border);
  }
  .site-nav-mobile-extra .btn-primary { width: 100%; }
  .site-nav-mobile-extra .lang-switch { margin-left: 0; justify-content: center; }

  .site-logo svg { width: 64px; height: 64px; }
  .site-logo { font-size: 1.6rem; gap: 0.6rem; }
}

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .stack-panel, .cta-panel, .team-section .wrap, .founder-section .wrap { grid-template-columns: 1fr; }
  .vision-grid { grid-template-columns: 1fr; }

  .wrap { padding: 0 1.5rem; }
  .site-header .wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
  section { padding: 4rem 0; }
  .stack-panel, .cta-panel { padding: 2rem; }
  .section-head { margin-bottom: 2.5rem; }

  .portfolio-col { height: 260px; }
  .logo-strip-row a { height: 130px; }
  .logo-strip-row img { max-height: 72px; }
}

@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-5 { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }

  .wrap { padding: 0 1.25rem; }
  .site-header .wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
  section { padding: 3rem 0; }
  .stack-panel, .cta-panel { padding: 1.5rem; }

  .site-logo svg { width: 52px; height: 52px; }
  .site-logo { font-size: 1.3rem; }

  .portfolio-col { height: 200px; }
  .footer-badges img { height: 110px; }
}