/* ============================================================
   MOBILE & RESPONSIVE STYLES
   Sections: ROOT · BASE · NAV · HERO · PROBLEM/SOLUTION ·
             SERVICES · TESTIMONIALS · PROCESS · WHY ·
             REGISTRATION · FAQ · FINAL/FOOTER · ACCESSIBILITY
   ============================================================ */


/* ── ROOT ────────────────────────────────────────────────── */
:root {
  --cream: #F6F2EA;
  --cream-dark: #E8E0D2;
  --muted: #5B6470;
  --section-y: clamp(4.5rem, 8vw, 6.25rem);
  --container-x: clamp(1rem, 4vw, 5%);
}


/* ── BASE ────────────────────────────────────────────────── */
body {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a, button { touch-action: manipulation; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}

h2,
.section-title,
.problem-header h2,
.section-title-sol,
.mid-cta h2,
.section-title-reg,
.process-head h2,
.why-head h2,
.faq-title,
.final-text h2 {
  font-weight: 400;
}

section { padding-block: var(--section-y); }

.service-card,
.fs-card,
.testimonial-card,
.problem-left,
.solution-right {
  border-radius: var(--radius-sm);
}

.service-card,
.fs-card,
.testimonial-card,
.solution-right {
  background-position: center;
  content-visibility: auto;
  contain-intrinsic-size: 420px;
}

.btn-primary,
.btn-secondary,
.btn-outline,
.btn-whatsapp,
.btn-nav,
.wa-btn {
  border-radius: var(--radius-sm);
}

.faq-question {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
}

@media (max-width: 768px) {
  section { padding: 72px 1.25rem; }

  /* sections with hardcoded padding: 100px 0 bypass the section rule above */
  .problem-bg,
  .process-bg,
  .registration-bg,
  .faq-bg { padding-inline: 1.25rem; }

  /* mid-cta and footer use their own wrappers */
  .mid-cta { padding-inline: 1.25rem; }
  .final-footer { padding-inline: 1.25rem; }

  /* containers get the same consistent gutter */
  .container,
  .final-container,
  .mid-cta-inner { padding-inline: 0; }
}

@media (max-width: 480px) {
  section { padding: 64px 1rem; }
  .problem-bg,
  .process-bg,
  .registration-bg,
  .faq-bg { padding-inline: 1rem; }
  .mid-cta,
  .final-footer { padding-inline: 1rem; }
}

@media (max-width: 1024px) {
  section { padding-block: 72px; }
}


/* ── NAV ─────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  nav { padding-block: 28px; }
}

@media (max-width: 1100px) {
  nav {
    height: auto;
    gap: 1rem;
    padding-block: 22px;
    flex-wrap: wrap;
  }
  .nav-links { display: none; }
  .btn-nav {
    padding: 0.6rem 1rem;
    font-size: 0.8rem !important;
  }
}

@media (max-width: 1024px) {
  .nav-links { display: none; }
}

@media (max-width: 768px) {
  nav { padding: 0 4%; }
  nav { height: auto; padding-block: 24px; }
  .nav-logo { font-size: 1.25rem; }
  .btn-nav { padding: 0.625rem 1rem; }
  .nav-links { display: none; }
}


/* ── HERO ────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .hero { min-height: 680px; padding-inline: var(--container-x); }
  .hero-inner { padding-top: 64px; }
  .hero h1 { font-size: clamp(2.1rem, 3.5vw, 3.2rem); width: min(100%, 700px); }
  .hero-subtext { max-width: 600px; font-size: 0.96rem; }
  .hero-ctas { gap: 0.875rem; margin-bottom: 2.1rem; }
  .hero-trust-list li { font-size: 13px; }
}

@media (max-width: 1100px) {
  .hero {
    min-height: auto;
    padding-bottom: 52px;
  }
  .hero-inner { padding-top: 48px; }
  .hero h1 { width: min(100%, 560px); }
  .hero-subtext { max-width: 520px; }
  .hero-ctas {
    align-items: stretch;
    flex-direction: column;
    width: min(100%, 360px);
  }
  .hero-ctas a {
    width: 100%;
    white-space: normal;
  }
  .hero-trust-list {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }
  .hero-trust-list li { padding-right: 0; }
  .hero-trust-list li::after { display: none; }
}

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero { min-height: auto; padding-bottom: 60px; }
  .hero h1 { font-size: clamp(2rem, 5.4vw, 2.9rem); }
  .hero-subtext { font-size: 0.94rem; line-height: 1.65; }
  .hero-trust-list { flex-wrap: wrap; justify-content: flex-start; text-align: left; }
  .hero-card-stack { flex-direction: row; }
  .hero-card-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .hero { padding: 100px 4% 60px; }
  .hero { padding-top: 0; background: var(--forest); }
  .hero-inner { padding-top: 56px; text-align: center; }
  .hero h1 { font-size: clamp(2rem, 10vw, 2.75rem); line-height: 1.08; }
  .hero-subtext { font-size: 1rem; line-height: 1.65; max-width: 100%; margin: 0 auto 2.25rem; }
  .hero-left { width: 100%; max-width: 100%; }
  .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-ctas a { width: 100%; justify-content: center; text-align: center; }
  .hero-card-stack { flex-direction: column; }

  /* ── Trust list marquee ── */
  .listclass {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
    mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  }
  .hero-trust-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2.5rem;
    width: max-content;
    animation: trust-marquee 14s linear infinite;
  }
  .hero-trust-list li {
    white-space: nowrap;
    padding-right: 0;
    font-size: 14px;
  }
  .hero-trust-list li::after { display: none; }
}

