/* ==========================================================================
   Efaeto — marketing site stylesheet
   --------------------------------------------------------------------------
   One file, no build step, no third-party CSS. The Caddy CSP on efaeto.com
   allows style-src 'self' 'unsafe-inline', where 'unsafe-inline' exists only
   for style ATTRIBUTES in the markup: there are no inline <style> blocks and
   no external stylesheets. Keep it that way.

   Design rules that hold across the whole site:
     1. White is the ground. Warm off-white marks an alternating band. One
        dark section per page at most, used to break rhythm, never for decor.
     2. Gold is an action colour and an accent, never a texture. No repeating
        ornament, no pattern fills, no decorative rules between sections.
     3. Type carries the hierarchy. If a heading needs an ornament to read as
        a heading, the heading is wrong.
     4. Every colour below was contrast-checked on its own ground; nothing
        used for body copy ships under WCAG AA.
   ========================================================================== */

/* ------------------------------------------------------------- 1. FONTS */
@font-face {
  font-family: 'Inter Var';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Var';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-greek.woff2') format('woff2-variations');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* The wordmark face. Unchanged by design: the logo is the one part of the
   identity that was already right. */
@font-face {
  font-family: 'Efaeto Brand';
  font-style: normal;
  font-display: swap;
  font-weight: 600 700;
  src: url('fonts/comfortaa-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Efaeto Brand';
  font-style: normal;
  font-display: swap;
  font-weight: 600 700;
  src: url('fonts/comfortaa-greek.woff2') format('woff2-variations');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* ------------------------------------------------------------ 2. TOKENS */
:root {
  /* Surfaces */
  --bg:            #FFFFFF;
  --bg-alt:        #FAF6F0;   /* alternating band, warm so it belongs to the brand */
  --bg-inset:      #F4EEE5;   /* wells inside cards */
  --bg-dark:       #17130F;   /* the one dark block */
  --bg-dark-soft:  #241D17;

  /* Ink. Ratios are against --bg unless noted. */
  --ink:           #17130F;   /* 17.4:1  headings */
  --ink-body:      #4C443D;   /*  9.0:1  body copy */
  --ink-muted:     #776E65;   /*  4.8:1  secondary copy, the lightest allowed */
  --ink-faint:     #9A9088;   /*  2.9:1  large or decorative only, never body */
  --on-dark:       #FFFFFF;
  --on-dark-body:  #C9C0B6;   /*  9.2:1 on --bg-dark */
  --on-dark-muted: #9A9088;   /*  5.4:1 on --bg-dark */

  /* Brand */
  --gold:          #D9A93E;   /* fills only; 1.9:1 as text, never used as text */
  --gold-hover:    #C99A31;
  --gold-line:     #E2C47F;
  --gold-text:     #8C5A1F;   /*  5.7:1 on white, safe for copy and small icons */
  --gold-wash:     #FDF6E7;
  --on-gold:       #241A0C;   /*  8.6:1 on the gold fill */

  /* Status */
  --ok:            #0A7050;   /*  5.4:1 */
  --ok-wash:       #E9F5F0;
  --warn:          #8A5A05;   /*  5.5:1 */
  --warn-wash:     #FBF2E2;
  --plan:          #5E5750;   /*  7.0:1 */
  --plan-wash:     #F2EFEB;

  /* Lines */
  --line:          #E9E2D8;
  --line-mid:      #DCD3C6;
  --line-strong:   #C8BCAA;

  /* Geometry */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 999px;
  --wrap: 1180px;
  --gutter: 24px;
  --sec-y: 104px;
  --tap: 44px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .3, 1);
  --fast: .16s var(--ease);
  --slow: .5s var(--ease);

  /* Elevation. Warm, shallow; black shadow on warm white reads as grime. */
  --sh-sm: 0 1px 2px rgba(35, 27, 20, .05);
  --sh-md: 0 1px 2px rgba(35, 27, 20, .05), 0 12px 28px -18px rgba(35, 27, 20, .30);
  --sh-lg: 0 2px 4px rgba(35, 27, 20, .05), 0 30px 60px -30px rgba(35, 27, 20, .38);
}

/* ------------------------------------------------------------- 3. RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--ink-body);
  font-family: 'Inter Var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
b, strong { font-weight: 650; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--gold); color: var(--on-gold); }

/* --------------------------------------------------------- 4. LANGUAGE */
/* boot.js stamps data-lang on <html> before first paint, so only one
   language is ever painted. Without it both flash for a frame. */
[data-lang='el'] [lang-en],
[data-lang='en'] [lang-el] { display: none !important; }

/* ------------------------------------------------------- 5. TYPOGRAPHY */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 660;
  line-height: 1.14;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.h-display {
  font-size: clamp(38px, 5.4vw, 63px);
  line-height: 1.06;
  letter-spacing: -.032em;
}
.h1 { font-size: clamp(33px, 4.2vw, 48px); letter-spacing: -.028em; }
.h2 { font-size: clamp(27px, 3vw, 38px); }
.h3 { font-size: clamp(20px, 1.6vw, 23px); line-height: 1.28; letter-spacing: -.014em; }
.h4 { font-size: 17.5px; line-height: 1.35; letter-spacing: -.01em; }

.lede {
  font-size: clamp(17.5px, 1.35vw, 20px);
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 62ch;
  text-wrap: pretty;
}
.lede-c { margin-inline: auto; }

.small { font-size: 14.5px; line-height: 1.55; }
.muted { color: var(--ink-muted); }
.mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .92em;
  letter-spacing: -.01em;
}

