body,.et_pb_column_1_2 .et_quote_content blockquote cite,.et_pb_column_1_2 .et_link_content a.et_link_main_url,.et_pb_column_1_3 .et_quote_content blockquote cite,.et_pb_column_3_8 .et_quote_content blockquote cite,.et_pb_column_1_4 .et_quote_content blockquote cite,.et_pb_blog_grid .et_quote_content blockquote cite,.et_pb_column_1_3 .et_link_content a.et_link_main_url,.et_pb_column_3_8 .et_link_content a.et_link_main_url,.et_pb_column_1_4 .et_link_content a.et_link_main_url,.et_pb_blog_grid .et_link_content a.et_link_main_url,body .et_pb_bg_layout_light .et_pb_post .post-content,body .et_pb_bg_layout_dark .et_pb_post .post-content{font-size:14px}.et_pb_slide_content,.et_pb_best_value{font-size:15px}@media only screen and (min-width:1350px){.et_block_row{padding:27px 0}.et_pb_section{padding:54px 0}.single.et_pb_pagebuilder_layout.et_full_width_page .et_post_meta_wrapper{padding-top:81px}.et_pb_fullwidth_section{padding:0}}@media only screen and (max-width:980px){.et_header_style_centered .mobile_nav .select_page,.et_header_style_split .mobile_nav .select_page,.et_mobile_menu li a,.mobile_menu_bar:before,.et_nav_text_color_light #top-menu>li>a,.et_nav_text_color_dark #top-menu>li>a,#top-menu a,.et_mobile_menu li a,#et_search_icon:before,#et_top_search .et-search-form input,.et_search_form_container input,#et-top-navigation .et-cart-info{color:rgba(0,0,0,0.6)}.et_close_search_field:after{color:rgba(0,0,0,0.6)!important}.et_search_form_container input::-moz-placeholder{color:rgba(0,0,0,0.6)}.et_search_form_container input::-webkit-input-placeholder{color:rgba(0,0,0,0.6)}.et_search_form_container input:-ms-input-placeholder{color:rgba(0,0,0,0.6)}}800;900&family=Inter:wght@400;500;600&display=swap');

/* ===================================================================
   1. DESIGN TOKENS
   =================================================================== */
:root {
  --void:          #030201;
  --night:         #080503;
  --card-bg:       #0c0805;
  --bone:          #f3e6cc;
  --muted:         #b9aa8c;
  --muted2:        #8e7c5f;
  --ember:         #ff6a2b;
  --ember2:        #ffb46f;
  --gold:          #ffd500;
  --green:         #05ce78;
  --line:          rgba(243, 230, 204, 0.13);
  --border-glow:   rgba(255, 106, 43, 0.45);
}

/* ===================================================================
   2. FULL-WIDTH BREAKOUT & ANTI-WHITE DIVI RESET
   =================================================================== */
/* Body and Divi containers: background fisso con immagine delle rocce dungeon_chasm.jpg */
body {
  background-color: #030201 !important;
  background-image: url('https://3dlegends.it/wp-content/uploads/2026/06/dungeon_chasm.jpg') !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: #f3e6cc;
}

#page-container, #et-main-area, .et_pb_section, .et_pb_row, .et_pb_column, .et_pb_module {
  background-color: transparent !important;
}

.dl-fullwidth-breakout {
  width:         100vw !important;
  position:      relative !important;
  left:          50% !important;
  right:         50% !important;
  margin-left:  -50vw !important;
  margin-right: -50vw !important;
  box-sizing:    border-box !important;
}

/* ===================================================================
   3. HERO SCROLLYTELLING ANIMATION (Landing Page Engine Fedele)
   =================================================================== */
#ll5-scroll {
  --p: 0; --mx: 0; --my: 0;
  --logo-intro-o: 1; --logo-intro-y: 0vh; --logo-intro-s: 1;
  --nav-o: 0;
  --title-o: 0; --title-y: 22px; --title-s: .96;
  --hero-o: 0; --hero-s: .80; --hero-x: 0vw; --hero-y: 7vh;
  --hero-rx: 0deg; --hero-ry: 0deg; --hero-rz: 0deg;
  --reveal: -18%;
  --beam-o: 0; --beam-x: 30%; --beam-w: 18vw;
  --side-o: 0; --side-s: .86; --side-x: 0vw; --side-y: 8vh;
  --side-rx: 2deg; --side-rz: 0deg;
  --map-o: 0; --map-s: .78; --map-x: 0vw; --map-y: 8vh;
  --map-rx: 54deg;
  --route-dash: 1080; --route-node-o: 0; --route-glow-o: 0;
  --runner-distance: 0%;
  --card1-o: 0; --card2-o: 0; --card3-o: 0;
  --hint-o: 1;
  --light-x: 50%; --light-y: 38%; --grid-y: 43vh; --grid-x: 0px;
  --sky-x: 0px; --sky-y: 0px; --moon-x: 0px; --moon-y: 0px;
  --logo-par-x: 0px; --logo-par-y: 0px;
  --hero-par-x: 0px; --hero-par-y: 0px;
  --side-par-x: 0px; --side-par-y: 0px;
  --map-par-x: 0px; --map-par-y: 0px;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #030201;
  width: 100%;
}

.ll5-stage { position: relative; height: 420svh; min-height: 2800px; }

.ll5-sticky {
  position: sticky; top: 0;
  height: 100svh; min-height: 620px;
  overflow: hidden; perspective: 1500px;
  background-color: #030201;
  background-image:
    radial-gradient(circle at var(--light-x) var(--light-y), rgba(255,106,43,.25), transparent 38rem),
    url('https://3dlegends.it/wp-content/uploads/2026/06/dungeon_chasm.jpg'),
    linear-gradient(180deg, #020101 0%, #100906 48%, #030201 100%);
  background-size: 100% 100%, 100% auto, 100% 100%;
  background-repeat: no-repeat, repeat-y, no-repeat;
  background-position: center center, center calc(var(--p) * -120vw), center center;
  transform-style: preserve-3d;
  contain: layout paint style;
}

.ll5-sticky::before {
  content: ""; position: absolute; inset: -15%; z-index: 0;
  pointer-events: none; opacity: .18;
  background-image:
    linear-gradient(rgba(255,180,111,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,180,111,.10) 1px, transparent 1px);
  background-size: clamp(44px,7vw,92px) clamp(44px,7vw,92px);
  transform: perspective(1100px) rotateX(67deg) translateY(var(--grid-y)) translateX(var(--grid-x)) scale(1.7);
  transform-origin: center bottom;
  mask-image: linear-gradient(to top, black, transparent 74%);
  -webkit-mask-image: linear-gradient(to top, black, transparent 74%);
}

.ll5-sticky::after {
  content: ""; position: absolute; inset: 0; z-index: 80; pointer-events: none;
  box-shadow: inset 0 0 13vw 5vw rgba(0,0,0,.88);
  background:
    linear-gradient(180deg, rgba(0,0,0,.42), transparent 26%, transparent 62%, rgba(0,0,0,.65)),
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.50) 88%);
}

