/* uMax. One reference followed closely: light cool-grey page, white cards with hairline borders,
   glossy icon tiles joined by thin lines, tight display headings. One accent colour (coral), the rest graphite and white.
   Dark theme keeps the same structure on graphite. */

@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/inter-tight-cyrillic.3937173d62.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/inter-tight-latin.77fefe8ca1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/assets/manrope-cyrillic.c268b459a9.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/assets/manrope-latin.a30ddcd349.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: #f3f4f7;
  --hero: #ffffff;
  --card: #ffffff;
  --card-2: #f1f2f5;
  --field: #f6f7f9;
  --line: #e5e6eb;
  --line-2: #d9dae1;
  --net: #dcdde3;
  --ink: #0b0b0d;
  --ink-2: #33343b;
  --muted: #676a75;
  --red: #ef4136;
  --red-ink: #c8352b;
  --black: #0b0b0d;
  --on-black: #ffffff;
  --rim: #ffffff;
  --shadow: 0 1px 2px rgba(16, 17, 24, .05), 0 14px 34px -18px rgba(16, 17, 24, .22);
  --shadow-lg: 0 2px 4px rgba(16, 17, 24, .05), 0 30px 60px -28px rgba(16, 17, 24, .32);
  --edge: rgba(11, 11, 13, .14);
  --arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(16, 17, 24, .04), 0 22px 44px -30px rgba(16, 17, 24, .28);
  --head: 'Inter Tight', 'Manrope', system-ui, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0c0c0f;
  --hero: #111115;
  --card: #151519;
  --card-2: #1d1d22;
  --field: #1a1a1f;
  --line: #25252c;
  --line-2: #33333b;
  --net: #2c2c34;
  --ink: #f4f4f6;
  --ink-2: #d0d1d7;
  --muted: #9b9ca7;
  --red-ink: #ff7a6e;
  --black: #f4f4f6;
  --on-black: #0b0b0d;
  --rim: #24242a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 34px -18px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 60px -28px rgba(0, 0, 0, .8);
  --edge: rgba(255, 255, 255, .16);
  --arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .4), 0 22px 44px -30px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
html.locked { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: transparent; color: var(--ink); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4 { margin: 0; font-family: var(--head); font-weight: 600; color: var(--ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[data-theme="light"] .for-dark, [data-theme="dark"] .for-light { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--black); color: var(--on-black); border-radius: 10px; }
.skip:focus { top: 16px; }
.skip-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; border: 1px solid transparent; border-radius: 12px; font: 500 16px/1 var(--body); white-space: nowrap; transition: translate .25s var(--ease), box-shadow .25s var(--ease), background-color .25s; }
.btn:hover { translate: 0 -1px; }
.btn:active { translate: 0 1px; }
.btn-xl { height: 58px; min-width: 276px; padding: 0 32px; font-size: 18px; border-radius: 12px; }
.btn-black { background: var(--black); color: var(--on-black); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 16px -10px rgba(0, 0, 0, .6); }
.btn-red { background-color: #d4372c; background-image: linear-gradient(180deg, #f2574b, #d4372c); border-color: #c4322a; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 12px 22px -14px rgba(16, 17, 24, .55); }
/* Secondary button: white with a fine dark edge and a black circle with an arrow; on hover it turns black. */
.btn-ghost { background: var(--card); border: 1px solid var(--edge); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 17, 24, .06), inset 0 -2px 0 rgba(16, 17, 24, .03); transition: translate .25s var(--ease), background-color .25s, color .25s, border-color .25s; }
.btn-ghost:not(.icon-btn) { padding-right: 9px; gap: 14px; }
.btn-ghost:not(.icon-btn)::after { content: ''; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--black) var(--arrow-light) center / 15px no-repeat; transition: rotate .35s var(--ease), background-color .25s; }
.btn-xl.btn-ghost::after { width: 40px; height: 40px; }
.btn-ghost:not(.icon-btn):hover { background: var(--black); border-color: var(--black); color: var(--on-black); }
.btn-ghost:not(.icon-btn):hover::after { rotate: 45deg; background-color: var(--on-black); background-image: var(--arrow-dark); }
.icon-btn.btn-ghost:hover { border-color: var(--ink); }
.btn .arr { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 12px; }
.icon-btn svg { width: 19px; height: 19px; }
[data-theme="light"] .icon-btn .sun, [data-theme="dark"] .icon-btn .moon { display: none; }
.round-btn { display: inline-grid; place-items: center; width: 58px; height: 58px; padding: 0; border-radius: 50%; background: var(--card); border: 1px solid var(--edge); color: var(--ink); box-shadow: var(--shadow); transition: translate .25s var(--ease), background-color .25s, color .25s; }
.round-btn:hover { translate: 0 -2px; background: var(--black); border-color: var(--black); color: var(--on-black); }
.round-btn svg { width: 18px; height: 18px; }

/* Glossy tiles: a soft gradient, a light top edge and a neutral shadow under them. */
.gl { --g1: #fff; --g2: #f6f6f8; position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 22%; background-color: var(--g2); background-image: linear-gradient(180deg, var(--g1), var(--g2)); color: #fff; box-shadow: inset 0 2px 1px rgba(255, 255, 255, .45), inset 0 -6px 14px rgba(0, 0, 0, .08), 0 1px 2px rgba(16, 17, 24, .1), 0 18px 30px -16px rgba(16, 17, 24, .45); }
.gl svg { width: 46%; height: 46%; }
/* Every small tile wears the same white ceramic finish; only the main tile on a first screen is solid black.
   The colours are tokens, set in the palette block at the end of this file. */
.gl-y, .gl-c, .gl-r, .gl-p, .gl-w { --g1: var(--tile1); --g2: var(--tile2); color: var(--tile-ink); border: 1px solid var(--tile-edge); }
.gl-main { --g1: var(--main1); --g2: var(--main2); color: var(--main-ink); border: 0; }
.gl-xs { width: 36px; flex: none; border-radius: 10px; }
.gl-xs svg { width: 54%; height: 54%; }
.gl-sm { width: 60px; border-radius: 17px; font-size: 18px; }
.gl-mid { width: 92px; border-radius: 24px; }
.gl-main { border-radius: 19%; }
.gl-main .tick { width: 50%; height: 50%; }
/* A white tile with a coloured mark, above section headings. */
.tile-w { display: grid; place-items: center; width: 108px; height: 108px; margin: 0 auto 30px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.gl-flat { width: 50%; background: none; box-shadow: none; border: 0; }
.tile-w .gl-flat { background-color: transparent; }
.gl-flat svg { width: 100%; height: 100%; }
.gl-flat.gl-p, .gl-flat.gl-r { color: var(--ink); }
.gl-ring { background: var(--card); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow); }

/* Menu: one white pill with the logo, links and two buttons. */
.nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.nav-in { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 4px; width: min(940px, 100%); height: 68px; padding: 0 9px 0 22px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px -18px rgba(16, 17, 24, .3); }
.logo { margin-right: 26px; font: 700 23px/1 var(--head); letter-spacing: -.035em; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > a, .nav-item > button { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font: 500 15.5px/1 var(--body); color: var(--ink); transition: background-color .2s; }
.nav-links > a:hover, .nav-item > button:hover, .nav-item.open > button { background: var(--card-2); }
.chev { width: 12px; height: 12px; transition: rotate .25s; }
.nav-item.open .chev { rotate: 180deg; }
.nav-gap { flex: 1; }
.nav-order { height: 48px; padding: 0 20px; font-size: 15.5px; margin-left: 6px; }
.burger { display: none; }
.fly { position: absolute; top: calc(100% + 10px); left: 50%; width: min(1000px, calc(100vw - 32px)); translate: -50% 0; display: none; }
.nav-item.open .fly { display: block; }
.fly-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); }
.fly-col h3 { padding: 6px 10px 8px; font: 500 13.5px/1.2 var(--body); color: var(--muted); }
.fly-col a { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 14px; transition: background-color .2s; }
.fly-col a:hover { background: var(--card-2); }
.fly-col b { display: block; font: 600 15px/1.25 var(--body); }
.fly-col small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(12, 12, 18, .12); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.m-menu { display: none; }

