/* ============================================================
   ENTERPRISE BRAIN
   Two dark bands and an ivory middle. The dark carries the two things
   that are infrastructure - the memory itself and the SLM that reasons over it - and
   the ivory carries everything a reader has to actually study. Long
   specification copy on a dark ground is where sites like this usually
   lose people.
   ============================================================ */

/* Page-local reading colours.
   The shared --ink-soft token composites to 3.78:1 on ivory, which is fine for
   a one-line caption and not fine for the paragraphs of specification copy this
   page is mostly made of. These are the same hue, held at a weight that stays
   comfortable at length: body 6.3:1 on ivory, notes 5.6:1, small diagram
   labels 8:1 because 9px needs the extra help.
   Set here rather than in style.css so nothing else on the site shifts. */
:root{
  --eb-body:rgba(28,59,56,.80);
  --eb-note:rgba(28,59,56,.76);
  --eb-fine:rgba(28,59,56,.88);
}

/* ============ HERO: glow horizon ============
   Concentric arcs of light over the headline.

   The first build of this stacked four discs and blurred them with
   filter: blur(21..51px), then animated filter on the parent as well.
   filter:blur on a 1500x1000 surface is one of the most expensive things
   a browser can be asked to paint, animating it forces the whole subtree
   to re-rasterise every frame, and the blurred layers were re-painted on
   scroll. That was the lag.

   Same picture, no filters: three radial-gradient rings on one element.
   A gradient ring IS a soft edge, it is rasterised once, and it costs the
   compositor nothing to keep. Only opacity and transform are animated,
   both of which the compositor can run off the main thread entirely. */
.eb-hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;
  background:#0A1614}
.eb-glow{position:absolute;left:50%;top:0;z-index:0;pointer-events:none;
  width:min(172%,2200px);aspect-ratio:2.2/1;border-radius:100%;
  transform:translate(-50%,-64%);
  background:
    radial-gradient(closest-side,transparent 0 70%,rgba(255,255,255,.42) 73.5%,rgba(255,255,255,0) 77%),
    radial-gradient(closest-side,transparent 0 60%,rgba(127,227,217,.26) 71%,rgba(127,227,217,0) 83%),
    radial-gradient(closest-side,transparent 0 44%,rgba(14,156,147,.24) 66%,rgba(14,156,147,0) 88%);
  animation:ghIn 1.6s cubic-bezier(.16,1,.3,1) both}
/* The rim was crossing the headline and winning: a bright arc directly behind
   80px type leaves the letters fighting a moving highlight. It is pulled up so
   the arc sits above the words, dimmed to roughly half, and this scrim holds a
   dark floor under the copy column so the type always has ground of its own. */
.eb-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,22,20,.94) 0%,rgba(10,22,20,.86) 42%,rgba(10,22,20,.42) 72%,rgba(10,22,20,.18) 100%),
    linear-gradient(180deg,rgba(10,22,20,.5) 0%,transparent 26%,transparent 68%,rgba(10,22,20,.55) 100%)}
