/* =====================================================
   Software Ukraine — tpl_asu v2.3
   ===================================================== */

:root {
  --su-dark:       #000a1a;
  --su-navy:       #001229;
  --su-navy-mid:   #001a3d;
  --su-navy-light: #002a5d;
  --su-accent:     #0066ff;
  --su-accent-h:   #0052cc;
  --su-success:    #10b981;
  --su-white:      #ffffff;
  --su-text-muted: #64748b;
  --su-bg-page:    #f1f5f9;
  --su-text-dark:  #0f172a;
  --su-border:     rgba(255,255,255,.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--su-bg-page);
  color: var(--su-text-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

.container,
.su-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─────────────────────────────────────────────────────
   NAVBAR
───────────────────────────────────────────────────── */
.navbar-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(0,18,41,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  height: 80px;
  display: flex;
  align-items: center;
}

.navbar-flex { display: flex; justify-content: space-between; align-items: center; width: 100%; }

.logo img { height: 40px; width: auto; }

.nav-menu ul { display: flex; list-style: none; gap: 1.5rem; }

.nav-menu a {
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all .2s;
}
.nav-menu a:hover {
  color: #fff;
  background: rgba(255,255,255,.09);
}
.nav-menu .active > a,
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a,
.nav-menu .current-menu-ancestor > a,
.nav-menu li.current-menu-item a,
.nav-menu li.current_page_item a {
  color: #fff !important;
  background: var(--su-accent) !important;
  box-shadow: 0 4px 12px rgba(0,102,255,.35);
}

.nav-actions { display: flex; align-items: center; gap: 1.25rem; }

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────── */
.su-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 700;
  text-decoration: none;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  border: none;
  gap: .5rem;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
}

.su-btn--primary {
  background: var(--su-accent);
  color: white;
  box-shadow: 0 8px 20px rgba(0,102,255,.25);
}
.su-btn--primary:hover {
  background: var(--su-accent-h);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,102,255,.3);
  color: white;
}

.su-btn--secondary {
  background: rgba(255,255,255,.1);
  color: white;
  border: 1px solid rgba(255,255,255,.2);
}
.su-btn--secondary:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
  color: white;
}

.su-btn--sm { padding: .45rem 1.1rem; font-size: .875rem; }

.su-btn--icon {
  width: 44px; height: 44px;
  padding: 0;
}

/* ─────────────────────────────────────────────────────
   HERO (Home only)
───────────────────────────────────────────────────── */
.su-hero {
  position: relative;
  padding: 160px 0 100px;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #000d24 0%, #001a3d 50%, #00306e 100%);
  color: white;
}

.su-hero-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .06;
  z-index: 1;
}
.su-hero .container { position: relative; z-index: 2; }

.su-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 4rem;
  align-items: center;
}

.su-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 1.5rem;
  padding: .35rem 1rem;
  background: rgba(59,130,246,.15);
  border: 1px solid rgba(59,130,246,.3);
  border-radius: 9999px;
}
.su-eyebrow--light {
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
}

.su-hero-title {
  font-size: 4.5rem;
  line-height: 1.08;
  font-weight: 900;
  margin-bottom: 1.75rem;
  letter-spacing: -.03em;
  color: white;
}

.text-accent {
  background: linear-gradient(to right, #60a5fa, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.su-hero-text {
  font-size: 1.2rem;
  color: rgba(255,255,255,.68);
  margin-bottom: 2.5rem;
  max-width: 520px;
  line-height: 1.75;
}

.su-hero-btns { display: flex; flex-wrap: wrap; gap: 1rem; }

.su-hero-visual { display: flex; justify-content: center; position: relative; }

.visual-box {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(16,185,129,.08));
  border-radius: 2.5rem;
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(8px);
  padding: 1.75rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  position: relative;
}

.visual-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 1.25rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.visual-icon {
  width: 2.25rem; height: 2.25rem;
  background: rgba(59,130,246,.2);
  border-radius: .75rem;
  margin-bottom: .875rem;
}

.visual-line { height: .45rem; background: rgba(255,255,255,.18); border-radius: 9999px; margin-bottom: .45rem; }
.visual-line--short { width: 60%; background: rgba(255,255,255,.09); }

.visual-badge {
  position: absolute;
  bottom: -1.25rem; right: -1.25rem;
  background: var(--su-success);
  color: white;
  padding: 1.25rem 1.5rem;
  border-radius: 1.5rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  gap: .875rem;
}
.visual-badge .num { font-size: 2.25rem; font-weight: 900; }
.visual-badge .label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; line-height: 1.3; opacity: .85; }

/* ─────────────────────────────────────────────────────
   INNER PAGES LAYOUT
───────────────────────────────────────────────────── */

/* Spacer when no top-modules (just navbar clearance) */
.page-navbar-spacer { height: 80px; }

/* Dark band when top-modules exists */
.page-header-area {
  background: linear-gradient(135deg, #000d24 0%, #001a3d 60%, #002a5d 100%);
  padding: 100px 0 40px;
  color: white;
}
.page-header-area .su-eyebrow {
  color: #93c5fd;
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.25);
  margin-bottom: 0;
}

/* Main content area for inner pages */
.not-home-body {
  min-height: 60vh;
  background: var(--su-bg-page);
}

/* HTML pages (com_htmlpages) output their own su-section blocks — full width */
.not-home-body > .su-blog,
.not-home-body > div > .su-section,
.not-home-body > .su-section {
  /* These already have their own container inside */
}

/* First su-section of a page (from com_htmlpages) gets top padding for spacing */
.not-home-body > div > .su-section:first-child,
.not-home-body > .su-section:first-child {
  padding-top: 72px;
}

/* Raw Joomla component fallback (com_contact, article view, etc) */
.not-home-body > .com-contact,
.not-home-body > article.item-page,
.not-home-body > .category-list,
.not-home-body > .blog {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 1.5rem 80px;
  background: white;
}

/* Message block */
.not-home-body > .su-joomla-messages { max-width: 1280px; margin: 1.5rem auto 0; padding: 0 1.5rem; }

/* ─────────────────────────────────────────────────────
   SECTIONS
───────────────────────────────────────────────────── */
.su-section       { padding: 88px 0; }
.su-section--white{ background: white; }
.su-section--paper{ background: white; }
.su-section--light{ background: #f8fafc; }
.su-section--dark {
  background: var(--su-navy-mid);
  color: white;
}
.su-section--dark .su-text-muted,
.su-section--dark .su-lead { color: rgba(255,255,255,.55); }
.su-section--dark .su-eyebrow {
  color: #93c5fd;
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.25);
}

.su-section-heading { margin-bottom: 3.5rem; }
.su-section-heading--center { text-align: center; }

.su-title {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.su-title--light { color: white; }

.su-lead {
  font-size: 1.1rem;
  color: var(--su-text-muted);
  max-width: 700px;
  line-height: 1.7;
}
.su-section-heading--center .su-lead { margin: 0 auto; }

/* ─────────────────────────────────────────────────────
   GRIDS & CARDS
───────────────────────────────────────────────────── */
.su-grid     { display: grid; gap: 1.75rem; }
.su-grid--2  { grid-template-columns: repeat(2, 1fr); }
.su-grid--3  { grid-template-columns: repeat(3, 1fr); }
.su-grid--4  { grid-template-columns: repeat(4, 1fr); }
.su-grid--stretch > * { display: flex; flex-direction: column; }

.su-card {
  background: white;
  padding: 2.25rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  transition: all .25s ease;
}
.su-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.1);
}

.su-card__icon {
  width: 3.25rem; height: 3.25rem;
  background: #eff6ff;
  color: var(--su-accent);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
}

.su-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--su-text-dark);
  margin-bottom: .75rem;
  line-height: 1.3;
}

.su-card__text { color: var(--su-text-muted); font-size: .95rem; line-height: 1.65; }

/* Panel variant (text blocks) */
.su-panel {
  background: #f8fafc;
  border-radius: 1.25rem;
  padding: 2rem;
  border: 1px solid rgba(0,0,0,.05);
}
.su-text { color: var(--su-text-dark); line-height: 1.7; }

/* ─────────────────────────────────────────────────────
   STATS
───────────────────────────────────────────────────── */
.su-stat { text-align: center; padding: 1rem; }
.su-stat__num {
  font-size: 3.25rem;
  font-weight: 900;
  color: var(--su-accent);
  line-height: 1;
  margin-bottom: .5rem;
}
.su-section--dark .su-stat__num { color: #60a5fa; }
.su-section--light .su-stat__num { color: var(--su-accent); }

.su-stat__label {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--su-text-muted);
}
.su-section--dark .su-stat__label { color: rgba(255,255,255,.45); }

/* ─────────────────────────────────────────────────────
   ACTIONS / BUTTONS IN SECTIONS
───────────────────────────────────────────────────── */
.su-actions { display: flex; flex-wrap: wrap; gap: .875rem; }

/* ─────────────────────────────────────────────────────
   CHECKLIST
───────────────────────────────────────────────────── */
.su-checklist { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.su-checklist li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .95rem;
  color: var(--su-text-dark);
}
.su-checklist li i { color: var(--su-accent); margin-top: 2px; flex-shrink: 0; }

/* ─────────────────────────────────────────────────────
   NEWS CARDS (blog.php override)
───────────────────────────────────────────────────── */
.su-blog { background: var(--su-bg-page); }

.su-news-card {
  background: white;
  border-radius: 1.25rem;
  border: 1px solid rgba(0,0,0,.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .25s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  height: 100%;
}
.su-news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.1);
}

.su-news-card--lead { border-radius: 1.5rem; }

.su-news-card__image {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.su-news-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.su-news-card:hover .su-news-card__image img { transform: scale(1.04); }

.su-news-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.su-news-card--lead .su-news-card__body { padding: 2rem; }

.su-news-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .8rem;
  color: var(--su-text-muted);
  margin-bottom: .875rem;
}

.su-news-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .75rem;
  line-height: 1.35;
  flex: 1;
}
.su-news-card--lead .su-news-card__title { font-size: 1.35rem; }

.su-news-card__title a {
  color: var(--su-text-dark);
  text-decoration: none;
  transition: color .2s;
}
.su-news-card__title a:hover { color: var(--su-accent); }

.su-news-card__text {
  font-size: .9rem;
  color: var(--su-text-muted);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.su-tag {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 9999px;
  background: #eff6ff;
  color: var(--su-accent);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.su-tag:hover { background: #dbeafe; }

.su-link {
  color: var(--su-accent);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: gap .2s;
}
.su-link:hover { gap: .6rem; }

/* ─────────────────────────────────────────────────────
   FORMS — LIGHT BACKGROUND (contacts, etc.)
───────────────────────────────────────────────────── */
.su-form input[type="text"],
.su-form input[type="email"],
.su-form input[type="tel"],
.su-form textarea,
.su-form select,
.com-contact input[type="text"],
.com-contact input[type="email"],
.com-contact input[type="tel"],
.com-contact textarea,
.com-contact select {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid #e2e8f0;
  border-radius: .75rem;
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  color: var(--su-text-dark);
  background: #f8fafc;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  margin-bottom: .875rem;
}
.su-form input:focus,
.su-form textarea:focus,
.com-contact input:focus,
.com-contact textarea:focus {
  border-color: var(--su-accent);
  box-shadow: 0 0 0 3px rgba(0,102,255,.1);
  background: white;
}
.su-form textarea,
.com-contact textarea { min-height: 130px; resize: vertical; }

.su-form label,
.com-contact label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--su-text-dark);
  margin-bottom: .4rem;
}

.su-form .control-group,
.su-form .form-group,
.com-contact .control-group,
.com-contact .form-group { margin-bottom: 1.25rem; }

.su-form button[type="submit"],
.su-form input[type="submit"],
.com-contact button[type="submit"],
.com-contact input[type="submit"] {
  background: var(--su-accent);
  color: white;
  border: none;
  padding: .8rem 2rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
  font-family: 'Inter', sans-serif;
  transition: all .25s;
}
.su-form button[type="submit"]:hover,
.su-form input[type="submit"]:hover,
.com-contact button[type="submit"]:hover,
.com-contact input[type="submit"]:hover {
  background: var(--su-accent-h);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,102,255,.25);
}

/* ─────────────────────────────────────────────────────
   FORMS — DARK BACKGROUND (membership join section)
───────────────────────────────────────────────────── */
.su-section--dark input[type="text"],
.su-section--dark input[type="email"],
.su-section--dark input[type="tel"],
.su-section--dark input[type="number"],
.su-section--dark textarea,
.su-section--dark select {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: .75rem;
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  color: white;
  background: rgba(255,255,255,.07);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  margin-bottom: .875rem;
}
.su-section--dark input::placeholder,
.su-section--dark textarea::placeholder {
  color: rgba(255,255,255,.35);
}
.su-section--dark input:focus,
.su-section--dark textarea:focus,
.su-section--dark select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,.15);
  background: rgba(255,255,255,.1);
}

.su-section--dark textarea { min-height: 120px; resize: vertical; }

.su-section--dark label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  margin-bottom: .4rem;
}

.su-section--dark button[type="submit"],
.su-section--dark input[type="submit"] {
  background: var(--su-accent);
  color: white;
  border: none;
  padding: .8rem 2rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all .25s;
  margin-top: .5rem;
}
.su-section--dark button[type="submit"]:hover,
.su-section--dark input[type="submit"]:hover {
  background: var(--su-accent-h);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,102,255,.3);
}

.su-section--dark .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Anti-spam label */
.su-section--dark .contact-captcha,
.su-section--dark .captcha-label {
  color: rgba(255,255,255,.5);
  font-size: .8rem;
  margin-bottom: .5rem;
}

/* ─────────────────────────────────────────────────────
   CONTACT INFO ITEMS
───────────────────────────────────────────────────── */
.su-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}
.su-contact-item__icon {
  width: 3rem; height: 3rem;
  background: rgba(0,102,255,.1);
  color: var(--su-accent);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.su-contact-item__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--su-text-muted);
  margin-bottom: .2rem;
}
.su-contact-item__value {
  font-size: 1rem;
  color: var(--su-text-dark);
}
.su-contact-item__value a {
  color: var(--su-accent);
  text-decoration: none;
}
.su-contact-item__value a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────
   FOOTER — dark (logo visible ✓)
───────────────────────────────────────────────────── */
.footer {
  background: var(--su-navy);
  padding: 72px 0 36px;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 52px;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-logo { height: 38px; }

.footer-desc {
  color: rgba(255,255,255,.38);
  font-size: .875rem;
  margin-top: .875rem;
  max-width: 300px;
  line-height: 1.65;
}

.footer-nav a {
  color: rgba(255,255,255,.5);
  text-decoration: none;
  font-size: .875rem;
  display: block;
  margin-bottom: .5rem;
  transition: color .2s;
}
.footer-nav a:hover { color: white; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p { color: rgba(255,255,255,.28); font-size: .875rem; }

.footer-social { display: flex; gap: 1.25rem; }
.footer-social a { color: rgba(255,255,255,.32); font-size: 1.2rem; transition: color .2s; }
.footer-social a:hover { color: var(--su-accent); }

/* ─────────────────────────────────────────────────────
   BACK TO TOP
───────────────────────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 44px; height: 44px;
  padding: 0;
  opacity: 0; visibility: hidden;
  transition: all .25s;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0,102,255,.35);
}
#back-to-top.is-visible { opacity: 1; visibility: visible; }

/* ─────────────────────────────────────────────────────
   JOOMLA UI (alerts, pagination)
───────────────────────────────────────────────────── */
.alert { padding: 1rem 1.25rem; border-radius: .75rem; margin-bottom: 1.5rem; font-size: .95rem; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-danger   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-info     { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.alert-warning  { background: #fef9c3; color: #854d0e; border: 1px solid #fef08a; }

.pagination { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; justify-content: center; margin: 2rem 0; }
.pagination .page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  border-radius: .75rem;
  font-size: .9rem; font-weight: 600;
  text-decoration: none;
  color: var(--su-text-dark);
  border: 1.5px solid #e2e8f0;
  background: white;
  padding: 0 .75rem;
  transition: all .2s;
}
.pagination .page-link:hover,
.pagination .active .page-link {
  background: var(--su-accent);
  color: white;
  border-color: var(--su-accent);
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .su-hero-title { font-size: 3.5rem; }
  .su-hero-grid  { grid-template-columns: 1fr; text-align: center; }
  .su-hero-content { display: flex; flex-direction: column; align-items: center; }
  .su-hero-text  { margin: 0 auto 2.5rem; }
  .su-hero-visual { display: none; }
  .su-grid--4    { grid-template-columns: repeat(2, 1fr); }
  .su-title      { font-size: 2.25rem; }
  .su-section--dark .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .su-hero-title { font-size: 2.5rem; }
  .su-hero       { padding: 140px 0 72px; min-height: auto; }
  .su-grid--2,
  .su-grid--3,
  .su-grid--4    { grid-template-columns: 1fr; }
  .su-section    { padding: 60px 0; }
  .navbar-header { height: 70px; }
  .page-navbar-spacer { height: 70px; }
  .mobile-menu-toggle { display: flex; }
  .nav-menu { display: none !important; }
  .footer-grid  { flex-direction: column; }
  .footer-bottom{ flex-direction: column; text-align: center; }
  .su-title     { font-size: 1.875rem; }
  .su-hero-title { font-size: 2.25rem; }
  .su-section--dark .form-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   tpl_asu v3.2 — ADDITIONS
   ===================================================== */

/* ── NAVBAR: container full width fix ─────────────── */
.navbar-header .container {
  width: 100%;
}

/* ── HERO CARD ────────────────────────────────────── */
.su-hero-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 2rem;
  padding: 2rem;
  backdrop-filter: blur(12px);
  width: 100%;
}
.su-hero-card__header {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1.75rem; font-size: .8rem; font-weight: 600;
  color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .08em;
}
.su-hero-card__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.su-hero-card__dot--green { background: #10b981; box-shadow: 0 0 8px #10b981; }
.su-hero-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.su-hs-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 1rem; padding: 1.25rem; display: flex; flex-direction: column; gap: .3rem; }
.su-hs-item--accent { background: rgba(0,102,255,.15); border-color: rgba(0,102,255,.3); }
.su-hs-num { font-size: 2rem; font-weight: 900; color: white; line-height: 1; }
.su-hs-item--accent .su-hs-num { color: #60a5fa; }
.su-hs-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); }
.su-hero-card__divider { height: 1px; background: rgba(255,255,255,.08); margin-bottom: 1.25rem; }
.su-hero-card__badges { display: flex; flex-direction: column; gap: .5rem; }
.su-hero-badge { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.6); padding: .35rem .75rem; background: rgba(255,255,255,.05); border-radius: 9999px; border: 1px solid rgba(255,255,255,.08); }
.su-hero-badge i { color: #60a5fa; font-size: .8rem; }

/* ── TRUST BAR ────────────────────────────────────── */
.su-trust-bar { background: white; padding: 32px 0; border-bottom: 1px solid rgba(0,0,0,.06); overflow: hidden; }
.su-trust-bar__label { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--su-text-muted); margin-bottom: 1.5rem; }
.su-marquee-wrap { overflow: hidden; position: relative; }
.su-marquee-wrap::before, .su-marquee-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; }
.su-marquee-wrap::before { left: 0; background: linear-gradient(to right, white, transparent); }
.su-marquee-wrap::after  { right: 0; background: linear-gradient(to left, white, transparent); }
.su-marquee { display: flex; gap: 3rem; animation: su-marquee-scroll 28s linear infinite; width: max-content; }
.su-marquee:hover { animation-play-state: paused; }
@keyframes su-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.su-marquee__item { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 700; color: var(--su-text-muted); white-space: nowrap; transition: color .2s; padding: .25rem 0; }
.su-marquee__item:hover { color: var(--su-accent); }
.su-marquee__item i { font-size: 1.1rem; color: var(--su-accent); opacity: .5; }

/* ── PAGE INNER BANNER ────────────────────────────── */
.su-page-banner { padding: 100px 0 56px; background: linear-gradient(135deg, #000d24 0%, #001a3d 60%, #002a5d 100%); color: white; }
.su-page-banner__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #93c5fd; margin-bottom: 1rem; padding: .35rem 1rem; background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.25); border-radius: 9999px; }
.su-page-banner__title { font-size: 3rem; font-weight: 900; letter-spacing: -.025em; line-height: 1.1; margin-bottom: .875rem; }
.su-page-banner__lead { font-size: 1.1rem; color: rgba(255,255,255,.55); max-width: 560px; line-height: 1.7; }

/* ── BENEFITS ─────────────────────────────────────── */
.su-benefits-icon { width: 3.5rem; height: 3.5rem; background: linear-gradient(135deg, #eff6ff, #dbeafe); color: var(--su-accent); border-radius: 1.1rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1.25rem; flex-shrink: 0; }

/* ── CTA SECTION ──────────────────────────────────── */
.su-cta-section { background: linear-gradient(135deg, #000d24 0%, #001a3d 50%, #00306e 100%); padding: 96px 0; text-align: center; color: white; position: relative; overflow: hidden; }
.su-cta-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px); background-size: 32px 32px; opacity: .04; }
.su-cta-section .container { position: relative; z-index: 1; }
.su-cta-title { font-size: 3rem; font-weight: 900; letter-spacing: -.025em; margin-bottom: 1.25rem; }
.su-cta-lead { font-size: 1.1rem; color: rgba(255,255,255,.55); max-width: 560px; margin: 0 auto 2.5rem; line-height: 1.7; }
.su-cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }

/* ── FOOTER 4-columns ─────────────────────────────── */
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 3rem; margin-bottom: 48px; align-items: flex-start; }
.footer-brand .footer-social { display: flex; gap: 1rem; margin-top: 1.5rem; }
.footer-brand .footer-social a { width: 38px; height: 38px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.45); font-size: 1rem; transition: all .2s; text-decoration: none; }
.footer-brand .footer-social a:hover { background: var(--su-accent); border-color: var(--su-accent); color: white; }
.footer-nav-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.35); margin-bottom: 1.25rem; }
.footer-nav-col a, .footer-nav-col nav a { color: rgba(255,255,255,.5); text-decoration: none; font-size: .875rem; display: block; margin-bottom: .6rem; transition: color .2s; padding: .1rem 0; }
.footer-nav-col a:hover, .footer-nav-col nav a:hover { color: white; }
.footer-contact-col .footer-nav-title { margin-bottom: 1.25rem; }
.footer-contact-item { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; font-size: .875rem; color: rgba(255,255,255,.5); }
.footer-contact-item i { color: var(--su-accent); margin-top: 2px; flex-shrink: 0; width: 16px; }
.footer-contact-item a { color: rgba(255,255,255,.5); text-decoration: none; transition: color .2s; }
.footer-contact-item a:hover { color: white; }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { color: rgba(255,255,255,.28); font-size: .8rem; text-decoration: none; transition: color .2s; }
.footer-bottom-links a:hover { color: rgba(255,255,255,.6); }

