/* ============================================================
   COPLERO · Presentación BITCONF
   Horizontal deck — luxury / minimal · brandbook Coplero
   ============================================================ */

:root {
  --navy: #001B66;
  --blue: #1718FF;
  --gray: #E3E5F3;
  --black: #000000;
  --ink: #04030a;

  --display: "Darker Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --accent: "Fraunces", Georgia, serif;
  --body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --xs: 4px; --sm: 8px; --md: 16px; --lg: 24px; --xl: 32px; --xxl: 64px;
  --r-md: 8px; --r-lg: 16px; --r-xl: 24px;

  /* generous side padding = luxury whitespace */
  --pad-x: clamp(40px, 9vw, 160px);
  --pad-y: clamp(64px, 11vh, 120px);
  --maxw: 1160px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scrollbar-width: none; }

body {
  font-family: var(--body);
  background: var(--ink);
  color: var(--gray);
  font-weight: 300;
  /* horizontal deck: vertical scroll DRIVES the pin; just hide the scrollbar */
  overflow-x: hidden;
  scrollbar-width: none;
  cursor: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
@media (hover: none) { body { cursor: auto; } }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- GRAIN ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 9000; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainshift 0.6s steps(2) infinite;
  mix-blend-mode: overlay;
}
@keyframes grainshift { 0%{transform:translate(0,0)} 50%{transform:translate(-3%,2%)} 100%{transform:translate(2%,-2%)} }

/* ---------- CURSOR ---------- */
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; transform: translate(-50%, -50%); }
.cursor { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.7); transition: width .35s var(--ease), height .35s var(--ease), background .35s var(--ease); }
.cursor-dot { width: 4px; height: 4px; background: #fff; }
.cursor.is-hover { width: 58px; height: 58px; background: rgba(255,255,255,0.1); }
@media (hover: none) { .cursor, .cursor-dot { display: none; } }

/* ---------- PROGRESS (top, horizontal) ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 8000; background: rgba(255,255,255,0.07); }
.progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue), #6f8bff); box-shadow: 0 0 16px rgba(23,24,255,0.7); }

/* ---------- DOTS (bottom center) ---------- */
.dots { position: fixed; bottom: clamp(20px,4vh,38px); left: 50%; transform: translateX(-50%); z-index: 8000; display: flex; gap: 12px; }
.dots button { width: 7px; height: 7px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.25); cursor: none; padding: 0; transition: all .4s var(--ease); }
.dots button:hover { background: rgba(255,255,255,0.6); transform: scale(1.3); }
.dots button.active { background: var(--gray); transform: scale(1.35); box-shadow: 0 0 0 4px rgba(23,24,255,0.22); }

/* ---------- BRANDMARK + COUNTER ---------- */
.brandmark { position: fixed; top: clamp(20px,3.4vw,40px); left: clamp(20px,3.4vw,44px); z-index: 8000; width: 34px; opacity: .9; transition: transform .5s var(--ease), opacity .4s; }
.brandmark img { width: 100%; }
.brandmark:hover { transform: rotate(20deg) scale(1.06); opacity: 1; }
.counter { position: fixed; top: clamp(22px,3.4vw,42px); right: clamp(22px,3.4vw,46px); z-index: 8000; font-family: var(--display); font-weight: 700; font-size: .9rem; letter-spacing: .1em; color: rgba(227,229,243,0.75); display: flex; gap: 5px; }
.counter__sep { opacity: .4; }
.counter__total { opacity: .5; }

/* ============================================================
   HORIZONTAL DECK
   ============================================================ */
.viewport { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; }
.track { display: flex; height: 100vh; height: 100svh; will-change: transform; }

.panel {
  position: relative;
  flex: 0 0 100vw; width: 100vw;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; align-items: center;
  padding: var(--pad-y) var(--pad-x);
}

