/* SW Energy — Editorial Light */
:root{
  --bg: oklch(0.985 0.004 95);
  --bg-tint: oklch(0.965 0.006 95);
  --paper: oklch(0.99 0.003 95);
  --ink: oklch(0.18 0.012 250);
  --ink-2: oklch(0.32 0.01 250);
  --ink-3: oklch(0.5 0.008 250);
  --mute: oklch(0.62 0.006 250);
  --line: oklch(0.88 0.006 250);
  --line-2: oklch(0.92 0.005 250);
  --hair: oklch(0.85 0.008 250);
  --accent: oklch(0.68 0.19 50);     /* logo orange, slightly darker */
  --accent-soft: oklch(0.68 0.19 50 / 0.12);
  --accent-ink: oklch(0.52 0.17 48);
  --serif: "Instrument Serif", "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --grotesk: "Geist", "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Oswald", "Bebas Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --dens: 1;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body{
  font-family:var(--grotesk);
  font-size:15px;
  line-height:1.55;
  letter-spacing:-0.005em;
  color:var(--ink);
  background:var(--bg);
  overflow-x:clip;
  overflow-y:visible;
  min-height:100vh;
}

::selection{background:var(--accent-soft);color:var(--ink)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
img{max-width:100%;display:block}

/* ── Type ─────────────────────────────────────────────── */
.serif{font-family:var(--grotesk);font-weight:500;font-style:normal;letter-spacing:-0.025em;line-height:0.98}
.serif-it{font-style:italic;font-weight:400;color:var(--accent)}
.mono{font-family:var(--mono);font-weight:400;letter-spacing:0;font-size:11px;text-transform:uppercase}

.h-display{font-family:var(--grotesk);font-size:clamp(36px, 8.1vw, 133px);line-height:0.92;letter-spacing:-0.04em;font-weight:500}
.h1{font-family:var(--grotesk);font-size:clamp(40px, 5vw, 84px);line-height:0.96;letter-spacing:-0.035em;font-weight:500}
.h2{font-family:var(--grotesk);font-size:clamp(32px, 3.6vw, 56px);line-height:1;letter-spacing:-0.03em;font-weight:500}
.h3{font-family:var(--grotesk);font-size:clamp(22px, 1.8vw, 30px);line-height:1.1;letter-spacing:-0.02em;font-weight:500}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:99px;background:var(--accent);margin-right:8px;transform:translateY(-1px)}

.lede{font-size:18px;line-height:1.5;color:var(--ink-2);max-width:62ch;letter-spacing:-0.005em}
@media (max-width: 720px){.lede{font-size:15px}}

/* ── Layout ───────────────────────────────────────────── */
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px, 4vw, 56px)}
.section{
  position:relative;
  padding-top: calc(120px * var(--dens));
  padding-bottom: calc(120px * var(--dens));
  border-top:1px solid var(--line);
}
.section.no-border{border-top:0}
.grid-12{display:grid;grid-template-columns:repeat(12, 1fr);gap:clamp(16px, 2vw, 28px)}
.colspan-1{grid-column:span 1}
.colspan-2{grid-column:span 2}
.colspan-3{grid-column:span 3}
.colspan-4{grid-column:span 4}
.colspan-5{grid-column:span 5}
.colspan-6{grid-column:span 6}
.colspan-7{grid-column:span 7}
.colspan-8{grid-column:span 8}
.colspan-9{grid-column:span 9}
.colspan-12{grid-column:span 12}

@media (max-width: 900px){
  .grid-12{grid-template-columns:repeat(6, 1fr)}
  .colspan-3,.colspan-4,.colspan-5,.colspan-6,.colspan-7,.colspan-8,.colspan-9,.colspan-12{grid-column:span 6}
}

.section-head{display:grid;grid-template-columns:1fr 2fr;gap:clamp(20px, 3vw, 60px);align-items:end;margin-bottom:64px}
@media (max-width: 900px){ .section-head{grid-template-columns:1fr;gap:18px} }
.section-num{font-family:var(--mono);font-size:15.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px}
.section-num::before{content:"";display:inline-block;width:28px;height:1px;background:var(--ink-3)}

/* ── Buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;
  border:1px solid var(--ink);background:var(--ink);color:var(--bg);
  font-family:var(--grotesk);font-size:14px;letter-spacing:-0.005em;
  cursor:pointer;transition:all .25s cubic-bezier(.2,.7,.2,1);
}
.btn:hover{transform:translateY(-1px);background:var(--ink-2);border-color:var(--ink-2)}
.btn .arrow{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.btn:hover .arrow{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.small{padding:9px 14px;font-size:13.8px}

.link{display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:3px;transition:all .2s}
.link:hover{border-color:var(--ink);gap:12px}

/* ── Nav ──────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px, 4vw, 56px);
  border-bottom:1px solid transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}
.nav.scrolled{
  background: oklch(0.985 0.004 95 / 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: var(--line);
}
.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;color:var(--ink);text-decoration:none}
.brand-logo-img{height:145px;width:auto;display:block;object-fit:contain;transition:opacity .2s ease}
@media (max-width: 720px){.brand-logo-img{height:80px}}
.brand:hover .brand-logo-img{opacity:.85}
footer .brand-logo-img{height:106px}
.brand-word{display:flex;align-items:baseline;gap:0;line-height:1}
.brand-word .b1{
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.brand:hover .brand-mark > svg{transform: rotate(0deg)}
.brand-mark > svg{transition: transform .5s cubic-bezier(.2,.7,.2,1)}
.nav-links{display:flex;align-items:center;gap:28px;font-size:15.5px;color:var(--ink-2)}
.nav-links a{position:relative;padding:6px 0}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink)}
/* ── Hamburger / Mobile Nav ───────────────────────────── */
.nav-mobile{display:none}
.nav-burger{
  display:none;
  width:36px;height:36px;background:transparent;border:1px solid var(--line);
  border-radius:99px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  flex-shrink:0;
}
.nav-burger span{display:block;width:16px;height:1px;background:var(--ink);transition:transform .25s, opacity .25s}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width: 720px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-mobile{
    display:flex;
    position:fixed;inset:0;top:0;z-index:49;
    background: oklch(0.985 0.004 95 / 0.97);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:32px;opacity:0;pointer-events:none;transition:opacity .3s;
  }
  .nav-mobile.open{opacity:1;pointer-events:auto}
  .nav-mobile a{
    font-family:var(--grotesk);font-size:32px;font-weight:500;
    letter-spacing:-0.03em;color:var(--ink);text-decoration:none;
  }
  .nav-mobile a:hover{color:var(--accent)}
}

/* ── Hero canvas ──────────────────────────────────────── */
.hero{
  position:relative;
  padding-top: 100px;
  padding-bottom: clamp(60px, 8vw, 120px);
  min-height: 92vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size: clamp(60px, 8vw, 120px) clamp(60px, 8vw, 120px);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
  opacity:.55;
  z-index:0;
}
.hero-content{position:relative;z-index:2}
.hero-meta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:48px;gap:24px;flex-wrap:wrap}
.hero-cta{display:flex;gap:12px;align-items:center;margin-top:32px;flex-wrap:wrap}

/* corner ticks */
.tick{position:absolute;width:14px;height:14px;border-color:var(--ink-3);opacity:.6}
.tick.tl{top:88px;left:clamp(20px, 4vw, 56px);border-top:1px solid;border-left:1px solid}
.tick.tr{top:88px;right:clamp(20px, 4vw, 56px);border-top:1px solid;border-right:1px solid}
.tick.bl{bottom:24px;left:clamp(20px, 4vw, 56px);border-bottom:1px solid;border-left:1px solid}
.tick.br{bottom:24px;right:clamp(20px, 4vw, 56px);border-bottom:1px solid;border-right:1px solid}

/* ── Reveal ───────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}
.reveal.d2{transition-delay:.12s}
.reveal.d3{transition-delay:.18s}
.reveal.d4{transition-delay:.24s}

/* ── Service cards ────────────────────────────────────── */
.svc-list{border-top:1px solid var(--line)}
.svc{
  display:grid;grid-template-columns: 80px 1fr 1fr auto;
  gap:24px;align-items:start;
  padding: 36px 0;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transition: background .3s, padding .3s;
}
.svc:hover{background: linear-gradient(to right, transparent, var(--bg-tint) 8%, var(--bg-tint) 92%, transparent)}
.svc.open{background: linear-gradient(to right, transparent, var(--bg-tint) 8%, var(--bg-tint) 92%, transparent)}
.svc-num{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.08em}
.svc-title{font-family:var(--grotesk);font-size:clamp(24px, 2.4vw, 36px);line-height:1.05;letter-spacing:-0.025em;font-weight:500}
.svc-desc{color:var(--ink-2);font-size:14.5px;line-height:1.55;max-width:46ch}
.svc-toggle{
  width:38px;height:38px;border-radius:99px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  transition: all .3s; flex-shrink:0;
}
.svc:hover .svc-toggle{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.svc.open .svc-toggle{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:rotate(45deg)}

.svc-detail{
  grid-column: 2 / -1;
  display:grid;grid-template-columns:1fr 1fr;gap:32px;
  padding-top:24px;margin-top:8px;
  border-top:1px dashed var(--line);
}
.svc-detail h5{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-3);margin:0 0 10px;font-weight:500}
.svc-detail ul{margin:0;padding:0;list-style:none}
.svc-detail li{padding:6px 0;font-size:14px;color:var(--ink-2);display:flex;gap:10px;align-items:baseline}
.svc-detail li::before{content:"";width:4px;height:4px;border-radius:99px;background:var(--accent);flex-shrink:0;transform:translateY(-2px)}
.svc-detail .schematic{border-radius:8px;background:var(--bg-tint);display:flex;align-items:center;justify-content:center;padding:8px}
.svc-detail .schematic img{max-width:100%;max-height:240px;width:auto;height:auto;display:block;border-radius:4px}

