/* ==========================================================================
   Safe Driver Extra — landing page
   Implements ui_kits/marketing-site from the Safe Driver Extra Design System.
   All colours, type, spacing, radii and shadows come from tokens/ — no new
   design values are introduced here.
   ========================================================================== */

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

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

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  line-height:var(--lh-normal);
  color:var(--fg-primary);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

h1,h2,h3,p{margin:0}

a{color:inherit}

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

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

/* Visible only to screen readers */
.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;
}

.skip-link{
  position:absolute;left:var(--space-4);top:var(--space-4);z-index:100;
  transform:translateY(-200%);
  background:var(--brand);color:var(--fg-on-brand);
  font-weight:var(--weight-semibold);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-md);
}
.skip-link:focus{transform:translateY(0)}

/* --------------------------------------------------------------------------
   Layout — max content width 1200px with 24px gutters
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Section rhythm: generous 64–96px marketing padding, tightened on mobile */
.section{padding-block:var(--space-16)}
@media (min-width:900px){
  .section{padding-block:72px}
}

.section__head{text-align:center;margin-bottom:var(--space-10)}
@media (min-width:900px){
  .section__head{margin-bottom:var(--space-12)}
}

/* Small uppercase eyebrow/kicker — badge, not a shout */
.eyebrow{
  font-family:var(--font-body);
  font-size:var(--text-caption);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--gray-500);
  margin-bottom:var(--space-2);
}
.eyebrow--on-dark{color:var(--brand);margin-bottom:var(--space-3)}

.section__title{
  font-family:var(--font-display);
  font-weight:var(--weight-extrabold);
  font-size:var(--text-display-md);
  line-height:var(--lh-snug);
  letter-spacing:var(--tracking-tight);
  color:var(--ink-900);
}
@media (min-width:900px){
  .section__title{font-size:32px}
}

/* --------------------------------------------------------------------------
   Button — components/core/Button.jsx
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  font-family:var(--font-body);
  font-weight:var(--weight-semibold);
  border-radius:var(--radius-md);
  cursor:pointer;
  text-decoration:none;
  border:none;
  transition:
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.btn--sm{padding:8px 14px;font-size:var(--text-body-sm)}
.btn--md{padding:12px 20px;font-size:var(--text-body-md)}
.btn--lg{padding:15px 28px;font-size:var(--text-body-lg)}

.btn--primary{
  background:var(--brand);
  color:var(--fg-on-brand);
  box-shadow:var(--shadow-brand);
}
.btn--primary:hover{background:var(--brand-strong)}

.btn--secondary{
  background:var(--ink-900);
  color:var(--white);
  box-shadow:var(--shadow-sm);
}

.btn--outline{
  background:transparent;
  color:var(--ink-900);
  border:1.5px solid var(--border-strong);
  box-shadow:none;
}
.btn--outline:hover{background:var(--gray-50)}

/* Outline on the dark hero — white rule + white label, per Hero.jsx */
.btn--outline-on-dark{
  background:transparent;
  color:var(--white);
  border:1.5px solid var(--white);
  box-shadow:none;
}
.btn--outline-on-dark:hover{background:rgba(255,255,255,0.1)}

/* Tactile press: scale down, shadow flattens */
.btn:active{transform:scale(0.98);box-shadow:var(--shadow-sm)}

.btn--full{width:100%}

.btn__icon{width:20px;height:20px;flex-shrink:0}

/* --------------------------------------------------------------------------
   Card — components/core/Card.jsx
   -------------------------------------------------------------------------- */
.card{
  background:var(--surface-card);
  border-radius:var(--radius-md);
  padding:var(--space-6);
  font-family:var(--font-body);
}
.card--default{border:1px solid var(--border-subtle);box-shadow:none}
.card--featured{border:2px solid var(--border-strong);box-shadow:none}

