/* generated by build.mjs from src/components/header/header.css + src/components/header/menu.css + src/components/footer/footer.css + src/styles/site.css: edit those, not this file */
/* The site header, shared by the homepage and every sub-page (markup: header.mjs; under 1100px: menu.css): the glass
   bar with working menus: Solutions and Pricing as short lists, All in MYTH as a mega menu (every tool, by category,
   with a preview of the hovered tool's loop). Panels are near-opaque: they sit over the waves only while open. */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* "Skip to content": hidden until a keyboard lands on it */
.skip:focus-visible { position: fixed !important; z-index: 1000; top: 12px; left: 12px; width: auto; height: auto; margin: 0; padding: 10px 16px; clip: auto;
  border-radius: 999px; background: #fff; color: #0b0b10; font: 600 14px/1 var(--font-ui); text-decoration: none; }

.site-nav { gap: 16px; }
.site-nav::before { height: 96px; background: linear-gradient(180deg, rgba(9, 9, 12, 0.92) 0%, rgba(9, 9, 12, 0.6) 58%, transparent 100%); }
/* (max-content: centred with left 50%, the bar would otherwise wrap its items into the half width left to it) */
.site-menu { position: absolute; left: 50%; translate: -50% 0; width: max-content; display: flex; align-items: center; gap: 2px; margin: 0; padding: 5px; list-style: none;
  border-radius: var(--radius-pill); background: var(--glass); border: 1px solid var(--line); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.site-menu .nm { position: static; }
.nm__top { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; white-space: nowrap; border: 0; border-radius: var(--radius-pill);
  background: none; cursor: pointer; font: 600 12.5px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--muted);
  transition: color 0.3s, background 0.3s; }
.nm__top:hover, .nm__top:focus-visible, .nm.is-open .nm__top { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nm__top:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 1px; }
.nm__top[aria-current="page"], .nm__top[data-current] { color: var(--text); }
.nm__top[aria-current="page"]::after, .nm__top[data-current]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--accent-lift); box-shadow: 0 0 8px var(--accent-lift); }
.site-menu .caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -2px; opacity: 0.8;
  transition: rotate 0.3s var(--ease-out), translate 0.3s var(--ease-out); }
.nm.is-open .caret { rotate: 225deg; translate: 0 1px; }
.site-actions { display: flex; align-items: center; gap: 8px; }
.site-actions .pill { height: 40px; padding: 0 18px; font-size: 13px; }
/* the Turkish header: its words run longer (Hakkımızda, İletişim, Oluşturmaya başlayın), so its bar runs wider than the
   page's container (up to 1360px) and is laid out as three columns: the menu, in the middle one, sits on the page's
   centre whenever the actions fit beside it and on narrower desktops moves left only as far as they need. Its items are
   a little tighter (under 1440px tighter still, the actions too), and under 1366px Sign in leaves the bar (it stays in
   the footer): so the menu holds the centre down to ~1150px */
html[lang="tr"] .site-menu { position: relative; left: auto; translate: none; }
html[lang="tr"] .site-menu .nm__top { padding: 0 10px; }
@media (min-width: 1101px) {
  html[lang="tr"] .site-nav { inset-inline: max(clamp(16px, 2.5vw, 56px), (100vw - 1360px) / 2); display: grid; grid-template-columns: 1fr auto 1fr; }
  html[lang="tr"] .site-nav .demo-logo { justify-self: start; }
  html[lang="tr"] .site-actions { justify-self: end; white-space: nowrap; }
}
@media (min-width: 1101px) and (max-width: 1439px) {
  html[lang="tr"] .site-menu .nm__top { padding: 0 8px; }
  html[lang="tr"] .site-actions { gap: 6px; }
  html[lang="tr"] .site-actions .pill { padding: 0 14px; }
}
@media (min-width: 1101px) and (max-width: 1365px) { html[lang="tr"] .site-actions__in { display: none; } }
/* the language switch: the same page in the other language (EN at the root, TR under tr/) */
.site-lang { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--radius-pill);
  font: 600 12px/1 var(--font-ui); letter-spacing: 0.08em; color: var(--muted); text-decoration: none; border: 1px solid transparent;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.site-lang:hover { color: var(--text); border-color: var(--line-strong); }