@media (max-width: 800px){
  .svc{grid-template-columns: 60px 1fr auto}
  .svc-desc{grid-column:2 / -1}
  .svc-detail{grid-template-columns:1fr}
  .svc-detail .schematic img{max-height:200px}
}

/* ── Network viz ──────────────────────────────────────── */
.netviz{
  position:relative;background:var(--paper);
  border:1px solid var(--line);border-radius:4px;
  aspect-ratio: 16/10; overflow:hidden;
}
.netviz svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.node-tip{
  position:absolute;background:var(--ink);color:var(--bg);
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;
  padding:8px 12px;border-radius:6px;pointer-events:none;
  white-space:nowrap;z-index:5;transform:translate(-50%, -130%);
  opacity:0;transition:opacity .15s;
}
.node-tip.show{opacity:1}
.node-tip::after{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:var(--ink)}

/* ── Projects list (index page) ───────────────────────── */
.prj-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.prj-list li{border-bottom:1px solid var(--line)}
.prj-row{
  width:100%;background:none;border:none;cursor:pointer;text-align:left;
  display:grid;
  grid-template-columns: 48px 1fr auto;
  gap:24px;align-items:center;
  padding:28px 0;
  transition:background .25s,padding .25s;
}
.prj-row:hover{
  padding-left:12px;padding-right:12px;
  background:linear-gradient(to right,transparent,var(--bg-tint) 5%,var(--bg-tint) 95%,transparent);
}
.prj-row-idx{
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;
  color:var(--ink-3);line-height:1;padding-top:2px;
}
.prj-row-main{
  display:flex;flex-direction:column;gap:5px;
}
.prj-row-meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.prj-row-title{
  font-family:"Oswald",sans-serif;font-size:clamp(20px,2.2vw,32px);
  font-weight:400;line-height:1.1;letter-spacing:-0.01em;color:var(--ink);
}
.prj-row-sum{
  font-size:13.5px;color:var(--ink-3);line-height:1.5;max-width:62ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:2px;
}
.prj-row-side{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-3);flex-shrink:0;
}
.prj-row-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:99px;border:1px solid var(--line);
  color:var(--ink);font-size:14px;
  transition:background .25s,border-color .25s,transform .25s;
}
.prj-row:hover .prj-row-arrow{
  background:var(--ink);color:var(--bg);border-color:var(--ink);transform:translateX(4px);
}
@media (max-width:800px){
  .prj-row{grid-template-columns:36px 1fr}
  .prj-row-side{display:none}
  .prj-row-sum{display:none}
}

/* ── Projects grid (projekte.html) ────────────────────── */
.prj-grid{display:grid;grid-template-columns:repeat(12, 1fr);gap:24px}
.prj{
  grid-column: span 6;
  cursor:pointer; position:relative;
  display:flex;flex-direction:column;
  transition: transform .3s;
}
.prj:hover{transform:translateY(-2px)}
.prj-thumb{
  aspect-ratio: 5/3; background:var(--bg-tint);
  border:1px solid var(--line);
  position:relative;overflow:hidden;
  margin-bottom:16px;
}
.prj-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.prj-title{font-family:var(--grotesk);font-size:24px;line-height:1.1;letter-spacing:-0.025em;margin:0 0 6px;font-weight:500}
.prj-sub{color:var(--ink-2);font-size:14px}
@media (max-width: 800px){ .prj{grid-column:span 12} }

.prj.large{grid-column: span 12}
.prj.large .prj-thumb{aspect-ratio: 21/9}

