/* ─────────────────────────────────────────────────────────────────────────
   Arcsyntra Ltd · styles.css
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg:               #05080d;
  --bg-elevated:      #0d1b2a;
  --text:             #f4f8fc;
  --muted:            #9aaabc;
  --accent:           #4db4c2;
  --accent-soft:      rgba(77, 180, 194, 0.14);
  --line:             rgba(255, 255, 255, 0.12);
  --radius:           12px;
  --radius-btn:       8px;
  --radius-icon:      10px;
  --container:        1180px;
  --container-narrow: 760px;
  --header-h:         84px;
  --section-y:        clamp(4rem, 5.5vw, 6rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

.skip-link {
  position: absolute;
  top: -40px; left: 0;
  background: #000; color: #fff;
  padding: 8px 12px;
  z-index: 1000;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 10px; }

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; }

/* ── Layout ────────────────────────────────────────────────────────────── */

.container {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}
.container--capabilities {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}

.narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}
.narrow p,
.narrow ul { margin-inline: auto; }
.narrow ul { text-align: left; max-width: 52ch; }

.section { padding: var(--section-y) 0; }

.hero + .section {
  padding-top: clamp(2.75rem, 4.5vw, 3.75rem);
}

.section.alt {
  background:
    radial-gradient(circle, rgba(77,180,194,0.028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(13,27,42,0.96) 0%, rgba(13,27,42,0.7) 100%);
  background-size: 30px 30px, 100% 100%;
}

.section p { font-size: 1.05rem; }

.section--intro p:first-of-type {
  font-size: clamp(1.08rem, 1.5vw, 1.18rem);
  color: rgba(244, 248, 252, 0.86);
  margin-bottom: 1.25rem;
}
.section--intro .container + .container {
  margin-top: clamp(3rem, 5.5vw, 5rem);
}

/* ── Typography ────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  margin: 0 0 1rem;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--text);
}

h1 { font-size: clamp(2.1rem, 5.5vw, 4.2rem); font-weight: 800; }

.hero-text h1 {
  font-size: clamp(3.25rem, 4.5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 800;
  max-width: 660px;
}

h2 {
  font-size: clamp(1.65rem, 3.3vw, 2.55rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 1.35rem;
}

h3 { font-size: 1.1rem; font-weight: 600; }

p, .section-intro { color: rgba(255, 255, 255, 0.72); }
p { margin: 0 0 1rem; max-width: 68ch; }

ul { margin: 1rem 0 0; padding-left: 1.2rem; color: var(--muted); }
li + li { margin-top: 0.55rem; }

/* Eyebrow label — used above section headings */
.section-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3da8b5;
  margin: 0 0 0.8rem;
}

/* Schematic / path label */
.schematic-label,
.path-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", monospace;
}

.schematic-label {
  max-width: 1120px;
  margin: 0 auto 1.5rem;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.header {
  position: sticky;
  top: 0; z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 13, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.header-inner {
  position: relative;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.brand,
.footer-brand .brand--footer {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  white-space: nowrap;
}
.brand { text-decoration: none; flex-shrink: 0; }

.brand-mark {
  height: clamp(30px, 2.2vw, 34px);
  width: auto; max-height: 34px;
  object-fit: contain; flex-shrink: 0;
}
.brand-wordmark { width: auto; height: auto; object-fit: contain; flex-shrink: 0; }
.brand .brand-mark     { height: 38px; width: auto; }
.brand .brand-wordmark { height: 34px; width: auto; }

.footer-brand .brand--footer { line-height: 1; }
.footer-brand .brand--footer .brand-mark {
  display: block; height: 32px; width: auto;
  max-height: 32px; object-fit: contain;
}
.footer-brand .brand--footer .brand-wordmark {
  display: block; height: 30px; width: auto; object-fit: contain;
}
.footer-brand > p:first-of-type {
  margin-top: 0.85rem; margin-bottom: 0;
  max-width: 280px; color: var(--muted); font-size: 0.95rem; line-height: 1.5;
}

/* Nav */
.nav { display: flex; align-items: center; gap: 1.25rem; }

.nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.2rem 0;
  transition: color 160ms ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transform: scaleX(0.8);
  transition: opacity 160ms ease, transform 160ms ease;
}
.nav a:hover,
.nav a:focus-visible { color: var(--text); }
.nav a:hover::after,
.nav a:focus-visible::after { opacity: 0.85; transform: scaleX(1); }

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: transparent;
  padding: 0.45rem;
  cursor: pointer;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; margin: 3px 0;
  border-radius: 999px; background: var(--text);
  transition: transform 200ms ease, opacity 200ms ease;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: stretch;
  overflow: clip;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 100px; z-index: 2;
  background: linear-gradient(to bottom, rgba(5,6,8,0), rgba(5,6,8,1));
  pointer-events: none;
}
.hero > picture { display: contents; }

.hero-image {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 78% 50%;
  filter: saturate(1.02) brightness(0.78);
  background: var(--bg);
}

.hero-gradient {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(5,8,13,1)    0%,
    rgba(5,8,13,0.97) 18%,
    rgba(5,8,13,0.9)  30%,
    rgba(5,8,13,0.72) 44%,
    rgba(5,8,13,0.36) 58%,
    rgba(5,8,13,0.12) 74%,
    rgba(5,8,13,0.03) 88%,
    rgba(5,8,13,0)   100%
  );
}