/* Network of tiles. Positions are percentages of a 1340x340 box (see NET_LINES in build.mjs). */
.net { position: relative; width: min(1340px, 100%); aspect-ratio: 1340 / 340; margin: 0 auto; }
.net-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net-lines path { fill: none; stroke: var(--net); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.net-lines circle { fill: var(--accent); }
.nt { position: absolute; display: block; transition: translate .35s var(--ease); }
a.nt:hover, a.nt:focus-visible { translate: 0 -5px; z-index: 2; }
.nt-l { left: 1.12%; top: 31.5%; width: 10.15%; }
.nt-y { left: 14.93%; top: 5.29%; width: 5.97%; }
.nt-c { left: 17.31%; top: 63.2%; width: 7.91%; }
.nt-main { left: 42.99%; top: 24.7%; width: 13.43%; }
.nt-r { left: 74.25%; top: 7.35%; width: 7.91%; }
.nt-e { left: 88.13%; top: 31.47%; width: 10%; }
.nt-f { left: 78.5%; top: 73.2%; width: 6.12%; }
.nt .gl, .nt .ph { animation: bob 6s ease-in-out infinite; }
.nt-y .gl { animation-duration: 5.2s; }
.nt-c .gl { animation-duration: 6.6s; animation-delay: -2s; }
.nt-r .gl { animation-duration: 5.8s; animation-delay: -1s; }
.nt-e .gl { animation-duration: 7s; animation-delay: -3s; }
.nt-f .ph { animation-duration: 5.4s; animation-delay: -2.5s; }
.nt-main .gl { animation-duration: 8s; }
@keyframes bob { 50% { translate: 0 -6px; } }
.ph { display: block; overflow: hidden; aspect-ratio: 1; border: 4px solid var(--rim); border-radius: 20%; background: var(--card-2); box-shadow: 0 1px 2px rgba(16, 17, 24, .08), 0 20px 34px -18px rgba(16, 17, 24, .45); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.cap { position: absolute; left: 50%; top: calc(100% + 12px); translate: -50% 0; font: 500 13px/1.2 var(--body); color: var(--muted); white-space: nowrap; transition: color .2s; }
a.nt:hover .cap, a.nt:focus-visible .cap { color: var(--ink); }
/* (motion for the network, headings and reveals lives in the Motion section at the end) */

/* First screen */
.hero { padding: 112px 24px 40px; background: linear-gradient(var(--hero) 62%, transparent); text-align: center; overflow: clip; }
.hero-copy { position: relative; margin-top: 8px; }
.hero h1 { max-width: 8.4em; margin: 0 auto; font-size: clamp(46px, 6.2vw, 86px); line-height: .98; letter-spacing: -.045em; }
.hero-copy > p { max-width: 460px; margin: 22px auto 30px; font-size: 19px; line-height: 1.45; color: var(--muted); }
.hero .btn-red { min-width: 276px; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero .cta-row .btn { min-width: 236px; }
/* True facts under the buttons, each with a small black tick. */
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 24px auto 0; padding: 0; list-style: none; font: 500 14.5px/1.3 var(--body); color: var(--ink-2); }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts svg { width: 18px; height: 18px; padding: 3.5px; flex: none; border-radius: 50%; background: var(--black); color: var(--on-black); }
.eyebrow { margin-bottom: 16px; font: 600 18px/1.2 var(--body); color: var(--ink-2); }

/* Photo columns */
.gallery { position: relative; height: 210vh; }
.gallery-stick { position: sticky; top: 0; height: 100vh; min-height: 640px; display: grid; grid-template-columns: 1fr minmax(0, 540px) 1fr; grid-template-rows: minmax(0, 1fr); align-items: center; overflow: hidden; }
.cols { display: flex; gap: 18px; height: 100%; min-height: 0; }
.cols-l { justify-content: flex-start; padding-left: 2vw; }
.cols-r { justify-content: flex-end; padding-right: 2vw; }
.col { --dir: 1; display: flex; flex-direction: column; gap: 18px; width: clamp(130px, 12vw, 190px); flex: none; transform: translate3d(0, calc(var(--p, 0) * var(--dir) * 1px), 0); will-change: transform; }
.col-1 { --dir: -220; margin-top: -40vh; }
.col-2 { --dir: 260; margin-top: -90vh; }
.col-3 { --dir: -260; margin-top: -70vh; }
.col-4 { --dir: 220; margin-top: -30vh; }
.col .ph, .ph-gap { aspect-ratio: 480 / 620; border-radius: 20px; flex: none; }
.ph-gap { display: block; }
.gallery-copy { position: relative; z-index: 1; padding: 0 20px; text-align: center; }
.gallery-copy h2 { font-size: clamp(40px, 5.2vw, 78px); line-height: 1; letter-spacing: -.05em; }
.gallery-copy p { max-width: 400px; margin: 24px auto 36px; font-size: 18px; color: var(--muted); }

/* Sections */
.sec { max-width: 1290px; margin: 0 auto; padding: 130px 24px 0; }
.sec-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.sec-head h2, .closing h2 { font-size: clamp(38px, 5.4vw, 78px); line-height: 1; letter-spacing: -.055em; }
.sec-head p, .closing > p { max-width: 500px; margin: 20px auto 0; font-size: 18px; color: var(--muted); }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.b-card { position: relative; display: flex; flex-direction: column; padding: 0 30px 30px; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--card-shadow); }
.b-wide { grid-column: span 2; }
/* The picture sits in a soft inset panel, so the card reads as a framed object. */
.b-pic { position: relative; height: 250px; margin: 8px -22px 26px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, var(--card-2), color-mix(in srgb, var(--card-2) 55%, var(--card))); }
.b-pic > * { transition: translate .6s var(--ease); }
@media (hover: hover) { .b-card:hover .b-pic > * { translate: 0 -5px; } }
.b-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.b-count { flex: none; font: 500 13.5px/1 var(--body); color: var(--muted); }
.b-card h3 { font-size: 27px; line-height: 1.1; letter-spacing: -.04em; }
.b-card p { margin-top: 12px; font-size: 16.5px; line-height: 1.55; color: var(--muted); }
/* Facts on cards. */
.b-ticks { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.b-ticks li { display: flex; align-items: flex-start; gap: 9px; font: 500 14.5px/1.35 var(--body); color: var(--ink-2); }
.b-ticks svg { width: 16px; height: 16px; flex: none; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--black); color: var(--on-black); }

/* Small windows of what the client gets. */
.win { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); text-align: left; overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--line); font: 600 11.5px/1 var(--body); color: var(--ink); }
.win-bar > i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.win-bar > span { margin-left: 8px; flex: 1; min-width: 0; }
.win-bar .url { display: inline-block; margin: 0; padding: 4px 10px; border-radius: 6px; background: var(--card-2); font-weight: 500; color: var(--muted); }
.live { display: inline-flex; align-items: center; gap: 5px; font: 500 10.5px/1 var(--body); font-style: normal; color: var(--muted); }
.live b { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(239, 65, 54, .5); animation: live 2s ease-out infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 6px rgba(239, 65, 54, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 65, 54, 0); } }

