/* Autoloop — World-class launch design
   Quiet enterprise confidence. Editorial typography. Precision over decoration.
*/

:root {
  --paper: #f6f5f1;
  --paper-2: #eeece6;
  --white: #ffffff;
  --ink: #0d1511;
  --ink-2: #27312c;
  --muted: #68716c;
  --muted-2: #89918d;
  --line: rgba(13,21,17,.11);
  --line-strong: rgba(13,21,17,.17);
  --green: #0f6a55;
  --green-2: #0a4c3e;
  --green-3: #082f27;
  --green-soft: #dff0e9;
  --amber: #ad7256;
  --shadow-sm: 0 1px 2px rgba(13,21,17,.03), 0 10px 30px rgba(13,21,17,.04);
  --shadow-md: 0 22px 60px rgba(13,21,17,.08);
  --shadow-xl: 0 42px 120px rgba(13,21,17,.14);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 4%, rgba(15,106,85,.07), transparent 26rem),
    linear-gradient(180deg, #f8f7f4 0%, var(--paper) 38%, #f3f1eb 100%);
  font-family: "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
p,h1,h2,h3,ul,blockquote { margin-top: 0; }
img { max-width: 100%; }
.page-shell { overflow: clip; }

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

:focus-visible {
  outline: 3px solid rgba(15,106,85,.35);
  outline-offset: 4px;
  border-radius: 8px;
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 9999;
  transform: translateY(-180%);
  padding: 10px 14px;
  color: white; background: var(--ink);
  border-radius: 10px;
  font-size: .8rem; font-weight: 700;
}
.skip-link:focus { transform: none; }

/* Header */
.site-header-wrap {
  position: sticky;
  top: 14px;
  z-index: 100;
  padding: 0 20px;
  pointer-events: none;
}
.site-header {
  max-width: var(--max);
  margin: 14px auto 0;
  min-height: 64px;
  padding: 8px 10px 8px 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  background: rgba(248,247,244,.78);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid rgba(13,21,17,.09);
  border-radius: 18px;
  box-shadow: 0 8px 34px rgba(13,21,17,.06);
  pointer-events: auto;
}
.brand {
  display: inline-flex; width: max-content;
  align-items: center; gap: 11px;
  font-weight: 700; letter-spacing: -.045em;
}
.brand-name { font-size: 1.05rem; }
.brand-mark { width: 29px; height: 18px; position: relative; display: inline-block; }
.brand-mark span {
  position: absolute; width: 18px; height: 18px;
  border: 2px solid var(--ink); border-radius: 50%;
  transition: transform .25s ease, opacity .25s ease;
}
.brand-mark span:first-child { left: 0; }
.brand-mark span:last-child { right: 0; opacity: .38; border-color: var(--green); }
.brand:hover .brand-mark span:first-child { transform: translateX(1px); }
.brand:hover .brand-mark span:last-child { transform: translateX(-1px); opacity: 1; }

.desktop-nav {
  display: flex; align-items: center; gap: 8px;
  padding: 5px;
  border-radius: 12px;
  font-size: .78rem;
  color: #4c5751;
}
.desktop-nav a {
  padding: 9px 11px;
  border-radius: 9px;
  transition: color .18s ease, background .18s ease;
}
.desktop-nav a:hover {
  color: var(--ink);
  background: rgba(13,21,17,.045);
}
.site-header > .button { justify-self: end; }

/* Global */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 130px 28px;
}
.eyebrow,.mono {
  font-family: "DM Mono", monospace;
  font-size: .68rem;
  letter-spacing: .095em;
}
.eyebrow {
  margin-bottom: 24px;
  color: var(--green);
  text-transform: uppercase;
  font-weight: 500;
}
.button {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 44px; padding: 0 16px; font-size: .77rem; border-radius: 11px; }
.button-dark {
  color: white;
  background: var(--ink);
  box-shadow: 0 8px 20px rgba(13,21,17,.12);
}
.button-dark:hover { background: var(--green-2); box-shadow: 0 12px 28px rgba(15,106,85,.18); }
.button-light { background: white; color: var(--ink); box-shadow: var(--shadow-sm); }
.button-light:hover { box-shadow: var(--shadow-md); }
.button-arrow { font-size: 1rem; font-weight: 500; }