/* -------------------------------------------------------- 6. STRUCTURE */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: 820px; }

section { padding-block: var(--sec-y); }
section.band { background: var(--bg-alt); }
section.tight { padding-block: calc(var(--sec-y) * .62); }
section + section.band,
section.band + section { border-top: 1px solid var(--line); }

.sec-head { max-width: 760px; margin-bottom: 52px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .lede { margin-top: 18px; }
.sec-head.center .lede { margin-inline: auto; }

.eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 680;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- 7. BRAND */
/* UNCHANGED ON PURPOSE. The wordmark is the one piece of the identity that
   was already finished; nothing here may drift. */
.brand-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: 'Efaeto Brand', 'Inter Var', system-ui, sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink);
  transition: color var(--fast);
}
.brand-logo .dot { color: var(--gold-text); }
.brand-logo:hover { color: var(--gold-text); }
.site-footer .brand-logo { color: #fff; }
.site-footer .brand-logo .dot { color: var(--gold); }

/* -------------------------------------------------------- 8. NAVIGATION */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.site-nav.scrolled {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 70px;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav-menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.nav-link {
  padding: 9px 13px;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: 560;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: color var(--fast), background var(--fast);
}
.nav-link:hover { color: var(--ink); background: rgba(35, 27, 20, .045); }
.nav-link.active { color: var(--ink); font-weight: 640; }

.nav-menu .nav-cta-sheet { display: none; }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 14px; }

.lang-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-mid);
  border-radius: var(--r-full);
  background: var(--bg);
}
.lang-btn {
  min-width: 38px;
  padding: 5px 9px;
  border-radius: var(--r-full);
  font-size: 12.5px;
  font-weight: 680;
  letter-spacing: .03em;
  color: var(--ink-muted);
  transition: color var(--fast), background var(--fast);
}
.lang-btn:hover { color: var(--ink); }
.lang-btn.active { background: var(--ink); color: #fff; }

.nav-burger {
  display: none;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--line-mid);
  border-radius: var(--r-sm);
  position: relative;
}
.nav-burger span,
.nav-burger::before,
.nav-burger::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--fast), opacity var(--fast);
}
.nav-burger span { top: 20px; }
.nav-burger::before { top: 14px; }
.nav-burger::after { top: 26px; }
body.menu-open .nav-burger span { opacity: 0; }
body.menu-open .nav-burger::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav-burger::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------- 9. BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--tap);
  padding: 12px 22px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font-size: 15.5px;
  font-weight: 620;
  letter-spacing: -.008em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--gold); color: var(--on-gold); }
