/* =============================================
   ALBATO-INSPIRED THEME
   ============================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* --- CSS Variables --- */
:root {
  --albato-primary: #5170ff;
  --albato-primary-hover: #004aad;
  --albato-dark: #004aad;
  --albato-text: #333;
  --albato-text-light: #666;
  --albato-text-muted: #999;
  --albato-bg: #ffffff;
  --albato-bg-light: #f0f4ff;
  --albato-bg-section: #f6f8ff;
  --albato-border: #e8e8e8;
  --albato-radius: 12px;
  --albato-radius-lg: 20px;
  --albato-radius-pill: 50px;
  --albato-shadow: 0 2px 20px rgba(0,0,0,0.06);
  --albato-shadow-lg: 0 8px 40px rgba(0,0,0,0.1);
  --albato-transition: all 0.3s ease;
}

/* --- Global Overrides --- */
.albato-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--albato-text);
  line-height: 1.6;
  background: var(--albato-bg);
  overflow-x: hidden;
}
.albato-page * {
  box-sizing: border-box;
}

/* --- Section Wrapper --- */
.albato-section {
  padding: 80px 0;
  position: relative;
}
.albato-section--light {
  background: var(--albato-bg-light);
}
.albato-section--white {
  background: var(--albato-bg);
}

/* --- Container --- */
.albato-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Section Headings --- */
.albato-section-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--albato-dark);
  margin-bottom: 16px;
}
.albato-section-subtitle {
  font-size: 18px;
  color: var(--albato-text-light);
  max-width: 600px;
  line-height: 1.6;
}
.albato-section-header {
  text-align: center;
  margin-bottom: 50px;
}
.albato-section-header .albato-section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* --- Buttons --- */
.albato-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 30px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
  position: relative;
}
.albato-btn--primary {
  background: var(--albato-dark);
  color: #fff;
  border-color: var(--albato-dark);
  box-shadow: 0 1px 3px rgba(0, 74, 173, 0.15);
}
.albato-btn--primary:hover {
  background: var(--albato-primary);
  border-color: var(--albato-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 74, 173, 0.2);
  transform: translateY(-1px);
}
.albato-btn--outline {
  background: transparent;
  color: var(--albato-dark);
  border-color: #d0d5dd;
}
.albato-btn--outline:hover {
  border-color: var(--albato-dark);
  background: rgba(0, 74, 173, 0.04);
  color: var(--albato-dark);
}
.albato-btn--white {
  background: #fff;
  color: var(--albato-dark);
  border-color: rgba(255,255,255,0.9);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.albato-btn--white:hover {
  background: #f8f9fb;
  color: var(--albato-primary);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
.albato-btn--sm {
  padding: 9px 20px;
  font-size: 13px;
}
.albato-btn--lg {
  padding: 15px 36px;
  font-size: 16px;
}

/* =============================================
   HEADER
   ============================================= */
.albato-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #f5f5f5;
  border-bottom: none;
  padding: 0 48px;
}
@media (max-width: 768px) {
  .albato-header {
    padding: 0 16px;
  }
  .albato-header__inner {
    height: 56px;
  }
  .albato-header__logo img {
    height: 44px;
  }
}
.albato-header__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 72px;
  gap: 0;
}
.albato-header__logo {
  flex-shrink: 0;
}
.albato-header__logo img {
  height: 60px;
  width: auto;
}
.albato-header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.albato-header__nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--albato-text);
  text-decoration: none;
  transition: var(--albato-transition);
}
.albato-header__nav a:hover {
  color: var(--albato-primary);
}
.albato-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  margin-left: auto;
}
.albato-header__login-btn {
  font-size: 14px;
  font-weight: 500;
  color: var(--albato-dark);
  text-decoration: none;
  border: 1.5px solid var(--albato-border);
  border-radius: 8px;
  padding: 8px 24px;
  transition: var(--albato-transition);
  white-space: nowrap;
}
.albato-header__login-btn:hover {
  background: var(--albato-primary);
  border-color: var(--albato-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(81, 112, 255, 0.3);
}

/* Mobile menu toggle */
.albato-header__mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.albato-header__mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--albato-dark);
  margin: 5px 0;
  transition: var(--albato-transition);
}

/* NavMenu integration in Albato header */
.albato-header .navbar {
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.albato-header .navbar-collapse {
  flex-grow: 0;
}
.albato-header .navbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-direction: row;
}
.albato-header .navbar-nav .nav-item {
  white-space: nowrap;
}
.albato-header .navbar-nav .nav-link {
  font-size: 15px;
  font-weight: 400;
  color: #444;
  padding: 8px 14px;
  transition: var(--albato-transition);
  letter-spacing: -0.01em;
}
.albato-header .navbar-nav .nav-link:hover {
  color: var(--albato-dark);
}
.albato-header .navbar-toggler {
  display: none;
  width: 38px;
  height: 38px;
  position: relative;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  z-index: 1002;
  order: 3;
  margin-left: auto;
}
.albato-header .navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}
.albato-header .navbar-toggler span,
.albato-header .navbar-toggler::before,
.albato-header .navbar-toggler::after {
  content: '';
  position: absolute;
  left: 6px;
  width: 26px;
  height: 2.5px;
  background: var(--albato-dark, #1a1a2e);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.albato-header .navbar-toggler::before {
  top: 9px;
}
.albato-header .navbar-toggler span {
  top: 50%;
  margin-top: -1.25px;
}
.albato-header .navbar-toggler::after {
  bottom: 9px;
}

/* Mobile overlay */
.albato-header .mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1000;
  backdrop-filter: blur(2px);
}

/* Mobile slide-in panel */
@media (max-width: 1024px) {
  .albato-header .navbar-toggler {
    display: block;
  }
  .albato-header .navbar {
    order: 3;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .albato-header .navbar-collapse {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 300px;
    max-width: calc(100vw - 60px);
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    background: #fff;
    z-index: 1001;
    display: block !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    padding: 20px 0;
    box-shadow: none;
    flex-grow: 1;
  }
  .albato-header .navbar-collapse.show {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  }
  .albato-header .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .albato-header .navbar-nav .nav-item {
    white-space: normal;
  }
  .albato-header .navbar-nav .nav-link {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    border-bottom: 1px solid #f2f2f2;
  }
  .albato-header .navbar-nav .nav-link:hover {
    background: #f8f9ff;
    color: var(--albato-primary, #5170ff);
  }
  .albato-header .navbar-nav .logo {
    padding: 10px 20px 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 8px;
  }
  .albato-header .navbar-nav .logo img {
    height: 40px;
    width: auto;
  }
  .albato-header__actions {
    order: 2;
    margin-left: 0;
  }
}

/* Mobile menu footer (Privacy, Terms, FAQ, contact) */
.albato-mobile-footer {
  margin-top: auto;
  padding: 20px 24px 16px;
  border-top: 1px solid #f0f0f0;
}
.albato-mobile-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.albato-mobile-footer__links li {
  list-style: none;
}
.albato-mobile-footer__links a {
  font-size: 13px;
  font-weight: 500;
  color: #666;
  text-decoration: none;
  transition: color 0.2s;
}
.albato-mobile-footer__links a:hover {
  color: var(--albato-primary, #5170ff);
}
.albato-mobile-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.albato-mobile-footer__contact a {
  font-size: 13px;
  color: #888;
  text-decoration: none;
}
.albato-mobile-footer__contact a:hover {
  color: var(--albato-primary, #5170ff);
}

/* =============================================
   HERO SECTION
   ============================================= */
.albato-hero {
  padding: 80px 0 60px;
  text-align: center;
  background: var(--albato-bg);
  position: relative;
  overflow: hidden;
}
.albato-hero--has-video {
  background: transparent;
}
.albato-hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  animation: heroVideoFadeIn 1.2s ease-out forwards;
}
@keyframes heroVideoFadeIn {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}
.albato-hero--has-video .albato-container {
  position: relative;
  z-index: 2;
}

/* Mobile background image (hidden on desktop, shown on mobile) */
.albato-hero__mobile-bg {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
@media (max-width: 768px) {
  .albato-hero__video {
    display: none !important;
  }
  .albato-hero--has-mobile-bg .albato-hero__mobile-bg {
    display: block;
  }
  .albato-hero--has-mobile-bg {
    background: linear-gradient(165deg, #f0f4ff 0%, #dce4ff 35%, #c7d4ff 70%, #e8edff 100%);
  }
  .albato-hero--has-mobile-bg .albato-container {
    position: relative;
    z-index: 2;
  }
}
.albato-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  border-radius: var(--albato-radius-pill);
  padding: 6px 16px;
  font-size: 14px;
  color: var(--albato-text-light);
  margin-bottom: 24px;
}
.albato-hero__title {
  font-size: 56px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--albato-dark);
  max-width: 700px;
  margin: 0 auto 16px;
}
.albato-hero__subtitle {
  font-size: 18px;
  color: var(--albato-text-light);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.albato-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
/* Email form */
.albato-hero__email-form {
  max-width: 600px;
  margin: 0 auto 40px;
}
.albato-hero__form {
  display: flex;
  align-items: center;
  border: 1.5px solid #ddd;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  padding: 6px 6px 6px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.albato-hero__form:focus-within {
  border-color: var(--albato-primary);
  box-shadow: 0 0 0 3px rgba(81, 112, 255, 0.08);
}
.albato-hero__email-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  color: #333;
  background: transparent;
  padding: 14px 0;
}
.albato-hero__email-input::placeholder {
  color: #aaa;
}
.albato-hero__email-btn {
  background: var(--albato-dark);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 3px rgba(0, 74, 173, 0.15);
}
.albato-hero__email-btn:hover {
  background: var(--albato-primary);
  box-shadow: 0 4px 12px rgba(0, 74, 173, 0.2);
}
.albato-hero__features {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}
.albato-hero__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}
.albato-hero__features li svg {
  color: #333;
  flex-shrink: 0;
}
.albato-hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.albato-hero__trust-avatars {
  display: flex;
  align-items: center;
}
.albato-hero__trust-avatars img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  object-fit: cover;
}
.albato-hero__trust-avatars img:first-child {
  margin-left: 0;
}
.albato-hero__trust-text {
  font-size: 14px;
  color: var(--albato-text-light);
}
.albato-hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding-top: 40px;
  flex-wrap: wrap;
}
.albato-hero__stat {
  text-align: center;
}
.albato-hero__stat-value {
  font-size: 36px;
  font-weight: 800;
  color: var(--albato-dark);
  line-height: 1.2;
}
.albato-hero__stat-label {
  font-size: 14px;
  color: var(--albato-text-muted);
  margin-top: 4px;
}

