/* ═══════════════════════════════════════════════════════
   CloudReef — styles.css — Shared Design System
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&display=swap');

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

:root {
  --coral-50:  #FFF8F4;
  --coral-100: #FFEFE3;
  --coral-200: #FFDCC4;
  --coral-300: #FFC5A0;
  --coral-400: #FFAB78;
  --coral-500: #F4935F;
  --coral-highlight: #FFD6B0;
  --turquoise-50:  #F0FDFA;
  --turquoise-100: #CCFBF1;
  --turquoise-200: #9DF5E5;
  --turquoise-300: #6BE8D4;
  --turquoise-400: #3DD4BF;
  --turquoise-500: #20BFA8;
  --turquoise-600: #149E8B;
  --turquoise-btn: #5ECEBD;
  --turquoise-btn-hover: #4ABFAE;
  --stat-bg: #D4F0EB;
  --cream:       #FDFAF6;
  --cream-dark:  #F6F1EA;
  --warm-white:  #FAF7F3;
  --dark:        #1C1917;
  --dark-soft:   #292524;
  --text:        #1C1917;
  --text-secondary: #57534E;
  --text-muted:  #B8AFA5;
  --text-light:  #A8A29E;
  --white:       #FFFFFF;
  --border:      #E7E1D9;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --nav-height: 72px;
  --container: 1320px;
  --gutter: 40px;
}

html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); color: var(--text); background: var(--cream); line-height: 1.6; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ═══════ NAVIGATION ═══════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height);
  background: var(--cream); z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.nav.scrolled { border-bottom-color: var(--border); background: rgba(253,250,246,.95); backdrop-filter: blur(12px); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.nav-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; flex-shrink: 0; gap: 12px; text-decoration: none; }
.nav-logo svg { height: 44px; width: auto; }
.nav-logo-text { font-family: 'DM Sans', Arial, sans-serif; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.5px; }
.nav-logo-text .cloud { color: var(--dark); }
.nav-logo-text .reef { color: var(--turquoise-500); }
@media (max-width:480px) { .nav-logo svg { height: 32px; } .nav-logo-text { font-size: 1.15rem; } }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 14px; font-size: .9rem; font-weight: 500;
  color: var(--text); border-radius: 8px; transition: background .2s; white-space: nowrap;
  position: relative;
}
.nav-link:hover { background: var(--cream-dark); }
.nav-link svg { width: 14px; height: 14px; opacity: .5; transition: transform .2s; }
.nav-link.active svg { transform: rotate(180deg); }
.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; background: var(--dark); color: var(--white);
  font-size: .875rem; font-weight: 600; border-radius: 100px;
  transition: background .25s, transform .2s; white-space: nowrap;
}
.nav-cta:hover { background: var(--dark-soft); transform: translateY(-1px); }
.nav-cta svg { width: 14px; height: 14px; }
.nav-cta--ghost { background: transparent; color: var(--dark); border: 1.5px solid var(--border, rgba(0,0,0,.12)); padding: 8.5px 18px; }
.nav-cta--ghost:hover { background: rgba(0,0,0,.04); border-color: var(--dark); color: var(--dark); }
.nav-cta--ghost svg { width: 11px; height: 11px; opacity: .75; }
@media (max-width: 768px) { .nav-cta--ghost { display: none; } }
.nav-mobile-toggle {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center; border-radius: 8px;
}
.nav-mobile-toggle span { display: block; width: 22px; height: 2px; background: var(--dark); position: relative; transition: .3s; }
.nav-mobile-toggle span::before, .nav-mobile-toggle span::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--dark); transition: .3s; }
.nav-mobile-toggle span::before { top: -7px; }
.nav-mobile-toggle span::after { top: 7px; }

/* Dropdown */
.nav-dropdown-wrap { position: relative; }
.nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  min-width: 280px; background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px);
  transition: opacity .2s, visibility .2s, transform .2s;
  z-index: 100;
}
.nav-dropdown-wrap:hover .nav-dropdown,
.nav-dropdown-wrap.open .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px; font-size: .88rem; font-weight: 500;
  color: var(--text); transition: background .15s;
}
.nav-dropdown a:hover { background: var(--cream-dark); }
.nav-dropdown-icon {
  width: 36px; height: 36px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-dropdown-icon svg { width: 18px; height: 18px; }
.nav-dropdown-label small { display: block; font-size: .72rem; color: var(--text-light); font-weight: 400; margin-top: 1px; }

/* Mobile Menu */
.mobile-menu {
  position: fixed; left: 0; right: 0; top: var(--nav-height); bottom: 0;
  background: var(--cream); z-index: 999; padding: 8px var(--gutter) 12px;
  display: none; flex-direction: column; overflow: hidden;
  border-top: 1px solid var(--border); max-height: calc(100vh - var(--nav-height)); max-height: calc(100dvh - var(--nav-height));
}
.mobile-menu.open { display: flex; }
.mobile-menu a:not(.btn-dark) {
  display: block; padding: 6px 0; font-size: 1.05rem; font-weight: 500;
  color: var(--text); border-bottom: 1px solid var(--border);
}
.mobile-menu a:not(.btn-dark):last-of-type { border-bottom: none; }
.mobile-menu .mob-watch { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.mobile-menu .mob-watch svg { max-height: 70%; max-width: 70%; }
.mobile-menu .btn-dark { display: flex; text-align: center; justify-content: center; color: var(--white); margin-top: auto; }

/* ═══════ BUTTONS ═══════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 28px; background: var(--turquoise-btn); color: var(--dark);
  font-size: 1rem; font-weight: 600; border-radius: 12px;
  transition: background .25s, transform .2s, box-shadow .25s; white-space: nowrap;
}
.btn-primary:hover { background: var(--turquoise-btn-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(94,206,189,.3); }
.btn-primary svg { width: 16px; height: 16px; }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 28px; background: transparent; color: var(--dark);
  font-size: 1rem; font-weight: 600; border: 1.5px solid var(--border); border-radius: 12px;
  transition: border-color .25s, background .25s, transform .2s; white-space: nowrap;
}
.btn-secondary:hover { border-color: var(--dark); background: var(--white); transform: translateY(-2px); }
.btn-secondary svg { width: 16px; height: 16px; }
.btn-dark {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 18px 32px; background: var(--dark); color: var(--white);
  font-size: 1rem; font-weight: 600; border-radius: 12px;
  transition: background .25s, transform .2s, box-shadow .25s; white-space: nowrap;
}
.btn-dark:hover { background: var(--dark-soft); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(28,25,23,.2); }
.btn-dark svg { width: 16px; height: 16px; }

/* ═══════ TAG PILLS ═══════ */
.section-tag, .hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 12px; background: var(--white);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: .9rem; font-weight: 500; color: var(--text); margin-bottom: 56px;
}
.tag-dot { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.tag-dot--turquoise { background: var(--turquoise-300); }
.tag-dot--coral { background: var(--coral-highlight); }
.tag-dot--green { background: #86EFAC; }

/* ═══════ SCROLL REVEAL ═══════ */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease-out, transform .8s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .35s; }
.reveal-delay-4 { transition-delay: .5s; }

/* ═══════ CHAT BADGE ═══════ */
.chat-badge { display: none; }

/* ═══════ PLATFORM CHECK MODAL ═══════ */
.cr-modal-overlay { position: fixed; inset: 0; background: rgba(28,25,23,.6); backdrop-filter: blur(6px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.cr-modal-overlay.open { opacity: 1; visibility: visible; }
.cr-modal { background: var(--white); border-radius: 24px; padding: 48px 40px 40px; max-width: 440px; width: 90%; text-align: center; position: relative; transform: translateY(20px); transition: transform .3s ease-out; }
.cr-modal-overlay.open .cr-modal { transform: translateY(0); }
.cr-modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 1.6rem; color: var(--text-secondary); cursor: pointer; line-height: 1; }
.cr-modal-close:hover { color: var(--dark); }
.cr-modal-icon { margin-bottom: 20px; }
.cr-modal-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--dark); margin-bottom: 8px; font-weight: 400; }
.cr-modal-body { font-size: 1rem; color: var(--text-secondary); margin-bottom: 28px; }
.cr-modal-checkbox { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .95rem; color: var(--dark); cursor: pointer; margin-bottom: 28px; user-select: none; }
.cr-modal-checkbox input { display: none; }
.cr-modal-checkmark { width: 22px; height: 22px; border: 2px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; }
.cr-modal-checkbox input:checked + .cr-modal-checkmark { background: var(--turquoise-500); border-color: var(--turquoise-500); }
.cr-modal-checkbox input:checked + .cr-modal-checkmark::after { content: ''; display: block; width: 6px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); }
.cr-modal-actions { display: flex; flex-direction: column; gap: 12px; }
.cr-modal-btn { width: 100%; justify-content: center; text-align: center; }

