/* =============================================
   CUSTOM PROPERTIES
   ============================================= */
:root {
  --bg:           #07070E;
  --bg-2:         #0C0C15;
  --bg-card:      rgba(255,255,255,0.028);
  --bg-card-h:    rgba(255,255,255,0.052);

  --red:          #E03030;
  --red-dark:     #C02626;
  --red-glow:     rgba(224, 48, 48, 0.18);
  --red-subtle:   rgba(224, 48, 48, 0.07);

  --border:       rgba(255,255,255,0.055);
  --border-mid:   rgba(255,255,255,0.1);
  --border-bright:rgba(255,255,255,0.2);

  --white:        #EDE9E2;
  --text:         #D5D2CA;
  --muted:        #B5B2AB;

  --cyan:         #E03030;

  --font:   'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --radius:       14px;
  --max-w:        1200px;
  --nav-h:        68px;
  --ease:         cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-out:     cubic-bezier(0.16,1,0.3,1);
}

/* =============================================
   RESET & BASE
   ============================================= */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; }
body  {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display:block; max-width:100%; height:auto; }
a   { color:inherit; text-decoration:none; }

/* =============================================
   GRAIN NOISE OVERLAY
   ============================================= */
.noise {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px;
}

/* =============================================
   SCROLL PROGRESS BAR
   ============================================= */
.scroll-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  box-shadow: 0 0 12px var(--red-glow);
  transition: transform 0.08s linear;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .8em 1.9em;
  border-radius: 9px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: .015em;
  transition: background .2s, border-color .2s, transform .2s var(--ease-out),
              box-shadow .2s, color .2s;
}
.btn--primary {
  background: linear-gradient(145deg, var(--red) 0%, #C02020 100%);
  color: #fff;
  border-color: rgba(224,48,48,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset;
}
.btn--primary:hover {
  background: linear-gradient(145deg, #EA4444 0%, var(--red) 100%);
  box-shadow: 0 0 32px rgba(224,48,48,.38), 0 8px 22px rgba(0,0,0,.45);
  transform: translateY(-2px);
}
.btn--sm { padding:.48em 1.1em; font-size:.82rem; }

.btn--white {
  background: var(--white); color: #07070E; border-color: var(--white);
  font-weight: 700;
}
.btn--white:hover {
  background: #fff;
  box-shadow: 0 0 28px rgba(237,233,226,.2), 0 8px 22px rgba(0,0,0,.35);
  transform: translateY(-2px);
}
.btn--ghost-white {
  background: transparent; color: var(--white);
  border-color: rgba(255,255,255,.22);
}
.btn--ghost-white:hover {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.05);
}

/* =============================================
   EYEBROW
   ============================================= */
.eyebrow {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--cyan);
  margin-bottom: .7rem;
}
.eyebrow--center { text-align: center; }

/* =============================================
   SECTION TITLE
   ============================================= */
.section-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: var(--white);
}

/* =============================================
   NAV
   ============================================= */
