/* ---------- Tokens (Light) ---------- */
:root{
  /* Base surfaces & text */
  --bs-body-bg:   #f8fafc;   /* very light blue-gray */
  --bs-body-color:#212529;   /* readable body text */
  --bs-surface:   #ffffff;   /* cards, sheets */
  --bs-surface-2: #f1f5f9;   /* subtle secondary surface */
  --bs-border-color:#e2e8f0; /* border w/ slight blue hue */
  --bs-muted:     #64748b;   /* slate-500 */
  --bs-heading:   #0b1220;   /* deep heading color */

  /* Brand / primary scale (Informatest) */
  --bs-primary:       #0ea5e9; /* sky-500 (your brand-mid) */
  --bs-primary-400:   #38bdf8; /* sky-400 for hovers/focus rings */
  --bs-primary-600:   #0284c7; /* sky-600 for active/pressed */

  /* Optional secondary pulled from brand-start */
  --bs-secondary:     #1856c9;
  --bs-secondary-400: #4b7ff0;
  --bs-secondary-600: #154ab0;

  /* Gradient anchors to keep your hero consistent */
  --brand-start: #1856c9;
  --brand-mid:   #0ea5e9;
  --brand-end:   #1856c9;
  --text-on-hero:#ffffff;

  /* Radii, shadows, layout */
  --radius:.5rem;
  --shadow-sm:0 .125rem .25rem rgba(0,0,0,.075);
  --shadow:0 .5rem 1rem rgba(0,0,0,.12);

  --pad-x:1rem;
  --maxw-xs:100%;
  --maxw-sm:540px; --maxw-md:720px; --maxw-lg:960px; --maxw-xl:1140px; --maxw-xxl:1320px;

  /* Soft gradient stops for cards/chips if needed */
  --g1:#cfe6ff;   /* softer take that harmonizes with #1856c9 */
  --g2:#0ea5e9;   /* brand mid */
  --g3:#1856c9;   /* brand start/end */
}

/* ---------- Tokens (Dark) ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --bs-body-bg:#0b1220;
    --bs-body-color:#d4dae3;
    --bs-surface:#0f172a;
    --bs-surface-2:#0b1324;
    --bs-border-color:#1e293b;
    --bs-muted:#91a4bd;
    --bs-heading:#eef4ff;

    --g1:#3bb8ff; --g2:#5ea8ff; --g3:#19cbe7;
  }
}

/* Manual override */
html[data-theme="dark"]{
  --bs-body-bg:#0b1220; --bs-body-color:#e6edf7; --bs-surface:#0f172a; --bs-surface-2:#0b1324;
  --bs-border-color:#1e293b; --bs-muted:#91a4bd; --bs-heading:#ffffff;
  --g1:#35b7ff; --g2:#4fa0ff; --g3:#18c7e3;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html{ block-size:100%; }
body{
  margin:0; font-family:"roboto",sans-serif;
  color:var(--bs-body-color); background:var(--bs-body-bg); line-height:1.6; overflow-x:hidden;
    min-block-size: 100dvh;                /* fallback to 100vh if dvh not supported */
  display: grid;
  grid-template-rows: auto 1fr auto;     /* header | content fills | footer */
}

/* ---------- Preloader ---------- */
:root{
  --preloader-color: var(--bs-primary);
}
@media (prefers-color-scheme: dark){
  :root{ --preloader-color: var(--bs-primary-400); }
}
html[data-theme="dark"]{
  --preloader-color: var(--bs-primary-400);
}
.page-preloader{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--bs-body-bg) 92%, transparent);
  backdrop-filter: blur(6px);
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease, visibility .2s ease;
}
.page-preloader.is-hidden{
  opacity: 0;
  visibility: hidden;
}
.page-preloader-inner{
  display: grid;
  place-items: center;
  gap: .5rem;
  color: var(--preloader-color);
}
.preloader-spinner{
  width: 64px;
  height: 64px;
  display: block;
}
@media (prefers-reduced-motion: reduce){
  .page-preloader{ transition: none; }
}
@media print{
  .page-preloader{ display: none !important; }
}

/* Ensure the content row grows; works whether you use <main> or a .site-main */
main, .site-main{
  display:block;
  grid-row: 2;
  min-block-size: 0;                     /* prevents accidental overflow constraints */
}

/* Explicitly pin header/footer to their rows (not strictly required, but clear) */
.site-header{ grid-row: 1; }
.site-footer{ grid-row: 3; }

/* Optional: keep your spacing above the footer without breaking the stickiness. 
   If you prefer the extra gap, keep margin-top; otherwise switch it to padding. */
/* .site-footer { margin-top: 2rem; } keep if you like the gap */
/* .footer-inner { padding-top: 1rem; } alternative if you remove the margin */

/* animated, subtle */
body::before{
  content:""; position:fixed; inset:-20%; z-index:-1;
  background:
    radial-gradient(900px 520px at 8% -18%, color-mix(in oklab, var(--g1) 30%, transparent), transparent 60%),
    linear-gradient(120deg, var(--g1), var(--g2) 45%, var(--g3) 90%);
  opacity:.18; background-size:160% 160%;
  animation:gradientShift 18s ease-in-out infinite alternate;
}
@keyframes gradientShift{0%{background-position:0% 40%,0% 50%}100%{background-position:80% 20%,100% 50%}}
@media (prefers-reduced-motion:reduce){ body::before{animation:none;} }

/* Links & buttons */
a{
  color: var(--bs-primary);
  text-decoration: underline;
  text-underline-offset: .15em;
}
a:hover{ color: var(--bs-primary-600); }

.btn{
  display:inline-block;
  padding:.5rem 1rem;
  border-radius:.375rem;
  border:1px solid transparent;
  font-weight:600;
  box-shadow: var(--shadow-sm);
  transition:
    transform .06s ease,
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    color .15s ease;
  text-decoration: none;
  user-select: none;
}
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Primary (solid/gradient) */
.btn-primary{
  color:#06202c; /* high-contrast ink on light primary */
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-400) 65%);
  border-color:#0a7fb7;
}
.btn-primary:hover{
  /* darker-to-brighter sweep + stronger border for contrast on hover */
  color:#f1eeee;
  background: linear-gradient(135deg, #0369a1, #0ea5e9 70%);
  border-color:#035c8f;
  box-shadow: 0 0 0 3px rgba(14,165,233,.22), var(--shadow-sm);
}
/* Dark-mode hover: brighter ring + white ink for contrast */
html[data-theme="dark"] .btn-primary:hover{
  color:#ffffff;
  background: linear-gradient(135deg, #0ea5e9, #38bdf8 70%);
  border-color:#7dd3fc;
  box-shadow: 0 0 0 3px rgba(96,165,250,.28), var(--shadow-sm);
}
@media (prefers-color-scheme: dark){
  .btn-primary:hover{
    color:#ffffff;
    background: linear-gradient(135deg, #0ea5e9, #38bdf8 70%);
    border-color:#7dd3fc;
    box-shadow: 0 0 0 3px rgba(96,165,250,.28), var(--shadow-sm);
  }
}
/* Make brand logo brighter in dark mode */
.brand svg{
  display: block; /* just to avoid inline gaps */
}

/* Manual toggle */
html[data-theme="dark"] .brand svg{
  filter: brightness(1.4) contrast(1.15) saturate(1.2);
}

/* Also respect system dark mode if you want */
@media (prefers-color-scheme: dark){
  .brand svg{
    filter: brightness(1.4) contrast(1.15) saturate(1.2);
  }
}

/* Ghost (used in hero) */
.btn-ghost{
  color: var(--bs-body-color);
  background: transparent;
  border: 1px solid #c9d6e5; /* visible on light bg */
}
.btn-ghost:hover{
  /* clear contrast on light: white chip + brand border */
  color:#0b1220;
  background:#ffffff;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
}
/* Ghost in dark: keep near-white text, raise bg contrast on hover */
html[data-theme="dark"] .btn-ghost{
  color:#f8fbff;
  border-color:#334155;
}
html[data-theme="dark"] .btn-ghost:hover{
  color:#ffffff;
  background: rgba(255,255,255,.10);
  border-color:#60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,.28);
}
@media (prefers-color-scheme: dark){
  .btn-ghost{ color:#f8fbff; border-color:#334155; }
  .btn-ghost:hover{
    color:#ffffff;
    background: rgba(255,255,255,.10);
    border-color:#60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,.28);
  }
}

/* (Optional) Outline variant kept for other pages */
.btn-outline{
  color: var(--bs-body-color);
  background: transparent;
  border-color:#c9d6e5;
}
.btn-outline:hover{
  color:#04141f;
  background: rgba(14,165,233,.12);
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
}

/* --- Header search --- */
.nav { align-items: center; }
.nav .nav-spacer { flex: 1 1 auto; }
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border:0; background:transparent; cursor:pointer;
  border-radius: var(--radius);
  color: var(--bs-heading);
}

.icon-btn:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

.search-wrap { position: relative; }
.search-panel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 1000;
  width: min(92vw, 520px);
  background: var(--bs-surface); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color); border-radius: .75rem;
  box-shadow: var(--shadow);
  padding: .75rem;
}
.search-form { display:flex; gap:.5rem; align-items:center; }
.search-form input[type="search"]{
  flex:1; min-width: 8rem;
  border:1px solid var(--bs-border-color); border-radius:.5rem; padding:.5rem .625rem;
  background: var(--bs-body-bg); color: var(--bs-body-color);
}
.search-results { margin-top:.5rem; max-height: 50vh; overflow:auto; }
.search-list { margin:.25rem 0 .5rem; padding-left:0; list-style:none; }
.search-list li { margin:.125rem 0; list-style:none; padding-left: 0.5rem;}
.search-list .search-section{
  list-style: none;
  counter-increment: none;
  margin: .5rem 0 .2rem;
  padding-left: 0;
  overflow: visible;
  white-space: nowrap;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-muted);
  font-weight: 600;
}
.search-list .search-section::marker{ content: ""; }
.search-list a { text-decoration:none; }
.search-list a:hover { text-decoration:underline; }
.small { font-size:.875rem; }
.muted { color: var(--bs-muted); }
.visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* Mobile: panel becomes full-width below 640px */
@media (max-width: 640px){
  .search-panel{ left: var(--pad-x); right: var(--pad-x); width: auto; }
}

/* --- Magnifier (search toggle) states --- */
.icon-btn{
  transition: background-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .12s ease;
}

/* Hover: subtle bg + accent icon color */
.icon-btn:hover{
  background: var(--bs-surface-2);
  color: var(--bs-primary-600);
  box-shadow: inset 0 0 0 1px var(--bs-border-color);
}

/* Keyboard focus outline (keeps accessibility) */
.icon-btn:focus-visible{
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Pressed */
.icon-btn:active{
  transform: scale(0.96);
}

/* When panel is open, keep it highlighted */
.search-wrap[data-open="true"] .icon-btn{
  background: var(--bs-primary-400);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--bs-primary-600);
}

@media (prefers-reduced-motion: reduce){
  .icon-btn{ transition: none; }
}
/* Thicken the magnifier */
.icon-btn svg path{
  stroke: currentColor;
  stroke-width: 1.4;     /* tweak: 1.21.8 */
  stroke-linejoin: round;
  paint-order: stroke;   /* draw stroke under fill for a beefier look */
}


/* ---------- Containers ---------- */
.container{
  width:100%; padding-right:var(--pad-x); padding-left:var(--pad-x);
  margin-right:auto; margin-left:auto; max-width:var(--maxw-xs);
}
@media (min-width:576px){ .container{ max-width:var(--maxw-sm); } }
@media (min-width:768px){ .container{ max-width:var(--maxw-md); } }
@media (min-width:992px){ .container{ max-width:var(--maxw-lg); } }
@media (min-width:1200px){ .container{ max-width:var(--maxw-xl); } }
@media (min-width:1400px){ .container{ max-width:var(--maxw-xxl); } }

/* ===================== Header / Navigation ===================== */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(8px);
  background:color-mix(in oklab, var(--bs-surface) 92%, transparent);
  border-bottom:1px solid var(--bs-border-color);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem 0.5rem;
  gap:.75rem;                 /* space between brand and hamburger */
  flex-wrap:wrap;             /* allow nav to wrap under on mobile */
}
.brand{
  font-weight:700; letter-spacing:.2px; color:var(--bs-heading);
  font-size:1rem; text-decoration:none; margin: 0px;
  height: 30px;
  /* text-shadow: 1px 1px 1px gray;  */
}

/* Hamburger (right) */
.nav-toggle{
  display:inline-flex; flex-direction:column; gap:4px;
  background:transparent; border:0; padding:.45rem; margin-left:.5rem; cursor:pointer;
}
.nav-toggle:focus-visible{ outline:2px solid var(--bs-primary); outline-offset:2px; border-radius:8px; }
.nav-toggle-bar{ width:26px; height:2px; background:currentColor; display:block; border-radius:2px; color:var(--bs-body-color); }

/* Mobile menu: vertical list BELOW header row */
.nav{
  width:100%; order:3; margin-top:.25rem;
  display:flex; flex-direction:column; align-items:stretch;
  max-height:0; overflow:hidden; transition:max-height .25s ease;
}
.nav[data-collapsed="false"]{
  max-height: calc(100vh - 4.5rem);

}
.nav-link{
  display:block; padding:.625rem .5rem; border-radius:.5rem; margin:.125rem 0;
  color:var(--bs-body-color); text-decoration:none;
}

/* ===== Theme Toggle (only piece changed for strong contrast) ===== */
.theme-toggle{
  display:block; padding:.625rem .75rem; border-radius:.5rem; margin:.125rem 0;
  font-weight:600; text-decoration:none; cursor:pointer;
  border:1px solid transparent;
  /* LIGHT THEME: dark text on light chip for contrast with light header */
  color:#0b1220; background:#e7f3ff; border-color:#9bccff;
  box-shadow:0 2px 6px rgba(14,165,233,.12);
}
.theme-toggle:hover{ background:#d7ecff; }
/* DARK THEME: near-white text on dark chip for contrast with dark header */
html[data-theme="dark"] .theme-toggle{
  color:#f9fbff !important; background:#0b1a2e; border-color:#334155;
  box-shadow:0 2px 10px rgba(2,132,199,.25);
}
html[data-theme="dark"] .theme-toggle:hover{ background:#0e253f; }
@media (prefers-color-scheme: dark){
  .theme-toggle{
    color:#f9fbff !important; background:#0b1a2e; border-color:#334155;
    box-shadow:0 2px 10px rgba(2,132,199,.25);
  }
  .theme-toggle:hover{ background:#0e253f; }
}

.nav-link:hover{ background:rgba(14,165,233,.12); }
.nav-link.active{ background:rgba(14,165,233,.18); }

/* --- Nav dropdown (subjects) --- */
.nav-dropdown{ position: relative; }
.nav-dropdown-toggle{
  border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; gap:.35rem;
  font: inherit; color: inherit;
}
.nav-dropdown-toggle:focus-visible{
  outline:2px solid var(--bs-primary);
  outline-offset:2px;
  border-radius:.5rem;
}
.nav-dropdown-caret{
  width:.8rem; height:.8rem;
  transition: transform .15s ease;
}
.nav-dropdown[data-open="true"] .nav-dropdown-caret{ transform: rotate(180deg); }
.nav-dropdown-menu{
  display:none;
  margin:.25rem 0 .35rem;
  padding:.25rem;
  border-radius:.75rem;
  border:1px solid var(--bs-border-color);
  background: var(--bs-surface);
  box-shadow: var(--shadow-sm);
  max-height:45vh;
  overflow:auto;
}
.nav-dropdown[data-open="true"] .nav-dropdown-menu{ display:block; }
.nav-dropdown-item{
  display:block;
  padding:.5rem .7rem;
  border-radius:.5rem;
  color: var(--bs-body-color);
  text-decoration:none;
}
.nav-dropdown-item:hover{ background:rgba(14,165,233,.12); }
.nav-dropdown-item:focus-visible{
  outline:2px solid var(--bs-primary);
  outline-offset:2px;
}
.nav-dropdown-empty{
  display:block;
  padding:.5rem .7rem;
  color: var(--bs-muted);
  font-size:.875rem;
}

@media (max-width:780px){
  .nav-dropdown-menu{
    max-height: none;
    overflow: visible;
  }
}

@media (min-width:781px){
  .nav-dropdown-menu{
    position:absolute;
    top: calc(100% + .45rem);
    left:0;
    min-width: 15rem;
    margin:0;
    display:block;
    opacity:0;
    visibility:hidden;
    transform: translateY(-4px);
    pointer-events:none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    z-index: 60;
    box-shadow: var(--shadow);
  }
  .nav-dropdown[data-open="true"] .nav-dropdown-menu{
    opacity:1;
    visibility:visible;
    transform: translateY(0);
    pointer-events:auto;
  }
}

/* Tablet+ : inline menu */
@media (min-width:781px){
  .nav{
    order:2; margin-top:0; max-height:none; overflow:visible;
    flex-direction:row; align-items:center; justify-content:flex-end; gap:.25rem; width:auto;
  }
  .nav-toggle{ display:none; }
  .nav-link, .theme-toggle{ padding:.5rem .7rem; margin:0; }
}

/* ===================== Hero / Homepage ===================== */
.home .hero{
  padding: 2rem 0 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
  background:
    radial-gradient(800px 480px at 95% -25%,
      color-mix(in oklab, var(--bs-primary) 18%, transparent),
      transparent 60%);
}

/* Light/default: gradient ink */
.home .hero .hero-inner h1{
  margin: 0 0 .5rem;
  font-size: 1.8rem;
  line-height: 1.2;
  background: linear-gradient(
    135deg,
    #0b1726,
    color-mix(in oklab, var(--bs-primary) 35%, #0b1726) 60%,
    color-mix(in oklab, #22d3ee 35%, #0b1726) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-inner p{ margin:0 0 1rem; color:var(--bs-muted); }
.hero-actions{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content: start;}

/* DARK MODE: force high-contrast (near-white)  works for both manual and system dark */
html[data-theme="dark"] .home .hero .hero-inner h1{
  background: none !important;   /* remove gradient */
  color: #f8fbff !important;     /* near-white */
  text-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 28px rgba(56,189,248,.28);
}
@media (prefers-color-scheme: dark){
  .home .hero .hero-inner h1{
    background: none !important;
    color: #f8fbff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 28px rgba(56,189,248,.28);
  }
}

/* Hero text column sizing */
.hero-copy{
  max-width: 640px;
}

/* Hero media (image) */
.hero-media{
  position: relative;
  margin-top: 1.25rem;         /* stacked layout spacing on mobile */
  display: grid;
  place-items: center;
}
.hero-media img{
  width: min(100%, 520px);
  height: auto;
  aspect-ratio: 4 / 3;         /* prevent CLS */
  object-fit: contain;
  display: block;
  border-radius: 16px;
  /* soft depth */
  filter: drop-shadow(0 18px 28px rgba(2,6,23,.16));
  background: radial-gradient(60% 60% at 80% 10%, rgba(96,165,250,.12), transparent 70%);
}

/* A subtle glow halo behind the image (keeps it modern) */
.hero-media::before{
  content:"";
  position:absolute; inset:-10% -12% -12% -12%;
  background:
    radial-gradient(55% 55% at 25% 75%, rgba(14,165,233,.25), transparent 70%),
    radial-gradient(50% 50% at 75% 25%, rgba(56,189,248,.25), transparent 70%);
  filter: blur(22px);
  z-index:-1;
  pointer-events:none;
}

/* Dark mode: keep image vivid and readable on dark backgrounds */
html[data-theme="dark"] .hero-media img{
  filter: drop-shadow(0 24px 40px rgba(2,6,23,.5)) saturate(1.05) brightness(1.06);
}

/* At >=992px, tuck the image to the right edge a bit for a polished feel */
@media (min-width:992px){
  .hero-media{ margin-top: 0; justify-self: end; }
}


/* XL+: two-column hero */
@media (min-width:992px){
  .home .hero .hero-inner{
    display:grid;
    grid-template-columns: 1.15fr .85fr; /* copy | image */
    gap: 2rem;
    align-items: center;
  }
}


/* ===================== Features / Cards ===================== */
.features{ padding:1.5rem 0 2.5rem; }
.features-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:768px){ .features-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .features-grid{ grid-template-columns:repeat(2,1fr); } }

.card{
  background:var(--bs-surface); border:1px solid var(--bs-border-color);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow-sm);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  will-change: transform;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(14,165,233,.45); background-color: var(--bs-surface); }
.card:active{ transform: translateY(-2px); }
.card:focus-within{ outline: 2px solid rgba(14,165,233,.5); outline-offset: 2px; }

.card h3{ margin:0 0 .3rem; font-size:1.125rem; color:var(--bs-heading); }
.card p{ margin:.25rem 0 0; color:var(--bs-muted); }

/* ===================== Footer ===================== */
.site-footer{ margin-top:2rem; background:var(--bs-surface); border-top:1px solid var(--bs-border-color); }
.footer-inner{ padding:1rem 0; display:flex; flex-direction:column; gap:.5rem; align-items:center; justify-content:center; text-align:center; }
.footer-links{display: flex; flex-direction: row; align-items: center; gap: 0.75rem; justify-content: center; padding: 0 0.75rem; flex-wrap:wrap; }
.footer-links a{color:var(--bs-muted); }
.footer-links a:hover{ color:var(--bs-body-color); }
.footer-actions{ display:flex; flex-direction:row; gap:5rem; align-items:center; justify-content:space-between; padding: 0 1rem; flex-wrap: nowrap;}
.footer-socials{ display:flex; gap:.5rem; align-items:center; justify-content:center; flex-wrap:wrap; flex-direction: column;}
.footer-socials-label{ font-weight:600; color:var(--bs-muted); font-size: 1rem;}
.footer-socials-icons{ display:flex; gap:.5rem; align-items:center; justify-content:center; }
.footer-socials a{
  width:2.5rem; height:2.5rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--bs-border-color);
  background: var(--bs-surface-2);
  color: var(--bs-muted);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.footer-socials a:hover{
  color: var(--bs-primary-600);
  border-color: color-mix(in oklab, var(--bs-primary-400) 65%, var(--bs-border-color));
  background: var(--bs-surface);
  transform: translateY(-1px);
}
.footer-socials svg{ width:24px; height:24px; display:block; }
.footer-socials svg path{ fill: currentColor; }
@media (max-width:640px){
  .footer-actions{ flex-direction:column; gap: 1rem}
}

/* ===================== Cookie Banner ===================== */
.cookie-banner{
  position: fixed;
  inset: auto 1rem 1rem 1rem;
  z-index: 1200;
  background: color-mix(in oklab, var(--bs-surface) 92%, transparent);
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.18);
  backdrop-filter: blur(8px);
  max-width: 980px;
  margin: 0 auto;
  color: var(--bs-body-color);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner-inner{
  padding: 1rem 1.2rem;
  display: grid;
  gap: .75rem;
}
.cookie-banner-title{
  margin: 0 0 .35rem;
  font-weight: 700;
  color: var(--bs-heading);
}
.cookie-banner-copy p{
  margin: 0 0 .35rem;
  color: var(--bs-body-color);
}
.cookie-banner a{
  color: var(--bs-primary-600);
}
.cookie-banner a:hover{
  color: var(--bs-secondary-600);
}
#cookie-banner{
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0b1220;
}
#cookie-banner .cookie-banner-copy p{
  color: #1f2937;
}
#cookie-banner .cookie-banner-copy .cookie-banner-title{
  color: #0b1220;
}
#cookie-banner .cookie-settings-row p{
  color: #1f2937;
}
#cookie-banner a{
  color: #075985;
}
#cookie-banner a:hover{
  color: #0c4a6e;
}
#cookie-banner a:focus-visible{
  outline: 2px solid #0b1220;
  outline-offset: 2px;
}
html[data-theme="dark"] #cookie-banner{
  background: #0b1324;
  border-color: #334155;
  color: #e6edf7;
}
html[data-theme="dark"] #cookie-banner .cookie-banner-copy p{
  color: #dbe3f1;
}
html[data-theme="dark"] #cookie-banner .cookie-banner-copy .cookie-banner-title{
  color: #f8fbff;
}
html[data-theme="dark"] #cookie-banner .cookie-settings-row p{
  color: #dbe3f1;
}
html[data-theme="dark"] #cookie-banner a{
  color: #7dd3fc;
}
html[data-theme="dark"] #cookie-banner a:hover{
  color: #bae6fd;
}
html[data-theme="dark"] #cookie-banner a:focus-visible{
  outline-color: #7dd3fc;
}
@media (prefers-color-scheme: dark){
  #cookie-banner{
    background: #0b1324;
    border-color: #334155;
    color: #e6edf7;
  }
  #cookie-banner .cookie-banner-copy p{
    color: #dbe3f1;
  }
  #cookie-banner .cookie-banner-copy .cookie-banner-title{
    color: #f8fbff;
  }
  #cookie-banner .cookie-settings-row p{
    color: #dbe3f1;
  }
  #cookie-banner a{
    color: #7dd3fc;
  }
  #cookie-banner a:hover{
    color: #bae6fd;
  }
  #cookie-banner a:focus-visible{
    outline-color: #7dd3fc;
  }
}
.cookie-banner-actions{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.cookie-settings{
  border-top: 1px solid var(--bs-border-color);
  padding: .85rem 1.2rem 1.1rem;
  display: grid;
  gap: .75rem;
}
.cookie-settings[hidden]{ display:none; }
.cookie-settings-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.cookie-settings-row p{
  margin: .25rem 0 0;
  color: var(--bs-body-color);
}
.cookie-settings-actions{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.cookie-switch{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.cookie-switch input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cookie-switch-ui{
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: var(--bs-surface-2);
  border: 1px solid var(--bs-border-color);
  position: relative;
  transition: background .2s ease, border-color .2s ease;
}
.cookie-switch-ui::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bs-body-bg);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, background .2s ease;
}
.cookie-switch input:checked + .cookie-switch-ui{
  background: color-mix(in oklab, var(--bs-primary) 25%, var(--bs-surface-2));
  border-color: var(--bs-primary);
}
.cookie-switch input:checked + .cookie-switch-ui::after{
  transform: translateX(20px);
  background: var(--bs-primary);
}
@media (max-width:640px){
  .cookie-banner{ inset: auto .75rem .75rem .75rem; }
  .cookie-settings-row{ flex-direction: column; align-items: flex-start; }
}

/* ===================== Offline Banner ===================== */
.offline-banner{
  position: fixed;
  top: 4.75rem;
  right: 1rem;
  z-index: 1100;
  background: color-mix(in oklab, var(--bs-surface) 94%, transparent);
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid #ef4444;
  border-radius: .75rem;
  box-shadow: 0 16px 32px rgba(2, 6, 23, 0.14);
  backdrop-filter: blur(8px);
  color: var(--bs-body-color);
  width: min(92vw, 520px);
}
.offline-banner[hidden]{ display:none; }
.offline-banner-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .5rem .75rem;
}
.offline-banner-icon{
  width: 20px;
  height: 20px;
  color: #ef4444;
  flex: 0 0 auto;
}
.offline-banner-text{
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.offline-banner-title{
  color: var(--bs-heading);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.1;
}
.offline-banner-message{
  color: var(--bs-muted);
  font-size: .85rem;
  line-height: 1.2;
}
.offline-banner .offline-banner-retry{
  padding: .35rem .7rem;
  font-size: .85rem;
  box-shadow: none;
  white-space: nowrap;
}
html[data-theme="dark"] .offline-banner{
  border-left-color: #f87171;
}
html[data-theme="dark"] .offline-banner-icon{
  color: #f87171;
}
@media (prefers-color-scheme: dark){
  .offline-banner{ border-left-color: #f87171; }
  .offline-banner-icon{ color: #f87171; }
}
@media (max-width:640px){
  .offline-banner{
    top: 4.5rem;
    left: .75rem;
    right: .75rem;
    width: auto;
  }
  .offline-banner-inner{
    align-items: flex-start;
  }
  .offline-banner .offline-banner-retry{
    align-self: flex-start;
  }
}

/* ===================== Offline Page ===================== */
/* ===================== XL & XXL tweaks ===================== */
@media (min-width:1200px){
  /* .brand{ font-size:1.25rem; } */
  .home .hero{ padding:3rem 0 2rem; }
  .hero-inner h1{ font-size:2.25rem; }
  .hero-inner p{ font-size:1.05rem; }
}
@media (min-width:1400px){ .hero-inner h1{ font-size:2.5rem; } }

/* Accessibility */
@media (prefers-contrast:more){
  .btn, .card{ border-color:#708090; }
}