/* ============================================================
   assets/css/main.css — SellsAdvantage Platform Styles
   ============================================================ */

:root {
  --green-900: #0d2818;
  --green-800: #1a3a2a;
  --green-700: #2d6a4f;
  --green-600: #40916c;
  --green-500: #52b788;
  --green-200: #b7e4c7;
  --green-100: #d8f3dc;
  --green-50:  #f0faf4;
  --white:     #ffffff;
  --gray-50:   #f9fafb;
  --gray-100:  #f3f4f6;
  --gray-200:  #e5e7eb;
  --gray-500:  #6b7280;
  --gray-700:  #374151;
  --gray-900:  #111827;
  --radius:    .75rem;
  --radius-lg: 1.25rem;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(45,106,79,.12);
  --shadow-lg: 0 16px 48px rgba(45,106,79,.18);
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--gray-900); background: #fff; overflow-x: hidden; }
h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', serif; line-height: 1.25; }
a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--green-600); }

/* Page fade-in */
@keyframes pageFadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
body { animation: pageFadeIn .4s ease both; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary-green {
  background: linear-gradient(135deg, var(--green-700), var(--green-600));
  color: #fff !important;
  border: none;
  border-radius: 2rem;
  font-weight: 600;
  font-size: .9rem;
  padding: .55rem 1.4rem;
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative; overflow: hidden;
}
.btn-primary-green::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .5s ease;
}
.btn-primary-green:hover::after { transform: translateX(100%); }
.btn-primary-green:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(45,106,79,.3); }

.btn-outline-green {
  background: transparent;
  color: var(--green-700) !important;
  border: 2px solid var(--green-500);
  border-radius: 2rem;
  font-weight: 600;
  font-size: .9rem;
  padding: .5rem 1.4rem;
  transition: all var(--transition);
}
.btn-outline-green:hover { background: var(--green-700); color: #fff !important; border-color: var(--green-700); }

.btn-hero-cta {
  background: #fff;
  color: var(--green-800) !important;
  border: none;
  border-radius: 2rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1rem;
  padding: .9rem 2rem;
  display: inline-flex; align-items: center;
  box-shadow: 0 4px 20px rgba(255,255,255,.25);
  transition: all var(--transition);
  position: relative; overflow: hidden;
}
.btn-hero-cta::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(82,183,136,.2) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .5s ease;
}
.btn-hero-cta:hover::after { transform: translateX(100%); }
.btn-hero-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(255,255,255,.35); color: #fff !important;}

