html{scroll-behavior:smooth}
/* nav underline */
nav a{position:relative}nav a::after{content:"";position:absolute;left:.2rem;right:.2rem;bottom:.2rem;height:2px;background:var(--g);transform:scaleX(0);transform-origin:left;transition:transform .3s}nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1)}
/* buttons */
.btn{position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,background .2s}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25)}.btn:active{transform:translateY(0) scale(.97)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}.btn:hover::after{transform:translateX(120%)}
.mag{will-change:transform}
/* hero */
.fxhero{position:relative;overflow:hidden;padding:3.5rem 0 3rem}.hgrid{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hglow{position:absolute;width:70vmax;height:70vmax;left:50%;top:-30%;background:radial-gradient(circle,rgba(200,162,74,.28),transparent 60%);animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{from{transform:translate(-60%,0)}to{transform:translate(-20%,12%)}}
.hwrap{position:relative;display:grid;gap:2rem;align-items:center}@media(min-width:960px){.hwrap{grid-template-columns:1.05fr 1fr}}
.rot{font-family:Georgia,serif;font-size:clamp(1.3rem,3.4vw,1.8rem);margin:.2rem 0 .8rem;color:#fff}.rotw{color:var(--g)}.caret{display:inline-block;width:2px;height:1.1em;background:var(--g);margin-left:3px;vertical-align:-.15em;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.hart{position:relative;max-width:600px;margin:0 auto}.street{width:100%;height:auto;display:block}
.win{fill:#2c3d52;animation:lit .6s ease forwards;animation-delay:calc(.6s + var(--j)*.12s)}@keyframes lit{to{fill:url(#glow);filter:drop-shadow(0 0 6px rgba(255,210,122,.7))}}
.win{transition:fill .3s}.bulb{fill:#55667a;animation:bulb .5s forwards;animation-delay:calc(2.4s + var(--i)*.18s)}@keyframes bulb{to{fill:#ffd27a;filter:drop-shadow(0 0 8px #ffd27a)}}
.shop{animation:rise .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.1s);transform-box:fill-box;transform-origin:bottom}@keyframes rise{from{transform:scaleY(.2);opacity:0}}
.dash{animation:road 2.5s linear infinite}@keyframes road{to{transform:translateX(-60px)}}
.moon{animation:float 6s ease-in-out infinite}@keyframes float{50%{transform:translateY(-6px)}}
.phone{position:absolute;right:2%;bottom:-6%;width:31%;aspect-ratio:9/18;background:#0b1118;border-radius:22px;padding:7px;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 2px #2f3e50;animation:float 5s ease-in-out infinite}
.pscreen{position:relative;width:100%;height:100%;background:#f6f4ef;border-radius:16px;overflow:hidden}
.ps{position:absolute;inset:0;padding:12% 9%;display:flex;flex-direction:column;gap:6%;opacity:0;animation:cyc 12s infinite;font:600 clamp(7px,1.05vw,12px)/1.2 system-ui;color:#16202c}.ps b{font-family:Georgia,serif;font-weight:400;font-size:1.2em}
.s2{animation-delay:3s}.s3{animation-delay:6s}.s4{animation-delay:9s}@keyframes cyc{0%,2%{opacity:0;transform:translateY(8px)}6%,23%{opacity:1;transform:none}27%,100%{opacity:0}}
.pbar{height:7%;background:#16202c;border-radius:4px}.pimg{height:28%;border-radius:6px;background:linear-gradient(135deg,#c8a24a,#8e6f2a)}.ps i{display:block;height:5px;background:#d6d2c8;border-radius:3px}.ps i.w70{width:70%}
.pbtn{margin-top:auto;background:#c8a24a;border-radius:99px;text-align:center;padding:7% 0;color:#16202c}.pick{height:13%;border:2px solid #d6d2c8;border-radius:6px;background:#fff}.pick.on{border-color:#c8a24a;box-shadow:0 0 0 2px rgba(200,162,74,.3)}
.pmap{height:38%;border-radius:6px;background:repeating-linear-gradient(45deg,#dfe6ea 0 8px,#e9eef1 8px 16px);position:relative}.pin{position:absolute;left:45%;top:30%;width:14px;height:14px;background:#d9534f;border-radius:50% 50% 50% 0;transform:rotate(-45deg);animation:bounce 1.2s infinite}@keyframes bounce{50%{top:22%}}.stars{color:#e3a72f;letter-spacing:1px}
.bub{padding:6% 8%;border-radius:10px;max-width:85%}.bub.in{background:#fff;border:1px solid #ddd}.bub.out{background:#16202c;color:#fff;align-self:flex-end}
.plabel{position:absolute;left:-58%;bottom:12%;background:var(--g);color:var(--n);font:700 .72rem system-ui;border-radius:99px;padding:.35rem .8rem;white-space:nowrap;height:1.75rem;overflow:hidden}.plabel span{display:block;animation:lab 12s infinite steps(1)}
@keyframes lab{0%{transform:translateY(0)}25%{transform:translateY(-1.75rem)}50%{transform:translateY(-3.5rem)}75%{transform:translateY(-5.25rem)}}
.plabel span{line-height:1.05rem;height:1.75rem;padding-top:.0rem}
/* reveal */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}[data-reveal].in{opacity:1;transform:none}
/* cards + icons */
.card,.srow{transform-style:preserve-3d;will-change:transform;transition:transform .25s ease,box-shadow .3s,border-color .3s}.card:hover,.srow:hover{box-shadow:0 18px 40px rgba(22,32,44,.14),0 0 0 1px var(--g),0 0 26px rgba(200,162,74,.25)}
.icw{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:16px;background:linear-gradient(145deg,#1f2c3c,#16202c);margin-bottom:.8rem;flex:none;transition:transform .3s,box-shadow .3s}
.ic2{width:38px;height:38px;fill:none;stroke:var(--g);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.card:hover .icw,.srow:hover .icw{transform:translateZ(30px) rotate(-6deg) scale(1.08);box-shadow:0 0 22px rgba(200,162,74,.45)}
.ic2 .mv,.ic2 .mv2{transition:transform .5s cubic-bezier(.3,1.6,.5,1),stroke-dashoffset .8s;transform-box:fill-box;transform-origin:center}
.card:hover .mv,.srow:hover .mv{stroke-dasharray:60;animation:draw .8s ease}@keyframes draw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
.card:hover .mv2,.srow:hover .mv2{transform:scale(1.25) rotate(12deg)}
.card.match{border-color:var(--g);box-shadow:0 0 0 2px var(--g),0 14px 30px rgba(200,162,74,.25);transform:translateY(-4px)}.grid.filtering .card:not(.match){opacity:.4}
/* picker */
.picker-sec{background:linear-gradient(180deg,#fff,#f6f4ef)}.needs{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0}
.need{font:inherit;font-size:.95rem;border:1.5px solid #d6d2c8;background:#fff;border-radius:99px;padding:.6rem 1rem;cursor:pointer;transition:all .2s;color:var(--ink)}.need:hover{border-color:var(--g);transform:translateY(-2px)}
.need[aria-pressed=true]{background:var(--n);color:#fff;border-color:var(--n)}.need[aria-pressed=true]::before{content:"✓ ";color:var(--g)}.pick-out{color:var(--mut);min-height:1.6em}
/* timeline */
.tline{position:relative}.tl-bar{display:none}@media(min-width:820px){.tl-bar{display:block;position:absolute;left:4%;right:4%;top:calc(1.3rem + 18px);height:3px;background:#e3e0d8;z-index:0}.tl-bar i{display:block;height:100%;background:var(--g);transform-origin:left;transform:scaleX(var(--p,0))}}
@media(max-width:819px){.tl-bar{display:block;position:absolute;left:calc(1.3rem + 17px);top:1rem;bottom:1rem;width:3px;background:#e3e0d8}.tl-bar i{display:block;width:100%;height:100%;background:var(--g);transform-origin:top;transform:scaleY(var(--p,0))}}
.steps{position:relative;z-index:1}.steps li{transition:transform .5s,box-shadow .5s;background:rgba(246,244,239,.96)}.steps li.on::before{background:var(--g);color:var(--n);box-shadow:0 0 0 6px rgba(200,162,74,.25);transition:all .4s}
/* before/after */
.wgrid{display:grid;gap:1.5rem;align-items:center;margin-top:1.4rem}@media(min-width:900px){.wgrid{grid-template-columns:1fr 230px}}
.ba{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 16px 40px rgba(22,32,44,.22);aspect-ratio:16/10;background:#fff;--x:50%;user-select:none}
.ba-after img{width:100%;height:100%;object-fit:cover;object-position:top}.ba-after{position:absolute;inset:0}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0);background:#eceff2}
.before-mock{height:100%;padding:5% 6%;display:flex;flex-direction:column;gap:4%;font:clamp(10px,1.5vw,15px)/1.35 Arial,sans-serif;color:#3c4043;filter:grayscale(.2)}
.gsearch{background:#fff;border-radius:99px;padding:2.2% 4%;box-shadow:0 1px 4px rgba(0,0,0,.18)}.gs::before{content:"🔍 ";}
.gres{background:#fff;border-radius:10px;padding:4%;display:flex;flex-direction:column;gap:.45em;box-shadow:0 1px 3px rgba(0,0,0,.12)}.gres b{font-size:1.3em;color:#1a0dab;font-weight:400}.muted{color:#70757a}
.row{display:flex;gap:.5em;flex-wrap:wrap}.tag{background:#fce8e6;color:#c5221f;border-radius:4px;padding:.1em .5em;font-size:.85em}.fake-btns{display:flex;gap:.5em}.fake-btns span{border:1px solid #dadce0;border-radius:99px;padding:.3em .9em;color:#1a73e8}.fake-btns .off{color:#9aa0a6;text-decoration:line-through}
.bcap{margin:auto 0 0;background:rgba(22,32,44,.85);color:#fff;border-radius:8px;padding:.6em .9em;font-size:.85em;align-self:flex-start}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--x);width:3px;background:var(--g);transform:translateX(-50%);pointer-events:none}.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--g);color:var(--n);display:grid;place-items:center;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.ba-l,.ba-r{position:absolute;top:10px;font:700 .72rem system-ui;letter-spacing:.1em;text-transform:uppercase;background:rgba(22,32,44,.8);color:#fff;padding:.25rem .6rem;border-radius:99px;pointer-events:none}.ba-l{left:10px}.ba-r{right:10px;background:var(--g);color:var(--n)}
.phone2{width:220px;max-width:62vw;margin:0 auto;aspect-ratio:9/18.5;background:#0b1118;border-radius:30px;padding:9px;box-shadow:0 20px 44px rgba(22,32,44,.35)}.p2screen{width:100%;height:100%;border-radius:22px;overflow:hidden;background:#fff}
.p2screen img{width:100%;animation:pscroll 14s ease-in-out infinite alternate}@keyframes pscroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + 390px))}}
.wstack{display:grid;gap:1.5rem}.wl{margin-top:1.5rem}.wlede{max-width:65ch;color:var(--mut)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}[data-reveal]{opacity:1;transform:none}.win{fill:url(#glow)}.bulb{fill:#ffd27a}.ps{opacity:0}.s1{opacity:1}.plabel span{transform:none}}
@media(max-width:959px){.hart{padding-bottom:2.8rem}.street{width:70%}.phone{width:28%;right:0;bottom:0}.plabel{left:auto;right:0;bottom:-2.6rem}}