/* underent — brand book v2.0 tokens */
:root {
  --asphalt: #23262a;
  --night: #1a1c1f;
  --basement: #0d0d0c;
  --violet: #4b1f73;
  --violet-lift: #6a33a3;
  --bone: #ecebe5;
  --acid: #c8f34a;
  --muted: #a3a7ad;
  --line: #3a3d42;
  --sans: "Onest", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(20px, 5.5vw, 80px);
  --max: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--asphalt); color: var(--bone); -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--muted); text-underline-offset: 3px; }
a:hover { color: var(--acid); }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--acid); color: var(--basement); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.data { font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; color: var(--muted); }

/* voice and headline styles */
.voice { font-weight: 700; letter-spacing: -0.03em; line-height: 0.95; text-wrap: balance; }
.voice-xl { font-size: clamp(56px, 8.5vw, 124px); }
.voice-l { font-size: clamp(40px, 5.4vw, 72px); }
.voice-m { font-size: clamp(30px, 3.4vw, 44px); }
.headline { font-weight: 900; font-stretch: 62%; text-transform: uppercase; letter-spacing: 0; line-height: 0.92; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(35, 38, 42, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; }
.logo { display: flex; align-items: center; flex: none; }
.logo img, .logo-svg { display: block; height: 46px; width: auto; overflow: visible; }
.nav { display: flex; align-items: center; gap: 28px; font-family: var(--mono); font-size: 14px; }
.nav a { text-decoration: none; }
.nav a[aria-current="page"] { color: var(--acid); }
.langs { display: flex; gap: 10px; color: var(--muted); }
.langs a { text-decoration: none; }
.langs a[aria-current="true"] { color: var(--acid); }
.btn { --fill: var(--acid); --on: var(--basement); display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--bone); color: var(--bone); cursor: pointer;
  /* hover: the fill sweeps in from the left; text flips to the colour that reads on it */
  background: linear-gradient(var(--fill), var(--fill)) 0 0 / 0% 100% no-repeat transparent;
  transition: background-size .38s cubic-bezier(.7, 0, .2, 1), color .18s .06s, border-color .18s; }
.btn-acid { --fill: var(--bone); background-color: var(--acid); border-color: var(--acid); color: var(--basement); }
.btn-ghost { border-color: var(--muted); }
a.btn:hover, button.btn:hover:not(:disabled), .btn:focus-visible,
.nav a.btn:hover, .nav a.btn[aria-current]:hover { background-size: 100% 100%; color: var(--on); border-color: var(--fill); }
.nav a.btn[aria-current="page"] { border-color: var(--acid); }
.menu-toggle { display: none; }

/* textures (brand book v2, section 06) */
.t2 { position: relative; background: radial-gradient(ellipse 55% 70% at 80% 15%, rgba(106, 51, 163, 0.5), rgba(35, 38, 42, 0) 70%); }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.14; background-image: url("/assets/grain.svg"); }
.t4 { background: repeating-radial-gradient(circle at 50% 58%, rgba(106, 51, 163, 0) 0 26px, rgba(106, 51, 163, 0.42) 26px 28px), var(--asphalt); }
.t6 { background: radial-gradient(circle, rgba(236, 235, 229, 0.09) 1.6px, rgba(0, 0, 0, 0) 2px) 0 0 / 18px 18px, var(--violet); }
.t7 { background: repeating-linear-gradient(0deg, rgba(236, 235, 229, 0.035) 0 1px, rgba(0, 0, 0, 0) 1px 4px), var(--basement); }

/* sections */
section { position: relative; }
.band { padding-block: clamp(48px, 6vw, 88px); }
.band-basement { background: var(--basement); }
.band-violet { background: var(--violet); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 88px); align-items: center; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.lead { font-size: clamp(18px, 1.5vw, 21px); max-width: 34em; }
.prose { display: flex; flex-direction: column; gap: 18px; max-width: 42em; font-size: 18px; }

