/* =========================================================
   SOLODOVNIKOVA.AGENCY — Design system
   Atelier logiciel · Paris — quiet engineering
   ---------------------------------------------------------
   1. Tokens (variables)      9. Sections
   2. Reset / base           10. Diagrams & mockups
   3. Typography             11. Forms
   4. Layout                 12. Footer
   5. Header / nav           13. Animations
   6. Buttons                14. Utilities
   7. Cards                  15. Responsive
   8. Hero                   16. (print in print.css)
   ========================================================= */

/* ============ 1. TOKENS ============ */
:root {
  /* Neutrals — warm light side */
  --c-paper:        #F7F4EF;   /* warm off-white page bg */
  --c-paper-2:      #EFEAE1;   /* sand panel */
  --c-paper-3:      #E6DFD2;   /* deeper sand border */
  --c-ink:          #131C26;   /* near-black text on light */
  --c-ink-soft:     #4C5A67;   /* muted slate text */
  --c-ink-faint:    #7C8893;   /* captions */
  --c-line:         #DED6C8;   /* hairline on light */

  /* Neutrals — dark side */
  --c-navy:         #0A1422;   /* deep midnight */
  --c-navy-2:       #0E1B2D;   /* raised dark surface */
  --c-navy-3:       #14263C;   /* dark card */
  --c-navy-line:    #21364F;   /* hairline on dark */
  --c-on-dark:      #EAF1F7;   /* text on dark */
  --c-on-dark-soft: #9DB0C2;   /* muted text on dark */

  /* Accents */
  --c-cyan:    #3FD3F0;
  --c-emerald: #46E0A8;
  --c-violet:  #8E84FF;
  --c-amber:   #FFB877;
  --c-coral:   #FF8E72;

  /* Functional accent (primary brand action) = teal-cyan blend */
  --c-accent:       #128CA6;   /* darkened cyan, AA on white */
  --c-accent-deep:  #0C6E83;
  --c-accent-soft:  #E3F4F8;

  --c-success:  #1F7A4D;
  --c-success-bg:#E8F6EE;
  --c-warn:     #B5791A;
  --c-warn-bg:  #FBF1DD;
  --c-warn-line:#E9C77E;
  --c-error:    #C0392B;

  /* Gradients */
  --grad-text:   linear-gradient(100deg, #2BD0C4 0%, #3FD3F0 45%, #8E84FF 100%);
  --grad-accent: linear-gradient(120deg, #128CA6 0%, #1AB3B0 100%);
  --grad-mesh-1: radial-gradient(60% 55% at 18% 12%, rgba(63,211,240,.20), transparent 60%);
  --grad-mesh-2: radial-gradient(50% 50% at 88% 8%, rgba(142,132,255,.18), transparent 60%);
  --grad-mesh-3: radial-gradient(55% 60% at 75% 95%, rgba(70,224,168,.14), transparent 60%);

  /* Typography */
  --font-base:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --container: 1160px;
  --container-narrow: 760px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(10,20,34,.05), 0 2px 8px rgba(10,20,34,.04);
  --sh-md: 0 8px 30px rgba(10,20,34,.10), 0 2px 8px rgba(10,20,34,.05);
  --sh-lg: 0 24px 60px rgba(10,20,34,.16);
  --sh-glow: 0 0 0 1px rgba(63,211,240,.18), 0 18px 50px rgba(18,140,166,.20);

  --transition: 200ms cubic-bezier(.4,.14,.3,1);
  --z-header: 100;
}

/* ============ 2. RESET / BASE ============ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--c-ink);
  background: var(--c-paper);
  line-height: 1.65;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
  color: var(--c-accent-deep);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--transition);
}
a:hover { color: var(--c-accent); text-decoration: underline; }

main { display: block; }

::selection { background: rgba(63,211,240,.28); }

/* ============ 3. TYPOGRAPHY ============ */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-2);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
h1 { font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.01em; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 var(--space-2); }
ul, ol { margin: 0 0 var(--space-2); padding-left: 1.25em; }
li { margin-bottom: 0.35em; }
strong { font-weight: 650; }

.eyebrow, .kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin: 0 0 var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 1.8em; height: 2px;
  background: var(--grad-accent);
  border-radius: 2px;
}
.kicker::before { content: none; }

.mono-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
}