.ll5-sky {
  position: absolute; inset: -10%; z-index: 1; pointer-events: none; overflow: hidden;
}
.ll5-sky::before {
  content: ""; position: absolute; inset: 0; opacity: .38;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,180,111,.09), transparent 25rem),
    radial-gradient(circle at 78% 20%, rgba(91,42,19,.34), transparent 30rem),
    radial-gradient(circle at 50% 58%, rgba(255,255,255,.045), transparent 38rem);
  transform: translate3d(var(--sky-x), var(--sky-y), -220px);
}

.ll5-moon {
  position: absolute; right: 7vw; top: 9vh;
  width: clamp(120px,15vw,240px); aspect-ratio: 1; border-radius: 50%; opacity: .13;
  background: radial-gradient(circle at 36% 33%, rgba(255,239,199,.96), rgba(255,181,101,.34) 47%, transparent 72%);
  filter: blur(.2px) drop-shadow(0 0 45px rgba(255,170,90,.36));
  transform: translate3d(var(--moon-x), var(--moon-y), -260px);
}

.ll5-ambient-light {
  position: absolute; left: 50%; top: 50%; width: 100vw; height: 100vh;
  background: radial-gradient(ellipse at center, rgba(255,106,43,0.18) 0%, rgba(255,180,111,0.06) 45%, transparent 75%);
  opacity: var(--ambient-o, 0); filter: blur(60px); pointer-events: none; mix-blend-mode: screen; will-change: opacity;
}

.ll5-runes { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .09; }
.ll5-rune { position: absolute; color: rgba(255,180,111,.62); font-family: "Cinzel", serif; font-size: clamp(1.1rem,2vw,2.2rem); text-shadow: 0 0 22px rgba(255,106,43,.48); }
.ll5-r1 { left: 8%; top: 24%; transform: rotate(-8deg); }
.ll5-r2 { right: 10%; top: 31%; transform: rotate(14deg); }
.ll5-r3 { left: 19%; bottom: 25%; transform: rotate(9deg); }
.ll5-r4 { right: 20%; bottom: 22%; transform: rotate(-12deg); }

/* Logo Intro & Fire Aura */
.ll5-fire-aura {
  position: absolute; left: 50%; top: 41%; height: 240px;
  transform: translate(-50%, -50%); z-index: 45; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,106,43,0.32) 0%, rgba(255,180,111,0.12) 45%, transparent 72%);
  filter: blur(28px); opacity: var(--logo-intro-o);
}

.ll5-intro-logo {
  position: absolute; z-index: 46; left: 50%; top: 41%; pointer-events: none;
  opacity: var(--logo-intro-o);
  filter: drop-shadow(0 24px 45px rgba(0,0,0,.85)) drop-shadow(0 0 44px rgba(255,211,0,.26)) drop-shadow(0 0 70px rgba(255,106,43,.16));
  will-change: transform, opacity;
}
.ll5-intro-logo::before {
  content: ""; position: absolute; inset: -35% -18%; z-index: -1; opacity: .68;
  background: radial-gradient(ellipse at center, rgba(255,196,65,.22), rgba(255,106,43,.06) 45%, transparent 72%);
  filter: blur(10px);
}
.ll5-intro-logo img { width: 100%; display: block; }

.ll5-title {
  position: absolute; z-index: 48; left: 50%; top: 57%; text-align: center; pointer-events: none;
  opacity: var(--title-o); will-change: opacity, transform;
}
.ll5-kicker {
  display: block; font-family: "Cinzel", serif; color: var(--ember2); font-weight: 800; font-size: .72rem; letter-spacing: .34em; text-transform: uppercase;
  text-shadow: 0 0 26px rgba(255,106,43,.32);
}
.ll5-title h1 {
  margin: .68rem 0 0; font-family: "Cinzel", serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.6rem, 8.2vw, 7.1rem); line-height: .90; letter-spacing: .02em;
  text-shadow: 0 12px 50px rgba(0,0,0,.94), 0 0 36px rgba(255,106,43,.18);
  color: var(--bone);
}
.ll5-title h1 span { color: var(--ember); }
.ll5-title p { margin: 1.12rem auto 0; max-width: 58ch; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.58; font-style: italic; }

/* Scena 3D Immagini (Acts I, II, III) */
.ll5-scenes { position: absolute; inset: 0; z-index: 30; transform-style: preserve-3d; pointer-events: none; }

.ll5-hero {
  position: absolute; left: 50%; top: 53%; width: 100vw; height: 100vh; opacity: var(--hero-o);
  transform-origin: 52% 60%; transform-style: preserve-3d;
  will-change: opacity, transform;
}
.ll5-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; }
.ll5-hero-grey { filter: grayscale(1) contrast(1.12) brightness(.78); opacity: .88; }
.ll5-hero-color {
  filter: saturate(1.08) contrast(1.04) brightness(.93);
  -webkit-mask-image: linear-gradient(103deg, #000 0%, #000 calc(var(--reveal) - 9%), rgba(0,0,0,.80) calc(var(--reveal) - 4%), rgba(0,0,0,.14) calc(var(--reveal) + 3%), transparent calc(var(--reveal) + 9%), transparent 100%);
  mask-image: linear-gradient(103deg, #000 0%, #000 calc(var(--reveal) - 9%), rgba(0,0,0,.80) calc(var(--reveal) - 4%), rgba(0,0,0,.14) calc(var(--reveal) + 3%), transparent calc(var(--reveal) + 9%), transparent 100%);
}
.ll5-hero-edge {
  position: absolute; inset: -1%; opacity: var(--beam-o); mix-blend-mode: screen; pointer-events: none;
  background: linear-gradient(103deg, transparent calc(var(--reveal) - 8%), rgba(255,180,116,0) calc(var(--reveal) - 3%), rgba(255,219,150,.70) var(--reveal), rgba(255,106,43,.16) calc(var(--reveal) + 4%), transparent calc(var(--reveal) + 10%));
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 84%, transparent 100%);
}
.ll5-light-beam {
  position: absolute; z-index: 52; top: -18vh; left: var(--beam-x); width: var(--beam-w); height: 132vh; opacity: var(--beam-o); pointer-events: none; mix-blend-mode: screen;
  transform: translateX(-50%) rotate(13deg); transform-origin: top center;
  background: linear-gradient(90deg, transparent, rgba(255,235,176,.10), rgba(255,219,149,.26), rgba(255,235,176,.10), transparent);
  filter: blur(1px);
}
.ll5-light-beam::before { content: ""; position: absolute; inset: 0 42%; background: rgba(255,239,194,.34); filter: blur(8px); }

/* Side Scene (Act 2) */
.ll5-side-scene {
  position: absolute; z-index: 34; left: 30vw; top: 52%; aspect-ratio: 1024/387; opacity: var(--side-o);
  filter: drop-shadow(0 32px 70px rgba(0,0,0,.86)); will-change: opacity, transform;
}
.ll5-side-scene img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; pointer-events: none; filter: saturate(1.03) contrast(1.04) brightness(.90); mix-blend-mode: screen; }

