:root{
  --es-navy:#082a55;
  --es-navy-2:#102f55;
  --es-blue:#2479e8;
  --es-blue-2:#4c9cff;
  --es-cyan:#73dff2;
  --es-yellow:#ffbd22;
  --es-yellow-soft:#fff6d8;
  --es-sky:#eef7ff;
  --es-sky-2:#f7fbff;
  --es-line:#cfe0f3;
  --es-muted:#607894;
  --es-shadow:0 24px 64px rgba(31,83,139,.13);
  --es-shadow-soft:0 12px 34px rgba(31,83,139,.09);
}

body{
  background:
    radial-gradient(circle at 8% 8%,rgba(76,156,255,.13),transparent 24rem),
    radial-gradient(circle at 94% 22%,rgba(255,189,34,.10),transparent 22rem),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 34%,#f1f8ff 100%)!important;
  color:var(--es-navy)!important;
}

.noise{opacity:.018!important}

.nav{padding-top:22px!important}
.brand{color:var(--es-navy)!important;font-weight:800!important}
.brand-mark{
  position:relative;
  width:34px!important;height:34px!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,var(--es-blue),#54a9ff)!important;
  box-shadow:0 9px 22px rgba(36,121,232,.24)!important;
  color:#fff!important;
}
.brand-mark:after{
  content:"";
  position:absolute;
  width:10px;height:10px;
  right:-4px;bottom:-3px;
  border-radius:999px;
  background:var(--es-yellow);
  border:2px solid #fff;
  box-shadow:0 4px 10px rgba(255,189,34,.28);
}
.nav nav a{color:#69809a!important}
.nav nav a:hover{color:var(--es-blue)!important}
.nav .github{
  background:#fff!important;
  border-color:var(--es-line)!important;
  color:var(--es-navy)!important;
  border-radius:999px!important;
  box-shadow:0 8px 24px rgba(34,80,133,.07);
}

/* Main hero */
.hero.hero-split{
  display:grid;
  grid-template-columns:minmax(0,.87fr) minmax(430px,1.13fr);
  gap:56px;
  align-items:center;
  padding:58px 0 34px!important;
}
.hero-copy{padding:28px 0 26px}
.hero-copy .eyebrow,
.section-kicker,.board-label,.mini-label{
  color:#6f8fb4!important;
  font-weight:800!important;
}
.hero-copy h1{
  max-width:650px!important;
  margin:18px 0 24px!important;
  font-size:clamp(50px,6.5vw,82px)!important;
  line-height:.96!important;
  letter-spacing:-.064em!important;
  color:var(--es-navy)!important;
}
.hero-copy h1 span{
  background:linear-gradient(90deg,var(--es-blue),#3f9af7 58%,#1d73df)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.hero-copy .lead{color:#607792!important;max-width:620px!important;font-size:18px!important}
.hero-copy .cta-row{margin:30px 0 20px!important}
.button.primary{
  background:linear-gradient(135deg,var(--es-blue),#3d91f2)!important;
  color:#fff!important;
  border-radius:14px!important;
  box-shadow:0 12px 26px rgba(36,121,232,.22)!important;
}
.button.secondary{
  background:#fff!important;
  color:var(--es-navy)!important;
  border-color:var(--es-line)!important;
  border-radius:14px!important;
}
.button.ghost{background:#fffdf7!important;border-color:#f0d58b!important;color:#7a6b43!important;border-radius:14px!important}
.hero-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 11px;border:1px solid var(--es-line);border-radius:999px;
  background:rgba(255,255,255,.83);color:#5f7691;font-size:11px;font-weight:700;
}
.hero-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--es-blue)}
.hero-badge.yellow:before{background:var(--es-yellow)}

.hero-art-wrap{
  position:relative;
  min-width:0;
  padding:14px;
  border:1px solid #d9e6f4;
  border-radius:34px;
  background:linear-gradient(145deg,#fff 0%,#f5faff 70%,#edf7ff 100%);
  box-shadow:0 30px 80px rgba(22,70,124,.15);
  overflow:hidden;
  isolation:isolate;
}
.hero-art-wrap:before{
  content:"";position:absolute;z-index:-1;
  width:300px;height:300px;border-radius:50%;
  right:-80px;top:-100px;
  background:radial-gradient(circle,rgba(66,151,255,.25),rgba(66,151,255,0) 68%);
}
.hero-art-wrap:after{
  content:"";position:absolute;z-index:-1;
  width:220px;height:220px;border-radius:50%;
  left:-80px;bottom:-100px;
  background:radial-gradient(circle,rgba(255,189,34,.20),rgba(255,189,34,0) 68%);
}
.hero-art-wrap img[data-engram-art]{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:25px;opacity:0;transform:scale(.992);
  transition:opacity .35s ease,transform .55s cubic-bezier(.2,.8,.2,1);
}
.hero-art-wrap img[data-engram-art].engram-art-ready{opacity:1;transform:scale(1)}
.hero-art-note{
  position:absolute;left:28px;right:28px;bottom:25px;
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:10px 13px;border:1px solid rgba(207,224,243,.9);border-radius:14px;
  background:rgba(255,255,255,.87);backdrop-filter:blur(12px);
  color:#647d9a;font-size:10px;font-weight:700;
  box-shadow:0 8px 24px rgba(18,58,106,.08)
}
.hero-art-note strong{color:var(--es-navy);font-size:11px}
.engram-art-fallback .hero-art-wrap{min-height:520px;background:linear-gradient(145deg,#eaf5ff,#fff8df)}

.hero-after{padding:12px 0 64px}
.hero-metrics{
  border-color:var(--es-line)!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:var(--es-shadow-soft)!important;
}
.hero-metrics div{border-color:#e0ebf6!important}
.hero-metrics strong{color:var(--es-navy)!important}
.hero-metrics div:nth-child(2) strong{color:var(--es-blue)!important}
.hero-metrics div:nth-child(4) strong{color:#df9410!important}
.hero-card{
  border-color:var(--es-line)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:var(--es-shadow-soft)!important;
}
.pipeline span,.pipeline strong{background:#f7fbff!important;border-color:#d8e7f6!important}
.pipeline .hot{background:#fff8f6!important;border-color:#f3d6ce!important}
.pipeline .cool{background:#eaf4ff!important;border-color:#bcd9fa!important}
.pipeline strong{color:var(--es-blue)!important}

/* Project sections */
.section h2,.closing h2{color:var(--es-navy)!important}
.section-copy{color:#607792!important}
.feature-grid article,.method-board,.comparison-table-wrap,.results-grid article,.deployment-grid article,.posts article,.article-card,.blog-card{
  border-color:var(--es-line)!important;
  background:#fff!important;
  box-shadow:var(--es-shadow-soft)!important;
}
.feature-grid article,.results-grid article,.deployment-grid article,.posts article,.blog-card{border-radius:22px!important}
.feature-grid .icon{background:#eef6ff!important;border-color:#c6ddf6!important;color:var(--es-blue)!important}
.feature-grid article:nth-child(2) .icon{background:var(--es-yellow-soft)!important;border-color:#f1d583!important;color:#b57b08!important}
.feature-grid article:nth-child(3) .icon{background:#eafeff!important;border-color:#bfe9ee!important;color:#148ca0!important}

.method-board{border-radius:28px!important;overflow:hidden!important}
.spec-card,.state-card,.flow-node{background:#f8fbff!important;border-color:#cfdef0!important}
.state-card.base,.flow-node.accent{background:#eaf3ff!important;border-color:#a8cdf8!important}
.state-card.corrective,.corrective-node{background:#fff8df!important;border-color:#efd27b!important}
.flow-node.success{background:#ecfbf4!important;border-color:#a6ddc2!important}
.offline-column{border-color:#dce8f4!important}
.comparison-table th,.comparison-table td{border-color:#e0eaf5!important}
.comparison-table .win{color:var(--es-blue)!important}
.results-grid article:nth-child(2){border-top:4px solid var(--es-blue)!important}
.results-grid article:nth-child(3){border-top:4px solid var(--es-yellow)!important}

/* Technical-note / blog visual language */
.blog-hero{padding:56px 0 34px!important}
.blog-hero-card{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.75fr);
  align-items:center;gap:34px;
  padding:34px 34px 34px 42px;
  border:1px solid var(--es-line);border-radius:32px;
  background:
    radial-gradient(circle at 6% 0%,rgba(92,171,255,.14),transparent 22rem),
    linear-gradient(135deg,#fff 0%,#f5faff 70%,#fff9e7 100%);
  box-shadow:var(--es-shadow);
  overflow:hidden;
}
.blog-hero-copy h1{margin:14px 0 16px!important;color:var(--es-navy)!important}
.blog-hero-copy p{color:#607792!important;max-width:650px!important}
.blog-pill{
  display:inline-flex;align-items:center;gap:8px;padding:7px 11px;
  border-radius:999px;background:#eaf4ff;color:var(--es-blue);
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.blog-pill:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--es-yellow);box-shadow:0 0 0 4px rgba(255,189,34,.13)}
.blog-hero-art{position:relative;min-height:290px;display:grid;place-items:center}
.blog-hero-art:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:linear-gradient(145deg,#dff1ff,#fff1b9);filter:blur(1px);opacity:.8}
.blog-hero-art img[data-engram-art]{position:relative;width:min(100%,330px);border-radius:28px;box-shadow:0 18px 50px rgba(25,66,114,.14);opacity:0;transition:opacity .35s ease,transform .45s ease;transform:rotate(1deg) translateY(5px)}
.blog-hero-art img[data-engram-art].engram-art-ready{opacity:1;transform:rotate(1deg) translateY(0)}

.blog-list{gap:17px!important}
.blog-card{
  grid-template-columns:120px 1fr 48px!important;
  padding:26px 29px!important;
  position:relative;overflow:hidden;transition:.22s ease!important;
}
.blog-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--es-blue)}
.blog-card:nth-child(2):before{background:var(--es-yellow)}
.blog-card:nth-child(3):before{background:var(--es-cyan)}
.blog-card:hover{transform:translateY(-3px)!important;border-color:#a9caee!important;box-shadow:0 20px 44px rgba(35,82,135,.13)!important}
.blog-card time{color:#7890aa!important;font-weight:800!important}
.blog-card h2{color:var(--es-navy)!important;font-size:21px!important}
.blog-card p{color:#6a8098!important}
.blog-card>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#edf5ff;color:var(--es-blue)!important;font-size:18px}
.blog-card:nth-child(2)>span{background:#fff6d8;color:#b9800d!important}
.blog-card:nth-child(3)>span{background:#e8fbff;color:#138ba0!important}

.article-hero{padding:66px 0 28px!important}
.article-meta{
  display:inline-flex;padding:7px 11px;border-radius:999px;
  color:var(--es-blue)!important;background:#eaf4ff;
  font-weight:800!important;
}
.article-hero h1{color:var(--es-navy)!important}
.article-hero p{color:#607792!important}
.article-card{border-radius:26px!important;padding:42px 46px!important}
.article-card p,.article-card li{color:#536b84!important}
.article-card h2,.article-card h3,.article-card strong{color:var(--es-navy)!important}
.article-card pre{background:#f3f8ff!important;border-color:#d2e2f3!important;border-radius:16px!important}
.article-card code{background:#edf5ff!important;border-color:#d0e1f3!important;color:#245fae!important}
.article-callout{
  border-left:0!important;border:1px solid #efd586!important;
  border-radius:18px!important;background:linear-gradient(135deg,#fffaf0,#fff5cf)!important;
  color:#6d6147!important;padding:18px 20px!important;
  box-shadow:0 8px 22px rgba(190,143,31,.08)
}
.back-link{color:var(--es-blue)!important;font-weight:700}
.text-link{color:var(--es-blue)!important}

.closing,footer{border-color:#dce8f4!important}
footer{color:#71859d!important}
footer b{color:var(--es-navy)!important}

@media(max-width:980px){
  .hero.hero-split{grid-template-columns:1fr;gap:28px;padding-top:38px!important}
  .hero-copy{padding-bottom:0}
  .hero-art-wrap{max-width:680px;margin:0 auto;width:100%}
  .blog-hero-card{grid-template-columns:1fr;padding:32px}
  .blog-hero-art{min-height:240px}
}
@media(max-width:680px){
  .hero-copy h1{font-size:48px!important}
  .hero-art-wrap{padding:9px;border-radius:25px}
  .hero-art-wrap img[data-engram-art]{border-radius:19px}
  .hero-art-note{left:18px;right:18px;bottom:18px}
  .hero-after{padding-bottom:44px}
  .blog-hero-card{padding:24px;border-radius:24px}
  .blog-card{grid-template-columns:1fr 40px!important;gap:8px!important}
  .blog-card time{grid-column:1/-1}
  .article-card{padding:28px 23px!important}
}