/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/build/fonts/inter-cyrillic-ext-wght-normal.b5cdd476.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/build/fonts/inter-cyrillic-wght-normal.49594fb5.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/build/fonts/inter-greek-ext-wght-normal.f4df85d1.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/build/fonts/inter-greek-wght-normal.4f908aee.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/build/fonts/inter-vietnamese-wght-normal.ab4bb8dc.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/build/fonts/inter-latin-ext-wght-normal.8bff79fb.woff2) format('woff2-variations');
  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;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/build/fonts/inter-latin-wght-normal.4f2981d8.woff2) format('woff2-variations');
  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;
}
/* jetbrains-mono-cyrillic-ext-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/jetbrains-mono-cyrillic-ext-400-normal.7347c7bf.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-cyrillic-ext-400-normal.831e0db2.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/jetbrains-mono-cyrillic-400-normal.f69e1e24.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-cyrillic-400-normal.d0dbe121.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/jetbrains-mono-greek-400-normal.3a4578ae.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-greek-400-normal.55220d4d.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/jetbrains-mono-vietnamese-400-normal.aa664ef1.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-vietnamese-400-normal.411bbf70.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/jetbrains-mono-latin-ext-400-normal.e83b764e.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-latin-ext-400-normal.dfdc51c0.woff) format('woff');
  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;
}

/* jetbrains-mono-latin-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/jetbrains-mono-latin-400-normal.d04352f2.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-latin-400-normal.1fef352a.woff) format('woff');
  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;
}
/* jetbrains-mono-cyrillic-ext-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/build/fonts/jetbrains-mono-cyrillic-ext-500-normal.12b2790f.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-cyrillic-ext-500-normal.7d1c47b7.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/build/fonts/jetbrains-mono-cyrillic-500-normal.c859e116.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-cyrillic-500-normal.508a2375.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/build/fonts/jetbrains-mono-greek-500-normal.4ab6aec6.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-greek-500-normal.00b2594f.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/build/fonts/jetbrains-mono-vietnamese-500-normal.e8fe161b.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-vietnamese-500-normal.61b34003.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/build/fonts/jetbrains-mono-latin-ext-500-normal.4a98f207.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-latin-ext-500-normal.a9148377.woff) format('woff');
  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;
}

/* jetbrains-mono-latin-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/build/fonts/jetbrains-mono-latin-500-normal.bb50084b.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-latin-500-normal.b6ddca26.woff) format('woff');
  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;
}
/* jetbrains-mono-cyrillic-ext-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/build/fonts/jetbrains-mono-cyrillic-ext-600-normal.228aae4e.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-cyrillic-ext-600-normal.fd1e2a1c.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/build/fonts/jetbrains-mono-cyrillic-600-normal.8b3e76f3.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-cyrillic-600-normal.4ca80b24.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/build/fonts/jetbrains-mono-greek-600-normal.10cc4e4c.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-greek-600-normal.2281356f.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/build/fonts/jetbrains-mono-vietnamese-600-normal.8a6f1ff1.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-vietnamese-600-normal.adc7634e.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/build/fonts/jetbrains-mono-latin-ext-600-normal.2ebc3362.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-latin-ext-600-normal.31ca4973.woff) format('woff');
  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;
}

/* jetbrains-mono-latin-600-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/build/fonts/jetbrains-mono-latin-600-normal.d68d56cf.woff2) format('woff2'), url(/build/fonts/jetbrains-mono-latin-600-normal.7e91dde0.woff) format('woff');
  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;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta::before { animation: none; }
}
body {
  font-family: 'Inter Variable', 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #1a1a1a;
  background: #fff;
  overflow-x: hidden;

  --accent: #4f46e5;
  --accent-dk: #3730a3;
  --accent-lt: #eef0ff;
  --accent-on-dark: #8fa1ff;
  --accent-soft: #c7d2fe;
  --ink: #0d1117;
  --text: #1a1a1a;
  --text-mute: #5b6472;
  --bg-alt: #f6f7fb;
  --border: #e4e6f0;
}

img { display: block; max-width: 100%; }

.btn {
  background: var(--accent); color: #fff; border: none;
  padding: 10px 18px; border-radius: 100px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; letter-spacing: 0.02em;
  text-decoration: none; display: inline-block;
  transition: background 0.15s, transform 0.12s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--accent-dk); transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(79,70,229,.5); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-ghost:hover, .btn-soft:hover { box-shadow: 0 6px 16px -10px rgba(13,17,23,.4); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-alt); border-color: var(--text); }
.btn-soft {
  background: var(--accent-lt); color: var(--accent);
  border: 1px solid transparent;
}
.btn-soft:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dk); }
.btn-lg { padding: 14px 26px; font-size: 14px; border-radius: 100px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-lt);
  padding: 6px 12px; border-radius: 100px;
  margin-bottom: 24px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.eyebrow .eb-sep { margin: 0 8px; opacity: 0.5; font-weight: 400; }

.mark {
  width: 34px; height: 34px;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
  border-radius: 6px;
  letter-spacing: -0.04em;
}

.logo { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.logo .mark {
  width: 36px; height: 36px;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
  letter-spacing: -0.04em;
  border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,0.13);
  border-bottom-width: 3px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07);
  flex-shrink: 0;
  transform: translateY(1px);
}
.logo .name {
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  color: var(--text);
}
.logo .name em { color: var(--accent); font-style: normal; font-weight: 800; }

/* Wordmark GWISE - wariant AD2 (G w akcencie + belka pod G).
   --tr: tracking; margin-right kasuje światło doklejone za ostatnią literą.
   --ov: wysunięcie belki poza szerokość G, symetrycznie w obie strony.
   Wszystko w em, więc jeden font-size skaluje cały znak. */
.gw-logo {
  --tr: 0.03em;
  --ov: 0.04em;
  display: inline-block;
  /* płynny rozmiar: 24px na małych ekranach, 32px docelowo.
     nowrap + flex-shrink pilnują, żeby G i WISE nigdy się nie rozjechały. */
  font-size: clamp(24px, 3.2vw, 32px); font-weight: 900; line-height: 1;
  letter-spacing: var(--tr); margin-right: calc(-1 * var(--tr));
  color: var(--ink);
  white-space: nowrap; flex-shrink: 0;
  /* belka wisi 0.16em pod boksem litery - padding rezerwuje jej miejsce,
     inaczej w ciasnych kontenerach (makiety w hero) nachodzi na sąsiada */
  padding-bottom: 0.18em;
}
.logo { flex-shrink: 0; }
/* devices.css narzuca `.device *{display:block}` na wszystko w makietach urządzeń -
   bez podbicia specyficzności G i WISE lądują w osobnych wierszach */
.device .gw-logo, .device .gw-logo-g { display: inline-block; }
.gw-logo-g { position: relative; display: inline-block; color: var(--accent); }
.gw-logo-g::after {
  content: ""; position: absolute;
  left: calc(-1 * var(--ov)); right: calc(var(--tr) - var(--ov));
  bottom: -0.16em; height: 0.115em;
  background: var(--accent); border-radius: 2px;
}
.gw-logo--dark { color: #fff; }
.gw-logo--dark .gw-logo-g { color: var(--accent-on-dark); }
.gw-logo--dark .gw-logo-g::after { background: var(--accent-on-dark); }

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
.nav.is-scrolled { background: rgba(255,255,255,0.97); box-shadow: 0 8px 28px -20px rgba(13,17,23,.55); }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.15s; }
.nav-links a:hover { color: var(--accent); }
.nav-links a[aria-current] { color: var(--accent); }

/* Menu jako jeden pill (desktop) - wariant 1A */
@media (min-width: 981px) {
  .nav-links { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 100px; padding: 6px 12px; gap: 8px; }
  .nav-links a { padding: 8px 16px; border-radius: 100px; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
  .nav-links a:hover { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
  .nav-links a[aria-current] { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
}

.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px 6px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s; }
.nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav { padding: 16px 24px; }
  .nav-toggle { display:flex; margin-left:auto; margin-right:8px; }
  .nav-links { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:#fff; border-bottom:1px solid var(--border); padding:8px 24px 16px; box-shadow:0 24px 40px -24px rgba(0,0,0,.18); transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform .18s, opacity .18s; }
  .nav.open .nav-links { transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links > a { padding:13px 0; font-size:15px; }
  .nav-links > a + a { border-top:1px solid var(--border); }
}

/* NAV RIGHT: lang + CTA grouped */
.nav-right { display: flex; align-items: center; gap: 10px; }
/* LANG SWITCHER */
.lang-switch { display: flex; align-items: center; gap: 0; font-size: 13px; }
.lang-btn {
  background: none; border: none; cursor: pointer; padding: 5px 7px;
  color: var(--text-mute); font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; border-radius: 4px; transition: color 0.15s; line-height: 1;
}
.lang-btn.active { color: var(--accent); }
.lang-btn:hover:not(.active) { color: var(--text); }
.lang-sep { color: var(--border); font-size: 13px; line-height: 1; }
/* mobile: lang + cta w menu */
.lang-switch--menu { display: none; }
.nav-cta--menu { display: none; }
@media (max-width: 980px) {
  .nav-right { gap: 6px; }
  .nav-right .lang-switch { display: none; }
  .lang-switch--menu {
    display: flex; align-items: center;
    padding: 13px 0; border-top: 1px solid var(--border);
  }
  .lang-switch--menu .lang-btn { font-size: 15px; padding: 4px 8px; }
  .lang-switch--menu .lang-sep { font-size: 15px; }
}
@media (max-width: 480px) {
  .nav-right .btn { display: none; }
  .nav-cta--menu {
    display: block;
    color: var(--accent); font-weight: 700; font-size: 15px;
  }
}

footer {
  padding: 48px 48px 36px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.foot-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.foot-col-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: 14px;
}
.foot-col a, .foot-col p {
  display: block;
  font-size: 13.5px; color: var(--text-mute);
  text-decoration: none; line-height: 1.7;
  padding: 3px 0;
}
.foot-col a:hover { color: var(--accent); }
.foot-brand p { font-size: 14px; line-height: 1.65; max-width: 320px; }
.foot-bottom {
  max-width: 1280px; margin: 0 auto;
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-size: 12.5px; color: var(--text-mute);
}
.foot-bottom b { color: var(--text); font-weight: 600; }
.foot-bottom a { color: inherit; text-decoration: none; }
.foot-bottom .foot-cookie {
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  color: inherit; cursor: pointer;
}
.foot-bottom .foot-cookie:hover { text-decoration: underline; }
.foot-logo { margin-bottom: 14px; }

@media (max-width: 980px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }

.sec {
  padding: 100px 48px;
  max-width: 1280px; margin: 0 auto;
}
.sec-alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sec-alt-inner { max-width: 1280px; margin: 0 auto; padding: 64px 48px; }
.section-eyebrow {
  font-size: 14.3px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.section-title {
  font-size: 38px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink); margin-bottom: 16px; line-height: 1.15;
}
.section-lead { font-size: 17px; color: var(--text-mute); max-width: 580px; margin-bottom: 56px; line-height: 1.6; }

@media (max-width: 980px) {
  .sec, .sec-alt-inner { padding: 64px 24px; }
}
@media (max-width: 560px) {
  .section-title { font-size: 28px; }
}

/*! Devices.css v0.2.0 | MIT License | github.com/picturepan2/devices.css */.device,.device *,.device ::after,.device ::before,.device::after,.device::before{box-sizing:border-box;display:block}.device{position:relative;transform:scale(1);z-index:1}.device .device-frame{z-index:1}.device .device-screen{background-color:#000;background-position:center center;background-size:cover;object-fit:cover;position:relative}.device-iphone-14-pro{height:868px;width:428px}.device-iphone-14-pro .device-frame{background:#010101;border:1px solid #1b1721;border-radius:68px;box-shadow:inset 0 0 4px 2px #c0b7cd,inset 0 0 0 6px #342c3f;height:868px;padding:19px;width:428px}.device-iphone-14-pro .device-screen{border-radius:49px;height:830px;width:390px}.device-iphone-14-pro .device-stripe::after,.device-iphone-14-pro .device-stripe::before{border:solid rgba(1,1,1,.25);border-width:0 7px;content:"";height:7px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-14-pro .device-stripe::after{top:85px}.device-iphone-14-pro .device-stripe::before{bottom:85px}.device-iphone-14-pro .device-header{background:#010101;border-radius:20px;height:35px;left:50%;margin-left:-60px;position:absolute;top:29px;width:120px}.device-iphone-14-pro .device-sensors::after,.device-iphone-14-pro .device-sensors::before{content:"";position:absolute}.device-iphone-14-pro .device-sensors::after{background:#010101;border-radius:17px;height:33px;left:50%;margin-left:-60px;top:30px;width:74px}.device-iphone-14-pro .device-sensors::before{background:radial-gradient(farthest-corner at 20% 20%,#6074bf 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,#513785 0,#24555e 20%,transparent 50%);border-radius:50%;box-shadow:0 0 1px 1px rgba(255,255,255,.05);height:9px;left:50%;margin-left:36px;top:42px;width:9px}.device-iphone-14-pro .device-btns{background:#1b1721;border-radius:2px;height:32px;left:-2px;position:absolute;top:115px;width:3px}.device-iphone-14-pro .device-btns::after,.device-iphone-14-pro .device-btns::before{background:#1b1721;border-radius:2px;content:"";height:62px;left:0;position:absolute;width:3px}.device-iphone-14-pro .device-btns::after{top:60px}.device-iphone-14-pro .device-btns::before{top:140px}.device-iphone-14-pro .device-power{background:#1b1721;border-radius:2px;height:100px;position:absolute;right:-2px;top:200px;width:3px}.device-iphone-14-pro .device-home::after,.device-iphone-14-pro .device-home::before{border:solid rgba(1,1,1,.25);border-width:6px 0;content:"";height:6px;position:absolute;width:6px;z-index:9}.device-iphone-14-pro .device-home::after{right:86px;top:0}.device-iphone-14-pro .device-home::before{bottom:0;left:86px}.device-iphone-14-pro.device-silver .device-frame{border-color:#c8cacb;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #e2e3e4}.device-iphone-14-pro.device-silver .device-btns{background:#c8cacb}.device-iphone-14-pro.device-silver .device-btns::after,.device-iphone-14-pro.device-silver .device-btns::before{background:#c8cacb}.device-iphone-14-pro.device-silver .device-power{background:#c8cacb}.device-iphone-14-pro.device-black .device-frame{border-color:#5c5956;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #76726f}.device-iphone-14-pro.device-black .device-btns{background:#5c5956}.device-iphone-14-pro.device-black .device-btns::after,.device-iphone-14-pro.device-black .device-btns::before{background:#5c5956}.device-iphone-14-pro.device-black .device-power{background:#5c5956}.device-iphone-14-pro.device-gold .device-frame{border-color:#e7d19e;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #d2ab4c}.device-iphone-14-pro.device-gold .device-btns{background:#e7d19e}.device-iphone-14-pro.device-gold .device-btns::after,.device-iphone-14-pro.device-gold .device-btns::before{background:#e7d19e}.device-iphone-14-pro.device-gold .device-power{background:#e7d19e}.device-iphone-14{height:868px;width:428px}.device-iphone-14 .device-frame{background:#010101;border:1px solid #101315;border-radius:68px;box-shadow:inset 0 0 4px 2px #b0b8c0,inset 0 0 0 6px #272c31;height:868px;padding:19px;width:428px}.device-iphone-14 .device-screen{border-radius:49px;height:830px;width:390px}.device-iphone-14 .device-stripe::after,.device-iphone-14 .device-stripe::before{border:solid rgba(1,1,1,.25);border-width:0 7px;content:"";height:7px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-14 .device-stripe::after{top:85px}.device-iphone-14 .device-stripe::before{bottom:85px}.device-iphone-14 .device-header{background:#010101;border-bottom-left-radius:20px;border-bottom-right-radius:20px;height:30px;left:50%;margin-left:-80px;position:absolute;top:20px;width:160px}.device-iphone-14 .device-header::after,.device-iphone-14 .device-header::before{content:"";height:10px;position:absolute;top:0;width:10px}.device-iphone-14 .device-header::after{background:radial-gradient(circle at bottom left,transparent 0,transparent 75%,#010101 75%,#010101 100%);left:-10px}.device-iphone-14 .device-header::before{background:radial-gradient(circle at bottom right,transparent 0,transparent 75%,#010101 75%,#010101 100%);right:-10px}.device-iphone-14 .device-sensors::after,.device-iphone-14 .device-sensors::before{content:"";position:absolute}.device-iphone-14 .device-sensors::after{background:#151515;border:1px solid #010101;border-radius:4px;box-shadow:0 0 4px #151515;height:7px;left:50%;margin-left:-35px;top:8px;width:70px}.device-iphone-14 .device-sensors::before{background:radial-gradient(farthest-corner at 20% 20%,#6074bf 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,#513785 0,#24555e 20%,transparent 50%);border-radius:50%;box-shadow:0 0 1px 1px rgba(255,255,255,.05);height:9px;left:50%;margin-left:-60px;top:26px;width:9px}.device-iphone-14 .device-btns{background:#101315;border-radius:2px;height:32px;left:-2px;position:absolute;top:115px;width:3px}.device-iphone-14 .device-btns::after,.device-iphone-14 .device-btns::before{background:#101315;border-radius:2px;content:"";height:62px;left:0;position:absolute;width:3px}.device-iphone-14 .device-btns::after{top:60px}.device-iphone-14 .device-btns::before{top:140px}.device-iphone-14 .device-power{background:#101315;border-radius:2px;height:100px;position:absolute;right:-2px;top:200px;width:3px}.device-iphone-14 .device-home::after,.device-iphone-14 .device-home::before{border:solid rgba(1,1,1,.25);border-width:6px 0;content:"";height:6px;position:absolute;width:6px;z-index:9}.device-iphone-14 .device-home::after{right:86px;top:0}.device-iphone-14 .device-home::before{bottom:0;left:86px}.device-iphone-14.device-purple .device-frame{border-color:#af9bbf;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #c8bad3}.device-iphone-14.device-purple .device-btns{background:#af9bbf}.device-iphone-14.device-purple .device-btns::after,.device-iphone-14.device-purple .device-btns::before{background:#af9bbf}.device-iphone-14.device-purple .device-power{background:#af9bbf}.device-iphone-14.device-starlight .device-frame{border-color:#bdb4aa;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #d3cdc7}.device-iphone-14.device-starlight .device-btns{background:#bdb4aa}.device-iphone-14.device-starlight .device-btns::after,.device-iphone-14.device-starlight .device-btns::before{background:#bdb4aa}.device-iphone-14.device-starlight .device-power{background:#bdb4aa}.device-iphone-14.device-red .device-frame{border-color:#d11813;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #ec302b}.device-iphone-14.device-red .device-btns{background:#d11813}.device-iphone-14.device-red .device-btns::after,.device-iphone-14.device-red .device-btns::before{background:#d11813}.device-iphone-14.device-red .device-power{background:#d11813}.device-iphone-14.device-blue .device-frame{border-color:#7992aa;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #98abbe}.device-iphone-14.device-blue .device-btns{background:#7992aa}.device-iphone-14.device-blue .device-btns::after,.device-iphone-14.device-blue .device-btns::before{background:#7992aa}.device-iphone-14.device-blue .device-power{background:#7992aa}.device-iphone-x{height:868px;width:428px}.device-iphone-x .device-frame{background:#222;border-radius:68px;box-shadow:inset 0 0 2px 2px #c8cacb,inset 0 0 0 7px #e2e3e4;height:868px;padding:28px;width:428px}.device-iphone-x .device-screen{border-radius:40px;height:812px;width:375px}.device-iphone-x .device-stripe::after,.device-iphone-x .device-stripe::before{border:solid rgba(1,1,1,.25);border-width:0 7px;content:"";height:7px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-x .device-stripe::after{top:85px}.device-iphone-x .device-stripe::before{bottom:85px}.device-iphone-x .device-header{background:#222;border-bottom-left-radius:20px;border-bottom-right-radius:20px;height:30px;left:50%;margin-left:-102px;position:absolute;top:28px;width:204px}.device-iphone-x .device-header::after,.device-iphone-x .device-header::before{content:"";height:10px;position:absolute;top:0;width:10px}.device-iphone-x .device-header::after{background:radial-gradient(circle at bottom left,transparent 0,transparent 75%,#222 75%,#222 100%);left:-10px}.device-iphone-x .device-header::before{background:radial-gradient(circle at bottom right,transparent 0,transparent 75%,#222 75%,#222 100%);right:-10px}.device-iphone-x .device-sensors::after,.device-iphone-x .device-sensors::before{content:"";position:absolute}.device-iphone-x .device-sensors::after{background:#333;border-radius:3px;height:6px;left:50%;margin-left:-25px;top:32px;width:50px}.device-iphone-x .device-sensors::before{background:radial-gradient(farthest-corner at 20% 20%,#6074bf 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,#513785 0,#24555e 20%,transparent 50%);border-radius:50%;box-shadow:0 0 1px 1px rgba(255,255,255,.05);height:10px;left:50%;margin-left:42px;top:30px;width:10px}.device-iphone-x .device-btns{background:#c8cacb;height:32px;left:-3px;position:absolute;top:115px;width:3px}.device-iphone-x .device-btns::after,.device-iphone-x .device-btns::before{background:#c8cacb;content:"";height:62px;left:0;position:absolute;width:3px}.device-iphone-x .device-btns::after{top:60px}.device-iphone-x .device-btns::before{top:140px}.device-iphone-x .device-power{background:#c8cacb;height:100px;position:absolute;right:-3px;top:200px;width:3px}.device-iphone-8{height:871px;width:419px}.device-iphone-8 .device-frame{background:#fff;border-radius:68px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 7px #e2e3e4;height:871px;padding:102px 22px;width:419px}.device-iphone-8 .device-screen{border:2px solid #222;border-radius:4px;height:667px;width:375px}.device-iphone-8 .device-stripe::after,.device-iphone-8 .device-stripe::before{border:solid rgba(51,51,51,.15);border-width:0 7px;content:"";height:6px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-8 .device-stripe::after{top:68px}.device-iphone-8 .device-stripe::before{bottom:68px}.device-iphone-8 .device-home{border:2px solid #c8cacb;border-radius:50%;bottom:25px;height:58px;left:50%;margin-left:-29px;position:absolute;width:58px}.device-iphone-8 .device-sensors{background:#666;border-radius:3px;height:6px;left:50%;margin-left:-38px;position:absolute;top:52px;width:76px}.device-iphone-8 .device-sensors::after,.device-iphone-8 .device-sensors::before{background:#666;border-radius:50%;content:"";position:absolute}.device-iphone-8 .device-sensors::after{height:10px;left:50%;margin-left:-5px;top:-25px;width:10px}.device-iphone-8 .device-sensors::before{height:12px;left:-42px;margin-top:-6px;top:50%;width:12px}.device-iphone-8 .device-btns{background:#c8cacb;height:30px;left:-3px;position:absolute;top:102px;width:3px}.device-iphone-8 .device-btns::after,.device-iphone-8 .device-btns::before{background:#c8cacb;content:"";height:56px;left:0;position:absolute;width:3px}.device-iphone-8 .device-btns::after{top:62px}.device-iphone-8 .device-btns::before{top:132px}.device-iphone-8 .device-power{background:#c8cacb;height:80px;position:absolute;right:-2px;top:160px;width:3px}.device-iphone-8.device-gold .device-frame{box-shadow:inset 0 0 0 2px #e4b08a,inset 0 0 0 7px #f7e8dd}.device-iphone-8.device-gold .device-home{border-color:#e4b08a}.device-iphone-8.device-gold .device-btns,.device-iphone-8.device-gold .device-btns::after,.device-iphone-8.device-gold .device-btns::before{background:#e4b08a}.device-iphone-8.device-gold .device-power{background:#e4b08a}.device-iphone-8.device-spacegray .device-frame{background:#222;box-shadow:inset 0 0 0 2px #74747a,inset 0 0 0 7px #9b9ba0}.device-iphone-8.device-spacegray .device-stripe::after,.device-iphone-8.device-spacegray .device-stripe::before{border-color:rgba(204,204,204,.35)}.device-iphone-8.device-spacegray .device-btns,.device-iphone-8.device-spacegray .device-btns::after,.device-iphone-8.device-spacegray .device-btns::before{background:#74747a}.device-the-iphone{height:610px;width:320px}.device-the-iphone .device-frame{background:#010101;border:1px solid #a9a9a9;border-radius:56px;box-shadow:inset 0 0 4px 3px #010101,inset 0 0 2px 13px #f5f5f5;height:610px;padding:100px 22px;width:320px}.device-the-iphone .device-frame::before{border:8px solid #010101;border-left-width:2px;border-radius:48px;border-right-width:2px;box-shadow:inset 0 0 8px 2px #010101;content:"";height:594px;left:2px;position:absolute;top:9px;width:316px}.device-the-iphone .device-frame::after{border:4px solid #dcdcdc;border-radius:38px;content:"";height:590px;left:13px;position:absolute;top:11px;width:294px}.device-the-iphone .device-screen{border:2px solid #272727;border-radius:4px;height:410px;width:276px}.device-the-iphone .device-sensors::before{background:linear-gradient(to bottom,#272727 50%,rgba(220,220,220,.25) 50%,#a9a9a9);border-radius:5px;content:"";height:10px;left:50%;margin-left:-28px;position:absolute;top:52px;width:56px}.device-the-iphone .device-sensors::after{background:#272727;border:1px solid #010101;border-radius:3px;content:"";height:6px;left:50%;margin-left:-26px;position:absolute;top:54px;width:52px}.device-the-iphone .device-btns{background:#696969;border-radius:2px 0 0 2px;height:30px;left:-2px;position:absolute;top:60px;width:2px}.device-the-iphone .device-btns::after,.device-the-iphone .device-btns::before{background:#696969;content:"";height:56px;left:0;position:absolute;width:2px}.device-the-iphone .device-btns::after{border-radius:2px 0 0 50%;top:50px}.device-the-iphone .device-btns::before{border-radius:50% 0 0 2px;top:131px}.device-the-iphone .device-home{background:radial-gradient(circle at top center,#010101 70%,rgba(220,220,220,.25) 70%,#a9a9a9);border:1px solid #292929;border-radius:50%;bottom:28px;height:56px;left:50%;margin-left:-28px;position:absolute;width:56px}.device-the-iphone .device-home::before{border:1px solid #dcdcdc;border-radius:4px;content:"";height:20px;left:17px;position:absolute;top:17px;width:20px}.device-the-iphone .device-power{background:#696969;border-radius:2px 2px 0 0;height:2px;position:absolute;right:52px;top:-2px;width:52px}.device-google-pixel-6-pro{height:862px;width:404px}.device-google-pixel-6-pro .device-frame{background:#121212;border-radius:28px;box-shadow:inset 0 0 12px #8d8d86,inset 0 7px 0 3px #fdfdfc,inset 0 -6px 0 3px #fdfdfc;height:862px;margin:0 2px;padding:20px 12px 26px 12px;width:400px}.device-google-pixel-6-pro .device-screen{border-radius:27px;height:816px;width:376px}.device-google-pixel-6-pro .device-header{background:linear-gradient(to bottom,#8d8d86 0,#cbcbc8 30%,#cbcbc8 100%);height:10px;left:50%;margin-left:-147px;position:absolute;top:0;width:294px}.device-google-pixel-6-pro .device-stripe::after{background:linear-gradient(to top,#121212,#666661);border-radius:50px 50px 0 0;bottom:0;content:"";height:2px;left:50%;margin-left:-22px;position:absolute;width:44px}.device-google-pixel-6-pro .device-stripe::before{background:#cbcbc8;bottom:0;content:"";height:9px;left:50%;margin-left:40px;position:absolute;width:11px}.device-google-pixel-6-pro .device-sensors{background:#121212;border-radius:50%;height:22px;left:50%;margin-left:-11px;margin-top:-11px;position:absolute;top:39px;width:22px}.device-google-pixel-6-pro .device-sensors::after,.device-google-pixel-6-pro .device-sensors::before{content:"";position:absolute}.device-google-pixel-6-pro .device-sensors::after{background:linear-gradient(to bottom,#121212,#666661);border-radius:0 0 50px 50px;height:4px;left:50%;margin-left:-103px;top:-18px;width:206px}.device-google-pixel-6-pro .device-sensors::before{background:radial-gradient(farthest-corner at 20% 20%,#6074bf 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,#513785 0,#24555e 20%,transparent 50%);border-radius:50%;box-shadow:0 0 1px 1px rgba(255,255,255,.05);height:8px;left:7px;top:7px;width:8px}.device-google-pixel-6-pro .device-btns{background:#b2b2ae;height:102px;position:absolute;right:0;top:306px;width:3px}.device-google-pixel-6-pro .device-power{background:#b2b2ae;height:58px;position:absolute;right:0;top:194px;width:3px}.device-google-pixel-6-pro.device-gold .device-frame{box-shadow:inset 0 0 12px #ff962e,inset 0 7px 0 3px #fff,inset 0 -6px 0 3px #fff}.device-google-pixel-6-pro.device-gold .device-header{background:linear-gradient(to bottom,#ff962e 0,#ffd6ad 30%,#ffd6ad 100%)}.device-google-pixel-6-pro.device-gold .device-stripe::after{background:linear-gradient(to top,#121212,#e07000)}.device-google-pixel-6-pro.device-gold .device-stripe::before{background:#ffd6ad}.device-google-pixel-6-pro.device-gold .device-btns{background:#ffbd7a}.device-google-pixel-6-pro.device-gold .device-power{background:#ffbd7a}.device-google-pixel-6-pro.device-black .device-frame{box-shadow:inset 0 0 12px #000,inset 0 7px 0 3px #646668,inset 0 -6px 0 3px #646668}.device-google-pixel-6-pro.device-black .device-header{background:linear-gradient(to bottom,#000 0,#323334 30%,#323334 100%)}.device-google-pixel-6-pro.device-black .device-stripe::after{background:linear-gradient(to top,#121212,#000)}.device-google-pixel-6-pro.device-black .device-stripe::before{background:#323334}.device-google-pixel-6-pro.device-black .device-btns{background:#191a1a}.device-google-pixel-6-pro.device-black .device-power{background:#191a1a}.device-google-pixel-2-xl{height:832px;width:404px}.device-google-pixel-2-xl .device-frame{background:#121212;border-radius:36px;box-shadow:inset 0 0 0 2px #cfcfcf,inset 0 0 0 7px #9c9c9c;height:832px;padding:56px 22px;width:404px}.device-google-pixel-2-xl .device-screen{border-radius:27px;height:720px;width:360px}.device-google-pixel-2-xl .device-header{height:832px;left:50%;margin-left:-150px;position:absolute;top:0;width:300px}.device-google-pixel-2-xl .device-header::after,.device-google-pixel-2-xl .device-header::before{background:#333;border-radius:3px;content:"";height:6px;left:50%;margin-left:-73px;margin-top:-3px;position:absolute;width:146px}.device-google-pixel-2-xl .device-header::after{top:24px}.device-google-pixel-2-xl .device-header::before{bottom:28px}.device-google-pixel-2-xl .device-sensors{background:#333;border-radius:7px;height:14px;left:54px;margin-top:-7px;position:absolute;top:36px;width:14px}.device-google-pixel-2-xl .device-btns{background:#cfcfcf;height:102px;position:absolute;right:-3px;top:306px;width:3px}.device-google-pixel-2-xl .device-power{background:#cfcfcf;height:58px;position:absolute;right:-3px;top:194px;width:3px}.device-google-pixel{height:744px;width:360px}.device-google-pixel .device-frame{background:#f7f7f8;border-radius:54px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 6px #e2e3e4,inset 0 0 0 10px #fff;height:744px;padding:82px 18px 86px 18px;width:360px}.device-google-pixel .device-screen{border:2px solid #222;border-radius:2px;height:576px;width:324px}.device-google-pixel .device-stripe{border-top:6px solid rgba(51,51,51,.15);bottom:0;left:254px;position:absolute;top:0;width:8px}.device-google-pixel .device-stripe::after,.device-google-pixel .device-stripe::before{border:solid rgba(51,51,51,.15);border-width:0 6px;content:"";height:10px;left:-254px;position:absolute;width:360px;z-index:9}.device-google-pixel .device-stripe::after{top:60px}.device-google-pixel .device-stripe::before{bottom:46px}.device-google-pixel .device-sensors{background:#ddd;border-radius:2.5px;height:5px;left:50%;margin-left:-39px;margin-top:-2.5px;position:absolute;top:41px;width:78px}.device-google-pixel .device-sensors::after,.device-google-pixel .device-sensors::before{background:#333;border-radius:6px;content:"";position:absolute}.device-google-pixel .device-sensors::after{height:12px;left:50%;margin-left:-14px;top:21.5px;width:28px}.device-google-pixel .device-sensors::before{height:10px;left:-81px;margin-top:-5px;top:50%;width:10px}.device-google-pixel .device-btns{background:#c8cacb;height:102px;position:absolute;right:-2px;top:298px;width:3px}.device-google-pixel .device-power{background:#c8cacb;height:50px;position:absolute;right:-2px;top:184px;width:3px}.device-google-pixel.device-black .device-frame{background:#211d1c;box-shadow:inset 0 0 0 2px #363635,inset 0 0 0 6px #6a6967,inset 0 0 0 10px #3d3533}.device-google-pixel.device-black .device-stripe,.device-google-pixel.device-black .device-stripe::after,.device-google-pixel.device-black .device-stripe::before{border-color:rgba(13,13,13,.35)}.device-google-pixel.device-black .device-sensors{background:#444}.device-google-pixel.device-black .device-sensors::after{background:#0d0d0d}.device-google-pixel.device-black .device-btns,.device-google-pixel.device-black .device-btns::after,.device-google-pixel.device-black .device-btns::before{background:#363635}.device-google-pixel.device-black .device-power{background:#363635}.device-google-pixel.device-blue .device-frame{box-shadow:inset 0 0 0 2px #2a5aff,inset 0 0 0 6px #7695ff,inset 0 0 0 10px #fff}.device-google-pixel.device-blue .device-btns,.device-google-pixel.device-blue .device-btns::after,.device-google-pixel.device-blue .device-btns::before{background:#2a5aff}.device-google-pixel.device-blue .device-power{background:#2a5aff}.device-galaxy-s8{height:828px;width:380px}.device-galaxy-s8 .device-frame{background:#222;border:solid #cfcfcf;border-radius:55px;border-width:5px 0;box-shadow:inset 0 0 0 2px #9c9c9c;height:828px;padding:48px 10px 40px 10px;width:380px}.device-galaxy-s8 .device-screen{border:2px solid #222;border-radius:34px;height:740px;width:360px}.device-galaxy-s8 .device-stripe::after,.device-galaxy-s8 .device-stripe::before{border:solid rgba(51,51,51,.15);border-width:5px 0;content:"";height:828px;position:absolute;top:0;width:6px;z-index:9}.device-galaxy-s8 .device-stripe::after{left:48px}.device-galaxy-s8 .device-stripe::before{right:48px}.device-galaxy-s8 .device-sensors{background:#666;border-radius:3px;height:6px;left:50%;margin-left:-24px;margin-top:-3px;position:absolute;top:32px;width:48px}.device-galaxy-s8 .device-sensors::after,.device-galaxy-s8 .device-sensors::before{background:#666;border-radius:50%;content:"";position:absolute;top:50%}.device-galaxy-s8 .device-sensors::after{box-shadow:-192px 0 #333,-174px 0 #333,-240px 0 #333;height:8px;margin-top:-4px;right:-90px;width:8px}.device-galaxy-s8 .device-sensors::before{box-shadow:186px 0 #666;height:12px;left:-90px;margin-top:-6px;width:12px}.device-galaxy-s8 .device-btns{background:#9c9c9c;border-radius:3px 0 0 3px;height:116px;left:-3px;position:absolute;top:144px;width:3px}.device-galaxy-s8 .device-btns::after{background:#9c9c9c;border-radius:3px 0 0 3px;content:"";height:54px;left:0;position:absolute;top:164px;width:3px}.device-galaxy-s8 .device-power{background:#9c9c9c;border-radius:0 3px 3px 0;height:54px;position:absolute;right:-3px;top:260px;width:3px}.device-galaxy-s8.device-blue .device-frame{border-color:#a3c5e8;box-shadow:inset 0 0 0 2px #5192d4}.device-galaxy-s8.device-blue .device-stripe::after,.device-galaxy-s8.device-blue .device-stripe::before{border-color:rgba(255,255,255,.35)}.device-galaxy-s8.device-blue .device-btns,.device-galaxy-s8.device-blue .device-btns::after{background:#5192d4}.device-galaxy-s8.device-blue .device-power{background:#5192d4}.device-macbook-pro{height:434px;width:740px}.device-macbook-pro .device-frame{background:#0d0d0d;border-radius:20px;box-shadow:inset 0 0 0 2px #c8cacb;height:418px;margin:0 auto;padding:9px 9px 23px 9px;position:relative;width:618px}.device-macbook-pro .device-frame::after{background:linear-gradient(to bottom,#272727,#0d0d0d);border-radius:0 0 20px 20px;bottom:2px;content:"";height:24px;left:2px;position:absolute;width:614px}.device-macbook-pro .device-header{background:#0d0d0d;border-bottom-left-radius:4px;border-bottom-right-radius:4px;height:12px;left:50%;margin-left:-32px;position:absolute;top:11px;width:64px;z-index:2}.device-macbook-pro .device-header::after,.device-macbook-pro .device-header::before{content:"";height:4px;position:absolute;top:0;width:4px}.device-macbook-pro .device-header::after{background:radial-gradient(circle at bottom left,transparent 0,transparent 75%,#0d0d0d 75%,#0d0d0d 100%);left:-4px}.device-macbook-pro .device-header::before{background:radial-gradient(circle at bottom right,transparent 0,transparent 75%,#0d0d0d 75%,#0d0d0d 100%);right:-4px}.device-macbook-pro .device-screen{border:2px solid #121212;border-radius:10px 10px 0 0;height:375px;width:600px}.device-macbook-pro .device-power{background:radial-gradient(circle at center,#e2e3e4 85%,#c8cacb 100%);border:solid #a0a3a7;border-radius:2px 2px 12px 12px;border-width:1px 2px 0 2px;box-shadow:inset 0 -2px 8px 0 #6c7074;height:24px;margin-top:-10px;position:relative;width:740px;z-index:9}.device-macbook-pro .device-power::after{background:#e2e3e4;border-radius:0 0 10px 10px;box-shadow:inset 0 0 4px 2px #babdbf;content:"";height:10px;left:50%;margin-left:-60px;position:absolute;top:0;width:120px}.device-macbook-pro .device-power::before{background:0 0;border-radius:0 0 3px 3px;bottom:-2px;box-shadow:-300px 0 #272727,300px 0 #272727;content:"";height:2px;left:50%;margin-left:-20px;position:absolute;width:40px}.device-macbook-pro.device-spacegray .device-frame{box-shadow:inset 0 0 0 2px #767a7d}.device-macbook-pro.device-spacegray .device-power{background:radial-gradient(circle at center,#83878a 85%,#767a7d 100%);border-color:#454749;box-shadow:inset 0 -2px 8px 0 #202121}.device-macbook-pro.device-spacegray .device-power::after{background:#b7babc;box-shadow:inset 0 0 4px 2px #6a6d70}.device-macbook-pro-2018{height:444px;width:740px}.device-macbook-pro-2018 .device-frame{background:#0d0d0d;border-radius:20px;box-shadow:inset 0 0 0 2px #c8cacb;height:428px;margin:0 auto;padding:29px 19px 39px 19px;position:relative;width:614px}.device-macbook-pro-2018 .device-frame::after{background:#272727;border-radius:0 0 20px 20px;bottom:2px;content:"";height:26px;left:2px;position:absolute;width:610px}.device-macbook-pro-2018 .device-frame::before{bottom:10px;color:#c8cacb;content:"MacBook Pro";font-size:12px;height:16px;left:50%;line-height:16px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:1}.device-macbook-pro-2018 .device-screen{border:2px solid #121212;border-radius:2px;height:360px;width:576px}.device-macbook-pro-2018 .device-power{background:#e2e3e4;border:solid #d5d6d8;border-radius:2px 2px 0 0;border-width:2px 4px 0 4px;height:14px;margin-top:-10px;position:relative;width:740px;z-index:9}.device-macbook-pro-2018 .device-power::after,.device-macbook-pro-2018 .device-power::before{content:"";position:absolute}.device-macbook-pro-2018 .device-power::after{background:#d5d6d8;border-radius:0 0 10px 10px;box-shadow:inset 0 0 4px 2px #babdbf;height:10px;left:50%;margin-left:-60px;top:-2px;width:120px}.device-macbook-pro-2018 .device-power::before{background:#a0a3a7;border-radius:0 0 180px 180px/0 0 12px 12px;box-shadow:inset 0 -2px 6px 0 #474a4d;height:12px;left:-4px;margin:0 auto;top:10px;width:740px}.device-macbook-pro-2018.device-spacegray .device-frame{box-shadow:inset 0 0 0 2px #767a7d}.device-macbook-pro-2018.device-spacegray .device-power{background:#909496;border-color:#767a7d}.device-macbook-pro-2018.device-spacegray .device-power::after{background:#83878a;box-shadow:inset 0 0 4px 2px #6a6d70}.device-macbook-pro-2018.device-spacegray .device-power::before{background:#515456;box-shadow:inset 0 -2px 6px 0 #000}.device-macbook{height:432px;width:740px}.device-macbook .device-frame{background:#0d0d0d;border-radius:20px;box-shadow:inset 0 0 0 2px #c8cacb;height:428px;margin:0 auto;padding:29px 19px 39px 19px;position:relative;width:614px}.device-macbook .device-frame::after{background:#272727;border-radius:0 0 20px 20px;bottom:2px;content:"";height:26px;left:2px;position:absolute;width:610px}.device-macbook .device-frame::before{bottom:10px;color:#c8cacb;content:"MacBook";font-size:12px;height:16px;left:50%;line-height:16px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:1}.device-macbook .device-screen{border:2px solid #121212;border-radius:2px;height:360px;width:576px}.device-macbook .device-power{background:#e2e3e4;border:solid #d5d6d8;border-radius:2px 2px 0 0;border-width:0 4px;height:4px;margin-top:-10px;position:relative;width:740px;z-index:9}.device-macbook .device-power::after,.device-macbook .device-power::before{content:"";position:absolute}.device-macbook .device-power::after{background:radial-gradient(circle at center,#e2e3e4 0,#e2e3e4 85%,#a0a3a7 100%);border:solid #adb0b3;border-width:0 2px;height:4px;left:50%;margin-left:-60px;width:120px}.device-macbook .device-power::before{background:#a0a3a7;border-radius:0 0 180px 180px/0 0 10px 10px;box-shadow:inset 0 -2px 6px 0 #474a4d;height:10px;left:-4px;margin:0 auto;top:4px;width:740px}.device-macbook.device-gold .device-frame{box-shadow:inset 0 0 0 2px #edccb4}.device-macbook.device-gold .device-power{background:#f7e8dd;border-color:#edccb4}.device-macbook.device-gold .device-power::after{background:radial-gradient(circle at center,#f7e8dd 0,#f7e8dd 85%,#dfa276 100%);border-color:#e4b08a}.device-macbook.device-gold .device-power::before{background:#edccb4;box-shadow:inset 0 -2px 6px 0 #83491f}.device-macbook.device-rosegold .device-frame{box-shadow:inset 0 0 0 2px #f6a69a}.device-macbook.device-rosegold .device-power{background:#facfc9;border-color:#f6a69a}.device-macbook.device-rosegold .device-power::after{background:radial-gradient(circle at center,#facfc9 0,#facfc9 85%,#ef6754 100%);border-color:#f6a69a}.device-macbook.device-rosegold .device-power::before{background:#f6a69a;box-shadow:inset 0 -2px 6px 0 #851b0c}.device-macbook.device-spacegray .device-frame{box-shadow:inset 0 0 0 2px #767a7d}.device-macbook.device-spacegray .device-power{background:#909496;border-color:#767a7d}.device-macbook.device-spacegray .device-power::after{background:radial-gradient(circle at center,#909496 0,#909496 85%,#515456 100%);border-color:#5d6163}.device-macbook.device-spacegray .device-power::before{background:#515456;box-shadow:inset 0 -2px 6px 0 #000}.device-imac{height:540px;width:640px}.device-imac .device-frame{background:#edeef0;border-radius:18px;box-shadow:inset 0 0 0 1px #d4d5d7;height:440px;padding:16px 16px 80px 16px;position:relative;width:640px}.device-imac .device-frame::after{background:#d4d5d7;border-radius:0 0 18px 18px;bottom:1px;box-shadow:inset 0 0 18px 0 #c7c8cb;content:"";height:63px;left:1px;position:absolute;width:638px}.device-imac .device-frame::before{background:#050505;border-radius:50%;content:"";height:6px;left:50%;margin-left:-3px;position:absolute;text-align:center;top:6px;width:6px;z-index:9}.device-imac .device-screen{border:2px solid #121212;border-radius:2px;height:342px;width:608px}.device-imac .device-power::after{background:radial-gradient(circle at center,#d4d5d7 85%,#9fa1a6 100%);border-top:1px solid #d4d5d7;content:"";height:6px;margin:0 auto;position:relative;width:152px}.device-imac .device-power::before{background:linear-gradient(to bottom,#9fa1a6 0,#c7c8cb 40%,#c7c8cb 85%,#fff 90%,#6b6e74 100%);content:"";height:92px;margin:0 auto;position:relative;width:152px}.device-imac .device-home{background:0 0;border-radius:0 0 3px 3px;bottom:0;box-shadow:-61px 0 #d4d5d7,61px 0 #d4d5d7;height:2px;left:50%;margin-left:-15px;position:absolute;width:30px}.device-imac.device-blue .device-frame{box-shadow:inset 0 0 0 2px #b4c7da}.device-imac.device-blue .device-frame::after{background:#b4c7da;box-shadow:inset 0 0 18px 0 #a3bad2}.device-imac.device-blue .device-power::after{background:radial-gradient(circle at center,#b4c7da 85%,#7094b8 100%);border-top-color:#b4c7da}.device-imac.device-blue .device-power::before{background:linear-gradient(to bottom,#7094b8 0,#a3bad2 40%,#a3bad2 85%,#fff 90%,#406182 100%)}.device-imac.device-blue .device-home{box-shadow:-61px 0 #b4c7da,61px 0 #b4c7da}.device-imac.device-green .device-frame{box-shadow:inset 0 0 0 2px #bbd0c8}.device-imac.device-green .device-frame::after{background:#bbd0c8;box-shadow:inset 0 0 18px 0 #acc6bc}.device-imac.device-green .device-power::after{background:radial-gradient(circle at center,#bbd0c8 85%,#7fa697 100%);border-top-color:#bbd0c8}.device-imac.device-green .device-power::before{background:linear-gradient(to bottom,#7fa697 0,#acc6bc 40%,#acc6bc 85%,#fff 90%,#4e7164 100%)}.device-imac.device-green .device-home{box-shadow:-61px 0 #bbd0c8,61px 0 #bbd0c8}.device-imac.device-pink .device-frame{box-shadow:inset 0 0 0 2px #edccc6}.device-imac.device-pink .device-frame::after{background:#edccc6;box-shadow:inset 0 0 18px 0 #e7bbb3}.device-imac.device-pink .device-power::after{background:radial-gradient(circle at center,#edccc6 85%,#d58778 100%);border-top-color:#edccc6}.device-imac.device-pink .device-power::before{background:linear-gradient(to bottom,#d58778 0,#e7bbb3 40%,#e7bbb3 85%,#fff 90%,#b04a37 100%)}.device-imac.device-pink .device-home{box-shadow:-61px 0 #edccc6,61px 0 #edccc6}.device-imac.device-yellow .device-frame{box-shadow:inset 0 0 0 2px #f4d595}.device-imac.device-yellow .device-frame::after{background:#f4d595;box-shadow:inset 0 0 18px 0 #f2cc7e}.device-imac.device-yellow .device-power::after{background:radial-gradient(circle at center,#f4d595 85%,#eab039 100%);border-top-color:#f4d595}.device-imac.device-yellow .device-power::before{background:linear-gradient(to bottom,#eab039 0,#f2cc7e 40%,#f2cc7e 85%,#fff 90%,#ab7912 100%)}.device-imac.device-yellow .device-home{box-shadow:-61px 0 #f4d595,61px 0 #f4d595}.device-imac.device-orange .device-frame{box-shadow:inset 0 0 0 2px #e9b5a0}.device-imac.device-orange .device-frame::after{background:#e9b5a0;box-shadow:inset 0 0 18px 0 #e4a58b}.device-imac.device-orange .device-power::after{background:radial-gradient(circle at center,#e9b5a0 85%,#d6744d 100%);border-top-color:#e9b5a0}.device-imac.device-orange .device-power::before{background:linear-gradient(to bottom,#d6744d 0,#e4a58b 40%,#e4a58b 85%,#fff 90%,#994524 100%)}.device-imac.device-orange .device-home{box-shadow:-61px 0 #e9b5a0,61px 0 #e9b5a0}.device-imac.device-purple .device-frame{box-shadow:inset 0 0 0 2px #c4c4e5}.device-imac.device-purple .device-frame::after{background:#c4c4e5;box-shadow:inset 0 0 18px 0 #b2b2dd}.device-imac.device-purple .device-power::after{background:radial-gradient(circle at center,#c4c4e5 85%,#7d7dc6 100%);border-top-color:#c4c4e5}.device-imac.device-purple .device-power::before{background:linear-gradient(to bottom,#7d7dc6 0,#b2b2dd 40%,#b2b2dd 85%,#fff 90%,#449 100%)}.device-imac.device-purple .device-home{box-shadow:-61px 0 #c4c4e5,61px 0 #c4c4e5}.device-imac-pro{height:484px;width:624px}.device-imac-pro .device-frame{background:#0d0d0d;border-radius:18px;box-shadow:inset 0 0 0 2px #080808;height:428px;padding:24px 24px 80px 24px;position:relative;width:624px}.device-imac-pro .device-frame::after{background:#2f2e33;border-radius:0 0 18px 18px;bottom:2px;content:"";height:54px;left:2px;position:absolute;width:620px}.device-imac-pro .device-frame::before{bottom:15px;color:#0d0d0d;content:"";font-size:24px;height:24px;left:50%;line-height:24px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:9}.device-imac-pro .device-screen{border:2px solid #121212;border-radius:2px;height:324px;width:576px}.device-imac-pro .device-power::after,.device-imac-pro .device-power::before{content:""}.device-imac-pro .device-power::after{background:#222225;border-radius:2px;height:6px;margin:0 auto;position:relative;width:180px}.device-imac-pro .device-power::before{border:solid transparent;border-bottom-color:#333;border-width:0 8px 50px 8px;height:50px;margin:0 auto;position:relative;width:130px}.device-surface-book{height:424px;width:728px}.device-surface-book .device-frame{background:#0d0d0d;border-radius:12px;box-shadow:inset 0 0 0 2px #c8c8c8;height:408px;margin:0 auto;padding:24px 22px;position:relative;width:584px}.device-surface-book .device-screen{border:2px solid #121212;border-radius:2px;height:360px;width:540px}.device-surface-book .device-btns::after,.device-surface-book .device-btns::before{background:#c8c8c8;content:"";height:2px;position:absolute;top:-2px}.device-surface-book .device-btns::after{left:122px;width:20px}.device-surface-book .device-btns::before{left:168px;width:44px}.device-surface-book .device-power{background:linear-gradient(to bottom,#eee,#c8c8c8);border:solid #c8c8c8;border-radius:2px;border-width:0 2px;height:16px;margin-top:4px;position:relative;width:728px}.device-surface-book .device-power::after,.device-surface-book .device-power::before{content:"";position:absolute}.device-surface-book .device-power::after{background:radial-gradient(circle at center,#eee 0,#eee 95%,#a2a2a2 100%);border-radius:0 0 6px 6px;height:8px;left:50%;margin-left:-125px;top:0;width:250px;z-index:1}.device-surface-book .device-power::before{background:linear-gradient(to bottom,#eee,#c8c8c8);border-radius:2px 2px 0 0;bottom:16px;height:8px;left:50%;margin-left:-292px;width:584px}.device-surface-studio{height:506px;width:640px}.device-surface-studio .device-frame{background:#0d0d0d;border-radius:10px;box-shadow:inset 0 0 0 2px #000;height:440px;padding:20px;width:640px}.device-surface-studio .device-screen{border:2px solid #121212;border-radius:2px;height:400px;width:600px}.device-surface-studio .device-stripe{background:#444;border-radius:0 0 2px 2px;bottom:0;height:4px;left:50%;margin-left:-117px;position:absolute;width:234px}.device-surface-studio .device-stripe::after,.device-surface-studio .device-stripe::before{content:"";left:50%;position:absolute;top:-75px}.device-surface-studio .device-stripe::after{border:1px solid #e2e3e4;border-radius:0 0 18px 18px;border-top:0;box-shadow:inset 0 0 4px 1px #c8cacb,inset 0 0 4px 2px #e2e3e4,inset 0 0 0 8px #c8cacb;height:60px;margin-left:-140px;width:280px;z-index:-1}.device-surface-studio .device-stripe::before{border:15px solid #e2e3e4;border-radius:0 0 8px 8px;border-top:0;height:70px;margin-left:-150px;width:300px;z-index:-2}.device-surface-studio .device-power{background:radial-gradient(circle at center,#e2e3e4 85%,#c8cacb 100%);border-radius:0 0 2px 2px;height:32px;margin:30px auto 0 auto;position:relative;width:250px}.device-surface-studio .device-power::after{background:#babdbf;content:"";height:1px;left:0;position:absolute;top:4px;width:250px}.device-ipad-pro{height:778px;width:560px}.device-ipad-pro .device-frame{background:#0d0d0d;border-radius:36px;box-shadow:inset 0 0 0 1px #babdbf,inset 0 0 1px 3px #e2e3e4;height:778px;padding:27px;width:560px}.device-ipad-pro .device-screen{border:2px solid #121212;border-radius:11px;height:724px;width:506px}.device-ipad-pro .device-btns::after,.device-ipad-pro .device-btns::before{background:#babdbf;content:"";position:absolute}.device-ipad-pro .device-btns::after{height:2px;right:40px;top:-2px;width:36px}.device-ipad-pro .device-btns::before{box-shadow:0 37px #babdbf;height:32px;right:-2px;top:63px;width:2px}.device-ipad-pro .device-sensors::after,.device-ipad-pro .device-sensors::before{content:"";position:absolute}.device-ipad-pro .device-sensors::after{background:#1a1a1a;border-radius:17px;box-shadow:-20px 0 #1a1a1a,70px 0 #1a1a1a;height:10px;left:50%;margin-left:-30px;top:12px;width:10px}.device-ipad-pro .device-sensors::before{background:radial-gradient(farthest-corner at 20% 20%,#6074bf 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,#513785 0,#24555e 20%,transparent 50%);border-radius:50%;box-shadow:0 0 1px 1px rgba(255,255,255,.05);height:6px;left:50%;margin-left:-3px;top:14px;width:6px}.device-ipad-pro.device-spacegray .device-frame{box-shadow:inset 0 0 0 1px #6a6d70,inset 0 0 1px 3px #83878a}.device-ipad-pro.device-spacegray .device-btns::after,.device-ipad-pro.device-spacegray .device-btns::before{background:#6a6d70}.device-ipad-pro.device-spacegray .device-btns::before{box-shadow:0 37px #6a6d70}.device-ipad-pro-2017{height:804px;width:560px}.device-ipad-pro-2017 .device-frame{background:#fff;border-radius:38px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 6px #e2e3e4;height:804px;padding:62px 25px;width:560px}.device-ipad-pro-2017 .device-screen{border:2px solid #222;border-radius:2px;height:680px;width:510px}.device-ipad-pro-2017 .device-home{border:2px solid #c8cacb;border-radius:50%;bottom:17px;height:34px;left:50%;margin-left:-17px;position:absolute;width:34px}.device-ipad-pro-2017 .device-sensors{background:#666;border-radius:50%;height:10px;left:50%;margin-left:-5px;margin-top:-5px;position:absolute;top:34px;width:10px}.device-ipad-pro-2017.device-gold .device-frame{box-shadow:inset 0 0 0 2px #e4b08a,inset 0 0 0 6px #f7e8dd}.device-ipad-pro-2017.device-gold .device-header{border-color:#e4b08a}.device-ipad-pro-2017.device-rosegold .device-frame{box-shadow:inset 0 0 0 2px #f6a69a,inset 0 0 0 6px #facfc9}.device-ipad-pro-2017.device-rosegold .device-home{border-color:#f6a69a}.device-ipad-pro-2017.device-spacegray .device-frame{background:#222;box-shadow:inset 0 0 0 2px #818187,inset 0 0 0 6px #9b9ba0}.device-ipad-pro-2017.device-spacegray .device-home{border-color:#818187}.device-surface-pro-2017{height:394px;width:561px}.device-surface-pro-2017 .device-frame{background:#0d0d0d;border-radius:10px;box-shadow:inset 0 0 0 2px #c8c8c8;height:394px;margin:0 auto;padding:26px 24px;width:561px}.device-surface-pro-2017 .device-screen{border:2px solid #121212;border-radius:2px;height:342px;width:513px}.device-surface-pro-2017 .device-btns::after,.device-surface-pro-2017 .device-btns::before{background:#c8c8c8;content:"";height:2px;position:absolute;top:-2px}.device-surface-pro-2017 .device-btns::after{left:48px;width:26px}.device-surface-pro-2017 .device-btns::before{left:94px;width:48px}.device-surface-pro-2017 .device-sensors{background:#333;border-radius:50%;height:6px;left:50%;margin-left:-3px;margin-top:-3px;position:absolute;top:14px;width:6px}.device-apple-watch-ultra{height:380px;width:360px}.device-apple-watch-ultra .device-frame{background:#0d0d0d;border-radius:92px;box-shadow:inset 0 0 12px 1px rgba(13,13,13,.75),inset 0 0 0 6px #d6ccc2,inset 0 0 0 12px #d6ccc2;height:380px;margin:0 20px;padding:38px;position:relative;width:320px}.device-apple-watch-ultra .device-frame::before{border:1px solid #f5f2f0;border-radius:80px;box-shadow:0 0 6px rgba(13,13,13,.2),inset 0 0 4px 1px #f5f2f0,inset 0 0 0 10px #d6ccc2;content:"";height:356px;left:12px;position:absolute;top:12px;width:296px}.device-apple-watch-ultra .device-screen{border:2px solid #121212;border-radius:62px;height:304px;width:244px}.device-apple-watch-ultra .device-header{background:radial-gradient(circle at center,#d6ccc2 50%,#ebe6e1 85%,#a38c76 100%);border-radius:4px 4px 4px 4px/8px 4px 4px 8px;box-shadow:inset 0 0 16px 1px rgba(13,13,13,.5),-8px 0 4px rgba(13,13,13,.2),inset 4px 0 4px rgba(13,13,13,.2);height:214px;margin-top:-107px;position:absolute;right:4px;top:50%;width:18px;z-index:1}.device-apple-watch-ultra .device-header::before{border-radius:8px 4px 4px 8px/32px 4px 4px 32px;box-shadow:-10px 0 8px rgba(13,13,13,.2);content:"";height:194px;margin-top:-97px;position:absolute;right:8px;top:50%;width:12px}.device-apple-watch-ultra .device-btns{background:#d6ccc2;border-left:1px solid #4c4033;border-radius:8px 6px 6px 8px/20px 6px 6px 20px;box-shadow:inset 8px 0 8px 0 #5c4d3e,inset -2px 0 6px #a38c76;height:72px;position:absolute;right:1px;top:108px;width:24px;z-index:9}.device-apple-watch-ultra .device-btns::after{background:#d6ccc2;border-radius:2px 4px 4px 2px/20px 8px 8px 20px;box-shadow:inset -2px 0 2px 0 #6b5948,inset -6px 0 18px #a38c76;content:"";height:78px;position:absolute;right:0;top:-4px;width:6px}.device-apple-watch-ultra .device-btns::before{background:#d6ccc2;border-radius:20%;box-shadow:0 -30px rgba(163,140,118,.5),0 -27px #d6ccc2,0 -25px #89735c,0 -21px rgba(163,140,118,.5),0 -18px #d6ccc2,0 -16px #89735c,0 -12px rgba(163,140,118,.5),0 -9px #d6ccc2,0 -7px #89735c,0 -3px rgba(163,140,118,.5),0 0 #d6ccc2,0 2px #89735c,0 6px rgba(163,140,118,.5),0 9px #d6ccc2,0 11px #89735c,0 15px rgba(163,140,118,.5),0 18px #d6ccc2,0 20px #89735c,0 24px rgba(163,140,118,.5),0 27px #d6ccc2,0 29px #89735c;content:"";height:3px;margin-top:-2px;position:absolute;right:2px;top:50%;width:16px;z-index:9}.device-apple-watch-ultra .device-stripe{background:#e0d9d1;border-radius:2px 8px 8px 2px;box-shadow:0 14px 0 #d6ccc2,0 28px 0 #d6ccc2;height:10px;left:19px;position:absolute;top:98px;width:4px;z-index:1}.device-apple-watch-ultra .device-power{background:#d6ccc2;border-radius:2px 4px 4px 2px/2px 8px 8px 2px;box-shadow:inset 0 0 2px 1px #a38c76;height:72px;position:absolute;right:1px;top:212px;width:4px}.device-apple-watch-ultra .device-home{background:#f18f42;border:1px solid #a7500c;border-radius:2px 4px 4px 2px/2px 8px 8px 2px;box-shadow:inset 0 0 1px 1px #ef812a;height:106px;left:19px;position:absolute;top:162px;width:4px;z-index:1}.device-apple-watch-s8{height:380px;width:360px}.device-apple-watch-s8 .device-frame{background:#0d0d0d;border-radius:92px;box-shadow:inset 0 0 24px 1px #0d0d0d,inset 0 0 0 12px #606c78;height:380px;margin:0 20px;padding:28px 26px;position:relative;width:320px}.device-apple-watch-s8 .device-frame::before{border:1px solid #0d0d0d;border-radius:80px;box-shadow:0 0 12px rgba(255,255,255,.5),inset 0 0 12px 2px rgba(255,255,255,.75);content:"";height:356px;left:12px;position:absolute;top:12px;width:298px}.device-apple-watch-s8 .device-screen{border:2px solid #121212;border-radius:62px;height:324px;width:268px}.device-apple-watch-s8 .device-btns{background:#606c78;border-left:1px solid #000;border-radius:8px 6px 6px 8px/20px 6px 6px 20px;box-shadow:inset 8px 0 8px 0 #1c1f23,inset -2px 0 6px #272c31,-4px 0 8px rgba(13,13,13,.25);height:72px;position:absolute;right:10px;top:108px;width:18px;z-index:9}.device-apple-watch-s8 .device-btns::after{background:#272c31;border-radius:2px 4px 4px 2px/20px 8px 8px 20px;box-shadow:inset -2px 0 2px 0 #000,inset -6px 0 18px #272c31;content:"";height:72px;position:absolute;right:0;top:0;width:6px}.device-apple-watch-s8 .device-btns::before{background:#272c31;border-radius:20%;box-shadow:0 -30px rgba(62,70,77,.75),0 -27px #272c31,0 -25px #000,0 -21px rgba(62,70,77,.75),0 -18px #272c31,0 -16px #000,0 -12px rgba(62,70,77,.75),0 -9px #272c31,0 -7px #000,0 -3px rgba(62,70,77,.75),0 0 #272c31,0 2px #000,0 6px rgba(62,70,77,.75),0 9px #272c31,0 11px #000,0 15px rgba(62,70,77,.75),0 18px #272c31,0 20px #000,0 24px rgba(62,70,77,.75),0 27px #272c31,0 29px #000;content:"";height:3px;margin-top:-2px;position:absolute;right:2px;top:50%;width:10px;z-index:9}.device-apple-watch-s8 .device-power{background:#272c31;border-radius:2px 4px 4px 2px/2px 8px 8px 2px;box-shadow:inset 0 0 2px 1px #101315;height:72px;position:absolute;right:18px;top:212px;width:4px}.device-homepod{height:395px;width:320px}.device-homepod .device-frame{background:linear-gradient(to right,#36373a 0,#8d8f95 25%,#1d1e20 60%,#111112 90%,#1d1e20 100%);border-radius:80px;box-shadow:inset 0 0 0 2px #36373a,inset 0 0 40px 1px #1d1e20,inset 0 12px 40px 1px #fff,inset 0 -24px 40px 1px #000;height:385px;margin:5px auto;overflow:hidden;position:relative;width:320px}.device-homepod .device-stripe{background:repeating-linear-gradient(45deg,rgba(141,143,149,.35) 0,rgba(141,143,149,.35) 2px,transparent 2px,transparent 6px),repeating-linear-gradient(135deg,rgba(141,143,149,.35) 0,rgba(141,143,149,.35) 2px,transparent 2px,transparent 6px),repeating-linear-gradient(45deg,transparent 0,transparent 2px,rgba(29,30,32,.35) 2px,rgba(29,30,32,.35) 4px,transparent 4px,transparent 6px),repeating-linear-gradient(135deg,transparent 0,transparent 2px,rgba(29,30,32,.35) 2px,rgba(29,30,32,.35) 4px,transparent 4px,transparent 6px);border-radius:80px;box-shadow:inset 0 0 0 2px #36373a,inset 0 0 40px 1px #1d1e20,inset 0 12px 24px 1px #9b9ca1,inset 0 -12px 24px 1px #050505;height:385px;left:0;overflow:hidden;position:absolute;top:5px;width:320px;z-index:9}.device-homepod .device-stripe::before{top:0;transform:translateY(-34%) perspective(500px) rotateX(51deg)}.device-homepod .device-stripe::after{bottom:0;transform:translateY(34%) perspective(500px) rotateX(-51deg)}.device-homepod .device-home::after,.device-homepod .device-home::before{background:#36373a;content:"";left:50%;position:absolute}.device-homepod .device-home::before{border-radius:50% 50% 8px 8px;height:10px;margin-left:-85px;top:0;width:170px}.device-homepod .device-home::after{border-radius:0 0 10% 10%/0 0 8px 8px;bottom:0;box-shadow:inset 0 0 4px 0 #111112;height:5px;margin-left:-85px;width:170px}.device-pro-display-xdr{height:475px;width:640px}.device-pro-display-xdr .device-frame{background:#151515;border-radius:4px;box-shadow:inset 0 0 2px #d4d5d7;height:368px;padding:8px;position:relative;width:640px}.device-pro-display-xdr .device-frame::before{background:#050505;border-radius:50%;content:"";height:6px;left:50%;margin-left:-3px;position:absolute;text-align:center;top:6px;width:6px;z-index:9}.device-pro-display-xdr .device-screen{border:2px solid #121212;border-radius:2px;height:352px;width:624px}.device-pro-display-xdr .device-power::after{background:radial-gradient(circle at center,#d4d5d7 85%,#9fa1a6 100%);border-top:1px solid #d4d5d7;content:"";height:6px;margin:0 auto;position:relative;width:152px}.device-pro-display-xdr .device-power::before{background:linear-gradient(to bottom,#9fa1a6 0,#c7c8cb 40%,#c7c8cb 85%,#fff 90%,#6b6e74 100%);content:"";height:102px;margin:0 auto;position:relative;width:152px}.device-pro-display-xdr .device-home{background:0 0;border-radius:0 0 3px 3px;bottom:-2px;box-shadow:-61px 0 #6b6e74,61px 0 #6b6e74;height:1px;left:50%;margin-left:-15px;position:absolute;width:30px}
.hero {
  padding: 80px 48px 100px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
  align-items: center;
  max-width: 1280px; margin: 0 auto;
}
.hero h1 {
  font-size: 56px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05;
  color: var(--ink); margin-bottom: 24px;
}
.hero h1 em { color: var(--accent); font-style: normal; font-weight: 800; position: relative; }
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 6px; background: var(--accent-soft); z-index: -1; border-radius: 2px;
}
.hero .lead { font-size: 18px; color: var(--text-mute); line-height: 1.65; max-width: 560px; margin-bottom: 36px; }
.hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-cta .meta { font-size: 13px; color: var(--text-mute); margin-left: 12px; font-weight: 600; }

/* IDE MOCK */
.ide {
  background: #0d1117;
  border: 1px solid #1c2128;
  border-radius: 12px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.6;
}
.ide-bar {
  background: #161b22;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #1c2128;
}
.ide-dots { display: flex; gap: 6px; }
.ide-dots span { width: 11px; height: 11px; border-radius: 50%; background: #30363d; }
.ide-dots span:first-child { background: #ff5f57; }
.ide-dots span:nth-child(2) { background: #febc2e; }
.ide-dots span:nth-child(3) { background: #28c841; }
.ide-path {
  font-size: 11px; color: #8b949e;
  font-family: 'JetBrains Mono', monospace;
  margin-left: 8px;
}
.ide-tabs {
  display: flex;
  background: #0d1117;
  border-bottom: 1px solid #1c2128;
}
.ide-tab {
  padding: 8px 16px;
  font-size: 11px; color: #8b949e;
  border-right: 1px solid #1c2128;
  display: flex; align-items: center; gap: 6px;
}
.ide-tab.active { background: #161b22; color: #e6edf3; }
.ide-tab .ic { font-size: 10px; color: var(--accent-on-dark); }
.ide-split {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 380px;
}
.ide-pane {
  padding: 16px 18px;
  overflow: hidden;
}
.ide-pane:first-child { border-right: 1px solid #1c2128; }
.ide-pane pre {
  margin: 0;
  color: #e6edf3;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
}
.ide-pane .ln {
  display: inline-block; width: 22px;
  color: #484f58; text-align: right;
  margin-right: 12px; user-select: none;
}
.tk-key { color: #ff7b72; }
.tk-str { color: #a5d6ff; }
.tk-fn  { color: #d2a8ff; }
.tk-cls { color: #ffa657; }
.tk-com { color: #8b949e; font-style: italic; }
.tk-var { color: #79c0ff; }
.tk-attr{ color: #7ee787; }
.tk-num { color: #79c0ff; }

/* DASHBOARD (hero) */
.dash {
  background: #0d1117;
  border: 1px solid #1c2128;
  border-radius: 12px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}
.dash-bar {
  background: #161b22;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #1c2128;
}
.dash-title { font-size: 11px; color: #8b949e; font-family: 'JetBrains Mono', monospace; }
.dash-live {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #7ee787;
}
.dash-pulse { width: 7px; height: 7px; border-radius: 50%; background: #7ee787; box-shadow: 0 0 0 0 rgba(126,231,135,0.5); animation: dashPulse 2.4s infinite; }
@keyframes dashPulse { 0%{box-shadow:0 0 0 0 rgba(126,231,135,0.5);} 70%{box-shadow:0 0 0 6px rgba(126,231,135,0);} 100%{box-shadow:0 0 0 0 rgba(126,231,135,0);} }
.dash-body { padding: 20px 18px; }
.dash-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
.dash-stat { background: #161b22; border: 1px solid #21262d; border-radius: 8px; padding: 14px 14px 12px; }
.dash-k { font-size: 9.5px; color: #8b949e; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 9px; }
.dash-v { font-size: 23px; font-weight: 800; color: #e6edf3; letter-spacing: -0.02em; line-height: 1; }
.dash-u { font-size: 12px; font-weight: 500; color: #8b949e; margin-left: 2px; }
.dash-trend { font-size: 10.5px; color: #8b949e; margin-top: 9px; font-weight: 600; }
.dash-trend.up { color: #7ee787; }
.dash-chart { background: #161b22; border: 1px solid #21262d; border-radius: 8px; padding: 16px; }
.dash-chart-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #8b949e; margin-bottom: 16px; }
.dash-chart-tag { color: #7ee787; font-weight: 600; }
.dash-bars { display: flex; align-items: flex-end; gap: 9px; height: 84px; }
.dash-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.dash-col > span { width: 100%; background: linear-gradient(180deg, #353f73 0%, #2a3160 100%); border-radius: 3px 3px 0 0; display: block; }
.dash-col > span.now { background: linear-gradient(180deg, #8fa1ff 0%, #4f46e5 100%); }
.dash-col i { font-size: 9px; color: #6e7681; font-style: normal; }
.dash-foot { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #8b949e; }
.dash-foot b { color: #c9d1d9; font-weight: 600; }
.dash-dot-ok { width: 7px; height: 7px; border-radius: 50%; background: #7ee787; flex-shrink: 0; }

/* HERO VISUAL */
.heroviz-multi { position:relative; min-height:400px; }
.hv-glow { position:absolute; inset:-20px -10px 0 -10px; background:radial-gradient(120% 95% at 70% 34%, rgba(79,70,229,.16), rgba(79,70,229,.05) 46%, transparent 72%); z-index:0; border-radius:24px; }
.device.hv-mac { position:absolute; top:6px; left:-18px; transform:scale(.68); transform-origin:top left; z-index:1; }
.device.hv-ipad { position:absolute; right:120px; bottom:-30px; transform:scale(.22); transform-origin:bottom right; z-index:2; }
.device.hv-ip { position:absolute; right:-12px; bottom:-46px; transform:scale(.38); transform-origin:bottom right; z-index:3; }
.device.hv-mac .device-screen, .device.hv-ip .device-screen { overflow:hidden; }
.device.hv-mac .device-frame::before { content:""; }
.hv-app { width:100%; height:100%; display:grid; grid-template-columns:64px 1fr; background:#f6f7fb; }
.hv-side { background:var(--ink); padding:18px 0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hv-logo { width:28px; height:28px; background:var(--accent); color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; margin-bottom:6px; }
.hv-nav-item { width:26px; height:8px; border-radius:3px; background:#2a3344; }
.hv-nav-item.active { background:var(--accent-on-dark); }
.hv-main { padding:20px 22px; }
.hv-apphead { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.hv-tabs { display:flex; gap:6px; }
.hv-tabs span { font-size:10px; font-weight:600; color:var(--text-mute); background:#fff; border:1px solid var(--border); border-radius:100px; padding:4px 11px; }
.hv-tabs span.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.hv-cards { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.hv-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 15px; }
.hv-card-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; }
.hv-card-h span { font-size:12px; font-weight:700; color:var(--ink); }
.hv-chip { font-size:9px; font-weight:700; color:#1a9d54; background:rgba(26,157,84,.12); padding:3px 7px; border-radius:100px; }
.hv-card-b { display:flex; align-items:center; gap:13px; }
.hv-donut { width:58px; height:58px; border-radius:50%; flex-shrink:0; background:conic-gradient(var(--c) 0 calc(var(--p)*1%), #e9edf3 0); position:relative; display:flex; align-items:center; justify-content:center; }
.hv-donut::after { content:""; position:absolute; inset:14px; background:#fff; border-radius:50%; }
.hv-donut em { position:relative; z-index:1; font-style:normal; font-size:11px; font-weight:800; color:var(--ink); }
.hv-legend { display:flex; flex-direction:column; gap:7px; flex:1; }
.hv-legend i { display:block; height:7px; border-radius:3px; }
.hv-legend i:nth-child(1){ width:100%; } .hv-legend i:nth-child(2){ width:76%; } .hv-legend i:nth-child(3){ width:54%; } .hv-legend i:nth-child(4){ width:36%; }
.hv-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.hv-title { font-size:17px; font-weight:800; color:var(--ink); }
.hv-pill { font-size:11px; font-weight:600; color:#fff; background:var(--accent); padding:5px 12px; border-radius:100px; }
.hv-row { display:flex; justify-content:space-between; align-items:center; padding:10px 13px; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; }
.hv-c1 { font-size:12.5px; font-weight:600; color:var(--text); }
.hv-badge { font-size:10px; font-weight:700; padding:3px 9px; border-radius:100px; letter-spacing:.02em; white-space:nowrap; }
.hv-badge.ok { background:rgba(26,157,84,.12); color:#1a9d54; }
.hv-badge.warn { background:rgba(176,125,16,.14); color:#7a5500; }
.hv-badge.new { background:var(--accent-lt); color:var(--accent-dk); }
.hv-phone-ui { width:100%; height:100%; background:#fff; padding:66px 24px 28px; }
.hv-ph-top { display:flex; justify-content:flex-start; align-items:center; gap:16px; margin-bottom:24px; }
.hv-ph-brand { font-size:19px; font-weight:800; letter-spacing:.04em; color:var(--ink); }
.hv-ph-burger { width:22px; height:2px; background:var(--text-mute); position:relative; flex-shrink:0; margin-left:auto; }
.hv-ph-burger::before, .hv-ph-burger::after { content:""; position:absolute; left:0; width:22px; height:2px; background:var(--text-mute); }
.hv-ph-burger::before { top:-7px; } .hv-ph-burger::after { top:7px; }
.hv-ph-title { font-size:22px; font-weight:800; color:var(--ink); margin-bottom:14px; }
.hv-ph-tabs { display:flex; gap:7px; margin-bottom:20px; }
.hv-ph-tabs span { font-size:12px; font-weight:600; color:var(--text-mute); background:#f6f7fb; border-radius:100px; padding:7px 15px; }
.hv-ph-tabs span.on { background:var(--ink); color:#fff; }
.hv-ph-stat { border:1px solid var(--border); border-radius:18px; padding:20px; margin-bottom:20px; }
.hv-bigdonut { width:160px; height:160px; margin:14px auto 6px; border-radius:50%; background:conic-gradient(var(--c) 0 calc(var(--p)*1%), #e9edf3 0); position:relative; display:flex; align-items:center; justify-content:center; }
.hv-bigdonut::after { content:""; position:absolute; inset:36px; background:#fff; border-radius:50%; }
.hv-bigdonut em { position:relative; z-index:1; font-style:normal; text-align:center; line-height:1.05; }
.hv-bigdonut em b { display:block; font-size:32px; font-weight:800; color:var(--ink); }
.hv-bigdonut em span { font-size:13px; color:var(--text-mute); }
.hv-ph-legend { display:flex; flex-direction:column; gap:15px; }
.hv-lg-row { display:flex; align-items:center; gap:12px; }
.hv-lg-row i { width:13px; height:13px; border-radius:3px; flex-shrink:0; }
.hv-lg-l { flex:1; height:10px; border-radius:4px; background:var(--bg-alt); }
.hv-lg-v { font-size:14px; font-weight:700; color:var(--ink); }

/* 981–1200px: 2-column, reduce scales so iPhone stays right of Mac center */
@media (max-width: 1200px) {
  .device.hv-mac { transform:scale(.60); }
  .device.hv-ip  { transform:scale(.33); right:-8px; bottom:19px; }
}
@media (max-width: 1050px) {
  .device.hv-mac { transform:scale(.54); }
  .device.hv-ip  { transform:scale(.28); right:-6px; bottom:41px; }
}
/* 561–980px: single column, Mac centered + iPhone to the right */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding: 56px 24px 72px; gap: 48px; }
  .hero h1 { font-size: 40px; }
  .ide-split { grid-template-columns: 1fr; }
  .ide-pane:first-child { border-right: none; border-bottom: 1px solid #1c2128; }
  .heroviz-multi { min-height:260px; }
  .device.hv-ipad { display:none; }
  .device.hv-mac { top:6px; left:calc(50% - 226px); bottom:auto; transform:scale(.64); transform-origin:top left; }
  .device.hv-ip  { top:90px; bottom:auto; left:auto; right:-19%; transform:scale(.26); transform-origin:top left; }
}
@media (max-width: 880px) {
  .device.hv-ip  { top:90px; bottom:auto; left:auto; right:-26%; transform:scale(.26); transform-origin:top left; }
}
@media (max-width: 780px) {
  .heroviz-multi { min-height:280px; }
  .device.hv-mac { transform:scale(.60); }
  .device.hv-ip  { right:-32%; transform:scale(.24); }
}
@media (max-width: 680px) {
  .heroviz-multi { min-height:260px; }
  .device.hv-mac { transform:scale(.56); }
  .device.hv-ip  { right:-43%; transform:scale(.26); }
}
/* ≤560px: single column, only Mac — centered, smaller */
@media (max-width: 560px) {
  .hero h1 { font-size: 32px; }
  .device.hv-ip { display:none; }
  .heroviz-multi { min-height:260px; }
  .device.hv-mac { left:50%; transform:scale(.54) translateX(-50%); transform-origin:top left; }
}
@media (max-width: 480px) {
  .heroviz-multi { min-height:220px; }
  .device.hv-mac { transform:scale(.46) translateX(-50%); }
}
@media (max-width: 400px) {
  .heroviz-multi { min-height:190px; }
  .device.hv-mac { transform:scale(.38) translateX(-50%); }
}
@media (max-width: 340px) {
  .heroviz-multi { min-height:160px; }
  .device.hv-mac { transform:scale(.32) translateX(-50%); }
}

/* STATS BAR */
.stats-bar {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 36px 48px;
}
.stats-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: start;
}
.stat {
  padding: 8px 24px;
  text-align: center;
}
.stat + .stat {
  border-left: 1px solid var(--border);
}
.stat .num { font-size: 40px; font-weight: 800; color: var(--accent); letter-spacing: -0.03em; line-height: 1; }
.stat .lbl { font-size: 12px; color: var(--text-mute); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin-top: 8px; line-height: 1.4; }
.stat .stat-unit { font-size: 32px; font-weight: 700; color: var(--accent); margin-left: 3px; letter-spacing: -0.02em; }

/* PROBLEMS */
.problems-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 8px 0 32px; }
.problem { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text); line-height: 1.5; }
.problem .mk { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-lt); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.problems-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 24px 28px; background: var(--accent-lt); border-radius: 12px; }
.problems-foot p { font-size: 16px; color: var(--ink); font-weight: 500; line-height: 1.5; margin: 0; flex: 1; }
.problems-foot p b { color: var(--accent-dk); font-weight: 700; }

/* JAK POMAGAMY - przed/po */
.transform-wrap { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.transform-list { display:flex; flex-direction:column; gap:22px; }
.transform-list .btn { margin-top: 10px; align-self: flex-start; }
.transform-intro { font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-mute); margin-bottom:4px; }
.tr-row { display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--text); line-height:1.55; }
.tr-row b { color:var(--ink); font-weight:700; }
.tr-mk { color:var(--accent); font-weight:800; font-size:16px; line-height:1.5; flex-shrink:0; }
.heroviz-ba { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.ba-card { position:relative; }
.ba-tag { position:absolute; top:10px; left:10px; z-index:2; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; background:#5c5c4e; color:#fff; padding:3px 10px; border-radius:100px; }
.ba-tag.accent { background:var(--accent); }
.ba-legacy { background:#e7e7dd; border:1px solid #c6c6b8; border-radius:10px; padding:34px 12px 12px; font-family:'Times New Roman',Georgia,serif; }
.ba-legacy-bar { background:#b6b6a4; color:#33332a; font-size:10px; padding:4px 8px; margin:-34px -12px 10px; font-family:Arial,sans-serif; }
.ba-table { width:100%; border-collapse:collapse; font-size:10.5px; color:#3a3a30; }
.ba-table td { border:1px solid #b2b2a2; padding:5px 6px; }
.ba-table tr:first-child td { background:#cdcdbe; font-weight:700; font-size:9.5px; }
.ba-modern { background:#fff; border:1px solid var(--border); border-radius:10px; padding:34px 16px 16px; box-shadow:0 20px 50px -28px rgba(13,17,23,.3); }
.ba-arrow { font-size:24px; color:var(--accent); font-weight:700; text-align:center; }
.heroviz-ba .hv-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.heroviz-ba .hv-title { font-size:15px; font-weight:700; color:var(--ink); }

/* CO ROBIMY - services */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 28px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.service:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(79,70,229,.4); }
.service .ic {
  width: 44px; height: 44px;
  background: var(--accent-lt); color: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800;
  margin-bottom: 22px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.service:hover .ic { transform: translateY(-2px) scale(1.05); background: var(--accent-soft); }
.service h3 { font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.01em; }
.service p { font-size: 14px; color: var(--text-mute); line-height: 1.65; margin-bottom: 18px; text-align: justify; hyphens: auto; }
.service .more { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); padding-bottom: 1px; transition: border-color 0.2s ease; }
.service .more::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform 0.2s ease; }
.service .more:hover { border-color: var(--accent); }
.service:hover .more::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .service:hover, .service:hover .ic, .service:hover .more::after { transform: none; }
}

@media (max-width: 980px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 20px 24px; }
  .stat:nth-child(odd) { border-left: none; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--border); }
  .stats-bar { padding: 28px 24px; }
  .service-grid { grid-template-columns: 1fr; }
  .transform-wrap{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width: 700px) { .problems-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat { padding: 16px 24px; border-left: none !important; }
  .stat + .stat { border-top: 1px solid var(--border); border-left: none; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--border); }
  .stat .num { font-size: 36px; }
  .heroviz-ba { grid-template-columns:1fr; }
  .ba-arrow{ transform:rotate(90deg); }
}

.process-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 28px 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.step:hover {
  transform: scale(1.05);
  box-shadow: 0 22px 44px -22px rgba(30, 27, 75, 0.4);
  z-index: 2;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.step h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.step p { font-size: 13px; color: var(--text-mute); line-height: 1.6; text-align: justify; hyphens: auto; }
.step .dur {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px; font-weight: 600;
  color: var(--accent);
  background: var(--accent-lt);
  padding: 3px 8px; border-radius: 100px;
  letter-spacing: 0.05em;
}

@media (max-width: 980px) {
  .process-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* FLAGSHIP CASE STUDIES */
.cs-flagship { display: flex; flex-direction: column; gap: 20px; margin-bottom: 64px; }
.cs {
  display: grid; grid-template-columns: 240px 1fr; gap: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative; cursor: pointer;
}
.cs:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(79,70,229,.45); }
.cs-metric {
  background: linear-gradient(150deg, var(--ink) 0%, #161d2b 100%);
  color: #fff; padding: 34px 30px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.cs-metric::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 240px at 80% 15%, rgba(79,70,229,0.45) 0%, transparent 65%);
}
.cs-metric .big {
  font-size: 52px; font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; color: var(--accent-on-dark); position: relative;
}
.cs-metric .from-to {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500;
  color: #b9c0cc; margin-top: 12px; position: relative; line-height: 1.5;
}
.cs-body { padding: 30px 32px; }
.cs-body p { font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 16px; }
.sec-more { text-align: center; margin-top: 32px; }
.cs-tag {
  font-size: 10.5px; font-weight: 700; color: var(--accent);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px;
}
.cs-body h3 { font-size: 21px; font-weight: 800; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.02em; }
.cs-body .row { display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.55; }
.cs-body .row b { color: var(--ink); font-weight: 600; min-width: 92px; flex-shrink: 0; }
.cs-body .row span { color: var(--text-mute); }
.cs-body .row.efekt span { color: var(--text); font-weight: 500; }
.cs-read-link {
  display: inline-block; margin-top: 16px; position: relative; z-index: 1;
  font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none;
  letter-spacing: .01em;
}
.cs-read-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* REALIZACJE GRID */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative; cursor: pointer;
}
.case:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(79,70,229,.45); }
/* stretched-link — cały box klikalny */
.stretched-link::after { position: absolute; inset: 0; content: ""; z-index: 2; }
.case-img {
  height: 180px;
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.case-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.4s cubic-bezier(.22, .68, .32, 1);
}
.case:hover .case-img img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .cs:hover, .case:hover, .case:hover .case-img img { transform: none; }
}
.case-status {
  display: inline-block;
  background: var(--accent); color: white;
  font-size: 10px; font-weight: 700;
  padding: 4px 10px; border-radius: 4px;
  letter-spacing: 0.1em;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 8px;
}
.case-body { padding: 24px 24px 26px; }
.case-tag {
  font-size: 10.5px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 8px;
}
.case h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.01em; }
.case .row { display: flex; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.case .row b { color: var(--ink); font-weight: 600; min-width: 78px; flex-shrink: 0; }
.case .row span { color: var(--text-mute); }
.case .stack {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.case .stack span {
  font-size: 11px; font-weight: 600;
  color: var(--text-mute);
  background: var(--bg-alt);
  padding: 3px 8px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

/* cs-grid alias */
.cs-grid { display: flex; flex-direction: column; gap: 20px; }

/* CASE STUDY DETAIL IMAGE */
.case-study-image {
  margin: 32px 0;
  overflow: hidden;
  border: 1px solid var(--border);
}
.case-study-image img {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--bg-alt);
  object-fit: cover;
  object-position: top;
}

@media (max-width: 980px) {
  .case-grid { grid-template-columns: 1fr; }
  .cs { grid-template-columns: 1fr; }
  .cs-metric { padding: 20px 24px; flex-direction: row; align-items: center; gap: 20px; }
  .cs-metric .big { font-size: 40px; }
  .cs-metric .from-to { margin-top: 0; font-size: 12px; }
}
@media (max-width: 480px) {
  .cs-metric { flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px; }
  .cs-metric .from-to { margin-top: 4px; }
}

.faq-list { max-width: 100%; interpolate-size: allow-keywords; }
.faq-item {
  border-top: 1px solid var(--border);
  padding: 22px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q {
  font-size: 17px; font-weight: 600; color: var(--ink);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  list-style: none;
  letter-spacing: -0.005em;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: "+";
  font-size: 22px; font-weight: 400;
  color: var(--accent);
  line-height: 1;
  transition: transform 0.25s cubic-bezier(.22, .68, .32, 1);
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-a {
  margin-top: 14px;
  font-size: 15px; color: var(--text-mute);
  line-height: 1.7;
}

/* płynne rozwijanie wysokości natywnego <details> — animuje samą treść.
   ::details-content: Chromium 129+; gdzie brak wsparcia, treść pojawia się
   od razu (bez regresji), a fade poniżej i tak zadziała. */
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size .55s cubic-bezier(.22, .68, .32, 1),
              opacity .5s cubic-bezier(.22, .68, .32, 1),
              content-visibility .55s allow-discrete;
}
.faq-item[open]::details-content {
  block-size: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-q::after { transition: none; }
  .faq-item::details-content { transition: none; }
}
.faq-a b { color: var(--text); font-weight: 600; }

/* CTA dark */
.cta {
  background: var(--ink);
  padding: 90px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--accent) 0%, transparent 60%);
  opacity: 0.18;
  animation: ctaGlow 12s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { opacity: 0.14; transform: translateY(0) scale(1); }
  50%      { opacity: 0.22; transform: translateY(-3%) scale(1.05); }
}
.cta-inner { position: relative; max-width: 640px; margin: 0 auto; }
.cta .eyebrow { background: rgba(255,255,255,0.06); color: var(--accent-on-dark); }
.cta .eyebrow .dot { background: var(--accent-on-dark); }
.cta h2 {
  font-size: 44px; font-weight: 800; letter-spacing: -0.02em;
  color: #fff; line-height: 1.15; margin-bottom: 18px;
}
.cta p { font-size: 17px; color: #c5cdde; max-width: 520px; margin: 0 auto 32px; line-height: 1.6; }
.cta-subtext { font-size: 14px; color: #8b95a8; max-width: 520px; margin: -16px auto 30px; line-height: 1.5; letter-spacing: .01em; }
.cta-h1 { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.15; margin-bottom: 18px; }

/* BRIEF FORM */
.brief-form {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 12px;
  padding: 28px;
  text-align: left;
}
.brief-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.brief-form input, .brief-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #e6edf3;
  font-family: inherit; font-size: 14px;
  transition: border 0.15s;
}
.brief-form input:focus, .brief-form textarea:focus {
  outline: none; border-color: var(--accent-on-dark);
}
.brief-form input.is-invalid, .brief-form textarea.is-invalid {
  border-color: #f85149;
}
.brief-form input.is-invalid:focus, .brief-form textarea.is-invalid:focus {
  border-color: #f85149;
}
.fw { display: flex; flex-direction: column; }
.fw .field-hint { display: none; font-size: 11px; color: #f85149; margin-top: 4px; }
.brief-form input::placeholder, .brief-form textarea::placeholder { color: #6e7681; }
.brief-form textarea { resize: vertical; min-height: 92px; margin-bottom: 16px; font-family: inherit; }
.g-recaptcha { display: none; margin-bottom: 20px; }
.g-recaptcha.is-loaded { display: block; }
.brief-form .submit-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.brief-form .privacy { font-size: 12px; color: #8b949e; line-height: 1.5; }
.brief-form .privacy a { color: var(--accent-on-dark); text-decoration: none; }

/* SUBMIT — stan wysyłki (spinner) */
.brief-form .btn.is-loading {
  color: transparent; pointer-events: none; position: relative;
}
.brief-form .btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin .6s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* FORM STATUS */
.form-status {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  display: none;
}
.form-status.ok { display: block; background: rgba(126,231,135,0.1); color: #7ee787; border: 1px solid rgba(126,231,135,0.3); }
.form-status.err { display: block; background: rgba(255,123,114,0.1); color: #ff7b72; border: 1px solid rgba(255,123,114,0.3); }

/* COOKIE CONSENT */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100;
  max-width: 560px; margin: 0 auto;
  background: var(--ink); color: #c5cdde;
  border: 1px solid #21262d; border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5);
  display: none;
}
.cookie.show { display: block; }
.cookie p { font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.cookie p a { color: var(--accent-on-dark); text-decoration: none; }
.cookie-row { display: flex; gap: 10px; }
.cookie-row .btn { font-size: 13px; flex: 1; text-align: center; }
.cookie .btn-ghost { color: #c5cdde; border-color: #30363d; }
.cookie .btn-ghost:hover { background: #161b22; border-color: #484f58; }

/* KONTAKT PAGE extras */
.kontakt-info { max-width: 640px; margin: 0 auto 32px; text-align: left; }
.kontakt-info p { font-size: 15px; color: #c5cdde; line-height: 1.7; margin-bottom: 8px; }
.kontakt-info a { color: var(--accent-on-dark); text-decoration: none; }

@media (max-width: 980px) {
  .cta { padding: 64px 24px; }
  .cta h2 { font-size: 32px; }
  .brief-form .row { grid-template-columns: 1fr; }
}

.calc-wrap {
  max-width: 880px;
  margin: 0 auto;
}
.calc {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 20px 60px -30px rgba(13,17,23,0.15);
}
.calc-progress { margin-bottom: 36px; }
.calc-progress-track {
  height: 6px;
  background: var(--bg-alt);
  border-radius: 100px;
  overflow: hidden;
}
.calc-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dk) 100%);
  border-radius: 100px;
  transition: width 0.3s ease;
}
.calc-progress-meta {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-size: 12px; color: var(--text-mute);
  letter-spacing: 0.04em;
}
.calc-progress-meta span { font-weight: 600; color: var(--accent); }
.calc-approx { color: var(--text-mute); font-weight: 500; }

.calc-step { display: none; }
.calc[data-step="1"] .calc-step[data-s="1"],
.calc[data-step="2"] .calc-step[data-s="2"],
.calc[data-step="3"] .calc-step[data-s="3"],
.calc[data-step="4"] .calc-step[data-s="4"],
.calc[data-step="5"] .calc-step[data-s="5"],
.calc[data-step="6"] .calc-step[data-s="6"],
.calc[data-step="7"] .calc-step[data-s="7"],
.calc[data-step="result"] .calc-step[data-s="result"] { display: block; }
.calc[data-step="result"] .calc-nav { display: none; }

.calc-step h3 {
  font-size: 22px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.calc-step h3 small {
  font-size: 13px; font-weight: 500; color: var(--text-mute);
  margin-left: 6px;
}
.calc-step .hint { font-size: 13px; color: var(--text-mute); margin-bottom: 22px; }

.calc-options {
  display: grid; gap: 10px;
}
.calc-options button {
  text-align: left;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  font-family: inherit;
  transition: border 0.12s, background 0.12s, transform 0.08s;
  display: flex; flex-direction: column; gap: 4px;
}
.calc-options button:hover { border-color: var(--accent-soft); background: var(--bg-alt); }
.calc-options button.active {
  border-color: var(--accent);
  background: var(--accent-lt);
}
.calc-options button b { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; }
.calc-options button span { font-size: 13px; color: var(--text-mute); }
.calc-options button.active b { color: var(--accent-dk); }

.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-chips button {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 100px;
  padding: 9px 16px;
  font-size: 13.5px; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.calc-chips button:hover { border-color: var(--accent-soft); }
.calc-chips button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.calc-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--border);
}
.calc-nav .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.calc-nav .btn-ghost:disabled:hover { background: transparent; border-color: var(--border); }

/* RESULT */
.calc-result h3 { font-size: 24px; margin-bottom: 8px; }
.result-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0 32px;
}
.rg-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
}
.rg-label {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-mute);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 8px;
}
.rg-value {
  font-size: 22px; font-weight: 800;
  color: var(--accent); letter-spacing: -0.02em;
  line-height: 1.15;
}
.rg-meta { font-size: 11.5px; color: var(--text-mute); margin-top: 6px; line-height: 1.4; }

.result-cta {
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  padding: 28px;
  margin-top: 48px;
  margin-bottom: 20px;
}
.result-cta > p {
  font-size: 14.5px; color: #c5cdde;
  line-height: 1.6; margin-bottom: 18px;
}
.result-cta > p b { color: #fff; font-weight: 700; }
.result-form .row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 10px;
}
.result-form input {
  width: 100%;
  padding: 11px 14px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #e6edf3;
  font-family: inherit; font-size: 14px;
  margin-bottom: 10px;
  transition: border 0.15s;
}
.result-form .row input { margin-bottom: 0; }
.result-form input:focus { outline: none; border-color: var(--accent-on-dark); }
.result-form input.is-invalid { border-color: #f85149; }
.result-form input.is-invalid:focus { border-color: #f85149; }
.result-form .fw { display: flex; flex-direction: column; }
.result-form .fw .field-hint { display: none; font-size: 11px; color: #f85149; margin-top: 4px; }
.result-form input::placeholder { color: #6e7681; }
.result-form button { width: 100%; }

.calc-restart {
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  padding: 8px;
  text-align: center;
  display: block;
  margin: 0 auto;
}
.calc-restart:hover { color: var(--accent); }

.calc-disclaimer {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--bg-alt);
  border-radius: 8px;
  font-size: 12.5px; color: var(--text);
  line-height: 1.55;
}
.calc-disclaimer b { color: var(--ink); }

/* RESULT CHART */
.result-chart { margin: 32px 0 36px; }
.rc-legend { display: flex; gap: 20px; margin-bottom: 14px; }
.rc-leg { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-mute); }
.rc-leg-dot { width: 20px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.rc-leg-dot.without { background: var(--border); }
.rc-leg-dot.with { background: var(--accent); }
.result-chart canvas { display: block; width: 100%; }

/* CTA teaser (index.html only) */
.calc-teaser-cta {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.calc-teaser-cta p {
  font-size: 15px; color: var(--text-mute); margin-bottom: 16px;
}

@media (max-width: 980px) {
  .calc { padding: 24px; }
  .result-grid { grid-template-columns: 1fr; }
  .result-form .row { grid-template-columns: 1fr; }
}

/* FLOATING ACTION BUTTONS */
.fab-cluster {
  position: fixed;
  bottom: 92px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 900;
}
.fab {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.15s;
  font-family: inherit;
}
.fab:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.16), 0 1px 4px rgba(0,0,0,0.10); }
.fab svg { width: 24px; height: 24px; flex-shrink: 0; }
.fab-phone    { background: var(--accent); color: #fff; }
.fab-calendar { background: #fff; color: var(--ink); border: 1.5px solid rgba(0,0,0,0.12); }

/* Shadow na natywnym przycisku Tawk.to — dopasowany do naszych FAB */
#tawk-bubble-container {
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
  border-radius: 50%;
}

@media (max-width: 700px) {
  .fab-cluster { bottom: 88px; right: 16px; }
}

/* ── Sekcja „O firmie" ── */
.about-intro {
  display: grid; grid-template-columns: minmax(0, 760px) 1fr; gap: 48px;
  align-items: stretch;
  margin-top: 3rem;
}
.about-intro p { font-size: 16.5px; line-height: 1.7; color: var(--text); margin-bottom: 18px; }
.about-intro p:last-child { margin-bottom: 0; }
.about-intro b { font-weight: 700; color: var(--ink); }
/* sygnet celowo nieco wyżej niż oś tekstu, bliżej linii nagłówka */
.about-brand {
  display: flex; align-items: center; justify-content: center;
  transform: translateY(-24px);
}
/* negatyw: sygnet na ink, akcent schodzi na --accent-on-dark (klasa gw-logo--dark) */
.about-brand .circle {
  width: 220px; height: 220px; border-radius: 50%;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 50px -20px rgba(13,17,23,.55);
}
/* 46px: wordmark ma 3.57em szerokości, czyli ok. 164px - mieści się w kole 220px z zapasem */
.about-brand .gw-logo { font-size: 46px; }

/* ── Sekcja „O mnie" ── */
.about-me {
  display: grid; grid-template-columns: 280px 1fr; gap: 64px;
  align-items: start;
  margin-top: 3rem;
}
.founder-card { text-align: center; }
.founder-photo {
  width: 220px; height: 220px;
  margin: 0 auto 18px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 20px 50px -20px rgba(79,70,229,0.5);
  display: block;
}
.founder-card .nm { font-size: 17px; font-weight: 700; color: var(--ink); }
.founder-card .ttl { font-size: 13px; color: var(--text-mute); margin-top: 2px; }
.founder-card .links { display: flex; gap: 12px; justify-content: center; margin-top: 14px; }
.founder-card .links a { font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 600; }
.about-body p { font-size: 16px; color: var(--text); line-height: 1.7; margin-bottom: 18px; }
.about-body p:first-child { font-size: 18px; color: var(--ink); font-weight: 500; }
.about-body p:last-child { margin-bottom: 0; }
.about-body strong { font-weight: 700; color: var(--ink); }

/* ── Sekcja „Jak pracujemy" - tylko /o-nas ── */
/* układ listowy: dwie kolumny oddzielone liniami, bez ramek i tła */
.hww-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; margin-top: 2.5rem; }
.hww-item { padding: 20px 0; border-top: 1px solid var(--border); }
.hww-item .hww-n {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 600; color: var(--accent);
  letter-spacing: 0.1em; margin-bottom: 9px;
}
.hww-item p { font-size: 14px; color: var(--text-mute); line-height: 1.65; margin: 0; }

@media (max-width: 980px) {
  .about-intro, .about-me { grid-template-columns: 1fr; gap: 32px; }
  .about-brand { justify-content: flex-start; transform: none; }
  .about-brand .circle { width: 160px; height: 160px; }
  .about-brand .gw-logo { font-size: 33px; }
  .founder-photo { width: 180px; height: 180px; }
  .hww-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ===== DETAIL HERO ===== */
.detail-hero {
  background: var(--ink);
  color: #fff;
  padding: 72px 48px 64px;
}
.detail-hero .inner { max-width: 1100px; margin: 0 auto; }

.breadcrumb { font-size: 13px; color: #6e7681; margin-bottom: 28px; display: flex; align-items: center; gap: 8px; }
.breadcrumb a { color: #6e7681; text-decoration: none; transition: color .15s; }
.breadcrumb a:hover { color: #c9d1d9; }
.breadcrumb span { color: #484f58; }

.detail-hero h1 { font-size: 48px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 16px; max-width: 820px; }
.detail-hero .lead { font-size: 18px; color: #b9c0cc; line-height: 1.6; max-width: 680px; }

/* ===== METRICS BAR (case study) ===== */
.metrics-bar { background: #161b22; border-bottom: 1px solid #21262d; padding: 32px 48px; }
.metrics-bar-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.metrics-bar-inner[data-count="2"] { grid-template-columns: repeat(2, 1fr); max-width: 680px; }
.metrics-bar-inner[data-count="1"] { grid-template-columns: 1fr; max-width: 320px; }
.metrics-bar .m-val { font-size: 42px; font-weight: 800; color: #8fa1ff; letter-spacing: -.03em; font-family: 'Inter Variable', 'Inter', sans-serif; line-height: 1; }
.metrics-bar .m-label { font-size: 12px; color: #6e7681; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-top: 8px; }
.metrics-bar .m-sub { font-size: 13px; color: #8b949e; margin-top: 4px; }

/* ===== DETAIL COVER ===== */
.detail-cover { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 0 48px; }
.detail-cover .inner { max-width: 1100px; margin: 0 auto; }
.cover-placeholder {
  background: #e4e6f0;
  border-radius: 14px 14px 0 0;
  height: 380px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--text-mute);
  letter-spacing: .06em; text-transform: uppercase;
}
.detail-cover .case-study-image {
  height: 380px;
  margin: 0;
  overflow: hidden;
  border: none;
}
.detail-cover .case-study-image img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ===== DETAIL BODY ===== */
.detail-body { max-width: 1100px; margin: 0 auto; padding: calc(64px - 1rem) 48px 64px; display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }

.detail-content { padding-top: 1rem; }
.detail-content h2 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 40px 0 14px; }
.detail-content h2:first-child { margin-top: 0; }
.detail-content p { font-size: 16px; color: var(--text); line-height: 1.7; margin-bottom: 12px; }
.detail-content p b { color: var(--ink); }
.detail-content ul { margin: 0 0 16px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.detail-content ul li { font-size: 15px; color: var(--text); line-height: 1.55; padding-left: 20px; position: relative; }
.detail-content ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

.detail-result { background: var(--accent-lt); border-radius: 14px; padding: 28px 32px; margin-top: 40px; }
.detail-result h2 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.detail-result p { font-size: 15px; color: var(--text); line-height: 1.65; margin: 0; }
.detail-result p b { color: var(--accent-dk); }

/* ===== REALIZACJA (product view) ===== */
.realz-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 8px; }
.realz-metric { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 18px 14px; text-align: center; }
.realz-metric .rm-val { font-size: 28px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; line-height: 1; }
.realz-metric .rm-lbl { font-size: 12px; color: var(--text-mute); margin-top: 6px; line-height: 1.4; }

.realz-timeline { list-style: none; margin: 0 0 16px; padding: 0 0 0 20px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
.realz-timeline li { position: relative; }
.realz-timeline li::before { content: ""; position: absolute; left: -27px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.realz-timeline .rt-h { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.realz-timeline .rt-p { display: block; font-size: 14px; color: var(--text-mute); line-height: 1.55; margin-top: 2px; }

.realz-logos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; margin-bottom: 8px; }
/* chip tekstowy (bez ikony) */
.realz-logo { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-mute); background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; }
.realz-logo::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); opacity: .6; flex-shrink: 0; }
/* box z ikoną — stały rozmiar, ikona + nazwa pod spodem */
.realz-logo.has-img { flex-direction: column; justify-content: center; align-items: center; gap: 8px; width: 88px; height: 88px; padding: 12px 8px 10px; text-align: center; border-radius: 12px; }
.realz-logo.has-img::before { display: none; }
.realz-logo.has-img img { height: 32px; width: auto; max-width: 54px; object-fit: contain; display: block; flex-shrink: 0; }
.realz-logo.has-img .rl-name { font-size: 11px; font-weight: 600; color: var(--text-mute); line-height: 1.3; word-break: break-word; }

/* galeria zrzutów */
.realz-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 8px; }
@media (max-width: 560px) { .realz-gallery { grid-template-columns: 1fr; } }
.realz-shot {
  display: block; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: #fff; text-decoration: none; transition: border-color .15s, transform .15s;
  cursor: pointer; padding: 0; text-align: left;
}
.realz-shot:hover { border-color: var(--accent); transform: translateY(-2px); }
.realz-shot img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; }
.realz-shot .rs-cap { display: block; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--ink); }
/* slot bez pliku - informacja dla osoby wgrywającej zrzuty */
.realz-shot.is-empty {
  border-style: dashed; aspect-ratio: 16/10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; text-align: center;
  background: repeating-linear-gradient(45deg, var(--accent-lt), var(--accent-lt) 12px, #fff 12px, #fff 24px);
}
.realz-shot.is-empty .rs-label { font-size: 14px; font-weight: 700; color: var(--accent-dk); }
.realz-shot.is-empty .rs-file {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-mute);
  background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; word-break: break-all;
}
/* lightbox (CSS-only, :target) */
.realz-lb {
  position: fixed; inset: 0; z-index: 1000; padding: 60px 80px 24px;
  background: rgba(15, 12, 40, .82); display: none; align-items: center; justify-content: center;
}
.realz-lb.is-open { display: flex; }
.rlb-bg { position: absolute; inset: 0; z-index: 1; background: transparent; border: none; padding: 0; cursor: pointer; }
.rlb-wrap { position: relative; z-index: 2; max-width: min(1000px, 90vw); width: fit-content; }
.rlb-card { background: #fff; border-radius: 14px; overflow: hidden; }
.rlb-card img { display: block; max-width: min(1000px, 90vw); max-height: 72vh; width: auto; height: auto; object-fit: contain; }
.rlb-cap { padding: 14px 18px; font-size: 14px; font-weight: 600; }
.rlb-close {
  position: absolute; top: -16px; right: -16px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: #0f0c28;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 18px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: transform .15s;
}
.rlb-close:hover { transform: scale(1.1); }
.rlb-prev, .rlb-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; color: #fff; background: none; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; line-height: 1; transition: opacity .15s; user-select: none; opacity: .8; cursor: pointer;
}
.rlb-prev:hover, .rlb-next:hover { opacity: 1; }
.rlb-prev { left: -58px; }
.rlb-next { right: -58px; }
@media (max-width: 600px) {
  .realz-lb { padding: 52px 16px 16px; }
  .rlb-prev { left: 8px; }
  .rlb-next { right: 8px; }
}

.realz-related { display: flex; flex-direction: column; gap: 10px; }
.realz-cs { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; background: #fff; transition: border-color .15s, transform .15s; }
.realz-cs:hover { border-color: var(--accent); transform: translateX(2px); }
.realz-cs .rcs-t { font-size: 15px; font-weight: 600; color: var(--ink); }
.realz-cs .rcs-arrow { color: var(--accent); font-weight: 700; font-size: 18px; }

@media (max-width: 640px) { .realz-metrics { grid-template-columns: 1fr 1fr; } }

/* ===== BACK LINK ===== */
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-mute); text-decoration: none; margin-bottom: 48px; transition: color .15s; }
.back-link:hover { color: var(--accent); }
.back-link svg { width: 16px; height: 16px; }

/* ===== SIDEBAR ===== */
.detail-sidebar { position: sticky; top: 80px; padding-top: 1rem; }
.sidebar-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 28px; margin-bottom: 16px; }
.sidebar-card h3 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 16px; }
.sidebar-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.sidebar-row:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-row .sk { color: var(--text-mute); font-weight: 500; }
.sidebar-row .sv { color: var(--ink); font-weight: 700; text-align: right; }
.sidebar-cta { background: var(--ink); border-radius: 14px; padding: 28px; text-align: center; }
.sidebar-cta h3 { font-size: 14px; font-weight: 500; color: #b9c0cc; line-height: 1.55; margin: 0 0 18px; letter-spacing: normal; text-transform: none; }
.sidebar-cta .btn { width: 100%; justify-content: center; display: flex; }

/* ===== LEGAL ===== */
.legal-wrap { max-width: 720px; margin: 60px auto 80px; padding: 0 24px; }
.legal-wrap h1 { font-size: 32px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.legal-wrap h2 { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 32px; margin-bottom: 8px; }
.legal-wrap p, .legal-wrap ul { font-size: 15px; color: var(--text); line-height: 1.7; }
.legal-wrap ul { padding-left: 20px; }
.legal-wrap li { margin-bottom: 6px; }
.legal-wrap .box { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; font-size: 14px; line-height: 1.6; }

/* ===== SITEMAP ===== */
.sitemap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 32px; }
.sitemap-group h2 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-mute); margin-bottom: 12px; }
.sitemap-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sitemap-group a { font-size: 15px; color: var(--accent); text-decoration: none; }
.sitemap-group a:hover { text-decoration: underline; }

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
  .detail-hero { padding: 48px 24px 40px; }
  .detail-hero h1 { font-size: 34px; }
  .detail-cover { padding: 0 24px; }
  .cover-placeholder { height: 240px; }
  .detail-body { grid-template-columns: 1fr; padding: 40px 24px; gap: 40px; }
  .detail-sidebar { position: static; }
  .metrics-bar { padding: 24px; }
  .metrics-bar-inner { grid-template-columns: 1fr; gap: 16px; }
  .sitemap { grid-template-columns: 1fr; }
}

/* Device Mockups Layout */
.device-mockups {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 32px 0;
  flex-wrap: nowrap;
}

/* Device base styles from devices.css */
.device-mockups .device {
  flex-shrink: 0;
}

.device-mockups .device-macbook-pro {
  flex: 0 0 auto;
}

.device-mockups .device-iphone-14-pro {
  flex: 0 0 auto;
  transform: scale(0.4) rotateZ(4deg);
  transform-origin: center;
}

/* When both mockups present: iPhone overlays MacBook */
.device-mockups.has-both .device-iphone-14-pro {
  right: -5%;
  top: -35%;
  position: absolute;
  z-index: 10;
}

/* When only one device: center it */
.device-mockups:not(.has-both) {
  justify-content: center;
}

/* Ensure images fill device screens properly */
.device-mockups .device-screen img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  border-radius: 0.5rem 0.5rem 0 0;
}

/* iPhone frame styling */
.device-iphone-14-pro .device-frame {
  background: #010101;
  border: 1px solid #1b1721;
  border-radius: 68px;
  box-shadow: inset 0 0 4px 2px #c0b7cd, inset 0 0 0 6px #342c3f;
  padding: 19px;
}

/* Mobile screen container */
.device-screen-mobile {
  height: 100%;
}

/* Mobile screen: adjust for notch */
.device-mockups .device-iphone-14-pro .device-screen {
  border-radius: 49px;
  height: calc(830px - 3rem);
  width: 390px;
  margin-top: 3rem;
}

/* Mobile screen styling */
.device-mockups .device-screen-mobile img {
  border-radius: 3rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

@media (max-width: 1400px) {
  .device-mockups {
    gap: 24px;
  }

  .device-mockups .device-macbook-pro {
    transform: scale(0.8);
    transform-origin: center;
  }

  .device-mockups .device-iphone-14-pro {
    flex: 0 0 auto;
    transform: scale(0.3) rotateZ(4deg);
    transform-origin: center;
  }

  .device-mockups.has-both .device-iphone-14-pro {
    right: 2%;
    top: -29%;
    position: absolute;
    z-index: 10;
  }
}

@media (max-width: 1000px) {
  .device-mockups .device-macbook-pro {
    transform: scale(0.7);
  }

  .device-mockups .device-iphone-14-pro {
    flex: 0 0 auto;
    transform: scale(0.3) rotateZ(4deg);
    transform-origin: center center;
  }

  .device-mockups.has-both .device-iphone-14-pro {
    right: -5%;
    top: -29%;
    position: absolute;
    z-index: 10;
  }
}

@media (max-width: 768px) {
  .device-mockups {
    flex-direction: column;
    gap: 24px;
    padding: 24px 0;
  }

  .device-mockups.has-both .device-iphone-14-pro {
    position: static;
    transform: scale(0.7) rotateZ(4deg) translateY(calc(868px * -0.2));
    max-height: calc(868px * 0.7);
  }

  .device-mockups .device-macbook-pro {
    transform: scale(0.65);
  }

  .device-mockups .device-iphone-14-pro {
    transform: scale(0.35) rotateZ(4deg);
  }
}

@media (max-width: 480px) {
  .device-mockups {
    gap: 16px;
    padding: 16px 0;
  }

  .device-mockups .device-macbook-pro {
    transform: scale(0.45);
    max-height: calc(434px * 0.45);
  }

  .device-mockups .device-iphone-14-pro {
    transform: scale(0.3) rotateZ(4deg);
  }

  .device-mockups.has-both .device-iphone-14-pro {
    position: static;
    right: auto;
    top: auto;
    transform: scale(0.6) rotateZ(4deg) translateY(calc(868px * -0.1));
    max-height: calc(868px * 0.7);
  }
}

/* ==========================================================================
   MOTION — animacje wejścia i życie mockupów w hero.
   Wszystko wyłączane przez prefers-reduced-motion (blok na końcu pliku).
   ========================================================================== */

/* Rejestrowana zmienna — pozwala animować conic-gradient donutów.
   --p (inline w Twigu) to wartość docelowa, --pd to animowana. */
@property --pd {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* --- HERO: wejście sceny --------------------------------------------------- */

@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroVizIn {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.hero .eyebrow,
.hero h1,
.hero .lead,
.hero-cta {
  opacity: 0;
  animation: heroIn .7s cubic-bezier(.22, .68, .32, 1) forwards;
}
.hero .eyebrow { animation-delay: .05s; }
.hero h1       { animation-delay: .15s; }
.hero .lead    { animation-delay: .28s; }
.hero-cta      { animation-delay: .40s; }

.heroviz {
  opacity: 0;
  animation: heroVizIn .9s cubic-bezier(.22, .68, .32, 1) .35s forwards;
}

/* --- HERO: oddychająca poświata ------------------------------------------- */

@keyframes glowBreathe {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
.hv-glow { animation: glowBreathe 9s ease-in-out infinite; }

/* --- HERO: donuty rysowane od zera ---------------------------------------- */

@keyframes donutDraw {
  from { --pd: 0; }
  to   { --pd: var(--p); }
}

.hv-donut,
.hv-bigdonut {
  background: conic-gradient(var(--c) 0 calc(var(--pd) * 1%), #e9edf3 0);
  animation: donutDraw 1.1s cubic-bezier(.22, .68, .32, 1) forwards;
}

/* stagger per karta — dashboard "dociąga dane" kafel po kaflu */
.hv-cards .hv-card:nth-child(1) .hv-donut { animation-delay: .55s; }
.hv-cards .hv-card:nth-child(2) .hv-donut { animation-delay: .70s; }
.hv-cards .hv-card:nth-child(3) .hv-donut { animation-delay: .85s; }
.hv-cards .hv-card:nth-child(4) .hv-donut { animation-delay: 1.00s; }
.hv-bigdonut { animation-duration: 1.3s; animation-delay: .75s; }

/* --- HERO: paski legendy wysuwają się ------------------------------------- */

@keyframes legendGrow {
  from { transform: scaleX(0); }
  to   { transform: none; }
}
.hv-legend i,
.hv-lg-l {
  transform-origin: left center;
  animation: legendGrow .7s cubic-bezier(.22, .68, .32, 1) backwards;
}
.hv-legend i:nth-child(1) { animation-delay: .70s; }
.hv-legend i:nth-child(2) { animation-delay: .78s; }
.hv-legend i:nth-child(3) { animation-delay: .86s; }
.hv-legend i:nth-child(4) { animation-delay: .94s; }
.hv-lg-row:nth-child(1) .hv-lg-l { animation-delay: .95s; }
.hv-lg-row:nth-child(2) .hv-lg-l { animation-delay: 1.03s; }
.hv-lg-row:nth-child(3) .hv-lg-l { animation-delay: 1.11s; }
.hv-lg-row:nth-child(4) .hv-lg-l { animation-delay: 1.19s; }

/* --- HERO: życie interfejsu (tab / sidebar przełączane z JS) -------------- */

.hv-tabs span,
.hv-ph-tabs span,
.hv-nav-item {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* podmiana wartości w chipie — krótki błysk zamiast skoku */
@keyframes valueFlash {
  from { transform: translateY(-3px); opacity: .35; }
  to   { transform: none; opacity: 1; }
}
.hv-chip.is-updating { animation: valueFlash .45s cubic-bezier(.22, .68, .32, 1); }

/* ==========================================================================
   SCROLL REVEAL — sekcje i kafle wchodzą przy wjechaniu w viewport.
   Stan ukryty dokłada JS (klasa .mo-reveal), więc bez JS wszystko widoczne.
   ========================================================================== */

.mo-reveal {
  opacity: 0;
  transform: translateY(21px);
  transition: opacity .87s cubic-bezier(.22, .68, .32, 1),
              transform .87s cubic-bezier(.22, .68, .32, 1);
}
.mo-reveal.mo-in { opacity: 1; transform: none; }

/* kafle w gridzie — kaskada sterowana zmienną --i ustawianą per dziecko */
.mo-stagger > * {
  opacity: 0;
  transform: translateY(21px);
  transition: opacity .78s cubic-bezier(.22, .68, .32, 1),
              transform .78s cubic-bezier(.22, .68, .32, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.mo-stagger.mo-in > * { opacity: 1; transform: none; }

/* --- pasek postępu czytania (wstrzykiwany z JS) --------------------------- */

.mo-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: var(--accent);
  z-index: 100;
  transition: width .1s linear;
  pointer-events: none;
}

/* --- REDUCED MOTION -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow,
  .hero h1,
  .hero .lead,
  .hero-cta,
  .heroviz {
    opacity: 1;
    animation: none;
  }
  .hv-glow,
  .hv-legend i,
  .hv-lg-l,
  .hv-chip.is-updating {
    animation: none;
  }
  .hv-donut,
  .hv-bigdonut {
    animation: none;
    background: conic-gradient(var(--c) 0 calc(var(--p) * 1%), #e9edf3 0);
  }
  .mo-reveal,
  .mo-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mo-progress { display: none; }
}