/* Map Scene (Act 3) */
.ll5-map-scene {
  position: absolute; z-index: 42; left: 70vw; top: 50%; aspect-ratio: 1024/400; opacity: var(--map-o);
  transform-origin: center center; transform-style: preserve-3d;
  filter: drop-shadow(0 34px 76px rgba(0,0,0,.86)) drop-shadow(0 0 46px rgba(255,106,43,.12)); will-change: opacity, transform;
}
.ll5-map-img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; pointer-events: none; filter: saturate(1.05) contrast(1.04) brightness(.90); mix-blend-mode: screen; }
.ll5-map-glow { position: absolute; inset: 0; opacity: var(--route-glow-o); mix-blend-mode: screen; background: radial-gradient(circle at 22% 57%, rgba(255,106,43,.16), transparent 11rem), radial-gradient(circle at 66% 42%, rgba(255,180,116,.14), transparent 12rem); pointer-events: none; }
.ll5-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(18px); pointer-events: none; }
.ll5-route-back {}
.ll5-route-main { filter: drop-shadow(0 0 16px rgba(255,106,43,1)) drop-shadow(0 0 24px rgba(255,106,43,.42)); }
.ll5-route-spark { opacity: var(--route-glow-o); filter: drop-shadow(0 0 9px rgba(255,180,111,.9)); }
.ll5-route-node { opacity: var(--route-node-o); filter: drop-shadow(0 0 16px rgba(255,106,43,.9)); transform-box: fill-box; transform-origin: center; animation: ll5-node-pulse 1.9s ease-in-out infinite; }
@keyframes ll5-node-pulse { 0%,100% { transform: scale(.84); } 50% { transform: scale(1.12); } }
.ll5-runner {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; opacity: var(--route-node-o); pointer-events: none;
  background: radial-gradient(circle, #fff8d8 0%, var(--ember2) 38%, var(--ember) 68%, transparent 72%);
}

/* Testi Cinematografici (Overlay) */
.ll5-content { position: absolute; inset: 0; z-index: 90; pointer-events: none; transform-style: preserve-3d; }
.ll5-cinematic-text {
  position: absolute; pointer-events: none;
  z-index: 91;
  transform-style: preserve-3d;
  transform: translate3d(var(--tx-offset, 0px), var(--y), 40px) rotateX(calc(var(--my) * -6deg)) rotateY(calc(var(--mx) * 6deg)) scale(var(--s, 1));
  will-change: opacity, transform;
  transition: transform 0.08s ease-out;
}
.ll5-cinematic-text::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 160%; height: 260%; background: radial-gradient(circle, rgba(2,1,1,0.92) 0%, rgba(2,1,1,0.80) 45%, transparent 78%);
  z-index: -1; pointer-events: none;
}
.ll5-cinematic-text .ll5-kicker { margin-bottom: 0.8rem; display: block; font-size: clamp(0.65rem, 1.2vw, 0.85rem); letter-spacing: 0.4em; color: var(--ember2); }
.ll5-cinematic-text h2 {
  margin: 0; font-family: "Cinzel", serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 1.05; letter-spacing: .02em; 
  text-shadow: 0 6px 25px rgba(0,0,0,0.95), 0 0 40px rgba(0,0,0,0.9), 0 0 60px rgba(255,106,43,0.1);
  color: var(--bone);
}
.ll5-cinematic-text p {
  margin: 1.2rem auto 0; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.6; color: var(--bone); opacity: 1; font-style: normal; font-weight: 500; max-width: 42ch;
  text-shadow: 0 4px 18px rgba(0,0,0,0.95), 0 0 25px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,1);
}
.ll5-num { font-family: "Inter", sans-serif; font-variant-numeric: lnum; display: inline-block; }

.ll5-text-1 {
  --o: var(--card1-o); --y: var(--text1-y); --s: var(--text1-s);
  left: 12vw; top: 35%; transform-origin: left center; text-align: left; align-items: flex-start;
}
.ll5-text-1 h2, .ll5-text-3 h2 { text-align: left; }
.ll5-text-1 p, .ll5-text-3 p { text-align: left; margin: 1.2rem 0 0; }
.ll5-text-2 {
  --o: var(--card2-o); --y: var(--text2-y); --s: var(--text2-s);
  right: 12vw; left: auto; top: 35%; transform-origin: right center; text-align: right; align-items: flex-end;
}
.ll5-text-2 h2 { text-align: right; }
.ll5-text-2 p { text-align: right; margin: 1.2rem 0 0; }
.ll5-text-3 {
  --o: var(--card3-o); --y: var(--text3-y); --s: var(--text3-s);
  left: 12vw; top: 35%; transform-origin: left center; text-align: left; align-items: flex-start;
}

/* Responsività Scrollytelling su Mobile / Tablet */
@media (max-width: 820px) {
  .ll5-side-scene { left: 50% !important; width: 100vw !important; }
  .ll5-map-scene { left: 50% !important; width: 100vw !important; }
  .ll5-route-main {}
  .ll5-cinematic-text {
    left: 50% !important; right: auto !important; top: 50% !important;
    width: 90vw !important; text-align: center !important; align-items: center !important;
  }
  .ll5-cinematic-text h2 { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; text-align: center !important; }
  .ll5-cinematic-text p { font-size: 0.95rem !important; padding: 0 0.5rem; text-align: center !important; margin: 1rem auto 0 !important; }
}

