/* ============================================================
   DarteCRM — Landing Page
   Paleta extraída del logo (navy profundo + turquesa) + verde
   WhatsApp como acento de conversión.
   ============================================================ */

:root{
  /* --- Marca --- */
  --navy-950:#040F26;
  --navy-900:#0A2E57;
  --navy-800:#123A6B;
  --navy-700:#1C4A85;
  --teal-500:#04D2C0;
  --teal-600:#0AB6A8;
  --teal-700:#058B80;
  --wa-green:#25D366;
  --wa-green-dark:#1DA851;

  /* --- Superficies / texto --- */
  --bg:#F6F8FC;
  --bg-alt:#EEF2F9;
  --surface:#FFFFFF;
  --ink:#0B1526;
  --ink-soft:#546076;
  --ink-faint:#8592A6;
  --border:#E3E9F2;

  /* --- Tipografía --- */
  --font-display:'Manrope', system-ui, sans-serif;
  --font-body:'Work Sans', system-ui, -apple-system, sans-serif;

  /* --- Utilidades --- */
  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --shadow-soft:0 20px 50px -20px rgba(10,46,87,0.25);
  --shadow-card:0 12px 30px -12px rgba(10,46,87,0.18);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.brand-word,.hero-title,.dash-stat strong{
  font-family:var(--font-display);
  letter-spacing:-0.02em;
}

a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}

.container{max-width:1200px;}

/* ============ Reveal animation ============ */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}
[data-reveal-delay="1"]{transition-delay:.08s;}
[data-reveal-delay="2"]{transition-delay:.16s;}
[data-reveal-delay="3"]{transition-delay:.24s;}

/* ============ Botones ============ */
.btn{
  border-radius:999px;
  font-weight:700;
  padding:.75rem 1.6rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
  border:2px solid transparent;
  white-space:nowrap;
}
.btn-lg{padding:1rem 2rem; font-size:1.05rem;}
.btn:hover{transform:translateY(-2px);}