.site-lang:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 2px; }
/* the logo: the MYTH mark (myth-design-frontend-v5 myth-logo.svg) */
.site-nav .demo-logo { display: inline-flex; align-items: center; color: var(--text); }
.site-nav .demo-logo svg { width: 39px; height: 40px; fill: currentColor; }
.site-nav .demo-logo:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 4px; border-radius: 6px; }

/* ---------- panels ---------- */
.nm__panel { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 2; translate: -50% 6px; opacity: 0; visibility: hidden; pointer-events: none;
  padding: 10px; border-radius: 20px; background: rgba(14, 15, 22, 0.97); border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4);
  transition: opacity 0.22s var(--ease-out), translate 0.32s var(--ease-out), visibility 0s linear 0.32s; }
/* the hover bridge over the gap between the bar and the panel */
.nm__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nm.is-open .nm__panel { opacity: 1; visibility: visible; pointer-events: auto; translate: -50% 0; transition: opacity 0.22s var(--ease-out), translate 0.32s var(--ease-out), visibility 0s; }
.nm__panel--list { width: 420px; display: grid; gap: 2px; }
.nm__panel--narrow { width: 380px; }
/* Solutions opens flush with the menu's left edge, under its own item, not centred on the menu */
#nm-solutions { left: -1px; translate: 0 6px; }
.nm.is-open #nm-solutions { translate: 0 0; }
.nm-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 13px; text-decoration: none; color: var(--text);
  transition: background 0.25s; }
.nm-item:hover, .nm-item:focus-visible { background: rgba(255, 255, 255, 0.055); outline: none; }
.nm-item[aria-current="page"] { background: rgba(var(--accent-rgb), 0.12); }
.nm-item b { display: block; font: 600 14.5px/1.2 var(--font-ui); }
.nm-item em { display: block; margin-top: 4px; font: 400 13px/1.4 var(--font-ui); font-style: normal; color: var(--muted); }
.nm-item__ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: #fff;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.22), transparent 55%), linear-gradient(135deg, rgb(var(--pattern-rgb)), rgb(var(--product-rgb))); }
.nm-item__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nm-item__ico--ai svg { fill: currentColor; stroke: none; }
.nm-item__ico--digi { background: radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.22), transparent 55%), linear-gradient(135deg, rgb(var(--catalog-rgb)), #1b7f87); }

/* the mega menu: three columns of tools and the preview card */
.nm__panel--mega { width: min(1000px, calc(100vw - 2 * var(--gutter))); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.15fr; gap: 6px; padding: 14px; }
.nm-col { --c: var(--accent-rgb); --hi: 138, 149, 255; padding: 4px 6px; }
.nm-col--stack { display: grid; align-content: start; gap: 10px; padding: 0; }
.nm-cap { display: flex; align-items: center; gap: 8px; margin: 4px 8px 6px; font: 600 11px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--hi)); }
.nm-cap i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--hi)); box-shadow: 0 0 10px rgba(var(--hi), 0.9); }
.nm-col ul { list-style: none; margin: 0; padding: 0; }
.nm-col a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; font: 500 13.5px/1.3 var(--font-ui); color: rgba(255, 255, 255, 0.82);
  text-decoration: none; transition: background 0.2s, color 0.2s; }