/* ═══════ MODULE PROGRESSION ═══════ */
.module-locked { opacity: 0.35; position: relative; filter: grayscale(0.5); cursor: not-allowed; }
.module-locked .module-card-cta { display: none; }
.module-locked::after {
  content: '';
  position: absolute; top: 16px; right: 16px; width: 28px; height: 28px;
  background: var(--text-light); border-radius: 50%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E");
  mask-size: 16px; mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E");
  -webkit-mask-size: 16px; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
}
.module-viewed { position: relative; }
.module-viewed::before {
  content: '';
  position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; z-index: 2;
  background: var(--turquoise-500); border-radius: 50%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  mask-size: 14px; mask-repeat: no-repeat; mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-size: 14px; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
}
.module-next { box-shadow: 0 0 0 2px var(--turquoise-400); }

/* Shake animation for locked modules */
@keyframes cr-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}
.module-shake { animation: cr-shake .5s ease; }
.cr-lock-msg {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--dark); color: var(--white); padding: 14px 24px; border-radius: 12px;
  font-size: .9rem; z-index: 1001; opacity: 0; transition: opacity .3s, transform .3s;
  pointer-events: none; box-shadow: 0 8px 32px rgba(0,0,0,.2); white-space: nowrap;
}
.cr-lock-msg.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Module completion toast */
.cr-toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--dark); color: var(--white); padding: 14px 24px; border-radius: 12px;
  font-size: .9rem; display: flex; align-items: center; gap: 8px; z-index: 1001;
  opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.cr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Modal progress bar */
