.v3-demo{position:relative;padding:112px 0 100px;overflow:hidden;background:radial-gradient(48% 60% at 12% 18%,rgba(132,0,255,.09),transparent 72%),radial-gradient(44% 56% at 88% 78%,rgba(82,207,255,.09),transparent 72%),#071b28}
.v3-demo:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(118,216,255,.033) 1px,transparent 1px),linear-gradient(90deg,rgba(118,216,255,.033) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,black 13%,black 86%,transparent)}
.v3-demo .v3-shell{position:relative;z-index:2}.v3-demo-head{display:grid;grid-template-columns:1.1fr .9fr;gap:7%;align-items:end;margin-bottom:42px}
.v3-demo-head h2{max-width:12ch;margin:12px 0 0;color:#f4fbff;font-size:clamp(3.5rem,5.8vw,6.6rem);line-height:.94;letter-spacing:-.06em}
.v3-demo-head h2 span{background:linear-gradient(90deg,#73ddff,#b663ff 60%,#d28bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.v3-demo-head-copy{padding-left:26px;border-left:1px solid rgba(132,0,255,.26)}.v3-demo-head-copy p{color:#a9c3ce;font-size:1rem;line-height:1.68}.v3-demo-head-copy p+p{margin-top:13px}.v3-demo-head-copy strong{color:#eff9ff}
.v3-demo-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px}.v3-demo-card{overflow:hidden;border-radius:26px;border:1px solid rgba(132,0,255,.24);background:radial-gradient(100% 100% at 100% 0%,rgba(132,0,255,.07),transparent 58%),#0a2634;box-shadow:0 28px 74px rgba(0,0,0,.22)}
.v3-demo-water{border-color:rgba(119,220,255,.32);background:radial-gradient(100% 100% at 100% 0%,rgba(103,215,255,.09),transparent 58%),#0a2938}
.v3-demo-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#04131c}
.v3-demo-photo img{width:100%;max-width:100%;height:100%;display:block;object-fit:cover;object-position:center;transform:none!important;transition:filter .35s ease}
.v3-demo-photo-brush img{object-position:center;filter:brightness(1.01) contrast(1.02)}
.v3-demo-photo-water img{object-position:center;filter:brightness(1.03) contrast(1.02) saturate(.96)}
.v3-demo-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,13,20,.04),transparent 46%,rgba(3,13,20,.52) 100%)}
.v3-demo-tag{position:absolute;z-index:3;top:16px;left:16px;display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(5,20,30,.72);backdrop-filter:blur(12px);color:#e9f8ff;font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em}.v3-demo-tag span{color:#c274ff}
.v3-demo-hotspot{position:absolute;z-index:5;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(7,24,34,.30);backdrop-filter:blur(4px);box-shadow:0 0 0 11px rgba(132,0,255,.05),0 0 34px rgba(132,0,255,.18)}
.v3-demo-hotspot i{width:11px;height:11px;border-radius:50%;background:#c56cff;box-shadow:0 0 0 8px rgba(197,108,255,.14),0 0 24px rgba(197,108,255,.8);animation:v3DemoPulse 1.4s ease-in-out infinite alternate}
.v3-demo-hotspot span{position:absolute;top:calc(100% + 7px);white-space:nowrap;color:#d4edf7;font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}
.v3-demo-hotspot-miss{left:61%;top:52%;transform:translate(-50%,-50%)}.v3-demo-hotspot-water{left:50%;top:53%;transform:translate(-50%,-50%);box-shadow:0 0 0 11px rgba(118,216,255,.06),0 0 34px rgba(118,216,255,.22)}.v3-demo-hotspot-water i{background:#76d8ff;box-shadow:0 0 0 8px rgba(118,216,255,.15),0 0 24px rgba(118,216,255,.9)}
.v3-demo-product-chip{position:absolute;z-index:4;left:16px;bottom:16px;display:flex;align-items:center;gap:9px;padding:7px 9px 7px 7px;border-radius:14px;border:1px solid rgba(132,0,255,.26);background:rgba(5,18,28,.80);backdrop-filter:blur(14px)}
.v3-demo-product-chip img{width:46px;height:46px;object-fit:contain;border-radius:9px;background:#ddecf1}.v3-demo-product-chip strong,.v3-demo-product-chip span{display:block}.v3-demo-product-chip strong{color:#eff9ff;font-size:10px}.v3-demo-product-chip span{margin-top:2px;color:#89a5b0;font-size:8px}
.v3-demo-copy{padding:24px 25px 26px}.v3-demo-copy h3{max-width:20ch;margin:0;color:#f2faff;font-size:clamp(1.75rem,2.4vw,2.7rem);line-height:1.03;letter-spacing:-.038em}.v3-demo-copy>p{max-width:58ch;margin-top:11px;color:#9fbac6;line-height:1.58}
.v3-demo-callout{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:13px 14px;border-radius:14px;border:1px solid rgba(132,0,255,.15);background:rgba(132,0,255,.05)}.v3-demo-callout-water{border-color:rgba(118,216,255,.20);background:rgba(118,216,255,.06)}
.v3-demo-callout b{color:#c27aff;font-size:10px;white-space:nowrap}.v3-demo-callout-water b{color:#77ddff}.v3-demo-callout span{color:#a7c0cb;font-size:11px;line-height:1.45}
.v3-demo-switch{position:absolute;z-index:8;left:50%;top:30%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;border:6px solid #071b28;background:#0a2030;box-shadow:0 14px 38px rgba(0,0,0,.30),0 0 28px rgba(132,0,255,.18)}
.v3-demo-switch span{color:#b7d6e2;font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.v3-demo-switch b{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(135deg,#6edcff,#a64bff)}
.v3-demo-summary{display:grid!important;grid-template-columns:.7fr 1.3fr auto!important;gap:28px!important;align-items:center!important;margin-top:20px!important}
.v3-demo-flow{display:flex;align-items:center;gap:8px;color:#d7f0fb;font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;white-space:nowrap}.v3-demo-flow i{width:26px;height:1px;background:linear-gradient(90deg,rgba(116,220,255,.25),#a448ff)}
.v3-demo-summary h3{margin-top:6px;color:#f2faff;font-size:clamp(1.45rem,2vw,2.15rem);line-height:1.05;letter-spacing:-.03em}.v3-demo-summary p:last-child{margin-top:7px;max-width:64ch;color:#91acb8;font-size:.82rem;line-height:1.52}.v3-demo-summary .v3-btn{white-space:nowrap}
@keyframes v3DemoPulse{from{transform:scale(.78);opacity:.55}to{transform:scale(1.16);opacity:1}}
@media(hover:hover) and (pointer:fine){.v3-demo-card:hover .v3-demo-photo img{filter:brightness(1.035) contrast(1.025)}}
@media(max-width:980px){.v3-demo-head{grid-template-columns:1fr;gap:22px}.v3-demo-head-copy{max-width:760px}.v3-demo-stage{grid-template-columns:1fr}.v3-demo-switch{display:none}.v3-demo-summary{grid-template-columns:1fr!important}.v3-demo-summary .v3-btn{width:max-content}}
@media(max-width:700px){.v3-demo{padding:82px 0 74px}.v3-demo-head h2{font-size:clamp(3rem,13vw,4.8rem)}.v3-demo-head-copy{padding-left:16px}.v3-demo-card{border-radius:20px}.v3-demo-media{aspect-ratio:16/10}.v3-demo-photo img{width:100%;max-width:100%}.v3-demo-hotspot{width:62px;height:62px}.v3-demo-copy{padding:20px}}
@media(prefers-reduced-motion:reduce){.v3-demo-hotspot i{animation:none!important}.v3-demo-photo img{transition:none!important}}
.v3-demo-tag-problem{border-color:rgba(255,176,98,.28)!important;background:rgba(40,20,8,.72)!important}
.v3-demo-tag-problem span{color:#ffbf77!important}
.v3-demo-tag-solution{border-color:rgba(118,216,255,.32)!important;background:rgba(5,28,39,.76)!important}
.v3-demo-tag-solution span{color:#76d8ff!important}
.v3-demo-card .v3-demo-media{min-height:0}
.v3-demo-stage{align-items:stretch}