/* ============================================================
   VOZNA Studio — Case Study v2
   Page itself uses VOZNA's design language directly.
   ============================================================ */

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

:root {
  --vz-green: #006039;
  --vz-green-deep: #00321d;
  --vz-green-darker: #001a0f;
  --vz-green-soft: #0a7045;
  --vz-gold: #A37E2C;
  --vz-gold-soft: #C4A055;
  --vz-gold-pale: #d9bd7d;
  --vz-cream: #F4ECD8;
  --vz-paper: #FAF7EE;
  --vz-paper-soft: #F6EFDD;
  --vz-ink: #1A1A1A;
  --vz-ink-soft: #3a3a3a;
  --vz-rule: #E5DDC8;
  --vz-rule-soft: #EFE7D2;
}

html { scroll-behavior: smooth; }
html, body {
  background: var(--vz-paper);
  color: var(--vz-ink);
  font-family: 'Red Hat Display', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.serif { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-weight: 500; }
.italic { font-style: italic; }
.upper { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 500; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"]  { transform: scale(0.96); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-in {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal-stagger].is-in > * { opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-in > *:nth-child(1)  { transition-delay: 0.05s; }
[data-reveal-stagger].is-in > *:nth-child(2)  { transition-delay: 0.12s; }
[data-reveal-stagger].is-in > *:nth-child(3)  { transition-delay: 0.19s; }
[data-reveal-stagger].is-in > *:nth-child(4)  { transition-delay: 0.26s; }
[data-reveal-stagger].is-in > *:nth-child(5)  { transition-delay: 0.33s; }
[data-reveal-stagger].is-in > *:nth-child(6)  { transition-delay: 0.40s; }
[data-reveal-stagger].is-in > *:nth-child(7)  { transition-delay: 0.47s; }
[data-reveal-stagger].is-in > *:nth-child(8)  { transition-delay: 0.54s; }
[data-reveal-stagger].is-in > *:nth-child(9)  { transition-delay: 0.61s; }
[data-reveal-stagger].is-in > *:nth-child(10) { transition-delay: 0.68s; }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes float-y-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes glow {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ============================================================
   TOP STRIP — minimal Vitarum reference
   ============================================================ */
.topstrip {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: rgba(0, 23, 14, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.topstrip-inner {
  height: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}
.topstrip .left {
  display: flex; align-items: center; gap: 18px;
  letter-spacing: 0.2em; text-transform: uppercase; font-size: 11px;
}
.topstrip .left .brand { color: #fff; letter-spacing: 0.34em; }
.topstrip .left .sep { opacity: 0.4; }
.topstrip .left .crumb { color: var(--vz-gold-pale); }
.topstrip .right { display: flex; align-items: center; gap: 28px; }
.topstrip .right a { opacity: 0.7; transition: opacity 0.2s; }
.topstrip .right a:hover { opacity: 1; color: var(--vz-gold-pale); }
.topstrip .pill {
  padding: 8px 16px;
  border: 1px solid rgba(196, 160, 85, 0.4);
  border-radius: 999px;
  color: var(--vz-gold-pale);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 10px;
  transition: all 0.25s;
}
.topstrip .pill:hover { background: var(--vz-gold); color: #fff; border-color: var(--vz-gold); }

/* ============================================================
   SECTIONS
   ============================================================ */
section { position: relative; padding: 140px 60px; }
.container       { max-width: 1640px; margin: 0 auto; }
.container-mid   { max-width: 1280px; margin: 0 auto; }
.container-tight { max-width: 980px;  margin: 0 auto; }

.bg-paper { background: var(--vz-paper); color: var(--vz-ink); }
.bg-cream { background: var(--vz-cream); color: var(--vz-ink); }
.bg-green { background: var(--vz-green); color: #fff; }
.bg-deep  { background: var(--vz-green-deep); color: #fff; }
.bg-dark  { background: var(--vz-green-darker); color: #fff; }
.bg-ink   { background: #0d0d0d; color: #fff; }
.bg-white { background: #fff; color: var(--vz-ink); }

/* ============================================================
   SECTION INTROS — eyebrow + title pattern
   matches VOZNA's own product-page rhythm
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--vz-gold);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 28px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}
.bg-green .eyebrow, .bg-deep .eyebrow, .bg-dark .eyebrow, .bg-ink .eyebrow {
  color: var(--vz-gold-pale);
}

.title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(48px, 5.4vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--vz-green);
  margin-bottom: 32px;
}
.title em { font-style: italic; color: var(--vz-gold); font-weight: 400; }
.bg-green .title, .bg-deep .title, .bg-dark .title, .bg-ink .title { color: #fff; }
.bg-green .title em, .bg-deep .title em, .bg-dark .title em, .bg-ink .title em { color: var(--vz-gold-pale); }

.lede {
  font-size: 19px;
  line-height: 1.65;
  color: var(--vz-ink-soft);
  max-width: 720px;
  margin-bottom: 64px;
}
.bg-green .lede, .bg-deep .lede, .bg-dark .lede, .bg-ink .lede { color: rgba(255, 255, 255, 0.7); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  padding: 0;
  background:
    radial-gradient(ellipse 60% 50% at 75% 25%, rgba(196, 160, 85, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 15% 75%, rgba(0, 96, 57, 0.7) 0%, transparent 60%),
    linear-gradient(165deg, #00321d 0%, #006039 50%, #002a18 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.5;
}
.hero-grid {
  position: relative;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 140px 60px 60px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-copy { color: #fff; position: relative; z-index: 2; }

.brand-block {
  display: flex; align-items: center; gap: 22px;
  margin-bottom: 42px;
}
.brand-block .v-circle {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1.5px solid rgba(196, 160, 85, 0.55);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 46px;
  color: var(--vz-gold-pale);
  font-style: italic;
  font-weight: 400;
  position: relative;
}
.brand-block .v-circle::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(196, 160, 85, 0.18);
  animation: glow 4s ease-in-out infinite;
}
.brand-block .word {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1;
}
.brand-block .sub {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--vz-gold-pale);
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--vz-gold-pale);
  margin-bottom: 30px;
}
.hero-tag::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}
.hero-tag .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vz-gold-pale);
  animation: glow 2.4s ease-in-out infinite;
}

.hero-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(56px, 5.8vw, 104px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 36px;
}
.hero-h1 em { font-style: italic; color: var(--vz-gold-pale); }
.hero-h1 .stack {
  display: block;
  font-size: 0.6em;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  margin-top: 14px;
  letter-spacing: 0;
}

.hero-sub {
  font-size: 20px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin-bottom: 48px;
  font-weight: 300;
}

.hero-actions {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 60px;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 32px;
  background: var(--vz-gold);
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.25s;
}
.btn-primary:hover {
  background: var(--vz-gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(196, 160, 85, 0.35);
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 32px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.25s;
}
.btn-ghost:hover {
  border-color: var(--vz-gold-pale);
  color: var(--vz-gold-pale);
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 700px;
}
.hero-meta .item .k {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vz-gold-pale);
  margin-bottom: 10px;
}
.hero-meta .item .v {
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  letter-spacing: 0.01em;
}

.hero-visual {
  position: relative;
  height: 720px;
}
.hero-visual .mock {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.55), 0 30px 60px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-visual .mock-laptop {
  width: 86%;
  top: 12%;
  left: 7%;
  transform: perspective(1800px) rotateY(-12deg) rotateX(4deg);
  animation: float-y-soft 7s ease-in-out infinite;
}
.hero-visual .mock-phone {
  width: 220px;
  top: 32%;
  right: -10%;
  border-radius: 36px;
  border: 6px solid #1a1a1a;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
  animation: float-y 6s ease-in-out infinite 0.5s;
  z-index: 2;
}
.hero-visual .mock-phone img { display: block; width: 100%; }
.hero-visual .glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 160, 85, 0.18) 0%, transparent 65%);
  top: 20%; left: 30%;
  pointer-events: none;
  animation: glow 5s ease-in-out infinite;
}

.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 3;
}
.scroll-hint::after {
  content: '';
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--vz-gold-pale));
  animation: scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.3); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ============================================================
   BROWSER FRAME (for desktop screenshots)
   ============================================================ */
.frame {
  background: #1A1A1A;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.frame-bar {
  height: 30px;
  background: #1A1A1A;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 7px;
}
.frame-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #444; }
.frame-bar .dot:nth-child(1) { background: #FF5F57; }
.frame-bar .dot:nth-child(2) { background: #FEBC2E; }
.frame-bar .dot:nth-child(3) { background: #28C840; }
.frame-bar .url {
  margin-left: 16px;
  flex: 1;
  height: 18px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'JetBrains Mono', monospace;
  max-width: 360px;
}
.frame-body { background: #fff; line-height: 0; }
.frame-body img { width: 100%; display: block; }

/* iPhone bezel */
.iphone {
  position: relative;
  width: 280px;
  border-radius: 44px;
  background: #1a1a1a;
  padding: 8px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35), 0 20px 40px rgba(0, 50, 30, 0.25);
}
.iphone .notch {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 22px;
  background: #000;
  border-radius: 999px;
  z-index: 2;
}
.iphone .screen {
  border-radius: 36px;
  overflow: hidden;
  background: var(--vz-paper);
  aspect-ratio: 1179 / 2556;
}
.iphone .screen img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.iphone.lg { width: 320px; }
.iphone.sm { width: 240px; }

/* ============================================================
   SNAPSHOT CARD
   ============================================================ */
.snapshot {
  padding: 80px 60px;
  background: var(--vz-paper-soft);
  border-bottom: 1px solid var(--vz-rule);
}
.snap-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  max-width: 1640px;
  margin: 0 auto;
}
.snap-item {
  padding: 12px 32px;
  border-right: 1px solid var(--vz-rule);
}
.snap-item:last-child { border-right: none; }
.snap-item:first-child { padding-left: 0; }
.snap-item .k {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vz-gold);
  margin-bottom: 12px;
}
.snap-item .v {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--vz-green);
  line-height: 1.1;
}
.snap-item .v.italic { font-style: italic; color: var(--vz-gold); }

/* ============================================================
   CHALLENGE / PAIN section
   ============================================================ */
.challenge {
  position: relative;
}
.challenge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: flex-start;
}
.pain-list, .gain-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pain-list li, .gain-list li {
  display: flex;
  gap: 16px;
  padding: 22px 28px;
  background: #fff;
  border: 1px solid var(--vz-rule);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--vz-ink-soft);
  transition: all 0.3s;
}
.pain-list li:hover, .gain-list li:hover {
  transform: translateX(4px);
  border-color: var(--vz-gold);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.05);
}
.pain-list li .ic, .gain-list li .ic {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  margin-top: -2px;
}
.pain-list li .ic { background: rgba(180, 50, 50, 0.1); color: #b03c3c; }
.gain-list li .ic { background: rgba(0, 96, 57, 0.12); color: var(--vz-green); }

.column-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  margin-bottom: 28px;
  color: var(--vz-green);
}
.column-label.pain { color: #8a3232; }
.column-label.pain em { color: #b03c3c; font-style: italic; }
.column-label em { font-style: italic; color: var(--vz-gold); }

/* ============================================================
   TECH STACK GRID
   ============================================================ */
.stack-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}
.stack-cell {
  background: #0d0d0d;
  padding: 36px 32px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: space-between;
  transition: background 0.3s;
}
.stack-cell:hover { background: #131313; }
.stack-cell .k {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--vz-gold-pale);
}
.stack-cell .v {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  line-height: 1.05;
  color: #fff;
}
.stack-cell .v em { font-style: italic; color: var(--vz-gold-pale); }
.stack-cell .d {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

/* ============================================================
   MODULES — 25 sections grid
   ============================================================ */
.mods {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.mod {
  background: #fff;
  border: 1px solid var(--vz-rule);
  border-radius: 12px;
  padding: 22px 20px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.mod::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--vz-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.mod:hover {
  transform: translateY(-3px);
  border-color: var(--vz-gold);
  box-shadow: 0 18px 40px rgba(0, 96, 57, 0.08);
}
.mod:hover::before { transform: scaleX(1); }
.mod .n {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--vz-gold);
}
.mod .t {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--vz-green);
  line-height: 1.1;
}
.mod .r {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #999;
  margin-top: auto;
}
.mod .d {
  font-size: 12px;
  color: var(--vz-ink-soft);
  line-height: 1.5;
}

/* ============================================================
   ROLES — 6 cards
   ============================================================ */
.roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.role {
  background: #fff;
  border: 1px solid var(--vz-rule);
  border-radius: 16px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.35s;
}
.role::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--vz-gold);
  transition: width 0.4s;
}
.role:hover::after { width: 100%; }
.role:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 96, 57, 0.3);
  box-shadow: 0 24px 50px rgba(0, 96, 57, 0.1);
}
.role .role-n {
  position: absolute;
  top: 24px; right: 28px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 26px;
  color: var(--vz-gold);
  opacity: 0.45;
}
.role .role-k {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--vz-green);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
}
.role.gold .role-k { background: var(--vz-gold); }
.role .role-t {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  margin-bottom: 10px;
  color: var(--vz-ink);
  line-height: 1.1;
}
.role .role-d {
  font-size: 14px;
  color: var(--vz-ink-soft);
  line-height: 1.55;
  margin-bottom: 22px;
}
.role .role-a {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.role .role-a span {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 96, 57, 0.06);
  color: var(--vz-green);
  font-size: 11px;
  font-weight: 500;
}

/* ============================================================
   SHOWCASE — feature with screenshot
   ============================================================ */
.showcase {
  padding: 140px 60px;
}
.showcase-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 100px;
  align-items: center;
  max-width: 1640px;
  margin: 0 auto;
}
.showcase-grid.reverse {
  grid-template-columns: 1.15fr 0.85fr;
}
.showcase-grid.reverse .showcase-copy { order: 2; }
.showcase-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--vz-gold);
  margin-bottom: 12px;
  letter-spacing: 0.2em;
}
.showcase-t {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  color: var(--vz-green);
}
.showcase-t em { font-style: italic; color: var(--vz-gold); }
.bg-green .showcase-t, .bg-deep .showcase-t, .bg-dark .showcase-t, .bg-ink .showcase-t { color: #fff; }
.bg-green .showcase-t em, .bg-deep .showcase-t em, .bg-dark .showcase-t em, .bg-ink .showcase-t em { color: var(--vz-gold-pale); }

.showcase-d {
  font-size: 17px;
  color: var(--vz-ink-soft);
  line-height: 1.7;
  margin-bottom: 32px;
}
.bg-green .showcase-d, .bg-deep .showcase-d, .bg-dark .showcase-d, .bg-ink .showcase-d { color: rgba(255,255,255,0.78); }

.bullets { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.bullets li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  color: var(--vz-ink-soft);
}
.bg-green .bullets li, .bg-deep .bullets li, .bg-dark .bullets li, .bg-ink .bullets li { color: rgba(255,255,255,0.8); }
.bullets li::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vz-gold);
  margin-top: 9px;
  flex-shrink: 0;
}
.bullets li strong { color: var(--vz-green); font-weight: 600; }
.bg-green .bullets li strong, .bg-deep .bullets li strong, .bg-dark .bullets li strong, .bg-ink .bullets li strong {
  color: var(--vz-gold-pale);
}

/* Showcase visual wrappers */
.showcase-visual {
  position: relative;
  transition: transform 0.5s;
}
.showcase-visual:hover { transform: translateY(-6px); }
.showcase-visual .frame {
  box-shadow: 0 50px 100px -20px rgba(0, 50, 30, 0.25),
              0 20px 50px rgba(0, 0, 0, 0.08);
}
.bg-green .showcase-visual .frame,
.bg-deep .showcase-visual .frame,
.bg-dark .showcase-visual .frame,
.bg-ink .showcase-visual .frame {
  box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.55),
              0 20px 50px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   DASHBOARD MOCK (custom HTML with USD)
   ============================================================ */
.dash {
  background: var(--vz-paper);
  border-radius: 14px;
  padding: 28px;
  border: 1px solid var(--vz-rule);
}
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--vz-rule);
  margin-bottom: 24px;
}
.dash-head .ttl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  color: var(--vz-green);
}
.dash-head .date {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vz-gold);
}
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.dash-kpi {
  background: #fff;
  border: 1px solid var(--vz-rule);
  border-radius: 12px;
  padding: 18px 20px;
}
.dash-kpi .k {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vz-gold);
  margin-bottom: 10px;
}
.dash-kpi .v {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  color: var(--vz-green);
  line-height: 1;
}
.dash-kpi .v em { font-style: italic; }
.dash-kpi .t { font-size: 11px; color: #888; margin-top: 6px; }
.dash-kpi .t.up { color: var(--vz-green); }
.dash-kpi .t.dn { color: #b03c3c; }

.dash-chart {
  background: #fff;
  border: 1px solid var(--vz-rule);
  border-radius: 12px;
  padding: 22px;
  height: 240px;
  position: relative;
}
.dash-chart .title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--vz-green);
  margin-bottom: 18px;
}
.dash-chart svg { width: 100%; height: 170px; display: block; }

