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

/* ── CSS VARIABLES ── */
:root {
  --acid:        #2abdc7;
  --acid-dark:   #165b8e;
  --body-text:#658183;
  --menu-text:#5e7477;
  --pink:        #e8215a;
  --dark:        #0a0a0a;
  --dark2:       #111111;
  --dark3:       #181818;
  --gray:        #2a2a2a;
  --muted:       #888888;
  --white:       #ffffff;

  --font-display: "Inter", sans-serif;
  --font-cond:    "Inter", sans-serif;
  --font-body:    "Inter", sans-serif;
  --radius:     12px;
  --radius-sm:  8px;
}

/* ── RESET & BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  overflow-x: hidden;
}

p{font-size: 1rem !important;}
  /* CURSOR */
  #cursor {
    position: fixed; width: 12px; height: 12px;
    background: var(--acid); border-radius: 50%;
    pointer-events: none; z-index: 9999;
    transition: transform 0.15s ease, opacity 0.2s;
    mix-blend-mode: difference;
  }
  #cursor-ring {
    position: fixed; width: 40px; height: 40px;
    border: 1px solid var(--acid-dark); border-radius: 50%;
    pointer-events: none; z-index: 9998;
    transition: transform 0.35s ease, width 0.2s, height 0.2s, border-color 0.2s;
  }
  body:hover #cursor { opacity: 1; }
.nav-link:hover,
.nav-link.active { color: var(--acid) !important; }

.navbar-toggler {
  border: 1px solid rgba(200, 240, 0, 0.3);
}
/* .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28200%2C240%2C0%2C0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
} */


.nav-icon {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.2s;
}
.nav-icon:hover { color: var(--acid); }


.stat-item { margin-bottom: 12px; }
.stat-card{
  position:relative;
  padding:20px;
  border-radius:14px;
  background:rgba(20,25,28,0.8);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  overflow:hidden;
}

/* Glow border line */
.stat-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  border-radius:4px;
}

/* Green version */
.stat-card.green::before{
  background:linear-gradient(to bottom,#caff00,#6cff00);
}

/* Pink version */
.stat-card.pink::before{
  background:linear-gradient(to bottom,#ff4d8d,#ff7aa5);
}

/* Text */
.stat-card .stat-number{
  font-size:26px;
  font-weight:800;
  margin:0;
}

.stat-card.green .stat-number{
  color:#caff00;
}

.stat-card.pink .stat-number{
  color:#ff4d8d;
}

.stat-card .stat-label{
  font-size:11px;
  letter-spacing:1px;
  color:#aaa;
  margin-top:5px;
}

/* Hover Glow Effect */
.stat-card:hover{
  transform:translateY(-5px);
  transition:0.3s;
}

.stat-card.green:hover{
  box-shadow:0 0 20px rgba(202,255,0,0.4);
}

.stat-card.pink:hover{
  box-shadow:0 0 20px rgba(255,77,141,0.4);
}
.stat-number {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: 1px;
}
.stat-number.acid { color: var(--acid); }
.stat-number.pink { color: var(--pink); }
.stat-label {
  font-family: var(--font-cond);
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

/* ════════════════════════════════════
   BUTTONS
   ════════════════════════════════════ */
.btn-primary-acid {
  background: var(--acid);
  color: var(--dark);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  padding: 14px 28px;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary-acid:hover {
  background: var(--acid-dark);
  color: var(--dark);
  transform: translateY(-2px);
}
.btn-sm-acid {
  font-size: 0.72rem;
  padding: 11px 22px;
}

.btn-outline-acid {
  background: transparent;
  color: var(--white);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 13px 28px;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.btn-outline-acid:hover {
  border-color: var(--acid);
  color: var(--acid);
  transform: translateY(-2px);
}

/* ════════════════════════════════════
   WHY SECTION
   ════════════════════════════════════ */
.about_us{
   background: linear-gradient(to right, #10a0ae 0%,#16c7d1 100%); position: relative; overflow: hidden;
}
.about_us:before{content:""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;background-image: url('../../images/whycusbg.png'); background-repeat: no-repeat; background-size: contain;opacity: .6;}

.about_us .section-title .highlight{
    color: var(--dark);
}

.why-section {
  background: linear-gradient(135deg, #2c2e26 0%, #282826 50%, #000000 100%);
  padding: 100px 0;
}

.why-section .top_header .section-eyebrow{
    text-transform: none;
    line-height: 1.8;
    font-weight: 300;
    letter-spacing: 1px;
    width: 55%;
    margin: auto;
}


.about_us .why-desc{
  color: rgba(255, 255, 255, 0.86);    line-height: 1.7;
}

.about_us .section-eyebrow{
    color: var(--white);
}

.section-eyebrow {
  font-family: var(--font-cond);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}

.why-us{
    background: linear-gradient(135deg, #2c2e26 0%, #282826 50%, #000000 100%);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3rem);
  letter-spacing: 2px;
  line-height: 1;color: var(--white);
}
.section-title .highlight { color: var(--acid); }

.why-desc {
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.8;
}

/* Feature Cards */
.feature-card {
  padding: 32px 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
  height: 100%;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--acid);
  transform: scaleX(0);
  transition: transform 0.3s;
}
.feature-card:hover {
  border-color: rgba(200, 240, 0, 0.2);
  background: rgba(200, 240, 0, 0.03);
  transform: translateY(-4px);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-card .feature-icon{height:30px;}

.feature-card .feature-text{
    margin-bottom: 0;
}

.why_imge{
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    overflow: hidden;
}


.feature-icon {
  font-size: 1.6rem;
  margin-bottom: 16px;
  display: block;
}
.feature-icon.acid   { color: var(--acid); }
.feature-icon.pink   { color: var(--pink); }
.feature-icon.blue   { color: #5b9cf6; }
.feature-icon.purple { color: #a78bfa; }

.feature-title {
  font-family: var(--font-cond);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.feature-text {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
  font-weight: 300;
}

/* ════════════════════════════════════
   BESTSELLERS
   ════════════════════════════════════ */
.bestsellers-section {
  background: var(--dark);
  padding: 100px 0;
}

.section-title-center {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  text-align: center;
  letter-spacing: 3px;
  margin-bottom: 60px;
}
.section-title-center .highlight {
  color: var(--acid);
  position: relative;
  display: inline-block;
}
.section-title-center .highlight::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0; right: 0;
  height: 3px;
  background: var(--acid);
}

/* Main Book */
.book-main {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  height: 520px;
}
.book-main img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  filter: brightness(0.6);
  transition: filter 0.4s, transform 0.4s;
}
.book-main:hover img {
  filter: brightness(0.75);
  transform: scale(1.02);
}
.book-main-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, transparent 100%);
}

.badge-bestseller {
  background: var(--pink);
  color: white;
  font-family: var(--font-cond);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 10px;
  display: inline-block;
}

.book-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 8px;
}

.book-subtitle {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 16px;
}

/* Side Book */
.book-side {
  background: var(--dark3);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s, transform 0.3s;
  cursor: pointer;
}
.book-side:hover {
  border-color: rgba(200, 240, 0, 0.25);
  transform: translateY(-3px);
}

.book-side-large {
  display: flex;
  align-items: center;
  height: 260px;
}
.book-side-large img {
  width: 45%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.75);
  transition: filter 0.3s;
}
.book-side-large:hover img { filter: brightness(0.9); }

.book-side-content { padding: 24px; flex: 1; }

.book-side-name {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--acid);
  margin-bottom: 6px;
}

.book-side-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Small Books Grid */
.book-small-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  height: 248px;
}

.book-small {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color 0.3s, transform 0.3s;
  cursor: pointer;
  background: var(--dark3);
}
.book-small:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 240, 0, 0.25);
}

.book-small-acid {
  background: var(--acid) !important;
  border-color: var(--acid) !important;
}

.book-small-icon {
  font-size: 1.1rem;
  color: var(--pink);
  margin-bottom: 12px;
}

.book-small-icon-dark {
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 12px;
  display: block;
}

.book-small-title {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--white);
}
.book-small-title-dark { color: var(--dark) !important; }