.display-title {
  font-size: clamp(2.4rem, 1.2rem + 5vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 760;
  margin: 0 0 var(--space-3);
}

.section-title { margin-bottom: var(--space-2); }

.section-lead, .lede {
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 44rem;
}

.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============ 4. LAYOUT ============ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.section { padding: var(--space-6) 0; position: relative; }
.section--tight { padding: var(--space-5) 0; }

/* Soft sand section */
.section--soft { background: var(--c-paper-2); }

/* Dark sections */
.section--dark {
  background:
    var(--grad-mesh-1), var(--grad-mesh-2), var(--grad-mesh-3),
    var(--c-navy);
  color: var(--c-on-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--c-on-dark); }
.section--dark p { color: var(--c-on-dark-soft); }
.section--dark .lede,
.section--dark .section-lead { color: var(--c-on-dark-soft); }
.section--dark a { color: var(--c-cyan); }
.section--dark .eyebrow { color: var(--c-cyan); }

/* dotted-grid backdrop helper for dark sections */
.section--dark.has-grid::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(157,176,194,.10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
  mask-image: linear-gradient(180deg, #000, transparent 80%);
  pointer-events: none;
}
.section--dark.has-grid > .container { position: relative; z-index: 1; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.measure { max-width: var(--container-narrow); }

/* ============ 5. HEADER / NAV ============ */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--c-navy); color: #fff;
  padding: 0.7em 1.1em; z-index: 1000;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(247,244,239,.72);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled {
  background: rgba(247,244,239,.88);
  border-bottom-color: var(--c-line);
  box-shadow: var(--sh-sm);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: 0.85rem var(--space-3);
}

.logo { display: inline-flex; align-items: center; gap: .5em; flex-shrink: 0; }
.logo img { height: 30px; width: auto; }
.logo:hover { text-decoration: none; }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--c-line);
  background: rgba(255,255,255,.5);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block; width: 20px; height: 2px;
  background: var(--c-ink); border-radius: 2px;
  transition: var(--transition);
}
.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before { content: ""; position: absolute; top: -6px; left: 0; }
.nav-toggle-icon::after  { content: ""; position: absolute; top: 6px; left: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after  { top: 0; transform: rotate(-45deg); }

.primary-nav { display: flex; align-items: center; gap: var(--space-3); }
.primary-nav ul {
  display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0;
}
.primary-nav > ul > li > a {
  position: relative;
  display: inline-block;
  padding: 0.45em 0.7em;
  color: var(--c-ink);
  font-weight: 500;
  font-size: 0.94rem;
  border-radius: var(--r-sm);
}
.primary-nav > ul > li > a::after {
  content: "";
  position: absolute; left: 0.7em; right: 0.7em; bottom: 0.2em;
  height: 2px; border-radius: 2px;
  background: var(--grad-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.primary-nav > ul > li > a:hover { color: var(--c-accent-deep); text-decoration: none; }
.primary-nav > ul > li > a:hover::after,
.primary-nav > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav > ul > li > a[aria-current="page"] { color: var(--c-accent-deep); font-weight: 650; }

.nav-actions { display: flex; align-items: center; gap: var(--space-2); }

.lang-switch {
  font-family: var(--font-mono);
  font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 0.4em 0.85em;
  color: var(--c-ink);
  background: rgba(255,255,255,.4);
}
.lang-switch:hover { border-color: var(--c-accent); color: var(--c-accent-deep); text-decoration: none; }

@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed;
    top: 63px; left: 0; right: 0; bottom: 0;
    height: calc(100dvh - 63px);
    z-index: calc(var(--z-header) + 1);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: var(--space-2);
    background: var(--c-paper);
    padding: var(--space-3);
    transform: translateY(-8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    overflow-y: auto;
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .primary-nav ul { flex-direction: column; gap: 0.15rem; }
  .primary-nav > ul > li > a { display: block; padding: 0.8em 0.6em; font-size: 1.05rem; border-bottom: 1px solid var(--c-line); border-radius: 0; }
  .primary-nav > ul > li > a::after { content: none; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: var(--space-2); margin-top: var(--space-2); }
  .lang-switch { text-align: center; padding: 0.7em; }
}

/* No-JS: show nav inline, hide toggle */
.no-js .nav-toggle { display: none; }
.no-js .primary-nav { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; flex-wrap: wrap; }

/* ============ 6. BUTTONS ============ */
.btn {
  --btn-bg: var(--c-accent);
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.78em 1.5em;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 0.96rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
  position: relative; overflow: hidden;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: 0 8px 22px rgba(18,140,166,.28);
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 600ms ease;
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(18,140,166,.34); }
.btn-primary:hover::after { transform: translateX(120%); }

.btn-secondary {
  background: rgba(255,255,255,.6);
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn-secondary:hover { border-color: var(--c-accent); color: var(--c-accent-deep); transform: translateY(-2px); box-shadow: var(--sh-sm); }

.section--dark .btn-secondary {
  background: rgba(255,255,255,.04);
  border-color: var(--c-navy-line);
  color: var(--c-on-dark);
}
.section--dark .btn-secondary:hover { border-color: var(--c-cyan); color: #fff; }

.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0; }

/* ============ 7. CARDS ============ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.card {
  position: relative;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--space-3);
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
}
/* gradient hairline that appears on hover */
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-text);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--transition);
  pointer-events: none;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: 0.4em; }
.card > p:last-child { margin-bottom: 0; }

/* decorative corner mark */
.card .corner-mark {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--c-ink-faint); letter-spacing: 0.05em;
}

