/* Self-hosted fonts (cyrillic, latin, latin-ext subsets) */
/* Chakra Petch 400, latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/chakra-petch-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chakra Petch 400, latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/chakra-petch-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Chakra Petch 500, latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/chakra-petch-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chakra Petch 500, latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/chakra-petch-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Chakra Petch 600, latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/chakra-petch-latin-ext-600.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chakra Petch 600, latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/chakra-petch-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Chakra Petch 700, latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/chakra-petch-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chakra Petch 700, latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/chakra-petch-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 300, cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter-cyrillic-var.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Inter 300, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 300, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 400, cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-cyrillic-var.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Inter 400, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 400, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 500, cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-cyrillic-var.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Inter 500, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 500, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 600, cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-cyrillic-var.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Inter 600, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 600, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 700, cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-cyrillic-var.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Inter 700, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 700, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono 400, cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic-var.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* JetBrains Mono 400, latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 400, latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono 500, cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-cyrillic-var.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* JetBrains Mono 500, latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-var.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 500, latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#D9DCE1; --bg-2:#C7CBD2; --panel:#EFF1F4;
  --ink:#0C1116; --ink-2:#2B323C; --dim:#6E737B;
  --line:#B2B7BF; --line-2:#9AA0A8;
  --steel-hi:#F5F7FA; --steel-md:#C6CAD0; --steel-lo:#8E939B;
  --led:#3CC9FF; --led-strong:#0AA8E8;
  --warn:#FF4D3D;
  --sport:#2A6BFF; --vehicle:#1A3DB8; --work:#596170;
  color-scheme: light;
  --display:"Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
section[id]{ scroll-margin-top:84px }
html,body{ background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased }
body{
  padding:0; margin:0;
  font-size:15px; line-height:1.55;
  overflow-x:hidden;
  background:
    radial-gradient(1200px 800px at 20% 10%, color-mix(in oklab, var(--steel-hi) 55%, transparent), transparent 60%),
    radial-gradient(900px 700px at 90% 30%, color-mix(in oklab, var(--bg-2) 80%, transparent), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% -30%,
      color-mix(in oklab, var(--bg) 100%, transparent) 0deg 0.6deg,
      color-mix(in oklab, var(--bg-2) 70%, var(--bg)) 0.6deg 1.2deg),
    var(--bg);
  background-attachment: fixed;
}
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); background:var(--bg); z-index:30 }
a{color:inherit; text-decoration:none}
::selection{background:var(--led); color:#0C1116}
img{max-width:100%}

.tiles{
  display:inline-block;
  width: calc(1.4em * 1500 / 285);
  max-width: 100%;
  aspect-ratio: 1500 / 285;
  height: auto;
  background: url('/mayln-wordmark.webp') center/contain no-repeat;
  vertical-align:middle;
}
.tile{
  width:1em; height:1em; padding:.085em;
  display:inline-flex; align-items:center; justify-content:center;
  background:
    conic-gradient(from 40deg at 30% 30%, rgba(255,255,255,.12) 0%, rgba(0,0,0,.05) 25%, rgba(255,255,255,.1) 50%, rgba(0,0,0,.05) 75%, rgba(255,255,255,.12) 100%),
    linear-gradient(145deg, #B5BAC1 0%, #8F949C 50%, #A0A5AD 100%);
  border-radius:10%;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.75),
    inset 0 -2px 3px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(0,0,0,.22),
    0 2px 4px rgba(0,0,0,.32),
    0 10px 20px rgba(10,16,24,.25);
  position:relative;
}
.tile .face{
  flex:1; align-self:stretch;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700;
  color: transparent;
  -webkit-text-stroke: 0.05em #3F454D;
  background:
    radial-gradient(ellipse 110% 100% at 45% 30%, #F2F5F9 0%, #D8DCE2 55%, #BFC4CB 100%);
  border-radius:7%;
  box-shadow:
    inset 0 3px 3px rgba(0,0,0,.4),
    inset 0 -2px 2px rgba(255,255,255,.4),
    inset 0 0 0 1px rgba(0,0,0,.28);
  text-shadow:
    0 1px 0 rgba(255,255,255,.4),
    0 -1px 1px rgba(0,0,0,.25);
}
.tile::after{ content:""; position:absolute; top:6%; left:9%; right:9%; height:30%; border-radius:7% 7% 5% 5%; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events:none; z-index:3 }
.tile.led::before{
  content:""; position:absolute; top:-2px; right:14%;
  width:.14em; height:.14em; border-radius:999px;
  background: var(--led);
  box-shadow: 0 0 .06em #fff, 0 0 .18em var(--led), 0 0 .35em var(--led-strong), 0 0 .6em color-mix(in oklab, var(--led) 60%, transparent);
  animation: blink 3.2s infinite;
}
@keyframes blink{ 0%,70%,100%{ opacity:1 } 76%,82%{ opacity:.25 } }
@media (prefers-reduced-motion: reduce){ .tile.led::before{ animation:none } }

.wrap{
  max-width:1320px; margin:0 auto;
  padding-left:max(24px, env(safe-area-inset-left, 0px));
  padding-right:max(24px, env(safe-area-inset-right, 0px));
}
section{ padding:88px 0 }
section + section{ border-top:1px solid var(--line) }
@media (max-width:640px){ section{ padding:56px 0 } }

.nav-band{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:25;
  background:color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
  width:100%;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px; gap:16px;
}
.mark{ display:inline-flex; align-items:center; gap:12px; font-size:34px }
.mark .tiles{ font-size:34px; gap:.14em }
.mark .tile{
  border-radius:12%;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.9),
    inset 0 -2px 3px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(0,0,0,.1),
    0 2px 4px rgba(0,0,0,.3),
    0 8px 18px rgba(10,16,24,.22);
}
.mark .tile .face{ -webkit-text-stroke: 0.5px currentColor; letter-spacing:-0.01em; border-radius:9% }
.nav > ul{ display:flex; gap:28px; list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em }
.nav > ul a{ transition:color .15s ease } .nav > ul a:hover{ color:var(--ink) }
.nav .controls{ display:inline-flex; gap:8px; align-items:center }
.chip{
  min-width:36px; height:36px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--panel); border:1px solid var(--line-2); border-radius:8px;
  cursor:pointer; color:var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  transition: background .15s, color .15s;
}
.chip:hover, .chip[aria-expanded="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink) }
.chip .caret{ width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); margin-left:4px }
.lang{ position:relative }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:30;
  min-width:190px; margin:0; padding:6px; list-style:none;
  background:var(--panel); border:1px solid var(--line-2); border-radius:10px;
  box-shadow: 0 14px 36px rgba(10,16,24,.2), inset 0 1px 0 rgba(255,255,255,.5);
}
.lang-menu a{
  width:100%; display:flex; align-items:center; gap:12px;
  padding:9px 10px; background:none; border:0; border-radius:6px;
  cursor:pointer; color:var(--ink); font-family:var(--sans); font-size:14px; text-align:left;
}
.lang-menu a:hover, .lang-menu a:focus-visible{ background:var(--bg); outline:none }
.lang-menu .code{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--dim); width:22px }
.lang-menu a[aria-current="page"], .lang-menu a[aria-current="page"] .code{ color:var(--led-strong); font-weight:600 }
@media (max-width:860px){ .nav > ul{ display:none } }
@media (max-width:640px){ .mark .tiles{ font-size:26px } }

.eyebrow{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--dim); display:inline-flex; align-items:center; gap:10px }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--dim) }

.hero{ padding-top:32px }
.hero .wordmark{ display:flex; justify-content:flex-start; align-items:center; margin: 4px 0 24px; max-width:100% }
.hero .wordmark .tiles{ font-size: clamp(40px, 11vw, 140px) }
.hero h1{
  font-family:var(--display); font-weight:600;
  font-size: clamp(32px, 5vw, 60px);
  line-height:1.02; letter-spacing:-0.01em; margin:16px 0 0;
  text-wrap:balance; max-width: 22ch;
}
.hero h1 .accent{ color: var(--led-strong) }

.hero .sub{ display:grid; grid-template-columns: 1.1fr 1fr; gap:48px; margin-top:40px; min-width:0 }
.hero .sub p{ font-size:17px; line-height:1.5; max-width:46ch; color:var(--ink-2); margin:0 }
.hero .sub p + p{ color:var(--dim) }
@media (max-width:780px){ .hero .sub{ grid-template-columns:1fr; gap:20px } }

.modules .lead{ display:grid; grid-template-columns:1fr 1.4fr; gap:48px; margin-bottom:40px; align-items:end }
.modules h2{ font-family:var(--display); font-weight:600; font-size: clamp(34px, 5vw, 60px); line-height:1.02; letter-spacing:-0.01em; margin:12px 0 0; text-wrap:balance }
.modules .lead p{ color:var(--dim); font-size:16px; max-width:52ch; margin:0 }
@media (max-width:860px){ .modules .lead{ grid-template-columns:1fr; gap:16px } }

/* Panels: full-width horizontal bands */
.stack{ display:flex; flex-direction:column; gap:16px }
.panel{
  display:flex; flex-direction:row; align-items:stretch;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  min-height:200px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 10px rgba(10,16,24,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  position:relative; overflow:hidden;
  cursor:pointer;
}
.panel:hover{ transform:translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px rgba(10,16,24,.12) }
.panel:focus-visible{ outline: 2px solid var(--led); outline-offset: 2px }
.panel::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background: var(--stripe, var(--led)); box-shadow: 0 0 20px color-mix(in oklab, var(--stripe, var(--led)) 60%, transparent); z-index:2 }

.panel .banner{
  width: 300px; flex-shrink:0;
  border-right: 1px solid var(--line);
  overflow:hidden; position:relative;
  background:
    radial-gradient(ellipse 150% 90% at 50% 40%, #F4F6F9 0%, #D5D9DE 45%, #9DA2AA 100%);
  display:flex; align-items:center; justify-content:center;
}
.panel .banner img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block }
.panel .banner.css{ flex-direction:column; gap:14px; padding:20px }
.panel .banner.css .tiles{ font-size:40px }
.panel .banner.css .sub{
  font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:.32em;
  color: #2B323C;
  text-shadow: 0 1px 0 rgba(255,255,255,.65), 0 2px 3px rgba(0,0,0,.25);
}

.panel .content{
  flex:1; min-width:0; padding:26px 28px;
  display:flex; flex-direction:column; gap:14px;
}
.panel .top{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim) }
.panel .top .idx{ color:var(--ink) }
.panel .top .brand-tag{ font-family:var(--display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:13px; color: var(--stripe, var(--ink)) }
.panel h3{ font-family:var(--display); font-weight:600; font-size:26px; line-height:1.1; letter-spacing:-0.01em; margin:0 }
.panel p.desc{ color:var(--dim); font-size:14.5px; line-height:1.55; margin:0; max-width:62ch }
.panel .foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:16px; border-top:1px dashed var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--dim); text-transform:uppercase }
.panel .foot .arrow{ width:32px; height:32px; border-radius:999px; border:1px solid var(--line-2); display:inline-flex; align-items:center; justify-content:center; color:var(--ink); background:var(--bg); transition: all .2s ease }
.panel:hover .foot .arrow{ background:var(--ink); color:var(--bg); border-color:var(--ink) }