.book-small-price {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--white);
}

/* ════════════════════════════════════
   CTA SECTION
   ════════════════════════════════════ */
.cta-section {
  background: var(--acid);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: 'KINETIC';
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 16rem);
  color: rgba(0, 0, 0, 0.06);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 10px;
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: 2px;
  color: var(--dark);
  line-height: 0.95;
  margin-bottom: 16px;
}

.cta-desc {
  font-size: 0.9rem;
  color: rgba(10, 10, 10, 0.65);
  font-weight: 300;
  line-height: 1.7;
  max-width: 300px;
}

.email-input {
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  padding: 16px 20px;
  font-family: var(--font-cond);
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  color: var(--dark);
  width: 100%;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.2s;
}
.email-input::placeholder { color: rgba(0, 0, 0, 0.45); }
.email-input:focus { border-color: var(--dark); }
.email-input.error { border-color: var(--pink); }

.btn-dark-sub {
  width: 100%;
  background: var(--dark);
  color: var(--white);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  padding: 16px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-dark-sub:hover { background: #1a1a1a; }
.btn-dark-sub.success { background: #1a3300; }

.cta-note {
  font-size: 0.7rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-cond);
}

/* ════════════════════════════════════
   FOOTER
   ════════════════════════════════════ */
footer {
  background: #1f2937 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 28px 0 0;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 3px;
  color: var(--white);
}

.footer-links a {
  font-family: var(--font-cond);
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  margin-left: 20px;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--acid); }

.footer-copy {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 1px;
}

.footer-social { gap: 12px; }
.footer-social a {
  color: var(--muted);
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-social a:hover { color: var(--acid); }

/* ════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up   { animation: fadeUp 0.8s ease both; }
.fade-up-1 { animation-delay: 0.1s; }
.fade-up-2 { animation-delay: 0.2s; }
.fade-up-3 { animation-delay: 0.3s; }

/* Scroll reveal initial state */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════ */
@media (max-width: 1023px) {
    header#pq-header .pq-bottom-header .navbar-toggler {
    font-size: 20px;
    line-height: normal;
    float: right;
    color: var(--white-color);
    box-shadow: none;
    padding: 12px 18px;
    outline: none;
    margin: 0px 0px 0px 15px;
    background: transparent !important;border: 0 !important;
}
header#pq-header .pq-bottom-header .navbar .navbar-nav li a {
    color: var(--dark) !important;
    font-family: var(--title-fonts);
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 22px;
    font-weight: 500;
}
header#pq-header .pq-bottom-header .navbar .navbar-nav li.current-menu-ancestor>a {
    background: var(--acid-dark) !important;
    color: var(--dark-color);
}
}
/* Tablet / Small Desktop */
@media (max-width: 991.98px) {
  .hero-img-wrap {
    width: 100%;
    opacity: 0.3;
  }
  .hero-img-wrap::before {
    background: linear-gradient(0deg, var(--dark) 0%, transparent 80%);
  }
  .hero-stats {
    right: 50%;
    transform: translateX(50%);
    bottom: 40px;
    text-align: center;
  }
  .hero-content { text-align: center; }
  .hero-desc { margin: 0 auto 36px; }
  .hero-badge {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
  }
  .d-flex.flex-wrap.gap-3 { justify-content: center; }
}

