@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&family=Orbitron:wght@600;700;800&family=Saira+Stencil+One&display=swap");
/* XES front-end pages — shared styles
   Used by: /, /about-us/, /contact-us/, /privacy-policy/, /terms-of-service/
   All page styles live here; HTML files should not contain <style> blocks. */

/* ============================================================
   Tokens
   ============================================================ */
:root {
  --primary: #3b82f6;
  --primary-light: #60a5fa;
  --primary-dark: #1d4ed8;
  --accent: #f43f5e;
  --accent-light: #fb7185;
  --warm: #f59e0b;
  --good: #22c55e;
  --bg-dark: #111827;
  --bg-darker: #050814;
  --bg-card: rgba(17, 24, 39, 0.78);
  --tile: #1f2937;
  --text: #fff;
  --text-muted: #cbd5e1;
  --text-dim: #94a3b8;
  --border: rgba(148, 163, 184, 0.2);
  --shadow: 0 4px 24px rgba(59, 130, 246, 0.2);
  --shadow-lg: 0 20px 60px rgba(244, 63, 94, 0.22);
}

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

html { scroll-behavior: smooth; }

body {
  color: var(--text);
  background: linear-gradient(90deg, #0f172a 0%, #050814 18% 82%, #111827 100%) fixed;
  font-family: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
  animation: .5s ease-out pageLoad;
}

/* Page background decoration — subtle fixed gradient warmth.
   The animated wandering-stars overlay was removed (was the "1px dot
   that follows the viewport"). */
body::before {
  content: "";
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(at 18% 28%, rgba(59, 130, 246, 0.2) 0%, #0000 46%),
    radial-gradient(at 82% 66%, rgba(244, 63, 94, 0.16) 0%, #0000 48%),
    radial-gradient(at 50% 96%, rgba(245, 158, 11, 0.12) 0%, #0000 44%);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

@keyframes pageLoad { 0% { opacity: 0; } to { opacity: 1; } }

.container,
.navbar .container {
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
}

/* ============================================================
   Scroll-animate utilities
   ============================================================ */
[data-animate] {
  opacity: 0;
  transition: opacity .6s ease-out, transform .6s ease-out;
  backface-visibility: hidden;
  transform: translateY(30px);
}
@media (width >= 769px) {
  [data-animate] { will-change: opacity, transform; }
}
[data-animate].animate-in,
[data-animate="fade-up"].animate-in { opacity: 1; transform: translate(0, 0); }
[data-animate="zoom-in"] { transform: translate(0, 0) scale(.9); }
[data-animate="zoom-in"].animate-in { transform: translate(0, 0) scale(1); }
[data-animate="flip-left"] { transform: perspective(1000px) rotateY(-10deg) translate(0, 0); }
[data-animate="flip-left"].animate-in { transform: perspective(1000px) rotateY(0) translate(0, 0); }
[data-animate="fade-right"] { transform: translate(-30px); }
[data-animate="fade-right"].animate-in { transform: translate(0, 0); }
[data-animate="fade-left"] { transform: translate(30px); }
[data-animate="fade-left"].animate-in { transform: translate(0, 0); }

@keyframes fadeUpAnim {
  0% { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translate(0, 0); }
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
  z-index: 1000;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  background: rgba(5, 8, 20, 0.86);
  transition: all .3s;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.navbar.scrolled {
  background: rgba(5, 8, 20, 0.97);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.16);
}
.nav-content {
  justify-content: space-between;
  align-items: center;
  padding: .7rem 0;
  display: flex;
}
.nav-logo {
  color: var(--text);
  align-items: center;
  gap: .65rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}
.logo-img { width: auto; height: 34px; }
.speakr-mark span {
  font-family: "Bungee", Impact, system-ui, sans-serif;
  letter-spacing: .07em;
  line-height: 1;
}
.footer-logo.speakr-mark {
  align-items: center;
  display: inline-flex;
  gap: .7rem;
  text-decoration: none;
}
.footer-logo.speakr-mark span {
  color: var(--text);
  font-size: 1.65rem;
}
.footer-logo-img { height: 42px; width: auto; }
.logo-icon { font-size: 1.8rem; }
.nav-links {
  align-items: center;
  gap: 2rem;
  display: flex;
  /* Fill the space beside the logo and centre the links there, so they don't
     jam against the right edge now that the CTA button is gone. */
  flex: 1;
  justify-content: center;
}
.nav-links a {
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color .3s;
}
.nav-links a:hover { color: var(--primary-light); }
.mobile-menu-btn {
  color: var(--text);
  cursor: pointer;
  background: 0 0;
  border: none;
  font-size: 1.5rem;
  display: none;
}

/* ============================================================
   Page titles (about/contact)
   ============================================================ */
.page-title {
  color: var(--primary-light);
  margin-bottom: 1.5rem;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
}
.page-subtitle {
  color: var(--text-muted);
  max-width: 700px;
  margin: 0 auto;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
}

/* ============================================================
   Section titles (shared)
   ============================================================ */
.section-title {
  text-align: center;
  color: var(--text);
  width: 100%;
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  display: inline-block;
  position: relative;
}
.section-title::after {
  content: "";
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  width: 100px;
  height: 4px;
  animation: 2s ease-in-out infinite titleUnderline;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%);
}
@keyframes titleUnderline {
  0%, to { opacity: 1; width: 100px; }
  50% { opacity: .7; width: 150px; }
}
.section-subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-top: 2rem;
  margin-bottom: 4rem;
  font-size: 1.2rem;
}

/* ============================================================
   Hero (front page)
   ============================================================ */
.hero {
  background: linear-gradient(#14162ae6 0%, #08091af2 50%, #14162ae6 100%);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding-top: 80px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.hero .container { width: 100%; max-width: 1400px; }
.hero-grid {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - .7rem);
  display: grid;
}
.hero .hero-content {
  z-index: 10;
  max-width: 100%;
  animation: 1s ease-out .1s both fadeInUp;
  position: relative;
  text-align: left !important;
}
@media (width <= 768px) {
  .hero .hero-content { animation: none; }
}
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-lines {
  pointer-events: none;
  z-index: 1;
  opacity: .8;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.line {
  stroke-linecap: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000px;
  animation: 3s ease-out forwards drawLine;
}
@media (width <= 768px) {
  .line { stroke-dashoffset: 0; animation: none; }
}
.line-1 { animation-delay: .2s; }
.line-2 { animation-delay: .5s; }
.line-3 { animation-delay: .8s; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.hero-illustration {
  z-index: 5;
  justify-content: center;
  align-items: center;
  animation: 1s ease-out .3s both fadeInRight;
  display: flex;
  position: relative;
}
@keyframes fadeInRight {
  0% { opacity: 0; transform: translate(50px); }
  to { opacity: 1; transform: translate(0); }
}
.illustration-wrapper {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 720px;
  display: flex;
  position: relative;
}
.circle-layer {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle-1 {
  background: radial-gradient(circle at 30% 30%, #3d3d8580 0%, #303073b3 40%, #14162ad9 70%, #08091af2 100%);
  width: 100%;
  height: 100%;
  animation: 6s ease-in-out infinite pulse-circle;
}
.circle-2 {
  background: radial-gradient(circle at 40% 40%, #4f7fff40 0%, #3d3d8566 50%, #30307380 100%);
  width: 85%;
  height: 85%;
  animation: 6s ease-in-out .5s infinite pulse-circle;
}
.circle-3 {
  background: radial-gradient(circle at 50% 40%, #6b93ff33 0%, #4f7fff4d 60%, #3d3d8566 100%);
  width: 70%;
  height: 70%;
  animation: 6s ease-in-out 1s infinite pulse-circle;
}
.circle-4 {
  background: radial-gradient(circle, #a599ff26 0%, #6b93ff38 50%, #4f7fff47 100%);
  width: 55%;
  height: 55%;
  animation: 6s ease-in-out 1.5s infinite pulse-circle;
}
.logo-layer {
  z-index: 5;
  opacity: .12;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50%;
  animation: 8s ease-in-out infinite logo-pulse;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hero-logo {
  filter: drop-shadow(0 0 30px #4f7fff80);
  width: 100%;
  height: auto;
}
@keyframes logo-pulse {
  0%, to { opacity: .1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .18; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes pulse-circle {
  0%, to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .85; transform: translate(-50%, -50%) scale(1.03); }
}
.hero-svg {
  z-index: 10;
  filter: drop-shadow(0 20px 40px #0000004d);
  width: 80%;
  max-width: 450px;
  height: auto;
  animation: 4s ease-in-out infinite float-svg;
  position: relative;
}
.hero-image {
  width: 100%;
  height: auto;
  max-width: 720px;
  display: block;
  animation: 4s ease-in-out infinite float-svg;
}
@keyframes float-svg {
  0%, to { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Trust stats */
.trust-stats {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2rem;
  margin: 2rem 0;
  display: flex;
}
.stat {
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  display: flex;
}
.stat strong {
  color: var(--primary-light);
  font-size: 1.8rem;
  font-weight: 700;
}
.stat span {
  color: var(--text-muted);
  font-size: .9rem;
}

.hero-buttons {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
}
.hero-title {
  margin-bottom: 1.5rem;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
}
.gradient-text {
  color: var(--primary-light);
}
.hero-subtitle {
  color: var(--text-muted);
  max-width: 550px;
  margin-bottom: 2rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}
.hero-note { color: var(--text-dim); font-size: .95rem; }

/* Hero responsive */
@media (width <= 1024px) {
  .illustration-wrapper { max-width: 450px; }
  .hero-svg { max-width: 350px; }
}
@media (width <= 768px) {
  .hero {
    min-height: auto;
    align-items: flex-start;
    padding-top: calc(63px + .25rem);
  }
  .hero-grid {
    text-align: center;
    flex-direction: column;
    min-height: auto;
    margin-top: 0;
    display: flex;
  }
  .hero-illustration { order: 2; margin-bottom: 0; }
  .hero-content { text-align: center; order: 3; }
  .illustration-wrapper { max-width: 260px; }
  .hero-svg { max-width: 220px; }
  .hero-title { font-size: 2rem; margin-top: 0 !important; margin-bottom: 1rem !important; }
  .hero-subtitle { font-size: .95rem; line-height: 1.6; margin-top: 0 !important; margin-bottom: 1rem !important; }
  .trust-stats { justify-content: center; gap: 1.5rem; margin: 1rem 0 !important; }
  .stat { align-items: center; }
  .stat strong { font-size: 1.2rem; }
  .stat span { font-size: .75rem; }
  .hero-buttons { flex-direction: column; justify-content: center; align-items: stretch; margin-bottom: 1rem !important; }
  .hero-lines { opacity: .4; }
  .hero-note { margin-bottom: .5rem; font-size: .75rem; }
}
@media (width <= 480px) {
  .illustration-wrapper { max-width: 220px; }
  .hero-svg { max-width: 220px; }
  .hero-title { font-size: 1.8rem; margin-top: 0 !important; margin-bottom: 1rem !important; }
  .hero-subtitle { font-size: .9rem; line-height: 1.5; margin-top: 0 !important; margin-bottom: 1.5rem !important; }
  .hero .hero-content { flex-direction: column; display: flex; }
  .trust-stats { order: 3; gap: 1rem; margin: 1.5rem 0 !important; }
  .hero-buttons { order: 2; margin-bottom: .5rem !important; }
  .hero-note { order: 4; font-size: .7rem; }
  .stat strong { font-size: 1.1rem; }
  .stat span { font-size: .75rem; }
  .logo-layer { opacity: .08; width: 35%; }
}
@media (width <= 360px) {
  .hero-svg { max-width: 180px; }
  .trust-stats { gap: .1rem; margin: .1rem 0 !important; }
  .stat strong { font-size: .8rem; }
  .stat span { font-size: .75rem; }
}
@media (width <= 480px) and (height >= 670px) {
  .hero-svg { max-width: 100vw !important; }
  .hero-title { font-size: 2em; }
}
@media (width <= 480px) and (height >= 900px) {
  .hero-svg { width: 350px; max-width: 100vw !important; }
  .hero-title { font-size: 2.3em; }
}

/* ============================================================
   CTA buttons
   ============================================================ */
/* Hero/FAQ CTA — solid amber pill. */
.cta-button {
  color: #0a0b14;
  background: #fbbf24;
  cursor: pointer;
  border: none;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.cta-button:hover {
  background: #f59e0b;
}
.nav-cta {
  padding: .5rem 1.5rem;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
/* Start-Chatting CTA — subtle amber-outlined ghost (same idea as .v2-btn-ghost,
   brand amber). Shared by the nav button AND the hero "Start Chatting" buttons so
   they look identical. Defined after .cta-button so it overrides the solid fill. */
.cta-ghost {
  color: #fff;
  background: rgba(251, 191, 36, 0.07);
  border: 1px solid rgba(251, 191, 36, 0.4);
  transition: background .2s ease, border-color .2s ease;
}
.cta-ghost:hover {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.65);
}
.cta-button {
  padding: 1.2rem 2.5rem;
  font-size: 1.1rem;
}
.cta-button.text {
  color: #fbbf24;
  background: transparent;
  border: 2px solid #fbbf24;
}
.cta-button.text:hover {
  background: #fbbf24;
  color: #0a0b14;
}
.cta-button .icon { font-size: 1.4rem; }

/* ============================================================
   App showcase (front page)
   ============================================================ */
.app-showcase {
  background:
    radial-gradient(at 20% 30%, #4f7fff14 0%, #0000 50%),
    radial-gradient(at 80% 70%, #8b7fff14 0%, #0000 50%);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}
.showcase-header {
  text-align: center;
  z-index: 1;
  margin-bottom: 5rem;
  position: relative;
}
.showcase-badge {
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: #3d3d8580;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  padding: .5rem 1.5rem;
  font-size: .9rem;
  font-weight: 500;
  display: inline-block;
}
.showcase-item {
  z-index: 1;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
  margin-bottom: 6rem;
  display: grid;
  position: relative;
}
.showcase-item:last-child { margin-bottom: 0; }
.showcase-item.reverse { direction: rtl; }
.showcase-item.reverse > * { direction: ltr; }
.showcase-content { max-width: 500px; }
.feature-label {
  color: var(--text-dim);
  opacity: .9;
  margin-bottom: .75rem;
  font-size: .95rem;
  font-style: italic;
  display: block;
}
.showcase-title {
  color: var(--text);
  margin-bottom: 1.25rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
}
.showcase-title .highlight {
  color: var(--primary-light);
}
.showcase-description {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.8;
}
.showcase-image {
  justify-content: center;
  align-items: center;
  display: flex;
}
.mockup-wrapper {
  width: 100%;
  max-width: 400px;
  position: relative;
}
.mockup-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.65), 0 8px 20px -8px rgba(0, 0, 0, 0.4);
  transition: transform .4s, box-shadow .4s;
}
.showcase-item:hover .mockup-wrapper img {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 32px 70px -16px rgba(0, 0, 0, 0.75), 0 12px 24px -8px rgba(0, 0, 0, 0.45);
}

@media (width <= 1024px) {
  .showcase-item { gap: 3rem; }
  .mockup-wrapper { max-width: 350px; }
}
@media (width <= 768px) {
  .app-showcase { padding: 4rem 0; }
  .showcase-header { margin-bottom: 3rem; }
  .showcase-item {
    text-align: center;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
  }
  .showcase-item.reverse { direction: ltr; }
  .showcase-content { order: 1; max-width: 100%; }
  .showcase-image { order: 2; }
  .mockup-wrapper { max-width: 300px; }
  .showcase-title { font-size: 1.5rem; }
  .showcase-description { font-size: .95rem; }
}
@media (width <= 480px) {
  .showcase-item { gap: 1.5rem; margin-bottom: 3rem; }
  .mockup-wrapper { max-width: 260px; }
  .showcase-badge { padding: .4rem 1rem; font-size: .8rem; }
  .feature-label { font-size: .85rem; }
  .showcase-title { font-size: 1.3rem; }
  .showcase-description { font-size: .9rem; line-height: 1.6; }
}

/* ============================================================
   Features (shared)
   ============================================================ */
.features {
  background:
    radial-gradient(ellipse at 10% 20%, #4f7fff14 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, #8b7fff14 0%, transparent 50%),
    var(--bg-darker);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}
.features .container { max-width: none; padding: 0 2rem; }
.features-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  display: grid;
}
.feature-card {
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 2.5rem;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: "";
  background: linear-gradient(90deg, #0000, #4f7fff1a, #0000);
  width: 100%;
  height: 100%;
  transition: left .5s;
  position: absolute;
  top: 0;
  left: -100%;
}
.feature-card:hover::before { left: 100%; }
.feature-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px) scale(1.02);
}
.feature-icon {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 240px;
  height: 170px;
  margin-bottom: 1.5rem;
  transition: transform .3s;
  display: flex;
}
.feature-icon img { object-fit: contain; width: 100%; height: 100%; }
.feature-card:first-of-type .feature-icon img,
.feature-card:last-of-type .feature-icon img {
  transform: scale(1.18);
  transform-origin: center;
}
.feature-card:hover .feature-icon { transform: scale(1.08); }
.feature-title {
  color: var(--text);
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
}
.feature-description { color: var(--text-muted); line-height: 1.7; }

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials {
  background:
    radial-gradient(ellipse at 80% 20%, #8b7fff1a 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, #4f7fff1a 0%, transparent 60%),
    var(--bg-dark);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}
.testimonial-card {
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 2.5rem;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}
.testimonial-quote {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.7;
}
.testimonial-author { text-align: center; }
.author-name {
  color: var(--text);
  margin-bottom: .25rem;
  font-weight: 600;
}
.author-role { color: var(--text-dim); font-size: .9rem; }

/* Testimonials Swiper */
:root { --swiper-theme-color: #007aff; }
.swiper {
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  list-style: none;
  display: block;
  position: relative;
  overflow: hidden;
}
.swiper-vertical > .swiper-wrapper { flex-direction: column; }
.swiper-wrapper {
  z-index: 1;
  width: 100%;
  height: 100%;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
  display: flex;
  position: relative;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper { transform: translate(0, 0); }
.swiper-horizontal { touch-action: pan-y; }
.swiper-vertical { touch-action: pan-x; }
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  transition-property: transform;
  display: block;
  position: relative;
}
.swiper-slide-invisible-blank { visibility: hidden; }
.swiper-autoheight,
.swiper-autoheight .swiper-slide { height: auto; }
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-pagination {
  text-align: center;
  z-index: 10;
  transition: opacity .3s;
  position: absolute;
  transform: translate(0, 0);
}
.swiper-pagination.swiper-pagination-hidden { opacity: 0; }
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled { display: none !important; }
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  width: 100%;
  left: 0;
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
  display: inline-block;
}
button.swiper-pagination-bullet {
  box-shadow: none;
  appearance: none;
  border: none;
  margin: 0;
  padding: 0;
}
.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; }
.swiper-pagination-bullet:only-child { display: none !important; }
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

:root { --swiper-navigation-size: 44px; }
.swiper-button-prev,
.swiper-button-next {
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  z-index: 10;
  cursor: pointer;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next { display: none !important; }
.swiper-button-prev svg,
.swiper-button-next svg {
  object-fit: contain;
  transform-origin: 50%;
  fill: currentColor;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* The wrapper is a wrap-flex container so the slides take a full
   row and prev / pagination / next wrap to the row beneath. The
   DOM order is pagination, next, prev — `order` reshuffles them
   visually to prev | pagination | next. */
.testimonials-swiper-wrapper {
  z-index: 99999;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.testimonials-swiper-wrapper > .testimonials-swiper {
  flex: 0 0 100%;
}
.testimonials-swiper {
  width: 100%;
  padding-bottom: 50px;
  position: relative;
  overflow: hidden;
}
.testimonials-swiper .swiper-wrapper { display: flex; }
.testimonials-swiper .swiper-slide {
  flex-shrink: 0;
  width: auto;
  height: auto;
}
/* Pagination row */
.testimonials-swiper-wrapper > .swiper-pagination {
  position: relative;
  margin: 1rem 0;
  width: auto;
  order: 2;
}
.testimonials-swiper-wrapper > .swiper-pagination .swiper-pagination-bullet {
  background: var(--primary);
  opacity: .5;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  transition: opacity .2s, transform .2s;
}
.testimonials-swiper-wrapper > .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.2);
}

/* Plain arrows. Swiper v11 injects an <svg> into each button at
   init; that SVG inherits its color via currentColor. No frame,
   no gradient, no halo — just the glyph. */
.testimonials-swiper-wrapper > .swiper-button-prev,
.testimonials-swiper-wrapper > .swiper-button-next {
  position: static;
  width: 22px;
  height: 22px;
  margin: 0 2.5rem;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--primary-light);
  cursor: pointer;
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  transform: translateY(-4px);
  transition: color .2s;
}
.testimonials-swiper-wrapper > .swiper-button-prev { order: 1; }
.testimonials-swiper-wrapper > .swiper-button-next { order: 3; }
.testimonials-swiper-wrapper > .swiper-button-prev::before,
.testimonials-swiper-wrapper > .swiper-button-next::before { display: none; }
.testimonials-swiper-wrapper > .swiper-button-prev:hover,
.testimonials-swiper-wrapper > .swiper-button-next:hover {
  color: var(--accent-light);
}
.testimonials-swiper-wrapper > .swiper-button-prev svg,
.testimonials-swiper-wrapper > .swiper-button-next svg {
  width: 100%;
  height: 100%;
}
/* Swiper's SVG is a thin filled path. Adding a stroke in the
   same colour outlines the chevron and makes it look thicker
   without having to grow the button. */
.testimonials-swiper-wrapper > .swiper-button-prev svg path,
.testimonials-swiper-wrapper > .swiper-button-next svg path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* Swiper injects the same SVG glyph into both buttons — rotate
   the prev one so it points the right way. */
.testimonials-swiper-wrapper > .swiper-button-prev svg {
  transform: rotate(180deg);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  background:
    radial-gradient(ellipse at 30% 50%, #4f7fff14 0%, transparent 60%),
    var(--bg-darker);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 1rem;
  margin-bottom: 1rem;
  transition: all .3s;
  overflow: hidden;
}
.faq-item:hover { border-color: var(--primary-light); }
.faq-item.open { border-color: var(--primary); }
.faq-question {
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  display: flex;
}
.faq-question h3 {
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
}
.faq-icon {
  color: var(--primary-light);
  font-size: 1.5rem;
  font-weight: 300;
}
.faq-answer {
  color: var(--text-muted);
  padding: 0 2rem 1.5rem;
  line-height: 1.7;
  animation: .3s fadeIn;
  display: none;
}
.faq-item.open .faq-answer { display: block; }
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background:
    radial-gradient(ellipse at 50% 100%, #4f7fff14 0%, transparent 50%),
    var(--bg-darker);
  color: var(--text);
  border-top: 1px solid var(--border);
  padding: 4rem 0 2rem;
  position: relative;
  overflow: hidden;
}
.footer-content {
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: start;
  gap: 2rem;
  margin-bottom: 2rem;
  display: grid;
}
.footer-brand {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}
.footer-logo {
  color: var(--text);
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.footer-logo-img {
  width: auto;
  height: 110px;
  margin-bottom: .5rem;
}
.footer-tagline {
  font-family: "Exo 2", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-top: .25rem;
  text-align: center;
}
.footer-logo-text {
  letter-spacing: 2px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}
.footer-logo-text .highlight { color: var(--text-muted); }
.footer-follow {
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
}
.footer-email {
  color: var(--primary-light);
  margin-bottom: 1rem;
  font-size: .9rem;
  text-decoration: none;
  transition: color .3s;
}
.footer-email:hover { color: var(--primary); text-decoration: underline; }
.footer-sitemap {
  text-align: right;
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}
.footer-heading {
  color: var(--text);
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .3s;
}
.footer-links a:hover { color: var(--primary-light); }
.footer-bottom {
  text-align: center;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  padding-top: 2rem;
  font-size: .9rem;
}
.footer-bottom p { color: var(--primary-light); }

/* Solidarity block — flag above text, sits above the copyright line. */
.footer-palestine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 1.25rem;
}
.footer-flag {
  width: 44px;
  height: 22px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.footer-palestine-text {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   About page
   ============================================================ */
.about-hero {
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
  text-align: center;
  padding: 8rem 0 3rem;
}
.about-hero .page-subtitle { font-style: italic; }
.about-content { background: var(--bg-darker); padding-bottom: 2rem; }
.about-intro {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 3rem;
  margin-bottom: 5rem;
  padding: 3rem;
  display: grid;
}
.about-illustration {
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 150px;
  display: flex;
}
.about-illustration img { object-fit: contain; width: 100%; height: 100%; }
.about-text p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.8;
}
.reasons-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  margin-top: 5rem;
  padding: 3rem;
}
.reasons-list { padding: 0; list-style: none; }
.reasons-list li {
  color: var(--text-muted);
  margin-bottom: 2rem;
  padding-left: 2rem;
  line-height: 1.8;
  position: relative;
}
.reasons-list li::before {
  content: "→";
  color: var(--primary-light);
  font-size: 1.5rem;
  position: absolute;
  left: 0;
}
.reasons-list strong {
  color: var(--text);
  margin-bottom: .5rem;
  display: block;
}

/* ============================================================
   Contact page
   ============================================================ */
.contact-hero {
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
  text-align: center;
  padding: 8rem 0 3rem;
}
.contact-content { background: var(--bg-darker); padding-bottom: 2rem; }
.contact-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
}
.contact-intro p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.8;
}
/* ============================================================
   Policy pages (privacy / terms) — scoped under .policy-page
   These pages use a simpler text-document layout. Selectors use
   `>` so the shared footer (a sibling of the content container)
   isn't picked up by Arial/cyan-link/etc.
   ============================================================ */
.policy-page {
  padding-top: 20px;
}
.policy-page > .container {
  max-width: 800px;
  padding: 20px;
  margin-bottom: 3rem;
  font-family: Arial, sans-serif;
}
.policy-page > .container h1 {
  text-align: center;
  margin-bottom: 30px;
}
.policy-page > .container h2 {
  margin-top: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 5px;
}
.policy-page > .container h2,
.policy-page > .container h3 { font-weight: bold; }
.policy-page > .container p { margin-bottom: 1em; }
.policy-page > .container a {
  color: #4fc3f7;
  text-decoration: none;
}
.policy-page > .container a:hover { text-decoration: underline; }
.policy-page > .container ul { padding-left: 20px; margin-bottom: 1em; }
.policy-page > .container ul li { margin-bottom: 6px; }
.policy-page > .container .meta {
  opacity: 0.7;
  font-size: 0.9em;
}

/* ============================================================
   Responsive (shared)
   ============================================================ */
@media (width <= 768px) {
  .container { padding: 0 2rem; }
  .nav-links {
    border-top: 1px solid var(--border);
    background: #08091afa;
    flex-direction: column;
    padding: 2rem;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
  .nav-links.open { display: flex; }
  .mobile-menu-btn { display: block; }
  .cta-button { justify-content: center; }
  .nav-cta { display: none; }
  .features-grid,
  .footer-content { grid-template-columns: 1fr; }
  .feature-card,
  .testimonial-card { padding: 1.5rem; }
  .section-title { font-size: 1.75rem; }
  .section-subtitle { margin-bottom: 2rem; font-size: 1rem; }
  .footer-content {
    text-align: center;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-brand { align-items: center; }
  .footer-sitemap { text-align: center; align-items: center; }
  [data-animate] {
    opacity: 0;
    transition: opacity .4s ease-out, transform .4s ease-out;
    backface-visibility: hidden;
    perspective: 1000px;
    transform: translateY(20px);
  }
  [data-animate].animate-in { opacity: 1; transform: translate(0, 0); }
  [data-animate="fade-right"] { transform: translate(-20px); }
  [data-animate="fade-right"].animate-in { transform: translate(0, 0); }
  [data-animate="fade-left"] { transform: translate(20px); }
  [data-animate="fade-left"].animate-in { transform: translate(0, 0); }
  [data-animate="zoom-in"] { transform: translate(0, 0) scale(.95); }
  [data-animate="zoom-in"].animate-in { transform: translate(0, 0) scale(1); }
  .feature-card[data-animate] { transition-delay: 0s !important; }
  .section-title::after { animation: none; }
  /* About page mobile */
  .about-intro { text-align: center; grid-template-columns: 1fr; }
  .about-illustration { width: 150px; height: 110px; margin: 0 auto; }
  .reasons-list li { padding-left: 1.5rem; }
}

@media (width <= 480px) {
  .container,
  .navbar .container { padding: 0 1rem; }
  .nav-content { padding: .3rem 0; }
  .features,
  .testimonials,
  .faq { padding: 4rem 0; }
  .feature-card,
  .testimonial-card { padding: 1.25rem; }
  .feature-title { font-size: 1.25rem; }
  .feature-description { font-size: .9rem; }
}

/* ── Body content links (guidelines / policy pages / about) ───────────
   Pages built on site.css use the dark theme; without explicit colour
   the browser default (blue) is barely visible. --primary-light matches
   the rest of the highlighted-text vocabulary used on these pages. */
.about-text a,
.about-content a,
.policy-page > .container a,
.reasons-section a {
  color: var(--primary-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.about-text a:hover,
.about-content a:hover,
.policy-page > .container a:hover,
.reasons-section a:hover {
  color: #fff;
}