.nav {
  position: sticky; top: 0; z-index: 400;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem;
  background: rgba(7,7,14,.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.nav__logo-box {
  background: var(--red);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .1em;
  padding: .15em .6em;
  border-radius: 6px;
  box-shadow: 0 0 22px var(--red-glow), 0 2px 8px rgba(0,0,0,.4);
  display: inline-block;
  transition: box-shadow .25s, transform .25s var(--ease-out);
}
.nav__logo-box:hover {
  box-shadow: 0 0 36px rgba(224,48,48,.32), 0 2px 8px rgba(0,0,0,.4);
  transform: scale(1.04);
}
.nav__links {
  display: flex; gap: 2.25rem;
  font-size: .87rem;
  font-weight: 500;
  color: var(--text);
}
.nav__links a { transition: color .2s; }
.nav__links a:hover, .nav__links a.active { color: var(--white); }

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

/* Tech grid */
.hero__grid {
  position: absolute;
  inset: -80px;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 30%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 85% 80% at 50% 30%, #000 10%, transparent 72%);
  pointer-events: none;
}

/* Red ambient glow */
.hero__glow {
  position: absolute;
  top: -240px; left: 50%;
  transform: translateX(-50%);
  width: 1000px; height: 1000px;
  background: radial-gradient(circle, rgba(224,48,48,.065) 0%, transparent 58%);
  pointer-events: none;
}

/* Layout */
.hero__layout {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 5.5rem 2.5rem 3.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7rem;
  align-items: center;
  position: relative;
}

/* Hero text column */
.hero__text {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem;
}
.hero__text > * { position: relative; z-index: 1; }
.hero__text::before {
  content: "";
  position: absolute;
  inset: -1.75rem -2.25rem;
  background: rgba(7,7,14,.22);
  backdrop-filter: blur(8px) saturate(.9);
  -webkit-backdrop-filter: blur(8px) saturate(.9);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  z-index: 0;
}

/* Headline */
.hero__headline { display: flex; flex-direction: column; gap: .04em; }
.hero__line {
  display: block;
  font-size: clamp(3rem, 6.5vw, 5.5rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -3px;
}
#scrambleLine { opacity: 0; }

.hero__line--solid  { color: var(--white); }
.hero__line--outline {
  -webkit-text-stroke: 1.5px rgba(237,233,226,.6);
  color: transparent;
}
.hero__line--accent {
  color: var(--red);
  text-shadow: 0 0 80px rgba(224,48,48,.35), 0 0 180px rgba(224,48,48,.12);
}

/* Sub and actions */
.hero__sub {
  font-size: 1.05rem;
  color: var(--white);
  max-width: 50ch;
  line-height: 1.85;
  text-shadow: 0 1px 8px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.6);
}
.hero__actions {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: .35rem;
}
.cta-note { font-size: .78rem; color: var(--muted); }

/* Hero visual (photo) */
.hero__visual { display: flex; justify-content: flex-end; }

.hero__photo-wrap {
  position: relative;
  display: inline-block;
}

/* Corner markers */
.corner {
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--red);
  border-style: solid;
  opacity: .5;
  transition: opacity .3s;
}
.hero__photo-wrap:hover .corner { opacity: .9; }
.corner--tl { top: -8px;  left: -8px;  border-width: 2px 0 0 2px; }
.corner--tr { top: -8px;  right:-8px;  border-width: 2px 2px 0 0; }
.corner--bl { bottom:-8px;left: -8px;  border-width: 0 0 2px 2px; }
.corner--br { bottom:-8px;right:-8px;  border-width: 0 2px 2px 0; }

.hero__photo-wrap > a img {
  width: 270px; height: 270px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-mid);
  display: block;
  box-shadow: 0 0 0 4px rgba(224,48,48,.07), 0 32px 72px rgba(0,0,0,.7);
  transition: box-shadow .35s;
}
.hero__photo-wrap:hover > a img {
  box-shadow: 0 0 0 4px rgba(224,48,48,.22), 0 32px 72px rgba(0,0,0,.8);
}

/* =============================================
   HERO CINEMATIC ROBOT BACKGROUND
   ============================================= */
.hero__top {
  position: relative;
  overflow: hidden;
  height: 70vh;
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  filter: saturate(1) contrast(1.02);
}
.hero__slide.is-active img {
  animation: kenburns 9s linear forwards;
}
@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.06); }
}

/* Veil — minimal, just a soft bottom fade for marquee handoff.
   Text legibility is now handled by the glass backdrops behind the
   hero copy and caption, letting the slideshow imagery breathe. */
.hero__bg-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(7,7,14,.12) 0%,
    rgba(7,7,14,.05) 55%,
    rgba(7,7,14,.55) 100%);
}

/* Lift the layout above the background layers */
.hero__layout,
.hero__stats { position: relative; z-index: 2; }
.hero__grid, .hero__glow { z-index: 1; }