/* ── Modal ────────────────────────────────────────────── */
.modal-bg{
  position:fixed;inset:0;z-index:200;
  background: oklch(0.18 0.012 250 / 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding: clamp(16px, 4vw, 56px);
  opacity:0; pointer-events:none;
  transition: opacity .3s;
}
.modal-bg.show{opacity:1;pointer-events:auto}
.modal{
  background:var(--bg);border:1px solid var(--line);
  width:100%;max-width:1080px;max-height:88vh;overflow-y:auto;
  border-radius:6px;
  transform: translateY(20px); transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.modal-bg.show .modal{transform:none}
.modal-hd{position:sticky;top:0;background:var(--bg);padding:18px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);z-index:2}
.modal-x{width:36px;height:36px;border-radius:99px;border:1px solid var(--line);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-x:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.modal-body{padding: 32px 32px 56px}
.modal-cover{aspect-ratio: 21/9;background:var(--bg-tint);border:1px solid var(--line);margin-bottom:32px;position:relative;overflow:hidden}
.modal-grid{display:grid;grid-template-columns: 1fr 2fr;gap:48px;align-items:start}
@media (max-width: 800px){ .modal-grid{grid-template-columns:1fr} }
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:13.5px}
.kv dt{font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.kv dd{margin:0;color:var(--ink)}

/* ── Team ─────────────────────────────────────────────── */
.team{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media (max-width: 800px){ .team{grid-template-columns:1fr} }
.tm{display:grid;grid-template-columns: 140px 1fr;gap:24px;align-items:start}
@media (max-width: 600px){.tm{grid-template-columns:1fr}.tm-photo{width:100px;aspect-ratio:1}}
.tm-photo{aspect-ratio:1;background:var(--bg-tint);border:1px solid var(--line);position:relative;overflow:hidden}
.tm-name{font-family:var(--grotesk);font-size:28px;line-height:1.05;letter-spacing:-0.025em;margin:0;font-weight:500}
.tm-role{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 14px}
.tm-bio{color:var(--ink-2);font-size:14.5px;line-height:1.55;max-width:42ch}
.tm-mail{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px}

/* ── Contact form ─────────────────────────────────────── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.form .full{grid-column: span 2}
@media (max-width: 700px){ .form{grid-template-columns:1fr} .form .full{grid-column:span 1} }
.field{display:flex;flex-direction:column;gap:6px;position:relative}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3)}
.field input, .field textarea, .field select{
  font-family:var(--grotesk);font-size:15px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 0;outline:none;resize:vertical;
  transition: border-color .2s;
}
.field textarea{min-height:120px;line-height:1.5}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--ink)}
.field.error input, .field.error textarea, .field.error select{border-color: oklch(0.55 0.18 25)}
.field .err{font-size:12px;color: oklch(0.5 0.18 25);min-height:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{
  font-family:var(--grotesk);font-size:13px;
  padding:7px 14px;border:1px solid var(--line);border-radius:99px;
  background:transparent;color:var(--ink-2);cursor:pointer;transition:all .2s;
}
.chip:hover{border-color:var(--ink-3)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.success{
  border:1px solid var(--accent);background:var(--accent-soft);
  padding:24px;border-radius:6px;color:var(--ink);
  display:flex;gap:14px;align-items:flex-start;
}
.success .ok{
  width:28px;height:28px;flex-shrink:0;border-radius:99px;background:var(--accent);color:var(--bg);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}

/* ── Footer ───────────────────────────────────────────── */
.footer{
  border-top:1px solid var(--line);
  padding: 64px 0 32px;
  display:grid;grid-template-columns: 2fr 1fr 1fr 1fr;gap:32px;align-items:start;
}
@media (max-width: 800px){ .footer{grid-template-columns:1fr 1fr} }
@media (max-width: 480px){ .footer{grid-template-columns:1fr} }
.footer h6{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;font-weight:500}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{padding:5px 0;color:var(--ink-2);font-size:14px}
.footer a:hover{color:var(--ink)}
.footer-meta{
  border-top:1px solid var(--line);
  margin-top:24px;padding-top:20px;padding-bottom:40px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);
}

/* ── Marquee tickers ──────────────────────────────────── */
.marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  border-block:1px solid var(--line);
  padding:18px 0;
  cursor: ew-resize;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:inline-flex;
  gap:48px;
  white-space:nowrap;
  will-change: transform;
}
.marquee-item{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:0.14em;
  flex-shrink:0;
}
.marquee-item::before{
  content:"";display:inline-block;
  width:24px;height:1px;background:var(--ink-3);opacity:.4;
}
.marquee:hover .marquee-item{color:var(--ink-2)}

/* ── Misc ─────────────────────────────────────────────── */
.diag-bg{
  background-image: repeating-linear-gradient(
    45deg, transparent 0 12px, oklch(0.88 0.006 250 / 0.5) 12px 13px
  );
}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);padding:5px 10px;border:1px solid var(--line);border-radius:99px}

.kbd{font-family:var(--mono);font-size:10px;padding:2px 6px;border:1px solid var(--line);border-radius:4px;color:var(--ink-3)}