/* ═══════════════════════════════════════════════════════════
   hero.css — WebKreasiAdhi V3
   Liquid Glass · Portfolio Showcase as full-panel visual focus
   Scope: .section--hero only
   ═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────
   1. HERO-SCOPED TOKENS
───────────────────────────────────────────────────────── */
.section--hero {
  --panel-r: 28px;   /* glass panel border-radius  */
  --card-r:  22px;   /* portfolio card border-radius (panel - 6px) */
  --chip-r:  14px;   /* floating chip border-radius */
}


/* ─────────────────────────────────────────────────────────
   2. SECTION WRAPPER
───────────────────────────────────────────────────────── */
.section--hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + var(--space-12));
  padding-bottom: var(--space-16);
  overflow: hidden;
  background: #060d1f;
  isolation: isolate;
}

/* Animated mesh gradient */
.section--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%,  rgba(37, 99,235,.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%,  rgba(6,182,212,.16) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 50% 80%,  rgba(124,58,237,.14) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(15,30,80,.95)  0%, #060d1f 70%);
  animation: mesh-shift 18s ease-in-out infinite alternate;
}

/* Grain texture */
.section--hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

@keyframes mesh-shift {
  0%   { background-position: 0%  0%,  100% 0%,  50% 100%, 50% 50%; }
  33%  { background-position: 20% 30%, 80%  10%, 30% 80%,  50% 50%; }
  66%  { background-position: 10% 60%, 90%  40%, 70% 60%,  50% 50%; }
  100% { background-position: 5%  20%, 95%  70%, 40% 90%,  50% 50%; }
}


/* ─────────────────────────────────────────────────────────
   3. PARTICLE CANVAS  z:1
───────────────────────────────────────────────────────── */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: .6;
}


/* ─────────────────────────────────────────────────────────
   4. GLOW ORBS
───────────────────────────────────────────────────────── */
.hero__gradient-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.hero__gradient-orb--1 {
  width: clamp(400px,60vw,800px);
  height: clamp(400px,60vw,800px);
  background: radial-gradient(circle,rgba(37,99,235,.28) 0%,rgba(37,99,235,.08) 40%,transparent 70%);
  top: -20%; right: -10%;
  filter: blur(40px);
  animation: orb-a 14s ease-in-out infinite alternate;
}
.hero__gradient-orb--2 {
  width: clamp(300px,45vw,600px);
  height: clamp(300px,45vw,600px);
  background: radial-gradient(circle,rgba(6,182,212,.20) 0%,rgba(6,182,212,.06) 45%,transparent 70%);
  bottom: -5%; left: -5%;
  filter: blur(50px);
  animation: orb-b 18s ease-in-out infinite alternate;
}
.hero__gradient-orb--3 {
  width: clamp(200px,30vw,400px);
  height: clamp(200px,30vw,400px);
  background: radial-gradient(circle,rgba(124,58,237,.18) 0%,transparent 70%);
  top: 40%; left: 25%;
  filter: blur(60px);
  animation: orb-c 22s ease-in-out infinite alternate;
}
@keyframes orb-a { from{transform:translate(0,0) scale(1)} to{transform:translate(-40px,30px) scale(1.08)} }
@keyframes orb-b { from{transform:translate(0,0) scale(1)} to{transform:translate(30px,-35px) scale(1.10)} }
@keyframes orb-c {
  0%  {transform:translate(0,0);opacity:.6}
  50% {transform:translate(-20px,15px);opacity:1}
  100%{transform:translate(25px,-20px);opacity:.4}
}


/* ─────────────────────────────────────────────────────────
   5. LAYOUT GRID
───────────────────────────────────────────────────────── */
.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(var(--space-10),5vw,var(--space-16));
  min-height: 560px;
}