/* --------------------------------------------------------------------------
   Badge — components/core/Badge.jsx
   -------------------------------------------------------------------------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:var(--text-caption);
  font-weight:var(--weight-semibold);
  text-transform:uppercase;
  letter-spacing:var(--tracking-wide);
}
.badge--brand{background:var(--brand);color:var(--ink-900)}

/* --------------------------------------------------------------------------
   Nav — ui_kits/marketing-site/Nav.jsx
   Sticky on marketing pages; frosted once scrolled.
   -------------------------------------------------------------------------- */
.nav{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--ink-900);
  transition:background var(--duration-normal) var(--ease-standard);
}
.nav.is-stuck{
  background:rgba(20,21,26,0.85);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6);
  padding-block:var(--space-5);
}
.nav__logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  padding-block:var(--space-2);
}
.nav__logo img{
  display:block;
  height:36px;
  width:auto;
}

.nav__links{
  display:none;
  gap:var(--space-8);
  font-family:var(--font-body);
  font-weight:var(--weight-medium);
  font-size:15px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav__links a{
  color:rgba(255,255,255,0.85);
  text-decoration:none;
  transition:color var(--duration-fast) var(--ease-standard);
}
.nav__links a:hover{color:var(--white);text-decoration:underline}

.nav__cta{display:none}

/* IconButton — components/core/IconButton.jsx (pill, 40px, primary).
   Compact call action for the nav on narrow screens. */
.icon-btn{
  width:40px;
  height:40px;
  border-radius:var(--radius-pill);
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  cursor:pointer;
  text-decoration:none;
  transition:transform var(--duration-fast) var(--ease-standard);
}
.icon-btn--primary{background:var(--brand);color:var(--ink-900)}
.icon-btn:active{transform:scale(0.98)}
.icon-btn svg{width:20px;height:20px}

@media (min-width:900px){
  .nav__links{display:flex}
  .nav__cta{display:inline-flex}
  .nav__icon-cta{display:none}
}

/* --------------------------------------------------------------------------
   Hero — ui_kits/marketing-site/Hero.jsx
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  background:linear-gradient(135deg,var(--ink-900) 40%,#2B2E38 100%);
  padding-bottom:var(--space-16);
  overflow:hidden;
}
.hero__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-10);
  padding-block:var(--space-10) var(--space-20);
}
.hero__copy{flex:1;width:100%;color:var(--white);text-align:center}

.hero__title{
  font-family:var(--font-display);
  font-weight:var(--weight-extrabold);
  font-size:48px;
  line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight);
  margin-bottom:var(--space-5);
}
.hero__lede{
  font-family:var(--font-body);
  font-size:17px;
  line-height:var(--lh-relaxed);
  color:rgba(255,255,255,0.75);
  max-width:420px;
  margin-inline:auto;
  margin-bottom:var(--space-8);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-3);
}
@media (max-width:899px){
  .hero__actions{flex-direction:column}
  .hero__actions .btn{width:100%}
}

.hero__media{
  flex:1;
  display:flex;
  justify-content:center;
  width:100%;
  margin:0;
}

/* Image slot: shows a labelled placeholder until images/hero.jpg exists.
   Once the real photo is dropped in, it covers the placeholder entirely. */
.hero__slot{
  position:relative;
  width:100%;
  max-width:560px;
  aspect-ratio:420/320;
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--ink-800);
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero__slot img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero__slot img[hidden]{display:none}

/* Mobile: the photo breaks out to full viewport width and sits under the
   copy as a near-background band, with a top scrim fading into the hero's
   own dark background so the two blend into one surface. */
@media (max-width:899px){
  .hero{padding-bottom:0}
  .hero__inner{padding-bottom:0}
  .hero__media{
    width:100vw;
    margin-inline:calc(50% - 50vw);
  }
  .hero__slot{
    max-width:none;
    aspect-ratio:auto;
    height:min(78vw,420px);
    border-radius:0;
  }
  .hero__slot img{object-position:center bottom}
  .hero__slot::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg,var(--ink-900) 0%,rgba(20,21,26,.7) 28%,rgba(20,21,26,0) 60%);
    pointer-events:none;
  }
}

