/* ==========================================================================
   NEVIS Theme — Editorial Swiss Design
   Digital Agency, Sarajevo
   ========================================================================== */

/* --- Reset & Variables --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ============================================================
     NEVIS — Vercel/Grok inspired: pure black, Geist, precise,
     monochrome with white accent + subtle gradient borders.
     Token names kept for back-compat across the stylesheet.
     ============================================================ */

  /* Pure black base + near-black surfaces */
  --void:        #000000;
  --void-2:      #050505;
  --surface:     #000000;
  --surface-warm:#050505;
  --surface-alt: #0A0A0A;   /* cards */
  --surface-elevated: #0F0F0F; /* elevated / hover */
  --surface-2:   #0F0F0F;
  --surface-3:   #161616;   /* inputs, chips */

  /* Text — Vercel greyscale */
  --ink:           #EDEDED;  /* primary text */
  --ink-secondary: #A1A1A1;  /* secondary */
  --ink-muted:     #707070;  /* muted */
  --ink-faint:     #4D4D4D;  /* faint */
  --bone:          #FFFFFF;
  --bone-soft:     #A1A1A1;
  --ash:           #707070;
  --text:          #EDEDED;
  --text-muted:    #707070;

  /* Accent = white (monochrome). Used for primary CTA + highlights */
  --accent:        #FFFFFF;
  --accent-hover:  #FFFFFF;
  --accent-2:      #EDEDED;
  --ember:         #FFFFFF;
  --molten-deep:   #A1A1A1;
  --accent-soft:   rgba(255,255,255,0.06);
  --accent-subtle: rgba(255,255,255,0.08);
  --accent-muted:  rgba(255,255,255,0.40);

  /* Dark-section helpers (kept for back-compat) */
  --dark:        #000000;
  --dark-surface:#0A0A0A;
  --dark-border: rgba(255,255,255,0.10);
  --dark-muted:  #707070;

  /* Hairline borders (Vercel signature) */
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --line:          rgba(255,255,255,0.08);
  --line-strong:   rgba(255,255,255,0.14);
  --bg-alt:        #050505;

  /* Legacy aliases */
  --bg-100:   #0A0A0A;
  --bg-200:   rgba(255,255,255,0.08);
  --bg-300:   #0F0F0F;
  --text-300: #4D4D4D;
  --text-400: #707070;
  --text-500: #A1A1A1;

  /* Gradients — Vercel-style fade + white button + subtle top glow */
  --grad-molten: linear-gradient(180deg, #FFFFFF 0%, #E2E2E2 100%);
  --grad-text:   linear-gradient(180deg, #FFFFFF 0%, #999999 130%);
  --grad-border: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
  --grad-mesh:
    radial-gradient(2000px 940px at 50% -12%, rgba(255,255,255,0.075), transparent 64%);

  /* Typography — Geist (Vercel) */
  --font-display: 'Geist', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font-heading: 'Geist', system-ui, sans-serif;

  /* Spacing */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
  --space-6xl: 180px;

  /* Sizing — Vercel container + tighter radii */
  --container: 1760px;
  --container-narrow: 920px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 100px;

  /* Shadows — restrained */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
  --shadow-xl: 0 30px 80px rgba(0,0,0,0.6);
  --shadow-accent: 0 8px 30px rgba(255,255,255,0.10);
  --glow-molten: 0 0 0 1px rgba(255,255,255,0.16);
  --glow-soft:   0 10px 44px rgba(0,0,0,0.5);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;
}

/* --- Base --- */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--void);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: transparent;
  overflow-x: hidden;
  position: relative;
}

/* Atmosphere — warm molten gradient mesh, slowly drifting */
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: 0;
  background: var(--grad-mesh);
  background-repeat: no-repeat;
  filter: blur(40px);
  opacity: 0.95;
  pointer-events: none;
  animation: meshDrift 26s ease-in-out infinite alternate;
}

/* Atmosphere — film grain / noise overlay (top-most atmosphere layer) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   HIGH-TECH FX BACKDROP — fixed grid + drifting glow orbs
   (sits behind all content; sections are mostly transparent
   so this continuous canvas shows through the whole page)
   ============================================================ */
.fx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* global grid disabled — grid is hero-only now */
.fx-grid { display: none; }
.fx-grid--off {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, #000 0%, transparent 70%);
}

/* Orbs removed for the Vercel/Grok look — the only glow is the
   subtle top radial in --grad-mesh. Kept hidden for back-compat. */
.fx-orb { display: none; }

/* ============================================================
   SECTION FX — transparent canvas + subtle gradient washes,
   glowing dividers, decorative primitives
   ============================================================ */
.section { position: relative; z-index: 1; }
.section > .container { position: relative; z-index: 2; }

/* Per-section molten wash helpers */
.fx-wash-top::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(100% 55% at 50% 0%, rgba(82,86,98,0.07), transparent 60%);
}
.fx-wash-tr::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 60% at 90% 10%, rgba(82,86,98,0.08), transparent 60%);
}
.fx-wash-bl::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 60% at 8% 92%, rgba(58,62,72,0.08), transparent 60%);
}

/* Auto glowing divider between consecutive sections */
.section + .section::before,
.section + .cta-banner::before,
.cta-banner + .section::before,
.section + .contact-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 88%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(82,86,98,0.38) 50%, transparent);
  z-index: 3;
  pointer-events: none;
}
.section + .section::after,
.cta-banner + .section::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 2px rgba(82,86,98,0.7);
  z-index: 3;
  pointer-events: none;
}

/* Glowing gradient divider between sections */
.fx-divider {
  position: relative;
  height: 1px;
  width: 100%;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, rgba(82,86,98,0.55) 50%, var(--line-strong) 82%, transparent);
}
.fx-divider::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 2px rgba(82,86,98,0.7);
}

/* Gradient glow border for focal panels */
.fx-glow-border { position: relative; }
.fx-glow-border::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(96,100,112,0.55), rgba(82,86,98,0.12) 35%, transparent 55%, rgba(82,86,98,0.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Mono coordinate / tech label decoration */
.fx-coord {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: 0.6;
}

/* Corner bracket decoration */
.fx-bracket {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid rgba(82,86,98,0.4);
  pointer-events: none;
}
.fx-bracket.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.fx-bracket.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.fx-bracket.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.fx-bracket.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

@keyframes meshDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .fx-orb { animation: none; }
}

@media (min-width: 1200px) {
  body { font-size: 17px; }
}

/* Selection */
::selection {
  background: rgba(82,86,98,0.30);
  color: var(--bone);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

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

button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 768px) {
  .container { padding: 0 32px; }
}

@media (min-width: 1200px) {
  .container { padding: 0 48px; }
}

@media (min-width: 1600px) {
  .container { padding: 0 72px; }
}

@media (min-width: 1900px) {
  .container { padding: 0 96px; }
}

.section {
  padding: var(--space-5xl) 0;
}

@media (min-width: 1024px) {
  .section { padding: var(--space-6xl) 0; }
}

/* Section variants — subtle dark elevation differences */
.section-warm {
  background: linear-gradient(180deg, rgba(16,16,19,0.5), rgba(10,10,11,0) 35%, rgba(16,16,19,0.5));
}

.section-alt {
  background: linear-gradient(180deg, rgba(16,16,19,0.5), rgba(10,10,11,0) 35%, rgba(16,16,19,0.5));
}

.section-dark {
  background: radial-gradient(120% 90% at 50% 0%, rgba(82,86,98,0.06), transparent 55%), linear-gradient(180deg, rgba(6,6,8,0.7), rgba(6,6,8,0.5));
  color: var(--bone);
  position: relative;
}

.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 80% 0%, rgba(82,86,98,0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.section-dark > .container {
  position: relative;
  z-index: 1;
}

.section-dark .section-eyebrow {
  color: var(--accent);
}

.section-dark .section-eyebrow::before {
  background: var(--accent);
}

.section-dark .section-title {
  color: var(--bone);
}

.section-dark .section-desc {
  color: var(--ash);
}

.section-dark .why-card {
  background: var(--surface-alt);
  border-color: var(--line);
}

.section-dark .why-card h3 {
  color: var(--bone);
}

.section-dark .why-card p {
  color: var(--ash);
}

.section-dark .why-card-icon {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--accent);
}

.section-dark .why-card:hover {
  border-color: rgba(82,86,98,0.4);
  box-shadow: var(--glow-molten);
}

.section-dark .why-card::after {
  background: var(--grad-molten);
}

.section-dark .industry-card {
  background: var(--surface-alt);
  border-color: var(--line);
}

.section-dark .industry-card h3 {
  color: var(--bone);
}

.section-dark .industry-card p {
  color: var(--ash);
}

.section-dark .industry-icon {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--accent);
}

.section-dark .industry-card:hover {
  background: var(--accent-subtle);
  border-color: rgba(82,86,98,0.4);
}

.section-dark .industry-card:hover .industry-icon {
  background: var(--grad-molten);
  color: #070709;
  border-color: transparent;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.section-header {
  margin-bottom: var(--space-3xl);
}

@media (min-width: 1024px) {
  .section-header { margin-bottom: var(--space-4xl); }
}

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.section-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--grad-molten);
  display: inline-block;
  border-radius: 2px;
}

.section-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 750;
  margin-bottom: var(--space-lg);
  max-width: 800px;
  letter-spacing: -0.03em;
  line-height: 1.04;  text-wrap: balance;
}

.section-desc {
  font-size: 1.125rem;
  color: var(--bone-soft);
  line-height: 1.7;
  max-width: 580px;
  letter-spacing: -0.005em;  text-wrap: pretty;
}

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

/* --- Buttons (Vercel: white primary, ghost secondary) --- */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  background: #ffffff;
  color: #000000;
  transition: background 0.16s var(--ease-out), box-shadow 0.22s var(--ease-out), transform 0.22s var(--ease-out);
  white-space: nowrap;
  border: 1px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.btn-primary svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.btn-primary:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,255,255,0.14), 0 2px 6px rgba(0,0,0,0.4);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
  transition-duration: 0.06s;
}

.btn-primary:hover svg {
  transform: translateX(2px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
  transition: background 0.16s var(--ease-out), border-color 0.16s var(--ease-out), color 0.16s var(--ease-out), transform 0.22s var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
}

.btn-secondary svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.btn-secondary:hover {
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.04);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
  transition-duration: 0.06s;
}

.btn-secondary:hover svg {
  transform: translateX(2px);
}

/* ============================================================
   VHERO — Vercel/Grok hero (centered, spacious, product window)
   ============================================================ */
.vhero { position: relative; padding: 168px 0 84px; overflow: hidden; }
.vhero-grid {
  position: absolute; top: 0; left: 0; right: 0; height: 520px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 82% at 50% 0%, #000 18%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 82% at 50% 0%, #000 18%, transparent 78%);
}
.vhero::before {
  content: ''; position: absolute; top: -420px; left: 50%; transform: translateX(-50%);
  width: min(2100px, 170vw); height: 1180px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.018) 44%, transparent 72%);
}
.vhero::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 50%, transparent);
}
.vhero-container { position: relative; z-index: 2; }
@keyframes heroGlow {
  from { opacity: 0.75; transform: translateX(-50%) scale(1); }
  to   { opacity: 1;    transform: translateX(-50%) scale(1.07); }
}
.vhero-container { display: flex; flex-direction: column; align-items: center; text-align: center; }

.vhero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.03);
  font-size: 0.8125rem; color: var(--ink-secondary); letter-spacing: -0.01em;
  transition: all 0.2s var(--ease-out);
}
.vhero-badge:hover { border-color: rgba(255,255,255,0.28); color: #fff; }
.vhero-badge svg { width: 13px; height: 13px; opacity: 0.6; }
.vhero-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.10); }

.vhero-title {
  margin-top: 34px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 6.6vw, 5.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 26ch;
  color: #fff;
  text-wrap: balance;
}
.vhero-grad {
  display: block;
  background: linear-gradient(180deg, #ffffff 0%, #9b9b9b 118%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.vhero-sub {
  margin-top: 20px; max-width: 540px;
  font-size: 1.125rem; line-height: 1.6; color: var(--ink-secondary); letter-spacing: -0.01em;
}
.vhero-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.vhero-meta {
  margin-top: 30px; display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
  font-size: 0.8125rem; color: var(--ink-muted);
}
.vhero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.vhero-meta svg { width: 13px; height: 13px; color: var(--ink-muted); }

/* product window */
.vhero-window {
  position: relative; margin-top: 64px; width: 100%; max-width: 1300px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #0d0d0d, #070707);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
}
.vhero-window::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 3;
}
.vw-glow {
  position: absolute; top: -45%; left: 50%; transform: translateX(-50%);
  width: 100%; height: 110%; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.07), transparent 60%);
  pointer-events: none;
}
.vw-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--border); position: relative; }
.vw-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.vw-url { margin-left: 14px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-muted); }
.vw-url svg { width: 13px; height: 13px; }
.vw-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; padding: 16px; text-align: left; position: relative; }
.vw-cell {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.015); padding: 18px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.vw-cell-hero { justify-content: space-between; }
.vw-label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-muted); letter-spacing: 0.06em; }
.vw-kpi { font-family: var(--font-display); font-weight: 600; font-size: 2.7rem; line-height: 1; color: #fff; letter-spacing: -0.03em; }
.vw-chart { display: flex; align-items: flex-end; gap: 7px; height: 88px; margin-top: 16px; }
.vw-chart span {
  flex: 1; height: var(--h); border-radius: 4px 4px 0 0; transform-origin: bottom;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.08));
}
.vw-chart span:nth-child(2){animation-delay:.2s}.vw-chart span:nth-child(3){animation-delay:.4s}
.vw-chart span:nth-child(4){animation-delay:.6s}.vw-chart span:nth-child(5){animation-delay:.8s}
.vw-chart span:nth-child(6){animation-delay:1s}.vw-chart span:nth-child(7){animation-delay:1.2s}
.vw-chart span:nth-child(7){background:linear-gradient(180deg,#fff,rgba(255,255,255,0.25))}
.vw-chart span:not(:nth-child(7)){opacity:.78}
@keyframes vwGrow { from { transform: scaleY(.72); opacity:.55 } to { transform: scaleY(1); opacity:1 } }
.vw-side { display: flex; flex-direction: column; gap: 14px; }
.vw-kpi-sm { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: #fff; letter-spacing: -0.02em; }
.vw-cap { font-size: 0.75rem; color: var(--ink-muted); }
.vw-cell-row { flex-direction: row; align-items: center; gap: 10px; }
.vw-pulse { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: vwPulse 2s infinite; flex-shrink: 0; }
@keyframes vwPulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.4)} 70%{box-shadow:0 0 0 8px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} }

/* trusted by */
.vhero-logos { margin-top: 56px; display: flex; align-items: center; gap: 14px 30px; flex-wrap: wrap; justify-content: center; }
.vhero-logos-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint); }
.vhero-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  color: var(--ink-secondary); opacity: 0.6;
  transition: opacity 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.vhero-logo svg { width: 19px; height: 19px; }
.vhero-logo > span { line-height: 1; }
.vhero-logo:hover { opacity: 1; color: #fff; }

/* hero social proof (star rating) */
.vhero-rating { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; font-size: 0.8125rem; color: var(--ink-muted); letter-spacing: -0.005em; transition: color 0.2s var(--ease-out); }
.vhero-rating:hover { color: var(--ink-secondary); }
.vhero-stars { display: inline-flex; gap: 2px; color: #fff; }
.vhero-stars svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }

@media (max-width: 820px) {
  .vhero { padding-top: 132px; }
  .vw-body { grid-template-columns: 1fr; }
  .vhero-meta { gap: 14px 18px; }
}

/* ============================================================
   Spotlight cards — copper sheen follows the cursor
   (JS sets --mx / --my; falls back gracefully to center)
   ============================================================ */
.has-spotlight {
  position: relative;
  --mx: 50%;
  --my: 50%;
}

.has-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--mx) var(--my),
    rgba(82,86,98,0.14),
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}

.has-spotlight:hover::before {
  opacity: 1;
}

/* keep card content above the sheen */
.has-spotlight > * {
  position: relative;
  z-index: 1;
}

/* Premium light-catch — raised surfaces catch a faint top edge of light */
.why-card,
.industry-card,
.project-card,
.testimonial-card-v2,
.about-stat,
.service-item-link,
.contact-form {
  box-shadow: inset 0 1px 0 0 rgba(245, 240, 232, 0.05);
}

/* Tilt cards get smooth 3D return + GPU hint (JS drives the subtle tilt) */
.has-spotlight {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ============================================================
   HEADER — Centered logo, split navigation
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: all var(--duration-normal) var(--ease-out);
  animation: headerFadeIn 0.8s ease forwards;
}

@keyframes headerFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header.scrolled {
  padding: 12px 0;
  background: rgba(10,10,11,0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.site-header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Logo — left aligned */
.site-logo {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.site-logo img {
  height: 22px;
  width: auto;
  transition: all var(--duration-fast) ease;
  /* invert black logo → bone white on dark */
  filter: brightness(0) invert(0.94);
}

.site-logo .logo-dark { display: block; }
.site-logo .logo-light { display: none; }

.site-logo:hover img {
  opacity: 0.92;
  filter: brightness(0) invert(0.94) drop-shadow(0 0 10px rgba(82,86,98,0.45));
}

/* Nav groups — center & right */
.nav-center,
.nav-right {
  display: none;
  align-items: center;
  gap: 4px;
}

.nav-center {
  flex: 1;
  justify-content: center;
}

@media (min-width: 1024px) {
  .nav-center,
  .nav-right { display: flex; }
}

.nav-center > a,
.nav-dropdown-toggle {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  transition: all var(--duration-fast) ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-center > a:hover,
.nav-dropdown-toggle:hover {
  color: var(--ink);
}

/* Underline hover effect */
.nav-center > a {
  position: relative;
}

.nav-center > a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 14px;
  right: 14px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease-out);
}

.nav-center > a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Dropdown / Mega Menu */
.nav-dropdown {
  position: static;
}

.nav-dropdown-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) ease;
}

.nav-dropdown:hover .nav-dropdown-toggle svg {
  transform: rotate(180deg);
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  transform: translateY(4px);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-out);
  z-index: 1000;
  padding-top: 8px;
}

.nav-dropdown:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu-inner {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 28px 32px;
}

.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 40px;
}

.mega-menu-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mega-menu-service {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) ease;
  text-transform: none;
  letter-spacing: normal;
}

.mega-menu-service:hover {
  background: var(--surface-alt);
}

.mega-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent);
  flex-shrink: 0;
}

.mega-menu-icon svg {
  width: 16px;
  height: 16px;
}

.mega-menu-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.mega-menu-subs {
  list-style: none;
  padding: 0 0 0 52px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-menu-subs li a {
  font-size: 0.75rem;
  color: var(--ink-muted);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) ease;
  display: block;
  text-transform: none;
  letter-spacing: normal;
}

.mega-menu-subs li a:hover {
  color: var(--accent);
  background: var(--accent-subtle);
}

.mega-menu-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mega-menu-footer span {
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.mega-menu-footer a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: normal;
  transition: gap var(--duration-fast) ease;
}

.mega-menu-footer a:hover {
  gap: 10px;
}

.mega-menu-footer a svg {
  width: 14px;
  height: 14px;
}

/* Mega menu responsive - smaller desktops */
@media (min-width: 1024px) and (max-width: 1199px) {
  .mega-menu-inner {
    padding: 24px;
  }
  .mega-menu-grid {
    gap: 20px 24px;
  }
  .mega-menu-subs {
    padding-left: 42px;
  }
}

/* Header CTA */
.btn-header-cta {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone) !important;
  background: rgba(210,210,216,0.03);
  padding: 10px 24px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--line-strong);
  margin-left: 8px;
  transition: all var(--duration-normal) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-header-cta:hover {
  background: var(--grad-molten);
  color: #070709 !important;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(82,86,98,0.32);
}

.site-header.scrolled .btn-header-cta {
  border-color: var(--line-strong);
  color: var(--bone) !important;
}

.site-header.scrolled .btn-header-cta:hover {
  background: var(--grad-molten);
  color: #070709 !important;
  border-color: transparent;
}


/* Mobile Menu Button */
.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--ink);
  transition: all var(--duration-fast) ease;
}

.mobile-menu-btn:hover {
  background: var(--surface-alt);
}

.mobile-menu-btn svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 1024px) {
  .mobile-menu-btn { display: none; }
}

/* ---- Mobile Drawer ---- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1999;
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}

.drawer-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 340px;
  max-width: 85vw;
  z-index: 2000;
  background: var(--surface);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.08);
}

.drawer.active {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .drawer,
  .drawer-backdrop { display: none !important; }
}

/* Drawer header */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.drawer-logo img {
  height: 22px;
  width: auto;
  filter: brightness(0) invert(0.94);
}

.drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  transition: all var(--duration-fast) ease;
  cursor: pointer;
}

.drawer-close:hover {
  background: var(--surface-alt);
  color: var(--ink);
}

.drawer-close svg {
  width: 20px;
  height: 20px;
}

/* Drawer nav */
.drawer-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  gap: 2px;
  overflow-y: auto;
}

.drawer-nav > a {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  padding: 14px 12px;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) ease;
}

.drawer-nav > a:hover {
  background: var(--surface-alt);
  color: var(--accent);
  padding-left: 16px;
}

/* Drawer accordion group */
.drawer-nav-group {
  display: flex;
  flex-direction: column;
}

.drawer-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  padding: 14px 12px;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.drawer-nav-toggle:hover {
  background: var(--surface-alt);
}

.drawer-nav-toggle > svg {
  width: 16px;
  height: 16px;
  color: var(--ink-muted);
  transition: transform 0.3s var(--ease-out);
}

.drawer-nav-toggle.active > svg {
  transform: rotate(180deg);
}

.drawer-nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-out);
}

.drawer-nav-submenu.active {
  grid-template-rows: 1fr;
}

.drawer-nav-submenu-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-nav-submenu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-secondary);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) ease;
}

.drawer-nav-submenu a:hover {
  background: var(--accent-subtle);
  color: var(--accent);
}

.drawer-nav-submenu .mega-menu-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.drawer-nav-submenu .mega-menu-icon svg {
  width: 14px;
  height: 14px;
}

/* Drawer footer */
.drawer-footer {
  padding: 20px 28px 28px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--accent);
  color: #000 !important;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-out);
}

.drawer-cta:hover {
  background: var(--accent-hover);
  gap: 12px;
}

.drawer-cta svg {
  width: 16px;
  height: 16px;
}

.drawer-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.drawer-social {
  display: flex;
  gap: 10px;
}

.drawer-social a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  transition: all var(--duration-fast) ease;
}

.drawer-social a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.drawer-social a svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   HERO — Split layout, wireframe illustration
   ============================================================ */
.hero {
  padding-top: 140px;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Hero Split Layout --- */
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
  flex: 1;
  padding: var(--space-3xl) 0 var(--space-2xl);
}

@media (min-width: 1024px) {
  .hero-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    padding: var(--space-4xl) 0 var(--space-3xl);
  }
}

@media (min-width: 1400px) {
  .hero-split {
    grid-template-columns: 0.55fr 0.45fr;
  }
}

/* Hero content — left column */
.hero-content {
  position: relative;
  z-index: 2;
}

/* Subtitle */
.hero-subtitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--space-lg);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}

.hero.animated .hero-subtitle {
  opacity: 1;
  transform: translateY(0);
}

/* Heading */
.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-xl);
  color: var(--ink);
}

.hero h1 .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.05em;
}

.hero h1 .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(120%);
  will-change: transform, opacity, filter;
}

.hero.animated h1 .letter {
  animation: letterReveal 0.85s var(--ease-emphasis) forwards,
             letterFadeIn 0.5s ease forwards;
}

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

@keyframes letterReveal {
  from { transform: translateY(120%); filter: blur(6px); }
  to { transform: translateY(0); filter: blur(0); }
}