/* ─────────────────────────────────────────────────────────
   6. LEFT COLUMN — text content
───────────────────────────────────────────────────────── */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Badge */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-heading);
  letter-spacing: .10em;
  text-transform: uppercase;
  border-radius: 9999px;
  margin-bottom: var(--space-6);
  color: rgba(255,255,255,.90);
  background: linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 2px 16px rgba(37,99,235,.20), inset 0 1px 0 rgba(255,255,255,.20);
  animation: a-badge .7s cubic-bezier(.34,1.56,.64,1) both;
  transition: box-shadow .3s, border-color .3s;
}
.hero__badge:hover {
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 4px 24px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.30);
}
.hero__badge svg { width:12px;height:12px;color:#60a5fa;filter:drop-shadow(0 0 4px rgba(96,165,250,.8)); }

/* Headline */
.hero__headline {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem,5.5vw,4.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: var(--space-5);
  text-shadow: 0 0 80px rgba(37,99,235,.3);
  animation: a-up .8s cubic-bezier(.4,0,.2,1) .1s both;
}
.hero__headline-highlight {
  background: linear-gradient(135deg,#60a5fa 0%,#38bdf8 40%,#a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(96,165,250,.4));
  background-size: 200% 200%;
  animation: a-gradient 6s ease-in-out infinite alternate;
}
@keyframes a-gradient { from{background-position:0% 50%} to{background-position:100% 50%} }

/* Subheadline */
.hero__subheadline {
  font-size: clamp(1rem,1.8vw,1.125rem);
  color: rgba(186,212,255,.75);
  line-height: 1.75;
  max-width: 500px;
  margin-bottom: var(--space-8);
  animation: a-up .8s cubic-bezier(.4,0,.2,1) .2s both;
}

/* CTA */
.hero__cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
  animation: a-up .8s cubic-bezier(.4,0,.2,1) .3s both;
}
.hero__cta .btn--primary {
  background: linear-gradient(135deg,#2563eb 0%,#1d4ed8 60%,#4f46e5 100%);
  border: 1px solid rgba(99,153,255,.50);
  color: #fff;
  font-weight: 700;
  letter-spacing: -.01em;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(37,99,235,.40),
    0 4px 20px rgba(37,99,235,.45),
    0 8px 40px rgba(37,99,235,.25),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.hero__cta .btn--primary::before {
  content:'';position:absolute;inset:0;left:-100%;width:60%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .5s;pointer-events:none;
}
.hero__cta .btn--primary:hover::before { left:150%; }
.hero__cta .btn--primary:hover {
  background:linear-gradient(135deg,#3b82f6 0%,#2563eb 60%,#6366f1 100%);
  box-shadow:0 0 0 1px rgba(99,153,255,.60),0 6px 28px rgba(37,99,235,.60),0 12px 50px rgba(37,99,235,.35),inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(-2px);color:#fff;
}
.hero__cta .btn--outline {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);
  font-weight:600;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 16px rgba(0,0,0,.20);
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.hero__cta .btn--outline:hover {
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.30);
  color:#fff;transform:translateY(-2px);
}

/* Trust */
.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: a-up .8s cubic-bezier(.4,0,.2,1) .4s both;
}
.hero__trust-avatars { display:flex; }
.hero__trust-avatar {
  width:30px;height:30px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  background:linear-gradient(135deg,#3b82f6,#06b6d4);
  box-shadow:0 0 0 1px rgba(37,99,235,.3);overflow:hidden;
}
.hero__trust-avatar:not(:first-child) { margin-left:-8px; }
.hero__trust-avatar img { width:100%;height:100%;object-fit:cover; }
.hero__trust-text { font-size:13px;color:rgba(186,212,255,.80);font-weight:500; }
.hero__trust-stars { display:flex;gap:1px; }
.hero__trust-stars svg { width:11px;height:11px;color:#fbbf24;fill:#fbbf24;filter:drop-shadow(0 0 3px rgba(251,191,36,.6)); }

/* Stats pill */
.hero__stats {
  display: flex;
  gap: 0;
  margin-top: var(--space-10);
  padding: var(--space-4) var(--space-5);
  animation: a-up .8s cubic-bezier(.4,0,.2,1) .5s both;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.hero__stat {
  display:flex;flex-direction:column;gap:2px;
  padding:var(--space-2) var(--space-4);flex:1;text-align:center;position:relative;
}
.hero__stat:not(:last-child)::after {
  content:'';position:absolute;right:0;top:20%;bottom:20%;
  width:1px;background:rgba(255,255,255,.10);
}
.hero__stat-value {
  font-family:var(--font-heading);
  font-size:clamp(1.5rem,2.5vw,2rem);
  font-weight:800;color:#fff;line-height:1;letter-spacing:-.03em;
}
.hero__stat-value .stat-number { font-variant-numeric:tabular-nums; }
.hero__stat-value .stat-suffix { color:#60a5fa;font-size:.75em; }
.hero__stat-label { font-size:10px;color:rgba(148,187,233,.70);font-weight:600;text-transform:uppercase;letter-spacing:.08em; }


/* ─────────────────────────────────────────────────────────
   7. RIGHT COLUMN — glass panel
───────────────────────────────────────────────────────── */
.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(420px,52vw,620px);
  animation: a-visual .9s cubic-bezier(.34,1.10,.64,1) .2s both;
}

/* Glass panel — the outer frame */
.hero__glass-panel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--panel-r);
  overflow: hidden;
  background: linear-gradient(145deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.04) 40%,rgba(37,99,235,.06) 70%,rgba(6,182,212,.04) 100%);
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.1);
  backdrop-filter: blur(32px) saturate(200%) brightness(1.1);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 24px 80px rgba(37,99,235,.22),
    0 8px 32px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.15),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset -1px 0 0 rgba(255,255,255,.04);
}

