/* Copy pass: four-step process, reverification note, handover block. */
.steps-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.step-card .step-art{position:absolute;right:13px;top:8px;width:100px;height:100px;transform:rotate(9deg);opacity:.85}
.step-note{display:flex;align-items:center;gap:8px;margin:14px 0 0;color:#85868b;font-size:11px;line-height:1.7}
.step-note .icon{width:14px;height:14px;color:var(--orange);flex-shrink:0}
.handover-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:6px}
.handover-card{border:1px solid var(--line);background:#18191b;border-radius:13px;padding:20px 22px;transition:border-color .25s,transform .25s}
.handover-card:hover{border-color:#65503f;transform:translateY(-3px)}
.handover-card.priority{border-color:#4a3a2e;background:#1b1a18}
.handover-head{display:flex;align-items:center;gap:12px;margin-bottom:11px;min-width:0}
.handover-card .tile{width:42px;height:42px;border-radius:10px;background:#242528;display:grid;place-items:center;color:#aaa;flex-shrink:0}
.handover-card.priority .tile{background:#2a2118;color:var(--orange)}
.handover-card h3{font-size:12px;margin:0;letter-spacing:-.2px;min-width:0}
.handover-card p{color:#85868b;font-size:10.5px;line-height:1.85;margin:0}
.priority-badge{margin-left:auto;flex-shrink:0;font-size:8.5px;font-weight:700;letter-spacing:.11em;padding:4px 7px;border-radius:6px;background:#2a2118;color:#ff9a2e;border:1px solid #4a3a2e}
/* Wizard: payment gate, handover choice, cookie export confirmation. */.pay-methods{margin:14px 0 18px}
.method-card.disabled{opacity:.45;cursor:not-allowed;transform:none;pointer-events:none}
.method-card .badge{margin-left:auto;align-self:flex-start}
#cookie-export{min-height:104px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.6;resize:vertical}
.handover-done{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 0 10px;text-align:center}
.handover-done .icon{width:54px;height:54px;color:var(--green);animation:handover-pop .55s cubic-bezier(.2,1.4,.4,1)}
.handover-done .icon path{stroke-dasharray:26;stroke-dashoffset:26;animation:handover-draw .7s ease .15s forwards}
.handover-done p{margin:0;font-size:12px;color:var(--muted)}
@keyframes handover-pop{from{transform:scale(.6);opacity:0}}
@keyframes handover-draw{to{stroke-dashoffset:0}}

/* Hero illustration: verification card replaces the old face scan. */
.hero-art img{aspect-ratio:auto;width:auto;max-width:100%;max-height:100%;height:auto;object-fit:contain;transform:rotate(-4deg)}
.hero-art .scan-frame::before{inset:6%;border-radius:16px}

@media(max-width:1100px){
  .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step-card .step-art{width:55px;height:55px;top:10px;right:10px}
  .handover-card{padding:18px}
  .handover-card p{font-size:10px}
}
@media(max-width:600px){
  .steps-grid{grid-template-columns:1fr}
  .step-card .step-art{width:65px;height:65px;right:10px;top:30px}
  .handover-grid{grid-template-columns:1fr}
  .priority-badge{font-size:8px;padding:3px 6px}
}
@media(min-width:1600px){
  .step-card .step-art{width:112px;height:112px;right:16px}
  .handover-card{padding:26px}
  .handover-card h3{font-size:14px}
  .handover-card p{font-size:12px}
}
@media(min-width:2200px){
  .step-card .step-art{width:132px;height:132px}
  .handover-card{padding:32px}
  .handover-card h3{font-size:16px}
  .handover-card p{font-size:13.5px}
  .handover-card .tile{width:52px;height:52px}
}
@media(prefers-reduced-motion:reduce){
  .handover-card:hover{transform:none}
}

/* FACEIT profile link + note header */
.profile-link{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0;padding:7px 11px;border:1px solid #3a3b40;border-radius:9px;color:var(--orange);font-weight:600;text-decoration:none;transition:border-color .2s,background .2s}
.profile-link:hover{border-color:var(--orange);background:#2a2118}
.profile-link .icon{width:14px;height:14px}
.profile-link.small{margin:0;padding:5px 9px}
.note-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 7px;flex-wrap:wrap}
.note-head label{margin:0}
.reverify-grid .bottom-card{align-items:flex-start}
.reverify-grid .bottom-card .tile{margin-top:2px}

.profile-link.off{color:#7a7b80;border-style:dashed;cursor:default;pointer-events:none}
#steam-id{font-family:ui-monospace,Menlo,monospace;letter-spacing:.4px}

/* Dark language dropdown */
.lang-select{position:relative;display:inline-block}
.lang-current{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:#1c1d20;color:#dcdce1;font-weight:700;font-size:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.lang-current:hover{border-color:#4a3a2e;background:#242527}
.lang-current .icon{width:14px;height:14px;color:#9a9ba0}
.lang-current .icon:last-child{width:12px;height:12px;transform:rotate(90deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:172px;display:flex;flex-direction:column;gap:2px;padding:6px;background:#141518;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 50px -20px #000}
.lang-menu[hidden]{display:none}
.lang-menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;color:#c9c9d0;font:inherit;font-weight:600;text-align:left;cursor:pointer;transition:background .16s,color .16s}
.lang-menu button:hover{background:#232428;color:#fff}
.lang-menu button.active{background:#2a2118;color:var(--orange)}
.lang-menu button small{font-size:9.5px;letter-spacing:1px;color:#7c7d83}
.lang-menu button.active small{color:#ff9a2e}

/* Operator workspace: no client widgets */
body.is-admin .help-mini{display:none}
body.is-admin .mini-link{display:none}

/* Result card shown to the customer */
.result-card{text-align:center;padding:8px 0 4px}
.result-badge{width:74px;height:74px;margin:6px auto 16px;border-radius:24px;display:grid;place-items:center;animation:result-pop .55s cubic-bezier(.2,1.5,.4,1)}
.result-badge .icon{width:36px;height:36px}
.result-card.ok .result-badge{background:radial-gradient(circle at 30% 30%,rgba(180,240,162,.55),rgba(180,240,162,.12));border:1px solid rgba(180,240,162,.55);color:var(--green)}
.result-card.bad .result-badge{background:radial-gradient(circle at 30% 30%,rgba(255,120,110,.45),rgba(255,120,110,.1));border:1px solid rgba(255,120,110,.5);color:#ff9b94}
.result-card h3{font-size:19px;margin:0 0 8px}
.result-card p{color:#9a9ba0;font-size:12px;line-height:1.8;margin:0 0 14px}
.result-card .result-reason{color:#e7b48c;border:1px dashed #57402f;border-radius:10px;padding:10px;margin:0 0 16px}
@keyframes result-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.result-badge{animation:none}}

/* Payment state + countdown */
.pay-row{font-weight:600}
.pay-row.ok{color:var(--green)}
.pay-row.bad{color:#ff8b80}
.pay-timer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;padding:12px 14px;border-radius:12px;border:1px solid #5a3a2a;background:linear-gradient(135deg,rgba(255,91,22,.14),rgba(255,91,22,.03))}
.pay-timer-label{font-size:11px;color:#d9b8a2}
.pay-timer-value{font-family:'Unbounded',monospace;font-size:20px;letter-spacing:1px;color:var(--orange);animation:timer-pulse 1s ease-in-out infinite}
.pay-timer.expired{border-color:#6b2a24;background:linear-gradient(135deg,rgba(255,90,80,.16),rgba(255,90,80,.03))}
.pay-timer.expired .pay-timer-value{color:#ff8b80;animation:none;font-size:15px}
@keyframes timer-pulse{50%{opacity:.62}}
@media(prefers-reduced-motion:reduce){.pay-timer-value{animation:none}}

/* Operator counters */
.count.hot{background:var(--orange);color:#141414;font-weight:800}
.admin-shortcuts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.admin-shortcuts .btn{display:inline-flex;align-items:center;gap:9px}
.admin-shortcuts .count{margin-left:2px}

/* Operator presence badge */
.presence-panel .badge{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.presence-panel .badge.active{background:rgba(180,240,162,.14);border:1px solid rgba(180,240,162,.45);color:var(--green)}
.presence-panel .badge.cancelled{background:rgba(255,120,110,.14);border:1px solid rgba(255,120,110,.45);color:#ff9b94}
.presence-panel .badge .presence-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;box-shadow:0 0 8px currentColor}

/* Sidebar logo lockup */
.brand{padding:0}
@media(max-width:1100px){.brand-logo{height:26px}}
@media(min-width:2200px){.brand-logo{height:38px}}

.step-card img{width:118px;height:118px;opacity:1}
@media(max-width:1100px){.step-card img{width:74px;height:74px}}
@media(max-width:600px){.step-card img{width:86px;height:86px}}

/* Step art scaled down */
.step-card img{width:59px;height:59px}
@media(max-width:1100px){.step-card img{width:37px;height:37px}}
@media(max-width:600px){.step-card img{width:43px;height:43px}}

/* Step art +40% of the previous 42 px */
.step-card img{width:59px;height:59px}
@media(max-width:1100px){.step-card img{width:52px;height:52px}}
@media(max-width:600px){.step-card img{width:60px;height:60px}}

/* Step art back to the previous size */
.step-card img{width:42px;height:42px}
@media(max-width:1100px){.step-card img{width:37px;height:37px}}
@media(max-width:600px){.step-card img{width:43px;height:43px}}

/* Step art +60% */
.step-card img{width:67px;height:67px}
@media(max-width:1100px){.step-card img{width:59px;height:59px}}
@media(max-width:600px){.step-card img{width:69px;height:69px}}

.promo-uses{font-size:11px;color:var(--muted);margin-left:auto;margin-right:10px}

/* Nav counters: clearly visible */
.sidebar .nav .count{background:#FF5B16;color:#141414;font-weight:800;font-size:10px;padding:2px 7px;border-radius:999px;min-width:20px;text-align:center}
.sidebar .nav .count.hot{background:#FFD8A8;color:#3A1A05}
.mobile-bottom .count{background:#FF5B16;color:#141414;font-weight:800;border-radius:999px;padding:1px 6px;font-size:9.5px;margin-left:4px}

/* Sidebar logo: wider and larger */
.brand{display:block;padding:0}
@media(max-width:1100px){.brand-logo{max-height:36px}}
@media(min-width:2200px){.brand-logo{max-height:56px}}
@media(max-width:1100px){.brand-logo{width:100%;height:auto}}
.sidebar .sidebar-bottom{margin-top:auto}
@media(max-width:720px){
  .sidebar .nav-label{margin-top:0}
}

/* Sidebar: slightly larger text, more air between items */
.sidebar .nav{gap:10px}
.sidebar .nav button{font-size:14.5px;padding:16px 14px;border-radius:10px;gap:13px}
.sidebar .nav button .icon{width:19px;height:19px}
.sidebar .nav-label{font-size:11px;letter-spacing:2px;margin-bottom:16px}
@media(max-width:1200px){
  .sidebar .nav button{font-size:13.5px;padding:14px 12px;gap:11px}
  .sidebar .nav .icon{width:17px;height:17px}
}

/* Sidebar menu: larger type */
.sidebar .nav button{font-size:16px;padding:17px 15px;gap:14px}
.sidebar .nav button .icon{width:21px;height:21px}
.sidebar .nav .count{font-size:11px;padding:2px 8px}
.sidebar .nav-label{font-size:11.5px;letter-spacing:2.2px}
@media(max-width:1200px){
  .sidebar .nav button{font-size:15px;padding:15px 13px;gap:12px}
  .sidebar .nav button .icon{width:19px;height:19px}
}
@media(min-width:1101px){
  body.rail .sidebar{width:84px;padding:22px 14px;align-items:center;overflow:hidden}
}
@media(max-width:1100px){body.rail .main{margin-left:0}}

/* Rail: toggle inside the panel, icons centred, double spacing */
@media(min-width:1101px){
  body.rail .sidebar{overflow:visible}
}

/* Hero carousel */
.hero-carousel{position:relative;display:block}
.hero-carousel .hero-slide{display:none;opacity:0;transform:translateX(26px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.hero-carousel .hero-slide.active{display:grid;grid-template-columns:minmax(0,1.25fr) 300px;gap:18px;opacity:1;transform:none;animation:slide-in .7s cubic-bezier(.2,.8,.3,1)}
@keyframes slide-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.hero-carousel .hero-slide:not(.active){display:none}
.carousel-dots{display:flex;gap:8px;margin-top:14px;justify-content:center}
.carousel-dot{width:26px;height:4px;border-radius:99px;border:0;background:#2A2B31;cursor:pointer;transition:.25s}
.carousel-dot:hover{background:#3C3D45}
.carousel-dot.active{background:var(--orange);width:40px}
@media(max-width:1100px){.hero-carousel .hero-slide.active{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.hero-carousel .hero-slide.active{animation:none}}

/* Rail: expands on hover, no button */
@media(min-width:1101px){
  body.rail .sidebar{transition:width .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s;overflow:visible}
}

/* Rail: stable icon column, labels fade in without shifting anything */
@media(min-width:1101px){
  body.rail .sidebar{width:68px;padding:20px 12px;overflow:visible;transition:width .26s cubic-bezier(.2,.8,.3,1),box-shadow .26s}
}
@media(max-width:1100px){body.rail .main{margin-left:0}}

/* ensure the label is present (earlier rule hid it with display:none) */
@media(min-width:1101px){
  body.rail .sidebar .nav button .nav-text{display:inline-block}
}

/* Rail: same icon column in both states, narrower panel */
@media(min-width:1101px){
  body.rail .sidebar{width:64px;padding:18px 12px}
}

@media(min-width:1101px){
  body.rail .sidebar:hover .nav button .nav-text{max-width:108px}
}
}
/* Sidebar rail — single clean implementation */
@media(min-width:1101px){
  body.rail .sidebar{
    width:58px;padding:20px 0;align-items:stretch;overflow:visible;
    transition:width .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s;
  }
}
@media(max-width:1100px){body.rail .main{margin-left:0}}

/* Menu starts right under the logo */
.sidebar .nav-label{margin-top:0}
.sidebar .sidebar-bottom{margin-top:auto}

/* Brand logo baseline (expanded sidebar) */
.brand{display:block;padding:0;margin:0 0 10px}
.brand-logo{display:block;width:100%;height:auto}
.brand-mark-img{display:none;width:30px;height:auto}
.sidebar .nav-label{margin-top:0}

/* Sidebar: a bit lower, 20% more air between items */
.sidebar{padding-top:38px}
.sidebar .brand{margin-bottom:14px}
.sidebar .nav{gap:12px}
.sidebar .nav-label{margin-bottom:19px}

/* Sidebar spacing — visible shift */
.sidebar{padding-top:52px}
.sidebar .brand{margin-bottom:18px}
.sidebar .nav{gap:16px}
.sidebar .nav-label{margin-bottom:24px}

/* Logo up, menu block vertically centred */
.sidebar{padding-top:22px}
.sidebar .brand{margin-bottom:0}
.sidebar .nav-label{margin-top:auto;margin-bottom:24px}
.sidebar .nav{gap:16px}
.sidebar .sidebar-bottom{margin-top:auto}

/* Notes under blocks: readable on large screens */
.step-note{
  display:flex;align-items:flex-start;gap:10px;
  margin:18px 0 0;padding:14px 18px;
  border:1px solid rgba(255,91,22,.28);border-radius:12px;
  background:linear-gradient(135deg,rgba(255,91,22,.10),rgba(255,91,22,.02));
  color:#D6D6DF;font-weight:600;
  font-size:clamp(13px,0.55vw + 10px,19px);
  line-height:1.65;
}
.step-note .icon{width:1.05em;height:1.05em;flex:none;color:var(--orange);margin-top:.12em}
@media(max-width:600px){
  .step-note{font-size:13px;padding:12px 14px;gap:8px}
}

/* Home: breathing room */
.benefits{margin:26px 0 8px;padding:18px 0;border-top:1px dashed rgba(255,255,255,.07);border-bottom:1px dashed rgba(255,255,255,.07);gap:26px}
.section-head{margin:46px 0 20px}
.steps-grid{gap:18px}
.step-note{margin-top:20px}
.handover-grid{margin-top:8px}
.reverify-grid{margin-top:8px}
.bottom-grid{margin-top:26px;gap:18px}
.step-card{padding-top:26px}
.step-card .number{margin-bottom:2px}

/* Home: scroll reveal */
.rv-home{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.rv-home.in{opacity:1;transform:none}

/* Home: hero ambient glow + card hover polish */
.hero-carousel{position:relative;isolation:isolate}
.hero-carousel:before{content:"";position:absolute;inset:-40px -10px -30px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 25% 20%,rgba(255,91,22,.18),transparent 65%),
             radial-gradient(50% 60% at 85% 80%,rgba(255,61,0,.12),transparent 70%);
  filter:blur(6px)}
.step-card,.handover-card,.bottom-card,.card{transition:transform .35s cubic-bezier(.2,.8,.3,1),border-color .35s,box-shadow .35s}
.step-card:hover,.handover-card:hover,.bottom-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -28px rgba(0,0,0,.95)}
.benefit .icon{transition:transform .3s,color .3s}
.benefit:hover .icon{transform:translateY(-2px) scale(1.08);color:var(--orange)}
@media(prefers-reduced-motion:reduce){
  .rv-home{opacity:1;transform:none}
  .step-card:hover,.handover-card:hover,.bottom-card:hover{transform:none}
}

/* Brand lockup — FV token plate + Verify wordmark */
.brand{display:block;padding:0;margin:0 0 18px}
.brand-logo{display:block;width:auto;height:38px;max-width:100%}
.brand-mark-img{display:none;width:auto;height:26px}
@media(max-width:600px){
  .brand-logo{height:32px}
}

.brand-logo{height:38px;max-height:none}


/* Hero: persistent side card, slow left-hand slide */
.hero-carousel{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:stretch;position:relative}
.hero-carousel>.hero-slide{
  grid-column:1;grid-row:1;display:block;animation:none;
  opacity:0;visibility:hidden;transform:translateX(60px);pointer-events:none;
  transition:opacity 3s cubic-bezier(.4,0,.2,1),transform 3s cubic-bezier(.4,0,.2,1),visibility 0s linear 3s;
}
.hero-carousel>.hero-slide:not(.active){display:block}
.hero-carousel>.hero-slide.active{
  display:block;opacity:1;visibility:visible;transform:none;z-index:2;
  animation:none;transition-delay:0s;pointer-events:auto;
}
.hero-carousel>.hero-slide.leaving{
  display:block;visibility:visible;opacity:0;transform:translateX(-64px);
  z-index:1;transition-delay:0s;pointer-events:none;
}
.hero-carousel>.next-card{grid-column:2;grid-row:1;height:100%}
.hero-carousel>.carousel-dots{grid-column:1/-1;grid-row:2}
.next-card h3{font-size:18px;line-height:1.45;letter-spacing:-.4px}
@media(max-width:1100px){
  .hero-carousel{grid-template-columns:minmax(0,1fr)}
  .hero-carousel>.next-card{grid-column:1;grid-row:2;height:auto;margin-top:18px}
  .hero-carousel>.carousel-dots{grid-row:3}
}
@media(prefers-reduced-motion:reduce){
  .hero-carousel>.hero-slide{transition:none;transform:none}
  .hero-carousel>.hero-slide.leaving{display:none}
}

/* Hero side card: wider, one-line title, fixed against fluid typography */
.hero-carousel{grid-template-columns:minmax(0,1fr) 380px}
.hero-carousel>.next-card{padding:24px}
.hero-carousel>.next-card h3{
  font-size:clamp(18px, 0.95vw, 23px);line-height:1.35;letter-spacing:-.4px;
  margin:18px 0 10px;white-space:normal;
}
.hero-carousel>.next-card p{font-size:13px;line-height:1.75}
@media(max-width:1400px){
  .hero-carousel{grid-template-columns:minmax(0,1fr)}
}

/* Hero scan: sweep above the artwork, reference-style status pill */
.hero-art .scan-lines{inset:6%;z-index:3;border-radius:16px}
.hero-art .scan-lines::before{height:2px;box-shadow:0 0 18px 2px rgba(255,122,38,.55)}
@media(max-width:720px){
  .req-pill{font-size:9px;padding:7px 12px;gap:6px;bottom:2px}
}
@media(prefers-reduced-motion:reduce){
  .hero-art .scan-lines::before{display:none}
}

/* Slide 1: photo fills the scan frame, scanner sweeps above it */
.hero-slide[data-slide="0"] .hero-art img{
  width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:cover;border-radius:16px;transform:none;animation:none;
  filter:drop-shadow(0 24px 46px rgba(0,0,0,.65));
}
.hero-slide[data-slide="0"] .hero-art .scan-frame::before{display:none}
.hero-slide[data-slide="0"] .hero-art .scan-lines{inset:2%;border-radius:16px}
@media(max-width:720px){
  .hero-slide[data-slide="0"] .hero-art img{height:100%}
}

/* Slide 3: same treatment as slide 1 */
.hero-slide[data-slide="2"] .hero-art img{
  width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:cover;object-position:50% 42%;border-radius:16px;
  transform:none;animation:none;
  filter:drop-shadow(0 24px 46px rgba(0,0,0,.65));
}
.hero-slide[data-slide="2"] .hero-art .scan-frame::before{display:none}
.hero-slide[data-slide="2"] .hero-art .scan-lines{inset:2%;border-radius:16px}

/* Hero photos: sit inside the scan frame instead of filling it edge to edge */
.hero-slide[data-slide="0"] .hero-art img,
.hero-slide[data-slide="2"] .hero-art img{
  width:auto;height:auto;max-width:84%;max-height:84%;
  object-fit:contain;border-radius:13px;
  transform:none;animation:none;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));
}
@media(max-width:720px){
  .hero-slide[data-slide="0"] .hero-art img,
  .hero-slide[data-slide="2"] .hero-art img{max-width:92%;max-height:92%}
}

/* Sidebar brand: orange plate only, centred, wider */
.sidebar .brand{display:flex;justify-content:center;align-items:center;padding:0;margin:0 0 16px}
.brand .brand-logo{display:block;width:160px;height:40px;max-height:none;max-width:100%;object-fit:contain;margin:0 auto}
.brand .brand-mark-img{display:none}
@media(max-width:600px){
  .brand .brand-logo{height:64px}
}

/* Slide 2: phone mock instead of the lightning phone */
.hero-slide[data-slide="1"] .hero-art img{
  width:auto;height:auto;max-width:88%;max-height:88%;
  object-fit:contain;transform:none;animation:none;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.55));
}

/* Slide 3: shorter visual, more air inside the frame */
.hero-slide[data-slide="2"] .hero-art img{max-width:78%;max-height:68%}
@media(max-width:720px){
  .hero-slide[data-slide="2"] .hero-art img{max-width:88%;max-height:76%}
}

/* Slide 3: keep the shorter panel aligned with the other slides, not sunk down */
.hero-slide[data-slide="2"] .scan-frame{align-items:start}
.hero-slide[data-slide="2"] .hero-art img{margin-top:32px}
@media(max-width:720px){
  .hero-slide[data-slide="2"] .hero-art img{margin-top:14px}
}

/* Slide 3: centred like the other slides, a touch taller */
.hero-slide[data-slide="2"] .scan-frame{align-items:center}
.hero-slide[data-slide="2"] .hero-art img{max-height:72%;margin-top:0}
@media(max-width:720px){
  .hero-slide[data-slide="2"] .hero-art img{margin-top:0}
}

/* Hero: real slide-out / slide-in, no fading */
.hero-viewport{grid-column:1;grid-row:1;position:relative;overflow:hidden;border-radius:17px}
.hero-viewport .hero-slide{
  display:block;position:absolute;left:0;top:0;width:100%;
  opacity:1;visibility:visible;pointer-events:none;
  transform:translateX(100%);
  transition:transform 3s cubic-bezier(.4,0,.2,1);
}
.hero-viewport .hero-slide:not(.active){display:block}
.hero-viewport .hero-slide.active{
  position:relative;left:auto;top:auto;transform:none;
  z-index:2;pointer-events:auto;
}
.hero-viewport .hero-slide.leaving{
  position:absolute;left:0;top:0;width:100%;height:100%;
  transform:translateX(-100%);z-index:1;pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  .hero-viewport .hero-slide{transition:none}
  .hero-viewport .hero-slide.leaving{display:none}
}

/* The old grid layout on .hero-slide.active must not apply inside the viewport */
.hero-viewport .hero-slide.active{display:block;grid-template-columns:none;gap:0;width:100%}
.hero-viewport .hero-slide .hero{width:100%}

/* Desktop: keep the scan frame inside the hero card at any width */
@media(min-width:1101px){
  .hero-viewport .hero-art{height:calc(100% - 48px);min-height:0;max-height:calc(100% - 48px);top:24px}
  .hero-viewport .scan-frame{height:100%;min-height:0;max-height:100%}
  .hero-viewport .hero-art img{max-height:100%}
}

/* The scan frame's single row must not grow with the artwork */
@media(min-width:1101px){
  .hero-viewport .scan-frame{
    grid-template-rows:minmax(0,1fr);
    grid-template-columns:minmax(0,1fr);
    place-items:center;
  }
  .hero-viewport .hero-art img{max-height:100%}
}

/* Desktop art box anchored to the hero card, so browser zoom cannot shift it */
@media(min-width:1101px){
  .hero-viewport .hero-art{
    position:absolute;top:24px;bottom:24px;right:24px;
    width:min(38%,660px);height:auto;max-height:none;
  }
  .hero-viewport .scan-frame{height:100%;max-height:none;min-height:0}
  .hero-viewport .hero-art img{max-height:84%}
  .hero-slide[data-slide="2"] .hero-art img{max-height:72%}
}

/* Bell: clear unread indicator */
.icon-button.notification{position:relative;transition:color .25s}
.icon-button.notification.unread{color:#ff8a3d}
.icon-button.notification.unread::after{
  content:'';position:absolute;top:3px;right:2px;width:10px;height:10px;border-radius:50%;
  background:linear-gradient(180deg,#ff8a3d,#ff3d00);
  box-shadow:0 0 0 2px #101112,0 0 14px 2px rgba(255,91,22,.7);
  animation:bellDot 1.9s ease-in-out infinite;
}
.icon-button.notification.unread svg{animation:bellRing 2.6s ease-in-out infinite;transform-origin:50% 15%}
@keyframes bellDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.85}}
@keyframes bellRing{
  0%,86%,100%{transform:rotate(0)}
  88%{transform:rotate(-14deg)}
  91%{transform:rotate(11deg)}
  94%{transform:rotate(-7deg)}
  97%{transform:rotate(4deg)}
}
@media(prefers-reduced-motion:reduce){
  .icon-button.notification.unread::after,.icon-button.notification.unread svg{animation:none}
}

/* Hero: small prev / next arrows */
.hero-viewport .hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  z-index:6;cursor:pointer;
  background:rgba(14,15,17,.72);border:1px solid rgba(255,255,255,.16);
  color:#cfd0d5;backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.hero-viewport .hero-arrow:hover{background:#ff5b16;border-color:#ff5b16;color:#141414;transform:translateY(-50%) scale(1.06)}
.hero-viewport .hero-arrow:active{transform:translateY(-50%) scale(.96)}
.hero-viewport .hero-arrow.prev{left:14px}
.hero-viewport .hero-arrow.next{right:14px}
.hero-viewport .hero-arrow svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
  .hero-viewport .hero-arrow{width:30px;height:30px}
  .hero-viewport .hero-arrow.prev{left:8px}
  .hero-viewport .hero-arrow.next{right:8px}
}
@media(max-width:520px){
  .hero-viewport .hero-arrow{width:28px;height:28px;top:auto;bottom:12px;transform:none}
  .hero-viewport .hero-arrow.prev{left:12px}
  .hero-viewport .hero-arrow.next{right:12px}
  .hero-viewport .hero-arrow:hover,.hero-viewport .hero-arrow:active{transform:none}
}

/* Arrows in the dots row: compact, no overlap with the hero copy */
.carousel-dots .hero-arrow{
  position:static;transform:none;width:26px;height:26px;flex:none;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#b9babe;
  transition:background .2s,border-color .2s,color .2s;
}
.carousel-dots .hero-arrow:hover{background:#ff5b16;border-color:#ff5b16;color:#141414}
.carousel-dots .hero-arrow svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.carousel-dots{align-items:center;gap:10px}
@media(max-width:520px){
  .carousel-dots .hero-arrow{width:24px;height:24px}
}

/* Hero: new transition — soft cross-dissolve with depth (replaces the lateral push) */
.hero-viewport .hero-slide{
  opacity:0;
  transform:scale(1.045);
  filter:blur(10px);
  visibility:hidden;
  transition:opacity 3s cubic-bezier(.4,0,.2,1),
             transform 3s cubic-bezier(.4,0,.2,1),
             filter 3s cubic-bezier(.4,0,.2,1),
             visibility 0s linear 3s;
  will-change:opacity,transform,filter;
}
.hero-viewport .hero-slide.active{
  opacity:1;
  transform:none;
  filter:blur(0);
  visibility:visible;
  transition:opacity 3s cubic-bezier(.4,0,.2,1),
             transform 3s cubic-bezier(.4,0,.2,1),
             filter 3s cubic-bezier(.4,0,.2,1),
             visibility 0s linear 0s;
}
.hero-viewport .hero-slide.leaving{
  opacity:0;
  transform:scale(.955);
  filter:blur(7px);
  visibility:visible;
  transition:opacity 3s cubic-bezier(.4,0,.2,1),
             transform 3s cubic-bezier(.4,0,.2,1),
             filter 3s cubic-bezier(.4,0,.2,1),
             visibility 0s linear 0s;
}
@media(prefers-reduced-motion:reduce){
  .hero-viewport .hero-slide,
  .hero-viewport .hero-slide.active,
  .hero-viewport .hero-slide.leaving{transition:opacity .3s linear;filter:none;transform:none}
}

.hero-viewport .hero-slide,.hero-viewport .hero-slide.active,.hero-viewport .hero-slide.leaving{animation:none!important}
.hero-viewport .hero-slide.active{transform:scale(1)}