/* Embers, Fog & Grain */

/* Embers, Fog & Grain */
.ll5-embers { position: absolute; inset: 0; z-index: 74; pointer-events: none; overflow: hidden; }
.ll5-ember {
  position: absolute; bottom: -20px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff4ce 0%, var(--ember2) 35%, var(--ember) 66%, transparent 72%);
  box-shadow: 0 0 18px rgba(255,106,43,.72);
  animation-delay: var(--delay);
}
@keyframes ll5-ember-rise {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(.25); }
  12% { opacity: .74; }
  72% { opacity: .43; transform: translate3d(var(--drift),-70vh,0) scale(1); }
  100% { opacity: 0; transform: translate3d(var(--drift-end),-112vh,0) scale(.15); }
}

.ll5-fog {
  position: absolute; z-index: 76; left: -10%; right: -10%; bottom: -1px; height: 42vh; pointer-events: none; opacity: .52;
  background: linear-gradient(to top, rgba(3,2,1,.98), rgba(3,2,1,.60), transparent), radial-gradient(ellipse at 30% 70%, rgba(255,106,43,.08), transparent 40%), radial-gradient(ellipse at 70% 66%, rgba(255,180,111,.06), transparent 44%);
}

.ll5-scroll-hint {
  position: absolute; z-index: 102; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem);
  font-family: "Cinzel", sans-serif; font-weight: 800; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(243,230,204,.58); opacity: var(--hint-o, 1); pointer-events: none;
}

.ll5-grain {
  position: absolute; inset: 0; z-index: 104; pointer-events: none; opacity: .042; mix-blend-mode: screen;
  background-image: linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* ===================================================================
   4. RIBBON BAR — Continuous Marquee Stats Strip
   =================================================================== */
.dl-ribbon-bar {
  background: linear-gradient(90deg, #050302 0%, #150a04 50%, #050302 100%);
  border-top: 1px solid rgba(255,180,111,0.22);
  border-bottom: 1px solid rgba(255,180,111,0.22);
  box-shadow: 0 0 30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative;
  user-select: none;
}
.dl-ribbon-bar::before,
.dl-ribbon-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 6rem; z-index: 5;
  pointer-events: none;
}
.dl-ribbon-bar::before { left: 0; background: linear-gradient(90deg, #030201, transparent); }
.dl-ribbon-bar::after { right: 0; background: linear-gradient(270deg, #030201, transparent); }

.dl-ribbon-marquee {
  display: flex; gap: 2.5rem; width: max-content;
  animation: dlRibbonScroll 32s linear infinite;
}
.dl-ribbon-bar:hover .dl-ribbon-marquee {
  animation-play-state: paused;
}
@keyframes dlRibbonScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.dl-ribbon-inner {
  display: flex; align-items: center; gap: 2.2rem;
  flex-shrink: 0;
}
.dl-ribbon-item {
  display: flex; align-items: center; gap: 0.65rem;
  font-family: "Cinzel", serif; font-size: 0.82rem; font-weight: 800;
  color: var(--bone); text-transform: uppercase; letter-spacing: 0.14em;
  white-space: nowrap;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.dl-ribbon-item:hover {
  color: #fff;
  text-shadow: 0 0 12px rgba(255,180,111,0.7);
}
.dl-ribbon-glyph {
  font-size: .88rem; color: var(--ember2); flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255,106,43,0.6));
}
.dl-ribbon-sep {
  width: 1px; height: 1.1rem;
  background: linear-gradient(to bottom, transparent, rgba(255,180,111,0.4), transparent);
  flex-shrink: 0;
}

/* ===================================================================
   5. CINEMA BANNER — Sezioni principali
   =================================================================== */
.dl-home-section {
  background: var(--void);
  padding: 0;
  color: var(--bone);
  font-family: "Inter", sans-serif;
  border-top: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}

.dl-cinema-banner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 580px;
  max-width: 100%;
  position: relative;
  background: #060403;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) {
  .dl-cinema-banner { grid-template-columns: 1fr; }
}

/* Panel immagine */
.dl-cb-media {
  position: relative; overflow: hidden;
  background: #000;
  min-height: 380px;
}
.dl-cb-media img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(.25,.46,.45,.94), filter 0.8s ease;
  filter: brightness(.82) contrast(1.05);
}
.dl-cinema-banner:hover .dl-cb-media img {
  transform: scale(1.05);
  filter: brightness(.95) contrast(1.08);
}
.dl-cb-media-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 40%, rgba(6,4,3,0.85) 85%, var(--void) 100%);
  transition: opacity 0.5s ease;
}
.dl-cinema-banner--reverse .dl-cb-media-overlay {
  background: linear-gradient(270deg, transparent 40%, rgba(6,4,3,0.85) 85%, var(--void) 100%);
}
.dl-cb-media-badge {
  position: absolute; top: 1.8rem; left: 1.8rem; z-index: 10;
  background: rgba(8,5,3,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,180,111,0.5); color: var(--gold);
  font-family: "Cinzel", serif; font-size: 0.72rem; font-weight: 800;
  padding: 0.35rem 0.95rem; border-radius: 4px; text-transform: uppercase;
  letter-spacing: .12em;
  box-shadow: 0 4px 15px rgba(0,0,0,0.8), 0 0 15px rgba(255,106,43,0.25);
}
.dl-cb-num {
  position: absolute; bottom: 1.5rem; left: 1.8rem; z-index: 10;
  font-family: "Cinzel", serif; font-weight: 900; font-size: 4.5rem; line-height: 1;
  color: rgba(255,255,255,0.06); pointer-events: none; user-select: none;
}

/* Panel testo */
.dl-cb-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 5.5vw, 5.5rem) clamp(2rem, 5vw, 5rem);
  background: rgba(8, 5, 3, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  z-index: 2;
}
.dl-cb-body::before {
  content: "";
  position: absolute; top: 10%; bottom: 10%;
  left: -1px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--ember) 40%, var(--gold) 60%, transparent);
  opacity: 0.4;
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 0 20px 4px rgba(255,106,43,.4);
}
.dl-cinema-banner:hover .dl-cb-body::before {
  opacity: 1;
  box-shadow: 0 0 25px 6px rgba(255,106,43,.65);
}
.dl-cinema-banner--reverse .dl-cb-body::before {
  left: auto; right: -1px;
}

.dl-cb-tag {
  color: var(--gold); font-family: "Cinzel", serif;
  font-size: 0.76rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: .65rem;
  display: flex; align-items: center; gap: .5rem;
}
.dl-cb-tag::before {
  content: '◆'; font-size: .65rem; color: var(--ember);
}
.dl-cb-title {
  font-family: "Cinzel", serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: .96;
  color: var(--bone); margin: 0 0 1.3rem 0;
  text-shadow: 0 4px 20px rgba(0,0,0,0.8);
}
.dl-cb-title span {
  background: linear-gradient(180deg, #ffe082 0%, #ff8f00 50%, #e65100 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dl-cb-desc {
  color: var(--muted); font-size: 1.02rem; line-height: 1.72;
  max-width: 48ch; margin: 0 0 1.6rem 0;
}
.dl-cb-features {
  list-style: none; margin: 0 0 2.2rem 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.dl-cb-features li {
  position: relative; padding-left: 1.6rem;
  color: var(--bone); font-size: 0.92rem; line-height: 1.5;
}
.dl-cb-features li::before {
  content: '—'; position: absolute; left: 0; top: 0;
  color: var(--ember2); font-size: 0.82rem;
  filter: drop-shadow(0 0 4px rgba(255,106,43,0.6));
}

.dl-cb-cta {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 2.4rem;
  background: linear-gradient(135deg, #ffc078 0%, #ff6a2b 100%);
  color: #120603; font-family: "Cinzel", serif;
  font-weight: 900; font-size: .88rem; letter-spacing: .10em;
  text-decoration: none; text-transform: uppercase;
  border-radius: 5px;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 5px 22px rgba(255,106,43,.35), inset 0 1px 0 rgba(255,255,255,0.4);
  align-self: flex-start;
}
.dl-cb-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 32px rgba(255,106,43,.65), inset 0 1px 0 rgba(255,255,255,0.6);
  color: #000;
}

/* Ordine invertito per banner --reverse */
.dl-cinema-banner--reverse { direction: rtl; }
.dl-cinema-banner--reverse .dl-cb-body,
.dl-cinema-banner--reverse .dl-cb-media { direction: ltr; }

/* Reveal su scroll */
.dl-cinema-banner {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.dl-cinema-banner.dl-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================================
   6. CHRONICLES TICKER — Carousel articoli perfezionato
   =================================================================== */
.dl-chronicles-section {
  background: rgba(6, 4, 2, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid var(--line);
  padding: 5.5rem 0;
  color: var(--bone);
  font-family: "Inter", sans-serif;
  overflow: hidden;
  position: relative;
}

.dl-section-kicker {
  display: inline-block; font-family: "Cinzel", serif;
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.5rem;
}
.dl-chronicles-header {
  text-align: center;
  padding: 0 1.5rem;
  margin-bottom: 3.5rem;
}
.dl-chronicles-header h2 {
  font-family: "Cinzel", serif; font-weight: 900;
  font-size: clamp(2rem, 4.2vw, 3.4rem); text-transform: uppercase;
  color: var(--bone); margin: .4rem 0 .9rem 0;
}
.dl-chronicles-header h2 em, .dl-chronicles-header h2 span {
  font-style: normal;
  background: linear-gradient(180deg, #ffe082 0%, #ff8f00 50%, #e65100 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dl-chronicles-header p {
  color: var(--muted); max-width: 58ch; margin: 0 auto; line-height: 1.68;
  font-size: 1.02rem;
}

.dl-ticker-track-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  user-select: none;
  position: relative;
  width: 100%;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0 1.5rem 0;
}
.dl-ticker-track-wrap::-webkit-scrollbar { display: none; }

.dl-ticker-track {
  display: flex; gap: 1.8rem;
  padding: 0 2rem;
  width: max-content;
  margin: 0 auto;
}

.dl-article-card {
  background: rgba(16, 11, 7, 0.95);
  border: 1px solid rgba(243, 230, 204, 0.15);
  border-radius: 8px;
  overflow: hidden;
  width: 360px;
  flex-shrink: 0;
  display: flex; flex-direction: column;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(0,0,0,0.6);
  position: relative;
}
.dl-article-card:hover {
  border-color: rgba(255, 180, 111, 0.7);
  box-shadow: 0 12px 35px rgba(255,106,43,.25), 0 0 15px rgba(255,180,111,0.2);
  transform: translateY(-6px);
}
.dl-article-img-wrap {
  overflow: hidden; height: 200px; position: relative;
  background: #020101;
}
.dl-article-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(.82) contrast(1.05);
  transition: filter .45s ease, transform .55s ease;
}
.dl-article-card:hover .dl-article-img {
  filter: brightness(1.02);
  transform: scale(1.06);
}
.dl-article-body {
  padding: 1.6rem; display: flex; flex-direction: column; flex-grow: 1;
}
.dl-article-tag {
  color: var(--gold); font-family: "Cinzel", serif;
  font-size: .72rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: .6rem;
}
.dl-article-title {
  font-family: "Cinzel", serif; font-size: 1.18rem; font-weight: 800;
  color: var(--bone); margin: 0 0 .7rem 0; line-height: 1.35;
}
.dl-article-excerpt {
  color: var(--muted); font-size: .92rem; line-height: 1.6;
  margin: 0; flex-grow: 1;
}
.dl-article-readmore {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--ember2); font-family: "Cinzel", serif;
  font-size: .84rem; font-weight: 800; text-decoration: none;
  margin-top: 1.2rem; transition: color .2s ease, transform .2s ease;
}
.dl-article-card:hover .dl-article-readmore {
  color: #fff;
  transform: translateX(4px);
}

.dl-chronicles-cta {
  text-align: center; margin-top: 3rem;
}

/* ===================================================================
   7. GALLERY SCROLL STRIP
   =================================================================== */
.dl-gallery-section {
  background: var(--void);
  border-top: 1px solid var(--line);
  padding: 5.5rem 0;
  overflow: hidden;
  position: relative;
}
.dl-gallery-section-header {
  text-align: center; padding: 0 1.5rem; margin-bottom: 3rem;
}
.dl-gallery-section-header h2 {
  font-family: "Cinzel", serif; font-weight: 900;
  font-size: clamp(2rem, 4.2vw, 3.4rem); text-transform: uppercase;
  color: var(--bone); margin: .4rem 0 .8rem 0;
}
.dl-gallery-section-header h2 em, .dl-gallery-section-header h2 span {
  font-style: normal;
  background: linear-gradient(180deg, #ffe082 0%, #ff8f00 50%, #e65100 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dl-gallery-section-header p {
  color: var(--muted); max-width: 58ch; margin: 0 auto; line-height: 1.68;
  font-size: 1.02rem;
}

.dl-scroll-strip {
  display: flex; gap: 1.4rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 2rem 1.8rem 2rem;
  cursor: grab;
  position: relative;
}
.dl-scroll-strip::-webkit-scrollbar { display: none; }

.dl-scroll-strip-item {
  position: relative; flex-shrink: 0;
  width: clamp(280px, 32vw, 440px);
  aspect-ratio: 4/3;
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255, 180, 111, 0.2);
  background: #080503;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
  cursor: pointer;
}
.dl-scroll-strip-item:hover {
  border-color: var(--gold);
  box-shadow: 0 12px 38px rgba(255,106,43,.35), 0 0 20px rgba(255,211,0,0.25);
  transform: translateY(-6px);
}
.dl-scroll-strip-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94), filter .45s ease;
  filter: brightness(.80) contrast(1.05);
}
.dl-scroll-strip-item:hover img {
  transform: scale(1.08);
  filter: brightness(1.0);
}
.dl-strip-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(3,2,1,.95) 0%, rgba(3,2,1,.4) 40%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.4rem;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.dl-strip-caption-inner {
  color: var(--bone); font-family: "Cinzel", serif; font-size: 1rem; font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}