/* Top specular highlight — always on top */
.hero__glass-panel::before {
  content:'';
  position:absolute;
  top:0;left:10%;right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 30%,rgba(255,255,255,.80) 50%,rgba(255,255,255,.55) 70%,transparent);
  border-radius:50%;
  z-index:20;
  pointer-events:none;
}

/* Ambient inner glow */
.hero__glass-panel::after {
  content:'';
  position:absolute;
  width:70%;height:50%;top:-20%;left:15%;
  background:radial-gradient(ellipse,rgba(96,165,250,.12) 0%,transparent 70%);
  filter:blur(20px);
  animation:inner-glow 5s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes inner-glow {
  from{opacity:.6;transform:translateY(0) scale(1)}
  to{opacity:1;transform:translateY(10px) scale(1.05)}
}


/* ─────────────────────────────────────────────────────────
   8. THREE.JS CANVAS  z:1
      Particles stay visible at the 6px glass edges around
      the portfolio card
───────────────────────────────────────────────────────── */
.hero__3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────
   9. SCAN LINE  z:20
───────────────────────────────────────────────────────── */
.hero__glass-panel .hero__scan-line {
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(96,165,250,.4) 30%,rgba(96,165,250,.8) 50%,rgba(96,165,250,.4) 70%,transparent);
  z-index:20;
  animation:scan-line 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes scan-line {
  0%  {top:0%;opacity:0}
  5%  {opacity:1}
  95% {opacity:1}
  100%{top:100%;opacity:0}
}


/* ─────────────────────────────────────────────────────────
   10. CORNER BRACKETS  z:20
───────────────────────────────────────────────────────── */
.hero__glass-panel .hero__corner {
  position:absolute;width:20px;height:20px;
  z-index:20;pointer-events:none;opacity:.55;
}
.hero__corner--tl{top:12px;left:12px;  border-top:1.5px solid rgba(96,165,250,.6);border-left:1.5px solid rgba(96,165,250,.6);  border-radius:3px 0 0 0}
.hero__corner--tr{top:12px;right:12px; border-top:1.5px solid rgba(96,165,250,.6);border-right:1.5px solid rgba(96,165,250,.6); border-radius:0 3px 0 0}
.hero__corner--bl{bottom:12px;left:12px;  border-bottom:1.5px solid rgba(96,165,250,.6);border-left:1.5px solid rgba(96,165,250,.6);  border-radius:0 0 0 3px}
.hero__corner--br{bottom:12px;right:12px; border-bottom:1.5px solid rgba(96,165,250,.6);border-right:1.5px solid rgba(96,165,250,.6); border-radius:0 0 3px 0}


/* ─────────────────────────────────────────────────────────
   11. FLOATING CHIPS (stat + live)  z:10
       Above portfolio card, below scan-line
───────────────────────────────────────────────────────── */
.hero__glass-card {
  position: absolute;
  z-index: 10;
  border-radius: var(--chip-r);
  padding: 12px 16px;
  background: linear-gradient(135deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.06) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 8px 32px rgba(0,0,0,.35),
    0 2px 8px rgba(37,99,235,.18),
    inset 0 1px 0 rgba(255,255,255,.25);
  opacity: 0;
  animation: a-chip .8s cubic-bezier(.34,1.40,.64,1) forwards;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
}
.hero__glass-card:hover {
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,.45),
    0 4px 16px rgba(37,99,235,.35),
    inset 0 1px 0 rgba(255,255,255,.32);
}
.hero__glass-card--stat { top:12%;right:-4%;min-width:148px;animation-delay:1.0s; }
.hero__glass-card--live { bottom:18%;left:-5%;animation-delay:1.2s; }

