/* Ustafix Landing Page — Custom CSS (Tailwind v4 handles the rest) */

html {
  font-size: 17px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar { display: none; }

/* ── Card hover / shimmer ── */
.card-hover {
  transition: border-color .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s cubic-bezier(.16,1,.3,1);
}
.card-hover:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,.08), 0 0 0 1px rgba(99,102,241,.04);
}

.card-hover::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-18deg);
  transition: left .7s ease;
  pointer-events: none;
  z-index: 4;
}
.card-hover:hover::after { left: 130%; }

/* ── Accent hover (orange glow line) ── */
.accent-hover { position: relative; }
.accent-hover::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,.35),transparent);
  opacity:0; transition:opacity .5s ease;
}
.accent-hover:hover::before { opacity:1; }
.accent-hover:hover {
  border-color: rgba(99,102,241,.18) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.08), 0 0 30px rgba(99,102,241,.06) !important;
}

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #6366f1, #818cf8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Reveal animation ── */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal--visible { opacity: 1; transform: translateY(0); }

/* Statistic cards */
.stat-value {
  display: inline-block;
  max-width: 100%;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
  .stat-value { font-size: clamp(1.9rem, 6.4vw, 3.2rem); }
}

/* ── Nav ── */
.nav-scrolled {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(99,102,241,.08);
}
.nav-links-pill {
  display:flex; align-items:center; gap:1px;
  background:rgba(0,0,0,.042); border:1px solid rgba(0,0,0,.07);
  border-radius:100px; padding:3px 5px;
}
.nav-link {
  position:relative; padding:5px 11px; border-radius:100px;
  font-size:.72rem; font-weight:500; color:var(--color-muted);
  transition:color .2s ease, background .2s ease;
  letter-spacing:.01em; white-space:nowrap; text-decoration:none;
}
.nav-link:hover { color:var(--color-text-main); background:rgba(0,0,0,.06); }
.nav-link--active { color:#4f46e5 !important; background:rgba(99,102,241,.08) !important; font-weight:600; }

/* ── Ticker ── */
@keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker-item {
  display:inline-block; padding:0 3.5rem; font-size:1.05rem;
  font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.ticker-item::before { content:'\25C6'; margin-right:1.75rem; color:#6366f1; font-size:.7rem; vertical-align:middle; }

/* ── Gradient Orbs ── */
.gradient-orbs { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(100px); will-change:transform; }
.orb--1 { width:600px; height:600px; background:#6366f1; opacity:.04; top:5%; left:10%; animation:orb-drift-1 25s ease-in-out infinite; }
.orb--2 { width:500px; height:500px; background:#5f7f74; opacity:.035; top:40%; right:5%; animation:orb-drift-2 30s ease-in-out infinite; }
.orb--3 { width:450px; height:450px; background:#6366f1; opacity:.03; bottom:15%; left:50%; animation:orb-drift-3 22s ease-in-out infinite; }
@keyframes orb-drift-1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(80px,-50px) scale(1.15)} 66%{transform:translate(-40px,60px) scale(.9)} }
@keyframes orb-drift-2 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-60px,40px) scale(1.1)} 70%{transform:translate(50px,-70px) scale(.85)} }
@keyframes orb-drift-3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-80px,-50px) scale(1.2)} }