.ui-mon { width: 272px; }
.mon-rows { margin: 0; padding: 6px 12px; list-style: none; }
.mon-rows li { display: flex; align-items: center; gap: 9px; padding: 7px 0; font: 500 11.5px/1.2 var(--body); color: var(--ink); }
.mon-rows li + li { border-top: 1px solid var(--line); }
.mon-rows svg { width: 15px; height: 15px; color: var(--muted); }
.mon-rows span { flex: 1; }
.mon-rows em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.mon-rows li:not(:last-child) em::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--ink); vertical-align: 1px; }
.spark { padding: 4px 12px 12px; }
.spark span { display: block; margin-bottom: 4px; font-size: 10px; color: var(--muted); }
.spark svg { display: block; width: 100%; height: 50px; overflow: visible; }
.spark .area { fill: var(--card-2); }
.spark .ln { fill: none; stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease); }
.spark circle { fill: var(--accent); }
.anim .b-card:not(.in) .spark .ln { stroke-dashoffset: 400; }

.ui-dev { position: relative; width: 300px; height: 210px; }
.ui-browser { position: absolute; left: 0; top: 6px; width: 240px; height: 176px; }
.site { padding: 12px; }
.site b { display: block; height: 8px; border-radius: 4px; background: var(--ink); }
.site .s-h { width: 70%; }
.site .s-h2 { width: 48%; margin-top: 6px; background: var(--line-2); }
.site .s-btn { display: block; width: 54px; height: 16px; margin-top: 10px; border-radius: 5px; background: var(--accent); }
.s-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.s-row i { height: 52px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--line); }
.ui-phone { position: absolute; right: 0; top: 24px; width: 92px; height: 178px; padding: 22px 8px 8px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); }
.ui-phone .notch { position: absolute; left: 50%; top: 7px; width: 28px; height: 6px; margin-left: -14px; border-radius: 3px; background: var(--ink); }
.ui-phone b { display: block; height: 34px; border-radius: 8px; background: var(--ink); }
.ui-phone i { display: block; height: 18px; margin-top: 6px; border-radius: 6px; background: var(--card-2); border: 1px solid var(--line); }
.ui-phone em { display: block; height: 18px; margin-top: 10px; border-radius: 6px; background: var(--accent); }
.ui-dev .stack { position: absolute; left: 16px; bottom: 2px; width: 200px; height: 46px; }
.ui-dev .note { top: 0; padding: 8px 10px; font-size: 12.5px; border-radius: 12px; }
.ui-dev .note .gl-xs { width: 26px; border-radius: 8px; }

.ui-chat { width: 290px; padding-bottom: 12px; }
.msg { max-width: 84%; margin: 10px 12px 0; padding: 9px 11px; border-radius: 12px; font: 500 11.5px/1.4 var(--body); color: var(--ink); }
.msg.me { margin-left: auto; background: var(--ink); color: var(--card); border-bottom-right-radius: 4px; }
.msg.ai { display: flex; gap: 8px; align-items: flex-start; background: var(--card-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.ai .gl-xs { width: 22px; border-radius: 7px; }
.msg.ai small { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 10px; color: var(--muted); }
.msg.ai small svg { width: 11px; height: 11px; }
.msg.typing { display: inline-flex; gap: 4px; padding: 9px 12px; background: var(--card-2); border: 1px solid var(--line); }
.msg.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); animation: typing 1.2s ease-in-out infinite; }
.msg.typing i:nth-child(2) { animation-delay: .15s; }
.msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 30% { translate: 0 -3px; opacity: 1; } 0%, 60%, 100% { opacity: .4; } }

.ui-kanban { width: 440px; }
.k-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; }
.k-col { position: relative; padding: 8px; border-radius: 10px; background: var(--card-2); min-height: 250px; }
.k-col h5 { display: flex; justify-content: space-between; margin: 0 2px 8px; font: 600 11px/1 var(--body); color: var(--ink); }
.k-col h5 em { font-style: normal; color: var(--muted); }
.k-card { display: flex; gap: 7px; align-items: flex-start; margin-bottom: 6px; padding: 8px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16, 17, 24, .05); }
.k-card svg { width: 13px; height: 13px; flex: none; margin-top: 1px; color: var(--muted); }
.k-card b { display: block; font: 600 10.5px/1.25 var(--body); color: var(--ink); }
.k-card small { display: block; margin-top: 2px; font-size: 9.5px; color: var(--muted); }
.k-col:last-child .k-card svg { color: var(--ink); }
/* One request travels from "new" to "in work" and back again, over and over. */
.k-move { position: relative; z-index: 2; border-color: var(--ink); animation: k-move 6s var(--ease) infinite; }
@keyframes k-move { 0%, 30% { translate: 0 0; rotate: 0deg; } 45% { translate: 50% -6px; rotate: 3deg; box-shadow: var(--shadow-lg); } 60%, 88% { translate: calc(100% + 16px) 44px; rotate: 0deg; } 100% { translate: 0 0; } }

.ui-team { display: grid; gap: 12px; justify-items: center; }
.ui-contact { width: 260px; padding: 14px; }
.who { display: flex; align-items: center; gap: 10px; }
.who .ph { width: 42px; border-width: 2px; border-radius: 12px; box-shadow: none; }
.who b { display: block; font: 600 12.5px/1.2 var(--body); }
.who .live { margin-top: 4px; }
.ui-contact p { margin: 10px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.ch { display: flex; gap: 6px; margin-top: 12px; }
.ch span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; height: 26px; border-radius: 7px; border: 1px solid var(--line); font: 600 10px/1 var(--body); color: var(--ink); }
.ch span:first-child { background: var(--black); border-color: var(--black); color: var(--on-black); }
.ch svg { width: 12px; height: 12px; }
.mini-icons { display: flex; align-items: center; gap: 6px; }
.mini-icons .gl-xs { width: 30px; border-radius: 9px; }
.mini-icons span { font: 600 11.5px/1 var(--body); color: var(--muted); }

.b-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.b-links a { display: inline-flex; align-items: center; gap: 4px; padding: 7px 9px 7px 12px; border: 1px solid var(--line); border-radius: 999px; font: 500 13.5px/1.2 var(--body); color: var(--ink-2); transition: background-color .2s, color .2s, border-color .2s; }
.b-links a svg { width: 13px; height: 13px; opacity: .45; transition: opacity .2s, translate .2s; }
.b-links a:hover { background: var(--black); border-color: var(--black); color: var(--on-black); }
.b-links a:hover svg { opacity: 1; translate: 1px -1px; }

.stack { position: relative; width: min(330px, 86%); height: 110px; }
.note { position: absolute; left: 0; right: 0; top: 18px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); font: 500 15px/1.2 var(--body); color: var(--ink); transition: transform .7s var(--ease), opacity .7s var(--ease); }
.note { z-index: 3; transform: none; }
.note:nth-child(2), .note[data-pos="1"] { z-index: 2; transform: translateY(16px) scale(.93); opacity: .85; }
.note:nth-child(3), .note[data-pos="2"] { z-index: 1; transform: translateY(30px) scale(.86); opacity: .6; }
.note[data-pos="0"] { z-index: 3; transform: none; opacity: 1; }
.note[data-pos="3"] { z-index: 4; transform: translateY(-40px) scale(1.02); opacity: 0; }
.note > * { transition: opacity .5s; }
.letter > * { transition: opacity .45s; }
.letter[aria-hidden="true"] > * { opacity: 0; }
.note:nth-child(n+2):not([data-pos]) > *, .note[data-pos="1"] > *, .note[data-pos="2"] > * { opacity: 0; }


.b-auto { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0 28px; padding: 30px; }
.b-text { grid-column: 1; grid-row: 1; align-self: end; }
.b-auto .b-pic { grid-column: 2; grid-row: 1; height: auto; min-height: 360px; margin: -22px -22px -22px 0; padding: 0; place-items: center; }


