/* ============================================================
   AUTOMOTIVE LANDING PAGE — page-specific styles
   (loads after style.css and reuses its tokens/components:
   .btn, .eyebrow, .section-head, .reveal, .hero__*, .reel-card,
   .results/.stats__bg shell, .carousel__arrow, .quiz-*, .footer)
============================================================= */

/* ---- shared staggered-grid reveal utility ---- */
.stagger-item{
  opacity:0; transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--i, 0) * .08s);
}
.reveal.is-visible .stagger-item{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .stagger-item{ opacity:1; transform:none; transition:none; } }

/* these sections have their own solid background colour — fading the whole
   section's opacity (the default .reveal behaviour) makes that background
   pop in abruptly once the fade finishes, instead of blending with the
   scroll. keep the section itself always visible; only its .stagger-item
   children animate in. */
.reveal.reveal--content-only{ opacity:1; transform:none; }

/* ---- smooth colour blend between adjacent sections ---- */
.fade-to-ink::after,
.fade-to-surface::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:130px; z-index:-1; pointer-events:none;
}
.fade-to-ink::after{ background:linear-gradient(to bottom, transparent, var(--ink)); }
.fade-to-surface::after{ background:linear-gradient(to bottom, transparent, var(--surface)); }

/* ============================================================
   HERO — automotive speed-line flourish
============================================================= */
/* this page's headline is a longer promo line than the main site's —
   shrink it and let it wrap across more lines instead of towering */
.nx-hero__title{ font-size:clamp(1.9rem, 4.6vw, 3.1rem); max-width:15ch; line-height:1.18; }
@media (min-width:1100px){ .nx-hero__title{ max-width:13.5ch; } }
.hero__speedlines{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.speedline{
  position:absolute; height:2px; width:36%; left:-40%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: speedline-sweep 5s linear infinite;
}
.speedline--1{ top:20%; animation-duration:4.4s; }
.speedline--2{ top:44%; width:26%; animation-duration:5.8s; animation-delay:1.3s; }
.speedline--3{ top:66%; width:46%; animation-duration:5s; animation-delay:2.6s; }
@keyframes speedline-sweep{
  0%{ transform:translateX(0); opacity:0; }
  8%{ opacity:1; }
  90%{ opacity:1; }
  100%{ transform:translateX(340%); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .speedline{ animation:none; opacity:0; } }

/* ============================================================
   PROBLEM — "wrong" section: dark + red warning accent
============================================================= */
.problem{ position:relative; z-index:1; overflow:hidden; }
.problem__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(700px 420px at 10% 0%, rgba(239,68,68,.22), transparent 65%),
    radial-gradient(600px 380px at 100% 100%, rgba(239,68,68,.12), transparent 65%);
}
.problem__inner{ position:relative; z-index:1; }
.problem__grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:760px){ .problem__grid{ grid-template-columns:1fr; } }

.problem-card{
  background:var(--ink-2); border:1px solid rgba(239,68,68,.22); border-left:3px solid #ef4444;
  border-radius:var(--radius); padding:26px; display:flex; gap:16px; align-items:flex-start;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.problem-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -18px rgba(239,68,68,.35); border-color:rgba(239,68,68,.5); }