@keyframes letterFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Description */
.hero-desc {
  font-size: 1.0625rem;
  color: var(--ink-muted);
  line-height: 1.75;
  margin-bottom: var(--space-2xl);
  max-width: 480px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}

.hero.animated .hero-desc {
  opacity: 1;
  transform: translateY(0);
}

/* Action buttons */
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-3xl);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s;
}

.hero.animated .hero-actions {
  opacity: 1;
  transform: translateY(0);
}

.hero-trust {
  list-style: none;
  margin: 0 0 var(--space-3xl);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s;
}

.hero.animated .hero-trust {
  opacity: 1;
  transform: translateY(0);
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bone-soft);
}

.hero-trust li svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

.hero .btn-primary {
  background: var(--grad-molten);
}

.hero .btn-primary:hover {
  background: var(--accent);
}

.hero .btn-primary:hover svg {
  transform: translateX(4px);
}

/* Video play button */
.btn-video {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
}

.btn-video-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  transition: all 0.4s var(--ease-out);
  color: var(--ink);
}

.btn-video-icon svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
}

.btn-video:hover .btn-video-icon {
  border-color: var(--accent);
  background: var(--accent);
  color: #070709;
}

.btn-video-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-secondary);
  transition: color var(--duration-fast) ease;
}

.btn-video:hover .btn-video-text {
  color: var(--ink);
}

/* Client logos — full width row below split */
.hero-clients {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  padding: var(--space-2xl) 0 var(--space-xl);
  border-top: 1px solid var(--border);
  margin-top: var(--space-xl);
  overflow-x: auto;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.8s, transform 0.6s ease 0.8s;
}

.hero.animated .hero-clients {
  opacity: 1;
  transform: translateY(0);
}

.hero-clients img {
  height: 28px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.4;
  transition: all var(--duration-normal) ease;
  flex-shrink: 0;
}

.hero-clients img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Text logo-wall (fallback "trusted by") */
.hero-clients--text {
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.hero-clients-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: 0.8;
  padding-right: var(--space-xs);
  border-right: 1px solid var(--line);
}

.hero-client-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bone-soft);
  opacity: 0.55;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: default;
}

.hero-client-name:hover {
  opacity: 1;
  color: transparent;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 640px) {
  .hero-clients-label { display: none; }
  .hero-client-name { font-size: 0.95rem; }
}

/* ============================================================
   HERO VISUAL — Wireframe illustration (right column)
   ============================================================ */
.hero-visual {
  position: relative;
  display: none;
}

@media (min-width: 1024px) {
  .hero-visual { display: block; }
}

.wireframe-scene {
  position: relative;
  width: 100%;
  padding: 20px;
}

/* Browser window mockup */
.wireframe-browser {
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xl), var(--glow-molten);
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.8s ease 0.3s, transform 0.8s var(--ease-out) 0.3s;
}

.hero.animated .wireframe-browser {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wireframe-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.wireframe-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}

.wireframe-dot:nth-child(1) { background: #ff5f57; }
.wireframe-dot:nth-child(2) { background: #ffbd2e; }
.wireframe-dot:nth-child(3) { background: #28c840; }

.wireframe-url-bar {
  flex: 1;
  height: 26px;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  margin-left: 12px;
}

/* Page content wireframe */
.wireframe-page {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wireframe-nav {
  height: 10px;
  width: 60%;
  background: var(--surface-alt);
  border-radius: var(--radius-full);
}

.wireframe-hero-block {
  padding: 24px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wireframe-text-lg {
  height: 14px;
  width: 80%;
  background: rgba(210,210,216,0.14);
  border-radius: 3px;
  opacity: 1;
}

.wireframe-text-md {
  height: 10px;
  width: 65%;
  background: rgba(210,210,216,0.14);
  border-radius: 3px;
  opacity: 0.7;
}

.wireframe-text-sm {
  height: 8px;
  width: 50%;
  background: rgba(210,210,216,0.14);
  border-radius: 3px;
  opacity: 0.5;
}

.wireframe-btn-block {
  height: 28px;
  width: 90px;
  background: var(--accent);
  border-radius: var(--radius-full);
  opacity: 0.8;
  margin-top: 6px;
}

.wireframe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.wireframe-card {
  height: 64px;
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.wireframe-section {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Floating UI elements */
.wireframe-float {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out);
}

.hero.animated .wireframe-float {
  opacity: 1;
}

.wireframe-float-1 {
  top: -10px;
  right: 10px;
  transform: translateY(20px);
  transition-delay: 0.7s;
}

.hero.animated .wireframe-float-1 {
  transform: translateY(0);
  animation: floatY 4s ease-in-out 1.5s infinite;
}

.wireframe-float-2 {
  bottom: 60px;
  right: -10px;
  transform: translateX(20px);
  transition-delay: 0.9s;
}

.hero.animated .wireframe-float-2 {
  transform: translateX(0);
  animation: floatY 5s ease-in-out 2s infinite;
}

.wireframe-float-3 {
  top: 40%;
  left: -20px;
  transform: translateX(-20px);
  transition-delay: 1.1s;
}

.hero.animated .wireframe-float-3 {
  transform: translateX(0);
  animation: floatY 4.5s ease-in-out 1.8s infinite;
}

.wireframe-float-4 {
  bottom: 20px;
  left: 20px;
  transform: translateY(20px);
  transition-delay: 1.3s;
}

.hero.animated .wireframe-float-4 {
  transform: translateY(0);
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Widget card */
.wireframe-widget {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
}

.wireframe-widget-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wireframe-widget-icon svg {
  width: 18px;
  height: 18px;
}

.wireframe-widget-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wireframe-widget-lines span {
  display: block;
  height: 6px;
  background: rgba(210,210,216,0.14);
  border-radius: 3px;
}

.wireframe-widget-lines span:nth-child(1) { width: 60px; }
.wireframe-widget-lines span:nth-child(2) { width: 40px; }

/* Stat card */
.wireframe-stat-card {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  text-align: center;
}

.wireframe-stat-num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.wireframe-stat-lbl {
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Code block */
.wireframe-code-block {
  background: var(--dark);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.code-line {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.15);
  width: 80px;
}

.code-line-short { width: 50px; background: rgba(70,74,86,0.4) !important; }
.code-line-mid { width: 65px; }

/* Color dots */
.wireframe-color-dots {
  display: flex;
  gap: 8px;
  background: var(--surface-2);
  padding: 10px 14px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.wireframe-color-dots span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

/* --- Marquee strip --- */
.hero-marquee {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.hero-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marqueeScroll 40s linear infinite;
}

.hero-marquee-item {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 var(--space-lg);
  flex-shrink: 0;
  transition: color var(--duration-fast) ease;
}

.hero-marquee-item::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: var(--space-lg);
  vertical-align: middle;
}

.hero-marquee-item:hover {
  color: var(--ink);
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Video Modal */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s var(--ease-out);
}

.video-modal.active {
  opacity: 1;
  visibility: visible;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--dark);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.5s var(--ease-out);
}

.video-modal.active .video-modal-content {
  transform: scale(1) translateY(0);
}

.video-modal-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 1.75rem;
  border-radius: 50%;
  transition: all var(--duration-fast) ease;
  cursor: pointer;
  z-index: 2;
}

.video-modal-close:hover {
  color: #BCBCC2;
  background: rgba(255,255,255,0.1);
}

.video-modal-player {
  width: 100%;
  height: 100%;
}

.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--space-lg);
  color: rgba(255,255,255,0.5);
}

.video-placeholder-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
}

.video-placeholder-icon svg {
  width: 28px;
  height: 28px;
  margin-left: 4px;
}

.video-placeholder p {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

/* ============================================================
   STATS BANNER
   ============================================================ */
/* Old stats-banner, marquee-section, logo-strip removed — integrated into hero */

/* ============================================================
   SERVICES — EDITORIAL LIST
   ============================================================ */
.services-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.service-item {
  border-bottom: 1px solid var(--border);
}

.service-item-link {
  display: grid;
  grid-template-columns: 48px 1fr 40px;
  gap: var(--space-md);
  padding: var(--space-xl) 0;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: all var(--duration-normal) var(--ease-out);
}

@media (min-width: 768px) {
  .service-item-link {
    grid-template-columns: 52px 1fr auto 44px;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-sm);
  }
}

@media (min-width: 1024px) {
  .service-item-link {
    grid-template-columns: 48px 52px 1fr auto 48px;
    gap: var(--space-2xl);
    padding: var(--space-2xl) var(--space-lg);
  }
}

.service-item-link:hover {
  background: var(--surface-warm);
  border-radius: var(--radius-lg);
}

/* Number */
.service-item-num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  transition: color var(--duration-normal) ease;
  display: none;
}

@media (min-width: 1024px) {
  .service-item-num { display: block; }
}

.service-item-link:hover .service-item-num {
  color: var(--accent);
}

/* Icon */
.service-item-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  color: var(--ink-muted);
  border: 1px solid var(--border);
  transition: all var(--duration-normal) var(--ease-out);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .service-item-icon {
    width: 52px;
    height: 52px;
  }
}

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

@media (min-width: 768px) {
  .service-item-icon svg {
    width: 22px;
    height: 22px;
  }
}

.service-item-link:hover .service-item-icon {
  background: var(--surface-alt);
  color: var(--ink);
  border-color: var(--border-strong);
}

/* Content */
.service-item-content {
  flex: 1;
  min-width: 0;
}

.service-item-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  margin-bottom: 8px;
  transition: color var(--duration-fast) ease;
}

.service-item-link:hover .service-item-content h3 {
  color: var(--accent);
}

.service-item-content p {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 48ch;
}

/* Tags */
.service-item-tags {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
}

@media (min-width: 768px) {
  .service-item-tags { display: flex; max-width: 200px; }
}

@media (min-width: 1024px) {
  .service-item-tags { max-width: 320px; gap: 8px; }
}

.tag {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--surface-alt);
  border-radius: 7px;
  color: var(--ink-muted);
  border: 1px solid var(--border);
  text-transform: none;
  letter-spacing: 0.01em;
  transition: all var(--duration-fast) ease;
}

.service-item-link:hover .tag {
  border-color: var(--accent-muted);
  color: var(--ink-secondary);
}

/* Arrow */
.service-item-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  color: var(--ink-faint);
  transition: all var(--duration-normal) var(--ease-out);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .service-item-arrow {
    width: 44px;
    height: 44px;
  }
}

@media (min-width: 1024px) {
  .service-item-arrow {
    width: 48px;
    height: 48px;
  }
}

.service-item-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-normal) var(--ease-out);
}

@media (min-width: 1024px) {
  .service-item-arrow svg {
    width: 18px;
    height: 18px;
  }
}

.service-item-link:hover .service-item-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bone);
  transform: scale(1.08);
}

.service-item-link:hover .service-item-arrow svg {
  transform: translateX(3px);
}

/* ============================================================
   WHY US
   ============================================================ */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.why-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.why-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad-molten);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out);
}

.why-card:hover::after {
  transform: scaleX(1);
}

.why-card:hover {
  border-color: rgba(82,86,98,0.4);
  transform: translateY(-6px) scale(1.012);
  box-shadow: var(--shadow-xl), var(--glow-molten);
}

.why-card:hover .why-card-icon {
  transform: translateY(-2px);
}

.why-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  background: var(--surface-alt);
  color: var(--ink);
  border: 1px solid var(--border);
  transition: all var(--duration-normal) ease;
}

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

.why-card:hover .why-card-icon {
  background: var(--accent);
  color: var(--bone);
  border-color: var(--accent);
}

.why-card h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
  line-height: 1.25;
}

.why-card p {
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* ============================================================
   PROCESS — HORIZONTAL CARD STEPPER
   ============================================================ */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .process-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }
}

.process-card {
  position: relative;
  padding: 0 0 var(--space-2xl);
}

@media (min-width: 768px) {
  .process-card {
    padding: 0 var(--space-sm);
  }
}

/* Header — number + connector line */
.process-card-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-xl);
  position: relative;
}

.process-card-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-elevated);
  border: 2px solid var(--border-strong);
  color: var(--ink-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: all var(--duration-normal) var(--ease-out);
}

.process-card:hover .process-card-num {
  background: var(--accent);
  border-color: var(--accent);
  color: #070709;
  transform: scale(1.1);
  box-shadow: var(--glow-molten);
}

/* Connector line between numbers */
.process-card-connector {
  display: none;
}

@media (min-width: 768px) {
  .process-card-connector {
    display: block;
    position: absolute;
    top: 50%;
    left: 52px;
    height: 2px;
    background: var(--border);
    z-index: 1;
    width: calc(100% - 44px);
    transform: translateY(-50%);
  }
}

/* Card body */
.process-card-body {
  padding-left: 56px;
}

@media (min-width: 768px) {
  .process-card-body {
    padding-left: 0;
    padding-top: var(--space-sm);
  }
}

.process-card-body h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 6px;
  transition: color var(--duration-fast) ease;
}

.process-card:hover .process-card-body h3 {
  color: var(--accent);
}

.process-card-body p {
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Mobile: vertical connector line */
@media (max-width: 767px) {
  .process-card-header {
    position: relative;
  }

  .process-card-connector {
    display: block;
    position: absolute;
    top: 44px;
    left: 21px;
    width: 2px;
    height: calc(100% + var(--space-2xl));
    background: var(--border);
    z-index: 1;
  }

  .process-card:last-child .process-card-connector {
    display: none;
  }

  .process-card-body {
    padding-left: 56px;
    padding-bottom: var(--space-md);
  }
}

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industries-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .industries-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (min-width: 1024px) {
  .industries-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.industry-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  transition: all var(--duration-normal) var(--ease-out);
}

.industry-card:hover {
  border-color: var(--border-strong);
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012) 70%);
  transform: translateY(-2px);
}

.industry-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  color: var(--ink-muted);
  flex-shrink: 0;
  border: 1px solid var(--border);
  transition: all var(--duration-normal) ease;
}

.industry-icon svg {
  width: 18px;
  height: 18px;
}

.industry-card:hover .industry-icon {
  background: rgba(255,255,255,0.08);
  color: var(--ink);
  border-color: var(--border-strong);
}

.industry-card h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.industry-card p {
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}

/* ============================================================
   PROJECTS
   ============================================================ */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .projects-grid { gap: 32px; }
}

.project-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.75);
  border-color: var(--border-strong);
}

.project-card-image {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
}

.project-card-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

.project-card-image .project-placeholder { aspect-ratio: 16 / 9; }

.project-card:hover .project-card-image img {
  transform: scale(1.05);
}

.project-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7,7,9,0.78);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
}

.project-card:hover .project-card-overlay,
.project-card:focus-within .project-card-overlay {
  opacity: 1;
}

.project-card-overlay a {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-full);
  transition: all var(--duration-fast) ease;
}

.project-card-overlay a:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.project-card-overlay a svg {
  width: 16px;
  height: 16px;
}

.project-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 14px;
  color: var(--ink-faint);
  overflow: hidden;
}

/* subtle hairline dot-grid so a no-image cover reads as intentional, not broken */
.project-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.7;
}

.project-placeholder-mark {
  position: relative;
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.14);
}

.project-placeholder-label {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  padding: 0 24px;
  text-align: center;
}

.project-placeholder-1 { background: linear-gradient(135deg, #0E0E10, #15151A); }
.project-placeholder-2 { background: linear-gradient(150deg, #101013, #17171C); }
.project-placeholder-3 { background: linear-gradient(120deg, #0D0D0F, #161619); }
.project-placeholder-4 { background: linear-gradient(160deg, #0F0F12, #18181D); }

.project-card-content {
  padding: var(--space-xl);
}

.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-sm);
}

.project-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  background: var(--surface-alt);
  border-radius: var(--radius-full);
  color: var(--ink-muted);
}

.project-card-content h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.project-card-content h3 a:hover {
  color: var(--accent);
}

.project-card-content p {
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section.section-dark {
  background: var(--dark);
}

.section-dark .testimonial-card-v2 {
  background: var(--dark-surface);
  border-color: var(--dark-border);
}

.section-dark .testimonial-card-v2:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 32px rgba(70,74,86,0.08);
}

.section-dark .testimonial-card-v2 blockquote {
  color: rgba(255,255,255,0.7);
}

.section-dark .testimonial-author {
  border-top-color: var(--dark-border);
}

.section-dark .testimonial-name {
  color: var(--bone);
}

.section-dark .testimonial-avatar {
  background: var(--accent);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .testimonial-grid { grid-template-columns: repeat(4, 1fr); }
}

.testimonial-card-v2 {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
}

.testimonial-card-v2::before {
  content: '\201C';
  position: absolute;
  top: 10px;
  right: 22px;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--accent-subtle);
  pointer-events: none;
}

.section-dark .testimonial-card-v2::before {
  color: var(--dark-border);
}

.testimonial-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--glow-molten);
  border-color: rgba(82,86,98,0.4);
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  color: var(--accent);
}

.testimonial-stars svg {
  width: 16px;
  height: 16px;
  fill: var(--accent);
}

.testimonial-card-v2 blockquote {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-secondary);
  flex-grow: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad-molten);
  color: #070709;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.testimonial-name {
  font-weight: 600;
  font-size: 0.875rem;
}

.testimonial-role {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-4xl);
  }
}

.about-text .section-title {
  margin-top: var(--space-md);
}

.about-text p {
  color: var(--ink-secondary);
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: var(--space-md);
}

.about-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: var(--space-xl);
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 1024px) {
  .about-stats { gap: 20px; }
}

.about-stat {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: left;
  transition: all var(--duration-normal) var(--ease-out);
}

@media (min-width: 1024px) {
  .about-stat { padding: var(--space-2xl); }
}

.about-stat:hover {
  border-color: var(--accent-muted);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.about-stat-icon {
  width: 36px;
  height: 36px;
  margin: 0 0 var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

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

.about-stat .number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
}

.about-stat .label {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-weight: 500;
  margin-top: 4px;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

@media (min-width: 1024px) {
  .faq-split {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-4xl);
  }
}

.faq-left {
  align-self: start;
}

.faq-left .section-title {
  margin-top: var(--space-md);
}

.faq-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}

.faq-item:hover {
  border-color: var(--border-strong);
}

.faq-item.active {
  border-color: var(--accent-muted);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--accent);
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: var(--space-xl);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  cursor: pointer;
  transition: color var(--duration-fast) ease;
}

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

.faq-question svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-out);
  color: var(--ink-faint);
}

.faq-item.active .faq-question svg {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-normal) var(--ease-out);
}

.faq-answer p {
  padding: 0 var(--space-xl) var(--space-xl);
  color: var(--ink-secondary);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  padding: var(--space-5xl) 0;
  background: var(--surface-elevated);
  position: relative;
  overflow: hidden;
}

.cta-banner > .container {
  position: relative;
  z-index: 2;
}

@media (min-width: 1024px) {
  .cta-banner { padding: var(--space-6xl) 0; }
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(70,74,86,0.12) 0%, transparent 55%);
  border-radius: 50%;
  pointer-events: none;
}

.cta-banner::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(70,74,86,0.08) 0%, transparent 55%);
  border-radius: 50%;
  pointer-events: none;
}

.cta-banner-inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta-banner-text h2 {
  text-wrap: balance;
}

.cta-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-lg);
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--accent-subtle);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--bone-soft);
}

.cta-banner-badge svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.cta-banner-text h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--bone);
  margin-bottom: var(--space-md);
}

.cta-banner-text p {
  font-size: 1.125rem;
  color: var(--bone-soft);
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto var(--space-2xl);
  letter-spacing: -0.005em;
}

.cta-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.cta-banner .btn-primary {
  background: var(--accent);
}

.cta-banner .btn-primary:hover {
  background: var(--accent-2);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px rgba(70,74,86,0.35);
}

.cta-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dark-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color var(--duration-fast) ease;
}

.cta-phone:hover {
  color: var(--bone);
}

.cta-phone svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-section {
  background: transparent;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-4xl);
  }
}

.contact-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--ink-secondary);
}

.step-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-icon svg {
  width: 14px;
  height: 14px;
}

/* Contact Form */
.contact-form form {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.contact-form form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 50%, transparent);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (min-width: 640px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.form-group {
  margin-bottom: 16px;
}

.form-row .form-group {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 12px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--ink);
  transition: all var(--duration-fast) ease;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--ink-faint);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-reassurance {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-md);
  font-size: 0.8125rem;
  color: var(--ash);
  line-height: 1.5;
}

.form-reassurance svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
}

.contact-form .btn-primary {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-xs);
}

.contact-form form:focus-within {
  border-color: rgba(82,86,98,0.4);
  box-shadow: var(--glow-molten);
}

.contact-form .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

/* Form field focus ring animation */
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: var(--border-strong);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-hero {
  padding: 120px 0 40px;
  background: linear-gradient(180deg, var(--void-2) 0%, var(--void) 100%);
}

.contact-hero-inner {
  max-width: 640px;
}

.contact-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  margin: 16px 0;
}

.contact-hero-desc {
  font-size: 1.125rem;
  color: var(--ink-secondary);
  line-height: 1.7;
}

.contact-page-section {
  padding: 48px 0 80px;
}

.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 1024px) {
  .contact-page-grid {
    grid-template-columns: 380px 1fr;
    gap: 56px;
  }
}

/* Contact Info Column */
.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-info-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-lg);
  flex: 1;
}

.contact-info-card h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent-2);
  margin-bottom: 8px;
}

.contact-info-card > p {
  font-size: 0.9375rem;
  color: var(--ink-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.contact-info-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-info-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-icon svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.contact-info-item strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.contact-info-item a,
.contact-info-item span {
  font-size: 0.9375rem;
  color: var(--ink-secondary);
  line-height: 1.5;
  text-decoration: none;
}

.contact-info-item a:hover {
  color: var(--accent);
}

.contact-social {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.contact-social a {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-secondary);
  transition: all 0.2s ease;
}

.contact-social a:hover {
  background: var(--accent);
  color: #070709;
}

.contact-social a svg {
  width: 16px;
  height: 16px;
}

/* Expect Card */
.contact-expect-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-lg);
}

.contact-expect-card h3 {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--ink);
}

.contact-expect-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-expect-card li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.expect-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #070709;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.contact-expect-card li strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.contact-expect-card li p {
  font-size: 0.8125rem;
  color: var(--ink-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Contact Form Column */
.contact-form-col {
  position: relative;
  display: flex;
  flex-direction: column;
}

.contact-page-form {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
  flex: 1;
}

/* removed: colorful gradient top border on contact form */

@keyframes gradientSlide {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

.contact-page-form .form-group label .required {
  color: #ef4444;
}

.contact-submit-btn {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  font-size: 1rem;
  padding: 14px 24px;
}

.form-note {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--ink-faint);
  text-align: center;
}

/* Success State */
.contact-success {
  background: var(--surface-alt);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 56px 36px;
  text-align: center;
  box-shadow: var(--shadow-xl);
}

.contact-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  animation: successPop 0.5s ease-out;
}

.contact-success-icon svg {
  width: 28px;
  height: 28px;
  color: var(--bone);
}

@keyframes successPop {
  from { transform: scale(0); }
  50% { transform: scale(1.2); }
  to { transform: scale(1); }
}

.contact-success h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.contact-success p {
  color: var(--ink-secondary);
  margin-bottom: 24px;
  font-size: 1rem;
}

/* Error State */
.contact-error {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.contact-error p {
  color: #dc2626;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0;
}

/* Map Section */
.contact-map-section {
  padding: 0 0 80px;
}

.contact-map-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
}

.contact-map-wrapper iframe {
  display: block;
  border-radius: 16px;
}

/* ============================================================
   PAGE HERO (Archive / Inner pages)
   ============================================================ */
.page-hero-section {
  padding: 160px 0 var(--space-4xl);
  background: transparent;
}

.page-hero-content {
  max-width: 700px;
}

.page-hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

.page-hero-desc {
  font-size: 1.125rem;
  color: var(--ink-secondary);
  line-height: 1.75;
}

/* ============================================================
   PROJECTS ARCHIVE
   ============================================================ */
.projects-filter-section {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 72px;
  z-index: 100;
}