.dl-strip-hint {
  color: var(--ember2); font-family: "Cinzel", serif; font-size: 0.78rem; font-weight: 700;
  margin-top: 0.3rem; letter-spacing: 0.08em;
}

.dl-gallery-hint {
  text-align: center; margin-top: 1.4rem;
  color: var(--muted2); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  font-family: "Cinzel", serif;
}
.dl-gallery-cta { text-align: center; margin-top: 2.8rem; }

/* ===================================================================
   8. GLOBAL BUTTONS
   =================================================================== */
.dl-btn-primary {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 2.4rem;
  background: linear-gradient(135deg, #ffc078 0%, #ff6a2b 100%);
  color: #120603; font-family: "Cinzel", serif;
  font-weight: 900; font-size: .90rem; letter-spacing: .10em;
  text-decoration: none; text-transform: uppercase;
  border-radius: 5px; border: none; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 5px 22px rgba(255,106,43,.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.dl-btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 32px rgba(255,106,43,.65), inset 0 1px 0 rgba(255,255,255,0.6);
  color: #000;
}
.dl-btn-ghost {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 2.4rem;
  background: rgba(255,255,255,0.03);
  color: var(--bone); font-family: "Cinzel", serif;
  font-weight: 800; font-size: .90rem; letter-spacing: .10em;
  text-decoration: none; text-transform: uppercase;
  border-radius: 5px; border: 1px solid rgba(255,180,111,0.35); cursor: pointer;
  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.dl-btn-ghost:hover {
  border-color: var(--ember);
  color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 6px 22px rgba(255,106,43,.25);
}

/* ===================================================================
   9. NEWSLETTER CTA BANNER (Rituale Arcano)
   =================================================================== */
.dl-cta-section {
  background: radial-gradient(circle at 50% 30%, #150904 0%, #060302 75%) !important;
  border-top: 1px solid rgba(255,180,111,0.3);
  padding: 7rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.dl-cta-inner {
  max-width: 720px; margin: 0 auto; text-align: center;
  position: relative; z-index: 2;
}
.dl-cta-deco {
  margin: 0 auto 1.5rem auto;
  display: flex; justify-content: center;
  filter: drop-shadow(0 0 15px rgba(255,106,43,0.4));
}
.dl-cta-inner h2 {
  font-family: "Cinzel", serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--bone); margin: .5rem 0 1.1rem 0;
  line-height: 1.1;
}
.dl-cta-inner h2 span {
  background: linear-gradient(180deg, #ffe082 0%, #ff8f00 50%, #e65100 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dl-cta-inner p {
  color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin: 0 auto 2.8rem auto;
}
.dl-cta-form {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  max-width: 580px; margin: 0 auto;
}
.dl-cta-input {
  flex: 1; min-width: 260px;
  padding: 1.05rem 1.4rem;
  background: rgba(12, 7, 4, 0.9);
  border: 1px solid rgba(255, 180, 111, 0.35);
  color: var(--bone); border-radius: 6px;
  font-size: 1rem; font-family: "Inter", sans-serif;
  outline: none;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.dl-cta-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(255, 180, 111, 0.4), inset 0 2px 6px rgba(0,0,0,0.8);
}
.dl-cta-input::placeholder { color: var(--muted2); }
.dl-cta-fine-print {
  margin-top: 1.5rem !important; font-size: 0.80rem !important; color: var(--muted2) !important;
  letter-spacing: 0.08em;
}
.dl-cta-success {
  font-family: "Cinzel", serif; font-weight: 800; color: var(--gold);
  font-size: 1.1rem; padding: 1rem;
}

/* ===================================================================
   10. SCROLL REVEAL — IntersectionObserver hook
   =================================================================== */
.dl-reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity .65s ease, transform .65s ease;
}
.dl-reveal.dl-visible {
  opacity: 1; transform: translateY(0);
}
.dl-reveal-delay-1 { transition-delay: .1s; }
.dl-reveal-delay-2 { transition-delay: .2s; }
.dl-reveal-delay-3 { transition-delay: .35s; }

/* ===================================================================
   11. SEZIONE HEADER UTILITY
   =================================================================== */
.dl-section-kicker {
  display: block; font-family: "Cinzel", serif; color: var(--ember2);
  font-weight: 800; font-size: .72rem; letter-spacing: .34em;
  text-transform: uppercase; margin-bottom: .5rem;
  text-shadow: 0 0 24px rgba(255,106,43,.28);
}

/* ===================================================================
   12. SITE PREVIEW HUB — Intro + Banner Panoramici per pagina
   =================================================================== */

/* ── Wrapper principale ── */
.dl-hub {
  background: var(--void);
  color: var(--bone);
  font-family: "Inter", sans-serif;
  overflow: hidden;
}

/* ── INTRO ANIMATA ── */
.dl-hub-intro {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem 6rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(255,106,43,.13) 0%, transparent 65%),
    var(--void);
}

/* Griglia decorativa sfondo */
.dl-hub-intro::before {
  content: "";
  position: absolute; inset: -10%;
  pointer-events: none; opacity: .08;
  background-image:
    linear-gradient(rgba(255,180,111,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,180,111,.12) 1px, transparent 1px);
  background-size: clamp(48px,7vw,96px) clamp(48px,7vw,96px);
  transform: perspective(1200px) rotateX(62deg) translateY(38vh) scale(1.8);
  transform-origin: center bottom;
  mask-image: linear-gradient(to top, black 0%, transparent 72%);
}

/* Halo glow centralizzato */
.dl-hub-intro::after {
  content: "";
  position: absolute; bottom: 0; left: 50%;
  width: 80vw; height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--ember) 35%, var(--ember2) 50%, var(--ember) 65%, transparent);
  box-shadow: 0 0 40px 8px rgba(255,106,43,.35);
  opacity: .6;
}

.dl-hub-intro-kicker {
  display: inline-block;
  font-family: "Cinzel", serif;
  color: var(--ember2);
  font-size: .72rem; font-weight: 800;
  letter-spacing: .38em; text-transform: uppercase;
  margin-bottom: .8rem;
  opacity: 0;
  transform: translateY(18px);
  animation: hubFadeUp .7s ease .2s forwards;
}

.dl-hub-intro-title {
  font-family: "Cinzel", serif; font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  text-transform: uppercase; line-height: .92;
  color: var(--bone); margin: 0 0 1.4rem;
  opacity: 0;
  transform: translateY(28px);
  animation: hubFadeUp .8s ease .42s forwards;
  text-shadow: 0 0 60px rgba(255,106,43,.22), 0 8px 40px rgba(0,0,0,.9);
}
.dl-hub-intro-title em {
  font-style: normal; color: var(--ember);
}

.dl-hub-intro-sub {
  color: var(--muted); font-size: clamp(.95rem,1.3vw,1.12rem);
  max-width: 58ch; margin: 0 auto 2.8rem;
  line-height: 1.65; font-style: italic;
  opacity: 0;
  transform: translateY(22px);
  animation: hubFadeUp .8s ease .65s forwards;
}

/* Indicatore scroll animato */
.dl-hub-scroll-cue {
  position: absolute; bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  opacity: 0;
  animation: hubFadeUp .6s ease 1.1s forwards;
}
.dl-hub-scroll-cue span {
  font-family: "Cinzel", serif;
  font-size: .65rem; letter-spacing: .28em; color: var(--muted2);
  text-transform: uppercase;
}
.dl-hub-scroll-line {
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, var(--ember), transparent);
  animation: scrollPulse 1.8s ease-in-out 1.5s infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity: .3; transform: scaleY(1); }
  50%      { opacity: 1;  transform: scaleY(1.15); }
}