/* Arc of services */
.big-card { background: var(--card); border: 1px solid var(--line); border-radius: 32px; }
.arc-card { padding: 56px 32px 44px; text-align: center; overflow: hidden; }
.arc-card h2 { max-width: 12em; margin: 0 auto; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.03; letter-spacing: -.05em; }
.arc { position: relative; margin-top: 36px; }
.arc-stage { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.arc-tile { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 22px; background: var(--card-2); }
.arc-tile svg { width: 36%; height: 36%; stroke-width: 1.5; }
.t-c, .t-r, .t-y, .t-p { color: var(--ink); }
.arc.on .arc-tile.on { color: var(--accent); }
.arc-name { color: var(--ink); position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.arc-label, .arc-nav { display: none; }
.arc.on { height: 470px; }
.arc.on .arc-stage { position: absolute; inset: 0; display: block; }
.arc.on .arc-tile { position: absolute; left: 50%; top: 34px; width: 200px; height: 200px; margin-left: -100px; border-radius: 26px; transition: transform .8s var(--ease), opacity .6s var(--ease), background-color .3s; }
.arc.on .arc-tile.on { background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.arc.on .arc-label { position: absolute; left: 0; right: 0; top: 270px; display: grid; gap: 8px; justify-items: center; }
.arc-label b { font: 600 27px/1.1 var(--head); letter-spacing: -.035em; }
.arc-label span { max-width: 420px; font-size: 17px; color: var(--muted); }
.arc-label a { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 600 15px/1 var(--body); color: var(--red-ink); }
.arc-label a .arr { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.arc.on .arc-nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 14px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.step, .point, .plan { padding: 30px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--card-shadow); }
.step h3, .point h3 { margin-top: 26px; font-size: 23px; line-height: 1.15; letter-spacing: -.035em; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.card-top .gl-sm { width: 56px; border-radius: 16px; }
.card-top .gl-sm svg { width: 44%; height: 44%; }
.num { font: 500 14px/1 var(--head); letter-spacing: .02em; color: var(--muted); }
.num-lg { display: block; font: 300 46px/1 var(--head); letter-spacing: -.04em; }
.point h3 { margin-top: 22px; }
.step p, .point p { margin-top: 10px; font-size: 16px; color: var(--muted); }

/* Letters */
.letters-sec { padding-top: 0; }
.letters-stick { padding-top: 130px; }
.letters-stage { position: relative; height: 500px; }
.envelope { position: absolute; left: 50%; bottom: 0; width: 660px; height: 300px; margin-left: -330px; transition: transform .9s var(--ease), opacity .7s var(--ease); }
.envelope i { position: absolute; inset: 0; }
.env-back { z-index: 1; clip-path: polygon(0 26%, 50% 0, 100% 26%, 100% 100%, 0 100%); background: linear-gradient(180deg, var(--env1), var(--env2)); }
.env-flap-l, .env-flap-r { display: none; }
.env-front { z-index: 3; clip-path: polygon(0 26%, 50% 72%, 100% 26%, 100% 100%, 0 100%); background: linear-gradient(180deg, var(--card), var(--card-2)); }
.envelope::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -24px; height: 40px; border-radius: 50%; background: rgba(16, 17, 24, .16); filter: blur(18px); }
.deck { position: absolute; inset: 0; z-index: 2; }
.letter { position: absolute; left: 50%; top: 0; width: 410px; margin-left: -205px; padding: 40px 34px 38px; background: var(--card); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-lg); text-align: center; transition: transform .8s var(--ease), opacity .6s var(--ease); }
.letter .gl-sm { width: 68px; margin: 0 auto; border-radius: 19px; }
.letter h3 { margin-top: 22px; font-size: 28px; line-height: 1.1; letter-spacing: -.04em; }
.letter-n { margin-top: 8px; font-size: 15px; color: var(--muted); }
.letter p:last-child { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.deck-nav { display: flex; justify-content: center; gap: 14px; margin-top: 28px; transition: opacity .5s; }
/* Without the scroll scene (no script, reduced motion, phones) the letters simply line up. */
.letters-sec:not(.live):not(.slide) .envelope { display: none; }
.letters-sec:not(.live):not(.slide) .letters-stage { height: auto; }
.letters-sec:not(.live):not(.slide) .deck { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.letters-sec:not(.live):not(.slide) .letter { position: static; width: auto; margin: 0; box-shadow: none; }
.letters-sec:not(.live):not(.slide) .deck-nav { display: none; }
.letters-sec.live { height: 250vh; }
.letters-sec.live .letters-stick { position: sticky; top: 0; height: 100vh; min-height: 760px; padding-top: 110px; }
.letters-sec.live .sec-head { margin-bottom: 30px; }
.letters-sec.live[data-phase="env"] .deck-nav { opacity: 0; pointer-events: none; }
.letters-sec.slide { height: auto; }
.letters-sec.slide .letters-stick { position: static; height: auto; min-height: 0; }
.letters-sec.slide .letters-stage { height: 520px; overflow: hidden; margin: 0 -24px; }
.letters-sec.slide .envelope { display: none; }

/* Closing */
.closing { padding-bottom: 20px; text-align: center; }
.closing > p { margin-bottom: 38px; }

/* Footer */
.foot { max-width: 1290px; margin: 0 auto; padding: 130px 24px 24px; }
.foot-card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 32px; }
.foot-top { display: grid; grid-template-columns: 1fr 2.7fr .8fr; gap: 36px; padding: 70px 56px 40px; }
.foot-about { max-width: 300px; font: 600 19px/1.35 var(--head); letter-spacing: -.02em; color: var(--ink); }
.foot-cols { display: grid; grid-template-columns: 1.1fr 1.15fr 1.1fr .8fr; gap: 20px; }
.foot h4 { font: 500 15.5px/1.2 var(--body); color: var(--ink); }
.foot ul { margin: 14px 0 0; padding: 0; list-style: none; }
.foot li a { display: inline-block; padding: 6px 0; font-size: 15px; color: var(--muted); transition: color .2s; }
.foot li a:hover { color: var(--ink); }
.foot-contact h4 { font: 600 19px/1.2 var(--head); }
.foot-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
.foot-tile { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--card); border: 1px solid var(--edge); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 17, 24, .06); transition: background-color .2s, color .2s, border-color .2s; }
.foot-tile:hover { background: var(--black); border-color: var(--black); color: var(--on-black); }
.foot-tile svg { width: 22px; height: 22px; }
.foot-small { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.wordmark { display: flex; justify-content: center; overflow: hidden; padding-top: .1em; margin: 0 0 -.2em; font: 700 clamp(120px, 30vw, 430px)/.86 var(--head); letter-spacing: -.07em; color: var(--red); user-select: none; }
.wordmark span { display: inline-block; text-shadow: 0 22px 30px rgba(16, 17, 24, .08); }

/* Service page */
.s-hero .net { width: min(1120px, 100%); }
.s-hero h1 { max-width: 13em; font-size: clamp(40px, 5vw, 72px); line-height: 1; }
.s-hero .hero-copy > p { margin-bottom: 30px; }
.net-s .nt-l .ph, .net-s .nt-e .ph { border-radius: 22%; }
.points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 34px 30px 30px; }
.plan.best { border-color: var(--ink); box-shadow: var(--shadow-lg); }
.plan.best::before { content: ''; position: absolute; left: 30px; right: 30px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.plan .badge { align-self: flex-start; margin-bottom: 14px; padding: 6px 10px; border-radius: 8px; background: var(--black); color: var(--on-black); font: 600 12.5px/1 var(--body); }
.plan h3 { font-size: 30px; letter-spacing: -.04em; }
.plan .for { color: var(--muted); }
.plan-price { margin-top: 6px; font: 600 22px/1.2 var(--head); }
.ticks { margin: 18px 0 26px; padding: 0; list-style: none; }
.ticks li { position: relative; padding: 7px 0 7px 30px; font-size: 15.5px; color: var(--ink-2); }
.ticks li::before { content: ''; position: absolute; left: 0; top: 9px; width: 19px; height: 19px; border-radius: 6px; background: linear-gradient(180deg, var(--main1), var(--main2)); }
.ticks li::after { content: ''; position: absolute; left: 6.5px; top: 13px; width: 6px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 42deg; }
.plan .btn { margin-top: auto; }
.faq { max-width: 900px; margin: 0 auto; padding: 8px 34px; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; font: 600 19px/1.3 var(--head); letter-spacing: -.02em; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--card-2); }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; background: var(--ink); border-radius: 1px; transition: rotate .3s; }
.faq summary i::after { rotate: 90deg; }
.faq details[open] summary i::after { rotate: 0deg; }
.faq details p { padding: 0 52px 26px 0; color: var(--muted); font-size: 16.5px; }
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.r-card { position: relative; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--card-shadow); transition: translate .3s var(--ease), box-shadow .3s; }
.r-card:hover { translate: 0 -4px; box-shadow: var(--shadow-lg); }
.r-pic { position: relative; }
.r-pic .ph { aspect-ratio: 16 / 10; border: 0; border-radius: 16px; box-shadow: none; }
.r-pic .gl-sm { position: absolute; left: 14px; bottom: -22px; width: 52px; border-radius: 15px; }
.r-body { padding: 36px 12px 12px; }
.r-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font: 600 14.5px/1 var(--body); color: var(--ink); }
.r-more i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--black); color: var(--on-black); transition: rotate .3s var(--ease); }
.r-more svg { width: 14px; height: 14px; }
.r-card:hover .r-more i { rotate: 45deg; }
.r-card h3 { font-size: 22px; letter-spacing: -.03em; }
.r-card p { margin-top: 6px; color: var(--muted); }
.card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.buybar { display: none; }