.nm-col a:hover, .nm-col a:focus-visible { background: rgba(var(--c), 0.18); color: #fff; outline: none; }
.nm-peek { --c: var(--accent-rgb); position: relative; display: grid; grid-template-rows: auto 1fr; align-content: start; overflow: hidden; border-radius: 14px; text-decoration: none; color: var(--text);
  background: radial-gradient(120% 80% at 100% 0%, rgba(var(--c), 0.28), transparent 60%), rgba(255, 255, 255, 0.03); border: 1px solid rgba(var(--c), 0.3);
  transition: border-color 0.3s, background 0.4s; }
.nm-peek__img { display: block; aspect-ratio: 5 / 4; overflow: hidden; }
.nm-peek__img img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.25s; }
.nm-peek__cap { display: grid; gap: 5px; padding: 12px 14px 14px; }
.nm-peek__cap em { font: 600 10.5px/1 var(--font-ui); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--c)); filter: brightness(1.6); }
.nm-peek__cap b { font: 600 18px/1.1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.nm-peek__cap i { font: 400 12.5px/1.45 var(--font-ui); font-style: normal; color: var(--muted); }
.nm-peek__go { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(9, 9, 12, 0.7);
  font: 600 14px/1 var(--font-ui); transition: translate 0.3s var(--ease-out); }
.nm-peek:hover .nm-peek__go { translate: 3px 0; }

/* The header on tablets and phones, shared by the homepage and every sub-page (markup: header.mjs, behaviour:
   header.js). Under 1100px the bar's items fold into the menu button; the sheet drops under the header with
   the same items as one list, All in MYTH's tools folded by category, and Sign in / Start creating at the foot.
   Breakpoints used across the site: 1100px (the header), 900px (tablets: two columns stack), 600px (phones). */
.nav-burger { display: none; position: relative; width: 42px; height: 42px; flex: 0 0 42px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgba(14, 15, 22, 0.82); color: #fff; }
.nav-burger i { position: absolute; left: 12px; right: 12px; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: top 0.3s var(--ease-out), rotate 0.3s var(--ease-out); }
.nav-burger i:first-child { top: 16px; }
.nav-burger i:last-child { top: 24px; }
.nav-burger[aria-expanded="true"] i { top: 20px; }
.nav-burger[aria-expanded="true"] i:first-child { rotate: 45deg; }
.nav-burger[aria-expanded="true"] i:last-child { rotate: -45deg; }
.nav-burger:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 2px; }

.nav-sheet { position: fixed; inset: 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 84px var(--gutter) max(32px, env(safe-area-inset-bottom));
  background: radial-gradient(90% 50% at 100% 0%, rgba(var(--accent-rgb), 0.14), transparent 70%), #09090c; animation: nav-sheet-in 0.32s var(--ease-out); }
.nav-sheet[hidden] { display: none; }
@keyframes nav-sheet-in { from { opacity: 0; translate: 0 -10px; } }
.nav-sheet__in { max-width: 640px; margin: 0 auto; }
.nav-sheet__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.nav-sheet__list > li { border-bottom: 1px solid var(--line); }
.nav-sheet__big { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 2px; text-decoration: none; color: #fff; }
.nav-sheet__big span { font: 600 clamp(26px, 7.2vw, 34px)/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.nav-sheet__big em { font: 400 13px/1.3 var(--font-ui); font-style: normal; color: var(--muted); text-align: right; }
.nav-sheet__big[aria-current="page"] span { color: var(--accent-lift); }
.nav-sheet__all { padding-bottom: 10px; }
.nav-sheet__cat { --c: var(--accent-rgb); --hi: 138, 149, 255; margin: 0 0 6px; border-radius: 14px; border: 1px solid rgba(var(--c), 0.3); background: rgba(var(--c), 0.07); }
.nav-sheet__cat summary { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; list-style: none; font: 600 15px/1 var(--font-ui); color: #fff; }
.nav-sheet__cat summary::-webkit-details-marker { display: none; }
.nav-sheet__cat summary i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--hi)); box-shadow: 0 0 10px rgb(var(--hi)); }
.nav-sheet__cat summary small { margin-left: auto; padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); font: 600 11px/1 var(--font-ui); color: var(--muted); }
.nav-sheet__cat summary::after { content: ""; width: 7px; height: 7px; margin-left: 4px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  rotate: 45deg; translate: 0 -2px; transition: rotate 0.3s var(--ease-out); }
.nav-sheet__cat[open] summary::after { rotate: 225deg; translate: 0 2px; }
.nav-sheet__cat ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; margin: 0; padding: 0 14px 12px; list-style: none; }
.nav-sheet__cat a { display: block; padding: 8px 0; font: 500 14px/1.3 var(--font-ui); color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.nav-sheet__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.nav-sheet__actions .pill { justify-content: center; }
.nav-sheet__lang { color: var(--muted); }
html.nav-open, html.nav-open body { overflow: hidden; }

/* every control in the header is a 44px tap target under 1100px (the logo's box grows without moving the mark) */
@media (max-width: 1100px) {
  .site-menu { display: none; }
  .nav-burger { display: block; width: 44px; height: 44px; flex-basis: 44px; }
  .nav-burger i:first-child { top: 17px; }
  .nav-burger i:last-child { top: 25px; }
  .nav-burger[aria-expanded="true"] i { top: 21px; }
  .site-actions .pill { height: 44px; padding: 0 16px; }
  .demo-logo { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin: -2px; }
}
@media (min-width: 1101px) { .nav-sheet { display: none !important; } }
@media (max-width: 600px) {
  .site-actions { gap: 6px; }
  .site-actions__in { display: none; }
  .site-actions .site-lang { display: none; }
  .site-actions .pill { padding: 0 14px; font-size: 13px; }
  .nav-sheet { padding-top: 76px; }
  .nav-sheet__cat ul { grid-template-columns: 1fr; }
  .nav-sheet__cat a { padding: 13px 0; }
  /* one header band on phones, dark enough that titles do not show through under the logo */
  .site-nav::before { height: 84px; background: linear-gradient(180deg, rgba(9, 9, 12, 0.97) 0%, rgba(9, 9, 12, 0.88) 62%, transparent 100%); }
}
@media (prefers-reduced-motion: reduce) { .nav-sheet { animation: none; } }

/* The site footer (markup: footer.mjs), shared by the homepage and every sub-page. */
/* ---------- footer: on the waves (tinted, never opaque), the giant MYTH wordmark lit from below ---------- */
.site-foot { position: relative; z-index: 1; overflow: hidden; isolation: isolate; margin-top: 0;
  background: linear-gradient(180deg, rgba(9, 9, 12, 0) 0%, rgba(9, 9, 12, 0.72) 120px, rgba(9, 9, 12, 0.84) 100%); }
.site-foot::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 20%, rgba(255, 255, 255, 0.16) 80%, transparent); }
.sf-in { width: calc(100vw - 2 * var(--gutter)); max-width: var(--v3-max, 1200px); margin: 0 auto; padding: 72px 0 28px; display: grid; gap: 52px; }
.sf-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.sf-logo { display: inline-flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; }
.sf-logo svg { width: 44px; height: 45px; fill: currentColor; }
.sf-logo span { font: 700 26px/1 var(--font-display); letter-spacing: 0.08em; }
.sf-about { max-width: 42ch; margin: 18px 0 22px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.sf-social { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-strong); color: var(--muted);
  background: rgba(255, 255, 255, 0.03); transition: color 0.25s, border-color 0.25s, background 0.25s, translate 0.3s var(--ease-out); }
