/* v50 — continuous optical light, liquid controls, one tool through three stages. */
.hero{height:108svh;min-height:860px;max-height:1120px}
.hero-content{max-width:1080px;padding-top:clamp(220px,29svh,310px);opacity:var(--hero-fade,1);transform:translateY(var(--hero-lift,0px));will-change:transform,opacity}
.hero h1{font-size:clamp(70px,7.7vw,108px);line-height:1.01;letter-spacing:-.04em;font-weight:700;color:#14171b;text-shadow:0 2px 24px #f1f3f68f}
.hero h1 span{color:inherit}
.hero-content>p{margin-top:29px;font-size:21px;line-height:1.65;color:#243d5b}
.hero-content::before{inset:140px 0 -80px;background:radial-gradient(ellipse,#f1f3f6f7 12%,#f1f3f6bd 40%,#f1f3f600 72%)}
.hero-actions{margin-top:30px;gap:15px}
.hero-actions>.text-link{color:#183f76}
.optical-field{mask-image:linear-gradient(#000 68%,transparent 100%);-webkit-mask-image:linear-gradient(#000 68%,transparent 100%)}
.hero-content>*{animation:studio-arrive 1.4s cubic-bezier(.16,1,.3,1) both}
.hero-content>p{animation-delay:.22s}.hero-actions{animation-delay:.36s}
@keyframes studio-arrive{from{opacity:0;transform:translateY(38px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.motion-controls{bottom:32px}
.studio-section{padding-top:40px;padding-bottom:125px}
.studio-section h2{font-size:clamp(48px,5.7vw,80px)}

/* Transparent bodies, convex edge highlights and a moving specular reflection. */
.btn,.nav .btn,.bespoke-cta.btn-primary,.btn-block{
  position:relative;isolation:isolate;overflow:hidden;border-radius:16px;
  background:linear-gradient(145deg,#ffffff91,#f4f9ff35 45%,#dceaff63);
  border:1px solid #ffffffd9;color:#183654;
  box-shadow:inset 0 1.5px 1px #fff,inset 1.5px 0 1px #ffffffbf,inset -1px -1.5px 2px #527ba64a,0 4px 8px #1d3b6010,0 12px 26px -12px #1d3b6040;
  backdrop-filter:blur(12px) saturate(1.75);-webkit-backdrop-filter:blur(12px) saturate(1.75);
  transition:transform 220ms cubic-bezier(.16,1,.3,1),box-shadow 220ms ease,background-color 220ms ease;
}
.btn::before{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 15%,#fff8 34%,#fff0 55%);transform:translateX(-85%);transition:transform 650ms cubic-bezier(.16,1,.3,1);pointer-events:none}
.btn::after{content:'';position:absolute;inset:2px;border:1px solid #ffffff5c;border-radius:13px;pointer-events:none}
.btn-primary,.btn-block{background:linear-gradient(150deg,#e6f3ffae,#9ac1f456 55%,#d6e8ff87);color:#153f76;border-color:#eaf5ffff;font-weight:600}
.hero-actions .btn{min-height:56px;padding-inline:27px;font-size:16px}
.nav .btn{min-height:42px;padding-inline:18px;border-radius:13px;background:#f4faff4f}
.nav,.nav.scrolled{background:#eef5fd8f;backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);box-shadow:inset 0 1.5px 1px #fffffff2,inset 1px 0 2px #ffffffc7,inset -1px -1px 1.5px #738ca52e,0 12px 35px -18px #183e6550}
.nav-links a{color:#24384e}.nav.over-bespoke{background:#1011148a}
.nav::before{background:linear-gradient(110deg,#ffffff75,#ffffff00 25%,#ffffff0a 75%,#fff7)}
.nav.over-bespoke .btn{color:#eff7ff;background:#c4e1ff24}
.nav.over-bespoke .btn::after{border-color:#ffffff20}
.zepo-icon,.app-glyph.zepo-icon{background:none;border:0;box-shadow:none;border-radius:0}
.zepo-icon img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 16px #24599824)}
.zepo-icon{width:86px;height:86px}
@media(hover:hover) and (pointer:fine){
  .btn:hover,.bespoke-cta.btn-primary:hover{background-color:#e1edfc80;box-shadow:inset 0 1.5px 1px #fff,inset 1px 0 1px #fff,inset -1px -1px 2px #6a8aac4a,0 8px 22px -9px #1b49734d;transform:translateY(-2px)}
  .btn:hover::before{transform:translateX(70%)}
}
.btn:active{transform:translateY(1px) scale(.975)}
@supports not (backdrop-filter:blur(1px)){.btn,.nav .btn{background:#edf4fc}.nav.over-bespoke .btn{background:#324760}}

/* Three stages share their geometry: a specification becomes a working tool. */
.bespoke-shell{padding-top:75px;background:#07080a;border-color:#28292d}
.bespoke-shell::before{display:none}
.bespoke-shell h2{font-size:clamp(42px,5vw,70px);line-height:1.15}
.bespoke-shell>.section-heading{margin-bottom:32px}
.bespoke-stage{height:445px;margin:0 auto 20px;width:min(100%,1120px)}
.build-example{font-size:12px;color:#aabfd5;letter-spacing:.015em;text-align:center;margin-bottom:26px}
.build-scene{height:318px;position:relative;perspective:1300px;direction:ltr;display:flex;align-items:center;justify-content:center}
.builder-window{position:relative;width:410px;flex:none;border:1px dashed #91b6d483;border-radius:18px;background:#1c2b3b38;text-align:right;direction:rtl;transform:rotateY(-9deg) rotateX(6deg);box-shadow:0 24px 65px -30px #030b1799;transition:background 700ms,border 700ms,transform 1100ms cubic-bezier(.16,1,.3,1),box-shadow 700ms;overflow:hidden}
.builder-title{height:57px;display:flex;align-items:center;gap:10px;padding-inline:22px;border-bottom:1px dashed #91b6d43d}
.builder-title strong{font-size:16px;font-weight:500}.builder-state{font-size:11px;color:#adbfce;margin-inline-start:auto}
.builder-light{height:7px;width:7px;background:#7892ab;border-radius:50%;box-shadow:0 2px 6px #0002}
.builder-content{padding:20px 23px 23px;display:grid;gap:16px}
.builder-field>span{display:block;font-size:11px;color:#adbed1;margin-bottom:7px}
.builder-field>div{display:flex;align-items:center;gap:9px;border:1px dashed #7894b563;border-radius:7px;padding:11px 12px;font-size:14px;color:#cad7e7;background:#c6e2ff03;transition:background 700ms,border 700ms}
.builder-field small{margin-inline-start:auto;font-size:10px;color:#a7bcd2}
.builder-check{display:grid;place-items:center;width:16px;height:16px;border:1px solid #7894b5;border-radius:4px;font-size:11px;color:transparent;transition:color 400ms,background 400ms}
.builder-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.builder-format{font-size:12px;color:#acc2dc}.builder-action{display:flex;align-items:center;gap:12px;border:1px dashed #8aa8c1;border-radius:9px;padding:9px 14px;font-size:12px;color:#aec4da;transition:background 700ms,color 700ms}.builder-action .icon{width:16px;height:16px}
.builder-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,#8acaff14 48%,#b3e2ff66 50%,transparent 52%);opacity:0;pointer-events:none}
.builder-progress{height:2px;position:absolute;bottom:0;left:0;right:0;background:#ffffff08;opacity:0}
.builder-progress i{display:block;height:100%;width:100%;background:#9acaff;transform:scaleX(0);transform-origin:left}
.source-sheets,.output-sheets{position:absolute;width:140px;height:188px;top:68px;transition:opacity 600ms,transform 1000ms cubic-bezier(.16,1,.3,1)}
.source-sheets{left:3%;transform:rotate(-9deg);opacity:.48}.output-sheets{right:3%;opacity:0;transform:translateX(-35px) scale(.8)}
.drawing-sheet,.export-sheet{position:absolute;inset:0;border:1px solid #8dafd447;border-radius:5px;background:#24394b;padding:17px;color:#a9c7e8;text-align:left;box-shadow:0 15px 25px -14px #0008;transition:transform 900ms cubic-bezier(.16,1,.3,1),background 700ms}
.drawing-sheet:nth-child(1){transform:translate(-16px,-10px) rotate(-10deg)}.drawing-sheet:nth-child(2){transform:translate(-8px,-5px) rotate(-5deg)}
.drawing-sheet>span{font-size:11px}.sheet-plan{height:108px;margin-top:14px;border:3px double #b7d7f88a;position:relative;background:repeating-linear-gradient(0deg,transparent 0 17px,#9ecbff0d 17px 18px),repeating-linear-gradient(90deg,transparent 0 17px,#9ecbff0d 17px 18px)}
.sheet-plan::before{content:'';position:absolute;inset:0 40% 46% 0;border:2px solid #b7d7f870}.sheet-plan::after{content:'';position:absolute;inset:54% 0 0 48%;border:2px solid #b7d7f870}
.workflow-link{position:absolute;top:51%;height:1px;width:11%;background:#8fbdea2b;opacity:.5;overflow:hidden}.link-in{left:17%}.link-out{right:17%;opacity:0}
.workflow-link i{display:block;height:1px;width:40%;background:linear-gradient(90deg,transparent,#d4ecff,transparent);transform:translateX(-100%)}
.export-sheet{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:#e5eff9;color:#264d78;border-color:#eff8ff;transform:translateX(-10px) rotate(-5deg)}
.export-sheet>.icon{width:38px;height:38px;stroke-width:1.1}.export-sheet>span{font-size:11px}.export-sheet>b{position:absolute;bottom:13px;right:12px;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#245b83;color:#eefaff}.export-sheet>b .icon{width:14px;height:14px}
.build-stage-note{font-size:14px;color:#bed0e2;line-height:1.6;max-width:560px;margin:22px auto 0;min-height:46px;padding-inline:12px}
.bespoke-motion{left:0;bottom:4px}
.bespoke-stage[data-build-stage="1"] .builder-window,.bespoke-stage[data-build-stage="2"] .builder-window{border-style:solid;border-color:#b6dafa6e;background:#2b4157cf;transform:rotateY(0deg) rotateX(0deg);box-shadow:inset 0 1px 0 #e1f0ff42,0 28px 60px -28px #020915}
.bespoke-stage[data-build-stage="1"] .builder-title,.bespoke-stage[data-build-stage="2"] .builder-title{border-bottom-style:solid}
.bespoke-stage[data-build-stage="1"] .builder-field>div,.bespoke-stage[data-build-stage="2"] .builder-field>div{border-style:solid;border-color:#a4d1ff30;background:#d4e7ff0b}
.bespoke-stage[data-build-stage="1"] .builder-scan{opacity:1}
.bespoke-stage[data-build-stage="1"] .builder-action,.bespoke-stage[data-build-stage="2"] .builder-action{border-style:solid;background:#b3d9ff;color:#163d62;border-color:#e3f3ff}
.bespoke-stage[data-build-stage="1"] .builder-progress,.bespoke-stage[data-build-stage="2"] .builder-progress{opacity:1}
.bespoke-stage[data-build-stage="1"] .source-sheets,.bespoke-stage[data-build-stage="2"] .source-sheets{opacity:1;transform:rotate(-4deg)}
.bespoke-stage[data-build-stage="2"] .builder-check{background:#a9d3ff;color:#163d62;border-color:#cbe4ff}
.bespoke-stage[data-build-stage="2"] .builder-light{background:#b2e3d7}
.bespoke-stage[data-build-stage="2"] .builder-progress i{transform:scaleX(1)}
.bespoke-stage[data-build-stage="2"] .output-sheets{opacity:1;transform:translateX(0) scale(1)}
.bespoke-stage[data-build-stage="2"] .export-sheet:nth-child(1){transform:translate(20px,-10px) rotate(13deg)}
.bespoke-stage[data-build-stage="2"] .export-sheet:nth-child(2){transform:translate(10px,-5px) rotate(6deg)}
.bespoke-stage[data-build-stage="2"] .export-sheet:nth-child(3){transform:translate(0) rotate(0)}
.bespoke-stage[data-build-stage="2"] .link-out{opacity:1}
.bespoke-stage.is-active .workflow-link i{animation:workflow-travel 2.7s linear infinite}
.bespoke-stage.is-active[data-build-stage="1"] .builder-scan{animation:build-scan 2.8s ease-in-out infinite}
.bespoke-stage.is-active[data-build-stage="1"] .builder-progress i{animation:build-progress 5.5s cubic-bezier(.16,1,.3,1) both}
@keyframes workflow-travel{to{transform:translateX(350%)}}
@keyframes build-scan{from{transform:translateY(-80%)}to{transform:translateY(80%)}}
@keyframes build-progress{to{transform:scaleX(.87)}}
.bespoke-cta.btn-primary{background:linear-gradient(135deg,#d7eaff5c,#b1d5ff20);color:#f0f7ff;border-color:#d1e9ff82}
.bespoke-cta.btn-primary:hover{color:#fff;background-color:#476789}
.app-card-status{color:#53637c}
.builder-check .icon{width:12px;height:12px;stroke-width:2}
.hero.replaying .hero-content>*{animation:none}
.is-paused .bespoke-stage *{animation-play-state:paused!important;transition:none!important}
.bespoke-stage:not(.is-active) *{animation-play-state:paused!important}
@media(max-width:1000px){.source-sheets{left:0}.output-sheets{right:0}.source-sheets,.output-sheets{width:105px;height:151px;top:85px}.sheet-plan{height:75px}.builder-window{width:370px}.workflow-link{width:9%}.link-in{left:14%}.link-out{right:14%}}
@media(max-width:840px){
  .hero-content{padding-top:240px}.hero h1{font-size:76px}.hero-content::before{inset:180px -30px -80px}
  .hero-content>p{font-size:19px}.hero{min-height:820px}
  .source-sheets,.output-sheets{width:83px;height:127px;top:96px}.drawing-sheet,.export-sheet{padding:10px}.sheet-plan{height:70px;margin-top:10px}.builder-window{width:330px}.builder-title{padding-inline:17px}.builder-content{padding:17px}.workflow-link{display:none}
  .bespoke-shell h2{font-size:50px}
}
@media(max-width:600px){
  .hero{min-height:780px;height:100svh}.hero-content{padding:205px 18px 0}.hero h1{font-size:clamp(44px,11.7vw,68px);line-height:1.05;letter-spacing:-.035em}
  .hero-content>p{font-size:17px;max-width:32ch;line-height:1.65;margin-top:25px}.hero-content::before{inset:170px -45px -65px}
  .hero-actions{margin-top:26px}.hero-actions .btn{min-height:54px;font-size:15px;padding-inline:22px}.hero-actions>.text-link{font-size:14px}.motion-controls{bottom:28px}
  .zepo-icon{width:62px;height:62px}.studio-section{padding-top:10px;padding-bottom:75px}.studio-section h2{font-size:46px}
  .bespoke-shell{padding-top:48px}.bespoke-shell h2{font-size:clamp(33px,8.7vw,46px)}
  .bespoke-stage{width:100%;margin:0 auto 15px;height:478px}.build-example{font-size:11px;margin-bottom:20px}
  .build-scene{height:355px;align-items:flex-start;padding-top:8px}.builder-window{width:min(100%,360px);transform:rotateY(-4deg) rotateX(4deg)}
  .builder-title{height:45px;padding-inline:16px}.builder-title strong{font-size:14px}.builder-state{font-size:10px}.builder-content{gap:13px;padding:15px}.builder-field>div{font-size:12px;padding:10px}.builder-field>span{font-size:10px}.builder-action{font-size:11px;padding:8px 10px}
  .source-sheets{display:none}.output-sheets{top:291px;right:calc(50% - 77px);height:48px;width:154px;transform:translateY(-18px) scale(.9)}
  .export-sheet{padding:8px 11px;gap:8px;flex-direction:row;border-radius:7px}.export-sheet>.icon{width:21px;height:25px}.export-sheet>span{font-size:10px}.export-sheet>b{position:static;width:19px;height:19px}
  .bespoke-stage[data-build-stage="2"] .export-sheet:nth-child(1){transform:translate(10px,-12px) rotate(6deg)}.bespoke-stage[data-build-stage="2"] .export-sheet:nth-child(2){transform:translate(5px,-6px) rotate(3deg)}
  .build-stage-note{font-size:12px;max-width:32ch;margin-top:10px;min-height:60px;padding:0}.bespoke-motion{left:0;bottom:0;width:35px;height:35px}
  .process-options{gap:8px}.process-options button{font-size:12px;min-height:70px;padding-top:17px}#buildCaption{font-size:14px;min-height:70px}
}
@media(prefers-reduced-motion:reduce){
  .hero-content{opacity:1;transform:none}.hero-content>*{animation:none}.bespoke-stage *{animation:none!important;transition:none!important}
  .bespoke-stage[data-build-stage="1"] .builder-progress i{transform:scaleX(.65)}.builder-scan{display:none}
}

/* v53 custom route: separated fragments, checkpoints, then one continuous path. */
.bespoke-stage{height:445px;width:min(100%,1120px);margin:0 auto 20px}
.abstract-build{display:block;width:100%;height:100%}
.abstract-fallback{position:absolute;inset:20% 8%;pointer-events:none;display:flex;align-items:center;gap:5%}
.abstract-fallback i{position:relative;display:block;width:30%;height:18px;border-radius:100px;background:linear-gradient(90deg,#23548e,#75b8f2,#d3edff);box-shadow:0 0 24px #337bd088;transform:translateY(-34px) rotate(15deg)}
.abstract-fallback i:nth-child(2){transform:translateY(38px) rotate(-13deg)}
.abstract-fallback i:nth-child(3){transform:translateY(-28px) rotate(12deg)}
.abstract-build[data-rendered]~.abstract-fallback{display:none}
.bespoke-stage[data-build-stage="0"] .abstract-fallback i{opacity:.38}
.bespoke-stage[data-build-stage="1"] .abstract-fallback i{opacity:.78}
.bespoke-motion{bottom:12px;left:0}
@media(max-width:840px){.bespoke-stage{height:365px;margin-top:10px}}
@media(max-width:600px){.bespoke-stage{width:calc(100% + 36px);margin-inline:-18px;height:300px;margin-top:0;margin-bottom:15px}.bespoke-motion{left:18px;bottom:15px}.abstract-fallback{inset:20% 8%}}