/* ZARVIQO Experience — immersive, progressively enhanced landing motion. */
.site-progress{position:fixed;inset:0 auto auto 0;height:3px;width:100%;z-index:110;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#76e9a5,#d5f596,#9ac9ff);box-shadow:0 0 12px #8cfdad99;pointer-events:none}
.story-section{position:relative;isolation:isolate;overflow:clip;padding:110px max(24px,calc((100vw - 1240px)/2)) 80px;background:#061c17;color:#eafff0}
.story-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 65% 35% at 5% 22%,#1d6b463b,transparent),radial-gradient(ellipse 55% 35% at 94% 77%,#1e667640,transparent),linear-gradient(180deg,#071d18,#0b2c22 47%,#061c17)}
.story-heading{max-width:830px;margin:0 auto 55px;text-align:center}
.story-heading .kicker{color:#a9e6b4;font-size:11px;letter-spacing:.18em}
.story-heading h2{margin:20px auto;font-size:clamp(38px,5vw,76px);line-height:1.06;letter-spacing:-.055em}
.story-heading h2 em,.story-step h3 em{font-style:normal;background:linear-gradient(100deg,#f4ffca,#b8e997 50%,#6dcda7);-webkit-background-clip:text;background-clip:text;color:transparent}
.story-heading p{max-width:620px;margin:auto;color:#bbd2c5;font-size:16px;line-height:1.8}
.story-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,95px);align-items:start;max-width:1240px;margin:0 auto}
.story-visual{position:sticky;top:clamp(65px,12vh,135px);height:min(65vh,600px);min-height:420px;max-height:620px;overflow:hidden;border:1px solid #c3f0d233;border-radius:28px;background:radial-gradient(ellipse at 45% 42%,#175443 0%,#0c3329 35%,#061b17 85%);box-shadow:inset 0 0 110px #0006,0 40px 90px #0005;perspective:1100px;transform-style:preserve-3d}
.story-visual-grid{position:absolute;inset:-25%;background-image:linear-gradient(#9fd4b112 1px,transparent 1px),linear-gradient(90deg,#9fd4b112 1px,transparent 1px);background-size:46px 46px;transform:rotateX(58deg) translateY(13%);transform-origin:center;mask-image:radial-gradient(ellipse,#0004,transparent 73%);pointer-events:none}
.story-halo{position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle,#83ebaa26,transparent 68%);filter:blur(35px);pointer-events:none}
.story-visual-top,.story-visual-footer{position:absolute;left:23px;right:23px;z-index:8;display:flex;align-items:center;gap:9px;color:#c9f7d9;font:700 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.09em}
.story-visual-top{top:24px}
.story-visual-footer{bottom:24px;justify-content:space-between;font-size:9px;color:#9ac2ac}
.story-indicator{width:7px;height:7px;border-radius:50%;background:#b9f39b;box-shadow:0 0 12px #a5ffa5}
.story-index{margin-left:auto;color:#a1bdac}
.story-scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translate3d(0,32px,-100px) scale(.87) rotateY(-9deg);transition:opacity .65s ease,transform .8s cubic-bezier(.16,1,.3,1),visibility .65s;pointer-events:none}
.story-scene.is-current{opacity:1;visibility:visible;transform:translate3d(0,0,0) scale(1) rotateY(0)}
.story-document{position:relative;width:min(64%,285px);min-height:310px;padding:25px 24px;border-radius:13px;background:linear-gradient(140deg,#f4fff5,#cfead9);color:#163f30;box-shadow:24px 30px 70px #0008,0 0 0 1px #fff8;transform:rotate(-7deg) rotateY(13deg) rotateX(6deg);transition:transform .8s ease}
.story-scene.is-current .story-document{transform:rotate(-4deg) rotateY(7deg) rotateX(4deg)}
.story-doc-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:25px;font:800 10px/1.4 ui-monospace,monospace;letter-spacing:.08em}
.story-doc-line{height:6px;width:55%;border-radius:9px;margin:9px 0;background:#8eb2a2}
.story-doc-line.wide{width:80%}
.story-doc-line.medium{width:65%;margin-bottom:24px}
.story-doc-item{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #a4c6b5;padding:14px 0;font:700 10px/1.4 ui-monospace,monospace}
.story-doc-item strong{font-size:13px;white-space:nowrap}
.story-doc-bottom{margin-top:15px;font:700 9px ui-monospace,monospace;color:#40765d;letter-spacing:.1em}
.story-floating-chip{position:absolute;z-index:4;max-width:48%;padding:13px 15px;border:1px solid #b9f8c878;border-radius:12px;background:#0c392ed9;box-shadow:0 14px 35px #0005;color:#dcffe4;font:800 10px/1.4 ui-monospace,monospace;letter-spacing:.035em;backdrop-filter:blur(10px)}
.story-chip-a{right:5%;top:25%;transform:rotate(5deg)}
.story-chip-b{left:4%;bottom:24%;transform:rotate(-5deg)}
.story-orbit{position:absolute;top:50%;left:50%;border:1px solid #a9f2bd80;border-radius:50%;box-shadow:0 0 25px #a1efba30,inset 0 0 28px #a1efba20;transform:translate(-50%,-50%) rotateX(64deg) rotateZ(24deg)}
.story-orbit-outer{width:74%;aspect-ratio:1}
.story-orbit-inner{width:58%;aspect-ratio:1;border-color:#8ac8e5aa;transform:translate(-50%,-50%) rotateY(63deg) rotateZ(15deg)}
.story-center-node{display:flex;align-items:center;justify-content:center;width:125px;height:125px;border-radius:50%;border:1px solid #b6ffbe8f;background:radial-gradient(circle at 30% 20%,#c4ffbf,#479f74 33%,#164e3a 72%,#0c281e);box-shadow:inset -20px -25px 40px #001c17,0 0 65px #6ce6a759;color:#e9ffdc;font:800 72px Manrope,system-ui,sans-serif;letter-spacing:-.1em;transform:rotate(-10deg)}
.story-center-node span{font-size:24px;align-self:flex-start;margin-top:18px;color:#d2ffaf}
.story-price-node{position:absolute;z-index:3;display:flex;flex-direction:column;gap:8px;padding:16px 18px;border:1px solid #b0eac27a;border-radius:13px;background:#09271fe8;box-shadow:0 18px 35px #0005;transform:rotate(-4deg)}
.story-price-node small{font:800 9px ui-monospace,monospace;color:#a5cdb4;letter-spacing:.07em}
.story-price-node strong{font:800 18px Manrope,system-ui,sans-serif;color:#e8ffdf}
.story-node-a{top:22%;left:5%}
.story-node-b{bottom:22%;right:5%;transform:rotate(5deg);border-color:#9ac7f1a1}
.story-connection-line{position:absolute;width:55%;height:1px;background:linear-gradient(90deg,transparent,#d1f8d4,transparent);transform:rotate(-30deg)}
.story-dashboard{position:relative;width:min(77%,360px);padding:24px;border:1px solid #b6e9c35e;border-radius:18px;background:linear-gradient(145deg,#154b39ed,#071e19f5);box-shadow:22px 30px 75px #0008, inset 0 1px #ffffff20;transform:rotateY(-9deg) rotateX(5deg)}
.story-dash-heading{display:flex;justify-content:space-between;color:#c0efcc;font:800 10px ui-monospace,monospace;letter-spacing:.08em}
.story-dash-heading span:last-child{font-size:19px}
.story-dash-value{margin-top:28px;font:800 clamp(32px,4vw,51px)/1 Manrope,system-ui,sans-serif;color:#d7ffa8;letter-spacing:-.04em}
.story-dash-sub{margin-top:9px;color:#c7decf;font-size:12px}
.story-bars{height:105px;display:flex;align-items:end;gap:9px;margin-top:24px;border-bottom:1px solid #ffffff26}
.story-bars span{flex:1;height:var(--bar);border-radius:5px 5px 0 0;background:linear-gradient(180deg,#b9f5a4,#2d8e66);box-shadow:0 0 13px #82eb9b24;transform-origin:bottom}
.story-dash-foot{margin-top:15px;color:#a6c3b2;font:700 8px/1.6 ui-monospace,monospace}
.story-chip-c{bottom:18%;right:1%;transform:rotate(4deg)}
.story-steps{min-width:0}
.story-step{min-height:74vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:22px;padding:70px 8px 70px 0;opacity:.53;transform:translateX(12px);transition:opacity .5s ease,transform .6s ease}
.story-step.is-current{opacity:1;transform:translateX(0)}
.story-step-number{color:#a8e6b3;font:800 12px ui-monospace,monospace;letter-spacing:.15em}
.story-step h3{margin:0;font-size:clamp(38px,4vw,62px);line-height:1.06;letter-spacing:-.045em}
.story-step p{max-width:490px;margin:0;color:#c4d9cd;font-size:17px;line-height:1.8}
.story-step>a{display:inline-flex;align-items:center;min-height:46px;padding:10px 0;color:#c9f8b3;font-size:14px;font-weight:800;text-underline-offset:6px}
.story-step>a:hover{color:white}
.story-bottom{max-width:1240px;display:flex;align-items:center;gap:20px;margin:20px auto 0;color:#a8cfb6;font:800 10px ui-monospace,monospace}
.story-progress-rail{flex:1;height:2px;background:#ffffff26;overflow:hidden}
.story-progress-fill{height:100%;background:#bce98f;transform-origin:left;transform:scaleX(var(--journey-progress,0))}
.motion-enabled .fx-pending{opacity:0;transform:translate3d(0,35px,0);filter:blur(6px)}
.motion-enabled .fx-visible{opacity:1;transform:translate3d(0,0,0);filter:blur(0);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease;transition-delay:var(--fx-delay,0ms)}
.fx-tilt{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease,box-shadow .25s ease;will-change:auto}
.fx-tilt:hover{box-shadow:0 22px 45px #0d37251f,0 0 0 1px #7db9965c}
.tool-grid>a.fx-tilt:hover{background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),#e5f9eb,#fff 75%)}
.problem-grid>article.fx-tilt:hover{background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),#edf9ee,#fff 75%)}
.story-section a:focus-visible,.story-step a:focus-visible{outline:3px solid #c9f69d;outline-offset:6px}
@media(max-width:950px){
  .story-section{padding:80px 24px 65px}
  .story-layout{gap:26px}
  .story-visual{top:90px;min-height:370px;height:470px}
  .story-step{min-height:62vh;padding:45px 0}
  .story-step h3{font-size:clamp(32px,4.3vw,47px)}
  .story-step p{font-size:15px}
  .story-floating-chip{font-size:8px;padding:10px}
}
@media(max-width:720px){
  .story-section{padding:72px 18px 58px}
  .story-heading{margin-bottom:28px}
  .story-heading h2{font-size:clamp(36px,8vw,52px)}
  .story-heading p{font-size:14px}
  .story-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .story-visual{position:sticky;top:0;z-index:2;height:43vh;min-height:295px;max-height:390px;border-radius:18px}
  .story-steps{position:relative;z-index:1}
  .story-step{min-height:55vh;padding:60px 6px 50px;opacity:.65;gap:14px}
  .story-step h3{font-size:clamp(36px,8vw,48px)}
  .story-step p{font-size:14px;line-height:1.7}
  .story-visual-top{top:14px;left:15px;right:15px;font-size:8px}
  .story-visual-footer{bottom:12px;left:15px;right:15px;font-size:8px}
  .story-document{min-height:240px;padding:18px;width:min(58%,220px)}
  .story-doc-top{margin-bottom:12px}
  .story-doc-line.medium{margin-bottom:10px}
  .story-doc-item{padding:9px 0}
  .story-doc-bottom{margin-top:5px}
  .story-center-node{width:90px;height:90px;font-size:55px}
  .story-price-node{padding:10px}
  .story-price-node strong{font-size:13px}
  .story-dashboard{padding:17px}
  .story-dash-value{margin-top:14px;font-size:34px}
  .story-bars{height:62px;margin-top:12px}
  .story-floating-chip{font-size:7px;padding:7px}
  .story-chip-a{right:2%;top:29%}
  .story-chip-b{left:2%;bottom:21%}
}
@media(prefers-reduced-motion:reduce){
  .site-progress{display:none}
  .story-scene,.story-step,.fx-tilt,.motion-enabled .fx-pending,.motion-enabled .fx-visible{transition:none!important;transform:none!important;filter:none!important}
  .story-scene:not(.is-current){display:none}
  .story-step{opacity:1}
}

/* Preserve pointer-driven tilt after scroll reveal has completed. */
.motion-enabled .fx-visible.fx-tilt{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
@media(prefers-reduced-motion:reduce){.motion-enabled .fx-visible.fx-tilt{transform:none!important}}

/* Coherent premium finish beyond the opening hero: restrained depth, not distracting motion. */
.tool-launcher{position:relative}
.tool-launcher::before{content:"";position:absolute;z-index:-1;inset:0 -15vw auto;height:100%;background:radial-gradient(ellipse at 50% 0%,#dff4e4,transparent 68%);pointer-events:none}
.tool-grid>a{position:relative;isolation:isolate;overflow:hidden;border-color:#bdd5c6;box-shadow:0 8px 25px #0b392014;transition:border-color .25s ease,box-shadow .25s ease}
.tool-grid>a::after{content:"";position:absolute;top:-70%;left:-100%;width:70%;height:240%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,#ffffffa0,transparent);pointer-events:none;transition:left .8s ease}
.tool-grid>a:hover::after{left:160%}
.calculator{position:relative;background:radial-gradient(ellipse at 90% 10%,#dff4e3,transparent 55%),#f7f9f4}
.calculator-form{box-shadow:0 18px 60px #12392212}
.calculator-result{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#0b3024,#123f2f 68%,#082219);box-shadow:0 25px 60px #07261d2a}
.calculator-result::before{content:"";position:absolute;z-index:-1;inset:-80% -70% auto auto;width:110%;aspect-ratio:1;border:1px solid #c0f6c326;border-radius:50%;box-shadow:0 0 0 75px #b4f1b409,0 0 0 160px #b4f1b405;pointer-events:none}
.demo-section{background:linear-gradient(180deg,#f6f8f3,#edf4ec)}
.sample-report{box-shadow:0 26px 70px #0b32241a;border-color:#bdd5c4}
.report-steps>div{background:#ffffffbb;backdrop-filter:blur(6px);border-color:#c5d9c9}
.problem{position:relative;background:radial-gradient(ellipse at 8% 85%,#e5f3e5,transparent 55%)}
.problem-grid>article{border-radius:17px;box-shadow:0 12px 30px #0a3c2610;transition:box-shadow .3s ease}
.steps{background:linear-gradient(180deg,#f8f9f5,#eef4ec)}
.steps-grid>li{position:relative;overflow:hidden}
.steps-grid>li::after{content:"";position:absolute;inset:auto 10% 0;height:1px;background:linear-gradient(90deg,transparent,#83c19c,transparent)}
.pilot{position:relative;isolation:isolate;overflow:hidden}
.pilot::after{content:"";position:absolute;z-index:-1;width:440px;height:440px;right:-160px;top:-180px;border-radius:50%;border:1px solid #ffffff35;box-shadow:0 0 0 70px #ffffff0b,0 0 0 140px #ffffff08;pointer-events:none}
.request{background:radial-gradient(ellipse at 100% 0%,#e4f2e6,transparent 65%)}
.faq-list details{transition:border-color .25s ease,background .25s ease}
.faq-list details[open]{background:#eef7ee;border-color:#9ac9a8}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .tool-grid>a:hover{border-color:#65a47d;box-shadow:0 22px 50px #0a3b2529}
  .story-scene.is-current .story-orbit-outer{animation:story-orbit-spin 24s linear infinite}
  .story-scene.is-current .story-orbit-inner{animation:story-orbit-spin-alt 31s linear infinite}
  .story-scene.is-current .story-center-node{animation:story-node-breathe 5s ease-in-out infinite}
}
@keyframes story-orbit-spin{from{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(24deg)}to{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(384deg)}}
@keyframes story-orbit-spin-alt{from{transform:translate(-50%,-50%) rotateY(63deg) rotateZ(15deg)}to{transform:translate(-50%,-50%) rotateY(63deg) rotateZ(-345deg)}}
@keyframes story-node-breathe{0%,100%{box-shadow:inset -20px -25px 40px #001c17,0 0 45px #6ce6a740}50%{box-shadow:inset -20px -25px 40px #001c17,0 0 85px #6ce6a77a}}