@keyframes trust-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 480px) {
  .hero h1 { letter-spacing: -0.02em; }
}

.hero h1 { width: min(100%, 800px); }
.hero-subtext { max-width: 680px; }

@media (max-width: 480px) {
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .wa-btn {
    justify-content: center;
    width: 100%;
    padding-inline: 1rem;
  }
}


/* ── PROBLEM / SOLUTION ──────────────────────────────────── */
@media (max-width: 1180px) {
  .problem-header h2,
  .section-title,
  .section-title-sol,
  .mid-cta h2,
  .section-title-reg,
  .process-head h2,
  .why-head h2,
  .faq-title,
  .final-text h2 {
    font-size: clamp(1.85rem, 2.5vw, 2.45rem);
  }
  .problem-left h3 { font-size: 1.55rem; }
  .problem-left,
  .solution-overlay,
  .service-card,
  .fs-card,
  .testimonial-card,
  .why-card,
  .faq-item {
    padding: 1.3rem;
  }
}

@media (max-width: 1100px) {
  .problem-grid,
  .reg-inner,
  .faq-inner,
  .final-top,
  .final-bottom {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 1024px) {
  .problem-grid { grid-template-columns: 1fr; }
  .solution-right { min-height: 340px; }
  .problem-left h3 { font-size: 1.45rem; }
}

@media (max-width: 768px) {
  .problem-grid, .reg-inner, .final-inner, .why-grid { grid-template-columns: 1fr; gap: 2rem; }
  .problem-left,
  .solution-overlay,
  .service-card:nth-child(4),
  .fs-card {
    padding: 1.5rem;
  }
  .solution-right { min-height: 520px; }
}

@media (max-width: 480px) {
  .solution-right { min-height: 560px; }
  .problem-header h2,
  .section-title,
  .process-head h2,
  .why-head h2 {
    font-size: clamp(1.85rem, 9vw, 2.25rem);
  }
}

.solution-right { width: 100%; min-height: 420px; }

@media (max-width: 768px) {
  .mid-cta { padding-block: 52px; }
  .mid-cta-inner { flex-direction: column; gap: 1.5rem; }
}

@media (max-width: 1024px) {
  .mid-cta h2,
  .section-title-reg,
  .faq-title,
  .final-text h2 {
    font-size: clamp(1.9rem, 4.5vw, 2.35rem);
  }
}

@media (max-width: 768px) {
  .section-title-reg,
  .faq-title,
  .final-text h2 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
}


/* ── SERVICES ────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .services-grid { grid-auto-rows: minmax(220px, auto); }
  .service-card:nth-child(2) { padding-top: 160px; }
}

@media (max-width: 1024px) {
  .full-services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card:nth-child(n),
  .fs-card,
  .testimonial-card {
    min-height: 240px;
  }
}

@media (max-width: 768px) {
  /* ── Services: snap-scroll slider ── */
  .services-bg { overflow-x: clip; }

  .services-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.875rem;
    margin-top: 1.5rem;
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    padding: 0.25rem 1.5rem 1.5rem;
  }
  .services-grid::-webkit-scrollbar { display: none; }

  /* strip photo backgrounds, use solid gradient instead */
  .service-card:nth-child(1),
  .service-card:nth-child(2),
  .service-card:nth-child(3),
  .service-card:nth-child(4) {
    background: linear-gradient(135deg, #0a2818, #123d2a) !important;
  }

  /* reset all desktop grid-column / grid-row overrides */
  .service-card:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    width: 72vw;
    min-width: 72vw;
    height: 300px;
    min-height: unset;
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 1.5rem !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 16px;
  }

  /* ── Full services: snap-scroll slider ── */
  .full-service { overflow-x: clip; }

  .full-services-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.875rem;
    margin-top: 1.5rem;
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    padding: 0.25rem 1.5rem 1.5rem;
  }
  .full-services-grid::-webkit-scrollbar { display: none; }

  .fs-card {
    width: 72vw;
    min-width: 72vw;
    height: 300px;
    flex-shrink: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem !important;
    border-radius: 16px;
  }
  .fs-card:hover { transform: none; }
  .fs-card h3 { margin-bottom: 0.5rem; }
  .fs-num { font-size: 1.75rem; margin-bottom: 0.25rem; }

  /* other grids that still need single-column */
  .why-grid,
  .reg-list-group ul {
    grid-template-columns: 1fr;
  }
}


