/* PROOP – nowa strona (new2.proop.pl). Kolory i odcienie wyłącznie w tokenach w :root.
   Estetyka z new.proop.pl: ciemna scena z falami, ciepły gradient, szklane etykiety. */

/* ---------- Kroje: Montserrat i JetBrains Mono (SIL OFL 1.1, licencje w ./fonts/) ---------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("./fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("./fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("./fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("./fonts/jetbrains-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokeny ---------- */
:root {
  /* paleta PROOP */
  --navy: #0a1f44; --navy-900: #061530; --orange: #fd820a; --orange-2: #ffc534; --orange-mid: #ffb02e;
  --blue: #2a6c8e; --cyan: #37cce3; --white: #ffffff; --paper: #f5f9ff;
  --on-dark: #f5f9ff; --on-dark-2: #b9c6dc;
  /* jasne sekcje (wartości z new.proop.pl) */
  --muted: #5b6b8c; --line-light: #dbe6f7; --blue-soft: #e6f3fa;
  /* odcienie na ciemnej scenie */
  --line-dark: rgba(245, 249, 255, .14); --line-dark-2: rgba(245, 249, 255, .32);
  --glass: rgba(255, 255, 255, .07); --glass-hover: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .18);
  --hover-dark: rgba(245, 249, 255, .08); --hub-line: rgba(255, 255, 255, .28);
  --cyan-line: rgba(55, 204, 227, .55); --cyan-glow: rgba(55, 204, 227, .28); --cyan-ring: rgba(55, 204, 227, .06); --cyan-ring-2: rgba(55, 204, 227, .03);
  --ghost-bg: #0b2150; --disc-core: rgba(10, 31, 68, .92); --navy-ink-80: rgba(6, 21, 48, .8);
  --shadow-deep: rgba(0, 0, 0, .5); --shadow-chip: rgba(0, 0, 0, .8);
  --orange-shadow: rgba(253, 130, 10, .75); --orange-shadow-2: rgba(253, 130, 10, .85);
  --inset-hi: rgba(255, 255, 255, .35); --inset-hi-2: rgba(255, 255, 255, .45);
  --veil-hi: rgba(255, 255, 255, .07); --veil-warm: rgba(253, 130, 10, .16);
  --veil-top: rgba(0, 9, 28, .10); --veil-mid: rgba(0, 9, 28, .42); --veil-bot: rgba(0, 9, 28, .70);
  /* gradienty */
  --grad-accent: linear-gradient(120deg, var(--orange), var(--orange-2));
  --grad-btn: linear-gradient(120deg, var(--orange) 0%, var(--orange-mid) 45%, var(--orange-2) 60%, var(--orange) 100%);
  --card-dark: linear-gradient(135deg, #0a1f44 0%, #081a39 40%, #061326 100%);
  /* typografia i rytm */
  --display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --wrap: 1240px; --gut: clamp(16px, 4vw, 40px); --btn-r: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Podstawa ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--navy); font: 400 17px/1.65 var(--text); }
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.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; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--white); color: var(--navy); font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap { white-space: nowrap; }

/* ---------- Przyciski ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 22px;
  border-radius: var(--btn-r); font: 600 16px/1 var(--text); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn--primary { color: var(--navy-900); background: var(--grad-btn) 0 0 / 220% 100%;
  box-shadow: 0 8px 22px -10px var(--orange-shadow), inset 0 1px 0 var(--inset-hi); }
.btn--primary::after { content: "→"; content: "→" / ""; font: 600 1em/1 var(--text); }
.btn--tel::after { content: none; }
.btn .ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--primary:hover { background-position: 100% 0; box-shadow: 0 12px 28px -10px var(--orange-shadow-2), inset 0 1px 0 var(--inset-hi-2); }
.btn--ghost { color: var(--on-dark); background: var(--ghost-bg); border-color: var(--line-dark); }
.btn--ghost:hover { border-color: var(--on-dark); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-position .5s var(--ease), box-shadow .25s, border-color .15s, transform .18s var(--ease); }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn--primary::after { transition: transform .25s var(--ease); }
  .btn--primary:hover::after { transform: translateX(3px); }
}

/* Poświata przycisku z C4PL: raz, gdy przycisk wejdzie w widok; pierścień z gradientem obiega przycisk. */
@property --btnglow-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes btnglow-spin { to { --btnglow-a: 617deg; } }
@keyframes btnglow-gasnie { 0% { opacity: 0; } 33%, 67% { opacity: var(--btnglow-o, .6); } 100% { opacity: 0; } }
@keyframes btnglow-kreska { 0% { border-color: var(--line-dark); } 33%, 67% { border-color: transparent; } 100% { border-color: var(--line-dark); } }
.btnglow { position: relative; display: inline-flex; border-radius: var(--btn-r); }
.btnglow .btnglow__ring, .btnglow .btnglow__fg { position: absolute; pointer-events: none; z-index: 0; opacity: 0; border-radius: var(--btn-r);
  /* gradient wprost na elemencie: kąt --btnglow-a animuje się na nim, więc nie może przyjść z tokenu policzonego w :root */
  background: conic-gradient(from var(--btnglow-a), var(--blue), var(--cyan), var(--orange-2), var(--orange), var(--blue)); }