/* =============================================
   WORKFLOW BUILDER / APP CONNECTOR
   ============================================= */
.albato-workflow {
  padding: 80px 0;
  background: var(--albato-bg);
}
.albato-workflow__card {
  background: #fff;
  border: 1px solid var(--albato-border);
  border-radius: var(--albato-radius-lg);
  padding: 40px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: var(--albato-shadow);
}
.albato-workflow__card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--albato-dark);
  margin-bottom: 4px;
}
.albato-workflow__card-sub {
  font-size: 14px;
  color: var(--albato-text-muted);
  margin-bottom: 24px;
}
.albato-workflow__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: end;
  margin-bottom: 24px;
}
.albato-workflow__grid-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.albato-workflow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--albato-text-muted);
  padding-bottom: 12px;
}
.albato-workflow__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--albato-text);
  margin-bottom: 4px;
}
.albato-workflow__select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--albato-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--albato-text);
  background: #fff;
  outline: none;
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.albato-workflow__select:focus {
  border-color: var(--albato-primary);
}
.albato-workflow__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.albato-workflow__steps {
  display: flex;
  align-items: center;
  gap: 8px;
}
.albato-workflow__step {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--albato-text-muted);
  cursor: pointer;
  transition: var(--albato-transition);
}
.albato-workflow__step:hover,
.albato-workflow__step--active {
  background: var(--albato-primary);
  color: #fff;
}
.albato-workflow__step--add {
  border: 2px dashed var(--albato-border);
  background: transparent;
  font-size: 16px;
}
.albato-workflow__info {
  font-size: 13px;
  color: var(--albato-text-muted);
  text-align: center;
  margin-top: 16px;
}
.albato-workflow__info a {
  color: var(--albato-primary);
  text-decoration: none;
}

/* =============================================
   PROBLEM CARDS (Tired of tedious tasks?)
   ============================================= */
.albato-problems {
  padding: 100px 0 80px;
  background: #fff;
}
.albato-problems__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.albato-problem-card {
  background: #fafafa;
  border: none;
  border-radius: 16px;
  padding: 36px 28px 32px;
  text-align: left;
  transition: var(--albato-transition);
}
.albato-problem-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}
.albato-problem-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.albato-problem-card__icon--green { background: #e8f5e9; color: #2e7d32; }
.albato-problem-card__icon--blue { background: #e3f2fd; color: #1565c0; }
.albato-problem-card__icon--purple { background: #f3e5f5; color: #7b1fa2; }
.albato-problem-card__icon--orange { background: #fff3e0; color: #e65100; }
.albato-problem-card__icon--teal { background: #e0f2f1; color: #00695c; }
.albato-problem-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--albato-dark);
  margin-bottom: 8px;
}
.albato-problem-card__text {
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 1.65;
  margin: 0;
}

/* =============================================
   HIGHLIGHTS STRIP (BlockFeatureSeven)
   ============================================= */
.albato-highlights {
  padding: 48px 0;
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.albato-highlights__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
}
.albato-highlights__item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.albato-highlights__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.albato-highlights__text {
  font-size: 17px;
  font-weight: 700;
  color: var(--albato-dark);
  line-height: 1.35;
  max-width: 200px;
}
@media (max-width: 768px) {
  .albato-highlights__grid {
    flex-direction: column;
    gap: 28px;
    align-items: flex-start;
    padding-left: 16px;
  }
}

/* =============================================
   SHOWCASE SECTION (BlockFeatureEight)
   ============================================= */
.albato-showcase {
  padding: 100px 0 80px;
  background: #fff;
  text-align: center;
}
.albato-showcase__title {
  font-size: 42px;
  font-weight: 900;
  color: var(--albato-dark);
  line-height: 1.25;
  margin-bottom: 16px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.albato-showcase__subtitle {
  font-size: 17px;
  font-weight: 400;
  color: #555;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto;
}
.albato-showcase__screenshot {
  margin-top: 56px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.albato-showcase__screenshot img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8e8e8;
}
@media (max-width: 768px) {
  .albato-showcase {
    padding: 60px 0 40px;
  }
  .albato-showcase__title {
    font-size: 28px;
  }
  .albato-showcase__screenshot {
    margin-top: 32px;
  }
}

/* =============================================
   FEATURE BLOCKS (BlockFeatureNine)
   ============================================= */
.albato-features {
  margin: 0;
}
.albato-feature-block {
  padding: 100px 0;
  background: #fff;
}
.albato-feature-block--gray {
  background: #f5f5f5;
}
.albato-feature-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.albato-feature-block__grid--reverse {
  direction: ltr;
}
.albato-feature-block__image img {
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
}
.albato-feature-block__label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--albato-primary);
  margin-bottom: 16px;
}
.albato-feature-block__title {
  font-size: 44px;
  font-weight: 900;
  color: var(--albato-dark);
  line-height: 1.15;
  margin-bottom: 20px;
}
.albato-feature-block__text {
  font-size: 16px;
  font-weight: 400;
  color: #555;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 480px;
}
@media (max-width: 991px) {
  .albato-feature-block {
    padding: 60px 0;
  }
  .albato-feature-block__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .albato-feature-block__title {
    font-size: 32px;
  }
  .albato-feature-block__image img {
    max-width: 100%;
  }
}

/* =============================================
   TRADE MANUAL CTA
   ============================================= */
.albato-trade-cta {
  padding: 60px 0;
  text-align: center;
  background: var(--albato-bg);
}
.albato-trade-cta__icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.albato-trade-cta__title {
  font-size: 36px;
  font-weight: 800;
  color: var(--albato-dark);
  margin-bottom: 8px;
}
.albato-trade-cta__subtitle {
  font-size: 16px;
  color: var(--albato-text-light);
  margin-bottom: 24px;
}

/* =============================================
   ANALYTICS DASHBOARD SECTION
   ============================================= */
.albato-analytics {
  padding: 100px 0 60px;
  background: #fff;
  text-align: center;
}
.albato-analytics .albato-section-title {
  font-size: 42px;
  font-weight: 400;
  color: var(--albato-dark);
  line-height: 1.3;
}
.albato-analytics .albato-section-title strong {
  font-weight: 800;
}
.albato-analytics__screenshot {
  margin-top: 48px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.albato-analytics__screenshot img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}

/* =============================================
   HOW IT WORKS
   ============================================= */
.albato-how-it-works {
  padding: 80px 0;
  background: var(--albato-bg-light);
}
.albato-how-it-works__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.albato-how-it-works__image img {
  width: 100%;
  border-radius: var(--albato-radius-lg);
}
.albato-how-it-works__steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.albato-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.albato-step__number {
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--albato-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.albato-step__text {
  font-size: 16px;
  color: var(--albato-text);
  line-height: 1.5;
}
.albato-step__easy {
  font-size: 15px;
  color: var(--albato-text-muted);
  font-style: italic;
  margin-top: 8px;
}

/* =============================================
   TESTIMONIALS — Unified
   ============================================= */
.tm-section {
  padding: 80px 0;
  background: var(--albato-bg);
}
.tm-section__title {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--albato-dark);
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: -0.03em;
}
.tm-section__slider {
  padding-bottom: 4px;
}
.tm-card {
  background: #fff;
  border: 1px solid var(--albato-border);
  border-radius: 14px;
  padding: 32px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}
.tm-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.tm-card__text {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--albato-text);
  line-height: 1.75;
  flex: 1;
  margin: 0 0 24px;
}
.tm-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tm-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tm-card__name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--albato-dark);
}
.tm-card__role {
  font-size: 13px;
  color: var(--albato-text-muted);
}
@media (max-width: 991px) {
  .tm-section__title { font-size: 32px; }
}
@media (max-width: 575px) {
  .tm-section { padding: 56px 0; }
  .tm-section__title { font-size: 26px; margin-bottom: 32px; }
  .tm-card { padding: 24px 20px; }
}