.sf-social a:hover, .sf-social a:focus-visible { color: #fff; border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.18); translate: 0 -2px; }
.sf-social svg { width: 18px; height: 18px; fill: currentColor; }
.sf-news { justify-self: end; width: min(100%, 460px); display: grid; gap: 10px; padding: 22px; border-radius: 18px; border: 1px solid var(--line-strong);
  background: radial-gradient(120% 100% at 100% 0%, rgba(var(--accent-rgb), 0.16), transparent 60%), rgba(14, 15, 22, 0.6); }
.sf-news p { margin: 0; color: var(--muted); font-size: 14px; }
.sf-news__row { display: flex; gap: 8px; margin-top: 6px; }
.sf-news input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: rgba(9, 9, 12, 0.6);
  color: var(--text); font: 400 14px/1 var(--font-ui); }
.sf-news input::placeholder { color: var(--faint); }
.sf-news input:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 1px; border-color: transparent; }
.sf-news .pill { height: 44px; }
.sf-news__done { color: #9ee6c0 !important; }
.sf-news .sf-news__note { font-size: 12px; line-height: 1.5; color: var(--faint); }
.sf-news__note a { color: var(--muted); }
.sf-news.is-sent .sf-news__note { display: none; }
.sf-h { margin: 0; font: 600 11.5px/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.sf-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 32px; padding-top: 40px; border-top: 1px solid var(--line); }
.sf-col ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.sf-col a { font: 500 14.5px/1.3 var(--font-ui); color: rgba(255, 255, 255, 0.78); text-decoration: none; transition: color 0.2s; }
.sf-col a:hover, .sf-col a:focus-visible { color: #fff; }
.sf-col a span { color: var(--faint); font-size: 12px; }
.sf-offices a { display: grid; gap: 2px; }
.sf-offices a:hover b, .sf-offices a:focus-visible b { color: #fff; }
.sf-offices b { font: 500 14.5px/1.3 var(--font-ui); color: rgba(255, 255, 255, 0.82); }
.sf-offices span { font-size: 13px; color: var(--faint); }
/* the wordmark across the container: glass-white at the top fading into the base line, a thin category-gradient
   edge along its foot; the waves pass behind it */
.sf-word { position: relative; margin: 8px 0 -6px; text-align: center; pointer-events: none; user-select: none; overflow: hidden; }
.sf-word span { display: block; font: 700 min(25.4vw, 318px)/0.78 var(--font-display); letter-spacing: 0.015em; white-space: nowrap;
  color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0) 92%);
  -webkit-background-clip: text; background-clip: text; translate: 0 6%; }
.sf-word::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--pattern-rgb)) 22%, rgb(var(--product-rgb)) 50%, rgb(var(--studio-rgb)) 78%, transparent);
  box-shadow: 0 0 24px 2px rgba(var(--product-rgb), 0.55); opacity: 0.8; }