.btn-whatsapp{
  background:var(--wa-green);
  color:#fff;
  box-shadow:0 10px 25px -8px rgba(37,211,102,.55);
}
.btn-whatsapp:hover{background:var(--wa-green-dark); color:#fff;}
.btn-whatsapp i{font-size:1.15em;}

.btn-pulse{position:relative;}
.btn-pulse::after{
  content:"";
  position:absolute; inset:0;
  border-radius:999px;
  border:2px solid var(--wa-green);
  animation:pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing{
  0%{opacity:.6; transform:scale(1);}
  100%{opacity:0; transform:scale(1.35);}
}

.btn-outline-web{
  border-color:rgba(255,255,255,.35);
  color:#fff;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
}
.btn-outline-web:hover{background:rgba(255,255,255,.16); color:#fff;}

.btn-outline-web-dark{
  border-color:var(--navy-900);
  color:var(--navy-900);
  background:transparent;
}
.btn-outline-web-dark:hover{background:var(--navy-900); color:#fff;}

.btn-outline-plan{
  border-color:var(--border);
  color:var(--navy-900);
  background:var(--surface);
  width:100%;
  justify-content:center;
}
.btn-outline-plan:hover{border-color:var(--teal-600); background:var(--bg-alt);}

/* ============ Header ============ */
.site-header{
  background:rgba(246,248,252,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  z-index:1000;
}
.brand-logo{width:38px; height:38px; border-radius:9px; object-fit:cover;}
.brand-word{font-size:1.2rem; color:var(--navy-900); font-weight:600;}
.brand-word strong{color:var(--teal-700);}
.navbar-nav .nav-link{
  color:var(--ink-soft);
  font-weight:600;
  font-size:.95rem;
  padding:.4rem .2rem !important;
}
.navbar-nav .nav-link:hover{color:var(--navy-900);}
.toggler-bars{display:flex; flex-direction:column; gap:5px; width:22px;}
.toggler-bars span{height:2px; background:var(--navy-900); border-radius:2px;}
.navbar-toggler{border:none; box-shadow:none !important;}

/* ============ Hero ============ */
.hero-section{
  position:relative;
  background:radial-gradient(120% 100% at 20% -10%, var(--navy-800) 0%, var(--navy-950) 65%);
  color:#fff;
  padding:5.5rem 0 6rem;
  overflow:hidden;
}
.hero-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(38% 45% at 88% 8%, rgba(4,210,192,.35) 0%, transparent 70%),
    radial-gradient(30% 30% at 5% 95%, rgba(4,210,192,.18) 0%, transparent 70%);
  pointer-events:none;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(4,210,192,.12);
  border:1px solid rgba(4,210,192,.35);
  color:var(--teal-500);
  font-weight:700;
  font-size:.82rem;
  padding:.4rem .9rem;
  border-radius:999px;
  margin-bottom:1.4rem;
}
.hero-title{
  font-size:clamp(2.1rem, 4.4vw, 3.3rem);
  font-weight:600;
  line-height:1.08;
  margin-bottom:1.2rem;
}
.hero-subtitle{
  font-size:1.1rem;
  color:rgba(255,255,255,.78);
  max-width:520px;
  margin-bottom:2rem;
}
.hero-ctas{display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1rem;}
.hero-microcopy{color:rgba(255,255,255,.55); font-size:.9rem;}

.hero-visual{position:relative; max-width:440px; margin-inline:auto;}
.dash-card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:1.6rem;
  box-shadow:var(--shadow-soft);
  color:var(--ink);
  transform:rotate(-1.5deg);
}
.dash-card-head{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.92rem; color:var(--navy-900);
  margin-bottom:1.1rem;
}
.dash-dot{width:10px; height:10px; border-radius:50%; background:var(--wa-green); box-shadow:0 0 0 4px rgba(37,211,102,.2);}
.dash-grid{display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:1.3rem;}
.dash-stat{
  background:var(--bg-alt);
  border-radius:14px;
  padding:.8rem .9rem;
}
.dash-stat-label{display:flex; align-items:center; gap:.4rem; font-size:.76rem; color:var(--ink-soft); font-weight:600; margin-bottom:.3rem;}
.dash-stat strong{font-size:1.35rem; color:var(--navy-900);}
.dash-funnel{display:flex; flex-direction:column; gap:.5rem;}
.dash-funnel-bar{
  position:relative;
  height:30px;
  background:var(--bg-alt);
  border-radius:8px;
  overflow:hidden;
  display:flex; align-items:center;
}
.dash-funnel-bar::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width:var(--w);
  background:linear-gradient(90deg, var(--teal-600), var(--teal-500));
  border-radius:8px;
}
.dash-funnel-bar span{position:relative; z-index:1; font-size:.72rem; font-weight:700; color:var(--navy-950); padding-left:.7rem;}

.wa-chip{
  position:absolute;
  bottom:-18px; left:-10px;
  background:var(--surface);
  border-radius:16px;
  padding:.7rem 1rem;
  display:flex; align-items:center; gap:.6rem;
  box-shadow:var(--shadow-card);
  animation:floatY 3.6s ease-in-out infinite;
}
.wa-chip i{
  background:var(--wa-green); color:#fff;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
.wa-chip strong{display:block; font-size:.8rem; color:var(--navy-900);}
.wa-chip span{display:block; font-size:.72rem; color:var(--ink-soft);}
@keyframes floatY{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}

/* ============ Section shells ============ */
section{padding:5rem 0;}
.section-head{max-width:760px; margin:0 auto 3rem; text-align:center;}
.section-kicker{
  display:inline-block;
  font-weight:800; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal-700);
  margin-bottom:.9rem;
}
.section-kicker-onlight{color:var(--teal-500);}
.section-head h2{font-size:clamp(1.6rem, 3vw, 2.3rem); font-weight:600; color:var(--navy-950); line-height:1.2;}
.section-lead{color:var(--ink-soft); font-size:1.05rem; margin-top:1rem;}
.section-head-light h2{color:#fff;}
.section-lead-onlight{color:rgba(255,255,255,.72);}

/* ============ Problema ============ */
.problema-section{background:var(--surface);}
.problem-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:1.6rem 1.2rem;
  height:100%;
  text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.problem-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card);}
.problem-card i{font-size:1.9rem; color:var(--navy-800); margin-bottom:.8rem;}
.problem-card p{font-weight:600; color:var(--ink); font-size:.95rem; margin:0;}
.problema-close{
  text-align:center; margin-top:2.5rem; font-size:1.2rem; font-weight:600; color:var(--navy-950);
}
.problema-close span{color:var(--teal-700);}

/* ============ Valor ============ */
.valor-section{
  background:linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  color:#fff;
}
.valor-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md);
  padding:1.8rem 1.4rem;
  height:100%;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.valor-card:hover{transform:translateY(-6px); background:rgba(255,255,255,.1);}