.btn-primary:hover { background: var(--gold-hover); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2C241C; }

.btn-outline { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--bg-alt); border-color: var(--ink-muted); }

.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #F0EAE1; }

.btn-quiet { padding-inline: 6px; color: var(--gold-text); min-height: auto; }
.btn-quiet:hover { color: var(--ink); }

.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 14.5px; }
.btn-lg { min-height: 52px; padding: 14px 28px; font-size: 16.5px; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row.center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 620;
  color: var(--gold-text);
  transition: gap var(--fast), color var(--fast);
}
.link-arrow::after { content: '→'; transition: transform var(--fast); }
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------- 10. HERO */
.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 108px) clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(217, 169, 62, .12), transparent 62%),
    var(--bg);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.hero-title { margin-bottom: 22px; }
.hero .lede { margin-bottom: 30px; }
.hero-ctas { margin-bottom: 26px; }

.hero-sub {
  padding-block: clamp(52px, 6vw, 80px) clamp(48px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.hero-sub .eyebrow { margin-bottom: 14px; }
.hero-sub h1 { margin-bottom: 20px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-full);
  background: var(--gold-wash);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold-text);
}
.tag .dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(10, 112, 80, .16);
}

.ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ticks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--ink-muted);
}
.ticks li::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ok-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4L9.6 3.9' fill='none' stroke='%230A7050' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Hero side panel: an honest, flat illustration of the order path. It is
   drawn, not screenshotted, and never labelled as a screenshot. */
.flow-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--sh-lg);
}
.flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.flow-head .h4 { font-size: 15px; }
.flow-chip {
  padding: 4px 11px;
  border-radius: var(--r-full);
  background: var(--ok-wash);
  color: var(--ok);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.flow-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
}
.flow-step + .flow-step { border-top: 1px dashed var(--line-mid); }
.flow-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-inset);
  color: var(--gold-text);
  font-size: 13px;
  font-weight: 700;
}
.flow-step .h4 { font-size: 15.5px; }
.flow-step p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.45; }
.flow-ms {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}
.flow-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------ 11. STATS */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.stat { padding: 26px 22px; background: var(--bg); }
section.band .stat { background: var(--bg-alt); }
.stat-num {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 680;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1.1;
}
.stat-lbl { margin-top: 6px; font-size: 14px; color: var(--ink-muted); line-height: 1.4; }

/* ------------------------------------------------------------ 12. CARDS */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}
section.band .card { background: var(--bg); }
.card .h3, .card .h4 { margin-bottom: 10px; }
.card p { font-size: 15.5px; line-height: 1.58; }
.card > .link-arrow { margin-top: auto; padding-top: 18px; font-size: 15px; }

a.card:hover { border-color: var(--line-strong); box-shadow: var(--sh-md); transform: translateY(-2px); }

.card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: var(--r-sm);
  background: var(--gold-wash);
  border: 1px solid var(--gold-line);
  color: var(--gold-text);
}
.card-icon svg { width: 21px; height: 21px; }

.card-num {
  margin-bottom: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-text);
  letter-spacing: .04em;
}

/* ------------------------------------------------------- 13. SPLIT ROWS */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split + .split { margin-top: clamp(56px, 7vw, 96px); }
.split.flip .split-media { order: -1; }
.split-body h2 { margin-bottom: 18px; }
.split-body .lede { margin-bottom: 24px; }
.sec-head h2 + .lede { margin-top: 18px; }

.checklist { display: grid; gap: 14px; }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 13px; }
.checklist li::before {
  content: '';
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--ok-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4L9.6 3.9' fill='none' stroke='%230A7050' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.checklist b { display: block; color: var(--ink); }
.checklist p { font-size: 15px; color: var(--ink-muted); line-height: 1.5; }

.panel {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-alt);
}
section.band .panel { background: var(--bg); }
.panel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  font-size: 15.5px;
}
.panel-row + .panel-row { border-top: 1px solid var(--line); }
.panel-row b { color: var(--ink); }
.panel-row span:last-child { color: var(--ink-muted); text-align: right; }

