/* ============================================
   Beylood — Smart Agriculture Knowledge
   Static professional site
   ============================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Poppins';
  font-weight: 300;
  font-display: swap;
  src: url('fonts/poppins-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 800;
  font-display: swap;
  src: url('fonts/poppins-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Cairo';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cairo-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Cairo';
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cairo-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Cairo';
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cairo-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Cairo';
  font-weight: 700;
  font-display: swap;
  src: url('fonts/cairo-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ---------- Tokens ---------- */
:root {
  --navy-50: #EAF1FA;
  --navy-100: #C9DBF1;
  --navy-500: #1E55A1;
  --navy-600: #0F3F7E;
  --navy-700: #0B3367;
  --navy-800: #082750;

  --green-50: #ECF8E9;
  --green-100: #CFEDC8;
  --green-300: #7BC142;
  --green-500: #3BA935;
  --green-600: #2F8A2A;
  --green-700: #246C20;

  --paper: #FAFBFC;
  --gray-50: #F4F6F8;
  --gray-100: #E9ECF1;
  --gray-200: #DCE1E8;
  --gray-500: #6A7280;
  --gray-600: #4A525C;
  --gray-700: #353A44;
  --gray-900: #11141A;

  --grad-brand: linear-gradient(135deg, #0F3F7E 0%, #1E6FAE 55%, #3BA935 100%);
  --grad-leaf: linear-gradient(135deg, #3BA935 0%, #7BC142 100%);
  --grad-deep: linear-gradient(180deg, #0F3F7E 0%, #082750 100%);

  --shadow-soft: 0 1px 2px rgba(15, 63, 126, .04), 0 4px 12px rgba(15, 63, 126, .06);
  --shadow-elev: 0 4px 16px rgba(15, 63, 126, .10), 0 12px 32px rgba(15, 63, 126, .08);

  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --paper: #0B1220;
  --gray-50: #15203A;
  --gray-100: #25324D;
  --gray-200: #2F3D5C;
  --gray-500: #98A2BA;
  --gray-600: #B8C2D6;
  --gray-700: #DDE3F0;
  --gray-900: #ECEFF7;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 12px rgba(0, 0, 0, .20);
  --shadow-elev: 0 4px 16px rgba(0, 0, 0, .40), 0 12px 32px rgba(0, 0, 0, .30);
}

[data-theme="dark"] body {
  color: var(--gray-900);
}

[data-theme="dark"] .site-header {
  background: rgba(11, 18, 32, 0.82);
  border-bottom-color: var(--gray-100);
}

[data-theme="dark"] .site-header.is-scrolled {
  border-bottom-color: var(--gray-100);
}

[data-theme="dark"] .nav-links a {
  color: var(--gray-700);
}

[data-theme="dark"] .nav-links a:hover {
  background: var(--gray-50);
  color: var(--gray-900);
}

[data-theme="dark"] .nav-links a.is-active {
  background: rgba(59, 169, 53, 0.18);
  color: var(--green-300);
}

[data-theme="dark"] .lang-btn {
  background: var(--gray-50);
  color: var(--gray-700);
  border-color: var(--gray-100);
}

[data-theme="dark"] .lang-btn:hover {
  background: var(--gray-100);
}

[data-theme="dark"] .menu-btn {
  color: var(--gray-700);
}

[data-theme="dark"] .menu-btn:hover {
  background: var(--gray-50);
}

[data-theme="dark"] .stats-card,
[data-theme="dark"] .card-cat,
[data-theme="dark"] .card-article,
[data-theme="dark"] .founder-card,
[data-theme="dark"] .contact-card {
  background: var(--gray-50);
  border-color: var(--gray-100);
}

[data-theme="dark"] .stat {
  border-right-color: var(--gray-100);
}

[data-theme="dark"] html[dir="rtl"] .stat {
  border-left-color: var(--gray-100);
}

[data-theme="dark"] .section-title,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .founder-name,
[data-theme="dark"] .card-cat h3,
[data-theme="dark"] .card-article h3,
[data-theme="dark"] .contact-value,
[data-theme="dark"] .article-title {
  color: var(--gray-900);
}

[data-theme="dark"] .section-sub,
[data-theme="dark"] .article-lead,
[data-theme="dark"] .article-tips li,
[data-theme="dark"] .about-bio {
  color: var(--gray-600);
}

[data-theme="dark"] .article-tips li strong {
  color: var(--gray-900);
}

[data-theme="dark"] .stat-label,
[data-theme="dark"] .card-meta,
[data-theme="dark"] .contact-label {
  color: var(--gray-500);
}

[data-theme="dark"] .about-section {
  background: #080F1B;
}

[data-theme="dark"] .article-back {
  color: var(--green-300);
}

[data-theme="dark"] .article-back:hover {
  color: var(--green-100);
}

[data-theme="dark"] .soc {
  background: var(--gray-100);
  color: var(--gray-700);
}

[data-theme="dark"] .soc:hover {
  background: var(--green-500);
  color: white;
}

[data-theme="dark"] .pill {
  background: rgba(59, 169, 53, 0.20);
  color: var(--green-300);
}

[data-theme="dark"] .article-header .pill {
  background: rgba(190, 18, 60, 0.20);
  color: #FCA5C0;
}

[data-theme="dark"] .view-all {
  background: transparent;
  color: var(--green-300);
  border-color: rgba(59, 169, 53, 0.30);
}

[data-theme="dark"] .view-all:hover {
  background: rgba(59, 169, 53, 0.12);
  color: var(--green-100);
}

[data-theme="dark"] .btn-white {
  background: var(--gray-50);
  color: var(--gray-900);
}

@media (max-width: 1024px) {
  [data-theme="dark"] .nav-links {
    background: #0B1220;
    border-bottom-color: var(--gray-100);
  }
}

/* Theme toggle icon visibility — moon shown in light, sun shown in dark */
.theme-btn [data-icon="sun"] {
  display: none;
}

[data-theme="dark"] .theme-btn [data-icon="moon"] {
  display: none;
}

[data-theme="dark"] .theme-btn [data-icon="sun"] {
  display: inline-block;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--paper);
  color: var(--gray-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

html[dir="rtl"] body {
  font-family: 'Cairo', 'Poppins', system-ui, sans-serif;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  transition: all .2s ease;
  white-space: nowrap;
}

.btn-ask {
  background: var(--grad-leaf);
  color: white;
  padding: 10px 18px;
  box-shadow: var(--shadow-soft);
}

.btn-ask:hover {
  box-shadow: var(--shadow-elev);
  transform: translateY(-1px);
}

/* "Get Started" navbar CTA — navy so it stands apart from the green AI button */
.btn-getstarted {
  background: var(--navy-600);
  color: #fff;
  padding: 10px 18px;
  box-shadow: var(--shadow-soft);
}
.btn-getstarted:hover {
  background: var(--navy-700);
  box-shadow: var(--shadow-elev);
  transform: translateY(-1px);
}
/* In dark mode navy blends with the background, so use green there */
[data-theme="dark"] .btn-getstarted { background: var(--green-500); }
[data-theme="dark"] .btn-getstarted:hover { background: var(--green-600); }

.btn-accent {
  background: var(--green-500);
  color: white;
  padding: 14px 26px;
}

.btn-accent:hover {
  background: var(--green-600);
}

.btn-ghost-white {
  background: rgba(255, 255, 255, 0.10);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(6px);
  padding: 14px 26px;
}

.btn-ghost-white:hover {
  background: rgba(255, 255, 255, 0.20);
}

.btn-white {
  background: white;
  color: var(--navy-700);
  padding: 14px 26px;
  box-shadow: var(--shadow-soft);
}

.btn-white:hover {
  box-shadow: var(--shadow-elev);
  transform: translateY(-1px);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: 0 1px 0 rgba(15,63,126,.06), 0 8px 30px rgba(15,63,126,.08);
  border-bottom-color: rgba(233, 236, 241, .6);
}
[data-theme="dark"] .site-header { background: rgba(11, 18, 32, 0.62); }
[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(11, 18, 32, 0.82);
  box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 8px 30px rgba(0,0,0,.35);
  border-bottom-color: rgba(37, 50, 77, .6);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

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

.logo-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy-700);
  letter-spacing: -0.01em;
}

[data-theme="dark"] .logo-name {
  color: var(--gray-900);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  border-radius: 10px;
  transition: all .15s;
}

.nav-links a:hover {
  background: var(--gray-50);
  color: var(--navy-700);
}

.nav-links a.is-active {
  background: var(--green-50);
  color: var(--green-700);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gray-200);
  background: white;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  transition: all .15s;
}

.lang-btn:hover {
  background: var(--gray-50);
}

.menu-btn {
  display: none;
  padding: 8px;
  border-radius: 8px;
  color: var(--gray-700);
}

.menu-btn:hover {
  background: var(--gray-50);
}

.nav-links.is-open {
  display: flex !important;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-deep);
  color: white;
  padding: 120px 0 140px;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.4;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  top: -160px;
  right: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: rgba(59, 169, 53, 0.30);
  filter: blur(80px);
  pointer-events: none;
}

html[dir="rtl"] .hero::after {
  right: auto;
  left: -160px;
}

.hero-inner {
  position: relative;
  max-width: 780px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--green-300);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow svg {
  color: var(--green-300);
}

.eyebrow-on-color {
  color: white;
  background: rgba(255, 255, 255, 0.15);
  border-color: transparent;
}

.eyebrow-on-color svg {
  color: white;
}

.hero h1 {
  margin: 22px 0;
  font-size: clamp(36px, 6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.hero p {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 640px;
}

.hero-ctas {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Stats ---------- */
.stats {
  position: relative;
  z-index: 5;
  margin-top: -64px;
}

.stats-card {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  padding: 32px 24px;
  text-align: center;
  border-right: 1px solid var(--gray-100);
}

.stat:last-child {
  border-right: none;
}

html[dir="rtl"] .stat {
  border-right: none;
  border-left: 1px solid var(--gray-100);
}

html[dir="rtl"] .stat:last-child {
  border-left: none;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--navy-700);
  line-height: 1;
}

.stat-label {
  margin-top: 6px;
  font-size: 13px;
  color: var(--gray-500);
}

/* ---------- Sections ---------- */
.section {
  padding: 80px 0;
}

.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-600);
}

.section-title {
  margin-top: 8px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy-700);
  letter-spacing: -0.01em;
}