/* AI Insight feed mock */
.ai-feed {
  background: #fff;
  border: 1px solid var(--vz-rule);
  border-radius: 14px;
  padding: 24px;
}
.ai-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vz-rule);
  margin-bottom: 4px;
}
.ai-feed-head .ttl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--vz-green);
}
.ai-feed-head .ttl em { font-style: italic; color: var(--vz-gold); }
.ai-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--vz-rule);
  font-size: 13px;
}
.ai-row:last-child { border-bottom: none; }
.ai-row .sev {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 8px;
  border-radius: 3px;
}
.sev.info    { background: rgba(20, 100, 200, 0.12); color: #1968c2; }
.sev.warn    { background: rgba(180, 110, 0, 0.14);  color: #a66800; }
.sev.urgent  { background: rgba(200, 40, 50, 0.12);  color: #b8252e; }
.sev.suggest { background: rgba(0, 96, 57, 0.12);    color: var(--vz-green); }
.ai-row .msg { line-height: 1.5; color: var(--vz-ink); }
.ai-row .act {
  font-size: 11px;
  font-weight: 500;
  color: var(--vz-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   SERVICES PRICE TABLE (USD)
   ============================================================ */
.svc-table {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--vz-rule);
  overflow: hidden;
}
.svc-cat {
  padding: 16px 24px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vz-gold);
  background: var(--vz-paper-soft);
  border-bottom: 1px solid var(--vz-rule);
}
.svc-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 0.8fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--vz-rule);
  align-items: center;
}
.svc-row:last-child { border-bottom: none; }
.svc-row.head {
  background: var(--vz-paper);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #999;
  padding: 12px 24px;
}
.svc-row .name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--vz-green);
}
.svc-row .name .desc {
  display: block;
  font-family: 'Red Hat Display', sans-serif;
  font-size: 12px;
  color: #888;
  margin-top: 2px;
  font-weight: 400;
}
.svc-row .brand {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(163, 126, 44, 0.12);
  color: var(--vz-gold);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  width: fit-content;
}
.svc-row .min {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--vz-ink);
}
.svc-row .price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--vz-ink);
}
.svc-row .price em { font-style: italic; color: var(--vz-gold); }