/* ── FAQ ── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  transition: max-height .28s cubic-bezier(.4,0,.2,1), opacity .2s ease, padding .28s cubic-bezier(.4,0,.2,1);
}
.faq-item--open .faq-answer {
  max-height: 600px;
  padding-bottom: 1.25rem !important;
  opacity: 1;
  transition: max-height .5s cubic-bezier(.16,1,.3,1), opacity .25s ease .08s, padding .5s cubic-bezier(.16,1,.3,1);
}
.faq-item--open { border-color:rgba(99,102,241,.15) !important; box-shadow:0 4px 24px rgba(99,102,241,.04); background:rgba(99,102,241,.02); }
.faq-item { border-bottom:1px solid var(--color-border); }
.faq-item:first-child { border-top:1px solid var(--color-border); }
.faq-question__icon::before,.faq-question__icon::after {
  content:''; position:absolute; background:var(--color-muted); border-radius:2px;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.faq-question__icon::before { width:14px; height:2px; top:50%; left:50%; transform:translate(-50%,-50%); }
.faq-question__icon::after { width:2px; height:14px; top:50%; left:50%; transform:translate(-50%,-50%); }
.faq-item--open .faq-question__icon::after { transform:translate(-50%,-50%) rotate(90deg); opacity:0; }

/* ── Roadmap ── */
.rm { position:relative; max-width:940px; margin:0 auto; padding:60px 0 40px; }
.rm__line { position:absolute; left:50%; top:0; bottom:0; width:120px; transform:translateX(-50%); overflow:visible; pointer-events:none; }
.rm__line svg { position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:100%; }
.rm__line-bg { fill:none; stroke:rgba(255,255,255,.1); stroke-width:3; stroke-linecap:round; }
.rm__line-progress { fill:none; stroke:url(#rmGradient); stroke-width:3; stroke-linecap:round; }
.rm__line-glow {
  position:absolute; left:50%; width:23px; height:40px; border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.7),transparent 70%);
  filter:blur(8px); top:0; pointer-events:none; z-index:1; opacity:0; transform:translateX(-50%);
}
.rm__row { display:grid; grid-template-columns:1fr 80px 1fr; position:relative; }
.rm__row + .rm__row { margin-top:48px; }
.rm__center { display:flex; justify-content:center; position:relative; padding-top:20px; }
.rm__dot {
  width:18px; height:18px; border-radius:50%;
  background:rgba(255,255,255,.08); border:3px solid rgba(255,255,255,.15);
  position:relative; z-index:3; transition:all .6s cubic-bezier(.16,1,.3,1); flex-shrink:0;
}
.rm__dot--active {
  background:#6366f1; border-color:#6366f1;
  box-shadow:0 0 20px rgba(99,102,241,.55), 0 0 40px rgba(99,102,241,.18); transform:scale(1.4);
}
.rm__dot--active::after {
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid rgba(99,102,241,.3); animation:rm-pulse 2s ease-out infinite;
}
@keyframes rm-pulse { 0%{transform:scale(.8);opacity:.7} 100%{transform:scale(1.8);opacity:0} }
.rm__branch { position:absolute; top:28px; height:2px; background:rgba(255,255,255,.1); transition:background .6s ease,box-shadow .6s ease; border-radius:1px; }
.rm__branch--l { right:calc(50% + 9px); left:0; }
.rm__branch--r { left:calc(50% + 9px); right:0; }
.rm__branch--active { background:#6366f1; box-shadow:0 0 10px rgba(99,102,241,.3); }
.rm__card {
  padding:28px; border-radius:16px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); opacity:0;
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),border-color .5s ease,box-shadow .5s ease;
}
.rm__card--l { transform:translateX(-40px); text-align:right; }
.rm__card--r { transform:translateX(40px); }
.rm__card--active {
  opacity:1 !important; transform:translateX(0) !important;
  border-color:rgba(99,102,241,.2); box-shadow:0 8px 32px rgba(0,0,0,.3), 0 0 30px rgba(99,102,241,.06);
}
.rm__label {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#6366f1; background:rgba(99,102,241,.1);
  padding:3px 10px; border-radius:6px; margin-bottom:10px;
}
.rm__title { font-size:1.2rem; font-weight:700; margin-bottom:6px; letter-spacing:-.01em; color:#f0f0f2; }
.rm__desc { font-size:.875rem; color:#9999a1; line-height:1.7; margin-bottom:14px; }
.rm__tags { display:flex; flex-wrap:wrap; gap:6px; }
.rm__card--l .rm__tags { justify-content:flex-end; }
.rm__tag {
  font-size:11px; padding:3px 10px; border-radius:20px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:#8e8e96; font-weight:500;
}
.rm__end { display:flex; justify-content:center; padding-top:64px; position:relative; z-index:3; }
.rm__end-marker { display:flex; flex-direction:column; align-items:center; gap:12px; opacity:0; transform:translateY(20px); transition:all .7s cubic-bezier(.16,1,.3,1); }
.rm__end-marker--active { opacity:1; transform:translateY(0); }
.rm__end-ring {
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12); transition:all .7s cubic-bezier(.16,1,.3,1);
}
.rm__end-marker--active .rm__end-ring {
  background:linear-gradient(135deg,#6366f1,#818cf8); border-color:transparent;
  box-shadow:0 0 30px rgba(99,102,241,.5), 0 0 60px rgba(99,102,241,.15);
}
.rm__end-ring svg { color:rgba(255,255,255,.2); transition:color .6s ease; }
.rm__end-marker--active .rm__end-ring svg { color:#fff; }
.rm__end-label { font-size:.875rem; font-weight:600; color:rgba(255,255,255,.15); transition:color .7s ease; letter-spacing:.02em; }
.rm__end-marker--active .rm__end-label { color:#f0f0f2; }

/* ── Marquee ── */
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track { display:flex; gap:12px; width:max-content; animation:marquee-scroll 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes marquee-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── Back to Top ── */
.back-to-top {
  position:fixed; bottom:2rem; right:2rem; z-index:900; width:44px; height:44px;
  border-radius:50%; background:#6366f1; color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(99,102,241,.35);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, visibility .3s ease, transform .3s ease, background .25s ease;
}
.back-to-top:hover { background:#4f46e5; transform:translateY(-2px); box-shadow:0 6px 28px rgba(99,102,241,.45); }
.back-to-top--visible { opacity:1; visibility:visible; transform:translateY(0); }
body.cookie-open .back-to-top { bottom: 9.5rem; }

/* Process flow section */
.process-shell {
  position: relative;
  border: 1px solid rgba(99,102,241,.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 20%, rgba(99,102,241,.12), transparent 36%),
    radial-gradient(circle at 82% 80%, rgba(129,140,248,.12), transparent 34%),
    rgba(255,255,255,.03);
  padding: 2rem;
  overflow: hidden;
}
.process-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  margin: .8rem .4rem 2rem;
  overflow: visible;
}
.process-track__bar {
  position: absolute;
  inset: 0;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(.25);
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #818cf8);
  transition: transform .65s cubic-bezier(.16,1,.3,1);
}
.process-track__dot {
  position: absolute;
  top: 50%;
  left: 25%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #eef0ff;
  border: 3px solid #6366f1;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 8px rgba(99,102,241,.18);
  transition: left .65s cubic-bezier(.16,1,.3,1);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}
.process-step {
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 1rem;
  min-height: 158px;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.process-step__hint {
  margin-top: .5rem;
  color: #a5b4fc;
  font-size: .78rem;
  font-weight: 700;
}
.process-step__more {
  margin-top: .7rem;
  border-top: 1px dashed rgba(255,255,255,.14);
  padding-top: .6rem;
  color: #d3d3da;
  font-size: .82rem;
  line-height: 1.5;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .35s ease;
}
.process-step__index {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: rgba(99,102,241,.12);
  color: #a5b4fc;
  font-size: .78rem;
  font-weight: 800;
  margin-bottom: .65rem;
}
.process-step__title {
  color: #f0f0f2;
  font-weight: 700;
  margin-bottom: .45rem;
  font-size: 1rem;
}
.process-step__text {
  color: #a9a9b1;
  font-size: .86rem;
  line-height: 1.55;
}
.process-step--active {
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 0 0 1px rgba(99,102,241,.2) inset;
  transform: translateY(-3px);
}
.process-step--open .process-step__more {
  max-height: 220px;
  opacity: 1;
}
.process-target {
  margin-top: 1.2rem;
  border-top: 1px dashed rgba(255,255,255,.22);
  padding-top: .9rem;
  color: #dddde2;
  font-size: .92rem;
}

/* ── Section styles ── */
section { background:var(--color-bg); position:relative; z-index:1; }
.section-alt { background:var(--color-bg-alt); }
.section-dark { background:#0f1117; color:#f0f0f2; }
.section-dark h2,.section-dark h3 { color:#f0f0f2; }
.section-dark .card-hover { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
.section-dark .card-hover:hover { border-color:rgba(99,102,241,.25); box-shadow:0 16px 48px rgba(0,0,0,.3), 0 0 30px rgba(99,102,241,.08); }
.section-glow { position:relative; overflow:hidden; }
.section-glow::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:800px; height:600px; background:radial-gradient(circle,rgba(99,102,241,.06) 0%,transparent 60%); pointer-events:none;
}
.divider-gradient { height:120px; position:relative; z-index:2; pointer-events:none; margin-top:-1px; margin-bottom:-1px; }

/* ── Mobile hamburger ── */
.nav-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; cursor:pointer; padding:8px; border:none; background:transparent; z-index:51; }
@media (max-width:767px) { .nav-hamburger { display:flex; } }
.nav-hamburger span { display:block; width:22px; height:2px; background:var(--color-text-main); border-radius:2px; transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease; }
.nav-hamburger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity:0; transform:translateX(-6px); }
.nav-hamburger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
#mobileMenu {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:80; background:rgba(4,8,18,.97);
  backdrop-filter:saturate(160%) blur(24px); visibility:hidden; opacity:0;
  pointer-events:none; transition:opacity .28s ease, visibility .28s;
}
#mobileMenu.is-open { visibility:visible; opacity:1; pointer-events:auto; }
.mm-brand {
  font-size:1.35rem; font-weight:800; letter-spacing:-.04em;
  background:linear-gradient(135deg,#6366f1,#818cf8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:28px;
}
.mm-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:calc(100% - 48px); max-width:340px; }
.mm-link {
  font-size:.95rem; font-weight:600; color:rgba(255,255,255,.75); text-decoration:none;
  padding:14px 12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; text-align:center; transition:color .2s, background .2s, border-color .2s, transform .15s;
}
.mm-link:hover { color:#fff; background:rgba(99,102,241,.14); border-color:rgba(99,102,241,.3); transform:scale(1.03); }

/* ── Typing cursor ── */
.typing-cursor { display:inline-block; width:3px; height:.75em; background:#6366f1; margin-left:2px; vertical-align:baseline; -webkit-text-fill-color:initial; animation:blink-cursor .7s step-end infinite; }
@keyframes blink-cursor { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Pulse ── */
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }
::selection { background:#6366f1; color:#fff; }

/* ── Cookie Consent ── */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:9998; transform:translateY(100%); transition:transform .5s cubic-bezier(.16,1,.3,1); }
.cookie-banner--visible { transform:translateY(0); }
.cookie-banner__inner {
  max-width:680px; margin:0 auto 24px; padding:24px 28px;
  background:rgba(255,255,255,.95); backdrop-filter:saturate(180%) blur(20px);
  border-radius:20px; border:1px solid rgba(0,0,0,.08); box-shadow:0 20px 60px rgba(0,0,0,.12);
}
.cookie-banner__btn { padding:10px 22px; border-radius:10px; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .25s ease; border:none; }
.cookie-banner__btn--accept { background:#6366f1; color:#fff; }
.cookie-banner__btn--accept:hover { background:#4f46e5; transform:translateY(-1px); box-shadow:0 4px 16px rgba(99,102,241,.25); }
.cookie-banner__btn--reject { background:#f0f1f5; color:#111; border:1px solid rgba(0,0,0,.08); }

/* ── Roadmap mobile ── */
@media (max-width:767px) {
  body.cookie-open .back-to-top { bottom: 8.25rem; }
  .process-shell { padding: 1rem; border-radius: 18px; }
  .process-grid { grid-template-columns: 1fr; gap: .7rem; }
  .process-step { min-height: 0; }
  .process-track { margin: .4rem .3rem 1rem; }
  .rm__row { grid-template-columns:40px 1fr; }
  .rm__center { padding-top:4px; grid-column:1; grid-row:1; }
  .rm__cell:not(.rm__cell--hide) { grid-column:2; grid-row:1; }
  .rm__line { left:0; transform:none; width:40px !important; }
  .rm__line svg { left:0; transform:none; width:40px; }
  .rm__card--l,.rm__card--r { text-align:left; transform:translateX(18px); }
  .rm__card--l .rm__tags,.rm__card--r .rm__tags { justify-content:flex-start; }
  .rm__card--active.rm__card--l,.rm__card--active.rm__card--r { transform:translateX(0) !important; }
  .rm__cell--hide { display:none; }
  .rm__branch { display:none; }
  .rm__row + .rm__row { margin-top:28px; }
}

/* ── Hero Video ── */
.hero-video-wrap {
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.hero-video-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(99,102,241,.2);
  box-shadow:
    0 8px 40px rgba(0,0,0,.18),
    0 0 60px rgba(99,102,241,.08),
    inset 0 0 0 1px rgba(255,255,255,.04);
  background: rgba(0,0,0,.3);
}
.hero-video-container::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(99,102,241,.35), transparent 50%, rgba(129,140,248,.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.hero-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 19px;
}
.hero-video-controls {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 5;
}
.hero-video-btn {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  transition: background .2s ease, transform .15s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.hero-video-btn:hover {
  background: rgba(99,102,241,.7);
  transform: scale(1.08);
}
.hero-video-btn:active {
  transform: scale(.95);
}
.hero-video-icon {
  width: 18px;
  height: 18px;
  display: none;
}
.hero-video-container[data-playing="true"] .hero-video-icon--pause { display: block; }
.hero-video-container[data-playing="false"] .hero-video-icon--play { display: block; }
.hero-video-container[data-muted="true"] .hero-video-icon--muted { display: block; }
.hero-video-container[data-muted="false"] .hero-video-icon--unmuted { display: block; }

.hero-replay-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: inherit;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.hero-replay-overlay--visible {
  opacity: 1;
  visibility: visible;
}
.hero-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: none;
  border-radius: 14px;
  background: rgba(99, 102, 241, 0.95);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.4);
  transition: background 0.2s ease, transform 0.15s ease;
}
.hero-replay-btn:hover {
  background: #4f46e5;
  transform: scale(1.05);
}
.hero-replay-btn:active {
  transform: scale(0.98);
}
.hero-replay-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Footer "Entwickelt in Deutschland" stamp — light theme for visibility on dark footer */
.footer-stamp {
  color: #f0f0f2;
}
.footer-stamp__svg {
  display: block;
}

@media (max-width: 767px) {
  .hero-video-wrap {
    max-width: 100%;
    padding: 0 4px;
  }
  .hero-video-container {
    border-radius: 14px;
  }
  .hero-video-container::before {
    border-radius: 15px;
  }
  .hero-video {
    border-radius: 13px;
  }
  .hero-video-controls {
    bottom: 10px;
    left: 10px;
    right: 10px;
  }
  .hero-video-btn {
    width: 40px;
    height: 40px;
  }
  .hero-video-icon {
    width: 16px;
    height: 16px;
  }
}

/* ── Icon base ── */
.icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }