/* opsvpn — main.css (Figma-like dark glass UI) */
:root{
  --bg: #050607;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --muted2: rgba(255,255,255,.48);

  --blue: #2F6BFF;
  --blue2:#1D4ED8;
  --green:#14B86A;
  --purple:#B05CFF;
  --pink:#FF4DB8;
  --yellow:#F4B400;
  --cyan:#00D1FF;
  --orange:#FF9A2A;
  --red:#FF3B3B;
  --indigo:#6D6BFF;

  --r: 18px;
  --shadow: 0 24px 60px rgba(0,0,0,.55);
  --shadow2: 0 12px 40px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 50% 10%, rgba(120,120,255,.08), rgba(0,0,0,0) 55%),
              radial-gradient(900px 600px at 25% 0%, rgba(47,107,255,.10), rgba(0,0,0,0) 55%),
              radial-gradient(900px 600px at 75% 0%, rgba(20,184,106,.07), rgba(0,0,0,0) 55%),
              var(--bg);
  color: var(--text);
}

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }

.container{
  width: min(1180px, calc(100% - 80px));
  margin: 0 auto;
}

.center{ text-align:center; }
.left{ text-align:left; }

.bg-glow{
  position: fixed;
  inset: -120px -120px auto -120px;
  height: 420px;
  pointer-events:none;
  background: radial-gradient(420px 200px at 50% 30%, rgba(255,255,255,.08), rgba(0,0,0,0) 70%);
  filter: blur(10px);
  opacity:.9;
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.header-inner{
  height: 72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.9);
  font-weight: 600;
  letter-spacing: .2px;
}
.brand.small{ font-size: 14px; }
.brand-mark{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
}
.brand-text{ font-size: 18px; }

.nav{ display:flex; align-items:center; gap: 22px; }
.nav-link{
  font-size: 14px;
  color: rgba(255,255,255,.70);
  padding: 10px 6px;
}
.nav-link:hover{ color: rgba(255,255,255,.92); }
.nav-link.is-active{ color: rgba(255,255,255,.92); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.88);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.btn:active{ transform: translateY(0px); }

.btn-primary{
  background: var(--blue);
  border-color: rgba(255,255,255,.10);
  color: #fff;
  box-shadow: 0 18px 40px rgba(47,107,255,.22);
}
.btn-primary:hover{ background: #2a60ea; }
.btn-ghost{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.12);
}
.btn-center{ margin: 22px auto 0; }

.header-cta{ height: 40px; padding: 0 16px; border-radius: 10px; }

/* Mobile */
.burger{
  display:none;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  cursor:pointer;
}
.burger span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.75);
  margin: 4px auto;
  border-radius: 2px;
}
.mobile-nav{
  display:none;
  padding: 18px 40px 22px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
}
.mobile-nav a{
  display:block;
  padding: 12px 0;
  color: rgba(255,255,255,.78);
}
.mobile-nav a:hover{ color: rgba(255,255,255,.95); }
.mobile-nav .btn{ margin-top: 8px; width: 100%; }

/* Sections */
section{ padding: 74px 0; }
.hero{ padding-top: 56px; }

.section-title{
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.section-lead{
  margin: 0 auto;
  max-width: 860px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.section-lead.muted{ color: var(--muted2); }

.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 52px;
  align-items:start;
}
.hero-title{
  font-size: 56px;
  line-height: 1.06;
  margin: 0 0 18px;
  letter-spacing: -0.03em;
}
.hero-art{
  width: 220px;
  margin: 34px 0 30px;
  opacity: .95;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.65));
}
.hero-art-img{ width: 220px; height: auto; }

.hero-desc{
  margin: 0;
  max-width: 560px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

.steps-card{
  padding: 22px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.steps-top{
  display:flex;
  gap: 18px;
  align-items:center;
  padding: 0 6px 14px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}
.pill-ico{
  width: 18px; height: 18px;
  display:grid; place-items:center;
}
.pill-ico svg{ color: currentColor; }
.pill-ico.is-blue{ color: #43A3FF; }
.pill-ico.is-green{ color: #27D47D; }
.pill-ico.is-purple{ color: #C28CFF; }

.step-row{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
  margin-top: 14px;
}
.step-num{
  width: 28px; height: 28px;
  border-radius: 8px;
  display:grid; place-items:center;
  background: rgba(47,107,255,.85);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.step-text{
  font-size: 14px;
  color: rgba(255,255,255,.86);
  font-weight: 600;
}

.hero-bottom{ padding-top: 26px; }
.hero-sub{
  margin: 0 0 22px;
  max-width: 980px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}
.hero-actions{ display:flex; gap: 14px; align-items:center; margin-bottom: 16px; }

.tag-row{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.tag{
  display:inline-flex;
  align-items:center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
}

/* Servers preview */
.servers-preview{ padding-top: 60px; }
.server-grid{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.server-card{
  padding: 18px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow2);
}
.server-head{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 14px;
}
.server-flag{ font-size: 18px; }
.server-title{ font-weight: 700; font-size: 14px; color: rgba(255,255,255,.88); }
.server-sub{ font-size: 12px; color: rgba(255,255,255,.52); margin-top: 2px; }

.server-stats{
  display:flex;
  flex-direction:column;
  gap: 9px;
}
.kv{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}
.kv .v{ font-weight: 700; color: rgba(255,255,255,.82); }
.kv .v.is-blue{ color: rgba(47,107,255,.95); }
.kv .v.is-green{ color: rgba(25,220,120,.92); }
.dot{
  width: 6px; height: 6px;
  background: rgba(25,220,120,.92);
  border-radius: 50%;
  display:inline-block;
  margin-right: 8px;
  transform: translateY(-1px);
}

/* Why + features */
.why{ padding-top: 78px; }
.why-art{
  height: 190px;
  margin: 26px 0 18px;
  position: relative;
}
.why-art-img{
  width: 260px;
  position:absolute;
  left: 28px;
  top: -10px;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.65));
  opacity: .98;
}

.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.feature-card{
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow2);
  min-height: 132px;
}
.feature-card h3{
  margin: 10px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
}
.feature-card p{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.60);
}

.feature-ico{
  width: 28px; height: 28px;
  border-radius: 10px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.feature-ico svg{ color: currentColor; }
.feature-ico.is-blue{ color: #3AA0FF; }
.feature-ico.is-green{ color: #35D27C; }
.feature-ico.is-cyan{ color: #00D1FF; }
.feature-ico.is-yellow{ color: #F4B400; }
.feature-ico.is-purple{ color: #B05CFF; }
.feature-ico.is-pink{ color: #FF4DB8; }
.feature-ico.is-orange{ color: #FF9A2A; }
.feature-ico.is-red{ color: #FF4D4D; }
.feature-ico.is-indigo{ color: #7D7BFF; }

/* How */
.how-grid{
  margin-top: 26px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.how-card{
  display:flex;
  gap: 16px;
  padding: 22px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow2);
  min-height: 108px;
}
.how-num{
  width: 30px; height: 30px;
  border-radius: 8px;
  display:grid; place-items:center;
  background: rgba(47,107,255,.90);
  color:#fff;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
}
.how-card h3{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.90);
}
.how-card p{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.62);
}

/* Apps */
.apps-grid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.app-card{
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow2);
  min-height: 112px;
}
.app-card h3{
  margin: 10px 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.90);
}
.app-card p{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.60);
}
.app-ico{
  width: 28px; height: 28px;
  border-radius: 10px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.app-ico svg{ color: currentColor; }
.app-ico.is-blue{ color: #3AA0FF; }
.app-ico.is-gray{ color: rgba(255,255,255,.70); }
.app-ico.is-gray2{ color: rgba(255,255,255,.78); }
.app-ico.is-purple{ color: #B05CFF; }
.app-ico.is-green{ color: #35D27C; }
.app-ico.is-red{ color: #FF4D4D; }
.app-ico.is-orange{ color: #FF9A2A; }
.app-card.span-1{ grid-column: 1 / span 1; }

/* Security */
.security-grid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Pricing */
.pricing-grid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;

  align-items: start;
}
.price-card{
  padding: 20px 20px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow2);
}
.price-head{
  display:flex;
  align-items:center;
  gap: 10px;
}
.price-emoji{ font-size: 18px; }
.price-card h3{
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.muted{ color: var(--muted2); }
.price-card p{ margin: 10px 0 12px; font-size: 12.5px; line-height: 1.65; }

.price-list{ margin-top: 10px; }
.price-list .row{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.72);
}
.price-list .row span:last-child{ color: rgba(255,255,255,.90); font-weight: 700; }
.save{
  margin-left: 8px;
  font-weight: 800;
  color: rgba(25,220,120,.92);
}
.pricing-actions{
  margin-top: 24px;
  display:flex;
  gap: 14px;
}

/* FAQ */
.faq{ padding-bottom: 90px; }
.faq-art{
  height: 110px;
  position: relative;
  margin: 26px 0 20px;
}
.faq-art-img{
  position:absolute;
  left: 22px;
  top: 6px;
  width: 220px;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.65));
}
.accordion{ margin-top: 18px; max-width: 980px; }
.acc-item{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow2);
  overflow:hidden;
  margin-top: 14px;
}
.acc-btn{
  width: 100%;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.90);
  font-family: inherit;
  text-align:left;
  padding: 18px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  font-size: 14px;
  font-weight: 800;
  cursor:pointer;
}
.acc-ico{
  width: 32px; height: 32px;
  border-radius: 12px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.70);
  transition: transform .18s ease;
}
.acc-item.is-open .acc-ico{ transform: rotate(180deg); }
.acc-panel{
  /* Closed state */
  padding: 0 18px 0;
  color: rgba(255,255,255,.62);
  font-size: 12.5px;
  line-height: 1.65;
  max-height: 0px;
  overflow: hidden;
  /* Animate padding too to prevent the "opens slightly then fully" glitch */
  transition: max-height .28s ease, padding .28s ease;
}

.acc-item.is-open .acc-panel{ padding-bottom: 16px; }
.acc-panel p{ margin: 0; }

/* Final CTA */
.final-cta{ padding-top: 40px; padding-bottom: 70px; }
.final-card{
  border-radius: 22px;
  padding: 56px 26px 50px;
  text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow);
  position: relative;
}
.final-title{
  margin: 0;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.final-icon{
  width: 84px;
  margin: 18px auto 12px;
  filter: drop-shadow(0 22px 60px rgba(0,0,0,.65));
  opacity: .98;
}
.final-sub{
  margin: 0 auto 22px;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.62);
}
.final-btn{ min-width: 180px; }

/* Footer */
.footer{
  padding: 22px 0 22px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.footer-copy{
  font-size: 12px;
  color: rgba(255,255,255,.52);
}
.footer-nav{ display:flex; gap: 22px; flex-wrap:wrap; justify-content:flex-end; }
.footer-link{ font-size: 13px; color: rgba(255,255,255,.70); }
.footer-link:hover{ color: rgba(255,255,255,.92); }


/* Responsive */
@media (max-width: 1100px){
  .hero-title{ font-size: 50px; }
  .server-grid{ grid-template-columns: repeat(2, 1fr); }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .apps-grid{ grid-template-columns: repeat(2, 1fr); }
  .security-grid{ grid-template-columns: repeat(2, 1fr); }
  .pricing-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .container{ width: min(1180px, calc(100% - 36px)); }
  .nav{ display:none; }
  .burger{ display:inline-block; }
  .mobile-nav{ display:block; }
  .hero-grid{ grid-template-columns: 1fr; gap: 26px; }
  .hero-art{ margin: 18px 0 18px; }
  .hero-title{ font-size: 40px; }
  .steps-card{ max-width: 520px; }
  .how-grid{ grid-template-columns: 1fr; }
  .pricing-actions{ flex-direction: column; align-items:flex-start; }
  .footer-bottom{ flex-direction: column; align-items:flex-start; }
}

@media (max-width: 520px){
  section{ padding: 56px 0; }
  .section-title{ font-size: 32px; }
  .hero-title{ font-size: 34px; }
  .server-grid, .feature-grid, .apps-grid, .security-grid{ grid-template-columns: 1fr; }
  .faq-art-img{ width: 180px; left: 10px; }
}


/* ===== Servers block: match great ===== */
.servers-preview{ padding: 110px 0 120px; }
.servers-preview .section-title{ text-align:center; margin:0 0 14px; }
.servers-preview .section-subtitle{
  text-align:center;
  margin: 0 auto 54px;
  max-width: 820px;
  color: rgba(255,255,255,.62);
  line-height: 1.55;
}

.server-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.server-card{
  border-radius: 20px;
  padding: 22px 22px 18px;
  background:
    radial-gradient(260px 200px at 30% 15%, rgba(255,255,255,.06), rgba(0,0,0,0) 65%),
    radial-gradient(260px 200px at 70% 85%, rgba(255,255,255,.03), rgba(0,0,0,0) 60%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 70px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.02);
}

.server-hdr{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin-bottom: 16px;
}

.server-flag{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  transform: translateY(1px);
}

.server-country{
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.server-city{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.42);
  line-height: 1.2;
}

.server-stats{
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 12px;
  display:grid;
  gap: 10px;
}

.server-stats .kv{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: 14px;
}

.server-stats .kv span:first-child{ color: rgba(255,255,255,.55); }
.server-stats .v{ font-weight: 700; }

.server-stats .is-blue{ color: rgba(59,130,246,.95); }
.server-stats .is-green{ color: rgba(34,197,94,.95); }

.server-stats .dot{
  display:inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 0 6px rgba(34,197,94,.12);
  transform: translateY(1px);
}

.servers-cta{
  display:flex;
  justify-content:center;
  margin-top: 46px;
}

.servers-cta .btn{
  padding: 14px 26px;
  border-radius: 14px;
}

.btn.btn-ghost{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 12px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03);
}
.btn.btn-ghost:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}


/* Header logo image inside rounded brand mark */
.brand-mark{ overflow: hidden; }
.brand-logo-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ===== Desktop polish v4 (why + faq + black bg) ===== */

/* Force true black background (as in Figma first screenshots) */
html, body{
  background: #000 !important;
}
body::before, body::after{
  content: none !important; /* disable decorative gradients if any */
}

/* Make section leads match Hero text size */
.section-lead.left{
  font-size: 13px;
  line-height: 1.75;
  margin-left: 0;
  margin-right: 0;
  max-width: 980px;
  color: rgba(255,255,255,.62);
}

/* WHY: keep butterfly from overlapping cards */
.why{
  position: relative;
}
.why-art{
  position: relative;     /* keep in normal flow */
  margin: 34px 0 26px;
  width: 100%;
  max-width: 360px;       /* like reference */
}
.why-art-img{
  display: block;
  width: 100%;
  height: auto;
}
.feature-grid{
  position: relative;
  z-index: 2;
}

/* FAQ: enlarge image and prevent overlap with description */
.faq{
  position: relative;
}
.faq-art{
  position: relative;     /* in-flow, no overlap */
  margin: 30px 0 22px;
  width: 100%;
  max-width: 340px;
}
.faq-art-img{
  display:block;
  width: 100%;
  height: auto;
  transform: translateY(2px);
}
.faq .section-lead{
  position: relative;
  z-index: 2;
  margin-top: 0;
}


/* WHY: lift image slightly */
.why-art{
  margin-top: 18px;
}

/* FAQ: lift image and protect accordion */
.faq-art{
  margin-top: 14px;
  margin-bottom: 28px;
}

.faq-list,
.faq-accordion{
  position: relative;
  z-index: 3;
}

/* ===== Micro position fixes v6 (Why + FAQ) ===== */
/* WHY: move butterfly a bit higher (image is absolute inside .why-art) */
.why-art-img{
  top: -18px !important; /* was -10px */
}

/* FAQ: make image a bit higher and reserve more vertical space so it never overlaps text/accordion */
.faq-art{
  height: 160px !important;       /* was 110px */
  margin: 22px 0 26px !important; /* give breathing room */
}
.faq-art-img{
  top: -6px !important;           /* was 6px */
  width: 240px !important;        /* a touch bigger like your ref */
}

/* Keep accordion above any decorative art just in case */
.accordion{ position: relative; z-index: 3; }


@media (min-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(4, 1fr); }
}