/* Dust & Bones — layered front-end. No external fonts or libraries. */
:root { color-scheme:dark; --db-navy:#021c33; --db-blue:#003459; --db-line:#0879b7; --db-gold:#ffd36b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:20px; }
body { margin:0; background:#03182b; color:#ecf4fc; font-family:Arial,Helvetica,sans-serif; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { font:inherit; color:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #ffe6a2; outline-offset:4px; }
img { display:block; max-width:100%; height:auto; }
.db-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.db-skip { position:fixed; top:8px; left:8px; z-index:999; transform:translateY(-200%); padding:12px; background:#062e4d; }
.db-skip:focus { transform:none; }
.db-symbols { position:absolute; width:0; height:0; overflow:hidden; }
.db-icon { width:24px; height:24px; fill:currentColor; flex:none; }

/* The ONE common stacking context. DO NOT transform this container. */
.db-site { position:relative; isolation:isolate; overflow-x:clip; overflow-y:visible; max-width:2200px; margin-inline:auto; background:#052744;
 --db-bg-y:0px; --db-cast-y:0px; --db-copy-y:0px;
 --db-cast-width:67%; --db-cast-right:11%; --db-cast-top:3.2vw; }
.db-world-bg { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.db-bg-motion { position:absolute; inset:0; transform:translate3d(0,var(--db-bg-y),0); }
.db-bg-motion img { width:100%; height:auto; object-fit:cover; object-position:center top; }
.db-world-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,#05274415 80%,#031a30); }
.db-shell { width:84.4%; margin-inline:auto; }

/* Header stays OUTSIDE the animated layer. Left and right parts are separate. */
.db-header { position:absolute; z-index:60; left:0; right:0; top:9px; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.db-nav { position:relative; width:53%; display:flex; min-height:46px; align-items:center; gap:0; padding:0 18px 0 170px; }
.db-nav::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#00315610,#003359eb 20%,#00345cfa 81%,#00355b20); clip-path:polygon(0 0,97.5% 0,100% 50%,97.5% 100%,0 100%); border-block:1px solid #8acde539; }
.db-brand { position:absolute; left:12%; top:-6px; width:164px; transform:translateX(-50%); }
.db-brand img { width:100%; }
.db-nav a:not(.db-brand) { text-align:center; flex:1; font-size:14px; padding:15px 7px; white-space:nowrap; }
.db-nav a:not(.db-brand)+a { border-left:1px solid #6eb8dc19; }
.db-nav a:not(.db-brand):hover { color:#ffdc77; }
.db-actions { display:flex; gap:7px; align-items:center; }
.db-button { border:1px solid #d29b37; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:40px; padding:9px 19px; font-size:15px; font-weight:700; background:linear-gradient(#ffe58d,#ffd261 49%,#f0ad30); color:#111a1a; box-shadow:inset 0 2px 0 #fff1bd,0 3px 0 #99552088,0 5px 12px #0004; }
.db-button:hover { filter:brightness(1.08); }
.db-button--blue { background:linear-gradient(#075282,#023256); color:#f0f7ff; border-color:#0783bd; box-shadow:inset 0 1px 0 #6dd6ff44,0 3px 0 #002036,0 4px 12px #0004; }
.db-play { min-width:156px; }
.db-square { width:41px; height:41px; min-width:41px; display:grid; place-items:center; border:1px solid #126699; border-radius:8px; background:linear-gradient(#03466cdd,#022b48f0); box-shadow:inset 0 1px 1px #a7d8f523; padding:0; font-size:12px; font-weight:bold; position:relative; }
.db-square .db-icon { width:21px; height:21px; }
.db-square:hover { background:#0a5780; }
.db-cart-count { position:absolute; right:-6px; top:-5px; border-radius:10px; background:#ffcc55; color:#142033; font-size:10px; min-width:17px; height:17px; display:grid; place-items:center; }
.db-cart-count[hidden] { display:none; }
.db-mobile-menu { display:none; }

/* No z-index and no transform on .db-stage: the gun can overlap the next section. */
.db-stage { position:relative; height:22.53vw; min-height:346px; max-height:520px; overflow:visible; }
.db-cast { position:absolute; width:var(--db-cast-width); right:var(--db-cast-right); top:var(--db-cast-top); pointer-events:none; user-select:none; }
.db-cast--base { z-index:10; }
.db-cast--front { z-index:30; }
/* Both layers have exactly the same transform, dimensions and image canvas. */
.db-cast-motion { transform:translate3d(0,var(--db-cast-y),0); }
.db-cast img { width:100%; height:auto; }
.db-copy { position:absolute; z-index:40; left:11%; top:5.8vw; width:21.2%; min-width:305px; transform:translate3d(0,var(--db-copy-y),0); }
.db-copy::before { content:""; position:absolute; z-index:-1; inset:-15px -20px -10px; background:radial-gradient(ellipse,#012336c4 0%,#01233678 55%,transparent 75%); pointer-events:none; }
.db-copy h1 { margin:0; }
.db-headline { width:100%; }
.db-copy p { margin:6px 0 10px; font-size:clamp(12px,.86vw,18px); line-height:1.24; text-shadow:0 2px 2px #001526; }
.db-copy-actions { display:flex; gap:12px; }
.db-copy-actions .db-button { flex:1; min-height:35px; font-size:clamp(12px,.95vw,17px); padding:7px 9px; gap:10px; white-space:nowrap; }
.db-copy-actions .db-icon { width:14px; height:14px; }

/* Blue UI is above the cast body, below the synchronized gun-front layer. */
.db-panels { position:relative; z-index:20; }
.db-panel { border:1px solid #0879b780; background:linear-gradient(115deg,#032b48f8,#00253ff5 62%,#042e4bf8); box-shadow:inset 0 1px 0 #35a8e02b,0 5px 18px #00152150; border-radius:13px; padding:3px 18px 6px; }
.db-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:6px 18px; border-radius:24px 24px 10px 10px; position:relative; }
.db-feature { min-height:64px; border:1px solid #0879b77d; border-radius:8px; display:flex; align-items:center; gap:15px; padding:5px 13px; background:#00254088; }
.db-feature-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; border:1px solid #008dc9; box-shadow:inset 0 0 12px #0087cf25; flex:none; color:#ffdc85; }
.db-feature-icon .db-icon { width:38px; height:38px; }
.db-feature h2 { color:#fff0ba; font-size:clamp(14px,1.2vw,23px); margin:0 0 5px; font-weight:900; letter-spacing:.035em; }
.db-feature p { margin:0; font-size:clamp(11px,.85vw,16px); line-height:1.25; color:#deedfd; max-width:none; }
.db-section { margin-top:5px; scroll-margin-top:15px; }
.db-section-heading { display:flex; align-items:center; gap:20px; min-height:20px; margin-bottom:2px; }
.db-section-heading h2 { margin:0; font-size:clamp(17px,1.25vw,25px); color:#fff0c4; font-weight:900; letter-spacing:.015em; }
.db-kicker { font-size:9px; letter-spacing:.16em; color:#d1e4f6; }
.db-section-link { margin-left:auto; font-size:9px; letter-spacing:.08em; display:flex; align-items:center; gap:8px; padding:4px 0; background:none; border:0; }
.db-section-link .db-icon { width:12px; height:12px; }
.db-card-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
.db-hero-card { display:block; min-width:0; padding:0; background:#052b47; border:1px solid var(--accent,#00adff); border-bottom-width:3px; border-radius:8px; overflow:hidden; text-align:left; transition:filter .15s,box-shadow .15s; }
.db-hero-card:hover { filter:brightness(1.08); box-shadow:0 0 14px color-mix(in srgb,var(--accent) 28%,transparent); }
.db-portrait { width:100%; aspect-ratio:2.55; object-fit:cover; object-position:center 25%; }
.db-hero-info { position:relative; padding:3px 9px 0; font-size:0; }
.db-hero-info h3 { font-size:clamp(11px,.92vw,19px); line-height:1; margin:0 0 2px; font-weight:800; }
.db-hero-info p { font-size:clamp(9px,.7vw,14px); line-height:1.1; margin:0 25px 3px 0; color:#d9e8f4; }
.db-role { font-size:9px; line-height:1; padding:2px 10px 2px 7px; display:inline-flex; gap:5px; align-items:center; background:color-mix(in srgb,var(--accent) 52%,#012541); border-radius:4px 4px 0 0; }
.db-role .db-icon { width:12px; height:12px; }
.db-round-arrow { position:absolute; right:8px; bottom:9px; width:25px; height:25px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--accent); }
.db-round-arrow .db-icon { width:13px; height:13px; }
.db-arena-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.db-arena { display:block; position:relative; padding:0; border:1px solid #9ddbef; border-radius:6px; overflow:hidden; text-align:left; background:#033553; }
.db-arena img { width:100%; aspect-ratio:4.85; object-fit:cover; }
.db-arena-copy { position:absolute; inset:auto 0 0; padding:13px 11px 6px; background:linear-gradient(transparent,#001728e8); }
.db-arena h3 { margin:0 0 3px; font-size:clamp(11px,.95vw,18px); }
.db-arena p { margin:0; font-size:clamp(9px,.75vw,14px); }
.db-store-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.db-product { display:grid; grid-template-columns:42% 1fr; align-items:center; background:#f5f5f0; color:#082340; border:1px solid #dfedf5; border-radius:6px; min-width:0; overflow:hidden; }
.db-product img { width:100%; height:69px; object-fit:cover; }
.db-product-info { padding:7px; min-width:0; }
.db-product h3 { margin:0 0 7px; font-size:10px; line-height:1.3; font-weight:600; }
.db-product-bottom { display:flex; justify-content:space-between; align-items:center; gap:3px; }
.db-price { font-size:14px; white-space:nowrap; font-weight:800; color:#111d29; }
.db-buy { border:1px solid #e6b239; border-radius:5px; width:31px; height:27px; display:grid; place-items:center; background:#ffd065; color:#07223a; padding:3px; }
.db-buy .db-icon { width:19px; height:19px; }
.db-footer { position:relative; z-index:20; margin-top:0; padding:5px 4.8%; min-height:50px; display:flex; align-items:center; gap:22px; border-top:1px solid #108bbe; background:linear-gradient(100deg,#011b2ff5,#032844fa); }
.db-footer-logo { width:139px; }
.db-footer-tag { color:#ffd276; font-size:9px; font-weight:bold; letter-spacing:.22em; white-space:nowrap; }
.db-footer-nav { display:flex; gap:23px; margin-left:auto; font-size:11px; }
.db-socials { display:flex; align-items:center; gap:18px; }
.db-socials button { border:0; padding:4px; background:none; }
.db-socials .db-icon { width:21px; height:21px; }
.db-footer .db-footer-tag:last-child { border-left:1px solid #1974a0; padding-left:22px; color:#e3eafb; }

/* Only the demonstration page has this region. Not part of the website component. */
.db-lab { max-width:1120px; margin:0 auto; padding:80px 24px 130px; min-height:80vh; }
.db-lab-label { font-size:11px; letter-spacing:.22em; color:#7fcde6; text-transform:uppercase; }
.db-lab h2 { font-size:clamp(26px,3vw,42px); margin:16px 0; letter-spacing:-.02em; }
.db-lab p { max-width:780px; line-height:1.65; color:#b4c9d9; }
.db-lab-controls { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin:30px 0; }
.db-lab-controls label { display:flex; align-items:center; gap:12px; }
.db-lab-controls input { width:170px; accent-color:#ffd064; }
.db-lab .db-button { font-size:14px; }
.db-code-label { display:flex; gap:18px; flex-wrap:wrap; color:#d8b45e; font-size:12px; }
.db-dialog { width:min(600px,calc(100vw - 32px)); padding:28px; border:1px solid #1687b7; border-radius:15px; background:#032440; color:#e5f1fa; box-shadow:0 20px 60px #0008; }
.db-dialog::backdrop { background:#00111dd6; }
.db-dialog p { line-height:1.5; color:#c8dded; }
.db-dialog header { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.db-dialog h2 { margin:0; color:#ffe092; }
.db-dialog ul { padding-left:22px; line-height:1.8; }
.db-dialog-close { border:1px solid #246889; background:#073753; border-radius:5px; width:32px; height:32px; }

@media (min-width:1900px) {
 .db-nav { min-height:56px; padding-left:225px; }
 .db-brand { width:206px; }
 .db-nav a:not(.db-brand) { font-size:18px; }
 .db-copy { top:120px; }
 .db-square { width:48px; min-width:48px; height:48px; }
 .db-play { min-width:182px; min-height:48px; }
 .db-site { --db-cast-top:65px; }
 .db-product img { height:102px; }
 .db-product h3 { font-size:13px; }
 .db-price { font-size:18px; }
}
@media (max-width:1199px) {
 .db-shell { width:92%; }
 .db-header { gap:16px; }
 .db-nav { width:60%; padding-left:135px; }
 .db-brand { width:136px; }
 .db-nav a:not(.db-brand) { font-size:12px; padding-inline:4px; }
 .db-play { min-width:130px; }
 .db-copy { top:84px; left:5.4%; width:29%; min-width:0; }
 .db-site { --db-cast-width:78%; --db-cast-right:0%; --db-cast-top:70px; }
 .db-stage { min-height:355px; }
 .db-feature { padding:7px; gap:10px; }
 .db-feature-icon { width:48px; height:48px; }
 .db-feature-icon .db-icon { width:30px; height:30px; }
 .db-panel { padding-inline:12px; }
 .db-card-grid { gap:6px; }
 .db-hero-info { padding-inline:6px; }
 .db-hero-info h3 { font-size:11px; }
 .db-role { font-size:8px; padding-inline:4px; }
 .db-round-arrow { width:19px; height:19px; right:4px; }
 .db-store-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
 .db-product { grid-template-columns:38% 1fr; }
 .db-product h3 { font-size:8px; }
 .db-price { font-size:12px; }
 .db-buy { width:25px; }
 .db-product-info { padding:5px; }
 .db-footer { gap:15px; padding-inline:4%; }
 .db-footer-nav { gap:15px; }
 .db-footer-tag { font-size:7px; letter-spacing:.1em; }
 .db-socials { gap:10px; }
}
@media (max-width:767px) {
 html { scroll-padding-top:12px; }
 .db-shell { width:calc(100% - 24px); }
 .db-header { top:12px; gap:7px; align-items:center; }
 .db-nav { padding:0; width:110px; min-height:46px; }
 .db-nav::before { display:none; }
 .db-brand { left:0; top:-3px; width:116px; transform:none; }
 .db-nav a:not(.db-brand) { display:none; }
 .db-actions { gap:5px; }
 .db-play { min-width:94px; min-height:36px; padding:7px 9px; font-size:12px; gap:5px; }
 .db-play .db-icon { width:14px; }
 .db-square { width:34px; height:36px; min-width:34px; font-size:11px; border-radius:6px; }
 .db-square .db-icon { width:17px; height:17px; }
 .db-account { display:none; }
 .db-mobile-menu { display:grid; }
 .db-site { --db-cast-width:112%; --db-cast-right:-6%; --db-cast-top:322px; }
 .db-stage { height:calc(325px + 30vw); min-height:438px; max-height:none; }
 .db-copy { top:82px; left:7%; width:74%; max-width:330px; }
 .db-copy p { font-size:12px; line-height:1.32; margin-top:4px; }
 .db-copy-actions { gap:8px; }
 .db-copy-actions .db-button { min-height:35px; }
 .db-cast { max-width:115%; }
 .db-cast--front { display:block; } /* The weapon remains above the blue panel on phones too. */
 .db-bg-motion img { object-position:center top; height:850px; }
 .db-world-bg::after { background:linear-gradient(180deg,transparent 200px,#032440aa 600px,#032440 900px); }
 .db-features { grid-template-columns:1fr; padding:9px; gap:7px; }
 .db-feature { min-height:69px; gap:15px; padding:8px 12px; }
 .db-feature h2 { font-size:15px; }
 .db-feature p { font-size:12px; max-width:32ch; }
 .db-feature-icon { width:45px; height:45px; }
 .db-section { margin-top:10px; padding:10px; }
 .db-section-heading { gap:8px; flex-wrap:wrap; }
 .db-section-heading h2 { font-size:19px; }
 .db-kicker { display:none; }
 .db-section-link { font-size:8px; }
 .db-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .db-portrait { aspect-ratio:1.5; }
 .db-hero-info { padding:8px 7px 0; }
 .db-hero-info h3 { font-size:13px; }
 .db-hero-info p { font-size:10px; }
 .db-role { font-size:9px; line-height:1; padding:4px 6px; }
 .db-round-arrow { width:23px; height:23px; }
 .db-arena-grid { grid-template-columns:1fr; gap:12px; }
 .db-arena img { aspect-ratio:2.5; }
 .db-arena h3 { font-size:15px; }
 .db-arena p { font-size:11px; }
 .db-arena-copy { padding:25px 10px 10px; }
 .db-store-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .db-product { display:block; }
 .db-product img { height:auto; aspect-ratio:1.3; }
 .db-product h3 { font-size:11px; min-height:28px; }
 .db-product-info { padding:9px; }
 .db-product .db-price { font-size:16px; }
 .db-buy { width:34px; height:30px; }
 .db-footer { margin-top:18px; padding:18px 20px; flex-wrap:wrap; justify-content:center; gap:14px; }
 .db-footer-logo { width:105px; }
 .db-footer-tag { font-size:8px; }
 .db-footer-nav { justify-content:center; order:4; margin:0; width:100%; gap:28px; font-size:12px; }
 .db-footer .db-footer-tag:last-child { padding-left:12px; }
 .db-lab { padding-top:50px; }
}
@media (max-width:374px) {
 .db-shell { width:calc(100% - 16px); }
 .db-brand { width:98px; }
 .db-nav { width:96px; }
 .db-square { width:31px; min-width:31px; }
 .db-actions { gap:4px; }
 .db-play { min-width:83px; }
 .db-copy { width:82%; }
 .db-feature h2 { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .db-bg-motion,.db-cast-motion,.db-copy { transform:none!important; }
 .db-hero-card { transition:none; }
}

/* ===== V2: shared depth, mobile overlap, natural content height ===== */
.db-site {
  --db-strength:1;
  --db-bg-travel:180px;
  --db-cast-travel:12px;
  --db-copy-travel:-20px;
  timeline-scope:--db-scene;
}
.db-stage {
  /* A timeline is NOT a stacking context. Do not transform/clip this parent. */
  view-timeline-name:--db-scene;
  view-timeline-axis:block;
  view-timeline-inset:0;
}
/* Anchor by the muzzle, not by an arbitrary hero top offset.
   (793-634)/1983 * 67vw = 5.372vw of transparent/lower canvas. */
.db-cast { top:auto; bottom:calc(-5.3722vw - 28px); }
@media (min-width:768px) and (max-width:1199px) {
 .db-cast { bottom:calc(-6.2542vw - 28px); }
 .db-features { padding-top:44px; }
}
@media (min-width:2200px) { .db-cast { bottom:-146.19px; } }
.db-cast--front { display:block; }
.db-cast--base,.db-cast--front { pointer-events:none; }

@keyframes db-depth-bg {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(0,calc(var(--db-bg-travel) * var(--db-strength)),0); }
}
@keyframes db-depth-cast {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(0,calc(var(--db-cast-travel) * var(--db-strength)),0); }
}
@keyframes db-depth-copy {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(0,calc(var(--db-copy-travel) * var(--db-strength)),0); }
}
/* Native scroll animation, including without JavaScript when supported.
   Both cast images use the SAME timeline, animation and end value.
   A JavaScript fallback takes over only on older engines. */
@supports (animation-timeline: view()) and (timeline-scope: --db-scene) and (animation-range: exit-crossing 0% exit-crossing 100%) {
 @media (prefers-reduced-motion:no-preference) {
  .db-site:not([data-db-driver="js"]):not([data-db-manual]):not([data-db-disabled]) .db-bg-motion,
  .db-site:not([data-db-driver="js"]):not([data-db-manual]):not([data-db-disabled]) .db-cast-motion,
  .db-site:not([data-db-driver="js"]):not([data-db-manual]):not([data-db-disabled]) .db-copy {
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:--db-scene;
    animation-range:exit-crossing 0% exit-crossing 100%;
  }
  .db-site:not([data-db-driver="js"]):not([data-db-manual]):not([data-db-disabled]) .db-bg-motion { animation-name:db-depth-bg; }
  .db-site:not([data-db-driver="js"]):not([data-db-manual]):not([data-db-disabled]) .db-cast-motion { animation-name:db-depth-cast; }
  .db-site:not([data-db-driver="js"]):not([data-db-manual]):not([data-db-disabled]) .db-copy { animation-name:db-depth-copy; }
 }
}
@media (max-width:767px) {
 .db-site { --db-bg-travel:180px; --db-cast-travel:22px; --db-copy-travel:-18px; }
 .db-stage {
   height:auto; min-height:0; max-height:none; padding-top:82px;
   display:flow-root;
 }
 .db-copy {
   /* Text is in normal flow: Russian text / larger text no longer hits the cast. */
   position:relative; top:auto; left:auto; margin-left:7%;
 }
 .db-stage::after {
   content:""; display:block;
   /* Same aspect-ratio geometry as both 1983 x 793 image canvases. */
   height:calc(35.8vw - 18px);
 }
 .db-cast {
   top:auto;
   /* Muzzle ends ~28px below the section border even WITHOUT scripts. */
   bottom:calc(-9vw - 28px);
 }
 .db-features {
   /* Reserve space for the muzzle throughout its full 0..22px travel.
      Text/icons start below this decorative overlap band. */
   padding-top:64px;
 }
}
@media (prefers-reduced-motion:reduce) {
 .db-bg-motion,.db-cast-motion,.db-copy {
   animation:none!important;
   transform:none!important;
 }
 /* Static weapon overlap is intentionally retained. */
}
/* Preview diagnostics only; not included in site.html or component.html. */
.db-check {
  position:relative; z-index:90; background:#041b2e; color:#e9f4fa;
  font:12px/1.5 Arial,Helvetica,sans-serif; border-bottom:1px solid #1a5274;
}
.db-check summary { padding:10px 14px; cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; }
.db-check summary::-webkit-details-marker { display:none; }
.db-check summary::after { content:"Проверка ▾"; margin-left:auto; color:#d4e5f2; white-space:nowrap; }
.db-check strong { color:#ffd36b; white-space:nowrap; }
.db-check-body { padding:0 14px 14px; max-width:800px; }
.db-check p { margin:7px 0; }
.db-check small { color:#a9c6da; }
.db-check label { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.db-check input { accent-color:#ffd36b; width:min(240px,58vw); }
.db-check button { margin:10px 7px 0 0; padding:8px 12px; border:1px solid #3780aa; border-radius:5px; background:#06334f; color:#f1f7fa; }
.db-check button:disabled { opacity:.45; cursor:not-allowed; }
.db-check code { color:#9fe9ec; }
.db-check .db-check-status { font-size:11px; }

/* ===== V5: additional menu-to-heroes spacing =====
 * The v5 extra space (7/12 of the complete image height) is increased by one third, to 7/9.
 * Assets heroes.webp and gun-front.webp: 1983 x 793, identical coordinates.
 * Do NOT translate just the body or just the gun. Extend the stage instead;
 * both bottom-anchored layers AND the following sections move by the same amount.
 * This is static CSS geometry, independent of JS, scroll animation and reduced motion.
 */
.db-site {
  --db-heroes-gap-share:0.7777777778;
  /* The stage is full width, capped at 2200px, as in v3. */
  --db-cast-canvas-height:calc(min(100vw, 2200px) * 0.67 * 793 / 1983);
  --db-heroes-extra-gap:calc(var(--db-cast-canvas-height) * var(--db-heroes-gap-share));
  --db-stage-original-height:clamp(346px, 22.53vw, 520px);
}
.db-stage {
  height:calc(var(--db-stage-original-height) + var(--db-heroes-extra-gap));
  min-height:0;
  max-height:none;
}
@media (min-width:768px) and (max-width:1199px) {
  .db-site {
    --db-cast-canvas-height:calc(100vw * 0.78 * 793 / 1983);
    --db-stage-original-height:clamp(355px, 22.53vw, 520px);
  }
}
@media (max-width:767px) {
  .db-site {
    --db-cast-canvas-height:calc(100vw * 1.12 * 793 / 1983);
  }
  .db-stage {
    /* Keep copy in normal flow, including the taller/shorter RU variant. */
    height:auto;
    min-height:0;
    max-height:none;
  }
  .db-stage::after {
    height:calc(35.8vw - 18px + var(--db-heroes-extra-gap));
  }
}
/* The taller first section may outgrow the source background image.
   Fade only its last 160px instead of showing a hard rectangular bottom edge.
   Image dimensions, top alignment, scene focus and artwork stay unchanged. */
@media (min-width:768px) {
  .db-bg-motion img {
    -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 160px), transparent 100%);
    mask-image:linear-gradient(to bottom, #000 calc(100% - 160px), transparent 100%);
  }
}

/* Center the complete intro below the logo/menu and above the feature panel.
   Layout handles centering while the existing transform handles parallax. */
@media (min-width:768px) {
  .db-stage {
    --db-menu-logo-width:164px;
    display:flex;
    align-items:center;
    padding-top:calc(3px + var(--db-menu-logo-width) * 195 / 379);
  }
  .db-copy { position:relative; top:auto; }
}
@media (min-width:768px) and (max-width:1199px) {
  .db-stage { --db-menu-logo-width:136px; }
}
@media (min-width:1900px) {
  .db-stage { --db-menu-logo-width:206px; }
}