.panel .bg { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center; will-change: transform; }
.panel .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; will-change: transform; }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 100% at 50% 45%, rgba(4,3,10,0.30) 0%, rgba(4,3,10,0.74) 100%); }
.panel--hero::after, .panel--close::after { background: radial-gradient(120% 100% at 50% 40%, rgba(4,3,10,0.18) 0%, rgba(4,3,10,0.80) 100%); }
/* stronger black overlay on video panels to keep white text readable */
.panel[data-video]::after { background: radial-gradient(120% 110% at 50% 45%, rgba(4,3,10,0.42) 0%, rgba(4,3,10,0.82) 100%); }

.panel__inner { position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto; max-height: 100%; }
.panel__inner.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.panel__inner.narrow { max-width: 880px; }

/* ============================================================
   TYPOGRAPHY  (smaller, refined)
   ============================================================ */
.display { font-family: var(--display); font-weight: 800; line-height: .94; letter-spacing: -0.025em; text-transform: uppercase; color: #fff; }
.headline { font-size: clamp(1.9rem, 4.4vw, 3.7rem); }
.headline-xl { font-size: clamp(2rem, 5.2vw, 4.6rem); }
.display em, .accent { font-family: var(--accent); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.005em; color: var(--gray); }

.eyebrow { display: inline-block; font-family: var(--body); font-weight: 500; font-size: clamp(.66rem,.82vw,.78rem); letter-spacing: .3em; text-transform: uppercase; color: #7f8cff; margin-bottom: clamp(20px,3vh,34px); }
.lead { font-size: clamp(1rem, 1.7vw, 1.4rem); line-height: 1.5; color: #fff; font-weight: 300; max-width: 46ch; margin-top: var(--lg); }
.hint, .ph { font-size: clamp(.82rem,1vw,.95rem); line-height: 1.5; color: rgba(227,229,243,0.6); margin-top: var(--lg); max-width: 44ch; }
.ph { color: #6f8bff; opacity: .8; font-style: italic; }
.dotsep { opacity: .4; margin: 0 .55em; }

/* ---------- HERO ---------- */
.panel--hero .hero__iso { width: clamp(56px, 7vw, 104px); margin-bottom: clamp(24px,4vh,42px); filter: drop-shadow(0 0 38px rgba(23,24,255,0.45)); }
.hero__word { font-size: clamp(3rem, 11vw, 8.5rem); letter-spacing: -0.04em; }
.hero__tag { font-size: clamp(1rem, 1.9vw, 1.5rem); color: #fff; font-weight: 300; margin-top: clamp(20px,3vh,30px); }
.hero__meta { margin-top: clamp(26px,4vh,40px); font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(227,229,243,0.6); }

/* ---------- TRIAD ---------- */
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--md); margin-top: clamp(28px,4vh,48px); }
.triad__item { padding: clamp(20px,3vh,34px) clamp(18px,2vw,28px); border: 1px solid rgba(227,229,243,0.14); border-radius: var(--r-lg); background: rgba(0,27,102,0.16); backdrop-filter: blur(6px); }
.triad__num { font-family: var(--display); font-weight: 800; font-size: .85rem; color: var(--blue); }
.triad__item h3 { font-family: var(--display); text-transform: uppercase; font-weight: 800; font-size: clamp(1.3rem,2.1vw,2rem); color: #fff; margin-top: var(--sm); letter-spacing: -0.02em; }

/* ---------- SERVICES INDEX ---------- */
.svc-index { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px,1.6vh,20px) clamp(24px,4vw,64px); margin-top: clamp(26px,4vh,44px); }
.svc-index li { display: flex; align-items: baseline; gap: 14px; font-family: var(--display); text-transform: uppercase; font-weight: 700; font-size: clamp(1.05rem,1.7vw,1.55rem); color: #fff; letter-spacing: -0.01em; padding-bottom: clamp(8px,1.4vh,14px); border-bottom: 1px solid rgba(227,229,243,0.12); transition: color .4s, border-color .4s; }
.svc-index li span { font-size: .72rem; color: #7f8cff; font-weight: 600; letter-spacing: .05em; }
.svc-index li:hover { color: #fff; border-color: var(--blue); }

/* ---------- PROCESS ---------- */
.process { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: var(--lg); margin-top: clamp(30px,5vh,56px); }
.process li { border-top: 1px solid rgba(227,229,243,0.2); padding-top: var(--md); }
.process li span { font-family: var(--display); font-weight: 800; color: var(--blue); font-size: 1rem; }
.process li h3 { font-family: var(--display); text-transform: uppercase; font-weight: 700; color: #fff; font-size: clamp(1.1rem,1.7vw,1.6rem); margin-top: var(--xs); letter-spacing: -0.01em; }

/* ---------- TEAM ---------- */
.team { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2vw,32px); margin-top: clamp(22px,3vh,38px); }
.member__photo { height: min(42vh, 360px); aspect-ratio: 3/4; margin: 0 auto var(--md); border-radius: var(--r-lg); border: 1px solid rgba(227,229,243,0.14); background-color: #06061b; background-image: radial-gradient(120% 120% at 30% 20%, rgba(23,24,255,0.35), rgba(0,27,102,0.5) 55%, #06061b); background-size: cover; background-position: center top; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.member__initials { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem,5vw,4.4rem); color: rgba(255,255,255,0.85); }
.member h3 { font-family: var(--display); text-transform: uppercase; font-weight: 800; color: #fff; font-size: clamp(1.2rem,1.9vw,1.7rem); letter-spacing: -0.02em; text-align: center; }
.member__role { display: block; color: #7f8cff; font-size: .74rem; letter-spacing: .1em; margin-top: var(--xs); text-transform: uppercase; text-align: center; }

/* ---------- GALLERY (row) ---------- */
.gallery { display: flex; gap: clamp(12px,1.4vw,20px); margin-top: clamp(22px,3vh,40px); height: min(54vh, 460px); }
.gallery__item { position: relative; flex: 1; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(120% 120% at 30% 20%, rgba(23,24,255,0.3), rgba(0,27,102,0.5) 55%, #06061b); background-size: cover; background-position: center; border: 1px solid rgba(227,229,243,0.1); transition: flex .6s var(--ease); }
.gallery__item:hover { flex: 1.5; }
.gallery__item figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(4,3,10,0.4); padding: 5px 11px; border-radius: 100px; backdrop-filter: blur(4px); }
.gallery__item::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(4,3,10,0.5), transparent 60%); }

/* ---------- REASONS / DELIVERABLES ---------- */
.reasons, .deliverables { list-style: none; margin-top: clamp(26px,4vh,46px); display: grid; gap: clamp(12px,1.8vh,20px); }
.reasons li { font-size: clamp(1.05rem,1.7vw,1.5rem); line-height: 1.3; color: #fff; font-weight: 300; padding-left: var(--xl); position: relative; }
.reasons li::before { content:""; position:absolute; left:0; top:.62em; width: 20px; height: 1px; background: var(--blue); }
.deliverables li { font-family: var(--display); text-transform: uppercase; font-weight: 700; font-size: clamp(1.2rem,2vw,1.9rem); color: #fff; letter-spacing: -0.01em; padding-bottom: clamp(8px,1.4vh,14px); border-bottom: 1px solid rgba(227,229,243,0.12); }

/* ---------- ROLES / TIMELINE ---------- */
.roles, .timeline { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--md); margin-top: clamp(26px,4vh,46px); }
.role, .tl { padding: clamp(18px,2.6vh,30px) clamp(16px,1.6vw,24px); border: 1px solid rgba(227,229,243,0.14); border-radius: var(--r-lg); background: rgba(0,27,102,0.14); }
.role h3, .tl__when { font-family: var(--display); text-transform: uppercase; font-weight: 700; color: #fff; font-size: clamp(1.05rem,1.6vw,1.45rem); letter-spacing: -0.01em; }
.tl__when { color: #7f8cff; display: block; margin-bottom: var(--xs); }
.tl p { font-size: .86rem; line-height: 1.4; color: rgba(227,229,243,0.72); }
.roles { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .roles, .timeline { grid-template-columns: repeat(2,1fr); } }

/* ---------- PRICE ---------- */
.price { margin: clamp(20px,4vh,40px) 0 var(--md); display: flex; flex-direction: column; align-items: center; gap: var(--xs); }
.price__from { font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: #7f8cff; }
.price__num { font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem,8vw,6rem); color: #fff; line-height: 1; letter-spacing: -0.03em; }

/* ---------- CLOSE ---------- */
.panel--close .close__logo { width: clamp(150px,22vw,300px); margin-bottom: clamp(20px,3vh,32px); }
.contact { margin-top: var(--md); font-size: clamp(.95rem,1.5vw,1.3rem); color: #fff; }
.contact a { border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 2px; transition: border-color .4s; }
.contact a:hover { border-color: var(--blue); }
.qr { margin-top: clamp(28px,4vh,44px); display: flex; flex-direction: column; align-items: center; }
.qr__box { width: 118px; height: 118px; background: #fff; border-radius: var(--r-md); padding: 9px; display: flex; align-items: center; justify-content: center; }
.qr__box img, .qr__box canvas { width: 100% !important; height: 100% !important; }

/* ============================================================
   REVEAL STATES
   ============================================================ */
.reveal { opacity: 0; will-change: transform, opacity; }
[data-reveal="up"] { transform: translateY(34px); }
[data-reveal="zoom"] { transform: scale(0.84); }
.split-line, .split-char { display: inline-block; }
.line-mask { overflow: hidden; display: block; }

/* ============================================================
   FALLBACK: vertical stacking on small / touch screens
   ============================================================ */
@media (max-width: 760px) {
  body { overflow-y: auto; overflow-x: hidden; cursor: auto; }
  .viewport { height: auto; overflow: visible; }
  .track { display: block; height: auto; transform: none !important; }
  .panel { flex: none; width: 100%; height: auto; min-height: 100vh; min-height: 100svh; padding: clamp(90px,16vh,130px) 24px; }
  .triad, .process, .roles, .timeline { grid-template-columns: 1fr 1fr; }
  .svc-index { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; }
  .member__photo { height: 44vh; }
  .gallery { flex-direction: column; height: auto; }
  .gallery__item { height: 30vh; }
  .counter { display: none; }
}

/* ============================================================
   FEATURE VIDEO PANELS (after movies)
   ============================================================ */
.panel--feature { padding: 0; }
.panel--feature::after { content: none; }
.feature__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; background: #000; }
.feature__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,3,10,0.55) 0%, rgba(4,3,10,0.12) 32%, rgba(4,3,10,0.45) 66%, rgba(4,3,10,0.94) 100%); }
.feature__title { position: absolute; right: var(--pad-x); top: 50%; transform: translateY(-50%); text-align: right; max-width: 48%; z-index: 3; }
.feature__title .eyebrow { color: #7f8cff; }
.feature__title .headline { font-size: clamp(2.6rem, 6.5vw, 6rem); }
.feature__meta { margin-top: var(--md); color: rgba(227,229,243,0.82); font-size: clamp(.92rem,1.3vw,1.2rem); line-height: 1.4; }

/* big center play */
.feature__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 4; width: clamp(72px,8vw,108px); height: clamp(72px,8vw,108px); border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); background: rgba(4,3,10,0.32); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; cursor: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.feature__play svg { width: 34%; height: 34%; fill: #fff; margin-left: 5%; }
.feature__play.hidden { opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(0.7); }

/* control bar */
.feature__controls { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: clamp(22px,4vh,40px); z-index: 5; display: flex; align-items: center; gap: 14px; opacity: 0; transition: opacity .4s; }
.panel--feature:hover .feature__controls, .feature__controls.show { opacity: 1; }
.fctrl-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28); background: rgba(4,3,10,0.45); backdrop-filter: blur(8px); color: #fff; cursor: none; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .3s, transform .3s; padding: 0; }
.fctrl-btn:hover { background: rgba(23,24,255,0.45); transform: scale(1.06); }
.fctrl-btn svg { width: 15px; height: 15px; fill: #fff; }
.fctrl-bar { position: relative; flex: 1; height: 3px; background: rgba(255,255,255,0.22); border-radius: 3px; cursor: none; }
.fctrl-bar__fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: var(--blue); border-radius: 3px; box-shadow: 0 0 12px rgba(23,24,255,0.7); }
.fctrl-time { font-family: var(--display); font-weight: 700; font-size: .85rem; color: rgba(255,255,255,0.82); flex: 0 0 auto; letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* ============================================================
   REELS / PHONES (publicidad, recap)
   ============================================================ */
.reels { display: grid; grid-template-columns: 0.95fr 1.3fr; gap: clamp(26px,4vw,66px); align-items: center; height: 100%; }
.reels--two { grid-template-columns: 0.78fr 1.7fr; }
.reels__left { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px,3vh,34px); }
.reels__head .hint { margin-top: var(--sm); }
.reels__head .headline { font-size: clamp(1.7rem, 3.4vw, 3rem); }
.reels__right { display: flex; align-items: center; justify-content: center; gap: clamp(16px,1.8vw,30px); }
.phone { position: relative; height: min(58vh, 520px); aspect-ratio: 9/16; border-radius: 26px; overflow: hidden; border: 1px solid rgba(227,229,243,0.2); background: #000; box-shadow: 0 40px 100px rgba(0,0,0,0.6); flex: 0 0 auto; }
.reels--two .phone { height: min(62vh, 540px); }
.phone--up { margin-bottom: clamp(22px,4.5vh,44px); }
.phone--down { margin-top: clamp(22px,4.5vh,44px); }
.reel-wide { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; border: 1px solid rgba(227,229,243,0.2); background: #000; box-shadow: 0 30px 70px rgba(0,0,0,0.5); }
.phone video, .reel-wide video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   PHOTO WALL (coberturas)
   ============================================================ */
.panel--wall { padding: 0; }
.panel--wall::after { content: none; }
.wall { position: absolute; inset: 0; z-index: -2; display: flex; gap: 14px; padding: 14px; }
.wall__col { flex: 1; display: flex; flex-direction: column; gap: 14px; will-change: transform; }
.wall__col img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; opacity: .92; }
.wall__col--down { animation: wallDown 26s linear infinite; }
.wall__col--up { animation: wallUp 30s linear infinite; }
.wall__col--slow { animation-duration: 38s; }
@keyframes wallDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes wallUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.wall__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,3,10,0.40) 0%, rgba(4,3,10,0.25) 28%, rgba(4,3,10,0.55) 62%, rgba(4,3,10,0.95) 100%); }

/* ============================================================
   CREW (propuesta de equipo)
   ============================================================ */
.crew { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--md); margin-top: clamp(26px,4vh,46px); }
.crew__item { padding: clamp(20px,3vh,32px) clamp(16px,1.6vw,24px); border: 1px solid rgba(227,229,243,0.14); border-radius: var(--r-lg); background: rgba(0,27,102,0.16); }
.crew__n { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem,5vw,3.8rem); color: var(--blue); line-height: 1; }
.crew__item h3 { font-family: var(--display); text-transform: uppercase; font-weight: 700; color: #fff; font-size: clamp(1.05rem,1.6vw,1.5rem); margin-top: var(--sm); letter-spacing: -0.01em; }
.crew__item p { font-size: .85rem; color: rgba(227,229,243,0.7); margin-top: var(--xs); }

/* ============================================================
   BUDGET (inversión)
   ============================================================ */
.budget { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px,4vw,64px); margin-top: clamp(24px,4vh,42px); align-items: center; }
.budget__rows { display: grid; gap: var(--sm); }
.budget__row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--md); align-items: baseline; padding-bottom: var(--sm); border-bottom: 1px solid rgba(227,229,243,0.12); }
.budget__row > span:first-child { color: #fff; font-size: clamp(.95rem,1.3vw,1.15rem); }
.budget__q { color: #7f8cff; font-family: var(--display); font-weight: 700; }
.budget__v { color: rgba(227,229,243,0.7); font-variant-numeric: tabular-nums; }
.budget__total { text-align: center; display: flex; flex-direction: column; gap: var(--xs); padding: clamp(22px,3.4vh,34px); border: 1px solid rgba(23,24,255,0.32); border-radius: var(--r-lg); background: rgba(23,24,255,0.08); }
.budget__total .price__num { font-size: clamp(2.2rem,5.5vw,4rem); }
.budget__total .ph { margin-top: var(--sm); }

/* ============================================================
   TIMELINE RAIL
   ============================================================ */
.rail { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-top: clamp(40px,7vh,84px); padding-top: 8px; }
.rail::before { content: ""; position: absolute; top: 6px; left: 11%; right: 11%; height: 2px; background: linear-gradient(90deg, transparent, rgba(127,140,255,0.55) 15%, rgba(127,140,255,0.55) 85%, transparent); }
.rail__step { position: relative; text-align: center; padding: 0 clamp(10px,1.4vw,22px); }
.rail__step::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px rgba(23,24,255,0.14), 0 0 20px rgba(23,24,255,0.85); z-index: 2; }
.rail__when { display: block; margin-top: 30px; font-family: var(--display); text-transform: uppercase; font-weight: 700; color: #7f8cff; font-size: clamp(.78rem,1vw,.9rem); letter-spacing: .14em; }
.rail__step h3 { font-family: var(--display); text-transform: uppercase; font-weight: 800; color: #fff; font-size: clamp(1.2rem,2vw,1.9rem); letter-spacing: -0.02em; margin-top: var(--xs); }
.rail__step p { font-size: clamp(.82rem,1vw,.95rem); color: rgba(227,229,243,0.72); margin-top: var(--xs); line-height: 1.4; }

/* ============================================================
   FRAMED VIDEO CONTROLS (publi / recap)
   ============================================================ */
.vframe__play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); background: rgba(4,3,10,0.34); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; cursor: none; z-index: 3; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.vframe__play svg { width: 40%; height: 40%; fill: #fff; margin-left: 3px; }
.vframe__play.hidden { opacity: 0; pointer-events: none; transform: scale(0.7); }
.vframe__ctrl { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .3s; }
.phone:hover .vframe__ctrl, .reel-wide:hover .vframe__ctrl { opacity: 1; }
.vframe__ctrl .fctrl-btn { width: 30px; height: 30px; }
.vframe__ctrl .fctrl-btn svg { width: 13px; height: 13px; }
.vframe__badge { position: absolute; top: 10px; right: 10px; z-index: 5; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(4,3,10,0.5); backdrop-filter: blur(6px); color: #fff; cursor: none; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .3s, transform .3s, border-color .3s; }
.vframe__badge svg { width: 15px; height: 15px; fill: #fff; }
.vframe__badge:hover { transform: scale(1.08); }
.vframe__badge.on { background: rgba(23,24,255,0.55); border-color: rgba(23,24,255,0.7); }
.fctrl-btn.on { background: rgba(23,24,255,0.45); }

/* ============================================================
   RESPONSIVE additions for new components
   ============================================================ */
@media (max-width: 980px) {
  .crew { grid-template-columns: repeat(2,1fr); }
  .budget { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .feature__title { position: relative; right: auto; top: auto; transform: none; text-align: left; max-width: 100%; padding: 0 24px; }
  .panel--feature, .panel--wall { padding: clamp(90px,16vh,130px) 24px; }
  .reels, .reels--two { grid-template-columns: 1fr; }
  .reels__right { gap: 16px; }
  .phone, .reels--two .phone { height: 58vh; }
  .phone--up, .phone--down { margin: 0; }
  .reel-wide { width: 100%; height: auto; }
  .rail { grid-template-columns: 1fr 1fr; gap: 36px 0; }
  .rail::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .grain { animation: none; }
  .wall__col { animation: none !important; }
}