/* ── COMMITTEE CARDS ──────────────────────────────── */
.su-committee-card { background: white; border-radius: 1.5rem; border: 1px solid rgba(0,0,0,.06); padding: 2rem; transition: all .25s ease; box-shadow: 0 2px 12px rgba(0,0,0,.05); position: relative; overflow: hidden; }
.su-committee-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--su-accent), #34d399); opacity: 0; transition: opacity .25s; }
.su-committee-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.1); }
.su-committee-card:hover::before { opacity: 1; }

/* ── NEWS GRID — 2×2 ──────────────────────────────── */
.su-news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

/* ── NEWS CARD image — proportional, not cropped ──── */
.su-news-card__image {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
}
.su-news-card__image img {
  width: 100%;
  height: auto;          /* proportional scaling, no crop */
  display: block;
  object-fit: unset;
  transition: transform .4s ease;
}
.su-news-card:hover .su-news-card__image img {
  transform: scale(1.03);
}

/* ── PAGINATION ───────────────────────────────────── */
.su-pagination {
  display: flex;
  justify-content: center;
  padding: 2.5rem 0 3rem;
  margin: 0;
}
.su-pagination .pagination {
  display: flex; align-items: center; gap: .375rem;
  list-style: none; margin: 0; padding: 0;
  flex-wrap: wrap; justify-content: center;
}
.su-pagination .page-item .page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 .6rem;
  border-radius: .875rem; font-size: .875rem; font-weight: 700;
  font-family: 'Inter', sans-serif; text-decoration: none;
  color: var(--su-text-dark); background: white;
  border: 1.5px solid #e2e8f0;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.su-pagination .page-item:not(.active):not(.disabled) .page-link:hover {
  background: #f0f7ff; color: var(--su-accent);
  border-color: #bfdbfe; transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,102,255,.12);
}
.su-pagination .page-item.active .page-link {
  background: var(--su-accent); color: white;
  border-color: var(--su-accent);
  box-shadow: 0 4px 14px rgba(0,102,255,.35);
}
.su-pagination .page-item.disabled .page-link {
  opacity: .35; cursor: not-allowed;
  background: #f8fafc; box-shadow: none;
}
.su-pagination .icon-angle-left::before       { content: '‹'; font-size: 1.25rem; font-weight: 900; }
.su-pagination .icon-angle-right::before      { content: '›'; font-size: 1.25rem; font-weight: 900; }
.su-pagination .icon-angle-double-left::before  { content: '«'; font-size: 1rem; font-weight: 900; }
.su-pagination .icon-angle-double-right::before { content: '»'; font-size: 1rem; font-weight: 900; }