.hero__placeholder{
  font-family:var(--font-body);
  font-size:var(--text-body-sm);
  color:var(--gray-500);
  text-align:center;
  padding:var(--space-6);
  line-height:var(--lh-relaxed);
}

/* Soft wavy divider between the dark hero and the white body */
.hero__wave{
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  height:60px;
  display:block;
}

@media (min-width:900px){
  .hero__inner{
    flex-direction:row;
    align-items:center;
    gap:var(--space-10);
    padding-block:var(--space-10) var(--space-20);
  }
  .hero__copy{text-align:left}
  .hero__title{font-size:52px}
  .hero__lede{margin-inline:0}
  .hero__actions{justify-content:flex-start}
}

/* --------------------------------------------------------------------------
   Services — structure of ui_kits/marketing-site/Plans.jsx
   -------------------------------------------------------------------------- */
.services__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-6);
}
.service{
  width:100%;
  text-align:left;
  display:flex;
  flex-direction:column;
}
@media (min-width:900px){
  /* Grid instead of fixed-width flex items so the three cards fill the
     same content width as every other section, edge to edge. */
  .services__grid{display:grid;grid-template-columns:repeat(3,1fr)}
  .service{width:auto}
}
/* Keep the badge hugging its text inside the column flex context */
.service .badge{align-self:flex-start}

.service__name{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  font-size:19px;
  color:var(--ink-900);
  margin:var(--space-3) 0 var(--space-2);
}
.service__desc{
  font-family:var(--font-body);
  font-size:var(--text-body-sm);
  color:var(--gray-500);
  line-height:var(--lh-relaxed);
  margin-bottom:var(--space-5);
}
.service .btn{margin-top:auto}

/* --------------------------------------------------------------------------
   Benefits — ui_kits/marketing-site/Benefits.jsx
   -------------------------------------------------------------------------- */
.benefits{background:var(--surface-sunken)}

.benefits__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-8);
  max-width:760px;
  margin-inline:auto;
  padding:0;
  list-style:none;
}
@media (min-width:640px){
  .benefits__grid{grid-template-columns:repeat(2,1fr)}
}

.benefit{display:flex;gap:var(--space-4);align-items:flex-start}

/* Circular icon badge — 56px, tinted background, brand-coloured glyph */
.benefit__icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--brand-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.benefit__icon svg{width:24px;height:24px;color:var(--ink-900)}

.benefit__title{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  font-size:17px;
  color:var(--ink-900);
  margin-bottom:var(--space-1);
}
.benefit__desc{
  font-family:var(--font-body);
  font-size:var(--text-body-sm);
  color:var(--gray-500);
  line-height:var(--lh-relaxed);
}

/* --------------------------------------------------------------------------
   Steps — "Kako funkcioniše", same list/icon structure as Benefits
   -------------------------------------------------------------------------- */
.steps__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-8);
  max-width:760px;
  margin-inline:auto;
  padding:0;
  list-style:none;
}
@media (min-width:640px){
  .steps__grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){
  .steps__grid{grid-template-columns:repeat(5,1fr);max-width:none;gap:var(--space-6)}
}

.step{display:flex;gap:var(--space-4);align-items:flex-start}
@media (min-width:1100px){
  .step{
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
    padding-inline:var(--space-2);
  }
  /* Connector line bridging this step's number into the next column's gap */
  .step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:20px;
    left:100%;
    width:var(--space-6);
    height:2px;
    background:var(--border-subtle);
    transform:translateY(-50%);
  }
}

.step__num{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--brand);
  color:var(--ink-900);
  font-family:var(--font-display);
  font-weight:var(--weight-extrabold);
  font-size:var(--text-body-lg);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  position:relative;
  z-index:1;
}

