/* v5 Web page: a site that builds itself as you scroll. Black and gold lead, web blue accents. */
html,body{overflow-x:clip}
.v5web main>section{padding:0}
.v5web main>section.wb,.v5web main>section.wp{padding:110px 0}
.v5web main>section.bz{padding:96px 0}
/* hero */
.wh{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:radial-gradient(60% 60% at 75% 30%,rgba(62,124,177,.16),transparent 70%),radial-gradient(40% 40% at 10% 90%,rgba(201,162,39,.12),transparent 70%)}
.wh-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(111,163,210,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(111,163,210,.09) 1px,transparent 1px),linear-gradient(rgba(111,163,210,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(111,163,210,.05) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;mask-image:radial-gradient(80% 70% at 60% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(80% 70% at 60% 40%,#000 30%,transparent 80%)}
.wh-in{position:relative;padding-top:50px;padding-bottom:80px}
.wh-h{font-size:clamp(42px,8.4vw,108px);font-weight:900;line-height:.98;letter-spacing:-.035em;margin:20px 0 28px;max-width:13ch}
.wh-h em{display:block}
.wh-cue{margin-top:46px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--m);display:flex;align-items:center;gap:12px}
.cur{width:2px;height:22px;background:#6FA3D2;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
/* build scene */
.bd{position:relative;background:linear-gradient(#0B0B0B,#0e0d0c 50%,#0B0B0B)}
.bd-stage{max-width:1240px;margin:0 auto;padding:60px 20px;display:grid;grid-template-columns:300px 1fr;gap:50px;align-items:center;position:relative}
.bd-steps{list-style:none;display:flex;flex-direction:column;gap:6px}
.bd-steps li{display:flex;gap:14px;padding:12px 14px;border-radius:12px;border:1px solid transparent;opacity:.4;transition:opacity .4s,border-color .4s,background .4s}
.bd-steps li b{font-size:12px;letter-spacing:.2em;color:#6FA3D2;padding-top:4px}
.bd-steps h3{font-size:17px;margin:0 0 2px}
.bd-steps p{font-size:13.5px;color:var(--m);line-height:1.45;display:none}
.bd-steps li.on{opacity:1;border-color:rgba(201,162,39,.5);background:rgba(201,162,39,.05)}
.bd-steps li.on p{display:block}
.bd-scene{position:relative}
.dev{position:relative;transform-origin:30% 50%;transition:transform 1s cubic-bezier(.7,0,.2,1)}
.br{container-type:inline-size;border-radius:14px;overflow:hidden;background:#1b1a18;border:1px solid #2e2b26;box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02)}
.br-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#141311;border-bottom:1px solid #26231f}
.br-bar>i{width:10px;height:10px;border-radius:50%;background:#3a3631}
.br-url{flex:1;margin:0 10px;height:22px;border-radius:6px;background:#0c0b0a;color:#8a857c;font-size:12px;display:flex;align-items:center;gap:6px;padding:0 10px;overflow:hidden;white-space:nowrap}
.lock{width:9px;height:8px;border-radius:2px;background:#6FA3D2;position:relative;opacity:0;transition:opacity .5s;margin-top:3px}
.lock:before{content:"";position:absolute;left:1.5px;top:-5px;width:4px;height:5px;border:1.5px solid #6FA3D2;border-bottom:0;border-radius:3px 3px 0 0}
.br-live{font-size:10px;font-weight:900;letter-spacing:.2em;color:#111;background:var(--g);border-radius:99px;padding:3px 9px;opacity:0;transform:scale(.6);transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.br-view{position:relative;aspect-ratio:16/10;background:#d4d3cf;overflow:hidden}
.gridlines{position:absolute;inset:0 4cqw;z-index:3;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(62,124,177,.22) 0 calc((100% - 11*2cqw)/12),transparent 0 calc((100% - 11*2cqw)/12 + 2cqw));opacity:0;transition:opacity .5s}
/* mini site */
.ms{position:absolute;inset:0;padding:3.2cqw 4cqw;display:flex;flex-direction:column;gap:3.2cqw;font-family:Lato,system-ui,sans-serif}
.ms>*{position:relative;z-index:1}
.ms-paint{position:absolute!important;inset:0;z-index:0!important;background:radial-gradient(55% 70% at 85% 15%,rgba(201,162,39,.32),transparent 60%),radial-gradient(40% 50% at 0 100%,rgba(62,124,177,.14),transparent 70%),linear-gradient(160deg,#171512,#0B0B0B);clip-path:circle(0% at 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
.ms-paint:after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#9A7A12,#f0d77a,#C9A227)}
.ms-nav{display:flex;justify-content:space-between;align-items:center;height:5cqw;transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
.ms-logo,.ms-links{position:relative;display:flex;align-items:center;gap:2cqw}
.ms-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:4cqw;flex:1.7;min-height:0}
.ms-copy{position:relative;display:flex;flex-direction:column;justify-content:center;gap:1.4cqw;transition:transform .8s cubic-bezier(.34,1.56,.64,1) .08s}
.ms-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;flex:1;min-height:0}
.sk{display:block;background:#adaca7;border-radius:.6cqw;transition:opacity .4s}
.ms-logo .sk{width:12cqw;height:2.4cqw}
.ms-links .sk{width:6cqw;height:1.6cqw}
.sk-h{width:90%;height:3.6cqw}.sk-h2{width:65%;height:3.6cqw}.sk-p{width:80%;height:1.6cqw;margin-top:.8cqw}.sk-b{width:18cqw;height:4.6cqw;border-radius:9cqw}
.tx{position:absolute;opacity:0;transform:translateY(-2.4cqw);transition:opacity .5s,transform .7s cubic-bezier(.34,1.56,.64,1);font-weight:700}
.ms-logo .tx{left:0;font-size:2.2cqw;letter-spacing:.3em;color:#F7F3EA;font-weight:900}.ms-logo .tx em{font-style:normal;color:var(--g)}
.ms-links .tx{font-size:1.6cqw;color:#cfc9bc;position:static;display:none}
.ms-h{top:50%;left:0;right:0;margin-top:-9cqw;font-size:5.6cqw;line-height:1;font-weight:900;color:#F7F3EA;letter-spacing:-.03em}
.ms-h em{font-style:normal;display:block;background:linear-gradient(90deg,#f0d77a,#C9A227,#9A7A12);-webkit-background-clip:text;background-clip:text;color:transparent}
.ms-p{top:50%;left:0;right:0;margin-top:3cqw;font-size:1.7cqw;color:#a8a29a;font-weight:400}
.ms-btn{position:relative;display:inline-block;align-self:flex-start;text-decoration:none;margin-top:auto}
.ms-copy .ms-btn{position:absolute;left:0;top:50%;margin-top:8cqw}
.ms-btn .tx{position:absolute;left:0;top:0;white-space:nowrap;font-size:1.7cqw;font-weight:900;color:#C9A227;border:1px solid rgba(201,162,39,.5);border-radius:9cqw;padding:1.3cqw 2.8cqw;transition:opacity .5s,transform .7s cubic-bezier(.34,1.56,.64,1),background .6s,color .6s,box-shadow .6s}
.ms-img{position:relative;border:2px dashed #8d8c88;border-radius:1.2cqw;background:#c2c1bc;overflow:hidden;transition:transform .8s cubic-bezier(.34,1.56,.64,1),border-color .6s,background .6s}
.ph-x{position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1px),#8d8c88 50%,transparent calc(50% + 1px)),linear-gradient(to bottom right,transparent calc(50% - 1px),#8d8c88 50%,transparent calc(50% + 1px));transition:opacity .4s}
.pic{position:absolute;inset:0;transform:translateY(-120%);opacity:0;transition:transform .9s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.p1{background:linear-gradient(transparent 58%,#0c0a08 58.5%),linear-gradient(#f4c26b,#c8742c 45%,#4b2412 75%)}
.p1:before{content:"";position:absolute;left:0;right:0;bottom:30%;height:45%;background:#2a160c;clip-path:polygon(0 100%,18% 40%,30% 62%,48% 10%,63% 55%,76% 30%,100% 80%,100% 100%)}
.p1:after{content:"";position:absolute;left:62%;top:22%;width:12%;aspect-ratio:1;border-radius:50%;background:#ffe3a1;box-shadow:0 0 30px 10px rgba(255,214,120,.5)}
.p2{background:radial-gradient(2px 2px at 20% 70%,#f0d77a,transparent),radial-gradient(2px 2px at 40% 60%,#f0d77a,transparent),radial-gradient(2px 2px at 60% 75%,#fff,transparent),radial-gradient(3px 3px at 75% 65%,#C9A227,transparent),radial-gradient(2px 2px at 85% 80%,#f0d77a,transparent),linear-gradient(#0d1726,#1d2a3f 60%,#0b0b0b 61%)}
.p2:before{content:"";position:absolute;left:0;right:0;bottom:39%;height:30%;background:#0b0b0b;clip-path:polygon(0 100%,0 40%,10% 40%,10% 10%,18% 10%,18% 55%,30% 55%,30% 25%,40% 25%,40% 0,48% 0,48% 45%,62% 45%,62% 20%,72% 20%,72% 60%,85% 60%,85% 30%,100% 30%,100% 100%)}
.p3{background:radial-gradient(80% 60% at 50% 110%,#C9A227,#6b5009 50%,#14110b 80%)}
.p3:before{content:"";position:absolute;left:30%;right:30%;top:22%;bottom:0;border:3px solid #f0d77a;border-bottom:0;border-radius:999px 999px 0 0;opacity:.8}
.p4{background:linear-gradient(#a9c7e2,#3E7CB1 50%,#1d3d5c 51%,#0f2236)}
.p4:before{content:"";position:absolute;left:0;right:0;top:20%;height:31%;background:#24364a;clip-path:polygon(0 100%,25% 20%,40% 60%,60% 0,80% 55%,100% 30%,100% 100%)}
/* messy start (before grid) */
.bd-stage:not(.s1) .ms-nav{transform:translate(-1.5cqw,1.2cqw) rotate(-1.4deg)}
.bd-stage:not(.s1) .ms-copy{transform:translate(2.5cqw,2cqw) rotate(2deg)}
.bd-stage:not(.s1) .ph1{transform:translate(-2cqw,-1.5cqw) rotate(-3deg)}
.bd-stage:not(.s1) .ms-row .ms-img:nth-child(1){transform:translate(3cqw,1.5cqw) rotate(4deg)}
.bd-stage:not(.s1) .ms-row .ms-img:nth-child(2){transform:translate(-1cqw,3cqw) rotate(-3deg)}
.bd-stage:not(.s1) .ms-row .ms-img:nth-child(3){transform:translate(-3cqw,-.5cqw) rotate(2.5deg)}
/* s1 grid */
.s1:not(.s2) .gridlines{opacity:1}
/* s2 paint + type */
.s2 .ms-paint{clip-path:circle(150% at 0 0)}
.s2 .sk{opacity:0}
.s2 .tx{opacity:1;transform:none}
.s2 .ms-links .tx{display:block}.s2 .ms-links .sk{display:none}
.s2 .ms-h{transition-delay:.35s}.s2 .ms-p{transition-delay:.5s}.s2 .ms-btn .tx{transition-delay:.6s}.s2 .ms-logo .tx{transition-delay:.25s}
.s2 .ms-img{border:1px solid rgba(201,162,39,.25);background:#1a1814}
.s2 .ph-x{opacity:.25}
/* s3 photos */
.s3 .pic{transform:none;opacity:1}
.s3 .ph-x{opacity:0}
.s3 .p2{transition-delay:.12s}.s3 .p3{transition-delay:.24s}.s3 .p4{transition-delay:.36s}
/* phone */
.phone{position:absolute;right:-2%;bottom:-8%;width:25%;aspect-ratio:9/18.5;border-radius:22px;background:#0a0a0a;border:1px solid #3a352c;padding:7px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(201,162,39,.25);opacity:0;transform:translateX(60%) rotate(6deg);transition:opacity .6s,transform 1s cubic-bezier(.34,1.3,.64,1);pointer-events:none}
.phone-in{container-type:inline-size;position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;background:#0B0B0B}
.ms.mob{padding:7cqw 7cqw;gap:5cqw}
.ms.mob .ms-nav{height:9cqw}.ms.mob .ms-logo .tx{font-size:5.4cqw}.ms.mob .ms-links{display:none}
.ms.mob .ms-hero{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:5cqw;flex:3}
.ms.mob .ms-copy{position:static;display:block;height:auto}
.ms.mob .tx{position:static}
.ms.mob .ms-h{margin:0;font-size:11cqw}
.ms.mob .ms-p{margin:3cqw 0 0;font-size:4.4cqw;display:block}
.ms.mob .ms-btn{position:static;display:block;margin-top:5cqw}.ms.mob .ms-btn .tx{position:static;display:inline-block;font-size:4.4cqw;padding:3cqw 6cqw}
.ms.mob .ms-row{gap:3cqw;flex:1}
.ms.mob .sk{display:none}
/* s4 zoom out */
.s4 .dev{transform:scale(.78) translateX(-8%)}
.s4 .phone{opacity:1;transform:none}
/* s5 live */
.s5 .lock{opacity:1}.s5 .br-url{color:#d8d2c2}
.s5 .br-live{opacity:1;transform:none}
.s5 .ms-btn .tx{background:linear-gradient(135deg,#f0d77a,#C9A227 45%,#9A7A12);color:#111;border-color:#f0d77a;box-shadow:0 0 0 0 rgba(240,215,122,.6),0 0 30px 6px rgba(201,162,39,.45);animation:glow 1.8s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 .8cqw rgba(240,215,122,0),0 0 46px 12px rgba(201,162,39,.6)}}
.bd-stage:not(.s5) .ms-btn{pointer-events:none}
.bd-meter{display:none}
/* pinned mode */
.v5js .bd{height:640vh}
.v5js .bd-stage{position:sticky;top:64px;height:calc(100vh - 64px);height:calc(100svh - 64px);padding:20px}
.v5js .bd-meter{display:block;position:absolute;left:20px;right:20px;bottom:14px;height:2px;background:#262320;border-radius:2px;overflow:hidden}
.v5js .bd-meter span{display:block;height:100%;background:linear-gradient(90deg,#3E7CB1,var(--g));transform-origin:left;transform:scaleX(var(--bp,0))}
html:not(.v5js) .bd-steps li{opacity:1}html:not(.v5js) .bd-steps p{display:block}
.in-bd .sticky{opacity:0;pointer-events:none;transition:opacity .3s}
/* what we build */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.bt{background:linear-gradient(180deg,#151412,#0F0E0D);border:1px solid #262320;border-radius:18px;padding:26px;position:relative;overflow:hidden}
.bt:nth-child(1){grid-column:span 2;background:radial-gradient(70% 120% at 100% 0,rgba(201,162,39,.14),transparent 60%),linear-gradient(180deg,#151412,#0F0E0D)}
.bt:nth-child(6){grid-column:span 2;background:radial-gradient(70% 120% at 0 100%,rgba(62,124,177,.14),transparent 60%),linear-gradient(180deg,#151412,#0F0E0D)}
.bt svg{width:30px;height:30px;fill:none;stroke:var(--g);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.bt:nth-child(even) svg{stroke:#6FA3D2}
.bt h3{font-size:20px}.bt p{color:var(--m)}
/* plans */
.wp-grid{margin-top:30px}
.wp-grid .card{display:flex;flex-direction:column}
.wp .pk-n{font-size:11px;letter-spacing:.3em;color:#6FA3D2;font-weight:700;margin-bottom:8px}
.wp .pk-sub{color:#C9A227;opacity:.85;font-size:14px;margin:-2px 0 4px}
.wp .pk-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.wp .pk-cta .btn{padding:12px 20px;font-size:14px}
@media(max-width:1000px){.bd-stage{grid-template-columns:240px 1fr;gap:30px}}
@media(max-width:860px){
 .bd-stage{grid-template-columns:1fr;gap:16px}
 .bento{grid-template-columns:1fr}.bt:nth-child(1),.bt:nth-child(6){grid-column:auto}
 .v5js .bd{height:620vh}
 .v5js .bd-stage{grid-template-rows:auto 1fr;align-content:start;gap:14px;padding:16px 16px 28px}
 .v5js .bd-steps li{display:none;padding:10px 12px}
 .v5js .bd-steps li.on{display:flex}
 .v5js .bd-scene{align-self:center}
 .br-bar{height:28px}.br-url{font-size:11px}
 .br-view{aspect-ratio:4/3.4}
 .phone{width:34%;right:-1%;bottom:-14%;border-radius:16px;padding:5px}
 .phone-in{border-radius:12px}
 .s4 .dev{transform:scale(.8) translateX(-10%)}
}
.v5 h1 em,.v5 h2 em{background:linear-gradient(90deg,#f0d77a,#C9A227,#9A7A12);-webkit-background-clip:text;background-clip:text;color:transparent}
.wp-grid .tag{align-self:flex-start}
.phone{z-index:5}
.bt:nth-child(6){grid-column:span 3}
@media(max-width:860px){.br-view{aspect-ratio:1/1}.phone{width:40%;bottom:-10%}.bt:nth-child(6){grid-column:auto}}