.cr-modal-progress { margin-bottom: 28px; }
.cr-modal-progress-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.cr-modal-progress-fill { height: 100%; background: var(--turquoise-500); border-radius: 4px; transition: width .5s ease-out; }
.cr-modal-progress-text { font-size: .85rem; color: var(--text-secondary); }

/* ═══════ PAGE HERO (subpages) ═══════ */
.page-hero {
  padding: calc(var(--nav-height) + 80px) 0 80px 0;
  background: var(--cream);
}
.page-hero-heading {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.1;
  color: var(--dark); letter-spacing: -.02em; max-width: 700px; margin-bottom: 24px;
}
.page-hero-sub {
  font-size: 1.15rem; line-height: 1.7; color: var(--text-secondary); max-width: 600px;
}
.breadcrumbs{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-light);margin-bottom:28px}
.breadcrumbs a{color:var(--text-secondary);transition:color .2s}
.breadcrumbs a:hover{color:var(--text)}
.breadcrumbs .sep{color:var(--text-muted);font-size:.7rem}
.breadcrumbs .current{color:var(--text-secondary);font-weight:500}

/* ═══════ CONTENT SECTIONS (subpages) ═══════ */
.page-section {
  padding: 100px 0;
  border-top: 1px solid var(--border);
}
.page-section--alt { background: var(--warm-white); }
.page-section-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.page-section-heading {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.15;
  color: var(--dark); letter-spacing: -.02em; margin-bottom: 20px;
}
.page-section-body {
  font-size: 1.1rem; line-height: 1.75; color: var(--text-secondary); margin-bottom: 32px;
}
.page-section-body strong { color: var(--dark); font-weight: 600; }

/* ═══════ MODULE CARDS ═══════ */
.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.module-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  padding: 36px 28px; transition: transform .3s, box-shadow .3s;
}
.module-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.06); }
.module-card-icon {
  width: 48px; height: 48px; border-radius: 12px; display: flex;
  align-items: center; justify-content: center; margin-bottom: 20px;
}
.module-card-icon svg { width: 24px; height: 24px; }
.module-card-title { font-weight: 600; font-size: 1.1rem; color: var(--dark); margin-bottom: 10px; }
.module-card-body { font-size: .9rem; line-height: 1.6; color: var(--text-secondary); }
.module-card--pricing { background: linear-gradient(135deg, rgba(107,232,212,.08), rgba(255,171,120,.08)); border: 1.5px solid var(--turquoise-300); }
.module-card--pricing:hover { border-color: var(--turquoise-500); }