.projects-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-btn {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  color: var(--ink-muted);
  border: 1.5px solid var(--border);
  transition: all var(--duration-fast) ease;
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.filter-btn.active {
  background: var(--grad-molten);
  border-color: transparent;
  color: #070709;
}

/* Archive Grid */
.projects-archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 768px) {
  .projects-archive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
}

@media (min-width: 1200px) {
  .projects-archive-grid {
    gap: var(--space-2xl);
  }
}

.project-archive-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}

.project-archive-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.project-archive-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.project-archive-card:hover .project-archive-card-image {
  border-color: rgba(82,86,98,0.4);
  box-shadow: var(--glow-molten);
}

.project-archive-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.project-archive-card:hover .project-archive-card-image img {
  transform: scale(1.04);
}

.project-archive-card-hover {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-normal) ease;
}

.project-archive-card:hover .project-archive-card-hover {
  opacity: 1;
}

.project-archive-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #BCBCC2;
  padding: 12px 24px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-full);
  transition: all var(--duration-fast) ease;
}

.project-archive-view-btn:hover {
  background: var(--bone);
  color: var(--void);
  border-color: var(--bone);
}

.project-archive-view-btn svg {
  width: 16px;
  height: 16px;
}

.project-archive-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}

.project-archive-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.4;
}

.project-archive-card-info {
  padding: var(--space-lg) var(--space-xs) 0;
}

.project-archive-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-sm);
}

.project-archive-card-info h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 4px;
  transition: color var(--duration-fast) ease;
}

.project-archive-card:hover .project-archive-card-info h2 {
  color: var(--accent);
}

.project-archive-client,
.project-archive-excerpt {
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* Empty state */
.projects-empty {
  text-align: center;
  padding: var(--space-5xl) 0;
}

.projects-empty-icon {
  color: var(--ink-faint);
  margin-bottom: var(--space-xl);
}

.projects-empty-icon svg {
  width: 56px;
  height: 56px;
}

.projects-empty h2 {
  font-size: 1.75rem;
  margin-bottom: var(--space-md);
}

.projects-empty p {
  color: var(--ink-muted);
  font-size: 1.0625rem;
  max-width: 480px;
  margin: 0 auto var(--space-xl);
}

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

.projects-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.projects-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-muted);
  border: 1.5px solid var(--border);
  transition: all var(--duration-fast) ease;
}

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

.projects-pagination .page-numbers.current {
  background: var(--grad-molten);
  border-color: transparent;
  color: #070709;
}

.projects-pagination .prev,
.projects-pagination .next {
  gap: 6px;
}

.projects-pagination .prev svg,
.projects-pagination .next svg {
  width: 14px;
  height: 14px;
}

.projects-pagination .prev svg {
  transform: rotate(180deg);
}

/* ============================================================
   SINGLE PROJECT
   ============================================================ */
.project-hero {
  padding: 140px 0 var(--space-3xl);
  background: transparent;
}

.project-hero-inner {
  max-width: 800px;
}

.project-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: var(--space-xl);
  transition: color var(--duration-fast) ease;
}

.project-back-link svg {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
  transition: transform var(--duration-fast) ease;
}

.project-back-link:hover {
  color: var(--accent);
}

.project-back-link:hover svg {
  transform: rotate(180deg) translateX(4px);
}

.project-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-lg);
}

.project-hero-inner h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}

.project-hero-client {
  font-size: 1.0625rem;
  color: var(--ink-muted);
}

.project-hero-client strong {
  color: var(--ink);
}

/* Featured Image */
.project-featured-img {
  padding: 0 0 var(--space-3xl);
  background: var(--void-2);
}

.project-featured-img-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

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

/* Detail Layout */
.project-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
}

@media (min-width: 1024px) {
  .project-detail-layout {
    grid-template-columns: 280px 1fr;
    gap: var(--space-4xl);
  }
}

/* Sidebar */
.project-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 1024px) {
  .project-sidebar {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}

.project-meta-block {
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.project-meta-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.project-meta-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.project-meta-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.project-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-visit-btn {
  width: 100%;
  justify-content: center;
}

.project-visit-btn svg {
  width: 16px;
  height: 16px;
}

/* Content */
.project-content {
  min-width: 0;
}

.entry-content {
  color: var(--ink-secondary);
  font-size: 1.0625rem;
  line-height: 1.8;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: var(--ink);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.entry-content p {
  margin-bottom: var(--space-lg);
}

.entry-content ul,
.entry-content ol {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-xl);
}

.entry-content li {
  margin-bottom: var(--space-xs);
}

.entry-content img {
  border-radius: var(--radius-lg);
  margin: var(--space-xl) 0;
}

/* Results */
.project-results {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border);
}

.project-results h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-xl);
}

.project-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .project-results-grid { grid-template-columns: repeat(4, 1fr); }
}

.project-result-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.project-result-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 14px 34px -18px rgba(0,0,0,0.6);
}

.project-result-num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.project-result-label {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* Testimonial */
.project-testimonial {
  margin-top: var(--space-3xl);
  padding: var(--space-2xl);
  background: var(--surface-alt);
  border-radius: var(--radius-xl);
  border-left: 4px solid var(--accent);
}

.project-testimonial blockquote {
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--ink-secondary);
  margin-bottom: var(--space-md);
}

.project-testimonial cite {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  font-style: normal;
}

/* Gallery */
.project-gallery-title {
  font-size: 1.5rem;
  margin-bottom: var(--space-xl);
}

.project-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .project-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .project-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.project-gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-alt);
}

.project-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 0.5s var(--ease-out);
}

.project-gallery-item:hover img {
  transform: scale(1.03);
}

/* Project Navigation */
.project-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border);
}

.project-nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) var(--ease-out);
}

.project-nav-link:hover {
  border-color: var(--border-strong);
  background: rgba(255,255,255,0.03);
  transform: translateY(-2px);
}

.project-nav-dir {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-nav-dir svg {
  width: 12px;
  height: 12px;
}

.project-nav-prev .project-nav-dir svg {
  transform: rotate(180deg);
}

.project-nav-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.project-nav-item-next {
  text-align: right;
}

.project-nav-item-next .project-nav-link {
  align-items: flex-end;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #040406;
  color: var(--bone);
}

/* Footer CTA strip */
.footer-cta-strip {
  border-bottom: 1px solid var(--dark-border);
  padding: var(--space-2xl) 0;
}

.footer-cta-strip-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .footer-cta-strip-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-cta-strip-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-cta-label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #BCBCC2;
}

.footer-cta-tagline {
  font-size: 0.9375rem;
  color: var(--dark-muted);
}

.footer-cta-strip .btn-primary {
  background: var(--accent);
  flex-shrink: 0;
}

.footer-cta-strip .btn-primary:hover {
  background: #ff6b33;
  box-shadow: 0 8px 24px rgba(70,74,86,0.25);
}

.footer-main {
  padding: var(--space-4xl) 0 var(--space-3xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-3xl);
  }
}

.footer-brand p {
  color: var(--dark-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xl);
  max-width: 320px;
}

.footer-brand .site-logo {
  position: static;
  transform: none;
  display: inline-block;
}

.footer-brand .site-logo img {
  height: 28px;
  filter: brightness(0) invert(1);
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-links a {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--dark-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-muted);
  transition: all var(--duration-fast) ease;
}

.social-links a svg {
  width: 18px;
  height: 18px;
}

.social-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(70,74,86,0.1);
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dark-muted);
  margin-bottom: var(--space-lg);
  font-weight: 500;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.75);
  transition: all var(--duration-fast) ease;
  display: inline-block;
}

.footer-links a:hover {
  color: #BCBCC2;
  transform: translateX(4px);
}

.footer-contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.75);
}

.footer-contact li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--accent);
}

.footer-contact a {
  color: rgba(255,255,255,0.75);
  transition: color var(--duration-fast) ease;
}

.footer-contact a:hover {
  color: #BCBCC2;
}

.footer-bottom {
  border-top: 1px solid var(--dark-border);
  padding: var(--space-lg) 0;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-bottom p {
  font-size: 0.8125rem;
  color: var(--dark-muted);
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer-bottom-links a {
  font-size: 0.8125rem;
  color: var(--dark-muted);
  transition: color var(--duration-fast) ease;
}

.footer-bottom-links a:hover {
  color: #BCBCC2;
}

/* ============================================================
   SERVICE PAGE
   ============================================================ */

/* Service Hero */
.service-hero {
  padding: 130px 0 64px;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.service-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .service-hero-inner {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}

.service-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-bottom: 20px;
}

.service-hero-breadcrumb a {
  color: var(--ink-muted);
  transition: color var(--duration-fast) ease;
}

.service-hero-breadcrumb a:hover {
  color: var(--accent);
}

.service-hero-breadcrumb span:not(:last-child) {
  opacity: 0.5;
}

.service-hero-content h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
  color: var(--ink);
}

.service-hero-desc {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink-secondary);
  margin-bottom: 28px;
  max-width: 600px;
}

.service-hero-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}

.service-hero-feat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}

.service-hero-feat svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

.service-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Service Hero Wireframe */
.service-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

/* Tablet + mobile: keep the hero visual visible (was desktop-only) and give it
   breathing room. Wide fixed-width mockups are scaled to fit per-visual by JS
   (nevisFitHeroVisuals) so each stays as large/legible as it can while fitting. */
@media (max-width: 1023px) {
  .service-hero-inner { justify-items: stretch; }
  .service-hero-visual {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 28px auto 14px;
  }
}

.service-hero-visual > [class^="wf-"] {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(145deg, #111113 0%, #16161A 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: wfFadeIn 0.8s ease-out both;
}

/* Wireframes with their own container: override gradient bg */
.service-hero-visual > .wf-webapp,
.service-hero-visual > .wf-portal,
.service-hero-visual > .wf-lms {
  background: var(--surface-alt);
  border-radius: 12px;
}

@keyframes wfFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sh-wireframe {
  background: var(--surface-alt);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.sh-wireframe-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.sh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(210,210,216,0.14);
}

.sh-dot:first-child { background: #ff6058; }
.sh-dot:nth-child(2) { background: #ffbd2e; }
.sh-dot:nth-child(3) { background: #27ca40; }

.sh-url-bar {
  flex: 1;
  height: 22px;
  background: var(--surface-2);
  border-radius: 4px;
  margin-left: 12px;
}

.sh-wireframe-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Wireframe nav */
.sh-wf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.sh-wf-logo {
  width: 48px;
  height: 12px;
  background: var(--ink);
  border-radius: 3px;
  opacity: 0.7;
}

.sh-wf-nav-links {
  display: flex;
  gap: 12px;
}

.sh-wf-nav-links span {
  width: 32px;
  height: 8px;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

.sh-wf-nav-btn {
  width: 56px;
  height: 22px;
  background: var(--accent);
  border-radius: 4px;
  opacity: 0.8;
}

/* Wireframe hero section */
.sh-wf-hero {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 0;
}

.sh-wf-hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sh-wf-h1 {
  height: 14px;
  background: var(--ink);
  border-radius: 3px;
  opacity: 0.75;
  width: 90%;
}

.sh-wf-h1-short {
  width: 60%;
}

.sh-wf-p {
  height: 8px;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
  width: 100%;
  margin-top: 4px;
}

.sh-wf-p-short {
  width: 75%;
}

.sh-wf-btn {
  width: 72px;
  height: 24px;
  background: var(--accent);
  border-radius: 5px;
  margin-top: 8px;
  opacity: 0.85;
}

.sh-wf-hero-img {
  width: 100px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-subtle) 0%, #16161A 100%);
  border-radius: 8px;
  flex-shrink: 0;
}

/* Wireframe cards */
.sh-wf-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.sh-wf-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sh-wf-card-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-subtle);
}

.sh-wf-card-line {
  height: 6px;
  width: 80%;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

.sh-wf-card-line.sh-short {
  width: 55%;
}

/* Wireframe bottom section */
.sh-wf-section {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.sh-wf-section-title {
  height: 10px;
  width: 40%;
  background: var(--ink);
  opacity: 0.6;
  border-radius: 3px;
  margin: 0 auto 14px;
}

.sh-wf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sh-wf-grid-item {
  height: 48px;
  background: linear-gradient(135deg, #111113, #16161A);
  border-radius: 6px;
}

/* Floating badges */
.sh-float {
  position: absolute;
  animation: shFloat 4s ease-in-out infinite;
}

.sh-float-1 {
  top: 10%;
  right: -12px;
  animation-delay: 0s;
}

.sh-float-2 {
  bottom: 30%;
  left: -16px;
  animation-delay: 1.5s;
}

.sh-float-3 {
  bottom: 8%;
  right: 8%;
  animation-delay: 3s;
}

@keyframes shFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.sh-float-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  box-shadow: var(--shadow-lg), var(--glow-molten);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.sh-float-badge svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.sh-float-badge-alt svg {
  color: var(--accent);
}

.sh-float-badge-success svg {
  color: #10b981;
}

/* ============================================================
   SUB-SERVICE WIREFRAME VARIANTS
   ============================================================ */

/* --- Corporate: Sitemap / Multi-page concept --- */
.wf-corporate {
  position: relative;
  padding: 32px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wf-corp-pages {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: center;
}

.wf-corp-page {
  background: var(--surface-alt);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.wf-corp-page-main {
  width: 180px;
  transform: translateY(-12px);
}

.wf-corp-page-sm {
  width: 130px;
}

.wf-corp-page-bar {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.wf-corp-page-bar span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}

.wf-corp-page-bar span:first-child { background: #ff6058; }
.wf-corp-page-bar span:nth-child(2) { background: #ffbd2e; }
.wf-corp-page-bar span:nth-child(3) { background: #27ca40; }

.wf-corp-page-content {
  padding: 10px;
}

.wf-corp-nav {
  height: 6px;
  background: var(--surface-2);
  border-radius: 2px;
  margin-bottom: 10px;
}

.wf-corp-hero-block {
  height: 48px;
  background: linear-gradient(135deg, var(--accent-subtle), var(--surface-2));
  border-radius: 4px;
  margin-bottom: 10px;
}

.wf-corp-grid-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.wf-corp-grid-block span {
  height: 28px;
  background: var(--surface-2);
  border-radius: 3px;
}

.wf-corp-text-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wf-corp-text-lines span {
  height: 5px;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

.wf-corp-text-lines span.short {
  width: 60%;
}

.wf-corp-form-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wf-corp-form-block span {
  height: 12px;
  background: var(--surface-2);
  border-radius: 3px;
}

.wf-corp-form-block span.btn {
  background: var(--accent);
  opacity: 0.6;
  height: 14px;
  border-radius: 4px;
}

.wf-corp-label {
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-top: 8px;
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}

.wf-corp-connections {
  text-align: center;
  margin: -4px 0 4px;
  color: var(--ink-muted);
  opacity: 0.4;
}

.wf-corp-connections svg {
  width: 200px;
  height: 30px;
}

.wf-corp-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
}

/* --- Landing: Phone mockup + conversion metrics --- */
.wf-landing {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.wf-landing-phone {
  width: 200px;
  background: #1a1a1a;
  border-radius: 28px;
  padding: 10px;
  box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.wf-landing-phone-notch {
  width: 50px;
  height: 6px;
  background: #333;
  border-radius: 4px;
  margin: 0 auto 8px;
}

.wf-landing-screen {
  background: var(--surface-alt);
  border-radius: 18px;
  padding: 20px 14px;
}

.wf-landing-headline {
  height: 10px;
  width: 85%;
  background: var(--ink);
  border-radius: 2px;
  margin: 0 auto 6px;
  opacity: 0.8;
}

.wf-landing-subtitle {
  height: 6px;
  width: 60%;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
  margin: 0 auto 12px;
}

.wf-landing-cta-btn {
  width: 70%;
  height: 22px;
  background: var(--accent);
  border-radius: 6px;
  margin: 0 auto 10px;
  opacity: 0.9;
}

.wf-landing-trust {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-bottom: 12px;
}

.wf-landing-star {
  width: 8px;
  height: 8px;
  background: #fbbf24;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.wf-landing-divider {
  height: 1px;
  background: var(--line);
  margin-bottom: 12px;
}

.wf-landing-benefits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.wf-landing-benefit {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wf-check {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  position: relative;
}

.wf-check::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 2px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}

.wf-benefit-text {
  height: 5px;
  flex: 1;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

.wf-landing-form-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wf-landing-input {
  height: 16px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.wf-landing-submit {
  height: 18px;
  background: var(--accent);
  border-radius: 4px;
  opacity: 0.7;
}

.wf-landing-metrics {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wf-metric {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 80px;
}

.wf-metric-bar {
  width: 36px;
  height: var(--bar-h, 50%);
  background: linear-gradient(to top, var(--accent), var(--accent-subtle));
  border-radius: 5px 5px 0 0;
  transition: height 0.5s ease;
}

.wf-metric span {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.wf-landing-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(20px, -50%);
  color: var(--accent);
  opacity: 0.3;
}

.wf-landing-arrow svg {
  width: 20px;
  height: 20px;
}

.wf-landing-conversion-label {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #10b981;
  font-family: var(--font-mono);
}

/* --- Portfolio: Mood board / scattered cards --- */
.wf-portfolio {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 32px;
}

.wf-port-board {
  position: relative;
  width: 100%;
  height: calc(100% - 40px);
}

.wf-port-card {
  position: absolute;
  background: var(--surface-alt);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}

.wf-port-card:hover {
  transform: scale(1.05) rotate(0deg) !important;
  box-shadow: var(--glow-molten);
  border-color: rgba(82,86,98,0.4);
  z-index: 10;
}

.wf-port-card-1 {
  width: 155px;
  height: 180px;
  top: 5%;
  left: 5%;
  transform: rotate(-4deg);
}

.wf-port-card-2 {
  width: 140px;
  height: 155px;
  top: 8%;
  right: 5%;
  transform: rotate(3deg);
}

.wf-port-card-3 {
  width: 130px;
  height: 160px;
  bottom: 12%;
  left: 25%;
  transform: rotate(2deg);
}

.wf-port-card-4 {
  width: 110px;
  height: 110px;
  bottom: 15%;
  right: 12%;
  transform: rotate(-6deg);
}

.wf-port-img {
  width: 100%;
  height: 75%;
  background: linear-gradient(135deg, #111113, #16161A);
  background-size: 200% 200%;
  animation: portShimmer 4s ease-in-out infinite;
}

@keyframes portShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.wf-port-meta {
  padding: 8px;
}

.wf-port-meta span {
  display: block;
  height: 5px;
  width: 60%;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

.wf-port-cursor {
  position: absolute;
  top: 45%;
  left: 55%;
  color: var(--ink);
  opacity: 0.4;
  animation: cursorMove 3s ease-in-out infinite;
}

@keyframes cursorMove {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(15px, -10px); }
  66% { transform: translate(-10px, 8px); }
}

.wf-port-filters {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  box-shadow: var(--shadow-lg);
}

.wf-port-filters span {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ink-muted);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
}

.wf-port-filters span.active {
  background: var(--accent);
  color: #070709;
}

/* --- Multilingual: Globe + orbiting nodes --- */
.wf-multilang {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px;
  width: 100%;
  height: 100%;
}

.wf-globe-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
}

.wf-globe-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--border);
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 30% 30%, #16161A, #111113);
}

.wf-globe-line {
  position: absolute;
  background: var(--border);
}

.wf-globe-line-h {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
}

.wf-globe-line-v {
  width: 1px;
  height: 100%;
  left: 50%;
  top: 0;
}

.wf-globe-line-c1 {
  width: 60%;
  height: 100%;
  left: 20%;
  top: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
}

.wf-globe-line-c2 {
  width: 100%;
  height: 60%;
  top: 20%;
  left: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
}

.wf-globe-orbit {
  position: absolute;
  inset: -16px;
  animation: globeOrbit 12s linear infinite;
}

@keyframes globeOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.wf-lang-node {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 800;
  font-family: var(--font-mono);
  box-shadow: var(--shadow-lg);
  animation: globeOrbit 12s linear infinite reverse;
}

.wf-lang-node span {
  display: block;
}

.wf-lang-node-1 {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #070709;
}

.wf-lang-node-2 {
  bottom: 10%;
  left: -8px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  color: var(--ink);
}

.wf-lang-node-3 {
  bottom: 10%;
  right: -8px;
  background: var(--surface-2);
  border: 2px solid var(--border);
  color: var(--ink);
}

.wf-multilang-preview {
  background: var(--surface-alt);
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  width: 100%;
  max-width: 240px;
}

.wf-preview-tab {
  display: inline-block;
  padding: 8px 16px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
}

.wf-preview-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.wf-preview-content {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wf-preview-line {
  height: 6px;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

.wf-preview-line.short {
  width: 65%;
}

/* --- Web Shop wireframe (service page) --- */
.sh-wf-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.sh-wf-product {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sh-wf-product-img {
  height: 40px;
  background: linear-gradient(135deg, var(--accent-subtle), var(--surface-2));
  border-radius: 4px;
}

.sh-wf-product-price {
  width: 35px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.7;
}

.sh-wf-shop-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.sh-wf-cart-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-subtle);
  position: relative;
}

.sh-wf-cart-icon::after {
  content: '3';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
  font-size: 7px;
  color: #070709;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* --- B2C: Product cards with cart --- */
.wf-b2c {
  position: relative;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.wf-b2c-filters {
  display: flex;
  gap: 8px;
}

.wf-b2c-filters span {
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

.wf-b2c-filters span.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #070709;
}

.wf-b2c-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.wf-b2c-product {
  background: var(--surface-alt);
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 10px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}

.wf-b2c-product:hover {
  transform: translateY(-3px);
  border-color: rgba(82,86,98,0.4);
  box-shadow: var(--glow-molten);
}

.wf-b2c-img {
  height: 72px;
  border-radius: 6px;
  background: linear-gradient(135deg, #111113, #16161A);
  background-size: 200% 200%;
  animation: portShimmer 5s ease-in-out infinite;
}

.wf-b2c-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wf-b2c-name {
  height: 6px;
  width: 75%;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

.wf-b2c-price {
  height: 8px;
  width: 40%;
  background: var(--ink);
  border-radius: 2px;
  opacity: 0.7;
}

.wf-b2c-cart-btn {
  width: 100%;
  height: 24px;
  background: var(--accent);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

.wf-b2c-cart-btn svg {
  width: 12px;
  height: 12px;
  color: #070709;
}

.wf-b2c-checkout {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-lg);
}

.wf-b2c-checkout-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-mono);
}

.wf-b2c-checkout-header svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.wf-b2c-checkout-btn {
  width: 80px;
  height: 26px;
  background: var(--accent);
  border-radius: 6px;
  opacity: 0.9;
}

/* --- B2B: Table/spreadsheet style --- */
.wf-b2b {
  position: relative;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.wf-b2b-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wf-b2b-company {
  width: 80px;
  height: 10px;
  background: var(--ink);
  border-radius: 3px;
  opacity: 0.7;
}

.wf-b2b-badge {
  font-size: 0.625rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--void);
  background: var(--ink);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.wf-b2b-table {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.wf-b2b-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.wf-b2b-row:last-child {
  border-bottom: none;
}

.wf-b2b-row-head {
  background: var(--surface-2);
  font-size: 0.5625rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wf-b2b-prod {
  height: 6px;
  width: 80%;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

.wf-b2b-val {
  height: 6px;
  width: 60%;
  background: rgba(210,210,216,0.10);
  border-radius: 2px;
}

.wf-b2b-qty {
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent);
}

.wf-b2b-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: 8px;
}

.wf-b2b-total-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-mono);
}

.wf-b2b-total-val {
  width: 60px;
  height: 10px;
  background: var(--ink);
  border-radius: 3px;
  opacity: 0.8;
}

/* --- Marketplace: Vendor cards --- */
.wf-marketplace {
  position: relative;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.wf-mp-vendors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.wf-mp-vendor {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
}

.wf-mp-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-subtle), var(--surface-2));
}

.wf-mp-vendor-name {
  width: 60%;
  height: 6px;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

.wf-mp-stars {
  display: flex;
  gap: 2px;
}

.wf-mp-stars span {
  width: 8px;
  height: 8px;
  background: #fbbf24;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.wf-mp-stars span.empty {
  background: var(--line-strong);
}

.wf-mp-items {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}

.wf-mp-item {
  flex: 1;
  height: 40px;
  background: var(--surface-2);
  border-radius: 6px;
  border: 1px solid var(--line);
}

.wf-mp-platform-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-mono);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  box-shadow: var(--shadow-lg);
  margin: 0 auto;
}

.wf-mp-platform-badge svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

/* --- Booking: Calendar + time slots --- */
.wf-booking {
  position: relative;
  padding: 32px;
  display: flex;
  gap: 16px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.wf-booking-cal {
  flex: 1.2;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-lg);
}

.wf-booking-cal-header {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-mono);
  margin-bottom: 10px;
}

.wf-booking-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.wf-booking-days span {
  text-align: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  padding: 2px 0;
}

.wf-booking-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.wf-booking-grid span {
  text-align: center;
  font-size: 0.625rem;
  padding: 6px 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
  color: var(--ink);
}

.wf-booking-grid span.off {
  color: var(--ash);
}

.wf-booking-grid span.selected {
  background: var(--accent);
  color: #070709;
  font-weight: 700;
}

.wf-booking-grid span.booked {
  background: #fee2e2;
  color: #ef4444;
  text-decoration: line-through;
}

.wf-booking-slots {
  flex: 0.8;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wf-booking-slot {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: var(--font-mono);
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
}

.wf-booking-slot.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #070709;
}

.wf-booking-slot.taken {
  background: var(--surface-alt);
  border-color: var(--line);
  color: var(--ash);
  text-decoration: line-through;
}

/* --- Platform Hero Wireframe --- */
.sh-wf-platform-layout {
  display: flex;
  gap: 0;
  flex: 1;
}

.sh-wf-platform-sidebar {
  width: 48px;
  background: var(--surface-alt);
  border-right: 1px solid var(--border);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sh-wf-sidebar-item {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--surface-2);
}

.sh-wf-sidebar-item.active {
  background: var(--accent);
}

.sh-wf-platform-main {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sh-wf-platform-widgets {
  display: flex;
  gap: 8px;
}

.sh-wf-widget {
  flex: 1;
  height: 36px;
  border-radius: 6px;
  background: linear-gradient(135deg, #111113, #16161A);
  border: 1px solid var(--line);
}

.sh-wf-platform-chart {
  flex: 1;
  border-radius: 6px;
  background: linear-gradient(180deg, transparent 0%, #16161A 100%);
  border: 1px solid var(--line);
  position: relative;
  min-height: 50px;
}

.sh-wf-platform-chart::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  height: 60%;
  background: linear-gradient(135deg, var(--accent) 0%, transparent 60%);
  opacity: 0.15;
  border-radius: 4px;
}

/* --- Custom Hero: Code editor wireframe --- */
.sh-wf-custom-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sh-wf-code-editor {
  flex: 1;
  background: #1e293b;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.sh-wf-code-editor::after {
  content: '';
  position: absolute;
  bottom: 12px;
  right: 16px;
  width: 2px;
  height: 12px;
  background: #60a5fa;
  animation: cursorBlink 1s step-end infinite;
}

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

.sh-wf-code-line {
  display: flex;
  gap: 6px;
  height: 10px;
  align-items: center;
}

.sh-wf-code-line.indent {
  padding-left: 16px;
}

.sh-wf-code-kw {
  width: 32px;
  height: 7px;
  background: #c084fc;
  border-radius: 2px;
}

.sh-wf-code-fn {
  width: 48px;
  height: 7px;
  background: #60a5fa;
  border-radius: 2px;
}

.sh-wf-code-var {
  width: 28px;
  height: 7px;
  background: #34d399;
  border-radius: 2px;
}

.sh-wf-code-str {
  width: 56px;
  height: 7px;
  background: #fbbf24;
  border-radius: 2px;
}

.sh-wf-code-num {
  width: 20px;
  height: 7px;
  background: #f87171;
  border-radius: 2px;
}

.sh-wf-terminal {
  background: #0f172a;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid #334155;
}

.sh-wf-terminal-line {
  font-size: 0.55rem;
  font-family: 'Space Mono', monospace;
  color: #94a3b8;
}

.sh-wf-terminal-line.success {
  color: #34d399;
}

/* --- SEO Hero: SERP wireframe --- */
.sh-wf-serp {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px 12px;
  gap: 8px;
}

.sh-wf-serp-bar {
  width: 70%;
  height: 24px;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--line);
  margin-bottom: 4px;
  position: relative;
}

.sh-wf-serp-bar::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border: 1.5px solid #94a3b8;
  border-radius: 50%;
}

.sh-wf-serp-bar::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 58%;
  width: 4px;
  height: 1.5px;
  background: #94a3b8;
  transform: rotate(45deg);
}

.sh-wf-serp-result {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.sh-wf-serp-result.sh-wf-serp-featured {
  border-color: var(--accent);
  box-shadow: var(--glow-molten);
  background: var(--accent-subtle);
  animation: serpHighlight 3s ease-in-out infinite;
}

@keyframes serpHighlight {
  0%, 100% { box-shadow: 0 0 0 1px rgba(82,86,98,.18), 0 6px 24px rgba(82,86,98,.12); }
  50% { box-shadow: 0 0 0 1px rgba(82,86,98,.30), 0 10px 40px rgba(82,86,98,.22); }
}

.sh-wf-serp-title {
  width: 65%;
  height: 8px;
  background: var(--accent-2);
  border-radius: 2px;
}

.sh-wf-serp-featured .sh-wf-serp-title {
  background: var(--accent);
}

.sh-wf-serp-url {
  width: 45%;
  height: 6px;
  background: #10b981;
  border-radius: 2px;
}

.sh-wf-serp-desc {
  width: 90%;
  height: 6px;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

.sh-wf-serp-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  background: var(--accent);
  color: #070709;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
}

/* --- Web App: SPA wireframe --- */
.wf-webapp {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}

.wf-webapp-topbar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.wf-webapp-logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--accent);
}

.wf-webapp-search {
  flex: 1;
  height: 24px;
  border-radius: 6px;
  background: var(--surface-3);
  border: 1px solid var(--border);
}

.wf-webapp-user {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-3);
}

.wf-webapp-body {
  display: flex;
  flex: 1;
}

.wf-webapp-sidebar {
  width: 48px;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.wf-webapp-nav-item {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--surface-3);
}

.wf-webapp-nav-item.active {
  background: var(--accent);
}

.wf-webapp-content {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wf-webapp-toolbar {
  display: flex;
  gap: 4px;
}

.wf-webapp-tab {
  padding: 4px 12px;
  border-radius: 4px;
  height: 20px;
  background: var(--surface-2);
}

.wf-webapp-tab.active {
  background: var(--accent);
}

.wf-webapp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  flex: 1;
}

.wf-webapp-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* --- API: Connected nodes wireframe --- */
.wf-api {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.wf-api-nodes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.wf-api-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.wf-api-node-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}

.wf-api-node-icon svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.wf-api-node span {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-muted);
}

.wf-api-connector {
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--border), var(--accent), var(--border));
  margin: 0 4px;
  position: relative;
  margin-bottom: 16px;
  overflow: hidden;
}

.wf-api-connector::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.6), transparent);
  animation: dataFlow 1.8s linear infinite;
}

@keyframes dataFlow_DARK_KEEP {
  from { left: -60%; }
  to { left: 100%; }
}

.wf-api-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.wf-api-hub-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.wf-api-hub-icon svg {
  width: 20px;
  height: 20px;
  color: #070709;
}

.wf-api-hub span {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--accent);
}

.wf-api-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  align-self: center;
}