/* ============================================================
   BILLING / INVOICE MOCK
   ============================================================ */
.invoice {
  background: #fff;
  border: 1px solid var(--vz-rule);
  border-radius: 14px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.invoice::before {
  content: 'V';
  position: absolute;
  right: -40px; bottom: -100px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 320px;
  color: var(--vz-green);
  opacity: 0.04;
  pointer-events: none;
}
.invoice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--vz-rule);
  margin-bottom: 24px;
}
.invoice-head .ttl-row {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  color: var(--vz-green);
  line-height: 1.1;
}
.invoice-head .meta {
  font-size: 12px;
  color: #777;
  margin-top: 8px;
}
.status-pill {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--vz-green);
  color: #fff;
}
.status-pill.draft { background: #999; }
.status-pill.partial { background: var(--vz-gold); }
.invoice-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed var(--vz-rule);
  font-size: 14px;
}
.invoice-line .l { color: var(--vz-ink); }
.invoice-line .l small { display: block; color: #888; font-size: 11px; margin-top: 2px; }
.invoice-line .r {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--vz-ink);
}
.invoice-line .r em { font-style: italic; color: var(--vz-gold); }
.invoice-line.discount .r { color: var(--vz-gold); }
.invoice-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  margin-top: 8px;
  border-top: 2px solid var(--vz-green);
}
.invoice-total .l {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--vz-green);
}
.invoice-total .r {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  color: var(--vz-green);
  line-height: 1;
}
.invoice-pay {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--vz-rule);
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: #777;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.invoice-pay span.tick { color: var(--vz-green); font-weight: 600; }