.section-sub {
  margin-top: 12px;
  font-size: 16px;
  color: var(--gray-600);
  max-width: 600px;
}

.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.view-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--green-600);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--green-100);
  transition: all .15s;
  white-space: nowrap;
}

.view-all:hover {
  background: var(--green-50);
  color: var(--green-700);
}

/* ---------- Categories ---------- */
.grid-cats {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card-cat {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: 0 1px 2px rgba(15, 63, 126, .04);
  transition: all .2s ease;
}

.card-cat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-elev);
  border-color: var(--green-100);
}

.cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
}

.cat-green {
  background: var(--green-50);
  color: var(--green-600);
}

.cat-navy {
  background: var(--navy-50);
  color: var(--navy-600);
}

.cat-amber {
  background: #FEF3C7;
  color: #B45309;
}

.cat-sky {
  background: #E0F2FE;
  color: #0369A1;
}

.cat-orange {
  background: #FFEDD5;
  color: #C2410C;
}

.cat-rose {
  background: #FFE4E6;
  color: #BE123C;
}

.card-cat h3 {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy-700);
}

.card-cat p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.65;
}

/* ---------- ASK CTA ---------- */
.ask-section {
  padding: 40px 0 80px;
}

.ask-card {
  background: var(--grad-brand);
  color: white;
  border-radius: var(--radius-xl);
  padding: 56px 56px;
  position: relative;
  overflow: hidden;
}

.ask-card::before {
  content: '';
  position: absolute;
  right: -100px;
  top: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  filter: blur(60px);
  pointer-events: none;
}

html[dir="rtl"] .ask-card::before {
  right: auto;
  left: -100px;
}

.ask-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: center;
}

.ask-grid h2 {
  margin-top: 18px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  font-weight: 700;
}

.ask-grid p {
  margin-top: 16px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

.ask-grid .btn-white {
  margin-top: 28px;
}

/* Chat preview */
.chat-preview {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 18px;
  backdrop-filter: blur(6px);
}

.bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.bubble:last-child {
  margin-bottom: 0;
}

.bubble-right {
  justify-content: flex-end;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.avatar-bot {
  background: var(--green-500);
}

.avatar-user {
  background: rgba(255, 255, 255, 0.30);
}

.msg {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  max-width: 85%;
  line-height: 1.5;
}

.msg-bot {
  background: rgba(255, 255, 255, 0.15);
  border-top-left-radius: 4px;
}

.msg-user {
  background: white;
  color: var(--navy-700);
  border-top-right-radius: 4px;
}

html[dir="rtl"] .msg-bot {
  border-top-left-radius: 16px;
  border-top-right-radius: 4px;
}

html[dir="rtl"] .msg-user {
  border-top-right-radius: 16px;
  border-top-left-radius: 4px;
}

/* ---------- Ask Beylood chat page ---------- */
.ask-page {
  padding-top: 56px;
}

.ask-container {
  max-width: 820px;
}

.ask-intro {
  text-align: center;
  margin-bottom: 32px;
}

.ask-intro .section-sub {
  margin-left: auto;
  margin-right: auto;
}

.chat-window {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[data-theme="dark"] .chat-window {
  background: var(--gray-50);
  border-color: var(--gray-100);
}

.chat-messages {
  padding: 24px;
  min-height: 320px;
  max-height: 540px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-messages .bubble {
  margin-bottom: 0;
}

.chat-messages .msg {
  max-width: 78%;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.chat-messages .msg-bot {
  background: var(--gray-50);
  color: var(--gray-900);
  border-top-left-radius: 4px;
}

.chat-messages .msg-user {
  background: var(--green-500);
  color: white;
  border-top-right-radius: 4px;
}

[data-theme="dark"] .chat-messages .msg-bot {
  background: var(--gray-100);
  color: var(--gray-900);
}

html[dir="rtl"] .chat-messages .msg-bot {
  border-top-left-radius: 16px;
  border-top-right-radius: 4px;
}

html[dir="rtl"] .chat-messages .msg-user {
  border-top-right-radius: 16px;
  border-top-left-radius: 4px;
}

/* Typing indicator dots */
.bubble.typing .msg-bot {
  padding: 14px 18px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.bubble.typing .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gray-500);
  animation: chat-bounce 1.2s infinite ease-in-out;
}

.bubble.typing .dot:nth-child(2) {
  animation-delay: 0.15s;
}

.bubble.typing .dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-bounce {

  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: .4;
  }

  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.chat-suggestions {
  display: flex;
  gap: 8px;
  padding: 0 24px 14px;
  flex-wrap: wrap;
}

.chip {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--green-50);
  color: var(--green-700);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  text-align: start;
}

.chip:hover {
  background: var(--green-100);
}

[data-theme="dark"] .chip {
  background: rgba(59, 169, 53, 0.15);
  color: var(--green-300);
}

[data-theme="dark"] .chip:hover {
  background: rgba(59, 169, 53, 0.25);
}

.chat-form {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  align-items: flex-end;
}

[data-theme="dark"] .chat-form {
  background: var(--gray-100);
  border-top-color: var(--gray-200);
}

.chat-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  background: white;
  color: var(--gray-900);
  max-height: 160px;
  overflow-y: auto;
  transition: border-color .15s, box-shadow .15s;
}

.chat-input:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(59, 169, 53, 0.18);
}

.chat-input::placeholder {
  color: var(--gray-500);
}

.chat-input:disabled {
  opacity: .6;
  cursor: not-allowed;
}

[data-theme="dark"] .chat-input {
  background: var(--gray-50);
  color: var(--gray-900);
  border-color: var(--gray-200);
}

.chat-send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green-500);
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .15s;
}