/* =============================================
   TUTORIALS / BLOG CARDS
   ============================================= */
.albato-tutorials {
  padding: 80px 0;
  background: var(--albato-bg-light);
}
.albato-tutorials__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.albato-tutorials__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.albato-tutorial-card {
  background: #fff;
  border-radius: var(--albato-radius);
  overflow: hidden;
  border: 1px solid var(--albato-border);
  transition: var(--albato-transition);
}
.albato-tutorial-card:hover {
  box-shadow: var(--albato-shadow);
  transform: translateY(-2px);
}
.albato-tutorial-card__thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.albato-tutorial-card__body {
  padding: 16px;
}
.albato-tutorial-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.albato-tutorial-card__tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--albato-primary);
  text-transform: uppercase;
}
.albato-tutorial-card__reading {
  font-size: 12px;
  color: var(--albato-text-muted);
}
.albato-tutorial-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--albato-dark);
  margin-bottom: 8px;
  line-height: 1.4;
}
.albato-tutorial-card__desc {
  font-size: 13px;
  color: var(--albato-text-light);
  line-height: 1.5;
}
.albato-tutorials__view-all a {
  color: var(--albato-primary);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

/* =============================================
   FINAL CTA
   ============================================= */
.albato-final-cta {
  padding: 80px 0;
  text-align: center;
  background: var(--albato-bg);
}
.albato-final-cta__title {
  font-size: 40px;
  font-weight: 800;
  color: var(--albato-dark);
  margin-bottom: 24px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* =============================================
   FOOTER
   ============================================= */

/* --- Footer CTA Section --- */
.ft-cta {
  padding: 100px 24px 80px;
  background: #fff;
  text-align: center;
  position: relative;
}
.ft-cta__inner {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.ft-cta__title {
  font-family: 'Inter', sans-serif;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.18;
  color: var(--albato-dark);
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.ft-cta__subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--albato-text-light);
  line-height: 1.7;
  margin: 0 0 36px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.ft-cta__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.ft-cta__btn {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 30px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.01em;
}
.ft-cta__btn--primary {
  background: var(--albato-dark);
  color: #fff;
  border: 1.5px solid var(--albato-dark);
  box-shadow: 0 1px 3px rgba(0, 74, 173, 0.15);
}
.ft-cta__btn--primary:hover {
  background: var(--albato-primary);
  border-color: var(--albato-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 74, 173, 0.2);
}
.ft-cta__btn--outline {
  background: #fff;
  color: var(--albato-dark);
  border: 1.5px solid #d0d5dd;
}
.ft-cta__btn--outline:hover {
  border-color: var(--albato-dark);
  background: rgba(0, 74, 173, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* --- Footer wrapper --- */
.ft {
  background: linear-gradient(to bottom, transparent 35%, #f7f8fa 35%);
  padding: 80px 24px 40px;
}

/* --- Footer body (card) --- */
.ft-body {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
.ft-body__inner {
  padding: 64px 56px 52px 40px;
  display: grid;
  grid-template-columns: 1.1fr 3fr;
  gap: 64px;
}

/* Brand column */
.ft-brand__logo {
  height: 52px;
  margin-bottom: 22px;
}
.ft-brand__tagline {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--albato-text-light);
  line-height: 1.75;
  margin: 0 0 28px;
  max-width: 260px;
}

/* Newsletter subscribe */
.ft-subscribe {
  margin-top: 0;
}
.ft-subscribe__label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--albato-dark);
  margin: 0 0 12px;
  display: block;
}
.ft-subscribe__form {
  display: flex;
  gap: 0;
  max-width: 290px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--albato-border);
  transition: border-color 0.2s;
}
.ft-subscribe__form:focus-within {
  border-color: var(--albato-primary);
  box-shadow: 0 0 0 3px rgba(81, 112, 255, 0.08);
}
.ft-subscribe__input {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 11px 14px;
  border: none;
  background: #f9fafb;
  color: var(--albato-text);
  outline: none;
  flex: 1;
  min-width: 0;
}
.ft-subscribe__input::placeholder { color: #9ca3af; }
.ft-subscribe__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: none;
  background: var(--albato-dark);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.ft-subscribe__btn:hover { background: var(--albato-primary); }

/* Nav columns */
.ft-navs {
  display: flex;
  gap: 36px;
  justify-content: space-between;
}
.ft-nav { min-width: 110px; }
.ft-nav__title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--albato-dark);
  letter-spacing: 0.01em;
  margin: 0 0 20px;
}
.ft-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ft-nav__list li { margin-bottom: 14px; }
.ft-nav__list li:last-child { margin-bottom: 0; }
.ft-nav__list a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--albato-text-light);
  text-decoration: none;
  transition: color 0.2s;
}
.ft-nav__list a:hover {
  color: var(--albato-primary);
}

/* --- Copyright inside card --- */
.ft-copyright {
  border-top: 1px solid #f0f0f0;
  padding: 22px 56px;
}
.ft-copyright__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ft-copyright__text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #9ca3af;
  margin: 0;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.ft-copyright__links {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ft-copyright__links li { list-style: none; }
.ft-copyright__links a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--albato-text-light);
  text-decoration: none;
  transition: color 0.2s;
}
.ft-copyright__links a:hover { color: var(--albato-primary); }
.ft-copyright__social {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.ft-copyright__social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--albato-text-light);
  background: #f4f5f7;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.ft-copyright__social a:hover {
  background: var(--albato-primary);
  color: #fff;
  transform: translateY(-1px);
}