/* ═══════ PRICING ═══════ */
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 900px; margin: 0 auto; }
.pricing-card {
  background: var(--white); border: 1.5px solid var(--border); border-radius: 20px;
  padding: 44px 36px; position: relative; overflow: hidden;
}
.pricing-card--featured { border-color: var(--turquoise-500); }
.pricing-card--featured::before {
  content: 'Most Popular'; position: absolute; top: 20px; right: -30px;
  background: var(--turquoise-btn); color: var(--dark); font-size: .72rem; font-weight: 700;
  padding: 4px 40px; transform: rotate(45deg); text-transform: uppercase; letter-spacing: .05em;
}
.pricing-label { font-size: .85rem; font-weight: 600; color: var(--turquoise-600); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.pricing-title { font-family: var(--font-display); font-size: 2rem; color: var(--dark); margin-bottom: 8px; }
.pricing-price { font-size: 2.8rem; font-weight: 700; color: var(--dark); letter-spacing: -.03em; margin-bottom: 4px; }
.pricing-price span { font-size: 1rem; font-weight: 400; color: var(--text-secondary); }
.pricing-note { font-size: .85rem; color: var(--text-light); margin-bottom: 28px; }
.pricing-features { margin-bottom: 32px; }
.pricing-feature {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; font-size: .92rem; color: var(--text-secondary); line-height: 1.5;
}
.pricing-check { flex-shrink: 0; width: 20px; height: 20px; color: var(--turquoise-500); margin-top: 2px; }

/* ═══════ CASE STUDY CARDS ═══════ */
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.case-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 20px;
  overflow: hidden; transition: transform .3s, box-shadow .3s;
}
.case-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.06); }
.case-card-visual {
  height: 260px; background: linear-gradient(135deg, var(--turquoise-100), var(--coral-100));
  display: flex; align-items: center; justify-content: center;
}
/* ── inline results inside the card ── */
.case-facts-title { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--turquoise-600); margin-bottom: 12px; }
.case-facts { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.case-facts li { position: relative; padding-left: 26px; font-size: .92rem; line-height: 1.45; color: var(--text-secondary); }
.case-facts li::before { content: "\2713"; position: absolute; left: 0; top: -1px; color: var(--turquoise-500); font-weight: 800; }
.case-facts li strong { color: var(--dark); font-weight: 700; }
.case-card-body { padding: 32px; }
.case-card-name { font-family: var(--font-display); font-size: 1.6rem; color: var(--dark); margin-bottom: 6px; }
.case-card-location { font-size: .85rem; color: var(--text-light); margin-bottom: 16px; }
.case-card-text { font-size: .95rem; line-height: 1.65; color: var(--text-secondary); margin-bottom: 20px; }

/* ═══════ TIMELINE ═══════ */
.timeline-item {
  display: grid; grid-template-columns: 80px 1fr; gap: 24px;
  padding: 32px 0; border-bottom: 1px solid var(--border);
}
.timeline-badge {
  width: 52px; height: 52px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 700;
  font-size: .85rem; color: var(--white);
}
.timeline-title { font-weight: 600; font-size: 1.05rem; color: var(--dark); margin-bottom: 6px; }
.timeline-text { font-size: .95rem; line-height: 1.6; color: var(--text-secondary); }

/* ═══════ FOOTER ═══════ */
.footer {
  background: var(--dark); color: rgba(255,255,255,.7); padding: 80px 0 40px 0;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  margin-bottom: 64px;
}
.footer-brand { font-weight: 700; font-size: 1.35rem; color: var(--white); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-brand svg { width: 32px; height: 32px; }
.footer-desc { font-size: .9rem; line-height: 1.65; max-width: 320px; margin-bottom: 24px; }
.footer-col-title { font-weight: 600; font-size: .85rem; color: var(--white); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 20px; }
.footer-col a { display: block; padding: 6px 0; font-size: .9rem; color: rgba(255,255,255,.6); transition: color .2s; }
.footer-col a:hover { color: var(--white); }
.footer-sitemap { margin-top: 24px; }
.footer-sitemap-title { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.28); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.footer-sitemap-links { display: flex; flex-direction: column; gap: 4px; }
.footer-sitemap-links a { font-size: .8rem; color: rgba(255,255,255,.38); transition: color .2s; line-height: 1.6; }
.footer-sitemap-links a:hover { color: rgba(255,255,255,.7); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; color: rgba(255,255,255,.4);
}
.footer-social { display: flex; gap: 16px; }
.footer-social a { color: rgba(255,255,255,.4); transition: color .2s; }
.footer-social a:hover { color: var(--white); }
.footer-company { text-align: right; line-height: 1.65; }
.footer-company strong { color: rgba(255,255,255,.72); font-weight: 600; }
.footer-partners { margin: 8px 0 32px; }
.footer-partners-label { display: block; text-align: center; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 16px; }
.footer-partners-logos { background: #fff; border-radius: 16px; padding: 24px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 46px; }
.footer-partners-logos img { height: 46px; width: auto; object-fit: contain; display: block; }
.footer-partners-logos img.fp-wide { height: 36px; }

/* ═══════ ANIMATIONS ═══════ */
@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }
@keyframes pulse-glow { 0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(1)} 50%{opacity:.6;transform:translate(-50%,-50%) scale(1.2)} }
@keyframes fade-up { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

/* ═══════ WIDGET PROGRESS LINE (mobile) ═══════ */
.w { position: relative; }
@keyframes w-load {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@media (max-width:768px) {
  .w::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, transparent, #6BE8D4, transparent);
    background-size: 200% 100%;
    animation: w-load 2s ease-in-out infinite;
    border-radius: 0 0 16px 16px;
    z-index: 10;
  }
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width:960px) {
  .nav-links { display: none; }
  .nav-mobile-toggle { display: flex; }
}
@media (max-width:1024px) {
  .page-section-grid { grid-template-columns: 1fr; gap: 48px; }
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
  .case-grid { grid-template-columns: 1fr; max-width: 560px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width:900px) {
  :root { --gutter: 24px; }
  .page-hero { padding: calc(var(--nav-height) + 48px) 0 60px 0; }
  .page-hero-heading { font-size: clamp(2rem,6vw,3rem); }
  .page-section { padding: 72px 0; }
  .page-section-heading { font-size: 1.6rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width:480px) {
  :root { --gutter: 18px; }
  .module-grid { grid-template-columns: 1fr; }
  .btn-primary, .btn-secondary, .btn-dark { width: 100%; justify-content: center; }
  .chat-badge { width: 52px; height: 52px; bottom: 20px; right: 20px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-company { text-align: center; }
  .footer-partners-logos { padding: 18px 16px; gap: 16px 28px; }
  .footer-partners-logos img { height: 34px; }
  .footer-partners-logos img.fp-wide { height: 27px; }
}

/* ═══════════════ LEAD CAPTURE FORM ═══════════════ */
.lead-form-section { padding: 80px 0; background: var(--cream); }
.lead-form-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; background: var(--dark); border-radius: 24px; padding: 72px 64px; position: relative; overflow: hidden; }
.lead-form-inner::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; }
.lead-form-inner > * { position: relative; z-index: 2; }
.lead-form-heading { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--white); margin-bottom: 20px; line-height: 1.2; }
.lead-form-body { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.6); margin-bottom: 12px; }
.lead-form-body strong { color: var(--turquoise-300); }
.lead-form-trust { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; align-items: center; }
.lead-form-trust span { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.55); padding: 5px 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 20px; letter-spacing: .02em; }
.lead-form { display: flex; flex-direction: column; gap: 12px; }
.lead-form-field input { width: 100%; padding: 14px 18px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.22); border-radius: 12px; font-family: var(--font-body); font-size: .95rem; color: var(--white); outline: none; transition: border-color .2s, background .2s; }
.lead-form-field input::placeholder { color: rgba(255,255,255,.4); }
.lead-form-field input:focus { border-color: var(--turquoise-400); background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px rgba(32,191,168,.15); }
.lead-form .btn-primary { width: 100%; justify-content: center; padding: 18px 28px; margin-top: 4px; }
.lead-form-disclaimer { font-size: .8rem; color: rgba(255,255,255,.35); text-align: center; margin-top: 2px; }
@media(max-width:1024px) { .lead-form-inner { grid-template-columns: 1fr; gap: 48px; padding: 48px 40px; } }
@media(max-width:480px) { .lead-form-inner { padding: 36px 24px; } .lead-form-heading { font-size: 1.6rem; } }