.chat-send:hover:not(:disabled) {
  background: var(--green-600);
  transform: scale(1.05);
}

.chat-send:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.chat-send.is-loading {
  animation: chat-pulse 1.2s infinite;
}

@keyframes chat-pulse {

  0%,
  100% {
    opacity: .6;
  }

  50% {
    opacity: 1;
  }
}

.chat-hint {
  padding: 12px 24px 18px;
  font-size: 12px;
  color: var(--gray-500);
  text-align: center;
}

@media (max-width: 720px) {
  .chat-messages {
    padding: 16px;
    min-height: 280px;
  }

  .chat-suggestions {
    padding: 0 16px 12px;
  }

  .chat-form {
    padding: 12px 14px;
  }

  .chat-messages .msg {
    max-width: 88%;
  }
}

/* ---------- Articles ---------- */
.grid-articles {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card-article {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 63, 126, .04);
  transition: all .2s ease;
}

.card-article:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-elev);
}

.card-cover {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* ---------- Premium image system: zoom + watermark ---------- */
.card-article { overflow: hidden; }
.card-article:hover .card-cover { transform: scale(1.06); }

/* Subtle Beylood watermark on every cover */
.card-cover::before,
.article-cover::before {
  content: 'BEYLOOD';
  position: absolute;
  bottom: 10px;
  inset-inline-end: 12px;
  z-index: 3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  pointer-events: none;
  opacity: .85;
}

/* Soft gradient scrim at the bottom of covers for legibility + depth */
.card-cover, .article-cover { isolation: isolate; }

.cover-1 {
  background: linear-gradient(135deg, #0F3F7E 0%, #3BA935 100%);
}

.cover-2 {
  background: linear-gradient(135deg, #3BA935 0%, #7BC142 100%);
}

.cover-3 {
  background: linear-gradient(135deg, #1E55A1 0%, #5DB73E 100%);
}

.cover-tomato {
  background: #BE123C url('assets/preventing-tomato-diseases.jpg') center/cover no-repeat;
}

.cover-tomato::after {
  content: none;
}

.cover-farm-lessons {
  background: #2F8A2A url('assets/farm-lessons.jpg') center/cover no-repeat;
}

.cover-farm-lessons::after {
  content: none;
}

.cover-tomato-farming {
  background:
    linear-gradient(to top, rgba(11,19,32,.45) 0%, rgba(11,19,32,.05) 45%, transparent 70%),
    #BE123C url('assets/tomato-farming.jpg') center/cover no-repeat;
}

.cover-tomato-farming::after {
  content: none;
}

.cover-onion-farming {
  background:
    linear-gradient(to top, rgba(11,19,32,.45) 0%, rgba(11,19,32,.05) 45%, transparent 70%),
    #92400E url('assets/onion-farming.jpg') center/cover no-repeat;
}
.cover-onion-farming::after { content: none; }

.cover-maize-farming {
  background:
    linear-gradient(to top, rgba(11,19,32,.45) 0%, rgba(11,19,32,.05) 45%, transparent 70%),
    #854D0E url('assets/maize-farming.jpg') center/cover no-repeat;
}
.cover-maize-farming::after { content: none; }

.cover-rice-farming {
  background:
    linear-gradient(to top, rgba(11,19,32,.45) 0%, rgba(11,19,32,.05) 45%, transparent 70%),
    #65A30D url('assets/rice-farming.jpg') center/cover no-repeat;
}
.cover-rice-farming::after { content: none; }

.cover-aphids {
  background: linear-gradient(135deg, #65A30D 0%, #84CC16 100%);
}
.cover-aphids::after { content: none; }

.cover-watermelon-farming {
  background:
    linear-gradient(to top, rgba(11,19,32,.45) 0%, rgba(11,19,32,.05) 45%, transparent 70%),
    #16A34A url('assets/watermelon-farming.jpg') center/cover no-repeat;
}
.cover-watermelon-farming::after { content: none; }

.cover-chili-farming {
  background:
    linear-gradient(to top, rgba(11,19,32,.45) 0%, rgba(11,19,32,.05) 45%, transparent 70%),
    #B91C1C url('assets/chillipapper-farming.jpg') center/cover no-repeat;
}
.cover-chili-farming::after { content: none; }

.cover-news-1 { background: linear-gradient(135deg, #0B3367 0%, #1E6FAE 100%); }
.cover-news-1::after { content: none; }
.cover-news-2 { background: linear-gradient(135deg, #B45309 0%, #F59E0B 100%); }
.cover-news-3 { background: linear-gradient(135deg, #0369A1 0%, #38BDF8 100%); }
.cover-news-4 { background: linear-gradient(135deg, #6D28D9 0%, #A78BFA 100%); }
.cover-news-5 { background: linear-gradient(135deg, #BE123C 0%, #FB7185 100%); }
.cover-news-6 { background: linear-gradient(135deg, #2F8A2A 0%, #7BC142 100%); }

/* New crop covers (gradient placeholders) */
.cover-cabbage-farming { background: linear-gradient(135deg, #15803D 0%, #4ADE80 100%); }
.cover-cabbage-farming::after { content: none; }
.cover-banana-farming { background: linear-gradient(135deg, #CA8A04 0%, #FDE047 100%); }
.cover-banana-farming::after { content: none; }
.cover-mango-farming { background: linear-gradient(135deg, #D97706 0%, #FBBF24 100%); }
.cover-mango-farming::after { content: none; }
.cover-cassava-farming { background: linear-gradient(135deg, #92400E 0%, #D6A35C 100%); }
.cover-cassava-farming::after { content: none; }

/* New pest/disease covers (gradient placeholders) */
.cover-whiteflies { background: linear-gradient(135deg, #64748B 0%, #E2E8F0 100%); }
.cover-whiteflies::after { content: none; }
.cover-fall-armyworm { background: linear-gradient(135deg, #57534E 0%, #A8A29E 100%); }
.cover-fall-armyworm::after { content: none; }
.cover-early-blight { background: linear-gradient(135deg, #B45309 0%, #FBBF24 100%); }
.cover-early-blight::after { content: none; }
.cover-late-blight { background: linear-gradient(135deg, #1E3A2F 0%, #4D7C0F 100%); }
.cover-late-blight::after { content: none; }
.cover-powdery-mildew { background: linear-gradient(135deg, #6B7280 0%, #F3F4F6 100%); }
.cover-powdery-mildew::after { content: none; }
.cover-root-rot { background: linear-gradient(135deg, #44260F 0%, #92400E 100%); }
.cover-root-rot::after { content: none; }

/* ============================================================
   WEB APP — navbar profile chip, dashboard, bookmarks
   ============================================================ */

/* ---- Navbar profile chip ---- */
.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.auth-chip-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
  color: var(--gray-900);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.auth-chip-link:hover {
  background: var(--green-50);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.auth-avatar,
.auth-avatar-img,
.auth-avatar-fallback {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.auth-avatar { background: var(--grad-leaf); }
.auth-avatar-img { object-fit: cover; }
.auth-avatar-fallback {
  background: var(--grad-brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
}
.auth-chip-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--gray-200);
  background: transparent;
  color: var(--gray-600);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.auth-logout-btn:hover { background: #FDECEC; color: #C0392B; border-color: #F3C7C2; }
[data-theme="dark"] .auth-logout-btn:hover { background: rgba(192,57,43,.18); }
@media (max-width: 720px) { .auth-chip-name { display: none; } }

/* ---- Bookmark button on articles ---- */
.bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--green-500);
  background: transparent;
  color: var(--green-600);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.bookmark-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.bookmark-btn.is-saved { background: var(--green-500); color: #fff; border-color: var(--green-500); }
.bookmark-btn:disabled { opacity: .6; cursor: default; }

/* ---- Dashboard loading gate ---- */
.dash-loading {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--gray-500);
}
.dash-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid var(--gray-100);
  border-top-color: var(--green-500);
  animation: dashSpin .8s linear infinite;
}
@keyframes dashSpin { to { transform: rotate(360deg); } }

/* ---- Dashboard layout ---- */
.dash-section { padding-top: 40px; }
.dash-welcome { margin-bottom: 28px; }
.dash-title {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--gray-900);
  margin: 0 0 6px;
}
.dash-name {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dash-subtitle { color: var(--gray-500); font-size: 16px; margin: 0; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.dash-card {
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 24px;
}
[data-theme="dark"] .dash-card { background: var(--gray-50); border-color: var(--gray-200); }
.profile-card { grid-column: span 7; }
.stat-card { grid-column: span 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.saved-card { grid-column: span 7; }
.settings-card { grid-column: span 5; }
@media (max-width: 900px) {
  .profile-card, .stat-card, .saved-card, .settings-card { grid-column: span 12; }
}

.dash-card-head { margin-bottom: 16px; }
.dash-card-head h2 { font-size: 18px; font-weight: 700; color: var(--gray-900); margin: 0; }

/* Profile card */
.profile-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.profile-avatar,
.profile-avatar .auth-avatar-img,
.profile-avatar .auth-avatar-fallback {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.profile-avatar { background: var(--grad-brand); box-shadow: var(--shadow-soft); }
.profile-avatar .auth-avatar-fallback { font-size: 22px; }
.profile-name { font-size: 20px; font-weight: 700; color: var(--gray-900); margin: 0 0 2px; }
.profile-email { color: var(--gray-500); font-size: 14px; margin: 0; word-break: break-all; }
.profile-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 0; padding-top: 18px; border-top: 1px solid var(--gray-100);
}
.profile-meta dt { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); margin-bottom: 4px; }
.profile-meta dd { margin: 0; font-weight: 600; color: var(--gray-900); font-size: 14px; }

/* Stat card */
.stat-block { display: flex; flex-direction: column; }
.stat-num { font-size: 40px; font-weight: 800; line-height: 1; color: var(--green-500); }
.stat-label { color: var(--gray-500); font-size: 14px; margin-top: 4px; }
.stat-cta { white-space: nowrap; }

/* Saved list */
.saved-list { display: flex; flex-direction: column; gap: 10px; }
.saved-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--gray-50); border: 1px solid var(--gray-100);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.saved-row:hover { transform: translateX(2px); box-shadow: var(--shadow-soft); }
.saved-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gray-900); font-weight: 600; font-size: 15px; min-width: 0; }
.saved-ico { color: var(--green-500); flex: none; display: inline-flex; }
.saved-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-remove {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: transparent; color: var(--gray-500);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.saved-remove:hover { background: #FDECEC; color: #C0392B; }
[data-theme="dark"] .saved-remove:hover { background: rgba(192,57,43,.18); }
.saved-empty { text-align: center; color: var(--gray-500); padding: 28px 8px; }
.saved-empty svg { color: var(--gray-200); margin-bottom: 10px; }
.saved-empty p { margin: 0 0 16px; font-size: 14px; }

/* Settings */
.settings-form { display: flex; flex-direction: column; }
.settings-form .auth-label { margin-top: 12px; }
.settings-form .auth-submit { margin-top: 18px; }
.dash-logout {
  margin-top: 18px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--gray-200); background: transparent;
  color: var(--gray-600); font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dash-logout:hover { background: #FDECEC; color: #C0392B; border-color: #F3C7C2; }
[data-theme="dark"] .dash-logout:hover { background: rgba(192,57,43,.18); }

/* RTL tweaks */
[dir="rtl"] .saved-row:hover { transform: translateX(-2px); }
[dir="rtl"] .auth-chip-link { padding: 4px 4px 4px 12px; }

.card-body {
  padding: 22px;
}

.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--green-50);
  color: var(--green-700);
  font-size: 12px;
  font-weight: 600;
}

.card-article h3 {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--navy-700);
}

.card-meta {
  margin-top: 16px;
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--gray-500);
}

/* ---------- Article page ---------- */
.article-page {
  padding-top: 56px;
}

.article-container {
  max-width: 780px;
}

.article-back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-600);
  margin-bottom: 24px;
  transition: color .15s;
}

.article-back:hover {
  color: var(--green-700);
}

.article-header {
  margin-bottom: 28px;
}

.article-header .pill {
  background: #FFE4E6;
  color: #BE123C;
}

.article-title {
  margin-top: 14px;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy-700);
  letter-spacing: -0.01em;
}

.article-meta {
  margin-top: 14px;
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--gray-500);
}

.article-cover {
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-lg);
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
}

.article-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 36px 36px;
}

.article-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--gray-700);
  margin-bottom: 28px;
}

.article-tips {
  list-style: decimal;
  padding-inline-start: 22px;
  display: grid;
  gap: 18px;
}

.article-tips li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-700);
  padding-inline-start: 6px;
}

.article-tips li strong {
  color: var(--navy-700);
  font-weight: 600;
  margin-inline-end: 6px;
}

/* Long-form article body (h2 + p sections) */
.article-h2 {
  margin-top: 36px;
  margin-bottom: 14px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: var(--navy-700);
  letter-spacing: -0.01em;
  position: relative;
  padding-inline-start: 14px;
}

.article-h2::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--green-500), var(--navy-700));
}

.article-p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.article-p em {
  font-style: italic;
  color: var(--navy-700);
}

.article-list {
  list-style: disc;
  padding-inline-start: 22px;
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.article-list li {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--gray-700);
  padding-inline-start: 4px;
}

.article-list li strong {
  color: var(--navy-700);
  font-weight: 600;
}

[data-theme="dark"] .article-h2 {
  color: var(--gray-900);
}

[data-theme="dark"] .article-p,
[data-theme="dark"] .article-list li {
  color: var(--gray-600);
}

[data-theme="dark"] .article-p em,
[data-theme="dark"] .article-list li strong {
  color: var(--gray-900);
}

/* ---------- News page enhancements ---------- */
.news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 36px;
}
.news-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: white;
  color: var(--gray-600);
  cursor: pointer;
  transition: all .2s ease;
}
.news-chip:hover { border-color: var(--green-300); color: var(--navy-700); }
.news-chip.is-active {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: white;
  box-shadow: var(--shadow-soft);
}
[data-theme="dark"] .news-chip { background: var(--gray-50); border-color: var(--gray-100); color: var(--gray-600); }
[data-theme="dark"] .news-chip.is-active { background: var(--green-500); border-color: var(--green-500); color: white; }

.card-summary {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gray-600);
}
[data-theme="dark"] .card-summary { color: var(--gray-500); }

.card-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
[data-theme="dark"] .card-foot { border-top-color: var(--gray-100); }
.card-source {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: 0.01em;
}
.card-readmore {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-600);
  white-space: nowrap;
  transition: gap .2s ease;
}
.card-article:hover .card-readmore { color: var(--green-500); }
[data-theme="dark"] .card-readmore { color: var(--green-300); }

.news-disclaimer {
  margin-top: 36px;
  padding: 16px 20px;
  background: var(--gray-50);
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gray-500);
  text-align: center;
}
[data-theme="dark"] .news-disclaimer { background: var(--gray-50); color: var(--gray-500); }

/* Article source box (bottom of news articles) */
.article-source {
  margin-top: 36px;
  padding: 20px 24px;
  background: var(--green-50);
  border-inline-start: 4px solid var(--green-500);
  border-radius: 12px;
}
[data-theme="dark"] .article-source { background: rgba(59,169,53,.1); }
.article-source-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-700);
  margin-bottom: 6px;
}
[data-theme="dark"] .article-source-label { color: var(--green-300); }
.article-source p { font-size: 14px; color: var(--gray-700); line-height: 1.6; }
[data-theme="dark"] .article-source p { color: var(--gray-600); }
.article-source a { color: var(--green-700); font-weight: 600; }
[data-theme="dark"] .article-source a { color: var(--green-300); }

/* ---------- Contact form ---------- */
.contact-form-wrap {
  max-width: 720px;
  margin: 56px auto 0;
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: 22px;
  box-shadow: var(--shadow-elev);
  padding: 40px 36px;
}
[data-theme="dark"] .contact-form-wrap { background: var(--gray-50); border-color: var(--gray-100); }
.contact-form-head { text-align: center; margin-bottom: 28px; }
.contact-form-head .section-title { margin-top: 6px; }
.contact-form { display: grid; gap: 14px; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-textarea { resize: vertical; min-height: 120px; line-height: 1.6; font-family: inherit; }
.contact-submit { width: 100%; }
@media (max-width: 600px) {
  .contact-form-row { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 28px 22px; }
}

/* ---------- Auth user chip (header when logged in) ---------- */
.auth-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.auth-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-700);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="dark"] .auth-user-name { color: var(--gray-900); }
.auth-logout {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gray-200);
  background: white;
  color: var(--gray-700);
  cursor: pointer;
  transition: all .15s ease;
}
.auth-logout:hover { background: var(--green-50); color: var(--green-700); border-color: var(--green-300); }
[data-theme="dark"] .auth-logout { background: var(--gray-50); color: var(--gray-700); border-color: var(--gray-100); }

/* Auth message states */
.auth-msg.is-error { color: #BE123C; }
.auth-msg.is-info { color: var(--green-700); }
[data-theme="dark"] .auth-msg.is-error { color: #FCA5C0; }
[data-theme="dark"] .auth-msg.is-info { color: var(--green-300); }

/* ---------- Premium animations & micro-interactions ---------- */
@keyframes blFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes blFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes blGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes blFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Premium hero enhancements ---------- */
.hero-inner > * { animation: blFadeUp .9s cubic-bezier(.16,1,.3,1) both; }
.hero-inner .eyebrow { animation-delay: .05s; }
.hero-inner h1 { animation-delay: .15s; }
.hero-inner p { animation-delay: .25s; }
.hero-inner .hero-ctas { animation-delay: .35s; }
.hero-inner .hero-trust { animation-delay: .45s; }

.hero {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(59,169,53,.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(123,193,66,.18) 0%, transparent 55%),
    var(--grad-deep);
}

.hero-trust {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
.hero-trust > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-trust svg { color: var(--green-300); flex-shrink: 0; }

/* ---------- Services section ---------- */
.services-section {
  padding: 100px 0;
  background: var(--paper);
}
[data-theme="dark"] .services-section { background: var(--paper); }

.services-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}
.services-head .section-sub { margin-left: auto; margin-right: auto; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  position: relative;
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: 20px;
  padding: 36px 32px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .35s ease,
              border-color .25s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, transparent 50%, rgba(59,169,53,.04) 100%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(15,63,126,.12);
  border-color: var(--green-100);
}
.service-card:hover::before { opacity: 1; }
[data-theme="dark"] .service-card {
  background: var(--gray-50);
  border-color: var(--gray-100);
}
[data-theme="dark"] .service-card:hover { border-color: var(--green-300); }

.service-icon {
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--green-50);
  color: var(--green-600);
  margin-bottom: 22px;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.service-card:hover .service-icon { transform: scale(1.08) rotate(-3deg); }
.service-icon.is-navy { background: var(--navy-50); color: var(--navy-600); }
.service-icon.is-amber { background: #FEF3C7; color: #B45309; }
.service-icon.is-sky { background: #E0F2FE; color: #0369A1; }
.service-icon.is-rose { background: #FFE4E6; color: #BE123C; }
.service-icon.is-violet { background: #EDE9FE; color: #6D28D9; }
[data-theme="dark"] .service-icon { background: rgba(123,193,66,.16); color: var(--green-300); }
[data-theme="dark"] .service-icon.is-navy { background: rgba(30,111,174,.16); color: #93C5FD; }
[data-theme="dark"] .service-icon.is-amber { background: rgba(245,158,11,.16); color: #FCD34D; }
[data-theme="dark"] .service-icon.is-sky { background: rgba(3,105,161,.16); color: #7DD3FC; }
[data-theme="dark"] .service-icon.is-rose { background: rgba(190,18,60,.16); color: #FCA5C0; }
[data-theme="dark"] .service-icon.is-violet { background: rgba(109,40,217,.16); color: #C4B5FD; }

.service-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--navy-700);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
[data-theme="dark"] .service-card h3 { color: var(--gray-900); }

.service-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--gray-600);
  margin-bottom: 18px;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green-600);
  transition: gap .25s ease;
}
.service-card:hover .service-link { gap: 10px; }
[data-theme="dark"] .service-link { color: var(--green-300); }

@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-section { padding: 72px 0; }
  .service-card { padding: 28px 24px; }
}

/* ---------- Premium typography polish ---------- */
.section-title, .hero h1, .article-title {
  font-feature-settings: "ss01", "kern";
  text-rendering: optimizeLegibility;
}

/* Smoother card hover everywhere */
.card-cat, .card-article, .stats-card, .founder-card, .contact-card, .result-card, .faq-item {
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .35s ease,
              border-color .25s ease;
}
.card-cat:hover, .card-article:hover {
  transform: translateY(-6px);
}

/* ---------- Auth pages (Sign In / Sign Up) ---------- */
.auth-section { padding: 56px 0 80px; }
.auth-container { max-width: 480px; }

.auth-card {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: 22px;
  box-shadow: var(--shadow-elev);
  padding: 40px 36px;
}
[data-theme="dark"] .auth-card { background: var(--gray-50); border-color: var(--gray-100); }

.auth-head { text-align: center; margin-bottom: 28px; }
.auth-logo img { height: 48px; margin: 0 auto 14px; }
.auth-title {
  font-size: 24px; font-weight: 700;
  color: var(--navy-700);
  letter-spacing: -0.01em;
  margin: 0;
}
[data-theme="dark"] .auth-title { color: var(--gray-900); }
.auth-sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--gray-600);
}

.auth-form { display: grid; gap: 14px; }

.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  font: inherit;
  font-size: 14px; font-weight: 600;
  color: var(--navy-700);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.auth-google:hover { background: var(--gray-50); border-color: var(--gray-300); }
[data-theme="dark"] .auth-google { background: var(--gray-100); color: var(--gray-900); border-color: var(--gray-200); }
[data-theme="dark"] .auth-google:hover { background: var(--gray-200); }

.auth-divider {
  display: flex; align-items: center;
  margin: 8px 0;
  font-size: 12px; color: var(--gray-500);
  text-align: center;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1;
  height: 1px;
  background: var(--gray-100);
}
.auth-divider span { padding: 0 12px; }

.auth-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-700);
  margin-bottom: -8px;
}
[data-theme="dark"] .auth-label { color: var(--gray-900); }

.auth-input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  background: var(--paper);
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  color: var(--gray-900);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-input:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(59,169,53,.15);
}
.auth-input::placeholder { color: var(--gray-500); }
[data-theme="dark"] .auth-input { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-900); }

.auth-pass-wrap { position: relative; }
.auth-pass-wrap .auth-input { padding-inline-end: 44px; }
.auth-pass-toggle {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  inset-inline-end: 10px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: var(--gray-500);
  cursor: pointer;
  border-radius: 8px;
}
.auth-pass-toggle:hover { color: var(--navy-700); background: var(--gray-50); }

.auth-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  margin-top: 2px;
}
.auth-check {
  display: inline-flex; align-items: center;
  gap: 8px;
  color: var(--gray-700);
  cursor: pointer;
}
[data-theme="dark"] .auth-check { color: var(--gray-700); }
.auth-check input { width: 16px; height: 16px; accent-color: var(--green-500); }
.auth-terms { font-size: 13px; line-height: 1.55; }
.auth-terms a { color: var(--green-700); text-decoration: underline; }
[data-theme="dark"] .auth-terms a { color: var(--green-300); }

.auth-forgot {
  color: var(--green-700);
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease;
}
.auth-forgot:hover { color: var(--green-500); }
[data-theme="dark"] .auth-forgot { color: var(--green-300); }

.auth-submit {
  margin-top: 6px;
  padding: 13px 18px;
  background: var(--grad-leaf);
  color: white;
  font: inherit;
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.02em;
  border: 0; border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .2s ease;
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: var(--shadow-elev); }

.auth-msg {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--green-700);
  text-align: center;
  min-height: 1em;
}
[data-theme="dark"] .auth-msg { color: var(--green-300); }

.auth-foot {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--gray-600);
}
.auth-foot a {
  color: var(--green-700);
  font-weight: 600;
  text-decoration: none;
  margin-inline-start: 4px;
}
.auth-foot a:hover { color: var(--green-500); }
[data-theme="dark"] .auth-foot a { color: var(--green-300); }

@media (max-width: 540px) {
  .auth-card { padding: 28px 22px; border-radius: 18px; }
  .auth-title { font-size: 20px; }
}

/* ---------- FAQ (Ask page) ---------- */
.faq-section { padding: 64px 0 80px; }
.faq-container { max-width: 880px; }
.faq-head { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.faq-head .section-sub { margin-left: auto; margin-right: auto; }

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-item[open] {
  border-color: var(--green-300);
  box-shadow: var(--shadow-elev);
}

.faq-q {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-700);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: relative;
  transition: color .15s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--green-700); }

.faq-q::after {
  content: '+';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform .25s ease, background .15s ease;
}
.faq-item[open] .faq-q::after {
  content: '−';
  background: var(--green-500);
  color: white;
  transform: rotate(180deg);
}

.faq-a {
  padding: 0 24px 24px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-700);
  border-top: 1px solid var(--gray-100);
  padding-top: 18px;
}

[data-theme="dark"] .faq-item {
  background: var(--gray-50);
  border-color: var(--gray-100);
}
[data-theme="dark"] .faq-item[open] { border-color: var(--green-300); }
[data-theme="dark"] .faq-q { color: var(--gray-900); }
[data-theme="dark"] .faq-q:hover { color: var(--green-300); }
[data-theme="dark"] .faq-q::after {
  background: rgba(123,193,66,.16);
  color: var(--green-300);
}
[data-theme="dark"] .faq-item[open] .faq-q::after {
  background: var(--green-500);
  color: white;
}
[data-theme="dark"] .faq-a {
  color: var(--gray-600);
  border-top-color: var(--gray-100);
}

@media (max-width: 720px) {
  .faq-q { padding: 16px 18px; font-size: 15px; }
  .faq-a { padding: 14px 18px 20px; font-size: 14px; }
}

/* Related articles */
.related-section {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--gray-200);
}

.related-title {
  font-size: clamp(20px, 2.6vw, 24px);
  font-weight: 700;
  color: var(--navy-700);
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}

[data-theme="dark"] .related-section {
  border-top-color: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .related-title {
  color: var(--gray-900);
}

/* ---------- About / Founder ---------- */
.about-section {
  background: var(--gray-50);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-bio {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-700);
}

.founder-card {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  padding: 36px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.founder-photo {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: 0 auto 20px;
  box-shadow: 0 0 0 4px var(--green-100);
}

.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-600);
  margin-bottom: 8px;
}

.founder-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-700);
}

.founder-role {
  margin-top: 4px;
  font-size: 14px;
  color: var(--gray-600);
}

.socials {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.soc {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gray-50);
  display: grid;
  place-items: center;
  color: var(--gray-700);
  transition: all .2s;
}

.soc:hover {
  background: var(--navy-600);
  color: white;
  transform: translateY(-2px);
}

/* ---------- Contact ---------- */
.contact-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.contact-card {
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 2px rgba(15, 63, 126, .04);
  transition: all .2s;
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elev);
  border-color: var(--green-100);
}

.contact-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.contact-green {
  background: var(--green-50);
  color: var(--green-600);
}

.contact-navy {
  background: var(--navy-50);
  color: var(--navy-600);
}

.contact-gray {
  background: var(--gray-50);
  color: var(--gray-700);
}

.contact-label {
  font-size: 12px;
  color: var(--gray-500);
}

.contact-value {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-700);
  word-break: break-word;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--grad-deep);
  color: white;
  margin-top: 80px;
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.footer-brand img {
  height: 48px;
  width: auto;
  border-radius: 8px;
}

.footer-name {
  font-size: 20px;
  font-weight: 700;
}

.footer-tagline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.70);
}

.footer-about {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.70);
  max-width: 360px;
}

