/* ============================================================
   STUBEE — Mobile-First Design System
   Breakpoints: 576 | 768 | 992 | 1200
   ============================================================ */

:root {
  --pri:    #6366f1;
  --pri-l:  #818cf8;
  --pri-d:  #4f46e5;
  --acc:    #f472b6;
  --acc2:   #a78bfa;
  --bg:     #f8faff;
  --card:   #ffffff;
  --text:   #1e293b;
  --text2:  #475569;
  --text3:  #94a3b8;
  --shadow: 0 4px 20px rgba(99,102,241,0.08);
  --shadow2:0 12px 40px rgba(99,102,241,0.15);
  --radius: 22px;
  --sp:     clamp(56px, 9vw, 120px);   /* section vertical padding */
  --gp:     clamp(16px, 4vw, 24px);    /* container gutters        */
}

/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

/* ===== CONTENT PROTECTION ===== */
body, img, p, h1, h2, h3, h4, h5, span, div {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

body {
  font-family: 'Outfit', sans-serif;
  background: transparent;
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gp);
}

.grad {
  background: linear-gradient(135deg, var(--pri), var(--acc));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== PARTICLES & SCROLL PROGRESS ===== */
#particles-canvas {
  position: fixed; top:0; left:0; width:100%; height:100%;
  pointer-events: none; z-index:-1; background: var(--bg);
}
.scroll-progress {
  position: fixed; top:0; left:0; width:0%; height:3px;
  background: linear-gradient(90deg, var(--pri), var(--acc));
  z-index: 2000; transition: width .1s ease;
}

/* ===== SCROLL INDICATOR ===== */
.scroll-indicator {
  position: absolute; bottom:24px; left:50%;
  transform: translateX(-50%);
  color: var(--text3); font-size:1.1rem;
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0);   }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* ===== ANIMATIONS ===== */
.animate-on-scroll {
  opacity:0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.animate-on-scroll.visible { opacity:1; transform: translateY(0); }

@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes glow {
  from { box-shadow: 0 0 12px rgba(255,0,128,.4); }
  to   { box-shadow: 0 0 30px rgba(255,0,128,.65); }
}
@keyframes modalSlideUp {
  from { transform: translateY(100%); opacity:0; }
  to   { transform: translateY(0);    opacity:1; }
}
@keyframes modalZoomIn {
  from { opacity:0; transform: scale(.92) translateY(28px); }
  to   { opacity:1; transform: scale(1)   translateY(0);    }
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed; top:12px; left:0; right:0;
  z-index: 1000; transition: top .4s ease; padding: 0 12px;
}
.nav-container {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,.87);
  backdrop-filter: blur(24px) saturate(180%);
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
  max-width: 1200px; margin: 0 auto;
  gap: 10px;
}
.navbar.scrolled { top:8px; }
.navbar.scrolled .nav-container {
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow2);
  border-color: rgba(99,102,241,.15);
}

/* Logo */
.logo {
  text-decoration:none; display:flex; align-items:center;
  color: var(--text); flex-shrink:0;
}
.logo-img {
  height: 36px; max-width:150px; width:auto;
  transition:.3s ease; object-fit:contain;
}
.logo:hover .logo-img { transform: scale(1.05); }
.footer-logo-img { height:44px; max-width:180px; margin-bottom:14px; }