.sf-base { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 22px; border-top: 1px solid var(--line);
  font: 500 12.5px/1.4 var(--font-ui); color: var(--faint); }
.sf-base p { margin: 0; }
.sf-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.sf-legal a { color: var(--faint); text-decoration: none; transition: color 0.2s; }
.sf-legal a:hover, .sf-legal a:focus-visible { color: var(--text); }

/* the footer on tablets and phones */
@media (max-width: 900px) {
  .sf-in { padding-top: 56px; gap: 40px; }
  .sf-top { grid-template-columns: 1fr; gap: 32px; }
  .sf-news { justify-self: stretch; width: 100%; }
  .sf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .sf-col--offices { grid-column: span 2; }
  .sf-offices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; display: grid; }
}
/* touch screens: every footer link and icon is a 44px target (the list loses its gap to keep the same rhythm) */
@media (max-width: 1100px) and (pointer: coarse) {
  .sf-col ul { gap: 0; margin-top: 10px; }
  .sf-col a, .sf-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .sf-social a { width: 44px; height: 44px; }
  .sf-offices a { min-height: 44px; align-content: center; }
}
@media (max-width: 600px) {
  .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-col--offices { grid-column: 1 / -1; }
  .sf-news__row { flex-direction: column; }
  /* (stacked, a flex: 1 field would collapse to nothing) */
  .sf-news input { flex: none; }
  .sf-news .pill { justify-content: center; }
  .sf-base { flex-direction: column; align-items: flex-start; }
  .sf-legal { gap: 0 14px; }
}

/* The sub-pages' system, in the homepage's language: the same dark canvas with the waves running behind every section (no
   opaque sections or plates over them, no backdrop-filter on anything large: tinted rgba glass only), Oswald display
   type, Inter UI, the category hues (pattern blue, product violet, studio amber, Digi green) and the homepage's container
   (1200px, the gutter grows past it). Every page sizes its first screen by width AND height, so it holds from
   1440×900 down to 1440×600. */
:root { --v3-max: 1200px; --nav-h: 72px; --digi-rgb: var(--catalog-rgb); }
@property --gutter { syntax: '<length>'; inherits: true; initial-value: 16px; }
:root { --gutter: max(clamp(16px, 4vw, 56px), (100vw - var(--v3-max)) / 2); }