.btnglow .btnglow__ring { inset: -1px; --btnglow-o: 1; }
.btnglow .btnglow__fg1 { inset: -4px; filter: blur(9px); --btnglow-o: .62; }
.btnglow .btnglow__fg2 { inset: -11px; filter: blur(19px); --btnglow-o: .46; }
.btnglow > .btn { width: 100%; position: relative; z-index: 1; }
.btnglow.is-glowing > .btn { border-color: transparent; background-clip: padding-box; animation: btnglow-kreska 3s linear 1 both; }
.btnglow.is-glowing .btnglow__fg, .btnglow.is-glowing .btnglow__ring { animation: btnglow-spin 3s linear 1 both, btnglow-gasnie 3s linear 1 both; }
.btnglow.is-glowing > .btn--primary { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .btnglow.is-glowing > .btn, .btnglow.is-glowing .btnglow__fg, .btnglow.is-glowing .btnglow__ring { animation: none !important; }
  .btnglow .btnglow__fg, .btnglow .btnglow__ring { opacity: 0 !important; }
}

/* ---------- Scena: hero na całą szerokość, ciemne tło z falami, nagłówek strony leży na nim ---------- */
/* zawsze co najmniej cały ekran: bez paska następnej sekcji pod hero (vh jako zapas dla starszych przeglądarek) */
.scene { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-top: 76px;
  background: var(--card-dark); color: var(--on-dark); }
.scene > canvas.waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.scene > .veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(420px 260px at 20% 18%, var(--veil-hi), transparent 60%),
    radial-gradient(380px 260px at 82% 74%, var(--veil-warm), transparent 62%),
    linear-gradient(180deg, var(--veil-top) 0%, var(--veil-mid) 62%, var(--veil-bot) 100%); }
.scene > :not(canvas):not(.veil) { position: relative; z-index: 2; }
/* .wrap jako element siatki z marginesami auto kurczyłby się do treści; ma zająć całą szerokość do --wrap */
.scene > .wrap { width: 100%; }
@media (prefers-reduced-motion: reduce) { .scene > canvas.waves { display: none; } }

/* ---------- Nagłówek strony ---------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; color: var(--on-dark); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.logo { flex: none; display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font: 800 20px/1 var(--display); letter-spacing: .02em; }
.logo img { width: 34px; height: 34px; }
.site-nav { margin-left: auto; }
.menu { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.menu a { display: block; padding: 10px 12px; border-radius: 8px; color: inherit; text-decoration: none; font: 500 15.5px/1.2 var(--text); white-space: nowrap; }
.menu a:hover { background: var(--hover-dark); }
.menu a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--orange); border-radius: 0; }
.lang { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-dark); }
.lang a { display: block; padding: 6px 9px; border-radius: 999px; color: var(--on-dark-2); text-decoration: none; font: 600 12.5px/1 var(--text); letter-spacing: .06em; }
.lang a:hover { color: var(--on-dark); }
.lang a[aria-current="true"] { color: var(--navy-900); background: var(--on-dark); }
@media (forced-colors: active) { .lang a[aria-current="true"] { text-decoration: underline; } }
.site-header .btn { min-height: 42px; padding: 0 18px; font-size: 15px; }
.nav-mobile { display: none; }
/* 981–1180 px: pełne menu i przełącznik języka; przycisk „Zadzwoń” z nagłówka jest wtedy tylko w hero. */
@media (max-width: 1180px) {
  .site-header .wrap { gap: 14px; }
  .site-header > .wrap > .btn--primary { display: none; }
  .menu a { padding: 10px 9px; }
}
/* do 980 px: menu w rozwijanym panelu */
@media (max-width: 980px) {
  .site-nav { display: none; }
  .lang { margin-left: auto; }
  .nav-mobile { display: block; }
  .nav-toggle summary { list-style: none; cursor: pointer; font: 600 15px/1 var(--text); padding: 12px 14px; border: 1.5px solid var(--line-dark); border-radius: 999px; }
  .nav-toggle summary::-webkit-details-marker { display: none; }
  .nav-toggle[open] .menu { display: grid; position: absolute; left: var(--gut); right: var(--gut); top: 72px; margin: 0; background: var(--white); color: var(--navy);
    border-radius: 14px; padding: 8px; box-shadow: 0 18px 40px var(--shadow-deep); }
  .nav-toggle[open] .menu a { padding: 14px; }
  .nav-toggle[open] .menu a:hover { background: var(--paper); }
  .nav-toggle[open] .menu a:focus-visible { outline-color: var(--blue); }
  .nav-toggle[open] .menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--navy); border-radius: 0 8px 8px 0; }
}
@media (max-width: 760px) { .lang a { padding: 10px 12px; } }
@media (max-width: 359px) {
  .site-header .wrap { gap: 10px; }
  .nav-toggle summary { padding: 12px 10px; }
  .lang a { padding: 10px 9px; }
}

