/* NextGen OPD — marketing landing page stylesheet */

:root{
  --lp-gradient: linear-gradient(135deg, var(--pc-primary) 0%, #4338ca 55%, var(--pc-accent) 130%);
  --lp-gradient-soft: linear-gradient(135deg, rgba(79,70,229,.10) 0%, rgba(14,165,164,.10) 100%);
  --lp-ink-soft:#4a4a68;
  --lp-radius:18px;
  --lp-radius-sm:12px;
  --lp-shadow-sm:0 4px 16px rgba(17,24,39,.06);
  --lp-shadow-md:0 12px 32px rgba(17,24,39,.10);
  --lp-shadow-lg:0 24px 60px rgba(79,70,229,.20);
  --lp-container:1180px;
}

.lp-body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--pc-ink); background:#fff; line-height:1.6; overflow-x:hidden; }
.lp-body h1, .lp-body h2, .lp-body h3, .lp-body h4{ font-family:'Inter',sans-serif; font-weight:800; line-height:1.22; color:var(--pc-ink); }
.lp-container{ max-width:var(--lp-container); margin:0 auto; padding:0 24px; }
.lp-section{ padding:88px 0; }
.lp-section.tight{ padding:56px 0; }
.lp-section.alt{ background:var(--pc-bg); }
.lp-section-head{ text-align:center; max-width:680px; margin:0 auto 52px; }
.lp-section-head h2{ font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:12px; }
.lp-section-head p{ color:var(--pc-muted); font-size:1.05rem; }
.lp-tag{ display:inline-block; padding:6px 16px; border-radius:999px; background:var(--lp-gradient-soft); color:var(--pc-primary-dark); font-weight:700; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px; }
.lp-text-gradient{ background:var(--lp-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }

.lp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 28px; border-radius:999px; font-weight:700; font-size:.96rem; border:none; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; white-space:nowrap; cursor:pointer; }
.lp-btn-primary{ background:var(--lp-gradient); color:#fff; box-shadow:0 10px 24px rgba(79,70,229,.35); }
.lp-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(79,70,229,.45); color:#fff; }
.lp-btn-outline{ background:#fff; color:var(--pc-primary-dark); border:2px solid var(--pc-border); }
.lp-btn-outline:hover{ border-color:var(--pc-primary); transform:translateY(-2px); color:var(--pc-primary-dark); }
.lp-btn-white{ background:#fff; color:var(--pc-primary-dark); box-shadow:var(--lp-shadow-md); }
.lp-btn-white:hover{ transform:translateY(-2px); color:var(--pc-primary-dark); }
.lp-btn-block{ width:100%; }
.lp-btn-lg{ padding:14px 30px; font-size:1rem; }

/* Header */
.lp-header-wrap{ position:sticky; top:0; z-index:1000; }
.lp-header{ padding:16px 0; transition:all .25s ease; background:transparent; }
.lp-header .lp-container{ display:flex; align-items:center; justify-content:space-between; }
.lp-header.scrolled{ background:rgba(255,255,255,.9); backdrop-filter:blur(14px); box-shadow:var(--lp-shadow-sm); padding:11px 0; }
.lp-logo{ display:inline-flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.2rem; color:var(--pc-ink); }
.lp-logo .dot{ width:10px; height:10px; border-radius:50%; background:var(--lp-gradient); box-shadow:0 0 0 4px rgba(79,70,229,.2); }
.lp-nav-links{ display:flex; align-items:center; gap:30px; }
.lp-nav-links a{ font-weight:600; font-size:.92rem; color:var(--pc-ink); opacity:.85; text-decoration:none; transition:opacity .2s; }
.lp-nav-links a:hover{ opacity:1; }
.lp-header-actions{ display:flex; align-items:center; gap:12px; }
.lp-nav-toggle, .lp-nav-close{ display:none; background:none; border:none; font-size:1.4rem; color:var(--pc-ink); cursor:pointer; }

@media (max-width:960px){
  .lp-nav-links{ position:fixed; top:0; right:-100%; width:min(320px,85vw); height:100vh; background:#fff; flex-direction:column; justify-content:center; gap:26px; transition:right .35s ease; box-shadow:-10px 0 40px rgba(0,0,0,.15); z-index:1001; }
  .lp-nav-links.open{ right:0; }
  .lp-nav-links a{ font-size:1.1rem; }
  .lp-nav-toggle{ display:block; }
  .lp-header-actions .lp-btn-primary{ display:none; }
  .lp-nav-close{ display:flex; align-items:center; justify-content:center; position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; background:var(--pc-bg); }
  .lp-nav-cta{ display:inline-flex; margin-top:6px; }
}
.lp-nav-cta{ display:none; }

/* Hero */
.lp-hero{ position:relative; padding:110px 0 60px; background:var(--lp-gradient); overflow:hidden; color:#fff; }
.lp-hero::before, .lp-hero::after{ content:''; position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; }
.lp-hero::before{ width:420px; height:420px; background:#ffffff33; top:-140px; right:-100px; }
.lp-hero::after{ width:340px; height:340px; background:#ffffff22; bottom:-120px; left:-80px; }
.lp-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; position:relative; z-index:2; min-width:0; }
.lp-hero-grid > div{ min-width:0; }
.lp-hero-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); padding:6px 16px; border-radius:999px; font-size:.78rem; font-weight:700; margin-bottom:14px; }
.lp-hero h1{ font-size:clamp(1.9rem,3.2vw,2.7rem); color:#fff; margin-bottom:14px; }
.lp-hero p.lead{ font-size:1rem; opacity:.94; max-width:520px; margin-bottom:20px; }
.lp-hero-price-card{ display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); padding:10px 18px; border-radius:var(--lp-radius-sm); margin-bottom:18px; font-weight:700; font-size:.85rem; }
.lp-hero-price-card .free{ background:#fff; color:var(--pc-primary-dark); padding:3px 12px; border-radius:8px; font-weight:800; font-size:.85rem; }
.lp-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.lp-hero-trust{ display:flex; align-items:center; gap:10px; font-size:.88rem; opacity:.92; }

.lp-hero-visual{ position:relative; }
.lp-mock{ position:relative; display:block; background:#fff; border-radius:16px; box-shadow:var(--lp-shadow-lg); overflow:hidden; transform:rotate(1deg); transition:transform .25s ease; }
.lp-mock:hover{ transform:rotate(0deg) translateY(-4px); }
.lp-mock .bar{ background:#f1f1f8; padding:10px 14px; display:flex; gap:6px; }
.lp-mock .bar span{ width:10px; height:10px; border-radius:50%; background:#ddd; display:inline-block; }
.lp-mock .screen{ padding:20px; color:var(--pc-ink); }
.lp-mock-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.lp-mock-stat{ background:var(--pc-bg); border-radius:10px; padding:10px; }
.lp-mock-stat .lbl{ font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; color:var(--pc-muted); font-weight:700; }
.lp-mock-stat .val{ font-size:1.15rem; font-weight:800; margin-top:2px; color:var(--pc-ink); }
.lp-mock-stat .val.accent{ color:var(--pc-primary); }
.lp-mock-row{ height:34px; border-radius:8px; background:var(--pc-bg); margin-bottom:8px; display:flex; align-items:center; padding:0 12px; gap:10px; }
.lp-mock-row .d{ width:8px; height:8px; border-radius:50%; background:var(--pc-accent); flex-shrink:0; }
.lp-mock-row .line{ height:8px; border-radius:4px; background:#e3e3f0; flex:1; }
.lp-mock-badge{ position:absolute; top:14px; right:14px; z-index:2; background:var(--lp-gradient); color:#fff; font-size:.68rem; font-weight:800; padding:6px 12px; border-radius:999px; box-shadow:0 6px 16px rgba(79,70,229,.4); }
.lp-floating-chip{ position:absolute; background:#fff; color:var(--pc-ink); padding:11px 16px; border-radius:var(--lp-radius-sm); box-shadow:var(--lp-shadow-md); font-size:.82rem; font-weight:700; display:flex; align-items:center; gap:8px; }
.lp-chip-1{ top:-16px; left:-24px; }
.lp-chip-2{ bottom:-16px; right:-16px; }
@media (max-width:860px){ .lp-hero-grid{ grid-template-columns:1fr; } .lp-hero-visual{ order:-1; } .lp-mock{ transform:none; } .lp-floating-chip{ display:none; } }

/* Trust chips */
.lp-badge-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.lp-badge-chip{ display:flex; align-items:center; gap:9px; background:var(--pc-bg); padding:13px 20px; border-radius:999px; font-weight:600; font-size:.88rem; color:var(--lp-ink-soft); }
a.lp-badge-chip{ text-decoration:none; transition:background .18s ease, transform .18s ease; }
a.lp-badge-chip:hover{ background:var(--lp-gradient-soft); transform:translateY(-2px); }

/* Comparison table */
.lp-compare-wrap{ overflow-x:auto; }
table.lp-compare{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:var(--lp-radius); overflow:hidden; box-shadow:var(--lp-shadow-sm); min-width:560px; }
table.lp-compare th, table.lp-compare td{ padding:16px 20px; text-align:center; border-bottom:1px solid var(--pc-border); }
table.lp-compare th:first-child, table.lp-compare td:first-child{ text-align:left; }
table.lp-compare thead th{ background:var(--pc-bg); font-size:.92rem; }
table.lp-compare thead th.hl{ background:var(--lp-gradient); color:#fff; }
table.lp-compare tbody tr:last-child td{ border-bottom:none; }
table.lp-compare .yes{ color:var(--pc-success); font-weight:800; }
table.lp-compare .no{ color:var(--pc-danger); font-weight:800; }

/* Features */
.lp-feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.lp-feature-card{ background:#fff; border:1px solid var(--pc-border); border-radius:var(--lp-radius); padding:30px 24px; transition:transform .25s ease, box-shadow .25s ease; }
.lp-feature-card:hover{ transform:translateY(-6px); box-shadow:var(--lp-shadow-md); }
.lp-feature-icon{ width:52px; height:52px; border-radius:14px; background:var(--lp-gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; margin-bottom:18px; }
.lp-feature-card h4{ font-size:1.05rem; margin-bottom:10px; }
.lp-feature-card ul{ list-style:none; padding:0; margin:0; }
.lp-feature-card ul li{ color:var(--pc-muted); font-size:.88rem; padding:4px 0; display:flex; gap:8px; align-items:flex-start; }
.lp-feature-card ul li::before{ content:'✓'; color:var(--pc-success); font-weight:800; margin-top:1px; }
@media (max-width:1024px){ .lp-feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .lp-feature-grid{ grid-template-columns:1fr; } }

/* Steps */
.lp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.lp-step-card{ text-align:center; padding:0 8px; }
.lp-step-num{ width:60px; height:60px; border-radius:50%; background:var(--lp-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800; margin:0 auto 18px; box-shadow:0 10px 24px rgba(79,70,229,.3); }
.lp-step-card h4{ margin-bottom:8px; font-size:1.05rem; }
.lp-step-card p{ color:var(--pc-muted); font-size:.9rem; }
@media (max-width:860px){ .lp-steps{ grid-template-columns:1fr; } }

/* Pricing */
.lp-pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1080px; margin:36px auto 0; align-items:stretch; }
.lp-price-card{ background:#fff; border:2px solid var(--pc-border); border-radius:var(--lp-radius); padding:32px 28px; position:relative; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; }
.lp-price-card:hover{ transform:translateY(-6px); }
.lp-price-card.popular{ border-color:var(--pc-primary); box-shadow:var(--lp-shadow-lg); }
.lp-popular-ribbon{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--lp-gradient); color:#fff; padding:6px 16px; border-radius:999px; font-size:.74rem; font-weight:800; white-space:nowrap; }
.lp-price-card h3{ font-size:1.2rem; margin-bottom:6px; }
.lp-price-card .tagline{ color:var(--pc-muted); font-size:.86rem; margin-bottom:20px; min-height:38px; }
.lp-price-value .amount{ font-size:2.2rem; font-weight:800; }
.lp-price-value .period{ color:var(--pc-muted); font-size:.88rem; }
.lp-price-card .sub-note{ color:var(--pc-muted); font-size:.82rem; margin-top:6px; }
.lp-price-card .save-note{ color:var(--pc-success); font-weight:700; font-size:.82rem; margin:6px 0 0; }
.lp-price-features{ list-style:none; padding:0; margin:22px 0 26px; flex:1; }
.lp-price-features li{ display:flex; gap:9px; align-items:flex-start; padding:6px 0; font-size:.88rem; color:var(--lp-ink-soft); }
.lp-price-features li::before{ content:'✓'; color:var(--pc-success); font-weight:800; margin-top:1px; }
@media (max-width:860px){ .lp-pricing-grid{ grid-template-columns:1fr; max-width:420px; } }

/* FAQ */
.lp-faq-list{ max-width:760px; margin:0 auto; }
.lp-faq-item{ background:#fff; border:1px solid var(--pc-border); border-radius:var(--lp-radius-sm); margin-bottom:12px; overflow:hidden; }
.lp-faq-question{ padding:18px 22px; display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:.96rem; cursor:pointer; }
.lp-faq-question .icon{ transition:transform .25s ease; color:var(--pc-primary); font-weight:800; }
.lp-faq-item.open .lp-faq-question .icon{ transform:rotate(45deg); }
.lp-faq-answer{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.lp-faq-item.open .lp-faq-answer{ max-height:220px; }
.lp-faq-answer p{ padding:0 22px 18px; color:var(--pc-muted); font-size:.92rem; }

/* Final CTA */
.lp-cta-band{ background:var(--lp-gradient); color:#fff; border-radius:24px; padding:56px 40px; text-align:center; position:relative; overflow:hidden; }
.lp-cta-band h2{ color:#fff; margin-bottom:10px; }
.lp-cta-band p{ opacity:.92; margin-bottom:26px; }

/* Footer */
.lp-footer{ background:#151327; color:#c7c5da; padding:56px 0 24px; }
.lp-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:36px; }
.lp-footer-logo{ display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.1rem; color:#fff; margin-bottom:10px; }
.lp-footer p{ font-size:.88rem; color:#9694b3; max-width:320px; }
.lp-footer h5{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }
.lp-footer ul{ list-style:none; padding:0; margin:0; }
.lp-footer ul li{ margin-bottom:9px; }
.lp-footer ul li a{ color:#c7c5da; text-decoration:none; font-size:.9rem; }
.lp-footer ul li a:hover{ color:#fff; }
.lp-footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.82rem; color:#8b88a8; }
@media (max-width:760px){ .lp-footer-grid{ grid-template-columns:1fr; } }

/* Scroll reveal — hidden state is opt-in via .js-aos (added by JS itself), so
   content is fully visible by default for no-JS users, crawlers, and instant
   anchor-jumps that skip past a section without ever rendering it mid-scroll. */
html{ scroll-behavior:smooth; }
[data-aos]{ transition:opacity .6s ease, transform .6s ease; }
.js-aos [data-aos]{ opacity:0; transform:translateY(22px); }
.js-aos [data-aos].aos-animate{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .js-aos [data-aos]{ opacity:1; transform:none; } }