/* =====================================================================
   Qeed landing page — implemented from Figma "game-area"
   Desktop 2028:5488 · Tablet 2067:6512 · Phone 2068:6777
   Components: navbar 2067:8135 · side menu 2068:7707 · buttons 2031:5656
               nav tap 2029:5570 · FAQ card 2066:8007
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Almarai";
  src: url("../fonts/Almarai-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Almarai";
  src: url("../fonts/Almarai-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Almarai";
  src: url("../fonts/Almarai-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Almarai";
  src: url("../fonts/Almarai-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
/* Heading font from the design (The Year of The Camel). Drop the licensed files into
   landing/fonts/ to activate; Almarai ExtraBold is the fallback until then. */
@font-face {
  font-family: "The Year of The Camel";
  src:
    url("../fonts/TheYearofTheCamel-ExtraBold.woff2") format("woff2"),
    url("../fonts/TheYearofTheCamel-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg-1: #0e0f11;
  --bg-2: #131514;
  --bg-3: #262b33;
  --bg-4: #39404d;
  --bg-5: #4d5666;
  --bg-secondary-btn: #2f3231;
  --primary-50: #fdf5e9;
  --primary-400: #f2c076;
  --primary-500: #efb054;
  --primary-700: #dc9f46;
  --grey-200: #b8c2cc;
  --white: #ffffff;
  --black: #000000;
  --font-heading: "The Year of The Camel", "Almarai", sans-serif;
  --font-body: "Almarai", sans-serif;
  --primary-grad: linear-gradient(180deg, #efb054 0%, #ffaf36 100%);
  --primary-glow: 4px 4px 20.4px 7px rgba(239, 176, 84, 0.25);
  --primary-ink: #121212;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-2);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  display: block;
}
button {
  font-family: inherit;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
}
.btn--primary {
  background: var(--primary-grad);
  box-shadow: var(--primary-glow);
  color: var(--primary-ink);
}
.btn--tertiary {
  color: var(--primary-500);
}
.btn--soft {
  background: linear-gradient(
    180deg,
    rgba(239, 176, 84, 0.2) 0%,
    rgba(255, 175, 54, 0.2) 100%
  );
  color: var(--primary-700);
}

/* ---------- Section headings ---------- */
.section-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.22;
  color: var(--primary-700);
  text-align: center;
}
.section-sub {
  font-weight: 300;
  font-size: 18px;
  line-height: 23px;
  color: var(--white);
  text-align: center;
}

/* =====================================================================
   Navbar
   ===================================================================== */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 75px;
  padding: 16px 24px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--bg-3);
}
.navbar__logo {
  display: flex;
  align-items: center;
  gap: 7.24px;
}
.navbar__logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.12px;
  border-radius: 10.68px;
  background: var(--primary-700);
}
.navbar__logo-box img {
  width: 29.28px;
  height: 29.34px;
}
.navbar__logo-name {
  width: 72.61px;
  height: 24.91px;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-tap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 12px 8px;
  font-size: 16px;
  color: var(--bg-5);
  text-align: center;
  white-space: nowrap;
}
.nav-tap.active,
.nav-tap:hover {
  color: var(--primary-700);
  font-weight: 700;
}
.nav-tap.active {
  height: auto;
  border-bottom: 4px solid var(--primary-700);
}
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.navbar__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: var(--bg-3);
  cursor: pointer;
}
.navbar__menu-btn img {
  width: 24px;
  height: 24px;
}
.navbar__download-sm {
  display: none;
}

/* =====================================================================
   Side menu (tablet / mobile)
   ===================================================================== */
.side-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg-1);
}
.side-menu[hidden] {
  display: none;
}
.side-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 75px;
  padding: 16px;
  border-bottom: 1px solid var(--bg-3);
}
.navbar__logo--sm .navbar__logo-name {
  width: 49.44px;
  height: 16.96px;
}
.navbar__logo--sm .navbar__logo-box {
  padding: 4.85px;
  border-radius: 7.27px;
}
.navbar__logo--sm .navbar__logo-box img {
  width: 19.94px;
  height: 19.98px;
}
.side-menu__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
}
.side-menu__tap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 24px 8px;
  font-size: 16px;
  color: var(--bg-5);
  text-align: center;
}
.side-menu__tap.active {
  color: var(--primary-700);
  font-weight: 700;
  border-bottom: 4px solid var(--primary-700);
}
.side-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}
.side-menu__actions .btn {
  width: 100%;
  padding: 16px 12px;
}
body.menu-open {
  overflow: hidden;
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 96px;
  padding: 128px 8px 48px;
  background: linear-gradient(
    180deg,
    rgba(220, 159, 70, 0.3) 0%,
    rgba(19, 21, 20, 0) 100%
  );
}
.hero__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 60px;
  line-height: 1.22;
  color: var(--primary-700);
}
.hero__sub {
  font-size: 20px;
  line-height: normal;
  color: var(--primary-50);
}
.download-btns {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
}