/* ═══════════════ ROI CALCULATOR ═══════════════ */
.roi-calc-wrap { background: var(--white); border: 1px solid var(--border); border-radius: 24px; padding: 56px; margin-top: 64px; margin-bottom: 16px; }
.roi-calc-header { margin-bottom: 36px; }
.roi-calc-inputs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 32px; }
.roi-calc-field { display: flex; flex-direction: column; gap: 8px; }
.roi-calc-label { font-size: .78rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.roi-calc-input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-family: var(--font-body); font-size: 1rem; color: var(--dark); background: var(--cream); outline: none; transition: border-color .2s; }
.roi-calc-input:focus { border-color: var(--turquoise-500); background: var(--white); }
.roi-calc-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: var(--dark); border-radius: 16px; padding: 32px; }
.roi-calc-result { padding: 20px 22px; background: rgba(255,255,255,.05); border-radius: 12px; }
.roi-calc-result--bad { background: rgba(244,147,95,.1); }
.roi-calc-result--good { background: rgba(94,206,189,.1); }
.roi-calc-result-label { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.roi-calc-result-num { font-family: var(--font-display); font-size: clamp(1.4rem,2.5vw,1.9rem); color: var(--white); letter-spacing: -.02em; line-height: 1.1; }
.roi-calc-num--bad { color: var(--coral-highlight); }
.roi-calc-num--good { color: var(--turquoise-300); }
@media(max-width:1024px) { .roi-calc-inputs { grid-template-columns: repeat(3, 1fr); } .roi-calc-results { grid-template-columns: repeat(2, 1fr); } .roi-calc-wrap { padding: 40px 32px; } }
@media(max-width:640px) { .roi-calc-inputs { grid-template-columns: repeat(2, 1fr); } .roi-calc-results { grid-template-columns: 1fr 1fr; } .roi-calc-wrap { padding: 28px 20px; } }
@media(max-width:480px) { .roi-calc-inputs { grid-template-columns: 1fr 1fr; } .roi-calc-results { grid-template-columns: 1fr; } }

/* ═══════════════ SEO LANDING PAGES ═══════════════ */
.lp-hero { padding: calc(var(--nav-height) + 72px) 0 88px; background: var(--cream); }
.lp-hero-inner { max-width: 980px; margin: 0 auto; }
.lp-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.08; letter-spacing: -.02em; color: var(--dark); margin: 16px 0 20px; }
.lp-hero-sub { font-size: 1.2rem; line-height: 1.7; color: var(--text-secondary); max-width: 780px; margin-bottom: 36px; }
.lp-hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.lp-trust { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 16px; }
.lp-trust-label { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); margin-right: 12px; }
.lp-trust-item { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-secondary); }

