@font-face{font-family:Manrope;src:url('/fonts/manrope-variable.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}
/* Generous spacing and a separate display face keep Croatian text open and legible. */
h1,h2,h3,.chapter-copy h2,.hero h1{font-family:Manrope,Inter,Arial,sans-serif;font-weight:650;letter-spacing:-.025em;line-height:1.16}
.hero h1{font-weight:650;letter-spacing:-.035em;line-height:1.12}.chapter-copy h2{font-weight:600;letter-spacing:-.025em;line-height:1.18}
p{line-height:1.85}.hero-lead,.section-head .lead,.chapter-lead{font-size:17px;line-height:1.9;letter-spacing:.005em;max-width:54ch}.hero-lead{font-size:19px}
.btn,.hero-actions .btn,.story-trigger,.chapter-link,.menu-toggle{font-family:Manrope,Inter,Arial,sans-serif;font-size:14px;font-weight:650;letter-spacing:.005em}
.kicker,.hero-copy .kicker,.chapter-copy .kicker{letter-spacing:.10em;line-height:1.9}.chapter-note,.micro,.proof-note{line-height:1.85}.partner-name,.service-row strong{font-family:Manrope,Inter,Arial,sans-serif;letter-spacing:-.015em}.tech-vignette h3{font-size:24px;line-height:1.35;letter-spacing:-.02em}.faq-list summary{font-size:16px;line-height:1.65}
/* Energy is bounded to the artwork and inherits its scroll pose. */
.illustration-electric{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;opacity:.9}
.chapter-visual .illustration-electric{transform:translate3d(var(--x),var(--y),0) rotate(var(--r)) scale(var(--s)) rotateX(var(--pointer-y)) rotateY(var(--pointer-x));transform-origin:center}
.chapter-visual .story-bolt,.story-electric{display:none!important}.hero-art>.illustration-electric{z-index:2}.tech-art>.illustration-electric{z-index:1;transform:translateY(var(--tech-y,0px))}.tech-art>span{z-index:2}
/* The guardian becomes a left-hand atmospheric layer, behind the introduction. */
.guardian-intro{min-height:490px;padding:45px 0 65px;overflow:clip}.guardian-intro>.kicker,.guardian-intro>h2{margin-left:36%;max-width:64%;z-index:3}.guardian-intro>h2{font-size:clamp(39px,4.1vw,60px);line-height:1.2;letter-spacing:-.025em}
.guardian-intro:before{inset:0;background:radial-gradient(ellipse at 23% 50%,#36eeff12,transparent 62%);z-index:-1}
.guardian-scene{position:absolute;left:-45px;top:-25px;width:55%;height:560px;z-index:0;pointer-events:none;opacity:.43;mask-image:linear-gradient(90deg,#000 5%,#000 58%,transparent 98%);animation:guardian-rise 13s ease-in-out infinite;animation-play-state:paused;transform-origin:45% 70%}
.guardian-intro.scene-in-view .guardian-scene{animation-play-state:running}
.guardian-scene .guardian-aura,html[data-theme=light] .guardian-scene .guardian-aura{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;opacity:1;mask-image:linear-gradient(transparent,#000 7%,#000 78%,transparent);filter:drop-shadow(0 0 17px #36eeff18)}
.guardian-scene .illustration-electric{z-index:1;opacity:.65}.guardian-intro>h2{color:var(--ink)}
html[data-theme=light] .guardian-scene{opacity:.33}.guardian-intro .accent{color:var(--heading-gold)}
@keyframes guardian-rise{0%,100%{transform:translate3d(0,7px,0) rotate(-.6deg)}50%{transform:translate3d(5px,-10px,0) rotate(.5deg)}}
@media(max-width:780px){.hero h1{font-size:clamp(49px,11vw,72px);letter-spacing:-.03em;line-height:1.14}.hero-lead,.chapter-lead,.section-head .lead{font-size:16px;line-height:1.9}.chapter-copy h2{font-size:clamp(36px,7.7vw,50px);line-height:1.2}.guardian-intro{min-height:390px;padding:36px 0 55px}.guardian-intro>.kicker,.guardian-intro>h2{margin-left:0;max-width:100%}.guardian-intro>h2{font-size:38px;line-height:1.25;max-width:94%}.guardian-scene{left:-100px;top:-25px;width:110%;height:450px;opacity:.19;mask-image:linear-gradient(90deg,#000,#000 35%,transparent 95%)}html[data-theme=light] .guardian-scene{opacity:.14}.guardian-scene .guardian-aura,html[data-theme=light] .guardian-scene .guardian-aura{width:100%;height:100%;right:auto;opacity:1}.micro,.proof-note,.chapter-note{font-size:13px}.faq-list summary{font-size:15px}.btn,.hero-actions .btn{font-size:14px}}
@media(min-width:781px) and (max-height:800px){.hero h1{font-size:clamp(56px,5.6vw,82px)}.hero-copy{padding:18px 0}.hero-lead{font-size:18px}}
html[data-motion=paused] .illustration-electric{display:none}html[data-motion=paused] .guardian-scene{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.illustration-electric{display:none}.guardian-scene{animation:none!important;transform:none!important}}

.tech-art:hover>.illustration-electric,.tech-art:focus-visible>.illustration-electric{transform:translateY(-8px) scale(1.025)}