.btn-hero-outline {
  background: rgba(255,255,255,.1);
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 2rem;
  font-weight: 600;
  padding: .88rem 2rem;
  display: inline-flex; align-items: center;
  transition: all var(--transition);
}
.btn-hero-outline:hover { background: rgba(255,255,255,.2); border-color: #fff; }

.btn-xs { padding: .2rem .55rem; font-size: .78rem; border-radius: .4rem; }

/* ── FORM CONTROLS ─────────────────────────────────────────── */
.form-ctrl {
  border: 1.5px solid var(--green-200);
  border-radius: .65rem;
  padding: .65rem 1rem;
  font-size: .92rem;
  color: var(--gray-900);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-ctrl:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(82,183,136,.2); outline: none; }
.form-ctrl::placeholder { color: #b0c4ba; }
.form-select.form-ctrl { padding-right: 2.5rem; }
.input-group .input-group-text { background: var(--green-50); border: 1.5px solid var(--green-200); color: var(--green-700); }
.req { color: #dc2626; }

/* ── NAVBAR ────────────────────────────────────────────────── */
.navbar-main {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--green-100);
  padding: .75rem 0;
  transition: box-shadow var(--transition);
}
.navbar-main.scrolled { box-shadow: var(--shadow-md); }
.navbar-brand { font-family: 'Inter', sans-serif; font-size: 1.25rem; color: var(--green-800) !important; }
.navbar-brand strong { font-weight: 800; color: var(--green-700); }
.nav-link { font-weight: 500; font-size: .9rem; color: var(--gray-700) !important; padding: .4rem .8rem !important; border-radius: .4rem; transition: all .2s; }
.nav-link:hover { background: var(--green-50); color: var(--green-700) !important; }
.navbar-toggler { border: 1.5px solid var(--green-200); padding: .3rem .5rem; }
.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='%232d6a4f' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

/* ── HERO SECTION ──────────────────────────────────────────── */
.hero-main {
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 45%, var(--green-700) 100%);
  position: relative;
  overflow: hidden;
}
.min-vh-hero { min-height: 80vh; }
.hero-bg-shapes { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.shape { position:absolute;border-radius:50%;opacity:.06; }
.shape-1 { width:600px;height:600px;background:var(--green-500);top:-200px;right:-200px; }
.shape-2 { width:400px;height:400px;background:#fff;bottom:-150px;left:-100px; }
.shape-3 { width:200px;height:200px;background:var(--green-200);top:40%;left:40%; }
.hero-badge {
  display:inline-flex;align-items:center;
  background:rgba(255,255,255,.12);color:var(--green-100);
  border:1px solid rgba(183,228,199,.3);backdrop-filter:blur(4px);
  font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  padding:.35rem .9rem;border-radius:2rem;margin-bottom:1.2rem;
}
.hero-h1 { font-size:clamp(2.2rem,5.5vw,3.6rem);color:#fff;line-height:1.15;margin-bottom:1.2rem; }
.hero-h1 em { color:var(--green-200);font-style:italic; }
.hero-p { color:rgba(255,255,255,.78);font-size:clamp(.95rem,2vw,1.1rem);font-weight:300;max-width:480px;line-height:1.7; }
.hero-note { color:rgba(255,255,255,.55);font-size:.82rem; }
.hero-wave { position:absolute;bottom:-1px;left:0;right:0;line-height:0; }
.hero-wave svg { display:block; }

/* Browser mockup */
.hero-mockup { position:relative;padding:1rem; }
.mockup-browser { background:#fff;border-radius:1rem;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden; }
.mockup-bar { background:#f3f4f6;padding:.6rem 1rem;display:flex;align-items:center;gap:.5rem; }
.dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
.dot.red{background:#ff5f57;}.dot.yellow{background:#ffbd2e;}.dot.green{background:#28c941;}
.mockup-url { flex:1;background:#fff;border-radius:.4rem;padding:.2rem .7rem;font-size:.72rem;color:var(--gray-500);margin-left:.5rem; }
.mockup-url strong { color:var(--green-700); }
.mockup-screen { padding:.75rem; }
.mock-card { background:#fff;border:1px solid #e5e7eb; }
.mockup-float {
  position:absolute;background:#fff;border-radius:.75rem;padding:.5rem .9rem;
  box-shadow:0 4px 20px rgba(0,0,0,.15);display:flex;align-items:center;gap:.5rem;
  font-size:.82rem;font-weight:500;
}
.mockup-float-1 { bottom:10%;left:-5%; animation: floatA 3s ease-in-out infinite; }
.mockup-float-2 { top:15%;right:-5%; animation: floatB 3.5s ease-in-out infinite; }
@keyframes floatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* ── STATS STRIP ───────────────────────────────────────────── */
.stat-pill { display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.75rem; }
.stat-pill i { font-size:1.4rem;color:var(--green-600); }
.stat-pill strong { font-size:1.3rem;font-weight:800;color:var(--green-800);font-family:'Playfair Display',serif; }
.stat-pill span { font-size:.78rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.06em; }

/* ── SECTION HELPERS ───────────────────────────────────────── */
.py-6 { padding-top:5rem;padding-bottom:5rem; }
.section-badge {
  display:inline-block;background:var(--green-100);color:var(--green-700);
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  padding:.3rem .8rem;border-radius:2rem;margin-bottom:.75rem;
}
.section-h2 { font-size:clamp(1.7rem,4vw,2.4rem);color:var(--green-800);margin-bottom:1rem; }
.bg-light-green { background:#f7fdf9; }

/* ── HOW IT WORKS ──────────────────────────────────────────── */
.how-card {
  background:#fff;border:1px solid var(--green-100);border-radius:var(--radius-lg);
  padding:2rem 1.5rem;position:relative;transition:transform var(--transition),box-shadow var(--transition);
}
.how-card:hover { transform:translateY(-6px);box-shadow:var(--shadow-lg); }
.how-num { font-family:'Playfair Display',serif;font-size:3rem;font-weight:700;color:var(--green-100);position:absolute;top:.75rem;right:1.25rem;line-height:1; }
.how-icon { width:60px;height:60px;background:linear-gradient(135deg,var(--green-100),var(--green-200));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--green-700);margin:0 auto; }
.how-title { font-family:'Playfair Display',serif;color:var(--green-800);font-size:1.05rem; }
.how-desc { color:var(--gray-500);font-size:.88rem;line-height:1.7; }

/* ── FEATURES ──────────────────────────────────────────────── */
.feat-card { background:#fff;border:1px solid var(--green-100);border-radius:var(--radius-lg);padding:1.75rem;transition:transform var(--transition),box-shadow var(--transition); }
.feat-card:hover { transform:translateY(-5px);box-shadow:var(--shadow-md); }
.feat-icon { width:52px;height:52px;background:var(--green-50);border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--green-700); }
.feat-title { font-family:'Playfair Display',serif;font-size:1rem;color:var(--green-800);margin-bottom:.5rem; }
.feat-desc { color:var(--gray-500);font-size:.87rem;line-height:1.65;margin:0; }

/* ── TESTIMONIALS ──────────────────────────────────────────── */
.testimonial-rotator { position:relative; }
.testimonial-group { display:flex; flex-wrap:wrap; opacity:0; transition:opacity .5s ease; }
.testimonial-group.active { opacity:1; }
.testimonial-card {
  position:relative; overflow:hidden; height:100%;
  background:var(--t-bg,var(--green-50)); border:1px solid rgba(0,0,0,.04);
  border-radius:var(--radius-lg); padding:1.75rem;
  display:flex; flex-direction:column;
  transition:transform var(--transition), box-shadow var(--transition);
}
.testimonial-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.t-quote-icon { position:absolute; top:.5rem; right:1rem; font-size:3rem; line-height:1; color:var(--t-accent,var(--green-700)); opacity:.15; }
.t-stars { color:#f59e0b; font-size:.9rem; letter-spacing:.05em; }
.t-message { color:var(--gray-700); font-size:.88rem; line-height:1.7; margin:1rem 0; flex-grow:1; }
.t-author { display:flex; align-items:center; gap:.75rem; font-size:.82rem; }
.t-avatar {
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  background:var(--t-accent,var(--green-700)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-weight:700; font-size:.85rem;
}
.t-author strong { color:var(--green-800); }
.testimonial-dots { display:flex; justify-content:center; gap:.5rem; margin-top:2rem; }
.t-dot { width:10px; height:10px; border-radius:50%; background:var(--green-100); cursor:pointer; transition:background var(--transition), transform var(--transition); }
.t-dot.active { background:var(--green-700); transform:scale(1.25); }

/* ── PRICING ───────────────────────────────────────────────── */
.pricing-card {
  background:#fff;border:2px solid var(--green-100);border-radius:var(--radius-lg);
  padding:2rem 1.75rem;display:flex;flex-direction:column;position:relative;
  transition:transform var(--transition),box-shadow var(--transition);
}
.pricing-card:hover { transform:translateY(-6px);box-shadow:var(--shadow-lg); }
.pricing-popular { border-color:var(--green-700);box-shadow:0 0 0 4px rgba(45,106,79,.1); }
.popular-badge {
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--green-700);color:#fff;font-size:.75rem;font-weight:700;
  padding:.3rem 1rem;border-radius:2rem;white-space:nowrap;
}
.pricing-header { padding-bottom:1.25rem;border-bottom:1px solid var(--green-100);margin-bottom:1.25rem; }
.plan-name { font-family:'Inter',sans-serif;font-weight:700;color:var(--green-800);font-size:1rem;text-transform:uppercase;letter-spacing:.08em; }
.price-amount { font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:700;color:var(--green-700); }
.price-period { font-size:.9rem;color:var(--gray-500); }
.plan-features { list-style:none;padding:0;margin:0 0 1.5rem; flex:1; }
.plan-features li { font-size:.87rem;color:var(--gray-700);padding:.4rem 0;border-bottom:1px dashed var(--green-100); }
.plan-features li:last-child { border-bottom:none; }

/* ── BILLING TOGGLE ─────────────────────────────────────────── */
.billing-toggle-wrap {
  background:var(--green-50);border:2px solid var(--green-200);border-radius:3rem;
  padding:4px;
}
.billing-toggle-btn {
  background:transparent;border:none;outline:none;cursor:pointer;
  padding:.5rem 1.25rem;border-radius:2.5rem;font-size:.88rem;font-weight:600;
  color:var(--green-700);transition:all .2s ease;position:relative;white-space:nowrap;
}
.billing-toggle-btn.active {
  background:var(--green-700);color:#fff;box-shadow:0 2px 8px rgba(45,106,79,.3);
}
.toggle-badge {
  display:inline-block;background:#dcfce7;color:#15803d;
  font-size:.65rem;font-weight:700;padding:.1rem .45rem;border-radius:1rem;
  margin-left:.4rem;vertical-align:middle;letter-spacing:.02em;
}
.billing-toggle-btn.active .toggle-badge {
  background:rgba(255,255,255,.25);color:#fff;
}
.toggle-badge-gold {
  background:#fef9c3;color:#92400e;
}
.billing-toggle-btn.active .toggle-badge-gold {
  background:rgba(255,255,255,.25);color:#fff;
}
@media (max-width: 575px) {
  .billing-toggle-wrap {
    width:100%;
    justify-content:space-between;
  }
  .billing-toggle-btn {
    flex:1 1 0;
    min-width:0;
    padding:.45rem .35rem;
    font-size:.72rem;
    white-space:normal;
    line-height:1.25;
  }
  .toggle-badge {
    display:block;
    width:fit-content;
    margin:.2rem auto 0;
    font-size:.6rem;
    padding:.05rem .3rem;
  }
}
.billing-period-note { min-height:1.5em;transition:opacity .2s; }
.price-savings {
  display:inline-block;font-size:.8rem;font-weight:600;color:#15803d;
  background:#dcfce7;border-radius:.75rem;padding:.2rem .65rem;margin-top:.3rem;
}
.price-discount-badge {
  font-size:.7rem;font-weight:700;padding:.2rem .55rem;border-radius:1rem;
  white-space:nowrap;align-self:center;flex-shrink:0;
  transition:opacity .2s;
}
@media (max-width: 575px) {
  .price-row {
    flex-wrap:wrap;
    row-gap:.35rem;
  }
}

/* ── CTA SECTION ───────────────────────────────────────────── */
.section-cta { background:var(--green-50); }
.cta-box { background:linear-gradient(135deg,var(--green-800),var(--green-700));border-radius:2rem;padding:4rem 2rem;color:#fff; }
.cta-h2 { font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.75rem; }
.cta-p { color:rgba(255,255,255,.75);font-size:1.05rem; }

/* ── FOOTER ────────────────────────────────────────────────── */
.main-footer { background:var(--green-900);color:rgba(255,255,255,.65); }
.footer-brand span { font-family:'Inter',sans-serif;font-size:1.2rem;color:#fff;font-weight:600; }
.footer-brand strong { color:var(--green-500); }
.footer-tagline { font-size:.87rem;max-width:280px;color:rgba(255,255,255,.5); }
.footer-heading { color:var(--green-200);font-family:'Inter',sans-serif;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem; }
.footer-links { list-style:none;padding:0;margin:0; }
.footer-links li { margin-bottom:.4rem; }
.footer-links a { color:rgba(255,255,255,.5);font-size:.87rem;transition:color var(--transition); }
.footer-links a:hover { color:var(--green-200); }
.footer-hr { border-color:rgba(255,255,255,.1); }
.footer-copy { color:rgba(255,255,255,.35);font-size:.8rem; }

/* ── AUTH PAGES ────────────────────────────────────────────── */
.auth-body { margin:0;padding:0;min-height:100vh; }
.auth-split { display:flex;min-height:100vh; }
.auth-left {
  width:42%;background:linear-gradient(160deg,var(--green-900) 0%,var(--green-700) 100%);
  display:flex;align-items:center;justify-content:center;padding:3rem 2.5rem;position:relative;overflow:hidden;
}
.auth-left::before { content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,.04);top:-100px;right:-100px; }
.auth-left-inner { position:relative;z-index:1;max-width:380px; }
.auth-logo { display:flex;align-items:center;gap:.75rem;color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:1.2rem;text-decoration:none;margin-bottom:2rem; }
.auth-left-h2 { font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3vw,2.2rem);color:#fff;line-height:1.25;margin-bottom:1rem; }
.auth-left-p { color:rgba(255,255,255,.65);font-size:.95rem;line-height:1.7; }
.auth-perks { list-style:none;padding:0;margin-top:1.5rem; }
.auth-perks li { display:flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.8);font-size:.9rem;margin-bottom:.6rem; }
.auth-perks li i { color:var(--green-200);font-size:1rem; }
.auth-right { flex:1;background:#fff;display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem; }
.auth-form-wrap { width:100%;max-width:480px; }
.auth-logo-sm { color:var(--green-700);font-size:.88rem; }
.auth-form-title { font-family:'Playfair Display',serif;font-size:1.8rem;color:var(--green-800);margin-bottom:.25rem; }
.auth-form-sub { color:var(--gray-500);font-size:.9rem;margin-bottom:1.5rem; }

/* Plan selector on register */
.plan-selector-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem; }
.plan-option { cursor:pointer;display:block; }
.plan-option input { display:none; }
.plan-opt-inner {
  border:2px solid var(--green-200);border-radius:.75rem;padding:.85rem .6rem;text-align:center;
  display:flex;flex-direction:column;gap:.2rem;align-items:center;
  transition:all var(--transition);position:relative;
  font-size:.82rem;
}
.plan-option.selected .plan-opt-inner, .plan-opt-inner:hover { border-color:var(--green-700);background:var(--green-50); }
.plan-opt-inner strong { font-weight:700;color:var(--green-800);font-size:.85rem; }
.plan-opt-price { color:var(--green-700);font-weight:700;font-size:.9rem; }
.plan-opt-inner small { color:var(--gray-500); }
.plan-pop-tag {
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--green-700);color:#fff;font-size:.62rem;font-weight:700;
  padding:.1rem .5rem;border-radius:2rem;white-space:nowrap;
}

/* Subscribe page */
.subscribe-card { background:#fff;border:1.5px solid var(--green-200);border-radius:var(--radius-lg);padding:2.5rem 2rem;box-shadow:var(--shadow-md); }
.sub-icon-wrap { width:64px;height:64px;background:var(--green-100);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--green-700); }
.sub-summary { border:1px solid var(--green-100);border-radius:.75rem;overflow:hidden; }
.sub-summary > * { padding:.75rem 1rem; }
.sub-trust { display:flex;align-items:center;gap:.5rem;font-size:.83rem;color:var(--gray-500); }
.sub-trust i { color:var(--green-600);font-size:.9rem; }

/* Flash messages */
.flash-msg { animation: pageFadeIn .4s ease; }
.alert-success { background:var(--green-100);border-color:var(--green-200);color:var(--green-800); }

/* Badge chips */
.plan-chip { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .55rem;border-radius:2rem; }
.plan-chip.plan-starter, .plan-chip.plan-Starter { background:#f3f4f6;color:var(--gray-500); }
.plan-chip.plan-popular, .plan-chip.plan-MostPopular, .plan-chip[class*="Popular"] { background:#fef3c7;color:#92400e; }
.plan-chip.plan-pro, .plan-chip.plan-Pro { background:#dbeafe;color:#1e40af; }

@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.shake{animation:shake .4s ease;}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 991px) {
  .auth-left { display:none; }
  .auth-right { width:100%; }
  .plan-selector-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hero-h1 { font-size:2rem; }
  .py-6 { padding-top:3rem;padding-bottom:3rem; }
  .cta-box { padding:2.5rem 1.5rem; }
}