/* LIVE HUD chip — bottom-right of the hero */
.hero__hud {
  position: absolute;
  bottom: 4.5rem; right: 1.5rem;
  z-index: 3;
  display: inline-flex; align-items: center; gap: .42rem;
  background: rgba(4,4,10,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(224,48,48,.42);
  border-radius: 999px;
  padding: .32rem .7rem;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .2em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.hero__hud-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: hudPulse 1.5s ease-in-out infinite;
}
@keyframes hudPulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

/* Rotating caption — bottom-right of the hero, beneath the LIVE HUD */
.hero__caption {
  position: absolute;
  bottom: 1rem; right: 1.5rem;
  z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: .2rem;
  pointer-events: none;
  max-width: 80%;
  text-align: right;
}
.hero__caption-row {
  display: flex; align-items: center; gap: .55rem;
  white-space: nowrap;
}
.hero__caption-num {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  line-height: 1;
  color: rgba(255,255,255,.26);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: .24rem .52rem;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.07);
}
.hero__caption-client {
  font-size: .89rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--red);
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
  white-space: nowrap;
}
.hero__caption-title {
  font-size: .98rem; font-weight: 700;
  color: #fff; line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
}

/* Progress strip — bottom edge of hero, fills then resets per slide */
.hero__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
  z-index: 3;
}
.hero__progress-bar {
  display: block;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--red), #FF5E5E);
  box-shadow: 0 0 10px var(--red-glow);
  transform-origin: left center;
  transform: scaleX(0);
}
.hero__progress-bar.is-running {
  animation: heroProgress var(--hero-slide-dur, 5s) linear forwards;
}
@keyframes heroProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* LinkedIn tag */
.hero__photo-tag {
  position: absolute;
  bottom: -1px; left: 50%;
  transform: translateX(-50%) translateY(50%);
  display: flex; align-items: center; gap: .55rem;
  background: rgba(10,10,18,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-mid);
  border-radius: 12px;
  padding: .6rem 1rem;
  font-size: .78rem;
  color: var(--white);
  white-space: nowrap;
  box-shadow: 0 12px 36px rgba(0,0,0,.65);
  transition: border-color .2s, box-shadow .2s;
  text-decoration: none;
}
.hero__photo-tag:hover {
  border-color: #0a66c2;
  box-shadow: 0 12px 36px rgba(0,0,0,.65), 0 0 18px rgba(10,102,194,.25);
}
.hero__photo-tag svg { width:16px; height:16px; color:#0a66c2; flex-shrink:0; }
.hero__photo-tag small { display:block; color: var(--text); font-size:.7rem; margin-top:2px; }

/* Reveal animation */
[data-reveal] {
  opacity:0; transform:translateY(16px);
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
[data-reveal].revealed { opacity:1; transform:translateY(0); }

/* =============================================
   HERO STATS
   ============================================= */
.hero__stats {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.5rem 2.5rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center;
  position: relative;
}
.stat {
  flex: 1;
  display: flex; flex-direction: column; gap: .28rem;
  padding: 0 2.5rem;
}
.stat:first-child { padding-left: 0; }
.stat__num {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__num--text { font-size: 2rem; letter-spacing: .04em; }
.stat__label {
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--text);
  font-weight: 600;
}
.stat__divider {
  width: 1px; height: 40px;
  background: var(--border);
  flex-shrink: 0;
}

/* =============================================
   MARQUEE
   ============================================= */
.marquee {
  overflow: hidden;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
}
.marquee__track {
  display: flex; align-items: center;
  gap: 3rem;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-offset, -50%)); }
}
.marquee__item {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em;
  color: #46465E;
  white-space: nowrap;
}
.marquee__sep { color: var(--red); opacity: .32; font-size: .5rem; }

/* =============================================
   PROCESS
   ============================================= */
.process {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 6rem 2.5rem;
  border-bottom: 1px solid var(--border);
}
.process__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 3rem;
}
.process__intro {
  font-size: 1rem; color: var(--text);
  line-height: 1.85; max-width: 42ch;
  align-self: end;
}
.process__list { list-style: none; }

.process__item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0 3.5rem;
  padding: 2.25rem 0;
  border-top: 1px solid var(--border);
  align-items: start;
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out),
              border-color .3s;
}
.process__item.visible { opacity: 1; transform: translateY(0); }
.process__item:hover { border-color: var(--border-mid); }

.process__num {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -4px;
  color: rgba(255,255,255,.08);
  user-select: none;
  margin-top: -.42em;
  transition: color .35s;
}
.process__item:hover .process__num { color: rgba(224,48,48,.3); }

.process__title {
  font-size: 1.45rem; font-weight: 800;
  color: var(--white); letter-spacing: -.4px;
  margin-bottom: .85rem;
}
.process__desc {
  font-size: .97rem; color: var(--text);
  line-height: 1.85; max-width: 52ch;
}

/* =============================================
   PROJECTS
   ============================================= */
.projects {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 6rem 2.5rem;
  border-bottom: 1px solid var(--border);
}
.projects__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 2.75rem; gap: 1rem; flex-wrap: wrap;
}
.projects__hint {
  font-size: .82rem; color: #464660;
  align-self: flex-end; padding-bottom: .25rem;
  font-weight: 500;
}

/* =============================================
   BENTO GRID
   ============================================= */
.bento {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-auto-rows: 370px;
  gap: 12px;
}
.bento__card--wide { grid-column: span 2; }

.bento__card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: #040408;
  border: 1px solid var(--border);
  opacity: 0; transform: translateY(24px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out),
              border-color .3s, box-shadow .3s;
}
.bento__card.visible { opacity:1; transform:translateY(0); }
.bento__card:hover {
  border-color: rgba(224,48,48,.22);
  box-shadow: 0 0 45px rgba(224,48,48,.055), 0 30px 60px rgba(0,0,0,.55);
}

.bento__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .7s var(--ease);
}
.bento__card:hover .bento__bg { transform: scale(1.06); }

.bento__index {
  position: absolute; top: 1rem; left: 1.75rem;
  z-index: 10;
  font-size: .6rem; font-weight: 700; letter-spacing: .14em;
  color: rgba(255,255,255,.26);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: .24rem .52rem;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.07);
  pointer-events: none;
}

.bento__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 5.5rem 1.75rem 1.75rem;
  background: linear-gradient(to top,
    rgba(4,4,8,.98) 0%,
    rgba(4,4,8,.9)  30%,
    rgba(4,4,8,.42) 60%,
    transparent     100%);
}

.bento__tags {
  font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.72);
  margin-bottom: .5rem;
  align-self: flex-start;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: .3rem .7rem;
}

.bento__client {
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--cyan);
  margin-bottom: .4rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.9);
}

.bento__title {
  font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 700;
  color: var(--white); line-height: 1.25;
  text-shadow: 0 2px 14px rgba(0,0,0,.75);
  transition: font-size .28s var(--ease);
}
.bento__card--wide .bento__title { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.bento__card:hover .bento__title { font-size: clamp(1.18rem, 2.2vw, 1.5rem); }
.bento__card--wide:hover .bento__title { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }

.bento__desc {
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  line-height: 1.62;
  max-width: 48ch;
  margin-top: .5rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s var(--ease) .08s, transform .3s var(--ease) .08s;
}
.bento__card:hover .bento__desc { opacity: 1; transform: translateY(0); }

.bento__open {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  align-self: flex-start; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.04); color: var(--white);
  cursor: pointer; margin-top: 1rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity .22s, transform .22s, background .18s, border-color .18s;
}
.bento__open svg { width:15px; height:15px; }
.bento__card:hover .bento__open { opacity:1; transform:translateY(0); }
.bento__open:hover { background: var(--red); border-color: var(--red); }

.bento__play-badge {
  position: absolute; top: 1rem; right: 1rem;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(224,48,48,.82);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; pointer-events: none;
  box-shadow: 0 0 18px var(--red-glow), 0 4px 14px rgba(0,0,0,.45);
  transition: transform .2s, background .2s;
}
.bento__card:hover .bento__play-badge { transform:scale(1.1); background:var(--red); }
.bento__play-badge svg { width:17px; height:17px; }

/* =============================================
   CTA BANNER
   ============================================= */