/* ------------------------------------------------------ 14. DARK BLOCK */
.dark {
  background: var(--bg-dark);
  color: var(--on-dark-body);
  border-block: 0;
}
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--on-dark); }
.dark .lede { color: var(--on-dark-body); }
.dark .eyebrow { color: var(--gold); }
.dark .muted { color: var(--on-dark-muted); }
.dark .card {
  background: var(--bg-dark-soft);
  border-color: rgba(255, 255, 255, .09);
}
.dark .card p { color: var(--on-dark-body); }
.dark .card-icon {
  background: rgba(217, 169, 62, .14);
  border-color: rgba(217, 169, 62, .3);
  color: var(--gold);
}
.dark .stats { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .1); }
.dark .stat { background: var(--bg-dark); }
.dark .stat-num { color: var(--on-dark); }
.dark .stat-lbl { color: var(--on-dark-muted); }
.dark .link-arrow { color: var(--gold); }
.dark .link-arrow:hover { color: #fff; }
.dark .panel { background: var(--bg-dark-soft); border-color: rgba(255, 255, 255, .09); }
.dark .panel-row + .panel-row { border-top-color: rgba(255, 255, 255, .09); }
.dark .panel-row b { color: var(--on-dark); }
.dark .panel-row span:last-child { color: var(--on-dark-muted); }
.dark .checklist b { color: var(--on-dark); }
.dark .checklist p { color: var(--on-dark-muted); }

/* --------------------------------------------------------- 15. DIAGRAM */
.diagram {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
.dia-box {
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg);
}
.dia-box.local { border-color: var(--gold-line); background: var(--gold-wash); }
.dia-box.cloud { border-style: dashed; background: var(--bg-alt); }
.dia-title .mono { text-transform: none; letter-spacing: 0; }
.dia-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.dia-box.cloud .dia-title .mono { text-transform: none; letter-spacing: 0; }
.dia-title { color: var(--ink-muted); }
.dia-devices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dia-chip {
  padding: 12px 10px;
  border: 1px solid var(--line-mid);
  border-radius: var(--r-sm);
  background: var(--bg);
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.dia-chip small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--ink-muted); }
.dia-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dia-link::before, .dia-link::after { content: ''; flex: 1; height: 1px; background: var(--line-mid); }
.dia-server {
  padding: 20px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-md);
  background: var(--bg);
}
.dia-server .h4 { margin-bottom: 4px; }
.dia-server .small { color: var(--ink-muted); }
.dia-list { display: grid; gap: 9px; margin-top: 16px; }
.dia-list li { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.dia-list li b { color: var(--ink); font-weight: 600; }
.dia-list li span { color: var(--ink-muted); text-align: right; }
.dia-note {
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px dashed var(--line-strong);
  font-size: 13.5px;
  color: var(--ink-body);
}
.dia-box.cloud ul { display: grid; gap: 9px; }
.dia-box.cloud li { font-size: 14px; color: var(--ink-body); padding-left: 16px; position: relative; }
.dia-box.cloud li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
}

/* ----------------------------------------------------------- 16. TABLE */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table.compare { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--bg); }
table.compare th, table.compare td {
  padding: 16px 18px;
  text-align: left;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.compare thead th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--bg-alt);
}
table.compare thead th.us { color: var(--gold-text); background: var(--gold-wash); }
table.compare tbody td.us { background: var(--gold-wash); color: var(--ink); font-weight: 560; }
table.compare tbody th { font-weight: 600; color: var(--ink); }
table.compare tbody tr:last-child th,
table.compare tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------- 17. PRICING */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.plan {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
}
.plan.featured {
  border-color: var(--gold);
  box-shadow: var(--sh-md);
}
.plan-flag {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--gold);
  color: var(--on-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}