.footer-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-300);
  margin-bottom: 16px;
}

.footer-list {
  display: grid;
  gap: 10px;
}

.footer-list a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  transition: color .15s;
}

.footer-list a:hover {
  color: white;
}

.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.60);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: 72px;
    inset-inline-start: 0;
    right: 0;
    left: 0;
    background: white;
    border-bottom: 1px solid var(--gray-100);
    padding: 12px 24px;
  }

  .nav-links a {
    padding: 10px 14px;
  }

  .menu-btn {
    display: inline-flex;
    align-items: center;
  }

  .grid-cats {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-articles {
    grid-template-columns: repeat(2, 1fr);
  }

  .ask-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ---------- Search section ---------- */
.search-section { padding: 72px 0; }
.search-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.search-head .section-sub { margin-left: auto; margin-right: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.search-shell {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 0 22px;
  height: 64px;
  background: white;
  border: 1.5px solid var(--gray-100);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.search-field:hover {
  border-color: var(--navy-100);
  box-shadow: var(--shadow-elev);
}
.search-field:focus-within {
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px rgba(59,169,53,.12), var(--shadow-elev);
  transform: translateY(-1px);
}
.search-ico {
  color: var(--navy-600);
  flex-shrink: 0;
}
.search-field:focus-within .search-ico { color: var(--green-600); }

.search-input {
  flex: 1;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--navy-800);
  min-width: 0;
}
.search-input::placeholder { color: var(--gray-500); }
.search-input::-webkit-search-cancel-button { display: none; }

.search-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: var(--gray-50); color: var(--gray-600);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.search-clear:hover { background: var(--gray-100); color: var(--navy-700); }

.search-kbd {
  display: inline-flex; align-items: center;
  font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 9px;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 8px;
}

.search-suggest {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  z-index: 30;
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: 16px;
  box-shadow: var(--shadow-elev);
  overflow: hidden;
  max-height: 380px;
  overflow-y: auto;
  animation: srFade .18s ease-out;
}
@keyframes srFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.suggest-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  cursor: pointer;
  text-decoration: none;
  color: var(--navy-800);
  border-bottom: 1px solid var(--gray-50);
  transition: background .12s ease;
}
.suggest-item:last-child { border-bottom: 0; }
.suggest-item:hover,
.suggest-item.is-active {
  background: var(--navy-50);
}
.suggest-icon {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-50); color: var(--green-600);
}
.suggest-text { flex: 1; min-width: 0; }
.suggest-title {
  font-size: 14px; font-weight: 600;
  color: var(--navy-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggest-sub {
  font-size: 12px; color: var(--gray-500);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggest-tag {
  flex-shrink: 0;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green-700);
  background: var(--green-50);
  padding: 4px 9px; border-radius: 999px;
}
.suggest-empty {
  padding: 22px;
  text-align: center;
  font-size: 14px;
  color: var(--gray-500);
}
mark.sr-hl {
  background: rgba(59,169,53,.18);
  color: inherit;
  padding: 0 2px; border-radius: 3px;
}

.search-filters {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.filter-chip {
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--gray-100);
  background: white;
  color: var(--gray-600);
  cursor: pointer;
  transition: all .15s ease;
}
.filter-chip:hover { border-color: var(--green-300); color: var(--navy-700); }
.filter-chip.is-active {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: white;
  box-shadow: var(--shadow-soft);
}

.search-results {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.search-results:empty { display: none; }

.result-card {
  display: block;
  text-decoration: none;
  background: white;
  border: 1px solid var(--gray-100);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.result-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-elev);
  border-color: var(--green-300);
}
.result-tag {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-700);
  background: var(--green-50);
  padding: 4px 10px; border-radius: 999px;
}
.result-title {
  margin-top: 12px;
  font-size: 17px; font-weight: 700;
  color: var(--navy-700);
  line-height: 1.35;
}
.result-desc {
  margin-top: 8px;
  font-size: 14px; color: var(--gray-600);
  line-height: 1.6;
}
.result-link {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--green-600);
}