/* Hero */
.hero {
  min-height: 820px;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 74px;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 118px;
}
.hero-copy { position: relative; z-index: 2; }
.hero h1,
.section-heading h2,
.approach-intro h2,
.why h2,
.fit h2,
.contact h2,
.proof h2 {
  margin-bottom: 0;
  font-weight: 500;
  line-height: .985;
  letter-spacing: -.06em;
}
.hero h1 {
  max-width: 760px;
  font-size: clamp(4rem, 6.7vw, 6.6rem);
}
.hero h1 span {
  color: var(--green);
  display: inline-block;
}
.hero-lede {
  max-width: 640px;
  margin: 34px 0 0;
  color: #3b4741;
  font-size: 1.08rem;
  line-height: 1.72;
  letter-spacing: -.01em;
}
.hero-actions {
  margin-top: 38px;
  display: flex; align-items: center; gap: 24px;
}
.text-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: #36413b;
  font-size: .85rem; font-weight: 700;
  transition: color .18s ease, transform .18s ease;
}
.text-link:hover { color: var(--green); transform: translateX(2px); }
.trust-line {
  margin-top: 52px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  color: #727b76;
  font-size: .71rem;
}
.trust-line i { width: 3px; height: 3px; background: #8f9792; border-radius: 50%; }

/* Workflow visual */
.hero-visual {
  min-height: 600px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(13,21,17,.1);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 45%, rgba(15,106,85,.09), transparent 26%),
    linear-gradient(rgba(13,21,17,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,21,17,.035) 1px, transparent 1px),
    rgba(255,255,255,.67);
  background-size: auto, 44px 44px, 44px 44px, auto;
  box-shadow: var(--shadow-xl);
}
.hero-visual::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.64), transparent 42%, rgba(255,255,255,.25));
  pointer-events:none;
}
.visual-label {
  position: absolute;
  top: 22px; left: 24px;
  color: #65706a;
  display: inline-flex; align-items: center; gap: 8px;
}
.status-dot {
  width: 7px; height: 7px;
  background: #2a9b72;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(42,155,114,.10);
}
.workflow-column {
  position: absolute;
  top: 96px;
  width: 180px;
  display: flex; flex-direction: column;
}
.workflow-column.before { left: 26px; }
.workflow-column.after { right: 26px; }
.workflow-title { margin-bottom: 21px; }
.workflow-title span { color: #88918c; font-size: .57rem; }
.workflow-title strong {
  display:block; margin-top: 7px;
  font-size: .88rem; letter-spacing: -.02em;
}
.workflow-node {
  position: relative;
  padding: 13px 14px;
  border: 1px solid rgba(13,21,17,.1);
  border-radius: 11px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 20px rgba(13,21,17,.045);
  text-align: center;
  font-size: .73rem;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.workflow-node:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(13,21,17,.08); }
.workflow-node.warn { border-color: rgba(173,114,86,.30); }
.workflow-node.good { border-color: rgba(15,106,85,.28); }
.workflow-arrow {
  height: 26px;
  display:grid; place-items:center;
  color:#9aa19d;
  font-size:.82rem;
}
.workflow-core {
  position:absolute;
  width:190px; height:190px;
  left:50%; top:51%;
  transform:translate(-50%,-50%);
}
.core-loop {
  position:absolute;
  left:19px; top:43px;
  width:152px; height:100px;
  border:1px solid rgba(15,106,85,.58);
  border-radius:50%;
}
.loop-one { transform:rotate(34deg); }
.loop-two { transform:rotate(-34deg); opacity:.55; }
.core-center {
  position:absolute; inset:0;
  display:grid; place-items:center;
}
.core-center::before {
  content:"";
  position:absolute;
  width:72px; height:72px;
  border-radius:50%;
  background: rgba(223,240,233,.92);
  box-shadow: 0 0 0 14px rgba(223,240,233,.38);
  animation:pulse 3.2s ease-in-out infinite;
}
.core-center span {
  position:relative; z-index:2;
  color:var(--green-2);
  font-size:.58rem;
  font-weight:500;
}
@keyframes pulse {
  0%,100% { transform:scale(.94); box-shadow:0 0 0 12px rgba(223,240,233,.34); }
  50% { transform:scale(1.03); box-shadow:0 0 0 18px rgba(223,240,233,.16); }
}
.visual-footer {
  position:absolute;
  left:24px; right:24px; bottom:22px;
  display:flex; justify-content:space-between; gap:12px;
  padding-top:16px;
  border-top:1px solid rgba(13,21,17,.09);
  color:#7d8681;
}
.visual-footer span { font-size:.52rem; }

/* Statement */
.statement-band {
  max-width: calc(var(--max) - 56px);
  margin: 0 auto;
  padding: 70px 0 82px;
  display:grid;
  grid-template-columns: .25fr 1fr;
  gap: 50px;
  border-top: 1px solid var(--line);
}
.statement-band > p { padding-top:8px; color:var(--green); }
blockquote {
  max-width: 930px;
  margin-bottom:0;
  font-size:clamp(2.15rem,3.5vw,3.55rem);
  line-height:1.18;
  letter-spacing:-.05em;
  font-weight:500;
}

/* Section headings */
.section-heading { max-width: 820px; margin-bottom: 70px; }
.section-heading h2,
.approach-intro h2,
.fit h2 { font-size: clamp(2.85rem, 5vw, 4.95rem); }
.section-heading > p:last-child {
  max-width: 650px;
  margin: 25px 0 0;
  color: var(--muted);
  line-height: 1.72;
  font-size: .98rem;
}

/* Problems */
.problem-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap: 12px;
}
.problem-card {
  min-height: 305px;
  padding: 28px;
  border: 1px solid rgba(13,21,17,.09);
  border-radius: 20px;
  background: rgba(255,255,255,.52);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.problem-card:hover {
  transform: translateY(-5px);
  border-color: rgba(15,106,85,.18);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-md);
}
.problem-card > span { color:var(--green); }
.problem-card h3 {
  margin: 72px 0 13px;
  font-size:1.2rem;
  letter-spacing:-.03em;
}
.problem-card p {
  margin-bottom:0;
  color:var(--muted);
  line-height:1.68;
  font-size:.87rem;
}