.wf-api-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.wf-api-status span {
  font-size: 0.6rem;
  font-weight: 500;
  color: #10b981;
}

/* --- CRM: Pipeline kanban wireframe --- */
.wf-crm {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  align-items: stretch;
}

.wf-crm-pipeline {
  display: flex;
  gap: 8px;
  width: 100%;
  height: 100%;
}

.wf-crm-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px;
}

.wf-crm-col-header {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
  text-align: center;
}

.wf-crm-col-header.won {
  border-bottom-color: #10b981;
  color: #10b981;
}

.wf-crm-deal {
  height: 28px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
}

.wf-crm-deal.active {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
  animation: dealPulse 2.5s ease-in-out infinite;
}

@keyframes dealPulse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.wf-crm-deal.won {
  border-color: rgba(16,185,129,0.4);
  background: rgba(16,185,129,0.12);
}

/* --- Automation: Workflow wireframe --- */
.wf-automation {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.wf-auto-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.wf-auto-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}

.wf-auto-step svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.wf-auto-step span {
  font-size: 0.55rem;
  font-weight: 500;
  color: var(--text-muted);
}

.wf-auto-step.trigger {
  background: var(--accent);
  border-color: var(--accent);
}

.wf-auto-step.trigger svg,
.wf-auto-step.trigger span {
  color: #070709;
}

.wf-auto-step.condition {
  border-radius: 50%;
  width: 52px;
  height: 52px;
  justify-content: center;
  padding: 0;
  border-color: var(--accent-2);
  background: var(--surface-2);
}

.wf-auto-step.condition span:first-child {
  font-size: 1rem;
  font-weight: 700;
  color: #f59e0b;
}

.wf-auto-step.condition span:last-child {
  font-size: 0.5rem;
  color: #f59e0b;
}

.wf-auto-step.small {
  padding: 8px 10px;
}

.wf-auto-step.small svg {
  width: 12px;
  height: 12px;
}

.wf-auto-arrow {
  width: 24px;
  height: 2px;
  background: var(--border);
  position: relative;
  background: linear-gradient(90deg, var(--border) 0%, var(--accent) 50%, var(--border) 100%);
  background-size: 200% 100%;
  animation: flowArrow 2s linear infinite;
}

@keyframes flowArrow {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.wf-auto-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  border: 4px solid transparent;
  border-left-color: var(--border);
}

.wf-auto-branches {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.wf-auto-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.wf-auto-branch-label {
  font-size: 0.55rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.wf-auto-branch.yes .wf-auto-branch-label {
  background: rgba(16,185,129,0.12);
  color: #10b981;
}

.wf-auto-branch.no .wf-auto-branch-label {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}

/* --- Portal: Dashboard wireframe --- */
.wf-portal {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}

.wf-portal-sidebar {
  width: 60px;
  background: var(--void-2);
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.wf-portal-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  margin-bottom: 8px;
}

.wf-portal-nav-item {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
}

.wf-portal-nav-item.active {
  background: var(--accent);
}

.wf-portal-main {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wf-portal-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wf-portal-welcome {
  width: 120px;
  height: 14px;
  background: rgba(210,210,216,0.14);
  border-radius: 4px;
}

.wf-portal-notif {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.wf-portal-notif::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  border: 1.5px solid var(--surface-alt);
}

.wf-portal-notif svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.wf-portal-widgets {
  display: flex;
  gap: 8px;
}

.wf-portal-widget {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wf-portal-widget-num {
  width: 40px;
  height: 16px;
  background: rgba(210,210,216,0.14);
  border-radius: 3px;
}

.wf-portal-widget-label {
  width: 55px;
  height: 8px;
  background: rgba(210,210,216,0.14);
  border-radius: 3px;
}

.wf-portal-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wf-portal-table-row {
  height: 24px;
  background: var(--surface-2);
  border-radius: 4px;
  border: 1px solid var(--border);
}

.wf-portal-table-row.head {
  background: var(--surface-3);
  border-color: var(--line-strong);
}

/* --- SaaS: Pricing plans wireframe --- */
.wf-saas {
  position: relative;
  padding: 24px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.wf-saas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wf-saas-logo {
  width: 60px;
  height: 16px;
  background: rgba(210,210,216,0.14);
  border-radius: 4px;
}

.wf-saas-toggle {
  display: flex;
  background: var(--surface-2);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}

.wf-saas-toggle span {
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.6rem;
  color: var(--text-muted);
  font-weight: 500;
}

.wf-saas-toggle span.active {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.wf-saas-plans {
  display: flex;
  gap: 10px;
  flex: 1;
  align-items: stretch;
}

.wf-saas-plan {
  flex: 1;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.wf-saas-plan.featured {
  border-color: rgba(82,86,98,0.4);
  box-shadow: var(--glow-molten);
  transform: scale(1.03);
}

.wf-saas-plan-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #070709;
  font-size: 0.55rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.wf-saas-plan-name {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

.wf-saas-plan-price {
  width: 50px;
  height: 18px;
  background: rgba(210,210,216,0.14);
  border-radius: 4px;
  margin: 0 auto;
}

.wf-saas-plan.featured .wf-saas-plan-price {
  background: var(--grad-molten);
}

.wf-saas-plan-features {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.wf-saas-feat {
  height: 6px;
  background: rgba(210,210,216,0.14);
  border-radius: 3px;
}

.wf-saas-plan-btn {
  height: 22px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.wf-saas-plan-btn.active {
  background: var(--accent);
  border-color: var(--accent);
}

/* --- Membership: Tier access wireframe --- */
.wf-membership {
  position: relative;
  padding: 24px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.wf-membership-tiers {
  display: flex;
  gap: 10px;
  flex: 1;
}

.wf-membership-tier {
  flex: 1;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.wf-membership-tier.pro {
  border-color: var(--accent);
}

.wf-membership-tier.vip {
  border-color: var(--accent-2);
}

.wf-membership-tier-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.6rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-muted);
}

.wf-membership-tier.pro .wf-membership-tier-badge {
  background: var(--accent-subtle);
  color: var(--accent);
}

.wf-membership-tier.vip .wf-membership-tier-badge {
  background: rgba(96,100,112,0.12);
  color: var(--accent-2);
}

.wf-membership-content-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  flex: 1;
}

.wf-membership-content-item {
  height: 20px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  position: relative;
}

.wf-membership-content-item.unlocked {
  background: rgba(16,185,129,0.12);
  border-color: rgba(16,185,129,0.4);
}

.wf-membership-content-item.locked {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.3);
  opacity: 0.6;
}

.wf-membership-content-item.locked::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fca5a5;
}

.wf-membership-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: var(--accent);
  border-radius: 8px;
  color: #070709;
  font-size: 0.65rem;
  font-weight: 600;
}

.wf-membership-cta svg {
  width: 14px;
  height: 14px;
}

/* --- LMS: Course player wireframe --- */
.wf-lms {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}

.wf-lms-player {
  flex: 1.5;
  display: flex;
  flex-direction: column;
}

.wf-lms-video {
  flex: 1;
  background: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
}

.wf-lms-video svg {
  width: 36px;
  height: 36px;
  color: var(--bone);
  opacity: 0.8;
}

.wf-lms-progress-bar {
  height: 4px;
  background: var(--surface-3);
}

.wf-lms-progress-fill {
  height: 100%;
  width: 45%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  animation: progressFill 2s ease-out both;
}

@keyframes progressFill {
  from { width: 0; }
  to { width: 45%; }
}

.wf-lms-sidebar {
  width: 140px;
  background: var(--surface-2);
  border-left: 1px solid var(--border);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.wf-lms-module {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wf-lms-module-title {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.wf-lms-lesson {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.55rem;
  color: var(--text-muted);
}

.wf-lms-lesson span {
  display: block;
  width: 60px;
  height: 6px;
  background: rgba(210,210,216,0.14);
  border-radius: 3px;
}

.wf-lms-lesson svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.wf-lms-lesson.completed {
  color: #10b981;
}

.wf-lms-lesson.completed span {
  background: rgba(16,185,129,0.35);
}

.wf-lms-lesson.active {
  background: var(--accent-subtle);
  color: var(--accent);
}

.wf-lms-lesson.active span {
  background: rgba(82,86,98,0.35);
}

/* --- On-Page SEO wireframe --- */
.wf-onpage {
  display: flex;
  gap: 12px;
  padding: 16px;
}

.wf-onpage-doc {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-alt);
  border-radius: 10px;
  padding: 14px;
  overflow: hidden;
}

.wf-onpage-tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-onpage-tag-title {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border-left: 3px solid #fbbf24;
}

.wf-onpage-tag-meta {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
  border-left: 3px solid #60a5fa;
}

.wf-onpage-tag-h1 {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border-left: 3px solid #34d399;
}

.wf-onpage-tag-h2 {
  background: rgba(192, 132, 252, 0.15);
  color: #c084fc;
  border-left: 3px solid #c084fc;
}

.wf-onpage-tag-img {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border-left: 3px solid #f87171;
}

.wf-onpage-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 12px;
}

.wf-onpage-line {
  height: 5px;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
  width: 100%;
}

.wf-onpage-line.short {
  width: 60%;
}

.wf-onpage-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 80px;
}

.wf-onpage-score-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(#10b981 0% 95%, var(--surface-3) 95% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: scoreGlow 3s ease-in-out infinite;
}

@keyframes scoreGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
  50% { box-shadow: 0 0 16px 4px rgba(16, 185, 129, 0.2); }
}

.wf-onpage-score-circle::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--surface-alt);
}

.wf-onpage-score-circle span {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  font-weight: 800;
  color: #10b981;
  font-family: 'Sora', sans-serif;
}

.wf-onpage-score-label {
  font-size: 0.55rem;
  color: #64748b;
  font-weight: 600;
  text-align: center;
}

/* --- Google My Business wireframe --- */
.wf-gmb {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.wf-gmb-map {
  flex: 0 0 35%;
  background: var(--surface-2);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-gmb-map-pin {
  color: #ef4444;
  position: relative;
  z-index: 2;
  animation: pinBounce 2s ease-in-out infinite;
}

@keyframes pinBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.wf-gmb-map-pin svg {
  width: 28px;
  height: 28px;
}

.wf-gmb-map-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  opacity: 0.3;
}

.wf-gmb-map-grid span {
  background: var(--line-strong);
}

.wf-gmb-card {
  flex: 1;
  background: var(--surface-alt);
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-lg);
}

.wf-gmb-card-header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.wf-gmb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4285f4, #34a853);
  flex-shrink: 0;
}

.wf-gmb-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.wf-gmb-name {
  height: 8px;
  width: 70%;
  background: var(--bone-soft);
  border-radius: 2px;
}

.wf-gmb-stars {
  display: flex;
  gap: 1px;
  align-items: center;
  font-size: 0.6rem;
}

.wf-gmb-stars span {
  color: #fbbf24;
}

.wf-gmb-stars em {
  color: #64748b;
  font-style: normal;
  font-size: 0.5rem;
  margin-left: 4px;
}

.wf-gmb-category {
  height: 5px;
  width: 45%;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

.wf-gmb-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}

.wf-gmb-detail-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
}

.wf-gmb-detail-row svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.wf-gmb-detail-row span {
  height: 5px;
  width: 60%;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

.wf-gmb-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
}

.wf-gmb-btn {
  flex: 1;
  text-align: center;
  padding: 5px 0;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 0.5rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(82,86,98,0.25);
}

/* --- Content Marketing wireframe --- */
.wf-content {
  display: flex;
  gap: 12px;
  padding: 16px;
}

.wf-content-article {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-alt);
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 12px;
  box-shadow: var(--shadow-lg);
}

.wf-content-article-img {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #111113, #16161A);
  border-radius: 6px;
}

.wf-content-article-title {
  height: 10px;
  width: 80%;
  background: var(--bone-soft);
  border-radius: 3px;
}

.wf-content-article-meta {
  display: flex;
  gap: 6px;
}

.wf-content-article-meta span {
  height: 5px;
  width: 40px;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

.wf-content-article-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.wf-content-article-lines div {
  height: 5px;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
  width: 100%;
}

.wf-content-article-lines div.short {
  width: 55%;
}

.wf-content-stats {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  width: 80px;
}

.wf-content-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.wf-content-stat-bar {
  width: 100%;
  height: var(--bar-h, 50%);
  max-height: 60px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 4px 4px 0 0;
  min-height: 16px;
  animation: barGrow 1.2s ease-out both;
  transform-origin: bottom;
}

@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.wf-content-stat:nth-child(2) .wf-content-stat-bar { animation-delay: 0.15s; }
.wf-content-stat:nth-child(3) .wf-content-stat-bar { animation-delay: 0.3s; }
.wf-content-stat:nth-child(4) .wf-content-stat-bar { animation-delay: 0.45s; }

.wf-content-stat span {
  font-size: 0.45rem;
  color: #64748b;
  font-weight: 600;
}

/* --- Lokalni SEO wireframe --- */
.wf-local {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.wf-local-search {
  flex-shrink: 0;
}

.wf-local-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}

.wf-local-searchbar svg {
  width: 14px;
  height: 14px;
  color: #64748b;
  flex-shrink: 0;
}

.wf-local-searchbar span {
  font-size: 0.55rem;
  color: var(--bone-soft);
  font-family: 'Space Mono', monospace;
}

.wf-local-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.wf-local-map-pack {
  flex: 0 0 28%;
  border-radius: 8px;
  overflow: hidden;
}

.wf-local-map-mini {
  width: 100%;
  height: 100%;
  background: var(--surface-2);
  position: relative;
}

.wf-local-pin {
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  position: absolute;
  animation: localPinPulse 2.5s ease-in-out infinite;
}

.wf-local-pin-2 { animation-delay: 0.5s; }
.wf-local-pin-3 { animation-delay: 1s; }

@keyframes localPinPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.wf-local-pin-1 {
  top: 25%;
  left: 35%;
}

.wf-local-pin-2 {
  top: 45%;
  left: 60%;
}

.wf-local-pin-3 {
  top: 60%;
  left: 30%;
}

.wf-local-listing {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.wf-local-listing.wf-local-listing-top {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.wf-local-listing-rank {
  font-size: 0.6rem;
  font-weight: 800;
  color: #64748b;
  font-family: 'Space Mono', monospace;
  flex-shrink: 0;
  width: 20px;
}

.wf-local-listing-top .wf-local-listing-rank {
  color: var(--accent);
}

.wf-local-listing-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.wf-local-listing-name {
  height: 7px;
  width: 70%;
  background: var(--bone-soft);
  border-radius: 2px;
}

.wf-local-listing-stars {
  font-size: 0.5rem;
  color: #fbbf24;
  letter-spacing: 1px;
}

.wf-local-listing-addr {
  height: 5px;
  width: 50%;
  background: rgba(210,210,216,0.14);
  border-radius: 2px;
}

/* Stats Strip (below hero) */
.service-stats-strip {
  padding: 32px 0;
  background: var(--void-2);
  border-bottom: 1px solid var(--border);
}

.service-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .service-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.service-stat-item {
  text-align: center;
  padding: 12px 8px;
}

.service-stat-num {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}

.service-stat-label {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-weight: 500;
}

/* Service Why Grid */
.service-why-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 768px) {
  .service-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.service-why-card {
  padding: 28px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) ease;
}

.service-why-card:hover {
  border-color: rgba(82,86,98,0.4);
  box-shadow: var(--glow-molten);
}

.service-why-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.service-why-card p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-secondary);
}

/* Sub-service detail grid (features + ideal for) */
.sub-service-detail-grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 768px) {
  .sub-service-detail-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
  }
}

.sub-service-detail-features h2,
.sub-service-detail-ideal h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 20px;
}

.feature-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--ink-secondary);
  padding: 12px 16px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.feature-checklist li svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

.ideal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ideal-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.ideal-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ideal-list li svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Sub-services Grid */
.sub-services-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .sub-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sub-service-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all var(--duration-normal) var(--ease-out);
}

.sub-service-card:hover {
  border-color: rgba(82,86,98,0.4);
  box-shadow: var(--glow-molten);
  transform: translateY(-2px);
}

.sub-service-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sub-service-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-service-icon svg {
  width: 24px;
  height: 24px;
}


.sub-service-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

.sub-service-card:hover h3 {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sub-service-card > p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-secondary);
}

.sub-service-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.sub-service-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--ink-secondary);
}