/* Hero canvas animation */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    black 0%,
    black 28%,
    rgba(0,0,0,0.65) 44%,
    rgba(0,0,0,0.18) 60%,
    transparent 72%
  );
  mask-image: linear-gradient(
    90deg,
    black 0%,
    black 28%,
    rgba(0,0,0,0.65) 44%,
    rgba(0,0,0,0.18) 60%,
    transparent 72%
  );
}

.hero-content {
  position: relative; z-index: 3;
  display: flex; align-items: center;
  min-height: 680px;
  padding-top: var(--header-h); padding-bottom: 3.5rem;
}
.hero-text { max-width: 660px; }

.hero-text h1 span {
  color: var(--accent);
  text-shadow: 0 0 28px rgba(77,180,194,0.16);
}

.lead { font-size: clamp(1rem, 1.4vw, 1.15rem); margin-bottom: 2rem; }
.hero .lead { max-width: 600px; margin-bottom: 1.1rem; line-height: 1.65; }
.hero-support {
  max-width: 560px; margin: 0 0 2rem;
  color: rgba(154,170,188,0.78);
  font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.6;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 0.45rem;
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 600; font-size: 0.95rem;
  cursor: pointer;
  transition: transform 140ms ease,
              box-shadow 140ms ease,
              background-color 140ms ease,
              border-color 140ms ease;
}
.btn:hover  { transform: translateY(-1px) scale(1.015); }
.btn:active { transform: translateY(0) scale(1); }

.btn.primary {
  color: #021b22;
  background: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 0 0 1px rgba(77,180,194,0.28),
    0 4px 14px rgba(77,180,194,0.16);
}
.btn.primary:hover {
  background: #5dc0cd;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 0 0 1px rgba(77,180,194,0.35),
    0 6px 20px rgba(77,180,194,0.24);
}

.btn.secondary {
  color: var(--text);
  border-color: rgba(77,180,194,0.42);
  background: rgba(6,16,24,0.4);
}
.btn.secondary:hover {
  background: rgba(77,180,194,0.1);
  border-color: rgba(77,180,194,0.62);
}

/* ── Path steps ─────────────────────────────────────────────────────────── */

.path-grid {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: transparent;
}

.path-grid::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 1.6rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(77,180,194,0.52) 0%,
    rgba(77,180,194,0.2)  55%,
    rgba(77,180,194,0)   100%
  );
  z-index: 0; pointer-events: none;
}

.path-step {
  position: relative;
  min-height: 148px;
  padding: 0 1.55rem 0.5rem;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.path-step:last-child { border-right: 0; }

.path-number {
  position: relative; z-index: 1;
  display: block;
  width: auto; height: auto;
  border-radius: 0; border: none;
  background: transparent; box-shadow: none;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(77,180,194,0.22);
  margin-bottom: 1.1rem;
  transition: -webkit-text-stroke-color 220ms ease;
}

/* Graduated visibility — active step anchors the journey */
.path-step:nth-child(1) .path-number { -webkit-text-stroke-color: rgba(77,180,194,0.88); }
.path-step:nth-child(2) .path-number { -webkit-text-stroke-color: rgba(77,180,194,0.52); }
.path-step:nth-child(3) .path-number { -webkit-text-stroke-color: rgba(77,180,194,0.35); }
.path-step:nth-child(4) .path-number { -webkit-text-stroke-color: rgba(77,180,194,0.22); }

.path-step:hover .path-number { -webkit-text-stroke-color: rgba(77,180,194,0.78); }

.path-step h3 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}
.path-step p {
  margin: 0;
  color: rgba(255,255,255,0.58);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 220px;
}