.card .icon, .icon-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: var(--space-2);
  border-radius: 12px;
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
}
.card .icon svg, .icon-box svg { width: 24px; height: 24px; }

.section--dark .card {
  background: linear-gradient(180deg, var(--c-navy-3), var(--c-navy-2));
  border-color: var(--c-navy-line);
  box-shadow: none;
}
.section--dark .card p { color: var(--c-on-dark-soft); }
.section--dark .icon-box, .section--dark .card .icon {
  background: rgba(63,211,240,.12); color: var(--c-cyan);
}

/* ============ 8. HERO ============ */
.hero {
  position: relative;
  padding: clamp(3rem, 2rem + 6vw, 6rem) 0 var(--space-6);
  background:
    var(--grad-mesh-1), var(--grad-mesh-2), var(--grad-mesh-3),
    linear-gradient(180deg, #07101D 0%, #0A1422 60%, #0B1830 100%);
  color: var(--c-on-dark);
  overflow: hidden;
}
.hero::after { /* dotted grid */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(157,176,194,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0, #000, transparent 75%);
  mask-image: radial-gradient(120% 80% at 50% 0, #000, transparent 75%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero .lede { color: var(--c-on-dark-soft); }
.hero .eyebrow { color: var(--c-cyan); }
.hero .hero-signature { color: var(--c-on-dark-soft); }

/* floating gradient blobs */
.hero .blob {
  position: absolute; border-radius: 50%; filter: blur(60px);
  opacity: .5; pointer-events: none; z-index: 0;
}
.hero .blob-1 { width: 340px; height: 340px; background: radial-gradient(circle, rgba(63,211,240,.5), transparent 70%); top: -80px; right: 8%; animation: floatY 14s ease-in-out infinite; }
.hero .blob-2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(142,132,255,.45), transparent 70%); bottom: -60px; left: 4%; animation: floatY 18s ease-in-out infinite reverse; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-5);
  align-items: center;
}
.hero-signature { font-size: 0.95rem; margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 0.6em; }
.hero-signature .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-emerald); box-shadow: 0 0 0 0 rgba(70,224,168,.6); animation: pulse 2.4s ease-out infinite; flex-shrink: 0; }

