/* ─────────────────────────────────────────────
   UpDistry Blog — shared article styles
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:      #1B72D5;
  --blue-dark: #0D5EB8;
  --blue-deep: #0a4a94;
  --green:     #6EE87A;
  --green-mid: #4DD85A;
  --white:     #ffffff;
  --off-white: #F4F8FF;
  --gray-text: #5A6A80;
  --dark:      #0D1B2A;
}

html { scroll-behavior: smooth; }
body { font-family: 'Raleway', sans-serif; color: var(--dark); background: var(--white); line-height: 1.7; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

.btn {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-weight: 800; font-size: 1rem;
  padding: 16px 36px; border-radius: 50px;
  cursor: pointer; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  border: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--green); color: var(--blue-deep); box-shadow: 0 6px 24px rgba(110,232,122,.4); }
.btn-primary:hover { background: var(--green-mid); box-shadow: 0 10px 32px rgba(110,232,122,.5); }
.btn-outline-blue { background: transparent; color: var(--blue); border: 2px solid rgba(27,114,213,.3); }
.btn-outline-blue:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(27,114,213,.08);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-logo { height: 42px; display: flex; align-items: center; }
.nav-back {
  color: var(--blue); font-weight: 700; font-size: .92rem; text-decoration: none;
  display: flex; align-items: center; gap: 6px;
}
.nav-back:hover { color: var(--blue-dark); }

/* ── ARTICLE HERO ── */
.article-hero {
  background:
    linear-gradient(160deg, rgba(6,28,72,.95) 0%, rgba(10,60,130,.88) 45%, rgba(14,90,180,.78) 75%, rgba(10,60,130,.92) 100%),
    url('world.jpg') center 40% / cover no-repeat;
  padding: 64px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.article-hero-inner { position: relative; z-index: 2; max-width: 840px; margin: 0 auto; }
.article-hero-label {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(110,232,122,.18); border: 1px solid rgba(110,232,122,.4);
  color: var(--green); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 18px; border-radius: 50px; margin-bottom: 26px;
}
.article-hero h1 {
  color: var(--white); font-weight: 900;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.22;
}

/* ── ARTICLE BODY ── */
.article-body { padding: 64px 0 20px; }
.article-content { max-width: 720px; margin: 0 auto; }
.article-content h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 900; line-height: 1.3;
  margin: 44px 0 16px; color: var(--dark);
}
.article-content h2:first-of-type { margin-top: 0; }
.article-content h3 {
  font-size: 1.18rem; font-weight: 800;
  margin: 28px 0 12px; color: var(--blue-deep);
}
.article-content p { margin: 0 0 16px; color: var(--gray-text); font-size: 1.06rem; }
.article-content ul { margin: 0 0 20px; padding-left: 26px; color: var(--gray-text); }
.article-content li { margin-bottom: 8px; font-size: 1.06rem; }
.article-content strong { color: var(--dark); font-weight: 800; }

/* ── ARTICLE CTA ── */
.article-cta {
  margin: 56px auto 0; max-width: 720px;
  background: var(--off-white); border: 2px solid rgba(27,114,213,.1);
  border-radius: 20px; padding: 40px 36px; text-align: center;
}
.article-cta h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 900; margin-bottom: 12px; }
.article-cta p { color: var(--gray-text); margin-bottom: 26px; }
.article-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ── */
footer { background: #080F18; padding: 48px 0 32px; margin-top: 72px; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.footer-logo img { height: 36px; }
.footer-links { display: flex; gap: 32px; list-style: none; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: rgba(255,255,255,.45); text-decoration: none; font-size: .88rem; font-weight: 600; transition: color .2s; }
.footer-links a:hover { color: var(--green); }
.footer-copy { color: rgba(255,255,255,.3); font-size: .82rem; }

@media (max-width: 600px) {
  .article-body { padding: 44px 0 0; }
  .article-cta { padding: 32px 22px; border-radius: 16px; }
}