.sub-service-features li svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}

.sub-service-ideal {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  padding-top: 12px;
  border-top: 1px solid var(--border);
  line-height: 1.6;
}

.sub-service-ideal strong {
  color: var(--ink-secondary);
}

.sub-service-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 4px;
  transition: gap var(--duration-fast) ease;
}

.sub-service-cta:hover {
  gap: 12px;
}

.sub-service-cta svg {
  width: 16px;
  height: 16px;
}

/* Includes Grid */
.includes-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .includes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .includes-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.includes-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.includes-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.includes-card h3 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.includes-card p {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.5;
}


/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad-molten);
  color: #070709;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
}

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

.back-to-top:hover {
  background: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-accent);
}

@media (max-width: 767px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity 0.7s var(--ease-emphasis),
              transform 0.7s var(--ease-emphasis),
              filter 0.7s var(--ease-emphasis);
  will-change: transform, opacity, filter;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.stagger-children > * {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  filter: blur(6px);
  transition: opacity 0.6s var(--ease-emphasis),
              transform 0.6s var(--ease-emphasis),
              filter 0.6s var(--ease-emphasis);
  will-change: transform, opacity, filter;
}

.stagger-children > .stagger-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* glass utility — no-op for shared class name */
.glass {}

/* ============================================================
   ACCESSIBILITY & FOCUS
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.btn-primary:active,
.btn-secondary:active {
  transform: scale(0.97);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .logo-strip-track {
    animation-play-state: paused;
  }

  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .stagger-children > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .hero h1 .letter {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .wireframe-float,
  .hero-float {
    animation: none;
  }

  .hero-marquee-track {
    animation-play-state: paused;
  }

}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .section {
    padding: var(--space-4xl) 0;
  }

  .hero {
    min-height: auto;
    padding-top: 140px;
    padding-bottom: var(--space-3xl);
  }

  .hero-visual {
    display: none;
  }
}

@media (max-width: 767px) {
  .section {
    padding: var(--space-3xl) 0;
  }

  .stats-banner {
    padding: var(--space-xl) 0;
  }

  .stats-banner-number {
    font-size: 1.75rem;
  }

  .service-item-link {
    padding: var(--space-md) 0;
    gap: var(--space-sm);
  }

  .service-item-content h3 {
    font-size: 1.0625rem;
  }

  .service-item-content p {
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .faq-question {
    padding: var(--space-lg);
    font-size: 0.9375rem;
  }

  .faq-answer p {
    padding: 0 var(--space-lg) var(--space-lg);
  }

  .cta-banner {
    padding: var(--space-3xl) 0;
  }

  .contact-form form {
    padding: var(--space-xl);
  }

  .footer-cta-strip {
    padding: var(--space-xl) 0;
  }

  .footer-cta-label {
    font-size: 1.125rem;
  }

  .footer-main {
    padding: var(--space-3xl) 0 var(--space-2xl);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-brand {
    grid-column: auto;
    margin-bottom: var(--space-md);
  }
}


/* ===== section-fx: svc (#usluge) ===== */
/* ===== SERVICES SECTION FX (scoped to #usluge) ===== */
#usluge { position: relative; overflow: hidden; }

/* keep header on the left so the mockup has clear empty space on the right */
#usluge .section-header {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin-left: 0;
  margin-right: auto;
}

/* fx layer */
#usluge .svc-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#usluge .svc-fx * { pointer-events: none; }

/* mono coordinate / index labels */
#usluge .svc-fx-coord {
  position: absolute;
  top: var(--space-lg, 24px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ash);
  text-transform: uppercase;
}
#usluge .svc-fx-coord-tl { left: 0; }
#usluge .svc-fx-coord-tr { right: 0; color: var(--accent-2); opacity: .85; }

/* faint giant outline numeral */
#usluge .svc-fx-numeral {
  position: absolute;
  right: 2%;
  bottom: -3%;
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 26vw;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  opacity: .5;
  user-select: none;
}

/* corner brackets */
#usluge .svc-fx-bracket {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-strong);
}
#usluge .svc-fx-bracket-tr {
  top: 52px; right: 0;
  border-left: none; border-bottom: none;
}
#usluge .svc-fx-bracket-bl {
  bottom: var(--space-lg, 24px); left: 0;
  border-right: none; border-top: none;
}

/* vertical connector rail with glowing nodes alongside the list */
#usluge .svc-fx-rail {
  position: absolute;
  left: 0;
  top: 46%;
  bottom: 6%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    var(--line-strong) 12%,
    var(--line-strong) 88%,
    transparent);
}
#usluge .svc-fx-node {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle), 0 0 10px var(--glow-molten, rgba(82,86,98,.6));
  animation: svcNodePulse 3.2s ease-in-out infinite;
}
#usluge .svc-fx-node.n1 { top: 0%;   animation-delay: 0s; }
#usluge .svc-fx-node.n2 { top: 25%;  animation-delay: .5s; }
#usluge .svc-fx-node.n3 { top: 50%;  animation-delay: 1s; }
#usluge .svc-fx-node.n4 { top: 75%;  animation-delay: 1.5s; }
#usluge .svc-fx-node.n5 { top: 100%; animation-delay: 2s; }
@keyframes svcNodePulse {
  0%, 100% { transform: scale(.8); opacity: .55; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* ===== floating analytics mockup (header-right empty space) ===== */
#usluge .svc-fx-mock {
  position: absolute;
  top: 40px;
  right: 1%;
  width: 320px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-alt));
  box-shadow: var(--shadow-xl, 0 24px 60px rgba(0,0,0,.5));
  overflow: hidden;
  animation: svcFloat 7s ease-in-out infinite;
}
@keyframes svcFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
#usluge .svc-fx-mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-3);
}
#usluge .svc-fx-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}
#usluge .svc-fx-dot:first-child { background: var(--ember); opacity: .7; }
#usluge .svc-fx-mock-label {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--ash);
}
#usluge .svc-fx-mock-body { padding: 18px 16px 20px; }
#usluge .svc-fx-mock-stat {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
#usluge .svc-fx-mock-kpi {
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  background: var(--grad-text, linear-gradient(90deg, var(--accent), var(--accent-2)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}
#usluge .svc-fx-mock-cap {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ash);
}

/* bar chart */
#usluge .svc-fx-mock-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 96px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
#usluge .svc-fx-col {
  flex: 1;
  border-radius: var(--radius-sm, 4px) var(--radius-sm, 4px) 0 0;
  background: linear-gradient(180deg, var(--accent), var(--ember));
  opacity: .85;
  transform-origin: bottom;
  animation: svcGrow 4s ease-in-out infinite;
}
#usluge .svc-fx-col.c1 { height: 32%; animation-delay: 0s; }
#usluge .svc-fx-col.c2 { height: 48%; animation-delay: .25s; }
#usluge .svc-fx-col.c3 { height: 40%; animation-delay: .5s; }
#usluge .svc-fx-col.c4 { height: 64%; animation-delay: .75s; }
#usluge .svc-fx-col.c5 { height: 56%; animation-delay: 1s; }
#usluge .svc-fx-col.c6 { height: 82%; animation-delay: 1.25s; }
#usluge .svc-fx-col.c7 { height: 96%; animation-delay: 1.5s; }
@keyframes svcGrow {
  0%, 100% { transform: scaleY(.82); opacity: .6; }
  50%      { transform: scaleY(1); opacity: .95; }
}
#usluge .svc-fx-trend {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  transform: rotate(-9deg);
  opacity: .7;
}
/* sweeping scan accent */
#usluge .svc-fx-scan {
  position: absolute;
  top: 6px; bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, var(--accent-subtle), transparent);
  animation: svcScan 5s ease-in-out infinite;
}
@keyframes svcScan {
  0%   { left: -40px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ===== responsive: clean mobile ===== */
@media (max-width: 1100px) {
  #usluge .svc-fx-mock { width: 260px; top: 30px; }
}
@media (max-width: 900px) {
  #usluge .svc-fx-mock,
  #usluge .svc-fx-rail,
  #usluge .svc-fx-numeral,
  #usluge .svc-fx-bracket,
  #usluge .svc-fx-coord-tr { display: none; }
  #usluge .section-header { max-width: 100%; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  #usluge .svc-fx-mock,
  #usluge .svc-fx-node,
  #usluge .svc-fx-col,
  #usluge .svc-fx-scan {
    animation: none;
  }
}


/* ===== section-fx: why (#zasto-nevis) ===== */
/* ============================================================
   WHY-US (#zasto-nevis) — bento layout + high-tech FX
   All selectors scoped under #zasto-nevis
   ============================================================ */
#zasto-nevis {
  position: relative;
  overflow: hidden;
}

/* Keep real content above the decorative FX layer */
#zasto-nevis > .container {
  position: relative;
  z-index: 1;
}

/* ---------- FX decoration layer ---------- */
#zasto-nevis .why-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--font-mono);
}

#zasto-nevis .why-fx-index,
#zasto-nevis .why-fx-coord {
  position: absolute;
  top: var(--space-xl);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#zasto-nevis .why-fx-index {
  left: var(--space-xl);
  color: var(--accent);
  opacity: 0.7;
}

#zasto-nevis .why-fx-coord {
  right: var(--space-xl);
  color: var(--ash);
  opacity: 0.55;
}

/* Faint large outline numeral, bottom-right */
#zasto-nevis .why-fx-numeral {
  position: absolute;
  right: 2%;
  bottom: -2.5rem;
  font-size: 16rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  opacity: 0.45;
  user-select: none;
}

/* Corner brackets */
#zasto-nevis .why-fx-bracket {
  position: absolute;
  width: 26px;
  height: 26px;
  opacity: 0.55;
}
#zasto-nevis .why-fx-bracket-tl {
  top: calc(var(--space-xl) + 2.6rem);
  left: var(--space-xl);
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
}
#zasto-nevis .why-fx-bracket-br {
  right: var(--space-xl);
  bottom: var(--space-xl);
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}

/* Pulsing glow node on a thin connector */
#zasto-nevis .why-fx-node {
  position: absolute;
  top: calc(var(--space-xl) + 0.2rem);
  right: 9.5rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 2px var(--accent);
}
#zasto-nevis .why-fx-node::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  width: 4.5rem;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to left, var(--line-strong), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  #zasto-nevis .why-fx-node {
    animation: whyFxPulse 3.4s var(--ease-out, ease-in-out) infinite;
  }
}
@keyframes whyFxPulse {
  0%, 100% { opacity: 0.9; box-shadow: 0 0 8px 1px var(--accent); }
  50%      { opacity: 0.45; box-shadow: 0 0 14px 4px var(--accent); }
}

/* ---------- BENTO layout (desktop only) ---------- */
@media (min-width: 1024px) {
  #zasto-nevis .why-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
  }

  /* Promote first card to a tall 2x2 hero block -> clean 3x3 tiling */
  #zasto-nevis .why-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-3xl);
  }

  /* Mono index badge on the hero card */
  #zasto-nevis .why-card:first-child::before {
    content: "01";
    position: absolute;
    top: var(--space-xl);
    right: var(--space-xl);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--accent);
    opacity: 0.65;
  }

  #zasto-nevis .why-card:first-child .why-card-icon {
    width: 56px;
    height: 56px;
  }
  #zasto-nevis .why-card:first-child .why-card-icon svg {
    width: 26px;
    height: 26px;
  }
  #zasto-nevis .why-card:first-child h3 {
    font-size: 1.6rem;
    max-width: 22ch;
  }
  #zasto-nevis .why-card:first-child p {
    font-size: 1.0625rem;
    max-width: 46ch;
  }
}

/* ---------- Mobile: keep clean, drop heavy decorations ---------- */
@media (max-width: 900px) {
  #zasto-nevis .why-fx-numeral,
  #zasto-nevis .why-fx-node,
  #zasto-nevis .why-fx-bracket {
    display: none;
  }
  #zasto-nevis .why-fx-index,
  #zasto-nevis .why-fx-coord {
    top: var(--space-md);
    font-size: 0.625rem;
  }
}


/* ===== section-fx: prc (#proces) ===== */
/* ===== PROCESS SECTION FX (scoped) ===== */
#proces { position: relative; overflow: hidden; }

/* allow the header to sit beside the terminal mockup on wide screens */
#proces .section-header { position: relative; z-index: 1; }

#proces .prc-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* mono coordinate labels */
#proces .prc-fx-coord {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: .55;
  white-space: nowrap;
}
#proces .prc-fx-coord-tl { top: 18px; left: 0; }
#proces .prc-fx-coord-tl::before {
  content: ""; display: inline-block;
  width: 22px; height: 1px; vertical-align: middle;
  margin-right: 8px; background: var(--accent); opacity: .7;
}
#proces .prc-fx-coord-br {
  bottom: 18px; right: 0;
  color: var(--accent-2); opacity: .6;
}

/* faint large outline numeral */
#proces .prc-fx-numeral {
  position: absolute;
  top: 4%;
  right: 3%;
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: clamp(140px, 18vw, 260px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  opacity: .35;
}

/* corner brackets */
#proces .prc-fx-bracket {
  position: absolute;
  width: 30px; height: 30px;
  opacity: .6;
}
#proces .prc-fx-bracket-tr {
  top: 14px; right: 14px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}
#proces .prc-fx-bracket-bl {
  bottom: 14px; left: 14px;
  border-bottom: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
}

/* ===== section-fx: ind (#branse) ===== */
#branse{position:relative;overflow:hidden;}
#branse .container{position:relative;z-index:1;}
#branse .ind-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
#branse .ind-fx>*{position:absolute;}

/* mono index label */
#branse .ind-fx-index{top:var(--space-2xl);right:var(--space-2xl);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;color:var(--accent);opacity:.8;text-transform:uppercase;}

/* faint outline numeral */
#branse .ind-fx-numeral{bottom:-2.2rem;left:var(--space-xl);font-family:var(--font-mono);font-size:clamp(8rem,14vw,15rem);font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--line-strong);opacity:.5;letter-spacing:-.02em;}

/* corner brackets */
#branse .ind-fx-bracket{width:26px;height:26px;}
#branse .ind-fx-bracket--tr{top:var(--space-xl);right:var(--space-xl);border-top:1px solid var(--line-strong);border-right:1px solid var(--line-strong);}
#branse .ind-fx-bracket--bl{bottom:var(--space-xl);left:var(--space-xl);border-bottom:1px solid var(--line-strong);border-left:1px solid var(--line-strong);}

/* connector line + glowing node, descends from header eyebrow area */
#branse .ind-fx-connector{top:var(--space-3xl);left:42%;width:1px;height:120px;background:linear-gradient(180deg,var(--line-strong),transparent);}
#branse .ind-fx-node{position:absolute;top:-4px;left:-3.5px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px 2px var(--glow-molten);animation:ind-pulse 3.4s ease-in-out infinite;}
@keyframes ind-pulse{0%,100%{opacity:.5;transform:scale(.85);}50%{opacity:1;transform:scale(1.15);}}

/* animated mockup in header-right empty space */
#branse .ind-fx-mock{top:var(--space-xl);right:var(--space-4xl);width:230px;border:1px solid var(--line);border-radius:var(--radius-md);background:linear-gradient(180deg,var(--surface-2),var(--surface-alt));box-shadow:var(--shadow-lg);overflow:hidden;opacity:.92;}
#branse .ind-fx-mock-head{display:flex;align-items:center;gap:5px;padding:8px 12px;border-bottom:1px solid var(--line);}
#branse .ind-fx-dot{width:7px;height:7px;border-radius:50%;background:var(--surface-3);}
#branse .ind-fx-dot:first-child{background:var(--ember);}
#branse .ind-fx-mock-label{margin-left:auto;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;color:var(--ash);}
#branse .ind-fx-mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px;}
#branse .ind-fx-cell{height:34px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-3);animation:ind-flicker 4.2s ease-in-out infinite;}
#branse .ind-fx-cell:nth-child(2){animation-delay:.5s;}
#branse .ind-fx-cell:nth-child(3){animation-delay:1s;}
#branse .ind-fx-cell:nth-child(4){animation-delay:1.5s;}
#branse .ind-fx-cell:nth-child(5){animation-delay:2s;}
#branse .ind-fx-cell:nth-child(6){animation-delay:2.5s;}
@keyframes ind-flicker{0%,100%{border-color:var(--line);background:var(--surface-3);}50%{border-color:var(--accent);background:var(--accent-subtle);}}
#branse .ind-fx-mock-scan{position:absolute;left:0;right:0;top:0;height:30px;background:linear-gradient(180deg,var(--accent-subtle),transparent);animation:ind-scan 5s ease-in-out infinite;}
@keyframes ind-scan{0%{transform:translateY(38px);opacity:0;}40%{opacity:1;}100%{transform:translateY(150px);opacity:0;}}

@media(max-width:900px){
  #branse .ind-fx-mock,#branse .ind-fx-numeral,#branse .ind-fx-connector,#branse .ind-fx-bracket{display:none;}
}
@media(prefers-reduced-motion:reduce){
  #branse .ind-fx-node,#branse .ind-fx-cell,#branse .ind-fx-mock-scan{animation:none;}
}


/* ===== section-fx: abt (#o-nama) ===== */
/* ==== ABOUT FX (scoped to #o-nama) ==== */
#o-nama { position: relative; overflow: hidden; }
#o-nama .container { position: relative; z-index: 1; }
#o-nama .about-grid { position: relative; z-index: 1; }
#o-nama .about-visual { position: relative; }
#o-nama .about-stats { position: relative; z-index: 2; }

#o-nama .abt-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* corner brackets anchored to the stats column (right half) */
#o-nama .abt-fx__bracket {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
}
#o-nama .abt-fx__bracket--tr {
  top: 4%;
  right: 2%;
  border-left: 0;
  border-bottom: 0;
  border-color: var(--accent);
  opacity: .5;
}
#o-nama .abt-fx__bracket--bl {
  bottom: 4%;
  right: 46%;
  border-right: 0;
  border-top: 0;
  border-color: var(--line-strong);
}

/* mono tech labels */
#o-nama .abt-fx__label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash);
}
#o-nama .abt-fx__label--top {
  top: 2%;
  right: 8%;
  color: var(--accent-2);
  opacity: .7;
}
#o-nama .abt-fx__label--idx {
  bottom: 1%;
  right: 8%;
  opacity: .55;
}

/* faint large outline numeral behind stats */
#o-nama .abt-fx__numeral {
  position: absolute;
  top: 50%;
  right: 24%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 220px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  opacity: .4;
}

/* ==== animated dashboard mockup ==== */
#o-nama .abt-fx__dash {
  position: absolute;
  top: 50%;
  right: 4%;
  width: 320px;
  transform: translateY(-50%);
  padding: 14px 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-alt));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: .5;
}
#o-nama .abt-fx__dash::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--glow-molten);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .35;
  pointer-events: none;
}
#o-nama .abt-fx__dash-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
#o-nama .abt-fx__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--surface-3);
}
#o-nama .abt-fx__dot:first-child { background: var(--ember); }
#o-nama .abt-fx__dash-title {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--ash);
  text-transform: uppercase;
}

#o-nama .abt-fx__chart {
  position: relative;
  height: 96px;
}

/* line chart */
#o-nama .abt-fx__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#o-nama .abt-fx__line polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px var(--accent-subtle));
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: abtDraw 4.5s ease-in-out infinite;
}
@keyframes abtDraw {
  0%   { stroke-dashoffset: 420; }
  55%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: .15; }
}

/* animated bars */
#o-nama .abt-fx__bars {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100%;
}
#o-nama .abt-fx__bars span {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: var(--grad-molten);
  transform-origin: bottom;
  animation: abtBar 3.2s ease-in-out infinite;
  opacity: .85;
}
#o-nama .abt-fx__bars span:nth-child(1) { animation-delay: 0s; }
#o-nama .abt-fx__bars span:nth-child(2) { animation-delay: .18s; }
#o-nama .abt-fx__bars span:nth-child(3) { animation-delay: .36s; }
#o-nama .abt-fx__bars span:nth-child(4) { animation-delay: .54s; }
#o-nama .abt-fx__bars span:nth-child(5) { animation-delay: .72s; }
#o-nama .abt-fx__bars span:nth-child(6) { animation-delay: .9s; }
#o-nama .abt-fx__bars span:nth-child(7) { animation-delay: 1.08s; }
@keyframes abtBar {
  0%, 100% { transform: scaleY(.55); }
  50%      { transform: scaleY(1); }
}

/* scan accent sweeping across the dashboard */
#o-nama .abt-fx__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent-subtle), transparent);
  transform: translateX(-100%);
  animation: abtScan 5s ease-in-out infinite;
}
@keyframes abtScan {
  0%, 20%  { transform: translateX(-100%); }
  70%, 100% { transform: translateX(100%); }
}

/* (first-card emphasis removed: imperceptible and arbitrary with four equal cards) */

@media (prefers-reduced-motion: reduce) {
  #o-nama .abt-fx__line polyline,
  #o-nama .abt-fx__bars span,
  #o-nama .abt-fx__scan {
    animation: none;
  }
  #o-nama .abt-fx__line polyline { stroke-dashoffset: 0; }
}

/* keep mobile clean */
@media (max-width: 900px) {
  #o-nama .abt-fx { display: none; }
}

/* keep the stats column clean: hide the dashboard mockup, keep only the framing brackets/labels */
#o-nama .abt-fx__dash,
#o-nama .abt-fx__numeral { display: none; }


/* ===== section-fx: tst (.testimonials-section) ===== */
.testimonials-section{position:relative;overflow:hidden;}

/* ===== FX LAYER ===== */
.testimonials-section .tst-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}