/* generic dark/light split hero for inner pages */
.page-hero {
  position: relative;
  background:
    var(--grad-mesh-1), var(--grad-mesh-2),
    linear-gradient(180deg, #0A1422, #0E1B2D);
  color: var(--c-on-dark);
  padding: clamp(3rem, 2rem + 5vw, 5rem) 0 clamp(3rem, 2rem + 5vw, 5rem);
  overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(157,176,194,.07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; }
.page-hero .lede { color: var(--c-on-dark-soft); max-width: 46rem; }
.page-hero .eyebrow { color: var(--c-cyan); }

/* ============ HERO MOCKUP (signature visual) ============ */
.mockup {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(20,38,60,.9), rgba(11,24,40,.92));
  border: 1px solid var(--c-navy-line);
  box-shadow: var(--sh-lg);
  padding: 1.1rem;
  backdrop-filter: blur(6px);
}
.mockup-bar { display: flex; align-items: center; gap: 0.4em; margin-bottom: 0.9rem; }
.mockup-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #33485f; }
.mockup-bar .dot:nth-child(1){ background:#FF8E72; }
.mockup-bar .dot:nth-child(2){ background:#FFB877; }
.mockup-bar .dot:nth-child(3){ background:#46E0A8; }
.mockup-bar .mockup-title { margin-left: 0.5em; font-family: var(--font-mono); font-size: 0.72rem; color: var(--c-on-dark-soft); letter-spacing: 0.04em; }

.mockup-panel {
  background: rgba(8,17,29,.6);
  border: 1px solid var(--c-navy-line);
  border-radius: var(--r-md);
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
}
.mockup-panel:last-child { margin-bottom: 0; }
.mockup-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.35em 0; }
.mockup-row + .mockup-row { border-top: 1px solid rgba(33,54,79,.6); }
.mockup-row .label { font-size: 0.84rem; color: var(--c-on-dark-soft); display: inline-flex; align-items: center; gap: 0.5em; }
.mockup-row .mono { font-family: var(--font-mono); font-size: 0.78rem; color: var(--c-on-dark); }

.bar-track { height: 7px; border-radius: 4px; background: rgba(157,176,194,.16); overflow: hidden; flex: 1; max-width: 120px; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--grad-accent); width: 70%; }
.bar-fill.emerald { background: linear-gradient(90deg,#1AB3B0,#46E0A8); }
.bar-fill.violet  { background: linear-gradient(90deg,#6E63E8,#8E84FF); }

/* status badge */
.badge {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 0.28em 0.7em; border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.badge .led { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.badge.ok    { color: var(--c-emerald); background: rgba(70,224,168,.10);  border-color: rgba(70,224,168,.28); }
.badge.run   { color: var(--c-cyan);    background: rgba(63,211,240,.10);  border-color: rgba(63,211,240,.28); }
.badge.wait  { color: var(--c-amber);   background: rgba(255,184,119,.10); border-color: rgba(255,184,119,.30); }
.badge.idle  { color: var(--c-on-dark-soft); background: rgba(157,176,194,.08); border-color: rgba(157,176,194,.22); }
.badge.run .led { animation: pulse 1.8s ease-out infinite; }

.float-card {
  position: absolute;
  background: linear-gradient(180deg, rgba(20,38,60,.96), rgba(11,24,40,.96));
  border: 1px solid var(--c-navy-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-mono); font-size: 0.74rem;
  color: var(--c-on-dark);
}
.float-card.tl { top: -18px; left: -22px; animation: floatY 9s ease-in-out infinite; }
.float-card.br { bottom: -20px; right: -16px; animation: floatY 11s ease-in-out infinite reverse; }
.float-card .badge { margin-top: 0.3em; }

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .float-card.tl { left: 4px; }
  .float-card.br { right: 4px; }
}

/* ============ 9. SECTIONS — shared content blocks ============ */

/* check-list with custom marker */
.check-list { list-style: none; padding: 0; margin: var(--space-2) 0; }
.check-list li {
  position: relative; padding-left: 1.9em; margin-bottom: 0.6em;
}
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.34em;
  width: 1.1em; height: 1.1em; border-radius: 5px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 0.8em no-repeat,
    var(--grad-accent);
}
.section--dark .check-list li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23071019' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 0.8em no-repeat,
    linear-gradient(120deg,#3FD3F0,#46E0A8);
}

/* callouts */
.callout {
  position: relative;
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-md);
  padding: var(--space-3);
  background: #fff;
  margin: var(--space-3) 0;
  box-shadow: var(--sh-sm);
}
.callout h3 { margin-top: 0; }
.callout > *:last-child { margin-bottom: 0; }
.callout--limits { border-left-color: var(--c-ink-faint); background: var(--c-paper-2); box-shadow: none; }
.callout--warning { border-color: var(--c-warn-line); border-left-color: var(--c-warn); background: var(--c-warn-bg); box-shadow: none; }

/* steps / timeline */
.steps {
  list-style: none; padding: 0; margin: var(--space-4) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap: var(--space-3);
}
.steps li {
  position: relative;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--space-3);
  background: #fff;
  box-shadow: var(--sh-sm);
}
.steps .step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3em; height: 2.3em; border-radius: 12px;
  background: var(--c-navy); color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem;
  margin-bottom: 0.6em;
  box-shadow: 0 6px 16px rgba(10,20,34,.18);
}
.section--dark .steps li { background: linear-gradient(180deg,var(--c-navy-3),var(--c-navy-2)); border-color: var(--c-navy-line); box-shadow:none; }
.section--dark .steps .step-number { background: var(--grad-accent); color: #06121d; }

/* When steps form a real sequence, show a connecting rail on wide screens */
.steps--timeline { counter-reset: step; }

/* pricing */
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: var(--space-3); margin-top: var(--space-4);
}
.price-card {
  position: relative;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: #fff;
  display: flex; flex-direction: column;
  box-shadow: var(--sh-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.price-card.is-featured {
  border-color: transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--grad-text) border-box;
  border: 1.5px solid transparent;
}
.price-card .price-tag {
  position: absolute; top: -0.85em; left: var(--space-3);
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--c-navy); color: #fff;
  padding: 0.35em 0.8em; border-radius: var(--r-pill);
}
.price-card .price {
  font-size: 1.7rem; font-weight: 760; letter-spacing: -0.02em;
  color: var(--c-ink); margin: 0.2em 0;
}
.price-card .price-note { font-size: 0.9rem; color: var(--c-ink-soft); }
.price-card .btn { margin-top: auto; }

/* generic 2-col feature layout used on inner pages */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-5); align-items: center;
}
@media (max-width: 880px){ .split { grid-template-columns: 1fr; gap: var(--space-4);} }

/* tech tag pills (NAS / S3 / PostgreSQL …) */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.6em; margin: var(--space-3) 0; padding: 0; list-style: none; }
.tag {
  font-family: var(--font-mono); font-size: 0.8rem;
  padding: 0.4em 0.9em; border-radius: var(--r-pill);
  border: 1px solid var(--c-line); background: #fff; color: var(--c-ink-soft);
}
.section--dark .tag { background: rgba(63,211,240,.06); border-color: var(--c-navy-line); color: var(--c-on-dark); }