.step__title{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  font-size:16px;
  line-height:1.3;
  color:var(--ink-900);
  margin-bottom:var(--space-1);
}
@media (min-width:1100px){
  .step__title{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
}
.step__desc{
  font-family:var(--font-body);
  font-size:var(--text-body-sm);
  color:var(--gray-500);
  line-height:var(--lh-relaxed);
}

/* --------------------------------------------------------------------------
   Pricing — "Cenovnik", built from the existing Card component
   -------------------------------------------------------------------------- */
.pricing__card{max-width:480px;margin-inline:auto}

.pricing__list{list-style:none;margin:0;padding:0}
.pricing__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:var(--space-4);
  border-bottom:1px solid var(--border-subtle);
  font-family:var(--font-body);
}
.pricing__row:last-child{border-bottom:none}
.pricing__dist{color:var(--gray-500);font-size:var(--text-body-sm)}
.pricing__price{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  color:var(--ink-900);
  font-size:var(--text-body-lg);
}
.pricing__note{
  margin-top:var(--space-5);
  font-size:var(--text-body-sm);
  color:var(--gray-500);
  text-align:center;
}

/* --------------------------------------------------------------------------
   FAQ — components/Faq.jsx (native <details>, no JS)
   -------------------------------------------------------------------------- */
.faq{background:var(--surface-sunken)}
.faq__list{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  max-width:760px;
  margin-inline:auto;
}
.faq__item{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:var(--space-5) var(--space-6);
}
.faq__question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  font-size:17px;
  color:var(--ink-900);
}
.faq__question::-webkit-details-marker{display:none}
.faq__question:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}

.faq__icon{position:relative;flex:none;width:20px;height:20px}
.faq__icon::before,
.faq__icon::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  background:var(--ink-900);
  border-radius:2px;
}
.faq__icon::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq__icon::after{width:2px;height:14px;transform:translate(-50%,-50%);transition:transform var(--duration-normal) var(--ease-standard)}
details[open] .faq__icon::after{transform:translate(-50%,-50%) scaleY(0)}

.faq__answer{
  font-family:var(--font-body);
  font-size:var(--text-body-sm);
  color:var(--gray-500);
  line-height:var(--lh-relaxed);
  margin:var(--space-3) 0 0;
  overflow:hidden;
  transition:height var(--duration-normal) var(--ease-standard);
}

/* --------------------------------------------------------------------------
   Contact / CTA footer — ui_kits/marketing-site/CTAFooter.jsx
   -------------------------------------------------------------------------- */
.cta{
  background:var(--ink-900);
  color:var(--white);
  font-family:var(--font-body);
  padding-block:var(--space-16);
  text-align:center;
}
.cta__title{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  font-size:var(--text-title-lg);
  color:var(--brand);
  margin-bottom:var(--space-2);
}
.cta__lede{
  font-size:15px;
  color:rgba(255,255,255,0.75);
  margin-bottom:var(--space-6);
}
.cta__phone{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:var(--weight-extrabold);
  font-size:var(--text-display-md);
  color:var(--white);
  text-decoration:none;
  letter-spacing:var(--tracking-tight);
  margin-bottom:var(--space-6);
}
.cta__phone:hover{color:var(--brand)}

.cta__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-3);
  margin-bottom:var(--space-8);
}
@media (max-width:899px){
  .cta__actions{flex-direction:column}
  .cta__actions .btn{width:100%}
}

.cta__meta{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  align-items:center;
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:var(--space-6);
  font-size:13px;
  color:rgba(255,255,255,0.5);
}
.cta__meta ul{
  display:flex;
  gap:var(--space-5);
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
  justify-content:center;
}
.cta__meta a{
  text-decoration:none;
  display:inline-block;
  padding-block:var(--space-2);
}
.cta__meta a:hover{color:var(--white);text-decoration:underline}

@media (min-width:640px){
  .cta__phone{font-size:var(--text-display-lg)}
  .cta__meta{flex-direction:row;justify-content:space-between}
}

/* --------------------------------------------------------------------------
   Sticky mobile quick-call bar
   -------------------------------------------------------------------------- */