/* Tablet */
@media (max-width: 767.98px) {
  .hero { min-height: 90vh;flex-direction: column; }
.pq-marquee ul {
    float: left;
    width: 68%;
}
.marquee-content-items{height: auto;}
.about-inner {
    display: grid;
    grid-template-columns: 1fr !important;
}
.cta-banner {
    padding: 100px 30px !important;
   
}
header#pq-header .pq-bottom-header .navbar{flex-wrap: nowrap;}
  .why-section,
  .bestsellers-section { padding: 70px 0; }

  .book-main { height: 380px; }

  .book-side-large {
    flex-direction: column;
    height: auto;
  }
  .book-side-large img {
    width: 100%;
    height: 180px;
  }

  .book-small-grid { height: auto; }
  .book-small { min-height: 140px; }

  .footer-links { flex-wrap: wrap; gap: 8px; }
  .footer-links a { margin-left: 0; }

  .cta-desc { max-width: 100%; }
}

/* Mobile */
@media (max-width: 575.98px) {
  .hero-stats {
    position: static;
    transform: none;
    text-align: left;
    margin-top: 40px;
    display: flex;
    gap: 40px;
  }
  .hero { padding-bottom: 60px; }

  .section-title-center { margin-bottom: 40px; }

  .book-small-grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  .book-small { min-height: 120px; }

  .cta-section { padding: 60px 0; }
}




/* about section */
.about-section {
  background: var(--dark);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;

  width: 100%;

  border: 0.5px solid rgba(255, 255, 255, 0.07);
}
.about-inner{  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  }
/* Ambient red glow behind right side */
.about-bg-glow {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 60%;
  background: radial-gradient(
    ellipse 60% 80% at 75% 50%,
    rgba(220, 30, 60, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* ════════════════════════════════════
   LEFT PANEL
   ════════════════════════════════════ */
.about-left {
    padding: 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* Eyebrow */
.about-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--acid);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.6s 0.1s ease forwards;
}
.about-eyebrow-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--acid);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Title */
.about-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 3rem);
  line-height: 0.97;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.6s 0.2s ease forwards;
}
.about-title-accent { color: var(--acid); }

/* Description */
.about-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  max-width: 496px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.6s 0.3s ease forwards;
}

/* ── FEATURE LIST ── */
.about-features {
    margin-bottom: 36px;
    opacity: 0;
    /* padding-left: 0; */
    transform: translateY(16px);
   animation: fadeUp 0.6s 0.4s ease forwards;
}

.about-feat {
  display: flex;
  /* align-items: center; */
  gap: 14px;
  padding: 13px 18px;
  background: var(--muted-dim);
  border: 0.5px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.22s, border-color 0.22s, transform 0.18s;
  outline: none;
  flex-direction: column;
  height: 100%;
}

.about-feat p{
    margin-bottom: 0;
}

/* Red left-bar reveal on hover/focus */
.about-feat::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--acid);
  border-radius: 0 2px 2px 0;
  transform: scaleY(0);
  transition: transform 0.22s ease;
}

.about-feat:hover,
.about-feat:focus {
  background: rgba(122, 220, 30, 0.08);
  border-color: rgba(112, 220, 30, 0.28);
  /* transform: translateX(5px); */
}
.about-feat:hover::before,
.about-feat:focus::before { transform: scaleY(1); }

/* Icon wrapper */
.about-feat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(106, 220, 30, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--acid);
  transition: background 0.22s;
}
.about-feat-icon svg { width: 17px; height: 17px; }
.about-feat:hover .about-feat-icon { background: rgba(220, 30, 60, 0.25); }

.about-feat-text {
  font-family: var(--font-cond);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.82);
  flex: 1;
}

.about-feat-arrow {
  font-size: 18px;
  color: rgba(220, 30, 60, 0.5);
  transition: color 0.2s, transform 0.2s;
  line-height: 1;
}
.about-feat:hover .about-feat-arrow {
  color: var(--acid);
  transform: translateX(3px);
}

/* CTA Button */
.about-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--acid);
  color: var(--white);
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 6px;
  align-self: flex-start;
  transition: background 0.2s, transform 0.15s;
  opacity: 0;
  animation: fadeUp 0.6s 0.5s ease forwards;
}
.about-cta-btn:hover {
  background: var(--acid-dark);
  transform: translateY(-2px);
}
.about-cta-btn:active { transform: translateY(0); }

/* ════════════════════════════════════
   RIGHT PANEL (IMAGE)
   ════════════════════════════════════ */
