.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;}
.nav-link{color:var(--color-text,#1a1333);}
.footer-nav-link{color:var(--color-text-pr,#1a1333);}
.btn-special-offers{background:#574c99;color:#fff;}
.btn-special-offers:hover{background:#483f88;}
.language-center-link{color:#0d47a1;font-weight:600;}
.carousel-arrow svg path{stroke:#222;}

    .reg-hero {padding:4rem 1rem; text-align:center; position:relative; overflow:hidden;}
    .reg-hero h1 {font-size:2.4rem; margin:0 0 1rem; font-weight:700;}
    .reg-choices {display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem;}
    .reg-btn {background:#574c99; color:#fff; border:none; padding:1rem 1.8rem; font-size:1rem; border-radius:40px; cursor:pointer; font-weight:600; display:inline-flex; align-items:center; gap:.6rem; box-shadow:0 4px 14px rgba(0,0,0,.12); transition:.25s ease; text-decoration:none;}
    .reg-btn.alt {background:#3eb696;}
    .reg-btn:hover {transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.18);}
    /* Course cards reused */
    .courses-section {padding:4rem 1rem;}
    .lang-courses {margin-top:3rem;}
  .lang-cards {display:grid; gap:2rem; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}
  .lang-card {background:var(--color-surface,#fff); border:1px solid #dde1e7; border-radius:22px; padding:1.75rem 1.75rem 2rem; box-shadow:0 6px 26px rgba(0,0,0,.08); position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:320px;}
  .lang-card h3 {margin:0 0 .75rem; font-size:1.35rem; font-weight:650; line-height:1.25;}
  .lang-card p {margin:0 0 1rem; font-size:.95rem; line-height:1.55; color:#444;}
  .badge {display:inline-block; background:#574c99; color:#fff; font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; padding:.35rem .65rem; border-radius:8px; margin-right:.4rem; margin-bottom:.4rem; box-shadow:0 2px 6px rgba(0,0,0,.08);}    
  .enroll-mini {margin-top:auto; background:#3eb696; border:none; color:#fff; padding:.75rem 1.15rem; border-radius:14px; font-size:.8rem; font-weight:650; cursor:pointer; align-self:flex-start; box-shadow:0 4px 14px rgba(0,0,0,.12);}    
    .enroll-mini:hover {background:#34a385;}
  /* Dark theme overrides */
  .dark-mode body { background:#0f1115; color:#e5e7eb; }
  .dark-mode .reg-hero { background:linear-gradient(145deg,#1e2030,#111827); color:#f3f4f6; }
  .dark-mode .reg-btn { background:#4338ca; }
  .dark-mode .reg-btn.alt { background:#059669; }
  .dark-mode .course-card, .dark-mode .lang-card { background:#1f2937; border-color:#374151; box-shadow:0 6px 26px rgba(0,0,0,.6); }
  .dark-mode .lang-card p, .dark-mode .course-card p { color:#d1d5db; }
  .dark-mode .badge { background:#4338ca; }
  .dark-mode .course-enroll-btn, .dark-mode .enroll-mini { background:#059669; }
  .dark-mode .course-enroll-btn:hover, .dark-mode .enroll-mini:hover { background:#047857; }
  .dark-mode-toggle {position:absolute; top:1rem; right:1rem; background:rgba(0,0,0,.55); color:#fff; border:none; padding:.6rem .95rem; border-radius:40px; cursor:pointer; font-size:.85rem; display:inline-flex; gap:.5rem; align-items:center; backdrop-filter:blur(6px);} 
  .dark-mode .dark-mode-toggle { background:rgba(255,255,255,.15); }
  .dark-mode-toggle:focus-visible { outline:2px solid #fff; outline-offset:3px; }
  /* Compact variant for registration landing */
  .reg-hero-compact { padding:2.25rem 1rem 2.5rem; }
  @media (min-width:640px){ .reg-hero-compact { padding-top:2.75rem; padding-bottom:3rem; } }
  .header.header-static { margin-bottom:0; }
  /* Ultra compact header variant on landing/registration pages */
  body.register-landing .header,
  body.register-form .header { height:68px; padding:0 48px; }
  @media (max-width:860px){ body.register-landing .header, body.register-form .header { padding:0 24px; height:64px; } }
  body.register-landing .reg-hero-compact { padding-top:1.75rem; }

/* Header dark mode (JS toggles .dark-mode on <html>) */
.dark-mode .header { background:#111827 !important; border-bottom:1px solid #1f2937; }
.dark-mode .header .nav-link { color:#e5e7eb; }
.dark-mode .header .nav-link:hover { color:#fff; }
.dark-mode .header .logo-dark-fallback img, .dark-mode .logo img { filter:brightness(1.15) contrast(1.05); }
.dark-mode .dark-mode-toggle { background:rgba(255,255,255,.12); color:#f3f4f6; }
.dark-mode .dark-mode-toggle:hover { background:rgba(255,255,255,.18); }