.cta-banner {
  position: relative; overflow: hidden;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 115%,
    rgba(224,48,48,.11), transparent);
  pointer-events: none;
}
.cta-banner__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 7rem 2.5rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  position: relative;
}
.cta-banner__title {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 900; color: var(--white);
  letter-spacing: -1.5px; line-height: 1.08;
  max-width: 16ch;
}
.cta-banner__sub {
  font-size: 1.02rem; color: var(--text);
  max-width: 50ch; line-height: 1.85;
}
.cta-banner__actions {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  margin-top: .75rem;
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: #050509;
  border-top: 1px solid var(--border);
  padding: 3rem 2.5rem;
  text-align: center;
}
.footer__social {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 2rem; margin-bottom: 1.5rem;
}
.footer__social a {
  display: flex; align-items: center; gap: .45rem;
  font-size: .84rem; font-weight: 500; color: #4C4C66;
  transition: color .2s;
}
.footer__social a:hover { color: var(--white); }
.footer__social svg { width:16px; height:16px; flex-shrink:0; }
.footer__copy { font-size:.7rem; color:#343448; letter-spacing:.04em; }

/* =============================================
   MODAL
   ============================================= */
.modal {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(4,4,8,.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.modal__box {
  position: relative; z-index: 1;
  width: 100%; max-width: 900px;
  max-height: calc(100vh - 3rem);
  background: rgba(10,10,16,.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-mid);
  border-radius: 20px;
  overflow: hidden auto;
  box-shadow: 0 0 90px rgba(0,0,0,.85);
  animation: modalIn .24s var(--ease-out);
}
@keyframes modalIn {
  from { opacity:0; transform:scale(.96) translateY(20px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: .6rem .7rem;
  background: rgba(8,8,14,.97);
  border-bottom: 1px solid var(--border);
}
.modal__close {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border-mid);
  background:rgba(255,255,255,.04);
  color:var(--white); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s, border-color .2s;
}
.modal__close:hover { background:var(--red); border-color:var(--red); }
.modal__close svg { width:15px; height:15px; }
.modal__media img {
  width:100%; max-height:540px; object-fit:contain;
  background:#02020A; display:block;
}
.modal__media-link { display:block; cursor:pointer; }
.modal__media-link:hover img { opacity:.9; transition:opacity .2s; }
.modal__media .video-wrap {
  position:relative; padding-bottom:56.25%; background:#000;
}
.modal__media .video-wrap iframe {
  position:absolute; inset:0; width:100%; height:100%; border:none;
}
.modal__media .video-wrap--instagram {
  position:static; padding-bottom:0;
  display:flex; justify-content:center; align-items:center;
  background:#000; padding:1rem 0;
}
.modal__media .video-wrap--instagram iframe {
  position:static; width:100%; max-width:420px;
  height:740px; max-height:80vh;
  background:#000;
}
.modal__media .video-wrap--fallback img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.modal__media .yt-fallback-link {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); transition:background .2s;
}
.modal__media .yt-fallback-link:hover { background:rgba(0,0,0,.15); }
.modal__media .yt-play-icon {
  display:block; width:0; height:0;
  border-top:24px solid transparent;
  border-bottom:24px solid transparent;
  border-left:44px solid #fff;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.modal__info {
  padding:1.5rem 1.75rem;
  border-top:1px solid var(--border);
}
.modal__client {
  font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--cyan); margin-bottom:.3rem;
  display:block;
}
.modal__client--linked { cursor:pointer; }
.modal__client--linked:hover { opacity:.75; }
.modal__title { font-size:1.15rem; font-weight:700; color:var(--white); letter-spacing:-.2px; }
.modal__desc  { font-size:.9rem; color:var(--text); line-height:1.8; margin-top:.5rem; }
.modal__tags  { font-size:.73rem; color:#464660; margin-top:.55rem; letter-spacing:.03em; }
.modal__link  {
  display:inline-flex; align-items:center; gap:.35rem; margin-top:1rem;
  font-size:.82rem; font-weight:600; color:var(--red);
  text-decoration:none; letter-spacing:.02em; transition:opacity .2s;
}
.modal__link:hover { opacity:.72; }
.modal__link svg { width:11px; height:11px; flex-shrink:0; }

/* =============================================
   HERO COMPAT NOTE
   ============================================= */
.hero__compat-note {
  font-size: .75rem;
  color: #484862;
  margin-top: -.2rem;
  font-weight: 500;
}

/* =============================================
   SOCIAL PROOF
   ============================================= */
.proof {
  border-bottom: 1px solid var(--border);
  padding: 6rem 2.5rem;
}
.proof__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.proof__header { margin-bottom: 2.25rem; }
.proof__quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.proof__quote {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), border-color .3s;
}
.proof__quote.visible { opacity: 1; transform: translateY(0); }
.proof__quote:hover   { border-color: var(--border-mid); }

.proof__quote-mark {
  width: 24px; height: 18px;
  fill: var(--red);
  opacity: .38;
  flex-shrink: 0;
}
.proof__quote-text {
  font-size: 1rem;
  line-height: 1.88;
  color: var(--white);
  font-style: italic;
  flex: 1;
}
.proof__quote-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: auto;
}
.proof__quote-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-mid);
  flex-shrink: 0;
}
.proof__quote-footer > div { display:flex; flex-direction:column; gap:.2rem; }
.proof__quote-name    { font-size:.86rem; font-weight:700; color:var(--white); }
.proof__quote-company { font-size:.73rem; color:var(--cyan); text-transform:uppercase; letter-spacing:.12em; font-weight:700; }

