/* ==========================================================================
   Badem Kuwait — Design System
   بادم الكويت — نظام التصميم
   ========================================================================== */

/* --------------------------------------------------------------- Fonts --
   El Messiri — variable 400–700, self-hosted, SIL OFL 1.1.
   Licence text: assets/fonts/OFL.txt

   Arabic subset ONLY. The Latin face of El Messiri reads as a literary serif,
   which fights the modern-technical tone, so Latin deliberately falls through
   to the system sans via the unicode-range below.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "El Messiri";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/el-messiri-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

:root {
  /* Palette — deep navy against a soft ivory. Deliberately two-colour:
     navy carries the structure, violet is the ONLY highlight. Do not add a
     third hue unless it earns a fixed, repeatable job across the site. */
  --navy-950: #060915;   /* footer — a step below the base, still navy, never black */
  --navy-900: #090D1D;   /* dark backgrounds */
  --navy-800: #101936;   /* primary navy */
  --navy-700: #1B2750;   /* gradient end */

  --bg: #FAFAF8;         /* ivory — softer than pure white against the navy */
  --surface: #FFFFFF;    /* cards, so they still separate from the ivory */
  --surface-2: #FCFCFA;

  --text: #121526;
  --text-2: #3A3E52;
  --muted: #6E7285;      /* #707487 nudged 2 steps darker to clear 4.5:1 on ivory */
  --line: #E6E5DF;

  /* The single highlight: primary buttons, active states, the logo dot. */
  --accent: #6258E8;
  --accent-deep: #4F45D2;  /* hover / logo gradient only */
  --accent-soft: #EFEEFD;

  /* Blue glow behind the dark sections. Structural lighting, not an accent —
     it must stay quieter than the headline it sits behind. */
  --glow: 31, 102, 133;    /* #1F6685 as RGB channels for rgba() */

  /* Type — El Messiri covers Arabic; everything after it serves Latin, and
     doubles as the Arabic fallback if the webfont fails to load. system-ui
     must come before the Arabic-specific faces so Latin never lands on
     Geeza Pro, whose Latin glyphs are poor. */
  --font: "El Messiri", system-ui, -apple-system, "Segoe UI",
          "Helvetica Neue", "Noto Sans Arabic", Arial, sans-serif;

  /* Tracking — Arabic script must stay at 0: any letter-spacing breaks the
     connection between joined letterforms. Latin gets the tighter setting. */
  --track-tight: 0;
  --track-wide: 0;

  /* Space & shape */
  --radius: 14px;
  --radius-lg: 22px;
  --container: 1140px;
  --shadow-sm: 0 1px 2px rgba(18, 21, 38, .05);
  --shadow: 0 10px 30px -14px rgba(18, 21, 38, .20);
}

:root[lang="en"] {
  --track-tight: -.02em;
  --track-wide: .06em;
}

/* --------------------------------------------------------------- Reset -- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;   /* El Messiri sits smaller than the system stack it replaced */
  line-height: 1.85;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;  /* long tokens (emails, URLs) can't widen the page */
}

h1, h2, h3, h4 { margin: 0; line-height: 1.4; font-weight: 700; letter-spacing: var(--track-tight); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* ------------------------------------------------------------- Layout --- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 22px;
}

.section { padding-block: 84px; }
.section--tight { padding-block: 64px; }
.section--alt { background: var(--surface); border-block: 1px solid var(--line); }

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--navy-900);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { inset-inline-start: 0; }

/* -------------------------------------------------------------- Header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 248, .85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 70px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;          /* lets the name shrink instead of pushing the row wide */
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: var(--track-tight);
  white-space: nowrap;
}
.brand > span:not(.brand-mark) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex: none;
  background:
    linear-gradient(140deg, var(--accent) 0%, var(--accent-deep) 100%);
  position: relative;
  overflow: hidden;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: 4px;
  border-block-end-color: transparent;
  border-inline-end-color: transparent;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

.site-nav a {
  padding: 9px 13px;
  border-radius: 9px;
  font-size: .95rem;
  color: var(--muted);
  transition: color .18s, background-color .18s;
}
.site-nav a:hover { color: var(--text); background: var(--surface-2); }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* A real link to the other language tree, always in the header bar —
   never inside the mobile menu. */
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-inline-start: 10px;
  flex: none;
  min-width: 46px;
  height: 38px;
  padding-inline: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .18s, color .18s, background-color .18s;
}
.lang-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 11px;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; }
.nav-toggle span::before { transform: translateY(-5.5px); }
.nav-toggle span::after  { transform: translateY(5.5px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: grid; position: relative; margin-inline-start: 10px; }
  .lang-btn { margin-inline-start: auto; }  /* pushes both controls to the end */
  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 12px 22px 18px;
    box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 10px; font-size: 1rem; }
}

/* Very narrow screens (folded phones ~280px). Without this the brand name,
   the language pill and the toggle together overflow the header row. */
@media (max-width: 420px) {
  .container { padding-inline: 16px; }
  .header-inner { gap: 10px; }
  .brand { font-size: 1rem; gap: 9px; }
  .lang-btn { min-width: 42px; padding-inline: 9px; }
  .nav-toggle { margin-inline-start: 6px; width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------- Hero -- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: #fff;
  padding-block: 108px 96px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 30%, #000 20%, transparent 78%);
}

.hero::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  top: -270px;
  inset-inline-end: -160px;
  background: radial-gradient(circle, rgba(var(--glow), .26), transparent 62%);
  filter: blur(8px);
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

.hero-inner { max-width: 720px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82);
  margin-bottom: 26px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.1rem);
  line-height: 1.35;
  margin-bottom: 22px;
  letter-spacing: var(--track-tight);
}

.hero-lead {
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  color: rgba(255,255,255,.72);
  max-width: 560px;
  margin-bottom: 38px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }

/* Page header (inner pages) */
.page-head {
  background: var(--navy-900);
  color: #fff;
  padding-block: 76px 68px;
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 80% 90% at 30% 20%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 30% 20%, #000, transparent 75%);
}
.page-head .container { position: relative; z-index: 1; }
.page-head h1 {
  font-size: clamp(1.7rem, 4.2vw, 2.5rem);
  margin-bottom: 16px;
  letter-spacing: var(--track-tight);
}
.page-head p {
  color: rgba(255,255,255,.7);
  max-width: 620px;
  font-size: 1.05rem;
}

/* ------------------------------------------------------------- Buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 11px;
  font-size: .97rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, background-color .18s, border-color .18s, color .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); }

.btn--ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.btn--ghost:hover { background: rgba(255,255,255,.12); }

.btn--outline { border-color: var(--line); background: var(--surface); color: var(--text); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------- Section heads -- */

.section-head { max-width: 640px; margin-bottom: 46px; }
.section-head .kicker {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--accent);
  margin-bottom: 12px;
}
.section-head h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  margin-bottom: 14px;
  letter-spacing: var(--track-tight);
}
.section-head p { color: var(--muted); font-size: 1.04rem; }

/* --------------------------------------------------------------- Cards -- */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  border-color: #D9D7CE;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card h3 { font-size: 1.13rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .97rem; line-height: 1.8; }

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.card-icon svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------- Steps -- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; gap: 20px; } }

.step {
  position: relative;
  padding-top: 26px;
  border-top: 2px solid var(--line);
}
.step--active { border-top-color: var(--accent); }

.step-num {
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: var(--track-wide);
  display: block;
  margin-bottom: 10px;
}
.step h3 { font-size: 1.08rem; margin-bottom: 9px; }
.step p { color: var(--muted); font-size: .96rem; }

/* ----------------------------------------------------------- Value list -- */

.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 860px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .values { grid-template-columns: 1fr; } }

.value {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.value h3 { font-size: 1rem; margin-bottom: 8px; }
.value p { font-size: .92rem; color: var(--muted); line-height: 1.75; }

/* ----------------------------------------------------------- Statement -- */

.statement {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
}
.statement .label {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}
.statement p { font-size: 1.16rem; line-height: 1.8; }

/* ----------------------------------------------------------- CTA band --- */

.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 54px 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.cta::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  inset-inline-end: -120px;
  bottom: -240px;
  background: radial-gradient(circle, rgba(var(--glow), .24), transparent 62%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-bottom: 10px; letter-spacing: var(--track-tight); }
.cta p { color: rgba(255,255,255,.7); max-width: 460px; }

/* ---------------------------------------------------------------- Prose -- */

.prose { max-width: 760px; }
.prose h2 {
  font-size: 1.3rem;
  margin: 42px 0 14px;
  letter-spacing: var(--track-tight);
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-2); margin-bottom: 16px; }
.prose ul { margin: 0 0 18px; }
.prose li {
  position: relative;
  padding-inline-start: 22px;
  margin-bottom: 10px;
  color: var(--text-2);
}
.prose li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 13px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.updated { font-size: .88rem; color: var(--muted); margin-top: 40px; }

/* ----------------------------------------------------------- Contact ---- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 34px;
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
}
@media (max-width: 520px) { .form { padding: 26px 20px; } }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.field .req { color: var(--accent); }

.field input,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  font-size: .97rem;
  line-height: 1.7;
  transition: border-color .18s, background-color .18s;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(98, 88, 232, .15);
}
.field textarea { resize: vertical; min-height: 140px; }

.field-error {
  display: none;
  font-size: .86rem;
  color: #C0392B;
  margin-top: 7px;
}
.field.has-error .field-error { display: block; }
.field.has-error input,
.field.has-error textarea { border-color: #E2A9A2; }

.form-note {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.75;
  margin-top: 18px;
}

.form-honey {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.form-status {
  display: none;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 11px;
  font-size: .93rem;
  background: var(--accent-soft);
  color: #2E3C9E;
}
.form-status.is-visible { display: block; }
.form-status-success,
.form-status-error { display: none; }
.form-status.is-success .form-status-success,
.form-status.is-error .form-status-error { display: inline; }
.form-status.is-error {
  background: #FCEBE8;
  color: #8F2F24;
}

/* Keep the direct address visible as a fallback if the form service is down. */
.form-status-alt {
  display: block;
  margin-top: 8px;
  font-size: .88rem;
  opacity: .85;
}
.form-status-alt a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.info-item { padding-block: 16px; border-bottom: 1px solid var(--line); }
.info-item:first-child { padding-top: 0; }
.info-item:last-child { border-bottom: 0; padding-bottom: 0; }
.info-item .k {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
}
.info-item .v { font-size: 1rem; font-weight: 600; }
.info-item a.v { color: var(--accent); }

/* -------------------------------------------------------------- Footer -- */

.site-footer {
  background: var(--navy-950);
  color: rgba(255,255,255,.62);
  padding-block: 58px 34px;
  margin-top: 0;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 38px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
@media (max-width: 780px) { .footer-top { grid-template-columns: 1fr; gap: 30px; } }

.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand p { font-size: .93rem; line-height: 1.8; max-width: 340px; }

.footer-col h4 {
  color: #fff;
  font-size: .92rem;
  margin-bottom: 15px;
  font-weight: 600;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: .93rem; transition: color .18s; }
.footer-col a:hover { color: #fff; }

.footer-bottom {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: .87rem;
}
.footer-bottom p { line-height: 1.7; }

/* ------------------------------------------------------------ Reveal ---- */

/* Reveal-on-scroll — deliberately INVERTED so it cannot fail closed.

   The hiding lives behind `.js-reveal`, a class JavaScript puts on <html>
   itself, immediately before it wires up the observer that removes the hiding
   again. So the element is only ever hidden by the same code that is proven
   able to show it.

   If site.js is blocked, fails to download, or throws anywhere before that
   line, the class is never added and every section simply renders normally.
   Never write `.reveal { opacity: 0 }` unguarded: that hands the visibility
   of the whole page to a script that might not arrive. */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- 404 page ---- */

.error-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--navy-900);
  color: #fff;
  padding-block: 60px;
  position: relative;
  overflow: hidden;
}
.error-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
}
.error-page .container { position: relative; z-index: 1; max-width: 620px; }

.error-code {
  display: block;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: clamp(4rem, 16vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 22px;
}

.error-page h1 {
  font-size: clamp(1.4rem, 4vw, 1.95rem);
  margin-bottom: 14px;
}
.error-page > .container > p { color: rgba(255,255,255,.72); }
.error-en {
  color: rgba(255,255,255,.45) !important;
  font-size: .95rem;
  margin-top: 10px;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  justify-content: center;
  margin-top: 34px;
}

.error-alt { margin-top: 26px; font-size: .92rem; }
.error-alt a {
  color: rgba(255,255,255,.6);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.error-alt a:hover { color: #fff; }

/* -------------------------------------------------------------- Utils --- */

.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}