@keyframes a-chip {
  from{opacity:0;transform:translateY(14px) scale(.94)}
  to  {opacity:1;transform:translateY(0)    scale(1)}
}

/* Chip internals */
.glass-card__dot {
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 6px rgba(34,197,94,.8),0 0 12px rgba(34,197,94,.4);
  animation:dot-pulse 2s ease-in-out infinite;
  display:inline-block;flex-shrink:0;
}
@keyframes dot-pulse {
  0%,100%{box-shadow:0 0 6px rgba(34,197,94,.8),0 0 12px rgba(34,197,94,.4)}
  50%    {box-shadow:0 0 10px rgba(34,197,94,1),0 0 20px rgba(34,197,94,.6)}
}
.glass-card__label { font-size:10px;font-weight:600;font-family:var(--font-heading);color:rgba(186,212,255,.75);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px; }
.glass-card__value { font-size:18px;font-weight:800;font-family:var(--font-heading);color:#fff;letter-spacing:-.02em;line-height:1; }
.glass-card__sub   { font-size:11px;color:rgba(148,187,233,.70);margin-top:2px;font-weight:500; }
.glass-card__icon-row { display:flex;align-items:center;gap:8px; }


/* ─────────────────────────────────────────────────────────
   12. PORTFOLIO SHOWCASE CARD  z:2
   ─────────────────────────────────────────────────────────
   KEY FIX: use width/height calc instead of right/bottom
   so the card reliably fills the panel with a 6px gap.
───────────────────────────────────────────────────────── */
.hero__glass-card--portfolio {
  /* Position: 6px from each edge of the panel */
  top:    6px;
  left:   6px;
  width:  calc(100% - 12px);   /* 6px gap left + right */
  height: calc(100% - 12px);   /* 6px gap top + bottom */

  border-radius: var(--card-r);
  padding: 0;
  overflow: hidden;
  z-index: 2;                  /* above Three.js (z:1), below chips (z:10) */

  /* Transparent — the image IS the card background */
  background:              transparent;
  border:                  none;
  box-shadow:              none;
  -webkit-backdrop-filter: none;
  backdrop-filter:         none;

  /* No hover animation */
  transition:  none;
  animation:   a-portfolio .9s cubic-bezier(.4,0,.2,1) .4s both;
}
.hero__glass-card--portfolio:hover {
  transform: none !important;
  box-shadow: none;
}

@keyframes a-portfolio {
  from { opacity:0; }
  to   { opacity:1; }
}

/* Glass specular at top of portfolio card */
.hero__glass-card--portfolio::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.35) 30%,
    rgba(255,255,255,.60) 50%,
    rgba(255,255,255,.35) 70%,
    transparent
  );
  z-index: 6;
  pointer-events: none;
  border-radius: var(--card-r) var(--card-r) 0 0;
}