/* Dark mode for search */
[data-theme="dark"] .search-field {
  background: var(--gray-50);
  border-color: var(--gray-100);
}
[data-theme="dark"] .search-field:hover { border-color: var(--gray-200); }
[data-theme="dark"] .search-field:focus-within {
  border-color: var(--green-300);
  box-shadow: 0 0 0 4px rgba(123,193,66,.18), var(--shadow-elev);
}
[data-theme="dark"] .search-ico { color: var(--gray-600); }
[data-theme="dark"] .search-input { color: var(--gray-900); }
[data-theme="dark"] .search-input::placeholder { color: var(--gray-500); }
[data-theme="dark"] .search-clear { background: var(--gray-100); color: var(--gray-600); }
[data-theme="dark"] .search-clear:hover { background: var(--gray-200); color: var(--gray-900); }
[data-theme="dark"] .search-kbd {
  background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-600);
}
[data-theme="dark"] .search-suggest {
  background: var(--gray-50);
  border-color: var(--gray-100);
}
[data-theme="dark"] .suggest-item {
  color: var(--gray-700);
  border-bottom-color: var(--gray-100);
}
[data-theme="dark"] .suggest-item:hover,
[data-theme="dark"] .suggest-item.is-active { background: var(--gray-100); }
[data-theme="dark"] .suggest-title { color: var(--gray-900); }
[data-theme="dark"] .suggest-sub { color: var(--gray-500); }
[data-theme="dark"] .suggest-icon { background: rgba(123,193,66,.16); color: var(--green-300); }
[data-theme="dark"] .suggest-tag { background: rgba(123,193,66,.16); color: var(--green-300); }
[data-theme="dark"] .filter-chip {
  background: var(--gray-50); border-color: var(--gray-100); color: var(--gray-600);
}
[data-theme="dark"] .filter-chip:hover { color: var(--gray-900); }
[data-theme="dark"] .filter-chip.is-active {
  background: var(--green-500); border-color: var(--green-500); color: white;
}
[data-theme="dark"] .result-card {
  background: var(--gray-50); border-color: var(--gray-100);
}
[data-theme="dark"] .result-card:hover { border-color: var(--green-300); }
[data-theme="dark"] .result-title { color: var(--gray-900); }
[data-theme="dark"] .result-desc { color: var(--gray-600); }
[data-theme="dark"] .result-tag { background: rgba(123,193,66,.16); color: var(--green-300); }
[data-theme="dark"] .result-link { color: var(--green-300); }