/* ── ARTICLE LAYOUT ───────────────────────────────── */
.su-article-wrap { background: var(--su-bg-page); }
.su-article-hero { background: #f1f5f9; padding: 2rem 0 0; }
.su-article-hero__img { display: block; width: 100%; max-height: 480px; object-fit: cover; border-radius: 1.5rem 1.5rem 0 0; }
.su-article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: flex-start; }
.su-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.25rem; font-size: .875rem; color: var(--su-text-muted); }
.su-article-meta__date, .su-article-meta__author { display: inline-flex; align-items: center; gap: .35rem; }
.su-article-title { font-size: 2.5rem; font-weight: 900; letter-spacing: -.025em; line-height: 1.15; color: var(--su-text-dark); margin-bottom: 2rem; }
.su-article-content { font-size: 1.05rem; line-height: 1.8; color: #1e293b; }
.su-article-content p { margin-bottom: 1.4em; }
.su-article-content h2 { font-size: 1.6rem; font-weight: 800; margin: 2em 0 .75em; letter-spacing: -.02em; }
.su-article-content h3 { font-size: 1.25rem; font-weight: 700; margin: 1.75em 0 .6em; }
.su-article-content ul, .su-article-content ol { margin: 0 0 1.4em 1.5em; }
.su-article-content li { margin-bottom: .4em; }
.su-article-content blockquote { border-left: 4px solid var(--su-accent); background: #f0f7ff; padding: 1.25rem 1.5rem; margin: 1.75em 0; border-radius: 0 1rem 1rem 0; font-style: italic; color: var(--su-text-muted); }
.su-article-content img { max-width: 100%; height: auto; border-radius: 1rem; margin: 1rem 0; }
.su-article-content a { color: var(--su-accent); }
.su-article-content a:hover { text-decoration: underline; }
.su-article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #f1f5f9; }
.su-article-tags__label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--su-text-muted); }
.su-article-sidebar { position: sticky; top: 100px; }
.su-article-sidebar__card { background: white; border-radius: 1.25rem; padding: 1.75rem; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.su-article-sidebar__title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--su-text-muted); margin-bottom: 1rem; }
.su-article-share { display: flex; flex-direction: column; gap: .6rem; }
.su-share-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-radius: .75rem; font-size: .875rem; font-weight: 600; text-decoration: none; transition: all .2s; }
.su-share-btn--fb { background: #f0f2ff; color: #1877f2; }
.su-share-btn--fb:hover { background: #1877f2; color: white; }
.su-share-btn--li { background: #f0f7ff; color: #0a66c2; }
.su-share-btn--li:hover { background: #0a66c2; color: white; }
.su-share-btn--tg { background: #f0fbff; color: #0088cc; }
.su-share-btn--tg:hover { background: #0088cc; color: white; }

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .su-article-layout { grid-template-columns: 1fr; }
  .su-article-sidebar { order: -1; position: static; }
  .su-cta-title { font-size: 2rem; }
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .su-news-grid { grid-template-columns: 1fr; }
  .su-hero-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .su-page-banner__title { font-size: 2.25rem; }
  .su-page-banner { padding: 100px 0 40px; }
  .su-article-title { font-size: 1.75rem; }
}


/* =====================================================
   tpl_asu — MOBILE NAV v3.4
   Innovative hamburger + slide-in drawer
   ===================================================== */

/* ── Desktop defaults ─────────────────────────────── */
.hbg-btn      { display: none; }
.nav-cta-btn  { display: inline-flex; }

/* ── SVG Hamburger Button ─────────────────────────── */
.hbg-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
}

/* Ring */
.hbg-ring {
  stroke: rgba(255,255,255,.25);
  stroke-width: 1.5;
  transition: stroke .3s ease, stroke-dashoffset .5s cubic-bezier(.4,0,.2,1);
  stroke-dasharray: 113;      /* 2π × 18 ≈ 113 */
  stroke-dashoffset: 113;
}
.hbg-btn:hover .hbg-ring,
.hbg-btn.is-active .hbg-ring {
  stroke: rgba(0,102,255,.9);
  stroke-dashoffset: 0;
}

/* Lines */
.hbg-l {
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform .35s cubic-bezier(.4,0,.2,1),
              opacity   .25s ease;
  transform-origin: 20px 20px;
}

/* Idle: shorten middle line slightly for style */
.hbg-l2 { transform: scaleX(.65) translateX(3px); }

/* Active: morph to × */
.hbg-btn.is-active .hbg-l1 {
  transform: translate(0, 6px) rotate(45deg);
}
.hbg-btn.is-active .hbg-l2 {
  opacity: 0;
  transform: scaleX(0);
}
.hbg-btn.is-active .hbg-l3 {
  transform: translate(0, -6px) rotate(-45deg);
}

/* ── Drawer shell (appended to body via JS) ────────── */
.mob-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.mob-drawer.is-open {
  pointer-events: all;
}

/* Overlay */
.mob-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,6,18,.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .4s ease;
}
.mob-drawer.is-open .mob-overlay {
  opacity: 1;
}

/* Panel */
.mob-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(300px, 82vw);
  display: flex;
  flex-direction: column;
  background: #020d1e;
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.22,1,.36,1);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Subtle gradient edge */
  box-shadow: -1px 0 0 rgba(255,255,255,.06),
              -20px 0 60px rgba(0,0,0,.6);
}
.mob-drawer.is-open .mob-panel {
  transform: translateX(0);
}

/* Noise texture overlay for depth */
.mob-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Panel header */
.mob-panel__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mob-panel__logo {
  height: 30px;
  width: auto;
}

/* Close button */
.mob-close {
  width: 32px; height: 32px;
  border-radius: .625rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
.mob-close:hover {
  background: rgba(255,255,255,.12);
  color: white;
}

/* Links */
.mob-panel__links {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mob-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  border-radius: .875rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  border: 1px solid transparent;
  /* stagger in */
  opacity: 0;
  transform: translateX(20px);
  transition:
    color      .2s ease,
    background .2s ease,
    border-color .2s ease,
    opacity    .35s ease,
    transform  .35s cubic-bezier(.22,1,.36,1);
}
/* Stagger delays */
.mob-drawer.is-open .mob-link:nth-child(1){opacity:1;transform:none;transition-delay:.10s}
.mob-drawer.is-open .mob-link:nth-child(2){opacity:1;transform:none;transition-delay:.15s}
.mob-drawer.is-open .mob-link:nth-child(3){opacity:1;transform:none;transition-delay:.20s}
.mob-drawer.is-open .mob-link:nth-child(4){opacity:1;transform:none;transition-delay:.25s}
.mob-drawer.is-open .mob-link:nth-child(5){opacity:1;transform:none;transition-delay:.30s}

.mob-link:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}
.mob-link svg {
  flex-shrink: 0;
  color: rgba(255,255,255,.2);
  transition: transform .2s ease, color .2s ease;
}
.mob-link:hover svg {
  transform: translateX(4px);
  color: #3b82f6;
}

/* Footer CTA */
.mob-panel__foot {
  position: relative;
  z-index: 1;
  padding: 1.25rem 1.5rem 2rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mob-cta {
  width: 100%;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease .36s, transform .3s cubic-bezier(.22,1,.36,1) .36s,
              background .2s, box-shadow .2s;
}
.mob-drawer.is-open .mob-cta {
  opacity: 1;
  transform: translateY(0);
}

/* ── Show/hide at breakpoints ─────────────────────── */
@media (max-width: 1024px) {
  .hbg-btn     { display: flex; }
  .nav-cta-btn { display: none !important; }
  .nav-menu    { display: none !important; }
}
@media (min-width: 1025px) {
  .hbg-btn     { display: none !important; }
  .nav-cta-btn { display: inline-flex !important; }
  .mob-drawer  { display: none !important; }
  .nav-menu    { display: block !important; }
}

/* ── Stat counter animation ───────────────────────── */
.su-stat__num {
  display: inline-block;
  transition: color .3s;
}
/* Subtle scale pop when counter finishes */
@keyframes su-stat-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.su-stat__num.is-done {
  animation: su-stat-pop .4s cubic-bezier(.34,1.56,.64,1);
}

/* =====================================================
   CODE EDITOR — animated hero illustration
   ===================================================== */
.code-editor {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: 1.25rem;
  background: #0d1117;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 32px 80px rgba(0,0,0,.6),
    0 0 120px rgba(0,102,255,.12);
  overflow: visible;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* Title bar */
.code-editor__bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  background: #161b22;
  border-bottom: 1px solid rgba(255,255,255,.07);
  border-radius: 1.25rem 1.25rem 0 0;
}

/* Traffic lights */
.code-editor__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.code-editor__dot--r { background: #ff5f57; }
.code-editor__dot--y { background: #febc2e; }
.code-editor__dot--g { background: #28c840; }

.code-editor__filename {
  font-size: .72rem;
  color: rgba(255,255,255,.65);
  padding: .2rem .6rem;
  background: rgba(255,255,255,.07);
  border-radius: .375rem;
  letter-spacing: .01em;
  cursor: default;
}
.code-editor__filename--dim {
  background: transparent;
  color: rgba(255,255,255,.25);
}
.code-editor__tab {
  margin-left: .35rem;
  color: rgba(255,255,255,.3);
  font-size: .65rem;
}

/* Code body */
.code-editor__body {
  display: flex;
  padding: 1rem 0;
  min-height: 260px;
  overflow: hidden;
}

.code-editor__lines {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0 .75rem;
  min-width: 2.5rem;
  user-select: none;
  border-right: 1px solid rgba(255,255,255,.06);
}
.code-editor__lines span {
  font-size: .72rem;
  line-height: 1.75;
  color: rgba(255,255,255,.18);
  font-family: inherit;
}

.code-editor__code {
  flex: 1;
  padding: 0 1rem;
  margin: 0;
  font-size: .75rem;
  line-height: 1.75;
  color: #e6edf3;
  white-space: pre;
  overflow: hidden;
  font-family: inherit;
  background: none;
  border: none;
}

/* Syntax colours */
.t-kw  { color: #ff7b72; }   /* keyword */
.t-fn  { color: #d2a8ff; }   /* function */
.t-str { color: #a5d6ff; }   /* string */
.t-num { color: #79c0ff; }   /* number */
.t-cm  { color: #8b949e; }   /* comment */
.t-op  { color: #ff7b72; }   /* operator */
.t-cl  { color: #ffa657; }   /* class */
.t-var { color: #e6edf3; }   /* variable */
.t-pn  { color: #c9d1d9; }   /* punctuation */
.t-arr { color: #79c0ff; }   /* arrow */

/* Blinking cursor */
.t-cursor {
  display: inline-block;
  width: 2px;
  height: .85em;
  background: #58a6ff;
  vertical-align: text-bottom;
  animation: cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Status bar */
.code-editor__status {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  background: #1c2128;
  border-top: 1px solid rgba(255,255,255,.06);
  border-radius: 0 0 1.25rem 1.25rem;
  font-size: .65rem;
  color: rgba(255,255,255,.35);
  font-family: inherit;
}
.code-editor__status-dot {
  width: 8px; height: 8px;
  background: #3fb950;
  border-radius: 50%;
  box-shadow: 0 0 6px #3fb950;
}
.code-editor__status-sep { color: rgba(255,255,255,.15); }
.code-editor__status-branch {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
}

/* Floating badge */
.code-editor__badge {
  position: absolute;
  bottom: -1.25rem;
  right: -1.25rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: .875rem 1.25rem;
  border-radius: 1.1rem;
  box-shadow: 0 16px 40px rgba(16,185,129,.35);
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  animation: badge-float 3s ease-in-out infinite;
}
.code-editor__badge-dot {
  width: 8px; height: 8px;
  background: rgba(255,255,255,.6);
  border-radius: 50%;
  box-shadow: 0 0 8px white;
  animation: badge-pulse 1.5s ease-in-out infinite;
}
@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@keyframes badge-pulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.4); }
}

/* Subtle glow lines on the editor */
.code-editor::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(0,102,255,.06) 0%,
    transparent 50%,
    rgba(16,185,129,.04) 100%
  );
  pointer-events: none;
}

/* ── Code background: bigger font, more visible ── */
.code-editor--bg .code-editor__code {
  font-size: 1.6rem !important;
  line-height: 2.2 !important;
  letter-spacing: .04em !important;
  color: rgba(190,215,245,.9) !important;
}
.code-editor--bg .code-editor__lines p,
.code-editor--bg .code-editor__lines span {
  font-size: 1.6rem !important;
  line-height: 2.2 !important;
}
/* Brighter syntax colors */
.code-editor--bg .t-kw  { color: rgba(255,110,100,1)   !important; }
.code-editor--bg .t-fn  { color: rgba(200,155,255,1)   !important; }
.code-editor--bg .t-cl  { color: rgba(255,185,80,1)    !important; }
.code-editor--bg .t-str { color: rgba(150,215,255,1)   !important; }
.code-editor--bg .t-num { color: rgba(100,200,255,1)   !important; }
.code-editor--bg .t-cm  { color: rgba(140,165,185,.9)  !important; }
.code-editor--bg .t-var { color: rgba(185,210,240,.95) !important; }

/* ── Article layout fix: content LEFT, sidebar RIGHT ── */
.su-article-layout {
  grid-template-columns: 1fr 300px !important;
  gap: 2.5rem !important;
}
/* Force content first, sidebar second */
.su-article-content { order: 1 !important; }
.su-article-sidebar  { order: 2 !important; }

/* Mobile: sidebar AFTER content */
@media (max-width: 900px) {
  .su-article-layout {
    grid-template-columns: 1fr !important;
  }
  .su-article-content { order: 1 !important; }
  .su-article-sidebar  { order: 2 !important; position: static !important; }
}

/* =====================================================
   CRITICAL FIXES v4.2
   ===================================================== */

/* 1. CODE EDITOR: must not shift content below */
.su-hero--fullbg {
  overflow: hidden !important;
  clip-path: none !important;
}
.su-hero-bg-code {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.code-editor--bg {
  position: absolute !important;
  top: 0 !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 120% !important;
  max-width: none !important;
  height: 100% !important;
  overflow: hidden !important;
  /* Screen blend without stacking context issue */
  mix-blend-mode: screen !important;
  opacity: .9 !important;
  filter: blur(1.5px) !important;
  font-size: 1.4rem !important;
}
.code-editor--bg .code-editor__body {
  height: 100% !important;
  overflow: hidden !important;
}

/* 2. STATS: horizontal row, not stacked */
.su-hero-stats-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 1.5rem 2rem !important;
  justify-content: center !important;
}
.su-hs-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* 3. ICONS: switch to emoji fallback where FA missing */
/* Cards on about/home — ensure icon box shows */
.su-card__icon,
.su-benefits-icon,
.su-cta-section .su-card__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3.25rem !important;
  height: 3.25rem !important;
  border-radius: 1rem !important;
  background: #eff6ff !important;
  color: var(--su-accent) !important;
  font-size: 1.4rem !important;
  margin-bottom: 1.25rem !important;
}
/* If icon is empty (FA not loaded) show placeholder */
.su-card__icon:empty::before,
.su-benefits-icon:empty::before {
  content: '●';
  color: var(--su-accent);
  font-size: 1.2rem;
}

/* 4. CHECKLIST icons fix */
.su-checklist li i {
  color: var(--su-accent) !important;
  min-width: 1em !important;
}
/* Fallback if FA not loading */
.su-checklist li i.fa-circle-check::before { content: '✓' !important; font-style: normal !important; }

/* 5. Mobile hero: hide code editor on small screens */
@media (max-width: 768px) {
  .su-hero-bg-code { display: none !important; }
  .su-hero-vignette { display: none !important; }
  .su-hero--fullbg {
    background: linear-gradient(135deg, #000d24 0%, #001a3d 60%, #002a5d 100%) !important;
    animation: none !important;
  }
}


/* =====================================================
   LAYOUT COMPATIBILITY LAYER v1.0
   Maps PHP template class names → existing CSS patterns
   ===================================================== */

/* ── Two-column layout ─────────────────────────────── */
.su-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.su-two-col__text { display: flex; flex-direction: column; gap: 1rem; }
.su-two-col__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

@media (max-width: 900px) {
  .su-two-col { grid-template-columns: 1fr; }
  .su-two-col__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .su-two-col__cards { grid-template-columns: 1fr; }
}

/* ── Card grids ────────────────────────────────────── */
.su-cards-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.su-cards-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1024px) {
  .su-cards-4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .su-cards-3col { grid-template-columns: repeat(2, 1fr); }
  .su-cards-4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .su-cards-3col,
  .su-cards-4col { grid-template-columns: 1fr; }
}

/* ── Benefits grid ─────────────────────────────────── */
.su-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 900px) {
  .su-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .su-benefits-grid { grid-template-columns: 1fr; }
}
.su-card--benefit { display: flex; flex-direction: column; }

/* ── Stats grid ────────────────────────────────────── */
.su-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
@media (max-width: 768px) {
  .su-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Section head ──────────────────────────────────── */
.su-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.su-section-head .su-lead { color: var(--su-text-muted); max-width: 600px; margin: 0 auto; }
.su-section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  text-align: left;
  max-width: none;
  margin-bottom: 2rem;
}

/* ── News card image alias ─────────────────────────── */
.su-news-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  border-radius: 1rem 1rem 0 0;
  flex-shrink: 0;
}
.su-news-card__date {
  font-size: .78rem;
  font-weight: 600;
  color: var(--su-text-muted);
  letter-spacing: .04em;
}
.su-news-card__cat {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--su-accent);
  background: #eff6ff;
  padding: 2px 8px;
  border-radius: 6px;
}

/* ── Page banner description ───────────────────────── */
.su-page-banner__desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,.55);
  max-width: 560px;
  line-height: 1.7;
  margin-top: .5rem;
}

/* ── News card body ────────────────────────────────── */
.su-news-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.su-news-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--su-text-dark);
  line-height: 1.4;
}

/* ── News grid: 4-col on home, 3-col on archive ───── */
.su-news-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1100px) {
  .su-news-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .su-news-grid { grid-template-columns: 1fr !important; }
}

/* ── News card link: remove underline ──────────────── */
a.su-news-card { text-decoration: none; color: inherit; }

/* ── Custom logo wrapper: keep img sizing ──────────── */
.custom-logo-link img,
.custom-logo { height: 40px; width: auto; display: block; }

/* ── contact item: icon color and gap ─────────────── */
.su-contact-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.su-contact-item > i { color: var(--su-accent); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.su-contact-item__label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--su-text-muted); margin-bottom: .2rem; }
.su-contact-item__value { font-size: .95rem; color: var(--su-text-dark); }
.su-contact-item__value a { color: var(--su-accent); text-decoration: none; }
.su-contact-item__value a:hover { text-decoration: underline; }

/* ── Hero: ensure stats row visible ───────────────── */
.su-hero-stats-row { margin-top: 2.5rem !important; }
.su-hs-pill__num {
  font-size: 2rem;
  font-weight: 900;
  color: white;
  line-height: 1;
}
.su-hs-pill__label {
  font-size: .75rem;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: .2rem;
}

/* ── Trust bar: scrolling logos ───────────────────── */
.su-trust-bar__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  align-items: center;
}
.su-trust-bar__logos span {
  font-size: .85rem;
  font-weight: 600;
  color: var(--su-text-muted);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* ── Section eyebrow alignment ─────────────────────── */
.su-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

/* ── Checklist vertical spacing ───────────────────── */
.su-checklist { margin: 1rem 0; }
.su-checklist li { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.5; }

/* ── Archive news grid: 3-col override ─────────────── */
.archive .su-news-grid,
.blog .su-news-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 900px) {
  .archive .su-news-grid,
  .blog .su-news-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Trust bar marquee ─────────────────────────────── */
.su-trust-bar__track-wrap {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
@keyframes su-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.su-trust-bar__track {
  display: flex;
  width: max-content;
  animation: su-marquee 28s linear infinite;
}
.su-trust-bar__track:hover { animation-play-state: paused; }
.su-trust-bar__logo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0 2rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--su-text-muted);
  white-space: nowrap;
}
.su-trust-bar__logo i { color: var(--su-accent); opacity: .6; }
.su-trust-bar__logo--img {
  padding: 0 1.5rem;
}
.su-trust-bar__logo--img img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: grayscale(20%) opacity(0.85);
  transition: filter .2s ease;
}
.su-trust-bar__track:hover .su-trust-bar__logo--img img {
  filter: grayscale(0%) opacity(1);
}