/* Nav links — mobile: overlay dropdown */
.nav-links {
  display: flex; flex-direction: column;
  position: fixed; top:76px; left:12px; right:12px;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(20px);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.5);
  gap: 4px; z-index:1050;
  /* hidden state */
  visibility:hidden; opacity:0; pointer-events:none;
  transform: translateY(-12px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.nav-links.active {
  visibility: visible; opacity:1;
  pointer-events: all; transform: translateY(0);
}
.nav-links a {
  text-decoration:none; color: var(--text);
  font-weight:700; transition:.2s; font-size:.98rem;
  padding:11px 16px; border-radius:12px;
}
.nav-links a:hover { background: rgba(99,102,241,.07); color: var(--pri); }

/* Nav actions */
.nav-actions { display:flex; align-items:center; gap:8px; }

.lang-toggle-nav {
  background: rgba(99,102,241,.06); color: var(--pri);
  border: 1px solid rgba(99,102,241,.14);
  padding: 0 11px; border-radius:50px;
  font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:5px;
  transition:.3s; font-size:.78rem;
  height:40px; flex-shrink:0; white-space:nowrap;
}
.lang-toggle-nav:hover { background: rgba(99,102,241,.13); transform:scale(1.05); }

.btn-nav-cta {
  background: #462C7D; color:#ffffff !important;
  padding:0 13px; border-radius:50px; font-size:.78rem;
  display:flex; align-items:center; justify-content:center; gap:5px;
  text-decoration:none; font-weight:800;
  transition:.4s cubic-bezier(.175,.885,.32,1.275);
  box-shadow: 0 6px 16px rgba(70,44,125,.28);
  border: 2px solid #462C7D;
  height:40px; white-space:nowrap; flex-shrink:0;
}
.btn-nav-cta:hover {
  background: transparent; color:#462C7D !important;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 22px rgba(70,44,125,.35);
}

/* Hamburger */
.hamburger {
  display:flex; flex-direction:column; justify-content:center;
  align-items:center; gap:5px;
  background: rgba(99,102,241,.06); border:none;
  cursor:pointer; padding:0; border-radius:12px;
  width:42px; height:42px; transition:.3s; flex-shrink:0;
}
.hamburger:hover { background: rgba(99,102,241,.13); }
.hamburger span {
  width:20px; height:2px; background: var(--text);
  border-radius:4px;
  transition:.4s cubic-bezier(.4,0,.2,1); transform-origin:right;
}
.hamburger.active span:nth-child(1) { transform: rotate(-45deg) scaleX(1.2); }
.hamburger.active span:nth-child(2) { opacity:0; transform: translateX(8px); }
.hamburger.active span:nth-child(3) { transform: rotate(45deg) scaleX(1.2); }

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px; border-radius:14px;
  font-weight:700; text-decoration:none;
  transition:.3s ease; border:2px solid transparent;
  cursor:pointer; font-size:.98rem; line-height:1.3;
  white-space:nowrap;
}
.btn-lg { padding:16px 34px; font-size:1.08rem; }
.btn-primary {
  background: linear-gradient(135deg, var(--pri), #a855f7);
  color:#fff; box-shadow: 0 10px 24px rgba(99,102,241,.32);
}
.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(99,102,241,.5);
  background: transparent; border-color:#7225ec; color:#7225ec;
}
.btn-secondary {
  background: transparent; color: var(--pri);
  border: 2px solid rgba(99,102,241,.28);
}
.btn-secondary:hover {
  background: rgba(99,102,241,.06);
  border-color: var(--pri); transform: translateY(-3px);
}
.btn-wa { background:#25d366; color:#fff; border-color:transparent; }
.btn-wa:hover { background:#128c7e; transform:translateY(-4px); }
.btn-outline-card {
  background: rgba(99,102,241,.05); border:2px solid var(--pri);
  color: var(--pri); font-weight:800;
}
.btn-outline-card:hover {
  background: var(--pri); color:#fff;
  transform: translateY(-3px); box-shadow: 0 10px 20px rgba(99,102,241,.22);
}
.btn-glow {
  background: linear-gradient(135deg,#ff0080,#7928ca);
  color:#fff; animation: glow 2s infinite alternate;
}
.mt { margin-top:18px; }

/* ===== HERO ===== */
.hero {
  min-height:100vh; display:flex; align-items:center;
  padding: clamp(96px,14vh,140px) 0 clamp(56px,8vh,90px);
  position:relative;
}
.hero-grid {
  display:grid; grid-template-columns:1fr;
  gap:44px; align-items:center; text-align:center;
}
.pill {
  display:inline-block; padding:8px 17px;
  border-radius:50px; background:rgba(99,102,241,.08);
  color: var(--pri); font-weight:700; font-size:.82rem;
  margin-bottom:18px; border:1px solid rgba(99,102,241,.12);
  line-height:1.5;
}
.hero-text h1 {
  font-size: clamp(1.85rem,6.5vw,4rem);
  line-height:1.18; margin-bottom:18px;
  font-weight:900; letter-spacing:-0.5px;
}
.hero-text p {
  font-size: clamp(.98rem,2.4vw,1.2rem);
  color: var(--text2); margin-bottom:28px;
}
.hero-btns {
  display:flex; gap:12px; margin-bottom:28px;
  flex-wrap:wrap; justify-content:center;
}
.trust-badges {
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
}
.trust-badges span {
  display:flex; align-items:center; gap:7px;
  color: var(--text2); font-weight:600; font-size:.88rem;
}
.trust-badges i { color: var(--pri); font-size:.95rem; }

/* Hero visual — hidden on mobile */
.hero-visual { display:none; }

/* ===== MOCKUP ===== */
.mockup-wrapper { transition: transform .12s ease-out; transform-style:preserve-3d; }
.mockup {
  background:#fff; border:1px solid rgba(0,0,0,.05);
  border-radius:20px; overflow:hidden;
  box-shadow: var(--shadow2); width:100%;
  animation: float 6s ease-in-out infinite;
}
.mockup-bar {
  background:#f8fafc; padding:10px 15px;
  display:flex; align-items:center; gap:7px;
  border-bottom:1px solid #f1f5f9;
}
.mdot { width:9px; height:9px; border-radius:50%; }
.mdot.r { background:#ff5f57; }
.mdot.y { background:#febc2e; }
.mdot.g { background:#28c840; }
.murl {
  flex:1; background:#fff; border:1px solid #f1f5f9;
  border-radius:50px; padding:3px 12px;
  font-size:.72rem; color:var(--text3); margin:0 8px;
}
.mockup-body { padding:16px; }
.m-stats {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin-bottom:14px;
}
.m-stat {
  background:#f8fafc; border-radius:10px; padding:11px;
  text-align:center; border:1px solid #f1f5f9;
}
.m-stat-num { font-size:1.15rem; color:var(--pri); font-weight:800; line-height:1.2; }
.m-stat-lbl {
  font-size:.62rem; color:var(--text3); margin-top:3px;
  font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.m-chart-wrap {
  background:#fff; border-radius:10px; padding:13px;
  margin-bottom:11px; border:1px solid #f1f5f9;
}
.m-chart-lbl { font-size:.74rem; color:var(--text); margin-bottom:9px; font-weight:800; }
.m-bars { display:flex; align-items:flex-end; gap:5px; height:48px; }
.m-bar { flex:1; border-radius:4px 4px 0 0; background:#f1f5f9; transition:1s ease-out; }
.m-bar.hi { background: var(--pri); }
.m-tags { display:flex; gap:7px; flex-wrap:wrap; }
.m-tag { padding:5px 10px; border-radius:50px; font-size:.68rem; font-weight:700; }
.m-tag.g { background:#dcfce7; color:#166534; }
.m-tag.a { background:#dbeafe; color:#1e40af; }

/* ===== VISUAL CARD (Showcase) ===== */
.visual-card {
  background:#fff; border:1px solid rgba(0,0,0,.05);
  border-radius:20px; padding:20px;
  box-shadow: var(--shadow2); width:100%; transition:transform .4s;
}
.vc-header {
  display:flex; align-items:center; gap:7px;
  padding-bottom:12px; margin-bottom:12px;
  border-bottom:1px solid #f1f5f9;
}
.vc-dots { display:flex; gap:5px; }
.vc-dots span { width:8px; height:8px; border-radius:50%; }
.vc-title { font-size:.8rem; font-weight:700; color:var(--text3); margin-left:6px; }
.nep-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:11px; }
.nep-item {
  background:#f8fafc; border-radius:10px; padding:9px;
  border:1px solid #f1f5f9;
}
.nep-sub { font-size:.76rem; font-weight:700; color:var(--text); margin-bottom:5px; }
.nep-bar-bg { height:5px; background:#f1f5f9; border-radius:10px; overflow:hidden; margin-bottom:5px; }
.nep-bar-fill { height:100%; background:var(--pri); border-radius:10px; }
.nep-score { font-size:.88rem; color:var(--text); font-weight:800; }
.nep-student {
  text-align:center; background:rgba(99,102,241,.05);
  border-radius:10px; padding:10px; margin-bottom:11px;
  font-size:.8rem; border:1px solid rgba(99,102,241,.1);
}
.nep-student strong {
  display:block; color:var(--pri); font-weight:800; font-size:.92rem; margin-bottom:2px;
}
.nep-pdf {
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:#f0fdf4; color:#166534; font-size:.82rem;
  font-weight:800; padding:8px; border-radius:9px;
  cursor:pointer; transition:.3s;
}
.nep-pdf:hover { background:#dcfce7; }

/* ===== COUNTER SECTION ===== */
.counter-section {
  padding: clamp(48px,7vw,80px) 0;
  background: rgba(30,41,59,.87);
  backdrop-filter:blur(10px); color:#fff;
  position:relative; z-index:1; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.counter-section::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 50%,rgba(99,102,241,.12),transparent);
  pointer-events:none;
}
.counter-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap: clamp(20px,4vw,40px); text-align:center;
}
.counter-num {
  font-size: clamp(2rem,6vw,3.5rem); font-weight:900; margin-bottom:4px;
  background: linear-gradient(135deg,#fff,var(--pri-l));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.counter-box div:last-child {
  font-size: clamp(.85rem,1.8vw,1.05rem);
  font-weight:500; color:var(--text3); margin-top:4px; line-height:1.4;
}

/* ===== SECTION HEADER ===== */
.sec-head { text-align:center; margin-bottom: clamp(36px,6vw,80px); }
.sec-head h2 {
  font-size: clamp(1.7rem,5vw,3.5rem);
  font-weight:900; margin-bottom:13px;
}
.sec-head p {
  font-size: clamp(.95rem,2vw,1.2rem);
  color:var(--text2); max-width:640px; margin:0 auto; line-height:1.6;
}

/* ===== FEATURES ===== */
.features-section { padding: var(--sp) 0; background:transparent; }
.features-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.filter-tab {
  background: rgba(99, 102, 241, 0.05);
  color: var(--text2);
  border: 1px solid rgba(99, 102, 241, 0.15);
  padding: 10px 20px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.filter-tab:hover {
  background: rgba(99, 102, 241, 0.1);
  color: var(--pri);
  transform: translateY(-2px);
}
.filter-tab.active {
  background: var(--pri);
  color: #fff;
  border-color: var(--pri);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.features-grid {
  display:grid; grid-template-columns:1fr; gap:18px;
}
.feat-card {
  background:#fff; border:1px solid rgba(99,102,241,.07);
  padding: clamp(22px,4vw,38px);
  border-radius: var(--radius); cursor:pointer;
  transition:.4s cubic-bezier(.175,.885,.32,1.275);
  position:relative; overflow:hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.03);
}
.feat-card:hover {
  transform: translateY(-10px); box-shadow: var(--shadow2);
  border-color: var(--pri-l);
}
.feat-icon {
  width:54px; height:54px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; color:#fff; margin-bottom:18px; transition:.4s;
}
.feat-card:hover .feat-icon { transform: rotate(10deg) scale(1.1); }
.feat-card h3 {
  font-size: clamp(1.05rem,2.5vw,1.3rem);
  font-weight:800; margin-bottom:9px;
}
.feat-card p { color:var(--text2); font-size:.93rem; line-height:1.6; }
.click-hint {
  margin-top:16px; font-weight:700; color:var(--pri);
  display:flex; align-items:center; gap:7px;
  font-size:.88rem; opacity:0; transform:translateX(-8px); transition:.3s;
}
.feat-card:hover .click-hint { opacity:1; transform:translateX(0); }

/* ===== MODAL ===== */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(15,23,42,.82); backdrop-filter:blur(14px);
  z-index:9999; justify-content:center; align-items:flex-end;
  padding:0;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:#fff; border-radius:28px 28px 0 0;
  width:100%; padding:28px 20px 36px;
  position:relative; overflow-y:auto; max-height:92vh;
  animation: modalSlideUp .4s cubic-bezier(.19,1,.22,1);
  box-shadow: 0 -16px 50px rgba(0,0,0,.28);
}
.modal-close {
  position:absolute; top:18px; right:18px;
  background:#f1f5f9; border:none;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; cursor:pointer; color:var(--text); transition:.3s;
}
.modal-close:hover { background:#ef4444; color:#fff; transform:rotate(90deg); }
.modal-icon {
  width:62px; height:62px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem; color:#fff; margin-bottom:16px;
}
.modal-box h3 {
  font-size: clamp(1.4rem,4vw,2.4rem);
  font-weight:900; margin-bottom:22px;
  letter-spacing:-.5px; line-height:1.15;
}
.modal-content-split {
  display:grid; grid-template-columns:1fr; gap:14px;
}
.modal-problem, .modal-solution {
  padding:22px; border-radius:18px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.03); transition:.3s;
}
.modal-problem {
  background:linear-gradient(135deg,#fff1f2,#fff); border:1.5px solid #fecdd3;
}
.modal-problem:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(225,29,72,.1); }
.modal-problem h4 {
  color:#e11d48; font-weight:900;
  display:flex; align-items:center; gap:9px;
  font-size:.95rem; text-transform:uppercase; letter-spacing:1px;
}
.modal-problem p { color:#881337; font-size:.98rem; line-height:1.68; font-weight:500; }
.modal-solution {
  background:linear-gradient(135deg,#f0fdf4,#fff); border:1.5px solid #dcfce7;
}
.modal-solution:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(22,163,74,.1); }
.modal-solution h4 {
  color:#16a34a; font-weight:900;
  display:flex; align-items:center; gap:9px;
  font-size:.95rem; text-transform:uppercase; letter-spacing:1px;
}
.modal-solution p { color:#064e3b; font-size:.98rem; line-height:1.68; font-weight:500; }

/* ===== SHOWCASE ===== */
.showcase-section { padding: var(--sp) 0; background:transparent; }
.showcase-grid { display:flex; flex-direction:column; gap: clamp(56px,9vw,120px); }
.showcase-item {
  display:grid; grid-template-columns:1fr;
  gap:28px; align-items:center; text-align:center;
}
/* on mobile, both normal and reverse order the same */
.showcase-item.reverse .showcase-content { order:1; }
.showcase-item.reverse .showcase-img     { order:2; }
.showcase-content h3 {
  font-size: clamp(1.45rem,4vw,2.5rem);
  font-weight:900; margin-bottom:14px;
}
.showcase-content p {
  font-size: clamp(.96rem,2vw,1.18rem);
  color:var(--text2); margin-bottom:22px;
}
.showcase-img {
  border-radius:22px; overflow:hidden;
  box-shadow: var(--shadow2); border:1px solid rgba(99,102,241,.1);
  transition:.5s;
}
.showcase-img:hover { transform:scale(1.02); }
.showcase-img img { width:100%; display:block; }

/* ===== PRICING ===== */
.pricing-section { padding: var(--sp) 0; background:transparent; }
.billing-toggle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 50px;
}
.toggle-label {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text3);
  cursor: pointer;
  transition: color 0.3s;
}
.toggle-label.active {
  color: var(--pri);
}
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(99, 102, 241, 0.15);
  transition: .4s;
  border: 1px solid rgba(99, 102, 241, 0.3);
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: var(--pri);
  transition: .4s;
}
input:checked + .slider {
  background-color: rgba(99, 102, 241, 0.15);
}
input:checked + .slider:before {
  transform: translateX(22px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
.pricing-grid {
  display:grid; grid-template-columns:1fr; gap:20px;
}
.price-card {
  background:#f8faff; border:2px solid transparent;
  border-radius: var(--radius);
  padding: clamp(26px,4vw,40px) clamp(20px,3vw,28px);
  transition:.4s; position:relative;
  display:flex; flex-direction:column;
}
.price-card:hover { transform:translateY(-8px); box-shadow: var(--shadow2); }
.price-card.featured {
  background:#fff; border-color: var(--pri); box-shadow: var(--shadow2);
}
.price-card.deluxe {
  background:linear-gradient(180deg,#fff,rgba(124,58,237,.04));
  border-color:rgba(124,58,237,.2);
}
.price-card.lifetime {
  background:linear-gradient(180deg,#fff,rgba(16,185,129,.04));
  border-color:rgba(16,185,129,.3);
}
.price-card.lifetime .btn-primary {
  background:linear-gradient(135deg,#10b981,#059669);
  box-shadow:0 10px 24px rgba(16,185,129,.3);
}
.price-card.lifetime .btn-primary:hover {
  box-shadow:0 16px 34px rgba(16,185,129,.5);
  border-color:#059669; color:#059669;
}
.pop-tag {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: var(--pri); color:#fff;
  padding:6px 18px; border-radius:50px;
  font-size:.8rem; font-weight:800;
  letter-spacing:.5px; white-space:nowrap;
}
.plan-label  { font-size:1rem; font-weight:800; color:var(--text2); margin-bottom:9px; }
.plan-price  {
  font-size: clamp(1.9rem,5vw,2.8rem);
  font-weight:900; color:var(--text); margin-bottom:7px; line-height:1.1;
}
.plan-price small { font-size:.84rem; color:var(--text3); font-weight:600; }
.plan-sub { color:var(--text3); margin-bottom:18px; font-weight:500; font-size:.88rem; line-height:1.4; }
.price-card ul { list-style:none; margin-bottom:20px; flex:1; }
.price-card li {
  display:flex; align-items:flex-start; gap:10px;
  margin-bottom:12px; font-weight:600; color:var(--text2); font-size:.92rem;
  line-height:1.35; word-break:break-word;
}
.price-card li i { color:#10b981; font-size:.98rem; flex-shrink:0; margin-top:2px; }
.price-card li i.fa-xmark { color:#ef4444; }
.price-card li i.fa-info-circle.info { color:var(--pri-l); }
.price-card li.muted { opacity:.5; }
.price-card .btn { width:100%; justify-content:center; }

/* ===== ADD-ONS ===== */
.addons-container { margin-top: clamp(44px,6vw,80px); }
.addons-title {
  font-size: clamp(1.35rem,3.5vw,2rem);
  font-weight:800; text-align:center;
  margin-bottom:24px; color:var(--text);
}
.addons-grid {
  display:grid; grid-template-columns:1fr;
  gap:14px; max-width:900px; margin:0 auto;
}
.addon-card {
  display:flex; flex-direction:column; gap:12px;
  background:#fff; padding:18px 22px; border-radius:16px;
  border:1px solid rgba(99,102,241,.1);
  box-shadow:0 4px 12px rgba(0,0,0,.02); transition:.3s;
}
.addon-card:hover { transform:translateY(-4px); box-shadow: var(--shadow2); border-color: var(--pri-l); }
.addon-info h4 { font-size:1.05rem; font-weight:800; margin-bottom:4px; color:var(--text); }
.addon-info p  { color:var(--text2); font-size:.88rem; margin:0; line-height:1.5; }
.addon-price   { display:flex; align-items:center; gap:10px; }
.addon-price small {
  font-size:.76rem; color:var(--text3); font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
}
.addon-price div { font-size:1.55rem; font-weight:900; color:var(--pri); line-height:1; }

/* ===== REVIEWS ===== */
.reviews-section { padding: var(--sp) 0; background:rgba(99,102,241,.02); }
.reviews-grid {
  display:grid; grid-template-columns:1fr;
  gap:20px; margin-top: clamp(28px,4vw,56px);
}
.review-card {
  background:#fff; padding: clamp(22px,4vw,38px);
  border-radius:22px; box-shadow:0 6px 22px rgba(0,0,0,.04);
  position:relative;
}
.review-card::before {
  content:'"'; position:absolute; top:14px; right:22px;
  font-size:5rem; color:rgba(99,102,241,.08);
  font-family:serif; line-height:1;
}
.stars { color:#fbbf24; margin-bottom:14px; font-size:1rem; }
.review-card p {
  font-size: clamp(.93rem,2vw,1.08rem);
  color:var(--text); line-height:1.65;
  margin-bottom:22px; font-style:italic;
}
.reviewer { display:flex; align-items:center; gap:13px; }
.r-avatar {
  width:44px; height:44px; border-radius:50%;
  background: var(--pri); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.05rem; flex-shrink:0;
}
.reviewer h4   { font-size:.98rem; font-weight:800; margin-bottom:3px; }
.reviewer span { font-size:.83rem; color:var(--text3); }

/* ===== FAQ ===== */
.faq-section { padding: var(--sp) 0; background:transparent; }
.faq-list {
  max-width:760px; margin:0 auto;
  display:flex; flex-direction:column; gap:11px;
}
.faq-item {
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:15px; overflow:hidden; transition:.3s;
}
.faq-question {
  padding:18px 22px;
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; font-size: clamp(.92rem,2vw,1.08rem);
  font-weight:700; color:var(--text); gap:12px;
}
.faq-question i { transition:transform .3s ease; color:var(--pri); flex-shrink:0; }
.faq-item.active { border-color:var(--pri-l); box-shadow: var(--shadow2); }
.faq-item.active .faq-question i { transform:rotate(180deg); }
.faq-answer {
  padding:0 22px; max-height:0;
  overflow:hidden; transition:max-height .4s ease, padding .4s ease;
}
.faq-item.active .faq-answer { padding:0 22px 18px; max-height:320px; }
.faq-answer p { color:var(--text2); line-height:1.65; margin:0; }

/* ===== CTA BANNER ===== */
.cta-banner-section { padding:0 0 var(--sp); background:transparent; }
.cta-banner-box {
  background:linear-gradient(135deg, var(--pri-d), #a855f7);
  border-radius:20px;
  padding: clamp(30px,5vw,60px) clamp(22px,5vw,60px);
  display:flex; flex-direction:column;
  align-items:center; gap:22px; text-align:center;
  box-shadow:0 18px 38px rgba(99,102,241,.22);
  position:relative; overflow:hidden;
}
.cta-banner-box::before {
  content:''; position:absolute; top:-50%; left:-50%;
  width:200%; height:200%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.08),transparent 60%);
  pointer-events:none;
}
.cta-banner-text          { position:relative; z-index:1; }
.cta-banner-text h2       { color:#fff; font-size: clamp(1.5rem,4vw,2.5rem); font-weight:900; margin-bottom:9px; }
.cta-banner-text p        { color:rgba(255,255,255,.85); font-size: clamp(.93rem,2vw,1.12rem); margin:0; line-height:1.6; }
.cta-banner-action        { position:relative; z-index:1; }
.cta-banner-action .btn-primary {
  background:#fff; color: var(--pri-d);
  box-shadow:0 8px 18px rgba(0,0,0,.1); border-color:transparent;
}
.cta-banner-action .btn-primary:hover {
  background:transparent; color:#fff;
  border-color:#fff; box-shadow:none;
}

/* ===== FOOTER ===== */
.footer {
  background:rgba(30,41,59,.92);
  backdrop-filter:blur(20px); color:#fff;
  padding: clamp(52px,8vw,100px) 0 36px;
  border-top:1px solid rgba(255,255,255,.05);
}
.footer-grid {
  display:grid; grid-template-columns:1fr;
  gap:36px; margin-bottom:44px;
}
.footer p   { color:var(--text3); font-size:.98rem; max-width:320px; margin-top:4px; line-height:1.6; }
.footer h4  { font-size:1.05rem; font-weight:800; margin-bottom:18px; color:#fff; }
.footer-links { display:flex; flex-direction:column; gap:11px; }
.footer-links a {
  color:var(--text3); text-decoration:none;
  transition:.3s; font-weight:600; font-size:.93rem;
}
.footer-links a:hover { color:var(--pri-l); transform:translateX(4px); }
.copy {
  text-align:center; padding-top:28px;
  border-top:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.28); font-weight:600; font-size:.87rem;
}

/* ===== FLOATING WHATSAPP ===== */
.floating-wa {
  position:fixed; bottom:18px; right:18px;
  background:#25d366; color:#fff;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem; box-shadow:0 8px 20px rgba(37,211,102,.42);
  z-index:99; transition:.3s; text-decoration:none;
}
.floating-wa:hover {
  transform:scale(1.12) translateY(-4px);
  box-shadow:0 14px 30px rgba(37,211,102,.62);
}

/* =============================================================
   BREAKPOINT: 576px  (Small tablets / large phones landscape)
   ============================================================= */
@media (min-width: 576px) {
  .lang-toggle-nav { font-size:.83rem; padding:0 14px; }
  .btn-nav-cta { font-size:.85rem; padding:0 18px; }

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

  /* Add-ons: horizontal card layout */
  .addons-grid { grid-template-columns: repeat(2,1fr); }
  .addon-card {
    flex-direction:row; justify-content:space-between;
    align-items:center; gap:16px;
  }
  .addon-price { flex-direction:column; align-items:flex-end; gap:2px; min-width:90px; }
}

/* =============================================================
   BREAKPOINT: 768px  (Tablets)
   ============================================================= */
@media (min-width: 768px) {
  .navbar { padding:0 20px; top:16px; }
  .nav-container { padding:10px 22px; }
  .logo-img { height:42px; }

  .hero-text p { max-width:92%; }

  /* Counter: 4 across */
  .counter-grid { grid-template-columns: repeat(4,1fr); }

  /* Pricing: 2 cols on tablet */
  .pricing-grid { grid-template-columns: repeat(2,1fr); gap:22px; }

  /* Showcase: keep single col but text left-aligned */
  .showcase-item { text-align:left; }
  .showcase-item.reverse .showcase-content { order:1; }
  .showcase-item.reverse .showcase-img     { order:2; }

  /* Modal: bottom-sheet → centered dialog */
  .modal-overlay { align-items:center; padding:20px; }
  .modal-box {
    border-radius:30px; max-width:860px;
    padding:44px 48px 48px;
    animation: modalZoomIn .42s cubic-bezier(.19,1,.22,1);
    max-height:88vh;
  }
  .modal-content-split { grid-template-columns:1fr 1fr; gap:22px; }
  .modal-problem p, .modal-solution p { font-size:1.05rem; }

  /* CTA: row layout */
  .cta-banner-box { flex-direction:row; justify-content:space-between; text-align:left; }

  /* Footer: 3 col */
  .footer-grid { grid-template-columns:1.5fr 1fr 1fr; gap:48px; }

  .floating-wa { bottom:26px; right:26px; width:56px; height:56px; font-size:1.85rem; }
  .nep-grid { grid-template-columns:1fr 1fr; }
}

/* =============================================================
   BREAKPOINT: 992px  (Desktop)
   ============================================================= */
@media (min-width: 992px) {
  /* Hide hamburger, show inline nav */
  .hamburger { display:none; }
  .nav-links {
    /* Reset mobile overrides */
    position:static;
    flex-direction:row;
    background:none; backdrop-filter:none;
    border:none; box-shadow:none;
    padding:0; gap:32px; border-radius:0;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:all !important;
    transform:none !important;
    transition:none;
  }
  .nav-links a {
    padding:4px 0; border-radius:0;
    font-size:.93rem; position:relative;
  }
  .nav-links a:hover { background:none; }
  .nav-links a::after {
    content:''; position:absolute; bottom:0; left:0;
    width:0; height:2px;
    background:linear-gradient(90deg, var(--pri), var(--acc));
    transition:.3s cubic-bezier(.4,0,.2,1);
  }
  .nav-links a:hover::after { width:100%; }

  .nav-actions { gap:12px; }
  .btn-nav-cta { padding:0 22px; font-size:.9rem; height:44px; }
  .lang-toggle-nav { font-size:.88rem; padding:0 16px; height:44px; }

  /* Hero: 2-column */
  .hero-grid { grid-template-columns:1fr 1fr; gap:60px; text-align:left; }
  .hero-btns { justify-content:flex-start; }
  .trust-badges { justify-content:flex-start; }
  .hero-visual { display:block; }

  /* Features: 3 columns */
  .features-grid { grid-template-columns:repeat(3,1fr); gap:22px; }

  /* Pricing: 4 columns */
  .pricing-grid { grid-template-columns:repeat(4,1fr); gap:18px; }
  .price-card.featured { transform:scale(1.04); }
  .price-card.featured:hover { transform:scale(1.04) translateY(-8px); }

  /* Showcase: 2-col grid */
  .showcase-item          { grid-template-columns:1fr 1.2fr; gap:68px; }
  .showcase-item.reverse  { grid-template-columns:1.2fr 1fr; }
  .showcase-item.reverse .showcase-content { order:2; }
  .showcase-item.reverse .showcase-img     { order:1; }
}

/* =============================================================
   BREAKPOINT: 1200px  (Wide desktop)
   ============================================================= */
@media (min-width: 1200px) {
  .nav-container { padding:10px 28px; }
  .hero-grid  { gap:80px; }
  .feat-card  { padding:38px; }
  .showcase-item { gap:80px; }
  .pricing-grid  { gap:22px; }
}