/* =============================================
   ROI CALCULATOR
   ============================================= */
.roi {
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  padding: 6rem 2.5rem;
}
.roi__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}
.roi__copy {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.roi__sub {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.85;
  max-width: 40ch;
}
.roi__copy-cta { align-self: flex-start; }
.roi__copy-note {
  font-size: .75rem;
  color: #484862;
}

.roi__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.roi__card.visible { opacity: 1; transform: translateY(0); }

.roi__fields { display:flex; flex-direction:column; gap:1.25rem; }
.roi__field  { display:flex; flex-direction:column; gap:.45rem; }
.roi__label  {
  font-size: .69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text);
}
.roi__input {
  background: rgba(255,255,255,.038);
  border: 1px solid var(--border-mid);
  border-radius: 9px;
  color: var(--white);
  font-size: .95rem;
  font-family: var(--font);
  padding: .72rem 1rem;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.roi__input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-subtle);
}
select.roi__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23686880' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
select.roi__input option { background: #0C0C15; }

.roi__output {
  display: flex;
  align-items: center;
  background: rgba(224,48,48,.055);
  border: 1px solid rgba(224,48,48,.15);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.roi__output-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  text-align: center;
}
.roi__output-num {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.roi__output-label {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text);
  font-weight: 600;
}
.roi__output-divider {
  width: 1px; height: 40px;
  background: rgba(224,48,48,.2);
  flex-shrink: 0;
  margin: 0 1rem;
}
.roi__note {
  font-size: .74rem;
  color: #484862;
  line-height: 1.65;
}

/* =============================================
   COMPATIBILITY STRIP
   ============================================= */
.compat {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 4rem 2.5rem;
}
.compat__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
.compat__label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #484862;
}
.compat__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  list-style: none;
  padding: 0; margin: 0;
}
.compat__list li {
  font-size: .76rem;
  font-weight: 600;
  color: #82829A;
  background: rgba(255,255,255,.024);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: .44rem .9rem;
  letter-spacing: .03em;
  transition: border-color .2s, color .2s, background .2s;
}
.compat__list li:hover {
  border-color: rgba(255,255,255,.15);
  color: var(--white);
  background: rgba(255,255,255,.05);
}
.compat__assurance {
  font-size: .8rem; color: #484862; font-weight: 500;
}

/* =============================================
   RESPONSIVE
   ============================================= */

