/* ═══════════════════════════════════════════════════════════════════
   HERO — Full-bleed photo right, content left, dramatic fade
═══════════════════════════════════════════════════════════════════ */
#hero{
  position:relative;min-height:100vh;overflow:hidden;
  display:flex;align-items:center;padding:8rem 3rem 4rem;
}

/* PHOTO AS HERO BACKGROUND (right 75% of viewport) */
.hero-photo-bg{
  position:absolute;top:0;right:0;bottom:0;
  width:45%;z-index:1;overflow:hidden;
}
.hero-photo-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 20%;
  filter:contrast(1.05) saturate(1) brightness(1.35);
  transform:scale(1.05);
}
/* Big gradient mask: image fades from solid right → black left */
.hero-photo-bg::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,
      var(--bg) 0%,
      rgba(5,5,5,.96) 15%,
      rgba(5,5,5,.7)  32%,
      rgba(5,5,5,.2)  58%,
      rgba(5,5,5,0)   80%);
}
/* Bottom + top vertical fades */
.hero-photo-bg::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,5,5,.3) 0%,transparent 18%,transparent 70%,rgba(5,5,5,.7) 100%);
}

.hero-canvas{position:absolute;inset:0;z-index:0;opacity:.45;}
.hero-grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,212,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,.04) 1px,transparent 1px);
  background-size:100px 100px;
  mask-image:radial-gradient(ellipse at 25% 50%,black 0%,black 30%,transparent 70%);
  opacity:.6;
}

/* Content always above photo (z-index:3+) */
.hero-inner{
  position:relative;z-index:10;width:100%;max-width:1500px;margin:0 auto;
}
.hero-left{
  display:flex;flex-direction:column;gap:1.8rem;
  max-width:100%;
}
/* Badges above photo too */
.hero-ribbon{ z-index:10; }
.hero-tech-tag{ z-index:10; }
.hero-scroll{ z-index:10; }

.hero-tag{
  font-size:.7rem;letter-spacing:.45em;text-transform:uppercase;
  color:var(--accent);font-family:var(--font-m);
  display:flex;align-items:center;gap:.85rem;
}
.hero-tag::before{content:'';width:2rem;height:1px;background:var(--accent);}
.hero-tag-pulse{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent);animation:pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ─── NAME ─── */
.hero-name{
  font-size:clamp(4.5rem,11vw,12rem);
  font-weight:800;
  line-height:.88;
  letter-spacing:-.045em;
  position:relative;
  z-index:20;
  width:100vw;
  margin-left:-3rem;
  padding-left:3rem;
}
.hero-name .row:nth-child(2) .row-inner{
  font-size:clamp(3.5rem,9vw,10rem);
}
.hero-name .row{
  display:block;overflow:hidden;position:relative;
}
.hero-name .row-inner{
  display:inline-block;
}
.hero-name .row-mask{
  position:absolute;inset:0;background:var(--accent);
  transform-origin:left;transform:scaleX(0);
  z-index:2;pointer-events:none;
}
.hero-name .outline{
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.3);
}
.hero-name em{
  font-family:var(--font-s);font-style:italic;font-weight:400;
  color:var(--accent);margin:0 .15em;letter-spacing:-.02em;
}

.hero-meta{
  display:flex;gap:2.5rem;padding:1.2rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  backdrop-filter:blur(2px);
}
.hero-meta-block{display:flex;flex-direction:column;gap:.3rem;}
.hero-meta-label{
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gray-300);font-family:var(--font-m);
}
.hero-meta-val{font-size:.85rem;font-weight:500;color:var(--white);}

.hero-desc{
  font-size:.95rem;color:var(--gray-100);line-height:1.7;
  max-width:46ch;
  text-shadow:0 0 20px rgba(0,0,0,.6);
}

.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;}
.btn-primary{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.95rem 1.75rem;background:var(--accent);color:#000;
  font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;
  font-weight:700;font-family:var(--font-m);
  transition:all .35s;position:relative;overflow:hidden;border:none;
}
.btn-primary::before{
  content:'';position:absolute;inset:0;background:var(--white);
  transform:translateY(101%);transition:transform .4s cubic-bezier(.65,0,.35,1);
}
.btn-primary:hover::before{transform:translateY(0);}
.btn-primary span,.btn-primary svg{position:relative;z-index:1;}
.btn-primary svg{width:14px;height:14px;stroke:#000;fill:none;stroke-width:2;}

.btn-outline{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.95rem 1.75rem;border:1px solid rgba(255,255,255,.25);
  color:var(--white);font-size:.72rem;letter-spacing:.25em;
  text-transform:uppercase;font-weight:500;font-family:var(--font-m);
  background:rgba(0,0,0,.3);backdrop-filter:blur(6px);transition:all .3s;
}
.btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.08);}

/* Floating info badges (now on top of background photo) */
.hero-ribbon{
  position:absolute;right:3rem;bottom:6rem;z-index:6;
  background:rgba(5,5,5,.85);border:1px solid var(--line-2);
  padding:.85rem 1.1rem;display:flex;align-items:center;gap:.85rem;
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.05em;
  backdrop-filter:blur(10px);
}
.hero-ribbon-dot{
  width:8px;height:8px;border-radius:50%;background:#00ffb3;
  box-shadow:0 0 12px #00ffb3;animation:pulseDot 1.6s ease-in-out infinite;
}
.hero-ribbon-text{color:var(--gray-100);}
.hero-ribbon-text strong{color:var(--white);font-weight:500;}

.hero-tech-tag{
  position:absolute;right:3rem;top:8rem;z-index:6;
  background:rgba(5,5,5,.85);border:1px solid var(--line-2);
  padding:.75rem 1rem;backdrop-filter:blur(10px);
  font-family:var(--font-m);font-size:.65rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);
}

/* Scroll indicator */
.hero-scroll{
  position:absolute;bottom:2.5rem;left:3rem;
  z-index:6;display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.hero-scroll-text{
  font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gray-300);font-family:var(--font-m);writing-mode:vertical-rl;
}
.hero-scroll-line{
  width:1px;height:50px;background:linear-gradient(to bottom,var(--gray-200),transparent);
  position:relative;overflow:hidden;
}
.hero-scroll-line::after{
  content:'';position:absolute;top:-50%;left:0;width:100%;height:50%;
  background:var(--accent);animation:scrollDrop 2s ease-in-out infinite;
}
@keyframes scrollDrop{
  0%{top:-50%;}100%{top:100%;}
}