/* =====================================================
   LAYOUT COMPATIBILITY LAYER v1.0
   ===================================================== */

.su-two-col{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.su-two-col__text{display:flex;flex-direction:column;gap:1rem}
.su-two-col__cards{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:900px){.su-two-col{grid-template-columns:1fr}.su-two-col__cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.su-two-col__cards{grid-template-columns:1fr}}

.su-cards-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.su-cards-4col{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media(max-width:1024px){.su-cards-4col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.su-cards-3col,.su-cards-4col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.su-cards-3col,.su-cards-4col{grid-template-columns:1fr}}

.su-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
@media(max-width:900px){.su-benefits-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.su-benefits-grid{grid-template-columns:1fr}}
.su-card--benefit{display:flex;flex-direction:column}

.su-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
@media(max-width:768px){.su-stats-grid{grid-template-columns:repeat(2,1fr)}}

.su-section-head{text-align:center;max-width:720px;margin:0 auto 3rem}
.su-section-head .su-lead{color:var(--su-text-muted);max-width:600px;margin:0 auto}
.su-section-head--row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;text-align:left;max-width:none;margin-bottom:2rem}

.su-news-card__img{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;border-radius:1rem 1rem 0 0;flex-shrink:0}
.su-news-card__date{font-size:.78rem;font-weight:600;color:var(--su-text-muted);letter-spacing:.04em}
.su-news-card__cat{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--su-accent);background:#eff6ff;padding:2px 8px;border-radius:6px}
.su-page-banner__desc{font-size:1.05rem;color:rgba(255,255,255,.55);max-width:560px;line-height:1.7;margin-top:.5rem}
.su-news-card__body{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.su-news-card__title{font-size:1rem;font-weight:700;color:var(--su-text-dark);line-height:1.4}

.su-news-grid{grid-template-columns:repeat(4,1fr)!important}
@media(max-width:1100px){.su-news-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:600px){.su-news-grid{grid-template-columns:1fr!important}}
a.su-news-card{text-decoration:none;color:inherit}

.custom-logo-link img,.custom-logo{height:40px;width:auto;display:block}

.su-contact-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}
.su-contact-item>i{color:var(--su-accent);font-size:1.1rem;margin-top:2px;flex-shrink:0}
.su-contact-item__label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--su-text-muted);margin-bottom:.2rem}
.su-contact-item__value{font-size:.95rem;color:var(--su-text-dark)}
.su-contact-item__value a{color:var(--su-accent);text-decoration:none}
.su-contact-item__value a:hover{text-decoration:underline}

.su-hero-stats-row{margin-top:2.5rem!important}
.su-hs-pill__num{font-size:2rem;font-weight:900;color:white;line-height:1}
.su-hs-pill__label{font-size:.75rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-top:.2rem}

.su-eyebrow{display:inline-flex;align-items:center;gap:.45rem}
.su-checklist{margin:1rem 0}
.su-checklist li{display:flex;align-items:flex-start;gap:.6rem;line-height:1.5}

/* ── Trust bar marquee ─────────────────────────────────────────────── */
.su-trust-bar__track-wrap{overflow:hidden;width:100%;mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%)}
@keyframes su-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.su-trust-bar__track{display:flex;width:max-content;animation:su-marquee 28s linear infinite}
.su-trust-bar__track:hover{animation-play-state:paused}
.su-trust-bar__logo{display:inline-flex;align-items:center;gap:.45rem;padding:0 2rem;font-size:.88rem;font-weight:600;color:var(--su-text-muted);white-space:nowrap}
.su-trust-bar__logo i{color:var(--su-accent);opacity:.6}
.su-trust-bar__logo--img{padding:0 1.5rem}
.su-trust-bar__logo--img img{height:36px;width:auto;object-fit:contain;filter:grayscale(20%) opacity(0.85);transition:filter .2s ease}
.su-trust-bar__track:hover .su-trust-bar__logo--img img{filter:grayscale(0%) opacity(1)}