.about-right {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(0.62) contrast(1.08) saturate(0.85);
  transition: transform 0.7s ease, filter 0.7s ease;
}
.about-right:hover .about-img {
  filter: brightness(0.72) contrast(1.12) saturate(1.0);
  transform: scale(1.04);
}

/* Left fade overlay */
.about-img-overlay-left {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 130px;
  background: linear-gradient(90deg, var(--dark) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Bottom fade overlay */
.about-img-overlay-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(13,13,13,0.7) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Badge */
.about-badge {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 3;
  background: var(--acid);
  color: var(--white);
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 4px;
  animation: fadeUp 0.6s 0.6s ease both;
}

/* ── STATS ── */
.about-stats {
  position: absolute;
  bottom: 26px;
  right: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-stat {
  background: rgba(13, 13, 13, 0.82);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 10px;
  padding: 12px 18px;
  min-width: 136px;
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.6s ease both;
}
.about-stat:first-child { animation-delay: 0.7s; }
.about-stat:last-child  { animation-delay: 0.85s; }

/* Red left accent */
.about-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--acid);
  border-radius: 0 2px 2px 0;
}

.about-stat-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--white);
  line-height: 1;
  letter-spacing: 1px;
}

.about-stat-lbl {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 3px;
}

/* ════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════ */
@media (max-width: 900px) {
  .about-section {
    grid-template-columns: 1fr;
  }
  .about-right {
    height: 320px;
    order: -1;
  }
  .about-img-overlay-left {
    background: linear-gradient(0deg, var(--dark) 0%, transparent 50%);
    width: 100%;
    height: 80px;
    top: auto;
    bottom: 0;
  }
  .about-left {
    padding: 40px 32px 48px;
  }
  .about-stats {
    flex-direction: row;
    bottom: 18px;
    right: 18px;
    gap: 8px;
  }
  .about-stat { min-width: 110px; }
}

@media (max-width: 560px) {
  .about-left { padding: 32px 20px 40px; }
  .about-right { height: 260px; }
  .about-title { font-size: 2.4rem; }
  .about-cta-btn { width: 100%; justify-content: center; }
  .about-stats { flex-direction: column; }
  .about-stat { min-width: 110px; padding: 10px 14px; }
  .about-stat-num { font-size: 1.5rem; }
}