/* RTL adjustments */
html[dir="rtl"] .search-field { padding: 0 22px 0 16px; }

@media (max-width: 720px) {
  .hero {
    padding: 90px 0 110px;
  }

  .stats-card {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat:nth-child(odd) {
    border-right: 1px solid var(--gray-100);
  }

  .stat:nth-child(2) {
    border-right: none;
  }

  .stat:nth-child(-n+2) {
    border-bottom: 1px solid var(--gray-100);
  }

  html[dir="rtl"] .stat:nth-child(odd) {
    border-right: none;
    border-left: 1px solid var(--gray-100);
  }

  html[dir="rtl"] .stat:nth-child(2) {
    border-left: none;
  }

  .grid-cats,
  .grid-articles,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .vm-grid-2 { grid-template-columns: 1fr !important; }
  .vm-grid-3 { grid-template-columns: 1fr !important; }

  .ask-card {
    padding: 36px 26px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-grid>div:first-child {
    grid-column: 1 / -1;
  }

  /* On phones the header CTAs collapse to icon-only to avoid crowding/overlap */
  .nav .btn-ask span,
  .nav .btn-getstarted span,
  .lang-btn span {
    display: none;
  }

  /* Compact, square-ish icon buttons + tighter spacing in the header */
  .nav-right { gap: 6px; }
  .nav .btn-ask,
  .nav .btn-getstarted { padding: 9px 11px; }
  .lang-btn { padding: 9px 11px; }

  .search-field { height: 56px; padding: 0 12px 0 18px; }
  .search-input { font-size: 15px; }
  .search-kbd { display: none; }
  .search-results { grid-template-columns: 1fr; }
  .basmala-text { font-size: 19px; }
  .salawat-text { font-size: 13px; }
}

/* ---------- Basmala Banner ---------- */
.basmala-banner {
  width: 100%;
  background: linear-gradient(135deg, #0B2E5E 0%, #0F3F7E 50%, #0B3367 100%);
  padding: 14px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.basmala-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%,
    rgba(59, 169, 53, 0.08) 0%,
    rgba(212, 175, 55, 0.06) 40%,
    transparent 70%);
  pointer-events: none;
}

.basmala-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: basmalFadeIn 1.4s ease-out both;
}

@keyframes basmalFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.basmala-text {
  font-family: 'Cairo', serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #F5F0E8;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.35), 0 1px 3px rgba(0,0,0,0.3);
  direction: rtl;
}

.salawat-text {
  font-family: 'Cairo', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(212, 175, 55, 0.85);
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
  direction: rtl;
}

/* Dark mode — slightly brighter gold */

[data-theme="dark"] .basmala-banner {
  background: linear-gradient(135deg, #060F1E 0%, #0A1E3D 50%, #06203F 100%);
}

/* ---- Header Sign In: professional spacing + clean ghost style ---- */
/* A subtle divider separates the green AI button from the account area,
   and the Sign In link becomes a quiet ghost link (not a heavy button)
   so the navy "Get Started" stays the clear primary call-to-action. */
#authSlot {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 6px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--gray-200);
}
#authSlot > a {
  border-color: transparent;
  background: transparent;
  color: var(--navy-600);
  font-weight: 600;
}
#authSlot > a:hover {
  background: var(--gray-50);
  color: var(--navy-700);
}
[data-theme="dark"] #authSlot > a { color: var(--gray-700); }
[data-theme="dark"] #authSlot > a:hover { background: var(--gray-50); color: var(--gray-900); }
@media (max-width: 720px) {
  #authSlot { margin-inline-start: 4px; padding-inline-start: 8px; }
}

