.onepage .hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 55% 45% at 86% 5%,#f5e9c8 0%,transparent 75%),radial-gradient(ellipse 55% 45% at 5% 80%,#eeefeb 0%,transparent 80%),#fafafa}
.onepage .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;background-image:linear-gradient(#a88a4220 1px,transparent 1px),linear-gradient(90deg,#a88a4220 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 85%,transparent)}
.onepage .hero h1{animation:flow-rise .85s cubic-bezier(.2,.8,.2,1) both}
.onepage .hero h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;letter-spacing:-.06em;color:#8a661f}
.onepage .hero-copy{animation:flow-rise .85s .12s cubic-bezier(.2,.8,.2,1) both}
.onepage .product-frame{box-shadow:0 25px 65px #332d1f1c,0 4px 12px #332d1f10;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.onepage .product-frame:hover{transform:translateY(-4px);box-shadow:0 30px 75px #332d1f26,0 6px 16px #332d1f12}
.onepage .flow-story{position:relative;overflow:hidden;background:#171916;color:#f6f4eb;padding:110px 0 120px}
.onepage #demo{scroll-margin-top:84px}
.onepage .flow-story::before{display:block;content:"";position:absolute;width:660px;height:660px;right:-220px;top:-300px;border:1px solid #d8b6582c;border-radius:50%;box-shadow:0 0 0 90px #d8b65809,0 0 0 180px #d8b65806;pointer-events:none}
.flow-story .flow-intro{max-width:780px;margin-bottom:56px;position:relative;z-index:1}
.flow-story .flow-intro .eyebrow{color:#d5af58}
.flow-story .flow-intro h2{font-size:clamp(38px,4.5vw,62px);line-height:1.08;letter-spacing:-.055em;margin:14px 0 22px;color:#fff}
.flow-story .flow-intro p{font-size:18px;line-height:1.65;color:#b9c0b8;max-width:690px;margin:0}
.flow-story .flow-grid{display:grid;grid-template-columns:minmax(300px,.83fr) minmax(0,1.17fr);gap:clamp(36px,6vw,90px);align-items:start}
.flow-story .flow-steps{display:grid;gap:18px;position:relative}
.flow-story .flow-steps::before{content:"";position:absolute;left:24px;top:25px;bottom:25px;width:1px;background:linear-gradient(#d5af58,#d5af5830);pointer-events:none}
.flow-story .flow-step{appearance:none;text-align:left;width:100%;padding:28px 28px 28px 73px;min-height:205px;position:relative;border:1px solid #ffffff14;border-radius:18px;color:#f4f4ee;background:#ffffff05;cursor:pointer;transition:background .35s,border-color .35s,transform .35s,box-shadow .35s}
.flow-story .flow-step:hover,.flow-story .flow-step.is-active{background:#ffffff0d;border-color:#d5af5865;transform:translateX(6px);box-shadow:0 20px 50px #0002}
.flow-story .flow-step:focus-visible{outline:2px solid #e4c478;outline-offset:3px}
.flow-story .flow-step-number{display:grid;place-items:center;position:absolute;left:10px;top:30px;width:30px;height:30px;background:#282b24;border:1px solid #c7a557;border-radius:50%;font:600 12px/1 system-ui;z-index:1}
.flow-story .flow-step.is-active .flow-step-number{background:#d5af58;color:#141710;box-shadow:0 0 0 7px #d5af5822}
.flow-story .flow-step-label{display:block;color:#d9b86e;text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:700;margin-bottom:12px}
.flow-story .flow-step strong{display:block;font-size:25px;line-height:1.18;letter-spacing:-.035em;margin-bottom:12px}
.flow-story .flow-step-description{display:block;color:#aeb7af;font-size:15px;line-height:1.55;max-width:420px}
.flow-story .flow-display{position:sticky;top:100px;min-height:640px;background:radial-gradient(circle at 70% 5%,#d5af581a,transparent 50%),#20231e;border:1px solid #d3ba793d;border-radius:24px;overflow:hidden;box-shadow:0 40px 90px #0005}
.flow-story .flow-display-top{height:54px;border-bottom:1px solid #ffffff13;display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#bec4b9;font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.flow-story .flow-display-top span:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#caaa61;box-shadow:0 0 0 4px #caaa6125;margin-right:10px}
.flow-story .flow-scene{position:absolute;inset:54px 0 0;padding:35px;opacity:0;transform:translateY(22px) scale(.985);pointer-events:none;transition:opacity .55s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
.flow-story .flow-scene.is-active{opacity:1;transform:none;pointer-events:auto}
.flow-story .flow-scene-kicker{color:#d7bb75;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
.flow-story .flow-scene h3{color:#fff;font-size:32px;line-height:1.16;margin:12px 0 8px;letter-spacing:-.04em}
.flow-story .flow-scene>p{margin:0;color:#aeb7af;font-size:14px;line-height:1.55;max-width:470px}
.flow-story .flow-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;position:relative;margin-top:45px}
.flow-story .flow-path::before{content:"";position:absolute;top:42px;left:14%;right:14%;height:1px;background:linear-gradient(90deg,#d2ad62,#d2ad6260);z-index:0}
.flow-story .flow-node{position:relative;z-index:1;min-height:154px;padding:21px 16px;background:#2c3029;border:1px solid #ffffff1e;border-radius:14px;box-shadow:0 12px 35px #0002;transition:transform .4s,border-color .4s}
.flow-story .is-active .flow-node:nth-child(2){transition-delay:.13s}
.flow-story .is-active .flow-node:nth-child(3){transition-delay:.26s}
.flow-story .is-active .flow-node{border-color:#d2ad6255}
.flow-story .flow-node-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#d5af581b;color:#dfbf70;font-size:18px;margin-bottom:18px}
.flow-story .flow-node strong{display:block;font-size:14px;line-height:1.25;color:#f5f3e9}
.flow-story .flow-node small{display:block;font-size:11px;color:#aeb7af;margin-top:7px;line-height:1.35}
.flow-story .flow-detail{display:flex;gap:12px;align-items:center;margin-top:28px;border:1px solid #ffffff1c;background:#1316128c;border-radius:12px;padding:17px 19px;color:#c6cbbf;font-size:13px;line-height:1.5}
.flow-story .flow-detail::before{content:"✓";flex:none;display:grid;place-items:center;color:#1e241b;background:#d5af58;width:23px;height:23px;border-radius:50%;font-weight:700}
.flow-story .flow-caption{font-size:12px;color:#899186;margin:28px 0 0}
.flow-story .flow-footer{border-top:1px solid #ffffff1b;margin-top:62px;padding-top:30px;display:flex;justify-content:space-between;gap:20px;align-items:center;color:#bfc5bb;font-size:13px}
.flow-story .flow-footer a{color:#e7c87d;text-decoration:none;font-weight:700}
.flow-story .flow-footer a:hover{text-decoration:underline}
@keyframes flow-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(max-width:800px){.onepage .flow-story{padding:76px 0 84px}.flow-story .flow-intro{margin-bottom:33px}.flow-story .flow-intro h2{font-size:clamp(34px,7vw,47px)}.flow-story .flow-intro p{font-size:16px}.flow-story .flow-grid{display:block}.flow-story .flow-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}.flow-story .flow-steps::before{display:none}.flow-story .flow-step{min-height:0;padding:15px;border-radius:11px;transform:none!important}.flow-story .flow-step-number,.flow-story .flow-step-description{display:none}.flow-story .flow-step-label{font-size:9px;margin-bottom:6px}.flow-story .flow-step strong{font-size:14px;margin:0}.flow-story .flow-display{position:relative;top:auto;min-height:550px}.flow-story .flow-scene{padding:26px}.flow-story .flow-footer{margin-top:36px}}
@media(max-width:560px){.flow-story .flow-steps{grid-template-columns:1fr;gap:7px}.flow-story .flow-step{display:flex;align-items:center;gap:12px;padding:12px 15px}.flow-story .flow-step-label{margin:0;min-width:65px}.flow-story .flow-step strong{font-size:15px}.flow-story .flow-display{min-height:680px;border-radius:16px}.flow-story .flow-scene{padding:22px}.flow-story .flow-scene h3{font-size:27px}.flow-story .flow-path{grid-template-columns:1fr;gap:10px;margin-top:28px}.flow-story .flow-path::before{top:10%;bottom:10%;height:auto;width:1px;left:20px;right:auto}.flow-story .flow-node{min-height:0;padding:12px 14px 12px 58px}.flow-story .flow-node-icon{position:absolute;left:10px;top:12px;width:34px;height:34px;margin:0;font-size:15px}.flow-story .flow-node small{margin-top:2px}.flow-story .flow-detail{font-size:12px;padding:13px;margin-top:18px}.flow-story .flow-caption{margin-top:18px}.flow-story .flow-footer{align-items:flex-start;flex-direction:column}.onepage .hero::after{background-size:48px 48px}}
@media(prefers-reduced-motion:reduce){.onepage .hero h1,.onepage .hero-copy{animation:none}.onepage .product-frame,.flow-story .flow-step,.flow-story .flow-scene,.flow-story .flow-node{transition:none}}