/* Big glowing quote glyph */
.testimonials-section .tst-quote-glyph{
  position:absolute;top:-2.2rem;right:6%;
  font-family:var(--font-display,'Sora',sans-serif);
  font-size:clamp(11rem,20vw,20rem);line-height:1;font-weight:800;
  background:var(--grad-molten,linear-gradient(135deg,#8C8C94,#A0A0A8));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.1;filter:drop-shadow(0 0 38px rgba(82,86,98,.32));
  user-select:none;
}

/* Faint large outline numeral */
.testimonials-section .tst-numeral{
  position:absolute;left:-1.5rem;bottom:-3.5rem;
  font-family:var(--font-mono,'Space Mono',monospace);
  font-size:clamp(9rem,16vw,15rem);line-height:1;font-weight:700;
  color:transparent;-webkit-text-stroke:1px var(--line-strong,rgba(210,210,216,.16));
  opacity:.5;user-select:none;letter-spacing:-.04em;
}

/* Mono tech labels */
.testimonials-section .tst-label{
  position:absolute;font-family:var(--font-mono,'Space Mono',monospace);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash,#6C6C74);
}
.testimonials-section .tst-label-top{top:1.6rem;left:50%;transform:translateX(-50%);color:var(--accent,#8C8C94);opacity:.7;}
.testimonials-section .tst-label-bot{bottom:1.6rem;right:7%;opacity:.55;}
.testimonials-section .tst-label-bot::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent,#8C8C94);margin-right:.5rem;vertical-align:middle;box-shadow:0 0 8px var(--accent,#8C8C94);}

/* Corner brackets */
.testimonials-section .tst-bracket{position:absolute;width:34px;height:34px;}
.testimonials-section .tst-bracket-tl{top:1.2rem;left:1.2rem;border-top:1.5px solid var(--line-strong,rgba(210,210,216,.16));border-left:1.5px solid var(--line-strong,rgba(210,210,216,.16));}
.testimonials-section .tst-bracket-br{bottom:1.2rem;right:1.2rem;border-bottom:1.5px solid var(--line-strong,rgba(210,210,216,.16));border-right:1.5px solid var(--line-strong,rgba(210,210,216,.16));}

/* Connector line + glowing nodes (left edge) */
.testimonials-section .tst-connector{
  position:absolute;left:2.6rem;top:50%;transform:translateY(-50%);
  width:1px;height:42%;
  background:linear-gradient(to bottom,transparent,var(--line-strong,rgba(210,210,216,.16)),transparent);
}
.testimonials-section .tst-node{
  position:absolute;left:50%;width:7px;height:7px;border-radius:50%;
  transform:translateX(-50%);background:var(--accent,#8C8C94);
  box-shadow:0 0 10px var(--glow-molten,rgba(82,86,98,.5));
}
.testimonials-section .tst-node-1{top:6%;animation:tst-pulse 3.4s ease-in-out infinite;}
.testimonials-section .tst-node-2{top:50%;animation:tst-pulse 3.4s ease-in-out infinite .9s;}
.testimonials-section .tst-node-3{top:94%;animation:tst-pulse 3.4s ease-in-out infinite 1.8s;}

@keyframes tst-pulse{0%,100%{opacity:.35;transform:translateX(-50%) scale(.85);}50%{opacity:1;transform:translateX(-50%) scale(1.25);}}

/* ===== LAYOUT VARIETY (scoped, CSS-only) ===== */
.testimonials-section .testimonial-grid{position:relative;z-index:1;}
@media (min-width:900px){
  .testimonials-section .testimonial-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;
  }
  /* Promote first card to a bento feature spanning both columns */
  .testimonials-section .testimonial-card-v2:first-child{
    grid-column:span 2;
    background:linear-gradient(135deg,var(--surface-2,#16161A),var(--surface-alt,#111113));
    border:1px solid var(--line-strong,rgba(210,210,216,.16));
  }
  .testimonials-section .testimonial-card-v2:first-child blockquote{
    font-size:1.18rem;line-height:1.55;
  }
  /* Faint molten edge on the feature card */
  .testimonials-section .testimonial-card-v2:first-child{
    box-shadow:var(--shadow-lg,0 18px 40px rgba(0,0,0,.4)),inset 0 0 0 1px var(--accent-subtle,rgba(82,86,98,.12));
  }
}

/* Keep real content above decorations */
.testimonials-section .section-header{position:relative;z-index:1;}

/* ===== RESPONSIVE: hide heavy decor on mobile ===== */
@media (max-width:900px){
  .testimonials-section .tst-quote-glyph,
  .testimonials-section .tst-numeral,
  .testimonials-section .tst-connector,
  .testimonials-section .tst-bracket,
  .testimonials-section .tst-label-bot{display:none;}
  .testimonials-section .tst-label-top{font-size:.62rem;}
}

@media (prefers-reduced-motion:reduce){
  .testimonials-section .tst-node{animation:none;opacity:.7;}
}


/* ===== section-fx: cta (.cta-banner) ===== */
.cta-banner{position:relative;}
.cta-banner .container{position:relative;}

/* keep real content above decorations */
.cta-banner .cta-banner-inner{position:relative;z-index:2;}

/* ===== CTA banner: refined framed panel (monochrome) ===== */
.cta-banner .cta-banner-inner{ padding: clamp(44px, 5vw, 68px) clamp(28px, 5vw, 64px); border-radius: var(--radius-lg); }

/* faint masked grid texture inside the panel */
.cta-banner .cta-banner-inner::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 50% 45%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 75% 85% at 50% 45%, #000 0%, transparent 75%);
  opacity:.55;
}

/* hairline border + subtle fill + soft white glow that breathes */
.cta-banner .cta-banner-inner::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  border:1px solid var(--border-strong);
  background:linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.006) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 80px -44px rgba(0,0,0,0.85);
  animation:cta-border-pulse 6s ease-in-out infinite;
}
@keyframes cta-border-pulse{
  0%,100%{ border-color:var(--border-strong); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 0 rgba(255,255,255,0); }
  50%{ border-color:rgba(255,255,255,0.16); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 0 34px -10px rgba(255,255,255,0.10); }
}

/* keep real content above the framed pseudo-layers */
.cta-banner .cta-banner-text,
.cta-banner .cta-banner-actions{ position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce){
  .cta-banner .cta-banner-inner::after{ animation:none; }
}
@media (max-width:900px){
  .cta-banner .cta-banner-inner{ padding:34px 22px; }
  .cta-banner .cta-banner-inner::before{ display:none; }
  .cta-banner .cta-banner-inner::after{ box-shadow:inset 0 0 0 1px var(--border); animation:none; }
}


/* ===== section-fx overlap fix: hide redundant top-left "//" labels
   (they collided with the section eyebrows); keep index labels, brackets,
   nodes, numerals and mockups ===== */
#usluge .svc-fx-coord-tl,
#zasto-nevis .why-fx-index,
#proces .prc-fx-coord-tl,
#o-nama .abt-fx__label--top,
.testimonials-section .tst-label-top,
.cta-banner .cta-fx-coord-tl {
  display: none !important;
}

/* ============================================================
   VERCEL/GROK CLEANUP — strip the busy per-section FX decorations
   (mockups, numerals, // labels, rails, brackets) for a minimal look.
   Section content keeps the new Geist + pure-black styling.
   ============================================================ */
.svc-fx, .why-fx, .prc-fx, .ind-fx, .abt-fx, .tst-fx, .cta-fx,
.fx-wash-top::after, .fx-wash-tr::after, .fx-wash-bl::after {
  display: none !important;
}
/* soften section dividers to a plain Vercel hairline (drop the glowing dot) */
.section + .section::after,
.cta-banner + .section::after { display: none !important; }
.section + .section::before,
.section + .cta-banner::before,
.cta-banner + .section::before,
.section + .contact-section::before {
  background: var(--border) !important;
  width: 100% !important;
}


/* ===== Hero product window: app/admin UI ===== */
.vapp { display: grid; grid-template-columns: 190px 1fr; text-align: left; }
.vapp-nav { border-right: 1px solid var(--border); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; }
.vapp-brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--ink); padding: 2px 8px 16px; }
.vapp-brand-dot { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(140deg, #ffffff, #777); }
.vapp-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 0.82rem; color: var(--ink-muted); }
.vapp-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.vapp-link.is-active { background: rgba(255,255,255,0.06); color: var(--ink); }
.vapp-main { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 13px; }
.vapp-head { display: flex; align-items: center; justify-content: space-between; }
.vapp-title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); letter-spacing: -0.01em; }
.vapp-cta { font-size: 0.72rem; color: #000; background: #fff; padding: 6px 11px; border-radius: 7px; font-weight: 500; }
.vapp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vapp-stat { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: rgba(255,255,255,0.015); }
.vapp-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.vapp-lbl { display: block; margin-top: 5px; font-size: 0.7rem; color: var(--ink-muted); }
.vapp-panel { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: rgba(255,255,255,0.015); }
.vapp-panel-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.74rem; color: var(--ink-muted); margin-bottom: 12px; }
.vapp-tag { font-family: var(--font-mono); font-size: 0.62rem; border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; color: var(--ink-muted); }
.vapp-chart { display: flex; align-items: flex-end; gap: 7px; height: 62px; }
.vapp-chart span { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.07)); }
.vapp-chart span:last-child { background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.25)); }
.vapp-rows { display: flex; flex-direction: column; gap: 8px; }
.vapp-row { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; }
.vapp-ico { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,0.04); color: var(--ink-secondary); flex-shrink: 0; }
.vapp-ico svg { width: 13px; height: 13px; }
.vapp-row-name { flex: 1; font-size: 0.8rem; color: var(--ink-secondary); }
.vapp-pill { font-size: 0.66rem; padding: 3px 9px; border-radius: 20px; font-weight: 500; white-space: nowrap; }
.vapp-pill--run { background: rgba(255,255,255,0.09); color: var(--ink); }
.vapp-pill--ok { background: rgba(255,255,255,0.04); color: var(--ink-muted); }
@media (max-width: 820px) {
  .vapp { grid-template-columns: 1fr; }
  .vapp-nav { display: none; }
  .vapp-stats { grid-template-columns: 1fr 1fr; }
}

/* ===== Services: horizontal tab showcase ===== */
.svc-tabs { margin-top: var(--space-2xl); }
.svc-tabnav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.svc-tabnav::-webkit-scrollbar { display: none; }
.svc-tab { display: inline-flex; align-items: center; gap: 9px; padding: 14px 18px; font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--ink-muted); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; transition: color 0.18s var(--ease-out), border-color 0.18s var(--ease-out); }
.svc-tab-ico { display: inline-flex; opacity: 0.8; }
.svc-tab-ico svg { width: 17px; height: 17px; }
.svc-tab:hover { color: var(--ink-secondary); }
.svc-tab.is-active { color: var(--ink); border-bottom-color: #fff; }
.svc-tab.is-active .svc-tab-ico { opacity: 1; }

.svc-panel { display: none; grid-template-columns: 1.05fr 0.95fr; gap: 56px; padding-top: 44px; align-items: center; }
.svc-panel.is-active { display: grid; animation: svcFade 0.45s var(--ease-out); }
@keyframes svcFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.svc-panel-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--ink-faint); }
.svc-panel-text h3 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); margin: 14px 0 16px; }
.svc-panel-text > p { font-size: 1.05rem; line-height: 1.65; color: var(--ink-secondary); max-width: 48ch; }
.svc-panel-feats { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
.svc-panel-feats li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--ink); }
.svc-panel-feats svg { width: 16px; height: 16px; color: var(--ink); flex-shrink: 0; }
.svc-panel-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: 0.95rem; color: var(--ink); }
.svc-panel-link svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease-out); }
.svc-panel-link:hover svg { transform: translateX(4px); }

.svc-panel-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 360px; }
.svc-panel-visual::before { display: none; }
.svc-panel-glyph { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.svc-panel-glyph svg { width: 38px; height: 38px; color: var(--ink); }
.svc-panel-wm { position: absolute; right: -6px; bottom: -42px; font-family: var(--font-display); font-weight: 700; font-size: 13rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.07); user-select: none; }

@media (max-width: 860px) {
  .svc-panel { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .svc-panel-feats { grid-template-columns: 1fr; gap: 11px; }
  .svc-panel-visual { min-height: 200px; order: -1; }
}
/* ===== Services header: half-width, stacked (title, then text below) ===== */
#usluge .section-header { margin-bottom: var(--space-2xl); }
#usluge .section-title { max-width: none; text-wrap: balance; }
#usluge .section-desc { max-width: none; }
@media (min-width: 900px) {
  #usluge .section-header { max-width: 50%; }
}

/* ===== Why (#zasto-nevis) & Process (#proces) headers: match Services half-width ===== */
#zasto-nevis .section-header, #proces .section-header, #branse .section-header, #portfolio .section-header, #iskustva .section-header { margin-bottom: var(--space-2xl); }
#zasto-nevis .section-title, #proces .section-title, #branse .section-title, #portfolio .section-title, #iskustva .section-title { max-width: none; text-wrap: balance; }
#zasto-nevis .section-desc, #proces .section-desc, #branse .section-desc, #portfolio .section-desc, #iskustva .section-desc { max-width: none; }
@media (min-width: 900px) {
  #zasto-nevis .section-header, #proces .section-header, #branse .section-header, #portfolio .section-header, #iskustva .section-header { max-width: 50%; }
}

/* ===== Per-service tab visuals ===== */

/* --- web --- */
.svc-viz-web{
  width:100%;
  max-width:680px;
  margin:0 auto;
  font-family:var(--font-display);
  color:var(--ink);
}
.svc-viz-web .web-browser{
  width:100%;
  height:336px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#0c0c0c 0%,#070707 100%);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85),0 2px 0 0 rgba(255,255,255,.03) inset;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* chrome */
.svc-viz-web .web-chrome{
  display:flex;
  align-items:center;
  gap:10px;
  height:34px;
  padding:0 12px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#161616,#101010);
  flex:0 0 auto;
}
.svc-viz-web .web-dots{display:inline-flex;gap:6px}
.svc-viz-web .web-dots i{width:8px;height:8px;border-radius:50%;background:#2c2c2c;box-shadow:0 0 0 .5px rgba(255,255,255,.06)}
.svc-viz-web .web-url{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:1;
  height:19px;
  padding:0 10px;
  margin:0 4px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#0a0a0a;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--ink-secondary);
  letter-spacing:.2px;
}
.svc-viz-web .web-url svg{color:var(--ink-muted);flex:0 0 auto}
.svc-viz-web .web-reload{color:var(--ink-muted);font-size:12px;line-height:1}

/* viewport */
.svc-viz-web .web-viewport{
  position:relative;
  flex:1;
  padding:0 26px;
  background:
    radial-gradient(120% 80% at 50% -20%,rgba(255,255,255,.06),transparent 60%),
    #060606;
  display:flex;
  flex-direction:column;
}
.svc-viz-web .web-sheen{
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%);
}

/* nav */
.svc-viz-web .web-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:42px;
  border-bottom:1px solid var(--border);
  flex:0 0 auto;
}
.svc-viz-web .web-mark{
  font-weight:700;
  font-size:13px;
  letter-spacing:1.5px;
  color:#fff;
}
.svc-viz-web .web-menu{display:inline-flex;gap:16px}
.svc-viz-web .web-menu a{
  font-size:11px;
  color:var(--ink-muted);
  letter-spacing:.2px;
}
.svc-viz-web .web-menu a.is-active{color:var(--ink)}

/* hero */
.svc-viz-web .web-hero{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:0;
  padding:6px 0;
}
.svc-viz-web .web-eyebrow{
  margin:0 0 8px;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:2.5px;
  color:var(--ink-muted);
}
.svc-viz-web .web-headline{
  margin:0;
  font-size:34px;
  line-height:1.02;
  font-weight:680;
  letter-spacing:-1.2px;
  color:#fff;
}
.svc-viz-web .web-headline em{
  font-style:normal;
  color:var(--ink-secondary);
}
.svc-viz-web .web-sub{
  margin:11px 0 16px;
  font-size:11.5px;
  line-height:1.4;
  color:var(--ink-secondary);
  max-width:340px;
}
.svc-viz-web .web-cta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:30px;
  padding:0 16px;
  border-radius:999px;
  background:#fff;
  color:#000;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.2px;
  box-shadow:0 6px 18px -6px rgba(255,255,255,.4),0 0 0 1px rgba(255,255,255,.9);
}
.svc-viz-web .web-cta svg{transform:translateX(0);transition:none}

/* feature cards */
.svc-viz-web .web-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding-bottom:18px;
  flex:0 0 auto;
}
.svc-viz-web .web-card{
  display:flex;
  align-items:center;
  gap:9px;
  height:42px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
}
.svc-viz-web .web-ico{
  display:grid;
  place-items:center;
  width:24px;height:24px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#0d0d0d;
  color:var(--ink);
  flex:0 0 auto;
}
.svc-viz-web .web-clabel{
  font-size:11px;
  font-weight:550;
  color:var(--ink);
  letter-spacing:.2px;
}

/* subtle motion */
@media (prefers-reduced-motion: no-preference){
  .svc-viz-web .web-sheen{animation:web-glow 7s ease-in-out infinite}
  .svc-viz-web .web-cta{animation:web-pulse 4.5s ease-in-out infinite}
  .svc-viz-web .web-reload{display:inline-block;animation:web-spin 9s linear infinite}
  @keyframes web-glow{0%,100%{opacity:.75}50%{opacity:1}}
  @keyframes web-pulse{0%,100%{box-shadow:0 6px 18px -6px rgba(255,255,255,.4),0 0 0 1px rgba(255,255,255,.9)}50%{box-shadow:0 8px 26px -6px rgba(255,255,255,.6),0 0 0 1px rgba(255,255,255,1)}}
  @keyframes web-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
}

/* responsive */
@media (max-width:860px){
  .svc-viz-web .web-browser{height:218px}
  .svc-viz-web .web-chrome{height:26px;padding:0 8px;gap:7px}
  .svc-viz-web .web-dots i{width:6px;height:6px}
  .svc-viz-web .web-url{height:15px;font-size:8px}
  .svc-viz-web .web-reload{display:none}
  .svc-viz-web .web-viewport{padding:0 13px}
  .svc-viz-web .web-nav{height:30px}
  .svc-viz-web .web-mark{font-size:10px;letter-spacing:1px}
  .svc-viz-web .web-menu{display:none}
  .svc-viz-web .web-nav::after{
    content:"";width:16px;height:11px;flex:0 0 auto;
    background:
      linear-gradient(var(--ink-muted),var(--ink-muted)) left top/16px 1.5px no-repeat,
      linear-gradient(var(--ink-muted),var(--ink-muted)) left center/16px 1.5px no-repeat,
      linear-gradient(var(--ink-muted),var(--ink-muted)) left bottom/16px 1.5px no-repeat;
  }
  .svc-viz-web .web-eyebrow{font-size:7px;letter-spacing:1.6px;margin-bottom:5px}
  .svc-viz-web .web-headline{font-size:19px;letter-spacing:-.6px}
  .svc-viz-web .web-sub{font-size:8px;margin:6px 0 9px;max-width:200px}
  .svc-viz-web .web-cta{height:22px;padding:0 11px;font-size:8.5px;gap:5px}
  .svc-viz-web .web-cta svg{width:8px;height:8px}
  .svc-viz-web .web-cards{gap:6px;padding-bottom:11px}
  .svc-viz-web .web-card{height:30px;padding:0 7px;gap:6px}
  .svc-viz-web .web-ico{width:18px;height:18px}
  .svc-viz-web .web-ico svg{width:10px;height:10px}
  .svc-viz-web .web-clabel{font-size:8.5px}
}

/* --- shop --- */
.svc-viz-shop{
  width:100%;
  max-width:680px;
  margin:0 auto;
  display:flex;
  justify-content:center;
  font-family:var(--font-display, "Geist", system-ui, sans-serif);
}
.svc-viz-shop *{box-sizing:border-box;}

.svc-viz-shop .shop-window{
  position:relative;
  width:100%;
  min-height:336px;
  border:1px solid var(--border-strong, rgba(255,255,255,.16));
  border-radius:var(--radius-lg, 14px);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #121212 0%, #0b0b0b 100%);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85), 0 2px 0 rgba(255,255,255,.03) inset;
  padding:14px 16px 12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
}
.svc-viz-shop .shop-sheen{
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 18%);
}