/* --- Tablet (max 1000px) --- */
@media (max-width:1000px) {
  .bento { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .bento__card { min-height:280px; }
  .bento__card--wide { grid-column:span 2; }

  .process__header { grid-template-columns:1fr; gap:1.75rem; margin-bottom:2.5rem; }
  .process__intro  { max-width:none; }

  .roi__inner { grid-template-columns:1fr; gap:3.5rem; }
  .roi__sub   { max-width:none; }
}

/* --- Mobile (max 720px) --- */
@media (max-width:720px) {
  .nav { padding:0 1.5rem; gap: .75rem; }
  .nav__logo { margin-right: auto; }
  .nav__links { display:none; }
  .btn--sm { font-size:.72rem; padding:.4em .8em; letter-spacing:0; }

  /* Stack slideshow + content vertically so they don't overlap */
  .hero__top {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .hero__bg {
    position: relative;
    height: 42vh;
    min-height: 280px;
    max-height: 420px;
    flex: 0 0 auto;
  }
  .hero__layout {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 3rem 1.5rem 2.5rem;
    gap: 2.5rem;
  }
  .hero__text { align-items: center; }
  .hero__text::before { inset: -1.25rem -1.25rem; border-radius: 18px; }
  .hero__sub  { margin-inline: auto; max-width: 44ch; }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    width: 100%;
    margin-top: .1rem;
  }
  .hero__actions .btn { justify-content: center; }
  .hero__compat-note  { text-align: center; }

  .hero__visual { justify-content: center; }
  .hero__photo-wrap > a img { width: 198px; height: 198px; }
  .hero__photo-tag {
    white-space: normal;
    max-width: 220px;
    text-align: left;
  }
  .hero__photo-wrap { margin-bottom: 2rem; }
  .hero__caption { right: 1.25rem; bottom: 1rem; max-width: 55%; }
  .hero__hud { right: 1.25rem; bottom: 4.25rem; }

  .hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    padding: 1.25rem 1.5rem;
    align-items: start;
    justify-items: center;
  }
  .stat          { padding: 0; align-items: center; text-align: center; }
  .stat__label   { font-size: .62rem; }
  .stat__divider { display: none; }

  .proof    { padding: 4rem 1.5rem; }
  .process  { padding: 4rem 1.5rem; }
  .projects { padding: 4rem 1.5rem; }
  .roi      { padding: 4rem 1.5rem; }
  .compat   { padding: 2.5rem 1.5rem; }
  .cta-banner__inner { padding: 5rem 1.5rem; }
  .footer   { padding: 3rem 1.5rem; }

  .proof__header { margin-bottom: 2rem; }
  .proof__quotes { grid-template-columns: 1fr; }

  .roi__copy-cta  { align-self: stretch; justify-content: center; }
  .roi__copy-note { text-align: center; }
  .roi__card .btn { width: 100%; justify-content: center; }

  .process__header { margin-bottom: 2rem; }
  .process__item   { grid-template-columns: 68px 1fr; gap: 0 1.5rem; padding: 1.75rem 0; }
  .process__num    { font-size: 3.5rem; }

  .cta-banner__actions { flex-direction: column; align-items: center; gap: .75rem; }
  .cta-banner__actions .btn { width: 100%; max-width: 360px; justify-content: center; }

  .modal       { padding: .75rem; }
  .modal__box  {
    border-radius: 16px;
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
  }
  .modal__info { padding: 1.25rem 1.5rem; }
}