/* ── Contact Form 7 styling ────────────────────────────────────────── */
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],.wpcf7-form textarea,.wpcf7-form select{width:100%;padding:.75rem 1rem;border:1.5px solid #e2e8f0;border-radius:.75rem;font-family:'Inter',sans-serif;font-size:.95rem;color:#0f172a;background:#f8fafc;transition:border-color .2s,box-shadow .2s;outline:none;margin-bottom:.875rem}
.wpcf7-form input:focus,.wpcf7-form textarea:focus{border-color:#0066ff;box-shadow:0 0 0 3px rgba(0,102,255,.1);background:white}
.wpcf7-form textarea{min-height:130px;resize:vertical}
.wpcf7-form input[type=submit]{background:#0066ff;color:white;border:none;padding:.8rem 2rem;border-radius:9999px;font-weight:700;font-size:1rem;cursor:pointer;width:100%;font-family:'Inter',sans-serif;transition:all .25s}
.wpcf7-form input[type=submit]:hover{background:#0052cc;transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,102,255,.25)}
.wpcf7-not-valid-tip{color:#ef4444;font-size:.8rem;margin-top:-.5rem;margin-bottom:.5rem}
.wpcf7-response-output{border-radius:.75rem;padding:.75rem 1rem;margin-top:1rem;font-size:.9rem}
.wpcf7-mail-sent-ok{background:#f0fdf4;border-color:#10b981!important;color:#065f46}
.wpcf7-validation-errors{background:#fef2f2;border-color:#ef4444!important;color:#991b1b}

/* =====================================================
   BLOG LAYOUT — breadcrumbs, grid, sidebar, widgets
   ===================================================== */

/* Breadcrumbs */
.asu-breadcrumbs{background:#f1f5f9;border-bottom:1px solid rgba(0,0,0,.06);padding:.65rem 0;margin-top:80px}
.asu-breadcrumbs__list{display:flex;align-items:center;gap:.5rem;list-style:none;font-size:.8rem;flex-wrap:wrap}
.asu-breadcrumbs__item{color:var(--su-text-muted);display:flex;align-items:center;gap:.5rem}
.asu-breadcrumbs__item::after{content:'/';opacity:.4}
.asu-breadcrumbs__item:last-child::after{display:none}
.asu-breadcrumbs__item a{color:var(--su-accent);text-decoration:none}
.asu-breadcrumbs__item a:hover{text-decoration:underline}
.asu-breadcrumbs__item--current{font-weight:600;color:var(--su-text-dark)}

/* Blog wrap */
.asu-blog-wrap{background:#f8fafc;padding:3rem 0 5rem}
.asu-blog-layout{display:grid;grid-template-columns:1fr 300px;gap:2.5rem;align-items:flex-start}
@media(max-width:960px){.asu-blog-layout{grid-template-columns:1fr}}

/* Cards grid */
.asu-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:2.5rem}
@media(max-width:700px){.asu-cards-grid{grid-template-columns:1fr}}

/* Post card */
.asu-post-card{background:#fff;border-radius:1.25rem;border:1px solid rgba(0,0,0,.07);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.asu-post-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.1)}
.asu-post-card__img-link{display:block;flex-shrink:0}
.asu-post-card__img{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center}

/* Branded placeholder */
.asu-post-card__img--placeholder{background:linear-gradient(135deg,#000d24 0%,#001a3d 60%,#002a5d 100%);display:flex;align-items:center;justify-content:center;aspect-ratio:16/9}
.asu-placeholder-inner{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem}
.asu-placeholder__logo{width:72px;height:auto;filter:brightness(0) invert(1) opacity(.9)}
.asu-placeholder__name{color:#fff;font-size:.95rem;font-weight:700;letter-spacing:.03em;text-align:center}
.asu-placeholder__sub{color:rgba(255,255,255,.5);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;text-align:center}

/* Card body */
.asu-post-card__body{padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.asu-post-card__cat{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--su-accent);background:#eff6ff;padding:2px 9px;border-radius:6px;text-decoration:none;width:fit-content}
.asu-post-card__meta{font-size:.78rem;color:var(--su-text-muted);display:flex;align-items:center;gap:.35rem}
.asu-post-card__title{font-size:1.05rem;font-weight:700;line-height:1.35;flex:1}
.asu-post-card__title a{color:var(--su-text-dark);text-decoration:none;transition:color .2s}
.asu-post-card__title a:hover{color:var(--su-accent)}
.asu-post-card__excerpt{font-size:.875rem;color:var(--su-text-muted);line-height:1.6}
.asu-post-card__more{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:700;color:var(--su-accent);text-decoration:none;margin-top:.25rem;transition:gap .2s}
.asu-post-card__more:hover{gap:.6rem}

/* Pagination */
.asu-pagination{display:flex;justify-content:center;margin-top:1rem}
.asu-pagination .page-numbers{list-style:none;display:flex;gap:.5rem;align-items:center;padding:0;margin:0}
.asu-pagination .page-numbers li a,.asu-pagination .page-numbers li span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.75rem;border:1.5px solid rgba(0,0,0,.1);background:#fff;color:var(--su-text-dark);font-size:.875rem;font-weight:600;text-decoration:none;transition:all .2s}
.asu-pagination .page-numbers li .current{background:var(--su-accent);color:#fff;border-color:var(--su-accent)}
.asu-pagination .page-numbers li a:hover{background:var(--su-accent);color:#fff;border-color:var(--su-accent)}

/* No posts */
.asu-no-posts{text-align:center;padding:4rem 2rem;background:#fff;border-radius:1.25rem;color:var(--su-text-muted)}
.asu-no-posts i{font-size:3rem;display:block;margin-bottom:1rem;opacity:.35}

/* Sidebar */
.asu-blog-sidebar{display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:100px}
.asu-widget{background:#fff;border-radius:1.25rem;border:1px solid rgba(0,0,0,.07);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.asu-widget__title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--su-text-muted);padding:.9rem 1.25rem;border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;gap:.5rem;margin:0;background:#fafafa}
.asu-widget__body{padding:1.25rem}
.asu-widget__body--calendar{padding:.75rem}

/* Search form */
.search-form{display:flex;gap:.5rem}
.search-form label{flex:1}
.search-field{width:100%;padding:.65rem 1rem;border:1.5px solid #e2e8f0;border-radius:.75rem;font-family:'Inter',sans-serif;font-size:.875rem;outline:none;transition:border-color .2s}
.search-field:focus{border-color:var(--su-accent);box-shadow:0 0 0 3px rgba(0,102,255,.1)}
.search-submit{background:var(--su-accent);color:#fff;border:none;padding:.65rem 1rem;border-radius:.75rem;cursor:pointer;font-size:.875rem;transition:background .2s;white-space:nowrap}
.search-submit:hover{background:var(--su-accent-h)}

/* Calendar widget */
#wp-calendar{width:100%;border-collapse:collapse;font-size:.8rem}
#wp-calendar caption{font-weight:700;font-size:.8rem;color:var(--su-text-dark);padding-bottom:.5rem;text-align:center}
#wp-calendar th{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--su-text-muted);text-align:center;padding:.3rem 0}
#wp-calendar td{text-align:center;padding:.3rem 0;font-size:.8rem;color:var(--su-text-muted)}
#wp-calendar td a{color:var(--su-accent);font-weight:700;text-decoration:none;background:#eff6ff;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem}
#wp-calendar .pad{color:rgba(0,0,0,.15)}
#wp-calendar tfoot td a{color:var(--su-accent);text-decoration:none;font-size:.75rem}

/* Categories widget */
.asu-widget-cats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.1rem}
.asu-widget-cats li a{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;font-size:.875rem;color:var(--su-text-dark);text-decoration:none;border-radius:.5rem;transition:background .2s}
.asu-widget-cats li a:hover{background:#f1f5f9;color:var(--su-accent)}
.asu-widget-cats .children{margin-left:1rem}

/* Recent posts widget */
.asu-widget-recent{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.9rem}
.asu-widget-recent__item{display:flex;gap:.75rem;align-items:flex-start}
.asu-widget-recent__thumb{width:60px;height:46px;border-radius:.6rem;background-size:cover;background-position:center;flex-shrink:0;display:flex;align-items:center;justify-content:center;text-decoration:none}
.asu-widget-recent__thumb--ph{background:linear-gradient(135deg,#001a3d,#002a5d);color:rgba(255,255,255,.5);font-size:1rem}
.asu-widget-recent__info{display:flex;flex-direction:column;gap:.2rem}
.asu-widget-recent__title{font-size:.82rem;font-weight:600;color:var(--su-text-dark);text-decoration:none;line-height:1.35;transition:color .2s}
.asu-widget-recent__title:hover{color:var(--su-accent)}
.asu-widget-recent__date{font-size:.72rem;color:var(--su-text-muted)}

/* CTA widget */
.asu-widget--cta{background:linear-gradient(135deg,#000d24 0%,#001a3d 60%,#002a5d 100%)!important;border-color:rgba(255,255,255,.1)!important}
.asu-widget--cta .asu-widget__body{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:1.5rem}
.asu-widget-cta__logo{width:80px;height:auto;filter:brightness(0) invert(1) opacity(.9)}
.asu-widget-cta__text{color:rgba(255,255,255,.75);font-size:.85rem;text-align:center;line-height:1.5}


/* =====================================================
   LAYOUT COMPATIBILITY LAYER + BLOG STYLES v1.2
   ===================================================== */

/* ── Two-column layout ─────────────────────────────── */
.su-two-col{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.su-two-col__text{display:flex;flex-direction:column;gap:1rem}
.su-two-col__cards{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:900px){.su-two-col{grid-template-columns:1fr}.su-two-col__cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.su-two-col__cards{grid-template-columns:1fr}}

.su-cards-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.su-cards-4col{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media(max-width:1024px){.su-cards-4col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.su-cards-3col,.su-cards-4col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.su-cards-3col,.su-cards-4col{grid-template-columns:1fr}}

.su-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
@media(max-width:900px){.su-benefits-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.su-benefits-grid{grid-template-columns:1fr}}
.su-card--benefit{display:flex;flex-direction:column}

.su-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
@media(max-width:768px){.su-stats-grid{grid-template-columns:repeat(2,1fr)}}

.su-section-head{text-align:center;max-width:720px;margin:0 auto 3rem}
.su-section-head .su-lead{color:var(--su-text-muted);max-width:600px;margin:0 auto}
.su-section-head--row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;text-align:left;max-width:none;margin-bottom:2rem}

.su-news-card__img{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;border-radius:1rem 1rem 0 0;flex-shrink:0}
.su-news-card__date{font-size:.78rem;font-weight:600;color:var(--su-text-muted);letter-spacing:.04em}
.su-news-card__cat{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--su-accent);background:#eff6ff;padding:2px 8px;border-radius:6px}
.su-page-banner__desc{font-size:1.05rem;color:rgba(255,255,255,.55);max-width:560px;line-height:1.7;margin-top:.5rem}
.su-news-card__body{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.su-news-card__title{font-size:1rem;font-weight:700;color:var(--su-text-dark);line-height:1.4}
a.su-news-card{text-decoration:none;color:inherit}

.su-news-grid{grid-template-columns:repeat(4,1fr)!important}
@media(max-width:1100px){.su-news-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:600px){.su-news-grid{grid-template-columns:1fr!important}}
.archive .su-news-grid,.blog .su-news-grid{grid-template-columns:repeat(3,1fr)!important}

.custom-logo-link img,.custom-logo{height:40px;width:auto;display:block}

.su-contact-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}
.su-contact-item>i{color:var(--su-accent);font-size:1.1rem;margin-top:2px;flex-shrink:0}
.su-contact-item__label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--su-text-muted);margin-bottom:.2rem}
.su-contact-item__value{font-size:.95rem;color:var(--su-text-dark)}
.su-contact-item__value a{color:var(--su-accent);text-decoration:none}
.su-contact-item__value a:hover{text-decoration:underline}

.su-hero-stats-row{margin-top:2.5rem!important}
.su-hs-pill__num{font-size:2rem;font-weight:900;color:white;line-height:1}
.su-hs-pill__label{font-size:.75rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-top:.2rem}
.su-eyebrow{display:inline-flex;align-items:center;gap:.45rem}
.su-checklist{margin:1rem 0}
.su-checklist li{display:flex;align-items:flex-start;gap:.6rem;line-height:1.5}

/* ── Trust bar marquee ─────────────────────────────── */
.su-trust-bar__track-wrap{overflow:hidden;width:100%;mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%)}
@keyframes su-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.su-trust-bar__track{display:flex;width:max-content;animation:su-marquee 28s linear infinite}
.su-trust-bar__track:hover{animation-play-state:paused}
.su-trust-bar__logo{display:inline-flex;align-items:center;gap:.45rem;padding:0 2rem;font-size:.88rem;font-weight:600;color:var(--su-text-muted);white-space:nowrap}
.su-trust-bar__logo i{color:var(--su-accent);opacity:.6}
.su-trust-bar__logo--img{padding:0 1.5rem}
.su-trust-bar__logo--img img{height:36px;width:auto;object-fit:contain;filter:grayscale(20%) opacity(0.85);transition:filter .2s ease}
.su-trust-bar__track:hover .su-trust-bar__logo--img img{filter:grayscale(0%) opacity(1)}

/* ── Contact Form 7 ────────────────────────────────── */
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],.wpcf7-form textarea,.wpcf7-form select{width:100%;padding:.75rem 1rem;border:1.5px solid #e2e8f0;border-radius:.75rem;font-family:'Inter',sans-serif;font-size:.95rem;color:#0f172a;background:#f8fafc;transition:border-color .2s,box-shadow .2s;outline:none;margin-bottom:.875rem}
.wpcf7-form input:focus,.wpcf7-form textarea:focus{border-color:#0066ff;box-shadow:0 0 0 3px rgba(0,102,255,.1);background:white}
.wpcf7-form textarea{min-height:130px;resize:vertical}
.wpcf7-form input[type=submit]{background:#0066ff;color:white;border:none;padding:.8rem 2rem;border-radius:9999px;font-weight:700;font-size:1rem;cursor:pointer;width:100%;font-family:'Inter',sans-serif;transition:all .25s}
.wpcf7-form input[type=submit]:hover{background:#0052cc;transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,102,255,.25)}
.wpcf7-not-valid-tip{color:#ef4444;font-size:.8rem;margin-top:-.5rem;margin-bottom:.5rem}
.wpcf7-response-output{border-radius:.75rem;padding:.75rem 1rem;margin-top:1rem;font-size:.9rem}
.wpcf7-mail-sent-ok{background:#f0fdf4;border-color:#10b981!important;color:#065f46}
.wpcf7-validation-errors{background:#fef2f2;border-color:#ef4444!important;color:#991b1b}

/* ── Breadcrumbs inside dark banner (single post) ──── */
/* ── Breadcrumbs inside dark banner ─────────────────── */
.asu-breadcrumbs--inline {
  display: flex;
  margin: 0 0 1.1rem 0;
  padding: .35rem .9rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9999px;
  width: fit-content;
}
.asu-breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: .4rem;
  list-style: none;
  font-size: .75rem;
  font-weight: 500;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.asu-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.5);
}
.asu-breadcrumbs__item::after {
  content: '/';
  opacity: .35;
  font-size: .7rem;
}
.asu-breadcrumbs__item:last-child::after { display: none; }
.asu-breadcrumbs__item a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.asu-breadcrumbs__item a:hover { color: #fff; }
.asu-breadcrumbs__item--current {
  color: rgba(255,255,255,.85);
  font-weight: 600;
}

/* ── Blog layout ───────────────────────────────────── */
.asu-blog-wrap{background:#f8fafc;padding:3rem 0 5rem}
.asu-blog-layout{display:grid;grid-template-columns:1fr 300px;gap:2.5rem;align-items:flex-start}
@media(max-width:960px){.asu-blog-layout{grid-template-columns:1fr}}
.asu-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:2.5rem}
@media(max-width:700px){.asu-cards-grid{grid-template-columns:1fr}}

/* ── Post card ─────────────────────────────────────── */
.asu-post-card{background:#fff;border-radius:1.25rem;border:1px solid rgba(0,0,0,.07);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.asu-post-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.1)}
.asu-post-card__img-link{display:block;flex-shrink:0}
.asu-post-card__img{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center}
.asu-post-card__img--placeholder{background:linear-gradient(135deg,#000d24 0%,#001a3d 60%,#002a5d 100%);display:flex;align-items:center;justify-content:center;aspect-ratio:16/9}
.asu-placeholder-inner{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem}
.asu-placeholder__logo{width:72px;height:auto;filter:brightness(0) invert(1) opacity(.9)}
.asu-placeholder__name{color:#fff;font-size:.95rem;font-weight:700;letter-spacing:.03em;text-align:center}
.asu-placeholder__sub{color:rgba(255,255,255,.5);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;text-align:center}
.asu-post-card__body{padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.asu-post-card__cat{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--su-accent);background:#eff6ff;padding:2px 9px;border-radius:6px;text-decoration:none;width:fit-content}
.asu-post-card__meta{font-size:.78rem;color:var(--su-text-muted);display:flex;align-items:center;gap:.35rem}
.asu-post-card__title{font-size:1.05rem;font-weight:700;line-height:1.35;flex:1}
.asu-post-card__title a{color:var(--su-text-dark);text-decoration:none;transition:color .2s}
.asu-post-card__title a:hover{color:var(--su-accent)}
.asu-post-card__excerpt{font-size:.875rem;color:var(--su-text-muted);line-height:1.6}
.asu-post-card__more{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:700;color:var(--su-accent);text-decoration:none;margin-top:.25rem;transition:gap .2s}
.asu-post-card__more:hover{gap:.6rem}

/* ── Pagination ────────────────────────────────────── */
.asu-pagination{display:flex;justify-content:center;margin-top:1rem}
.asu-pagination .page-numbers{list-style:none;display:flex;gap:.5rem;align-items:center;padding:0;margin:0}
.asu-pagination .page-numbers li a,.asu-pagination .page-numbers li span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.75rem;border:1.5px solid rgba(0,0,0,.1);background:#fff;color:var(--su-text-dark);font-size:.875rem;font-weight:600;text-decoration:none;transition:all .2s}
.asu-pagination .page-numbers li .current{background:var(--su-accent);color:#fff;border-color:var(--su-accent)}
.asu-pagination .page-numbers li a:hover{background:var(--su-accent);color:#fff;border-color:var(--su-accent)}
.asu-no-posts{text-align:center;padding:4rem 2rem;background:#fff;border-radius:1.25rem;color:var(--su-text-muted)}
.asu-no-posts i{font-size:3rem;display:block;margin-bottom:1rem;opacity:.35}

/* ── Sidebar & widgets ─────────────────────────────── */
.asu-blog-sidebar{display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:100px}
.asu-widget{background:#fff;border-radius:1.25rem;border:1px solid rgba(0,0,0,.07);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.asu-widget__title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--su-text-muted);padding:.9rem 1.25rem;border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;gap:.5rem;margin:0;background:#fafafa}
.asu-widget__body{padding:1.25rem}
.asu-widget__body--calendar{padding:.75rem}

/* Search */
.search-form{display:flex;gap:.5rem}
.search-form label{flex:1}
.search-field{width:100%;padding:.65rem 1rem;border:1.5px solid #e2e8f0;border-radius:.75rem;font-family:'Inter',sans-serif;font-size:.875rem;outline:none;transition:border-color .2s}
.search-field:focus{border-color:var(--su-accent);box-shadow:0 0 0 3px rgba(0,102,255,.1)}
.search-submit{background:var(--su-accent);color:#fff;border:none;padding:.65rem 1rem;border-radius:.75rem;cursor:pointer;font-size:.875rem;transition:background .2s;white-space:nowrap}
.search-submit:hover{background:var(--su-accent-h)}

/* Calendar */
#wp-calendar{width:100%;border-collapse:collapse;font-size:.8rem}
#wp-calendar caption{font-weight:700;font-size:.8rem;color:var(--su-text-dark);padding-bottom:.5rem;text-align:center}
#wp-calendar th{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--su-text-muted);text-align:center;padding:.3rem 0}
#wp-calendar td{text-align:center;padding:.3rem 0;font-size:.8rem;color:var(--su-text-muted)}
#wp-calendar td a{color:var(--su-accent);font-weight:700;text-decoration:none;background:#eff6ff;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem}
#wp-calendar .pad{color:rgba(0,0,0,.15)}
#wp-calendar tfoot td a{color:var(--su-accent);text-decoration:none;font-size:.75rem}

/* ── Рубрики (categories) with count on the right ──── */
.asu-widget-cats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.1rem}
.asu-widget-cats li>a{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;font-size:.875rem;color:var(--su-text-dark);text-decoration:none;border-radius:.5rem;transition:background .2s;gap:.5rem}
.asu-widget-cats li>a:hover{background:#f1f5f9;color:var(--su-accent)}
.asu-cat-count{font-size:.7rem;font-weight:700;background:#eff6ff;color:var(--su-accent);padding:1px 8px;border-radius:99px;margin-left:auto;flex-shrink:0;white-space:nowrap;line-height:1.6}

/* Recent posts widget */
.asu-widget-recent{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.9rem}
.asu-widget-recent__item{display:flex;gap:.75rem;align-items:flex-start}
.asu-widget-recent__thumb{width:60px;height:46px;border-radius:.6rem;background-size:cover;background-position:center;flex-shrink:0;display:flex;align-items:center;justify-content:center;text-decoration:none}
.asu-widget-recent__thumb--ph{background:linear-gradient(135deg,#001a3d,#002a5d);color:rgba(255,255,255,.5);font-size:1rem}
.asu-widget-recent__info{display:flex;flex-direction:column;gap:.2rem}
.asu-widget-recent__title{font-size:.82rem;font-weight:600;color:var(--su-text-dark);text-decoration:none;line-height:1.35;transition:color .2s}
.asu-widget-recent__title:hover{color:var(--su-accent)}
.asu-widget-recent__date{font-size:.72rem;color:var(--su-text-muted)}

/* CTA widget */
.asu-widget--cta{background:linear-gradient(135deg,#000d24 0%,#001a3d 60%,#002a5d 100%)!important;border-color:rgba(255,255,255,.1)!important}
.asu-widget--cta .asu-widget__body{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:1.5rem}
.asu-widget-cta__logo{width:80px;height:auto;filter:brightness(0) invert(1) opacity(.9)}
.asu-widget-cta__text{color:rgba(255,255,255,.75);font-size:.85rem;text-align:center;line-height:1.5}

/* ══════════════════════════════════════════════════════════════════
   PRIVACY POLICY PAGE
   ══════════════════════════════════════════════════════════════════ */

.su-privacy-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .su-privacy-layout { grid-template-columns: 1fr; }
  .su-privacy-toc { display: none; }
}

/* Sticky sidebar TOC */
.su-privacy-toc {
  position: sticky;
  top: 5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
}
.su-privacy-toc__title {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #94a3b8;
  margin-bottom: 1rem;
}
.su-privacy-toc nav { display: flex; flex-direction: column; gap: .3rem; }
.su-privacy-toc nav a {
  font-size: .82rem;
  color: #475569;
  text-decoration: none;
  padding: .3rem .5rem;
  border-radius: .4rem;
  transition: background .15s, color .15s;
  line-height: 1.4;
}
.su-privacy-toc nav a:hover {
  background: #e2e8f0;
  color: #0066ff;
}

/* Article content */
.su-privacy-content { min-width: 0; }

.su-privacy-notice {
  display: flex;
  gap: 1rem;
  background: #eff6ff;
  border-left: 4px solid #0066ff;
  border-radius: 0 .75rem .75rem 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
  font-size: .9rem;
  line-height: 1.65;
  color: #1e40af;
}
.su-privacy-notice i { color: #0066ff; font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }
.su-privacy-notice p { margin: 0; }

.su-privacy-section {
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #f1f5f9;
}
.su-privacy-section:last-child { border-bottom: none; }

.su-privacy-section h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0d1b3e;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid #e2e8f0;
}
.su-privacy-section h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 1.5rem 0 .75rem;
}
.su-privacy-section p {
  font-size: .95rem;
  line-height: 1.75;
  color: #334155;
  margin-bottom: 1rem;
}
.su-privacy-section ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.su-privacy-section ul li {
  font-size: .95rem;
  line-height: 1.75;
  color: #334155;
  margin-bottom: .4rem;
}
.su-privacy-section a { color: #0066ff; }
.su-privacy-section a:hover { text-decoration: underline; }

/* Cards */
.su-privacy-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  overflow: hidden;
  margin: 1.25rem 0;
}
.su-privacy-card--legal { border-left: 4px solid #0066ff; }
.su-privacy-card--contact { padding: 1.5rem; }

/* Table */
.su-privacy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.su-privacy-table th,
.su-privacy-table td {
  padding: .75rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
  line-height: 1.6;
  color: #334155;
}
.su-privacy-table th {
  font-weight: 700;
  color: #0d1b3e;
  white-space: nowrap;
  width: 200px;
  background: #f1f5f9;
}
.su-privacy-table thead th {
  background: #0d1b3e;
  color: white;
}
.su-privacy-table tr:last-child th,
.su-privacy-table tr:last-child td { border-bottom: none; }

/* Rights grid */
.su-privacy-rights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
}
@media (max-width: 700px) {
  .su-privacy-rights-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .su-privacy-rights-grid { grid-template-columns: 1fr; }
}
.su-privacy-right-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: .875rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.su-privacy-right-item i {
  font-size: 1.25rem;
  color: #0066ff;
}
.su-privacy-right-item strong {
  font-size: .9rem;
  color: #0d1b3e;
  font-weight: 700;
}
.su-privacy-right-item p {
  font-size: .82rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE UX OVERHAUL — v4.0
   Principles: 8px grid, consistent alignment, 52px touch targets,
   clear visual hierarchy, generous whitespace.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. CONTAINER: tighter padding on small screens ─────────────── */
@media (max-width: 480px) {
  .container,
  .su-container {
    padding: 0 1rem;
  }
}

/* ── 2. NAVBAR: clean mobile header ─────────────────────────────── */
@media (max-width: 960px) {
  .navbar-header {
    height: 64px;
  }
  /* Hide desktop nav & CTA on mobile */
  .nav-menu,
  .nav-cta-btn {
    display: none !important;
  }
  /* Show hamburger */
  .hbg-btn {
    display: flex !important;
  }
  .logo img {
    height: 34px;
  }
}

/* ── 3. SECTION PADDING: breathe on mobile ───────────────────────── */
@media (max-width: 768px) {
  .su-section {
    padding: 64px 0;
  }
  .su-page-banner {
    padding: 80px 0 40px;
  }
  .su-page-banner__title {
    font-size: 2rem;
    line-height: 1.15;
  }
  .su-page-banner__desc {
    font-size: .9rem;
  }
}
@media (max-width: 480px) {
  .su-section {
    padding: 48px 0;
  }
  .su-page-banner {
    padding: 72px 0 32px;
  }
  .su-page-banner__title {
    font-size: 1.75rem;
  }
}

/* ── 4. TYPOGRAPHY SCALE on mobile ──────────────────────────────── */
@media (max-width: 768px) {
  .su-title {
    font-size: 1.75rem;
    letter-spacing: -.02em;
  }
  .su-lead {
    font-size: 1rem;
  }
}
@media (max-width: 480px) {
  .su-title {
    font-size: 1.5rem;
  }
}

/* ── 5. SECTION HEADINGS: consistent with design system ─────────── */
@media (max-width: 768px) {
  .su-section-head {
    margin-bottom: 2rem;
  }
  .su-section-head .su-eyebrow {
    margin-bottom: .875rem;
  }
}

/* ── 6. BUTTONS: full-width & accessible touch targets ──────────── */
@media (max-width: 480px) {
  /* All CTA button groups stack on small screens */
  .su-hero-btns,
  .su-cta-btns {
    flex-direction: column;
    width: 100%;
    gap: .75rem;
  }
  .su-hero-btns .su-btn,
  .su-cta-btns .su-btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 1rem;
  }
  /* Individual buttons stay pill-shaped but get bigger hit area */
  .su-btn {
    min-height: 48px;
    padding: 0 1.5rem;
  }
  .su-btn--sm {
    min-height: 40px;
  }
}

/* ── 7. CTA SECTION: fix massive padding and font sizes ─────────── */
@media (max-width: 768px) {
  .su-cta-section {
    padding: 64px 0;
  }
  .su-cta-title {
    font-size: 2rem;
  }
  .su-cta-lead {
    font-size: .95rem;
  }
}
@media (max-width: 480px) {
  .su-cta-section {
    padding: 48px 0;
  }
  .su-cta-title {
    font-size: 1.75rem;
  }
}

/* ── 8. HOME "ABOUT" TWO-COLUMN SECTION ─────────────────────────── */
@media (max-width: 900px) {
  /* Stack text left, cards right */
  .su-two-col {
    grid-template-columns: 1fr !important;
    gap: 2.5rem;
  }
  /* "Детальніше" button: full-width on mobile */
  .su-two-col .su-btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 540px) {
  .su-two-col__cards {
    grid-template-columns: 1fr !important;
  }
}

/* ── 9. BENEFITS / COMMITTEE CARDS: single column on phones ──────── */
@media (max-width: 480px) {
  .su-benefits-grid,
  .su-cards-3col,
  .su-cards-4col,
  .su-cards-grid {
    grid-template-columns: 1fr !important;
  }
  /* Give cards a bit less padding on small screens */
  .su-card {
    padding: 1.25rem;
  }
  .su-card__icon,
  .su-benefits-icon {
    width: 3rem !important;
    height: 3rem !important;
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
  }
}

/* ── 10. STATS GRID ON HOME (stand-alone section) ────────────────── */
@media (max-width: 480px) {
  .su-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
  }
  .su-stat__num {
    font-size: 2rem;
  }
}

/* ── 11. NEWS CARDS ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .su-news-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .su-news-card {
    border-radius: 1rem;
  }
  .su-news-card__body {
    padding: 1.25rem;
  }
  .su-news-card__title {
    font-size: 1rem;
  }
}

/* ── 12. TRUST BAR: fix logo height overflow ──────────────────────── */
@media (max-width: 640px) {
  .su-trust-bar {
    padding: 24px 0;
  }
  .su-trust-bar__logo--img img {
    height: 28px;
  }
  .su-trust-bar__logo--img {
    padding: 0 1rem;
  }
  /* Slow marquee slightly so logos are readable */
  .su-trust-bar__track {
    animation-duration: 22s;
  }
}

/* ── 13. FOOTER: consistent mobile layout ────────────────────────── */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 540px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .footer-brand {
    grid-column: auto;
  }
}
@media (max-width: 480px) {
  footer.footer {
    padding-top: 48px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: .75rem;
  }
  .footer-bottom-links {
    justify-content: center;
  }
  .footer-logo {
    height: 36px;
  }
}

/* ── 14. CONTACT PAGE: stack form and contacts ───────────────────── */
@media (max-width: 768px) {
  .su-two-col[style*="align-items:flex-start"] {
    gap: 2.5rem;
  }
}

/* ── 15. INNER PAGE CARDS (about, groups, members) ───────────────── */
@media (max-width: 540px) {
  .su-article-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .su-article-sidebar {
    position: static !important;
  }
}

/* ── 16. PRIVACY PAGE: mobile TOC ────────────────────────────────── */
@media (max-width: 900px) {
  .su-privacy-layout {
    grid-template-columns: 1fr;
  }
  .su-privacy-toc {
    display: none;
  }
  .su-privacy-table th {
    width: auto;
    white-space: normal;
    min-width: 100px;
  }
  .su-privacy-table th,
  .su-privacy-table td {
    padding: .625rem 1rem;
    font-size: .82rem;
  }
}
@media (max-width: 600px) {
  /* Stack table on very small screens */
  .su-privacy-table,
  .su-privacy-table tbody,
  .su-privacy-table tr,
  .su-privacy-table th,
  .su-privacy-table td {
    display: block;
    width: 100%;
  }
  .su-privacy-table th {
    background: #f1f5f9;
    font-size: .72rem;
    padding: .5rem 1rem .25rem;
    border-bottom: none;
    color: #64748b;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .su-privacy-table td {
    padding: .25rem 1rem .75rem;
    border-bottom: 1px solid #e2e8f0;
  }
  .su-privacy-section h2 {
    font-size: 1.15rem;
  }
}

/* ── 17. PAGE BANNER on members/groups/about ──────────────────────── */
@media (max-width: 480px) {
  .su-page-banner__eyebrow {
    font-size: .65rem;
  }
}

/* ── 18. FIX: nav-actions on mobile — hide CTA text, keep hamburger ─ */
@media (max-width: 960px) {
  .nav-cta-btn {
    display: none !important;
  }
}

/* ── 19. SECTION EYEBROW: always centered in section heads ──────────*/
.su-section-head .su-eyebrow {
  display: inline-flex;
}
.su-section-head {
  text-align: center;
}

/* ── 20. GLOBAL: smooth scrolling & tap highlight ────────────────── */
html {
  scroll-behavior: smooth;
}
* {
  -webkit-tap-highlight-color: transparent;
}
a, button {
  touch-action: manipulation;
}

/* ── 21. NEWS SECTION HEAD ROW: stack on mobile ──────────────────── */
@media (max-width: 640px) {
  .su-section-head--row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .su-section-head--row .su-btn {
    align-self: flex-start;
  }
}

/* ── 22. NEWS CARDS: consistent image height on mobile ────────────── */
@media (max-width: 640px) {
  .su-news-card__img {
    height: 180px !important;
  }
}

/* ── 23. HOME-ABOUT BUTTONS: consistent spacing ─────────────────── */
@media (max-width: 540px) {
  .su-two-col__text .su-hero-btns {
    flex-direction: column;
    width: 100%;
  }
  .su-two-col__text .su-hero-btns .su-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── 24. BENEFITS SECTION: CTA button full-width on mobile ────────── */
@media (max-width: 480px) {
  .su-benefits-grid + div {
    text-align: center;
    margin-top: 2rem;
  }
  .su-benefits-grid + div .su-btn {
    width: 100%;
    max-width: 320px;
  }
}

/* ── 25. HOME COMMITTEES SECTION LINK ───────────────────────────── */
@media (max-width: 480px) {
  .su-committees-footer,
  [style*="text-align:center"] > .su-btn {
    display: block;
    width: fit-content;
    margin: 0 auto;
  }
}

/* ── 26. TRUST BAR LABEL: proper mobile spacing ─────────────────── */
@media (max-width: 480px) {
  .su-trust-bar__label {
    font-size: .65rem;
    margin-bottom: 1rem;
  }
}

/* ── 27. CARD HOVER: no hover flicker on touch ───────────────────── */
@media (hover: none) {
  .su-card:hover,
  .su-news-card:hover {
    transform: none;
    box-shadow: inherit;
  }
}

/* ── 28. HERO: ensure eyebrow tag visible on narrow screens ────────── */
@media (max-width: 480px) {
  .su-eyebrow {
    font-size: .65rem;
    padding: .3rem .875rem;
  }
}

/* ── FIX: CTA buttons unblocked ─────────────────────────────────── */
/* The ::before pseudo-element (dot grid overlay) had pointer-events:auto  */
/* which blocked all clicks to buttons underneath. Fixed here.            */
.su-cta-section::before { pointer-events: none !important; }
.su-cta-section .su-container,
.su-cta-section .container { position: relative !important; z-index: 2 !important; }
.su-cta-section a.su-btn,
.su-cta-section button { position: relative !important; z-index: 3 !important; pointer-events: auto !important; }