.hero__shot {
  border-radius: 24px;
  box-shadow:
    0px -3px 11.4px 2px rgba(255, 255, 255, 0.5),
    0px -11px 21.1px 21px rgba(220, 159, 70, 0.3);
}
/* One <picture>: its <source media> rules pick the phone / tablet / desktop
   shot at 600px and 1023px, these rules only size the rendered <img> to match. */
.hero__shot-img {
  width: 950px;
  max-width: calc(100vw - 32px);
  height: auto;
  aspect-ratio: 950 / 618;
  border-radius: 24px;
  object-fit: cover;
}

/* =====================================================================
   Features
   ===================================================================== */
.features {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 48px 96px;
}
.features__phone img {
  width: 299.87px;
  height: 604px;
  object-fit: contain;
}
.features__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 520px;
  max-width: 100%;
}
.features__txt {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.features__title {
  font-size: 36px;
  text-align: right;
}
.features__sub {
  font-size: 16px;
  line-height: 23px;
  color: var(--primary-50);
  text-align: right;
}
.features__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 24px 48px;
  background: var(--bg-3);
  border: 0.5px solid var(--grey-200);
  border-radius: 16px;
}
.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 12px;
  border-radius: 99px;
  background: rgba(220, 159, 70, 0.1);
  border: 0.5px solid var(--primary-500);
}
.feature-card__icon img {
  width: 24px;
  height: 24px;
}
.feature-card__txt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.feature-card__txt h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-50);
  text-align: right;
}
.feature-card__txt p {
  font-size: 14px;
  line-height: 21px;
  color: var(--grey-200);
  text-align: right;
}

/* =====================================================================
   Screens (واجهات ملكية)
   ===================================================================== */
.screens {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 48px 96px 24px;
}
.screens__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* The card-back fan of the in-app landing (LandingScreens.tsx): stage 832/460,
   cards 30% wide in one uniform 688/900 box (cover-cropped), corner radius
   7.5% of the card width (5.733% of its height), centers and angles below. */
.screens__stage {
  position: relative;
  width: min(832px, 100%);
  aspect-ratio: 832 / 460;
}
.screens__card {
  position: absolute;
  width: 30%;
  aspect-ratio: 688 / 900;
  background: var(--bg-4);
  border-radius: 7.5% / 5.733%;
  overflow: hidden;
  box-shadow: 14.25px 8.55px 71.23px rgba(9, 20, 50, 0.1);
}
.screens__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.screens__card--1 {
  left: 23%;
  top: 56%;
  transform: translate(-50%, -50%) rotate(-18deg);
}
.screens__card--2 {
  left: 41%;
  top: 49%;
  transform: translate(-50%, -50%) rotate(-6deg);
}
.screens__card--3 {
  left: 59%;
  top: 49%;
  transform: translate(-50%, -50%) rotate(6deg);
}
.screens__card--4 {
  left: 77%;
  top: 56%;
  transform: translate(-50%, -50%) rotate(18deg);
}

/* =====================================================================
   Plans (الاشتراكات)
   ===================================================================== */
.plans {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 48px 96px;
}
.plans__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.plans__sub {
  max-width: 788px;
}
.plans__list {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 1088px;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1;
  padding: 48px 24px 32px;
  background: var(--bg-3);
  border-radius: 24px;
}
.plan-card--featured {
  border: 4px solid var(--primary-500);
}
.plan-card__badge {
  position: absolute;
  top: -15px;
  inset-inline-start: 24px;
  padding: 8px 16px;
  border-radius: 16px;
  background: var(--primary-500);
  color: var(--black);
  font-size: 14px;
  line-height: normal;
}
.plan-card__title {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: right;
}
.plan-card__title h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-500);
}
.plan-card__title span {
  font-size: 14px;
  color: var(--white);
  opacity: 0.5;
}
.plan-card__divider {
  width: 100%;
  margin: 0;
  border: none;
  border-top: 2px solid var(--bg-4);
}
.plan-card__price {
  display: flex;
  align-items: center;
  gap: 4px;
}
.plan-card__price strong {
  font-size: 30px;
  font-weight: 700;
  color: var(--primary-50);
  line-height: normal;
}
.plan-card__price img {
  width: 28px;
  height: 28px;
}
.plan-card__btn {
  width: 100%;
  padding: 16px 8px;
  line-height: 24px;
  letter-spacing: 0.15px;
}