@keyframes ghIn{
  from{opacity:0;transform:translate(-50%,-76%) scale(1.06)}
  to  {opacity:1;transform:translate(-50%,-64%) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .eb-glow{animation:none;opacity:1;transform:translate(-50%,-64%)}
}

.eb-hero .wrap{position:relative;z-index:2;padding-top:var(--nav-h)}
.eb-hero h1{font-family:var(--serif);font-weight:800;font-size:clamp(40px,6.2vw,100px);
  letter-spacing:-.035em;line-height:.99;color:#fff}
.eb-hero h1 em{font-style:normal;color:#7FE3D9}
.eb-hero .lead{font-size:clamp(16px,1.3vw,20px);color:rgba(250,248,243,.86);max-width:58ch;
  margin-top:28px;line-height:1.72;font-weight:300}
@media(max-width:820px){
  .eb-hero{min-height:0;padding:calc(var(--nav-h) + 74px) 0 76px}
  .eb-glow{width:250%;aspect-ratio:1.7/1;transform:translate(-50%,-70%)}
}

/* ============ shared section rhythm ============ */
.eb-sec{padding:clamp(84px,13vh,150px) 0}
.eb-head{max-width:70ch;margin-bottom:clamp(44px,6vh,72px)}
.eb-head h2{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4.4vw,62px);
  letter-spacing:-.03em;line-height:1.04;margin-top:16px}
.eb-head h2 em{font-style:normal;color:var(--teal-deep)}
.eb-head p{font-size:clamp(15px,1.15vw,18px);color:var(--eb-body);line-height:1.75;margin-top:22px;max-width:62ch}

/* ============ THE GAP: three frictions ============ */
.eb-gap{background:var(--ivory);border-top:1px solid var(--line-soft)}
.eb-frictions{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.eb-fr{background:var(--ivory);padding:clamp(28px,3.4vw,44px)}
.eb-fr .eb-fr-ic{width:40px;height:40px;color:var(--teal-deep)}
.eb-fr .eb-fr-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.eb-fr h3{font-family:var(--serif);font-weight:700;font-size:clamp(18px,1.55vw,23px);
  letter-spacing:-.02em;margin:22px 0 12px}
.eb-fr p{font-size:15px;line-height:1.7;color:var(--eb-body)}
@media(max-width:900px){.eb-frictions{grid-template-columns:1fr}}

/* ============ THE STACK: three layers ============ */
.eb-stack{background:var(--surface-2)}
.eb-layers{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
@media(max-width:980px){.eb-layers{grid-template-columns:1fr}}

/* the diagram */
.eb-diagram{position:relative;border:1px solid var(--line);border-radius:6px;background:var(--ivory);
  padding:clamp(22px,3vw,38px);box-shadow:0 30px 60px -46px var(--shadow)}
.eb-diagram svg{width:100%;height:auto;display:block;overflow:visible}
.eb-d-box{fill:#fff;stroke:rgba(28,59,56,.18);stroke-width:1}
.eb-d-brain{fill:rgba(14,156,147,.07);stroke:var(--teal);stroke-width:1.4}
.eb-d-lbl{font-family:var(--font);font-size:11px;font-weight:600;fill:var(--ink);letter-spacing:.01em}
.eb-d-sub{font-family:var(--font);font-size:9px;font-weight:500;fill:var(--eb-fine)}
.eb-d-cap{font-family:var(--font);font-size:8.5px;font-weight:600;fill:var(--teal-deep);
  letter-spacing:.16em;text-transform:uppercase}
.eb-d-wire{fill:none;stroke:rgba(28,59,56,.22);stroke-width:1}
/* signals climbing the wires: the diagram should read as flowing, not as a chart */
.eb-d-flow{fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:5 150;animation:ebFlow 3.4s linear infinite}
.eb-d-flow.d2{animation-delay:.85s}
.eb-d-flow.d3{animation-delay:1.7s;stroke:var(--amber)}
.eb-d-flow.d4{animation-delay:2.5s}
@keyframes ebFlow{from{stroke-dashoffset:155}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.eb-d-flow{animation:none;stroke-dasharray:none;opacity:.45}}
/* Below this width the diagram would scale its 9px labels down to about 5px,
   which is not a diagram any more. Hold it at its natural size and let the box
   scroll instead: the page itself never scrolls sideways. */
@media(max-width:620px){
  .eb-diagram{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    padding:20px}
  .eb-diagram svg{min-width:460px}
}

/* the layer key beside it */
.eb-key{list-style:none;counter-reset:ebk}
.eb-key li{position:relative;padding:0 0 26px 58px;counter-increment:ebk}
.eb-key li:not(:last-child)::before{content:"";position:absolute;left:17px;top:34px;bottom:2px;
  width:1px;background:var(--line)}
.eb-key li::after{content:"0" counter(ebk);position:absolute;left:0;top:0;
  width:35px;height:35px;border-radius:50%;border:1px solid var(--line);background:var(--ivory);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--teal-deep)}
.eb-key h3{font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.5vw,22px);
  letter-spacing:-.02em;margin-bottom:9px;padding-top:6px}
.eb-key p{font-size:15px;line-height:1.72;color:var(--eb-body)}

/* ============ THE SLM LAYER (dark band) ============ */
.eb-llm{position:relative;background:#0A1614;color:rgba(250,248,243,.84);overflow:hidden}
.eb-llm::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 78% 12%,rgba(14,156,147,.16),transparent 62%)}
.eb-llm .wrap{position:relative;z-index:1}
.eb-llm .eyebrow{color:var(--teal)}
.eb-llm .eb-head h2{color:#fff}
.eb-llm .eb-head h2 em{color:#7FE3D9}
.eb-llm .eb-head p{color:rgba(250,248,243,.72)}

.eb-mods{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(250,248,243,.12);
  border:1px solid rgba(250,248,243,.12);border-radius:5px;overflow:hidden}
.eb-mod{background:#0A1614;padding:clamp(26px,3vw,40px);position:relative;
  transition:background .45s var(--ease)}
.eb-mod:hover{background:#0D1F1C}
.eb-mod .eb-m-n{font-family:var(--disp);font-size:11px;letter-spacing:.2em;color:var(--teal);
  display:block;margin-bottom:18px}
.eb-mod h3{font-family:var(--serif);font-weight:700;font-size:clamp(18px,1.6vw,24px);
  letter-spacing:-.02em;color:#fff;margin-bottom:12px}
.eb-mod p{font-size:15px;line-height:1.72;color:rgba(250,248,243,.66)}
.eb-mod ul{list-style:none;margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.eb-mod li{font-family:var(--disp);font-size:11px;letter-spacing:.06em;
  color:rgba(250,248,243,.6);border:1px solid rgba(250,248,243,.16);border-radius:2px;padding:5px 10px}
@media(max-width:820px){.eb-mods{grid-template-columns:1fr}}

/* the one line that matters most on this page, so it gets its own frame */
/* ============ HOW IT LANDS ============ */
.eb-land{background:var(--surface-2);border-top:1px solid var(--line-soft)}
.eb-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
@media(max-width:900px){.eb-phases{grid-template-columns:1fr}}
.eb-ph{background:var(--ivory);border:1px solid var(--line);border-radius:5px;
  padding:clamp(26px,3vw,38px);position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.eb-ph::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--c,var(--teal));
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.eb-ph:hover{transform:translateY(-4px);border-color:rgba(28,59,56,.2);
  box-shadow:0 26px 50px -38px var(--shadow)}
.eb-ph:hover::before{transform:scaleX(1)}
.eb-ph .eb-ph-k{font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c,var(--teal-deep))}
.eb-ph h3{font-family:var(--serif);font-weight:700;font-size:clamp(19px,1.7vw,25px);
  letter-spacing:-.025em;margin:14px 0 12px}
.eb-ph p{font-size:15px;line-height:1.72;color:var(--eb-body)}
.eb-ph .eb-ph-t{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-family:var(--disp);font-size:12px;letter-spacing:.04em;color:var(--eb-note)}

/* ============ CLOSE ============ */
.eb-close{background:var(--ivory);text-align:center;padding:clamp(84px,14vh,160px) 0}
.eb-close h2{font-family:var(--serif);font-weight:800;font-size:clamp(30px,4.6vw,64px);
  letter-spacing:-.03em;line-height:1.05;max-width:20ch;margin:16px auto 0}
.eb-close h2 em{font-style:normal;color:var(--teal-deep)}
.eb-close p{font-size:clamp(15px,1.15vw,18px);color:var(--eb-body);line-height:1.75;
  max-width:56ch;margin:24px auto 0}
.eb-close-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}

/* ============ making the flat sections move ============
   The three bands between the hero and the close were static blocks of
   type. These give each one something that responds: the frictions lift
   and light their icon, the phases raise their own colour, and both
   grounds carry a very cheap tint so the page is not four flat rectangles
   of ivory in a row. Transform and opacity only. */

/* the gap: a faint field so the ivory band is not dead flat */
.eb-gap{position:relative;overflow:hidden}
.eb-gap::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 88% 0%,rgba(14,156,147,.07),transparent 68%)}
.eb-gap .wrap{position:relative;z-index:1}

.eb-fr{position:relative;transition:background .5s var(--ease),transform .5s var(--ease)}
.eb-fr::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)}
.eb-fr:hover{background:#fff}
.eb-fr:hover::after{transform:scaleX(1)}
.eb-fr .eb-fr-ic{transition:color .45s var(--ease),transform .55s var(--ease)}
.eb-fr:hover .eb-fr-ic{color:var(--amber-deep);transform:translateY(-3px) scale(1.06)}

/* the phases: the colour belongs to the phase, so let it arrive on hover */
.eb-ph{position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.eb-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 12% 0%,color-mix(in srgb,var(--c) 14%,transparent),transparent 62%);
  opacity:0;transition:opacity .55s var(--ease)}
.eb-ph:hover{transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--c) 45%,var(--line));
  box-shadow:0 34px 60px -44px rgba(28,42,40,.6)}
.eb-ph:hover::after{opacity:1}
.eb-ph > *{position:relative;z-index:1}

/* the close: give the last screen the same horizon as the first, quietly */
.eb-close{position:relative;overflow:hidden}
.eb-close::before{content:"";position:absolute;left:50%;bottom:-58%;
  width:min(150%,1700px);aspect-ratio:2.2/1;transform:translateX(-50%);
  border-radius:100%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(14,156,147,.20),rgba(14,156,147,.05) 58%,transparent 74%)}
.eb-close .wrap{position:relative;z-index:1}