.p-sport   { --stripe: var(--sport) }
.p-alarm   { --stripe: var(--warn) }
.p-home    { --stripe: var(--steel-lo) }
.p-vehicle { --stripe: var(--vehicle) }
.p-work    { --stripe: var(--work) }

@media (max-width:780px){
  .panel{ flex-direction:column }
  .panel .banner{ width:auto; height:140px; border-right:none; border-bottom:1px solid var(--line) }
  .panel .content{ padding:22px }
}

/* Toast — centered release-soon modal */
.toast-backdrop{
  position:fixed; inset:0; background:rgba(50,60,70,.35); backdrop-filter: blur(8px);
  opacity:0; pointer-events:none; transition: opacity .25s ease; z-index:40;
}
.toast-backdrop.show{ opacity:1; pointer-events:auto; cursor:pointer }
.toast{
  position:fixed; left:50%; top:50%;
  transform: translate(-50%, -50%) scale(.94);
  background: var(--bg); color: var(--ink);
  padding: 44px 56px; border-radius: 18px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  min-width: 320px; max-width: 90vw; text-align:center;
  opacity:0; pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 41;
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5);
  border:1px solid var(--line);
}
.toast.show{ opacity:1; transform: translate(-50%, -50%) scale(1) }
.toast .mark-row{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center;
}
.toast .mark-row .tiles{ font-size: clamp(42px, 7vw, 72px) }
.toast .mark-row .sub{
  font-family:var(--display); font-weight:700;
  font-size: clamp(32px, 5vw, 52px); letter-spacing:.14em;
  color: var(--ink); line-height:1;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.toast .status{ color: var(--led-strong) }
.toast .status{
  font-family:var(--mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--led);
  display:inline-flex; align-items:center; gap:12px;
}
.toast .status .pulse{
  width:9px; height:9px; border-radius:999px; background:var(--led);
  box-shadow: 0 0 12px var(--led), 0 0 24px color-mix(in oklab, var(--led) 50%, transparent);
  animation: toast-pulse 1.4s infinite;
}
@keyframes toast-pulse{
  0%,100%{ opacity:1; transform:scale(1) }
  50%{ opacity:.6; transform:scale(1.4) }
}
@media (prefers-reduced-motion: reduce){ .toast .status .pulse{ animation:none } }

/* Philosophy: full-bleed graphite band, echoing the dark M tile of the logo */
.manifesto{
  --g-bg:#3A3F45; --g-fg:#ECEFF3; --g-dim:#A3ABB4; --g-line:rgba(255,255,255,.14);
  position:relative; color:var(--g-fg); border-top:none;
  padding-block:104px;
  background:#3A3F45;
  box-shadow: 0 0 0 100vmax #3A3F45;
  clip-path: inset(0 -100vmax);
}
section.manifesto + section, .manifesto + footer{ border-top:none }
.manifesto .eyebrow{ color:var(--g-dim) }
.manifesto .eyebrow::before{ background:var(--g-dim) }
.manifesto h2{
  font-family:var(--display); font-weight:600;
  font-size: clamp(40px, 6.4vw, 84px); line-height:1; letter-spacing:-0.02em;
  margin: 18px 0 72px; text-wrap:balance; max-width:16ch;
}
.manifesto h2 .accent{ color:var(--led) }
.tenets{ display:grid; grid-template-columns: repeat(3, 1fr); gap:40px }
.tenet{ min-width:0; padding-top:24px; border-top:1px solid var(--g-line); position:relative }
.tenet::before{
  content:""; position:absolute; top:-1px; left:0; width:48px; height:2px;
  background:var(--led); box-shadow:0 0 12px var(--led);
}
.tenet-code{
  font-family:var(--display); font-weight:500; font-size:56px; line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--g-dim);
  margin-bottom:28px;
}
.tenet h3{
  font-family:var(--display); font-weight:600;
  font-size: clamp(24px, 2.4vw, 32px); line-height:1.1; letter-spacing:-0.01em;
  margin:0; color:var(--g-fg);
}
.tenet p{ color:var(--g-dim); font-size:16px; line-height:1.6; margin:14px 0 0; max-width:38ch }
@media (max-width:860px){
  .tenets{ grid-template-columns:1fr; gap:48px }
  .manifesto h2{ margin-bottom:48px }
}