/* ── TESTIMONIALS ────────────────────────────────────────── */
@media (max-width: 1180px) {
  .testimonial .container,
  .final-top,
  .final-bottom,
  .faq-inner,
  .reg-inner .reveal {
    gap: 3rem;
  }
}

@media (max-width: 1024px) {
  .testimonial .container,
  .faq-inner,
  .reg-inner .reveal,
  .final-top,
  .final-bottom {
    flex-direction: column;
    align-items: stretch;
  }
  .faq-left,
  .faq-list,
  .reg-lists {
    width: 100%;
  }
  .test-head { margin-top: 0; padding-inline: 0; }
  .test-head h2 { width: min(100%, 520px); }
}

@media (max-width: 768px) {
  /* ── Section ── */
  .testimonials-bg { overflow-x: clip; }

  /* ── Container ── */
  .testimonial .container {
    flex-direction: column;
    gap: 0;
    padding-top: 3.5rem;
  }

  /* ── Header ── */
  .test-head {
    width: 100%;
    padding: 0 0 1.75rem;
    margin-top: 0;
  }
  .test-head::before {
    font-size: 6rem;
    top: -1.5rem;
    left: -0.25rem;
  }
  .test-head h2 {
    padding-top: 3rem;
    width: 100%;
    font-size: clamp(1.8rem, 7vw, 2.2rem);
    line-height: 1.2;
  }

  /* ── Nav: hidden — swipe is the interaction ── */
  .controls { display: none; }

  /* ── Slider: bleeds to full viewport width so cards aren't clipped by container padding ── */
  .testimonial-slider {
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .testimonial-slider::-webkit-scrollbar { display: none; }

  .testimonials-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.875rem;
    margin-top: 0;
    padding: 0.25rem 1.5rem 2.5rem;
    width: max-content;
  }

  /* ── Card: 72vw = full card + ~25% of next peeking ── */
  .testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 72vw;
    min-width: 72vw;
    height: 440px;
    scroll-snap-align: start;
    flex-shrink: 0;
    border-radius: 20px;
    padding: 1.75rem !important;
    box-sizing: border-box;
  }
  .testimonial-card:hover { transform: none; }

  /* photo vivid at top → near-black at bottom */
  .testimonial-card::before {
    background: linear-gradient(
      to bottom,
      rgba(5, 12, 8, 0.04) 0%,
      rgba(5, 12, 8, 0.38) 48%,
      rgba(5, 12, 8, 0.95) 100%
    ) !important;
    transition: none !important;
  }
  .testimonial-card:hover::before {
    background: linear-gradient(
      to bottom,
      rgba(5, 12, 8, 0.04) 0%,
      rgba(5, 12, 8, 0.38) 48%,
      rgba(5, 12, 8, 0.95) 100%
    ) !important;
  }

  /* ── Quote text: in-flow, always visible ── */
  .testimonial-text {
    position: relative !important;
    top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.92);
    font-style: italic;
    margin-bottom: 1.125rem;
    z-index: 2;
  }

  /* ── Author: in-flow, below quote, with a divider ── */
  .testimonial-author {
    position: relative !important;
    top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important;
    transform: none !important;
    transition: none !important;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    z-index: 2;
  }
  .author-name {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: white;
  }
  .author-role {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 3px;
    letter-spacing: 0.01em;
  }
}