/* --- Footer responsive --- */
@media (max-width: 1100px) {
  .ft-body__inner {
    padding: 52px 40px 44px;
    gap: 48px;
  }
  .ft-navs { gap: 28px; }
  .ft-copyright { padding: 22px 40px; }
}
@media (max-width: 991px) {
  .ft-cta { padding: 80px 24px 64px; }
  .ft-cta__title { font-size: 34px; }
  .ft-body__inner {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 48px 36px 40px;
  }
  .ft-brand__tagline { max-width: 100%; }
  .ft-subscribe__form { max-width: 340px; }
  .ft-navs { justify-content: flex-start; flex-wrap: wrap; gap: 32px 48px; }
  .ft-copyright { padding: 22px 36px; }
  .ft-copyright__inner { flex-wrap: wrap; justify-content: center; text-align: center; }
  .ft-copyright__links { justify-content: center; }
  .ft-copyright__social { justify-content: center; }
}
@media (max-width: 767px) {
  .ft-cta { padding: 64px 20px 56px; }
  .ft-cta__title { font-size: 28px; }
  .ft-cta__subtitle { font-size: 15px; }
  .ft-cta__btn { padding: 12px 26px; font-size: 14px; }
  .ft { padding: 60px 16px 32px; }
  .ft-body { border-radius: 16px; }
  .ft-body__inner {
    padding: 40px 28px 32px;
    gap: 36px;
  }
  .ft-navs { gap: 24px 36px; }
  .ft-copyright { padding: 20px 28px; }
}
@media (max-width: 575px) {
  .ft-cta { padding: 52px 16px 44px; }
  .ft-cta__title { font-size: 24px; }
  .ft-cta__actions { flex-direction: column; align-items: center; }
  .ft-cta__btn { width: 100%; max-width: 280px; justify-content: center; }
  .ft { padding: 48px 12px 24px; }
  .ft-body { border-radius: 14px; }
  .ft-body__inner {
    padding: 32px 20px 28px;
    gap: 28px;
  }
  .ft-subscribe__form { max-width: 100%; }
  .ft-navs { flex-direction: column; gap: 24px; }
  .ft-nav__title { margin-bottom: 14px; }
  .ft-copyright { padding: 18px 20px; }
  .ft-copyright__inner { flex-direction: column; gap: 12px; }
  .ft-copyright__links { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .ft-copyright__social { justify-content: center; }
  .ft-copyright__text { font-size: 12px; }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .albato-hero__title {
    font-size: 42px;
  }
  .albato-section-title {
    font-size: 34px;
  }
  .albato-problems__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .albato-tutorials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .albato-saas__grid,
  .albato-how-it-works__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .albato-hero__title {
    font-size: 32px;
  }
  .albato-hero__stats {
    gap: 30px;
  }
  .albato-hero__stat-value {
    font-size: 28px;
  }
  .albato-section-title {
    font-size: 28px;
  }
  .albato-final-cta__title {
    font-size: 28px;
  }
  .albato-problems__grid {
    grid-template-columns: 1fr;
  }
  .albato-tutorials__grid {
    grid-template-columns: 1fr;
  }
  .albato-workflow__grid {
    grid-template-columns: 1fr;
  }
  .albato-workflow__arrow {
    transform: rotate(90deg);
  }
  .albato-section {
    padding: 50px 0;
  }
  .albato-hero {
    padding: 50px 0 40px;
  }
  .albato-hero__email-form {
    padding: 0 8px;
  }
  .albato-hero__form {
    padding: 4px 4px 4px 16px;
  }
  .albato-hero__email-btn {
    padding: 12px 20px;
    font-size: 14px;
  }
  .albato-hero__features {
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: center;
  }
  .albato-trade-cta__title {
    font-size: 26px;
  }
}

@media (max-width: 480px) {
  .albato-hero__title {
    font-size: 28px;
  }
  .albato-hero__actions {
    flex-direction: column;
  }
  .albato-hero__stats {
    flex-direction: column;
    gap: 20px;
  }
  .albato-hero__form {
    flex-direction: column;
    padding: 12px;
    gap: 10px;
    border-radius: 16px;
  }
  .albato-hero__email-input {
    width: 100%;
    padding: 12px 0;
    text-align: center;
  }
  .albato-hero__email-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: 10px;
  }
}

/* =============================================
   OVERRIDES - Neutralize old theme styles
   ============================================= */
.albato-page .albato-header {
  background: #fff !important;
}
.albato-page .albato-hero,
.albato-page .albato-workflow,
.albato-page .albato-problems,
.albato-page .albato-trade-cta,
.albato-page .albato-saas,
.albato-page .tm-section,
.albato-page .albato-final-cta {
  background: #fff;
}
.albato-page .albato-integration,
.albato-page .albato-how-it-works,
.albato-page .albato-section--light {
  background: var(--albato-bg-light);
}
/* Ensure proper font inheritance */
.albato-page h1, .albato-page h2, .albato-page h3,
.albato-page h4, .albato-page h5, .albato-page h6,
.albato-page p, .albato-page a, .albato-page span,
.albato-page button, .albato-page input, .albato-page select {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Reset heading colors for albato sections */
.albato-page .albato-section-title,
.albato-page .albato-hero__title,
.albato-page .albato-trade-cta__title,
.albato-page .albato-final-cta__title {
  color: var(--albato-dark);
}
/* Fix accordion styling in FAQ */
.albato-page .accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--albato-dark);
  box-shadow: none;
}
.albato-page .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}
.albato-page .accordion-button::after {
  filter: none;
}

/* =============================================
   ABOUT US PAGE STYLES
   ============================================= */

/* --- About Hero --- */
.albato-about-hero {
  padding: 100px 0 60px;
  background: linear-gradient(135deg, #f8fbff 0%, #fff 100%);
}
.albato-about-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
}
.albato-about-hero__title {
  font-family: 'Inter', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--albato-dark);
  line-height: 1.15;
  margin-bottom: 40px;
}
.albato-about-hero__accordion {
  max-width: 700px;
}
.albato-about-hero__faq {
  border-bottom: 1px solid var(--albato-border);
}
.albato-about-hero__faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--albato-dark);
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}
.albato-about-hero__faq-btn:hover {
  color: var(--albato-primary);
}
.albato-about-hero__faq-btn svg {
  flex-shrink: 0;
  transition: transform 0.3s;
}
.albato-about-hero__faq-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.albato-about-hero__faq-body {
  padding: 0 0 18px;
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--albato-text-light);
}
.albato-about-hero__images {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}
.albato-about-hero__img-small img,
.albato-about-hero__img-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--albato-radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* --- About Counters --- */
.albato-about-counters {
  padding: 70px 0;
  background: #fff;
}
.albato-about-counters__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}
.albato-about-counters__number {
  font-family: 'Inter', sans-serif;
  font-size: 56px;
  font-weight: 800;
  color: var(--albato-primary);
  line-height: 1;
  margin-bottom: 8px;
}
.albato-about-counters__label {
  font-size: 16px;
  color: var(--albato-text-light);
  margin: 0;
}

/* --- About Features --- */
.albato-about-features {
  padding: 100px 0;
  background: var(--albato-bg-section);
}
.albato-about-features__header {
  margin-bottom: 60px;
}
.albato-about-features__title {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--albato-dark);
  max-width: 500px;
}
.albato-about-features__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.albato-about-features__card {
  display: flex;
  gap: 24px;
  background: #fff;
  border-radius: var(--albato-radius);
  padding: 32px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s, transform 0.3s;
}
.albato-about-features__card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.albato-about-features__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--albato-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.albato-about-features__icon img {
  width: 26px;
  height: 26px;
}
.albato-about-features__icon svg {
  width: 24px;
  height: 24px;
}
.albato-about-features__card-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--albato-dark);
  margin-bottom: 8px;
}
.albato-about-features__card-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--albato-text-light);
  margin: 0;
}

/* --- About Integrations --- */
.albato-about-integrations {
  padding: 100px 0;
  background: #fff;
  text-align: center;
}
.albato-about-integrations__title {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--albato-dark);
  margin-bottom: 50px;
}
.albato-about-integrations__slider {
  margin-bottom: 50px;
}
.albato-about-integrations__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  border-radius: 12px;
  padding: 16px;
}
.albato-about-integrations__logo img {
  max-height: 40px;
  max-width: 100%;
}
.albato-about-integrations__footer {
  margin-top: 40px;
}
.albato-about-integrations__subtitle {
  font-size: 22px;
  font-weight: 600;
  color: var(--albato-dark);
  margin-bottom: 20px;
}

/* (Testimonials now use unified .tm-* classes) */

/* --- About Blog --- */
.albato-about-blog {
  padding: 100px 0;
  background: #fff;
}
.albato-about-blog__header {
  margin-bottom: 40px;
}
.albato-about-blog__title {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--albato-dark);
}
.albato-about-blog__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 30px;
  margin-bottom: 40px;
}
.albato-about-blog__card {
  border-radius: var(--albato-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s, transform 0.3s;
}
.albato-about-blog__card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}
.albato-about-blog__media {
  position: relative;
  overflow: hidden;
}
.albato-about-blog__media img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
.albato-about-blog__date {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--albato-primary);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.albato-about-blog__link {
  display: block;
  padding: 20px 24px;
  text-decoration: none;
}
.albato-about-blog__link h3 {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--albato-dark);
  margin: 0;
  transition: color 0.2s;
}
.albato-about-blog__link:hover h3 {
  color: var(--albato-primary);
}
.albato-about-blog__cta {
  text-align: center;
}