/* =====================================================================
   CTA (جلسة البلوت القادمة)
   ===================================================================== */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 192px 96px;
  background: rgba(220, 159, 70, 0.1);
}
.cta__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cta__sub {
  max-width: 788px;
}

/* =====================================================================
   FAQ (الاسئلة الشائعة)
   ===================================================================== */
.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 48px 96px;
}
.faq__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.faq-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 768px;
  max-width: 100%;
  padding: 32px;
  background: var(--bg-3);
  border: none;
  border-top: 0.5px solid var(--white);
  border-left: 0.5px solid var(--white);
  border-radius: 16px;
  color: var(--white);
  cursor: pointer;
  text-align: right;
}
.faq-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.faq-card__q {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  text-align: right;
}
.faq-card__arrow {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}
.faq-card.open .faq-card__arrow {
  transform: rotate(180deg);
}
.faq-card__a {
  display: none;
  font-size: 16px;
  line-height: 21px;
  opacity: 0.5;
  text-align: right;
}
.faq-card.open .faq-card__a {
  display: block;
}

/* =====================================================================
   Footer
   ===================================================================== */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 64px 96px;
  background: rgba(220, 159, 70, 0.1);
}
/* Logo + about wrapper: a column only on phone (≤600px block); wider layouts
   keep both as flex items of .footer. */
.footer__intro {
  display: contents;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.24px;
}
.footer__logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16.69px;
  border-radius: 25.03px;
  background: var(--primary-700);
}
.footer__logo-box img {
  width: 68.63px;
  height: 68.77px;
}
.footer__logo-name {
  width: 72.61px;
  height: 24.91px;
}
.footer__about {
  font-weight: 300;
  font-size: 18px;
  line-height: 23px;
  color: var(--white);
  text-align: center;
  max-width: 788px;
}
.footer__links {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.footer__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  font-size: 16px;
  color: var(--primary-700);
  border-bottom: 1px solid var(--primary-700);
  white-space: nowrap;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-style: normal;
  font-size: 14px;
  line-height: 21px;
  color: var(--grey-200);
  text-align: center;
}
.footer__contact-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer__contact strong {
  color: var(--primary-50);
}
a.footer__contact-row {
  color: var(--primary-700);
  direction: ltr;
}
.footer__copy {
  opacity: 0.6;
}

/* =====================================================================
   Tablet  (Figma frame: 744px)
   ===================================================================== */

/* --primary-500 is the app's PRIMARY_600 gold (#efb054). The undeclared
   --primary-600 made the outline invalid, so no focus ring was ever drawn
   (audit C-static-sites-003). */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--primary-500);
  outline-offset: 3px;
}

@media (max-width: 1023px) {
  /* navbar → hamburger variant: [hamburger | logo | download] in RTL */
  .navbar__links,
  .navbar__actions {
    display: none;
  }
  .navbar__menu-btn {
    display: flex;
  }
  .navbar > .navbar__menu-btn {
    order: -1;
  }
  .navbar__download-sm {
    display: inline-flex;
    order: 1;
  }

  .hero {
    padding: 128px 16px 48px;
  }
  .hero__title {
    font-size: 48px;
  }
  .hero__sub {
    font-size: 20px;
    line-height: 31px;
    max-width: 539px;
  }
  .hero__shot-img {
    width: 430px;
    aspect-ratio: 430 / 654.8;
  }

  .features {
    flex-direction: column;
    gap: 32px;
    padding: 48px;
  }
  .features__phone {
    display: none;
  }
  .features__col {
    width: 100%;
  }
  .features__title {
    font-size: 36px;
    text-align: center;
  }
  .features__sub {
    text-align: center;
  }
  .features__list {
    flex-direction: row;
  }
  .feature-card {
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 16px;
  }
  .feature-card__txt h3 {
    text-align: center;
  }
  .feature-card__txt p {
    text-align: center;
  }

  .screens {
    padding: 48px;
  }
  .section-title {
    font-size: 36px;
  }
  .section-sub {
    font-size: 16px;
  }
  .plans {
    padding: 48px;
  }
  .plan-card__title h3 {
    font-size: 18px;
  }
  .plan-card__price strong {
    font-size: 24px;
  }
  .plan-card__price img {
    width: 20px;
    height: 20px;
  }

  .cta {
    padding: 192px 48px;
  }

  .faq {
    padding: 48px;
  }

  .footer {
    padding: 64px 48px;
  }
}

/* =====================================================================
   Phone  (Figma frame: 375px)
   ===================================================================== */
