/* LSN — sculptural liquid-glass artwork. No image, canvas or remote dependency. */
.liquid-art { position: relative; width: 100%; max-width: 680px; min-width: 0; aspect-ratio: 1.04; container-type: inline-size; isolation: isolate; overflow: clip; color: #202744; perspective: 1100px; }
.liquid-art *, .liquid-art *::before, .liquid-art *::after { box-sizing: border-box; }
.lg-art-plane { position: absolute; inset: 0; isolation: isolate; transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .5s cubic-bezier(.2,.65,.3,1); }
.lg-aura { position: absolute; width: 72%; aspect-ratio: 1; pointer-events: none; z-index: -2; border-radius: 50%; animation: lg-aura-drift 15s ease-in-out infinite alternate; }
.lg-aura--blue { left: 3%; top: 11%; background: radial-gradient(ellipse, #b9d8ff85, #d1e5ff3d 43%, transparent 70%); }
.lg-aura--violet { right: 0; top: 0; background: radial-gradient(ellipse, #c3b9f676, #d4d0ff32 42%, transparent 70%); animation-delay: -7s; }
.lg-orbit-line { position: absolute; inset: 10% 6% 8% 6%; border: 1px solid #7488be14; border-radius: 50%; transform: rotate(-25deg) scaleY(.76); z-index: -1; }
.lg-orbit-line--two { inset: 0; transform: rotate(-25deg) scaleY(.76); border-style: dashed; border-color: #7488be14; }
.lg-art-caption { position: absolute; left: 5%; right: 4%; top: 3%; display: flex; align-items: center; gap: 1.45cqw; color: #69718a; font-size: 1.65cqw; letter-spacing: .035em; }
.lg-art-caption > span:last-child { margin-left: auto; font-size: 1.6cqw; font-weight: 600; letter-spacing: .08em; }
.lg-caption-dot { width: .85cqw; height: .85cqw; border-radius: 50%; background: #6b64b5; box-shadow: 0 0 0 .65cqw #6b64b511; }
.lg-sculpture { position: absolute; inset: -1% 0 auto; display: block; width: 100%; height: auto; overflow: visible; z-index: 0; animation: lg-sculpture-drift 16s ease-in-out infinite; transform-origin: 52% 43%; }

.lg-browser { position: absolute; left: 4.5%; top: 30%; width: 68%; height: 49%; padding: 1.15cqw; border: 1px solid #fffffff0; border-radius: 3.2cqw; background: linear-gradient(135deg, #ffffffb5, #f1f5ff50 45%, #cfd9f387); box-shadow: 0 3.5cqw 7cqw -2.5cqw #34467e45, inset 0 0 0 1px #ffffff60; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transform: rotate(-8deg); z-index: 2; animation: lg-browser-float 9s ease-in-out infinite; }
.lg-browser-chrome { display: flex; align-items: center; justify-content: space-between; height: 5cqw; padding: 0 1.1cqw 1.1cqw; color: #626e89; font-size: 1.2cqw; }
.lg-browser-chrome > span:nth-child(2) { display: block; text-align: center; width: 40%; padding: .4cqw; background: #ffffff55; border: 1px solid #ffffff65; border-radius: 1cqw; font-size: 1.15cqw; }
.lg-browser-dots { display: flex; gap: .6cqw; }
.lg-browser-dots i { width: .85cqw; height: .85cqw; border-radius: 50%; background: #9ba5bc; }
.lg-browser-dots i:nth-child(2) { background: #b7bed0; }
.lg-browser-dots i:nth-child(3) { background: #c7cddd; }
.lg-browser-chrome > .icon { width: 1.8cqw; height: 1.8cqw; }
.lg-browser-screen { position: relative; height: 72%; padding: 3.1cqw 3.9cqw 0; overflow: hidden; border-radius: 1.8cqw; color: #f7f8ff; background: radial-gradient(ellipse at 93% 18%, #414873, transparent 57%), linear-gradient(125deg, #202a49, #141d38); }
.lg-browser-screen::after { position: absolute; content: ''; inset: 0; pointer-events: none; background: linear-gradient(117deg, #ffffff0a, transparent 48%); border: 1px solid #ffffff0c; border-radius: inherit; }
.lg-browser-nav { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.lg-browser-nav > b { font-size: 2.8cqw; line-height: 1; letter-spacing: -.06em; }
.lg-browser-nav > span { font-size: 1.05cqw; color: #d7dbed; }
.lg-browser-nav > i { width: 2.2cqw; height: .5cqw; border-block: 1px solid #b7bdd6; }
.lg-browser-content { position: relative; z-index: 2; margin-top: 3.6cqw; }
.lg-micro-label { display: block; font-size: .95cqw; letter-spacing: .15em; color: #bac1e2; }
.lg-browser-content > strong { display: block; font-size: 5.3cqw; line-height: 1.06; letter-spacing: -.05em; font-weight: 500; margin-top: 1.1cqw; max-width: 80%; }
.lg-preview-action { display: inline-flex; align-items: center; gap: 2.8cqw; margin-top: 1.5cqw; padding: .8cqw 1.4cqw; border: 1px solid #ffffff36; border-radius: 8cqw; background: #ffffff16; font-size: 1.15cqw; color: #f6f7ff; }
.lg-preview-action > .icon { width: 1.7cqw; height: 1.7cqw; }
.lg-browser-ring { position: absolute; right: -8%; top: 19%; width: 43%; aspect-ratio: 1; border-radius: 50%; border: 3.1cqw solid transparent; background: linear-gradient(#222c4b, #1a2441) padding-box, conic-gradient(from 150deg, #5c58a5, #b6c7e9, #ffffff, #7e84c8, #c1cef2, #5c58a5) border-box; transform: rotate(-18deg) scaleY(.83); box-shadow: inset 0 0 1.5cqw #9fa6d040, 0 .6cqw 1cqw #050b2220; opacity: .85; }
.lg-browser-ring > span { position: absolute; inset: -2.4cqw; border: 1px solid #ffffff50; border-radius: 50%; }
.lg-browser-bottom { position: absolute; display: flex; align-items: center; justify-content: space-between; bottom: 1.2cqw; left: 4cqw; right: 4cqw; color: #a4acc9; font-size: 1cqw; }
.lg-browser-bottom > div { display: flex; gap: .5cqw; margin-right: 35%; }
.lg-browser-bottom i { height: .35cqw; width: 1.4cqw; border-radius: 1cqw; background: #4d5677; }
.lg-browser-bottom i:first-child { width: 2.5cqw; background: #c7cdec; }
.lg-browser-bottom > .icon { width: 2cqw; height: 2cqw; }
.lg-browser-panels { display: flex; align-items: center; gap: 1.2cqw; padding: 1.6cqw .2cqw 0; }
.lg-browser-panels > span { display: flex; align-items: center; gap: .8cqw; min-width: 0; flex: 1; padding: 1.1cqw 1.2cqw; background: #ffffff6b; border: 1px solid #ffffff90; border-radius: 1.1cqw; }
.lg-browser-panels > span > i { display: grid; place-items: center; color: #6b6c9d; }
.lg-browser-panels .icon { width: 2cqw; height: 2cqw; }
.lg-browser-panels b { font-size: 1.05cqw; font-weight: 500; white-space: nowrap; color: #616b85; }

.lg-phone { position: absolute; z-index: 3; right: 5.5%; top: 27%; width: 28%; height: 57%; padding: 5.4cqw 2.3cqw 2.4cqw; border: .8cqw solid #f5f8fff0; border-radius: 5.4cqw; background: linear-gradient(140deg, #f7faffeb, #e6edffdd 52%, #f7f8ffec); box-shadow: 0 2.7cqw 5.5cqw #3c4c8b26, inset 0 0 0 1px #bbc8e687, 0 0 0 1px #d0d8ed; transform: rotate(10deg); animation: lg-phone-float 8s ease-in-out infinite; }
.lg-phone-camera { position: absolute; top: 1.7cqw; left: 34%; width: 32%; height: 1.4cqw; border-radius: 3cqw; background: #20283e; box-shadow: inset -.7cqw .2cqw .5cqw #66708d; }
.lg-phone-top { display: flex; align-items: center; justify-content: space-between; }
.lg-phone-top > b { font-size: 2.6cqw; letter-spacing: -.055em; font-weight: 700; }
.lg-phone-top > .icon { width: 2cqw; height: 2cqw; color: #6c7592; }
.lg-phone-label { display: block; margin-top: 1.2cqw; font-size: 1.1cqw; color: #7c819a; letter-spacing: .03em; }
.lg-phone-symbol { display: grid; place-items: center; position: relative; height: 15.5cqw; margin: 1cqw 0 .5cqw; }
.lg-phone-symbol > span { position: relative; z-index: 1; display: grid; place-items: center; width: 11.2cqw; height: 11.2cqw; border-radius: 3.2cqw; border: 1px solid #ffffffb5; color: #f5f5ff; background: linear-gradient(140deg, #c5bff9, #9188dd 42%, #5a58a9); box-shadow: .5cqw 1.4cqw 2.7cqw #777ac342, inset .4cqw .3cqw .6cqw #ffffff77, inset -.5cqw -.5cqw 1cqw #393e8c25; transform: rotate(-12deg); }
.lg-phone-symbol .icon { width: 7.8cqw; height: 7.8cqw; stroke-width: .8; }
.lg-phone-symbol > i { position: absolute; inset: .5cqw 1cqw; border: 1px solid #a4b2d730; border-radius: 50%; }
.lg-phone-symbol > i:last-child { inset: 2.4cqw 3cqw; }
.lg-phone > strong { display: block; font-size: 2.65cqw; font-weight: 600; line-height: 1.15; letter-spacing: -.035em; color: #283252; }
.lg-phone-lines { display: grid; gap: .6cqw; margin-top: 1.2cqw; }
.lg-phone-lines > i { height: .55cqw; width: 85%; background: #c3cde3; border-radius: 1cqw; }
.lg-phone-lines > i:last-child { width: 61%; background: #d2daeb; }
.lg-phone-card { display: flex; align-items: center; gap: 1.1cqw; padding: .9cqw 1cqw; border-radius: 1.5cqw; margin-top: 1.5cqw; background: #ffffffb3; border: 1px solid #fff; }
.lg-phone-card > span { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; color: #766ea7; border-radius: 50%; background: #efedfa; }
.lg-phone-card > span .icon { width: 1.7cqw; height: 1.7cqw; }
.lg-phone-card > i { width: 6.8cqw; height: .6cqw; border-radius: .5cqw; background: #b0b8cf; }
.lg-phone-card > b { display: grid; margin-left: auto; color: #848daa; }
.lg-phone-card > b .icon { width: 1.7cqw; height: 1.7cqw; }
.lg-phone-dock { display: flex; position: absolute; bottom: 2.3cqw; left: 2.6cqw; right: 2.6cqw; justify-content: space-between; align-items: center; color: #929bb5; border-top: 1px solid #cad3e957; padding-top: 1.1cqw; }
.lg-phone-dock .icon { width: 2.3cqw; height: 2.3cqw; }
.lg-phone-dock > span { display: grid; place-items: center; border-radius: 1cqw; padding: .7cqw; margin-left: -.7cqw; color: #6e64b7; background: #e5e2f7; }

.lg-ready-chip { position: absolute; z-index: 4; left: 7%; bottom: 9.3%; display: flex; align-items: center; gap: 1.6cqw; padding: 1.9cqw 2.5cqw 1.9cqw 1.9cqw; color: #3d4763; background: linear-gradient(115deg, #ffffffd4, #f1f6ff99); border: 1px solid #fffffff0; border-radius: 2.7cqw; box-shadow: 0 1.2cqw 3.5cqw #6676b120, inset 0 0 0 1px #ffffff4d; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation: lg-chip-float 7s ease-in-out infinite; }
.lg-ready-icon { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; color: #6d62ae; border: 1px solid #ffffffbd; background: linear-gradient(135deg, #f4f2ff, #dcdaf5); }
.lg-ready-icon .icon { width: 2.3cqw; height: 2.3cqw; }
.lg-ready-chip > span:last-child { display: grid; gap: .6cqw; font-size: 1.85cqw; font-weight: 500; line-height: 1.2; }
.lg-ready-chip small { font-size: .98cqw; font-weight: 500; letter-spacing: .1em; color: #8c94ac; }
.lg-art-foot { position: absolute; left: 8%; right: 5%; bottom: 1%; display: flex; gap: 2cqw; align-items: center; font-size: 1.45cqw; letter-spacing: .08em; text-transform: uppercase; color: #858ca3; }
.lg-foot-line { flex: 1; height: 1px; background: linear-gradient(90deg, #acb6d44a, transparent); }
.lg-art-foot > .icon { width: 2.8cqw; height: 2.8cqw; color: #7e83a6; stroke-width: 1; }

@keyframes lg-sculpture-drift { 0%, 100% { transform: translate3d(0,0,0) rotate(-2deg); } 50% { transform: translate3d(0,-1.5%,0) rotate(4deg); } }
@keyframes lg-browser-float { 0%, 100% { transform: translate3d(0,0,0) rotate(-8deg); } 50% { transform: translate3d(0,-2.5%,0) rotate(-6deg); } }
@keyframes lg-phone-float { 0%, 100% { transform: translate3d(0,0,0) rotate(10deg); } 50% { transform: translate3d(0,-3.4%,0) rotate(8deg); } }
@keyframes lg-chip-float { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-6%,0); } }
@keyframes lg-aura-drift { from { transform: translate3d(-2%,1%,0) scale(.95); opacity: .65; } to { transform: translate3d(3%,-3%,0) scale(1.06); opacity: 1; } }
.motion-paused .liquid-art [data-ambient], .liquid-art.motion-paused [data-ambient], .liquid-art[data-ambient-paused] [data-ambient], .liquid-art [data-ambient-paused] { animation-play-state: paused; }
.motion-paused .lg-art-plane, .liquid-art[data-ambient-paused] .lg-art-plane { transform: none; transition: none; }
@media (max-width: 599px) { .liquid-art { max-width: 480px; margin-inline: auto; } .lg-art-caption { font-size: 1.9cqw; } .lg-art-foot { font-size: 1.7cqw; } }
@media (hover: none), (pointer: coarse) { .lg-art-plane { transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) { .liquid-art [data-ambient] { animation: none !important; } .lg-art-plane { transform: none; transition: none; } }
@media (prefers-reduced-transparency: reduce) { .lg-browser { background: #e9eef9; -webkit-backdrop-filter: none; backdrop-filter: none; } .lg-ready-chip { background: #f4f6fc; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@supports not (backdrop-filter: blur(1px)) { .lg-browser { background: #e9eff9ed; } .lg-ready-chip { background: #f4f6fcef; } }