/* --- About CTA Banner --- */
.albato-about-cta {
  padding: 80px 0 100px;
}
.albato-about-cta__box {
  background: linear-gradient(135deg, var(--albato-dark) 0%, #1a3cb5 100%);
  border-radius: 18px;
  padding: 64px 40px;
  text-align: center;
}
.albato-about-cta__title {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 28px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* --- Shared Buttons (About) --- */
/* (inherited from global .albato-btn above) */

/* --- About Responsive --- */
@media (max-width: 991px) {
  .albato-about-hero { padding: 70px 0 40px; }
  .albato-about-hero__title { font-size: 36px; }
  .albato-about-counters__grid { gap: 20px; }
  .albato-about-counters__number { font-size: 40px; }
  .albato-about-features { padding: 70px 0; }
  .albato-about-features__title { font-size: 32px; }
  .albato-about-integrations { padding: 70px 0; }
  .albato-about-integrations__title { font-size: 32px; }
  .albato-about-blog { padding: 70px 0; }
  .albato-about-blog__title { font-size: 32px; }
  .albato-about-blog__grid { grid-template-columns: 1fr; }
  .albato-about-cta__title { font-size: 32px; }
}
@media (max-width: 575px) {
  .albato-about-hero__title { font-size: 28px; }
  .albato-about-hero__images { grid-template-columns: 1fr; }
  .albato-about-counters__grid { grid-template-columns: 1fr; gap: 30px; }
  .albato-about-counters__number { font-size: 36px; }
  .albato-about-features__card { flex-direction: column; }
  .albato-about-cta__box { padding: 40px 24px; }
  .albato-about-cta__title { font-size: 24px; }
}

/* =============================================
   PRICING PAGE STYLES
   ============================================= */

/* --- Pricing Hero --- */
.albato-pricing-hero {
  padding: 100px 0 80px;
  background: linear-gradient(135deg, #f8fbff 0%, #fff 100%);
  text-align: center;
}
.albato-pricing-hero__title {
  font-family: 'Inter', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--albato-dark);
  margin-bottom: 40px;
}

/* --- Pricing Tabs --- */
.albato-pricing-tabs {
  display: inline-flex;
  background: #eef2f7;
  border-radius: 50px;
  padding: 5px;
  margin-bottom: 50px;
}
.albato-pricing-tabs__btn {
  padding: 12px 28px;
  border: none;
  border-radius: 50px;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--albato-text-light);
  cursor: pointer;
  text-transform: capitalize;
  transition: all 0.3s;
}
.albato-pricing-tabs__btn--active {
  background: #fff;
  color: var(--albato-dark);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.albato-pricing-tabs__btn:hover:not(.albato-pricing-tabs__btn--active) {
  color: var(--albato-dark);
}

/* --- Pricing Grid --- */
.albato-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}
.albato-pricing-grid__item {
  display: flex;
}

/* --- Plan Card --- */
.albato-plan-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 30px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: box-shadow 0.3s, transform 0.3s;
  border: 2px solid transparent;
}
.albato-plan-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
  border-color: var(--albato-primary);
}
.albato-plan-card__header {
  margin-bottom: 24px;
}
.albato-plan-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.albato-plan-card__price {
  font-family: 'Inter', sans-serif;
  font-size: 44px;
  font-weight: 800;
  color: var(--albato-dark);
  line-height: 1;
}
.albato-plan-card__period {
  font-size: 15px;
  color: var(--albato-text-muted);
}
.albato-plan-card__name {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--albato-dark);
  margin-bottom: 8px;
}
.albato-plan-card__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--albato-text-light);
  margin: 0;
}

/* --- Plan CTA Button --- */
.albato-plan-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  border-radius: 10px;
  background: var(--albato-primary);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
  margin-bottom: 28px;
}
.albato-plan-card__cta:hover {
  background: var(--albato-primary-hover);
  color: #fff;
  box-shadow: 0 4px 16px rgba(81, 112, 255, 0.3);
}

/* --- Plan Features List --- */
.albato-plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.albato-plan-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--albato-text);
  border-bottom: 1px solid #f0f0f0;
}
.albato-plan-card__feature:last-child {
  border-bottom: none;
}
.albato-plan-card__feature svg {
  flex-shrink: 0;
  margin-top: 2px;
  stroke: #22c55e;
}
.albato-plan-card__feature--disabled {
  color: var(--albato-text-muted);
  text-decoration: line-through;
}
.albato-plan-card__feature--disabled svg {
  stroke: #d0d0d0;
}

/* --- Featured Plans --- */
.albato-pricing-featured {
  padding: 100px 0;
  background: var(--albato-bg-section);
}
.albato-pricing-featured__layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 60px;
}
.albato-pricing-featured__title {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--albato-dark);
  position: sticky;
  top: 100px;
}
.albato-pricing-featured__plan--spaced {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--albato-border);
}

/* --- Featured Plan Card --- */
.albato-featured-plan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.albato-featured-plan__duration {
  display: inline-block;
  background: var(--albato-primary);
  color: #fff;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.albato-featured-plan__price {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--albato-dark);
  line-height: 1.1;
  margin-bottom: 10px;
}
.albato-featured-plan__desc {
  font-size: 16px;
  color: var(--albato-text-light);
  margin: 0;
}
.albato-featured-plan__list-wrap {
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.albato-featured-plan__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.albato-featured-plan__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--albato-text);
}
.albato-featured-plan__item svg {
  flex-shrink: 0;
  margin-top: 3px;
  stroke: #22c55e;
}

/* --- Pricing Perks --- */
.albato-pricing-perks {
  padding: 80px 0;
  background: #fff;
}
.albato-pricing-perks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.albato-pricing-perks__card {
  text-align: center;
  padding: 36px 24px;
  border-radius: var(--albato-radius);
  background: var(--albato-bg-section);
  transition: box-shadow 0.3s, transform 0.3s;
}
.albato-pricing-perks__card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  transform: translateY(-3px);
}
.albato-pricing-perks__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8eeff 0%, #f0e8ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.albato-pricing-perks__icon img {
  width: 32px;
  height: 32px;
  filter: brightness(0) saturate(100%) invert(15%) sepia(20%) saturate(1000%) hue-rotate(200deg);
}
.albato-pricing-perks__card-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--albato-dark);
  margin-bottom: 10px;
}
.albato-pricing-perks__card-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--albato-text-light);
  margin: 0;
}

/* --- Pricing Banner --- */
.albato-pricing-banner {
  padding: 80px 0 100px;
}
.albato-pricing-banner__box {
  background: linear-gradient(135deg, var(--albato-dark) 0%, #1a3cb5 100%);
  border-radius: 18px;
  padding: 64px 48px;
  text-align: center;
}
.albato-pricing-banner__title {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.3px;
  margin-bottom: 14px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.albato-pricing-banner__subtitle {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 32px;
  line-height: 1.6;
}

/* --- Pricing Responsive --- */
@media (max-width: 991px) {
  .albato-pricing-hero { padding: 70px 0 50px; }
  .albato-pricing-hero__title { font-size: 36px; }
  .albato-pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
  .albato-pricing-featured__layout { grid-template-columns: 1fr; gap: 30px; }
  .albato-pricing-featured__title { position: static; font-size: 32px; }
  .albato-featured-plan { grid-template-columns: 1fr; gap: 24px; }
  .albato-pricing-perks__grid { grid-template-columns: 1fr; }
  .albato-pricing-banner__title { font-size: 28px; }
}
@media (max-width: 575px) {
  .albato-pricing-hero__title { font-size: 28px; }
  .albato-plan-card__price { font-size: 36px; }
  .albato-pricing-banner__box { padding: 40px 24px; }
  .albato-pricing-banner__title { font-size: 22px; }
  .albato-pricing-tabs__btn { padding: 10px 18px; font-size: 13px; }
}

/* =============================================
   SERVICE PAGE STYLES
   ============================================= */

/* --- Services Hero --- */
.albato-services-hero {
  padding: 100px 0 80px;
  background: linear-gradient(135deg, #f8fbff 0%, #fff 100%);
}
.albato-services-hero__header {
  text-align: center;
  margin-bottom: 50px;
}
.albato-services-hero__title {
  font-family: 'Inter', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--albato-dark);
  margin-bottom: 16px;
}
.albato-services-hero__subtitle {
  font-size: 18px;
  color: var(--albato-text-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* --- Services Grid --- */
.albato-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.albato-services-grid__card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s, transform 0.3s;
  position: relative;
  border: 2px solid transparent;
}
.albato-services-grid__card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
  border-color: var(--albato-primary);
}
.albato-services-grid__icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e8eeff 0%, #f0e8ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.albato-services-grid__icon img {
  width: 30px;
  height: 30px;
}
.albato-services-grid__card-title {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--albato-dark);
  margin-bottom: 10px;
}
.albato-services-grid__card-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--albato-text-light);
  margin-bottom: 16px;
}
.albato-services-grid__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--albato-primary);
  text-decoration: none;
  transition: gap 0.2s;
}
.albato-services-grid__link:hover {
  gap: 10px;
  color: var(--albato-primary-hover);
}