/* topbar */
.svc-viz-shop .shop-topbar{
  display:flex; align-items:center; gap:12px;
  padding-bottom:11px;
  border-bottom:1px solid var(--border, rgba(255,255,255,.09));
}
.svc-viz-shop .shop-brand{display:flex; align-items:center; gap:7px; flex:0 0 auto;}
.svc-viz-shop .shop-logo{
  display:grid; place-items:center;
  width:22px; height:22px; border-radius:6px;
  background:#fff; color:#0a0a0a;
  box-shadow:0 1px 6px rgba(0,0,0,.5);
}
.svc-viz-shop .shop-brand-name{
  font-size:13px; font-weight:650; letter-spacing:-.01em;
  color:var(--ink, #EDEDED);
}
.svc-viz-shop .shop-search{
  flex:1 1 auto;
  display:flex; align-items:center; gap:7px;
  height:28px; padding:0 10px;
  border:1px solid var(--border, rgba(255,255,255,.1));
  border-radius:var(--radius-md, 8px);
  background:rgba(255,255,255,.03);
  color:var(--ink-muted, #707070);
  max-width:280px;
}
.svc-viz-shop .shop-search-q{
  font-size:12px; color:var(--ink-secondary, #A1A1A1); letter-spacing:-.005em;
}
.svc-viz-shop .shop-caret{
  width:1px; height:13px; background:var(--ink-secondary, #A1A1A1);
  margin-left:1px;
}
.svc-viz-shop .shop-actions{display:flex; align-items:center; gap:14px; flex:0 0 auto;}
.svc-viz-shop .shop-nav-link{
  font-size:12px; color:var(--ink-secondary, #A1A1A1); font-weight:500;
}
.svc-viz-shop .shop-cart{
  position:relative;
  display:grid; place-items:center;
  width:30px; height:30px;
  border:1px solid var(--border, rgba(255,255,255,.1));
  border-radius:var(--radius-md, 8px);
  background:rgba(255,255,255,.04);
  color:var(--ink, #EDEDED);
  cursor:default;
}
.svc-viz-shop .shop-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:16px; height:16px; padding:0 4px;
  display:grid; place-items:center;
  font-size:10px; font-weight:700; line-height:1;
  color:#0a0a0a; background:#fff;
  border-radius:9px;
  box-shadow:0 0 0 2px #0d0d0d, 0 2px 6px rgba(0,0,0,.6);
}

/* subbar */
.svc-viz-shop .shop-subbar{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-top:-2px;
}
.svc-viz-shop .shop-h1{
  font-size:15px; font-weight:680; letter-spacing:-.02em;
  color:var(--ink, #EDEDED);
}
.svc-viz-shop .shop-meta{
  font-family:var(--font-mono, "Geist Mono", monospace);
  font-size:10.5px; color:var(--ink-muted, #707070); letter-spacing:.01em;
}

/* grid */
.svc-viz-shop .shop-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
  flex:1 1 auto;
}
.svc-viz-shop .shop-card{
  position:relative;
  display:flex; flex-direction:column;
  padding:10px;
  border:1px solid var(--border, rgba(255,255,255,.09));
  border-radius:var(--radius-md, 10px);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  transition:transform .35s ease, border-color .35s ease;
}
.svc-viz-shop .shop-card--focus{
  border-color:rgba(255,255,255,.34);
  background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.02));
  box-shadow:0 12px 30px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.svc-viz-shop .shop-tag{
  position:absolute; top:8px; left:8px;
  font-family:var(--font-mono, "Geist Mono", monospace);
  font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#0a0a0a; background:#fff;
  padding:2px 6px; border-radius:5px;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.svc-viz-shop .shop-thumb{
  display:grid; place-items:center;
  height:84px; margin-bottom:9px;
  border-radius:var(--radius-sm, 7px);
  background:
    radial-gradient(80% 80% at 50% 25%, rgba(255,255,255,.06), rgba(255,255,255,0)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 8px, rgba(255,255,255,0) 8px 16px),
    #0e0e0e;
  border:1px solid var(--border, rgba(255,255,255,.07));
  color:var(--ink-muted, #707070);
}
.svc-viz-shop .shop-card--focus .shop-thumb{color:var(--ink-secondary, #c8c8c8);}
.svc-viz-shop .shop-info{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  margin-bottom:8px;
}
.svc-viz-shop .shop-pname{
  font-size:12px; font-weight:560; letter-spacing:-.01em;
  color:var(--ink, #EDEDED);
}
.svc-viz-shop .shop-prating{
  font-family:var(--font-mono, "Geist Mono", monospace);
  font-size:10px; color:var(--ink-muted, #707070);
}
.svc-viz-shop .shop-buy{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:auto;
}
.svc-viz-shop .shop-price{
  font-size:13px; font-weight:680; letter-spacing:-.01em;
  color:var(--ink-secondary, #A1A1A1);
}
.svc-viz-shop .shop-price--hi{color:#fff;}
.svc-viz-shop .shop-add{
  font-family:inherit;
  font-size:11px; font-weight:600; letter-spacing:-.005em;
  padding:5px 11px;
  border-radius:var(--radius-sm, 7px);
  border:1px solid var(--border-strong, rgba(255,255,255,.18));
  background:rgba(255,255,255,.05);
  color:var(--ink, #EDEDED);
  cursor:default;
}
.svc-viz-shop .shop-add--hi{
  background:#fff; color:#0a0a0a; border-color:#fff;
  box-shadow:0 4px 14px -4px rgba(255,255,255,.4);
}

/* footer */
.svc-viz-shop .shop-foot{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:10px;
  border-top:1px solid var(--border, rgba(255,255,255,.09));
}
.svc-viz-shop .shop-foot-item{
  display:flex; align-items:center; gap:6px;
  font-size:10.5px; color:var(--ink-muted, #707070); letter-spacing:-.005em;
}
.svc-viz-shop .shop-foot-mono{font-family:var(--font-mono, "Geist Mono", monospace);}
.svc-viz-shop .shop-foot-item--ok{color:var(--ink-secondary, #A1A1A1);}
.svc-viz-shop .shop-dot{
  width:6px; height:6px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.12);
}

/* gentle animation */
@media (prefers-reduced-motion: no-preference){
  .svc-viz-shop .shop-card--focus{
    animation:shop-float 5.5s ease-in-out infinite;
  }
  .svc-viz-shop .shop-dot{
    animation:shop-pulse 2.8s ease-in-out infinite;
  }
  .svc-viz-shop .shop-caret{
    animation:shop-blink 1.4s step-end infinite;
  }
  @keyframes shop-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-4px);}
  }
  @keyframes shop-pulse{
    0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.12);}
    50%{box-shadow:0 0 0 5px rgba(255,255,255,.04);}
  }
  @keyframes shop-blink{
    0%,55%{opacity:1;}
    56%,100%{opacity:0;}
  }
}

/* responsive */
@media (max-width:860px){
  .svc-viz-shop{max-width:100%;}
  .svc-viz-shop .shop-window{
    min-height:200px;
    padding:10px 11px 9px;
    gap:8px;
  }
  .svc-viz-shop .shop-nav-link,
  .svc-viz-shop .shop-foot-item:nth-child(2){display:none;}
  .svc-viz-shop .shop-search{max-width:none;}
  .svc-viz-shop .shop-search-q{font-size:11px;}
  .svc-viz-shop .shop-h1{font-size:13px;}
  .svc-viz-shop .shop-grid{gap:7px;}
  .svc-viz-shop .shop-thumb{height:50px;}
  .svc-viz-shop .shop-thumb svg{width:28px; height:28px;}
  .svc-viz-shop .shop-pname{font-size:10.5px;}
  .svc-viz-shop .shop-prating{display:none;}
  .svc-viz-shop .shop-price{font-size:11px;}
  .svc-viz-shop .shop-add{padding:4px 8px; font-size:10px;}
  .svc-viz-shop .shop-tag{font-size:8px; padding:1px 4px;}
  .svc-viz-shop .shop-foot{padding-top:7px; gap:10px;}
  .svc-viz-shop .shop-foot-item{font-size:9px;}
}

/* --- platform --- */
.svc-viz-platform{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.svc-viz-platform .pf-app{
  position:relative;
  width:100%;
  max-width:680px;
  height:336px;
  display:grid;
  grid-template-columns:150px 1fr;
  background:linear-gradient(180deg,#141414 0%,#0d0d0d 60%,#0a0a0a 100%);
  border:1px solid var(--border-strong,#2a2a2a);
  border-radius:var(--radius-lg,14px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8),0 2px 0 rgba(255,255,255,.03) inset;
  overflow:hidden;
  font-family:var(--font-display);
}
.svc-viz-platform .pf-sheen{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -20%,rgba(255,255,255,.07),transparent 55%);
  z-index:3;
}

/* SIDEBAR */
.svc-viz-platform .pf-side{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  padding:16px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));
  border-right:1px solid var(--border,#1f1f1f);
}
.svc-viz-platform .pf-brand{
  display:flex;align-items:center;gap:8px;
  padding:0 4px 16px;
}
.svc-viz-platform .pf-logo{
  display:grid;place-items:center;
  width:22px;height:22px;border-radius:6px;
  color:#0a0a0a;background:linear-gradient(160deg,#fff,#c4c4c4);
  box-shadow:0 1px 4px rgba(0,0,0,.5);
}
.svc-viz-platform .pf-brand-name{
  font-size:13px;font-weight:600;letter-spacing:-.02em;color:var(--ink,#ededed);
}
.svc-viz-platform .pf-brand-dim{color:var(--ink-muted,#707070);font-weight:500;}

.svc-viz-platform .pf-nav{display:flex;flex-direction:column;gap:2px;}
.svc-viz-platform .pf-nav-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 9px;border-radius:7px;
  font-size:12.5px;color:var(--ink-secondary,#a1a1a1);
  letter-spacing:-.01em;
}
.svc-viz-platform .pf-nav-item.is-active{
  color:var(--ink,#ededed);font-weight:550;
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}
.svc-viz-platform .pf-dot{
  width:5px;height:5px;border-radius:50%;
  background:#fff;box-shadow:0 0 7px 1px rgba(255,255,255,.6);
}
.svc-viz-platform .pf-side-foot{
  margin-top:auto;display:flex;align-items:center;gap:8px;
  padding:9px 6px 2px;border-top:1px solid var(--border,#1f1f1f);
}
.svc-viz-platform .pf-avatar{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font-family:var(--font-mono);font-size:9.5px;color:var(--ink,#ededed);
  background:#1d1d1d;box-shadow:0 0 0 1px var(--border-strong,#2a2a2a) inset;
}
.svc-viz-platform .pf-side-foot-txt{display:flex;flex-direction:column;line-height:1.25;}
.svc-viz-platform .pf-fname{font-size:11px;color:var(--ink,#ededed);font-weight:550;}
.svc-viz-platform .pf-fmail{font-family:var(--font-mono);font-size:9px;color:var(--ink-muted,#707070);}

/* MAIN */
.svc-viz-platform .pf-main{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  padding:16px 18px;gap:14px;
}
.svc-viz-platform .pf-head{
  display:flex;align-items:flex-start;justify-content:space-between;
}
.svc-viz-platform .pf-head-l{display:flex;flex-direction:column;gap:2px;}
.svc-viz-platform .pf-title{
  margin:0;font-size:18px;font-weight:600;letter-spacing:-.03em;
  color:var(--ink,#ededed);
}
.svc-viz-platform .pf-sub{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-muted,#707070);}
.svc-viz-platform .pf-btn{
  font-size:11.5px;font-weight:550;color:#0a0a0a;
  padding:6px 13px;border-radius:7px;
  background:linear-gradient(180deg,#fff,#d6d6d6);
  box-shadow:0 1px 3px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.4) inset;
}

/* TILES */
.svc-viz-platform .pf-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.svc-viz-platform .pf-tile{
  position:relative;
  display:flex;flex-direction:column;gap:3px;
  padding:11px 12px;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));
  border:1px solid var(--border,#1f1f1f);
}
.svc-viz-platform .pf-tile.is-focus{
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  border-color:var(--border-strong,#363636);
  box-shadow:0 8px 22px -12px rgba(0,0,0,.7);
}
.svc-viz-platform .pf-tile-label{
  font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-muted,#707070);
}
.svc-viz-platform .pf-tile-num{
  font-size:20px;font-weight:600;letter-spacing:-.03em;color:var(--ink,#ededed);
}
.svc-viz-platform .pf-tile.is-focus .pf-tile-num{color:#fff;}
.svc-viz-platform .pf-tile-num i{font-size:11px;font-style:normal;color:var(--ink-secondary,#a1a1a1);font-weight:500;}
.svc-viz-platform .pf-tile-delta{
  font-family:var(--font-mono);font-size:9.5px;color:var(--ink-secondary,#a1a1a1);
}

/* CHART */
.svc-viz-platform .pf-chart{
  flex:1;display:flex;flex-direction:column;
  padding:11px 13px 9px;border-radius:10px;min-height:0;
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.004));
  border:1px solid var(--border,#1f1f1f);
}
.svc-viz-platform .pf-chart-head{
  display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;
}
.svc-viz-platform .pf-chart-title{font-size:12.5px;font-weight:550;color:var(--ink,#ededed);letter-spacing:-.01em;}
.svc-viz-platform .pf-chart-meta{font-family:var(--font-mono);font-size:9px;color:var(--ink-muted,#707070);}
.svc-viz-platform .pf-bars{
  flex:1;display:flex;align-items:flex-end;gap:10px;min-height:0;
}
.svc-viz-platform .pf-bar{
  flex:1;height:var(--h);border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg,#5c5c5c,#2e2e2e);
  transform-origin:bottom;transform:scaleY(.45);
  animation:platform-grow .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.svc-viz-platform .pf-bar.is-peak{
  background:linear-gradient(180deg,#ffffff,#bdbdbd);
  box-shadow:0 0 12px rgba(255,255,255,.18);
}
.svc-viz-platform .pf-bar:nth-child(1){animation-delay:.05s}
.svc-viz-platform .pf-bar:nth-child(2){animation-delay:.11s}
.svc-viz-platform .pf-bar:nth-child(3){animation-delay:.17s}
.svc-viz-platform .pf-bar:nth-child(4){animation-delay:.23s}
.svc-viz-platform .pf-bar:nth-child(5){animation-delay:.29s}
.svc-viz-platform .pf-bar:nth-child(6){animation-delay:.35s}
.svc-viz-platform .pf-bar:nth-child(7){animation-delay:.41s}
.svc-viz-platform .pf-bar:nth-child(8){animation-delay:.47s}
.svc-viz-platform .pf-bars-x{
  display:flex;gap:10px;margin-top:6px;
}
.svc-viz-platform .pf-bars-x span{
  flex:1;text-align:center;
  font-family:var(--font-mono);font-size:8px;color:var(--ink-muted,#707070);
}
.svc-viz-platform .pf-bars-x span:nth-child(8){display:none;}

@media (prefers-reduced-motion: no-preference){
  .svc-viz-platform .pf-bar.is-peak{animation:platform-grow .9s cubic-bezier(.2,.8,.2,1) forwards, platform-pulse 3.4s ease-in-out 1s infinite;}
}
@media (prefers-reduced-motion: reduce){
  .svc-viz-platform .pf-bar{animation:none;transform:scaleY(1);}
}

@keyframes platform-grow{to{transform:scaleY(1);}}
@keyframes platform-pulse{
  0%,100%{box-shadow:0 0 12px rgba(255,255,255,.18);}
  50%{box-shadow:0 0 20px rgba(255,255,255,.38);}
}

/* RESPONSIVE */
@media (max-width:860px){
  .svc-viz-platform .pf-app{
    height:212px;
    grid-template-columns:104px 1fr;
    border-radius:var(--radius-md,10px);
  }
  .svc-viz-platform .pf-side{padding:10px 8px;}
  .svc-viz-platform .pf-brand{padding:0 2px 10px;}
  .svc-viz-platform .pf-brand-name{font-size:11px;}
  .svc-viz-platform .pf-logo{width:18px;height:18px;}
  .svc-viz-platform .pf-nav-item{font-size:10.5px;padding:5px 7px;}
  .svc-viz-platform .pf-side-foot-txt,.svc-viz-platform .pf-sub{display:none;}
  .svc-viz-platform .pf-main{padding:10px 11px;gap:9px;}
  .svc-viz-platform .pf-title{font-size:14px;}
  .svc-viz-platform .pf-btn{font-size:10px;padding:5px 9px;}
  .svc-viz-platform .pf-tiles{gap:6px;}
  .svc-viz-platform .pf-tile{padding:7px 8px;border-radius:8px;}
  .svc-viz-platform .pf-tile-num{font-size:14px;}
  .svc-viz-platform .pf-tile-num i{font-size:9px;}
  .svc-viz-platform .pf-tile-delta{font-size:8px;}
  .svc-viz-platform .pf-chart{padding:8px 9px 6px;}
  .svc-viz-platform .pf-bars{gap:6px;}
  .svc-viz-platform .pf-bars-x{display:none;}
}

/* --- custom --- */
.svc-viz-custom{
  width:100%;
  max-width:680px;
  margin:0 auto;
  font-family:var(--font-display);
  position:relative;
}
.svc-viz-custom .custom-app{
  position:relative;
  width:100%;
  height:336px;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,#161616 0%,#0d0d0d 60%,#0a0a0a 100%);
  border:1px solid var(--border,#262626);
  border-radius:var(--radius-lg,14px);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9),0 4px 14px -6px rgba(0,0,0,.6);
  overflow:hidden;
}
.svc-viz-custom .custom-sheen{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.07),transparent 60%);
  border-radius:var(--radius-lg,14px);
}

/* top bar */
.svc-viz-custom .custom-bar{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;
  border-bottom:1px solid var(--border,#262626);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);
}
.svc-viz-custom .custom-bar-left{display:flex;align-items:center;gap:9px;min-width:0;}
.svc-viz-custom .custom-dot{
  width:9px;height:9px;border-radius:50%;
  background:#ededed;box-shadow:0 0 0 3px rgba(237,237,237,.08);
  flex:0 0 auto;
}
.svc-viz-custom .custom-title{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.2px;
  color:var(--ink,#ededed);font-weight:500;
}
.svc-viz-custom .custom-path{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-muted,#707070);
}
.svc-viz-custom .custom-live{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:1px;font-weight:600;
  color:var(--ink-secondary,#a1a1a1);
  padding:4px 9px;border:1px solid var(--border-strong,#383838);
  border-radius:999px;background:rgba(255,255,255,.03);
}
.svc-viz-custom .custom-live i{
  width:6px;height:6px;border-radius:50%;background:#ededed;
  box-shadow:0 0 8px 1px rgba(237,237,237,.6);
}

/* canvas */
.svc-viz-custom .custom-canvas{
  flex:1 1 auto;position:relative;
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:0 26px;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:26px 26px;
}
.svc-viz-custom .custom-wires{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
}
.svc-viz-custom .wire{
  fill:none;stroke:var(--border-strong,#3a3a3a);stroke-width:1.4;
  stroke-dasharray:4 5;
}
.svc-viz-custom .pulse{fill:#ffffff;opacity:0;}

.svc-viz-custom .custom-node{
  position:relative;z-index:2;
  width:142px;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:13px 14px;
  background:linear-gradient(180deg,#1c1c1c,#141414);
  border:1px solid var(--border-strong,#383838);
  border-radius:var(--radius-md,10px);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.9);
}
.svc-viz-custom .custom-node.is-focus{
  background:linear-gradient(180deg,#2a2a2a,#1c1c1c);
  border-color:#5a5a5a;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 16px 34px -16px rgba(0,0,0,1),0 0 22px -6px rgba(255,255,255,.12);
}
.svc-viz-custom .node-ic{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--border,#2a2a2a);
  color:var(--ink-secondary,#a1a1a1);
}
.svc-viz-custom .is-focus .node-ic{color:#ffffff;background:rgba(255,255,255,.1);border-color:#5a5a5a;}
.svc-viz-custom .is-focus .node-ic svg{animation:custom-spin 9s linear infinite;}
.svc-viz-custom .node-ic svg{width:18px;height:18px;}
.svc-viz-custom .node-meta{display:flex;flex-direction:column;gap:3px;}
.svc-viz-custom .node-kind{
  font-family:var(--font-mono);font-size:9px;letter-spacing:1.4px;font-weight:600;
  color:var(--ink-muted,#707070);
}
.svc-viz-custom .is-focus .node-kind{color:var(--ink-secondary,#a1a1a1);}
.svc-viz-custom .node-name{
  font-size:14px;font-weight:600;color:var(--ink,#ededed);letter-spacing:-.1px;
}
.svc-viz-custom .is-focus .node-name{color:#ffffff;}
.svc-viz-custom .node-tag{
  font-family:var(--font-mono);font-size:10px;color:var(--ink-muted,#707070);
  padding:3px 7px;border:1px solid var(--border,#262626);border-radius:6px;
  background:rgba(255,255,255,.02);
}
.svc-viz-custom .is-focus .node-tag{color:var(--ink-secondary,#a1a1a1);border-color:var(--border-strong,#383838);}

/* footer */
.svc-viz-custom .custom-foot{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;
  border-top:1px solid var(--border,#262626);
  background:linear-gradient(0deg,rgba(255,255,255,.03),transparent);
}
.svc-viz-custom .custom-pills{display:flex;gap:7px;}
.svc-viz-custom .pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.3px;
  color:var(--ink-muted,#707070);
  padding:5px 11px;border:1px solid var(--border,#262626);border-radius:999px;
  background:rgba(255,255,255,.015);
}
.svc-viz-custom .pill-on{
  color:#0c0c0c;background:#ededed;border-color:#ededed;font-weight:600;
}
.svc-viz-custom .pill-on i{
  width:5px;height:5px;border-radius:50%;background:#0c0c0c;
}
.svc-viz-custom .custom-stat{display:flex;flex-direction:column;align-items:flex-end;gap:1px;}
.svc-viz-custom .stat-num{
  font-size:15px;font-weight:700;color:#ffffff;letter-spacing:-.2px;
  font-family:var(--font-mono);
}
.svc-viz-custom .stat-lbl{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.4px;
  color:var(--ink-muted,#707070);
}

@media (prefers-reduced-motion: no-preference){
  .svc-viz-custom .pulse-a{animation:custom-flow-a 3.4s ease-in-out infinite;}
  .svc-viz-custom .pulse-b{animation:custom-flow-b 3.4s ease-in-out infinite;}
  .svc-viz-custom .custom-live i{animation:custom-blink 2.2s ease-in-out infinite;}
}
@keyframes custom-flow-a{
  0%,8%{cx:150;opacity:0;}
  14%{opacity:1;}
  46%{cx:225;opacity:1;}
  52%,100%{cx:225;opacity:0;}
}
@keyframes custom-flow-b{
  0%,50%{cx:375;opacity:0;}
  56%{cx:375;opacity:1;}
  88%{cx:450;opacity:1;}
  94%,100%{cx:450;opacity:0;}
}
@keyframes custom-spin{to{transform:rotate(360deg);transform-origin:50% 50%;}}
@keyframes custom-blink{0%,100%{opacity:1;}50%{opacity:.35;}}

@media (max-width:860px){
  .svc-viz-custom .custom-app{height:212px;}
  .svc-viz-custom .custom-bar{padding:8px 11px;}
  .svc-viz-custom .custom-path{display:none;}
  .svc-viz-custom .custom-title{font-size:11px;}
  .svc-viz-custom .custom-canvas{padding:0 12px;gap:4px;background-size:20px 20px;}
  .svc-viz-custom .custom-node{width:auto;flex:1 1 0;padding:9px 8px;gap:6px;}
  .svc-viz-custom .node-ic{width:24px;height:24px;}
  .svc-viz-custom .node-ic svg{width:14px;height:14px;}
  .svc-viz-custom .node-name{font-size:11px;}
  .svc-viz-custom .node-tag{display:none;}
  .svc-viz-custom .node-kind{font-size:8px;letter-spacing:1px;}
  .svc-viz-custom .custom-foot{padding:8px 11px;}
  .svc-viz-custom .pill{padding:4px 8px;font-size:9px;}
  .svc-viz-custom .custom-pills .pill:nth-child(2){display:none;}
  .svc-viz-custom .stat-num{font-size:12px;}
  .svc-viz-custom .stat-lbl{font-size:8px;}
}

/* --- seo --- */
.svc-viz-seo{
  width:100%;
  max-width:680px;
  margin:0 auto;
  font-family:var(--font-display, "Geist", system-ui, sans-serif);
}
.svc-viz-seo *{box-sizing:border-box;}

.svc-viz-seo .seo-frame{
  position:relative;
  width:100%;
  min-height:332px;
  background:linear-gradient(180deg,#161616 0%,#0d0d0d 100%);
  border:1px solid var(--border-strong,#2a2a2a);
  border-radius:var(--radius-lg,14px);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:hidden;
  box-shadow:0 18px 44px -18px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.04);
}
.svc-viz-seo .seo-sheen{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,0.07), transparent 60%);
}

/* search bar */
.svc-viz-seo .seo-searchbar{
  position:relative;
  display:flex; align-items:center; gap:10px;
  height:40px; padding:0 14px;
  background:#1c1c1c;
  border:1px solid var(--border-strong,#2e2e2e);
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.svc-viz-seo .seo-glass{color:var(--ink-muted,#707070); flex:none;}
.svc-viz-seo .seo-query{
  font-size:14px; color:var(--ink,#EDEDED); font-weight:500; letter-spacing:.1px;
}
.svc-viz-seo .seo-caret{
  width:1.5px; height:16px; background:var(--ink-secondary,#A1A1A1);
  margin-left:1px; animation:seo-blink 1.1s steps(1) infinite;
}
.svc-viz-seo .seo-tools{
  margin-left:auto;
  font-family:var(--font-mono,"Geist Mono",monospace);
  font-size:10.5px; color:var(--ink-muted,#707070); letter-spacing:.2px;
}

/* body layout */
.svc-viz-seo .seo-body{
  display:grid;
  grid-template-columns:1fr 196px;
  gap:16px;
  flex:1;
  min-height:0;
}

/* results */
.svc-viz-seo .seo-results{display:flex; flex-direction:column; gap:12px;}
.svc-viz-seo .seo-result{display:flex; gap:10px;}

.svc-viz-seo .seo-result--top{
  position:relative;
  padding:11px 12px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.015));
  border:1px solid var(--border-strong,#333);
  border-radius:var(--radius-md,10px);
  box-shadow:0 6px 18px -10px rgba(0,0,0,0.7);
}

.svc-viz-seo .seo-rank{display:flex; flex-direction:column; align-items:center; gap:3px; padding-top:1px;}
.svc-viz-seo .seo-rank-num{
  font-family:var(--font-mono,"Geist Mono",monospace);
  font-size:11px; font-weight:600; color:var(--ink,#EDEDED);
  background:#000; border:1px solid var(--border-strong,#3a3a3a);
  border-radius:5px; padding:2px 5px; line-height:1;
}
.svc-viz-seo .seo-rank-num--dim{color:var(--ink-muted,#707070); background:transparent; border-color:var(--border,#262626);}
.svc-viz-seo .seo-up{color:var(--ink,#EDEDED); animation:seo-bob 2.4s ease-in-out infinite;}

.svc-viz-seo .seo-result-main{min-width:0;}
.svc-viz-seo .seo-url-row{display:flex; align-items:center; gap:7px; margin-bottom:3px;}
.svc-viz-seo .seo-favicon{
  width:16px; height:16px; flex:none;
  display:grid; place-items:center;
  background:#000; border:1px solid var(--border-strong,#3a3a3a); border-radius:4px;
  font-size:9px; font-weight:700; color:var(--ink,#EDEDED);
}
.svc-viz-seo .seo-url{
  font-family:var(--font-mono,"Geist Mono",monospace);
  font-size:11px; color:#9bbfa6; letter-spacing:.1px;
}
.svc-viz-seo .seo-url-path{color:var(--ink-muted,#707070);}
.svc-viz-seo .seo-url--dim{color:#7d9485; font-size:10.5px;}

.svc-viz-seo .seo-title{
  font-size:15px; line-height:1.25; font-weight:600; color:#ffffff;
  margin:1px 0 5px; letter-spacing:-.1px;
}
.svc-viz-seo .seo-title--dim{font-size:13px; font-weight:500; color:var(--ink-secondary,#A1A1A1); margin:0;}
.svc-viz-seo .seo-snippet{
  margin:0; font-size:11.5px; line-height:1.45; color:var(--ink-secondary,#A1A1A1);
}

.svc-viz-seo .seo-result--dim{padding:0 12px; opacity:.85;}

/* growth panel */
.svc-viz-seo .seo-growth{
  display:flex; flex-direction:column;
  background:#101010;
  border:1px solid var(--border-strong,#2a2a2a);
  border-radius:var(--radius-md,10px);
  padding:12px 13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.svc-viz-seo .seo-growth-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px;}
.svc-viz-seo .seo-growth-label{font-size:12px; font-weight:600; color:var(--ink,#EDEDED); letter-spacing:-.1px;}
.svc-viz-seo .seo-growth-period{
  font-family:var(--font-mono,"Geist Mono",monospace);
  font-size:9.5px; color:var(--ink-muted,#707070);
}
.svc-viz-seo .seo-chart{flex:1; min-height:80px; position:relative;}
.svc-viz-seo .seo-bars rect{fill:#ffffff; opacity:.07;}
.svc-viz-seo .seo-line{
  stroke-dasharray:320; stroke-dashoffset:320;
  animation:seo-draw 2.6s ease-out forwards;
}
.svc-viz-seo .seo-dot{animation:seo-pulse 2.4s ease-in-out infinite; transform-origin:center;}

.svc-viz-seo .seo-growth-foot{display:flex; align-items:baseline; gap:7px; margin-top:9px;}
.svc-viz-seo .seo-delta{
  font-family:var(--font-mono,"Geist Mono",monospace);
  font-size:19px; font-weight:600; color:#ffffff; line-height:1; letter-spacing:-.3px;
}
.svc-viz-seo .seo-delta-sub{font-size:10px; color:var(--ink-muted,#707070);}

/* animations */
@media (prefers-reduced-motion: no-preference){
  @keyframes seo-blink{0%,50%{opacity:1}51%,100%{opacity:0}}
  @keyframes seo-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
  @keyframes seo-draw{to{stroke-dashoffset:0}}
  @keyframes seo-pulse{0%,100%{opacity:1}50%{opacity:.35}}
}
@media (prefers-reduced-motion: reduce){
  .svc-viz-seo .seo-line{stroke-dashoffset:0;}
}

/* responsive */
@media (max-width:860px){
  .svc-viz-seo{max-width:100%;}
  .svc-viz-seo .seo-frame{min-height:0; padding:12px;}
  .svc-viz-seo .seo-body{grid-template-columns:1fr; gap:12px;}
  .svc-viz-seo .seo-result--dim{display:none;}
  .svc-viz-seo .seo-snippet:nth-of-type(2){display:none;}
  .svc-viz-seo .seo-tools{display:none;}
  .svc-viz-seo .seo-growth{padding:10px;}
  .svc-viz-seo .seo-chart{min-height:54px;}
  .svc-viz-seo .seo-title{font-size:13.5px;}
}


/* ===== Why NEVIS - bento ===== */
.why-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(150px, auto); gap: 16px; margin-top: var(--space-2xl); }
.wb-cell { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008) 62%); padding: 26px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.wb-cell:hover { border-color: var(--border-strong); background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015) 62%); transform: translateY(-2px); }
.wb-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border-strong); background: rgba(255,255,255,0.04); color: var(--ink); flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.wb-ico svg { width: 19px; height: 19px; }
.wb-cell h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.wb-cell p { font-size: 0.95rem; line-height: 1.6; color: var(--ink-secondary); margin: 0; }

.wb-cell--focal { grid-column: span 2; padding: 30px 32px; }
.wb-head { display: flex; align-items: center; gap: 14px; }
.wb-head h3 { font-size: 1.5rem; letter-spacing: -0.03em; }
.wb-cell--focal > p { font-size: 1.02rem; max-width: 48ch; color: var(--ink-secondary); }
.wb-pipeline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wb-pipe-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--ink-faint); margin-top: auto; }
.wb-step { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.03em; color: var(--ink-secondary); padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.03); white-space: nowrap; }
.wb-step--end { color: #000; background: #fff; border-color: #fff; font-weight: 600; }
.wb-conn { flex: 1; min-width: 16px; height: 1px; background: linear-gradient(90deg, var(--border-strong), var(--border)); position: relative; }
.wb-conn::after { content: ''; position: absolute; top: -2px; left: 0; width: 6px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.9); box-shadow: 0 0 6px rgba(255,255,255,0.6); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .wb-conn::after { animation: wbPulse 3.2s linear infinite; animation-delay: var(--d, 0s); } }
@keyframes wbPulse { 0% { left: 0; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.wb-cell--stat { justify-content: center; gap: 7px; }
.wb-num { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.1rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.wb-plus { color: var(--ink-muted); }
.wb-lbl { font-size: 0.88rem; color: var(--ink-muted); }
.wb-stat-meta { display: flex; flex-direction: column; gap: 4px; }
.wb-sub { font-size: 0.85rem; line-height: 1.45; color: var(--ink-faint); max-width: 24ch; }

.wb-cell--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 30px; }
.wb-wide-text { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.wb-chart { display: flex; align-items: flex-end; gap: 6px; height: 104px; flex: 0 0 210px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(255,255,255,0.02); }
.wb-chart span { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.07)); }
.wb-chart span:last-child { background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.45)); }

@media (max-width: 1024px) {
  .why-bento { grid-template-columns: repeat(2, 1fr); }
  .wb-cell--focal { grid-column: span 2; grid-row: span 1; }
  .wb-cell--wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .why-bento { grid-template-columns: 1fr; }
  .wb-cell--focal, .wb-cell--wide { grid-column: span 1; }
  .wb-cell--wide { flex-direction: column; align-items: stretch; }
  .wb-chart { flex: 0 0 auto; height: 90px; }
}

/* ===== Process flow (home #proces) ===== */
.proc-flow { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: var(--space-2xl); }
@media (min-width: 860px) { .proc-flow { grid-template-columns: repeat(5, 1fr); gap: 0; } }
.proc-step { position: relative; padding: 0 0 26px; }
@media (min-width: 860px) { .proc-step { padding: 0 20px 0 0; min-height: 1px; } }
.proc-step:last-child { padding-right: 0; }
.proc-top { display: flex; align-items: center; margin-bottom: 22px; position: relative; }
.proc-node { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px; border: 1px solid var(--border-strong); background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012) 70%); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); flex: 0 0 auto; position: relative; z-index: 2; transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out); }
.proc-node svg { width: 21px; height: 21px; }
.proc-step:hover .proc-node { border-color: rgba(255,255,255,0.32); background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 70%); }
.proc-line { flex: 1; height: 1px; margin-left: 14px; background: linear-gradient(90deg, var(--border-strong), var(--border)); position: relative; overflow: hidden; }
.proc-line::after { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .proc-line::after { animation: procFlow 3.4s linear infinite; }
  .proc-step:nth-child(1) .proc-line::after { animation-duration: 3.2s; }
  .proc-step:nth-child(2) .proc-line::after { animation-delay: .6s; animation-duration: 3.7s; }
  .proc-step:nth-child(3) .proc-line::after { animation-delay: 1.2s; animation-duration: 3.4s; }
  .proc-step:nth-child(4) .proc-line::after { animation-delay: 1.8s; animation-duration: 3.9s; }
}
@keyframes procFlow { 0% { left: -40%; } 100% { left: 120%; } }
.proc-num { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; color: var(--ink-secondary); margin-bottom: 9px; }
.proc-step h3 { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 8px; }
.proc-step p { font-size: 0.92rem; line-height: 1.6; color: var(--ink-secondary); margin: 0; max-width: 27ch; }
@media (max-width: 859px) {
  .proc-flow { gap: 0; }
  .proc-line { display: none; }
  .proc-step { padding: 0 0 8px 64px; }
  .proc-top { position: absolute; left: 0; top: 0; margin: 0; }
  .proc-step:not(:last-child)::before { content: ''; position: absolute; left: 23px; top: 54px; bottom: 4px; width: 1px; background: var(--border); }
  .proc-num { padding-top: 2px; }
}

.project-tag-year { background: transparent; border: 1px solid var(--border); color: var(--ink-muted); font-family: var(--font-mono); letter-spacing: 0.08em; }


/* ===== Section background rhythm: alternating black / elevated (homepage) ===== */
/* black (#000): Usluge, Proces, Portfolio, Novosti */
#usluge, #proces, #portfolio, #novosti { background: var(--void); }
/* elevated (#0A0A0A): Zašto NEVIS, Branše, O nama, Kontakt */
#zasto-nevis, #branse, #o-nama, #kontakt { background: var(--surface-alt); }


/* ===== Contact: required marker + direct-contact block ===== */
.contact-form label .required { color: var(--ink-muted); margin-left: 2px; }
.contact-direct { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-xl); }
.contact-direct-item { display: inline-flex; align-items: center; gap: 12px; padding: 13px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--ink); transition: border-color .3s var(--ease-out), background .3s var(--ease-out); }
.contact-direct-item:hover { border-color: var(--border-strong); background: rgba(255,255,255,0.03); }
.contact-direct-item > svg { width: 18px; height: 18px; color: var(--ink-secondary); flex-shrink: 0; }
.contact-direct-item .cd-label { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px; }
.contact-direct-item > span { font-size: 0.95rem; line-height: 1.2; }


/* ===== Single project: lead-style first paragraph (thin imported projects) ===== */
.project-content .entry-content > p:first-of-type {
  font-size: 1.35rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--ink);
}
@media (max-width: 700px){ .project-content .entry-content > p:first-of-type { font-size: 1.15rem; } }


/* ===== Single project: compact spacing for thin (imported) projects ===== */
.single-projekat .section { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.single-projekat .project-featured-img { padding-bottom: var(--space-xl); }
.single-projekat .project-hero { padding-bottom: var(--space-xl); }
@media (min-width:1024px){ .single-projekat .project-detail-layout { align-items: start; } }


/* ===== Single project: image-left (2/3) + info-right (1/3) ===== */
.project-main { padding-top: var(--space-lg); }
.project-split { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: start; }
@media (min-width: 1024px) { .project-split { grid-template-columns: 2fr 1fr; gap: var(--space-3xl); } }
.project-split-image img { width: 100%; height: auto; display: block; border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: 0 30px 80px -40px rgba(0,0,0,0.85); }
.project-split-info { display: flex; flex-direction: column; gap: var(--space-xl); }
@media (min-width: 1024px) { .project-split-info { position: sticky; top: 110px; } }
.project-split-info .entry-content { font-size: 1.075rem; line-height: 1.7; color: var(--ink-secondary); }
.project-info-meta { display: flex; flex-direction: column; gap: var(--space-lg); border-top: 1px solid var(--border); padding-top: var(--space-xl); }
.project-split-info .project-visit-btn { width: 100%; justify-content: center; }


/* ===== Blog: post grid + cards (archive + homepage) ===== */
.post-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: var(--space-2xl); }
@media (min-width: 700px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005) 60%); transition: border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.post-card:hover { border-color: var(--border-strong); transform: translateY(-4px); box-shadow: 0 24px 60px -28px rgba(0,0,0,0.7); }
.post-card-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); position: relative; }
.post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.post-card:hover .post-card-image img { transform: scale(1.04); }
.post-card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); }
.post-card-ph svg { width: 36px; height: 36px; }
.post-card-body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; }
.post-card-meta { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.post-card-cat { color: var(--ink); border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; }
.post-card-title { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin: 0; }
.post-card-title a { color: var(--ink); transition: color .2s; }
.post-card-title a:hover { color: var(--ink-secondary); }
.post-card-excerpt { font-size: 0.92rem; line-height: 1.6; color: var(--ink-secondary); margin: 0; }
.post-card-more { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.post-card-more svg { width: 15px; height: 15px; transition: transform .2s var(--ease-out); }
.post-card:hover .post-card-more svg { transform: translateX(3px); }

#blog-archive .section-header, #novosti .section-header { max-width: 640px; }
.blog-pagination { margin-top: var(--space-3xl); display: flex; justify-content: center; }
.blog-pagination .nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.blog-pagination .page-numbers { display: inline-flex; align-items: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 12px; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--ink-secondary); font-size: 0.9rem; transition: all .2s var(--ease-out); }
.blog-pagination .page-numbers:hover { border-color: var(--border-strong); color: var(--ink); }
.blog-pagination .page-numbers.current { background: #fff; color: #000; border-color: #fff; }
.blog-pagination .page-numbers svg { width: 14px; height: 14px; }
.blog-empty { text-align: center; padding: var(--space-4xl) 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); color: var(--ink-secondary); }

/* ===== Single blog post ===== */
.post-single { padding: 140px 0 var(--space-4xl); }
.post-single-head { max-width: 760px; margin: 0 auto var(--space-2xl); }
.post-single-head h1 { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: var(--space-md) 0 0; }
.post-single-meta { display: flex; align-items: center; gap: 12px; margin: var(--space-lg) 0 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.post-single-img { max-width: 1000px; margin: 0 auto var(--space-3xl); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); }
.post-single-img img { width: 100%; height: auto; display: block; }
.post-single-body { max-width: 760px; margin: 0 auto; }
.post-single-tags { max-width: 760px; margin: var(--space-2xl) auto 0; display: flex; flex-wrap: wrap; gap: 8px; padding-top: var(--space-lg); border-top: 1px solid var(--border); }
.post-single-nav { max-width: 760px; margin: var(--space-2xl) auto 0; padding-top: var(--space-xl); border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.post-nav-item-next { text-align: right; }
.post-nav-item-next .post-nav-link { align-items: flex-end; }
.post-nav-link { display: inline-flex; flex-direction: column; gap: 4px; }
.post-nav-dir { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 6px; }
.post-nav-dir svg { width: 13px; height: 13px; }
.post-nav-link:not(.post-nav-next) .post-nav-dir svg { transform: rotate(180deg); }
.post-nav-title { font-weight: 600; color: var(--ink); }
.post-nav-link:hover .post-nav-title { color: var(--ink-secondary); }

/* entry-content extras (tables, blockquote, links) - blog + project */
.entry-content table { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; font-size: 0.95rem; }
.entry-content th, .entry-content td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.entry-content th { color: var(--ink); font-weight: 600; border-bottom-color: var(--border-strong); }
.entry-content td { color: var(--ink-secondary); }
.entry-content blockquote { border-left: 2px solid var(--border-strong); padding-left: var(--space-lg); margin: var(--space-xl) 0; font-size: 1.15rem; line-height: 1.6; color: var(--ink); }
.entry-content blockquote cite { display: block; margin-top: 10px; font-size: 0.9rem; color: var(--ink-muted); font-style: normal; }
.entry-content strong { color: var(--ink); }
.entry-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }


/* ===== Usluge (services overview) page ===== */
#usluge-page { padding-top: 160px; }
.usluge-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: var(--space-2xl); }
@media (min-width: 700px) { .usluge-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .usluge-grid { grid-template-columns: repeat(3, 1fr); } }
.usluge-card { display: flex; flex-direction: column; gap: 14px; padding: 30px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.006) 60%); transition: border-color .3s var(--ease-out), transform .3s var(--ease-out); }
.usluge-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.usluge-card-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; color: var(--ink); }
.usluge-card-icon svg { width: 22px; height: 22px; }
.usluge-card-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.usluge-card-title a { color: var(--ink); transition: color .2s; }
.usluge-card-title a:hover { color: var(--ink-secondary); }
.usluge-card-desc { color: var(--ink-secondary); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.usluge-card-features { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 9px; }
.usluge-card-features li { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--ink-secondary); }
.usluge-card-features li svg { width: 15px; height: 15px; color: var(--ink); flex-shrink: 0; }
.usluge-card-link { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.usluge-card-link svg { width: 15px; height: 15px; transition: transform .2s var(--ease-out); }
.usluge-card:hover .usluge-card-link svg { transform: translateX(3px); }
.usluge-cta { margin-top: var(--space-3xl); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.usluge-cta p { color: var(--ink-secondary); font-size: 1.05rem; }

/* ===== Cookie consent ===== */
.cookie-fab {
  position: fixed; bottom: 32px; left: 32px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(20,20,22,.92); border: 1px solid var(--border); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  z-index: 900; cursor: pointer; box-shadow: var(--shadow-lg);
  transition: all .25s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cookie-fab svg { width: 20px; height: 20px; }
.cookie-fab:hover { background: var(--accent); color: #070709; transform: translateY(-4px); }

.cookie-banner {
  position: fixed; bottom: 32px; left: 32px; z-index: 1001;
  width: min(440px, calc(100vw - 48px));
  background: rgba(14,14,16,.97); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.cookie-banner.open { opacity: 1; visibility: visible; transform: translateY(0); }
.cookie-banner-inner { padding: 22px 22px 20px; }
.cookie-banner-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cookie-banner-ico { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--ink); flex: 0 0 34px; }
.cookie-banner-ico svg { width: 19px; height: 19px; }
.cookie-banner-head h3 { margin: 0; font-size: 1.05rem; font-family: var(--font-heading); color: var(--ink); }
.cookie-banner-text { font-size: .875rem; line-height: 1.55; color: var(--ink-muted); margin: 0 0 14px; }
.cookie-banner-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.cookie-settings { display: none; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.cookie-banner.show-settings .cookie-settings { display: flex; }
.cookie-cat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--border); cursor: pointer; }
.cookie-cat-txt { display: flex; flex-direction: column; gap: 2px; }
.cookie-cat-txt strong { font-size: .82rem; color: var(--ink); }
.cookie-cat-txt small { font-size: .72rem; color: var(--ink-muted); }
.cookie-cat input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 18px; cursor: pointer; }
.cookie-cat input:disabled { opacity: .5; cursor: not-allowed; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-btn { flex: 1 1 auto; min-width: 118px; padding: 10px 14px; border-radius: 9px; font-size: .82rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); transition: all .2s ease; }
.cookie-btn-ghost { background: transparent; color: var(--ink-muted); }
.cookie-btn-ghost:hover { color: var(--ink); border-color: var(--ink-muted); }
.cookie-btn-primary { background: var(--ink); color: #070709; border-color: var(--ink); }
.cookie-btn-primary:hover { opacity: .9; }
#cookieSave { display: none; }
.cookie-banner.show-settings #cookieSave { display: inline-flex; align-items: center; justify-content: center; }
.cookie-banner.show-settings #cookieSettingsBtn { display: none; }
@media (max-width: 767px) {
  .cookie-fab { bottom: 20px; left: 20px; width: 40px; height: 40px; }
  .cookie-banner { bottom: 20px; left: 20px; right: 20px; width: auto; }
}

/* ===== Generic page (legal/info pages via page.php) ===== */
.page-hero {
  padding: 140px 0 40px;
  border-bottom: 1px solid var(--border);
}
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
}
.page-content { padding: 56px 0 80px; }
.page-content .entry-content {
  max-width: 760px;
  margin: 0 auto;
  color: var(--ink-muted);
  line-height: 1.75;
  font-size: 1rem;
}
.page-content .entry-content h2 { color: var(--ink); font-family: var(--font-heading); font-size: 1.35rem; margin: 38px 0 12px; letter-spacing: -0.01em; }
.page-content .entry-content h3 { color: var(--ink); font-size: 1.1rem; margin: 24px 0 8px; }
.page-content .entry-content h2:first-child, .page-content .entry-content h3:first-child { margin-top: 0; }
.page-content .entry-content p { margin: 0 0 14px; }
.page-content .entry-content ul, .page-content .entry-content ol { margin: 0 0 16px; padding-left: 22px; }
.page-content .entry-content li { margin: 0 0 8px; }
.page-content .entry-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.page-content .entry-content a:hover { color: var(--accent); }
.page-content .entry-content strong { color: var(--ink); }
.page-content .entry-content small { opacity: .75; }

/* ===== Related services (internal linking on sub-service pages) ===== */
.related-services { padding: 40px 0 0; }
.related-services-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.related-services-head h2 { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.5vw, 1.9rem); color: var(--ink); margin: 0; }
.related-parent-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: .875rem; font-weight: 600; }
.related-parent-link:hover { color: var(--ink); }
.related-parent-link svg { width: 15px; height: 15px; }
.related-services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.related-service-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); color: var(--ink); font-weight: 600; font-size: .95rem; transition: all .2s ease; }
.related-service-card:hover { border-color: var(--ink-muted); transform: translateY(-2px); }
.related-service-card svg { width: 16px; height: 16px; color: var(--ink-muted); flex: 0 0 16px; }
.related-service-card:hover svg { color: var(--accent); }

/* Sub-service card title as link (parent -> child internal linking) */
.sub-service-card h3 a { color: inherit; text-decoration: none; }
.sub-service-card h3 a:hover { color: var(--accent); }


/* Nested drawer sub-service accordion */
.drawer-sub-label { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.drawer-nav-toggle--sub { font-size: 0.9rem; font-weight: 500; color: var(--ink-secondary); padding: 10px 12px 10px 20px; }
.drawer-nav-group--sub .drawer-nav-submenu a { padding-left: 44px; font-size: 0.85rem; }
.drawer-nav-group--sub .drawer-sub-all { font-weight: 600; color: var(--ink); }

/* Drawer: parent is a link, arrow toggles the submenu */
.drawer-nav-row { display: flex; align-items: stretch; }
.drawer-nav-row > a { flex: 1 1 auto; }
.drawer-nav-link { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink); padding: 14px 12px; border-radius: var(--radius-md); transition: all var(--duration-fast) ease; }
.drawer-nav-link:hover { background: var(--surface-alt); }
.drawer-nav-arrow { flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 6px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; color: var(--ink-muted); transition: all var(--duration-fast) ease; }
.drawer-nav-arrow:hover, .drawer-nav-arrow.active { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }
.drawer-nav-arrow svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.drawer-nav-arrow.active svg { transform: rotate(180deg); }
.drawer-nav-row--sub .drawer-nav-arrow { width: 30px; height: 30px; }
.drawer-nav-row--sub > .drawer-nav-link { font-family: inherit; font-size: 0.9rem; font-weight: 500; color: var(--ink-secondary); padding: 10px 12px 10px 20px; }
.drawer-nav-group--sub .drawer-nav-submenu a { padding-left: 44px; font-size: 0.85rem; }

/* Drawer custom scrollbar (subtle, on-brand) */
.drawer { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.drawer::-webkit-scrollbar { width: 10px; }
.drawer::-webkit-scrollbar-track { background: transparent; }
.drawer::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 3px solid var(--surface); background-clip: padding-box; }
.drawer::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); background-clip: padding-box; }

/* =====================================================================
   Responsive audit fixes (v9.13.7)
   Confirmed in-browser at 360/390px + short-landscape viewports.
   ===================================================================== */

/* --- HIGH: 404 page had no styling (error-code inherited 16px body text,
   and content was overlapped by the fixed ~84px header) --- */
.error-404 { padding: 160px 0 90px; min-height: 60vh; display: flex; align-items: center; }
.error-404 .container { width: 100%; }
.error-code {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(80px, 13vw, 150px); line-height: .9; letter-spacing: -.04em;
  color: var(--ink);
  background: linear-gradient(180deg, var(--ink), var(--ink-muted));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (max-width: 767px) {
  .error-404 { padding: 116px 0 64px; min-height: 56vh; }
  .error-code { font-size: clamp(64px, 22vw, 110px); }
}

/* --- HIGH: cookie banner had no max-height; when settings are expanded on
   short/landscape phones its top went above the viewport (unreachable) --- */
.cookie-banner { max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 400px) { .cookie-btn { min-width: 0; } }

/* --- MED (preventive): author-editable rich text could overflow horizontally
   on long URLs / code / wide tables (no active overflow today, defensive) --- */
.entry-content { overflow-wrap: anywhere; }
.entry-content pre { overflow-x: auto; max-width: 100%; }
.entry-content table { display: block; width: 100%; overflow-x: auto; }
.entry-content img { max-width: 100%; height: auto; }

/* --- MED: two-column prev/next nav grids should stack on phones --- */
@media (max-width: 600px) {
  .project-nav { grid-template-columns: 1fr; }
  .post-single-nav { grid-template-columns: 1fr; }
}

/* --- MED (preventive): flex rows that can run long should wrap on phones --- */
.projects-pagination .nav-links { flex-wrap: wrap; justify-content: center; }
.service-hero-breadcrumb { flex-wrap: wrap; }

/* --- LOW: feature checklist gets cramped at 2 columns on the narrowest phones --- */
@media (max-width: 420px) { .service-hero-features { grid-template-columns: 1fr; } }

/* --- LOW: form inputs were 15px (iOS auto-zooms <16px) and ~39px tall --- */
@media (max-width: 767px) {
  .contact-form input, .contact-form textarea, .contact-form select,
  .contact-page-form input, .contact-page-form textarea, .contact-page-form select {
    font-size: 16px;
  }
}

/* --- LOW: tighten oversized hero top-bands on phones (still clears the header) --- */
@media (max-width: 767px) {
  #usluge-page { padding-top: 112px; }
  .page-hero-section { padding-top: 112px; }
  .project-hero { padding-top: 104px; }
  .post-single { padding-top: 104px; }
  .contact-hero { padding-top: 100px; }
  .page-hero { padding-top: 104px; }
}

/* --- LOW: contact form / info card padding eased on small phones --- */
@media (max-width: 480px) {
  .contact-page-form { padding: 22px; }
  .contact-info-card { padding: 22px; }
}

/* --- LOW: secondary tap targets bumped toward ~44px on touch --- */
@media (hover: none) {
  .cta-phone { min-height: 44px; display: inline-flex; align-items: center; }
  .project-back-link { padding: 6px 0; }
}