.quick-call{
  position:fixed;
  left:var(--gutter);
  right:var(--gutter);
  width:auto;
  bottom:var(--space-4);
  bottom:max(var(--space-4),env(safe-area-inset-bottom));
  z-index:30;
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition:
    opacity var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-standard);
}
/* Hero already carries its own call CTA — only reveal this bar once it's scrolled out of view. */
.quick-call.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
@media (min-width:900px){
  .quick-call{display:none}
}
/* Keep the last section clear of the fixed bar */
@media (max-width:899px){
  .cta{padding-bottom:calc(var(--space-16) + 72px)}
}

.cta__credit{
  margin-top:var(--space-4);
  font-size:12px;
  color:rgba(255,255,255,0.35);
  text-align:center;
}

/* --------------------------------------------------------------------------
   Contact form — "Pišite nam", sits above the footer CTA
   -------------------------------------------------------------------------- */
.contact-form{max-width:560px;margin-inline:auto}
.form-field{margin-bottom:var(--space-5)}
.form-field label{
  display:block;
  font-family:var(--font-body);
  font-weight:var(--weight-semibold);
  font-size:var(--text-body-sm);
  color:var(--ink-900);
  margin-bottom:var(--space-2);
}
.form-field input,
.form-field textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  color:var(--ink-900);
  background:var(--surface-card);
  border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);
  transition:border-color var(--duration-fast) var(--ease-standard);
}
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--brand-strong);
}
.form-field textarea{resize:vertical;min-height:120px;font-family:var(--font-body)}
.form-field--honeypot{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.contact-form__status{
  margin-top:var(--space-4);
  font-family:var(--font-body);
  font-size:var(--text-body-sm);
  text-align:center;
  min-height:1.5em;
}
.contact-form__status[data-state="success"]{color:var(--status-safe)}
.contact-form__status[data-state="error"]{color:var(--status-alert)}
.contact-form .btn[disabled]{opacity:.6;cursor:not-allowed}

/* --------------------------------------------------------------------------
   Legal content — Politika privatnosti / Uslovi korišćenja
   -------------------------------------------------------------------------- */
.legal{padding-block:var(--space-16)}
.legal .container{max-width:760px}
.legal__updated{
  font-family:var(--font-body);
  font-size:var(--text-body-sm);
  color:var(--gray-500);
  margin-bottom:var(--space-8);
}
.legal h2{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  font-size:var(--text-title-lg);
  color:var(--ink-900);
  margin:var(--space-10) 0 var(--space-3);
}
.legal h2:first-of-type{margin-top:0}
.legal p{
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  color:var(--gray-500);
  line-height:var(--lh-relaxed);
  margin-bottom:var(--space-4);
}
.legal ul{
  margin:0 0 var(--space-4);
  padding-left:var(--space-6);
}
.legal li{
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  color:var(--gray-500);
  line-height:var(--lh-relaxed);
  margin-bottom:var(--space-2);
}
.legal a{color:var(--brand-strong)}
.legal strong{color:var(--ink-900)}

/* --------------------------------------------------------------------------
   Error pages — 403 / 404
   -------------------------------------------------------------------------- */
.error-page{
  background:var(--surface-dark);
  color:var(--white);
  min-height:66vh;
  display:flex;
  align-items:center;
  text-align:center;
  padding-block:var(--space-20);
}
.error-page__code{
  font-family:var(--font-display);
  font-weight:var(--weight-extrabold);
  font-size:96px;
  line-height:1;
  color:var(--brand);
  letter-spacing:var(--tracking-tight);
  margin-bottom:var(--space-4);
}
.error-page__title{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  font-size:var(--text-title-lg);
  color:var(--white);
  margin-bottom:var(--space-3);
}
.error-page__desc{
  font-family:var(--font-body);
  font-size:var(--text-body-lg);
  color:rgba(255,255,255,0.75);
  max-width:480px;
  margin:0 auto var(--space-8);
  line-height:var(--lh-relaxed);
}