/* Order page */
.order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; max-width: 1240px; margin: 0 auto; padding: 150px 24px 0; }
.order-side .tile-w { margin: 0 0 28px; }
.order-side h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -.055em; }
.order-side > p { margin-top: 20px; font-size: 18px; color: var(--muted); max-width: 460px; }
.next { margin: 34px 0 0; padding: 0; list-style: none; }
.next li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; color: var(--muted); }
.next li div b { color: var(--ink); }
.next .gl-xs b { font-size: 15px; }
.direct { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; color: var(--muted); }
.direct a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lead, .ok { padding: 36px; background: var(--card); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg); }
.lead-head { margin-bottom: 22px; }
.lead-head b { display: block; font: 600 28px/1.1 var(--head); letter-spacing: -.04em; }
.lead-head span { display: block; margin-top: 6px; color: var(--muted); }
.fld { display: block; margin-bottom: 16px; }
.fld > span { display: block; margin-bottom: 7px; font: 600 14px/1.2 var(--body); }
.fld em { font-style: normal; font-weight: 500; color: var(--muted); }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--ink); font: 400 16px/1.4 var(--body); transition: border-color .2s, box-shadow .2s; }
.fld textarea { padding: 14px 16px; resize: vertical; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--muted); opacity: 1; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(16, 17, 24, .08); }
.fld small { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.fld.invalid input { border-color: var(--red); }
.fld.invalid small { color: var(--red-ink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.plan-box { margin: -4px 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--card-2); font-size: 14.5px; }
.lead .btn-red { width: 100%; margin-top: 8px; }
.lead .btn.loading { opacity: .75; }
.err { min-height: 1em; margin-top: 12px; color: var(--red-ink); font-size: 14.5px; }
.consent { font-size: 13.5px; color: var(--muted); }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.ok { text-align: center; }
.ok .gl-mid { margin: 0 auto 24px; }
.ok .tick-ring, .ok .tick-mark { stroke-dashoffset: 0; animation: none; }
.ok h2 { font-size: 34px; letter-spacing: -.04em; }
.ok p { margin: 12px 0 26px; color: var(--muted); }

/* Privacy, 404 */
.doc { max-width: 860px; margin: 150px auto 0; padding: 56px 60px; }
.doc h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -.05em; }
.doc .meta { margin-top: 10px; color: var(--muted); }
.doc h2 { margin-top: 36px; font-size: 23px; letter-spacing: -.03em; }
.doc p { margin-top: 10px; color: var(--ink-2); }
.lost { padding-top: 180px; }
.lost h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1; letter-spacing: -.055em; }

