/* Shared styles for the placeholder pages (privacy, terms, cookies,
   case-studies, about-ims) and for 404.html. One stylesheet rather than a
   copy of the home page's inline CSS in each file: these pages are thin,
   and they should stay thin. Palette and type match index.html. */

:root{
  --blue:#22A0FE;
  --navy:#131841;
  --navy-2:#1B2157;
  --line:rgba(255,255,255,0.14);
  --muted:#AFB6D8;
  --white:#FFFFFF;
}

*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  background:var(--navy);
  color:var(--white);
  font-family:"Lato","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto;}
a{color:inherit;}

/* Two slow-drifting glows behind everything. Purely decorative, so they are
   aria-hidden in the markup and stop entirely under prefers-reduced-motion. */
.glow{
  position:fixed;
  border-radius:50%;
  filter:blur(10px);
  pointer-events:none;
  z-index:0;
}
.glow-a{
  width:min(70vw,720px);aspect-ratio:1;
  top:-22vh;right:-14vw;
  background:radial-gradient(circle,rgba(34,160,254,.30) 0%,rgba(19,24,65,0) 68%);
  animation:drift-a 22s ease-in-out infinite alternate;
}
.glow-b{
  width:min(58vw,560px);aspect-ratio:1;
  bottom:-20vh;left:-12vw;
  background:radial-gradient(circle,rgba(34,160,254,.18) 0%,rgba(19,24,65,0) 70%);
  animation:drift-b 28s ease-in-out infinite alternate;
}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(-4vw,5vh,0) scale(1.12);}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(5vw,-4vh,0) scale(1.1);}}

.shell{
  position:relative;z-index:1;
  flex:1;
  width:100%;max-width:760px;
  margin:0 auto;
  padding:38px 28px 56px;
  display:flex;flex-direction:column;
}

.masthead{display:flex;align-items:center;gap:11px;text-decoration:none;}
.masthead img{width:30px;height:30px;filter:brightness(0) invert(1);opacity:.92;}
.masthead span{font-size:19px;font-weight:800;letter-spacing:-.01em;}

.middle{flex:1;display:flex;flex-direction:column;justify-content:center;padding:56px 0;}

.mark{
  width:96px;height:96px;margin-bottom:34px;
  filter:brightness(0) invert(1);
  opacity:.9;
  animation:breathe 5.5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.62;transform:scale(1);}50%{opacity:1;transform:scale(1.04);}}

.eyebrow{
  display:inline-block;width:fit-content;
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);
  border:1px solid rgba(34,160,254,.35);
  background:rgba(34,160,254,.10);
  padding:6px 13px;border-radius:999px;
  margin-bottom:22px;
}

h1{
  margin:0 0 20px;
  font-size:clamp(34px,6.4vw,54px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
}

.blurb{margin:0;font-size:clamp(16px,2.4vw,19px);color:var(--muted);max-width:46ch;}

.rule{
  margin:38px 0 30px;
  height:4px;width:112px;border-radius:999px;
  background:linear-gradient(90deg,var(--blue) 0%,rgba(34,160,254,.15) 100%);
  transform-origin:left center;
  animation:sweep 4.5s ease-in-out infinite;
}
@keyframes sweep{0%,100%{transform:scaleX(.55);opacity:.75;}50%{transform:scaleX(1);opacity:1;}}

.actions{display:flex;flex-wrap:wrap;gap:12px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:10px;
  font-weight:700;font-size:15px;white-space:nowrap;
  text-decoration:none;
  border:1.5px solid transparent;
}
.btn-primary{background:var(--blue);color:var(--white);}
.btn-primary:hover{background:#0C7FDC;}
.btn-ghost{border-color:var(--line);color:var(--white);}
.btn-ghost:hover{border-color:rgba(255,255,255,.4);}

footer{
  border-top:1px solid var(--line);
  padding-top:20px;
  font-size:13px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;
}
footer a{color:var(--muted);text-decoration:none;}
footer a:hover{color:var(--white);text-decoration:underline;}

/* Motion is decoration here, never information: every animation above can
   be switched off without changing what the page says. */
@media (prefers-reduced-motion:reduce){
  .glow-a,.glow-b,.mark,.rule{animation:none;}
  .rule{transform:none;}
}