/* ---- Sitewide Sign In ghost link (matches homepage #authSlot look) ---- */
.btn-signin {
  border-color: transparent;
  background: transparent;
  color: var(--navy-600);
  font-weight: 600;
}
.btn-signin:hover { background: var(--gray-50); color: var(--navy-700); }
[data-theme="dark"] .btn-signin { color: var(--gray-700); }
[data-theme="dark"] .btn-signin:hover { background: var(--gray-50); color: var(--gray-900); }
/* Phone header: keep the BEYLOOD wordmark visible but compact; CTAs are icon-only */
@media (max-width: 720px) {
  .logo-name { font-size: 16px; }
  .nav-right { gap: 4px; }
}
@media (max-width: 380px) {
  .logo-name { display: none; } /* last resort on the very smallest screens */
}

/* ---- Auto featured images on gradient covers (lazy, responsive, graceful fallback) ---- */
.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* uniform crop regardless of source dimensions */
  z-index: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.cover-img.is-loaded { opacity: 1; }
/* Keep the BEYLOOD watermark readable above the photo */
.card-cover::before, .article-cover::before { z-index: 2; }

/* ============================================================
   Member badge + Premium lock previews (guest vs member)
   ------------------------------------------------------------
   Default state is LOCKED (safe): premium content is blurred and
   the overlay shows. When auth.js confirms a logged-in user it
   adds .auth-member to <html>, which unlocks everything.
   ============================================================ */