/* hero */
.hero { overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; min-height: min(620px, calc(100svh - 76px)); padding-block: 48px; align-items: end; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; padding-bottom: 8px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.hero-art { display: flex; align-items: flex-end; justify-content: center; gap: clamp(16px, 4vw, 56px); }
.hero-art { min-width: 0; }
.hero-art img { width: 100%; max-width: 560px; height: auto; }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.facts dt { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.facts dd { margin: 0; font-family: var(--mono); font-size: 16px; }
.art-panel { display: flex; align-items: center; justify-content: center; min-height: 340px; }
.art-panel img { max-height: 320px; width: auto; }

/* packages */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px; min-height: 0; border: 1px solid var(--line); }
.card-violet { background: var(--violet); border-color: var(--violet); }
.card-basement { background: var(--basement); border-color: var(--basement); }
.card h3 { font-size: clamp(40px, 4vw, 56px); }
.card .who { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.card-violet .who { color: var(--bone); }
.price { border-top: 1px solid var(--line); padding-top: 18px; font-family: var(--mono); }
.card-violet .price { border-color: rgba(236, 235, 229, 0.35); }
.price strong { display: block; font-size: 24px; font-weight: 500; }
.price span { font-size: 13px; color: var(--muted); }
.card-violet .price span { color: var(--bone); }
.includes { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.terms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 48px; color: var(--muted); max-width: 64em; }
.terms li { padding-left: 18px; position: relative; }
.terms li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1px; background: var(--muted); }

/* rig table */
.rig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
.rig h2 { font-size: 22px; letter-spacing: -0.01em; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rig table { width: 100%; border-collapse: collapse; }
.rig th { text-align: left; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); padding: 12px 12px 8px 0; }
.rig td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rig td:first-child { font-weight: 700; }
.rig td.q, .rig td.s { font-family: var(--mono); font-size: 14px; }
.rig td.q { width: 48px; }

/* season */
.season { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.season div { padding: 22px 0 0; border-top: 1px solid rgba(236, 235, 229, 0.4); display: flex; flex-direction: column; gap: 10px; }
.season .m { font-family: var(--mono); font-size: 18px; }
.season .p { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }

/* cities */

/* recording */
.rec-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--acid); margin-right: 10px; vertical-align: middle; }
.kit { list-style: none; margin: 0; padding: 0; }
.kit li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 15px; }
.kit li span:last-child { color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.steps li { counter-increment: s; border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.steps li::before { content: counter(s); font-family: var(--mono); color: var(--muted); }
.steps strong { font-size: 20px; }

/* faq */
.faq { display: flex; flex-direction: column; max-width: 56em; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-family: var(--mono); font-size: 22px; color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 24px; max-width: 42em; color: var(--bone); }

/* form */
.quote { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); }
form.q { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-content: start; }
form.q label, form.q fieldset { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
form.q .wide { grid-column: span 2; }
form.q input, form.q select, form.q textarea { width: 100%; min-height: 52px; padding: 12px 16px; background: var(--night); border: 1px solid var(--line); color: var(--bone); font: 16px/1.4 var(--sans); border-radius: 0; }
form.q textarea { min-height: 120px; resize: vertical; }
form.q input:focus, form.q select:focus, form.q textarea:focus { outline: 2px solid var(--acid); outline-offset: 0; border-color: var(--acid); }
form.q fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
form.q fieldset:not(.step) { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
form.q fieldset legend { padding: 0; margin-bottom: 10px; width: 100%; }
form.q fieldset:not(.step) label { flex-direction: row; align-items: center; gap: 10px; font-family: var(--sans); font-size: 16px; color: var(--bone); }
form.q fieldset:not(.step) input { width: 22px; min-height: 22px; height: 22px; accent-color: var(--acid); }
form.q .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.q > button { grid-column: span 2; min-height: 60px; }
.status { grid-column: span 2; min-height: 1.5em; font-size: 16px; }
.status[data-state="ok"] { color: var(--bone); }
.status[data-state="error"] { color: #ff8a73; }
.direct { display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: 15px; }
.req { color: var(--muted); }

/* page head */
.page-head { padding-block: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px); }
.page-head h1 { max-width: 14em; }

/* footer */
.site-footer { background: var(--basement); border-top: 1px solid var(--line); padding-block: 44px 32px; font-size: 15px; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.site-footer h2 { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer a { text-decoration: none; }
.site-footer .base { margin-top: 32px; display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* responsive */
@media (max-width: 1080px) {
  .nav .link { display: none; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .hero .wrap, .split, .quote, .rig { grid-template-columns: 1fr; }
  .hero .wrap { min-height: 0; align-items: start; }
  .hero-art { order: -1; justify-content: flex-start; }
  .hero-art img { max-width: 320px; }
  .season, .steps, .terms { grid-template-columns: 1fr; }
  form.q { grid-template-columns: 1fr; }
  form.q .wide, form.q button, .status { grid-column: auto; }
  .art-panel { min-height: 320px; } .art-panel img { max-height: 300px; }
  .nav .btn { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .facts { grid-template-columns: 1fr; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .site-footer .base { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* mobile menu */
.mnav { display: none; position: relative; }
.mnav summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--line); }
.mnav summary::-webkit-details-marker { display: none; }
.mnav > div { position: absolute; right: 0; top: 52px; min-width: 220px; display: flex; flex-direction: column; background: var(--basement); border: 1px solid var(--line); padding: 8px 0; }
.mnav > div a { padding: 12px 18px; font-size: 15px; }
@media (max-width: 1080px) { .mnav { display: block; } }
.note { display: none; margin-top: 24px; font-size: 18px; }
.note:target { display: block; }
.nw { white-space: nowrap; }

/* booking builder */
.builder-page { display: flex; flex-direction: column; gap: 32px; }
.builder-page .intro { max-width: 52em; }
form.builder { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: clamp(32px, 5vw, 72px); row-gap: 32px; }
form.builder > * { grid-column: 1; }
form.builder > .side { grid-column: 2; grid-row: 1 / span 8; align-self: start; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
form.builder > button, form.builder > .status { grid-column: 1; }
form.builder fieldset.step { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px; }
form.builder legend { display: flex; align-items: baseline; gap: 12px; font-family: var(--sans); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--bone); margin-bottom: 8px; }
form.builder legend .n { font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--muted); }
.rig-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
form.q .rig-opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border: 1px solid var(--line); cursor: pointer; color: var(--bone); font-family: var(--sans); }
form.q .rig-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.rig-opt:has(input:checked) { background: var(--violet); border-color: var(--violet); }
.rig-opt:has(input:focus-visible) { outline: 2px solid var(--acid); outline-offset: 2px; }
.rig-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.rig-comp { font-family: var(--mono); font-size: 13px; }
.rig-who { font-size: 14px; color: var(--muted); }
.rig-opt:has(input:checked) .rig-who { color: var(--bone); }
form.q label.check { flex-direction: row; align-items: center; gap: 12px; font-family: var(--sans); font-size: 16px; color: var(--bone); }
form.q label.check input { width: 22px; min-height: 22px; height: 22px; padding: 0; accent-color: var(--acid); }
.checks { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.cal { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 380px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; font-size: 18px; }
.cal-head strong { text-transform: capitalize; }
.nav-m { width: 44px; height: 44px; background: none; border: 1px solid var(--line); color: var(--bone); font-size: 22px; cursor: pointer; }
.nav-m:disabled { opacity: 0.3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-grid .wd { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: center; padding-bottom: 4px; text-transform: lowercase; }
.day { aspect-ratio: 1; min-height: 36px; background: var(--night); border: 1px solid var(--line); color: var(--bone); font-family: var(--mono); font-size: 14px; cursor: pointer; }
.day:hover:not(:disabled) { border-color: var(--bone); }
.day.fits { border: 1px dashed var(--violet-lift); }
.day.booked { color: var(--muted); text-decoration: line-through; opacity: 0.45; cursor: not-allowed; }
.day.past { opacity: 0.2; cursor: default; }
.day.sel { background: var(--bone); border-color: var(--bone); color: var(--basement); }
.cal-legend { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.cal-legend span { display: flex; align-items: center; gap: 10px; }
.cal-legend .k { display: inline-block; flex: none; width: 14px; height: 14px; border: 1px solid var(--line); background: var(--night); }
.cal-legend .k.fits { border: 1px dashed var(--violet-lift); }
.cal-legend .k.booked { opacity: 0.45; }
.cal-msg { font-size: 15px; min-height: 1.5em; color: var(--muted); }
.cal-msg[data-state="ok"] { color: var(--bone); }
.cal-msg[data-state="warn"] { color: #ff8a73; }

.stage { background: var(--basement); border: 1px solid var(--line); padding: 20px 16px 8px; }
.stage:empty { display: none; }
.stage svg { width: 100%; height: auto; display: block; }
.stage .bx { fill: var(--violet); stroke: var(--violet-lift); stroke-width: 1.5; }
.stage .hn { fill: var(--bone); opacity: 0.85; }
.stage .cone { fill: var(--basement); stroke: var(--violet-lift); }
.stage .stand { stroke: var(--muted); stroke-width: 2; }
.stage .floor { stroke: var(--line); stroke-width: 2; }
.stage .desk { fill: var(--muted); }
.summary { display: flex; flex-direction: column; gap: 20px; padding: 24px; border: 1px solid var(--line); background: var(--night); }
.summary:empty { display: none; }
.summary h3 { font-size: 26px; margin: 6px 0 12px; }
.summary .comp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.summary .comp span { font-family: var(--mono); display: inline-block; min-width: 2.4em; }
.summary .nums { display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.summary .nums dt { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.summary .nums dd { margin: 4px 0 0; font-family: var(--mono); font-size: 16px; }
.summary .est { padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.summary .est strong { font-family: var(--mono); font-size: 28px; font-weight: 500; }
.summary .est span { font-size: 15px; color: var(--muted); }

@media (max-width: 960px) {
  form.builder { grid-template-columns: 1fr; }
  form.builder > .side { grid-column: 1; grid-row: auto; position: static; order: 1; }
  form.builder > fieldset.step:first-of-type { order: 0; }
  form.builder > * { order: 2; }
  form.builder > fieldset.step:first-of-type, form.builder > .hp, form.builder > input[type="hidden"] { order: 0; }
  form.builder > .side { order: 1; }
}
@media (max-width: 620px) {
  .rig-opts, .row2 { grid-template-columns: 1fr; }
}

/* promoter kit */
.kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.kit-tile { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); }
.kit-ground { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 4vw, 56px); min-height: 180px; }
.kit-ground img { width: 100%; max-width: 420px; }
.kit-tile figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 14px 16px; font-size: 15px; }
.kit-dl { display: flex; gap: 14px; font-family: var(--mono); font-size: 13px; }
.kit-lines { list-style: none; margin: 0; padding: 0; }
.kit-lines li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.kit-lines .btn { min-height: 40px; padding: 0 16px; font-size: 12px; }
@media (max-width: 820px) { .kit-grid { grid-template-columns: 1fr; } }

/* club teaser */
.club { border-block: 1px solid var(--line); padding-block: clamp(36px, 4.5vw, 64px); }
.club .split { align-items: end; }

/* add-on cards */
.addon-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
form.q .addon { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 16px 18px; border: 1px solid var(--line); background: var(--night); cursor: pointer; color: var(--bone); font-family: var(--sans); transition: border-color .15s, background-color .15s; }
form.q .addon input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.addon:hover { border-color: var(--muted); }
.addon:has(input:focus-visible) { outline: 2px solid var(--acid); outline-offset: 2px; }
.addon:has(input:checked) { border-color: var(--bone); background: #26292e; }
.addon-art { display: block; width: 100%; padding: 6px 0 10px; color: var(--muted); }
.addon:has(input:checked) .addon-art { color: var(--bone); }
.addon-art svg { width: 100%; max-width: 150px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; }
.addon-art svg .rec { fill: currentColor; stroke: none; }
.addon-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; padding-right: 28px; }
.addon-spec { font-family: var(--mono); font-size: 12px; color: var(--bone); }
.addon-desc { font-size: 14px; color: var(--muted); line-height: 1.4; }
.addon-tick { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border: 1px solid var(--muted); border-radius: 50%; }
.addon:has(input:checked) .addon-tick { background: var(--bone); border-color: var(--bone); }
.addon:has(input:checked) .addon-tick::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid var(--basement); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.addon:has(input:invalid) { border-color: var(--violet-lift); }
@media (max-width: 1100px) { .addon-opts { grid-template-columns: 1fr; } .addon { display: grid !important; grid-template-columns: 110px 1fr; column-gap: 16px; } .addon-art { grid-row: span 3; padding: 0; } }

/* ---------- configurator v3: sound cards, DJ cart, regional prices ---------- */
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-art { background: var(--basement); border: 1px solid rgba(236, 235, 229, 0.08); padding: 14px 12px 8px; }
.card-violet .card-art { background: rgba(13, 13, 12, 0.35); }
.card-art svg, .rig-art svg { width: 100%; height: auto; display: block; }
/* 3D renders: one frame size for every rig so the cards line up; the floor sits on the bottom edge */
.card-art img, .rig-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; object-position: 50% 100%; }
.addon-art img { display: block; width: 100%; max-width: 260px; height: auto; aspect-ratio: 2 / 1; object-fit: contain; object-position: 0 50%; }
.card-art .bx, .rig-art .bx, .stage .bx { fill: var(--violet); stroke: var(--violet-lift); stroke-width: 1.5; }
.card-art .hn, .rig-art .hn { fill: var(--bone); opacity: 0.85; }
.card-art .cone, .rig-art .cone { fill: var(--basement); stroke: var(--violet-lift); }
.card-art .stand, .rig-art .stand { stroke: var(--muted); stroke-width: 2; }
.card-art .floor, .rig-art .floor { stroke: var(--line); stroke-width: 2; }
.card-art .desk, .rig-art .desk { fill: var(--muted); }
.tag { align-self: flex-start; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border: 1px solid currentColor; color: var(--bone); }

form.builder .rig-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
form.q .rig-opt { gap: 8px; padding: 14px 16px 18px; background: var(--night); transition: border-color .15s, background-color .15s, transform .15s; }
form.q .rig-opt:hover { border-color: var(--muted); transform: translateY(-2px); }
.rig-opt .rig-art { position: relative; display: block; width: 100%; background: var(--basement); padding: 12px 10px 6px; margin-bottom: 6px; border: 1px solid rgba(236, 235, 229, 0.06); }
.rig-opt.featured { border-color: var(--violet-lift); }
.rig-opt:has(input:checked) { background: var(--violet); border-color: var(--violet); }
.rig-opt:has(input:checked) .rig-art { background: rgba(13, 13, 12, 0.4); }
.rig-opt:has(input:checked) .bx { fill: #5d2a8c; stroke: var(--bone); }
.rig-name { font-size: 22px; padding-right: 30px; }
.rig-price { margin-top: auto; padding-top: 10px; font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--bone); }
.rig-price small { font-size: 12px; color: var(--muted); font-weight: 400; }
.rig-opt:has(input:checked) .rig-price small { color: var(--bone); }
.tick { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border: 1px solid var(--muted); border-radius: 50%; }
.rig-opt .tick { top: auto; bottom: 18px; }
:is(.rig-opt, .addon):has(input:checked) .tick { background: var(--bone); border-color: var(--bone); }
:is(.rig-opt, .addon):has(input:checked) .tick::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--basement); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.addon .rig-price { font-size: 18px; }
.addon-tick { display: none; }
.no-sound { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--muted); font: 14px var(--mono); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.no-sound:hover { color: var(--bone); }
form.builder.no-sound-mode .no-sound { color: var(--bone); text-decoration: none; }
form.builder.no-sound-mode .no-sound::before { content: "● "; color: var(--muted); }
.dj-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line); }
.dj-head h3 { font-size: 22px; letter-spacing: -0.02em; }
.dj-head p { color: var(--muted); font-size: 15px; }
form.builder .addon-opts.dj, form.builder .addon-opts.rec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
form.builder .addon-opts.rec { grid-template-columns: minmax(0, 1fr); max-width: 50%; }
.addon .addon-art svg { max-width: 190px; }

.summary .cart { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.summary .cart li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.summary .cart .nm { display: flex; flex-direction: column; gap: 2px; font-size: 16px; font-weight: 700; }
.summary .cart small { font: 12px var(--mono); color: var(--muted); font-weight: 400; }
.summary .cart .pr { font-family: var(--mono); font-size: 16px; white-space: nowrap; }
.summary .total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; }
.summary .total span { color: var(--muted); font-size: 15px; }
.summary .total strong { font-family: var(--mono); font-size: 32px; font-weight: 500; }
.summary .to-eur { display: flex; justify-content: flex-end; margin-top: 7px; font: 11px var(--mono); color: var(--muted); }
.summary .eur-btn { appearance: none; border: 0; border-bottom: 1px solid rgba(244,242,235,.28); padding: 3px 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; text-transform: lowercase; transition: color .2s, border-color .2s; }
.summary .eur-btn:hover, .summary .eur-btn:focus-visible { color: var(--bone); border-color: var(--acid); }
.summary .note-s { font-size: 14px; color: var(--muted); margin-top: 6px; }
.summary .region { margin-top: 12px; }

@media (max-width: 1240px) { .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  form.builder .addon-opts.dj, form.builder .addon-opts.rec { grid-template-columns: 1fr; max-width: none; }
}
@media (max-width: 620px) {
  .cards-4, form.builder .rig-opts { grid-template-columns: 1fr; }
}
.cards-4 .card h3 { font-size: clamp(28px, 2.5vw, 40px); overflow-wrap: anywhere; hyphens: auto; }
.cards-4 .card { padding: 24px; }

/* two sites */
.offseason { max-width: 34em; padding: 12px 16px; border-left: 2px solid var(--violet-lift); background: rgba(75, 31, 115, 0.25); font-size: 16px; }
.day.away { background: transparent; border-style: dashed; color: var(--muted); opacity: 0.55; cursor: not-allowed; }
.cal-legend .k.away { border-style: dashed; background: transparent; }

.city-hint { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.city-hint[data-state="ok"] { color: var(--bone); }

/* live 3D stage */
.stage.is-3d { position: relative; padding: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.stage3d { position: absolute; inset: 0; }
.stage3d canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.stage3d canvas:active { cursor: grabbing; }
.stage-hint { position: absolute; left: 12px; bottom: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); pointer-events: none; }

/* ---- package cards: same rows in every card (subgrid), so pictures, names, kit, drive, price and buttons line up */
.pkgs { grid-auto-rows: auto; align-items: start; }
.pkgs .pkg { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 14px; gap: 14px 0; min-height: 0; justify-content: stretch; }
.pkg .card-art { position: relative; margin-bottom: 6px; }
.pkg .who { align-self: end; margin: 0; }
.pkg h3 { margin: 0; align-self: start; }
.pkg .spec { font-family: var(--mono); font-size: 13px; line-height: 1.65; }
.kit-list { list-style: none; margin: 0; padding: 0; }
.kit-list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-list .q { display: inline-block; min-width: 2.4ch; color: var(--muted); }
.pkg .kw { margin: 6px 0 0; color: var(--muted); }
.pkg .drive { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--muted); }
.pkg .drive span { display: block; color: var(--bone); opacity: 0.6; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.pkg .desc { margin: 0; align-self: start; }
.pkg .price { align-self: end; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; padding-top: 16px; }
.pkg .price strong { display: inline; font-size: clamp(22px, 1.8vw, 28px); font-weight: 500; }
.pkg .price .from, .pkg .price .per { font-size: 13px; color: var(--muted); }
.card-violet .kit-list .q, .card-violet .pkg .kw, .card-violet .drive, .card-violet.pkg .kw, .card-violet.pkg .drive, .card-violet.pkg .price .from, .card-violet.pkg .price .per { color: rgba(236, 235, 229, 0.75); }
.pkg .btn { align-self: end; text-align: center; }
/* featured label sits on the picture, so every card keeps the same rows */
.tag-acid { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--acid); border-color: var(--acid); color: var(--basement); font-weight: 700; }
.rig-opt .rig-art .tag-acid { top: 8px; left: 8px; }
@media (max-width: 1240px) { .pkg .price strong { font-size: 26px; } }
/* recording add-ons: two cards side by side, like the DJ gear */
form.builder .addon-opts.rec { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
@media (max-width: 700px) { form.builder .addon-opts.rec { grid-template-columns: 1fr; } }


/* ---------- background: faint wave lines on every asphalt surface ---------- */
body { position: relative; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("/assets/bg-lines.svg") 50% 0 / cover no-repeat; opacity: 0.9; }
@media (max-width: 700px) { body::before { background-size: 220% auto; background-position: 30% 0; } }

/* ---------- currency switch (underent.rs) ---------- */
.money-note { color: var(--muted); font-size: 14px; max-width: 52em; }

/* ---------- builder: date step, calendar beside the inputs ---------- */
.date-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 32px; }
.date-grid .cal { flex: 1 1 300px; }
.date-side { flex: 1 1 200px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.date-side .cal-msg { margin: 0; }
.date-side .cal-legend { padding-top: 14px; border-top: 1px solid var(--line); }
.cal:not([hidden]) + .date-side { padding-top: 54px; }   /* line up with the first row of days */
@media (max-width: 620px) { .cal:not([hidden]) + .date-side { padding-top: 0; } .date-side .cal-legend { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; } }

/* ---------- packages page: add-on rows ---------- */
.addon-rows { display: flex; flex-direction: column; gap: 18px; }
.row-title { font-size: 22px; letter-spacing: -0.02em; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line); }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-2 .card-art img { aspect-ratio: 2 / 1; object-position: 50% 50%; }
.cards-2 .card h3 { font-size: clamp(30px, 3vw, 44px); }
@media (max-width: 1080px) { .cards.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cards.cards-2 { grid-template-columns: 1fr; } }

/* ---------- rig page: one row per device, columns line up across the page ---------- */
.rig-jump { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--mono); font-size: 14px; margin-top: 4px; }
.rig-jump a { text-decoration: none; color: var(--muted); }
.rig-jump a:hover { color: var(--acid); }
.rig-group { scroll-margin-top: 76px; }
.rig-group-head, .dev { display: grid; grid-template-columns: 170px minmax(0, 0.9fr) minmax(0, 1.4fr); column-gap: clamp(24px, 3.5vw, 48px); }
.rig-group-head { align-items: end; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.rig-group-head h2 { grid-column: 1 / span 2; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.03em; }
.rig-group-head p { grid-column: 3; color: var(--muted); max-width: 40em; }
.rig-group-head .rig-group-art { grid-column: 1; grid-row: 2; margin-top: 16px; }
.rig-group-art img { width: 100%; height: auto; }
.dev { padding: 24px 0; border-bottom: 1px solid var(--line); align-items: start; }
.dev-art img { width: 100%; height: 140px; object-fit: contain; object-position: 50% 100%; }
.dev-qty { font-family: var(--mono); font-size: 14px; color: var(--acid); margin-bottom: 6px; }
.dev-head h3 { font-size: clamp(20px, 1.7vw, 24px); letter-spacing: -0.02em; line-height: 1.12; }
.dev-role { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.45; max-width: 30em; }
.dev-pending { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); border-left: 2px solid var(--violet-lift); padding-left: 10px; }
.dev-spec { margin: 0; display: flex; flex-direction: column; }
.dev-spec > div { display: grid; grid-template-columns: 11.5em minmax(0, 1fr); gap: 16px; padding: 7px 0; border-top: 1px solid rgba(236, 235, 229, 0.07); }
.dev-spec > div:first-child { border-top: 0; padding-top: 2px; }
.dev-spec dt { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 2px; }
.dev-spec dd { margin: 0; font-family: var(--mono); font-size: 14px; line-height: 1.45; }
.dev-short { font-family: var(--mono); font-size: 14px; color: var(--muted); }
@media (max-width: 900px) {
  .rig-group-head, .dev { grid-template-columns: 1fr; row-gap: 12px; }
  .rig-group-head h2, .rig-group-head p, .rig-group-head .rig-group-art { grid-column: 1; grid-row: auto; }
  .rig-group-head .rig-group-art { max-width: 220px; margin-top: 0; }
  .dev-art:empty { display: none; }
  .dev-art img { width: auto; max-width: 200px; height: 120px; object-position: 0 100%; }
  .dev-spec > div { grid-template-columns: 9.5em minmax(0, 1fr); }
}
.price .money, .rig-price .money { font-size: inherit; color: inherit; }

/* ======================================================================
   v4 — logo kick, live background, aligned builder, city radar, compact add-ons
   ====================================================================== */
:root { --g: 14px; }

/* ---- logo: the cone rings move like a speaker at 124 bpm while hovered */
.cone circle { transform-box: fill-box; transform-origin: center; }
.logo:hover .dot, .logo:focus-visible .dot { animation: kick-dot .484s cubic-bezier(.2, .9, .3, 1) infinite; }
.logo:hover .ring-i, .logo:focus-visible .ring-i { animation: kick-ring .484s cubic-bezier(.2, .9, .3, 1) infinite; }
.logo:hover .ring-o, .logo:focus-visible .ring-o { animation: kick-out .484s ease-out infinite; }
@keyframes kick-dot { 0% { transform: scale(1); } 14% { transform: scale(1.32); } 45% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes kick-ring { 0% { transform: scale(1); } 16% { transform: scale(1.07); } 50% { transform: scale(.985); } 100% { transform: scale(1); } }
@keyframes kick-out { 0% { stroke: #4b1f73; } 12% { stroke: #8a4fd0; } 100% { stroke: #4b1f73; } }
@media (max-width: 520px) { .logo-svg { height: 36px; } .site-header .wrap { height: 72px; gap: 12px; } .nav { gap: 12px; } .langs { gap: 8px; } }
@media (max-width: 380px) { .logo-svg { height: 30px; } }

/* ---- live background lines (canvas); the static SVG stays for no-JS and reduced data */
#bgfx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
html.has-bgfx body::before { display: none; }

/* ---- builder: one gutter, one column line, the side panel starts where the cards start */
form.builder fieldset.step { gap: 16px; }
form.builder legend { height: 30px; line-height: 30px; margin: 0; align-items: center; }
form.builder legend .n { line-height: 30px; }
form.builder > .side { margin-top: 40px; }           /* legend 30 + the 10px a fieldset leaves under its legend */
form.builder .rig-opts, form.builder .addon-opts, form.builder .addon-opts.dj, form.builder .addon-opts.rec, form.builder .row2 { gap: var(--g); }
.date-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); align-items: start; }
.date-grid .cal { max-width: none; }
.date-grid .cal[hidden] + .date-side { grid-column: 1 / -1; max-width: calc(50% - var(--g) / 2); }
.cal:not([hidden]) + .date-side { padding-top: 0; }
.date-side label:first-child { margin-top: 0; }
@media (max-width: 620px) { .date-grid { grid-template-columns: 1fr; } .date-grid .cal[hidden] + .date-side { max-width: none; } }

/* ---- add-ons in the builder: compact rows, picture on the left in the same frame as the rigs */
form.q .addon { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; align-content: start; padding: 12px 14px 12px 12px; }
form.q .addon > :not(.addon-art):not(.tick) { grid-column: 2; }
.addon .addon-art { grid-column: 1; grid-row: 1 / span 5; align-self: start; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 6px; background: var(--basement); border: 1px solid rgba(236, 235, 229, 0.06); }
.addon .addon-art img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 50%; }
.addon .addon-name { font-size: 17px; padding-right: 30px; }
.addon .addon-desc { font-size: 13px; }
.addon .rig-price { padding-top: 6px; font-size: 17px; }
.addon .tick { top: 12px; right: 12px; }
.addon:has(input:checked) .addon-art { background: rgba(13, 13, 12, 0.6); border-color: rgba(236, 235, 229, 0.18); }
@media (max-width: 1100px) { form.q .addon { grid-template-columns: 96px minmax(0, 1fr); } }
.dj-head h3 { font-family: var(--sans); font-weight: 700; color: var(--bone); }
.cityp-btn .chev { margin-left: auto; }

/* ---- packages: add-ons in the rigs' four-column grid, every row lined up */
.addon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; row-gap: 0; }
.addon-group { grid-column: span 2; grid-row: span 9; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; row-gap: 0; }
.addon-group .row-title { grid-column: 1 / -1; margin: 18px 0 20px; }
.addon-group .pkg { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 14px; justify-content: stretch; min-height: 0; }
.addon-grid .card-art img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
.addon-grid .card h3 { font-size: clamp(26px, 2.2vw, 34px); overflow-wrap: anywhere; }
.addon-grid .pkg { padding: 24px; }
@media (max-width: 1240px) { .addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .addon-grid { grid-template-columns: 1fr; }
  .addon-group { grid-column: auto; grid-row: auto; display: flex; flex-direction: column; gap: 20px; }
  .addon-group .row-title { margin-bottom: 0; }
}

/* ---- recording page: price and button together on the right */
.rec-side { gap: 28px; }
.rec-cta { display: flex; flex-direction: column; gap: 18px; padding: 24px; border: 1px solid var(--line); background: rgba(236, 235, 229, 0.025); }
.rec-cta .price { border: 0; padding: 0; }
.rec-cta .price strong { font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; letter-spacing: -0.01em; }
.rec-cta .btn { width: 100%; min-height: 56px; }

/* ---- rig page: one picture per device, same frame on every row */
.dev-art { display: flex; align-items: center; justify-content: center; height: 128px; }
.dev-art img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
@media (max-width: 900px) { .dev-art { justify-content: flex-start; height: 110px; } .dev-art img { width: auto; max-width: 220px; } }

/* ---- city radar picker (built by site.js over the native select) */
.field { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 13px; color: var(--muted); position: relative; }
.cityp-sel { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; }
.cityp-btn { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--night); border: 1px solid var(--line); color: var(--bone); font: 700 16px/1.2 var(--sans); text-align: left; cursor: pointer; transition: border-color .15s; }
.cityp-btn:hover { border-color: var(--muted); }
.cityp-btn[aria-expanded="true"] { border-color: var(--bone); }
.cityp-btn .mark { flex: none; width: 22px; height: 22px; }
.cityp-btn .mark circle { fill: none; stroke-width: 1.6; }
.cityp-btn .mark .o { stroke: var(--violet-lift); } .cityp-btn .mark .i { stroke: var(--muted); } .cityp-btn .mark .d { fill: var(--muted); stroke: none; }
.cityp-btn[data-base] .mark .d { fill: var(--acid); } .cityp-btn[data-base] .mark .i { stroke: var(--bone); }
.cityp-btn .nm { flex: none; }
.cityp-btn .city-hint { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px var(--mono); color: var(--muted); }
.cityp-btn .city-hint[data-state="ok"] { color: var(--acid); }
.cityp-btn .chev { flex: none; width: 9px; height: 9px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
.cityp-btn[aria-expanded="true"] .chev { transform: translateY(2px) rotate(225deg); }
.cityp-anchor { position: relative; }

.cityp-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: calc(200% + var(--g)); display: grid; grid-template-columns: 280px minmax(0, 1fr); background: var(--basement); border: 1px solid var(--line); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55); font-family: var(--sans); color: var(--bone); }
.cityp-pop[data-open] { animation: roll-open .34s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes roll-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* start / end time: text field + 24 h roll */
.timep { position: relative; }
form.q .timep input { padding-right: 44px; font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.timep-chev { position: absolute; top: 0; right: 0; width: 44px; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; cursor: pointer; }
.timep-chev .chev { width: 9px; height: 9px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
.timep input[aria-expanded="true"] ~ .timep-chev .chev { transform: translateY(2px) rotate(225deg); }
.timep-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px 0; list-style: none; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; background: var(--basement); border: 1px solid var(--line); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55); scrollbar-width: thin; }
.timep-pop[data-open] { animation: roll-open .28s cubic-bezier(.2, .8, .2, 1) both; }
.timep-pop li { padding: 9px 16px; border-left: 2px solid transparent; color: var(--bone); font: 15px/1.3 var(--mono); font-variant-numeric: tabular-nums; cursor: pointer; }
.timep-pop li:nth-child(even) { color: var(--muted); }
.timep-pop li.hot { background: var(--night); color: var(--bone); }
.timep-pop li[aria-selected="true"] { border-left-color: var(--acid); color: var(--acid); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .timep-pop[data-open] { animation: none; } .timep-chev .chev { transition: none; } }
.cityp-radar { padding: 16px; border-right: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.cityp-radar svg { width: 100%; max-width: 248px; height: auto; overflow: visible; }
.rd-ring { fill: none; stroke: rgba(236, 235, 229, 0.12); stroke-width: 1; stroke-dasharray: 2 4; }
.rd-ring.o { stroke: var(--violet); stroke-width: 2; stroke-dasharray: none; }
.rd-lbl { font: 9px var(--mono); fill: var(--muted); }
.rd-base-ring { fill: none; stroke: var(--bone); stroke-width: 1.5; }
.rd-base { fill: var(--acid); }
.rd-route { stroke: var(--violet-lift); stroke-width: 1.5; stroke-dasharray: 3 3; fill: none; }
.rd-city { cursor: pointer; }
.rd-city .hit { fill: transparent; }
.rd-city .pt { fill: var(--bone); transition: r .2s, fill .2s; }
.rd-city .nm { font: 11px var(--sans); font-weight: 700; fill: var(--bone); paint-order: stroke; stroke: var(--basement); stroke-width: 4px; stroke-linejoin: round; opacity: 0; transition: opacity .15s; pointer-events: none; }
.rd-city:hover .nm, .rd-city.hot .nm, .rd-city.on .nm { opacity: 1; }
.rd-city:hover .pt, .rd-city.hot .pt { fill: var(--acid); }
.rd-city.on .pt { fill: var(--acid); }
.rd-city.on .halo { fill: none; stroke: var(--acid); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: halo 1.6s ease-out infinite; }
.rd-city .halo { fill: none; stroke: none; }
@keyframes halo { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.cityp-pop[data-open] .rd-city .pt { animation: pop .4s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 35ms + 120ms); }
@keyframes pop { from { r: 0; } }
.cityp-list { list-style: none; margin: 0; padding: 6px 0; display: flex; flex-direction: column; max-height: 340px; overflow: auto; }
.cityp-list button { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 18px; background: none; border: 0; border-left: 2px solid transparent; color: var(--bone); font: 16px/1.3 var(--sans); text-align: left; cursor: pointer; }
.cityp-list button small { font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
.cityp-list button:hover, .cityp-list button:focus-visible, .cityp-list button.hot { background: var(--night); outline: none; }
.cityp-list button[aria-selected="true"] { border-left-color: var(--acid); font-weight: 700; }
.cityp-list button[aria-selected="true"] small { color: var(--acid); }
.cityp-list li.other { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.cityp-list li.other button { color: var(--muted); font-size: 15px; }
@media (max-width: 620px) {
  .cityp-pop { width: 100%; grid-template-columns: 1fr; }
  .cityp-radar { border-right: 0; border-bottom: 1px solid var(--line); }
  .cityp-radar svg { max-width: 200px; }
  .cityp-list { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .logo:hover .dot, .logo:hover .ring-i, .logo:hover .ring-o, .rd-city.on .halo { animation: none; }
  .cityp-pop[data-open], .cityp-pop[data-open] .rd-city .pt { animation: none; }
  .btn { transition: none; }
}

/* ========================================================================== */
/* PREMIUM REDESIGN — editorial industrial / 2026                            */
/* ========================================================================== */
:root {
  --asphalt: #111216;
  --night: #0b0c0f;
  --basement: #070708;
  --violet: #4930c6;
  --violet-lift: #8d7bff;
  --bone: #f4f2eb;
  --acid: #caff68;
  --muted: #9699a2;
  --line: rgba(244, 242, 235, 0.13);
  --line-strong: rgba(244, 242, 235, 0.24);
  --glass: rgba(17, 18, 22, 0.68);
  --panel: rgba(255,255,255,.035);
  --soft-violet: rgba(105, 78, 255, .16);
  --sans: "Onest", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(20px, 4.4vw, 72px);
  --max: 1540px;
  --radius: 24px;
  --radius-sm: 14px;
  --shadow-xl: 0 40px 120px rgba(0,0,0,.38);
}

html { background: var(--basement); color: var(--bone); scroll-padding-top: 108px; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(1100px 620px at 78% -10%, rgba(100,72,255,.14), transparent 70%),
    radial-gradient(900px 520px at -10% 38%, rgba(202,255,104,.035), transparent 70%),
    var(--asphalt);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.005em;
}
body::before {
  opacity: .34;
  filter: contrast(120%);
}
::selection { background: var(--acid); color: #080808; }
a { text-decoration-thickness: 1px; text-decoration-color: rgba(244,242,235,.35); }
a:hover { color: var(--acid); }

.wrap { max-width: var(--max); }
.data, .section-index {
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-index { font-family: var(--mono); }
.voice { font-variation-settings: normal; font-weight: 650; letter-spacing: -.048em; line-height: .91; }
.voice-xl { font-size: clamp(62px, 9.2vw, 152px); }
.voice-l { font-size: clamp(44px, 6.1vw, 94px); }
.voice-m { font-size: clamp(34px, 4vw, 58px); }
.headline { font-variation-settings: normal; font-weight: 700; text-transform: none; letter-spacing: -.038em; line-height: .94; }
.lead { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.5; color: rgba(244,242,235,.83); }
.prose { font-size: clamp(17px, 1.3vw, 20px); color: rgba(244,242,235,.82); }

/* floating navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 14px var(--pad) 0;
  background: linear-gradient(to bottom, rgba(7,7,8,.84), rgba(7,7,8,0));
  backdrop-filter: none;
  border: 0;
  pointer-events: none;
}
.site-header .wrap {
  max-width: calc(var(--max) - (var(--pad) * 2));
  height: 68px;
  padding: 0 12px 0 18px;
  border: 1px solid rgba(244,242,235,.12);
  border-radius: 18px;
  background: rgba(11,12,15,.78);
  backdrop-filter: blur(24px) saturate(145%);
  box-shadow: 0 14px 50px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.025);
  pointer-events: auto;
}
.logo-svg { height: 38px; }
.header-status {
  margin-left: 12px;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  font: 500 10px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 5px rgba(202,255,104,.07), 0 0 20px rgba(202,255,104,.45); }
.nav { gap: 18px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.nav .link { position: relative; color: rgba(244,242,235,.72); }
.nav .link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: var(--acid); transition: right .28s ease; }
.nav .link:hover::after, .nav .link[aria-current="page"]::after { right: 0; }
.nav .link[aria-current="page"] { color: var(--bone); }
.langs { padding-left: 4px; gap: 8px; }
.langs a { min-width: 24px; text-align: center; }
.langs a[aria-current="true"] { color: var(--acid); }

.btn {
  min-height: 50px;
  padding: 0 20px;
  border-radius: 11px;
  border-color: var(--line-strong);
  font-size: 11px;
  letter-spacing: .12em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255,255,255,.015);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, color .25s, background .25s;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, rgba(255,255,255,.08), rgba(255,255,255,0) 36%);
  transform: translateX(-115%);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.btn:hover::before { transform: translateX(115%); }
a.btn:hover, button.btn:hover:not(:disabled), .btn:focus-visible, .nav a.btn:hover, .nav a.btn[aria-current]:hover {
  transform: translateY(-2px);
  color: var(--bone);
  border-color: rgba(244,242,235,.46);
  background-size: 0 0;
}
.btn-acid {
  background: var(--acid);
  border-color: var(--acid);
  color: #080909;
  box-shadow: 0 0 0 1px rgba(202,255,104,.12), 0 14px 40px rgba(202,255,104,.08);
}
a.btn-acid:hover, button.btn-acid:hover:not(:disabled) { background: #d6ff88; border-color: #d6ff88; color: #080909; }
.btn-ghost { background: rgba(255,255,255,.015); }
.site-header .btn { min-height: 44px; border-radius: 10px; }

/* premium texture system */
.t2 {
  background:
    radial-gradient(ellipse 48% 70% at 74% 32%, rgba(112,83,255,.26), transparent 68%),
    radial-gradient(ellipse 32% 60% at 102% 68%, rgba(202,255,104,.05), transparent 70%),
    transparent;
}
.t4 {
  background:
    radial-gradient(circle at 50% 50%, rgba(129,104,255,.16), transparent 42%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 30px, rgba(255,255,255,.045) 31px 32px),
    #0a0a0c;
}
.t6 {
  background:
    radial-gradient(circle at 20% 0%, rgba(202,255,104,.11), transparent 34%),
    radial-gradient(circle at 80% 100%, rgba(151,127,255,.24), transparent 36%),
    #312487;
}
.t7 {
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 100% 4px,
    radial-gradient(circle at 86% 20%, rgba(116,86,255,.16), transparent 40%),
    #08090b;
}
.grain::after { opacity: .075; mix-blend-mode: soft-light; }

/* hero */
.hero { min-height: calc(100svh - 10px); border-bottom: 1px solid var(--line); }
.hero::before {
  content: "";
  position: absolute;
  width: min(58vw, 920px);
  aspect-ratio: 1;
  right: -12vw;
  top: 2vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(117,87,255,.16), rgba(117,87,255,.03) 42%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}
.hero .wrap {
  grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr);
  min-height: calc(100svh - 96px);
  padding-top: clamp(74px, 9vw, 132px);
  padding-bottom: clamp(44px, 7vw, 94px);
  gap: clamp(30px, 5vw, 82px);
  align-items: center;
}
.hero-copy { gap: clamp(20px, 2.2vw, 34px); padding: 0; z-index: 2; }
.hero-copy .voice-xl { max-width: 10.8ch; text-wrap: balance; }
.hero-copy .lead { max-width: 30em; }
.hero-kicker { display: flex; align-items: center; gap: 14px; }
.eyebrow-line { width: 48px; height: 1px; background: linear-gradient(90deg, var(--acid), rgba(202,255,104,.08)); }
.hero-actions { gap: 10px; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 10px;
  color: var(--muted);
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 9px; }
.hero-meta span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgba(244,242,235,.4); }
.hero-art { min-height: 560px; align-items: center; position: relative; }
.hero-object {
  position: relative;
  width: min(100%, 680px);
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244,242,235,.13);
  border-radius: 34px;
  background:
    radial-gradient(circle at var(--px,70%) var(--py,28%), rgba(154,133,255,.21), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  box-shadow: var(--shadow-xl), inset 0 1px rgba(255,255,255,.035);
  overflow: hidden;
  isolation: isolate;
}
.hero-object::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(244,242,235,.06);
  border-radius: 50%;
  box-shadow: 0 0 0 56px rgba(255,255,255,.012), 0 0 0 112px rgba(255,255,255,.008);
  z-index: -1;
}
.hero-object::after { content: ""; position: absolute; inset: auto 8% 7%; height: 1px; background: linear-gradient(90deg, transparent, rgba(244,242,235,.18), transparent); }
.hero-object img { width: min(92%, 660px); max-width: none; filter: drop-shadow(0 32px 50px rgba(0,0,0,.54)); transform: translateY(12px) scale(1.03); }
.hero-object-label, .hero-object-index {
  position: absolute;
  font: 500 9px/1 var(--mono);
  letter-spacing: .14em;
  color: rgba(244,242,235,.5);
  z-index: 3;
}
.hero-object-label { top: 22px; left: 22px; }
.hero-object-index { right: 22px; bottom: 22px; font-size: 36px; font-family: var(--sans); font-weight: 700; letter-spacing: -.05em; color: rgba(244,242,235,.13); }
.offseason { max-width: 42em; border: 1px solid rgba(141,123,255,.28); border-left: 2px solid var(--violet-lift); border-radius: 0 10px 10px 0; background: rgba(73,48,198,.13); backdrop-filter: blur(10px); }

.signal-strip {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: rgba(7,7,8,.76);
}
.signal-track {
  width: max-content;
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.3vw, 38px);
  padding: 18px var(--pad);
  color: rgba(244,242,235,.58);
  font: 500 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.signal-track i { width: 5px; height: 5px; background: var(--violet-lift); transform: rotate(45deg); opacity: .8; }

/* sections */
.band { padding-block: clamp(76px, 8.2vw, 132px); }
.band-basement { background: rgba(6,6,7,.92); }
.split { gap: clamp(44px, 7vw, 116px); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.section-heading > div { display: flex; flex-direction: column; gap: 16px; }
.system-feature { border-bottom: 1px solid var(--line); }
.system-feature .split { grid-template-columns: minmax(0,.92fr) minmax(420px,1.08fr); }
.system-feature .stack { align-self: stretch; justify-content: center; }
.facts { margin-top: 16px; border-top: 1px solid var(--line); gap: 0; padding: 0; }
.facts > div { padding: 22px 22px 0 0; min-height: 105px; border-right: 1px solid var(--line); }
.facts > div:last-child { border-right: 0; padding-left: 22px; }
.facts > div:nth-child(2) { padding-left: 22px; }
.facts dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.facts dd { font-size: 15px; color: rgba(244,242,235,.92); }
.art-panel {
  min-height: 540px;
  border: 1px solid var(--line);
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.art-panel::after { content: "FUNKTION-ONE / RESOLUTION"; position: absolute; left: 24px; bottom: 22px; font: 500 9px var(--mono); letter-spacing: .12em; color: rgba(244,242,235,.42); }
.art-panel img { max-height: 460px; filter: drop-shadow(0 30px 50px rgba(0,0,0,.42)); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.art-panel:hover img { transform: scale(1.045) rotate(-1deg); }

/* package cards */
.packages-showcase { background: linear-gradient(180deg, #111216 0%, #0b0c0f 100%); }
.cards { gap: 14px; }
.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at var(--px, 75%) var(--py, 12%), rgba(141,123,255,.10), transparent 30%),
    rgba(255,255,255,.018);
  overflow: hidden;
  box-shadow: inset 0 1px rgba(255,255,255,.02);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), border-color .28s, background .28s, box-shadow .38s;
}
.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.035), transparent 34%); opacity: .8; }
.card:hover { transform: translateY(-7px); border-color: rgba(244,242,235,.25); box-shadow: 0 28px 80px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035); }
.card-violet { background: radial-gradient(circle at 80% 12%, rgba(202,255,104,.10), transparent 30%), linear-gradient(155deg, #5140d7, #30227f); border-color: rgba(156,139,255,.48); }
.card-basement { background: rgba(7,7,8,.78); border-color: rgba(244,242,235,.10); }
.cards-4 .card, .addon-grid .pkg { padding: 18px; border-radius: 22px; }
.card-art {
  border-radius: 15px;
  border-color: rgba(244,242,235,.085);
  background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(0,0,0,.12));
  overflow: hidden;
  padding: 4px 10px 0;
}
.card-violet .card-art { background: rgba(7,7,8,.22); }
.card-art img { transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s; filter: drop-shadow(0 18px 22px rgba(0,0,0,.35)); }
.card:hover .card-art img { transform: translateY(-4px) scale(1.04); filter: drop-shadow(0 25px 30px rgba(0,0,0,.4)); }
.pkg .who { font-size: 10px; text-transform: uppercase; letter-spacing: .11em; }
.cards-4 .card h3 { font-size: clamp(29px, 2.45vw, 43px); }
.pkg .spec { font-size: 11px; color: rgba(244,242,235,.84); }
.pkg .drive { font-size: 10px; }
.pkg .desc { color: rgba(244,242,235,.66); font-size: 14px; line-height: 1.5; }
.pkg .price { border-top: 1px solid var(--line); padding-top: 18px; }
.pkg .price strong { font-size: clamp(23px, 1.75vw, 30px); }
.pkg .btn { width: 100%; margin-top: 2px; }
.tag { border-radius: 999px; background: var(--acid); color: #090909; border: 0; padding: 6px 10px; font-size: 9px; font-weight: 700; }
.addon-group .row-title { font-size: 13px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.terms { gap: 14px 56px; font-size: 14px; }
.terms li::before { width: 5px; height: 5px; border-radius: 50%; background: var(--violet-lift); top: .7em; }

/* collaboration manifesto */
.philosophy {
  border-block: 1px solid var(--line);
  background:
    linear-gradient(120deg, rgba(255,255,255,.018), transparent 38%),
    radial-gradient(circle at 92% 8%, rgba(111,82,255,.10), transparent 34%),
    #090a0c;
}
.manifesto-layout { display: grid; grid-template-columns: minmax(300px,.78fr) minmax(0,1.22fr); gap: clamp(38px, 7vw, 110px); align-items: start; }
.manifesto-head { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 124px; }
.manifesto-head .lead { max-width: 32em; }
.principle-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: var(--line); gap: 1px; }
.principle-card { min-height: 280px; padding: clamp(24px,3vw,42px); display: flex; flex-direction: column; gap: 18px; background: radial-gradient(circle at var(--px,85%) var(--py,10%), rgba(141,123,255,.09), transparent 38%), #0b0c0f; position: relative; transition: background .3s, transform .3s; }
.principle-card:hover { background: radial-gradient(circle at var(--px,75%) var(--py,20%), rgba(141,123,255,.18), transparent 42%), #0d0e12; }
.principle-no { font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--acid); }
.principle-card h3 { margin-top: auto; font-size: clamp(22px,2vw,31px); line-height: 1.05; letter-spacing: -.035em; }
.principle-card p { color: rgba(244,242,235,.66); font-size: 15px; max-width: 34em; }

.collab-band { border-top: 1px solid var(--line); overflow: hidden; background: radial-gradient(circle at 76% 48%, rgba(100,72,255,.15), transparent 34%), #08090b; }
.collab-layout { display: grid; grid-template-columns: minmax(0,.95fr) minmax(400px,1.05fr); gap: clamp(42px,7vw,118px); align-items: center; }
.collab-layout .stack { gap: 26px; }
.collab-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.collab-tags span { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(244,242,235,.72); background: rgba(255,255,255,.018); }
.collab-visual { width: min(100%,620px); aspect-ratio: 1; justify-self: end; position: relative; border: 1px solid rgba(244,242,235,.1); border-radius: 50%; background: radial-gradient(circle, rgba(202,255,104,.07), transparent 8%), radial-gradient(circle, rgba(105,78,255,.15), transparent 52%); box-shadow: inset 0 0 80px rgba(0,0,0,.28); }
.collab-core { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 112px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--acid); color: #090909; font: 700 14px/1 var(--sans); letter-spacing: -.03em; box-shadow: 0 0 0 16px rgba(202,255,104,.035), 0 0 80px rgba(202,255,104,.09); }
.collab-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(244,242,235,.12); inset: 19%; }
.collab-ring::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--violet-lift); left: 50%; top: -4px; box-shadow: 0 0 16px rgba(141,123,255,.6); }
.collab-ring.ring-b { inset: 7%; border-style: dashed; border-color: rgba(244,242,235,.08); animation: orbit-spin 30s linear infinite; }
.collab-node { position: absolute; padding: 10px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(9,10,12,.86); backdrop-filter: blur(14px); font: 500 10px/1 var(--mono); letter-spacing: .05em; color: rgba(244,242,235,.8); box-shadow: 0 14px 40px rgba(0,0,0,.18); }
.node-1 { left: 5%; top: 26%; } .node-2 { right: 3%; top: 23%; } .node-3 { right: 7%; bottom: 20%; } .node-4 { left: 8%; bottom: 18%; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* recording / season / club */
.recording-feature .split { align-items: stretch; }
.recording-feature .stack { justify-content: center; }
.recording-feature .kit {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.02);
  padding: 8px 24px;
  align-self: center;
  width: 100%;
}
.kit li { padding: 18px 0; font-size: 12px; }
.kit li span:first-child { font-size: 13px; color: rgba(244,242,235,.9); }
.rec-dot { width: 7px; height: 7px; box-shadow: 0 0 0 5px rgba(202,255,104,.07); }
.recording-preview { display: flex; flex-direction: column; gap: 14px; align-self: stretch; }
.recording-preview-frame { min-height: 320px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(circle at 52% 40%, rgba(141,123,255,.16), transparent 42%), #090a0c; display: flex; align-items: center; justify-content: center; }
.recording-preview-frame img { width: min(92%,560px); max-height: 360px; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0,0,0,.35)); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.recording-preview-frame:hover img { transform: scale(1.035) translateY(-4px); }
.recording-preview-frame > span { position: absolute; left: 18px; bottom: 16px; font: 500 9px/1 var(--mono); letter-spacing: .12em; color: var(--muted); }

/* set recording / artist production page */
.rec-page-head { padding-bottom: clamp(70px,8vw,120px); overflow: hidden; }
.rec-hero-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(440px,1.1fr); gap: clamp(40px,6vw,100px); align-items: center; }
.rec-hero-grid > .stack { gap: 28px; position: relative; z-index: 2; }
.rec-hero-grid h1 { max-width: 9ch; }
.rec-hero-art { min-height: 570px; position: relative; }
.rec-cam-card { position: absolute; overflow: hidden; border: 1px solid var(--line); background: rgba(10,11,13,.82); box-shadow: 0 34px 100px rgba(0,0,0,.32); }
.rec-cam-card.main { inset: 0 0 34px 0; border-radius: 30px; display: flex; align-items: center; justify-content: center; }
.rec-cam-card.main img { width: 94%; height: 92%; object-fit: contain; filter: drop-shadow(0 28px 40px rgba(0,0,0,.42)); }
.rec-cam-card.floating { width: 34%; min-width: 170px; right: -4%; bottom: 0; border-radius: 20px; padding: 14px; background: rgba(16,17,21,.92); backdrop-filter: blur(18px); }
.rec-cam-card.floating img { width: 100%; aspect-ratio: 1.15; object-fit: contain; }
.rec-cam-card > span { position: absolute; top: 16px; left: 16px; z-index: 2; font: 500 9px/1 var(--mono); letter-spacing: .12em; color: rgba(244,242,235,.55); }
.format-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.format-card { min-height: 330px; padding: clamp(22px,2.5vw,34px); border: 1px solid var(--line); border-radius: 22px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; background: radial-gradient(circle at var(--px,80%) var(--py,10%), rgba(100,72,255,.12), transparent 38%), rgba(255,255,255,.018); transition: transform .3s, border-color .3s; }
.format-card:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.format-index { font: 500 10px/1 var(--mono); color: var(--acid); letter-spacing: .12em; }
.format-card h3 { margin-top: auto; font-size: clamp(28px,3vw,42px); letter-spacing: -.045em; }
.format-card p { color: rgba(244,242,235,.68); max-width: 32em; }
.rec-production .split { align-items: start; }
.rec-production .stack { gap: 26px; }
.rec-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); }
.rec-note { min-height: 78px; padding: 18px 18px 18px 0; border-bottom: 1px solid var(--line); color: rgba(244,242,235,.8); font-size: 14px; position: relative; }
.rec-note:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 24px; }
.rec-note:nth-child(even) { padding-left: 24px; }
.rec-note::before { content: '•'; color: var(--acid); margin-right: 9px; }
.rec-tech { border: 1px solid var(--line); border-radius: 24px; padding: 22px; background: rgba(255,255,255,.02); }
.rec-tech .kit { margin-top: 10px; }
.rec-tech .rec-cta { margin-top: 20px; }
.rec-steps { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--line); }
.rec-steps li { min-height: 240px; padding: 28px; background: #090a0c; border: 0; }
.rec-steps li::before { color: var(--acid); }
.rec-steps strong { font-size: 22px; letter-spacing: -.025em; }
.rec-steps span { color: rgba(244,242,235,.66); font-size: 14px; }

.season { gap: 12px; }
.season div { min-height: 176px; padding: 24px; border: 1px solid rgba(244,242,235,.18); border-radius: 18px; background: rgba(255,255,255,.025); }
.season .m { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.season .p { margin-top: auto; font-size: clamp(28px, 3vw, 42px); }
.club { padding-block: clamp(56px, 6vw, 88px); border-block: 1px solid var(--line); background: radial-gradient(circle at 18% 20%, rgba(202,255,104,.04), transparent 28%); }

/* page heads */
.page-head {
  padding-top: clamp(96px, 10vw, 154px);
  padding-bottom: clamp(44px, 5vw, 78px);
  background: radial-gradient(circle at 82% 10%, rgba(107,79,255,.14), transparent 35%);
}
.page-head .wrap { gap: 26px; }
.page-head h1 { max-width: 12em; }
.page-head .lead { max-width: 45em; }

/* rig page */
.rig-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rig-jump a { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: .25s; }
.rig-jump a:hover { color: var(--bone); border-color: var(--line-strong); transform: translateY(-2px); }
.rig-group { border-top: 1px solid var(--line); }
.rig-group .wrap { display: grid; grid-template-columns: minmax(230px,.42fr) minmax(0,1fr); gap: clamp(28px, 4vw, 64px); }
.rig-group-head { grid-column: 1; position: sticky; top: 116px; align-self: start; display: flex; flex-direction: column; gap: 18px; }
.rig-group-head h2 { font-size: clamp(34px, 4vw, 58px); }
.rig-group-head p { color: var(--muted); max-width: 30em; }
.rig-group-art { margin-top: 12px; height: 180px; border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.018); overflow: hidden; }
.rig-group-art img { max-height: 170px; object-fit: contain; }
.dev {
  grid-column: 2;
  display: grid;
  grid-template-columns: 160px minmax(200px,.7fr) minmax(0,1fr);
  gap: 24px;
  align-items: center;
  padding: 18px;
  border-top: 1px solid var(--line);
  transition: background .25s, border-color .25s;
}
.dev:hover { background: rgba(255,255,255,.025); border-color: var(--line-strong); }
.dev-art { height: 112px; }
.dev-head h3 { font-size: clamp(20px, 2vw, 28px); }
.dev-qty { font: 600 10px var(--mono); letter-spacing: .08em; color: var(--acid); }
.dev-role { color: var(--muted); font-size: 13px; margin-top: 6px; }
.dev-spec { margin: 0; }
.dev-spec > div { display: grid; grid-template-columns: minmax(110px,.6fr) 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(244,242,235,.065); }
.dev-spec dt { color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.dev-spec dd { margin: 0; font-size: 12px; }

/* faq */
.faq { max-width: 76em; }
.faq details { border-color: var(--line); transition: background .25s; }
.faq details[open] { background: rgba(255,255,255,.018); }
.faq summary { padding: 28px 54px 28px 0; font-size: clamp(18px, 1.8vw, 25px); }
.faq details[open] summary { padding-left: 18px; }
.faq details p { padding: 0 18px 28px; color: rgba(244,242,235,.7); font-size: 16px; }

/* builder */
.builder-page { gap: 54px; }
.builder-page .intro { max-width: 68em; }
form.builder { column-gap: clamp(32px, 4vw, 66px); row-gap: 20px; }
form.builder fieldset.step {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.018);
  box-shadow: inset 0 1px rgba(255,255,255,.018);
}
form.builder legend { width: auto; padding: 0 12px; margin-left: -12px; font-size: 21px; }
form.builder legend .n { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; font-size: 10px; }
form.builder > .side { top: 108px; gap: 12px; }
.stage, .summary { border-radius: 22px; border-color: var(--line); background: #090a0c; overflow: hidden; }
.stage { box-shadow: 0 24px 70px rgba(0,0,0,.24); }
.summary { background: rgba(16,17,21,.92); }
.summary .total strong { font-size: 34px; letter-spacing: -.04em; }
form.q input, form.q select, form.q textarea, .cityp-btn {
  min-height: 54px;
  border-radius: 12px;
  border-color: var(--line);
  background: rgba(5,6,8,.72);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
form.q input:focus, form.q select:focus, form.q textarea:focus, .cityp-btn[aria-expanded="true"] {
  outline: none;
  border-color: rgba(141,123,255,.72);
  box-shadow: 0 0 0 3px rgba(141,123,255,.11);
  background: #090a0d;
}
form.q .rig-opt, form.q .addon {
  border-radius: 17px;
  border-color: var(--line);
  background:
    radial-gradient(circle at var(--px,75%) var(--py,20%), rgba(141,123,255,.08), transparent 30%),
    rgba(8,9,11,.82);
  overflow: hidden;
}
form.q .rig-opt:hover, form.q .addon:hover { border-color: rgba(244,242,235,.28); transform: translateY(-3px); }
.rig-opt .rig-art, .addon .addon-art { border-radius: 12px; background: rgba(0,0,0,.26); border-color: rgba(244,242,235,.065); }
.rig-opt:has(input:checked), .addon:has(input:checked) {
  background: linear-gradient(145deg, rgba(73,48,198,.72), rgba(36,24,94,.92));
  border-color: rgba(141,123,255,.78);
  box-shadow: 0 18px 44px rgba(43,26,120,.2);
}
.rig-opt.featured { border-color: rgba(141,123,255,.42); }
.tick { border-color: rgba(244,242,235,.3); background: rgba(0,0,0,.16); }
:is(.rig-opt, .addon):has(input:checked) .tick { background: var(--acid); border-color: var(--acid); }
:is(.rig-opt, .addon):has(input:checked) .tick::after { border-color: #090909; }
.cal { max-width: none; }
.day { border-radius: 9px; border-color: rgba(244,242,235,.09); background: rgba(0,0,0,.22); }
.day:hover:not(:disabled) { border-color: rgba(244,242,235,.35); background: rgba(255,255,255,.035); }
.day.sel { background: var(--acid); border-color: var(--acid); color: #090909; }
.nav-m { border-radius: 10px; border-color: var(--line); }
.cityp-pop { border-radius: 18px; overflow: hidden; background: rgba(10,10,13,.97); border-color: var(--line-strong); backdrop-filter: blur(24px); }

/* promoter kit */
.kit-tile { border-radius: 20px; overflow: hidden; border-color: var(--line); background: rgba(255,255,255,.015); }
.kit-ground { min-height: 240px; }
.kit-lines li { padding: 18px 0; }

/* footer */
.site-footer {
  padding-top: 0;
  padding-bottom: 34px;
  border-top: 1px solid var(--line);
  background: #060607;
  overflow: hidden;
}
.footer-marquee {
  display: flex;
  width: max-content;
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  color: rgba(244,242,235,.075);
  font-size: clamp(54px, 7vw, 110px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.055em;
  white-space: nowrap;
  transform: translateX(-4vw);
}
.footer-marquee span { padding-right: 1.5vw; }
.site-footer .cols { padding-top: 56px; gap: 40px; }
.site-footer .cols > div:first-child img { width: 172px; height: auto; }
.site-footer h2 { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.site-footer li { font-size: 13px; color: rgba(244,242,235,.73); }
.site-footer .base { padding-top: 24px; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

/* motion system, only enabled by JS */
.motion-ready .reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); transition-delay: var(--delay, 0ms); }
.motion-ready .reveal.is-in { opacity: 1; transform: translateY(0); }
.motion-ready .hero-copy > * { animation: hero-in .8s cubic-bezier(.2,.8,.2,1) both; }
.motion-ready .hero-copy > *:nth-child(2) { animation-delay: .07s; }
.motion-ready .hero-copy > *:nth-child(3) { animation-delay: .14s; }
.motion-ready .hero-copy > *:nth-child(4) { animation-delay: .21s; }
.motion-ready .hero-copy > *:nth-child(5) { animation-delay: .28s; }
.motion-ready .hero-object { animation: hero-object-in 1s .12s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(22px); } }
@keyframes hero-object-in { from { opacity: 0; transform: translateY(28px) scale(.975); } }

/* responsive refinements */
@media (max-width: 1180px) {
  .header-status { display: none; }
  .hero .wrap { grid-template-columns: minmax(0,1fr) minmax(390px,.82fr); }
  .hero-art, .hero-object { min-height: 500px; }
  .site-footer .cols { grid-template-columns: 1.4fr repeat(2,minmax(0,1fr)); }
  .site-footer .cols > div:nth-child(n+4) { margin-top: 8px; }
}
@media (max-width: 960px) {
  .site-header { padding-inline: 14px; }
  .site-header .wrap { max-width: none; }
  .hero { min-height: 0; }
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 86px; }
  .hero-art { order: 0; min-height: 0; }
  .hero-object { min-height: 520px; }
  .hero-object img { width: min(94%, 620px); }
  .hero-copy .voice-xl { max-width: 9ch; }
  .system-feature .split { grid-template-columns: 1fr; }
  .art-panel { min-height: 470px; }
  .rig-group .wrap { grid-template-columns: 1fr; }
  .rig-group-head { position: static; grid-column: 1; }
  .dev { grid-column: 1; grid-template-columns: 140px minmax(180px,.65fr) minmax(0,1fr); }
  form.builder fieldset.step { padding: 20px; }
}
@media (max-width: 820px) {
  .site-header { padding-top: 10px; }
  .site-header .wrap { height: 62px; border-radius: 15px; padding-left: 14px; }
  .logo-svg { height: 34px; }
  .mnav summary { border-radius: 9px; min-height: 40px; }
  .mnav > div { top: 48px; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.38); }
  .hero .wrap { padding-top: 76px; }
  .hero-copy { gap: 20px; }
  .hero-object { min-height: 460px; border-radius: 24px; }
  .hero-object-label { top: 16px; left: 16px; }
  .hero-object-index { right: 16px; bottom: 16px; }
  .signal-track { justify-content: flex-start; overflow: hidden; }
  .band { padding-block: clamp(64px, 12vw, 92px); }
  .split { gap: 36px; }
  .facts { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .art-panel { min-height: 420px; border-radius: 24px; }
  .dev { grid-template-columns: 112px 1fr; gap: 18px; }
  .dev-spec { grid-column: 1 / -1; }
  .site-footer .cols { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-marquee { padding: 20px 0; }
}
@media (max-width: 620px) {
  :root { --radius: 19px; }
  .manifesto-layout, .collab-layout, .rec-hero-grid { grid-template-columns: 1fr; }
  .manifesto-head { position: static; }
  .principle-grid { grid-template-columns: 1fr; border-radius: 20px; }
  .principle-card { min-height: 220px; }
  .collab-visual { width: 100%; max-width: 420px; justify-self: center; }
  .collab-core { width: 86px; }
  .collab-node { font-size: 8px; padding: 8px 10px; }
  .recording-preview-frame { min-height: 280px; }
  .rec-hero-art { min-height: 380px; }
  .rec-cam-card.floating { right: 0; min-width: 135px; }
  .format-grid, .rec-steps { grid-template-columns: 1fr; }
  .format-card { min-height: 255px; }
  .rec-notes { grid-template-columns: 1fr; }
  .rec-note:nth-child(odd) { border-right: 0; padding-right: 0; }
  .rec-note:nth-child(even) { padding-left: 0; }
  .rec-steps li { min-height: 190px; }

  body { font-size: 15px; }
  .site-header { padding-inline: 10px; }
  .site-header .wrap { padding-right: 8px; }
  .langs { gap: 2px; }
  .langs a { min-width: 22px; font-size: 9px; }
  .hero .wrap { padding-top: 68px; padding-bottom: 34px; }
  .hero-copy .voice-xl { font-size: clamp(52px, 15.8vw, 84px); max-width: 10.5ch; }
  .hero-copy .lead { font-size: 17px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions .btn { width: 100%; padding-inline: 12px; }
  .hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .hero-object { min-height: 360px; }
  .hero-object img { width: 100%; transform: translateY(14px) scale(1.08); }
  .hero-object-index { font-size: 28px; }
  .signal-track { gap: 14px 20px; padding-block: 14px; }
  .signal-track span:nth-of-type(n+5), .signal-track i:nth-of-type(n+5) { display: none; }
  .voice-l { font-size: clamp(42px, 13vw, 68px); }
  .facts { grid-template-columns: 1fr; border: 0; }
  .facts > div, .facts > div:nth-child(2), .facts > div:last-child { min-height: auto; padding: 16px 0; border-right: 0; border-top: 1px solid var(--line); }
  .art-panel { min-height: 340px; }
  .section-heading { align-items: stretch; }
  .section-heading .btn { width: 100%; }
  .cards-4 .card, .addon-grid .pkg { padding: 15px; }
  .recording-feature .kit { padding-inline: 16px; }
  .season div { min-height: 145px; }
  .page-head { padding-top: 88px; }
  .dev { grid-template-columns: 94px 1fr; padding: 14px 0; }
  .dev-art { height: 84px; }
  form.builder fieldset.step { padding: 16px; border-radius: 18px; }
  form.builder .rig-opts { gap: 10px; }
  form.q .rig-opt { padding: 12px; }
  .cityp-pop { border-radius: 14px; }
  .site-footer .cols { grid-template-columns: 1fr; padding-top: 42px; }
  .site-footer .cols > div:nth-child(n+4) { margin-top: 0; }
  .site-footer .base { gap: 10px; }
}
@media (max-width: 380px) {
  .nav { gap: 7px; }
  .mnav summary { padding-inline: 10px; font-size: 10px; }
  .hero-actions { grid-template-columns: 1fr; }
  .hero-meta { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal, .motion-ready .hero-copy > *, .motion-ready .hero-object { opacity: 1 !important; transform: none !important; animation: none !important; }
  .collab-ring.ring-b { animation: none; }
  .card:hover, .art-panel:hover img, form.q .rig-opt:hover, form.q .addon:hover { transform: none; }
}

/* keep the original reactive wave canvas visible beneath transparent premium surfaces */
#bgfx { z-index: 0; opacity: .72; }
main, .site-footer { position: relative; z-index: 1; }
.site-header { z-index: 80; }

/* ======================================================================
   v5 — configurator polish, direct contact hub, moving dark sections
   ====================================================================== */

/* Keep dense layouts from pushing text outside their grid tracks. */
.builder-intro > *, form.builder > *, .split > *, .rec-steps > *, .format-grid > *, .dev > *, .summary .cart li > * { min-width: 0; }
.rec-steps span, .format-card p, .contact-hub p, .pkg .desc { overflow-wrap: break-word; }
#insta360-x3 .dev-head h3 { white-space: nowrap; }

/* Quote intro: use the previously empty right-hand area as a direct contact rail. */
.builder-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: end;
}
.builder-page .intro { max-width: 58em; }
.contact-hub {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 2.5vw, 30px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 0%, rgba(122,92,255,.18), transparent 38%),
    rgba(9,10,12,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 24px 70px rgba(0,0,0,.18);
}
.contact-hub h2 { font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.035em; }
.contact-hub > p:not(.data) { color: rgba(244,242,235,.67); font-size: 14px; line-height: 1.55; }
.contact-hub-actions { display: grid; gap: 9px; margin-top: 4px; }
.contact-action {
  min-height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  text-decoration: none;
  font: 500 11px/1.25 var(--mono);
  letter-spacing: .045em;
  text-transform: uppercase;
  background: rgba(255,255,255,.018);
  transition: border-color .2s, transform .2s, background .2s;
}
a.contact-action:hover { transform: translateY(-2px); border-color: rgba(244,242,235,.36); color: var(--bone); }
.contact-action.primary { border-color: rgba(202,255,104,.32); }
.contact-action.primary::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--acid); box-shadow: 0 0 18px rgba(202,255,104,.36); }
.contact-action.is-pending { color: var(--muted); cursor: default; }
.contact-action.is-pending::before { background: var(--violet-lift); box-shadow: 0 0 18px rgba(141,123,255,.32); }
.contact-action small { margin-left: auto; font: inherit; font-size: 9px; color: var(--muted); }

/* Make the builder and its visualization true peers instead of a 60/40 split. */
@media (min-width: 961px) { form.builder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
form.builder > .side { width: 100%; }
.stage, .summary { width: 100%; }

/* Rig cards: units + audience scale + intended use, no wattage in the sales UI. */
.rig-capacity, .pkg .capacity {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--acid);
}
.rig-capacity { margin-top: 2px; }
.rig-who { line-height: 1.42; }
.pkg .capacity { margin: 8px 0 0; }

/* Date and operating window. Date gets its own row; start/end sit together below it. */
.time-window { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
.time-window > label:first-child { grid-column: 1 / -1; }
.date-grid .cal[hidden] + .date-side { max-width: none; }

/* The side calculation stays readable at windowed desktop widths. */
.summary .cart li { min-width: 0; }
.summary .cart .nm { min-width: 0; overflow-wrap: break-word; }
.summary .cart .pr { flex: none; }
.summary .total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 18px;
}
.summary .total strong {
  max-width: 100%;
  white-space: nowrap;
  font-size: clamp(25px, 2.35vw, 34px);
}
.summary .total-locked strong { color: rgba(244,242,235,.2); letter-spacing: .08em; }
.total-lock-note, .pdf-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.pdf-note { padding-top: 14px; border-top: 1px solid var(--line); }
.total-unlock { height: 1px; width: 1px; pointer-events: none; }
.summary-final { display: none; }

/* Closing actions read as a deliberate end-point, so align them to the right. */
.process-cta, .section-end-cta { display: flex; justify-content: flex-end; width: 100%; }

/* Footer stripe becomes a continuous information ticker. */
.footer-marquee {
  transform: translateX(-4vw);
  animation: footer-marquee-run 30s linear infinite;
  will-change: transform;
}
@keyframes footer-marquee-run {
  from { transform: translateX(-4vw); }
  to { transform: translateX(calc(-50% - 4vw)); }
}

/* Dark sections have their own low-frequency signal sweep instead of going visually dead. */
.band-basement, .t7 { isolation: isolate; overflow: hidden; }
.band-basement::before, .t7::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -30% -35%;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 38%, rgba(132,103,255,.055) 47%, rgba(202,255,104,.018) 50%, rgba(132,103,255,.04) 53%, transparent 62%),
    repeating-linear-gradient(168deg, transparent 0 86px, rgba(244,242,235,.016) 87px 88px);
  transform: translate3d(-14%, 0, 0);
  animation: dark-section-scan 16s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
.band-basement > .wrap, .t7 > .wrap { position: relative; z-index: 1; }
@keyframes dark-section-scan {
  from { transform: translate3d(-14%, -1%, 0); opacity: .62; }
  to { transform: translate3d(14%, 1%, 0); opacity: 1; }
}

/* The four-step production process needs more room before mobile. */
@media (max-width: 1180px) {
  .rec-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-steps li { min-height: 210px; }
}

@media (max-width: 960px) {
  .builder-intro { grid-template-columns: 1fr; align-items: start; }
  .contact-hub { max-width: none; }
  .summary-side { display: none !important; }
  .summary-final { display: flex; }
  form.builder > .side { margin-top: 40px; }
}

@media (max-width: 620px) {
  .time-window { grid-template-columns: 1fr; }
  .time-window > label:first-child { grid-column: auto; }
  .process-cta .btn, .section-end-cta .btn { width: 100%; }
  .rec-steps { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-marquee, .band-basement::before, .t7::before { animation: none !important; }
}

/* Prefer natural line breaks over breaking model/service names in the middle. */
.cards-4 .card h3, .addon-grid .card h3 { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* ======================================================================
   v4 final pass — locale typography, hero hierarchy, signal-field motion
   ====================================================================== */

/* English keeps the current Onest voice. Russian and Serbian get a more
   architectural display face while body copy remains calm and readable. */
html[lang="ru"] .voice,
html[lang="ru"] h1,
html[lang="ru"] h2,
html[lang="ru"] h3,
html[lang="sr-Latn"] .voice,
html[lang="sr-Latn"] h1,
html[lang="sr-Latn"] h2,
html[lang="sr-Latn"] h3 {
  font-family: "Geologica", "Onest", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.042em;
}
html[lang="ru"] .voice,
html[lang="sr-Latn"] .voice { font-weight: 650; }

/* Hero metadata is a service summary now, not a rider. Keep it calm and on one line
   whenever desktop width allows. */
.hero-meta { white-space: nowrap; }
.hero-meta span { min-width: 0; }
@media (max-width: 820px) { .hero-meta { white-space: normal; } }

/* The manifesto headline must own its column instead of sitting over the cards. */
@media (min-width: 1101px) {
  .manifesto-layout {
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    gap: clamp(46px, 5.4vw, 86px);
  }
  .manifesto-head { min-width: 0; }
  .manifesto-head .voice-l {
    width: 100%;
    max-width: 100%;
    font-size: clamp(50px, 4.45vw, 76px);
    line-height: .93;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
  }
}
@media (max-width: 1100px) {
  .manifesto-layout { grid-template-columns: 1fr; }
  .manifesto-head { position: static; }
  .manifesto-head .voice-l { max-width: 11ch; }
}

/* Camera line requested as a single technical signature. */
.rec-note-nowrap {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  font-size: clamp(12px, 1.05vw, 15px);
}
.rec-note-nowrap::-webkit-scrollbar { display: none; }
.kit li > span:first-child { white-space: nowrap; }

/* The idea CTA uses the same Telegram route as the builder, but stays compact. */
.idea-contact { width: 100%; }
.idea-contact > .contact-hub { width: min(100%, 520px); margin-top: 6px; }

/* Continuous footer motion should be visible without reading as a gimmick. */
.footer-marquee { animation-duration: 21s; }

/* Dark sections: a moving signal field + an occasional travelling pulse.
   This replaces the nearly invisible wash from the previous pass. */
.band-basement, .t7 {
  --signal-parallax: 0px;
  isolation: isolate;
  overflow: hidden;
}
.band-basement::before, .t7::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -34% -26%;
  pointer-events: none;
  opacity: .9;
  transform: translate3d(0, var(--signal-parallax), 0);
  background-image:
    repeating-radial-gradient(ellipse at 18% 64%,
      transparent 0 48px,
      rgba(141,123,255,.085) 49px 50px,
      transparent 51px 96px),
    repeating-radial-gradient(ellipse at 82% 28%,
      transparent 0 68px,
      rgba(244,242,235,.026) 69px 70px,
      transparent 71px 136px),
    linear-gradient(110deg,
      transparent 28%,
      rgba(141,123,255,.06) 42%,
      rgba(202,255,104,.022) 50%,
      rgba(141,123,255,.055) 58%,
      transparent 72%);
  background-size: 128% 118%, 122% 132%, 210% 100%;
  background-position: -8vw 0, 12vw 4vh, -80vw 0;
  animation: underent-signal-field 17s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  will-change: background-position, opacity;
}
.band-basement::after, .t7::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -48%;
  bottom: -48%;
  left: -18vw;
  width: 2px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom,
    transparent 8%,
    rgba(141,123,255,.08) 28%,
    rgba(202,255,104,.42) 49%,
    rgba(244,242,235,.18) 52%,
    rgba(141,123,255,.06) 72%,
    transparent 94%);
  box-shadow: 0 0 22px rgba(202,255,104,.12), 0 0 64px rgba(141,123,255,.14);
  transform: rotate(16deg) translate3d(-16vw,0,0);
  animation: underent-signal-pulse 10.5s cubic-bezier(.35,.02,.18,.98) infinite;
  will-change: transform, opacity;
}
.band-basement > .wrap, .t7 > .wrap { position: relative; z-index: 1; }

@keyframes underent-signal-field {
  0% {
    background-position: -10vw -1vh, 12vw 4vh, -92vw 0;
    opacity: .66;
  }
  48% { opacity: .95; }
  100% {
    background-position: 14vw 4vh, -8vw -3vh, 58vw 0;
    opacity: .82;
  }
}
@keyframes underent-signal-pulse {
  0%, 18% { transform: rotate(16deg) translate3d(-18vw,0,0); opacity: 0; }
  23% { opacity: .74; }
  55% { opacity: .42; }
  72% { transform: rotate(16deg) translate3d(146vw,0,0); opacity: 0; }
  100% { transform: rotate(16deg) translate3d(146vw,0,0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .band-basement::before, .band-basement::after, .t7::before, .t7::after { animation: none !important; }
}

/* ======================================================================
   v5 acceptance pass — denser equipment rows, aligned formats, live ending
   ====================================================================== */

/* Equipment reads as one compact technical row. Any spare width stays at the
   end of the row instead of opening large gaps between art, name and specs. */
@media (min-width: 1181px) {
  .rig-group .wrap { grid-template-columns: minmax(220px, .30fr) minmax(0, 1fr); }
  .dev {
    grid-template-columns: minmax(150px, 180px) minmax(240px, 320px) minmax(280px, 430px);
    justify-content: start;
    column-gap: clamp(20px, 1.8vw, 30px);
  }
}
@media (min-width: 821px) and (max-width: 1180px) {
  .rig-group .wrap { grid-template-columns: minmax(190px, .30fr) minmax(0, 1fr); gap: 26px; }
  .dev {
    grid-template-columns: 130px minmax(180px, .8fr) minmax(220px, 1.2fr);
    column-gap: 18px;
    padding-inline: 12px;
  }
}
.dev-art img { filter: drop-shadow(0 18px 22px rgba(0,0,0,.28)); }

/* Three ways to use it: number, title and copy now form a top-aligned stack.
   There is no auto margin pushing a shorter card's title lower than its peers. */
.format-card {
  min-height: 285px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 0;
}
.format-card h3 {
  margin-top: clamp(28px, 3vw, 44px);
  align-self: start;
  line-height: .98;
}
.format-card p { margin-top: 16px; align-self: start; }

/* The closing dark bands use a broad travelling energy wave. This remains
   visible on large black areas without obscuring their content. */
.band-basement::before, .t7::before {
  opacity: .96;
  filter: saturate(1.24);
}
.band-basement::after, .t7::after {
  top: -34%;
  bottom: -34%;
  left: -42vw;
  width: 42vw;
  opacity: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      transparent 0 34%,
      rgba(202,255,104,.07) 35% 36%,
      rgba(141,123,255,.24) 37% 39%,
      rgba(244,242,235,.08) 40%,
      transparent 47%),
    linear-gradient(90deg, transparent, rgba(141,123,255,.08), transparent);
  box-shadow: none;
  transform: translate3d(-20vw,0,0) rotate(8deg);
  animation: underent-v5-energy-wave 9.6s cubic-bezier(.42,0,.18,1) var(--signal-delay, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes underent-v5-energy-wave {
  0%, 16% { transform: translate3d(-28vw,0,0) rotate(8deg) scale(.86); opacity: 0; }
  23% { opacity: .85; }
  52% { opacity: .58; }
  72% { transform: translate3d(170vw,0,0) rotate(8deg) scale(1.08); opacity: 0; }
  100% { transform: translate3d(170vw,0,0) rotate(8deg) scale(1.08); opacity: 0; }
}

@media (max-width: 900px) {
  .rec-hero-grid { grid-template-columns: 1fr; }
  .rec-hero-grid h1 { max-width: 11ch; }
  .rec-hero-art { min-height: 480px; }
}
@media (max-width: 620px) {
  .format-card { min-height: 0; padding-block: 24px 28px; }
  .format-card h3 { margin-top: 26px; }
  .format-card p { margin-top: 14px; }
  .dev-art img { width: 100%; max-width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .band-basement::after, .t7::after { animation: none !important; }
}


/* ======================================================================
   v6 — closing blocks, two bases, long-word guards
   ====================================================================== */

/* ---------- buttons: the arrow is part of the gesture */
.btn .arr { display: inline-block; margin-left: .55em; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
a.btn:hover .arr, a.btn:focus-visible .arr { transform: translateX(5px); }
.btn-big { min-height: 60px; padding: 0 30px; font-size: 13px; border-radius: 13px; }

/* ---------- closer: question, answer, and the action wired to it */
.band-closer { border-top: 1px solid var(--line); padding-block: clamp(76px, 9vw, 148px) clamp(84px, 10vw, 160px); }
.closer { display: grid; gap: clamp(22px, 2.4vw, 34px); }
.closer-title { margin: 0; max-width: 20ch; text-wrap: balance; }
.closer-row { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); padding-bottom: 34px; }
.closer-lead { flex: 0 1 36em; margin: 0; color: rgba(244,242,235,.72); font-size: clamp(16px, 1.22vw, 19px); line-height: 1.55; text-wrap: pretty; }
.closer-cable { flex: 1 1 96px; min-width: 64px; height: 2px; position: relative; border-radius: 2px;
  background: linear-gradient(90deg, rgba(244,242,235,.06), rgba(244,242,235,.22) 55%, rgba(202,255,104,.55)); }
.closer-cable::before { content: ""; position: absolute; left: -2px; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%);
  border: 1px solid rgba(244,242,235,.35); background: var(--basement, #080909); }
.closer-cable::after { content: ""; position: absolute; right: -1px; top: 50%; width: 12px; height: 10px; border-radius: 2px 0 0 2px; transform: translateY(-50%);
  background: var(--acid); box-shadow: 0 0 14px rgba(202,255,104,.45); }
.closer-cable i { position: absolute; top: -2px; left: 0; width: 22%; height: 6px; border-radius: 6px; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 70% 50%, rgba(202,255,104,.95), rgba(202,255,104,.25) 45%, transparent 72%); filter: blur(.4px); }
.closer-actions { position: relative; flex: none; }
.closer-alt { position: absolute; right: 2px; top: calc(100% + 14px); white-space: nowrap; font: 500 12px var(--mono); letter-spacing: .02em;
  color: var(--muted); text-decoration: underline; text-decoration-color: rgba(244,242,235,.25); text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.closer-alt:hover { color: var(--bone); text-decoration-color: var(--acid); }
/* the signal runs down the cable into the button: once as the block arrives, and on every hover */
.closer.is-live .closer-cable i { animation: closer-run 1.5s cubic-bezier(.55,0,.35,1) .2s 2; }
.closer:hover .closer-cable i, .closer:focus-within .closer-cable i { animation: closer-run 1.25s cubic-bezier(.55,0,.35,1) infinite; }
.closer.is-live .closer-actions .btn-acid { animation: closer-plug 1.5s ease-out .2s 2; }
@keyframes closer-run { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 78%; opacity: 0; } }
@keyframes closer-plug { 0%, 78% { box-shadow: 0 0 0 1px rgba(202,255,104,.12), 0 14px 40px rgba(202,255,104,.08); }
  88% { box-shadow: 0 0 0 5px rgba(202,255,104,.16), 0 0 46px rgba(202,255,104,.42); }
  100% { box-shadow: 0 0 0 1px rgba(202,255,104,.12), 0 14px 40px rgba(202,255,104,.08); } }
.rec-process .closer { margin-top: clamp(20px, 3vw, 44px); padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .closer-row { flex-direction: column; align-items: stretch; gap: 26px; padding-bottom: 0; }
  .closer-cable { display: none; }
  .closer-actions { display: flex; flex-direction: column; gap: 14px; }
  .closer-actions .btn { width: 100%; }
  .closer-alt { position: static; align-self: center; }
}

/* ---------- packages: the conditions read as their own block, not a footnote */
.terms-block { display: grid; grid-template-columns: minmax(200px, .32fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(24px, 3vw, 48px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line); }
.terms-title { margin: 0; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; letter-spacing: -.02em; }
.terms-block .terms { max-width: none; }
.terms-block .money-note { margin: 22px 0 0; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .terms-block { grid-template-columns: 1fr; } }

/* ---------- two bases, one system */
.season.season-route { display: grid; grid-template-columns: minmax(0, 1fr) clamp(56px, 7vw, 120px) minmax(0, 1fr); gap: 0; align-items: stretch; }
.season-route .base { position: relative; min-height: 236px; padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 0;
  border: 1px solid rgba(244,242,235,.2); border-radius: 18px; background: rgba(255,255,255,.03); }
.season-route .base.is-live { border-color: rgba(202,255,104,.34); background: linear-gradient(140deg, rgba(202,255,104,.05), rgba(255,255,255,.02) 46%); }
.season-route .m { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(244,242,235,.8); }
.season-route .p { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; font-size: clamp(30px, 3.3vw, 52px); font-weight: 700; line-height: .98; letter-spacing: -.035em; color: var(--bone); text-decoration: none; }
.season-route .p .country { color: rgba(244,242,235,.5); }
.season-route a.p .go { position: absolute; top: 24px; right: 26px; font-size: 20px; letter-spacing: 0; color: rgba(244,242,235,.6); transition: transform .3s cubic-bezier(.2,.8,.2,1), color .2s; }
.season-route a.p:hover .go { transform: translate(3px, -3px); color: var(--acid); }
.season-route a.p:hover .country { color: rgba(244,242,235,.78); }
.season-route a.p::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* whole card is the link */
.season-route .foot { margin-top: 18px; display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; font: 500 11px var(--mono); letter-spacing: .04em; color: rgba(244,242,235,.5); }
.season-route .geo { white-space: pre; }
.season-route .state { display: inline-flex; align-items: center; gap: 8px; color: rgba(244,242,235,.66); }
.season-route .is-live .state { color: var(--acid); }
.season-route .is-live .state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px rgba(202,255,104,.7); animation: base-blink 2s ease-in-out infinite; }
/* ports on the inner edges, joined by the route */
.season-route .pin { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; z-index: 2;
  background: #24124a; border: 1px solid rgba(244,242,235,.45); }
.season-route .pin i { position: absolute; inset: 3px; border-radius: 50%; background: rgba(244,242,235,.55); }
.season-route .base:first-child .pin { right: -7px; }
.season-route .base:last-child .pin { left: -7px; }
.season-route .is-live .pin { border-color: var(--acid); }
.season-route .is-live .pin i { background: var(--acid); box-shadow: 0 0 10px rgba(202,255,104,.8); }
.season-route .route { position: relative; align-self: center; height: 2px; margin: 0 7px; overflow: visible;
  background: repeating-linear-gradient(90deg, rgba(244,242,235,.38) 0 6px, transparent 6px 11px); }
.season-route .route i { position: absolute; top: -3px; width: 34px; height: 8px; border-radius: 8px; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(202,255,104,1), rgba(202,255,104,.3) 46%, transparent 72%); }
.season-route[data-from="left"] .route i { animation: route-ltr 4.8s cubic-bezier(.6,0,.3,1) infinite; }
.season-route[data-from="right"] .route i { animation: route-rtl 4.8s cubic-bezier(.6,0,.3,1) infinite; }
.season-route .base:not(.is-live) .pin { animation: port-catch 4.8s ease-out infinite; }
@keyframes route-ltr { 0%, 8% { left: -17px; opacity: 0; } 14% { opacity: 1; } 42% { opacity: 1; } 48%, 100% { left: calc(100% - 17px); opacity: 0; } }
@keyframes route-rtl { 0%, 8% { left: calc(100% - 17px); opacity: 0; } 14% { opacity: 1; } 42% { opacity: 1; } 48%, 100% { left: -17px; opacity: 0; } }
@keyframes port-catch { 0%, 44% { box-shadow: none; border-color: rgba(244,242,235,.45); } 50% { box-shadow: 0 0 0 5px rgba(202,255,104,.16), 0 0 22px rgba(202,255,104,.5); border-color: var(--acid); } 70%, 100% { box-shadow: none; border-color: rgba(244,242,235,.45); } }
@keyframes base-blink { 50% { opacity: .35; } }
/* the live base sends sound waves into its own card, from its port — the logo's cone rings */
.season-route .waves { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.season-route .waves i { position: absolute; top: 50%; width: 120px; height: 120px; margin: -60px; border-radius: 50%; border: 1px solid rgba(202,255,104,.5); opacity: 0;
  animation: base-wave 4.8s cubic-bezier(.2,.6,.3,1) infinite; }
.season-route .base:first-child .waves i { left: 100%; }
.season-route .base:last-child .waves i { left: 0; }
.season-route .waves i:nth-child(2) { animation-delay: .5s; }
.season-route .waves i:nth-child(3) { animation-delay: 1s; }
@keyframes base-wave { 0% { transform: scale(.15); opacity: 0; } 8% { opacity: .9; } 60%, 100% { transform: scale(5.2); opacity: 0; } }
@media (max-width: 760px) {
  .season.season-route { grid-template-columns: 1fr; grid-template-rows: auto 64px auto; }
  .season-route .base { min-height: 196px; }
  .season-route .pin { top: auto; margin-top: 0; }
  .season-route .base:first-child .pin { right: auto; left: 50%; bottom: -7px; margin-left: -7px; }
  .season-route .base:last-child .pin { left: 50%; top: -7px; margin-left: -7px; }
  .season-route .base:first-child .waves i { left: 50%; top: 100%; }
  .season-route .base:last-child .waves i { left: 50%; top: 0; }
  .season-route .route { justify-self: center; align-self: stretch; width: 2px; height: auto; margin: 7px 0;
    background: repeating-linear-gradient(180deg, rgba(244,242,235,.38) 0 6px, transparent 6px 11px); }
  .season-route .route i { left: -3px !important; width: 8px; height: 30px; top: 0; }
  .season-route[data-from="left"] .route i { animation-name: route-ttb; }
  .season-route[data-from="right"] .route i { animation-name: route-btt; }
}
@keyframes route-ttb { 0%, 8% { top: -15px; opacity: 0; } 14% { opacity: 1; } 42% { opacity: 1; } 48%, 100% { top: calc(100% - 15px); opacity: 0; } }
@keyframes route-btt { 0%, 8% { top: calc(100% - 15px); opacity: 0; } 14% { opacity: 1; } 42% { opacity: 1; } 48%, 100% { top: -15px; opacity: 0; } }

/* ---------- long words in RU / SR: headlines size to their column instead of running into the art */
.rec-hero-grid h1 { max-width: none; overflow-wrap: normal; text-wrap: balance; }
html[lang="sr-Latn"] .rec-hero-grid h1, html[lang="ru"] .rec-hero-grid h1 { font-size: clamp(44px, 6.1vw, 104px); line-height: .94; }
@media (min-width: 901px) {
  html[lang="sr-Latn"] .rec-hero-grid h1, html[lang="ru"] .rec-hero-grid h1 { font-size: clamp(44px, 5.2vw, 92px); }
}
.rig-group-head h2 { overflow-wrap: normal; hyphens: manual; }
html[lang="ru"] .rig-group-head h2, html[lang="sr-Latn"] .rig-group-head h2 { font-size: clamp(26px, 2.3vw, 40px); }
@media (max-width: 1100px) {
  .manifesto-head .voice-l { max-width: none; font-size: clamp(38px, 7vw, 64px); }
}
html[lang="ru"] .voice-xl, html[lang="sr-Latn"] .voice-xl { overflow-wrap: normal; }
@media (max-width: 520px) {
  .voice-xl { font-size: clamp(40px, 12.4vw, 64px); }
  html[lang="ru"] .voice-xl, html[lang="sr-Latn"] .voice-xl { font-size: clamp(36px, 11vw, 60px); }
  .voice-l { font-size: clamp(32px, 9.4vw, 52px); }
}

@media (prefers-reduced-motion: reduce) {
  .closer .closer-cable i, .closer .btn-acid, .season-route .route i, .season-route .pin, .season-route .waves i, .season-route .state::before { animation: none !important; }
  .season-route .waves { display: none; }
}
/* the plug sits right against the button */
.closer-cable { margin-right: calc(-1 * clamp(18px, 2.2vw, 34px)); }
@media (max-width: 760px) { .closer-cable { margin-right: 0; } }
.season-route .waves i { border-color: rgba(202,255,104,.62); animation-name: base-wave-2; }
@keyframes base-wave-2 { 0% { transform: scale(.15); opacity: 0; } 6% { opacity: 1; } 40% { opacity: .55; } 72%, 100% { transform: scale(5.6); opacity: 0; } }

/* builder add-ons: two cards side by side only when the column has room for them */
@media (min-width: 961px) and (max-width: 1360px) {
  form.builder .addon-opts.rec, form.builder .addon-opts.dj { grid-template-columns: minmax(0, 1fr); }
}
form.q .addon-name { hyphens: auto; overflow-wrap: break-word; }

/* recording hero: one size rule for every language, sized to its column */
@media (min-width: 901px) { .rec-hero-grid h1 { font-size: clamp(44px, 5.2vw, 92px); line-height: .94; } }
/* long Russian / Serbian words in section headlines on tablets */
@media (min-width: 521px) and (max-width: 900px) {
  html[lang="ru"] .voice-l, html[lang="sr-Latn"] .voice-l { font-size: clamp(34px, 6.2vw, 54px); }
}
/* collaboration: the diagram goes under the copy before the copy column gets too narrow */
@media (max-width: 900px) {
  .collab-layout { grid-template-columns: 1fr; }
  .collab-visual { width: 100%; max-width: 440px; justify-self: center; }
}
.rec-cam-card > span { z-index: 3; }
.rec-cam-card.floating picture, .rec-cam-card.floating img { padding-top: 22px; box-sizing: border-box; }


/* ======================================================================
   v7 — launch pass: ticker, idea block, aligned principles, live rings,
   early booking, calendar states, promo code
   ====================================================================== */

/* ---------- service ticker: two identical runs loop seamlessly; diamonds fire one after another */
.signal-strip { position: relative; background: rgba(7,7,8,.82);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.signal-marquee { display: flex; width: max-content; animation: signal-run 38s linear infinite; }
.signal-strip:hover .signal-marquee { animation-play-state: paused; }
.signal-marquee .signal-track { min-width: 0; width: auto; justify-content: flex-start; flex: none; padding: 22px 0; gap: 0; font-size: 11px; letter-spacing: .16em; color: rgba(244,242,235,.62); }
.signal-marquee .signal-track span { padding: 0 clamp(26px, 2.6vw, 44px); transition: color .25s; }
.signal-marquee .signal-track span:hover { color: var(--bone); }
.signal-marquee .signal-track i { flex: none; width: 6px; height: 6px; opacity: 1; background: var(--violet-lift);
  animation: signal-diamond 3.6s ease-in-out infinite; animation-delay: calc(var(--k) * .6s); }
@keyframes signal-run { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes signal-diamond {
  0%, 30%, 100% { background: var(--violet-lift); box-shadow: none; transform: rotate(45deg) scale(1); }
  12% { background: var(--acid); box-shadow: 0 0 14px rgba(202,255,104,.7), 0 0 30px rgba(202,255,104,.25); transform: rotate(45deg) scale(1.45); }
}
@media (max-width: 760px) { .signal-marquee { animation-duration: 26s; } .signal-marquee .signal-track span:nth-of-type(n) { display: inline; } .signal-marquee .signal-track i:nth-of-type(n) { display: block; } }

/* ---------- start with the idea: the button ends the copy, the channels card sits beside it */
.idea-band .split { align-items: center; }
.idea-copy { gap: clamp(22px, 2.4vw, 32px); }
.idea-go { display: flex; align-items: center; gap: 0; max-width: 34em; margin-top: 6px; }
.idea-go .closer-cable { flex: 1 1 120px; margin-right: 0; order: 0; }
.idea-go .btn { flex: none; order: 1; }
.idea-band.is-live .idea-go .closer-cable i { animation: closer-run 1.5s cubic-bezier(.55,0,.35,1) .2s 2; }
.idea-go:hover .closer-cable i { animation: closer-run 1.25s cubic-bezier(.55,0,.35,1) infinite; }
.idea-band.is-live .idea-go .btn-acid { animation: closer-plug 1.5s ease-out .2s 2; }
.idea-contact { width: 100%; display: flex; justify-content: flex-end; }
.idea-contact > .contact-hub { width: min(100%, 540px); margin: 0; }
.contact-action.primary { justify-content: flex-start; color: var(--bone); }
@media (max-width: 760px) {
  .idea-go { flex-direction: column; align-items: stretch; }
  .idea-go .closer-cable { display: none; }
  .idea-go .btn { width: 100%; }
  .idea-contact { justify-content: stretch; }
}

/* ---------- principles: number, heading and copy share rows across each pair, all top-aligned */
.principle-grid { grid-auto-rows: auto; align-items: stretch; }
.principle-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-height: 0; }
.principle-no { align-self: start; font-size: 11px; }
.principle-card h3 { margin: 22px 0 0; align-self: start; text-wrap: balance; }
.principle-card p { margin: 16px 0 0; align-self: start; }
@supports not (grid-template-rows: subgrid) {
  .principle-card { display: flex; flex-direction: column; justify-content: flex-start; }
  .principle-card h3 { margin-top: 22px; min-height: 2.1em; }
}
@media (max-width: 900px) { .principle-card { grid-row: auto; display: flex; flex-direction: column; } .principle-card h3 { margin-top: 18px; } }

/* ---------- Res 4E panel: live cone rings (canvas) replace the static pattern */
.art-panel.has-rings { background: radial-gradient(circle at 50% 56%, rgba(129,104,255,.14), transparent 46%), #0a0a0c; }
.art-panel .rings-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.art-panel picture, .art-panel img { position: relative; z-index: 1; }

/* ---------- early booking: a marked request type */
.early-tag { display: inline-flex; align-items: center; gap: 9px; flex: none; padding: 7px 11px; border: 1px solid rgba(202,255,104,.4); border-radius: 999px;
  font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acid); background: rgba(8,9,11,.32); }
.early-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 0 rgba(202,255,104,.5); animation: early-ping 2.4s ease-out infinite; }
@keyframes early-ping { 0% { box-shadow: 0 0 0 0 rgba(202,255,104,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(202,255,104,0); } }
.early-bar { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); padding: 18px 18px 18px 22px; border: 1px solid rgba(244,242,235,.16); border-radius: 22px;
  background: linear-gradient(100deg, rgba(8,9,11,.34), rgba(8,9,11,.12)); backdrop-filter: blur(8px); }
.early-bar p { flex: 1 1 auto; margin: 0; font-size: clamp(16px, 1.25vw, 19px); color: var(--bone); }
.early-bar .btn { flex: none; border-radius: 12px; }
@media (max-width: 820px) { .early-bar { flex-direction: column; align-items: flex-start; padding: 20px; } .early-bar .btn { width: 100%; } }

.early-flag { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid rgba(202,255,104,.34); border-radius: 18px;
  background: linear-gradient(100deg, rgba(202,255,104,.08), rgba(141,123,255,.08)); animation: early-in .5s cubic-bezier(.2,.8,.2,1); }
.early-flag[hidden] { display: none; }
.early-flag > div { flex: 1 1 auto; min-width: 0; }
.early-flag strong { display: block; color: var(--bone); font: 700 17px/1.3 var(--sans); }
.early-flag p { margin: 4px 0 0; color: rgba(244,242,235,.7); font: 14px/1.5 var(--sans); }
.early-off { flex: none; appearance: none; background: none; border: 0; border-bottom: 1px solid rgba(244,242,235,.28); padding: 3px 0; color: var(--muted); font: 11px var(--mono); cursor: pointer; }
.early-off:hover { color: var(--bone); border-color: var(--acid); }
@keyframes early-in { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 620px) { .early-flag { flex-direction: column; align-items: flex-start; } }

/* ---------- calendar: states you can read at a glance */
.date-side { justify-content: flex-start; }
.cal { position: relative; }
.cal-grid { gap: 5px; }
.day { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: border-color .2s, background .2s, opacity .25s, transform .2s, filter .25s; }
.day b { position: relative; z-index: 1; font-weight: 500; }
.cal-anim .day { animation: day-in .42s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 9ms); }
@keyframes day-in { from { opacity: 0; transform: translateY(6px) scale(.94); } }
/* free: quiet tile with a hairline that lights on hover */
.day.free:hover:not(:disabled) { border-color: rgba(202,255,104,.6); background: rgba(202,255,104,.06); }
/* partly free: violet corner fill + dashed edge */
.day.fits { border: 1px dashed rgba(141,123,255,.75); background: linear-gradient(135deg, rgba(141,123,255,.28) 0 28%, rgba(0,0,0,.22) 28%); }
/* booked: hatched tape that drifts, number struck */
.day.booked { opacity: 1; color: rgba(244,242,235,.38); text-decoration: none; border-color: rgba(255,138,115,.22);
  background: repeating-linear-gradient(-45deg, rgba(255,138,115,.16) 0 3px, transparent 3px 8px) 0 0 / 22.6px 22.6px, rgba(0,0,0,.3);
  animation: booked-drift 2.8s linear infinite; }
.day.booked b::after { content: ""; position: absolute; left: -3px; right: -3px; top: 52%; height: 1px; background: rgba(255,138,115,.7); }
@keyframes booked-drift { to { background-position: 22.6px 0, 0 0; } }
/* other country: transparent, dashed, tagged with the country code */
.day.away { opacity: .62; background: transparent; border: 1px dashed rgba(244,242,235,.16); color: rgba(244,242,235,.38); }
.day.away em { position: absolute; right: 4px; top: 3px; font: 600 7px/1 var(--mono); font-style: normal; letter-spacing: .08em; color: rgba(141,123,255,.9); }
.day.past { opacity: .18; }
/* today: acid dot */
.day.today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 8px rgba(202,255,104,.8); }
/* selected nights read as one block */
.day.sel { background: var(--acid); border-color: var(--acid); color: #090909; box-shadow: 0 0 22px rgba(202,255,104,.22); }
.day.sel.sel-a { animation: sel-pop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes sel-pop { 0% { transform: scale(.82); } 100% { transform: scale(1); } }
.day.sel:not(.sel-a) { background: rgba(202,255,104,.82); }
/* range preview while hovering */
.day.pre:not(.sel) { border-color: rgba(202,255,104,.75); background: rgba(202,255,104,.12); }
.day.pre-bad:not(.sel) { border-color: rgba(255,138,115,.8); background: rgba(255,138,115,.12); }
/* legend as a filter: hover or tap a status and only those days stay lit */
.cal[data-focus="free"] .day:not(.free), .cal[data-focus="fits"] .day:not(.fits),
.cal[data-focus="booked"] .day:not(.booked), .cal[data-focus="away"] .day:not(.away) { opacity: .12; filter: saturate(.3); }
.cal[data-focus="free"] .day.free, .cal[data-focus="fits"] .day.fits, .cal[data-focus="booked"] .day.booked, .cal[data-focus="away"] .day.away { transform: scale(1.04); }
.cal .cal-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; border: 0; flex-direction: row; }
.cal .lg { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px 0 8px; border: 1px solid rgba(244,242,235,.1); border-radius: 999px;
  background: rgba(0,0,0,.22); color: rgba(244,242,235,.72); font: 11px/1 var(--mono); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.cal .lg:hover, .cal .lg:focus-visible, .cal[data-focus="free"] .lg[data-k="free"], .cal[data-focus="fits"] .lg[data-k="fits"], .cal[data-focus="booked"] .lg[data-k="booked"], .cal[data-focus="away"] .lg[data-k="away"] { border-color: rgba(244,242,235,.38); color: var(--bone); background: rgba(255,255,255,.04); }
.cal .lg small { font: inherit; color: var(--muted); padding-left: 6px; border-left: 1px solid rgba(244,242,235,.12); }
.cal .lg.is-zero { opacity: .45; }
.cal .lg .k { flex: none; width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(244,242,235,.2); background: rgba(0,0,0,.4); }
.cal .lg .k.free { border-color: rgba(202,255,104,.55); }
.cal .lg .k.fits { border: 1px dashed rgba(141,123,255,.85); background: linear-gradient(135deg, rgba(141,123,255,.5) 0 40%, rgba(0,0,0,.3) 40%); }
.cal .lg .k.booked { border-color: rgba(255,138,115,.4); background: repeating-linear-gradient(-45deg, rgba(255,138,115,.55) 0 2px, transparent 2px 5px); }
.cal .lg .k.away { border: 1px dashed rgba(244,242,235,.3); background: transparent; }
.cal-read { margin: 2px 0 0; min-height: 1.5em; font: 12px/1.5 var(--mono); color: var(--muted); }
.cal-read b { color: var(--bone); font-weight: 500; text-transform: capitalize; margin-right: 6px; }
.cal-read[data-k="fits"] { color: #b9a8ff; } .cal-read[data-k="booked"] { color: #ff8a73; } .cal-read[data-k="free"] { color: var(--acid); }
.cal-msg[data-state="ok"] { display: flex; gap: 10px; align-items: baseline; }
.cal-msg[data-state="ok"]::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acid); transform: translateY(-1px); animation: early-ping 2.4s ease-out infinite; }
.cal-msg[data-state="warn"]::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; border: 1px solid currentColor; font: 700 10px var(--mono); }

/* ---------- total + promo code: the empty left half carries the code, the figure keeps its label */
.summary .total.total-v7 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 24px; padding-top: 18px; }
.total-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; min-width: 0; }
.summary .total-fig .total-k { font: 600 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.summary .total-fig strong { line-height: 1; }
.total-was { font: 14px/1 var(--mono); color: rgba(244,242,235,.42); text-decoration-color: rgba(255,138,115,.8); text-decoration-thickness: 1px; }
.summary .total-fig .to-eur { margin-top: 10px; }
.promo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.promo-k { font: 600 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.promo.is-on .promo-k { color: var(--acid); }
/* applied: a ticket stub with notches */
.promo-ticket { --notch: radial-gradient(circle at 0 50%, transparent 6px, #000 6.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 6px, #000 6.5px) right / 51% 100% no-repeat;
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 16px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(100deg, rgba(202,255,104,.16), rgba(202,255,104,.06)); border: 1px solid rgba(202,255,104,.5);
  -webkit-mask: var(--notch); mask: var(--notch); }
.promo-ticket::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(244,242,235,.35), transparent); transform: skewX(-18deg); pointer-events: none; opacity: 0; }
.promo.is-fresh .promo-ticket { animation: promo-pop .55s cubic-bezier(.2,1.3,.4,1); }
.promo.is-fresh .promo-ticket::after, .promo.is-on:hover .promo-ticket::after { animation: promo-shine 1.1s ease-out; }
@keyframes promo-pop { 0% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes promo-shine { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.promo-ok { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--acid); flex: none; }
.promo-ok svg { width: 13px; height: 13px; fill: none; stroke: #090909; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 0; }
.promo.is-fresh .promo-ok svg { animation: promo-tick .5s .15s ease-out both; }
@keyframes promo-tick { from { stroke-dashoffset: 16; } }
.promo-code { font: 600 14px/1 var(--mono); letter-spacing: .12em; color: var(--bone); }
.promo-pct { font: 600 12px/1 var(--mono); color: #090909; background: var(--acid); padding: 4px 6px; border-radius: 5px; }
.promo-x { appearance: none; border: 0; background: transparent; color: var(--muted); width: 30px; height: 30px; margin-left: 2px; border-radius: 8px; font: 18px/1 var(--sans); cursor: pointer; }
.promo-x:hover, .promo-x:focus-visible { color: var(--bone); background: rgba(255,255,255,.07); }
.promo-save { font: 12px/1.3 var(--mono); color: var(--muted); }
.promo-save b { color: var(--acid); font-weight: 500; }
/* editing */
.promo-field { display: flex; width: 100%; max-width: 280px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.28); transition: border-color .2s; }
.promo-field:focus-within { border-color: rgba(202,255,104,.6); }
form.q .promo-in { min-height: 42px; border: 0; background: transparent; padding: 0 12px; font: 500 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
form.q .promo-in::placeholder { text-transform: none; letter-spacing: .02em; color: rgba(244,242,235,.35); }
.promo-apply { flex: none; appearance: none; border: 0; border-left: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--bone); padding: 0 14px; font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.promo-apply:hover { background: var(--acid); color: #090909; }
.promo.is-error .promo-field { border-color: rgba(255,138,115,.8); animation: promo-shake .35s; }
.promo-err { font: 11px var(--mono); color: #ff8a73; }
@keyframes promo-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (max-width: 460px) { .summary .total.total-v7 { grid-template-columns: 1fr; } .total-fig { align-items: flex-end; } }

@media (prefers-reduced-motion: reduce) {
  .signal-marquee { animation: none; width: auto; justify-content: center; }
  .signal-marquee .signal-track[aria-hidden] { display: none; }
  .signal-marquee .signal-track i, .early-tag i, .day.booked, .cal-anim .day, .promo-ticket, .promo-ticket::after, .cal-msg::before, .idea-go .closer-cable i, .idea-band .btn-acid { animation: none !important; }
}
/* the old .summary .total span rule must not reach inside the promo ticket */
.summary .total-v7 .promo .promo-k { font: 600 10px/1 var(--mono); color: var(--muted); }
.summary .total-v7 .promo.is-on .promo-k { color: var(--acid); }
.summary .total-v7 .promo .promo-code { font: 600 14px/1 var(--mono); color: var(--bone); }
.summary .total-v7 .promo .promo-pct { font: 600 12px/1 var(--mono); color: #090909; }
.summary .total-v7 .promo .promo-save { font: 12px/1.3 var(--mono); color: var(--muted); }
.summary .total.total-v7 .total-fig span.total-k { font: 600 10px/1 var(--mono); color: var(--muted); }

form.builder > .early-flag { grid-column: 1 / -1; grid-row: 1; margin-bottom: 8px; }
@media (min-width: 961px) { form.builder.is-early > .side { grid-row: 2 / span 8; } }


/* ======================================================================
   v8 — final polish: horizontal builder cards, even surfaces, acid
   accents on DJ / recording, recording prices, footer ticker
   ====================================================================== */

/* ---------- one surface for every panel: the background lines and waves stay visible through it */
:root {
  --glass: radial-gradient(circle at var(--px, 75%) var(--py, 12%), rgba(141,123,255,.10), transparent 32%), rgba(255,255,255,.022);
  --glass-band: rgba(8,9,11,.5);
}
.card.card-basement { background: var(--glass); border-color: var(--line); }
section.band.band-basement, section.band.t7, section.band.philosophy, section.band.collab-band { background-color: var(--glass-band); }
section.band.philosophy { background-image: linear-gradient(120deg, rgba(255,255,255,.018), transparent 38%), radial-gradient(circle at 92% 8%, rgba(111,82,255,.10), transparent 34%); }
section.band.packages-showcase { background: linear-gradient(180deg, rgba(17,18,22,.45), rgba(11,12,15,.45)); }
.principle-grid { background: transparent; gap: 0; }
.principle-card { background: var(--glass); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principle-card:nth-child(2n) { border-right: 0; }
.principle-card:nth-last-child(-n+2) { border-bottom: 0; }
.principle-card:hover { background: radial-gradient(circle at var(--px,75%) var(--py,20%), rgba(141,123,255,.18), transparent 42%), rgba(255,255,255,.03); }
@media (max-width: 900px) {
  .principle-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .principle-card:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .principle-card:last-child { border-bottom: 0; }
}
.rec-steps { background: transparent; gap: 0; }
.rec-steps li { background: var(--glass); border-right: 1px solid var(--line); }
.rec-steps li:last-child { border-right: 0; }
@media (max-width: 1100px) { .rec-steps li { border-right: 0; border-bottom: 1px solid var(--line); } .rec-steps li:last-child { border-bottom: 0; } }
.art-panel.has-rings { background: radial-gradient(circle at 50% 56%, rgba(129,104,255,.16), transparent 46%), rgba(10,10,12,.5); }
.recording-preview-frame { background: radial-gradient(circle at 52% 40%, rgba(141,123,255,.16), transparent 42%), rgba(9,10,12,.5); }
.stage, .stage.is-3d { background: rgba(9,10,12,.5); }
.summary.summary-side { background: rgba(16,17,21,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
form.q .rig-opt, form.q .addon { background: var(--glass); }
.site-footer { background: rgba(6,6,7,.55); }
.signal-strip { background: rgba(7,7,8,.5); }

/* ---------- footer: the same service ticker as under the hero */
.footer-signal { border-bottom: 1px solid var(--line); }
.site-footer .cols { padding-top: 56px; }

/* ---------- builder: horizontal cards. picture left; name, kit and price in one block on the right.
   The text column is exactly as tall as the picture: the name starts at its top edge, the price row
   sits on its bottom edge. Rigs, DJ gear and recording share the same columns. */
form.builder .rig-opts, form.builder .addon-opts, form.builder .addon-opts.dj, form.builder .addon-opts.rec { grid-template-columns: minmax(0, 1fr); max-width: none; }
form.q label.opt { display: grid; grid-template-columns: minmax(150px, 41%) minmax(0, 1fr); grid-template-rows: auto; column-gap: 20px; row-gap: 0; align-items: stretch; align-content: stretch; padding: 12px 16px 12px 12px; }
form.q label.opt > .opt-art { grid-column: 1; grid-row: 1; align-self: start; position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; aspect-ratio: 3 / 2; margin: 0; padding: 8px 10px 4px; }
form.q label.opt > .opt-art img { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: contain; object-position: 50% 100%; }
form.q label.addon > .opt-art { align-items: center; padding: 6px; }
form.q label.addon > .opt-art img { object-position: 50% 50%; }
form.q label.opt > .opt-body { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; padding: 2px 0 0; }
.opt-top { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.opt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
form.q label.opt .tick { position: relative; inset: auto; top: auto; right: auto; bottom: auto; flex: none; }
form.q label.opt .rig-price { margin: 0; padding: 0; font-size: 20px; line-height: 1.1; white-space: nowrap; }
form.q label.opt .rig-name, form.q label.opt .addon-name { padding-right: 0; font-size: 21px; line-height: 1.08; letter-spacing: -.02em; hyphens: manual; overflow-wrap: normal; text-wrap: balance; }
form.q label.opt .rig-comp, form.q label.opt .addon-spec { font-family: var(--mono); font-size: 12px; color: rgba(244,242,235,.8); }
form.q label.opt .rig-capacity { margin: 2px 0 0; }
form.q label.opt .rig-who, form.q label.opt .addon-desc { font-size: 13px; line-height: 1.42; color: var(--muted); }
form.q .addon-opts.dj .addon-desc { display: none; }  /* the spec line already names the gear */
form.q .addon-opts.rec .addon-desc { display: none; }
form.q label.opt:has(input:checked) .opt-foot { border-top-color: rgba(244,242,235,.22); }
form.q label.opt:has(input:checked) :is(.rig-who, .addon-desc, .rig-comp, .addon-spec) { color: rgba(244,242,235,.88); }
form.q label.opt .rig-art .tag-acid { top: 8px; left: 8px; }
.rec-head p { max-width: 46em; font-size: 14px; line-height: 1.5; }
.rec-head { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 4px; }
@media (max-width: 560px) {
  form.q label.opt { grid-template-columns: 116px minmax(0, 1fr); column-gap: 14px; padding: 10px 12px 10px 10px; }
  form.q label.opt > .opt-art { aspect-ratio: 1; }
  form.q label.opt .rig-name, form.q label.opt .addon-name { font-size: 18px; }
  form.q label.opt .rig-price { font-size: 17px; }
  form.q label.opt .rig-who { display: none; }
  form.q .addon-opts.rec .addon-desc { display: none; }
}

/* ---------- calendar legend: one even column of status chips, counts on one edge */
.cal .cal-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); gap: 6px; }
.cal .lg { width: 100%; min-width: 0; justify-content: flex-start; text-align: left; }
.cal .lg span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal .lg small { margin-left: auto; min-width: 3ch; text-align: right; }

/* ---------- DJ gear and recording cards: the acid line in the same row as "up to … people" on the rigs */
.pkg .drive span { color: var(--violet-lift); opacity: 1; }
.card-violet.pkg .drive span { color: var(--acid); }
.pkg .price .price-note { display: block; margin-top: 10px; white-space: normal; overflow-wrap: break-word; font: 11px/1.5 var(--mono); letter-spacing: .02em; color: var(--muted); }
.addon-group .pkg { min-width: 0; }
.addon-group .pkg .price { align-self: stretch; flex-wrap: wrap; align-content: flex-start; row-gap: 0; }
.pkg .price .price-note { flex: 1 0 100%; }
.addon-group .pkg:hover .kit-list .q, .addon-group .pkg .kit-list .q { color: rgba(202,255,104,.7); }

/* ---------- recording prices: the on-location starting price, then the fixed add-on prices */
.rec-cta { padding: 26px; border-radius: 18px; background: var(--glass); }
.rec-price-k { font: 600 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acid); }
.rec-price-fig { margin-top: 14px; font-family: var(--mono); line-height: 1; }
.rec-price-fig .from { font-size: 14px; color: var(--muted); margin-right: 4px; }
.rec-price-fig strong { font-size: clamp(30px, 3vw, 44px); font-weight: 500; letter-spacing: -.02em; color: var(--bone); }
.rec-price-note { margin-top: 14px; max-width: 38em; font-size: 13px; line-height: 1.55; color: var(--muted); }
.rec-price-k2 { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--violet-lift); }
.rec-price-list { list-style: none; margin: 8px 0 0; padding: 0; }
.rec-price-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--line); font: 13px/1.3 var(--mono); }
.rec-price-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.rec-price-list li span:first-child { color: rgba(244,242,235,.82); }
.rec-price-list li span:last-child { color: var(--bone); white-space: nowrap; }
.rec-price-list small { color: var(--muted); font-size: 11px; }
.kit li.kit-price span:first-child { color: var(--acid); }
.kit li.kit-price span:last-child { color: var(--bone); }

/* ---------- builder summary: launch offer date, "from" for recording on its own */
.promo-until { font-style: normal; margin-left: 9px; padding-left: 9px; border-left: 1px solid rgba(244,242,235,.2); color: rgba(244,242,235,.7); }
.summary .total-fig strong .total-from, .summary .cart .pr small { font: 400 .45em/1 var(--mono); color: var(--muted); letter-spacing: 0; }
.summary .cart .pr small { font-size: 11px; }
.summary .note-rec { color: rgba(244,242,235,.78); }
/* narrow builder columns: price and tick always fit */
form.q label.opt { grid-template-columns: minmax(130px, 38%) minmax(0, 1fr); }
form.q label.opt .rig-price { font-size: clamp(16px, 1.45vw, 20px); min-width: 0; }
form.q label.opt .opt-foot { gap: 8px; }
@media (max-width: 560px) {
  form.q label.opt { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; }
  form.q label.opt .rig-price { font-size: 15px; white-space: normal; }
  form.q label.opt .rig-price small { white-space: nowrap; }
  form.q label.opt .tick { width: 20px; height: 20px; }
}
@media (max-width: 560px) { form.q label.opt .rig-art .tag-acid { display: none; } }


/* ======================================================================
   v9 — launch pass: compact first screen, predictable rhythm between
   sections, live status dot + idle logo pulse, builder cards filled,
   city picker above the rest of the form
   ====================================================================== */

/* ---------- rhythm: one spacing scale for every page.
   --band: space above/below a section's content; page heads start right under the header. */
:root { --band: clamp(44px, 4.6vw, 72px); --head-top: clamp(24px, 3vw, 48px); }
.band { padding-block: var(--band); }
.band-closer { padding-block: var(--band) calc(var(--band) + 8px); }
.club { padding-block: clamp(40px, 4vw, 60px); }
.page-head { padding-top: var(--head-top); padding-bottom: clamp(20px, 2.4vw, 36px); }
.page-head .wrap { gap: 18px; }
.page-head + .band:not(.rig-group) { padding-top: 0; }
@media (max-width: 760px) { .page-head { padding-top: 28px; } }

/* ---------- hero: header + hero + the service ticker fit the first screen; buttons always visible */
.hero { min-height: 0; }
.hero .wrap {
  min-height: clamp(560px, calc(100svh - 82px - 52px), 900px);
  padding-top: clamp(20px, 3svh, 40px);
  padding-bottom: clamp(24px, 4svh, 48px);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.hero-copy { gap: clamp(16px, 2.4svh, 28px); }
.hero-copy .voice-xl { font-size: min(clamp(62px, 9.2vw, 152px), 15.2svh); }
.hero-copy .lead { max-width: 32em; font-size: min(clamp(18px, 1.55vw, 23px), 2.8svh); }
.hero-art { min-height: 0; justify-content: flex-end; }
.hero-object {
  width: min(100%, 500px);
  min-height: 0;
  height: clamp(380px, calc(100svh - 82px - 52px - 80px), 620px);
  border-radius: 30px;
}
/* the render carries its shadow on the right: shift it so the two stacks sit in the optical centre */
.hero-object img { width: auto; height: 76%; max-width: 100%; object-fit: contain; transform: translate(7%, 5%); }
@media (min-width: 901px) { .hero .wrap { grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); } }
@media (max-width: 1240px) and (min-width: 901px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); }
}
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .hero .wrap { min-height: 0; padding-top: 28px; }
  .hero-object { width: 100%; height: auto; min-height: 380px; }
  .hero-object img { height: auto; width: min(80%, 420px); }
  .hero-copy .voice-xl { font-size: clamp(52px, 15.8vw, 84px); }
  .hero-copy .lead { font-size: 17px; }
}
@media (max-width: 560px) { .hero-object { min-height: 320px; } }

/* ---------- home sections: the visuals no longer set the height of the section */
.art-panel { min-height: 0; height: clamp(360px, 36vw, 460px); }
.art-panel img { max-height: 84%; }
.collab-visual { width: min(100%, 480px); }
.recording-preview-frame { min-height: 260px; }
.season-route .base { min-height: 0; }
@media (max-width: 900px) { .art-panel { height: 340px; } }

/* ---------- recording page: one camera scene, no floating sound card */
.rec-page-head { padding-bottom: clamp(32px, 3.6vw, 56px); }
.rec-hero-art { min-height: 0; height: clamp(360px, calc(100svh - 82px - 160px), 540px); }
.rec-cam-card.main { inset: 0; background: rgba(10,11,13,.5); }
.rec-cam-card.main img { width: 92%; height: 90%; }
@media (max-width: 900px) { .rec-hero-art { height: 340px; } }

/* ---------- header: "current location", with a live dot */
.status-dot { position: relative; flex: none; animation: status-breathe 2.4s ease-in-out infinite; }
.status-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--acid); animation: status-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes status-ping { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(3.6); opacity: 0; } }
@keyframes status-breathe {
  0%, 100% { box-shadow: 0 0 0 5px rgba(202,255,104,.06), 0 0 12px rgba(202,255,104,.3); }
  50% { box-shadow: 0 0 0 5px rgba(202,255,104,.12), 0 0 22px rgba(202,255,104,.7); }
}

/* ---------- logo: one soft kick every few seconds on its own; on hover the 124 bpm kick takes over */
.logo .dot { animation: idle-dot 3.2s cubic-bezier(.2, .9, .3, 1) infinite; }
.logo .ring-i { animation: idle-ring 3.2s cubic-bezier(.2, .9, .3, 1) infinite; }
.logo .ring-o { animation: idle-out 3.2s ease-out infinite; }
@keyframes idle-dot { 0% { transform: scale(1); } 4% { transform: scale(1.26); } 12% { transform: scale(.95); } 20%, 100% { transform: scale(1); } }
@keyframes idle-ring { 0% { transform: scale(1); } 5% { transform: scale(1.055); } 14% { transform: scale(.99); } 22%, 100% { transform: scale(1); } }
@keyframes idle-out { 0% { stroke: #4b1f73; } 5% { stroke: #8a4fd0; } 30%, 100% { stroke: #4b1f73; } }
@media (prefers-reduced-motion: reduce) {
  .logo .dot, .logo .ring-i, .logo .ring-o, .status-dot, .status-dot::after { animation: none !important; }
}

/* ---------- city picker: the open list sits above the next steps of the form */
.motion-ready .reveal.is-in { transform: none; }
form.builder fieldset.step:has(.cityp-btn[aria-expanded="true"]) { position: relative; z-index: 60; }
.cityp-anchor:has(.cityp-btn[aria-expanded="true"]) { z-index: 61; }
.cityp-pop { background: #0b0b0e; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 62; }
.timep-pop { border-radius: 18px; background: #0b0b0e; border-color: var(--line-strong); z-index: 62; }
.timep-pop li.hot { background: rgba(244, 242, 235, 0.07); }
@media (max-width: 760px) { .timep-pop { border-radius: 14px; } }

/* ---------- package cards: the quantity is acid on every card, like on the DJ setups */
.pkgs .pkg .kit-list .q { color: rgba(202,255,104,.7); }
.card-violet.pkg .kit-list .q { color: var(--acid); }

/* ---------- builder cards: framed picture, kit as chips, one more line of real information */
form.q label.opt { grid-template-columns: minmax(150px, 40%) minmax(0, 1fr); column-gap: 22px; padding: 14px 18px 14px 14px; }
form.q label.opt > .opt-art {
  align-self: stretch; aspect-ratio: auto; min-height: 168px; height: 100%;
  border: 1px solid rgba(202,255,104,.42); border-radius: 14px;
  transition: border-color .2s, box-shadow .2s;
}
form.q label.opt:hover > .opt-art { border-color: rgba(202,255,104,.7); }
form.q label.opt:has(input:checked) > .opt-art { border-color: var(--acid); box-shadow: inset 0 0 28px rgba(202,255,104,.07); }
form.q label.opt > .opt-body { gap: 14px; padding-top: 4px; }
.opt-top { gap: 9px; }
form.q label.opt .rig-name, form.q label.opt .addon-name { font-size: clamp(21px, 1.75vw, 26px); }
.opt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-chips .chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 9px 5px 8px; border: 1px solid rgba(244,242,235,.13); border-radius: 999px; background: rgba(255,255,255,.025); font: 500 12px/1 var(--mono); color: rgba(244,242,235,.88); white-space: nowrap; }
.opt-chips .chip b { font-weight: 600; color: var(--acid); }
form.q label.opt .rig-who { font-size: 14px; line-height: 1.4; }
.opt-meta { display: block; font: 11px/1.55 var(--mono); color: var(--muted); }
.opt-meta em { font-style: normal; margin-right: 6px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-lift); }
form.q label.opt:has(input:checked) .opt-meta { color: rgba(244,242,235,.74); }
form.q label.opt .rig-price { font-size: clamp(18px, 1.6vw, 22px); }
@media (max-width: 560px) {
  form.q label.opt { grid-template-columns: 104px minmax(0, 1fr); column-gap: 12px; padding: 10px 12px 10px 10px; }
  form.q label.opt > .opt-art { min-height: 0; border-radius: 10px; }
  form.q label.opt .rig-name, form.q label.opt .addon-name { font-size: 19px; }
  form.q label.opt .rig-price { font-size: 15px; }
  .opt-chips .chip { padding: 4px 7px; font-size: 11px; }
  .opt-meta { display: none; }
}
form.q label.rig-opt > .opt-art { padding: 14px 12px; }
form.q label.rig-opt > .opt-art img { object-position: 50% 62%; }
.cityp-list { max-height: 420px; }
/* the camera line stays one line without being cut at the end */
.rec-note-nowrap { font-size: clamp(11px, .9vw, 14px); letter-spacing: -.01em; }
@media (max-width: 560px) { form.q label.rig-opt > .opt-art { padding: 6px; } form.q label.rig-opt > .opt-art img { object-position: 50% 50%; } }

/* ======================================================================
   v10 — final design pass: live dots, scanner buttons, centred status,
   image captions in acid, footer signature, solar-system collaboration
   ====================================================================== */

/* ---------- section numbers: a live indicator lamp before every number, breathing continuously */
.rec-dot { position: relative; flex: none; width: 7px; height: 7px; margin-right: 12px; border-radius: 50%; background: var(--acid); vertical-align: .08em;
  animation: lamp 2.8s ease-in-out infinite; }
.rec-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: radial-gradient(circle, rgba(202,255,104,.34), rgba(202,255,104,0) 68%); animation: lamp-halo 2.8s ease-in-out infinite; }
@keyframes lamp {
  0%, 100% { opacity: .5; box-shadow: 0 0 0 4px rgba(202,255,104,.04), 0 0 4px rgba(202,255,104,.15); }
  50% { opacity: 1; box-shadow: 0 0 0 4px rgba(202,255,104,.1), 0 0 14px rgba(202,255,104,.65); }
}
@keyframes lamp-halo { 0%, 100% { opacity: .15; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* ---------- header: "current location" sits in the middle of the empty space between the logo and the nav */
@media (min-width: 1101px) {
  .site-header .wrap { display: flex; align-items: center; }
  .site-header .logo, .site-header .nav { flex: none; }
  .header-status { flex: 1 1 auto; min-width: 0; margin: 0; justify-content: center; }
}

/* ---------- hero render: no ring halo, no "01"; a caption like the other render panels */
.hero-object::before { content: none; }
.hero-object-index { display: none; }

/* ---------- captions on renders: one style, brand acid */
.img-label, .art-panel::after, .stage-hint {
  position: absolute; left: 24px; bottom: 22px; z-index: 3; pointer-events: none;
  font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--acid); opacity: .86;
}
.art-panel::after { content: "FUNKTION-ONE / RESOLUTION 4E"; }
.hero-object .img-label { text-transform: uppercase; }
.recording-preview-frame > .img-label { left: 24px; bottom: 22px; font-size: 10px; color: var(--acid); }
.rec-cam-card > .img-label { top: auto; left: 24px; bottom: 22px; font-size: 10px; color: var(--acid); }
.stage-hint { left: 14px; bottom: 12px; font-size: 11px; letter-spacing: .04em; }
@media (max-width: 560px) { .img-label, .art-panel::after { left: 16px; bottom: 15px; font-size: 9px; } }

/* ---------- flashlight on the render panels, like the cards */
.recording-preview-frame, .rec-cam-card.main, .art-panel { isolation: isolate; }
.recording-preview-frame::before, .rec-cam-card.main::before, .art-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 30%), rgba(154,133,255,.2), transparent 32%);
  opacity: 0; transition: opacity .45s ease;
}
.recording-preview-frame:hover::before, .rec-cam-card.main:hover::before, .art-panel:hover::before { opacity: 1; }
.recording-preview-frame picture, .recording-preview-frame img, .rec-cam-card.main picture, .rec-cam-card.main img { position: relative; z-index: 1; }

/* ---------- dark buttons: an acid scanner runs there and back while hovered */
.btn:not(.btn-acid)::before {
  inset: 0 auto 0 0; width: 46%; transform: translateX(-102%);
  background: linear-gradient(90deg, rgba(202,255,104,0), rgba(202,255,104,.07) 28%, rgba(202,255,104,.3) 50%, rgba(202,255,104,.07) 72%, rgba(202,255,104,0));
  opacity: 0; transition: opacity .35s ease;
  animation: btn-scan 1.7s cubic-bezier(.45,0,.55,1) infinite alternate paused;
}
.btn:not(.btn-acid)::after {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: -1; width: 46%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acid), transparent); box-shadow: 0 0 10px rgba(202,255,104,.7);
  opacity: 0; transition: opacity .35s ease;
  animation: btn-scan 1.7s cubic-bezier(.45,0,.55,1) infinite alternate paused;
}
a.btn:not(.btn-acid):hover::before, button.btn:not(.btn-acid):hover:not(:disabled)::before, .btn:not(.btn-acid):focus-visible::before,
a.btn:not(.btn-acid):hover::after, button.btn:not(.btn-acid):hover:not(:disabled)::after, .btn:not(.btn-acid):focus-visible::after { opacity: 1; animation-play-state: running; }
a.btn:not(.btn-acid):hover, button.btn:not(.btn-acid):hover:not(:disabled), .btn:not(.btn-acid):focus-visible { border-color: rgba(202,255,104,.42); }
@keyframes btn-scan { from { transform: translateX(-55%); } to { transform: translateX(172%); } }

/* ---------- footer: the logo breathes like the header one; the base row carries the signature */
.site-footer .footer-logo { display: inline-flex; align-self: flex-start; text-decoration: none; }
.site-footer .footer-logo .logo-svg { height: 52px; }
.site-footer .base { font-size: 12px; align-items: center; }
.site-footer .base .sig { display: inline-flex; align-items: center; gap: 12px; }
.tp-mark { display: inline-flex; width: 1.4em; height: 1.4em; color: var(--acid); text-decoration: none; animation: tp-drift 16s ease-in-out infinite; }
.tp-mark svg { width: 100%; height: 100%; overflow: visible; fill: currentColor; }
.tp-mark .tp-top { transition: transform .5s cubic-bezier(.3,1.5,.5,1); transform-box: view-box; }
.tp-mark:hover, .tp-mark:focus-visible { animation-play-state: paused; color: var(--acid); filter: drop-shadow(0 0 8px rgba(202,255,104,.55)); }
.tp-mark:hover .tp-top, .tp-mark:focus-visible .tp-top { transform: translateY(10.2px); }
@keyframes tp-drift {
  0%, 10% { color: #caff68; filter: drop-shadow(0 0 6px rgba(202,255,104,.35)); }
  22%, 30% { color: #8d7bff; filter: drop-shadow(0 0 6px rgba(141,123,255,.35)); }
  42%, 48% { color: #f4f2eb; filter: none; }
  60%, 66% { color: #4930c6; filter: none; }
  76%, 86% { color: rgba(10,10,12,0); filter: none; }
  100% { color: #caff68; filter: drop-shadow(0 0 6px rgba(202,255,104,.35)); }
}

/* ---------- collaboration: a small solar system, centred in the empty half of the band */
.collab-visual {
  width: 100%; max-width: 660px; aspect-ratio: auto; height: clamp(440px, 38vw, 560px);
  justify-self: center; align-self: center; margin-top: -32px; translate: -40px 0;
  border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  background: radial-gradient(circle at 50% 50%, rgba(202,255,104,.07), transparent 13%), radial-gradient(circle at 50% 50%, rgba(105,78,255,.17), transparent 44%);
}
.collab-core { z-index: 2; animation: sun-breathe 6s ease-in-out infinite; }
@keyframes sun-breathe {
  0%, 100% { box-shadow: 0 0 0 16px rgba(202,255,104,.035), 0 0 70px rgba(202,255,104,.08); }
  50% { box-shadow: 0 0 0 22px rgba(202,255,104,.05), 0 0 110px rgba(202,255,104,.16); }
}
.orbit-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.orbit-fx .orbit { fill: none; stroke: rgba(244,242,235,.11); stroke-width: 1; transition: stroke .3s; }
.orbit-fx .orbit.dashed { stroke: rgba(244,242,235,.08); stroke-dasharray: 3 5; }
.orbit-fx .orbit.hot { stroke: rgba(202,255,104,.3); }
.orbit-fx .tether { stroke: rgba(141,123,255,.45); stroke-width: 1; transition: stroke .3s; }
.orbit-fx .tether.hot { stroke: rgba(202,255,104,.85); }
.orbit-fx .planet { fill: var(--violet-lift); transition: fill .3s; }
.orbit-fx .halo { fill: rgba(141,123,255,.16); transition: fill .3s; }
.orbit-fx .planet.hot { fill: var(--acid); }
.orbit-fx .halo.hot { fill: rgba(202,255,104,.2); }
.collab-visual.is-orbit .collab-node { left: 0; top: 0; right: auto; bottom: auto; z-index: 3; white-space: nowrap; will-change: transform; transition: color .3s, border-color .3s; }
.collab-node.hot { color: var(--acid); border-color: rgba(202,255,104,.45); }
.collab-tags span { transition: color .3s, border-color .3s; }
.collab-tags span.hot { color: var(--acid); border-color: rgba(202,255,104,.45); }
@media (max-width: 1100px) { .collab-visual { max-width: 560px; height: auto; aspect-ratio: 1; margin-top: 0; translate: none; } }
@media (max-width: 560px) { .collab-visual { aspect-ratio: auto; height: 380px; } }

/* ---------- tickers: driven by script so hover eases to a stop and back without restarting */
.signal-strip.js-run .signal-marquee { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .rec-dot, .rec-dot::after, .tp-mark, .collab-core, .btn::before, .btn::after { animation: none !important; }
  .site-footer .footer-logo .dot, .site-footer .footer-logo .ring-i, .site-footer .footer-logo .ring-o { animation: none !important; }
}

/* ---------- v11 · collaboration: more planets, the tags wrap onto a second row, a quiet footnote */
.collab-tags { max-width: 640px; }
.collab-tags span { cursor: default; }
.collab-note { display: flex; gap: 10px; max-width: 520px; margin-top: -8px; font: 400 12px/1.6 var(--mono); letter-spacing: .02em; color: var(--muted); }
.collab-note > span { color: var(--acid); flex: none; line-height: 1.5; }
.collab-visual.is-orbit .collab-node { padding: 8px 11px; font-size: 9.5px; }
@media (max-width: 700px) { .collab-visual .collab-node:is(.node-7, .node-8, .node-9, .node-10, .node-11, .node-12) { display: none; } }

/* ---------- v11 · after 1:28 on the site: help or the newsletter, over a lightly blurred page */
.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; }
dialog.offer {
  width: min(540px, calc(100% - 32px)); max-width: none; max-height: calc(100svh - 32px); margin: auto; padding: 0;
  border: 0; background: transparent; color: var(--bone); overflow: visible;
  opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
dialog.offer.in { opacity: 1; transform: none; }
dialog.offer::backdrop {
  background: rgba(7,7,8,.34); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: backdrop-filter .5s ease, -webkit-backdrop-filter .5s ease, background .5s ease;
}
dialog.offer.in::backdrop { -webkit-backdrop-filter: blur(7px) saturate(115%); backdrop-filter: blur(7px) saturate(115%); background: rgba(7,7,8,.42); }
.offer-card {
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 34px 34px 24px;
  max-height: calc(100svh - 32px); overflow: auto; box-sizing: border-box;
  border: 1px solid rgba(244,242,235,.14); border-radius: 26px;
  background: radial-gradient(circle at 88% 0%, rgba(141,123,255,.22), transparent 46%), radial-gradient(circle at 0% 100%, rgba(202,255,104,.06), transparent 40%), rgba(13,14,17,.9);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: 0 40px 120px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.04);
}
.offer-time { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acid); }
.offer-card h2 { margin: 2px 0 0; padding-right: 40px; font-size: clamp(30px, 6vw, 42px); color: var(--bone); }
dialog.offer:focus { outline: none; }
.offer-text { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(244,242,235,.74); max-width: 44ch; }
.offer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.offer-or { display: flex; align-items: center; gap: 14px; margin-top: 10px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.offer-or::before, .offer-or::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.offer-or::before { flex: 0 0 18px; }
.offer-form { position: relative; display: flex; gap: 8px; }
.offer-form input[type="email"] {
  flex: 1; min-width: 0; min-height: 50px; padding: 0 18px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(7,7,8,.55); color: var(--bone); font: 16px/1 var(--sans);
  transition: border-color .25s;
}
.offer-form input[type="email"]::placeholder { color: rgba(244,242,235,.38); }
.offer-form input[type="email"]:focus { outline: none; border-color: rgba(202,255,104,.6); box-shadow: 0 0 0 3px rgba(202,255,104,.1); }
.offer-form .btn { flex: none; min-height: 50px; }
.offer-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 2px; }
.offer-status { margin: 0; font: 400 11px/1.5 var(--mono); letter-spacing: .02em; color: var(--muted); }
.offer-status[data-state="ok"] { color: var(--acid); }
.offer-status[data-state="error"] { color: #ff9b85; }
.offer-later { flex: none; padding: 6px 0; border: 0; background: none; color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .25s; }
.offer-later:hover, .offer-later:focus-visible { color: var(--bone); }
.offer-x { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: rgba(7,7,8,.4); cursor: pointer; transition: border-color .25s, transform .4s cubic-bezier(.2,.8,.2,1); }
.offer-x span, .offer-x::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; background: var(--bone); transform: translate(-50%,-50%) rotate(45deg); }
.offer-x span { transform: translate(-50%,-50%) rotate(-45deg); }
.offer-x:hover, .offer-x:focus-visible { border-color: rgba(202,255,104,.5); transform: rotate(90deg); }
.offer.is-done .offer-form { opacity: .45; pointer-events: none; }
@media (max-width: 560px) {
  dialog.offer { margin: auto auto 16px; }
  .offer-card { padding: 26px 20px 18px; gap: 14px; border-radius: 22px; }
  .offer-form { flex-direction: column; }
  .offer-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { dialog.offer, dialog.offer::backdrop { transition: none; } }

/* ======================================================================
   v11.1 — flashlight on every glass panel, see-through Full rig+
   ====================================================================== */

/* --glass was resolved once on :root, so the pointer position (--px / --py,
   set per element) never reached it and the light stood still on M and L.
   Re-declaring it on the panels makes var() resolve per element. */
.card.card-basement, .principle-card, .rec-steps li, form.q .rig-opt, form.q .addon, .rec-cta {
  --glass: radial-gradient(circle at var(--px, 75%) var(--py, 12%), rgba(141,123,255,.10), transparent 32%), rgba(255,255,255,.022);
}
/* the light gets a little stronger while hovered, on every card */
.card:not(.card-violet):hover {
  background: radial-gradient(circle at var(--px, 75%) var(--py, 12%), rgba(141,123,255,.16), transparent 32%), rgba(255,255,255,.03);
}

/* Full rig+ — violet glass: the background lines and waves show through,
   and an acid flashlight follows the pointer */
.card-violet {
  background:
    radial-gradient(circle at var(--px, 80%) var(--py, 12%), rgba(202,255,104,.13), transparent 30%),
    linear-gradient(155deg, rgba(81,64,215,.66), rgba(48,34,127,.60));
}
.card-violet:hover {
  background:
    radial-gradient(circle at var(--px, 80%) var(--py, 12%), rgba(202,255,104,.2), transparent 32%),
    linear-gradient(155deg, rgba(86,68,224,.72), rgba(50,36,134,.66));
  border-color: rgba(176,160,255,.7);
}
.card-violet .card-art { background: rgba(7,7,8,.26); }

/* the chosen system in the builder (Full rig+ by default) — same violet glass */
form.q .rig-opt:has(input:checked), form.q .addon:has(input:checked) {
  background:
    radial-gradient(circle at var(--px, 75%) var(--py, 20%), rgba(202,255,104,.11), transparent 30%),
    linear-gradient(145deg, rgba(73,48,198,.62), rgba(36,24,94,.66));
}

/* ---------- off-season site: "Current location" links to the site where the system is now */
a.header-status.is-link { text-decoration: none; color: var(--muted); transition: color .25s; }
a.header-status.is-link > span:not(.status-dot):not(.status-go) { border-bottom: 1px dashed rgba(244,242,235,.22); padding-bottom: 2px; transition: border-color .25s; }
a.header-status.is-link .status-go { color: var(--acid); font-size: 11px; opacity: .55; transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
a.header-status.is-link:hover, a.header-status.is-link:focus-visible { color: var(--bone); }
a.header-status.is-link:hover > span:not(.status-dot):not(.status-go), a.header-status.is-link:focus-visible > span:not(.status-dot):not(.status-go) { border-color: var(--acid); }
a.header-status.is-link:hover .status-go, a.header-status.is-link:focus-visible .status-go { opacity: 1; transform: translate(2px,-2px); }
@media (min-width: 1101px) {
  /* centred between logo and nav, but only the text is clickable, not the whole gap */
  .site-header a.header-status.is-link { flex: 0 1 auto; margin: 0 auto; }
}