/* TL;DR box — AI Overviews fuel */
.lp-tldr { background: var(--white); border: 1.5px solid var(--turquoise-300); border-radius: 16px; padding: 28px 32px; margin-bottom: 40px; box-shadow: 0 4px 16px rgba(94,206,189,.06); }
.lp-tldr-label { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--turquoise-600); background: var(--turquoise-100); padding: 4px 12px; border-radius: 6px; margin-bottom: 14px; }
.lp-tldr-content { font-size: 1.02rem; line-height: 1.7; color: var(--text); }
.lp-tldr-content ul { margin: 12px 0 0 18px; list-style: disc; }
.lp-tldr-content li { padding: 4px 0; color: var(--text-secondary); }
.lp-tldr-content strong { color: var(--dark); font-weight: 600; }

/* Generic landing sections */
.lp-section { padding: 88px 0; border-top: 1px solid var(--border); }
.lp-section--dark { background: var(--dark); color: var(--white); border-top: none; }
.lp-section--alt { background: var(--warm-white); }
.lp-section-head { max-width: 820px; margin: 0 auto 56px; text-align: center; }
.lp-section-eyebrow { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--turquoise-600); margin-bottom: 14px; }
.lp-section--dark .lp-section-eyebrow { color: var(--turquoise-300); }
.lp-section h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15; color: var(--dark); letter-spacing: -.02em; margin-bottom: 16px; }
.lp-section--dark h2 { color: var(--white); }
.lp-section-sub { font-size: 1.1rem; line-height: 1.7; color: var(--text-secondary); }
.lp-section--dark .lp-section-sub { color: rgba(255,255,255,.65); }