/* Stock card */
.stock {
  background: #fff;
  border: 1px solid var(--vz-rule);
  border-radius: 14px;
  padding: 22px;
}
.stock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}
.bar { height: 6px; background: var(--vz-rule-soft); border-radius: 4px; overflow: hidden; margin-bottom: 16px; }
.bar > span { display: block; height: 100%; background: var(--vz-green); border-radius: 4px; transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.bar > span.gold { background: var(--vz-gold); }
.bar > span.red  { background: #b8252e; }
.stock .ic { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
.stock .ic.ok   { color: var(--vz-green); }
.stock .ic.warn { color: #a66800; }
.stock .ic.low  { color: #b8252e; }

/* ============================================================
   SOAP MOCK
   ============================================================ */
.soap {
  background: #fff;
  border: 1px solid var(--vz-rule);
  border-radius: 16px;
  overflow: hidden;
}
.soap-head {
  background: var(--vz-green);
  padding: 24px 28px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.soap-head .l { font-family: 'Cormorant Garamond', serif; font-size: 22px; }
.soap-head .l small { display: block; font-family: 'Red Hat Display', sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.7); margin-top: 4px; letter-spacing: 0.06em; }
.soap-head .stamp {
  border: 1px solid rgba(196, 160, 85, 0.5);
  color: var(--vz-gold-pale);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
}
.soap-body { padding: 8px 28px; }
.soap-r {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--vz-rule);
}
.soap-r:last-child { border-bottom: none; }
.soap-r .letter {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 56px;
  color: var(--vz-gold);
  line-height: 1;
}
.soap-r .c .lbl {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vz-green);
  font-weight: 600;
  margin-bottom: 8px;
}
.soap-r .c .body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--vz-ink);
}
.soap-r .c .body strong { color: var(--vz-green); }
.soap-r .c .body .ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 8px;
  background: rgba(163, 126, 44, 0.12);
  color: var(--vz-gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
}

/* ============================================================
   PORTAL / MOBILE SECTION
   ============================================================ */
.portal-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.phones-row {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.phones-row .iphone:nth-child(1) { transform: rotate(-3deg) translateY(20px); z-index: 1; }
.phones-row .iphone:nth-child(2) { transform: translateY(-10px); z-index: 3; }
.phones-row .iphone:nth-child(3) { transform: rotate(3deg) translateY(30px); z-index: 1; }
.phones-row .iphone { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.phones-row .iphone:hover { transform: rotate(0) translateY(-12px) scale(1.04); z-index: 10; }

/* Stat banner */
.stats-banner {
  background: var(--vz-green);
  color: #fff;
  padding: 100px 60px;
  position: relative;
  overflow: hidden;
}
.stats-banner::before {
  content: '';
  position: absolute;
  top: -300px; left: -200px;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 160, 85, 0.25) 0%, transparent 60%);
}
.stats-banner::after {
  content: '';
  position: absolute;
  bottom: -300px; right: -200px;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 160, 85, 0.15) 0%, transparent 60%);
}
.stats-inner { position: relative; z-index: 1; max-width: 1640px; margin: 0 auto; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.stat {
  padding: 56px 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.stat:last-child { border-right: none; }
.stat .v {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(64px, 7vw, 124px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--vz-gold-pale);
  font-weight: 400;
}
.stat .v em {
  font-style: italic;
  color: #fff;
  font-size: 0.55em;
  margin-left: 4px;
}
.stat .l {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin-top: 16px;
  letter-spacing: 0.02em;
}

.q-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-top: 60px;
}
.q-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.3;
  max-width: 820px;
  color: #fff;
  position: relative;
  padding-left: 36px;
}
.q-text::before {
  content: '“';
  position: absolute;
  top: -28px; left: -10px;
  font-size: 100px;
  color: var(--vz-gold-pale);
  font-style: italic;
  line-height: 1;
}
.q-meta {
  text-align: right;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.6;
  min-width: 180px;
}
.q-meta strong { color: var(--vz-gold-pale); }