body { background: #09090c; }
/* nothing may widen the page sideways: on a phone, one element wider than the screen makes the browser zoom the whole
   page out (clip, not hidden, so position: sticky keeps working) */
html, body { overflow-x: clip; }
/* the waves' canvas is a fixed layer from the first paint (waves.js sets the same when it runs; until then a slow
   script would leave the canvas in the flow at 300x150 and push the page down) */
#mx-waves { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; }
/* if the scripts never arrive (a CDN that does not answer), whatever waits to be revealed shows anyway */
html.no-reveal [data-reveal] { opacity: 1 !important; translate: none !important; }
.mx-haze { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: background 1.2s;
  background: radial-gradient(60% 50% at 62% 48%, rgba(var(--spine-rgb, 79, 94, 255), 0.10), transparent 70%),
    radial-gradient(80% 45% at 50% 112%, rgba(var(--spine-rgb, 79, 94, 255), 0.14), transparent 70%); }
/* a soft scrim so long copy stays readable where the strands are brightest */
.mx-scrim { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 30% 50%, rgba(9, 9, 12, 0.34), transparent 75%); }
/* a flat black veil over the waves and the lights under them, under every section, so copy reads anywhere */
.mx-dim { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: rgba(0, 0, 0, 0.4); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
main.s-page { position: relative; z-index: 1; }
::selection { background: rgba(var(--accent-rgb), 0.55); color: #fff; }

/* ---------- layout ---------- */
.s-wrap { width: calc(100vw - 2 * var(--gutter)); margin-inline: auto; }
.s-sec { position: relative; padding-block: clamp(84px, 14vh, 150px); }
.s-sec--tight { padding-block: clamp(56px, 9vh, 96px); }
.s-grid { display: grid; gap: 16px; }
.s-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }

/* ---------- type ---------- */
.s-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 12px/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.s-kicker i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c, 138, 149, 255)); box-shadow: 0 0 14px rgb(var(--c, 138, 149, 255)); }
.s-title { margin: 0; font-size: clamp(52px, min(7.4vw, 14vh), 128px); line-height: 0.9; text-wrap: balance; }
.s-h2 { margin: 0; font-size: clamp(38px, min(4.8vw, 9.5vh), 80px); line-height: 0.92; text-wrap: balance; }
.s-h3 { margin: 0; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(22px, 1.9vw, 30px); line-height: 1; }
.s-lead { margin: 0; color: var(--muted); font-size: clamp(16px, min(1.3vw, 2.6vh), 19px); line-height: 1.55; max-width: 52ch; text-wrap: pretty; }
.s-body { color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.s-body p { margin: 0 0 1em; }
.s-head { display: grid; gap: 18px; justify-items: start; margin-bottom: clamp(36px, 6vh, 64px); }
.s-head--center { justify-items: center; text-align: center; }
.s-head--center .s-lead { text-align: center; }
.s-head--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
/* a highlighted word: the section's light tone (--hi) where it has one, else its hue */
.hl { color: rgb(var(--hi, var(--c, 138, 149, 255))); }

/* ---------- hero ---------- */
.s-hero { position: relative; padding-top: calc(var(--nav-h) + clamp(48px, 11vh, 130px)); padding-bottom: clamp(48px, 9vh, 110px); }
.s-hero__copy { display: grid; gap: clamp(16px, 2.6vh, 26px); justify-items: start; }
.s-hero--center .s-hero__copy { justify-items: center; text-align: center; }
.s-hero--center .s-lead { text-align: center; }
.s-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.s-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font: 500 13px/1 var(--font-ui); color: var(--faint); }
.s-crumbs a { color: var(--muted); text-decoration: none; }
.s-crumbs a:hover { color: var(--text); }
.s-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--faint); }