/* Client cabinet (/account/, src/account.js) */
.nav-login { height: 48px; padding: 0 18px; font-size: 15.5px; }
.btn-ghost.nav-login::after { display: none; }
.btn > svg:not(.arr) { width: 19px; height: 19px; flex: none; }
.btn-sm { height: 40px; padding: 0 14px; font-size: 14.5px; border-radius: 10px; }
.btn-ghost.btn-sm::after { width: 26px; height: 26px; background-size: 12px; }
.btn-ghost.btn-sm { padding-right: 7px; gap: 10px; }
.btn.off { opacity: .6; pointer-events: none; }
.link-btn { padding: 6px 4px; border: 0; background: none; font: 600 14px/1 var(--body); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--ink); }
.cab { max-width: 1240px; min-height: 70vh; margin: 0 auto; padding: 130px 24px 0; }
.cab-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 120px 0; color: var(--muted); }
.spin { width: 20px; height: 20px; flex: none; border: 2px solid var(--line-2); border-top-color: var(--ink); border-radius: 50%; animation: spin-r .8s linear infinite; }
@keyframes spin-r { to { rotate: 360deg; } }
.cab-login { max-width: 560px; margin: 20px auto 0; padding: 56px 44px 44px; text-align: center; box-shadow: var(--card-shadow); }
.cab-login h1 { font-size: clamp(36px, 5vw, 54px); line-height: 1; letter-spacing: -.05em; }
.cab-login > p { max-width: 400px; margin: 16px auto 30px; font-size: 17px; color: var(--muted); }
.cab-login .btn-xl { min-width: 300px; }
.cab-wait { display: flex; align-items: center; gap: 14px; max-width: 380px; margin: 22px auto 0; padding: 14px 16px; border-radius: 14px; background: var(--card-2); text-align: left; }
.cab-wait b { display: block; font-size: 15px; }
.cab-wait span:not(.spin) { display: block; font-size: 13.5px; color: var(--muted); }
.cab-small { font-size: 13.5px; color: var(--muted); }
.cab-login .cab-small { margin-top: 18px; }
.cab-note { padding: 14px 16px; border-radius: 14px; background: var(--card-2); color: var(--ink-2); }
.cab-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.cab-head h1 { margin-top: 6px; font-size: clamp(34px, 4.4vw, 56px); line-height: 1; letter-spacing: -.05em; }
.cab-tabs, .adm-tabs { display: flex; gap: 4px; margin: 28px 0 26px; padding: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--card-shadow); scrollbar-width: none; }
.cab-tabs button, .adm-tabs button { flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: none; font: 500 15px/1 var(--body); color: var(--ink-2); white-space: nowrap; }
.cab-tabs button:hover, .adm-tabs button:hover { background: var(--card-2); }
.cab-tabs button.on, .adm-tabs button.on { background: var(--black); color: var(--on-black); }
.adm-tabs { margin: 0 0 18px; box-shadow: none; }
.cab-h2 { margin: 36px 0 14px; font-size: 24px; letter-spacing: -.03em; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--card-shadow); }
.stat .gl { grid-row: 1 / 3; width: 48px; border-radius: 14px; }
.stat b { font: 600 24px/1.1 var(--head); letter-spacing: -.03em; }
.stat span:not(.gl) { font-size: 14px; color: var(--muted); }
.svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.svc { display: flex; flex-direction: column; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--card-shadow); }
.svc-top { display: flex; align-items: center; justify-content: space-between; }
.svc-top .gl { width: 46px; border-radius: 13px; }
.svc h3 { margin-top: 16px; font-size: 21px; letter-spacing: -.03em; }
.svc dl { display: grid; gap: 6px; margin: 14px 0 0; }
.svc dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.svc dt { color: var(--muted); }
.svc dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.svc-note { margin-top: 12px; font-size: 14px; color: var(--muted); }
.svc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 600 12.5px/1 var(--body); background: var(--card-2); color: var(--ink-2); white-space: nowrap; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.chip-active::before, .chip-paid::before { background: var(--ink); }
.chip-unpaid, .chip-pending, .chip-suspended, .chip-error { color: var(--red-ink); }
.chip-unpaid::before, .chip-pending::before, .chip-suspended::before, .chip-error::before { background: var(--accent); }
.invs { display: grid; gap: 10px; }
.inv { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: center; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--card-shadow); }
.inv-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.inv-n { font: 600 13px/1 var(--head); color: var(--muted); }
.inv-main b { font-size: 16px; }
.inv-when { width: 100%; font-size: 13.5px; color: var(--muted); }
.inv-side { display: flex; align-items: center; gap: 12px; }
.inv-side strong { font: 600 19px/1 var(--head); letter-spacing: -.02em; white-space: nowrap; }
.inv-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inv-pay { grid-column: 1 / -1; padding: 12px 14px; border-radius: 12px; background: var(--card-2); font-size: 14.5px; color: var(--ink-2); }
.empty { display: grid; justify-items: center; gap: 8px; padding: 50px 24px; text-align: center; background: var(--card); border: 1px dashed var(--line-2); border-radius: 22px; }
.empty .gl { width: 54px; margin-bottom: 6px; border-radius: 15px; }
.empty b { font: 600 21px/1.2 var(--head); }
.empty span:not(.gl) { max-width: 420px; color: var(--muted); }
.empty .cta-row, .empty > .btn { margin-top: 12px; }
.plan-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 20px; }
.pp { position: relative; cursor: pointer; }
.pp input { position: absolute; opacity: 0; }
.pp-in { display: grid; gap: 4px; height: 100%; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--card-shadow); transition: border-color .2s, box-shadow .2s; }
.pp-in .gl { width: 44px; margin-bottom: 10px; border-radius: 13px; }
.pp-in b { font: 600 20px/1.2 var(--head); letter-spacing: -.02em; }
.pp-in strong { margin-top: 6px; font: 600 24px/1 var(--head); letter-spacing: -.03em; }
.pp-in em { font-style: normal; font-size: 13.5px; color: var(--muted); }
.pp-in small { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.pp input:checked + .pp-in { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow-lg); }
.pp input:focus-visible + .pp-in { outline: 2px solid var(--ink); outline-offset: 3px; }
.order-form > .fld { max-width: 420px; }
.cta-row.left { justify-content: flex-start; }
.order-form .cab-small { margin-top: 14px; }
.profile { max-width: 760px; padding: 30px; box-shadow: var(--card-shadow); }
.profile .cab-small { margin-bottom: 16px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.check { display: flex; align-items: center; gap: 8px; margin: 2px 0 16px; font-size: 14.5px; }
.adm-status { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.adm-status span { padding: 8px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.adm-status .ok { color: var(--ink); }
.adm-status .warn { color: var(--red-ink); }
.tbl-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--card-shadow); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { padding: 12px 14px; text-align: left; font: 600 12.5px/1.2 var(--body); color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl small { display: block; color: var(--muted); }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl .acts { white-space: nowrap; text-align: right; }
.tbl .acts > * + * { margin-left: 6px; }
.muted { color: var(--muted); }
.plan-edit { display: grid; gap: 14px; }
.plan-card, .new-inv { padding: 22px; box-shadow: var(--card-shadow); }
.plan-card > b { display: block; margin-bottom: 14px; font: 600 18px/1.2 var(--head); }
.events { margin: 0; padding: 0; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.events li { display: grid; grid-template-columns: 170px 1fr auto; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.events li:last-child { border-bottom: 0; }
.events time, .events em { color: var(--muted); font-style: normal; font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100vw - 32px); padding: 14px 18px; border-radius: 14px; background: var(--black); color: var(--on-black); font: 500 15px/1.35 var(--body); box-shadow: var(--shadow-lg); translate: -50% 20px; opacity: 0; pointer-events: none; transition: opacity .3s, translate .3s var(--ease); }
.toast.on { opacity: 1; translate: -50% 0; }
.toast.bad { background: #c8352b; color: #fff; }
@media (max-width: 900px) {
  .nav-login { display: none; }
  .stats { grid-template-columns: 1fr; }
  .row3 { grid-template-columns: 1fr; }
  .events li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 640px) {
  .cab { padding: 104px 16px 0; }
  .cab-login { padding: 36px 22px 28px; }
  .cab-login .btn-xl { min-width: 0; }
  .cab-head { align-items: flex-start; }
  .inv { grid-template-columns: 1fr; }
  .svcs { grid-template-columns: 1fr; }
}

/* Tablets */
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-wide { grid-column: span 2; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .foot-top { grid-template-columns: 1fr; padding: 54px 40px 30px; }
  .letters-sec:not(.live):not(.slide) .deck { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav-links, .nav-order { display: none; }
  .burger { display: inline-grid; margin-left: 6px; }
  .nav-in { height: 62px; padding-left: 18px; }
  .nav.mobile-open .m-menu { display: block; }
  .m-menu { position: fixed; top: 88px; left: 16px; right: 16px; max-height: calc(100dvh - 104px); overflow-y: auto; pointer-events: auto; padding: 14px 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); }
  .m-menu h4 { margin: 14px 4px 6px; font: 500 13px/1.2 var(--body); color: var(--muted); }
  .m-menu a { display: flex; align-items: center; gap: 12px; padding: 8px 4px; font: 500 16px/1.25 var(--body); }
  .m-menu .btn { justify-content: center; margin-top: 14px; padding: 0 20px; }
  .gallery { height: auto; }
  .gallery-stick { position: static; height: auto; min-height: 0; display: flex; flex-direction: column; gap: 34px; padding: 90px 0 10px; overflow: hidden; }
  .cols { height: auto; padding: 0; }
  .cols-l { order: 1; } .gallery-copy { order: 2; } .cols-r { order: 3; }
  .col { flex-direction: row; width: auto; gap: 12px; margin: 0; transform: translate3d(calc(var(--p, 0) * var(--dir) * .6px), 0, 0); }
  .col-1 { --dir: -200; margin-left: -60px; } .col-4 { --dir: 200; margin-left: -260px; }
  .col-2, .col-3, .ph-gap { display: none; }
  .col .ph { width: 118px; border-radius: 16px; }
  .order { grid-template-columns: 1fr; padding-top: 120px; }
  .plans, .related { grid-template-columns: 1fr; }
  .points { grid-template-columns: 1fr; }
}

/* Phones */
@media (max-width: 640px) {
  .hero { padding: 104px 0 20px; }
  .net { width: 170vw; max-width: none; margin-left: -35vw; }
  .hero-copy { padding: 0 20px; margin-top: 14px; }
  .hero h1 { font-size: clamp(40px, 12vw, 56px); }
  .hero-copy > p { font-size: 17px; margin: 18px auto 28px; }
  .btn-xl { min-width: 0; width: 100%; max-width: 340px; height: 56px; font-size: 17px; }
  .tip { display: none; }
  .sec { padding: 90px 16px 0; }
  .sec-head { margin-bottom: 36px; }
  .sec-head p, .closing > p { font-size: 16.5px; }
  .bento, .steps { grid-template-columns: 1fr; }
  .b-wide { grid-column: auto; }
  .b-card { padding: 0 22px 24px; }
  .b-pic { margin: 8px -14px 20px; height: 230px; border-radius: 16px; }
  .b-auto { display: flex; flex-direction: column; padding: 24px; }
  .b-auto .b-pic { order: 1; min-height: 0; height: 270px; margin: -14px -14px 20px; padding: 0; }
  .ui-kanban { width: 330px; }
  .ui-kanban .k-col:last-child { display: none; }
  .ui-kanban .k-cols { grid-template-columns: 1fr 1fr; }
  .cap { display: none; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; max-width: 340px; text-align: left; font-size: 13.5px; }
  .hero .cta-row .btn { min-width: 0; }
  .b-auto .b-text { order: 2; padding-top: 0; }
  .b-card h3 { font-size: 24px; }
  .arc-card { padding: 40px 16px 30px; border-radius: 26px; }
  .arc.on { height: 400px; }
  .arc.on .arc-tile { top: 24px; width: 132px; height: 132px; margin-left: -66px; border-radius: 22px; }
  .arc.on .arc-label { top: 190px; padding: 0 10px; }
  .arc-label b { font-size: 23px; }
  .arc-label span { font-size: 15.5px; }
  .round-btn { width: 52px; height: 52px; }
  .letters-sec:not(.live):not(.slide) .deck { grid-template-columns: 1fr; }
  .letters-sec.slide .letters-stage { height: 380px; margin: 0 -16px; }
  .letter { width: 300px; margin-left: -150px; padding: 32px 24px; }
  .letter h3 { font-size: 24px; }
  .letter p:last-child { font-size: 16px; }
  .foot { padding: 90px 12px 12px; }
  .foot-card { border-radius: 26px; }
  .foot-top { padding: 40px 24px 20px; gap: 30px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .wordmark { margin-top: 0; }
  .lead, .ok { padding: 24px 20px; border-radius: 24px; }
  .row2 { grid-template-columns: 1fr; }
  .order { padding: 110px 16px 0; }
  .doc { margin-top: 110px; padding: 36px 24px; border-radius: 26px; }
  .faq { padding: 4px 20px; }
  .faq summary { font-size: 17px; padding: 20px 0; }
  .faq details p { padding-right: 0; }
  .with-bar .buybar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); font: 600 15px/1.2 var(--body); }
  .with-bar .buybar .btn { height: 44px; padding: 0 16px; font-size: 15px; }
  .with-bar .foot { padding-bottom: 90px; }
}

/* Motion, taken from the reference video.
   Everything here only runs with the "anim" class, which src/site.js sets unless reduced motion is asked for. */

/* Headings: letters come out of the blur one after another, left to right. */
.blur-words .w { display: inline-block; white-space: nowrap; }
.anim .blur-words[data-reveal] { opacity: 1; translate: none; filter: none; }
.anim .blur-words .c { opacity: 0; filter: blur(12px); transition: opacity .55s var(--ease), filter .75s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 24ms); }
.anim .blur-words.in .c { opacity: 1; filter: blur(0); }
.hero .blur-words { --d: 1s; }

/* Other blocks rise and sharpen. */
.anim [data-reveal] { opacity: 0; translate: 0 34px; transition: opacity .9s var(--ease), translate 1s var(--ease), filter .9s var(--ease); }
.anim p[data-reveal], .anim .tile-w[data-reveal], .anim .btn[data-reveal], .anim .cta-row[data-reveal], .anim .soft[data-reveal] { filter: blur(8px); }
.anim [data-reveal].in { opacity: 1; translate: 0 0; filter: none; }
.hero-copy > p[data-reveal] { transition-delay: 1.55s; }
.hero-copy > .btn[data-reveal], .hero-copy > .cta-row[data-reveal] { transition-delay: 1.75s; }
.hero-copy > .facts[data-reveal] { transition-delay: 1.95s; }
.anim .facts[data-reveal]:not(.in) { filter: blur(6px); }
.s-hero .eyebrow[data-reveal] { transition-delay: .8s; }
/* Cards follow each other like steps. */
.anim [data-stagger] > [data-reveal] { translate: 0 80px; transition-duration: .9s, 1.1s, .9s; }
.anim [data-stagger] > [data-reveal]:nth-child(2) { transition-delay: .1s; }
.anim [data-stagger] > [data-reveal]:nth-child(3) { transition-delay: .2s; }
.anim [data-stagger] > [data-reveal]:nth-child(4) { transition-delay: .3s; }
.anim [data-stagger] > [data-reveal]:nth-child(5) { transition-delay: .4s; }
.anim .foot-cols[data-reveal] { transition-delay: .12s; }
.anim .foot-contact[data-reveal] { transition-delay: .24s; }
/* The big cards come up a little smaller and grow into place. */
.anim .arc-card[data-reveal], .anim .foot-card[data-reveal] { translate: 0 90px; scale: .96; transition: opacity .9s var(--ease), translate 1.2s var(--ease), scale 1.2s var(--ease); }
.anim .arc-card[data-reveal].in, .anim .foot-card[data-reveal].in { scale: 1; }

/* First screen: the large tile rises, its sign changes a few times and settles on a tick, the lines grow out of it,
   the small tiles come up pale and fill with colour, the dots light up last. */
.anim .net .nt { opacity: 0; }
.anim .net.play .nt { animation: tile-in 1s var(--ease) forwards; }
.anim .net.play .nt-main { animation: main-in .9s cubic-bezier(.2, .9, .3, 1.15) .1s forwards; }
.anim .net.play .nt-y, .anim .net.play .nt-c { animation-delay: .95s; }
.anim .net.play .nt-r, .anim .net.play .nt-f { animation-delay: 1.05s; }
.anim .net.play .nt-l, .anim .net.play .nt-e { animation-delay: 1.15s; }
@keyframes main-in { from { opacity: 0; translate: 0 90px; scale: .72; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes tile-in { 0% { opacity: 0; scale: .8; filter: saturate(.1) brightness(1.25) blur(4px); } 45% { opacity: .45; scale: .96; filter: saturate(.25) brightness(1.15) blur(1px); } 100% { opacity: 1; scale: 1; filter: none; } }
.anim .net-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim .net.play .ln-ml, .anim .net.play .ln-mr { animation: draw .8s .45s var(--ease) forwards; }
.anim .net.play .ln-y, .anim .net.play .ln-c { animation: draw .5s .75s var(--ease) forwards; }
.anim .net.play .ln-r, .anim .net.play .ln-f { animation: draw .5s .85s var(--ease) forwards; }
.anim .net-lines circle { opacity: 0; scale: 0; transform-box: fill-box; transform-origin: center; }
.anim .net.play .net-lines circle { animation: dot-in .45s 1.35s cubic-bezier(.2, .9, .3, 1.6) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dot-in { to { opacity: 1; scale: 1; } }
.morph { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.morph svg { position: absolute; width: 46%; height: 46%; opacity: 0; }
.anim .net.play .morph svg { animation: morph .42s var(--ease) both; }
.anim .net.play .morph svg:nth-child(1) { animation-delay: .35s; }
.anim .net.play .morph svg:nth-child(2) { animation-delay: .7s; }
.anim .net.play .morph svg:nth-child(3) { animation-delay: 1.05s; }
@keyframes morph { 0% { opacity: 0; rotate: -70deg; scale: .5; } 35%, 65% { opacity: 1; rotate: 0deg; scale: 1; } 100% { opacity: 0; rotate: 70deg; scale: .5; } }
.tick-ring { stroke-dasharray: 120; stroke-dashoffset: 0; opacity: .9; }
.tick-mark { stroke-dasharray: 30; stroke-dashoffset: 0; }
.anim .net .tick { opacity: 0; }
.anim .net .tick-ring { stroke-dashoffset: 120; }
.anim .net .tick-mark { stroke-dashoffset: 30; }
.anim .net.play .tick { animation: tick-in .45s 1.4s var(--ease) forwards; }
.anim .net.play .tick-ring { animation: draw-ring .8s 1.4s var(--ease) forwards; }
.anim .net.play .tick-mark { animation: draw-ring .45s 1.85s var(--ease) forwards; }
@keyframes tick-in { from { opacity: 0; rotate: -90deg; scale: .6; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes draw-ring { to { stroke-dashoffset: 0; } }

/* While the first screen scrolls away, its tiles fly up and apart faster than the text. */
.hero .nt { transform: translate3d(calc(var(--h, 0) * var(--sx, 0) * 1px), calc(var(--h, 0) * var(--sy, 0) * 1px), 0); }
.nt-main { --sy: -150; }
.nt-y { --sx: -60; --sy: -330; }
.nt-c { --sx: -90; --sy: -200; }
.nt-r { --sx: 60; --sy: -300; }
.nt-l { --sx: -160; --sy: -230; }
.nt-e { --sx: 160; --sy: -250; }
.nt-f { --sx: 110; --sy: -170; }
.hero-copy { transform: translate3d(0, calc(var(--h, 0) * 70px), 0); opacity: calc(1 - var(--h, 0) * .9); }

/* Photo columns gather towards the middle out of a blur as the block comes in, then drift apart. */
.cols-l, .cols-r { transition: none; }
.cols-l { transform: translate3d(calc((1 - var(--e, 1)) * 15vw), 0, 0); }
.cols-r { transform: translate3d(calc((1 - var(--e, 1)) * -15vw), 0, 0); }
.anim .cols { opacity: calc(.1 + var(--e, 1) * .9); filter: blur(calc((1 - var(--e, 1)) * 7px)); }

/* The arc of tiles rises from below once the card is on screen. */
.anim .arc .arc-stage { translate: 0 200px; opacity: 0; transition: translate 1.3s var(--ease) .35s, opacity .9s var(--ease) .35s; }
.anim .arc.in .arc-stage { translate: 0 0; opacity: 1; }
.anim .arc .arc-label, .anim .arc .arc-nav { opacity: 0; filter: blur(8px); transition: opacity .8s var(--ease) .9s, filter .8s var(--ease) .9s; }
.anim .arc.in .arc-label, .anim .arc.in .arc-nav { opacity: 1; filter: none; }
.arc.swap .arc-label > * { animation: label-in .6s var(--ease); }
@keyframes label-in { from { opacity: 0; filter: blur(8px); } }

/* Letters: while the scene is driven by the scroll the cards follow it closely; the deck eases. */
.letters-sec.live[data-phase="env"] .letter { transition: transform .25s linear, opacity .4s; }
.letter[aria-hidden="true"] { box-shadow: 0 30px 60px -40px rgba(16, 17, 24, .25); background: linear-gradient(170deg, var(--card) 30%, var(--card-2)); }
.envelope { transition: transform .5s var(--ease), opacity .6s var(--ease), filter .6s; }

/* The wordmark letters drop into the card one after another. */
.anim .wordmark span { translate: 0 -112%; filter: blur(14px); transition: translate 1.15s cubic-bezier(.3, 1.3, .45, 1), filter 1s var(--ease); }
.anim .wordmark span:nth-child(2) { transition-delay: .09s; }
.anim .wordmark span:nth-child(3) { transition-delay: .18s; }
.anim .wordmark span:nth-child(4) { transition-delay: .27s; }
.anim .wordmark.in span { translate: 0 0; filter: blur(0); }

/* Cards lift a little under the pointer. */
.b-card, .step, .point, .plan { transition: translate .4s var(--ease), box-shadow .4s var(--ease); }
@media (hover: hover) {
  .b-card:hover, .step:hover, .point:hover, .plan:hover { translate: 0 -4px; box-shadow: var(--shadow-lg); }
}

/* Moving from page to page: the old page dissolves, the new one rises out of a soft blur; the menu stays put. */
@view-transition { navigation: auto; }
.nav { view-transition-name: nav; }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; filter: blur(8px); transform: translateY(14px); } }

@media (max-width: 900px) {
  .cols-l, .cols-r { transform: none; }
  .hero .nt { transform: none; }
}

/* Palette: white ceramic tiles with graphite icons, one black main tile, coral as the only accent. */
:root { --accent: #ef4136; --chart-2: #2a2a30; --chart-2a: #6b6b74; --env1: #3a3a41; --env2: #0f0f12;
  --tile1: #ffffff; --tile2: #eceef2; --tile-ink: #17171b; --tile-edge: #e2e4ea; --main1: #3a3a41; --main2: #0f0f12; --main-ink: #ffffff; }
[data-theme="dark"] { --tile1: #34343b; --tile2: #1a1a1e; --tile-ink: #f4f4f6; --tile-edge: #3a3a42; --chart-2: #d0d1d7; --chart-2a: #8d8e98;
  --main1: #f4f4f6; --main2: #cfd0d6; --main-ink: #0b0b0d; --env1: #3a3a41; --env2: #1a1a1e; }

/* Page background: a material with light on it instead of a flat grey, and a thin line with a coral dot that
   ties each section to the next, like the lines between the tiles on the first screen. */
html { background-attachment: fixed; }
/* Fine grain, behind the content: cards stay clean white. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain, .05);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
[data-theme="dark"] body::before { --grain: .09; filter: invert(1); }
/* Circuit: a cool light base with soft light from the top and traces in the margins (drawn by src/site.js). */
:root[data-bg="circuit"] { --bg: #eceef2; background-image: radial-gradient(70vw 60vh at 50% 0, rgba(255, 255, 255, .9), transparent 70%); }
:root[data-bg="circuit"][data-theme="dark"] { --bg: #0c0c0f; background-image: none; }
.bg-circuit { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-circuit svg { display: block; will-change: transform; }
.bg-circuit .tr { fill: none; stroke: #cbcdd5; stroke-width: 1.2; }
.bg-circuit circle { fill: #b9bcc6; }
[data-theme="dark"] .bg-circuit .tr { stroke: #2c2c34; }
[data-theme="dark"] .bg-circuit circle { fill: #3a3a44; }
.bg-circuit .pulse { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 60 1000; stroke-dashoffset: 1040; animation: pulse var(--pt, 7s) linear var(--pd, 0s) infinite; }
@keyframes pulse { to { stroke-dashoffset: 0; } }

/* The connecting line in the top space of every section. */
.sec, .foot, .gallery-copy { position: relative; }
.sec:not(.letters-sec)::before, .foot::before, .gallery-copy::before { content: ''; position: absolute; left: 50%; top: 22px; width: 1px; height: 78px; background: linear-gradient(transparent, var(--line-2)); transform-origin: top; }
.sec:not(.letters-sec)::after, .foot::after { content: ''; position: absolute; left: 50%; top: 100px; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: var(--accent); }
.gallery-copy::before { top: -110px; }
.hero + .gallery .gallery-copy::before { display: none; }
@supports (animation-timeline: view()) {
  .anim .sec:not(.letters-sec)::before, .anim .foot::before { animation: grow-line linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  .anim .sec:not(.letters-sec)::after, .anim .foot::after { animation: dot-pop linear both; animation-timeline: view(); animation-range: entry 45% entry 70%; }
}
@keyframes grow-line { from { scale: 1 0; } }
@keyframes dot-pop { from { scale: 0; opacity: 0; } }
@media (max-width: 640px) {
  .sec:not(.letters-sec)::before, .foot::before { top: 18px; height: 50px; }
  .sec:not(.letters-sec)::after, .foot::after { top: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .hero .nt, .hero-copy, .cols-l, .cols-r { transform: none; opacity: 1; }
}