/* Feature cards */
.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-features.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin: 0 auto; }
.lp-feature { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 32px; transition: transform .25s, box-shadow .25s; }
.lp-feature:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.05); }
.lp-feature-icon { width: 44px; height: 44px; background: var(--turquoise-100); color: var(--turquoise-600); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.lp-feature-icon svg { width: 22px; height: 22px; }
.lp-feature h3 { font-weight: 600; font-size: 1.1rem; color: var(--dark); margin-bottom: 10px; }
.lp-feature p { font-size: .95rem; line-height: 1.65; color: var(--text-secondary); }
@media(max-width:1024px){ .lp-features{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .lp-features, .lp-features.cols-2 {grid-template-columns:1fr} }

/* Comparison table */
.lp-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--border); background: var(--white); }
.lp-table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 640px; }
.lp-table thead { background: var(--cream-dark); }
.lp-table th { padding: 18px 20px; text-align: left; font-weight: 600; color: var(--dark); font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1.5px solid var(--border); }
.lp-table td { padding: 16px 20px; border-bottom: 1px solid var(--border); color: var(--text-secondary); line-height: 1.55; vertical-align: top; }
.lp-table tr:last-child td { border-bottom: none; }
.lp-table tr.lp-row-highlight { background: rgba(107,232,212,.07); }
.lp-table tr.lp-row-highlight td:first-child { font-weight: 600; color: var(--dark); }
.lp-table td .check { color: var(--turquoise-500); font-weight: 700; }
.lp-table td .cross { color: var(--coral-500); font-weight: 700; }
.lp-table td .partial { color: var(--text-light); }

/* Quote / testimonial block */
.lp-quote { max-width: 820px; margin: 0 auto; padding: 48px; background: var(--white); border: 1px solid var(--border); border-radius: 24px; }
.lp-quote-text { font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 1.8rem); line-height: 1.4; color: var(--dark); margin-bottom: 28px; letter-spacing: -.01em; }
.lp-quote-attr { display: flex; align-items: center; gap: 14px; font-size: .92rem; color: var(--text-secondary); }
.lp-quote-attr strong { color: var(--dark); font-weight: 600; }
.lp-quote-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--turquoise-300), var(--coral-300)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); color: var(--dark); font-size: 1.1rem; }

/* FAQ */
.lp-faq { max-width: 820px; margin: 0 auto; }
.lp-faq-item { border-bottom: 1px solid var(--border); }
.lp-faq-q { padding: 24px 0; font-weight: 600; font-size: 1.05rem; color: var(--dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color .2s; }
.lp-faq-q:hover { color: var(--turquoise-600); }
.lp-faq-q::after { content: '+'; font-size: 1.4rem; color: var(--text-muted); transition: transform .3s; flex-shrink: 0; line-height: 1; }
.lp-faq-q.open::after { transform: rotate(45deg); color: var(--turquoise-500); }
.lp-faq-a { display: none; padding: 0 0 28px 0; font-size: 1rem; line-height: 1.75; color: var(--text-secondary); max-width: 760px; }
.lp-faq-a.open { display: block; }
.lp-faq-a p { margin-bottom: 12px; }
.lp-faq-a ul { margin: 8px 0 12px 22px; list-style: disc; }
.lp-faq-a li { padding: 3px 0; }
.lp-faq-a strong { color: var(--dark); }

/* Final CTA band */
.lp-cta-band { padding: 88px 0; background: var(--dark); color: var(--white); text-align: center; }
.lp-cta-band-inner { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.lp-cta-band h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--white); margin-bottom: 18px; line-height: 1.15; }
.lp-cta-band p { font-size: 1.1rem; line-height: 1.7; color: rgba(255,255,255,.6); margin-bottom: 36px; }
.lp-cta-band .btn-primary { padding: 18px 36px; font-size: 1.05rem; }