/* ---------- Hero ---------- */
.hero { width: 100%; }
.hero__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding-top: clamp(24px, 4vw, 56px); padding-bottom: 72px; }
.eyebrow { display: inline-flex; gap: .6em; margin: 0 0 18px; font: 700 12.5px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.hero h1 { margin: 0; font: 700 clamp(36px, 4.2vw, 64px)/1.04 var(--display); letter-spacing: -.028em; color: var(--on-dark); }
/* angielski nagłówek jest dłuższy: przy 64 px robi 4 linijki, przy 60 px trzy jak polski */
html[lang="en"] .hero h1 { font-size: clamp(36px, 4.2vw, 60px); }
.gt-warm { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .12em; margin-bottom: -.12em; }
.lead { max-width: 40ch; margin: 18px 0 28px; color: var(--on-dark-2); font-size: clamp(18px, 1.35vw, 20.5px); line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Centrala: koło PROOP w środku, obszary po bokach, linie i impulsy liczy hub.js.
   Szerokość etykiety zostawia co najmniej --gap wolnego miejsca między etykietą a kołem. */
.hub { position: relative; height: clamp(460px, 38vw, 540px); --disc: 120px; --gap: 44px; }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.hub__lines path { fill: none; stroke: var(--hub-line); stroke-width: 1.5; }
.hub__lines path.pulse { stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2 98; stroke-dashoffset: 100; opacity: 0; }
.hub__lines path.line.on { stroke: var(--orange-2); stroke-width: 2.5; }
.hub.has-on .chip:not(.is-on) { opacity: .8; }
.hub.has-on .hub__lines path.line:not(.on), .hub.has-on .hub__lines path.pulse:not(.on) { opacity: .3; }
.disc { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); width: var(--disc); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 5px; text-align: center;
  background: radial-gradient(circle at 50% 30%, var(--cyan-glow), var(--disc-core) 70%); border: 1px solid var(--cyan-line);
  box-shadow: 0 0 0 10px var(--cyan-ring), 0 0 0 22px var(--cyan-ring-2), 0 20px 50px var(--shadow-deep); }
.disc img { width: 40px; height: auto; }
.disc b { font: 800 19px/1 var(--display); letter-spacing: .1em; color: var(--white); }
.disc small { font: 500 10.5px/1.2 var(--mono); letter-spacing: .04em; color: var(--on-dark-2); }
.chip { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; border-radius: 14px; text-decoration: none;
  font: 600 15px/1.2 var(--text); color: var(--white); background: var(--glass); border: 1px solid var(--glass-line);
  box-shadow: 0 14px 30px -20px var(--shadow-chip); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.chip svg { width: 20px; height: 20px; flex: none; stroke: var(--orange-2); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chip small { display: block; margin-top: 3px; font: 500 11.5px/1.35 var(--mono); color: var(--on-dark-2); }
.chip:hover, .chip:focus-visible { background: var(--glass-hover); border-color: var(--orange-2); }
.chip:focus-visible { outline: 2px solid var(--orange-2); outline-offset: 3px; }
.chip--main { color: var(--navy-900); background: var(--grad-accent); border-color: transparent; }
.chip--main svg { stroke: var(--navy-900); }
.chip--main small { color: var(--navy-ink-80); }
.chip--main:hover, .chip--main:focus-visible { background: var(--grad-accent); border-color: var(--navy-900); }
.hub .chip { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: min(208px, calc(50% - var(--disc) / 2 - var(--gap))); }
.hub .chip[data-row="1"] { top: 14%; }
.hub .chip[data-row="3"] { top: 86%; }
.hub .chip[data-side="l"] { left: 0; }
.hub .chip[data-side="r"] { right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .chip { transition: transform .18s var(--ease), border-color .18s, background-color .18s, opacity .2s; }
  .hub .chip:hover, .hub .chip:focus-visible { transform: translateY(calc(-50% - 2px)); }
  .hub__lines path { transition: opacity .2s, stroke .2s; }
  /* Impulsy wychodzą z PROOP do obszarów. Kolor zmienia się co przebieg (pomarańczowy, niebieski),
     zawsze wtedy, gdy impuls jest pod kołem, więc zmiany nie widać. Sąsiednie linie zaczynają od innego koloru. */
  .hub__lines path.pulse { opacity: 1; animation: hub-flow 3s linear infinite, hub-color 6s linear infinite; animation-delay: var(--d, 0s), var(--dc, 0s); }
  @keyframes hub-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes hub-color { 0%, 49.9% { stroke: var(--orange); } 50%, 100% { stroke: var(--cyan); } }
}
/* od 1300 px koło jak w wariancie 23: 136 px, pierścienie 12 i 30 px */
@media (min-width: 1300px) {
  .hub { --disc: 136px; }
  .disc { box-shadow: 0 0 0 12px var(--cyan-ring), 0 0 0 30px var(--cyan-ring-2), 0 20px 50px var(--shadow-deep); }
  .disc img { width: 44px; } .disc b { font-size: 20px; } .disc small { font-size: 11px; }
}

/* ---------- Jak wygląda współpraca (przeniesione z new.proop.pl: .sec, .sec__head, .path) ---------- */
.sec { padding: clamp(56px, 8vw, 108px) 0; }
.sec__head { max-width: min(640px, 100%); margin-bottom: clamp(28px, 4vw, 52px); }
.sec .eyebrow { color: var(--blue); }
.sec__title { margin: 0; font: 700 clamp(1.7rem, 1.1rem + 2.4vw, 2.7rem)/1.1 var(--display); letter-spacing: -.02em; color: var(--navy); overflow-wrap: break-word; }
.path { position: relative; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.path::before { content: ""; position: absolute; left: 19px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(var(--blue), var(--cyan)); opacity: .35; }
.path__step { position: relative; padding: 0 0 clamp(20px, 3.4vw, 40px) 64px; }
.path__step:last-child { padding-bottom: 0; }
.path__node { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; background: var(--blue); color: var(--white); box-shadow: 0 0 0 6px var(--blue-soft); }
.path__card { background: var(--white); border: 1px solid var(--line-light); border-radius: 20px; padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 24px); }
.path__h { margin: 0 0 .3em; font: 700 1.12rem/1.3 var(--display); letter-spacing: -.01em; color: var(--navy); }
.path__p { margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  .path__card { transition: transform .25s ease, border-color .25s ease; }
  .path__card:hover { transform: translateX(3px); border-color: var(--blue); }
}

/* 981–1219 px (węższy laptop, tablet poziomo): dalej dwie kolumny jak w wariancie 23,
   ale mniejsze koło, odstępy i etykiety, żeby „oprogramowanie” mieściło się w etykiecie. */
@media (min-width: 981px) and (max-width: 1219px) {
  .hero__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; }
  .hero h1 { font-size: clamp(34px, 3.9vw, 46px); }
  .lead { font-size: 17px; }
  .hub { --disc: 104px; --gap: 28px; height: clamp(420px, 44vw, 480px); }
  .disc { gap: 4px; box-shadow: 0 0 0 8px var(--cyan-ring), 0 0 0 16px var(--cyan-ring-2), 0 16px 40px var(--shadow-deep); }
  .disc img { width: 32px; } .disc b { font-size: 16px; } .disc small { font-size: 9.5px; }
  .hub .chip { padding: 10px 12px; gap: 8px; font-size: 14px; }
  .hub .chip svg { width: 18px; height: 18px; }
  .hub .chip small { font-size: 11px; }
}
/* do 980 px: tekst nad centralą */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hub { width: 100%; max-width: 720px; margin: 0 auto; height: 460px; }
}
/* Telefon: koło nad obszarami, obszary w dwóch kolumnach, bez linii */
@media (max-width: 760px) {
  .hero__grid { padding-bottom: 40px; }
  .hub { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hub__lines { display: none; }
  .disc { position: relative; left: auto; top: auto; transform: none; grid-column: 1 / -1; margin: 0 auto 12px; }
  .hub .chip[data-row], .hub .chip[data-row]:hover, .hub .chip[data-row]:focus-visible { position: relative; top: auto; left: auto; right: auto; transform: none; width: auto; }
  .hub .chip { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 360px) { .hub { grid-template-columns: 1fr; } .hub .chip { flex-direction: row; align-items: center; } }