.product-card {
  background: var(--graphite);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.402);
  transition: transform 0.3s, border-color 0.3s;
  cursor: none;
  position: relative;
  margin-bottom: 10px;
  display: flex;
  }
  .product-card:hover { transform: translateY(-6px); border-color: rgba(232,255,0,0.2); }
  .product-badge {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    background: var(--accent2); color: var(--white);
    font-family: 'Syne', sans-serif; font-size: 10px;
    font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 2px;
  }
  .product-badge.new-badge { background: var(--accent); color: var(--black); }
 .product-img-area {
        width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    object-fit: contain;
    /* background: var(--white) !important; */
    padding: 20px;
}
  .prod-bg-1 { background: radial-gradient(circle at 50% 60%, #1a2a0f 0%, #0d0d0d 100%); }
  .prod-bg-2 { background: radial-gradient(circle at 50% 60%, #2a1a0f 0%, #0d0d0d 100%); }
  .prod-bg-3 { background: radial-gradient(circle at 50% 60%, #0f1a2a 0%, #0d0d0d 100%); }
  .prod-bg-4 { background: radial-gradient(circle at 50% 60%, #1a0f2a 0%, #0d0d0d 100%); }
  .prod-emoji { font-size: 72px; }
  .product-body { 
      padding: 20px; 
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  .product-cat {
    font-family: 'Syne', sans-serif; font-size: 10px;
    letter-spacing: 3px; text-transform: uppercase; color: var(--accent);
    margin-bottom: 8px;
  }
  .product-name {
    font-family: 'Syne', sans-serif; font-weight: 700;
    font-size: 16px; color: var(--white); margin-bottom: 6px; line-height: 1.3;
  }
  .product-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
  .product-footer { 
      /* display: flex;  */
      align-items: center; 
      justify-content: space-between; 
    }
  .product-price 
     {font-size: 28px; color: var(--dark); font-weight: 700;
     }

  .product-price span { font-size: 14px; font-family: 'DM Sans',sans-serif; color: var(--muted);  margin-left: 6px; }
  .add-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--acid); color: var(--black);
    border: none; font-size: 22px; cursor: none;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .add-btn:hover { transform: scale(1.1); box-shadow: 0 4px 16px rgba(232,255,0,0.4);color: var(--dark) !important; }
 /* CTA BANNER */
  .cta-banner {
    padding: 100px 60px;
    background: linear-gradient(135deg, var(--acid) 0%, var(--acid-dark) 100%);
    text-align: center; position: relative; overflow: hidden;
  }
  .cta-banner::before {
    content: 'EXPLORE'; position: absolute;
    font-size: 220px; color: rgba(0,0,0,0.05);
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    white-space: nowrap; pointer-events: none;
    letter-spacing: 20px;
  }
  .cta-banner h2 {
    font-size: clamp(48px, 7vw, 96px);
    color: var(--black); line-height: 0.95;
    letter-spacing: 2px; margin-bottom: 20px;
    position: relative;
  }
  .cta-banner p { font-size: 18px; color: rgba(0,0,0,0.6); margin-bottom: 40px; position: relative; }
  .btn-dark {
    background: var(--black); color: var(--accent);
    padding: 18px 44px; border-radius: 3px; font-weight: 700;
    font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none; display: inline-block; 
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
  }
  .btn-dark:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }


/* hero updated */
.hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 78% 28%, rgba(32, 214, 226, .12), transparent 26%), linear-gradient(90deg, #ffffff 0%, #f9fdfe 46%, #eefbfc 100%);
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 70%, #fff 100%);
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 40px;
    align-items: center;
}
.eyebrow {
    margin: 0 0 18px;
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acid);
}
.eyebrow.center {
    text-align: center;
}
.hero-copy h1 {
    margin: 0;
    max-width: 560px;
    font-size: 64px;
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -.045em;
    color: #11343a;
}
.hero-text {
    max-width: 560px;
    margin: 24px 0 28px;
    font-size: 16px;
    line-height: 1.9;
    color: #658183;
}
.hero-cta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 15px 24px;
    font-weight: 700;
    font-size: 14px;
    transition: .25s ease; text-transform: capitalize !important;
}
.btn-primary {
    background: linear-gradient(135deg, var(--acid-dark), #1093a2);
    color: #fff;
    box-shadow: 0 15px 28px rgba(16, 168, 182, .24);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 30px rgba(16, 168, 182, .28);
}
.btn-secondary {
    border: 1px solid rgba(16, 168, 182, .25);
    color: #0f7c86;
    background: #fff;
}
.btn-secondary:hover {
    background: #f1fbfc; color: #0f7c86;
}
.btn.full {
    width: 100%}
.hero-badges {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.hero-badges li {
    padding: 11px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(17, 52, 58, .08);
    font-size: 13px;
    font-weight: 600;
    color: #547174;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .04);
}
.hero-visual {
    position: relative;
    height: 100%;
    /* min-height: 620px; */
    display: grid;
    place-items: center;
}
.hero-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, #d9fbff 0%, rgba(217, 251, 255, .55) 40%, transparent 70%);
    filter: blur(10px);
}
.hero-dots {
    position: absolute;
    right: 18px;
    top: 0;
    width: 180px;
    height: 180px;
    background-image: radial-gradient(#8adbe3 1.4px, transparent 1.4px);
    background-size: 14px 14px;
    opacity: .8;
}
.android {
    position: relative;
    width: 100%;
    height: 520px;
    filter: drop-shadow(0 30px 50px rgba(20, 57, 62, .12));
}
.android-head {
    position: absolute;
    left: 92px;
    top: 8px;
    width: 148px;
    height: 166px;
    border-radius: 70px 70px 58px 58px;
    background: linear-gradient(180deg, #f8fcfd 0%, #dfe7ea 62%, #cfd9de 100%);
    border: 1px solid rgba(70, 107, 114, .18);
}
.android-head::before, .android-head::after {
    content: '';
    position: absolute;
    top: 69px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #2baebb;
    box-shadow: 0 0 0 8px rgba(43, 174, 187, .08);
}
.android-head::before {
    left: 43px;
}
.android-head::after {
    right: 43px;
}
.android-neck {
    position: absolute;
    left: 136px;
    top: 165px;
    width: 60px;
    height: 50px;
    border-radius: 18px;
    background: linear-gradient(180deg, #d6dfe3, #bac7cc);
}
.android-body {
    position: absolute;
    left: 78px;
    top: 186px;
    width: 170px;
    height: 230px;
    border-radius: 46px 46px 60px 60px;
    background: linear-gradient(180deg, #fbfdfd 0%, #d9e3e8 62%, #c9d4d9 100%);
    border: 1px solid rgba(70, 107, 114, .18);
}
.android-body::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 28px;
    transform: translateX(-50%);
    width: 92px;
    height: 140px;
    border-radius: 40px;
    background: linear-gradient(180deg, #19bcc9, #0f98a7);
    opacity: .15;
}
.android-arm {
    position: absolute;
    top: 208px;
    width: 84px;
    height: 200px;
    border-radius: 42px;
    background: linear-gradient(180deg, #f8fbfc 0%, #d7e0e4 55%, #c3d0d5 100%);
    border: 1px solid rgba(70, 107, 114, .18);
}
.android-arm.left {
    left: 28px;
    transform: rotate(18deg);
}
.android-arm.right {
    right: 28px;
    transform: rotate(-18deg);
}
.android-arm::before {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: -18px;
    height: 66px;
    border-radius: 28px;
    background: linear-gradient(180deg, #ebf3f5, #cbd7dc);
}
.android-core {
    position: absolute;
    left: 124px;
    top: 246px;
    width: 78px;
    height: 78px;
    border-radius: 22px;
    background: linear-gradient(180deg, var(--acid), #0d90a0);
    box-shadow: 0 10px 30px rgba(16, 168, 182, .25);
}
.benefit-strip {
    margin-top: -8px; padding: 0;margin-bottom: 100px;position: relative;
}
.benefit-strip:before{content: ""; position: absolute; left:0;top: 0; width: 50%;height: 100%; background-color: var(--acid);}
.benefit-strip:after{content: ""; position: absolute; right:0;top: 20px; width: 20%;height: 100%; background-color: var(--acid-dark);}
.benefit-grid {
    display: grid;position: relative;
    grid-template-columns: repeat(4, 1fr);
}

.benefit-card {
    background: var(--acid);
    color: #fff;
    padding: 28px 24px 24px;
    min-height: 170px;
    border-right: 1px solid rgba(255, 255, 255, .15);position: relative;
}
.benefit-card:nth-child(3){border-top-right-radius: 10px;}
.benefit-card h3 {
    margin: 14px 0 10px; text-transform: uppercase;
    font-size: 16px;color: var(--white);
    line-height: 1.2;position: relative;z-index: 1;
}
.benefit-card p {
    margin: 0;
    font-size: 14px !important;
    line-height: 1.7;
    color: rgba(255, 255, 255, .86);position: relative;z-index: 1;
}
.benefit-card svg, .muted-link svg, .support-link svg{stroke: #9cf6ff;width: 14px; height: 14px;fill: #9cf6ff;}
.benefit-card.featured {
    background: var(--acid-dark);position: relative; right: 0; top: 20px;
}
.benefit-card.featured:before {
    content: "";
    position: absolute;
    height: 1.3rem;
    width: 1.5rem;
    left: -24px;
    bottom: 0;
    background-color: inherit;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    clip-path: polygon(0 0, 83% 0, 0 96%);
    transform: scaleX(-1);
}
.benefit-card.featured a {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    color: #9cf6ff;position: relative;z-index: 1;
}
.benefit-icon {
    font-size: 28px;position: relative;z-index: 1;
}
.benefit-icon img{height: 40px;}
.trusted {
    padding: 44px 0 52px;
    background: #fff;
}
.trusted-title {
    text-align: center;
    color: #70888b;
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 24px;
}
.logo-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    align-items: center;
    text-align: center;
    color: #2d4447;
    font-size: 28px;
    font-weight: 800;
    opacity: .78;
}
.section-heading {
    padding: 0;
}
.section-heading h2 {
    text-align: center;
    font-size: 42px;
    line-height: 1.15;
    max-width: 740px;
    margin: 0 auto;
    color: #12373c;
    letter-spacing: -.03em;
}
.section-text {
    max-width: 760px;
    margin: 18px auto 0;
    font-size: 16px;
    line-height: 1.8;
    color: #6a8588;
}
.section-text.center {
    text-align: center;
}
.needs {
    padding: 18px 0 24px;margin-bottom: 100px;position: relative;overflow: hidden;
}
.needs:before{content: "";    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, #d9fbff 0%, rgba(217, 251, 255, .55) 40%, transparent 70%);
    filter: blur(10px);left: 0; top: 50%; transform: translateY(-50%);}
.needs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 36px;
}
.need-card {
    border-radius: 18px;
    padding: 28px;
    background: #0f3f45;
    color: #fff;
    box-shadow: 0 18px 34px rgba(16, 53, 58, .12);
}
.need-card.accent {
    background: linear-gradient(180deg, #16c7d1, #10a0ae);
}
.need-card.active {
    transform: translateY(-8px);
}
.need-icon {
    font-size: 26px;
}
.need-card h3 {
    margin: 18px 0 12px;
    font-size: 23px;
}
.need-card p {
    margin: 0 0 24px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .88);
}
.need-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
}
.devices {
    padding: 100px 0;
}



/* ── Grid ── */
    .grid-offer {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      max-width: 64rem;
      margin: 0 auto;
      text-align: left;
    }
    /* ── Card ── */
   .grid-offer .card {
      background-color:#1f2937; /* gray-800 */
      padding: 40px;
      position: relative;
      overflow: hidden; border-radius: 18px;
    }
  .grid-offer  .card::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transition: clip-path 0.6s, background-color 0.6s;
      z-index: 0;
      background-color: var(--acid-dark); /* indigo-600 */
    }
  .grid-offer  .card:hover {
      box-shadow: 0.063rem 0.063rem 1.25rem 0.375rem rgb(0 0 0 / 53%);
    }
  .grid-offer  .card:hover .muted-link{color: var(--white);font-weight: 600;}
  .grid-offer  .card:hover .muted-link:hover{color: var(--white);}
   .grid-offer  .card:hover .muted-link svg{stroke: var(--white);fill: var(--white);}
    /* card ::before positions */
   .grid-offer .card:nth-child(1)::before {
      bottom: 0; right: 0; top: auto; left: auto;
      clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
    }
  .grid-offer  .card:nth-child(2)::before {
      bottom: 0; left: 0; top: auto; right: auto;
      clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%);
    }
 .grid-offer   .card:nth-child(3)::before {
      top: 0; right: 0; bottom: auto; left: auto;
      clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%);
    }
 .grid-offer   .card:nth-child(4)::before {
      top: 0; left: 0; bottom: auto; right: auto;
      clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%);
    }

    /* hover expands the indigo blob */
  .grid-offer  .card:hover::before {
      clip-path: circle(110vw at 100% 100%);
    }

    /* ── Circle (image blob) ── */
  .grid-offer  .circle {
      /* hidden on small screens — shown on desktop only */
      display: none;
    }

  .grid-offer  .card:nth-child(1) .circle {
      background: url("../../images/wc1.jpg")
        no-repeat 145% 50% / contain;
      bottom: 0; right: 0;
      clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
    }
  .grid-offer  .card:nth-child(2) .circle {
      background: url("../../images/wc2.jpg")
        no-repeat -12% 50% / contain;
      bottom: 0; left: 0;
      clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%);
    }
 .grid-offer   .card:nth-child(3) .circle {
      background: url("../../images/wc3.jpg")
        no-repeat 338% 50% / contain;
      top: 0; right: 0;
      clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%);
    }
  .grid-offer  .card:nth-child(4) .circle {
      background: url("../../images/wc4.png")
        no-repeat 1247% 50% / cover;
      top: 0; left: 0;
      clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%);
    }

    /* ── Card content ── */
  .grid-offer  .card-content {
      position: relative;
      z-index: 1;
    }

  .grid-offer  .card h2 {
      font-optical-sizing: auto; line-height: 33px;
      font-weight: 700;
      font-style: normal;
      color: var(--white);
      margin-bottom: 16px;
      font-size: 1.5rem; /* text-2xl */
      text-transform: capitalize;
    }

  .grid-offer  .card p {
      color: #9ca3af; /* gray-400 */
      transition: color 0.8s;font-size: 14px !important; margin-bottom: 0;
    }

  .grid-offer  .card:hover p {
      color: var(--white);
    }


.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin-top: 42px;
}
.price-card {
    background: var(--white);
    border-radius: 18px;width: 100%;
    padding: 24px;
    box-shadow: 0 18px 35px rgba(12, 54, 58, .08);
    border: 1px solid rgba(17, 52, 58, .06); text-align: left !important;
}
.price-card.featured {
    transform: translateY(-10px);
}
.product-box {
    width: 136px;
    height: 166px;
    border-radius: 16px;
    margin: 0 auto 24px;
    position: relative;
    transform: rotate(-18deg);
    display: grid;
    place-items: end center;
    padding-bottom: 18px;
    color: var(--white);
    font-weight: 800;
    letter-spacing: .12em;
    font-size: 12px;
    box-shadow: 0 22px 28px rgba(16, 53, 58, .16);
}
.product-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .02));
    mix-blend-mode: screen;
}
.product-one {
    background: linear-gradient(180deg, #79dde2, #0fa8b6);
}
.product-two {
    background: linear-gradient(180deg, #70e0db, #1499bf);
}
.product-three {
    background: linear-gradient(180deg, #68cfc8, #0f7287);
}
.price-card h3 {
    margin: 0 ;
    font-size: 22px;
    color: #11343a;
}
.price-card p {
    margin: 0 0 18px;
    color: #6b8589;
    line-height: 1.8;
    font-size: 14px;
}
.price-card ul {
    padding: 0;
    margin: 0 0 24px;
    list-style: none;
}
.price-card li {
    position: relative;
    padding-left: 28px;
    margin: 12px 0;
    color: #28484d;
    font-size: 14px;
    line-height: 1.6;
}
.price-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #18c66c;
    font-weight: 800;
}
.muted-link {
    display: block;
    text-align: left;
    margin-top: 14px;
    color: #9cf6ff;
    font-size: 14px;
}
.support {
    padding: 38px 0 100px;position: relative;overflow: hidden;
}
.support:before{content: "";    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, #d9fbff 0%, rgba(217, 251, 255, .55) 40%, transparent 70%);
    filter: blur(10px);left: 0; top: 50%; transform: translateY(-50%);}
.support-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 30px;
    align-items: center;
}
.support-copy h2 {
    margin: 0 0 14px;
    font-size: 42px;
    color: #12373c;;
}
.support-copy p {
    margin: 0 0 20px;
    line-height: 1.9;
    color: #6a8588;
}
.support-link {
    color: #0ea4b1;
    font-weight: 700;
}
.support-panel {
    background:#1f2937;
    border-radius: 18px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    box-shadow: 0 25px 42px rgba(12, 54, 58, .16);
}
.support-tile {
    border-radius: 16px;
    padding: 24px;
    min-height: 178px;
    background: rgba(255, 255, 255, .04);
    color: #12373c;;
}
.support-tile.active {
    background: linear-gradient(180deg, var(--acid), #0fa5b5);
}
.support-tile h3 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.18;color: var(--white);
}
.support-tile p {
    margin: 0;
    line-height: 1.8;
    color: rgba(255, 255, 255, .86);
}
.support-tile a {
    display: inline-block;
    margin-top: 16px;
    color: #d7feff;
    font-weight: 700;
    font-size: 14px;
}
.bottom-band {
    background: linear-gradient(135deg, var(--acid) 0%, var(--acid-dark) 100%);
    padding: 22px 0;
}
.bottom-band img{height: 40px;}
.band-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    text-align: center;
    color: #fff;
}
.band-grid article {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 700;
}
.band-grid span {
    font-size: 24px;
}
    /* ── Responsive: sm (≥640px) ── */
    @media screen and (min-width: 640px) {
      .grid-offer {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ── Responsive: md (≥768px) ── */
    @media screen and (min-width: 768px) {
    .grid-offer  .services-title {
        font-size: 3rem; /* text-5xl */
      }
    }

    /* ── Responsive: lg / 1000px — show image circles ── */
    @media screen and (min-width: 62.5rem) {
    .grid-offer  .circle {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 0;
      }

      /* push text away from image corners */
     .grid-offer .card:nth-child(1) .card-content { padding-right: 208px; } /* lg:pr-52 */
     .grid-offer .card:nth-child(2) .card-content { padding-left: 192px; }  /* lg:pl-48 */
     .grid-offer .card:nth-child(3) .card-content { padding-right: 176px; } /* lg:pr-44 */
     .grid-offer .card:nth-child(4) .card-content { padding-left: 192px; }  /* lg:pl-48 */
    }

    /* ── Responsive: xl (≥1280px) ── */
    @media screen and (min-width: 1280px) {
    
    .grid-offer  .card h2 {
        font-size: 22px; /* text-3xl */
      }
    }

    @media (max-width:1024px) {
    .hero-grid, .detail-grid, .support-grid, .footer-top {
    grid-template-columns: 1fr;
}
.hero-copy {
    text-align: center;
}
.hero-copy h1, .hero-text {
    max-width: none;
}
.hero-cta-row, .hero-badges {
    justify-content: center;
}

.benefit-grid, .needs-grid, .pricing-grid, .band-grid, .logo-row, .footer-links {
    grid-template-columns: repeat(2, 1fr);
}
.support-copy {
    text-align: center;
}
.checklist.two-col {
    columns: 1;
}
.benefit-card:nth-child(3) {
    border-top-right-radius: 0;
}
.benefit-card.featured:before{display: none;}
.benefit-strip:before,.benefit-strip:after{width: 100%;}
header .navbar-brand{order: 1;}
header#pq-header.pq-header-style-1 .pq-bottom-header .pq-header-info-box{order: 2;}
header#pq-header.pq-header-style-1 .pq-bottom-header .navbar-toggler{order: 3;}
header#pq-header .pq-bottom-header .navbar .navbar-collapse{order: 4;}
header#pq-header .pq-bottom-header .navbar-toggler{padding: 0 !important;}
}
@media (max-width:767px) {
  .hero-badges li {
    padding: 6px 12px;}
.hero-grid {
    min-height: auto;
    padding: 46px 0 28px;
}
.hero-copy h1 {
    font-size: 25px;
}
.hero-text, .section-text, .support-copy p {
    font-size: 15px;    line-height: 27px;
}

.android {
    transform: scale(.84);height: auto;
}
.benefit-grid, .needs-grid, .pricing-grid, .logo-row, .detail-cards, .support-panel, .band-grid, .footer-links {
    grid-template-columns: 1fr;
}
.benefit-card {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .14);z-index: 1; border-radius: 0;
}
.benefit-card:nth-child(3) {
    border-top-right-radius: 0;
}
.benefit-card.featured:before{display: none;}
.benefit-strip:before,.benefit-strip:after{width: 100%;}
.section-heading h2, .support-copy h2 {
    font-size: 32px;
}
.mini-top h3 {
    font-size: 22px;
}
.footer-cta, .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
}
.footer-btn {
    width: 100%;
    justify-content: center;
}
.menu-footer-links-container ul.menu-footer-links, .widget ul{flex-direction: column;}
.contact .card-icon{margin:0 auto !important;}

}
/* Cards row */
 .contact .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;width: 100%;
  }

 .contact .card {
    background: white;
    border-radius: 18px;
    padding: 1.6rem 1.5rem;
    position: relative;
    overflow: hidden;
    border: 1.5px solid transparent;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
  }

 .contact .card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-color, var(--teal));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
  }