.valor-icon{
  width:52px; height:52px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--teal-500), var(--teal-700));
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:#03231F;
  margin-bottom:1rem;
}
.valor-card h3{font-size:1.1rem; margin-bottom:.5rem; font-weight:600;}
.valor-card p{color:rgba(255,255,255,.68); font-size:.92rem; margin:0;}
.valor-ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:3rem;}

/* ============ Cómo funciona ============ */
.como-section{background:var(--bg);}
.step-card{
  background:var(--surface);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  padding:2rem 1.6rem;
  height:100%;
  position:relative;
}
.step-num{
  font-family:var(--font-display);
  font-size:2.4rem;
  font-weight:600;
  color:var(--teal-500);
  -webkit-text-stroke:1.5px var(--navy-900);
  display:block;
  margin-bottom:.6rem;
}
.step-card h3{font-size:1.25rem; color:var(--navy-950); margin-bottom:.5rem;}
.step-card p{color:var(--ink-soft); margin:0;}
.como-close{text-align:center; margin-top:2.5rem; font-weight:600; font-size:1.15rem; color:var(--navy-950);}

/* ============ WhatsApp demo / phone mock ============ */
.wa-demo-section{
  background:radial-gradient(120% 100% at 90% 0%, #0F3D3A 0%, var(--navy-950) 60%);
  color:#fff;
}
.wa-feature-list{margin:1.6rem 0 2rem;}
.wa-feature-list li{
  display:flex; align-items:flex-start; gap:.6rem;
  color:rgba(255,255,255,.85);
  font-size:.98rem;
  padding:.4rem 0;
}
.wa-feature-list i{color:var(--wa-green); margin-top:.15rem;}

.phone-mock{
  max-width:340px;
  margin-inline:auto;
  background:#0D1B22;
  border-radius:38px;
  padding:14px;
  box-shadow:var(--shadow-soft);
  border:2px solid rgba(255,255,255,.08);
}
.phone-mock-notch{
  width:90px; height:6px; background:rgba(255,255,255,.15); border-radius:4px;
  margin:0 auto 10px;
}
.phone-mock-header{
  display:flex; align-items:center; gap:.6rem;
  background:linear-gradient(135deg, var(--navy-800), var(--navy-950));
  border-radius:18px 18px 0 0;
  padding:.8rem 1rem;
}
.phone-mock-avatar{width:34px; height:34px; border-radius:9px; object-fit:cover;}
.phone-mock-header strong{display:block; font-size:.92rem; color:#fff;}
.phone-mock-header span{font-size:.72rem; color:var(--teal-500);}
.phone-mock-body{
  background:#E9EEF3;
  background-image:
    radial-gradient(rgba(10,46,87,.05) 1px, transparent 1px);
  background-size:14px 14px;
  padding:1rem .9rem;
  min-height:380px;
  max-height:420px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:.6rem;
}
.chat-bubble{
  max-width:82%;
  padding:.6rem .85rem;
  border-radius:14px;
  font-size:.85rem;
  line-height:1.4;
  box-shadow:0 2px 6px rgba(10,20,40,.08);
}
.chat-bubble-out{
  align-self:flex-end;
  background:#DCF8C6;
  color:#0B1526;
  border-bottom-right-radius:4px;
}
.chat-bubble-in{
  align-self:flex-start;
  background:#fff;
  color:#0B1526;
  border-bottom-left-radius:4px;
}
.chat-menu{
  align-self:flex-start;
  background:#fff;
  border-radius:14px;
  border-bottom-left-radius:4px;
  padding:.7rem;
  width:92%;
  box-shadow:0 2px 6px rgba(10,20,40,.08);
}
.chat-menu-title{display:block; font-weight:700; font-size:.82rem; color:var(--navy-900); margin-bottom:.5rem;}
.chat-menu-item{
  display:flex; align-items:center; gap:.5rem;
  color:var(--wa-green-dark);
  font-weight:600;
  font-size:.82rem;
  padding:.45rem 0;
  border-top:1px solid #EEF1F5;
}
.chat-menu-item:first-of-type{border-top:none;}
.chat-menu-item-link{color:var(--navy-800);}
.phone-mock-inputbar{
  display:flex; align-items:center; gap:.6rem;
  background:#0D1B22;
  border-radius:0 0 18px 18px;
  padding:.7rem 1rem;
  color:rgba(255,255,255,.45);
  font-size:.82rem;
}
.phone-mock-inputbar span{flex:1;}
.phone-mock-inputbar i:last-child{color:var(--wa-green);}

/* ============ Qué puedes administrar ============ */
.admin-section{background:var(--surface);}
.admin-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem;
}
.admin-chip{
  display:flex; align-items:center; gap:.55rem;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.7rem 1.2rem;
  font-weight:600;
  font-size:.9rem;
  color:var(--navy-900);
  transition:background .25s, transform .25s;
}
.admin-chip:hover{background:var(--teal-500); color:#03231F; transform:translateY(-3px);}
.admin-chip i{color:var(--teal-700);}
.admin-chip:hover i{color:#03231F;}

/* ============ Celular / Web split ============ */
.split-section{background:var(--bg);}
.split-card{
  border-radius:var(--radius-lg);
  padding:2.2rem;
  height:100%;
}
.split-card-mobile{
  background:linear-gradient(160deg, var(--wa-green-dark), var(--wa-green));
  color:#04240F;
}
.split-card-web{
  background:linear-gradient(160deg, var(--navy-900), var(--navy-950));
  color:#fff;
}
.split-card-head{display:flex; align-items:center; gap:.7rem; margin-bottom:1.3rem;}
.split-card-head i{font-size:1.5rem;}
.split-card-head h3{font-size:1.3rem; margin:0; font-weight:600;}
.split-list li{
  padding:.55rem 0;
  border-top:1px solid rgba(255,255,255,.22);
  font-weight:600;
  font-size:.96rem;
}
.split-list li:first-child{border-top:none;}
.split-close{text-align:center; margin-top:2.3rem; font-size:1.1rem; font-weight:600; color:var(--navy-950);}

/* ============ Planes ============ */
.planes-section{
  background:radial-gradient(120% 100% at 10% 0%, var(--navy-800) 0%, var(--navy-950) 60%);
  color:#fff;
}
.plan-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-md);
  padding:2rem 1.6rem;
  height:100%;
  display:flex; flex-direction:column;
  position:relative;
}
.plan-card h3{font-size:1.2rem; margin-bottom:.6rem;}
.plan-price{font-size:1.9rem; font-family:var(--font-display); font-weight:600; margin:0;}
.plan-price span{font-size:.75rem; font-weight:600; color:rgba(255,255,255,.55); display:block; margin-top:.1rem;}
.plan-price-year{font-size:.78rem; color:rgba(255,255,255,.5); margin:.2rem 0 0;}
.plan-desc{color:rgba(255,255,255,.65); font-size:.88rem; margin:.9rem 0 1.1rem;}
.plan-features{margin-bottom:1.6rem; flex:1;}
.plan-features li{display:flex; gap:.5rem; align-items:flex-start; font-size:.86rem; color:rgba(255,255,255,.85); padding:.3rem 0;}
.plan-features i{color:var(--teal-500); margin-top:.15rem;}
.plan-card-featured{
  background:linear-gradient(160deg, rgba(4,210,192,.14), rgba(255,255,255,.05));
  border-color:var(--teal-500);
  transform:scale(1.03);
}
.plan-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--teal-500); color:#03231F;
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:.3rem .8rem; border-radius:999px;
}
.planes-note{text-align:center; color:rgba(255,255,255,.5); font-size:.85rem; margin-top:1.5rem;}