/* ── Capabilities grid ──────────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.card {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 1.5px solid rgba(77,180,194,0.3);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 24px rgba(0,0,0,0.2);
  transition: transform 160ms ease,
              border-color 160ms ease,
              border-top-color 160ms ease,
              box-shadow 160ms ease,
              background 160ms ease;
}
.card p { font-size: 0.95rem; }

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.14);
  border-top-color: rgba(77,180,194,0.68);
  background: linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 16px 36px rgba(0,0,0,0.28);
}

/* Icon container */
.capability-icon-wrap {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(77,180,194,0.08);
  border: 1px solid rgba(77,180,194,0.2);
  border-radius: var(--radius-icon);
  margin-bottom: 1.2rem;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.card:hover .capability-icon-wrap {
  background: rgba(77,180,194,0.14);
  border-color: rgba(77,180,194,0.42);
  box-shadow: 0 0 20px rgba(77,180,194,0.18);
}

.capability-icon {
  width: 24px; height: 24px;
  opacity: 0.85; color: var(--muted);
  display: block; margin: 0;
  transition: color 160ms ease, opacity 160ms ease;
}
.capability-icon .accent { color: var(--accent); }
.card:hover .capability-icon { color: var(--text); opacity: 1; }
.capability-icon--ops line               { stroke-opacity: 0.42; }
.capability-icon--ops circle:not(.accent) { stroke-opacity: 0.62; }

.section h2 + .section-intro { margin-top: 0.5rem; margin-bottom: 1.75rem; }

.section-intro {
  max-width: 620px;
  margin: 0 0 1.75rem;
  font-size: 1.05rem;
}

#capabilities .container {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
#capabilities .container > h2           { width: 100%; }
#capabilities .container > .grid        { width: 100%; align-self: stretch; text-align: left; }
#capabilities .container > .section-eyebrow,
#capabilities .container > .section-intro { text-align: center; }
#capabilities .section-intro            { max-width: 620px; margin-top: 0.5rem; margin-bottom: 2.2rem; }

.narrow .section-intro { margin-left: auto; margin-right: auto; text-align: center; }


/* ── Node canvas animation ──────────────────────────────────────────────── */

.section--intro { position: relative; overflow: hidden; }

.node-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

.section--intro .container { position: relative; z-index: 1; }

/* ── How We Work ────────────────────────────────────────────────────────── */

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  text-align: left;
}

.principle-card {
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 1.5px solid rgba(77,180,194,0.28);
  border-radius: var(--radius);
  padding: 1.4rem;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 24px rgba(0,0,0,0.2);
  transition: transform 160ms ease,
              border-color 160ms ease,
              border-top-color 160ms ease,
              box-shadow 160ms ease,
              background 160ms ease;
}
.principle-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.14);
  border-top-color: rgba(77,180,194,0.62);
  background: linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 16px 36px rgba(0,0,0,0.28);
}
.principle-card h3 { font-size: 1rem; margin-bottom: 0.6rem; }
.principle-card p  { font-size: 0.96rem; margin: 0; max-width: none; }

/* ── Contact ────────────────────────────────────────────────────────────── */

.contact-copy { margin-bottom: 1.4rem; }

.form {
  background: rgba(5,8,13,0.35);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 1.6rem);
}

#contact .form {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(1.4rem, 2.8vw, 2rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(5,8,13,0.42));
  border: 1px solid rgba(255,255,255,0.1);
}

#contact .form input,
#contact .form textarea { width: 100%; align-self: stretch; }
#contact .form textarea  { margin-bottom: 1.2rem; }

#contact .form .btn.primary {
  align-self: center;
  width: auto;
  min-width: 220px;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  min-height: 50px;
  margin-top: 0.55rem;
  background: rgba(77, 180, 194, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 0 1px rgba(77,180,194,0.22),
    0 4px 14px rgba(77,180,194,0.12);
}
#contact .form .btn.primary:hover {
  background: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 0 0 1px rgba(77,180,194,0.32),
    0 6px 20px rgba(77,180,194,0.2);
}

