:root {
  color-scheme: dark;
  --ink: #f5f2ff;
  --muted: #aaa1c0;
  --void: #05020c;
  --panel: rgba(16, 8, 31, .7);
  --cyan: #36edff;
  --violet: #a95cff;
  --pink: #ff45cf;
  --line: rgba(183, 116, 255, .22);
  --max: 1240px;
  --header: 88px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--void); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 15%, rgba(89, 27, 142, .18), transparent 36rem),
    linear-gradient(180deg, #070312 0%, #030108 55%, #080315 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }
::selection { color: #070312; background: var(--cyan); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: .7rem 1rem; background: #fff; color: #000; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.signal-field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .55; }
.ambient-glow { position: fixed; width: 42rem; height: 42rem; border-radius: 50%; filter: blur(120px); opacity: .12; pointer-events: none; z-index: 0; }
.glow-a { background: var(--violet); left: -20rem; top: 40%; }
.glow-b { background: var(--cyan); right: -22rem; top: 12%; }
.jelly-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.jelly { position: absolute; filter: saturate(1.2) drop-shadow(0 0 24px rgba(92, 225, 255, .28)); opacity: .12; will-change: transform; }
.jelly-one { width: 15rem; left: -5rem; top: 22%; animation: drift-a 18s ease-in-out infinite alternate; }
.jelly-two { width: 10rem; right: 4%; top: 58%; opacity: .1; transform: rotate(17deg); animation: drift-b 23s ease-in-out infinite alternate; }
.jelly-three { width: 7rem; left: 18%; bottom: -4rem; opacity: .08; filter: blur(1px) hue-rotate(35deg); animation: drift-c 27s linear infinite; }
.jelly-four { width: 5rem; right: 31%; top: 17%; opacity: .07; filter: blur(2px) hue-rotate(-22deg); animation: drift-b 32s ease-in-out infinite alternate-reverse; }

.site-header {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--header);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 0 max(24px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}
.site-header.is-scrolled { background: rgba(5, 2, 12, .76); border-color: var(--line); backdrop-filter: blur(22px); }
.brand { display: inline-flex; align-items: center; gap: .8rem; min-width: max-content; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 44px; overflow: hidden; filter: drop-shadow(0 0 12px rgba(54, 237, 255, .5)); }
.brand-mark img { width: 52px; max-width: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.08; text-transform: uppercase; }
.brand-text strong { font-size: .88rem; letter-spacing: .18em; }
.brand-text small { margin-top: .34rem; color: var(--muted); font-size: .56rem; letter-spacing: .2em; }
.primary-nav { display: flex; align-items: center; gap: 2rem; font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.primary-nav > a { display: inline-flex; align-items: center; min-height: 44px; }
.primary-nav > a:not(.portal-link) { color: #c5bdd5; transition: color .2s; }
.primary-nav > a:not(.portal-link):hover { color: var(--cyan); }
.portal-link, .button {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: .75rem 1rem; border: 1px solid rgba(89, 232, 255, .45); background: rgba(18, 8, 38, .65);
  box-shadow: inset 0 0 18px rgba(56, 224, 255, .06), 0 0 18px rgba(137, 69, 255, .08);
  transition: color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.portal-link::before, .button::before { content: ""; position: absolute; inset: -4px; border: 1px solid rgba(172, 87, 255, .14); pointer-events: none; }
.portal-link:hover, .button:hover { color: #fff; border-color: var(--pink); box-shadow: inset 0 0 22px rgba(255, 69, 207, .1), 0 0 24px rgba(255, 69, 207, .14); transform: translateY(-2px); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 12px 9px; border: 1px solid var(--line); background: rgba(10, 4, 22, .7); color: #fff; }
.menu-toggle > span:not(.sr-only) { display: block; width: 100%; height: 1px; margin: 5px 0; background: currentColor; }

main, .site-footer { position: relative; z-index: 2; }
.hero {
  position: relative; min-height: 100svh; max-width: var(--max); margin: 0 auto; padding: calc(var(--header) + 3rem) 24px 7rem;
  display: grid; place-items: center; text-align: center;
}
.hero-copy { position: relative; z-index: 3; width: 100%; max-width: 940px; text-shadow: 0 2px 24px rgba(3, 1, 8, .95); }
.hero .eyebrow, .hero-actions { justify-content: center; }
.hero h1 { max-width: none; font-size: clamp(5rem, 13.6vw, 10.8rem); }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.35rem; color: var(--cyan); font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow span { width: 25px; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--pink)); box-shadow: 0 0 8px var(--cyan); }
h1, h2 { margin: 0; font-family: "Arial Narrow", "Helvetica Neue", sans-serif; font-weight: 800; letter-spacing: -.055em; text-transform: uppercase; line-height: .88; }
h1 { max-width: 760px; font-size: clamp(4.6rem, 10vw, 9.8rem); }
h1 em { position: relative; color: transparent; font-style: normal; -webkit-text-stroke: 1.5px rgba(217, 181, 255, .9); text-shadow: 0 0 30px rgba(183, 83, 255, .34); }
h1 em::after { content: "electric."; position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 1px var(--cyan); clip-path: inset(51% 0 25% 0); transform: translateX(4px); opacity: .75; }
.hero-deck { max-width: 640px; margin: 2rem auto 0; color: #e2dceb; font-size: clamp(1.03rem, 1.6vw, 1.3rem); text-shadow: 0 1px 5px #05020c, 0 0 24px #05020c; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; margin-top: 2.4rem; }
.button { min-width: 218px; padding: 1rem 1.2rem; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.button-primary { border-color: rgba(71, 235, 255, .7); background: linear-gradient(135deg, rgba(33, 220, 255, .16), rgba(171, 66, 255, .16)); }
.text-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 0; border-bottom: 1px solid rgba(208, 177, 255, .4); color: #d8d0e5; font-size: .875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.text-link:hover { color: var(--pink); border-color: var(--pink); }
.jelly-backdrop { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 1; overflow: hidden; pointer-events: none; opacity: .84; }
.jelly-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 2, 12, .24), transparent 32%, rgba(5, 2, 12, .2)); }
.jelly-fallback { position: absolute; width: min(94%, 900px); height: 94%; top: 3%; left: 0; right: 0; margin-inline: auto; object-fit: contain; pointer-events: none; filter: saturate(1.25) drop-shadow(0 0 34px rgba(85, 222, 255, .4)); animation: hero-float 9s ease-in-out infinite; }
.jelly-scene { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.jelly-backdrop.is-ready .jelly-scene { opacity: 1; }
.jelly-backdrop.is-ready .jelly-fallback { visibility: hidden; animation: none; }
.hero.is-dragging { cursor: grabbing; user-select: none; }
.scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .8rem; color: #a39aad; font: 700 .75rem/1 ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.scroll-cue span { width: 35px; height: 1px; background: #746d83; }

.section-shell { max-width: var(--max); margin: 0 auto; padding: 8rem 24px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header) + 1rem); }
.work-copy, .studio-grid { text-shadow: 0 1px 8px #05020c, 0 0 28px #05020c; }
.work-grid > *, .studio-grid > *, .signal-card > *, .login-main > * { min-width: 0; }
.section-index { display: flex; align-items: center; gap: 1rem; margin-bottom: 4rem; color: #777083; font: 700 .65rem/1 ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
.section-index span { color: var(--pink); }
.work-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); }
h2 { font-size: clamp(3rem, 7vw, 6.6rem); }
.work-copy > p:not(.eyebrow), .studio-copy p, .signal-copy > p:not(.eyebrow) { color: #b9b0c8; font-size: 1.05rem; }
.project-meta { margin-top: 3rem; border-top: 1px solid var(--line); }
.project-meta div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.project-meta small { color: #777083; font: 700 .65rem/1.5 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.project-meta strong { font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; }
.project-panel { position: relative; min-height: 620px; overflow: hidden; border: 1px solid rgba(98, 231, 255, .28); background: linear-gradient(155deg, rgba(22, 9, 43, .75), rgba(5, 2, 12, .3)); box-shadow: inset 0 0 70px rgba(113, 44, 183, .08), 0 0 50px rgba(80, 48, 140, .1); }
.project-panel::before, .signal-card::before, .contact-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(181, 102, 255, .12); pointer-events: none; }
.project-panel::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.013) 5px 6px); mix-blend-mode: screen; pointer-events: none; }
.panel-top { display: flex; justify-content: space-between; padding: 1.2rem 1.35rem; border-bottom: 1px solid var(--line); color: #8f879b; font: 700 .62rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.status-pulse { color: var(--cyan); }.status-pulse::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .45rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 1.7s ease-out infinite; }
.radar { position: absolute; width: min(72%, 360px); aspect-ratio: 1; top: 18%; left: 50%; transform: translateX(-50%); border: 1px solid rgba(59, 238, 255, .3); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 42px, rgba(130, 91, 183, .12) 43px 44px); }
.radar::before, .radar::after { content: ""; position: absolute; background: rgba(64, 228, 255, .16); }
.radar::before { width: 1px; height: 100%; left: 50%; }.radar::after { height: 1px; width: 100%; top: 50%; }
.radar span { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 78%, rgba(54, 237, 255, .2) 92%, transparent 100%); animation: radar-spin 4s linear infinite; }
.radar i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 15px var(--pink); }
.radar i:nth-of-type(1){ left: 27%; top: 39%; }.radar i:nth-of-type(2){ right: 24%; top: 25%; }.radar i:nth-of-type(3){ right: 38%; bottom: 18%; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); }
.panel-bottom { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.panel-bottom strong { color: transparent; font-family: "Arial Narrow", sans-serif; font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 800; letter-spacing: -.06em; line-height: .78; -webkit-text-stroke: 1px rgba(224, 195, 255, .5); }
.panel-bottom small { max-width: 150px; color: #81798e; font: 700 .62rem/1.5 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }

.signal-card { position: relative; min-height: 420px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; overflow: hidden; padding: clamp(2rem, 6vw, 5rem); border: 1px solid var(--line); background: linear-gradient(110deg, rgba(14, 7, 29, .78), rgba(32, 9, 48, .5)); }
.signal-copy { max-width: 620px; position: relative; z-index: 2; }.signal-copy h2 { font-size: clamp(3rem, 6vw, 5.8rem); }
.waveform { display: flex; align-items: center; justify-content: center; gap: 9px; height: 180px; transform: skewX(-8deg); }
.waveform i { width: 3px; height: 15%; background: linear-gradient(var(--cyan), var(--violet), var(--pink)); box-shadow: 0 0 12px rgba(65, 230, 255, .7); animation: wave 1.8s ease-in-out infinite alternate; }
.waveform i:nth-child(2n){ animation-delay: -.3s; }.waveform i:nth-child(3n){ animation-delay: -.7s; }.waveform i:nth-child(4n){ animation-delay: -1.1s; }
.coming-tag { position: absolute; right: 2rem; bottom: 1.6rem; color: #777083; font: 700 .6rem/1 ui-monospace, monospace; letter-spacing: .15em; }

.studio-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(3rem, 9vw, 9rem); }
.studio-copy { padding-top: 2rem; }.studio-copy p { margin: 0 0 1.4rem; }
.contact-section { border-top-color: transparent; padding-top: 3rem; }
.contact-card { position: relative; padding: clamp(2.2rem, 7vw, 6rem); border: 1px solid rgba(72, 230, 255, .33); background: radial-gradient(circle at 90% 10%, rgba(127, 52, 230, .24), transparent 33%), rgba(11, 5, 24, .78); box-shadow: 0 0 70px rgba(84, 42, 169, .12); }
.contact-card h2 { font-size: clamp(4rem, 10vw, 9rem); }
.contact-email { display: inline-block; max-width: 100%; min-height: 44px; margin: 2.7rem 0 4rem; padding-bottom: .3rem; border-bottom: 1px solid rgba(68, 238, 255, .5); color: var(--cyan); font-size: clamp(1rem, 2vw, 1.45rem); font-weight: 700; overflow-wrap: anywhere; }
.contact-email:hover { color: var(--pink); border-color: var(--pink); }
.contact-details { display: flex; gap: clamp(3rem, 10vw, 8rem); }
.contact-details div { display: flex; flex-direction: column; }.contact-details small { margin-bottom: .6rem; color: #756d84; font: 700 .62rem/1 ui-monospace, monospace; letter-spacing: .15em; text-transform: uppercase; }
.contact-details a, .contact-details address { color: #c7becf; font-style: normal; }

.site-footer { max-width: var(--max); margin: 0 auto; padding: 3rem 24px 4rem; display: flex; align-items: end; justify-content: space-between; gap: 3rem; border-top: 1px solid var(--line); }
.footer-legal { display: flex; flex-direction: column; align-items: end; gap: .7rem; color: #70697c; font-size: .72rem; }
.footer-legal nav { display: flex; gap: 1.2rem; }.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }.footer-legal a:hover { color: var(--cyan); }

.reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Login and legal pages */
.subpage { min-height: 100svh; display: flex; flex-direction: column; }
.subpage .site-header { position: relative; }
.subpage main { flex: 1; }
.login-main { min-height: calc(100svh - var(--header)); display: grid; grid-template-columns: 1fr 1fr; max-width: var(--max); width: 100%; margin: 0 auto; padding: 4rem 24px 7rem; gap: clamp(3rem, 9vw, 8rem); align-items: center; }
.login-copy h1 { font-size: clamp(4rem, 9vw, 8rem); }.login-copy p:not(.eyebrow) { max-width: 520px; color: #a79eb4; font-size: 1.05rem; }
.login-box { position: relative; padding: clamp(1.8rem, 5vw, 3.5rem); border: 1px solid rgba(63, 232, 255, .3); background: rgba(11, 5, 25, .82); box-shadow: 0 0 70px rgba(114, 40, 202, .13); backdrop-filter: blur(18px); }
.login-box::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(178, 92, 255, .1); pointer-events: none; }
.login-box h2 { font-size: 2.35rem; letter-spacing: -.035em; }.form-note { margin: .7rem 0 2rem; color: #8f869c; }
.field { display: block; margin-bottom: 1.2rem; }.field span { display: block; margin-bottom: .5rem; color: #afa6ba; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.field input { width: 100%; min-height: 52px; padding: .85rem 1rem; border: 1px solid var(--line); outline: none; color: #fff; background: rgba(3, 1, 8, .6); transition: border .2s, box-shadow .2s; }
.field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(54, 237, 255, .08), 0 0 18px rgba(54, 237, 255, .09); }
.login-box .button { width: 100%; margin-top: .5rem; cursor: pointer; }
.form-message { min-height: 1.5rem; margin: 1rem 0 0; color: #ff78db; font-size: .85rem; }
.security-note { display: flex; gap: .7rem; align-items: start; margin-top: 2rem; color: #70697c; font-size: .74rem; }.security-note span { color: var(--cyan); }
.back-link { display: inline-flex; gap: .6rem; margin-top: 2rem; color: #9f95ac; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.back-link:hover { color: var(--cyan); }
.legal-main { max-width: 860px; width: 100%; margin: 0 auto; padding: 6rem 24px 9rem; }
.legal-main h1 { font-size: clamp(4rem, 10vw, 7rem); }.legal-main .updated { margin: 1.3rem 0 4rem; color: #7d7489; font: 700 .65rem/1 ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.legal-main article { color: #bdb4c8; }.legal-main h2 { margin: 2.8rem 0 1rem; color: #efeaff; font-size: 1.55rem; letter-spacing: -.01em; line-height: 1.2; }.legal-main a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

@keyframes hero-float { 0%,100% { transform: translate3d(-12px,-12px,0) rotate(-1deg) scale(.98); } 50% { transform: translate3d(16px,16px,0) rotate(1deg) scale(1.025); } }
@keyframes gentle-jelly { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.01); opacity: 1; } }
@keyframes breathe { to { transform: scale(1.12); opacity: .72; } }
@keyframes drift-a { from { transform: translate3d(-10px,30px,0) rotate(-8deg); } to { transform: translate3d(75px,-80px,0) rotate(8deg); } }
@keyframes drift-b { from { transform: translate3d(0,0,0) rotate(14deg); } to { transform: translate3d(-65px,-100px,0) rotate(-5deg); } }
@keyframes drift-c { 0% { transform: translateY(40vh) rotate(0); } 100% { transform: translateY(-130vh) rotate(22deg); } }
@keyframes spin { to { transform: rotate(378deg) skewX(14deg); } }
@keyframes radar-spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(54,237,255,.6); } 100% { box-shadow: 0 0 0 12px rgba(54,237,255,0); } }
@keyframes wave { 0% { height: 12%; opacity: .45; } 100% { height: 92%; opacity: 1; } }

@media (max-width: 900px) {
  :root { --header: 76px; }
  .site-header { padding-inline: 20px; }
  .menu-toggle { display: block; }
  .primary-nav { position: absolute; top: calc(100% - 1px); left: 0; right: 0; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 1rem 20px 1.4rem; background: rgba(5,2,12,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(20px); }
  .primary-nav.is-open { display: flex; }.primary-nav a { padding: 1rem; border-bottom: 1px solid var(--line); }.primary-nav .portal-link { margin-top: .8rem; }
  .hero { padding-top: calc(var(--header) + 3rem); padding-bottom: 4rem; }
  .scroll-cue { display: none; }
  .work-grid, .studio-grid, .signal-card, .login-main { grid-template-columns: 1fr; }
  .project-panel { min-height: 560px; }.signal-card { gap: 0; }.waveform { opacity: .4; }
  .login-main { padding-top: 3rem; }.login-copy { text-align: center; }.login-copy .eyebrow { justify-content: center; }.login-copy p:not(.eyebrow) { margin-inline: auto; }
}

@media (max-width: 600px) {
  .site-header { gap: 1rem; padding-inline: max(18px, env(safe-area-inset-left)); }
  .brand { gap: .6rem; }.brand-text strong { font-size: .78rem; letter-spacing: .12em; }
  .menu-toggle { flex: 0 0 44px; }
  .subpage .site-header { height: auto; min-height: var(--header); flex-wrap: wrap; padding-block: 1rem; }
  .subpage .site-header .portal-link { font-size: .875rem; }
  .brand-text small { display: none; }
  .hero h1, h1 { font-size: clamp(3.25rem, 18vw, 6.4rem); }
  h2 { font-size: clamp(2.35rem, 10vw, 3.6rem); }
  .section-shell { padding: 5rem 18px; }.section-index { margin-bottom: 2.8rem; }
  .hero { padding-inline: 18px; padding-top: calc(var(--header) + 2.5rem); }.hero-actions { flex-direction: column; gap: 1.1rem; }.hero-actions .button { width: min(100%, 330px); }
  .hero .eyebrow { font-size: .75rem; letter-spacing: .12em; }
  .hero-deck { max-width: 32rem; margin-top: 1.5rem; font-size: 1rem; line-height: 1.7; }
  .hero-actions { margin-top: 1.8rem; }.button { font-size: .875rem; }
  .project-meta div { grid-template-columns: 5rem minmax(0, 1fr); }
  .panel-top { flex-wrap: wrap; gap: 1rem; }
  .project-panel { min-height: 500px; }.panel-bottom { left: 1.3rem; right: 1.3rem; flex-direction: column; align-items: start; }.panel-bottom small { max-width: 220px; }.panel-bottom strong { font-size: 3.7rem; }
  .signal-card { padding: 2rem 1.5rem; }.signal-copy h2 { font-size: clamp(2.35rem, 10vw, 3.6rem); }.waveform { height: 120px; gap: 6px; }
  .contact-card { padding: 2rem 1.5rem; }.contact-card h2 { font-size: clamp(3rem, 14vw, 5rem); }
  .contact-details { flex-direction: column; gap: 2rem; }.contact-details a { display: inline-flex; align-items: center; min-height: 44px; }.contact-email { margin-bottom: 3rem; }
  .login-copy h1, .legal-main h1 { font-size: clamp(3rem, 15vw, 5.5rem); overflow-wrap: anywhere; }
  .legal-main article { overflow-wrap: anywhere; }
  .site-footer { align-items: start; flex-direction: column; }.footer-legal { align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .jelly-backdrop:not(.is-ready) .jelly-fallback { animation: gentle-jelly 18s ease-in-out infinite !important; }
}