.closing{ padding:110px 0; display:grid; gap:40px }
.closing .stamp{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap }
.closing .stamp .ok{ color: var(--led-strong); display:inline-flex; align-items:center; gap:8px }
.closing .stamp .ok::before{ content:""; width:7px; height:7px; border-radius:999px; background:var(--led); box-shadow:0 0 10px var(--led) }
.closing .wordmark{ display:flex; align-items:center }
.closing .wordmark .tiles{ font-size: clamp(56px, 11vw, 140px) }
.closing h2{ font-family:var(--display); font-weight:600; font-size: clamp(32px, 4.6vw, 56px); line-height:1.05; letter-spacing:-0.01em; margin:16px 0 0; max-width:20ch }
.closing h2 .accent{ color: var(--led-strong) }

.form-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4) }
.form-row input{ flex:1; min-width:220px; background:var(--bg); color:var(--ink); border:1px solid var(--line-2); border-radius:8px; padding:14px 16px; font-family:var(--mono); font-size:13px; outline:none }
.form-row input:focus{ border-color:var(--led); box-shadow: 0 0 0 3px color-mix(in oklab, var(--led) 25%, transparent) }
.btn{ font-family:var(--display); font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; padding:14px 20px; border:1px solid var(--ink); border-radius:8px; color:var(--bg); background:var(--ink); display:inline-flex; align-items:center; gap:10px; cursor:pointer; transition: transform .12s ease, background .12s }
.btn:hover{ transform:translateY(-1px); background:var(--led-strong); border-color:var(--led-strong); color:#fff }
.ok-msg{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color: var(--led-strong); text-transform:uppercase }

/* Footer: darker graphite band continuing the philosophy block */
.site-foot{
  --f-fg:#ECEFF3; --f-dim:#99A1AA; --f-line:rgba(255,255,255,.12);
  color:var(--f-dim); font-size:14px;
  padding-block: 56px calc(32px + env(safe-area-inset-bottom, 0px));
  background:#2C3035;
  box-shadow: 0 0 0 100vmax #2C3035;
  clip-path: inset(0 -100vmax);
}
.foot-top{
  display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:center;
  padding-bottom:40px; border-bottom:1px solid var(--f-line);
}
.foot-mark{ display:inline-flex }
.foot-mark .tiles{ font-size:26px }
.foot-top p{ margin:0; max-width:46ch; line-height:1.55 }
.foot-links{ display:flex; gap:28px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase }
.foot-links a{ color:var(--f-fg); transition:color .15s ease }
.foot-links a:hover, .foot-links a:focus-visible{ color:var(--led) }
.foot-bottom{
  display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; padding-top:24px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}
.foot-bottom .copy{ color:var(--f-fg) }
@media (max-width:860px){ .foot-top{ grid-template-columns:1fr; gap:24px } }
@media (max-width:860px){ footer{ grid-template-columns: 1fr 1fr } }
@media (max-width:480px){ footer{ grid-template-columns: 1fr } }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
[hidden]{ display:none !important }

/* Footer legal links */
.foot-legal{ display:flex; gap:20px; flex-wrap:wrap }
.foot-legal a{ color:var(--f-dim); transition:color .15s ease }
.foot-legal a:hover, .foot-legal a:focus-visible{ color:var(--led) }

/* Legal pages */
.legal{ padding-block:64px 96px; max-width:72ch }
.legal h1{ font-family:var(--display); font-weight:600; font-size:clamp(34px, 5vw, 56px); line-height:1.05; letter-spacing:-0.01em; margin:12px 0 20px; text-wrap:balance }
.legal .intro{ font-size:18px; line-height:1.55; color:var(--ink-2); margin:0 0 24px }
.legal h2{ font-family:var(--display); font-weight:600; font-size:22px; line-height:1.2; margin:40px 0 10px }
.legal p{ color:var(--ink-2); font-size:16px; line-height:1.65; margin:0 0 12px }
.legal a{ color:var(--led-strong); text-decoration:underline; text-underline-offset:3px }
.legal .card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-top:12px; line-height:1.6; color:var(--ink) }
.legal dl{ display:grid; grid-template-columns:max-content 1fr; gap:14px 28px; margin:32px 0 0; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:24px }
.legal dt{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding-top:4px }
.legal dd{ margin:0; line-height:1.6; min-width:0; overflow-wrap:anywhere }
@media (max-width:560px){ .legal dl{ grid-template-columns:1fr; gap:4px } .legal dd{ margin-bottom:12px } }