/* --- Service Highlight (BlockFeatureTwentyFive) --- */
.albato-service-highlight {
  padding: 100px 0;
  background: var(--albato-bg-section);
}
.albato-service-highlight__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 60px;
  align-items: center;
}
.albato-service-highlight__image {
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  min-height: 420px;
  position: relative;
  overflow: hidden;
}
.albato-service-highlight__counter {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 20px 28px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.albato-service-highlight__counter-num {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: var(--albato-primary);
  line-height: 1;
}
.albato-service-highlight__counter-label {
  font-size: 14px;
  color: var(--albato-text-light);
  margin-top: 4px;
}
.albato-service-highlight__tag {
  display: inline-block;
  background: var(--albato-primary);
  color: #fff;
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.albato-service-highlight__title {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--albato-dark);
  margin-bottom: 16px;
}
.albato-service-highlight__subtitle {
  font-size: 17px;
  line-height: 1.7;
  color: var(--albato-text-light);
  margin-bottom: 36px;
}
.albato-service-highlight__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.albato-service-highlight__feature {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--albato-dark);
}
.albato-service-highlight__feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.albato-service-highlight__feature-icon img {
  width: 22px;
  height: 22px;
}

/* --- Service Detail Page --- */
.albato-service-detail {
  padding: 100px 0 80px;
  background: #fff;
}
.albato-service-detail__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 50px;
}
.albato-service-detail__title {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--albato-dark);
  margin-bottom: 16px;
}
.albato-service-detail__overview {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--albato-text);
  margin-bottom: 24px;
}
.albato-service-detail__preview {
  margin-bottom: 30px;
  border-radius: var(--albato-radius);
  overflow: hidden;
}
.albato-service-detail__preview img {
  width: 100%;
  display: block;
  border-radius: var(--albato-radius);
}
.albato-service-detail__content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--albato-text);
}
.albato-service-detail__content img {
  max-width: 100%;
  border-radius: var(--albato-radius);
}
.albato-service-detail__content h2,
.albato-service-detail__content h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--albato-dark);
  margin-top: 32px;
  margin-bottom: 16px;
}

/* --- Service Detail FAQ --- */
.albato-service-detail__faqs {
  margin-top: 40px;
}
.albato-service-detail__faq {
  border-bottom: 1px solid var(--albato-border);
}
.albato-service-detail__faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--albato-dark);
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}
.albato-service-detail__faq-btn:hover {
  color: var(--albato-primary);
}
.albato-service-detail__faq-btn svg {
  flex-shrink: 0;
  transition: transform 0.3s;
}
.albato-service-detail__faq-btn--active svg {
  transform: rotate(180deg);
}
.albato-service-detail__faq-btn--active {
  color: var(--albato-primary);
}
.albato-service-detail__faq-body {
  padding: 0 0 18px;
}
.albato-service-detail__faq-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--albato-text-light);
  margin: 0;
}

/* --- Service Detail Sidebar --- */
.albato-service-detail__categories {
  background: var(--albato-dark);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}
.albato-service-detail__categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.albato-service-detail__cat-link {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.2s;
}
.albato-service-detail__cat-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.albato-service-detail__cat-link--active {
  color: #fff;
  background: var(--albato-primary);
}
.albato-service-detail__cat-link--active:hover {
  background: var(--albato-primary-hover);
}
.albato-service-detail__contact {
  background: var(--albato-bg-section);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
}
.albato-service-detail__contact-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--albato-dark);
  margin-bottom: 20px;
}

/* --- Pagination --- */
.albato-pagination {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.albato-pagination__list {
  display: flex;
  align-items: center;
  gap: 6px;
}
.albato-pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--albato-text);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--albato-border);
  transition: all 0.2s;
}
.albato-pagination__item:hover {
  border-color: var(--albato-primary);
  color: var(--albato-primary);
}
.albato-pagination__item--active {
  background: var(--albato-primary);
  color: #fff;
  border-color: var(--albato-primary);
}
.albato-pagination__item--active:hover {
  color: #fff;
}
.albato-pagination__item--disabled {
  color: var(--albato-text-muted);
  cursor: default;
  pointer-events: none;
}

/* --- Service Responsive --- */
@media (max-width: 991px) {
  .albato-services-hero { padding: 70px 0 50px; }
  .albato-services-hero__title { font-size: 36px; }
  .albato-services-grid { grid-template-columns: 1fr; }
  .albato-service-highlight__grid { grid-template-columns: 1fr; gap: 30px; }
  .albato-service-highlight__image { min-height: 300px; }
  .albato-service-highlight__title { font-size: 32px; }
  .albato-service-detail__layout { grid-template-columns: 1fr; }
  .albato-service-detail__title { font-size: 32px; }
}
@media (max-width: 575px) {
  .albato-services-hero__title { font-size: 28px; }
  .albato-services-grid__card { padding: 24px 20px; }
  .albato-service-highlight__title { font-size: 26px; }
  .albato-service-detail__title { font-size: 26px; }
  .albato-service-detail__categories { padding: 16px; }
}

/* =============================================
   BLOG PAGE STYLES — Premium Minimal
   ============================================= */

/* --- Page Shell --- */
.bl-page {
  padding: 96px 0 72px;
  background: var(--albato-bg);
}
.bl-page__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.bl-page__layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: start;
}
.bl-page__empty {
  text-align: center;
  padding: 80px 0;
  font-size: 17px;
  color: var(--albato-text-muted);
}

/* ---- Blog Card (Index) ---- */
.bl-card {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid #eee;
}
.bl-card:last-of-type {
  border-bottom: none;
}
.bl-card__media {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  aspect-ratio: 16 / 9;
  background: #f5f5f5;
}
.bl-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}
.bl-card__media:hover img {
  opacity: 0.92;
}
.bl-card__content {
  padding: 0;
}
.bl-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.bl-card__date {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--albato-text-muted);
  letter-spacing: 0.01em;
}
.bl-card__sep {
  color: #ccc;
  font-size: 14px;
}
.bl-card__cat {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--albato-primary);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.bl-card__cat:hover {
  text-decoration: underline;
}
.bl-card__title-link {
  text-decoration: none;
}
.bl-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--albato-dark);
  line-height: 1.32;
  margin: 0;
  letter-spacing: -0.02em;
  transition: color 0.15s;
}
.bl-card__title-link:hover .bl-card__title {
  color: var(--albato-text-light);
}