.form input,
.form textarea {
  width: 100%;
  margin-bottom: 0.8rem;
  padding: 0.82rem 0.9rem;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(3,12,19,0.75);
  color: var(--text);
  font: inherit;
  transition: border-color 160ms ease;
}
.form input:focus,
.form textarea:focus {
  border-color: rgba(77,180,194,0.5);
  outline: none;
}
.form textarea { min-height: 140px; resize: vertical; }
.form button    { margin-top: 0.3rem; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer {
  background: #050608;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 3rem 0 2.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 2rem 2.5rem;
}

.footer h4 {
  margin: 0 0 0.85rem;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); opacity: 0.6;
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer-grid ul li + li { margin-top: 0.45rem; }

.footer-grid a {
  display: inline-block;
  color: var(--muted); text-decoration: none;
  font-size: 0.92rem; opacity: 0.78;
  transition: color 160ms ease, opacity 160ms ease;
}
.footer-grid a:hover,
.footer-grid a:focus-visible { color: var(--text); opacity: 1; }

.footer-bottom {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1.25rem;
  margin-top: 2.25rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-bottom > p { margin: 0; color: var(--muted); font-size: 0.88rem; }

.footer-social { display: flex; align-items: center; gap: 0.65rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--muted); text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.footer-social a svg { width: 18px; height: 18px; }
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--accent);
  border-color: rgba(77,180,194,0.38);
  background: rgba(77,180,194,0.06);
}


.footer-reg {
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.76rem;
  opacity: 0.42;
  line-height: 1.55;
  max-width: 280px;
}

/* ── Policy pages ───────────────────────────────────────────────────────── */

.policy-main {
  padding: calc(var(--header-h) + 56px) 0 72px;
  background:
    radial-gradient(circle at 70% 0%, rgba(77,180,194,0.08), transparent 36%),
    var(--bg);
}


.policy-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  margin-bottom: 1.75rem;
  opacity: 0.65;
  transition: color 160ms ease, opacity 160ms ease;
}
.policy-back svg { flex-shrink: 0; }
.policy-back:hover,
.policy-back:focus-visible {
  color: var(--accent);
  opacity: 1;
}

.policy-card {
  max-width: 840px; margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-top: 1.5px solid rgba(77,180,194,0.3);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018));
}

.policy-card h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.5rem; }

.meta-updated { color: var(--muted); font-size: 0.92rem; margin-bottom: 2rem; opacity: 0.75; }

.policy-card h2 {
  font-size: 1.1rem; font-weight: 600;
  margin-top: 2rem; margin-bottom: 0.75rem;
  text-align: left;
}

.policy-card p,
.policy-card li { color: var(--muted); }
.policy-card ul,
.policy-card ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.policy-card li + li { margin-top: 0.35rem; }
.policy-card a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.policy-card a:hover,
.policy-card a:focus-visible { color: #6bc8d4; }
.policy-card a.btn  { text-decoration: none; }
.policy-card strong { color: var(--text); }

.policy-thanks { text-align: center; }
.policy-thanks .policy-card p { margin-left: auto; margin-right: auto; max-width: 36rem; }
.policy-thanks .btn { margin-top: 1.5rem; }


/* ── Form submit states ──────────────────────────────────────────────────── */

.btn--loading {
  pointer-events: none;
  opacity: 0.82;
  position: relative;
}

.btn--loading .btn-text { opacity: 0; }

.btn--loading::before {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(2, 27, 34, 0.3);
  border-top-color: #021b22;
  border-radius: 50%;
  animation: btn-spin 0.65s linear infinite;
}

.btn--sent { pointer-events: none; }

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ── Scroll entrance animations ─────────────────────────────────────────── */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   440ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 440ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.animate-on-scroll.in-view { opacity: 1; transform: translateY(0); }

/* Staggered entry for card grids */
.card.animate-on-scroll:nth-child(1)           { transition-delay:   0ms; }
.card.animate-on-scroll:nth-child(2)           { transition-delay:  80ms; }
.card.animate-on-scroll:nth-child(3)           { transition-delay: 160ms; }
.card.animate-on-scroll:nth-child(4)           { transition-delay: 240ms; }

.path-step.animate-on-scroll:nth-child(1)      { transition-delay:   0ms; }
.path-step.animate-on-scroll:nth-child(2)      { transition-delay:  65ms; }
.path-step.animate-on-scroll:nth-child(3)      { transition-delay: 130ms; }
.path-step.animate-on-scroll:nth-child(4)      { transition-delay: 195ms; }

.principle-card.animate-on-scroll:nth-child(1) { transition-delay:   0ms; }
.principle-card.animate-on-scroll:nth-child(2) { transition-delay:  80ms; }
.principle-card.animate-on-scroll:nth-child(3) { transition-delay: 160ms; }

/* ── Utility ────────────────────────────────────────────────────────────── */

.hidden,
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ── Scroll progress bar ────────────────────────────────────────────────── */

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  z-index: 200;
  opacity: 0.9;
  pointer-events: none;
  transition: width 80ms linear;
}


/* ── Card border shimmer ─────────────────────────────────────────────────── */

@keyframes shimmer-travel {
  0%   { background-position: -400% 0; }
  100% { background-position: 400% 0; }
}