/* ============================================================
   DESIGN SYSTEM
   ============================================================ */
.ds-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 18px;
  margin-bottom: 24px;
}
.ds-col {
  border-radius: 14px;
  padding: 30px 28px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s;
}
.ds-col:hover { transform: translateY(-4px); }
.ds-col .k { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; }
.ds-col .hex {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 44px;
}
.ds-col.green { background: var(--vz-green); color: #fff; }
.ds-col.green .k { color: var(--vz-gold-pale); }
.ds-col.gold { background: var(--vz-gold); color: #fff; }
.ds-col.gold .k { color: rgba(255, 255, 255, 0.8); }
.ds-col.cream { background: var(--vz-cream); color: var(--vz-ink); }
.ds-col.cream .k { color: var(--vz-gold); }
.ds-col.ink { background: #1a1a1a; color: #fff; }
.ds-col.ink .k { color: var(--vz-gold-pale); }

.type-card {
  background: var(--vz-paper);
  border: 1px solid var(--vz-rule);
  border-radius: 14px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 50px;
  align-items: center;
}
.type-card .nm {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  line-height: 1;
  color: var(--vz-green);
}
.type-card .nm em { font-style: italic; color: var(--vz-gold); }
.type-card .pair {
  font-size: 13px;
  color: var(--vz-ink-soft);
  margin-top: 14px;
}
.type-card .pair strong { color: var(--vz-green); }
.scale {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.scale .it {
  border: 1px solid var(--vz-rule);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 110px;
  background: #fff;
}
.scale .it .px {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--vz-gold);
}
.scale .it .demo {
  font-family: 'Cormorant Garamond', serif;
  color: var(--vz-green);
}
.scale .it.s14 .demo { font-size: 14px; }
.scale .it.s18 .demo { font-size: 18px; }
.scale .it.s24 .demo { font-size: 24px; }
.scale .it.s48 .demo { font-size: 32px; }

/* ============================================================
   OUTRO
   ============================================================ */
.outro {
  padding: 180px 60px;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(196, 160, 85, 0.25) 0%, transparent 55%),
    linear-gradient(165deg, var(--vz-green-deep) 0%, var(--vz-green-darker) 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.outro::before {
  content: 'V';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 80vw;
  color: rgba(255, 255, 255, 0.02);
  line-height: 0.8;
  pointer-events: none;
}
.outro h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(56px, 6vw, 110px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-bottom: 28px;
  position: relative;
}
.outro h2 em { font-style: italic; color: var(--vz-gold-pale); }
.outro p {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 640px;
  margin: 0 auto 56px;
  line-height: 1.6;
  position: relative;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  background: #0a0a0a;
  color: rgba(255, 255, 255, 0.5);
  padding: 36px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.foot .l {
  display: flex;
  align-items: center;
  gap: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.foot .l b { color: #fff; letter-spacing: 0.34em; font-weight: 400; }
.foot .sep { opacity: 0.3; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  section { padding: 100px 30px; }
  .topstrip-inner { padding: 0 20px; }
  .topstrip .right a { display: none; }
  .hero-grid { grid-template-columns: 1fr; padding: 120px 30px 60px; gap: 40px; }
  .hero-visual { height: 460px; }
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .snap-grid { grid-template-columns: 1fr 1fr; }
  .snap-item { border-right: none; border-bottom: 1px solid var(--vz-rule); padding: 18px 0; }
  .snap-item:first-child { padding-left: 0; }
  .challenge-grid, .showcase-grid, .showcase-grid.reverse, .portal-wrap { grid-template-columns: 1fr; gap: 40px; }
  .showcase-grid.reverse .showcase-copy { order: 0; }
  .stack-row, .roles, .ds-cols, .dash-kpis, .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .mods { grid-template-columns: repeat(2, 1fr); }
  .type-card { grid-template-columns: 1fr; gap: 30px; padding: 28px; }
  .scale { grid-template-columns: 1fr 1fr; }
  .q-row { flex-direction: column; align-items: flex-start; }
  .svc-row { grid-template-columns: 1.5fr 1fr 0.8fr 1fr; }
  .svc-row .tier-50, .svc-row .tier-60, .svc-row .tier-70, .svc-row .tier-80 { display: none; }
  .svc-row.head .tier-50, .svc-row.head .tier-60, .svc-row.head .tier-70, .svc-row.head .tier-80 { display: none; }
}

/* ═══════════════════════════════════════
   MOBILE RESPONSIVE — case_vozna
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding: 100px 20px 60px !important; }
  .hero-h1 { font-size: clamp(28px, 7vw, 42px) !important; }
  .hero-copy { padding: 0 !important; }
  .hero-devices { justify-content: center !important; }
  .hero-devices .laptop { width: 90vw !important; max-width: 400px !important; }
  .hero-devices .phone { width: 30vw !important; max-width: 140px !important; right: -5vw !important; bottom: -20px !important; }
  
  .challenge, .solution, .showcase, .arch, .roles-section, .modules-section,
  .design-system, .stats-section, .outro, section { padding-left: 20px !important; padding-right: 20px !important; }
  
  .split, .split-reverse { grid-template-columns: 1fr !important; gap: 24px !important; }
  .split-text, .split-visual { max-width: 100% !important; }
  
  .before-after { grid-template-columns: 1fr !important; }
  
  .arch-grid, .roles-grid, .modules-grid { grid-template-columns: 1fr !important; }
  
  .browser-mock, .phone-mock { max-width: 100% !important; width: 100% !important; }
  .browser-mock img, .phone-mock img { width: 100% !important; height: auto !important; }
  
  .ds-palette, .ds-grid { grid-template-columns: repeat(2, 1fr) !important; }
  
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  
  h2 { font-size: clamp(24px, 6vw, 36px) !important; word-break: break-word !important; }
  
  .pill-row { flex-wrap: wrap !important; gap: 8px !important; }
  
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; font-size: 13px !important; }
  
  .feature-list li, .checklist li { font-size: 14px !important; }
  
  .topstrip { display: none !important; }
  
  #contact form { grid-template-columns: 1fr !important; }
  footer { flex-direction: column !important; text-align: center !important; }
  footer > div { text-align: center !important; }
}

@media (max-width: 480px) {
  .hero-h1 { font-size: 26px !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
  .ds-palette, .ds-grid { grid-template-columns: 1fr !important; }
  .modules-grid { gap: 8px !important; }
  .arch-grid { gap: 12px !important; }
}

/* ═══════════════════════════════════════
   MOBILE FIX v2 — overflow & cards
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  body, html { overflow-x: hidden !important; }
  *, *::before, *::after { max-width: 100vw; }

  /* Portal cards row — stack vertically */
  .portal-cards, .card-row, .cards-row,
  [class*=cards] { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 16px !important;
    overflow: hidden !important;
  }
  .portal-card, .card-row > *, .cards-row > *,
  [class*=cards] > * {
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Feature lists — no overflow */
  .feature-list, .checklist, ul, ol,
  .feat-grid, .kpi-strip, .pill-row {
    overflow: hidden !important;
    word-break: break-word !important;
  }
  .feature-list li, .checklist li {
    display: block !important;
    width: 100% !important;
    overflow-wrap: break-word !important;
  }
  /* Feature items with label+desc side by side — stack */
  .feature-list li strong, .feature-list li b,
  .checklist li strong {
    display: block !important;
    margin-bottom: 4px !important;
  }

  /* All headings — prevent overflow */
  h1, h2, h3, h4, .hero-h1, .serif {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }

  /* Horizontal scroll containers — force wrap */
  .scroll-row, .horizontal-scroll,
  [style*=overflow-x], [style*=flex-wrap: nowrap],
  .kpi-strip { 
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
  }

  /* Images in mockups */
  .browser-frame, .phone-frame,
  .browser-mock, .phone-mock,
  .device-frame, .mock-browser, .mock-phone {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .browser-frame img, .phone-frame img,
  .browser-mock img, .phone-mock img {
    width: 100% !important;
    height: auto !important;
  }

  /* Grid overrides for all grids */
  .grid-3, .grid-4, .three-col, .four-col {
    grid-template-columns: 1fr !important;
  }
  .grid-2, .two-col {
    grid-template-columns: 1fr !important;
  }

  /* Inline flex items that might overflow */
  .tag, .chip, .pill, .badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* Section padding */
  section, .section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* Horizontal auto-scroll for wide content */
  pre, code, .code-block, .audit-log {
    overflow-x: auto !important;
    font-size: 12px !important;
    max-width: 100% !important;
  }

  /* Invoice / billing tables */
  .invoice, .stock-widget, .loyalty-card {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .invoice table, table {
    width: 100% !important;
    font-size: 12px !important;
  }

  /* Modules grid — 1 col on small */
  .modules-grid, .module-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .module-card {
    padding: 12px !important;
  }

  /* KPI strips */
  .kpi-strip, .stats-strip {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .kpi-strip > *, .stats-strip > * {
    flex: 1 1 45% !important;
    min-width: 120px !important;
  }
}

/* ═══════════════════════════════════════
   NAV Z-INDEX FIX — ensure burger clickable
   ═══════════════════════════════════════ */
#mainNav {
  z-index: 999999 !important;
  position: fixed !important;
}
#mainNav .hamburger {
  z-index: 1000000 !important;
  position: relative !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
#vtMobileOverlay {
  z-index: 999998 !important;
}
.hero {
  z-index: 1 !important;
}
.topstrip {
  display: none !important;
}