/* Soma brand: black line, bright paint, warm paper. Tokens from the Soma brand kit. */
:root{
  --paper:#fdf3df;--paper-deep:#f6e4bd;--card:#fff9ec;--ink:#16130f;--ink-soft:#574e43;
  --sun:#ffcb2e;--coral:#f4574a;--tangerine:#ff8f2b;--leaf:#35bd6b;--sky:#2aa7ea;--magenta:#ee4fa6;--violet:#9d7df3;
  --line:2.5px;--r-lg:24px;--r-md:14px;--pop:4px 4px 0 var(--ink);--pop-lg:8px 8px 0 var(--ink);
  --display:Fredoka,"Arial Rounded MT Bold",system-ui,sans-serif;--text:Poppins,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:300 17px/28px var(--text);-webkit-font-smoothing:antialiased}
.soma{min-height:100vh;display:flex;flex-direction:column}
.soma>main,.bar,.foot{width:100%;max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px}
a{color:inherit}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;letter-spacing:0}

.bar{display:flex;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px}
.logo img{display:block;height:44px;width:auto}
.back{font:800 15px/20px var(--text);text-decoration:none;padding:10px 18px;border:var(--line) solid var(--ink);border-radius:999px;background:var(--card);box-shadow:var(--pop);transition:transform .08s,box-shadow .08s}
.back:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:48px 0 64px}
.tag{display:inline-block;margin:0 0 20px;font:800 15px/20px var(--text);padding:6px 16px;border:var(--line) solid var(--ink);border-radius:999px;background:var(--sun)}
.hero h1{font-size:clamp(44px,6.4vw,72px);line-height:1.02;letter-spacing:-.01em}
.lede{font:500 19px/30px var(--text);margin:24px 0 0;max-width:34em}
.status{display:inline-flex;align-items:center;gap:10px;margin:28px 0 0;font:800 15px/20px var(--text)}
.status .dot{width:14px;height:14px;border-radius:50%;background:var(--sun);border:var(--line) solid var(--ink)}
.hero-art img{display:block;width:100%;height:auto}

h2{font-size:clamp(28px,3.6vw,40px);line-height:1.12}
.pillars{padding:24px 0 72px}
.pillars h2{margin-bottom:32px;max-width:16em}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.pillar,.aud{position:relative;border:var(--line) solid var(--ink);border-radius:var(--r-lg);padding:28px;box-shadow:var(--pop-lg)}
.pillar h3{font-size:28px;line-height:1.15;margin:44px 0 10px}
.pillar p,.aud p{margin:0;font-weight:500;line-height:1.55}
.num{position:absolute;top:22px;left:26px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paper);border:var(--line) solid var(--ink);font:600 20px/1 var(--display)}
.sun{background:var(--sun)}.sky{background:var(--sky)}.leaf{background:var(--leaf)}.magenta{background:var(--magenta)}.coral{background:var(--coral)}.tangerine{background:var(--tangerine)}

.exchange{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;padding:56px 40px;margin:0 -8px 72px;background:var(--paper-deep);border:var(--line) solid var(--ink);border-radius:var(--r-lg)}
.ex-head p{margin:14px 0 0;font:500 19px/30px var(--text)}
.order{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:s}
.order li{counter-increment:s;display:flex;gap:12px;align-items:center;font-weight:500}
.order li::before{content:counter(s);display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--sun);border:var(--line) solid var(--ink);font:800 14px/1 var(--text)}
.ex-cards{display:grid;gap:20px}
.qcard,.fcard{background:var(--card);border:var(--line) solid var(--ink);border-radius:var(--r-lg);padding:24px;box-shadow:var(--pop)}
.label{display:inline-block;font:800 13px/20px var(--text);text-transform:none;letter-spacing:.02em}
.q{margin:6px 0 0;font:500 22px/28px var(--display)}
.fcard .f{margin:14px 0 0;font:500 19px/30px var(--text)}
.bands{display:flex;flex-wrap:wrap;gap:8px}
.band{display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border:var(--line) solid var(--ink);border-radius:999px;font:800 14px/20px var(--text)}
.band i{width:10px;height:10px;border-radius:50%;background:var(--ink)}
.band:nth-child(2) i{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);border:2px solid var(--ink);width:12px;height:12px}
.band:nth-child(3) i{background:transparent;border:2px solid var(--ink);width:12px;height:12px}

.audiences{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding-bottom:72px}
.aud h3{font-size:30px;line-height:1.15;margin:8px 0 12px}

.closing{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:center;background:var(--ink);color:var(--paper);border-radius:var(--r-lg);padding:40px;margin-bottom:72px}
.closing .neuron{width:100%;height:auto;background:var(--paper);border-radius:var(--r-lg);padding:8px}
.closing h2{margin-bottom:12px}
.closing p{margin:0;font:500 19px/30px var(--text);max-width:36em}

.foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding-top:24px;padding-bottom:40px;margin-top:auto;font-size:14px;line-height:20px;color:var(--ink-soft)}
.foot img{display:block;height:32px;width:auto;background:var(--ink);padding:8px 14px;border-radius:999px;box-sizing:content-box}

@media (max-width:860px){
  .hero,.exchange{grid-template-columns:1fr}
  .grid,.audiences{grid-template-columns:1fr}
  .hero-art{max-width:420px}
  .exchange{padding:32px 22px;margin-left:0;margin-right:0}
  .closing{grid-template-columns:1fr;padding:28px}
  .closing .neuron{max-width:180px}
}
@media (prefers-reduced-motion:reduce){.back{transition:none}}