/* --- Small mobile (max 520px) --- */
@media (max-width:520px) {
  .bento { grid-template-columns: 1fr; }
  .bento__card--wide { grid-column: span 1; }
  .bento__card { min-height: 240px; }
  /* Always show card labels on touch; hide desc + arrow to avoid overflow */
  .bento__tags    { opacity: 1; transform: none; }
  .bento__client  { transform: none; }
  .bento__title   { transform: none; }
  .bento__desc    { display: none; }
  .bento__open    { display: none; }
  .bento__overlay { padding-top: 2.5rem; }

  .hero__bg { height: 36vh; min-height: 240px; max-height: 360px; }
  .hero__layout { padding: 2.5rem 1.25rem 2rem; gap: 2rem; }
  .hero__photo-wrap > a img { width: 171px; height: 171px; }
  .hero__caption { right: 1rem; bottom: 1rem; max-width: 60%; }
  .hero__caption-title { font-size: .82rem; }
  .hero__hud { right: 1rem; bottom: 3.8rem; padding: .25rem .55rem; font-size: .54rem; }
  .hero__photo-tag { max-width: 190px; }
  .hero__photo-wrap { margin-bottom: 1.75rem; }
  .hero__stats { padding: 1rem 1.25rem; gap: 1.5rem; }
  .stat__num { font-size: 2.2rem; }

  .proof    { padding: 3.5rem 1.25rem; }
  .process  { padding: 3.5rem 1.25rem; }
  .projects { padding: 3.5rem 1.25rem; }
  .roi      { padding: 3.5rem 1.25rem; }
  .compat   { padding: 2.25rem 1.25rem; }
  .cta-banner__inner { padding: 3.5rem 1.25rem; }
  .footer   { padding: 2.5rem 1.25rem; }

  .proof__quote { padding: 1.75rem; }
  .roi__card    { padding: 1.5rem; gap: 1.5rem; }
  .roi__output  { padding: 1.25rem; }
  .roi__output-num { font-size: 1.6rem; }

  .footer__social { gap: 1.5rem; }
  .footer__social a { font-size: .82rem; }
}

/* --- Tiny phones (max 380px) --- */
@media (max-width:380px) {
  .nav { padding: 0 1rem; }
  .btn--sm { display: none; }
  .hero__line { font-size: clamp(2rem, 9.5vw, 2.8rem); letter-spacing: -2px; }
  .section-title { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .stat__num { font-size: 2rem; }
  .process__item { grid-template-columns: 48px 1fr; gap: 0 1rem; }
  .process__num  { font-size: 2.5rem; }
  .roi__output-num { font-size: 1.3rem; }
  .roi__output-divider { margin: 0 .5rem; }
}

/* =============================================
   PERFORMANCE — rendering hints
   ============================================= */
.hero__visual {
  animation: heroVisualIn 0.7s 0.15s var(--ease-out) backwards;
}
@keyframes heroVisualIn {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.marquee__track { will-change: transform; }
.btn            { touch-action: manipulation; }

/* =============================================
   LANG SWITCHER
   ============================================= */
.lang-switcher {
  position: relative;
}
.lang-switcher__trigger {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  color: var(--text);
  font-size: .75rem;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: .07em;
  padding: .38rem .65rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.lang-switcher__trigger:hover {
  color: var(--white);
  border-color: var(--border-bright);
}
.lang-switcher__trigger svg {
  flex-shrink: 0;
  transition: transform .2s var(--ease);
}
.lang-switcher__trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.lang-switcher__menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  background: #13131F;
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  padding: .35rem;
  list-style: none;
  min-width: 130px;
  z-index: 500;
  display: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
}
.lang-switcher__menu.open { display: block; }
.lang-switcher__btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 500;
  padding: .45rem .8rem;
  text-align: left;
  cursor: pointer;
  border-radius: 7px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.lang-switcher__btn:hover {
  background: rgba(255,255,255,.07);
  color: var(--white);
}
.lang-switcher__btn.active {
  color: var(--white);
  font-weight: 700;
}

/* flag-icons size normalisation */
.lang-switcher .fi {
  width: 1.25em;
  height: .94em;
  flex-shrink: 0;
  border-radius: 2px;
}

/* =============================================
   PERFORMANCE — reduced-motion
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1    !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto  !important;
  }
  .marquee__track { animation: none; }
  [data-animate]  { opacity: 1 !important; transform: none !important; }
  [data-reveal]   { opacity: 1 !important; transform: none !important; }
  #scrambleLine   { opacity: 1 !important; }
  .hero__visual   { animation: none; }
  .hero__slide.is-active img { animation: none; transform: none; }
  .hero__hud-dot              { animation: none; }
  .hero__progress-bar         { animation: none; transform: scaleX(1); }
}

/* =============================================
   PERFORMANCE — coarse pointer (touch)
   ============================================= */
@media (pointer: coarse) {
  .modal__box         { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero__photo-tag    { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .bento__card::after { backdrop-filter: none; -webkit-backdrop-filter: none; }
}