/* ---- Article Detail (Show) ---- */
.bl-article__header {
  margin-bottom: 32px;
}
.bl-article__date {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--albato-text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.bl-article__title {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--albato-dark);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}
.bl-article__lead {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--albato-text-light);
  margin: 0;
}
.bl-article__hero {
  margin: 0 0 44px;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #f5f5f5;
  max-height: 480px;
}
.bl-article__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Article body — typographic scale for readability */
.bl-article__body {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--albato-text);
  letter-spacing: 0.005em;
}
.bl-article__body p {
  margin-bottom: 1.5em;
}
.bl-article__body h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--albato-dark);
  margin: 2em 0 0.75em;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.bl-article__body h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--albato-dark);
  margin: 1.8em 0 0.6em;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.bl-article__body img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 2em auto;
  object-fit: contain;
}
.bl-article__body blockquote {
  margin: 1.5em 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--albato-dark);
  font-style: italic;
  color: var(--albato-text-light);
}
.bl-article__body ul,
.bl-article__body ol {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}
.bl-article__body li {
  margin-bottom: 0.4em;
}
.bl-article__body a {
  color: var(--albato-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bl-article__body a:hover {
  color: var(--albato-primary-hover);
}
.bl-article__body code {
  font-size: 0.9em;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}
.bl-article__body pre {
  background: #f5f5f5;
  padding: 16px 20px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.88em;
  margin: 1.5em 0;
}

/* Article footer */
.bl-article__footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.bl-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-article__tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 6px;
  background: #f5f5f5;
  font-size: 13px;
  font-weight: 500;
  color: var(--albato-text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.bl-article__tag:hover {
  background: var(--albato-dark);
  color: #fff;
}
.bl-article__share {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bl-article__share-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--albato-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bl-article__share-icons {
  display: flex;
  gap: 6px;
}
.bl-article__share-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--albato-text-light);
  text-decoration: none;
  font-size: 15px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bl-article__share-btn:hover {
  border-color: var(--albato-dark);
  color: var(--albato-dark);
  background: #fafafa;
}

/* ---- Sidebar ---- */
.bl-sidebar {
  position: sticky;
  top: 96px;
}
.bl-sidebar__section {
  margin-bottom: 32px;
}

/* Sidebar search */
.bl-sidebar__search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  transition: border-color 0.15s;
}
.bl-sidebar__search:focus-within {
  border-color: var(--albato-dark);
}
.bl-sidebar__search-icon {
  flex-shrink: 0;
  color: var(--albato-text-muted);
}
.bl-sidebar__search-input {
  flex: 1;
  padding: 11px 0;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--albato-dark);
  background: transparent;
  outline: none;
}
.bl-sidebar__search-input::placeholder {
  color: #bbb;
}

/* Sidebar titles */
.bl-sidebar__title {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--albato-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

/* Sidebar categories */
.bl-sidebar__cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bl-sidebar__cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--albato-text);
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: color 0.15s;
}
.bl-sidebar__cat-list li:last-child .bl-sidebar__cat-link {
  border-bottom: none;
}
.bl-sidebar__cat-link:hover {
  color: var(--albato-dark);
}
.bl-sidebar__cat-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--albato-text-muted);
  background: #f5f5f5;
  min-width: 24px;
  height: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sidebar recent posts */
.bl-sidebar__recent {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bl-sidebar__post {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.bl-sidebar__post:last-child {
  border-bottom: none;
}
.bl-sidebar__post-title {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--albato-dark);
  text-decoration: none;
  line-height: 1.45;
  margin-bottom: 4px;
  transition: color 0.15s;
}
.bl-sidebar__post-title:hover {
  color: var(--albato-primary);
}
.bl-sidebar__post-date {
  font-size: 12px;
  color: var(--albato-text-muted);
  letter-spacing: 0.01em;
}

/* Sidebar tags */
.bl-sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bl-sidebar__tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--albato-text-light);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bl-sidebar__tag:hover {
  border-color: var(--albato-dark);
  color: var(--albato-dark);
  background: #fafafa;
}

/* Sidebar CTA */
.bl-sidebar__cta {
  background: var(--albato-dark);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}
.bl-sidebar__cta-heading {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.45;
  margin-bottom: 18px;
}
.bl-sidebar__cta-btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 8px;
  background: #fff;
  color: var(--albato-dark);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s;
}
.bl-sidebar__cta-btn:hover {
  background: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .bl-page { padding: 72px 0 48px; }
  .bl-page__layout { grid-template-columns: 1fr; gap: 48px; }
  .bl-sidebar { position: static; }
  .bl-article__title { font-size: 32px; }
  .bl-card__title { font-size: 22px; }
}
@media (max-width: 575px) {
  .bl-page__inner { padding: 0 16px; }
  .bl-card__media { aspect-ratio: 3 / 2; }
  .bl-card__title { font-size: 20px; }
  .bl-article__hero { max-height: 280px; }
  .bl-article__title { font-size: 26px; }
  .bl-article__lead { font-size: 17px; }
  .bl-article__body { font-size: 16px; }
  .bl-article__footer { flex-direction: column; align-items: flex-start; }
}

/* =============================================
   CONTACT PAGE STYLES
   ============================================= */

/* --- Page Shell --- */
.ct-page {
  padding: 96px 0 80px;
  background: #fafafa;
}
.ct-page__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Header --- */
.ct-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 56px;
}
.ct-header__title {
  font-family: 'Inter', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--albato-dark);
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0;
  flex-shrink: 0;
}
.ct-header__desc {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--albato-text-light);
  line-height: 1.7;
  margin: 0;
  max-width: 400px;
  padding-top: 8px;
}

/* --- Body Grid --- */
.ct-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 40px;
}

/* --- Form Card --- */
.ct-form-card {
  background: #fff;
  border-radius: 14px;
  padding: 40px 36px;
  border: 1px solid #eee;
}
.ct-form-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--albato-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 28px;
}
.ct-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ct-form__group {
  margin-bottom: 20px;
}
.ct-form__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--albato-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.ct-form__input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--albato-text);
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.ct-form__input:focus {
  border-color: var(--albato-dark);
}
.ct-form__input::placeholder {
  color: #bbb;
  font-weight: 400;
}
.ct-form__textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--albato-text);
  background: #fff;
  outline: none;
  resize: vertical;
  min-height: 120px;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.ct-form__textarea:focus {
  border-color: var(--albato-dark);
}
.ct-form__textarea::placeholder {
  color: #bbb;
  font-weight: 400;
}
.ct-form__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 32px;
  border: none;
  border-radius: 8px;
  background: var(--albato-primary);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.ct-form__btn:hover {
  background: var(--albato-primary-hover);
  box-shadow: 0 4px 14px rgba(81, 112, 255, 0.3);
}
.ct-form__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- Info Side --- */
.ct-info {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ct-info-card {
  background: #fff;
  border-radius: 14px;
  padding: 40px 36px;
  border: 1px solid #eee;
}
.ct-info-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--albato-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 28px;
}
.ct-info-card__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ct-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ct-info-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eef1ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ct-info-item__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(32%) sepia(93%) saturate(1000%) hue-rotate(220deg) brightness(95%) contrast(100%);
}
.ct-info-item__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--albato-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.ct-info-item__value {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--albato-text);
  line-height: 1.5;
  word-break: break-word;
}

/* --- Map --- */
.ct-map {
  border-radius: 14px;
  overflow: hidden;
  margin-top: 48px;
  margin-bottom: 64px;
  border: 1px solid #eee;
  background: #e8e8e8;
}
.ct-map__iframe {
  width: 100%;
  height: 380px;
  display: block;
  border: none;
}

/* --- Contact Responsive --- */
@media (max-width: 991px) {
  .ct-page { padding: 72px 0 0; }
  .ct-header { flex-direction: column; gap: 16px; padding-bottom: 40px; }
  .ct-header__title { font-size: 36px; }
  .ct-header__desc { max-width: 100%; }
  .ct-body { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .ct-page__inner { padding: 0 16px; }
  .ct-header__title { font-size: 30px; }
  .ct-form-card { padding: 28px 20px; }
  .ct-info-card { padding: 28px 20px; }
  .ct-form__row { grid-template-columns: 1fr; }
  .ct-map__iframe { height: 260px; }
}

/* --- Simple Human Footer --- */
.ft-simple .ft-body__inner--simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 48px 16px 24px;
  max-width: 420px;
  margin: 0 auto;
}
.ft-simple .ft-brand__logo {
  height: 38px;
  margin-bottom: 12px;
}
.ft-simple .ft-brand__tagline {
  font-size: 15px;
  color: var(--albato-text-light);
  margin-bottom: 18px;
  text-align: center;
}
.ft-simple .ft-brand__social {
  gap: 8px;
  margin-bottom: 12px;
}
.ft-simple .ft-brand__social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: none;
  color: #5170ff;
  font-size: 18px;
  transition: color 0.2s;
}
.ft-simple .ft-brand__social a:hover {
  color: #004aad;
  background: none;
  transform: none;
}
.ft-simple .ft-subscribe__form {
  display: flex;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  margin-bottom: 0;
}
.ft-simple .ft-subscribe__input {
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px 0 0 8px;
  border: 1px solid var(--albato-border);
  background: var(--albato-bg-light);
  color: var(--albato-text);
  flex: 1;
}
.ft-simple .ft-subscribe__btn {
  border-radius: 0 8px 8px 0;
  background: #5170ff;
  color: #fff;
  border: none;
  padding: 0 14px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ft-simple .ft-contact--simple {
  width: 100%;
  margin-top: 10px;
}
.ft-simple .ft-contact__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 0;
  margin: 0;
}
.ft-simple .ft-contact__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5170ff;
  font-size: 16px;
  margin-right: 6px;
}
.ft-simple .ft-contact__list li {
  font-size: 14px;
  color: var(--albato-text);
  display: flex;
  align-items: center;
}
.ft-simple .ft-contact__list a {
  color: var(--albato-dark);
  text-decoration: none;
  margin-left: 2px;
}
.ft-simple .ft-contact__list a:hover {
  text-decoration: underline;
}
.ft-simple .ft-bottom__inner--simple {
  padding: 18px 0 8px;
  text-align: center;
  justify-content: center;
}
@media (max-width: 575px) {
  .ft-simple .ft-body__inner--simple {
    padding: 32px 8px 12px;
    gap: 24px;
  }
}