/* ============ 10. DIAGRAMS / illustration captions ============ */
.illustration-caption, .figure-caption {
  font-family: var(--font-mono);
  font-size: 0.74rem; letter-spacing: 0.03em;
  color: var(--c-ink-faint); text-align: center; margin-top: 0.7em;
}
.section--dark .illustration-caption { color: var(--c-on-dark-soft); }

.figure-frame {
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(20,38,60,.55), rgba(11,24,40,.55));
  border: 1px solid var(--c-navy-line);
  padding: var(--space-3);
}

/* ============ 11. FORMS ============ */
.form-card {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--space-4);
  box-shadow: var(--sh-sm); max-width: 640px;
}
.form-field { margin-bottom: var(--space-3); }
.form-field label { display: block; font-weight: 600; margin-bottom: 0.4em; }
.form-field .hint { font-weight: 400; color: var(--c-ink-faint); font-size: 0.88rem; }
.form-field input,
.form-field textarea {
  width: 100%; padding: 0.75em 0.9em;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  font: inherit; background: #fff; color: var(--c-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(18,140,166,.14);
}
.form-field textarea { min-height: 9em; resize: vertical; }
.form-field .error-msg { color: var(--c-error); font-size: 0.86rem; margin: 0.4em 0 0; display: none; }
.form-field.has-error .error-msg { display: block; }
.form-field.has-error input,
.form-field.has-error textarea { border-color: var(--c-error); box-shadow: 0 0 0 4px rgba(192,57,43,.10); }

.checkbox-field { display: flex; gap: 0.7em; align-items: flex-start; }
.checkbox-field input { width: auto; margin-top: 0.35em; }
.checkbox-field label { font-weight: 400; }