.problem-card__icon{
  flex-shrink:0; width:40px; height:40px; border-radius:50%; background:rgba(239,68,68,.15);
  color:#ef4444; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700;
}
.problem-card h3{ color:#fff; font-size:1.05rem; margin-bottom:6px; }
.problem-card p{ color:#c7d2fe; font-size:.92rem; line-height:1.55; }

/* ============================================================
   SOLUTION — "right" section: light + brand accent
============================================================= */
.solution{ position:relative; z-index:1; }
.solution__grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:760px){ .solution__grid{ grid-template-columns:1fr; } }

.solution-card{
  background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:var(--radius); padding:26px; display:flex; gap:16px; align-items:flex-start;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.solution-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -18px rgba(7,117,232,.28); border-color:rgba(7,117,232,.4); }
.solution-card__icon{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; font-weight:700;
}
.solution-card h3{ font-size:1.05rem; margin-bottom:6px; }
.solution-card p{ color:var(--muted); font-size:.92rem; line-height:1.55; }

/* ============================================================
   WHO — target-audience grid
============================================================= */
.who{ position:relative; z-index:1; }
.who__grid{ max-width:860px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
@media (max-width:480px){ .who__grid{ gap:10px; } }

.who-card{
  display:flex; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 18px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.who-card:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(7,117,232,.28); border-color:rgba(7,117,232,.35); }
.who-card__icon{ font-size:1.25rem; line-height:1; flex-shrink:0; }
.who-card h3{ font-size:.9rem; font-weight:600; }
@media (max-width:480px){
  .who-card{ padding:10px 14px; gap:12px; }
  .who-card h3{ font-size:.85rem; }
}
.who__more{
  display:flex; align-items:center; gap:14px;
  width:fit-content; margin:22px auto 0;
  background:rgba(7,117,232,.12); border:1px solid rgba(7,117,232,.4);
  color:var(--brand-2); font-family:var(--font-display); font-weight:600; font-size:.9rem; letter-spacing:.01em;
  padding:12px 18px; border-radius:var(--radius-sm);
  box-shadow:0 0 26px rgba(7,117,232,.28);
  animation: who-more-glow 2.6s ease-in-out infinite;
}
@media (max-width:480px){ .who__more{ padding:10px 14px; gap:12px; font-size:.85rem; } }
.who__more-dot{
  width:7px; height:7px; border-radius:50%; background:var(--brand-2); flex-shrink:0;
  animation: who-dot-pulse 1.5s ease-in-out infinite;
}
@keyframes who-more-glow{
  0%,100%{ box-shadow:0 0 18px rgba(7,117,232,.22); border-color:rgba(7,117,232,.35); }
  50%{ box-shadow:0 0 32px rgba(7,117,232,.4); border-color:rgba(7,117,232,.6); }
}
@keyframes who-dot-pulse{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(7,117,232,.55); }
  50%{ opacity:.65; box-shadow:0 0 0 6px rgba(7,117,232,0); }
}

/* ============================================================
   WHAT — deliverables grid
============================================================= */
.what{ position:relative; z-index:1; }
.what__grid{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:640px){ .what__grid{ grid-template-columns:1fr; } }

.what-card{
  display:flex; align-items:center; gap:16px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px; transition:transform .3s ease, box-shadow .3s ease;
}
.what-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -16px rgba(7,117,232,.2); }
.what-card__icon{
  flex-shrink:0; width:44px; height:44px; border-radius:12px; background:rgba(7,117,232,.1);
  color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.what-card span{ font-weight:600; font-size:.95rem; }

/* ============================================================
   VIDEO RESULTS CAROUSEL — extends the .results/.carousel shell
============================================================= */
.video-carousel{ display:flex; align-items:center; gap:14px; max-width:1000px; margin:0 auto; }
.video-carousel__viewport{ flex:1; overflow-x:hidden; overflow-y:visible; padding-top:18px; }
.video-carousel__track{ display:flex; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.video-carousel__track .result-card{ flex:0 0 100%; }
@media (max-width:760px){ .video-carousel{ gap:8px; } }

.result-card{
  position:relative;
  display:grid; grid-template-columns:240px 1fr; gap:36px; align-items:center;
  background:linear-gradient(155deg, var(--ink-2) 0%, var(--surface-2) 140%);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:32px;
}

.result-card__media{
  position:relative; width:100%; max-width:240px; aspect-ratio:9/16; border-radius:20px; overflow:hidden;
  background:var(--ink); margin:0 auto;
  box-shadow:0 24px 48px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  animation: result-media-glow 3.2s ease-in-out infinite;
}
.result-card__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.result-card__play{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center; border:0; padding:0; cursor:pointer; color:#fff;
  background:linear-gradient(180deg, rgba(11,18,41,.05), rgba(11,18,41,.45));
  transition:opacity .3s ease;
}
.result-card__play.is-hidden{ opacity:0; pointer-events:none; }
.result-card__play:hover .reel-card__cta-play, .result-card__play:focus-visible .reel-card__cta-play{ transform:scale(1.1); }
.result-card__play:focus-visible{ outline:2px solid var(--brand-2); outline-offset:-4px; }
@keyframes result-media-glow{
  0%,100%{ box-shadow:0 24px 48px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), 0 0 26px -6px rgba(7,117,232,.35); }
  50%{ box-shadow:0 24px 48px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), 0 0 46px -4px rgba(7,117,232,.65); }
}
@media (prefers-reduced-motion: reduce){ .result-card__media{ animation:none; } }

.result-card__body{ display:flex; flex-direction:column; align-items:center; text-align:center; }