.plan-name { font-size: 20px; font-weight: 660; color: var(--ink); letter-spacing: -.015em; }
.plan-for { margin-top: 8px; font-size: 14.5px; color: var(--ink-muted); line-height: 1.5; }
.plan-price {
  margin: 22px 0 6px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 23px;
  font-weight: 660;
  color: var(--ink);
  letter-spacing: -.02em;
}
.plan-note { font-size: 14px; color: var(--ink-muted); line-height: 1.5; min-height: 44px; }
.plan-list { display: grid; gap: 11px; margin: 22px 0 26px; }
.plan-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  font-size: 15px;
  line-height: 1.45;
}
.plan-list li::before {
  content: '';
  width: 18px; height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--ok-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4L9.6 3.9' fill='none' stroke='%230A7050' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.plan .btn { margin-top: auto; }

/* -------------------------------------------------------- 18. FEATURES */
.feat-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.feat-nav { position: sticky; top: 92px; display: grid; gap: 1px; }
.feat-nav a {
  padding: 9px 13px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 550;
  color: var(--ink-muted);
  transition: color var(--fast), background var(--fast);
}
.feat-nav a:hover { color: var(--ink); background: var(--bg-alt); }
.feat-nav a.active { color: var(--ink); background: var(--gold-wash); font-weight: 640; }

.feat-group { scroll-margin-top: 92px; }
.feat-group + .feat-group { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line); }
.feat-group > .h2 { margin-bottom: 10px; }
.feat-group > .lede { margin-bottom: 28px; font-size: 16.5px; }
.feat-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.feat-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 20px;
  padding: 18px 22px;
  background: var(--bg);
}
.feat-item .h4 { font-size: 16px; }
.feat-item p { grid-column: 1 / -1; font-size: 14.5px; color: var(--ink-muted); line-height: 1.5; }

.badge {
  align-self: start;
  padding: 3px 11px;
  border-radius: var(--r-full);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.badge.ok { background: var(--ok-wash); color: var(--ok); }
.badge.test { background: var(--warn-wash); color: var(--warn); }
.badge.plan { background: var(--plan-wash); color: var(--plan); }

.legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; }
.legend div { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-muted); }

/* -------------------------------------------------------------- 19. FAQ */
.faq { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.faq-item { background: var(--bg); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 24px;
  text-align: left;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  transition: background var(--fast);
}
.faq-q:hover { background: var(--bg-alt); }
.faq-q::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 4l4.5 4.4L10.5 4' fill='none' stroke='%23776E65' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--fast);
}
.faq-item.open .faq-q::after { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--slow); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 24px 22px; font-size: 15.5px; max-width: 74ch; }
.faq-a p + p { padding-top: 0; }

/* ------------------------------------------------------------- 20. CTA */
.cta-band {
  padding: clamp(40px, 5vw, 64px);
  border-radius: var(--r-lg);
  background: var(--bg-dark);
  color: var(--on-dark-body);
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 16px; }
.cta-band .lede { color: var(--on-dark-body); margin-inline: auto; margin-bottom: 28px; }
.cta-band .btn-row { justify-content: center; }
.cta-band .small { margin-top: 20px; color: var(--on-dark-muted); }
.cta-band a.mail { color: var(--gold); }

/* ---------------------------------------------------------- 21. PROSE */
.prose { max-width: 76ch; }
.prose h2 { font-size: clamp(22px, 2vw, 27px); margin: 44px 0 14px; }
.prose h3 { font-size: 18.5px; margin: 28px 0 10px; }
.prose p { margin-bottom: 16px; }
.prose ul { margin: 0 0 18px; display: grid; gap: 9px; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 2px; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.prose a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose > p:first-child { font-size: 18px; color: var(--ink-body); }
.doc-meta {
  margin-bottom: 34px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  font-size: 14.5px;
  color: var(--ink-muted);
}

/* --------------------------------------------------------- 22. PROFILE */
.profile { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.profile-photo {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg-alt);
}
.profile-photo img { width: 100%; height: auto; }
.profile-meta { display: grid; gap: 10px; margin-top: 22px; }
.profile-meta li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-muted); }
.profile-meta li b { color: var(--ink); font-weight: 600; }