/* Member badge in the navbar chip */
.auth-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 7px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--grad-leaf);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
}
@media (max-width: 720px) { .auth-badge { display: none; } }

/* Premium section */
.premium-section { background: var(--gray-50); }
.premium-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--green-600); font-weight: 700; letter-spacing: .08em;
  font-size: 12px; text-transform: uppercase;
}

/* The lock wrapper */
.premium-lock { position: relative; border-radius: var(--radius-lg); overflow: hidden; }

/* Premium content: blurred + non-interactive by default (guest) */
.premium-lock .premium-content {
  filter: blur(7px);
  transform: scale(1.02);
  pointer-events: none;
  user-select: none;
  transition: filter .45s ease, transform .45s ease;
}
/* Members: unlock smoothly */
html.auth-member .premium-lock .premium-content {
  filter: none;
  transform: none;
  pointer-events: auto;
  user-select: auto;
}

/* Lock overlay (the call-to-action shown to guests) */
.premium-lock__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.78) 100%);
  backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity .4s ease;
}
[data-theme="dark"] .premium-lock__overlay {
  background: linear-gradient(180deg, rgba(11,18,32,.55) 0%, rgba(11,18,32,.82) 100%);
}
/* Members never see the overlay */
html.auth-member .premium-lock__overlay {
  opacity: 0;
  pointer-events: none;
}
.premium-lock__icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-elev);
}
.premium-lock__title { font-size: 20px; font-weight: 800; color: var(--gray-900); margin: 0; }
.premium-lock__sub { color: var(--gray-600); max-width: 460px; margin: 0; font-size: 15px; }
.premium-lock__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.premium-lock__signin {
  display: inline-flex; align-items: center; padding: 10px 18px;
  border-radius: var(--radius-pill); font-weight: 600; font-size: 14px;
  color: var(--navy-600); background: transparent; border: 1px solid var(--gray-200);
  transition: background .2s ease;
}
.premium-lock__signin:hover { background: var(--gray-100); }

/* Resource cards inside the premium grid */
.premium-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .premium-grid { grid-template-columns: 1fr; } }
.premium-card {
  background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-soft);
}
[data-theme="dark"] .premium-card { background: var(--gray-50); border-color: var(--gray-200); }
.premium-card .premium-card-ico { color: var(--green-500); margin-bottom: 12px; }
.premium-card h3 { font-size: 17px; font-weight: 700; color: var(--gray-900); margin: 0 0 6px; }
.premium-card p { color: var(--gray-600); font-size: 14px; margin: 0; }

/* ============================================================
   Ask Beylood AI — "Coming Soon" (premium SaaS, futuristic)
   ============================================================ */
.ai-soon { padding-top: 56px; }

.ai-soon-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
  background: var(--grad-deep);
  border-radius: var(--radius-xl);
  padding: 60px 28px 56px;
  box-shadow: var(--shadow-elev);
  isolation: isolate;
}
/* Soft animated green glow behind the card content */
.ai-soon-card::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 320px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(59,169,53,.45) 0%, rgba(59,169,53,0) 70%);
  z-index: -1;
  animation: aiGlow 6s ease-in-out infinite;
}
@keyframes aiGlow { 0%,100% { opacity:.55; transform: translateY(0); } 50% { opacity:1; transform: translateY(10px); } }

.ai-soon-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12); border: 1px solid rgba(123,193,66,.5);
  color: #cde6c2; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  backdrop-filter: blur(4px);
}
.ai-soon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-300); box-shadow: 0 0 0 0 rgba(123,193,66,.7); animation: aiPulse 1.8s infinite; }
@keyframes aiPulse { 0% { box-shadow: 0 0 0 0 rgba(123,193,66,.6); } 70% { box-shadow: 0 0 0 9px rgba(123,193,66,0); } 100% { box-shadow: 0 0 0 0 rgba(123,193,66,0); } }

.ai-soon-orb {
  width: 84px; height: 84px; margin: 22px auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff;
  background: var(--grad-leaf);
  box-shadow: 0 0 0 8px rgba(123,193,66,.12), 0 12px 40px rgba(59,169,53,.45);
  animation: aiFloat 4s ease-in-out infinite;
}
@keyframes aiFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.ai-soon-title { font-size: clamp(28px, 4.5vw, 42px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.ai-soon-sub { max-width: 620px; margin: 0 auto 26px; color: rgba(255,255,255,.85); font-size: 17px; line-height: 1.7; }
.ai-soon-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ai-soon-secondary {
  display: inline-flex; align-items: center; padding: 14px 22px;
  border-radius: var(--radius-pill); font-weight: 600; font-size: 14px;
  color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06);
  transition: background .2s ease;
}
.ai-soon-secondary:hover { background: rgba(255,255,255,.16); }

/* Feature grid */
.ai-feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 28px;
}
@media (max-width: 900px) { .ai-feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ai-feature-grid { grid-template-columns: 1fr; } }

.ai-feature {
  position: relative;
  background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  padding: 26px 22px; box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ai-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-elev); border-color: var(--green-300); }
[data-theme="dark"] .ai-feature { background: var(--gray-50); border-color: var(--gray-200); }
.ai-feature-ico {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; color: #fff; background: var(--grad-brand); margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
}
.ai-feature h3 { font-size: 17px; font-weight: 700; color: var(--gray-900); margin: 0 0 6px; }
.ai-feature p { color: var(--gray-600); font-size: 14px; margin: 0; }
.ai-feature-soon {
  position: absolute; top: 16px; inset-inline-end: 16px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--green-50); color: var(--green-700);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}

@media (prefers-reduced-motion: reduce) {
  .ai-soon-card::before, .ai-soon-dot, .ai-soon-orb { animation: none; }
}