/* Shared by every page: colors, reset, type, buttons, glass, section layout */
/* Brand colors come from the FB Mania logo (#29a9e1 sky blue, near-black #06090c); gold is the accent */
:root{--night:#06111c;--night-2:#0c2133;--blue:#29a9e1;--blue-d:#0b7fbf;--blue-l:#6fcbf3;--gold:#ffc21a;--gold-d:#e0a400;--chalk:#f4f8fb;--mist:#e3eff7;--line:rgba(6,17,28,.12);--muted:#4f6172;
  --sans:"Lexend","Century Gothic",Arial,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--sans);background:var(--chalk);color:var(--night);line-height:1.6;font-size:1.05rem;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{display:block}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 1.5rem}
.disp{font-weight:700;letter-spacing:-.02em;line-height:1.04}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Logo: the FB mark plus the name set in the site font */
.logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0;text-decoration:none;line-height:1}
.logo img{height:44px;width:auto}
.logo span{display:grid;font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.logo small{font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-d);margin-top:.15rem}

.btn{white-space:nowrap;position:relative;isolation:isolate;overflow:hidden;display:inline-block;background:var(--blue-d);color:#fff;padding:.95rem 1.7rem;border-radius:999px;font:inherit;font-weight:700;text-decoration:none;border:2px solid var(--blue-d);cursor:pointer;
  transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover{transform:translateY(-2px);background:#086aa1;border-color:#086aa1;box-shadow:0 14px 26px -14px rgba(11,127,191,.9)}
.btn:hover::after{transform:translateX(120%)}
.btn.ghost{background:rgba(255,255,255,.08);color:inherit;border-color:currentColor;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn.ghost:hover{background:rgba(255,255,255,.18);box-shadow:none}
.btn.sm{padding:.6rem 1.2rem}

/* Frosted glass surfaces: light on pale backgrounds, .dark on night backgrounds */
.glass{background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 24px 50px -24px rgba(6,17,28,.4)}
.glass.dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 60px -24px rgba(0,0,0,.6)}

section{padding:5.5rem 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;margin-bottom:2.5rem;flex-wrap:wrap}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:17ch;text-wrap:balance}
.link{font-weight:700;color:var(--blue-d);text-underline-offset:5px}

/* Soft glows shared by dark sections */
.lights{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.glow{position:absolute;width:var(--s,640px);height:var(--s,640px);border-radius:50%;filter:blur(90px)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}