:root {
  --bg: #02050a;
  --panel: rgba(4, 9, 17, 0.94);
  --panel-2: #07101b;
  --line: #263442;
  --line-bright: #31526c;
  --text: #f4f7fb;
  --muted: #91a0ae;
  --cyan: #14d8ff;
  --teal: #20e2c1;
  --blue: #337cff;
  --purple: #8d43ff;
  --magenta: #d940ff;
  --gold: #e8b64e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 91% 12%, rgba(47, 35, 156, .14), transparent 18%),
    radial-gradient(circle at 6% 77%, rgba(0, 172, 211, .08), transparent 22%),
    #010307;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 14px;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, .button, label, nav a {
  font-family: Rajdhani, Inter, sans-serif;
  text-transform: uppercase;
}
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.hidden { display: none !important; }
.skip-link {
  position: fixed; left: 12px; top: 8px; z-index: 100;
  transform: translateY(-150%); padding: 9px 14px; border-radius: 5px;
  background: var(--cyan); color: #001019; font-weight: 800;
}
.skip-link:focus { transform: none; }
.site-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22;
  background-image: linear-gradient(rgba(32, 82, 116, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(32, 82, 116, .16) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(#000, transparent 42%);
}

.site-header, main, .site-footer {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}
.site-header {
  height: 46px; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 14px;
  border-bottom: 1px solid #15202a;
}
.nav-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nav-brand img { width: 34px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 7px rgba(136, 66, 255, .45)); }
.nav-brand span { display: grid; line-height: 1; }
.nav-brand strong { font-family: Rajdhani; font-size: 12px; letter-spacing: .035em; }
.nav-brand small { margin-top: 4px; color: #8898a8; font-size: 7px; letter-spacing: .25em; }
.site-header nav { display: flex; justify-content: center; gap: clamp(10px, 1.5vw, 22px); }
.site-header nav a, .signin { color: #cbd3db; font-size: 8px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.site-header nav a:hover, .signin:hover { color: var(--cyan); }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.button {
  min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px;
  border: 1px solid transparent; border-radius: 4px; letter-spacing: .06em; font-weight: 700; font-size: 9px; cursor: pointer;
}
.button.primary {
  color: #fff; background: linear-gradient(100deg, #16c9f5 2%, #448dff 48%, #a72cff 100%);
  border-color: #4cd9ff; box-shadow: 0 0 15px rgba(48, 172, 255, .45), inset 0 0 12px rgba(255,255,255,.12);
}
.button.outline { border-color: #4d6173; color: #fff; background: rgba(2, 7, 13, .72); }
.button:hover { filter: brightness(1.15); transform: translateY(-1px); }
.small-button { min-height: 32px; padding-inline: 18px; font-size: 10px; }

.degraded-banner {
  margin: 8px 0; padding: 8px 12px; border: 1px solid #b93f6b; border-radius: 5px;
  background: #3c0d20; color: #ffd9e8; font-size: 12px;
}
.hero {
  height: 347px; position: relative; display: grid; grid-template-columns: 41% 59%;
  border-bottom: 1px solid #1e2a35; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 40%, rgba(5, 19, 31, .4) 58%, rgba(6, 11, 24, .03)),
    radial-gradient(ellipse at 53% 48%, rgba(0, 170, 255, .16), transparent 34%);
}
.hero-globe {
  position: absolute; width: 390px; height: 390px; border-radius: 50%; right: -72px; top: 3px;
  border: 1px solid rgba(25, 199, 255, .4);
  background:
    repeating-radial-gradient(circle, transparent 0 17px, rgba(70, 36, 181, .12) 18px 19px),
    repeating-linear-gradient(25deg, transparent 0 25px, rgba(9, 196, 255, .09) 26px 27px),
    radial-gradient(circle, rgba(41, 31, 134, .2), transparent 67%);
  box-shadow: 0 0 65px rgba(77, 39, 218, .17);
}
.hero-copy { align-self: center; z-index: 2; padding: 7px 10px 7px 5px; }
.eyebrow { color: var(--teal); font-family: Rajdhani; font-weight: 700; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.hero h1 { margin: 8px 0 8px; font-size: clamp(34px, 4vw, 53px); line-height: .87; letter-spacing: -.02em; }
.hero h1 span { background: linear-gradient(90deg, #23c8fa, #4e80ff 45%, #b541ff); color: transparent; background-clip: text; }
.hero h2 { margin-bottom: 4px; font: 600 12px Inter, sans-serif; text-transform: none; }
.hero-copy > p:last-of-type { width: 92%; color: #c8ced5; font-size: 9px; line-height: 1.5; }
.hero-actions { display: flex; gap: 10px; margin: 13px 0 12px; }
.hero-actions .button { min-width: 135px; }
.powered { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #c7ced4; font-size: 7px; }
.powered small { width: 100%; color: #63717e; font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.hero-studio {
  z-index: 2; align-self: start; width: 70%; height: 282px; margin: 10px 0 0 5%;
  border: 1px solid #179fe0; border-radius: 18px 18px 8px 8px; overflow: hidden;
  background: linear-gradient(145deg, rgba(8, 20, 34, .96), rgba(3, 7, 17, .97));
  box-shadow: 0 0 30px rgba(0, 150, 255, .18), inset 0 0 35px rgba(0, 118, 255, .08);
  transform: perspective(1100px) rotateY(-2deg);
}
.studio-top { height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid #1d364b; color: #7d91a5; font-size: 9px; }
.mini-brand { display: flex; align-items: center; gap: 5px; color: #d9e1e8; font-size: 9px; font-weight: 700; }
.mini-brand img { width: 18px; height: 16px; object-fit: contain; }
.studio-body { height: calc(100% - 39px); display: grid; grid-template-columns: 29px 132px 1fr; }
.tool-rail { display: flex; flex-direction: column; align-items: center; gap: 19px; padding-top: 15px; border-right: 1px solid #182b3c; color: #7890a5; }
.tool-rail i { font-style: normal; font-size: 11px; }
.track-card { margin: 12px 8px; padding: 10px; border: 1px solid #1e3348; border-radius: 5px; background: #07101c; }
.track-card p { margin: 0; font-family: Rajdhani; font-weight: 700; font-size: 12px; }
.track-card small { color: #788b9c; font-size: 7px; }
.cover-art, .result-cover {
  position: relative; background:
    linear-gradient(90deg, transparent 0 12%, rgba(31, 112, 186, .65) 13% 20%, transparent 21% 31%, rgba(149, 32, 182, .7) 32% 43%, transparent 44%),
    radial-gradient(circle at 70% 35%, #c42bff, transparent 25%), radial-gradient(circle at 30% 70%, #0ae0ff, transparent 34%), #0b1027;
}
.cover-art { height: 103px; margin-top: 9px; border: 1px solid #303478; border-radius: 5px; }
.cover-art button, .result-cover button, .portrait button {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(8,14,31,.72); color: white; cursor: pointer;
}
.track-tags { display: flex; justify-content: space-between; margin-top: 9px; color: #90a1b0; font-size: 7px; text-transform: uppercase; }
.mixer { padding: 12px 13px 0; min-width: 0; }
.mixer-head { display: flex; justify-content: space-between; margin-bottom: 22px; color: #73889c; font-size: 8px; }
.spectrum { height: 18px; margin: 10px 0; border-radius: 2px; clip-path: polygon(0 48%,3% 20%,5% 76%,8% 37%,11% 70%,15% 24%,17% 83%,20% 14%,23% 64%,27% 35%,30% 90%,33% 28%,36% 72%,40% 8%,43% 66%,47% 30%,50% 83%,53% 18%,56% 69%,60% 33%,63% 91%,67% 19%,70% 74%,74% 9%,78% 61%,82% 37%,85% 84%,88% 22%,92% 68%,96% 30%,100% 51%,100% 54%,0 54%); }
.spectrum.cyan { background:#15d8ff; box-shadow:0 0 8px #15d8ff; }
.spectrum.purple { background:#c43cff; box-shadow:0 0 8px #c43cff; }
.spectrum.blue { background:#4287ff; box-shadow:0 0 8px #4287ff; }
.spectrum.green { background:#22dec3; box-shadow:0 0 8px #22dec3; }
.timecode { margin-top: 20px; color:#a7b5c0; font-size: 8px; }
.engine-map {
  position: absolute; z-index: 4; width: 183px; height: 170px; right: 2px; top: 165px; border: 1px solid #325474; border-radius: 9px;
  background: rgba(4, 10, 20, .94); box-shadow: 0 0 28px rgba(22, 140, 255, .22);
}
.engine-map::before, .engine-map::after {
  content:""; position:absolute; border:1px solid rgba(42,186,255,.34); border-radius:50%; inset:38px 37px;
}
.engine-map::after { inset:58px 57px; border-color:rgba(171,54,255,.48); }
.engine-map small { display:block; text-align:center; margin-top:10px; color:#22d8ff; font-size:8px; text-transform:uppercase; }
.engine-map strong { position:absolute; left:50%; top:50%; transform:translate(-50%,-42%); width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#0c2035; color:#5be5ff; border:1px solid #20c9ff; font-size:19px; }
.node { position:absolute; color:#bac7d3; font-size:7px; }
.n1 { top:39px; left:72px; }.n2{top:72px;left:10px}.n3{top:72px;right:8px}.n4{bottom:20px;left:22px}.n5{bottom:18px;right:18px}
.version { position:absolute; z-index:4; right:7px; top:13px; padding:5px 9px; border:1px solid #7e2fc1; border-radius:4px; color:#35ccff; background:#060a13; font-size:8px; }

.metric-bar {
  width: 41%; min-width: 410px; height: 42px; margin: -42px 18% 0 auto; position: relative; z-index: 5;
  display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #273848; border-radius:6px; background:#07101a;
}
.metric-bar article { display:grid; place-content:center; text-align:center; border-right:1px solid #1d2b39; }
.metric-bar article:last-child { border:0; }
.metric-bar strong { font:700 14px Rajdhani; }
.metric-bar span { color:#647686; font-size:6px; letter-spacing:.1em; text-transform:uppercase; }

.panel { border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.application-lifecycle{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:8px;margin:14px 0 0}.application-lifecycle div{padding:9px;border:1px solid #173343;border-radius:5px;background:#06111c}.application-lifecycle dt{color:#8393a1;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.application-lifecycle dd{margin:4px 0 0;color:#dce8ef;font-weight:700}
.generator-shell {
  margin-top:10px; height:245px; display:grid; grid-template-columns:30% 43% 27%; overflow:hidden;
  background: linear-gradient(90deg,rgba(4,10,18,.99),rgba(3,8,15,.96));
}
.generator-form, .result-column, .why-column { padding:7px 10px; min-width:0; }
.generator-form, .result-column { border-right:1px solid #22303c; }
.section-title { margin-bottom:3px; }
.icon-title { display:flex; align-items:center; gap:9px; }
.icon-title i { color:#1ed8ff; font:700 28px Rajdhani; }
.icon-title span { display:grid; }
.icon-title strong { font:700 14px Rajdhani; text-transform:uppercase; }
.icon-title small { color:#8393a1; font-size:8px; }
label { display:block; margin:2px 0; color:#8ea0af; font-size:6px; font-weight:700; letter-spacing:.08em; }
textarea, select {
  width:100%; color:#dce3e8; background:#050b12; border:1px solid #2a3b4a; border-radius:3px; padding:4px 6px; font-size:7px;
}
textarea { resize:none; height:35px; }
textarea::placeholder { color:#84929d; }
.field-row { display:grid; gap:5px; }.field-row.three{grid-template-columns:repeat(3,1fr)}.field-row.two{grid-template-columns:repeat(2,1fr)}
.compact-fields { align-items:end; }
.cost-row { height:24px; display:flex; justify-content:space-between; align-items:center; padding:0 6px; border:1px solid #273847; border-radius:3px; background:#070d14; }
.cost-row small { color:#7d8d9a; font-size:7px; text-transform:uppercase; }.cost-row strong{color:var(--gold);font-size:9px}
.output-options { display:flex; gap:4px; align-items:center; margin:4px 0; color:#76daca; font-size:5px; }.output-options small{margin-right:auto;color:#8797a4;text-transform:uppercase}
.generate-button { width:100%; height:33px; border:1px solid #b75bff; border-radius:3px; color:#fff; text-transform:uppercase; letter-spacing:.1em; font:700 12px Rajdhani; cursor:pointer; background:
  radial-gradient(ellipse at 50% 20%,rgba(225,90,255,.6),transparent 42%), linear-gradient(110deg,#20185c,#7631ba 55%,#0d7eb8);
  box-shadow:inset 0 0 16px #2bc3ff,0 0 12px rgba(180,45,255,.35);
}
.estimate { display:block; text-align:center; margin-top:3px; color:#687887; font-size:6px; }
.result-title { display:flex; gap:7px; align-items:center; margin-bottom:9px; text-transform:uppercase; font:600 11px Rajdhani; }
.result-title span { padding:2px 5px; border:1px solid #12c9ff; border-radius:2px; color:#4ddcff; font-size:6px; }
.result-card { display:block; min-height:92px; border:1px solid #273846; border-radius:4px; background:#06101a; overflow:hidden; }
.result-info { padding:10px 9px; min-width:0; }.result-info h3{margin:0 0 3px;font-size:12px}.result-info p,.result-info small{margin:0;color:#8495a3;font-size:7px}.result-info>div{display:flex;gap:5px;margin-top:8px}.result-info button{width:23px;height:23px;border:1px solid #304252;border-radius:3px;background:#08111b;color:#d6e0e7}
.wallet-bar { display:flex;align-items:center;gap:8px;margin-top:7px;padding-top:6px;border-top:1px solid #172630;color:#8899a6;font-size:8px}.wallet-bar strong{color:var(--gold)}.mini-button,.runtime-details button{margin-left:auto;border:1px solid #2a8daa;background:#07131d;color:#62ddf2;border-radius:2px;font-size:7px;padding:4px 8px}
.runtime-data { display:flex;gap:10px;margin-top:5px;color:#647785;font-size:6px }.runtime-data strong{color:#31d7b2}
.runtime-details { margin-top:5px;color:#8495a3;font-size:7px }.runtime-details summary{cursor:pointer}.runtime-details ul{margin:4px 0;padding-left:14px}.detail-head{display:flex;align-items:center;margin-top:5px}
.why-column { position:relative; overflow:hidden; }.why-column::after{content:"";position:absolute;right:-30px;bottom:15px;width:130px;height:130px;background:linear-gradient(90deg,transparent,#0d8ab7,transparent);opacity:.09;clip-path:polygon(50% 0,53% 45%,100% 50%,53% 54%,50% 100%,47% 54%,0 50%,47% 45%)}
.why-column h2 { margin-bottom:9px;font-size:12px }
.why-column article { display:flex;gap:7px;margin:6px 0;position:relative;z-index:1 }.why-column i{flex:0 0 25px;height:25px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-style:normal}.why-column span{display:grid}.why-column strong{font-size:8px}.why-column small{color:#80909d;font-size:5px;line-height:1.25}.pink{color:#f24cff}.orange{color:#ff9655}.green{color:#28dfae}.cyan{color:#2bdcff}.why-column .button{margin-top:2px}

.ecosystem { margin-top:10px; height:160px; display:grid;grid-template-columns:235px 1fr;overflow:hidden }
.ecosystem-intro { padding:14px;border-right:1px solid #25333f }.ecosystem-intro h2{font-size:20px;line-height:.95}.ecosystem-intro p{color:#8b9aa7;font-size:8px;line-height:1.4}.ecosystem-cards{display:grid;grid-template-columns:repeat(6,1fr);padding:7px;gap:5px}
.ecosystem-cards article,.ecosystem-card,.features article { min-width:0;padding:8px 7px;border:1px solid #293946;border-radius:5px;background:linear-gradient(145deg,#07111b,#04090f) }
.ecosystem-card{display:block;color:inherit;transition:border-color .2s ease,transform .2s ease}.ecosystem-card:hover,.ecosystem-card:focus-visible{border-color:#27cfe0;transform:translateY(-2px);outline:none}
.ecosystem-cards i,.features i{display:block;height:22px;color:#1cd7df;font:normal 22px Rajdhani}.ecosystem-cards .wave-icon{color:#9f39ff}.ecosystem-cards .gold{color:var(--gold)}
.ecosystem-cards h3,.features h3{margin:7px 0 5px;font-size:10px}.ecosystem-cards p,.features p{color:#80919e;font-size:7px;line-height:1.45}.ecosystem-card span{font-size:7px;color:#b5c0c8}
.connected { grid-column:1/-1;display:grid;grid-template-columns:235px repeat(3,1fr);align-items:center;height:23px;border-top:1px solid #25333e;color:#a7b1ba;text-align:center;text-transform:uppercase;font:600 7px Rajdhani;letter-spacing:.08em}.connected span{color:#657683}.connected strong{border-left:1px solid #25333e;color:#b3b7ae}.connected strong:first-of-type{color:#d9a849}

.features { margin-top:10px;height:125px;padding:9px 14px 11px;overflow:hidden }.features h2{margin-bottom:6px;font-size:14px}.features>div{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.features article{min-height:91px}.features article:nth-child(1) i,.features article:nth-child(5) i{color:#ce48ff}.features article:nth-child(2) i{color:#3a9fff}.features article:nth-child(6) i{color:#27d8aa}

.ethics { margin-top:12px;height:350px;display:grid;grid-template-columns:43% 23% 34%;overflow:hidden;border-color:#074e68 }
.ethics-copy { padding:14px 20px 10px;background:radial-gradient(circle at 20% 80%,rgba(0,202,255,.07),transparent 43%)}
.ethics-code{display:inline-block;padding:3px 7px;border:1px solid #2a7797;border-radius:3px;color:#6cdcff;font:600 7px Rajdhani}.ethics h2{margin:8px 0 5px;font-size:25px;line-height:.92}.ethics h2 span{background:linear-gradient(90deg,#17d9f3,#5186ff,#b33cff);background-clip:text;color:transparent}.ethics-copy>h3{color:#25d9c6;font:500 11px Inter;text-transform:none}.ethics-copy ul{list-style:none;padding:0;margin:8px 0;color:#b5c1c9;font-size:7px;line-height:1.5}.ethics-copy li::before{content:"✓";display:inline-grid;place-items:center;width:12px;height:12px;margin-right:6px;border:1px solid #19e2cc;border-radius:50%;color:#24e8cf;font-size:7px}.ethics-cta{width:100%;min-height:32px}.perks{display:flex;justify-content:space-between;margin-top:7px;color:#aab5bd;font-size:6px}
.upload-box{align-self:center;position:relative;z-index:2;margin-right:-22px;padding:16px;background:#060b13;border:1px solid #34314d;border-radius:6px;box-shadow:0 15px 30px rgba(0,0,0,.5);color:inherit;transition:border-color .2s ease,transform .2s ease}.upload-box:hover,.upload-box:focus-visible{border-color:#25d9c6;transform:translateY(-2px);outline:none}.upload-box h3{font-size:14px}.drop-zone{height:125px;display:grid;place-content:center;text-align:center;border:1px dashed #5b6370;border-radius:4px;color:#dce4e8;font-size:25px}.drop-zone span{font-size:10px;margin-top:5px}.drop-zone small{color:#9aa8b2;font-size:8px;line-height:1.5}.upload-box h4{margin:11px 0 8px;font-size:9px;text-transform:uppercase}.upload-box>div:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.upload-box>div:last-child span{display:grid;padding:7px;border:1px solid #253541;border-radius:4px}.upload-box>div:last-child small{color:#9aa8b2;font-size:7px}.upload-box>div:last-child strong{margin-top:4px;font:600 15px Rajdhani}
.ethics-art{min-height:277px;background:linear-gradient(90deg,rgba(3,7,13,.55),transparent 25%),url("assets/ethical-studio.png") center/cover no-repeat}
.manifesto-copy{padding:10px 20px;border-top:1px solid #173343;background:#050a11}.manifesto-copy h3{margin:0 0 3px;font-size:10px}.manifesto-copy p{margin:0;color:#7f8f9b;font-size:6px;line-height:1.35}
.manifesto-values{grid-column:2/-1;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #173343;background:#050a11}.manifesto-values article{display:flex;align-items:center;gap:7px;padding:9px;border-left:1px solid #172632}.manifesto-values i{flex:0 0 25px;height:25px;display:grid;place-items:center;border:1px solid #8e47e8;border-radius:50%;color:#9a61ff;font-style:normal}.manifesto-values span{display:grid}.manifesto-values strong{color:#23d7d1;font:600 7px Rajdhani;text-transform:uppercase}.manifesto-values small{color:#788894;font-size:6px;line-height:1.2}

.creators{margin-top:10px;height:155px;padding:8px 14px 10px;overflow:hidden}.row-heading{display:flex;justify-content:space-between;align-items:center}.row-heading h2{margin:0;font-size:13px}.row-heading a{color:#8e9ba6;font-size:6px;text-transform:uppercase}.creator-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:6px}.creator-grid article{overflow:hidden;border:1px solid #273541;border-radius:5px;background:#050a10}.portrait{height:102px;position:relative;background-image:url("assets/creator-strip.png");background-size:600% 100%;background-repeat:no-repeat}.p1{background-position:0 0}.p2{background-position:20% 0}.p3{background-position:40% 0}.p4{background-position:60% 0}.p5{background-position:80% 0}.p6{background-position:100% 0}.portrait button{width:27px;height:27px}.creator-grid h3{margin:5px 6px 1px;font-size:8px}.creator-grid article>span{display:flex;justify-content:space-between;margin:0 6px;color:#8796a2;font-size:6px}.creator-grid b{padding:1px 3px;border:1px solid #3c4853;border-radius:2px;color:#c0cad0;font-size:5px}.creator-grid footer{margin-top:4px;padding:4px 6px;border-top:1px solid #1b2933;color:#a8b4bc;font-size:6px}

.roadmap{margin-top:10px;height:135px;padding:8px 14px 20px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,rgba(86,31,190,.2),transparent 65%),#040910}.roadmap h2{font-size:12px}.roadmap-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.roadmap article{min-height:88px;padding:8px;text-align:center;border:1px solid #273b4c;border-radius:5px;background:rgba(5,14,24,.84)}.roadmap article span{color:#22d7df;font:600 8px Rajdhani;text-transform:uppercase}.roadmap article:nth-child(3) span,.roadmap article:nth-child(4) span{color:#c96bff}.roadmap h3{margin:5px 0 3px;font-size:9px}.roadmap p{color:#82929e;font-size:6px;line-height:1.3}.road-line{position:absolute;height:2px;left:0;right:0;bottom:11px;background:linear-gradient(90deg,#0de4e9,#1684ff,#a638ff,#e23fff,#1acfff)}.road-line{display:flex;justify-content:space-around}.road-line i{width:12px;height:12px;margin-top:-5px;border:2px solid #21dcff;border-radius:50%;background:#06101a;box-shadow:0 0 10px #17cfea}.road-line i:nth-child(3),.road-line i:nth-child(4){border-color:#ce4fff;box-shadow:0 0 10px #ce4fff}

.final-cta{height:100px;position:relative;display:grid;place-content:center;text-align:center;overflow:hidden}.final-cta h2{position:relative;z-index:2;margin:0;font-size:30px;line-height:1}.final-cta p{position:relative;z-index:2;margin:2px 0 7px;color:#b4bec5;font-size:8px}.final-cta>div:last-child{position:relative;z-index:2;display:flex;justify-content:center;gap:10px}.final-cta .button{min-height:30px;font-size:8px}.sound-landscape{position:absolute;inset:0;background:
  linear-gradient(0deg,rgba(1,3,7,.15),rgba(1,3,7,.65)),
  repeating-linear-gradient(168deg,transparent 0 11px,rgba(37,211,255,.55) 12px 13px,transparent 14px 23px),
  linear-gradient(90deg,#002646,#081534 48%,#3a075c);clip-path:polygon(0 48%,4% 72%,8% 38%,12% 64%,17% 28%,22% 78%,27% 42%,31% 68%,36% 30%,41% 73%,46% 45%,50% 66%,55% 41%,60% 74%,65% 27%,70% 70%,75% 38%,80% 77%,85% 29%,90% 67%,95% 39%,100% 72%,100% 100%,0 100%);filter:drop-shadow(0 0 8px #3a7cff)}

.site-footer{height:150px;padding:15px 10px 6px;display:grid;grid-template-columns:210px 1fr 230px;gap:22px;border-top:1px solid #18222b;background:#010306;overflow:hidden}.footer-brand img{width:190px;height:45px;object-fit:contain}.footer-brand div{margin-top:6px;color:#97a4ae;font-size:8px}.footer-brand div span{padding:3px 5px;border:1px solid #6536a0;border-radius:2px;color:#b7a9c9}.footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.footer-links h3{margin-bottom:5px;font-size:7px}.footer-links a{display:block;margin:3px 0;color:#788791;font-size:6px}.ecosystem-lockup{align-self:center;display:grid;color:#77838b}.ecosystem-lockup small{font-size:5px;text-transform:uppercase}.ecosystem-lockup strong{margin:4px 0;color:#b7bdc1;font:600 9px Rajdhani}.ecosystem-lockup span{font:600 11px Rajdhani;letter-spacing:.45em}.copyright{grid-column:2/-1;margin:0;padding-top:5px;border-top:1px solid #121b22;text-align:right;color:#59656d;font-size:6px}

.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;background:rgba(0,3,7,.86)}.modal-card{width:min(440px,95vw);padding:22px;border:1px solid #34536c;border-radius:7px;background:#06101a;box-shadow:0 20px 70px #000}.modal-card h2{margin-bottom:5px}.modal-card p{color:#8b9aa6}.buy-list{display:grid;gap:8px;margin:15px 0}.buy-option{display:flex;justify-content:space-between;padding:12px;border:1px solid #2d4353;border-radius:4px;background:#07131e;color:#fff}.modal-actions{display:flex;gap:9px}
section[id] { scroll-margin-top: 12px; }

@media (max-width: 760px) {
  .site-header { grid-template-columns:1fr auto;height:auto;min-height:64px;padding:8px 0 }.site-header nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow:auto;padding:7px 0}.nav-actions{grid-column:2;grid-row:1}
  .hero{height:auto;min-height:760px;grid-template-columns:1fr}.hero-copy{padding:50px 6px 10px}.hero-studio{width:78%;margin:30px 0 50px 3%;height:310px}.engine-map{top:auto;bottom:24px}.metric-bar{width:100%;min-width:0;margin:0}
  .generator-shell{height:auto;grid-template-columns:1fr 1fr}.why-column{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border-top:1px solid #22303c}.why-column h2,.why-column .button{grid-column:1/-1}.why-column article{margin:2px}.result-column{border-right:0}
  .ecosystem{height:auto;grid-template-columns:1fr}.ecosystem-intro{border:0}.ecosystem-cards{grid-template-columns:repeat(3,1fr)}.connected{grid-template-columns:1fr repeat(3,1fr)}
  .features{height:auto}.features>div{grid-template-columns:repeat(3,1fr)}.ethics{height:auto;grid-template-columns:1fr 1fr}.ethics-art{grid-column:1/-1;min-height:360px}.manifesto-values{grid-column:1/-1}.creators,.roadmap{height:auto}.creator-grid{grid-template-columns:repeat(3,1fr)}.roadmap-grid{grid-template-columns:repeat(3,1fr)}.road-line{display:none}
  .site-footer{height:auto;grid-template-columns:1fr 1fr}.footer-links{grid-column:1/-1;grid-row:2}.copyright{grid-column:1/-1}
}

@media (max-width: 620px) {
  body{font-size:13px}.site-header,main,.site-footer{width:min(100% - 16px,1180px)}.site-header{grid-template-columns:1fr}.nav-brand{grid-row:1}.nav-actions{grid-column:1;grid-row:2}.site-header nav{grid-row:3;gap:18px}.signin{margin-left:auto}
  .hero{min-height:870px}.hero-copy{padding-top:35px}.hero h1{font-size:42px}.hero-copy>p:last-of-type{width:100%}.hero-actions{display:grid}.hero-actions .button{width:100%}.powered{gap:10px}
  .hero-studio{width:100%;margin:25px 0 170px;height:285px}.studio-body{grid-template-columns:27px 115px 1fr}.track-card{margin:8px 5px;padding:7px}.cover-art{height:105px}.mixer{padding-inline:7px}.engine-map{right:50%;transform:translateX(50%);bottom:15px}.hero-globe{right:-250px}
  .metric-bar{grid-template-columns:repeat(2,1fr);height:auto}.metric-bar article{min-height:48px}
  .generator-shell{grid-template-columns:1fr}.generator-form,.result-column{border-right:0;border-bottom:1px solid #22303c}.why-column{display:block}.why-column article{margin:13px 0}
  .ecosystem-cards,.features>div,.creator-grid,.roadmap-grid{grid-template-columns:repeat(2,1fr)}.connected{grid-template-columns:1fr}.connected>*{padding:7px}.connected{height:auto}
  .ethics{grid-template-columns:1fr}.ethics h2{font-size:25px}.upload-box{margin:0 15px 15px}.ethics-art{min-height:280px}.manifesto-values{grid-template-columns:1fr 1fr}.perks{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .final-cta h2{font-size:28px}.site-footer{grid-template-columns:1fr}.footer-links{grid-template-columns:1fr 1fr}.ecosystem-lockup{grid-row:auto}.copyright{text-align:left}
}

@media (max-width: 390px) {
  .hero h1{font-size:36px}.hero-studio{height:260px}.studio-body{grid-template-columns:25px 100px 1fr}.track-card small,.track-tags{display:none}.cover-art{height:125px}.result-card{grid-template-columns:90px 1fr}.ecosystem-cards,.features>div,.creator-grid,.roadmap-grid{grid-template-columns:1fr}.portrait{height:240px}.manifesto-values{grid-template-columns:1fr}.field-row.three{grid-template-columns:1fr 1fr}.field-row.three>div:last-child{grid-column:1/-1}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