.result-card__client{ display:flex; align-items:center; justify-content:center; margin-top:14px; }
.result-card__client-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.result-card__client-info strong{ color:#fff; font-size:1.5rem; font-family:var(--font-display); }
.result-card__client-info span{ color:#94a3d9; font-size:.78rem; }

.result-card__headline{ margin:20px 0 18px; }
.result-card__headline-num{
  display:block; font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(2.3rem,4.6vw,3.2rem);
  background:linear-gradient(100deg,#fff,var(--brand-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.result-card__headline-label{ display:block; color:#c7d2fe; font-size:.92rem; margin-top:6px; line-height:1.4; max-width:38ch; margin-left:auto; margin-right:auto; }

.result-card__stats{ display:flex; justify-content:center; gap:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); flex-wrap:wrap; width:100%; }
.result-card__stat{ display:flex; flex-direction:column; gap:2px; }
.result-card__stat strong{ font-family:var(--font-display); font-size:1.15rem; color:#fff; line-height:1; }
.result-card__stat span{ font-size:.74rem; color:#94a3d9; }

/* mobile: shorten the card so it fits comfortably on a phone screen
   (must come after the base rules above so it wins the cascade) */
@media (max-width:700px){
  .result-card{ grid-template-columns:1fr; padding:20px; gap:18px; }
  .result-card__media{ max-width:150px; aspect-ratio:3/4; }
  .result-card__client{ margin-top:4px; }
  .result-card__headline{ margin:16px 0 14px; }
  .result-card__stats{ gap:14px 20px; padding-top:12px; }
}

/* ============================================================
   REVIEWS
============================================================= */
.reviews{ max-width:1100px; margin:80px auto 0; }
.reviews__title{ color:#fff; font-size:1.3rem; text-align:center; margin-bottom:28px; }
.reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .reviews__grid{ grid-template-columns:1fr; } }

.review-card{
  background:var(--ink-2); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:24px;
  display:flex; flex-direction:column; gap:14px; transition:border-color .2s ease;
}
.review-card.is-expandable{ cursor:pointer; }
.review-card.is-expandable:hover{ border-color:rgba(7,117,232,.35); }
.review-card__stars{ color:var(--brand-2); letter-spacing:2px; }
.review-card__quote{ color:#e2e8ff; font-size:.92rem; line-height:1.6; flex:1; }
.review-card__author{ display:flex; align-items:center; gap:12px; }
.review-card__avatar{
  width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; color:#fff; flex-shrink:0;
}
.review-card__author strong{ display:block; font-size:.88rem; color:#fff; }
.review-card__author span{ display:block; font-size:.76rem; color:#94a3d9; }

.review-modal{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px;
  visibility:hidden; opacity:0; transition:opacity .28s ease, visibility 0s linear .28s;
}
.review-modal.is-open{ visibility:visible; opacity:1; transition:opacity .28s ease; }
.review-modal__backdrop{ position:absolute; inset:0; background:rgba(5,8,20,.78); backdrop-filter:blur(4px); }
.review-modal__dialog{
  position:relative; max-width:520px; width:100%; max-height:80vh; overflow-y:auto;
  background:var(--ink-2); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:36px 32px;
  display:flex; flex-direction:column; gap:16px;
  transform:scale(.9) translateY(16px); opacity:0; transition:transform .32s cubic-bezier(.2,.8,.25,1), opacity .28s ease;
}
.review-modal.is-open .review-modal__dialog{ transform:scale(1) translateY(0); opacity:1; }
.review-modal__close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.08); border:none; color:#fff; font-size:1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.review-modal__close:hover{ background:rgba(255,255,255,.18); }
.review-modal__stars{ color:var(--brand-2); letter-spacing:2px; font-size:1.05rem; }
.review-modal__quote{ color:#e2e8ff; font-size:1rem; line-height:1.7; white-space:pre-line; }
.review-modal__author{ display:flex; align-items:center; gap:12px; }
.review-modal__avatar{
  width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; color:#fff; flex-shrink:0;
}
.review-modal__author strong{ display:block; font-size:.95rem; color:#fff; }
.review-modal__author span{ display:block; font-size:.8rem; color:#94a3d9; }
body.review-modal-open{ overflow:hidden; }

/* ============================================================
   FAQ
============================================================= */
.faq{ position:relative; z-index:1; }
.faq__list{ position:relative; z-index:1; max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq__item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:border-color .2s ease; }
.faq__item.is-open{ border-color:rgba(7,117,232,.35); }
.faq__question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; text-align:left; padding:18px 22px; cursor:pointer;
  font-family:var(--font-body); font-size:.98rem; font-weight:600; color:var(--text);
}
.faq__chevron{ flex-shrink:0; font-size:1.2rem; line-height:1; color:var(--brand); transition:transform .3s ease; }
.faq__item.is-open .faq__chevron{ transform:rotate(45deg); }
.faq__answer-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.faq__item.is-open .faq__answer-wrap{ grid-template-rows:1fr; }
.faq__answer{ overflow:hidden; }
.faq__answer p{ padding:0 22px 20px; color:var(--muted); font-size:.92rem; line-height:1.6; }

/* ============================================================
   OFFER — the sales moment
============================================================= */
.offer{ position:relative; overflow:hidden; background:var(--ink); }
.offer__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(7,117,232,.4), transparent 65%),
    radial-gradient(500px 320px at 6% 100%, rgba(0,217,255,.16), transparent 65%);
}
.offer__sparks{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.offer__spark{ position:absolute; bottom:10%; font-size:1.2rem; opacity:0; animation: offer-spark-float 3.6s ease-in infinite; }
.offer__spark--1{ left:8%; animation-delay:.2s; }
.offer__spark--2{ left:26%; animation-delay:1.4s; font-size:1rem; }
.offer__spark--3{ left:70%; animation-delay:.8s; }
.offer__spark--4{ left:88%; animation-delay:2.2s; font-size:1rem; }
@keyframes offer-spark-float{
  0%{ opacity:0; transform:translateY(0) scale(.6) rotate(0deg); }
  12%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-260px) scale(1.1) rotate(40deg); }
}
@media (prefers-reduced-motion: reduce){ .offer__spark{ animation:none; opacity:0; } }

.offer__inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; }
@media (max-width:900px){ .offer__inner{ grid-template-columns:1fr; } }

.offer__badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#c7d2fe; font-size:.78rem; font-weight:700; padding:8px 16px; border-radius:100px; margin-bottom:24px;
}
.offer__discount{ position:relative; display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.offer__discount-num{
  font-family:var(--font-display); font-size:clamp(3.2rem,7vw,5.2rem); font-weight:700; line-height:1;
  background:linear-gradient(100deg,#fff,var(--brand-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation: offer-pulse 2.2s ease-in-out infinite;
}
@keyframes offer-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.offer__discount-label{ color:#fff; font-size:1.1rem; font-weight:600; }

.offer h2{ color:#fff; font-size:var(--fs-h2); margin-bottom:18px; }
.offer__price{ display:flex; align-items:baseline; gap:12px; margin-bottom:26px; flex-wrap:wrap; }
.offer__price-old{ color:#94a3d9; text-decoration:line-through; font-size:1.2rem; }
.offer__price-new{ color:var(--brand-2); font-family:var(--font-display); font-size:2.2rem; font-weight:700; }
.offer__price-period{ color:#94a3d9; font-size:.9rem; }

.offer__list{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.offer__list li{ display:flex; align-items:center; gap:10px; color:#e2e8ff; font-size:.95rem; }
.offer__list li::before{
  content:'✓'; flex-shrink:0; width:22px; height:22px; border-radius:50%; background:rgba(0,217,255,.15);
  color:var(--brand-2); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700;
}

.offer__urgency{ color:#fbbf24; font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:8px; }

/* form card lifted for contrast against the dark offer background */
.offer .quiz-card{
  background:var(--ink-2); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 40px 80px -24px rgba(0,217,255,.3);
}

@media (prefers-reduced-motion: reduce){ .offer__discount-num{ animation:none; } }

/* ============================================================
   HERO VIDEO — fills the whole card, "Кликни тук!" cover
============================================================= */
.nx-hero__reel .reel-card{ padding:0; overflow:hidden; }
.nx-hero__reel .reel-card__screen{ aspect-ratio:9/16; border-radius:inherit; background:var(--ink); }
/* 9:16 is taller than the old frame — narrow the card so it stays clear of the ticker */
@media (min-width:1100px){ .nx-hero__reel{ width:300px; } .nx-hero__reel .reel-card{ max-width:300px; } }
@media (min-width:1400px){ .nx-hero__reel{ width:340px; } .nx-hero__reel .reel-card{ max-width:340px; } }
.reel-card__video{ cursor:pointer; }

.reel-card__cta{
  position:absolute; inset:0; z-index:2; border:0; padding:0 12px 9%; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:14px;
  color:#fff; font-family:var(--font-display);
  background:
    linear-gradient(180deg, rgba(11,18,41,.05) 0%, rgba(11,18,41,.12) 45%, rgba(11,18,41,.82) 82%, rgba(11,18,41,.94) 100%);
  transition:opacity .3s ease;
}
.reel-card__cta.is-hidden{ opacity:0; pointer-events:none; }

.reel-card__cta-play{
  position:relative; display:grid; place-items:center; width:76px; height:76px; border-radius:50%; padding:0;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 12px 34px -6px rgba(0,217,255,.55), inset 0 0 0 1px rgba(255,255,255,.28);
  transition:transform .3s cubic-bezier(.2,.6,.2,1);
}
.reel-card__cta-play::before, .reel-card__cta-play::after{
  content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--brand-2);
  animation:reel-cta-ring 2.4s cubic-bezier(.2,.6,.2,1) infinite;
}
.reel-card__cta-play::after{ animation-delay:1.2s; }
@keyframes reel-cta-ring{
  0%{ transform:scale(1); opacity:.75; }
  100%{ transform:scale(1.9); opacity:0; }
}

.reel-card__cta-text{
  padding:9px 20px; border-radius:999px; font-weight:700; font-size:1.05rem; letter-spacing:.01em; white-space:nowrap;
  background:linear-gradient(100deg, var(--brand), var(--brand-2));
  box-shadow:0 8px 26px rgba(7,117,232,.5);
  animation:reel-cta-bob 2.4s ease-in-out infinite;
  transition:box-shadow .3s ease;
}
@keyframes reel-cta-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }

.reel-card__cta-meta{
  font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.reel-card__cta:hover .reel-card__cta-play, .reel-card__cta:focus-visible .reel-card__cta-play{ transform:scale(1.1); }
.reel-card__cta:hover .reel-card__cta-text{ box-shadow:0 10px 34px rgba(0,217,255,.6); }
.reel-card__cta:focus-visible{ outline:2px solid var(--brand-2); outline-offset:-4px; }

/* ---- in-frame controls (native ones get clipped by the tilted, rounded card) ---- */
.reel-ctrl{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:34px 16px 14px;
  background:linear-gradient(180deg, transparent, rgba(11,18,41,.9));
  color:#fff;
}
.reel-ctrl[hidden]{ display:none; }
.reel-ctrl__row{ display:flex; align-items:center; gap:4px; margin-top:6px; }
.reel-ctrl__time{ margin-right:auto; padding-left:4px; font-size:.72rem; font-weight:600; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.85); white-space:nowrap; }
.reel-ctrl__btn{
  display:grid; place-items:center; width:32px; height:32px; flex:none; border:0; padding:0; border-radius:50%;
  background:transparent; color:#fff; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.reel-ctrl__btn:hover{ background:rgba(255,255,255,.14); color:var(--brand-2); }
.reel-ctrl__btn:focus-visible, .reel-ctrl__seek:focus-visible{ outline:2px solid var(--brand-2); outline-offset:2px; }
.reel-ctrl .ic-play, .reel-ctrl .ic-muted{ display:none; }
.reel-ctrl.is-paused .ic-play, .reel-ctrl.is-muted .ic-muted{ display:block; }
.reel-ctrl.is-paused .ic-pause, .reel-ctrl.is-muted .ic-sound{ display:none; }

.reel-ctrl__seek{
  --pct:0%;
  display:block; width:100%; height:14px; margin:0; padding:0; background:transparent; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.reel-ctrl__seek::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2)) 0 / var(--pct) 100% no-repeat, rgba(255,255,255,.28);
}
.reel-ctrl__seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px; margin-top:-4px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 3px rgba(0,217,255,.35);
}
.reel-ctrl__seek::-moz-range-track{ height:4px; border-radius:2px; background:rgba(255,255,255,.28); }
.reel-ctrl__seek::-moz-range-progress{ height:4px; border-radius:2px; background:linear-gradient(90deg, var(--brand), var(--brand-2)); }
.reel-ctrl__seek::-moz-range-thumb{ width:12px; height:12px; border:0; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(0,217,255,.35); }

@media (max-width:1099px){
  .reel-card__cta{ gap:10px; }
  .reel-card__cta-play{ width:54px; height:54px; }
  .reel-card__cta-play svg{ width:20px; height:20px; }
  .reel-card__cta-text{ font-size:.9rem; padding:7px 14px; }
  .reel-card__cta-meta{ font-size:.62rem; }
  .reel-ctrl{ padding:26px 10px 8px; }
  .reel-ctrl__btn{ width:28px; height:28px; }
  .reel-ctrl__time{ font-size:.64rem; }
}
@media (prefers-reduced-motion: reduce){
  .reel-card__cta-play::before, .reel-card__cta-play::after, .reel-card__cta-text{ animation:none; }
}