/* Approach */
.approach {
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:100px;
}
.approach-intro {
  position:sticky; top:110px;
  align-self:start;
}
.approach-grid {
  border-top:1px solid var(--line-strong);
}
.approach-item {
  padding: 31px 0 35px;
  border-bottom:1px solid var(--line);
  transition: transform .25s ease;
}
.approach-item:hover { transform:translateX(6px); }
.approach-item > span { color:var(--green); }
.approach-item h3 {
  margin: 35px 0 10px;
  font-size:1.35rem;
  letter-spacing:-.03em;
}
.approach-item p {
  max-width:670px;
  margin-bottom:0;
  color:var(--muted);
  line-height:1.68;
}

/* Dark proof section */
.proof { padding-top: 80px; }
.proof-panel {
  position:relative;
  overflow:hidden;
  padding:78px;
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:82px;
  color:white;
  background:
    radial-gradient(circle at 15% 10%, rgba(47,135,109,.22), transparent 32rem),
    linear-gradient(145deg, #101a15, #0a120e);
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  box-shadow:0 36px 90px rgba(7,14,10,.18);
}
.proof-panel::after {
  content:"";
  position:absolute;
  width:380px; height:380px;
  right:-170px; bottom:-230px;
  border:1px solid rgba(120,201,174,.18);
  border-radius:50%;
  box-shadow:0 0 0 70px rgba(120,201,174,.035), 0 0 0 140px rgba(120,201,174,.02);
}
.eyebrow-light { color:#8ed1bb; }
.proof h2 { font-size:clamp(2.8rem,4.7vw,4.8rem); }
.proof-copy > p:last-child {
  max-width:600px;
  margin:29px 0 0;
  color:#aeb8b3;
  line-height:1.75;
}
.proof-rail {
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.15);
}
.proof-row {
  display:grid;
  grid-template-columns:82px 1fr;
  gap:15px;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.proof-row span { color:#bd8f7b; }
.proof-row p { margin-bottom:0; color:#bfc7c3; font-size:.92rem; }
.proof-row.positive span { color:#80c8af; }
.proof-row.positive p { color:#f0f5f2; }
.proof-divider { height:24px; border-bottom:1px solid rgba(255,255,255,.15); }

/* Trust */
.trust-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.trust-card {
  min-height:310px;
  padding:32px;
  border:1px solid rgba(13,21,17,.09);
  border-radius:20px;
  background:rgba(255,255,255,.48);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.trust-card:hover {
  transform:translateY(-4px);
  background:white;
  box-shadow:var(--shadow-md);
}
.trust-card > span { color:var(--green); }
.trust-card h3 {
  max-width:390px;
  margin:70px 0 12px;
  font-size:1.35rem;
  letter-spacing:-.03em;
}
.trust-card p {
  margin-bottom:0;
  color:var(--muted);
  line-height:1.7;
}

/* Why */
.why { padding-top:60px; }
.why-panel {
  padding:74px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:85px;
  color:white;
  background:
    radial-gradient(circle at 92% 20%, rgba(54,139,113,.25), transparent 28rem),
    var(--green-3);
  border-radius:30px;
  box-shadow:0 32px 80px rgba(8,47,39,.16);
}
.why h2 { font-size:clamp(2.85rem,4.8vw,4.9rem); }
.why-intro > p:last-child {
  max-width:650px;
  margin:28px 0 0;
  color:#bed6ce;
  line-height:1.72;
}
.why-list { border-top:1px solid rgba(255,255,255,.16); }
.why-list div {
  display:grid;
  grid-template-columns:54px 1fr;
  gap:16px;
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.why-list span { color:#84c5af; }
.why-list p { margin-bottom:0; color:#eef5f2; line-height:1.56; }

/* Fit */
.fit-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.fit-column {
  padding:48px;
  border:1px solid rgba(13,21,17,.09);
  border-radius:22px;
  background:rgba(255,255,255,.58);
}
.muted-fit { background:rgba(237,234,227,.72); }
.eyebrow-muted { color:#817a74; }
.fit h2 { font-size:clamp(2.5rem,4vw,4rem); }
.fit ul { list-style:none; padding:0; margin:46px 0 0; }
.fit li {
  position:relative;
  padding:16px 0 16px 27px;
  border-top:1px solid var(--line);
  color:#38433d;
  line-height:1.58;
  font-size:.92rem;
}
.fit li:last-child { border-bottom:1px solid var(--line); }
.fit li::before {
  content:"";
  position:absolute;
  left:1px; top:23px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px rgba(15,106,85,.07);
}
.muted-fit li::before { background:#8b837d; box-shadow:none; }

/* Contact */
.contact { padding-top:50px; padding-bottom:92px; }
.contact-card {
  position:relative;
  overflow:hidden;
  padding:90px 68px;
  text-align:center;
  color:white;
  background:
    radial-gradient(circle at 20% 10%, rgba(132,204,179,.2), transparent 25rem),
    linear-gradient(135deg, var(--green-2), #0c5b49);
  border-radius:30px;
  box-shadow:0 34px 90px rgba(15,106,85,.2);
}
.contact-card::before,
.contact-card::after {
  content:"";
  position:absolute;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
}
.contact-card::before { width:420px; height:420px; left:-240px; bottom:-270px; }
.contact-card::after { width:300px; height:300px; right:-170px; top:-190px; }
.contact-card .eyebrow { color:#bce4d7; }
.contact h2 {
  position:relative; z-index:1;
  max-width:920px; margin:0 auto;
  font-size:clamp(3.1rem,5.8vw,5.8rem);
}
.contact-copy {
  position:relative; z-index:1;
  max-width:640px;
  margin:29px auto 35px;
  color:#d4e9e2;
  line-height:1.75;
}
.contact-card .button { position:relative; z-index:1; }
.contact-note {
  position:relative; z-index:1;
  margin:24px 0 0;
  color:#b8ddd1;
  font-size:.56rem;
}

/* Footer */
footer {
  max-width:var(--max);
  margin:0 auto;
  padding:22px 28px 46px;
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:20px;
  align-items:center;
  color:#7d8580;
  font-size:.72rem;
}
.footer-brand { color:var(--ink); }
footer .mono { font-size:.58rem; }

/* Motion */
.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .75s cubic-bezier(.2,.65,.3,1),
    transform .75s cubic-bezier(.2,.65,.3,1);
}
.reveal.visible { opacity:1; transform:none; }

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

/* Tablet */
@media (max-width: 1000px) {
  .site-header { grid-template-columns:1fr auto; }
  .desktop-nav { display:none; }
  .hero {
    grid-template-columns:1fr;
    gap:58px;
    min-height:0;
    padding-top:94px;
  }
  .hero-copy { max-width:820px; }
  .hero-visual { min-height:570px; }
  .statement-band { grid-template-columns:1fr; gap:22px; padding-inline:28px; }
  .problem-grid { grid-template-columns:repeat(2,1fr); }
  .approach { grid-template-columns:1fr; gap:54px; }
  .approach-intro { position:static; }
  .proof-panel,.why-panel { grid-template-columns:1fr; gap:58px; }
}

/* Mobile */
@media (max-width: 700px) {
  .site-header-wrap { top:8px; padding:0 10px; }
  .site-header {
    min-height:58px;
    margin-top:8px;
    padding:7px 9px 7px 14px;
    border-radius:15px;
  }
  .site-header > .button { display:none; }
  .section { padding:88px 18px; }
  .hero { padding-top:72px; padding-bottom:80px; }
  .hero h1 { font-size:clamp(3.15rem,15.6vw,4.75rem); text-wrap:balance; }
  .hero-lede { font-size:.98rem; }
  .hero-actions { flex-direction:column; align-items:flex-start; gap:20px; }
  .trust-line { margin-top:40px; }
  .hero-visual { min-height:605px; border-radius:24px; }
  .workflow-column { width:145px; top:92px; }
  .workflow-column.before { left:14px; }
  .workflow-column.after { right:14px; }
  .workflow-core { width:126px; height:126px; top:53%; }
  .core-loop { width:106px; height:70px; left:10px; top:28px; }
  .core-center::before { width:58px; height:58px; }
  .visual-footer { flex-direction:column; align-items:center; gap:4px; }
  .statement-band { margin-inline:18px; padding:55px 0 65px; }
  blockquote { font-size:clamp(2rem,9.4vw,2.8rem); }
  .section-heading h2,.approach-intro h2,.fit h2,.contact h2 { text-wrap:balance; }
  .problem-grid { grid-template-columns:1fr; gap:10px; }
  .problem-card { min-height:265px; }
  .proof-panel,.why-panel { padding:42px 24px; border-radius:24px; }
  .trust-grid { grid-template-columns:1fr; gap:10px; }
  .fit-grid { grid-template-columns:1fr; gap:10px; }
  .fit-column { padding:36px 24px; }
  .contact-card { padding:62px 22px; border-radius:24px; }
  footer { grid-template-columns:1fr; padding:18px 18px 36px; }
}