/* ─────────────────────────────────────────────────────────
   13. SLIDESHOW  — fills card edge-to-edge
───────────────────────────────────────────────────────── */
.portfolio-slideshow {
  position: absolute !important;
  inset:    0        !important;
  width:    100%     !important;
  height:   100%     !important;
  overflow: hidden;
  border-radius: inherit;
  background: #07101f;
}


/* ─────────────────────────────────────────────────────────
   14. INDIVIDUAL SLIDES
───────────────────────────────────────────────────────── */
.portfolio-slide {
  position: absolute !important;
  inset:    0        !important;
  width:    100%     !important;
  height:   100%     !important;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.portfolio-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}


/* ─────────────────────────────────────────────────────────
   15. IMAGE — Ken Burns (inactive zoomed-in → active normal)
───────────────────────────────────────────────────────── */
.portfolio-slide__img {
  /* Belt-and-suspenders: explicit on every property */
  position:      absolute !important;
  inset:         0        !important;
  width:         100%     !important;
  height:        100%     !important;
  object-fit:    cover    !important;
  object-position: center center !important;
  display:       block    !important;
  max-width:     none;
  max-height:    none;
  min-width:     100%;
  min-height:    100%;
  /* Ken Burns — inactive zoomed-in */
  transform: scale(1.08);
  transition:
    transform 5500ms cubic-bezier(.25,.46,.45,.94),
    opacity    900ms cubic-bezier(.4,0,.2,1);
}
/* Active: drift back to 1.0 — visible Ken Burns zoom-out */
.portfolio-slide.is-active .portfolio-slide__img {
  transform: scale(1.0);
}


/* ─────────────────────────────────────────────────────────
   16. EMOJI PLACEHOLDER (shown when image file is missing)
───────────────────────────────────────────────────────── */
.portfolio-slide__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
}


/* ─────────────────────────────────────────────────────────
   17. GRADIENT SCRIM — bottom 20% only
       Transparent at top, dark at bottom → text readable
───────────────────────────────────────────────────────── */
.portfolio-slide__scrim {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 38%;              /* 15–20% visual overlay zone */
  background: linear-gradient(
    to top,
    rgba(4,9,22,.92)  0%,
    rgba(4,9,22,.70)  35%,
    rgba(4,9,22,.25)  65%,
    transparent       100%
  );
  z-index: 2;
  pointer-events: none;
  border-radius: 0 0 var(--card-r) var(--card-r);
}


/* ─────────────────────────────────────────────────────────
   18. CAPTION — project name left, category badge right
───────────────────────────────────────────────────────── */
.portfolio-slide__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* 36px bottom padding keeps text above dots row */
  padding: 10px 16px 36px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  z-index: 3;
  pointer-events: none;
}

.portfolio-slide__name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62%;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}

.portfolio-slide__category {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  color: #93c5fd;
  background: rgba(37,99,235,.30);
  border: 1px solid rgba(96,165,250,.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 3px 10px;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .07em;
  pointer-events: auto;
}


/* ─────────────────────────────────────────────────────────
   19. DOT INDICATORS
───────────────────────────────────────────────────────── */
.portfolio-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 4;
}
.portfolio-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.30);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .3s, width .3s;
  flex-shrink: 0;
}
.portfolio-dot.is-active {
  background: #60a5fa;
  width: 18px;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(96,165,250,.70);
}
.portfolio-dot:hover:not(.is-active) {
  background: rgba(255,255,255,.55);
}


