/* Clear glass tools pivot from compact clamps fixed to the backdrop. */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:2vw;padding:150px 5.6vw 115px;isolation:isolate;overflow:hidden}
.hero-dots{z-index:-1;opacity:.5;mask-image:linear-gradient(#000 55%,transparent)}
.hero-copy{text-align:left;max-width:none;position:relative;z-index:2}
.hero-copy h1{font-size:clamp(44px,5.05vw,100px);line-height:1.18;letter-spacing:-.065em;font-weight:300}
.hero-copy p{font-size:clamp(18px,1.65vw,28px);line-height:1.45;letter-spacing:-.025em;color:#414141;margin-top:36px}
.hero-keychains{position:relative;width:100%;max-width:660px;aspect-ratio:1 / 1.04;justify-self:end;isolation:isolate}
.charm-filters{position:absolute;width:0;height:0;pointer-events:none}
.charm-refractive .charm-glass{backdrop-filter:url(#charm-refraction) saturate(1.25);background:linear-gradient(135deg,#ffffff66,#ffffff14 50%,#ffffff55)}
.charm-scene{position:absolute;inset:0;perspective:1100px}
.charm-light{position:absolute;inset:18% 10% 13%;border-radius:50%;background:radial-gradient(ellipse,#73f63938,transparent 67%);filter:blur(18px);pointer-events:none}
.charm-home{position:absolute;width:44%;aspect-ratio:.92;--angle:-13deg;transform:rotate(var(--angle));perspective:900px}
.hero-charm{position:absolute;inset:0;transform-origin:50% 0%;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(var(--swing,0deg))}
.charm-home--crm{left:1%;top:21%;z-index:2}
.charm-home--calendar{right:5%;top:7%;--angle:12deg;z-index:1}
.charm-home--tasks{left:42%;top:50%;--angle:-7deg;z-index:3}
.charm-glass{position:absolute;inset:0;border-radius:24%;background:linear-gradient(135deg,#ffffffa1 0%,#ffffff29 42%,#e0eee326 65%,#ffffff80);border:1px solid #ffffffed;backdrop-filter:blur(3px) saturate(1.35);-webkit-backdrop-filter:blur(3px) saturate(1.35);box-shadow:inset 2px 3px 3px #fff,inset -2px -3px 4px #85968b38,inset 0 0 0 5px #ffffff3d,0 2px 2px #11201413,8px 22px 35px -15px #18351b33,0 0 0 1px #324c3524;color:#111815}
.charm-glass:before{content:'';position:absolute;inset:7px;border:1px solid #ffffff9c;border-radius:calc(24% - 3px);box-shadow:inset 1px 1px 3px #fff,1px 2px 3px #4359440e;pointer-events:none}
.charm-glass:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent 20%,#fff9 26%,#ffffff08 38%,transparent 60%,#fff5 90%);opacity:.5;pointer-events:none}


.charm-content{position:absolute;inset:24% 8% 18%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12%}
.charm-icon{width:44%;height:54%;overflow:visible;filter:drop-shadow(0 2px 0 #fff9);flex-shrink:0}
.charm-label{line-height:1.2;text-align:center}
.charm-label{position:relative;font-size:clamp(15px,1.5vw,25px);font-weight:600;letter-spacing:-.04em;white-space:nowrap;z-index:1}
@media(min-width:1700px){.hero{padding-inline:7vw;gap:3vw}.hero-keychains{max-width:710px}.hero-copy p{margin-top:45px}}
@media(max-width:1050px) and (min-width:901px){.hero{padding-inline:4vw;gap:1vw}.hero-copy h1{font-size:4.9vw}.hero-copy p{font-size:19px}.charm-label{font-size:15px}}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:40px;padding:125px 24px 68px;min-height:100svh;align-content:center}.hero-copy h1{font-size:clamp(34px,7.85vw,58px);line-height:1.18}.hero-copy p{font-size:18px;line-height:1.45;margin-top:25px}.hero-keychains{width:90%;max-width:440px;justify-self:center;aspect-ratio:.95}.charm-home--crm{top:14%;left:3%}.charm-home--calendar{top:3%;right:7%}.charm-home--tasks{left:35%;top:51%}.charm-label{font-size:clamp(12px,3.45vw,20px)}.charm-glass{border-radius:24%;box-shadow:inset 1px 2px 2px #fff,inset -2px -2px 3px #85968b38,inset 0 0 0 3px #ffffff3d,0 1px 2px #11201413,5px 15px 25px -13px #18351b40,0 0 0 1px #324c3524}.charm-glass:before{inset:4px}}
@media(max-width:380px){.hero{padding-inline:20px;gap:36px}.hero-copy h1{font-size:8vw}.hero-copy p{font-size:16px}.hero-keychains{width:94%}.charm-label{font-size:11px}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.charm-glass,.charm-refractive .charm-glass{background:#f5fff1;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#91a08f}.charm-glass:after{display:none}.charm-label{color:#000}}


/* One quiet clamp holds the top edge. The glass pivots around it; the clamp stays on the backdrop. */
.charm-mount{position:absolute;left:39%;top:-2.5%;width:22%;height:7%;border-radius:6px;z-index:4;background:linear-gradient(180deg,#fff 4%,#f5f7f5 45%,#e6ebe7 92%,#fff);border:1px solid #dce4de;box-shadow:inset 0 1px 1px #fff,0 2px 2px #16382024,0 -1px 1px #fff}
.charm-mount:after{content:'';position:absolute;left:10%;right:10%;bottom:16%;height:1px;background:#77958035;box-shadow:0 1px #fff9}
@media(max-width:900px){.charm-mount{border-radius:4px}}