.form-status { border-radius: var(--r-md); padding: var(--space-2) var(--space-3); margin-top: var(--space-3); display: none; }
.form-status.is-visible { display: block; }
.form-status.success { background: var(--c-success-bg); border: 1px solid var(--c-success); }
.form-status.info { background: var(--c-accent-soft); border: 1px solid var(--c-accent); }
.form-status.error { background: #fbeae8; border: 1px solid var(--c-error); }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============ 12. FOOTER ============ */
.pre-footer {
  position: relative;
  background:
    var(--grad-mesh-2), var(--grad-mesh-3),
    linear-gradient(120deg, #0C1827, #112A44);
  color: var(--c-on-dark);
  border-radius: var(--r-lg);
  padding: clamp(2.2rem, 1.5rem + 3vw, 3.5rem);
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}
.pre-footer h2 { color: #fff; }
.pre-footer p { color: var(--c-on-dark-soft); }
.pre-footer .btn-row { justify-content: center; }

.site-footer {
  position: relative;
  background: var(--c-navy);
  color: var(--c-on-dark-soft);
  padding: var(--space-5) 0 var(--space-3);
  margin-top: var(--space-6);
  overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63,211,240,.5), rgba(142,132,255,.5), transparent);
}
.site-footer .container { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--space-4) var(--space-3);
}
.footer-grid nav ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.5em; }
.footer-grid a { color: var(--c-on-dark-soft); }
.footer-grid a:hover { color: var(--c-cyan); text-decoration: none; }
.footer-brand {
  font-weight: 760; font-size: 1.15rem; color: #fff; letter-spacing: -0.01em;
  margin-bottom: 0.6em;
}
.footer-brand .text-gradient { font-weight: 760; }
.footer-heading {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-on-dark-soft); margin-bottom: 0.9em;
}
.footer-copy {
  text-align: center; font-size: 0.84rem; color: #6b7d8e;
  margin: var(--space-4) 0 0; padding-top: var(--space-3);
  border-top: 1px solid var(--c-navy-line);
}

@media (max-width: 820px){
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============ 13. ANIMATIONS ============ */
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms ease; }
.fade-in.is-visible { opacity: 1; transform: none; }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* No-JS safety: never hide content if JS is unavailable */
.no-js .fade-in,
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(70,224,168,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(70,224,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(70,224,168,0); }
}
@keyframes dash { to { stroke-dashoffset: 0; } }

/* animated connecting line inside SVGs that opt in */
.flow-line { stroke-dasharray: 6 8; animation: flowmove 1.4s linear infinite; }
@keyframes flowmove { to { stroke-dashoffset: -28; } }

/* ============ 14. UTILITIES ============ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.stack-sm > * + * { margin-top: var(--space-2); }
.muted { color: var(--c-ink-soft); }

/* legal / long-form reading layout */
.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-5); align-items: start; }
.legal-toc {
  position: sticky; top: 90px;
  font-size: 0.9rem;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: var(--space-3); background: #fff;
}
.legal-toc p { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-faint); margin: 0 0 0.7em; }
.legal-toc ul { list-style: none; padding: 0; margin: 0; }
.legal-toc li { margin-bottom: 0.5em; }
.legal-toc a { color: var(--c-ink-soft); text-decoration: none; }
.legal-toc a:hover { color: var(--c-accent-deep); }
.legal-body { max-width: 70ch; }
.legal-body h2 { scroll-margin-top: 90px; margin-top: var(--space-4); }
.legal-body h2:first-child { margin-top: 0; }
.legal-section {
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4); background: #fff;
  margin-bottom: var(--space-3); box-shadow: var(--sh-sm);
}
@media (max-width: 860px){
  .legal-layout { grid-template-columns: 1fr; gap: var(--space-3); }
  .legal-toc { position: static; }
}

/* draft notice */
.draft-notice {
  background: var(--c-warn-bg); border: 1px solid var(--c-warn-line);
  border-radius: var(--r-md); padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3); font-weight: 600; color: #7a5410;
}

/* 404 */
.error-page { text-align: center; padding: var(--space-6) 0; }
.error-code {
  font-size: clamp(5rem, 3rem + 14vw, 11rem); font-weight: 800; line-height: 0.9;
  letter-spacing: -0.04em; margin: 0;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-msg { font-size: 1.15rem; color: var(--c-ink-soft); }

/* ============ 15. RESPONSIVE ============ */
@media (max-width: 600px) {
  .section { padding: var(--space-5) 0; }
  .btn { width: 100%; justify-content: center; }
  .btn-row .btn { width: auto; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .fade-in, [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero .blob, .float-card { animation: none !important; }
}