/* --- PixBuddy-style Footer for Approch --- */
.ft-pixbuddy {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.ft-pixbuddy__main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 24px 0 24px;
  position: relative;
  z-index: 2;
}
.ft-pixbuddy__columns {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  margin-bottom: 32px;
}
.ft-pixbuddy__brand {
  flex: 1.2;
  min-width: 220px;
}
.ft-pixbuddy__logo {
  height: 38px;
  margin-bottom: 18px;
}
.ft-pixbuddy__tagline {
  font-size: 15px;
  color: #222;
  margin-bottom: 0;
  max-width: 240px;
}
.ft-pixbuddy__col {
  flex: 1;
  min-width: 160px;
}
.ft-pixbuddy__col-title {
  font-size: 16px;
  font-weight: 600;
  color: #004aad;
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}
.ft-pixbuddy__col-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ft-pixbuddy__col-list li {
  margin-bottom: 12px;
}
.ft-pixbuddy__col-list a {
  color: #444;
  font-size: 15px;
  text-decoration: none;
  transition: color 0.18s;
}
.ft-pixbuddy__col-list a:hover {
  color: #5170ff;
}
.ft-pixbuddy__socials {
  display: flex;
  gap: 16px;
  margin: 32px 0 0 0;
}
.ft-pixbuddy__socials a {
  color: #004aad;
  font-size: 22px;
  transition: color 0.18s;
}
.ft-pixbuddy__socials a:hover {
  color: #5170ff;
}
.ft-pixbuddy__newsletter {
  display: flex;
  gap: 0;
  margin: 32px 0 0 0;
  max-width: 340px;
}
.ft-pixbuddy__newsletter-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #dbe6ff;
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-size: 15px;
  color: #222;
  background: #f6f8ff;
  outline: none;
}
.ft-pixbuddy__newsletter-input::placeholder {
  color: #b3c6e6;
}
.ft-pixbuddy__newsletter-btn {
  padding: 0 22px;
  border: none;
  border-radius: 0 8px 8px 0;
  background: #004aad;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s;
}
.ft-pixbuddy__newsletter-btn:hover {
  background: #5170ff;
}
.ft-pixbuddy__watermark {
  position: absolute;
  left: 0; right: 0; bottom: 38px;
  text-align: center;
  font-size: 160px;
  font-weight: 800;
  color: #004aad10;
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
  z-index: 1;
  font-family: 'Inter', sans-serif;
}
.ft-pixbuddy__bottom {
  background: transparent;
  box-shadow: none;
  position: relative;
  z-index: 3;
}
.ft-pixbuddy .ft-bottom__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 32px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  box-shadow: none;
}
.ft-pixbuddy .ft-bottom__copy {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 24px 0 #004aad0a;
  padding: 8px 18px;
  font-size: 14px;
  color: #222;
}
.ft-pixbuddy .ft-bottom__links {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 24px 0 #004aad0a;
  padding: 8px 18px;
  display: flex;
  gap: 18px;
}
@media (max-width: 1024px) {
  .ft-pixbuddy__columns { flex-direction: column; gap: 32px; }
  .ft-pixbuddy__main { padding: 40px 12px 0 12px; }
  .ft-pixbuddy .ft-bottom__inner { flex-direction: column; gap: 10px; padding: 0 12px 24px 12px; }
  .ft-pixbuddy__watermark { font-size: 80px; bottom: 18px; }
}
@media (max-width: 600px) {
  .ft-pixbuddy__main { padding: 24px 4px 0 4px; }
  .ft-pixbuddy__columns { gap: 18px; }
  .ft-pixbuddy__brand { min-width: 0; }
  .ft-pixbuddy__watermark { font-size: 38vw; bottom: 8px; }
}

/* =============================================
   CUSTOM PAGE (Privacy Policy, Terms, etc.)
   ============================================= */

/* Hero Header */
.cp-hero {
  background: linear-gradient(135deg, var(--albato-bg-light) 0%, #e8edff 100%);
  padding: 100px 0 50px;
  text-align: center;
}
.cp-hero__inner {
  max-width: 700px;
  margin: 0 auto;
}
.cp-hero__title {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--albato-dark);
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.cp-hero__meta {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--albato-text-muted);
  margin: 0;
}

/* Content Body */
.cp-body {
  padding: 60px 0 80px;
  background: #fff;
}
.cp-content {
  max-width: 780px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--albato-text);
}

/* Headings */
.cp-content h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--albato-dark);
  margin: 48px 0 16px;
  line-height: 1.3;
}
.cp-content h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--albato-dark);
  margin: 40px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--albato-bg-light);
  line-height: 1.3;
}
.cp-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--albato-dark);
  margin: 32px 0 12px;
  line-height: 1.4;
}
.cp-content h4,
.cp-content h5,
.cp-content h6 {
  font-weight: 600;
  color: var(--albato-dark);
  margin: 24px 0 10px;
  line-height: 1.4;
}

/* Paragraphs */
.cp-content p {
  margin: 0 0 18px;
  color: var(--albato-text-light);
}
.cp-content p:last-child {
  margin-bottom: 0;
}

/* Lists */
.cp-content ul,
.cp-content ol {
  margin: 0 0 20px;
  padding-left: 24px;
}
.cp-content ul {
  list-style: none;
  padding-left: 0;
}
.cp-content ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--albato-text-light);
}
.cp-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--albato-primary);
  opacity: 0.5;
}
.cp-content ol li {
  margin-bottom: 10px;
  color: var(--albato-text-light);
  padding-left: 4px;
}

/* Links */
.cp-content a {
  color: var(--albato-primary);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.cp-content a:hover {
  border-bottom-color: var(--albato-primary);
}

/* Blockquotes */
.cp-content blockquote {
  margin: 28px 0;
  padding: 20px 28px;
  border-left: 4px solid var(--albato-primary);
  background: var(--albato-bg-light);
  border-radius: 0 var(--albato-radius) var(--albato-radius) 0;
  font-style: italic;
  color: var(--albato-text);
}
.cp-content blockquote p {
  color: var(--albato-text);
  margin: 0;
}

/* Horizontal Rules */
.cp-content hr {
  border: none;
  height: 1px;
  background: var(--albato-border);
  margin: 36px 0;
}

/* Strong / Bold */
.cp-content strong,
.cp-content b {
  font-weight: 600;
  color: var(--albato-text);
}

/* Tables  */
.cp-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}
.cp-content table th,
.cp-content table td {
  padding: 12px 16px;
  border: 1px solid var(--albato-border);
  text-align: left;
}
.cp-content table th {
  background: var(--albato-bg-light);
  font-weight: 600;
  color: var(--albato-dark);
}

/* Custom Page Responsive */
@media (max-width: 768px) {
  .cp-hero {
    padding: 80px 0 40px;
  }
  .cp-hero__title {
    font-size: 30px;
  }
  .cp-body {
    padding: 40px 0 60px;
  }
  .cp-content {
    font-size: 15px;
  }
  .cp-content h2 {
    font-size: 21px;
  }
  .cp-content h3 {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .cp-hero {
    padding: 70px 0 32px;
  }
  .cp-hero__title {
    font-size: 26px;
  }
  .cp-content blockquote {
    padding: 16px 18px;
  }
}