/* APTRYK design system — shared by every public page.
   Dark and crisp: a near-black void lit by one colour, APTRYK blue. Pure white type, hairline structure,
   one typeface (Inter Display for headings, Inter for text). Page files add only what is unique to them. */
:root {
  --void:    #03050C;                 /* page */
  --deep:    #070B17;                 /* recessed panels */
  --surface: #0B1120;                 /* raised panels, frames */
  --raise:   #111A2E;                 /* hover / inputs */
  --line:    rgba(160, 185, 255, .10);
  --line-2:  rgba(160, 185, 255, .18);
  --line-3:  rgba(160, 185, 255, .30);
  --ink:     #F3F6FF;                 /* headings */
  --ink-2:   #A3AECB;                 /* body, 9:1 on void */
  --ink-3:   #6F7B9B;                 /* quiet, 4.7:1 */
  --blue:    #2E6BFF;                 /* APTRYK blue */
  --blue-hi: #5B8CFF;
  --ice:     #BFD3FF;
  --cyan:    #8EE4FF;
  --bad:     #FF6B6B;
  --display: 'Inter Display', 'Inter', system-ui, sans-serif;
  --text:    'Inter', system-ui, sans-serif;
  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 40px);
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--void); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body { font: 400 16.5px/1.6 var(--text); color: var(--ink-2); background: var(--void); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss03'; font-optical-sizing: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { background: rgba(46, 107, 255, .45); color: #fff; }
:focus-visible { outline: 1px solid var(--blue-hi); outline-offset: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
h2 { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -.045em; line-height: 1; }
h3 { font-size: 19px; letter-spacing: -.02em; line-height: 1.25; font-weight: 600; }
p { max-width: 62ch; }
.sub { font-size: clamp(16.5px, 1.5vw, 18.5px); color: var(--ink-2); }

/* ---------- brand lockup ---------- */
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-word { height: 15px; width: auto; aspect-ratio: 8133 / 1490; flex: none; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 12px;
  font: 600 15px/1 var(--text); letter-spacing: -.01em; white-space: nowrap; transition: background .2s, box-shadow .2s, color .2s, transform .12s; }
.btn:active { transform: translateY(1px); }
.btn-primary { color: #fff; background: linear-gradient(180deg, #4A80FF, var(--blue)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1px #1C4FD8, 0 8px 28px -8px rgba(46,107,255,.7); }
.btn-primary:hover { background: linear-gradient(180deg, #5A8BFF, #3A74FF); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px #2459E6, 0 10px 36px -8px rgba(46,107,255,.9); }
.btn-ghost { color: var(--ink); background: rgba(160,185,255,.05); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { background: rgba(160,185,255,.09); box-shadow: inset 0 0 0 1px var(--line-3); }
.btn-sm { height: 38px; padding: 0 15px; font-size: 14px; border-radius: 10px; }
.btn svg { width: 15px; height: 15px; }

/* ---------- top bar ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); transition: background .25s, box-shadow .25s; }
.nav.stuck, html.menu-open .nav { background: rgba(3, 5, 12, .82); box-shadow: 0 1px 0 var(--line); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); }
html.menu-open .nav { background: var(--void); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-in { height: 100%; display: flex; align-items: center; gap: 24px; }
.nav-links { display: none; margin-left: auto; gap: 2px; font: 500 14.5px var(--text); }
.nav-links a { padding: 8px 13px; border-radius: 9px; color: var(--ink-2); transition: color .15s, background .15s; }
.nav-links a:hover { color: var(--ink); background: rgba(160,185,255,.06); }
.nav-cta { display: none; align-items: center; gap: 6px; }
.nav-cta .link { padding: 8px 12px; border-radius: 9px; font: 500 14.5px var(--text); color: var(--ink-2); transition: color .15s; }
.nav-cta .link:hover { color: var(--ink); }
.burger { margin-left: auto; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); flex: none; }
.burger span { position: relative; display: block; width: 18px; height: 12px; }
.burger i { position: absolute; left: 0; width: 18px; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.burger i:first-child { top: 2px; } .burger i:last-child { top: 8.2px; }
html.menu-open .burger i:first-child { top: 5.1px; transform: rotate(45deg); }
html.menu-open .burger i:last-child { top: 5.1px; transform: rotate(-45deg); }
@media (min-width: 960px) { .nav-links, .nav-cta { display: flex; } .burger { display: none; } .nav-links { margin-left: 28px; margin-right: auto; } }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 10px; background: var(--blue); color: #fff; font: 600 14px var(--text); }
.skip:focus { top: 12px; }

/* ---------- phone menu: a full-height sheet under a bar that never moves ---------- */
.menu { position: fixed; inset: 0; z-index: 90; height: 100vh; height: 100dvh; padding: calc(var(--nav-h) + 8px) var(--pad) calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--void);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; }
.menu::before { content: ''; position: absolute; inset: auto 0 0 0; height: 60%; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 60% at 50% 100%, rgba(46,107,255,.22), transparent 70%); }
html.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .22s ease; }
.menu-links { display: flex; flex-direction: column; }
.menu-links a { display: flex; align-items: center; justify-content: space-between; padding: 17px 0; border-bottom: 1px solid var(--line);
  font: 600 clamp(26px, 7.4vw, 34px)/1.1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.menu-links a svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.menu-foot { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; }
.menu-foot .btn { width: 100%; height: 52px; font-size: 16px; }
.menu-foot small { display: block; margin-top: 6px; text-align: center; font-size: 14px; color: var(--ink-3); }
.menu-foot small a { color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .menu-links a, .menu-foot { opacity: 0; transition: opacity .3s ease; }
  html.menu-open .menu-links a, html.menu-open .menu-foot { opacity: 1; }
  html.menu-open .menu-links a:nth-child(2) { transition-delay: .03s; } html.menu-open .menu-links a:nth-child(3) { transition-delay: .06s; }
  html.menu-open .menu-links a:nth-child(4) { transition-delay: .09s; } html.menu-open .menu-foot { transition-delay: .12s; }
}
@media (min-width: 960px) { .menu { display: none; } }
html.menu-open, html.menu-open body { overflow: hidden; }

/* ---------- form fields ---------- */
.field input, .field textarea, .field select { width: 100%; font: 400 16px var(--text); color: var(--ink); background: var(--deep); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 13px 15px; outline: none; resize: vertical; transition: border-color .15s, box-shadow .15s, background .15s; }
.field input::placeholder, .field textarea::placeholder { color: #5F6A88; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); background: #0A1022; box-shadow: none; }
/* one focus indicator for text fields: the field's own ring, never an extra outline box around it */
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* ---------- form conventions (every page) ----------
   Visible label above every field. Required fields are unmarked; optional ones carry <span class="opt">Optional</span>.
   Errors: .field-error under the field + aria-invalid + aria-describedby. Success: .done-mark. */
.field label, .lbl { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font: 500 14px var(--text); color: var(--ink); }
.opt { font: 500 12.5px var(--text); color: var(--ink-3); }
.hint { display: block; margin-top: 7px; font-size: 13.5px; color: var(--ink-3); max-width: none; }
.field-error { display: flex; align-items: center; gap: 7px; margin-top: 8px; font: 500 13.5px var(--text); color: #FF8A8A; max-width: none; }
.field-error::before { content: '!'; flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--text); color: var(--void); background: var(--bad); }
.field [aria-invalid="true"] { border-color: var(--bad); box-shadow: none; }
.done-mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--blue); box-shadow: 0 0 0 6px rgba(46,107,255,.16), 0 12px 30px -10px rgba(46,107,255,.8); }
.done-mark svg { width: 26px; height: 26px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); font-size: 14.5px; }
.foot-top { display: grid; gap: 36px; }
.foot-brand p { margin-top: 14px; max-width: 34ch; font-size: 14.5px; color: var(--ink-3); }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.foot-cols .fh { font: 600 13.5px var(--text); letter-spacing: 0; line-height: 1.4; color: var(--ink); margin-bottom: 12px; }
@media (max-width: 859px) { .foot-cols nav:last-child { grid-column: 1 / -1; } }
.foot-cols a { display: block; padding: 5px 0; color: var(--ink-3); transition: color .15s; }
.foot-cols a:hover { color: var(--ink); }
.foot-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 13.5px; color: var(--ink-3); }
.foot-bottom a { color: var(--ink-3); } .foot-bottom a:hover { color: var(--ink); }
.foot-bottom > span:first-child { max-width: 62ch; line-height: 1.55; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (min-width: 860px) { .foot-top { grid-template-columns: 1.2fr 2fr; gap: 60px; } .foot-cols { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }