/* ============================================================
   SITE-WIDE DARK GLASS OVERLAY
   Drop-in stylesheet that turns any existing light page into a
   dark cosmic / glassmorphism version, without rewriting content.

   Loaded AFTER global.css so all overrides win on specificity ties.
   Used by: all /fr/*.html pages that aren't form/visa detail pages.
   ============================================================ */

:root {
  --site-dark-bg-0: #03050d;
  --site-dark-bg-1: #070b1c;
  --site-dark-text: #f8fafc;
  --site-dark-muted: rgba(255,255,255,.7);
}

html, body {
  background: var(--site-dark-bg-0) !important;
  color: var(--site-dark-text) !important;
}

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  position: relative;
}

/* Cosmic background (fixed so it stays during scroll) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 50% at 15% 12%, rgba(99,102,241,.16), transparent 60%),
    radial-gradient(65% 45% at 85% 30%, rgba(6,182,212,.10), transparent 60%),
    radial-gradient(75% 50% at 50% 90%, rgba(236,72,153,.08), transparent 60%),
    linear-gradient(180deg, #03050d 0%, #070b1c 50%, #03050d 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 10%, rgba(255,255,255,.45), transparent 50%),
    radial-gradient(1px   1px   at 50% 30%, rgba(255,255,255,.35), transparent 50%),
    radial-gradient(1.5px 1.5px at 85% 55%, rgba(255,255,255,.4),  transparent 50%),
    radial-gradient(1px   1px   at 25% 78%, rgba(255,255,255,.3),  transparent 50%);
  background-size: 900px 900px;
  opacity: .55;
}

/* Lift content above the cosmic background, but DO NOT trap #siteHeader
   inside a low-z stacking context — its dropdown menus must escape upward. */
body > *:not(script):not(style):not(noscript):not(#siteHeader):not(#siteFooter) {
  position: relative;
  z-index: 1;
}
body > #siteHeader { position: relative; z-index: 9999; }
body > #siteFooter { position: relative; z-index: 2; }

/* Push content under the fixed header */
main { padding-top: 100px; }

/* ============ Typography ============ */
h1, h2, h3, h4, h5, h6 {
  color: #fff !important;
}
.frameTitle,
.tplHead h1, .tplHead h2,
.heroLeft h1, .heroLeft h2,
.heroCard h1, .heroCard h2,
.ttl, .caseTitle {
  background: linear-gradient(120deg, #ffffff 0%, #c7d2fe 60%, #a5b4fc) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.kicker, .caseKicker,
.heroLeft .kicker, .heroRow .kicker {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(6,182,212,.08)) !important;
  border: 1px solid rgba(165,180,252,.3) !important;
  color: #c7d2fe !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(8px);
}

p, li, .muted, .sub, .note, .caseLead, .tplMeta, .frameText {
  color: rgba(255,255,255,.78) !important;
}
.muted, .sub, .tplMeta { color: rgba(255,255,255,.6) !important; }

a { color: #c7d2fe; }
a:hover { color: #fff; }

strong, b { color: #fff !important; }
small { color: rgba(255,255,255,.6) !important; }

/* ============ Container / Layout ============ */
.container, .container.wide {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.pageShell, .casePage, .section {
  background: transparent !important;
}

/* ============ Cards / panels (generic) ============ */
/* Cards: nuke ALL white backgrounds painted by global.css.
   Prefixed with main.home2 so specificity (0,3,0) beats global.css (0,2,0)
   even without considering !important. */
main.home2 .panel,
main.home2 .panel.tplPanel,
main.home2 .heroCard,
main.home2 .heroLeft,
main.home2 .heroRight,
main.home2 .casePanel,
main.home2 .miniCard,
main.home2 .ghostCard,
main.home2 .faqItem,
main.home2 .proofMini,
main.home2 .caseFormCard,
main.home2 .checkItem,
main.home2 .fieldCard,
main.home2 .stack,
main.home2 .steps,
main.home2 .stepCard,
main.home2 .goalCard,
main.home2 .proCard,
main.home2 .infoPill,
main.home2 .miniInfo,
main.home2 .trustBar,
main.home2 .trustMini,
main.home2 .trustLeft,
main.home2 .trustRight,
main.home2 .heroQuickLabel,
main.home2 .heroCatalogLink,
main.home2 .pathfinderOption,
main.home2 .pathfinderAltLink,
main.home2 .detailBtnGhost,
/* legacy non-prefixed fallbacks just in case */
.panel, .panel.tplPanel, .heroCard, .casePanel,
.miniCard, .ghostCard, .faqItem, .proofMini,
.caseFormCard, .checkItem, .fieldCard,
.stack, .steps, .stepCard, .goalCard, .proCard,
.infoPill, .miniInfo, .trustBar, .trustMini {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 22px !important;
  color: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.5) !important;
}

/* Force every heading + body text inside main to a readable color.
   Specificity main.home2 h2 = (0,2,1) beats .home2 .stepCard h3 = (0,2,1) on order. */
main.home2 h1, main.home2 h2, main.home2 h3, main.home2 h4, main.home2 h5, main.home2 h6 {
  color: #fff !important;
}
main.home2 p, main.home2 li, main.home2 .sub, main.home2 .muted, main.home2 .note {
  color: rgba(255,255,255,.78) !important;
}
main.home2 strong, main.home2 b { color: #fff !important; }
main.home2 a { color: #c7d2fe !important; }
main.home2 a:hover { color: #fff !important; }

/* Inner content of those cards: force text to white,
   global.css paints them in navy/grey which becomes invisible on dark glass. */
.panel *, .heroCard *, .casePanel *, .miniCard *, .ghostCard *, .faqItem *,
.stack *, .steps *, .stepCard *, .trustBar *, .trustMini *,
.proofMini *, .caseFormCard *, .checkItem *, .fieldCard *,
.proofText, .proofTitle, .trustTitle, .trustSub, .trustText,
.trustNum, .trustBig, .trustScore, .trustStars, .trustIcon {
  color: rgba(255,255,255,.85);
}
.panel h1, .panel h2, .panel h3, .panel h4,
.heroCard h1, .heroCard h2, .heroCard h3, .heroCard h4,
.casePanel h1, .casePanel h2, .casePanel h3, .casePanel h4,
.stack h1, .stack h2, .stack h3, .stack h4,
.steps h1, .steps h2, .steps h3, .steps h4,
.stepCard h3, .stepCard h4,
.trustBar h1, .trustBar h2, .trustBar h3, .trustBar h4,
.proofTitle, .trustTitle, .trustBig, .trustNum {
  color: #fff !important;
}
.proofText, .trustText, .trustSub, .stepCard p, .stack p, .steps p {
  color: rgba(255,255,255,.72) !important;
}

/* The little numbered step badges */
.stepNum {
  background: linear-gradient(135deg, #6366f1, #06b6d4) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 24px -8px rgba(99,102,241,.6);
}

/* heroCard hero block at top of guide pages → spectacular animated halo + sheen */
.heroCard, .panel.tplPanel {
  position: relative;
  overflow: hidden;
}
.heroCard::before, .panel.tplPanel::before {
  content: "";
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 90%; height: 380px;
  background: radial-gradient(closest-side, rgba(99,102,241,.55), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  animation: heroHaloDrift 12s ease-in-out infinite alternate;
}
@keyframes heroHaloDrift {
  0%   { transform: translateX(-58%) scale(.95); opacity: .85; }
  50%  { transform: translateX(-50%) scale(1.08); opacity: 1;   }
  100% { transform: translateX(-42%) scale(.95); opacity: .85; }
}
.heroCard::after, .panel.tplPanel::after {
  /* Diagonal sheen sweeping across the panel */
  content: "";
  position: absolute;
  top: 0; left: -50%;
  width: 200%; height: 100%;
  background: linear-gradient(115deg, transparent 40%, rgba(165,180,252,.14) 50%, transparent 60%);
  pointer-events: none;
  animation: heroSheen 8s ease-in-out infinite;
  z-index: 0;
}
@keyframes heroSheen {
  0%, 100% { transform: translateX(-30%); opacity: 0; }
  50%      { transform: translateX(30%);  opacity: 1; }
}
.heroCard > *, .panel.tplPanel > * { position: relative; z-index: 1; }

/* The big titles inside the hero panel get the animated multi-color gradient */
.heroCard h1, .heroCard h2,
.panel.tplPanel h1, .panel.tplPanel h2,
.tplHead h1, .tplHead h2 {
  background: linear-gradient(120deg, #a5b4fc 0%, #67e8f9 35%, #f9a8d4 70%, #fcd34d 100%) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: heroTitleGrad 7s linear infinite;
  filter: drop-shadow(0 0 24px rgba(165,180,252,.35));
}
@keyframes heroTitleGrad { to { background-position: 220% 50%; } }

/* Sub headline / kicker right under the title — subtle entrance */
.heroCard .sub, .heroCard p,
.panel.tplPanel .sub, .panel.tplPanel p,
.tplHead .sub, .tplHead p {
  animation: heroSubFade 1.2s ease-out both;
  animation-delay: .2s;
}
@keyframes heroSubFade {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* When the user prefers reduced motion, kill the animations */
@media (prefers-reduced-motion: reduce) {
  .heroCard::before, .heroCard::after,
  .panel.tplPanel::before, .panel.tplPanel::after,
  .heroCard h1, .heroCard h2,
  .panel.tplPanel h1, .panel.tplPanel h2 { animation: none !important; }
}

.miniCard, .checkItem, .fieldCard, .proofMini {
  border-radius: 16px !important;
}

.proofIcon,
.checkCardIcon,
.fieldCardIcon,
.caseBadgeIcon {
  background: linear-gradient(135deg, rgba(99,102,241,.4), rgba(6,182,212,.25)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* Accent colors on .proofMini variants */
.proofMini.accent-blue   { border-left: 3px solid #6366f1 !important; }
.proofMini.accent-cyan   { border-left: 3px solid #06b6d4 !important; }
.proofMini.accent-amber  { border-left: 3px solid #f59e0b !important; }
.proofMini.accent-rose   { border-left: 3px solid #ec4899 !important; }
.proofMini.accent-green  { border-left: 3px solid #34d399 !important; }

/* ============ FAQ ============ */
.faqItem details { background: transparent !important; }
.faqItem summary {
  color: #fff !important;
  cursor: pointer;
  padding: 14px 18px !important;
  font-weight: 700;
}
.faqItem summary::-webkit-details-marker { color: #a5b4fc; }
.faqItem details[open] summary { border-bottom: 1px solid rgba(255,255,255,.1); }
.faqItem p, .faqItem div { padding: 0 18px 14px !important; color: rgba(255,255,255,.75) !important; }

/* ============ Forms / inputs ============ */
input, textarea, select {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.45) !important; }
input:focus, textarea:focus, select:focus {
  border-color: rgba(165,180,252,.6) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important;
}
label, .field b, .fieldCard b {
  color: rgba(255,255,255,.85) !important;
}

/* ============ Buttons / CTAs ============ */
.bigCta, .ctaCardButton, .ctaMain,
button[type="submit"], button.cta,
a.cta, a.bigCta {
  background: linear-gradient(135deg, #6366f1, #06b6d4) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  padding: 14px 24px !important;
  text-decoration: none !important;
  box-shadow: 0 14px 30px -10px rgba(99,102,241,.6) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bigCta:hover, .ctaCardButton:hover, .ctaMain:hover,
button[type="submit"]:hover, button.cta:hover,
a.cta:hover, a.bigCta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -10px rgba(99,102,241,.9) !important;
}

.ghost, .ghostCard, a.ghost, button.ghost {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #c7d2fe !important;
  border-radius: 12px !important;
}
.ghost:hover, a.ghost:hover, button.ghost:hover {
  background: rgba(99,102,241,.18) !important;
  border-color: rgba(165,180,252,.4) !important;
  color: #fff !important;
}

/* ============ Tables ============ */
table { color: #fff !important; background: transparent !important; }
th { color: rgba(255,255,255,.85) !important; border-bottom: 1px solid rgba(255,255,255,.18) !important; }
td { color: rgba(255,255,255,.78) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }

/* ============ Code / pre ============ */
code {
  background: rgba(99,102,241,.18);
  border: 1px solid rgba(165,180,252,.3);
  color: #c7d2fe;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
}
pre {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #e8e8f0 !important;
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
}

/* ============ Dividers ============ */
hr { border: 0 !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(165,180,252,.3), transparent) !important; margin: 32px auto !important; max-width: 600px; }

/* ============ Banner / hero / quote ============ */
.ctaBand, .hero, .caseHero {
  background: transparent !important;
}
.tplHead {
  padding: 18px 0 8px !important;
}
.tplBody {
  background: transparent !important;
}

/* ============ Notes / disclaimers ============ */
.comingNote, .note {
  background: rgba(245,158,11,.10) !important;
  border: 1px solid rgba(245,158,11,.28) !important;
  color: rgba(255,255,255,.85) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
}

/* ============================================================
   HEADER — DARK GLASS (mirrors index5 / uscis-dark.css)
   ============================================================ */
/* Header itself must dominate every stacking context on the page,
   even those created by backdrop-filter / transform on .casePanel etc. */
header { z-index: 100000 !important; }
header .h1 {
  background: linear-gradient(180deg, rgba(8,11,30,.85), rgba(8,11,30,.65)) !important;
  border-bottom: 1px solid rgba(165,180,252,.16) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(165,180,252,.08) !important;
  position: relative;
  z-index: 100000 !important;
}
header .brand img {
  filter: drop-shadow(0 0 14px rgba(165,180,252,.45));
  transform: scale(1.55);
  transform-origin: left center;
}
header .h1row { gap: 28px !important; }
header .brand { padding-left: 4px; }
header .h1, header .h1row, header .brand { overflow: visible !important; }
header .navLink, header .btn, header .btnGhost {
  color: rgba(255,255,255,.85) !important; font-weight: 600 !important;
}
header .navLink:hover, header .navItem.open > .navLink {
  background: rgba(99,102,241,.2) !important; color: #fff !important;
}
header .caret { color: rgba(255,255,255,.65) !important; }
header .btn, header .btnGhost {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
header .btn:hover, header .btnGhost:hover {
  background: rgba(99,102,241,.22) !important;
  border-color: rgba(165,180,252,.4) !important;
  color: #fff !important;
}
header .btnCta {
  background: linear-gradient(135deg, #6366f1, #06b6d4) !important;
  color: #fff !important; border: 0 !important;
  box-shadow: 0 14px 30px -10px rgba(99,102,241,.7) !important;
}
header .menu, header .langList {
  background: rgba(13,18,38,.96) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(22px) !important;
  box-shadow: 0 30px 80px -10px rgba(0,0,0,.8) !important;
  color: #fff !important;
  z-index: 100001 !important;
}
header .menuHead b { color: #fff !important; }
header .menuHead span { color: rgba(255,255,255,.55) !important; }
header .menu .menuA, header .menuMegaCenter .menuA, header .menuWide .menuA,
header .menuCard, header .langList a {
  background: rgba(255,255,255,.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,.85) !important;
}
header .menu .menuA:hover, header .menuMegaCenter .menuA:hover, header .menuWide .menuA:hover,
header .menuCard:hover, header .langList a:hover {
  background: rgba(99,102,241,.22) !important;
  border-color: rgba(165,180,252,.45) !important;
  color: #fff !important;
}
header .menuA span:first-child, header .menuCard .code,
header .menuMegaCenter .menuA span:first-child { color: #fff !important; font-weight: 700 !important; }
header .menuA span:last-child, header .menuMegaCenter .menuA span:last-child {
  color: rgba(255,255,255,.55) !important;
}
header .burgerBtn {
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* ============================================================
   FOOTER — DARK GLASS
   ============================================================ */
#siteFooter, .footer2Wrap {
  background: linear-gradient(180deg, #04060f 0%, #02030a 100%) !important;
  color: rgba(255,255,255,.7) !important;
  border-top: 1px solid rgba(165,180,252,.1);
  position: relative;
  overflow: hidden;
}
.footer2Wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80%; max-width: 800px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(165,180,252,.45), transparent);
}
.footer2Wrap .footerPanel { color: rgba(255,255,255,.78) !important; background: transparent !important; }
.footer2Wrap h2 {
  color: #fff !important;
  background: linear-gradient(120deg, #ffffff, #c7d2fe 60%, #a5b4fc) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.footer2Wrap p, .footer2Wrap li { color: rgba(255,255,255,.7) !important; }
.footer2Wrap .footerGrid h3 {
  color: #fff !important;
  font-size: 14px !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: 1.5px !important;
  background: linear-gradient(120deg, #c7d2fe, #67e8f9) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.footer2Wrap .footerGrid a { color: rgba(255,255,255,.72) !important; }
.footer2Wrap .footerGrid a:hover { color: #fff !important; }
.footer2Wrap a { color: #c7d2fe !important; }
.footer2Wrap a:hover { color: #fff !important; }