/* ── PROCESS ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .process-steps {
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2.5rem;
  }
  .process-steps::before { display: none; }
  .step { width: 100%; }
}

@media (max-width: 1024px) {
  .process-steps { gap: 2rem; }
}

@media (max-width: 768px) {
  /* ── Section: left-align everything ── */
  .process-bg { text-align: left; padding-block: 56px; }
  .process-head { text-align: left; }

  /* ── Steps wrapper: vertical stack ── */
  .process-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 1.75rem;
    position: relative;
    padding-left: 0;
  }

  /* ── Vertical timeline line ── */
  .process-steps::before {
    display: block;
    top: 24px;
    bottom: 24px;
    left: 23px;
    right: auto;
    width: 1px;
    height: auto;
    background: #ccc;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .process-steps.visible::before { transform: scaleY(1); }

  /* ── Step: circle left, text right ── */
  .step {
    width: 100%;
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.25rem;
    text-align: left;
    padding-bottom: 2.5rem;
  }
  .step:last-child { padding-bottom: 0; }

  /* Circle: spans both text rows, anchored top-left */
  .step-circle {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 48px;
    height: 48px;
    font-size: 1.35rem;
    margin: 0;
    align-self: start;
    flex-shrink: 0;
  }

  /* Heading: right column, top row */
  .step h3 {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding-top: 0.6rem;
    margin-bottom: 0.375rem;
    font-size: 1rem;
  }

  /* Body: right column, bottom row */
  .step p {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    max-width: 100%;
    margin: 0;
  }
}

@media (max-width: 1180px) {
  .process-card h3,
  .faq-question-text {
    font-size: 1.55rem;
  }
}


/* ── WHY ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .why-bg { padding-block: 56px; padding-inline: 4%; } /* inline already normalised in BASE */
  .why-grid { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; }
  .why-bg-text,
  .registration-bg::before {
    display: none;
  }
}

@media (max-width: 1180px) {
  .why-card h3 { font-size: 1.55rem; }
}


/* ── REGISTRATION ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .reg-lists,
  .faq-left,
  .faq-list {
    width: 100%;
  }
  .reg-list-group ul {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

@media (max-width: 768px) {
  .registration-bg { padding-block: 56px; }
  .reg-inner { gap: 2rem; }
  .reg-inner, .final-inner { grid-template-columns: 1fr; }
  .reg-lists { grid-template-columns: 1fr; }

  /* ── Accordion ── */
  .reg-divider { display: none; }

  .reg-list-group h4 {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 0;
    opacity: 1;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }

  .reg-list-group h4::after {
    content: '+';
    font-size: 1.25rem;
    color: var(--lime);
    transition: transform 0.35s ease;
    flex-shrink: 0;
  }

  .reg-list-group.open h4::after {
    transform: rotate(45deg);
  }

  .reg-list-group ul {
    grid-template-columns: 1fr;
    overflow: hidden;
    transition: max-height 0.4s ease;
    max-height: 0;
  }

  .reg-list-group ul li {
    padding-block: 0.25rem;
  }
}


/* ── FAQ ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .faq-inner,
  .final-top,
  .final-bottom {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .faq-left,
  .faq-list {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .faq-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .faq-left,
  .faq-list {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .faq-bg { padding-block: 56px; }
  .faq-inner { gap: 1.75rem; }
}


/* ── FINAL / FOOTER ──────────────────────────────────────── */
@media (max-width: 1180px) {
  .final-text .sub { width: min(100%, 620px); }
}

@media (max-width: 1100px) {
  .final-top,
  .final-bottom {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 1024px) {
  .final-top,
  .final-bottom {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  .final-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-links { gap: 1rem; }
}

@media (max-width: 480px) {
  .final-footer { padding-inline: 1rem; }
}


/* ── ACCESSIBILITY ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}