/* The default is a fully readable, no-JS product story. WebGL enhances desktop only. */
.product-story{position:relative;background:#040918;isolation:isolate}
.story-stage{position:relative;background:radial-gradient(ellipse at 75% 35%,#132752,transparent 55%),#040918}
.scene-canvas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.scene-canvas canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .2s ease}
.scene-canvas canvas.frame-ready{opacity:1}
.story-anchors{display:none}
#kako-radi,#primjene,#cijene,#pitanja{scroll-margin-top:96px}
.product-story .chapter{position:relative;min-height:650px;gap:4vw;padding:110px 6vw;align-items:center}
.product-story .chapter>div:not(.chapter-visual){max-width:420px;position:relative;z-index:2}
.product-story .chapter-visual{order:2;width:55%;max-width:none;margin-left:auto}
.chapter-visual img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 45px #1685e533)}
.product-story .hero h1{font-size:clamp(58px,5.9vw,98px);letter-spacing:-.065em;line-height:1.01}
.product-story .hero em{background-image:linear-gradient(110deg,#6854ff,#00cdf2)}
.product-story h2{font-size:clamp(38px,4.1vw,68px);line-height:1.06;margin:18px 0 24px}
.product-story .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.24em;color:#abaaff}
.product-story .benefits{align-items:center}

.brand{display:flex;align-items:center}.brand img{height:auto;filter:drop-shadow(0 0 8px #42b7ff55)}
@media(min-width:1000px) and (prefers-reduced-motion:no-preference){
 .scene-ready .story-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
 .scene-ready .story-anchors{display:block;position:relative;margin-top:-100svh;pointer-events:none}
 .scene-ready [data-story-anchor]{height:115svh;scroll-margin-top:96px}
 .scene-ready [data-story-anchor]:last-child{height:100svh}
 .scene-ready .chapter{position:absolute;inset:0;min-height:0;padding:100px 6vw 45px;opacity:0;visibility:visible;pointer-events:none;transform:translateY(18px)}
 .scene-ready .chapter[data-active]{visibility:visible;pointer-events:auto}
 .scene-ready .chapter-visual:not(.hero-static-fallback){display:none}
 .scene-ready .chapter>div:not(.chapter-visual){width:29vw;max-width:440px;text-shadow:0 3px 24px #040918}
 .scene-ready .chapter.story-copy{justify-content:flex-start;align-items:flex-start;padding-top:150px}
 .scene-ready .chapter.story-copy>div:not(.chapter-visual){width:28vw;max-width:440px;margin:0;text-align:left}
}
@media(max-width:999px),(prefers-reduced-motion:reduce){
 .product-story .chapter{display:flex;flex-direction:column;align-items:flex-start;min-height:0;padding:85px 7vw 45px;gap:28px}
 .product-story .chapter>div:not(.chapter-visual){width:100%;max-width:650px}
 .product-story .chapter-visual{width:min(100%,750px);align-self:center;margin:0;order:2}
 .product-story .hero{padding-top:125px}
 .product-story .hero h1{font-size:clamp(56px,9vw,90px)}
 .product-story .chapter:not(.hero){border-top:1px solid #8598ce20}
 .product-story .chapter h2{font-size:clamp(34px,5vw,54px)}
 .story-anchors{display:block;height:0;overflow:hidden}
}
@media print{.scene-canvas{display:none}.product-story .chapter{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important}.story-stage{height:auto!important;position:static!important}.story-anchors{display:none!important}}
.chapter-visual{position:relative}
.hero .chapter-visual{padding-bottom:10%}
.product-story:not(.scene-ready) .hero{overflow:hidden}
.hero .hero-static-fallback{z-index:1;padding-bottom:0;isolation:isolate;opacity:1;transition:opacity .2s ease}
.hero-static-fallback picture,.hero-static-fallback img{display:block;width:100%;height:100%}
.hero-static-fallback img{object-fit:contain;object-position:center}
.scene-ready.scene-visible .hero-static-fallback{opacity:calc(1 - var(--hero-handoff,0));pointer-events:none}
.benefits .chapter-visual{display:flex;flex-wrap:wrap;justify-content:center;gap:3%}
.benefits .chapter-visual>img:first-child{width:90%}
.benefits .chapter-visual .fallback-screen{width:45%}
.scene-ready .benefits .chapter-visual{display:none}
@media(min-width:1000px) and (prefers-reduced-motion:no-preference){
 .scene-ready .hero{align-items:flex-start;padding-top:clamp(125px,19vh,180px)}
}
.product-story .hero em{text-shadow:none}

/* Keep the no-canvas hero in the same viewport and copy safe-zone as the WebGL
   scene. The canvas can now replace this visual layer without moving the page. */
@media(min-width:1000px) and (prefers-reduced-motion:no-preference){
 .product-story .hero{min-height:100vh;min-height:100svh;padding:clamp(125px,19vh,180px) 6vw 45px;align-items:flex-start}
 .product-story .hero>div:not(.chapter-visual){width:29vw;max-width:560px;text-shadow:0 3px 24px #040918}
 .product-story .hero .chapter-visual{position:absolute;inset:0;width:100%;margin:0;transform:none}
 .product-story .hero .hero-static-fallback{height:100svh;background:#040918}
 .product-story .hero .hero-static-fallback img{height:100%!important;object-fit:contain;filter:none}
 .product-story .hero .lead{max-width:370px;font-size:15px;line-height:1.65;text-wrap:pretty}
}

/* Final waypoint: editorial copy floats in the world; only evidence items are glass. */
/* The 1650x1000 first frame must cover wide viewports instead of letterboxing.
   Narrower desktop ratios already fill the width with contain; keep their framing. */
@media(min-width:1000px) and (min-aspect-ratio:33/20) and (prefers-reduced-motion:no-preference){
 .product-story .hero .hero-static-fallback img{object-fit:cover}
}
.product-story .benefits-copy{
    position:relative;min-width:0;padding:10px 0;isolation:isolate;text-shadow:none;
}
.product-story .benefits-copy::before{
    content:"";position:absolute;z-index:-1;inset:-56px -48px -44px -58px;pointer-events:none;
    background:radial-gradient(ellipse at 35% 40%,#091935bd 0%,#08142b75 43%,transparent 74%);
    filter:blur(12px);
}
.product-story .benefits-copy .eyebrow{margin:0 0 14px;font-size:11px;line-height:1.6}
.product-story .benefits h2{font-size:clamp(34px,3vw,48px);line-height:1.1;margin:0 0 18px;text-wrap:balance}
.product-story .benefits-intro{max-width:none;margin:0;color:#c2d2e8;font-size:16px;line-height:1.6;text-wrap:pretty}
.product-story .benefit-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 0;padding:0;list-style:none}
.product-story .benefit-list li{
    display:flex;align-items:center;gap:10px;min-width:0;margin:0;padding:13px 12px;
    border:1px solid #92acdf2e;border-radius:10px;background:linear-gradient(125deg,#314b732d,#111c353b);
    box-shadow:inset 0 1px 0 #c3dfff0c;font-size:16px;font-weight:500;line-height:1.45;color:#e3edfb;
}
.product-story .benefit-list li:nth-child(even){border-color:#a693e82a;background:linear-gradient(125deg,#4b397133,#111c354f)}
.product-story .benefit-list li:last-child{grid-column:1/-1}
.product-story .benefit-list li>span{min-width:0;overflow-wrap:break-word}
/* Intrinsic SVG attributes also protect the icons if a stylesheet fails to load. */
.product-story .benefit-list svg{
    display:block;flex:0 0 22px;width:22px;height:22px;min-width:22px;max-width:22px;min-height:22px;max-height:22px;
    fill:none;stroke:#70d6eb;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transform:none;
}
.product-story .benefit-list li:nth-child(even) svg{stroke:#b5a1ff}
@media(min-width:1000px) and (prefers-reduced-motion:no-preference){
 .scene-ready .chapter[data-chapter="4"]{padding-top:112px;padding-bottom:32px;z-index:3}
 .scene-ready .chapter[data-chapter="4"]>.benefits-copy{width:34vw;max-width:640px;flex:none;text-shadow:none}
}
@media(min-width:1000px) and (max-width:1199px){
 .product-story .benefits-copy{padding:8px 0}
 .product-story .benefit-list{grid-template-columns:1fr;gap:8px;margin-top:18px}
 .product-story .benefit-list li{padding:9px 10px}
 .product-story .benefits-intro{font-size:15px}
}
@media(max-width:999px),(prefers-reduced-motion:reduce){
 .product-story .benefits-copy{padding:8px 0;width:100%;max-width:650px}
 .product-story .benefits h2{font-size:36px}
}
@media(max-width:599px){
 .product-story .benefits-copy{padding:8px 0}
 .product-story .benefits-copy::before{inset:-36px -20px -28px;background:radial-gradient(ellipse at 35% 32%,#0919359c 0%,#08142b55 50%,transparent 78%)}
 .product-story .benefit-list{grid-template-columns:1fr;gap:10px;margin-top:24px}
 .product-story .benefit-list li{padding:13px 12px;font-size:16px;gap:12px}
 .product-story .benefits h2{font-size:34px}
 .product-story .benefits .chapter-visual{width:85%;margin-top:8px}
}
@media(min-width:1000px) and (max-height:740px) and (prefers-reduced-motion:no-preference){
 .scene-ready .chapter[data-chapter="4"]{padding-top:100px;padding-bottom:20px}
 .scene-ready .benefits-copy{padding:6px 0}
 .scene-ready .benefits-copy .eyebrow{margin-bottom:10px}
 .scene-ready .benefits h2{font-size:32px;margin-bottom:12px}
 .scene-ready .benefits-intro{font-size:15px;line-height:1.45}
 .scene-ready .benefit-list{margin-top:16px;gap:8px}
 .scene-ready .benefit-list li{padding:9px 10px}
}
@media(max-width:380px){
 .nav{gap:12px;padding-inline:12px}
 .nav .brand img{width:110px}
 .nav>div>.button{white-space:nowrap;padding:10px 12px;font-size:12px}
}

/* Phone story: normal document scrolling above one persistent visual window. */
@media(max-width:999px){
 #kako-radi,#primjene,#cijene,#pitanja{scroll-margin-top:76px}
 .product-story{overflow-anchor:none;--mobile-copy-inset:26px}
 .product-story .hero{padding-top:88px;padding-inline:var(--mobile-copy-inset)}
 .product-story .hero:has(.hero-static-fallback){position:relative;min-height:100svh;padding-bottom:46svh}
 .product-story .hero>div:not(.chapter-visual){max-width:560px}
 .product-story .hero .hero-static-fallback{position:absolute;right:0;bottom:0;left:0;align-self:stretch;width:100%;height:46svh;margin:0;transform:none;background:#040918}
 .product-story .hero .hero-static-fallback img{height:100%!important;object-fit:contain;filter:none}
 footer{flex-wrap:wrap;flex-direction:row;align-items:center;gap:12px;padding:18px 24px}
 footer span{flex:1 1 175px;min-width:0;font-size:clamp(10px,2.8vw,12px);line-height:1.4}
 footer .footer-links{display:flex;align-items:center;flex:none;gap:12px}
 footer a{flex:none;color:#f2f8ff;font-weight:700;font-size:12px;text-decoration:underline;text-decoration-color:#5bdcf477;text-underline-offset:4px}
 .nav{top:8px;min-height:56px;height:56px;padding:8px 14px;gap:12px;width:calc(100% - 24px)}
 .nav nav,.nav>div>a:not(.button){display:none}
 .nav .brand img{width:112px;height:auto}
 .nav>div>.button{padding:10px 13px;font-size:12px;white-space:nowrap}
 .mobile-scene .story-stage{background:#040918}
 .mobile-scene .scene-canvas{position:sticky;top:0;height:100svh;width:100%;margin-bottom:-100svh;overflow:hidden}
 .mobile-scene .scene-canvas canvas.frame-ready{opacity:var(--mobile-world-opacity,0);transition:none}
 .mobile-scene .hero-static-fallback{transition:none}
 .mobile-scene .scene-canvas::after{content:"";position:absolute;left:0;right:0;top:var(--visual-start,54%);height:70px;background:linear-gradient(#040918,transparent);pointer-events:none}
 .mobile-scene .chapter{min-height:100svh;padding:88px 26px 52svh;gap:0;border:0!important;scroll-margin-top:0;box-sizing:border-box}
 .mobile-scene.scene-ready .chapter-visual:not(.hero-static-fallback){display:none}
 .mobile-scene .chapter>div:not(.chapter-visual){max-width:560px;width:100%;transition:none}
 .mobile-scene.scene-ready .chapter:not(.hero)>div:not(.chapter-visual){position:fixed;top:88px;left:var(--mobile-copy-inset);width:calc(100% - 2 * var(--mobile-copy-inset));opacity:0;transform:none;pointer-events:none;transition:none}
 .product-story .hero h1{font-size:clamp(48px,14vw,66px);line-height:1.01;margin:12px 0 18px}
 .product-story .hero .eyebrow{font-size:9px;letter-spacing:.19em}
 .product-story .hero .lead{font-size:14px;line-height:1.55;margin-bottom:18px}
 .product-story .hero .button,.product-story .hero .quiet{font-size:13px;padding:12px 14px}
 .mobile-scene .story-copy b{display:inline-flex;color:#70d6eb;font-size:13px;letter-spacing:.16em;padding:8px 0;border-bottom:1px solid #70d6eb66}
 .mobile-scene .story-copy h2{font-size:38px;margin:14px 0}
 .mobile-scene .story-copy p{font-size:16px;line-height:1.6;max-width:330px}
 .mobile-scene .benefits{padding-bottom:34svh;min-height:160svh}
 .mobile-scene .benefits-copy{padding:0}
 .mobile-scene .benefits h2{font-size:34px}
 .mobile-scene .benefits-intro{font-size:14px;line-height:1.55}
 .mobile-scene .benefit-list{display:grid;grid-template-columns:1fr;gap:0;margin-top:18px}
 .mobile-scene .benefit-list li{padding:10px 0;border:0;border-bottom:1px solid #8ab5df26;border-radius:0;background:none;box-shadow:none;font-size:14px;line-height:1.4;gap:12px}
 .mobile-scene .benefit-list li:nth-child(even){background:none;border-color:#8ab5df26}
 .mobile-scene .benefits-copy::before{background:radial-gradient(ellipse,#040918ef,transparent 75%);inset:-20px -26px;filter:none}
}

/* The three instructions share one reading position and hierarchy. */
.product-story .story-copy b{display:inline-flex;font-size:14px;font-weight:750;line-height:1.5;letter-spacing:.14em;color:#70d6eb;padding:0 0 8px;border-bottom:1px solid #70d6eb66}
.product-story .story-copy h2{font-size:clamp(38px,4.2vw,64px);font-weight:780;line-height:1.08;min-height:2.16em;letter-spacing:-.045em;margin:18px 0;text-wrap:balance}
.product-story .story-copy p:not(.eyebrow){max-width:360px;font-size:clamp(16px,1.5vw,20px);line-height:1.65;margin:0;text-wrap:pretty}
.product-story .story-copy .eyebrow{position:absolute;top:-38px;margin:0;line-height:1.5}
@media(max-width:999px){.product-story .story-copy h2{font-size:clamp(36px,7vw,48px)}.product-story.mobile-scene.scene-ready .chapter.story-copy>div:not(.chapter-visual){top:112px}}

/* Pricing information stays with the plans; one action follows the entire rail. */
.pricing-section{background:radial-gradient(ellipse at 90% 32%,#dbeafa 0,transparent 55%),radial-gradient(ellipse at 8% 70%,#e9e3fa 0,transparent 48%),#f3f6fc!important}
.pricing-section::after{height:100%;pointer-events:none;background:linear-gradient(122deg,transparent 34%,#ffffff70 34.1%,transparent 34.3%),linear-gradient(122deg,transparent 68%,#b3c9ed30 68.1%,transparent 68.3%)}
.pricing-section .pricing-intro{max-width:800px}
.pricing-section .pricing-intro h2{max-width:780px;font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.05em}
.pricing-discounts{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.5fr);align-items:center;gap:24px;margin-top:28px;padding:22px 28px;border:1px solid #45567e;border-radius:18px;background:radial-gradient(ellipse at 100% 0,#27577b80,transparent 65%),radial-gradient(ellipse at 0 100%,#604bb94d,transparent 65%),#101d36;box-shadow:0 12px 30px #172f5412;color:#edf5ff}
.pricing-discounts>strong{max-width:none;font-size:18px;line-height:1.3;letter-spacing:-.02em}
.pricing-discounts ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.pricing-discounts li{display:grid;gap:5px;padding-left:20px;border-left:1px solid #7d9ac94d;font-size:14px;line-height:1.4;color:#d6e4f6}
.pricing-discounts li b{color:#e1d8ff;font-size:32px;line-height:1.1;letter-spacing:-.04em;white-space:nowrap}
.pricing-discounts li b span{font-size:16px;font-weight:650;letter-spacing:0}
.pricing-discounts li:last-child b{color:#8de6ff}
.pricing-section .plan-trial{border-color:#75b8e1;box-shadow:0 10px 24px #287fb416}
.pricing-section .plan-trial .plan-badge{z-index:1;top:-12px;right:16px;padding:4px 11px;border-color:#a8d4ed;background:#eefaff;color:#125d87;font-size:11px;box-shadow:none}
.pricing-section .plan{min-height:155px;background:linear-gradient(150deg,#ffffff,#f9fbffed);border-color:#ccd9eb;box-shadow:0 8px 24px #263d6810,inset 0 1px #fff}
.pricing-section .plan-trial{background:linear-gradient(145deg,#fff,#edfaff);border-color:#75b8e1}
.pricing-section .plan-featured{background:linear-gradient(145deg,#fff,#eeefff 65%,#eaf7ff);border-color:#a09ae3}
.pricing-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px;padding:22px 26px;border:1px solid #ffffff;border-radius:18px;background:#ffffff80;box-shadow:0 8px 24px #263d6806}
.pricing-cta p{max-width:620px;margin:0;font-size:17px;line-height:1.6;color:#263e64}
.pricing-cta .button{flex:none;min-height:44px;padding:12px 22px;text-align:center}
.pricing-cta .button:focus-visible{outline:3px solid #4255b8;outline-offset:4px}
@media(max-width:700px){.pricing-discounts{grid-template-columns:1fr;margin:22px 24px 0;padding:17px 18px;gap:13px}.pricing-discounts>strong{font-size:15px}.pricing-discounts ul{gap:12px}.pricing-discounts li{padding-left:12px;font-size:12px;gap:4px}.pricing-discounts li:first-child{padding-left:0;border-left:0}.pricing-discounts li b{font-size:28px}.pricing-discounts li b span{font-size:12px}.pricing-cta{margin:16px 24px 0;padding:20px;flex-direction:column;align-items:stretch;gap:16px}.pricing-cta p{font-size:15px}.pricing-section .plan{min-height:155px}}
@media(max-width:359px){
 .product-story{--mobile-copy-inset:24px}
 .mobile-scene .chapter{padding-left:24px;padding-right:24px}
 .product-story .hero h1{font-size:46px}
 .product-story .hero .lead{font-size:13px}
 .product-story .hero .quiet{padding:10px 6px}
 .mobile-scene .benefits h2{font-size:30px}
 .mobile-scene .benefits-copy::before{inset:-20px -24px}
 .mobile-scene .benefit-list li{font-size:13px;padding:8px 0}
}