/* =========================================================
   0) BASE / RESET
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* universal stability + box model */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;            /* prevent sideways scroll */
}

/* smooth scroll + base document colors */
html { scroll-behavior: smooth; }

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  background-color: #121212;
  color: #dddddd;
  line-height: 1.15;
}

/* media should never overflow */
img, svg, video, iframe, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* selection defaults */
a { text-decoration: none; display: inline; }
a:hover {
  color: #32a852;
  transition: all 300ms ease;
  transform: translateY(2px);
}
p { line-height: 1.5; color: #757575; font-size: 1rem; }
ul { display: flex; }
li { list-style: none; }
button { cursor: pointer; border: none; }
button:active, a:active, .start-btn:active { transform: translateY(2px); }

/* custom scrollbar (webkit) */
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-corner { background-color: transparent; }
html::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
html::-webkit-scrollbar-track { background: #121212; border-radius: 4px; }

/* =========================================================
   1) LAYOUT / TYPOGRAPHY / UTILS
   ========================================================= */
* { padding: 0; margin: 0; color: #32a852; }  /* your theme color on base elements */

.container { padding: 0; }
.row { width: 100%; margin: 0 auto; }
.wrapper { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
.section { width: 100%; } /* helper */
section { padding: 0 32px; }
main { margin-bottom: 96px; padding: 0 20px; text-align: center; }

h1 {
  color: #dddddd; font-weight: 700; text-align: center;
  font-size: 48px; line-height: 53px; margin-bottom: 30px;
}
h2 {
  color: #dddddd; font-weight: 600; text-align: center;
  font-size: 36px; line-height: 30px; margin-bottom: 30px;
}
h3 {
  color: #dddddd; font-weight: 400; text-align: center; opacity: 0.6;
  font-size: 30px; line-height: 27px; margin-bottom: 20px;
}

.divider { width: 1px; height: 24px; background: rgb(229,231,235); }

/* =========================================================
   2) NAVIGATION (fixed at top)
   ========================================================= */
nav {
  position: fixed; top: 0; z-index: 1000;
  width: 100%; height: 80px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 15px;
  background: linear-gradient(180deg,#121212 0%,#1c1c1c 60%,rgba(18,18,18,0) 100%) !important;
  backdrop-filter: blur(4px);
}
.logo { display: block; height: auto; max-width: 80px; }
.nav__row { display: flex; justify-content: space-between; }
.nav__logo { display: flex; align-items: center; justify-content: space-between; margin: 0; padding-left: 10px; }
.login { margin-left: 48px; }

.btn__menu {
  background: transparent; color: #dddddd; opacity: .5;
  border: none; font-size: 36px; padding: 0 20px;
  transition: all 300ms ease; text-align: center;
}
.btn__menu:hover { color: #fff; opacity: .8; }
.fa-bars { font-weight: bold; }
.btn__menu--svg:hover {
  filter: invert(26%) sepia(94%) saturate(7476%) hue-rotate(261deg) brightness(94%) contrast(115%);
}

/* ------- Slide-in modal menu: full-screen overlay, no blackout ------- */
.modal {
  position: fixed;
  inset: 0;                          /* full overlay for backdrop-click close */
  z-index: 1500;
  background: transparent;           /* keep page visible */
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease, visibility 250ms ease;
}

/* Drawer background panel */
.modal::before {
  content: "";
  position: absolute;
  top: 0; right: 0; height: 100%;
  width: min(88vw, 340px);
  background: rgba(18,18,18,.96);   /* the dark panel itself */
  box-shadow: -16px 0 30px rgba(0,0,0,.35);
  transform: translateX(110%);       /* slide in from right */
  transition: transform 300ms ease;
  z-index: 1;
}

/* Drawer content lives inside the panel space */
.modal__links {
  position: absolute;
  top: 0; right: 0; height: 100%;
  width: min(88vw, 340px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px 28px 28px;           /* space for the close X */
  transform: translateX(110%);
  transition: transform 300ms ease;
  z-index: 2;                        /* above ::before */
}

/* menu link styles */
.modal__link {
  color: #dddddd; text-decoration: none;
  font-size: 18px; font-weight: 600; line-height: 30px;
  margin-bottom: 20px; padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.modal__link:hover { color: #32a852; }
.modal__link--primary {
  color: #121212; background-color: #32a852;
  width: 100%; font-size: 12px; text-align: center;
  padding: 8px 0; margin-bottom: 40px; border: none; text-decoration: none;
}
.modal__link--primary:hover { color: #fff; background-color: rgba(37,191,122,0.6); }

/* open state */
.menu--open .modal { visibility: visible; opacity: 1; }
.menu--open .modal::before,
.menu--open .modal__links { transform: translateX(0); }

/* body scroll lock while drawer open (class-based, no position:fixed) */
html.menu--open, body.menu--open { overflow: hidden; }

/* Close (X) pinned in the panel's top-right */
.btn__menu--close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  margin: 0;
  padding: 6px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn__menu--close i { font-size: 28px; color: #ddd; opacity: .9; }
.btn__menu--close:hover i { opacity: 1; }

/* =========================================================
   3) BANNER (top notice)
   ========================================================= */
#landing { position: relative; margin: 0; padding: 0; }
.banner{
  width: 100%; display: flex; align-items: center; justify-content: space-around;
  padding: 20px 60px; margin: 80px 0 30px;
  font-weight: 600; font-size: 14px; line-height: 140%; text-align: center;
  background: linear-gradient(#32a852 0%, #32a852 100%); color: #fff;
}
.underline { text-transform: uppercase; text-decoration: underline; }

/* =========================================================
   4) HEADER (hero)
   ========================================================= */
header { position: relative; overflow: hidden; z-index: 0; }
.header__description { width: 100%; }

.header__video--wrapper { margin-top: 60px; display: flex; justify-content: center; }
.header__video--container {
  max-width: 960px; width: 100%;
  border: 2px solid #ef4e34; border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
.header__video { width: 100%; display: block; outline: none; opacity: 1; transition: opacity .3s ease; }
.header__video.controls-visible { opacity: 1; }
.header__video--wrapper:hover .custom-play-btn,
.header__video--wrapper:hover .custom-mute-btn,
.custom-play-btn.show, .custom-mute-btn.show { opacity: 1; visibility: visible; }

.header__button--wrapper { display: flex; justify-content: center; position: relative; z-index: 1; }
.header__button {
  color: #dddddd; display: flex; justify-content: center; align-items: center;
  width: 177px; padding: 20px 0; margin: 100px 0 0;
  font-size: 18px; line-height: 17px; font-weight: 700; text-transform: uppercase; text-align: center;
  background-color: #32a852; border-radius: 10px; border: none; outline: none; cursor: pointer;
  transition: all .3s cubic-bezier(.645,.045,.355,1); box-shadow: 0 0 20px 0 rgba(37,191,122,.3);
}
.header__button:hover { background-color: #2a8f46; }

/* radial highlight */
.header__button--wrapper::before {
  content: ""; position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,.04), transparent 70%);
  filter: blur(120px); z-index: 0; pointer-events: none;
}

/* decorative blob */
.header__blob {
  position: absolute; top: 50%; left: 50%; z-index: 0; pointer-events: none;
  width: 1600px; height: auto; transform: translate(-50%, -67%);
}

/* ensure header children sit above bg */
header .container, header .row, header .header__description,
header .header__button--wrapper, header .header__video--wrapper { position: relative; z-index: 1; }

/* =========================================================
   5) WORKS (how it works)
   ========================================================= */
#works {
  position: relative; overflow: hidden; z-index: 0;
  margin-top: 60px; margin-bottom: 110px;
}
#works .container, #works .row__narrow, #works .works__description, #works .works__steps { position: relative; z-index: 1; }

.works__bg {
  position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 0;
  width: 1600px; transform: translate(-50%, -32%);
}
.works__description { display: flex; align-items: center; justify-content: space-around; color: #757575; }
.works__description--wrapper { display: flex; flex-direction: column; width: 50%; padding-right: 100px; }
.works__gradient { position: relative; display: inline-block; overflow: hidden; width: 50%; padding-right: 80px; }
.works__gradient::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(to bottom, rgba(18,18,18,0) 70%, rgba(18,18,18,.4) 75%, rgba(18,18,18,.7) 80%, #121212 89%);
}
.works__gradient img{ position:relative; z-index:0; width:100%; height:auto; display:block; }
.works__title{ margin-bottom:20px; font-size:24px; line-height:29px; text-align:left; font-weight:700; color:#dddddd; }
.works__para{ margin:0 0 9px; font-size:18px; line-height:30px; text-align:left; color:#dddddd; opacity:.7; }

/* Steps */
.works__steps{ display:flex; justify-content:center; flex-wrap:wrap; gap:24px; }
.works__step{
  flex:1 1 220px; max-width:360px; border-radius:12px; padding:48px 16px;
  color:#dddddd; display:flex; flex-direction:column; align-items:center; transition:all .3s ease;
}
.steps__img--wrapper{
  width:100px; height:100px; display:flex; align-items:center; justify-content:center;
  color:#25bf7a; font-size:2rem; margin-bottom:24px; position:relative; z-index:1;
}
.steps__title{ margin-bottom:20px; font-size:20px; line-height:29px; text-align:center; font-weight:700; color:#dddddd; }
.steps__para{ margin:0 0 9px; font-size:16px; line-height:30px; text-align:center; color:#dddddd; opacity:.7; }
.steps__para{ background-color: rgba(38,42,47,.6); padding:16px 20px; border-radius:6px; }

/* =========================================================
   6) FEATURES / BENEFITS
   ========================================================= */
#features__benefits{
  position:relative; width:100%; overflow:hidden; z-index:0;
  background-repeat:no-repeat; background-position:center; background-size:cover; background-blend-mode:darken;
  backdrop-filter: blur(10px);
}
#features__benefits::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-100;
}
#features__benefits .container, #features__benefits .row__narrow, #features__benefits .features{ position:relative; z-index:1; }

.features__bg{
  position:absolute; left:50%; top:50%; width:1600px; height:auto;
  transform: translate(-50%, -50%); pointer-events:none; z-index:0;
}

.section__title{ margin:16px 0; font-size:48px; font-weight:900; letter-spacing:.9px; line-height:1.5; }

.features{ display:flex; justify-content:space-around; margin:30px auto; }
.feature__group1, .feature__group2 { width:50%; margin-left:30px; }
.feature { display:flex; align-items:center; margin-bottom:40px; }
.feature__text { color:#dddddd; }
.feature__img--wrapper{
  margin:10px; padding:20px; width:67px; height:67px;
  color:#25bf7a; display:flex; align-items:center; justify-content:center;
  border:1px solid #dddddd; border-radius:500px;
}
.features__title{
  font-weight:700; font-size:32px; line-height:39px;
  text-align:center; color:#dddddd; margin-bottom:30px;
}
.features__description{
  margin-bottom:65px; font-size:18px; line-height:30px;
  text-align:center; font-weight:400; color:#dddddd; opacity:.8;
}
.fa-comment{ font-size:36px; color:#1e1e1e; }
.fa-regular.fa-bell, .fa-regular.fa-comment,
.fas.fa-book-open, .fas.fa-calendar-days,
.fas.fa-comments, .fas.fa-trophy, .fa-file-pen { font-weight:900; font-size:36px; }
.feature__img{ width:24px; height:24px; }
.row__narrow{ width:100%; margin:0 auto; }

.features__blob{
  position:absolute; right:0; bottom:0; width:16rem; opacity:.25; padding:16px;
  transform: translateX(96px) translateY(192px);
}

/* =========================================================
   7) COMPARISON
   ========================================================= */
#comparison{
  position:relative; overflow:hidden; z-index:0;
  padding:50px 20px; color:#ffffff; font-family:"Inter","Segoe UI",sans-serif; font-size:14px;
}
#comparison .container, #comparison .row, #comparison h2, #comparison p, #comparison .comparison__table{ position:relative; z-index:1; }
.comparison__bg{
  position:absolute; left:50%; top:50%; width:1900px; height:auto;
  transform: translate(-50%,-50%); pointer-events:none; z-index:0;
}
#comparison h2{ font-weight:700; font-size:32px; line-height:39px; text-align:center; color:#fff; margin-bottom:30px; }
#comparison p{ margin-bottom:65px; font-size:18px; line-height:30px; text-align:center; font-weight:400; color:hsla(0,0%,100%,.6); }

.comparison__table{
  width:100%; border-collapse:separate; border-spacing:10px; table-layout:fixed;
}
.comparison__table th:first-child, .comparison__table td:first-child { width:25%; }
.comparison__table th:nth-child(2), .comparison__table td:nth-child(2),
.comparison__table th:nth-child(3), .comparison__table td:nth-child(3) { width:37.5%; }

.comparison__table th{
  background-color:#262a2f; color:#fff; opacity:.4;
  font-weight:500; padding:20px; border-radius:6px; text-align:center; font-size:15px;
}
.comparison__table th:nth-child(2){ background:#25bf7a; color:#fff; opacity:1; }

.comparison__table td:first-child{
  background-color: rgba(38,42,47,.6); color:#fff; border-radius:6px;
  font-weight:300; padding:20px; font-size:14px; line-height:1.5; text-align:left; vertical-align:middle;
}
.comparison__table td:nth-child(2){
  background: rgba(37,191,122,.05); color:#25bf7a; border-radius:6px;
  padding:20px; font-size:14px; line-height:1.5; vertical-align:middle;
}
.comparison__table td:nth-child(3){
  background-color: rgba(38,42,47,.2); color:#ef4e34; border-radius:6px;
  padding:20px; font-size:14px; line-height:1.5; vertical-align:middle;
}
.comparison__table td, .comparison__table th { height:auto; position:relative; vertical-align:middle; }

/* =========================================================
   8) PRICING
   ========================================================= */
#pricing{
  position:relative; overflow:visible; z-index:0;
  padding:60px 20px; color:#dddddd; font-family:"Inter","Segoe UI",sans-serif;
}
#pricing .container, #pricing .row, #pricing h2, #pricing p, #pricing .pricing-container{ position:relative; z-index:1; }
.pricing__bg{
  position:absolute; left:50%; top:50%; width:2000px; height:auto;
  transform: translate(-50%,-35%); pointer-events:none; z-index:0;
}
#pricing .row{ display:flex; flex-direction:column; }
#pricing h2{ color:#dddddd; margin-bottom:20px; font-size:32px; font-weight:600; text-align:center; }

.schedule__description{ margin-bottom:65px; font-size:18px; line-height:30px; text-align:center; font-weight:400; color:#757575; }
.schedule__header::after{
  content:" "; display:block; width:100%; height:1px; margin-bottom:50px; background-color: hsla(0,0%,100%,.1);
}

.pricing-container{
  display:flex; flex-wrap:wrap; gap:30px; justify-content:center; align-items:stretch; max-width:1100px;
}
.pricing-left{ flex:1; width:40%; display:flex; flex-direction:column; gap:16px; }
.plan-option{
  background: linear-gradient(180deg,#181818 0%,#121212 100%);
  border:1px solid #1e1e1e; border-radius:6px; color:#dddddd;
  cursor:pointer; text-align:center; flex-grow:1; display:flex; flex-direction:column; justify-content:center;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.plan-option:hover{ background:#181d1f; border:1px solid #32a852; transition:all .3s ease; }
.plan-option.active{ font-weight:700; border:1px solid #25bf7a; color:#25bf7a; }
.plan-option h3{ font-size:16px; margin-bottom:5px; font-weight:600; }
.plan-option .price{ font-size:14px; color:#32a852; font-weight:bold; }
.plan-option .billing{ font-size:12px; color:#757575; }

.pricing__header{ display:block; color:#32a852; font-weight:700; margin-bottom:4px; }
.feature-value{ display:block; margin-left:0; color:#dddddd; }

.pricing-right{
  flex:2; width:60%; border:1.5px solid #2a2a2a; border-radius:6px; padding:40px 60px;
  display:flex; flex-direction:column; justify-content:center;
  background-color:#161616; box-shadow: 0 0 15px rgba(50,168,82,.05);
}
.pricing-right h2{ font-size:1.8rem; color:#32a852; font-weight:700; margin-bottom:10px; }
.pricing-right .monthly-price{ font-size:1.1rem; color:#32a852; margin-bottom:20px; }

.plan-info{
  list-style:none; padding:0; margin-bottom:30px; font-size:1rem; color:#dddddd;
  display:flex; justify-content:space-between;
}
.plan-info li{
  margin:10px 0; font-weight:500; color:#dddddd;
  display:flex; flex-direction:column; align-items:flex-start;
}

.start-btn{
  width:100%; padding:12px 25px; border:none; border-radius:8px; cursor:pointer; font-weight:bold;
  color:#121212; font-size:14px; line-height:20px; text-transform:uppercase; text-align:center;
  background-color:#32a852; outline:none;
  transition: all .3s cubic-bezier(.645,.045,.355,1); box-shadow: 0 0 20px 0 rgba(37,191,122,.3);
}
.start-btn:hover{ background-color:#25bf7a; }

/* =========================================================
   9) TESTIMONIALS (Swiper)
   ========================================================= */
#testimonials{
  color:#dddddd; padding:40px 20px; max-width:900px; margin:0 auto;
  font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif; user-select:none;
}
#testimonials h2{ font-size:2rem; font-weight:600; margin-bottom:30px; color:#dddddd; text-align:center; }

#testimonials .testimonial-swiper{
  width:100%; padding-bottom:0; overflow:hidden;
  --swiper-navigation-color:#bdbdbd;
  --swiper-navigation-size:26px;
  --swiper-pagination-color:#32a852;
}
#testimonials .swiper-wrapper{ display:flex; align-items:center; }
#testimonials .swiper-slide{ display:flex; justify-content:center; padding:15px; }

#testimonials .testimonial-card{
  width:100%; max-width:800px;
  border:1px solid hsla(0,0%,100%,.2); border-radius:4px;
  padding:25px 30px; display:flex; gap:25px; color:#dddddd;
  box-shadow:0 0 10px rgba(0,0,0,.7);
}
#testimonials .testimonial-left{
  flex-shrink:0; width:250px; border-radius:10px; overflow:hidden;
  box-shadow:0 0 10px rgba(50,168,82,.5);
}
#testimonials .testimonial-left img{ width:100%; height:auto; display:block; object-fit:contain; border-radius:10px; }
#testimonials .testimonial-right{ flex-grow:1; display:flex; flex-direction:column; justify-content:center; }
#testimonials .highlight-quote{ color:#32a852; font-weight:600; font-size:1.2rem; margin-bottom:12px; }
#testimonials .testimonial-description{ font-size:1rem; line-height:1.5; margin-bottom:12px; color:#cccccc; }
#testimonials .testimonial-quote{ font-style:italic; font-size:.95rem; color:#8b8b8b; }

/* controls + dots below */
#testimonials .testimonial-nav, #testimonials .swiper-pagination{
  position:relative; display:flex; justify-content:center; gap:20px; margin-top:16px; z-index:2;
}
#testimonials .swiper-button-prev, #testimonials .swiper-button-next, #testimonials .swiper-pagination{
  position:static !important; inset:auto !important;
}
#testimonials .swiper-button-prev, #testimonials .swiper-button-next{
  background:none !important; width:auto; height:auto; padding:4px 6px; border:none; outline:none;
  color:var(--swiper-navigation-color); transition: color .2s ease, transform .1s ease;
}
#testimonials .swiper-button-prev::after, #testimonials .swiper-button-next::after{ display:inline-block; line-height:1; }
#testimonials .swiper-button-prev:hover, #testimonials .swiper-button-next:hover{ color:#32a852; }
#testimonials .swiper-button-prev:active, #testimonials .swiper-button-next:active{ transform: translateY(1px); }
#testimonials .swiper-button-disabled{ opacity:.35; pointer-events:none; }
#testimonials .swiper-pagination{ margin-top:8px; }
#testimonials .swiper-pagination-bullet{
  width:7px; height:7px; background:#6b6b6b; opacity:1; margin:0 5px !important;
  transition: background-color .2s ease, transform .2s ease;
}
#testimonials .swiper-pagination-bullet:hover{ background:#8c8c8c; }
#testimonials .swiper-pagination-bullet-active{ background:#32a852; transform: scale(1.1); }

/* =========================================================
   10) FAQ
   ========================================================= */
#faq{ padding:60px 20px; color:#dddddd; font-family:"Inter","Segoe UI",sans-serif; }
#faq h2{ text-align:center; font-size:2rem; font-weight:700; margin-bottom:40px; }

.faq-container{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:15px; }
.faq-item{
  border:1px solid rgba(255,255,255,.1); border-radius:6px; overflow:hidden;
  transition: border .3s ease, box-shadow .3s ease;
}
.faq-item.active{ border:1px solid #25bf7a; box-shadow:0 0 15px rgba(0,255,153,.1); }

.faq-question{
  width:100%; padding:18px 20px; background:none; border:none; outline:none; cursor:pointer;
  text-align:left; color:#dddddd; font-size:1.1rem; font-weight:600; position:relative;
  transition: color .3s ease;
}
.faq-question:hover{ color:#25bf7a; }
.faq-question::after{
  content:"+"; position:absolute; right:20px; font-size:1.2rem; transition: transform .3s ease;
}
.faq-item.active .faq-question::after{ content:"-"; transform: rotate(180deg); }

.faq-answer{
  max-height:0; overflow:hidden; padding:0 20px;
  transition: max-height .4s ease, padding .3s ease;
}
.faq-item.active .faq-answer{ max-height:300px; padding:15px 20px 20px; }
.faq-answer p{ font-size:1rem; color:#ccc; line-height:1.6; }

/* =========================================================
   11) CONTACT FAB + MODAL
   ========================================================= */
#contact-button{
  position:fixed; bottom:24px; right:24px; z-index:1400;
  width:70px; height:70px; border:none; border-radius:14px;
  background-color:#32A852; color:#757575; font-size:28px;
  box-shadow:0 6px 10px rgba(0,0,0,.2);
  display:flex; justify-content:center; align-items:center;
  cursor:pointer; transition: background-color .3s ease;
}
#contact-button:hover{ background-color:#278543; color:#121212; }

#contact-modal{
  display:none; position:fixed; z-index:9998; left:0; top:0; width:100vw; height:100vh;
  background-color: rgba(0,0,0,.85);
  justify-content:center; align-items:center;
}
.contact-modal-content{
  width:90%; max-width:500px; padding:32px 30px;
  background-color:#1C1C1C; color:#dddddd; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,168,82,.2);
  font-family:"Inter",sans-serif; animation: fadeIn .3s ease;
}
.contact-modal-content h2{
  color:#32A852; margin-bottom:24px; font-family:"Sora",sans-serif;
  font-weight:700; font-size:28px; line-height:1.5;
}
.modal__para{ text-align:center; color:#dddddd; line-height:2; font-size:18px; }

.contact-modal-content input,
.contact-modal-content textarea{
  width:100%; padding:12px 14px; margin-bottom:16px;
  border-radius:6px; border:none; background-color:#2e2e2e; color:#dddddd;
  font-size:1rem; font-family:"Inter",sans-serif; resize:vertical;
}
.contact-modal-content button{
  width:100%; padding:14px 0; border:none; border-radius:10px;
  background-color:#32A852; color:#1C1C1C; font-weight:700; font-size:1.1rem; cursor:pointer;
  transition: background-color .3s ease; font-family:"Inter",sans-serif;
}
.contact-modal-content button:hover{ background-color:#278543; }
.close-button{
  color:#dddddd; font-size:28px; font-weight:700; float:right; cursor:pointer;
  margin-top:-10px; margin-right:-10px;
}

/* =========================================================
   12) FOOTER
   ========================================================= */
footer{ max-width:1138px; width:94%; margin:0 auto; padding:0 15px 40px 0; }
.footer__list{ text-align:center; }

.footer__links{
  margin:0; padding-bottom:30px;
  display:flex; align-items:center; justify-content:space-around;
}
.footer__link{
  font-size:14px; line-height:22px; color:#757575; padding-left:20px;
  cursor:pointer; transition: color .2s ease;
}
.footer__link:hover{ color:#32A852; }

.footer__logo{ display:flex; align-items:center; margin:0; height:80px; width:80px; }
.footer__logo--img{ width:100%; }
.footer__divider{
  content:" "; display:block; width:100%; height:1px; margin-bottom:20px;
  background-color: rgba(255,255,255,.1);
}
.disclaimer__title{
  margin-bottom:12px; font-size:14px; line-height:16px; text-transform:uppercase; color:#757575;
}
.footer__disclaimer{ margin-bottom:20px; color:#dddddd; font-size:14px; line-height:150%; opacity:.6; }
.footer__copyright{ font-size:14px; line-height:22px; color:#757575; text-align:center; }

/* =========================================================
   13) ANIMATIONS
   ========================================================= */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* =========================================================
   14) MEDIA QUERIES (SMALL → LARGE)
   ========================================================= */

/* <= 550px — small phones */
@media (max-width: 550px) {
  .nav__links { display: none; }
  nav { padding: 0 10px; }
  h1 { font-size: 32px; line-height: 1.2; }
  .banner { padding: 15px; font-size: 14px; }
}

/* <= 600px */
@media (max-width: 600px) {
  .header__description h1 { font-size: 32px; }
  .faq-question { font-size: 1rem; }
  .faq-answer p { font-size: .95rem; }
}

/* <= 640px — large phones / small tablets */
@media (max-width: 640px) {
  .container { padding: 80px 0; }
  .nav__logo { margin: 8px 0; padding-bottom: 4px; }
  main { margin-bottom: 80px; }
  .header__button { font-size: 16px; }

  #features .section__title, #pricing .section__title { font-size: 36px; }

  .banner { padding: 15px; font-size: 15px; }
  main { padding: 0 10px; }

  #works { margin-top: -80px; margin-bottom: -30px; }
  .works__step { padding: 0; }
  .works__description { margin-bottom: 50px; }

  .features__title { font-size: 24px; }

  .pricing-container, .pricing-left, .pricing-right { width: 100%; padding: 0 10px; }
  .plan-info { font-size: 14px; }
}

/* <= 720px */
@media (max-width: 720px) {
  #testimonials h2 { font-size: 1.75rem; }
  #testimonials .testimonial-card{
    flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 20px;
  }
  #testimonials .testimonial-left { width: 72%; max-width: 320px; }
  #testimonials .testimonial-right { width: 100%; }
  #testimonials .testimonial-nav { gap: 16px; }
  #testimonials .testimonial-swiper { --swiper-navigation-size: 24px; }
}

/* <= 768px — tablets */
@media (max-width: 768px) {
  .header__description h1 { font-size: 36px; }
  .header__description h2 { font-size: 30px; }

  #works { margin-top: 60px; }
  .works__bg { transform: translate(-30%, -32%); }
  .works__description { flex-direction: column-reverse; }
  .works__description--wrapper { padding: 0; width: 100%; align-items: center; }
  .works__gradient { padding: 0; width: 75%; }
  .works__steps { flex-wrap: nowrap; }

  .features { justify-content: center; }
  .features__title { font-size: 28px; }
  .feature__group1 { margin-left: 0; }
  .feature { width: 100%; }

  #comparison h2 { font-size: 28px; }

  #quality .row, #values .row { flex-direction: column-reverse; }
  #testimonials h2, #faq h2 { font-size: 28px; }

  .quality__section, .quality__img--wrapper,
  .steps__section, .steps__img--wrapper,
  .values__section, .values__img, .values__img--wrapper,
  .testimonials__img, .testimonials__img--wrapper,
  div.testimonials__section { width:100%; max-width:448px; }

  .quality__section, .steps__section, .values__section, .testimonials__section {
    padding: 0; margin-top: 64px; text-align: center;
  }

  #quality .quality__section, #quality .section__tag, #quality .section__para, #quality .section__title,
  #values .section__para, .section__para, #values .section__para, #pricing .section__para, #testimonials p.section__para {
    text-align: center; font-size: 14px;
  }

  #steps .row, #testimonials .row { flex-direction: column; align-items: center; }

  .values__list { margin: 0 auto; }
  .value:nth-of-type(1){ margin-right: 0; }
  .value { display:flex; flex-direction:column; align-items:center; }
  .values__img--wrapper { width: 100%; }

  /* header video wrapper overflow prevention on tablet/phone */
  .header__video--wrapper { margin-left: 0 !important; margin-right: 0 !important; padding-inline: 16px; }

  .testimonial-card { flex-direction: column; text-align: center; }
  .testimonial-left img { max-width: 100%; }
  .testimonial-right { text-align: center; margin-top: 20px; }

  .pricing-right { align-items: center; text-align: center; }
  .plan-info li { display:flex; text-align:center; flex-wrap:wrap; flex-direction:row; justify-content:space-around; }
  .start-btn { align-self: center; }
}

/* <= 900px */
@media (max-width: 900px) {
  .btn__menu { font-size: 28px; }
  .works__description--wrapper { padding-right: 40px; }
  #testimonials .testimonial-card { gap: 20px; padding: 22px 24px; }
  #testimonials .testimonial-left { width: 220px; }
}

/* <= 1024px — small desktop / large tablet */
@media (max-width: 1024px) {
  .btn__menu { display: block; }
  .nav__links { display: none; }

  h1 { font-size: 40px; }
  header .row { flex-direction: column; align-items: center; }
  .header__description {
    width: 100%; margin: 0 auto; text-align: center;
    display:flex; flex-direction:column; align-items:center;
  }
  .header__description--customers { margin-top: 48px; }
  .header__img--wrapper { width: 100%; max-width: 512px; margin: 48px auto 0; }
  .header__img { max-width: 512px; }
  /* ensure no lateral overflow */
  .header__video--wrapper { margin-left: 0; margin-right: 0; }

  .feature { padding: 32px 8px; margin: 0 auto; }
  .quality__section { margin-right: 0; }

  #values .section__title { font-size: 36px; }
  .section__para, #testimonials .section__para { font-size: 16px; }

  footer { padding: 80px 32px; }
  .values__list { flex-direction: column; max-width: 320px; }
  .value:nth-child(1), .value:nth-child(2) { margin-top: 40px; }
  .plans { flex-direction: column; align-items: center; }
  .plan { margin-right: 0; }
  .testimonials__section { padding-left: 48px; }
  #testimonials .section__title { font-size: 36px; }
  .start__text { max-width: 512px; text-align: center; width: 100%; }
  .start__row { flex-direction: column; }
  .start__btn, .start__btn--2 { padding: 16px 32px; }
  .start__button--wrapper { width: auto; margin-top: 24px; }
}

/* <= 1280px — medium desktop */
@media (max-width: 1280px) {
  #pricing h2 { font-size: 28px; }
  .testimonial-card { max-width: 680px; }
  .pricing-left, .pricing-right { width: 100%; }

  header .row { align-items: flex-end; }
  .header__description--para { font-size: 16px; }
  .header__customer--logos { padding-right: 64px; }
  .header__img--wrapper { display:flex; justify-content:flex-end; }
  .plan__bottom { padding: 32px 64px; max-width: none; }
  .plan__button { max-width: none; }
  .testimonials__section { width: 60%; }
}

/***** MOBILE-ONLY FIXES (≤ 430px) *****/
@media (max-width: 430px) {
  /* 1) HERO heading: nicer line breaks + slightly smaller */
  h1 {
    font-size: 32px;
    line-height: 1.2;
    text-wrap: balance;  /* iOS Safari balances multi-line headings */
    word-break: keep-all;
  }

  /* 2) HERO video: fill red border, remove side margins that cause cropping */
  .header__video--wrapper { padding-inline: 12px; margin: 0; }
  .header__video--container { aspect-ratio: 16 / 9; }
  .header__video { width: 100%; height: 100%; object-fit: cover; }

  /* 3) WORKS: stop step 1 & 3 from getting cut off, allow wrapping */
  #works { padding-inline: 16px; }
  .works__gradient { width: 100%; padding-right: 0; }
  .works__steps { flex-wrap: wrap !important; justify-content: center; gap: 20px; }
  .works__step  { flex: 1 1 260px; max-width: 340px; }
  .steps__img--wrapper { margin-left: auto; margin-right: auto; }

  /* 4) COMPARISON: center the left attribute column in its box */
  .comparison__table td:first-child {
    text-align: center;
    vertical-align: middle;
  }

  /* 5) PRICING (right panel): give headers breathing room by stacking */
  .pricing-right { padding: 24px; }
  .pricing-right .plan-info {
    display: grid;
    grid-template-columns: 1fr;  /* stack Access / Support / Commitment */
    gap: 14px;
    align-items: start;
  }
  .pricing-right .pricing__header { margin-bottom: 6px; letter-spacing: .02em; }
  .pricing-right .feature-value { margin-top: 2px; }

  /* 6) Small quality-of-life tweaks */
  section { padding: 0 16px; }
  .banner { padding: 12px 16px; font-size: 14px; }
}

/* Pair with your JS scroll-lock to avoid rubber-banding while menu is open */
@media (max-width: 430px) {
  body.menu--open { overscroll-behavior: contain; touch-action: none; }
}

/* Comparison table: tighten + wrap on small phones */
@media (max-width: 430px) {
  .comparison__table {
    table-layout: fixed;   /* keep columns contained */
    width: 100%;
    border-spacing: 4px;   /* smaller gaps so it doesn’t overflow */
  }

  /* Remove desktop column width rules on mobile */
  .comparison__table th,
  .comparison__table td {
    width: auto !important;
    padding: 12px 10px;    /* smaller padding = more room */
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;  /* let long words break instead of overflowing */
    word-break: break-word;
    hyphens: auto;
  }

  /* Keep the left column centered inside its box */
  .comparison__table td:first-child {
    text-align: center;
    vertical-align: middle;
  }

  /* Slightly smaller header chips */
  .comparison__table th {
    font-size: 13px;
    padding: 12px 10px;
  }
}