/* ---------- buttons and links ---------- */
.pill { cursor: pointer; transition: background 0.3s, border-color 0.3s, color 0.3s; }
.pill:hover { border-color: rgba(255, 255, 255, 0.34); }
.pill--accent:hover { background: #6170ff; }
.pill--lg { height: 52px; padding: 0 26px; font-size: 15px; }
.pill--light { background: #fff; color: #0b0b10; border-color: transparent; backdrop-filter: none; }
.pill--light:hover { background: #e9eaff; }
.s-more { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-ui); color: var(--text); text-decoration: none; }
.s-more::after { content: "→"; transition: translate 0.3s var(--ease-out); }
.s-more:hover::after, a:hover > .s-more::after { translate: 4px 0; }
.s-more--out::after { content: "↗"; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 2px; }

/* ---------- surfaces ---------- */
.s-card { --c: var(--accent-rgb); position: relative; border-radius: 20px; border: 1px solid rgba(var(--c), 0.24);
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--c), 0.16), transparent 62%), rgba(12, 13, 20, 0.74); }
.s-card--pad { padding: clamp(22px, 2.2vw, 32px); }
a.s-card { display: block; color: inherit; text-decoration: none; transition: border-color 0.35s, translate 0.45s var(--ease-out), box-shadow 0.45s; }
a.s-card:hover, a.s-card:focus-visible { border-color: rgba(var(--c), 0.6); translate: 0 -4px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 50px -18px rgba(var(--c), 0.8); }
.s-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  font: 500 12.5px/1 var(--font-ui); color: var(--muted); background: rgba(255, 255, 255, 0.03); white-space: nowrap; }
.s-chip--c { border-color: rgba(var(--c), 0.45); color: rgb(var(--hi, 220, 224, 255)); background: rgba(var(--c), 0.12); }
.s-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.s-badge { padding: 4px 7px 3px; border-radius: 6px; font: 700 10px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(var(--accent-rgb), 0.55); }
.s-media { --c: var(--accent-rgb); position: relative; overflow: hidden; border-radius: 20px; background: #0b0b10; border: 1px solid rgba(var(--c), 0.32);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 70px -24px rgba(var(--c), 0.7); }
.s-media > video, .s-media > img { width: 100%; height: 100%; object-fit: cover; }
.s-rule { height: 1px; border: 0; margin: 0; background: var(--line); }

/* ---------- segmented control / tabs ---------- */
.s-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: rgba(14, 15, 22, 0.78); }
.s-seg [role="tab"] { height: 38px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer; white-space: nowrap;
  font: 600 13.5px/1 var(--font-ui); color: var(--muted); transition: background 0.3s, color 0.3s; }
.s-seg [role="tab"]:hover { color: var(--text); }
.s-seg [role="tab"][aria-selected="true"] { background: #fff; color: #0b0b10; }
.s-seg [role="tab"] small { margin-left: 6px; font-size: 11px; color: #2ea86b; font-weight: 700; }
[role="tabpanel"][hidden] { display: none !important; }

/* ---------- FAQ ---------- */
.s-faq { border-top: 1px solid var(--line-strong); }
.s-faq details { border-bottom: 1px solid var(--line); }
.s-faq summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 24px; align-items: center; padding: 22px 4px; cursor: pointer;
  font: 500 clamp(16px, 1.25vw, 18.5px)/1.4 var(--font-ui); color: rgba(255, 255, 255, 0.92); transition: color 0.2s; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: ""; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat;
  transition: rotate 0.35s var(--ease-out), background-color 0.3s; }
.s-faq details[open] summary::after { rotate: 45deg; background-color: rgba(var(--accent-rgb), 0.3); }
.s-faq summary:hover { color: #fff; }
.s-faq__a { padding: 0 64px 26px 4px; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.s-faq__a p { margin: 0 0 0.8em; }
.s-faq__a p:last-child { margin: 0; }
.s-faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }

/* ---------- stats ---------- */
.s-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--line-strong); }
.s-stat { display: grid; gap: 8px; padding: 22px 20px 4px 0; }
.s-stat + .s-stat { padding-left: 20px; border-left: 1px solid var(--line); }
.s-stat b { font: 600 clamp(40px, min(4.4vw, 9vh), 72px)/0.9 var(--font-display); letter-spacing: 0.01em; }
.s-stat span { color: var(--muted); font-size: 14px; line-height: 1.45; max-width: 26ch; }

/* ---------- forms ---------- */
.s-form { display: grid; gap: 14px; }
.s-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.s-field { display: grid; gap: 7px; }
.s-field > span { font: 600 12px/1 var(--font-ui); letter-spacing: 0.06em; color: var(--muted); }
.s-input { width: 100%; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(9, 9, 12, 0.6); color: var(--text);
  font: 400 15px/1.4 var(--font-ui); transition: border-color 0.2s, background 0.2s; }
textarea.s-input { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; }
.s-input::placeholder { color: var(--faint); }
.s-input:hover { border-color: rgba(255, 255, 255, 0.28); }
.s-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 500 14px/1.3 var(--font-ui); color: rgba(255, 255, 255, 0.84); }
.s-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.s-toggle { display: inline-flex; }
.s-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.s-toggle span { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); cursor: pointer;
  font: 500 13.5px/1 var(--font-ui); color: var(--muted); background: rgba(255, 255, 255, 0.03); transition: all 0.25s; }
