/* ═══════════════════════════════════════════════════
   HOME — VIDEO HERO (looping background video)
═══════════════════════════════════════════════════ */
.vhero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #03060c;
  display: flex;
  align-items: center;
}
.vhero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.vhero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,6,12,0.15) 0%, rgba(3,6,12,0.05) 40%, rgba(3,6,12,0.55) 100%);
  z-index: 1;
}

.vhero__scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(140,195,255,0.45);
}
.vhero__scroll-line {
  width: 1px; height: 40px;
  background: rgba(140,195,255,0.2);
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}
.vhero__scroll-line::after {
  content: '';
  position: absolute; inset: 0;
  background: #5aa0ff;
  animation: scrollLine 2s ease-in-out infinite;
}
/* ═══════════════════════════════════════════════════
   HOME — STATEMENT (moved down from hero)
═══════════════════════════════════════════════════ */
.statement {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(3.5rem, 7vw, 5.5rem);
}
.statement__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.statement__title {
  font-size: clamp(2.4rem, 4.5vw + 0.5rem, 4.4rem);
  font-weight: 900;
  line-height: 1.08;
  color: var(--text);
  margin-bottom: 1.2rem;
}
.statement__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--gold), var(--sand), var(--gold-h), var(--gold));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroShimmer 7s ease-in-out infinite;
}
.statement__body {
  color: var(--text-2);
  font-size: 1.02rem;
  max-width: 52ch;
  margin: 0 auto 2rem;
}
.statement__cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════
   HOME — GALLERY
═══════════════════════════════════════════════════ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 1rem;
}
.gallery-item {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1px 0 var(--emboss-light) inset, 0 10px 26px rgba(20,24,32,0.1);
}
.gallery-item--tall { grid-row: span 2; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.1rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
  color: #ffffff;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .gallery-item--tall { grid-row: span 1; }
}

/* ═══════════════════════════════════════════════════
   HOME — VIDEOS
═══════════════════════════════════════════════════ */
.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.video-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: 0 1px 0 var(--emboss-light) inset, 0 12px 30px rgba(20,24,32,0.12);
}
.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-card__label {
  position: absolute;
  left: 1.2rem; bottom: 1.1rem;
  padding: 0.5em 1.1em;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.92);
  color: var(--text);
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 0.8rem;
  box-shadow: 0 4px 14px rgba(20,24,32,0.18);
}
@media (max-width: 720px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   HOME — FAQ
═══════════════════════════════════════════════════ */
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.2rem 1.5rem;
  box-shadow: 0 1px 0 var(--emboss-light) inset, 0 6px 18px rgba(20,24,32,0.06);
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: 0.8rem; font-size: 0.92rem; }

/* ═══════════════════════════════════════════════════
   HOME — FAN HERO (magenta gradient / layered petals, unused)
═══════════════════════════════════════════════════ */
.fan-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: linear-gradient(135deg, #d926c9 0%, #9333c0 45%, #4c1d7a 80%, #2c0f52 100%);
  display: flex;
  align-items: center;
}

.fan-wrap {
  position: absolute;
  right: -6%;
  bottom: -18%;
  width: 640px;
  height: 900px;
  z-index: 1;
  pointer-events: none;
}
.fan-petal {
  position: absolute;
  bottom: 0;
  right: 40px;
  width: 210px;
  height: 620px;
  border-radius: 105px 105px 105px 0;
  transform-origin: bottom right;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%),
              linear-gradient(200deg, #e14fe0, #7c2fbf 55%, #3c1268 100%);
  box-shadow: -12px 0 30px rgba(20,4,40,0.35);
  animation: fanSway 8s ease-in-out infinite;
}
@keyframes fanSway {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}

.fan-content {
  position: relative;
  z-index: 5;
  max-width: 560px;
  padding-top: 4rem;
}
.fan-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 1rem;
}
.fan-title {
  font-family: var(--font-disp);
  font-size: clamp(2.8rem, 6vw + 0.5rem, 5.6rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.25);
  margin-bottom: 1.4rem;
}
.fan-body {
  color: rgba(255,255,255,0.82);
  font-size: 0.98rem;
  max-width: 42ch;
  margin-bottom: 1.8rem;
}
.fan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9em 2.4em;
  border-radius: var(--r-full);
  background: #ffffff;
  color: #7c2fbf;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.fan-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(0,0,0,0.3); }

.fan-dots {
  position: absolute;
  bottom: 2.4rem;
  left: clamp(1.25rem, 4vw, 2rem);
  z-index: 10;
  display: flex;
  gap: 0.6rem;
}
.fan-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.28s, transform 0.28s;
}
.fan-dot:hover { background: rgba(255,255,255,0.6); }
.fan-dot.active { background: #ffffff; transform: scale(1.3); }

@media (max-width: 720px) {
  .fan-wrap { width: 420px; height: 620px; right: -22%; bottom: -12%; }
  .fan-petal { width: 140px; height: 420px; border-radius: 70px 70px 70px 0; }
  .fan-content { padding-inline: 1.25rem; }
}

/* ═══════════════════════════════════════════════════
   HOME — HOLO HERO (split-panel / 3D orb, unused)
═══════════════════════════════════════════════════ */
.holo {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: #060a14;
  display: grid;
  grid-template-columns: 88px 1fr 1fr;
  align-items: stretch;
}

.holo__bg-panels { position: absolute; inset: 0; z-index: 0; }
.holo__panel { position: absolute; inset: 0; }
.holo__panel--a { background: linear-gradient(160deg, #0a1730 0%, #060a14 55%); }
.holo__panel--b {
  left: 40%; right: 0; top: 0; bottom: 0;
  background: radial-gradient(120% 100% at 30% 20%, rgba(63,143,224,0.16), transparent 60%),
              linear-gradient(200deg, #0d1f3c 0%, #060a14 70%);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
}
.holo__panel--c {
  left: 66%; right: 0; top: 0; bottom: 0;
  background: radial-gradient(120% 100% at 70% 30%, rgba(120,90,224,0.18), transparent 60%);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
  mix-blend-mode: screen;
}

/* left rail */
.holo__rail {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-block: 2.5rem 2rem;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.holo__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
}
.holo__count-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.25em;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.5rem;
}
.holo__count-num { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.holo__count-num--dim { color: var(--text-3); }
.holo__count-sep { width: 1px; height: 18px; background: var(--gold); }
.holo__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.holo__nav a {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color 0.2s;
}
.holo__nav a:hover { color: var(--sand); }

/* centerpiece orb */
.holo__orb-wrap {
  grid-column: 2;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.holo__glow {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63,143,224,0.35), transparent 70%);
  filter: blur(20px);
  z-index: -1;
}
.holo__rings {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  z-index: 0;
}
.holo__ring {
  position: absolute;
  left: 50%;
  border: 1px solid rgba(142,203,240,0.28);
  border-radius: 50%;
  transform: translateX(-50%) rotateX(72deg);
}
.holo__ring--1 { width: 340px; height: 340px; bottom: 0; animation: holoRingPulse 4s ease-in-out infinite; }
.holo__ring--2 { width: 250px; height: 250px; bottom: 14px; animation: holoRingPulse 4s ease-in-out infinite 0.6s; }
.holo__ring--3 { width: 170px; height: 170px; bottom: 26px; animation: holoRingPulse 4s ease-in-out infinite 1.2s; }
@keyframes holoRingPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

.holo__canvas-wrap {
  position: relative;
  width: min(420px, 90%);
  height: min(420px, 60vh);
  z-index: 2;
}
.hero3d-canvas { width: 100% !important; height: 100% !important; touch-action: none; }

/* per-slide accent colors */
.holo--blue   .holo__glow { background: radial-gradient(circle, rgba(99,168,238,0.4), transparent 70%); }
.holo--violet .holo__glow { background: radial-gradient(circle, rgba(162,107,240,0.4), transparent 70%); }
.holo--pink   .holo__glow { background: radial-gradient(circle, rgba(240,105,154,0.4), transparent 70%); }
.holo--amber  .holo__glow { background: radial-gradient(circle, rgba(240,168,74,0.4), transparent 70%); }

.holo--blue   .holo__ring { border-color: rgba(99,168,238,0.35); }
.holo--violet .holo__ring { border-color: rgba(162,107,240,0.35); }
.holo--pink   .holo__ring { border-color: rgba(240,105,154,0.35); }
.holo--amber  .holo__ring { border-color: rgba(240,168,74,0.35); }

.holo--violet .holo__panel--a { background: linear-gradient(160deg, #170a30 0%, #060a14 55%); }
.holo--pink   .holo__panel--a { background: linear-gradient(160deg, #260a1e 0%, #060a14 55%); }
.holo--amber  .holo__panel--a { background: linear-gradient(160deg, #26160a 0%, #060a14 55%); }

.holo--violet .holo__panel--b, .holo--violet .holo__panel--c {
  background: radial-gradient(120% 100% at 30% 20%, rgba(162,107,240,0.2), transparent 60%),
              linear-gradient(200deg, #1a1030 0%, #060a14 70%);
}
.holo--pink .holo__panel--b, .holo--pink .holo__panel--c {
  background: radial-gradient(120% 100% at 30% 20%, rgba(240,105,154,0.18), transparent 60%),
              linear-gradient(200deg, #2a0f22 0%, #060a14 70%);
}
.holo--amber .holo__panel--b, .holo--amber .holo__panel--c {
  background: radial-gradient(120% 100% at 30% 20%, rgba(240,168,74,0.16), transparent 60%),
              linear-gradient(200deg, #2a1c0a 0%, #060a14 70%);
}

.holo--blue   .holo__title em { background-image: linear-gradient(100deg, #63a8ee, #8ecbf0, #ffffff, #aad6ff, #63a8ee); }
.holo--violet .holo__title em { background-image: linear-gradient(100deg, #a26bf0, #c9a6ff, #ffffff, #a26bf0); }
.holo--pink   .holo__title em { background-image: linear-gradient(100deg, #f0699a, #ffb3ce, #ffffff, #f0699a); }
.holo--amber  .holo__title em { background-image: linear-gradient(100deg, #f0a84a, #ffd9a0, #ffffff, #f0a84a); }

/* text content */
.holo__content {
  grid-column: 3;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  padding-right: clamp(1.5rem, 5vw, 5rem);
  padding-left: 1rem;
  max-width: 460px;
}
.holo__eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(140,195,255,0.8);
}
.holo__title {
  font-family: var(--font-disp);
  font-size: clamp(2.2rem, 4vw + 0.5rem, 4.2rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #f4f8ff;
}
.holo__title em {
  font-style: normal;
  background: linear-gradient(100deg, #63a8ee, #8ecbf0, #ffffff, #aad6ff, #63a8ee);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroShimmer 7s ease-in-out infinite;
}
.holo__body { color: rgba(232,242,255,0.72); font-size: 0.95rem; max-width: 40ch; }
.holo__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.6rem;
  padding: 0.85rem 1.9rem;
  border-radius: var(--r-full);
  background: #fff;
  color: #0a1220;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
  width: fit-content;
}
.holo__cta:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(63,143,224,0.35); }

/* dots */
.holo__dots {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 0.6rem;
}
.holo__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(232,242,255,0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.28s, transform 0.28s;
}
.holo__dot:hover { background: rgba(232,242,255,0.6); }
.holo__dot.active { background: #63a8ee; transform: scale(1.3); }

/* corners */
.holo__corner {
  position: absolute;
  z-index: 10;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.holo__corner--left {
  bottom: 2rem;
  left: 108px;
  border-left: 1px solid var(--gold);
  padding-left: 0.7rem;
  line-height: 1.35;
}
.holo__corner--right {
  bottom: 2rem;
  right: clamp(1.5rem, 5vw, 5rem);
}
.holo__corner--right a { border-bottom: 1px solid var(--gold); padding-bottom: 2px; }

@media (max-width: 900px) {
  .holo { grid-template-columns: 60px 1fr; }
  .holo__orb-wrap { display: none; }
  .holo__content { grid-column: 2; padding-inline: 1.25rem; max-width: 100%; }
  .holo__corner--left { left: 68px; }
  .holo__nav { display: none; }
}

/* ═══════════════════════════════════════════════════
   HOME — LIGHTHOUSE CANVAS HERO (legacy, unused)
═══════════════════════════════════════════════════ */

/* ── HERO SHELL ───────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #03020e;
}

/* ── SLIDES (crossfading backgrounds) ─────────────── */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity 1.4s ease;
}
.hero__slide.active { opacity: 1; z-index: 1; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,2,14,0.75) 0%, rgba(3,2,14,0.45) 45%, rgba(3,2,14,0.25) 100%);
  z-index: 2;
}

/* ── TITLE — each slide's text fills the hero, aligned internally ── */
.hero__inner {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.hero__title-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.7rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  pointer-events: none;
}
.hero__title-wrap > * { max-width: 460px; }
.hero__title-wrap.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0.4s;
}
.hero__title-wrap--right {
  align-items: flex-end;
  text-align: right;
}
.hero__body {
  color: rgba(232,242,255,0.75);
  font-size: 0.95rem;
  max-width: 42ch;
}
.hero__title-wrap .btn { pointer-events: all; }

/* ── SLIDE DOTS ───────────────────────────────────── */
.hero__dots {
  position: absolute;
  bottom: 2.6rem;
  right: clamp(1.5rem, 5vw, 5rem);
  z-index: 10;
  display: flex;
  gap: 0.6rem;
}
.hero__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(232,242,255,0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.28s, transform 0.28s;
}
.hero__dot:hover { background: rgba(232,242,255,0.6); }
.hero__dot.active { background: #63a8ee; transform: scale(1.3); }

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(140,195,255,0.8);
  max-width: unset;
}

.hero__title {
  font-family: var(--font-disp);
  font-size: clamp(2.4rem, 4.5vw + 0.5rem, 5.2rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 0.02em;
  color: #e8f2ff;
  text-shadow: 0 0 60px rgba(90,160,255,0.45), 0 2px 20px rgba(0,0,0,0.8);
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, #63a8ee, #8ecbf0, #ffffff, #aad6ff, #63a8ee, #ffffff, #8ecbf0);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroShimmer 7s ease-in-out infinite;
  filter: drop-shadow(0 0 22px rgba(120,180,255,0.55));
}
@keyframes heroShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero__cta { margin-top: 0.5rem; }

/* ── SCROLL HINT ──────────────────────────────────── */
.hero__scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(140,195,255,0.45);
}
.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: rgba(140,195,255,0.2);
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}
.hero__scroll-line::after {
  content: '';
  position: absolute; inset: 0;
  background: #5aa0ff;
  animation: scrollLine 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════
   SECTIONS BELOW HERO
═══════════════════════════════════════════════════ */
.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem,6vw,5rem);
  align-items: center;
}
.intro__text .label { margin-bottom:1rem; }
.intro__text h2 { font-size:clamp(1.8rem,3vw,2.8rem); margin-bottom:1.2rem; }
.intro__text p  { margin-bottom:2rem; }
.intro__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.icard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  text-align: center;
  transition: border-color .28s, transform .28s, box-shadow .28s;
}
.icard:hover { border-color:var(--border-2); transform:translateY(-4px); box-shadow:0 8px 28px rgba(63,143,224,.1); }
.icard__num {
  display: block;
  font-family: var(--font-disp);
  font-size: clamp(2rem,3vw,2.8rem);
  font-weight: 900;
  background: linear-gradient(135deg,#8ecbf0,#3f8fe0);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height: 1;
}
.icard__label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-top:.4rem; }
@media(max-width:768px) { .intro__grid { grid-template-columns:1fr; } }

/* Why choose us */
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.why-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1.8rem 1.5rem; text-align:center;
  transition:border-color .28s,transform .28s,box-shadow .28s;
}
.why-card:hover { border-color:var(--border-2); transform:translateY(-5px); box-shadow:0 8px 30px rgba(63,143,224,.15); }
.why-card__icon {
  width:48px; height:48px; margin-inline:auto; color:var(--gold); background:var(--gold-dim);
  border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; padding:10px; margin-bottom:1rem;
}
.why-card__icon svg { width:100%; height:100%; }
.why-card h3 { font-size:1rem; margin-bottom:.5rem; }
.why-card p { font-size:.85rem; }
@media(max-width:900px) { .why-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:540px) { .why-grid { grid-template-columns:1fr; } }

/* Services preview */
.sp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.sp-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1.8rem 1.5rem; display:flex; flex-direction:column; gap:.8rem;
  transition:border-color .28s,transform .28s,box-shadow .28s;
  position:relative; overflow:hidden;
}
.sp-card::before { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--sand)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out); }
.sp-card:hover { border-color:var(--border-2); transform:translateY(-5px); box-shadow:0 8px 30px rgba(63,143,224,.15); }
.sp-card:hover::before { transform:scaleX(1); }
.sp-card--featured { background:linear-gradient(160deg,rgba(63,143,224,.08),var(--surface)); border-color:var(--border-2); }
.sp-card__icon { width:48px; height:48px; color:var(--gold); background:var(--gold-dim); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; padding:10px; transition:transform .28s; }
.sp-card:hover .sp-card__icon { transform:scale(1.1); }
.sp-card__icon svg { width:100%; height:100%; }
.sp-card h3 { font-size:1.05rem; }
.sp-card p  { font-size:.85rem; }
.sp-card__arrow { margin-top:auto; font-size:1.1rem; color:var(--gold); transition:transform .25s; }
.sp-card:hover .sp-card__arrow { transform:translateX(5px); }
@media(max-width:900px) { .sp-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:540px) { .sp-grid { grid-template-columns:1fr; } }