/* Prose body for pillar pages */
.lp-prose { max-width: 780px; margin: 0 auto; font-size: 1.08rem; line-height: 1.78; color: var(--text); }
.lp-prose h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--dark); margin: 56px 0 18px; line-height: 1.2; letter-spacing: -.015em; }
.lp-prose h3 { font-weight: 600; font-size: 1.25rem; color: var(--dark); margin: 36px 0 12px; }
.lp-prose p { margin-bottom: 18px; color: var(--text-secondary); }
.lp-prose strong { color: var(--dark); font-weight: 600; }
.lp-prose ul, .lp-prose ol { margin: 14px 0 22px 24px; }
.lp-prose ul { list-style: disc; }
.lp-prose ol { list-style: decimal; }
.lp-prose li { padding: 5px 0; color: var(--text-secondary); }
.lp-prose a { color: var(--turquoise-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lp-prose a:hover { color: var(--turquoise-500); }
.lp-prose blockquote { border-left: 3px solid var(--turquoise-400); padding: 8px 0 8px 24px; margin: 28px 0; font-family: var(--font-display); font-size: 1.3rem; color: var(--dark); line-height: 1.45; }
.lp-prose code { background: var(--cream-dark); padding: 2px 7px; border-radius: 5px; font-size: .92em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.lp-prose .lp-callout { background: var(--cream-dark); border-radius: 14px; padding: 24px 28px; margin: 28px 0; border-left: 3px solid var(--coral-400); }
.lp-prose .lp-callout p:last-child { margin-bottom: 0; }
.lp-prose .meta-byline { display: flex; align-items: center; gap: 14px; font-size: .9rem; color: var(--text-light); margin: -8px 0 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.lp-prose .meta-byline strong { color: var(--text-secondary); font-weight: 600; }

/* FAQ toggle (used on landing pages) — script handled below */
@media(max-width:900px){
  .lp-hero { padding: calc(var(--nav-height) + 40px) 0 60px; }
  .lp-section { padding: 64px 0; }
  .lp-quote { padding: 32px 24px; }
  .lp-cta-band { padding: 64px 0; }
}

/* ═══════════════════════════════════════════════════════
   Cookie Consent Banner
   ═══════════════════════════════════════════════════════ */
.cr-cookie {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .55s ease;
  box-shadow: 0 -8px 40px rgba(0,0,0,.22);
}
.cr-cookie.visible {
  transform: translateY(0);
  opacity: 1;
}
.cr-cookie-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.cr-cookie-body {
  flex: 1;
  min-width: 0;
}
.cr-cookie-title {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: -.01em;
}
.cr-cookie-text {
  font-size: .84rem;
  color: rgba(255,255,255,.55);
  line-height: 1.5;
}
.cr-cookie-text a {
  color: var(--turquoise-300);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .2s;
}
.cr-cookie-text a:hover { color: var(--turquoise-400); }
.cr-cookie-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cr-cookie-btn-primary {
  padding: 10px 22px;
  background: var(--turquoise-btn);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .15s;
  white-space: nowrap;
}
.cr-cookie-btn-primary:hover {
  background: var(--turquoise-btn-hover);
  transform: translateY(-1px);
}
.cr-cookie-btn-secondary {
  padding: 10px 18px;
  background: transparent;
  color: rgba(255,255,255,.65);
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  cursor: pointer;
  transition: border-color .2s, color .2s, transform .15s;
  white-space: nowrap;
}
.cr-cookie-btn-secondary:hover {
  border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.9);
  transform: translateY(-1px);
}
.cr-cookie-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.3);
  border-radius: 6px;
  transition: color .2s, background .2s;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.cr-cookie-close:hover {
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.07);
}
@media (max-width: 768px) {
  .cr-cookie {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px 24px;
  }
  .cr-cookie-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .cr-cookie-icon { display: none; }
}
@media (max-width: 480px) {
  .cr-cookie-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .cr-cookie-btn-primary,
  .cr-cookie-btn-secondary { flex: 1; text-align: center; justify-content: center; }
}

/* ═══════════════ RELATED RESOURCES (SEO cross-linking) ═══════════════ */
.related-resources {
  padding: 80px 0 100px;
  background: var(--cream);
  border-top: 1px solid var(--border);
}
.related-resources-heading {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-light);
  margin-bottom: 24px;
}
.related-resources h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 40px;
  letter-spacing: -.02em;
  max-width: 640px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  min-height: 140px;
  position: relative;
}
.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--turquoise-300);
  box-shadow: 0 12px 32px rgba(32,191,168,.1);
}
.related-card-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--turquoise-600);
}
.related-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.35;
  flex: 1;
}
.related-card-arrow {
  display: inline-flex;
  align-items: center;
  font-size: .82rem;
  color: var(--text-secondary);
  transition: gap .2s;
  gap: 6px;
}
.related-card:hover .related-card-arrow { color: var(--turquoise-600); gap: 10px; }
@media (max-width: 1024px) {
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .related-grid { grid-template-columns: 1fr; }
  .related-resources { padding: 60px 0 72px; }
  .related-card { min-height: auto; }
}