:root {
  --ink: #12120f;
  --paper: #f1efe7;
  --acid: #d8ff35;
  --orange: #ff5938;
  --blue: #7ca6ff;
  --line: rgba(18, 18, 15, 0.18);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.site-header {
  height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(24px, 4vw, 68px);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; letter-spacing: -1px; width: fit-content; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; background: var(--ink); border-radius: 50%; }
.brand-mark svg { width: 25px; fill: var(--acid); }
.brand-mark .brand-mouth { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.main-nav { display: flex; gap: 36px; font-size: 13px; font-weight: 600; }
.main-nav a { position: relative; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: var(--ink); transition: right .25s; }
.main-nav a:hover::after { right: 0; }
.header-cta { justify-self: end; border: 1px solid var(--ink); border-radius: 99px; padding: 11px 17px; font-size: 12px; font-weight: 700; transition: .2s; }
.header-cta:hover { color: var(--paper); background: var(--ink); }
.header-cta span { margin-left: 16px; }

.hero {
  min-height: calc(100svh - 88px);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  padding: 70px clamp(24px, 6vw, 100px) 90px;
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow { font: 500 10px/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); display: inline-block; }
h1 { font-size: clamp(64px, 8vw, 132px); line-height: .83; letter-spacing: -.075em; margin: 42px 0 38px; font-weight: 700; }
h1 em, .manifesto em { font-family: Georgia, serif; font-weight: 400; }
h1 em { color: var(--orange); }
.hero-intro { max-width: 500px; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; letter-spacing: -.025em; }
.text-link { display: inline-flex; gap: 48px; margin-top: 32px; font: 500 12px var(--mono); padding-bottom: 7px; border-bottom: 1px solid var(--ink); }

.hero-instrument { min-height: 610px; position: relative; display: grid; place-items: center; perspective: 1200px; }
.plugin-shell {
  width: min(540px, 78%);
  aspect-ratio: 1.02;
  padding: 25px;
  border-radius: 28px;
  color: #efeee7;
  background: linear-gradient(145deg, #252522, #0a0a09 70%);
  box-shadow: 0 50px 90px rgba(24, 22, 14, .28), inset 0 1px rgba(255,255,255,.12);
  transform: rotateY(-8deg) rotateX(3deg) rotateZ(2deg);
  position: relative;
  z-index: 2;
}
.plugin-topline, .plugin-footer { display: flex; justify-content: space-between; align-items: center; font: 9px var(--mono); letter-spacing: .08em; opacity: .75; }
.status { display: flex; align-items: center; gap: 6px; }
.status i { width: 5px; height: 5px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 8px var(--acid); }
.plugin-display { height: 27%; margin: 22px 0 17px; padding: 15px; border-radius: 12px; background: #171815; color: var(--acid); display: flex; flex-direction: column; justify-content: space-between; font: 11px/1.2 var(--mono); box-shadow: inset 0 0 25px #000; }
.wave { height: 58px; }
.wave svg { width: 100%; height: 100%; overflow: visible; }
.wave path { fill: none; stroke: var(--acid); stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px var(--acid)); }
.controls { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 12px; align-items: center; height: 45%; }
.control { display: flex; flex-direction: column; align-items: center; gap: 14px; font: 8px var(--mono); color: #a4a49c; letter-spacing: .12em; }
.knob { display: block; width: 76px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 42% 35%, #4d4d48, #111 68%); box-shadow: 0 9px 14px #000, inset 0 1px 2px rgba(255,255,255,.2); position: relative; }
.knob::after { content: ""; width: 2px; height: 24%; position: absolute; left: calc(50% - 1px); top: 10%; background: var(--acid); box-shadow: 0 0 5px var(--acid); transform-origin: 50% 165%; }
.knob-a::after { transform: rotate(-38deg); }
.knob-b::after { transform: rotate(42deg); }
.knob-main { width: 128px; background: radial-gradient(circle at 42% 35%, #ff7258, #b62616 68%); }
.knob-main::after { height: 27%; background: #fff; box-shadow: none; transform: rotate(18deg); }
.plugin-footer b { width: 31px; height: 31px; border: 1px solid #6d6d65; display: grid; place-items: center; border-radius: 50%; color: var(--acid); }
.orbit { position: absolute; border: 1px solid rgba(18,18,15,.18); border-radius: 50%; }
.orbit-one { width: 610px; height: 610px; }
.orbit-two { width: 450px; height: 450px; border-color: rgba(18,18,15,.1); }
.float-label { position: absolute; z-index: 4; padding: 9px 13px; border-radius: 99px; font: 9px var(--mono); box-shadow: 0 7px 20px rgba(0,0,0,.1); }
.label-native { top: 19%; right: 4%; background: var(--blue); transform: rotate(6deg); }
.label-hdx { left: 5%; bottom: 20%; background: var(--acid); transform: rotate(-8deg); }

.platforms { background: var(--ink); color: var(--paper); padding: 120px clamp(24px, 6vw, 100px); }
.platforms .eyebrow span { background: var(--acid); }
.section-heading { display: grid; grid-template-columns: 1fr 1.3fr .8fr; align-items: end; gap: 40px; margin-bottom: 65px; }
.section-heading h2, .newsletter h2 { font-size: clamp(46px, 6.5vw, 95px); line-height: .94; letter-spacing: -.065em; margin: 0; }
.section-heading > p:last-child { font-size: 13px; line-height: 1.6; color: #a7a69f; max-width: 320px; }
.platform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.platform-card { min-height: 650px; padding: 25px 28px 35px; display: flex; flex-direction: column; overflow: hidden; position: relative; color: var(--ink); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.platform-card:hover { transform: translateY(-8px); }
.native-card { background: var(--acid); }
.hdx-card { background: var(--orange); }
.card-top { display: flex; justify-content: space-between; align-items: center; font: 10px var(--mono); position: relative; z-index: 2; }
.format-pill { border: 1px solid currentColor; border-radius: 99px; padding: 8px 12px; }
.card-art { height: 330px; position: relative; }
.native-art svg { position: absolute; left: -28px; right: -28px; top: 110px; width: calc(100% + 56px); height: 150px; }
.native-art path { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.disc { position: absolute; width: 150px; aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 50%; top: 75px; backdrop-filter: blur(2px); }
.disc::before { content: ""; position: absolute; inset: 43%; border-radius: 50%; background: var(--ink); }
.disc-one { left: 8%; background: rgba(124,166,255,.72); }
.disc-two { left: calc(50% - 75px); background: rgba(255,255,255,.45); }
.disc-three { right: 8%; background: rgba(255,89,56,.62); }
.hdx-art { display: grid; place-items: center; }
.chip { width: 185px; aspect-ratio: 1.05; background: var(--ink); border-radius: 9px; position: relative; display: grid; place-items: center; color: var(--acid); box-shadow: 12px 14px 0 rgba(18,18,15,.15); transform: rotate(4deg); }
.chip::before { content: ""; position: absolute; inset: 13px; border: 1px solid #3b3b34; border-radius: 4px; }
.chip-label { text-align: center; font: 12px/1.5 var(--mono); position: relative; }
.chip-label i { font: 700 35px var(--sans); letter-spacing: -3px; }
.chip-label small { font-size: 7px; color: #8c8d83; letter-spacing: .14em; }
.chip-pins { position: absolute; top: 9%; bottom: 9%; width: 18px; background: repeating-linear-gradient(to bottom, transparent 0 8px, var(--ink) 8px 11px, transparent 11px 18px); }
.pins-left { left: -18px; }.pins-right { right: -18px; }
.signal-line { position: absolute; border: 1px solid rgba(18,18,15,.75); border-radius: 50%; }
.line-one { width: 320px; height: 190px; }.line-two { width: 400px; height: 260px; }.line-three { width: 480px; height: 330px; }
.card-copy { margin-top: auto; position: relative; z-index: 2; }
.card-copy p { font: 10px var(--mono); text-transform: uppercase; }
.card-copy h3 { font-size: clamp(40px, 4.7vw, 72px); line-height: .93; letter-spacing: -.06em; margin: 14px 0 28px; }
.card-link { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid currentColor; padding-top: 16px; font-size: 12px; font-weight: 700; }
.card-link b { font-size: 20px; font-weight: 400; transition: transform .2s; }.platform-card:hover .card-link b { transform: translate(4px,-4px); }

.manifesto { padding: 140px clamp(24px, 9vw, 150px) 100px; }
.manifesto-label { display: flex; justify-content: space-between; font: 9px var(--mono); text-transform: uppercase; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.manifesto > p { font-size: clamp(39px, 6.2vw, 90px); line-height: 1.08; letter-spacing: -.06em; max-width: 1250px; margin: 75px 0 90px; }
.manifesto em { color: var(--orange); }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; font: 10px var(--mono); text-transform: uppercase; }
.principles span { border-top: 1px solid var(--ink); padding-top: 13px; }
.story-link { display: flex; justify-content: space-between; align-items: center; width: min(390px, 100%); margin: 65px 0 0 auto; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: 600 11px var(--sans); }
.story-link span { font-size: 18px; transition: transform .2s; }.story-link:hover span { transform: translate(4px,-4px); }

.newsletter { margin: 20px; background: var(--blue); min-height: 530px; padding: 80px clamp(25px, 6vw, 90px); display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.newsletter .eyebrow span { background: var(--ink); }
.newsletter h2 { margin-top: 38px; }
.signup-form label { font: 9px var(--mono); text-transform: uppercase; }
.input-row { display: flex; margin-top: 13px; border-bottom: 1px solid var(--ink); }
.input-row input { flex: 1; min-width: 0; background: none; border: 0; padding: 17px 0; font: 19px var(--sans); outline: none; color: var(--ink); }
.input-row input::placeholder { color: rgba(18,18,15,.5); }
.input-row button { border: 0; background: var(--ink); color: var(--paper); padding: 0 22px; font: 600 11px var(--sans); cursor: pointer; }
.input-row button span { margin-left: 18px; }
.form-note, .form-success { font: 9px/1.5 var(--mono); margin-top: 14px; }
.form-success { display: none; font-size: 11px; }

footer { padding: 75px clamp(24px, 6vw, 100px) 45px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; align-items: end; }
.footer-brand { font-size: clamp(42px, 5vw, 70px); letter-spacing: -.06em; }
footer p, .footer-links { font-size: 11px; line-height: 1.6; }
.footer-links { display: flex; justify-content: space-between; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }.main-nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 80px; }
  .hero-instrument { min-height: 540px; margin-top: 20px; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .platform-grid { grid-template-columns: 1fr; }
  .newsletter { grid-template-columns: 1fr; gap: 60px; }
  footer { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-header { height: 72px; }.header-cta { padding: 9px 12px; }.header-cta span { margin-left: 8px; }
  .hero { min-height: auto; padding-top: 65px; }.hero-intro { font-size: 16px; }
  .hero-instrument { min-height: 430px; }.plugin-shell { width: 92%; padding: 17px; }.knob { width: 55px; }.knob-main { width: 85px; }.orbit-one { width: 420px; height: 420px; }.orbit-two { width: 310px; height: 310px; }
  .platforms { padding-top: 85px; padding-bottom: 85px; }.platform-card { min-height: 540px; padding: 20px; }.card-art { height: 260px; }.chip { width: 145px; }.line-one { width: 250px; }.line-two { width: 320px; }.line-three { width: 390px; }
  .manifesto { padding-top: 95px; }.principles { grid-template-columns: 1fr; }
  .newsletter { margin: 10px; padding: 55px 23px; }.input-row { display: block; }.input-row button { width: 100%; padding: 16px; }
  footer { grid-template-columns: 1fr; }.footer-brand { grid-column: auto; }.footer-links { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .plugin-shell { animation: hover 6s ease-in-out infinite; }
  .orbit-one { animation: spin 25s linear infinite; }
  @keyframes hover { 0%,100% { transform: rotateY(-8deg) rotateX(3deg) rotateZ(2deg) translateY(0); } 50% { transform: rotateY(-5deg) rotateX(1deg) rotateZ(1deg) translateY(-12px); } }
  @keyframes spin { to { transform: rotate(360deg); } }
}

/* Lydtrold plugin-family theme */
:root {
  --ink: #e0e6ef;
  --paper: #0c0f16;
  --acid: #5bdac1;
  --orange: #ff6b8a;
  --blue: #53d9ff;
  --line: rgba(130, 151, 176, .24);
  --surface: #141923;
  --surface-2: #1c2330;
  --muted-ui: #707c8f;
  color-scheme: dark;
}
body { background: var(--paper); color: var(--ink); }
.site-header { background: rgba(12,15,22,.93); border-color: var(--line); }
.brand-mark { background: var(--surface-2); border: 1px solid #344052; }
.brand-mark svg { fill: var(--acid); }
.main-nav a::after { background: var(--acid); }
.header-cta { border-color: #465267; }
.header-cta:hover { background: var(--acid); color: #0c0f16; border-color: var(--acid); }
.hero { background: radial-gradient(circle at 76% 40%, rgba(83,217,255,.08), transparent 30%), var(--paper); }
.hero .eyebrow span { background: var(--acid); box-shadow: 0 0 10px rgba(91,218,193,.6); }
h1 em { color: var(--acid); }
.hero-intro { color: #aeb8c6; }
.text-link { border-color: #4d596c; }
.orbit { border-color: rgba(83,217,255,.18); }.orbit-two { border-color: rgba(91,218,193,.12); }
.label-native { color: #071014; background: var(--blue); }.label-hdx { color: #07100e; background: var(--acid); }
.platforms { background: #090c12; color: var(--ink); border-top: 1px solid #273142; }
.platforms .eyebrow span { background: var(--acid); }
.section-heading > p:last-child { color: #8591a3; }
.platform-card { color: var(--ink); border: 1px solid #313b4d; border-radius: 16px; box-shadow: inset 0 1px rgba(255,255,255,.03); }
.native-card { background: linear-gradient(145deg, #18242a, #111720 65%); }.hdx-card { background: linear-gradient(145deg, #281c22, #15151d 65%); }
.native-card .format-pill, .native-card .card-link { border-color: var(--acid); }.hdx-card .format-pill, .hdx-card .card-link { border-color: var(--orange); }
.native-card .card-copy p, .native-card .card-link b { color: var(--acid); }.hdx-card .card-copy p, .hdx-card .card-link b { color: var(--orange); }
.native-art path, .disc { stroke: #53657a; }.disc::before { background: #dfe7ef; }.disc-one { background: rgba(83,217,255,.18); }.disc-two { background: rgba(91,218,193,.13); }.disc-three { background: rgba(255,107,138,.14); }
.chip { background: #090c12; color: var(--acid); border: 1px solid #3c4658; }.chip::before { border-color: #343e50; }.chip-pins { background: repeating-linear-gradient(to bottom, transparent 0 8px, #667387 8px 11px, transparent 11px 18px); }
.signal-line { border-color: rgba(255,107,138,.3); }
.manifesto { background: #0f131c; border-top: 1px solid var(--line); }.manifesto-label { color: #7e8a9d; }.manifesto em { color: var(--acid); }.principles span { border-color: #344052; }.story-link { border-color: #344052; color: var(--acid); }
.newsletter { background: linear-gradient(135deg, #151c26, #10151e); border: 1px solid #334052; border-radius: 16px; box-shadow: inset 0 1px rgba(255,255,255,.03); }.newsletter .eyebrow span { background: var(--acid); }.input-row { border-color: #4b586b; }.input-row input { color: var(--ink); }.input-row input::placeholder { color: #697588; }.input-row button { background: var(--acid); color: #09100f; }.form-note { color: #768296; }
footer { background: #090c12; border-top: 1px solid #232c3a; color: #aab4c3; }.footer-brand { color: var(--ink); }