@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

:root {
  --ink: #070a10;
  --ink-2: #101722;
  --paper: #f5f7f8;
  --white: #ffffff;
  --mist: #e9edf0;
  --line: rgba(7, 10, 16, 0.14);
  --line-light: rgba(255, 255, 255, 0.16);
  --muted: #69727d;
  --blue: #006dff;
  --cyan: #00daf5;
  --navy: #041a3b;
  --shell: 1320px;
  --radius: 34px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

::selection { background: var(--cyan); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.skip-link {
  position: fixed;
  top: -70px;
  left: 20px;
  z-index: 999;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 20px; }

.scroll-meter {
  position: fixed;
  z-index: 130;
  inset: 0 0 auto;
  height: 3px;
}
.scroll-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.shell {
  width: min(calc(100% - 56px), var(--shell));
  margin-inline: auto;
}

.section-space { padding: 150px 0; }

.site-header {
  position: fixed;
  z-index: 120;
  inset: 0 0 auto;
  padding: 16px 0;
  border-bottom: 1px solid transparent;
  transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled {
  padding: 8px 0;
  border-color: rgba(7, 10, 16, 0.08);
  background: rgba(245, 247, 248, 0.82);
  backdrop-filter: blur(22px);
}

.nav-shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.brand img { width: 58px; height: 58px; object-fit: contain; }
.brand > span {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 13px;
  font-weight: 600;
}
.primary-nav > a:not(.nav-contact) {
  position: relative;
  padding: 9px 0;
}
.primary-nav > a:not(.nav-contact)::after {
  content: "";
  position: absolute;
  inset: auto 0 3px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}
.primary-nav > a:hover::after,
.primary-nav > a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.nav-contact {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 17px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
}
.nav-contact span { color: var(--cyan); }
.menu-button { display: none; }

.hero {
  min-height: 100svh;
  padding: 130px 0 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 86% 12%, rgba(0, 218, 245, 0.12), transparent 23%),
    linear-gradient(180deg, #fff 0%, var(--paper) 100%);
}

.hero-layout {
  display: grid;
  grid-template-columns: 0.93fr 1.07fr;
  gap: clamp(50px, 7vw, 110px);
  align-items: center;
}

.micro-label,
.section-index {
  margin: 0 0 28px;
  font-family: "Space Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.micro-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #31557b;
}
.micro-label > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(0, 109, 255, 0.1);
}
.dark-label { color: #405266; }

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 780px;
  margin-bottom: 30px;
  font-size: clamp(58px, 6.7vw, 103px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.069em;
}
h1 span {
  display: block;
  color: transparent;
  background: linear-gradient(90deg, var(--blue), #00a9ee 50%, #00cbd8);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-lead {
  max-width: 650px;
  margin-bottom: 38px;
  color: #56606c;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.72;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.button {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 23px;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.2s ease, background 0.2s ease;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark span { color: var(--cyan); }
.button-blue { background: var(--blue); color: var(--white); }
.quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #4f5964;
  font-size: 13px;
  font-weight: 600;
}
.quiet-link span { color: var(--blue); }

.hero-product {
  position: relative;
  aspect-ratio: 1 / 0.92;
  border-radius: clamp(28px, 4vw, 54px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(0, 218, 245, 0.15), transparent 33%),
    linear-gradient(145deg, #0d1522, #02050a 68%);
  box-shadow: 0 50px 90px rgba(4, 15, 31, 0.2);
}
.product-grid {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle, #000, transparent 78%);
  mask-image: radial-gradient(circle, #000, transparent 78%);
}
.product-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(0, 218, 245, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.orbit-one { width: 68%; aspect-ratio: 1; animation: breathe 5s ease-in-out infinite; }
.orbit-two { width: 45%; aspect-ratio: 1; border-style: dashed; animation: rotate 28s linear infinite; }
.hero-logo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 48%;
  width: 55%;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 24px 35px rgba(0, 109, 255, 0.25));
}
.product-label {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  color: #a7b4c3;
  background: rgba(10, 17, 27, 0.78);
  font-family: "Space Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  backdrop-filter: blur(12px);
}
.product-label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}
.product-label-a { top: 12%; left: 7%; }
.product-label-b { top: 18%; right: 7%; }
.product-label-c { bottom: 19%; left: 7%; }
.product-label-d { right: 7%; bottom: 14%; }
.system-status {
  position: absolute;
  z-index: 4;
  right: 4%;
  bottom: 4%;
  left: 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 19px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 17px;
  background: rgba(7, 11, 17, 0.76);
  backdrop-filter: blur(18px);
}
.system-status div { display: flex; flex-direction: column; gap: 3px; }
.system-status small { color: #667587; font: 8px "Space Mono", monospace; letter-spacing: 0.1em; }
.system-status strong { color: #e9f3fb; font-size: 12px; }
.system-status strong i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: #38f3aa;
  box-shadow: 0 0 11px #38f3aa;
}
.system-status > span { color: var(--cyan); font: 700 24px "Space Mono", monospace; }

.hero-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(46px, 6vw, 80px);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.hero-categories span {
  padding: 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #6b747e;
  font: 9px "Space Mono", monospace;
  letter-spacing: 0.08em;
}

.manifesto { background: var(--ink); color: var(--white); }
.manifesto-grid { display: grid; grid-template-columns: 0.28fr 1.72fr; gap: 70px; }
.section-index { color: #65717f; }
.manifesto-copy h2,
.section-head h2,
.story-copy h2,
.process-intro h2,
.founder-copy h2,
.contact-copy h2 {
  margin: 0;
  font-size: clamp(42px, 5.4vw, 76px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.055em;
}
.manifesto-copy h2 { max-width: 1020px; }
.manifesto-copy > p {
  max-width: 650px;
  margin: 42px 0 0 auto;
  color: #9ba6b2;
  font-size: 17px;
}

.capabilities { background: var(--white); }
.section-head {
  display: grid;
  grid-template-columns: 1.15fr 0.6fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 85px;
}
.section-head > p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}
.capability-list { border-top: 1px solid var(--line); }
.capability {
  display: grid;
  grid-template-columns: 70px minmax(280px, 1.1fr) minmax(240px, 0.8fr) 44px;
  gap: 24px;
  align-items: center;
  min-height: 150px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s ease, background 0.3s ease;
}
.capability:hover { padding-inline: 20px; background: #f6f8f9; }
.capability-number { color: #89929b; font: 10px "Space Mono", monospace; }
.capability-name h3 { margin-bottom: 8px; font-size: 28px; font-weight: 600; letter-spacing: -0.035em; }
.capability-name p { margin: 0; color: var(--muted); font-size: 14px; }
.capability-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.capability-tags span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #66717c;
  font-size: 10px;
}
.capability > a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.capability > a:hover { transform: translateY(-2px); background: var(--blue); color: var(--white); }

.story { padding: 150px 0; overflow: hidden; }
.story-light { background: #edf1f3; }
.story-dark { background: #05080d; color: var(--white); }
.story-blue { background: linear-gradient(135deg, #052e6d, #006dff); color: var(--white); }
.story-layout { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(70px, 9vw, 140px); align-items: center; }
.reverse-layout { grid-template-columns: 1.25fr 0.75fr; }
.story-copy > p:not(.section-index) { margin: 30px 0; color: #626d77; font-size: 16px; }
.story-dark .story-copy > p:not(.section-index), .story-blue .story-copy > p:not(.section-index) { color: #a6b6c8; }
.story-blue .story-copy > p:not(.section-index) { color: rgba(255,255,255,0.76); }
.story-copy ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.story-dark .story-copy ul, .story-blue .story-copy ul { border-color: var(--line-light); }
.story-copy li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.story-dark .story-copy li, .story-blue .story-copy li { border-color: var(--line-light); }
.story-copy li::before { content: "✓"; margin-right: 11px; color: var(--blue); }
.story-dark .story-copy li::before, .story-blue .story-copy li::before { color: var(--cyan); }

.flow-visual {
  min-height: 525px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  border: 1px solid rgba(7,10,16,0.1);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.7);
  box-shadow: 0 45px 80px rgba(21, 36, 50, 0.1);
}
.flow-top, .flow-result { display: flex; justify-content: space-between; gap: 20px; }
.flow-top span { color: #77818b; font: 9px "Space Mono", monospace; }
.flow-top strong { padding: 5px 8px; border-radius: 999px; background: #dff9ee; color: #167552; font: 8px "Space Mono", monospace; }
.flow-track { display: grid; grid-template-columns: 1fr 70px 1fr 70px 1fr; align-items: center; }
.flow-step { display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0.55; }
.flow-step.active { opacity: 1; }
.flow-step i {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin-bottom: 18px;
  border: 1px solid rgba(7,10,16,0.16);
  border-radius: 50%;
  background: var(--white);
  color: #65717c;
  font: normal 10px "Space Mono", monospace;
}
.flow-step.active i { border-color: var(--blue); background: var(--blue); color: var(--white); box-shadow: 0 13px 25px rgba(0,109,255,0.2); }
.flow-step small, .flow-step span { display: block; }
.flow-step small { margin-bottom: 4px; color: #7e8993; font: 8px "Space Mono", monospace; }
.flow-step span { font-size: 12px; font-weight: 700; }
.flow-connector { height: 1px; background: rgba(7,10,16,0.17); position: relative; overflow: hidden; }
.flow-connector b { position: absolute; width: 8px; height: 8px; top: -3px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); animation: flow 2s linear infinite; }
.flow-result { align-items: center; padding: 17px; border-radius: 15px; background: #eef2f4; }
.flow-result span { color: #62707b; font-size: 10px; }
.flow-result span i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #23bd81; }
.flow-result strong { font-size: 12px; }

.automation-visual {
  min-height: 520px;
  padding: 31px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    #0c111a;
  background-size: 42px 42px;
}
.automation-title { display: flex; justify-content: space-between; color: #728092; font: 9px "Space Mono", monospace; letter-spacing: 0.09em; }
.automation-title i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.automation-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center; padding: 24px; border-radius: 18px; }
.muted-row { margin-top: 75px; opacity: 0.42; border: 1px solid rgba(255,255,255,0.1); }
.live-row { margin-top: 16px; border: 1px solid rgba(0,218,245,0.28); background: linear-gradient(100deg, rgba(0,109,255,0.15), rgba(0,218,245,0.04)); box-shadow: 0 20px 50px rgba(0,109,255,0.08); }
.task-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.07); }
.live-row .task-icon { background: var(--blue); color: var(--white); }
.automation-row small, .automation-row strong { display: block; }
.automation-row small { margin-bottom: 5px; color: #718094; font: 8px "Space Mono", monospace; }
.automation-row strong { font-size: 13px; }
.automation-row b { color: var(--cyan); font: 700 20px "Space Mono", monospace; }
.automation-pulse { display: flex; align-items: flex-end; gap: 5px; height: 60px; margin: 36px 20px 0; }
.automation-pulse span { flex: 1; border-radius: 3px; background: linear-gradient(to top, var(--blue), var(--cyan)); animation: bars 1.8s ease-in-out infinite alternate; }
.automation-pulse span:nth-child(1) { height: 30%; }
.automation-pulse span:nth-child(2) { height: 75%; animation-delay: -0.6s; }
.automation-pulse span:nth-child(3) { height: 48%; animation-delay: -1s; }
.automation-pulse span:nth-child(4) { height: 90%; animation-delay: -0.3s; }

.care-visual {
  position: relative;
  min-height: 550px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.17);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 50%, rgba(0,218,245,0.24), transparent 32%),
    rgba(3, 30, 72, 0.35);
}
.care-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340px;
  height: 340px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: breathe 4s ease-in-out infinite;
}
.care-ring::before, .care-ring::after { content: ""; position: absolute; border: 1px dashed rgba(255,255,255,0.14); border-radius: 50%; }
.care-ring::before { width: 250px; height: 250px; }
.care-ring::after { width: 430px; height: 430px; }
.care-ring > span { display: grid; place-items: center; width: 90px; height: 90px; border-radius: 28px 28px 5px 28px; background: var(--white); color: var(--blue); font-size: 48px; font-weight: 700; }
.care-core { position: absolute; z-index: 2; left: 50%; bottom: 34px; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); text-align: center; }
.care-core small { color: #9dc5f4; font: 8px "Space Mono", monospace; letter-spacing: 0.1em; }
.care-core strong { margin: 4px 0; font-size: 16px; }
.care-core span { color: #a2bee0; font-size: 10px; white-space: nowrap; }
.care-chip { position: absolute; z-index: 2; padding: 10px 13px; border: 1px solid rgba(255,255,255,0.17); border-radius: 999px; background: rgba(4,31,68,0.66); color: #d7e8fa; font: 9px "Space Mono", monospace; backdrop-filter: blur(12px); }
.care-chip i { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #37f0a9; box-shadow: 0 0 8px #37f0a9; }
.care-chip-a { top: 12%; left: 7%; }
.care-chip-b { top: 20%; right: 6%; }
.care-chip-c { left: 8%; bottom: 14%; }

.use-cases { background: var(--white); }
.compact-head { grid-template-columns: 1fr; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.case-card { min-height: 390px; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: #f7f9fa; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.case-card:hover { transform: translateY(-7px); box-shadow: 0 30px 55px rgba(17,29,42,0.1); }
.case-card > span { color: #66727d; font: 9px "Space Mono", monospace; letter-spacing: 0.08em; }
.case-card h3 { margin: 70px 0 17px; font-size: 28px; line-height: 1.12; letter-spacing: -0.04em; }
.case-card p { color: var(--muted); font-size: 14px; }
.case-card > div { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); color: #53606c; font-size: 11px; }
.case-card > div i { margin: 0 7px; color: var(--blue); font-style: normal; }

.process { background: var(--ink); color: var(--white); }
.process-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 110px; }
.process-intro { position: sticky; top: 130px; align-self: start; }
.process-intro > p:not(.micro-label) { margin: 30px 0 0; color: #99a5b2; }
.process-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); }
.process-steps li { display: grid; grid-template-columns: 50px 1fr 30px; gap: 20px; padding: 36px 0; border-bottom: 1px solid var(--line-light); }
.process-steps b { color: var(--cyan); font: 10px "Space Mono", monospace; }
.process-steps h3 { margin-bottom: 8px; font-size: 24px; }
.process-steps p { margin: 0; color: #8c98a5; font-size: 14px; }
.process-steps li > span { color: #617081; }

.founder { background: #eef2f4; }
.founder-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 110px; align-items: center; }
.founder-card { position: relative; min-height: 620px; overflow: hidden; border-radius: var(--radius); background: linear-gradient(145deg, #0e1724, #02060c); }
.founder-card::before { content: ""; position: absolute; inset: 0; opacity: 0.2; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 46px 46px; }
.founder-card img { position: absolute; top: 48%; left: 50%; width: 68%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 30px 40px rgba(0,109,255,0.25)); }
.founder-card-copy { position: absolute; z-index: 2; inset: auto 28px 27px; display: flex; justify-content: space-between; align-items: end; }
.founder-card-copy span { color: #7990a8; font: 8px "Space Mono", monospace; letter-spacing: .09em; }
.founder-card-copy strong { color: var(--white); font-size: 17px; line-height: 1.1; text-align: right; }
.founder-lead { margin: 32px 0 22px; font-size: 22px; line-height: 1.55; letter-spacing: -0.02em; }
.founder-copy > p:not(.section-index):not(.founder-lead) { color: var(--muted); }
.value-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 38px; }
.value-row span { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; font-size: 11px; font-weight: 700; }
.value-row b { color: var(--blue); font: 8px "Space Mono", monospace; }

.contact { background: linear-gradient(130deg, #0068f3, #00a9ef 62%, #00cad6); color: var(--white); }
.contact-layout { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 110px; align-items: start; }
.contact-copy .micro-label { color: rgba(255,255,255,0.78); }
.contact-copy .micro-label > span { background: var(--white); box-shadow: 0 0 0 5px rgba(255,255,255,0.14); }
.contact-copy h2 em { font-family: Georgia, serif; font-weight: 400; }
.contact-copy > p:not(.micro-label) { max-width: 590px; margin: 32px 0 0; color: rgba(255,255,255,0.78); font-size: 17px; }
.contact-panel { border-top: 1px solid rgba(255,255,255,0.34); }
.contact-panel > a { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,0.34); }
.contact-panel small { color: rgba(255,255,255,0.67); font: 8px "Space Mono", monospace; letter-spacing: .09em; }
.contact-panel strong { grid-column: 1; font-size: clamp(18px, 2vw, 25px); letter-spacing: -0.03em; }
.contact-panel > a > span { grid-column: 2; grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.36); border-radius: 50%; transition: background .2s ease, color .2s ease; }
.contact-panel > a:hover > span { background: var(--white); color: var(--blue); }
.contact-panel > button { width: 100%; min-height: 62px; margin-top: 24px; display: flex; justify-content: space-between; align-items: center; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 700; }
.contact-panel > button span { color: var(--cyan); }

.message-dialog { width: min(780px, calc(100% - 30px)); padding: 0; border: 0; border-radius: 28px; color: var(--ink); background: var(--white); box-shadow: 0 45px 120px rgba(0,0,0,.3); }
.message-dialog::backdrop { background: rgba(2,6,12,.72); backdrop-filter: blur(9px); }
.dialog-shell { padding: 34px; }
.dialog-head { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.dialog-head small { color: #67727e; font: 8px "Space Mono", monospace; letter-spacing: .1em; }
.dialog-head h2 { margin: 5px 0 0; font-size: 34px; letter-spacing: -.04em; }
.dialog-close { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.form-grid label { display: flex; flex-direction: column; gap: 7px; }
.form-grid label > span { font-size: 10px; font-weight: 700; }
.wide-field { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: 0; resize: vertical; background: transparent; }
.form-grid input:focus, .form-grid textarea:focus { border-color: var(--blue); }
.dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 30px; }
.dialog-actions p { max-width: 260px; margin: 0; color: var(--muted); font-size: 10px; }

.site-footer { padding: 52px 0 25px; background: #03060b; color: var(--white); }
.footer-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-bottom: 43px; border-bottom: 1px solid var(--line-light); }
.footer-brand img { width: 66px; height: 66px; }
.footer-top > p { margin: 0; color: #788493; font: 8px "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.footer-top > a:last-child { justify-self: end; color: #9aa6b3; font-size: 11px; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 23px; color: #5f6a77; font-size: 9px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .72s ease, transform .72s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-delay { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }

@keyframes rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes breathe { 0%,100% { transform: translate(-50%,-50%) scale(.96); opacity:.7; } 50% { transform: translate(-50%,-50%) scale(1.04); opacity:1; } }
@keyframes flow { from { left:-10px; } to { left:100%; } }
@keyframes bars { from { opacity:.45; transform:scaleY(.65); transform-origin:bottom; } to { opacity:1; transform:scaleY(1); transform-origin:bottom; } }

@media (max-width: 1080px) {
  .hero-layout, .story-layout, .reverse-layout, .founder-grid, .contact-layout { gap: 55px; }
  .primary-nav { gap: 19px; }
  .section-head { grid-template-columns: 1fr .65fr; gap: 55px; }
  .capability { grid-template-columns: 55px minmax(260px,1fr) minmax(210px,.8fr) 42px; }
  .process-grid { gap: 60px; }
}

@media (max-width: 860px) {
  .shell { width: min(calc(100% - 36px), var(--shell)); }
  .section-space, .story { padding: 100px 0; }
  .menu-button { position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; gap:7px; width:46px; height:46px; padding:0 12px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.65); }
  .menu-button i { width:100%; height:1px; background:currentColor; transition:transform .25s ease; }
  .menu-button[aria-expanded="true"] i:first-child { transform:translateY(4px) rotate(45deg); }
  .menu-button[aria-expanded="true"] i:last-child { transform:translateY(-4px) rotate(-45deg); }
  .primary-nav { position:fixed; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:17px; padding:100px 28px 40px; background:rgba(245,247,248,.98); opacity:0; visibility:hidden; transform:translateY(-10px); transition:.25s ease; }
  .primary-nav.open { opacity:1; visibility:visible; transform:none; }
  .primary-nav > a:not(.nav-contact) { font-size:34px; letter-spacing:-.04em; }
  .nav-contact { margin-top:15px; }
  .hero { padding-top:125px; }
  .hero-layout, .manifesto-grid, .section-head, .story-layout, .reverse-layout, .process-grid, .founder-grid, .contact-layout { grid-template-columns:1fr; }
  .hero-product { margin-top:15px; }
  .hero-categories { grid-template-columns:repeat(2,1fr); }
  .manifesto-grid { gap:28px; }
  .manifesto-copy > p { margin-left:0; }
  .section-head { gap:28px; }
  .capability { grid-template-columns:50px 1fr 42px; }
  .capability-tags { grid-column:2; }
  .capability > a { grid-column:3; grid-row:1 / 3; }
  .case-grid { grid-template-columns:1fr; }
  .case-card { min-height:330px; }
  .process-intro { position:static; }
  .founder-card { min-height:530px; }
  .footer-top { grid-template-columns:1fr 1fr; gap:24px; }
  .footer-top > p { grid-column:1 / -1; grid-row:2; }
}

@media (max-width: 560px) {
  .shell { width: min(calc(100% - 26px), var(--shell)); }
  .site-header { padding:10px 0; }
  .brand img { width:52px; height:52px; }
  .brand > span { font-size:16px; }
  h1 { font-size:clamp(50px,14.5vw,72px); }
  .hero-lead { font-size:16px; }
  .hero-actions, .hero-actions .button { width:100%; }
  .quiet-link { margin:auto; }
  .hero-product { aspect-ratio:.88; border-radius:27px; }
  .hero-logo { width:67%; }
  .product-label { font-size:6px; padding:6px 8px; }
  .product-label-b { top:13%; }
  .product-label-c { bottom:21%; }
  .hero-categories span { padding:15px 11px; font-size:7px; }
  .manifesto-copy h2, .section-head h2, .story-copy h2, .process-intro h2, .founder-copy h2, .contact-copy h2 { font-size:clamp(39px,11.7vw,53px); }
  .capability { grid-template-columns:38px 1fr; gap:13px; padding:25px 0; }
  .capability-tags { grid-column:2; }
  .capability > a { display:none; }
  .capability-name h3 { font-size:23px; }
  .flow-visual, .automation-visual, .care-visual { min-height:470px; padding:20px; border-radius:26px; }
  .flow-track { grid-template-columns:1fr; gap:12px; }
  .flow-connector { width:1px; height:20px; margin:auto; }
  .flow-connector b { display:none; }
  .flow-step { flex-direction:row; gap:13px; text-align:left; }
  .flow-step i { width:48px; height:48px; margin:0; }
  .flow-result { align-items:flex-start; flex-direction:column; }
  .automation-row { grid-template-columns:42px 1fr; padding:17px; }
  .automation-row b { grid-column:2; }
  .muted-row { margin-top:45px; }
  .care-ring { width:250px; height:250px; }
  .care-ring::before { width:185px; height:185px; }
  .care-ring::after { width:320px; height:320px; }
  .care-chip { font-size:7px; }
  .care-chip-c { bottom:18%; }
  .founder-card { min-height:440px; }
  .founder-card img { width:78%; }
  .value-row { grid-template-columns:1fr; }
  .contact-panel strong { font-size:16px; }
  .dialog-shell { padding:24px 18px; }
  .form-grid { grid-template-columns:1fr; }
  .wide-field { grid-column:auto; }
  .dialog-actions { flex-direction:column; align-items:stretch; }
  .dialog-actions p { max-width:none; }
  .footer-top { grid-template-columns:1fr; }
  .footer-top > p { grid-column:auto; grid-row:auto; }
  .footer-top > a:last-child { justify-self:start; }
  .footer-bottom { flex-direction:column; gap:7px; }
}

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