.contact  .card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  }

 .contact .card:hover::after {
    transform: scaleX(1);
  }

 .contact .card-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--card-bg, rgba(0,184,160,0.1));
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.1rem;
    font-size: 1.2rem;
  }

.contact  .card-label {
    font-family: 'Syne', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.35rem;
  }

 .contact .card-value {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.5;
  }

 .contact .card-value a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    transition: border-color 0.2s;
  }

.contact  .card-value a:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  /* Individual card colors */
 .contact .card-company  { --card-color: #6c63ff; --card-bg: rgba(108,99,255,0.08); }
 .contact .card-address  { --card-color: #e8430a; --card-bg: rgba(232,67,10,0.08); }
 .contact .card-phone    { --card-color: #00b8a0; --card-bg: rgba(0,184,160,0.1); }
 .contact .card-email    { --card-color: #f5a623; --card-bg: rgba(245,166,35,0.1); }

   @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  }

  /* Entrance animation */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .eyebrow  { animation: fadeUp 0.5s ease both; animation-delay: 0.05s;margin-top: 0 !important; }
  .headline { animation: fadeUp 0.5s ease both; animation-delay: 0.15s; }
  .subtitle { animation: fadeUp 0.5s ease both; animation-delay: 0.25s; }

 .contact .card:nth-child(1) { animation: fadeUp 0.5s ease both; animation-delay: 0.35s; }
 .contact .card:nth-child(2) { animation: fadeUp 0.5s ease both; animation-delay: 0.45s; }
 .contact .card:nth-child(3) { animation: fadeUp 0.5s ease both; animation-delay: 0.55s; }
 .contact .card:nth-child(4) { animation: fadeUp 0.5s ease both; animation-delay: 0.65s; }
 .product-info{position: sticky; top: 0;  position: -webkit-sticky; /* Safari */}
 #declineCookie {
    background-color: #2abdc7 !important;
}
footer#pq-footer .widget ul.pq-contact li i.fa.fa-phone{transform: rotate(92deg);}