@media (max-width: 600px) {
  .navbar {
    padding: 16px;
  }
  .navbar__logo-name {
    width: 49.44px;
    height: 16.96px;
  }
  .navbar__logo-box {
    padding: 4.85px;
    border-radius: 7.27px;
  }
  .navbar__logo-box img {
    width: 19.94px;
    height: 19.98px;
  }

  .hero {
    padding: 48px 8px;
    gap: 48px;
  }
  .hero__title {
    font-size: 24px;
  }
  .hero__sub {
    font-size: 14px;
    line-height: 21px;
  }
  .download-btns {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .hero__shot-img {
    width: 255px;
    aspect-ratio: 255.2 / 552.6;
  }

  .features {
    padding: 32px 16px;
  }
  .features__title {
    font-size: 24px;
  }
  .features__sub {
    font-size: 14px;
    line-height: 21px;
  }
  .features__list {
    flex-direction: column;
  }

  .screens {
    padding: 32px 16px;
  }
  .section-title {
    font-size: 24px;
  }
  .section-sub {
    font-size: 14px;
    line-height: 21px;
  }
  .plans {
    padding: 48px 16px;
    gap: 48px;
  }
  .plans__list {
    flex-direction: column;
    gap: 24px;
  }
  .plan-card__badge {
    top: -11px;
  }

  .cta {
    padding: 96px 16px;
    gap: 48px;
  }
  .cta__sub {
    font-size: 16px;
    line-height: 23px;
  }

  .faq {
    padding: 48px 16px;
  }
  /* FAQ card + footer column: Figma 4022:14888 (LP-17 / LP-19) */
  .faq-card {
    padding: 24px 16px;
    gap: 32px;
  }
  .faq-card__header {
    gap: 24px;
  }
  .faq-card__q {
    font-size: 16px;
  }
  .faq-card__a {
    font-size: 14px;
  }

  .footer {
    padding: 32px 16px;
  }
  .footer__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .footer__logo-box {
    padding: 13.58px;
    border-radius: 20px;
  }
  .footer__logo-box img {
    width: 55.85px;
    height: 55.96px;
  }
  .footer__logo-name {
    width: 59.08px;
    height: 20.27px;
  }
  .footer__about {
    font-size: 14px;
    line-height: 21px;
  }
  .footer__links {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
}

/* =====================================================================
   Sticky mobile CTA (phone only) — js/landing.js toggles [hidden] once the
   hero button leaves the viewport; body gets .has-sticky-cta so the footer
   is never covered.
   ===================================================================== */
.sticky-cta {
  display: none;
}
@media (max-width: 600px) {
  .sticky-cta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 900;
    display: block;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(14, 15, 17, 0.92);
    border-top: 1px solid var(--bg-3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .sticky-cta[hidden] {
    display: none;
  }
  .sticky-cta__btn {
    width: 100%;
    padding: 16px 12px;
  }
  body.has-sticky-cta {
    padding-bottom: 80px;
  }
}

/* =====================================================================
   Cookie banner (analytics consent) — sits above the sticky CTA on phones
   ===================================================================== */
.cookie-banner {
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 720px;
  margin-inline-start: auto;
  padding: 16px 20px;
  background: var(--bg-3);
  border: 0.5px solid var(--grey-200);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner__txt {
  font-size: 14px;
  line-height: 21px;
  color: var(--grey-200);
  text-align: right;
}
.cookie-banner__txt a {
  color: var(--primary-700);
  border-bottom: 1px solid var(--primary-700);
}
.cookie-banner__actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}
.cookie-banner .btn {
  padding: 10px 16px;
  font-size: 14px;
  border: none;
}
.cookie-banner .btn--tertiary {
  background: transparent;
}
@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    inset-inline: 8px;
    bottom: 8px;
  }
  body.has-sticky-cta .cookie-banner {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
  .cookie-banner__actions .btn {
    flex: 1;
  }
}

/* =====================================================================
   404 page (404.html)
   ===================================================================== */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-height: calc(100vh - 75px);
  padding: 96px 16px;
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(220, 159, 70, 0.3) 0%,
    rgba(19, 21, 20, 0) 100%
  );
}
.not-found__code {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 120px;
  line-height: 1;
  color: var(--primary-700);
}
.not-found__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 36px;
  line-height: 1.22;
  color: var(--primary-50);
}
.not-found__sub {
  max-width: 520px;
  font-size: 16px;
  line-height: 23px;
  color: var(--grey-200);
}
.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
@media (max-width: 600px) {
  .not-found__code {
    font-size: 80px;
  }
  .not-found__title {
    font-size: 24px;
  }
  .not-found__actions {
    flex-direction: column;
    width: 100%;
  }
  .not-found__actions .btn {
    width: 100%;
    padding: 16px 12px;
  }
}