/* ==========================================================================
   The outro band — the closing CTA and the footer as one dark block.

   Loaded by BOTH the homepage (a Claude Design canvas document, which has no
   global reset) and the static child pages, so every rule is scoped under
   .site-outro and the component carries its own box-sizing, fonts and spacing
   token. Nothing here may leak out, and nothing outside may be relied on.

   The scroll story opens dark on the hero video, runs light through the middle,
   and lands dark here. No line texture at all — the globe wireframe, the square
   grid and then the concentric circles all came out; two soft glows carry it.
   ========================================================================== */

.site-outro{
  --outro-gutter: clamp(24px, 4vw, 64px);
  --outro-hair:   oklch(100% 0 0 / 0.15);
  --outro-dim:    oklch(92% 0.01 285 / 0.72);

  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  color:#fff;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  padding:clamp(60px,8vw,104px) var(--outro-gutter) clamp(24px,3vw,34px);
  background:
    radial-gradient(ellipse 62% 95% at 10% -12%, rgb(81 69 161 / 0.55), transparent 62%),
    radial-gradient(ellipse 58% 85% at 102% 112%, rgb(81 69 161 / 0.42), transparent 60%),
    #2B1F4F;
}
.site-outro *{box-sizing:border-box}
.site-outro h2,.site-outro h3{font-family:var(--font-display);margin:0}
.site-outro p{margin:0}
.site-outro ul{margin:0;padding:0;list-style:none}

/* A vignette so the copy always has something calm behind it. */
.site-outro::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 78% 62% at 50% 34%, oklch(23% 0.03 292 / 0.6), transparent 72%);
}

.site-outro__inner{position:relative;z-index:2;max-width:1240px;margin:0 auto}

/* ---- Closing call to action ------------------------------------------- */
/* The footer columns below the rule carry clamp(40px,5vw,60px) of padding-top,
   so without this the separator hugs the social line and the air sits entirely
   on the wrong side of it. Slightly more above than below: the rule should feel
   attached to the columns it introduces, not to the CTA it closes. */
.site-outro__cta{text-align:center;max-width:840px;margin:0 auto clamp(48px,6vw,80px)}
.site-outro__cta h2{
  font-size:clamp(26px,3.2vw,38px);line-height:1.35;font-weight:800;
  margin:0 auto 30px;max-width:700px;
}
.outro-form{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.outro-form input{
  width:280px;padding:14px 22px;border-radius:999px;
  font:inherit;font-size:15px;color:#fff;
  background:oklch(100% 0 0 / 0.08);border:1px solid oklch(100% 0 0 / 0.2);
}
.outro-form input::placeholder{color:oklch(85% 0.01 285 / 0.5)}
.outro-form input:focus{outline:2px solid oklch(100% 0 0 / 0.55);outline-offset:2px}
.outro-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 30px;border-radius:999px;border:0;cursor:pointer;
  font:700 16px var(--font-body);white-space:nowrap;
  background:#fff;color:#2B1F4F;text-decoration:none;
  transition:background var(--hover-dur) var(--ease-soft),transform var(--hover-move) var(--ease-soft);
}
.outro-btn:hover{background:oklch(94% 0.01 285);color:#2B1F4F;transform:translateY(-1px)}
.site-outro__note{font-size:16px;color:var(--outro-dim);margin-bottom:20px}
.site-outro__socials{display:flex;gap:12px;margin-top:22px}
/* the icons sit inside .site-outro__cols, whose link rules (hover colour, and on
   phones inline-block with padding) would otherwise win; the extra
   .site-outro__brand keeps these ahead of them */
.site-outro__brand .site-outro__socials a{display:grid;place-items:center;width:42px;height:42px;padding:0;
  border-radius:50%;color:#fff;line-height:0;
  border:1px solid oklch(100% 0 0 / 0.28);background:oklch(100% 0 0 / 0.06);
  transition:background var(--hover-dur) var(--ease-soft),color var(--hover-dur) var(--ease-soft),transform var(--hover-move) var(--ease-soft)}
.site-outro__brand .site-outro__socials a:hover{background:#fff;color:#2B1F4F;transform:translateY(-2px)}
.site-outro__brand .site-outro__socials a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.site-outro__socials svg{display:block}
.site-outro__social{font-size:16px;color:var(--outro-dim)}
.site-outro__social a{color:oklch(85% 0.09 285);text-decoration:none}
.site-outro__social a:hover{color:#fff}

/* ---- Footer columns ---------------------------------------------------- */
.site-outro__rule{height:1px;background:var(--outro-hair);border:0;margin:0}
.site-outro__cols{
  display:grid;grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,48px);
  padding:clamp(40px,5vw,60px) 0;
}
.site-outro__brand img{height:46px;width:auto;display:block;margin-bottom:18px;
  filter:brightness(0) invert(1)}
.site-outro__brand p{color:var(--outro-dim);max-width:32em;font-size:15.5px}
.site-outro__cols h3{
  font:700 12px var(--font-label);letter-spacing:3px;text-transform:uppercase;
  color:oklch(85% 0.09 285);margin-bottom:18px;
}
.site-outro__cols ul{display:grid;gap:11px}
.site-outro__cols a{color:oklch(96% 0.01 285 / 0.88);font-size:15.5px;text-decoration:none;
  transition:color var(--hover-dur) var(--ease-soft)}
.site-outro__cols a:hover{color:#fff}

/* ---- Bottom bar --------------------------------------------------------- */
.site-outro__bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding:20px 0 6px;
  font-size:14px;color:oklch(92% 0.01 285 / 0.6);
}
.site-outro__bar a{color:inherit;margin-left:14px;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:oklch(100% 0 0 / 0.3)}
.site-outro__bar a:hover{color:#fff}
.site-outro__award{display:flex;align-items:center;gap:10px}
.site-outro__award img{height:45px;width:auto;display:block;
  filter:brightness(0) invert(1) opacity(0.82)}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:980px){
  .site-outro__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-outro__brand{grid-column:1 / -1}
}
@media (max-width:640px){
  .site-outro{--outro-gutter:20px}
  .site-outro__cols{grid-template-columns:minmax(0,1fr);gap:30px}
  .site-outro__cols ul{gap:2px}
  .site-outro__cols a{display:inline-block;padding:9px 0}
  .site-outro__social a{display:inline-block;padding:8px 2px}
  .outro-form input,.outro-btn{width:100%;justify-content:center}
  .site-outro__bar{justify-content:flex-start;gap:14px}
}

@media (prefers-reduced-motion:reduce){
  .site-outro *{transition-duration:.01ms !important}
}