.s-toggle input:checked + span { color: #fff; border-color: rgba(var(--accent-rgb), 0.8); background: rgba(var(--accent-rgb), 0.28); }
.s-toggle input:focus-visible + span { outline: 2px solid var(--accent-lift); outline-offset: 2px; }

/* ---------- closing call to action ---------- */
.s-close { position: relative; padding: clamp(110px, 20vh, 220px) 0 clamp(90px, 15vh, 160px); text-align: center; }
.s-close__in { display: grid; gap: 22px; justify-items: center; }
.s-close__title { margin: 0; font-size: clamp(48px, min(7.6vw, 14vh), 132px); line-height: 0.9; text-wrap: balance; max-width: 14ch; }
.s-close .lead { text-align: center; margin: 0; }
.s-close .s-ctas { justify-content: center; margin-top: 8px; }

/* ---------- reveal on scroll (only with JS; the content is all there without it) ---------- */
html.js [data-reveal] { opacity: 0; translate: 0 26px; transition: opacity 0.9s var(--ease-out), translate 1s var(--ease-out); transition-delay: calc(var(--ri, 0) * 70ms); }
html.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1; translate: none; } }

/* a bar pinned under the header lays a band behind itself while it is stuck (site.js sets .is-stuck) */
[data-pinbar]::before { content: ""; position: absolute; left: 50%; top: -80px; width: 100vw; height: calc(100% + 80px + 40px); margin-left: -50vw; z-index: -1;
  pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: linear-gradient(180deg, rgba(9, 9, 12, 0.97) 0%, rgba(9, 9, 12, 0.92) 72%, rgba(9, 9, 12, 0) 100%); }
[data-pinbar].is-stuck::before { opacity: 1; }

/* copy over the waves: a soft dark halo keeps it readable where a bright strand passes behind (never on gradient text,
   whose transparent glyphs would show the shadow through) */
main.s-page :is(p, li, dd, summary, figcaption) { text-shadow: 0 0 16px rgba(9, 9, 12, 0.6), 0 1px 2px rgba(9, 9, 12, 0.45); }
main.s-page :is(.accent-word, .pill, .s-chip, .s-badge) { text-shadow: none; }

/* a jump target takes focus so the keyboard follows it; it needs no ring of its own */
[tabindex="-1"]:focus { outline: none; }

/* ---------- tablets and phones (the header folds at 1100px in menu.css; 900px: tablets, two columns stack; 600px:
   phones). Pages add their own rules at the same three widths. ---------- */
@media (max-width: 1100px) {
  :root { --nav-h: 68px; }
}
@media (max-width: 900px) {
  .s-grid--3, .s-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-split, .s-faq-wrap { grid-template-columns: 1fr; }
  .s-head--row { grid-template-columns: 1fr; align-items: start; }
  .s-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .s-form__row { grid-template-columns: 1fr; }
  .s-sec { padding-block: clamp(64px, 10vh, 110px); }
}
@media (max-width: 600px) {
  :root { --nav-h: 64px; }
  .s-grid--2, .s-grid--3, .s-grid--4 { grid-template-columns: 1fr; }
  .s-hero { padding-top: calc(var(--nav-h) + 36px); padding-bottom: 48px; }
  .s-title { font-size: clamp(40px, 12.5vw, 64px); }
  .s-h2 { font-size: clamp(32px, 9.6vw, 48px); }
  .s-h3 { font-size: 22px; }
  .s-lead { font-size: 16px; }
  .s-head { margin-bottom: 32px; }
  .s-sec { padding-block: 64px; }
  .s-ctas { width: 100%; }
  .s-ctas .pill { flex: 1 1 auto; justify-content: center; }
  .pill--lg { height: 48px; padding: 0 20px; font-size: 15px; }
  .s-faq summary { padding: 18px 2px; gap: 14px; }
  .s-faq__a { padding: 0 2px 22px; }
  .s-stats { grid-template-columns: 1fr; }
  .s-stat + .s-stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .s-close { padding: 96px 0 72px; }
  .s-close__title { font-size: clamp(40px, 12.5vw, 64px); }
  .s-card--pad { padding: 20px; }
  .s-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
}