/* ============ Para quién ============ */
.quien-section{background:var(--surface);}
.quien-tags{display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; max-width:900px; margin:0 auto;}
.quien-tags span{
  border:1.5px solid var(--navy-800);
  color:var(--navy-900);
  font-weight:600;
  font-size:.88rem;
  padding:.5rem 1.1rem;
  border-radius:999px;
}
.quien-tags span:nth-child(3n+1){border-color:var(--teal-600); color:var(--teal-700);}
.quien-close{text-align:center; max-width:640px; margin:2.3rem auto 0; font-size:1.1rem; font-weight:600; color:var(--navy-950);}

/* ============ Beneficios ============ */
.beneficios-section{
  background:linear-gradient(160deg, #0F3D3A, var(--navy-950));
  color:#fff;
}
.beneficio-item{
  display:flex; align-items:center; gap:.7rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:1rem 1.2rem;
  font-weight:600;
  font-size:.95rem;
  height:100%;
}
.beneficio-item i{color:var(--teal-500); font-size:1.15rem;}

/* ============ Comparación ============ */
.comparacion-section{background:var(--bg);}
.compare-table{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  max-width:820px;
  margin:0 auto;
}
.compare-col{border-radius:var(--radius-md); padding:1.8rem 1.5rem;}
.compare-col-without{background:var(--surface); border:1px solid var(--border);}
.compare-col-with{background:linear-gradient(160deg, var(--navy-900), var(--navy-950)); color:#fff;}
.compare-col h3{font-size:1.05rem; display:flex; align-items:center; gap:.5rem; margin-bottom:1.1rem;}
.compare-col-without h3{color:#B3413B;}
.compare-col-with h3{color:var(--teal-500);}
.compare-col li{padding:.5rem 0; font-size:.92rem; border-top:1px dashed var(--border);}
.compare-col-with li{border-top:1px dashed rgba(255,255,255,.18);}
.compare-col li:first-child{border-top:none;}

/* ============ Demo ============ */
.demo-section{
  position:relative;
  background:var(--wa-green);
  color:#04240F;
  overflow:hidden;
}
.demo-glow{
  position:absolute; inset:0;
  background:radial-gradient(50% 80% at 85% 20%, rgba(255,255,255,.35), transparent 70%);
}
.demo-box{max-width:680px; margin:0 auto; text-align:center; position:relative;}
.demo-box h2{font-size:clamp(1.6rem, 3.2vw, 2.2rem); font-weight:600; margin-bottom:1rem;}
.demo-box p{font-size:1.05rem; margin-bottom:2rem; color:rgba(4,36,15,.75);}
.demo-ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;}
.demo-ctas .btn-outline-web{border-color:rgba(4,36,15,.35); color:#04240F; background:rgba(255,255,255,.25);}
.demo-microcopy{margin-top:1.4rem; font-weight:700; font-size:.9rem;}

/* ============ FAQ ============ */
.faq-section{background:var(--surface);}
.faq-accordion{max-width:760px; margin:0 auto;}
.accordion-item{
  border:none;
  border-bottom:1px solid var(--border);
  background:transparent;
}
.accordion-button{
  font-weight:700;
  color:var(--navy-950);
  background:transparent;
  padding:1.2rem 0;
  box-shadow:none !important;
}
.accordion-button:not(.collapsed){color:var(--teal-700); background:transparent;}
.accordion-button::after{filter:hue-rotate(140deg) saturate(2);}
.accordion-body{color:var(--ink-soft); padding:0 0 1.2rem;}

/* ============ Footer ============ */
.site-footer{background:var(--navy-950); color:rgba(255,255,255,.7); padding:4rem 0 1.5rem;}
.footer-brand{display:flex; align-items:center; gap:.6rem; margin-bottom:1rem;}
.footer-brand img{width:36px; height:36px; border-radius:9px;}
.footer-brand span{font-family:var(--font-display); font-size:1.15rem; color:#fff;}
.footer-brand strong{color:var(--teal-500);}
.footer-tagline{font-size:.9rem; max-width:280px; margin-bottom:.8rem;}
.footer-address{font-size:.85rem; color:rgba(255,255,255,.5);}
.site-footer h4{color:#fff; font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem;}
.footer-links li{margin-bottom:.6rem; font-size:.9rem;}
.footer-links a{display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.68); transition:color .2s;}
.footer-links a:hover{color:var(--teal-500);}
.site-footer hr{border-color:rgba(255,255,255,.12); margin:2rem 0 1.2rem;}
.footer-copy{font-size:.82rem; color:rgba(255,255,255,.45); text-align:center; margin:0;}

/* ============ Botón flotante WhatsApp ============ */
.wa-float{
  position:fixed; bottom:22px; right:22px;
  width:58px; height:58px;
  background:var(--wa-green);
  color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  z-index:900;
  transition:transform .25s var(--ease);
}
.wa-float:hover{transform:scale(1.08); color:#fff;}

/* ============ Responsive ============ */
@media (max-width:991.98px){
  .compare-table{grid-template-columns:1fr;}
  section{padding:3.6rem 0;}
  .plan-card-featured{transform:none;}
}
@media (max-width:575.98px){
  .hero-ctas{flex-direction:column; align-items:stretch;}
  .hero-ctas .btn{justify-content:center;}
  .demo-ctas{flex-direction:column; align-items:stretch;}
}