.card {
  --shimmer-opacity: 0;
  position: relative;
}

.card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(77,180,194,0.7) 50%,
    transparent 100%
  );
  background-size: 400% 100%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--shimmer-opacity);
  animation: shimmer-travel 1.8s linear infinite;
  pointer-events: none;
  transition: opacity 280ms ease;
}

.card:hover {
  --shimmer-opacity: 1;
}

/* ── Keyframes ──────────────────────────────────────────────────────────── */


/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll  { opacity: 1; transform: none; transition: none; }
  .hero-canvas, .node-canvas { display: none; }
}

/* ── Responsive: 761–1040px ─────────────────────────────────────────────── */

@media (min-width: 761px) and (max-width: 1040px) {
  .hero,
  .hero-content { min-height: 620px; }
  .hero-text    { max-width: 660px; }
  .hero-text h1 { font-size: clamp(3.1rem, 3.5vw + 1.25rem, 4.5rem); max-width: 660px; }
  .hero-image   { object-position: 68% 50%; }
  .hero-gradient {
    background: linear-gradient(
      90deg,
      rgba(5,8,13,1) 0%, rgba(5,8,13,0.97) 35%,
      rgba(5,8,13,0.94) 50%, rgba(5,8,13,0.62) 64%,
      rgba(5,8,13,0.22) 80%, rgba(5,8,13,0) 100%
    );
  }
  .hero-overlay { opacity: 0.18; clip-path: inset(0 -2% 0 35%); }
}

@media (max-width: 1040px) and (min-width: 761px) {
  .grid        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  #capabilities .section-intro { max-width: 680px; }
}

@media (max-width: 1040px) {
  .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; }
  .path-grid::before { display: none; }
  .path-step {
    padding: 0 1.25rem 1.4rem;
    border-right:  1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .path-step:nth-child(2n)    { border-right: 0; }
  .path-step:nth-child(n + 3) { border-bottom: 0; }
  .path-number { font-size: clamp(2rem, 4vw, 2.8rem); }
}

@media (max-width: 860px) { .principles-grid { grid-template-columns: 1fr; } }

/* ── Responsive: ≤ 760px ────────────────────────────────────────────────── */

@media (max-width: 760px) {
  :root { --header-h: 78px; }

  .container,
  .container--capabilities { width: min(100% - 32px, 1180px); }

  .section { padding: 3.5rem 0; }

  .section--intro .path-grid { grid-template-columns: 1fr; gap: 0; }
  .section--intro .path-grid .path-step {
    padding: 0 0 1.4rem; margin-bottom: 1.4rem;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    min-height: auto;
  }
  .section--intro .path-grid .path-step:last-child { margin-bottom: 0; border-bottom: 0; }
  .section--intro .path-grid .path-step p { max-width: none; }
  .path-number { font-size: 2.2rem; }

  .brand .brand-mark                           { height: 34px; }
  .brand .brand-wordmark                       { height: 30px; }
  .footer-brand .brand--footer .brand-mark     { height: 30px; max-height: 30px; }
  .footer-brand .brand--footer .brand-wordmark { height: 28px; }

  .hero         { min-height: auto; }
  .hero-content { min-height: 0; align-items: flex-start; padding: 112px 0 72px; }
  .hero-image   { object-position: 88% 50%; transform: scale(1.18); opacity: 0.82; filter: saturate(1.12) brightness(0.95); }
  .hero-gradient {
    background:
      linear-gradient(180deg, rgba(5,8,13,0.48), rgba(5,8,13,0.84)),
      linear-gradient(90deg, rgba(5,8,13,0.78) 0%, rgba(5,8,13,0.42) 60%, rgba(5,8,13,0.16) 100%);
  }
  .hero-overlay { opacity: 0.04; clip-path: inset(0 0 0 55%); }
  .hero::after  { height: 90px; }
  .hero-text    { max-width: none; }
  .hero-text h1 { font-size: clamp(2.35rem, 6.2vw, 3.15rem); max-width: none; }
  .hero .lead,
  .hero-support { max-width: none; }
  .hero .actions { flex-direction: column; align-items: stretch; max-width: 320px; }
  .hero .actions .btn { width: 100%; }

  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; right: 0;
    min-width: 220px; padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(5,8,13,0.96);
    backdrop-filter: blur(16px);
    flex-direction: column; align-items: flex-start; gap: 0.55rem;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  }
  .nav.nav-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .grid,
  .footer-grid { grid-template-columns: 1fr; }

  #contact .form { padding: 1.35rem; }
  #capabilities .section-intro { max-width: none; margin-bottom: 1.8rem; }
}