.timeline { display: grid; gap: 0; }
.tl-item { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px; padding: 26px 0; border-top: 1px solid var(--line); }
.tl-item:last-child { border-bottom: 1px solid var(--line); }
.tl-when { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); padding-top: 3px; }
.tl-body .h3 { margin-bottom: 8px; }
.tl-body p { font-size: 15.5px; }

/* ----------------------------------------------------------- 23. FORMS */
.form-grid { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 14px; font-weight: 620; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 14px;
  border: 1px solid var(--line-mid);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: 16px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 4l4.5 4.4L10.5 4' fill='none' stroke='%23776E65' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(217, 169, 62, .22);
}
.form-note { font-size: 13.5px; color: var(--ink-muted); }
.form-ok {
  padding: 14px 18px;
  border: 1px solid var(--ok);
  border-radius: var(--r-sm);
  background: var(--ok-wash);
  color: var(--ok);
  font-size: 14.5px;
  font-weight: 560;
}

/* ----------------------------------------------------------- 24. MODAL */
.modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(23, 19, 15, .58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal.active { display: flex; }
.modal-box {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 30px;
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--sh-lg);
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.modal-close {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-muted);
  transition: background var(--fast), color var(--fast);
}
.modal-close:hover { background: var(--bg-alt); color: var(--ink); }
.modal-box > p { margin-bottom: 22px; font-size: 15.5px; }

/* ---------------------------------------------------------- 25. FOOTER */
.site-footer { padding-block: 64px 34px; background: var(--bg-dark); color: var(--on-dark-muted); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 36px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-about p { margin: 16px 0 18px; font-size: 14.5px; color: var(--on-dark-muted); max-width: 34ch; line-height: 1.55; }
.footer-about a { color: var(--gold); font-size: 14.5px; }
.footer-col h4 { margin-bottom: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark); }
.footer-col ul { display: grid; gap: 9px; }
.footer-col a { font-size: 14.5px; color: var(--on-dark-muted); transition: color var(--fast); }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 26px; font-size: 13.5px; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-bottom a:hover { color: #fff; }

/* ---------------------------------------------------------- 26. REVEAL */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ------------------------------------------------------- 27. RESPONSIVE */
@media (max-width: 1040px) {
  :root { --sec-y: 84px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: 1fr; }
  .plan.featured { order: -1; }
  .feat-layout { grid-template-columns: 1fr; }
  .feat-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .diagram { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-about { grid-column: 1 / -1; }
  .profile { grid-template-columns: 1fr; }
  .profile-photo { max-width: 260px; }
}

@media (max-width: 880px) {
  .nav-menu {
    position: fixed;
    inset: 70px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 18px 22px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fast), transform var(--fast);
  }
  body.menu-open .nav-menu { transform: none; opacity: 1; pointer-events: auto; }
  .nav-link { padding: 13px 14px; font-size: 16px; border-radius: var(--r-sm); }
  .nav-burger { display: block; }
  .nav-actions > .btn { display: none; }
  .nav-menu .nav-cta-sheet { display: flex; margin-top: 10px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .split.flip .split-media { order: 0; }
  .tl-item { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 560px) {
  :root { --sec-y: 64px; --gutter: 18px; }
  body { font-size: 16.5px; }
  .grid-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .dia-devices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card, .plan, .panel, .dia-box { padding: 22px; }
  .modal-box { padding: 24px; }
  .btn-row .btn { width: 100%; }
  .faq-q { padding: 17px 18px; font-size: 16px; }
  .faq-a p { padding-inline: 18px; }
  .feat-item { padding: 16px 18px; }
}

@media print {
  .site-nav, .site-footer, .modal, .btn, .cta-band { display: none !important; }
  body { font-size: 12pt; }
}