/* ─────────────────────────────────────────────────────────
   20. PROGRESS BAR
───────────────────────────────────────────────────────── */
.portfolio-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2.5px;
  background: linear-gradient(90deg,#3b82f6,#06b6d4,#3b82f6);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
  z-index: 5;
  box-shadow: 0 0 8px rgba(96,165,250,.6);
}
@keyframes shimmer {
  from{background-position:0% 50%}
  to  {background-position:200% 50%}
}


/* ─────────────────────────────────────────────────────────
   21. PARALLAX HELPER
───────────────────────────────────────────────────────── */
.hero__parallax-layer {
  transition: transform .15s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}


/* ─────────────────────────────────────────────────────────
   22. SCROLL INDICATOR
───────────────────────────────────────────────────────── */
.hero__scroll-indicator {
  position:absolute;bottom:var(--space-8);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  opacity:0;animation:a-fade-up 1s ease 1.6s forwards;z-index:4;
}
.hero__scroll-indicator span { font-size:10px;color:rgba(148,187,233,.55);letter-spacing:.12em;text-transform:uppercase;font-weight:600; }
.hero__scroll-mouse { width:20px;height:32px;border:1.5px solid rgba(255,255,255,.20);border-radius:9999px;display:flex;justify-content:center;padding-top:5px; }
.hero__scroll-wheel {
  width:2px;height:5px;background:rgba(96,165,250,.7);border-radius:9999px;
  animation:scroll-bounce 2s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%,100%{transform:translateY(0);opacity:1}
  50%    {transform:translateY(7px);opacity:.2}
}


/* ─────────────────────────────────────────────────────────
   23. ENTRY KEYFRAMES
───────────────────────────────────────────────────────── */
@keyframes a-badge   { from{opacity:0;transform:translateY(-10px) scale(.92)} to{opacity:1;transform:none} }
@keyframes a-up      { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes a-visual  { from{opacity:0;transform:translateX(40px) scale(.95)} to{opacity:1;transform:none} }
@keyframes a-fade-up { from{opacity:0;transform:translateX(-50%) translateY(8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }


/* ─────────────────────────────────────────────────────────
   24. MOBILE — 768px
───────────────────────────────────────────────────────── */
@media (max-width:768px) {
  .section--hero {
    padding-top:calc(var(--nav-height) + var(--space-8));
    min-height:auto;
    padding-bottom:var(--space-12);
  }
  .hero__inner { grid-template-columns:1fr;gap:var(--space-8);text-align:center; }
  .hero__content { align-items:center;order:2; }
  .hero__subheadline { max-width:100%; }
  .hero__cta { justify-content:center;flex-direction:column;width:100%; }
  .hero__cta .btn { width:100%;justify-content:center; }
  .hero__trust { justify-content:center; }
  .hero__stats { width:100%;gap:0; }
  .hero__stat  { padding:var(--space-2); }

  .hero__visual { height:340px;order:1;width:100%; }

  /* Portfolio card — same proportional gap on mobile */
  .hero__glass-card--portfolio {
    top:5px; left:5px;
    width:calc(100% - 10px);
    height:calc(100% - 10px);
  }

  /* Chips repositioned so they don't overlap text */
  .hero__glass-card--stat { top:8%;right:2%; }
  .hero__glass-card--live { bottom:10%;left:2%; }

  .portfolio-slide__name    { font-size:13px; }
  .portfolio-slide__caption { padding:8px 12px 34px; }
  .portfolio-dots           { bottom:10px; }

  .hero__scroll-indicator { display:none; }
}


/* ─────────────────────────────────────────────────────────
   25. SMALL MOBILE — 480px
───────────────────────────────────────────────────────── */
@media (max-width:480px) {
  .hero__glass-card { padding:9px 12px; }
  .glass-card__value { font-size:15px; }
  .hero__stats { flex-wrap:wrap;gap:var(--space-1); }
  .hero__stat:not(:last-child)::after { display:none; }
  .hero__visual { height:300px; }
  .portfolio-slide__name     { font-size:12px; }
  .portfolio-slide__category { font-size:9px;padding:2px 8px; }
}