/* Stat pill row dentro l'intro */
.dl-hub-stats{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem;opacity:0;animation:hubFadeUp .7s ease .85s forwards}.dl-hub-stat{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.7rem 1.4rem;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:6px;backdrop-filter:blur(6px)}.dl-hub-stat-num{font-family:"Cinzel",serif;font-weight:900;font-size:clamp(1.3rem,2.5vw,1.8rem);color:var(--ember2);line-height:1}.dl-hub-stat-label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted2)}@keyframes hubFadeUp{to{opacity:1;transform:translateY(0)}}.dl-hub-banner{position:relative;min-height:clamp(480px,65vh,720px);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-top:1px solid var(--line);opacity:0;transform:translateY(50px);transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94)}.dl-hub-banner.dl-visible{opacity:1;transform:translateY(0)}@media (max-width:860px){.dl-hub-banner{grid-template-columns:1fr}}.dl-hub-banner-media{position:relative;overflow:hidden;background:#000}.dl-hub-banner-media img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.75) saturate(.9);transition:transform .8s cubic-bezier(.25,.46,.45,.94),filter .6s ease}.dl-hub-banner:hover .dl-hub-banner-media img{transform:scale(1.05);filter:brightness(.92) saturate(1.05)}.dl-hub-banner-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 45%,var(--void) 100%)}.dl-hub-banner--reverse .dl-hub-banner-media::after{background:linear-gradient(270deg,transparent 45%,var(--void) 100%)}.dl-hub-banner-badge{position:absolute;top:1.5rem;left:1.5rem;z-index:2;background:rgba(3,2,1,.85);backdrop-filter:blur(10px);border:1px solid var(--border-glow);color:var(--ember2);font-family:"Cinzel",serif;font-size:.68rem;font-weight:700;padding:.32rem .8rem;border-radius:4px;text-transform:uppercase;letter-spacing:.1em}.dl-hub-banner-num{position:absolute;bottom:1rem;right:1.5rem;z-index:1;font-family:"Cinzel",serif;font-weight:900;font-size:clamp(5rem,10vw,10rem);color:rgba(255,255,255,.04);line-height:1;user-select:none;pointer-events:none;letter-spacing:-.04em}.dl-hub-banner-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.5rem,5vw,5.5rem) clamp(2rem,5vw,5rem);background:var(--void);position:relative;z-index:2}.dl-hub-banner-body::before{content:"";position:absolute;top:18%;bottom:18%;left:-1px;width:2px;background:linear-gradient(180deg,transparent,var(--ember) 40%,var(--ember2) 60%,transparent);opacity:0;transition:opacity .45s ease;box-shadow:0 0 22px 5px rgba(255,106,43,.55)}.dl-hub-banner:hover .dl-hub-banner-body::before{opacity:1}.dl-hub-banner--reverse .dl-hub-banner-body::before{left:auto;right:-1px}.dl-hub-banner-tag{color:var(--gold);font-family:"Cinzel",serif;font-size:.7rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.6rem}.dl-hub-banner-title{font-family:"Cinzel",serif;font-weight:900;font-size:clamp(1.8rem,3.5vw,3.2rem);text-transform:uppercase;line-height:.96;color:var(--bone);margin:0 0 1.2rem}.dl-hub-banner-title em{font-style:normal;color:var(--ember)}.dl-hub-banner-desc{color:var(--muted);font-size:1rem;line-height:1.68;max-width:44ch;margin:0 0 .8rem}.dl-hub-banner-features{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-direction:column;gap:.45rem}.dl-hub-banner-features li{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.9rem}.dl-hub-banner-features li::before{content:"◆";font-size:.5rem;color:var(--ember);flex-shrink:0;opacity:.8}.dl-hub-banner-ctas{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}.dl-hub-banner--reverse{direction:rtl}.dl-hub-banner--reverse .dl-hub-banner-body,.dl-hub-banner--reverse .dl-hub-banner-media{direction:ltr}.dl-hub-divider{display:flex;align-items:center;padding:2.5rem 3rem;background:var(--night);border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:1.5rem;overflow:hidden}.dl-hub-divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}.dl-hub-divider-icon{font-size:1rem;color:var(--ember2);opacity:.6;letter-spacing:.2em}.dl-hub-final-cta{text-align:center;padding:7rem 1.5rem;background:radial-gradient(ellipse at 50% 100%,rgba(255,106,43,.12) 0%,transparent 60%),var(--night);border-top:1px solid var(--line);position:relative;overflow:hidden}.dl-hub-final-cta::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:80vw;height:1px;background:linear-gradient(90deg,transparent,var(--ember) 35%,var(--ember2) 50%,var(--ember) 65%,transparent);box-shadow:0 0 30px 4px rgba(255,106,43,.3)}.dl-hub-final-cta h2{font-family:"Cinzel",serif;font-weight:900;font-size:clamp(1.8rem,4vw,3rem);text-transform:uppercase;color:var(--bone);margin:0 0 1rem}.dl-hub-final-cta h2 em{font-style:normal;color:var(--ember)}.dl-hub-final-cta p{color:var(--muted);max-width:54ch;margin:0 auto 2.8rem;line-height:1.65;font-size:1.05rem}.dl-hub-final-cta-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}@media (max-width:860px){.dl-hub-banner-media{min-height:260px}.dl-hub-banner--reverse{direction:ltr}.dl-hub-divider{padding:1.5rem 1.5rem}}.sys-faq-group,.dl-faq-group{display:flex;flex-direction:column;gap:1rem;margin:2.5rem 0 3.5rem}details.wp-block-details,details.dl-faq,details.sys-faq{background:linear-gradient(160deg,rgba(28,14,6,0.95) 0%,rgba(14,7,2,0.98) 100%)!important;border:1px solid rgba(212,160,23,0.28)!important;border-radius:8px!important;padding:0!important;margin-bottom:1rem!important;overflow:hidden!important;transition:border-color 0.35s ease,box-shadow 0.35s ease,transform 0.25s ease!important;box-shadow:0 8px 24px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,213,0,0.12)!important}details.wp-block-details:hover,details.dl-faq:hover,details.sys-faq:hover{border-color:rgba(255,213,0,0.55)!important;box-shadow:0 12px 32px rgba(0,0,0,0.85),0 0 20px rgba(255,106,43,0.2)!important;transform:translateY(-2px)}details.wp-block-details[open],details.dl-faq[open],details.sys-faq[open]{border-color:rgba(255,213,0,0.75)!important;box-shadow:0 16px 40px rgba(0,0,0,0.92),0 0 28px rgba(255,106,43,0.35),inset 0 1px 0 rgba(255,213,0,0.3)!important}details.wp-block-details summary,details.dl-faq summary,details.sys-faq summary{list-style:none!important;display:flex!important;justify-content:space-between!important;align-items:center!important;padding:1.25rem 1.6rem!important;font-family:'Cinzel',serif!important;font-size:1.08rem!important;font-weight:700!important;color:#ffffff!important;letter-spacing:0.03em!important;cursor:pointer!important;user-select:none!important;position:relative!important;transition:color 0.3s ease,background-color 0.3s ease!important}details.wp-block-details summary::-webkit-details-marker,details.dl-faq summary::-webkit-details-marker,details summary::-webkit-details-marker,details summary::marker{display:none!important}details.wp-block-details summary:hover,details.dl-faq summary:hover,details.sys-faq summary:hover{color:var(--gold,#ffd500)!important}details[open] summary{color:var(--gold,#ffd500)!important;background:rgba(255,106,43,0.08)!important;border-bottom:1px solid rgba(212,160,23,0.22)!important}details.wp-block-details summary::after,details.dl-faq summary::after,details.sys-faq summary::after{content:""!important;display:inline-block!important;width:28px!important;height:28px!important;flex-shrink:0!important;margin-left:1rem!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M6 6 L22 22 M22 22 L26 26 M20 23 L23 20 M8 5 L5 8' stroke='%23ffd500' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M26 6 L10 22 M10 22 L6 26 M12 23 L9 20 M24 5 L27 8' stroke='%23ffd500' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='14' r='2' fill='%23ff6a2b'/%3E%3C/svg%3E") center / contain no-repeat!important;filter:drop-shadow(0 0 6px rgba(255,213,0,0.45))!important;transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1),filter 0.45s ease!important;transform-origin:center center!important}details[open] summary::after{transform:rotate(90deg) scale(1.15)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M6 6 L22 22 M22 22 L26 26 M20 23 L23 20 M8 5 L5 8' stroke='%23ff9852' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M26 6 L10 22 M10 22 L6 26 M12 23 L9 20 M24 5 L27 8' stroke='%23ff9852' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='14' r='2.5' fill='%23ffd500'/%3E%3C/svg%3E")!important;filter:drop-shadow(0 0 10px rgba(255,106,43,0.9)) drop-shadow(0 0 20px rgba(255,213,0,0.8))!important}details.wp-block-details .wp-block-details__content,details.dl-faq .dl-faq-content,details.sys-faq .sys-faq-content,details.dl-faq p,details.sys-faq p{padding:1.25rem 1.6rem!important;margin:0!important;font-family:'Inter',sans-serif!important;font-size:1.05rem!important;line-height:1.85!important;color:#f3e6cc!important;text-shadow:0 1px 3px rgba(0,0,0,0.85)!important;animation:sysFaqFadeIn 0.35s ease-out forwards!important}.et-l--post .et_builder_inner_content{overflow-x:default}.preset--module--divi-row--default{max-width:2560px!important}.et_pb_row_0_tb_header,.et_pb_row_0,.et_pb_row_1{flex-wrap:nowrap}.et_pb_code_0_tb_header,.et_pb_code_0,.et_pb_code_1,.et_pb_code_2,.et_pb_code_3,.et_pb_code_4,.et_pb_code_5,.et_pb_code_6,.et_pb_code_7,.et_pb_code_8,.et_pb_code_9,.et_pb_code_10{margin-bottom:0px!important}