/* ── Base ─────────────────────────────────────────────── */
:root {
  --ssl-blue:    #1a56db;
  --ssl-blue-dk: #1340b0;
  --ssl-accent:  #f59e0b;
  --ssl-accent-dk: #d97706;
  --ssl-dark:    #0f172a;
  --ssl-gray:    #64748b;
  --ssl-light:   #f8fafc;
  --ssl-border:  #e2e8f0;
  --ssl-radius:  12px;
}

html, body { overflow-x: hidden; max-width: 100%; }
body.ssl-body { font-family: 'Inter', sans-serif; background: var(--ssl-light); color: var(--ssl-dark); }

/* ── Navbar ───────────────────────────────────────────── */
.ssl-navbar { background: var(--ssl-dark); border-bottom: 1px solid rgba(255,255,255,.08); }
.ssl-brand, .navbar-brand { display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.brand-icon  { font-size:1.5rem; }
.brand-text  { font-family:'Poppins',sans-serif; font-weight:800; font-size:1.1rem; color:#fff; }
.brand-accent { color: var(--ssl-accent); }

/* ── Sub Nav (horizontal, below main nav) ────────────── */
.ssl-sub-nav {
  background: #fff;
  border-bottom: 1px solid #ddd;
  justify-content: center;
  gap: 0;
}
.ssl-sub-nav-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1.1rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ssl-dark);
  opacity: .5;
  user-select: none;
}
.ssl-sub-nav-link {
  display: inline-block;
  padding: .55rem 1.1rem;
  color: var(--ssl-dark);
  text-decoration: none;
  font-size: .88rem;
  transition: background .15s, color .15s;
}
.ssl-sub-nav-link:hover {
  background: #f0f0f0;
  color: var(--ssl-dark);
}
.ssl-sub-nav-link.active {
  color: var(--ssl-accent, #e63946);
}
/* Mobile page links in hamburger */
.ssl-mobile-page-links {
  border-top: 1px solid rgba(255,255,255,.12);
}
.ssl-mobile-page-links .nav-link {
  padding: .6rem 0;
  font-size: .95rem;
  color: rgba(255,255,255,.7);
}
.ssl-mobile-page-links .nav-link:hover {
  color: #fff;
}
.ssl-mobile-page-links .nav-link.fw-bold {
  color: #fff;
}

/* ── Buttons ──────────────────────────────────────────── */
.btn-ssl-accent {
  background: var(--ssl-accent); border:none; color: var(--ssl-dark);
  font-weight:600; border-radius:8px; transition:.2s;
}
.btn-ssl-accent:hover { background: var(--ssl-accent-dk); color: var(--ssl-dark); }
.btn-outline-ssl {
  border: 2px solid var(--ssl-blue); color: var(--ssl-blue);
  font-weight:600; border-radius:8px; background:transparent; transition:.2s;
}
.btn-outline-ssl:hover { background: var(--ssl-blue); color:#fff; }
.btn-ssl-sm {
  background: var(--ssl-blue); color:#fff; border:none;
  padding:.3rem .8rem; border-radius:6px; font-size:.85rem; font-weight:600;
  text-decoration:none; display:inline-block; transition:.2s;
}
.btn-ssl-sm:hover { background: var(--ssl-blue-dk); color:#fff; }

/* ── Hero ─────────────────────────────────────────────── */
.ssl-hero { background: linear-gradient(135deg, var(--ssl-dark) 0%, #1e3a5f 100%); color:#fff; }
.ssl-hero-title { font-family:'Poppins',sans-serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:900; line-height:1.1; }
.text-ssl-accent { color: var(--ssl-accent) !important; }
.ssl-hero-sub { font-size:1.15rem; opacity:.85; max-width:520px; }
.ssl-badge-pill { background: rgba(245,158,11,.15); color: var(--ssl-accent); border:1px solid var(--ssl-accent); border-radius:999px; padding:.35rem .9rem; font-weight:600; font-size:.85rem; }

/* ── Screen Mockup ───────────────────────────────────── */
.ssl-screen-mockup { max-width:380px; background:#1e293b; border-radius:16px; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,.4); }
.ssl-screen-topbar { background:#2d3748; padding:.5rem 1rem; display:flex; align-items:center; gap:.35rem; }
.ssl-dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.ssl-screen-content { padding:1rem; }
.ssl-fact-card { background:#fff; border-radius:12px; padding:1.25rem; text-align:center; }
.ssl-fact-icon { font-size:2.5rem; margin-bottom:.5rem; }
.ssl-fact-title { font-weight:700; font-size:1rem; margin-bottom:.5rem; }
.ssl-fact-body { font-size:.9rem; color: var(--ssl-gray); margin-bottom:.75rem; }

/* ── Section helpers ─────────────────────────────────── */
.ssl-bg-light { background:#f1f5f9; }
.ssl-section-eyebrow { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color: var(--ssl-blue); }
.ssl-section-title { font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(1.6rem,4vw,2.5rem); margin-top:.25rem; }
.ssl-page-title { font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(1.5rem,4vw,2.2rem); }
.py-6 { padding-top:5rem !important; padding-bottom:5rem !important; }

/* ── Step Icons ──────────────────────────────────────── */
.ssl-step-icon { font-size:3rem; background:#fff; width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto; box-shadow:0 4px 16px rgba(0,0,0,.08); }

/* ── Product Cards ───────────────────────────────────── */
.ssl-product-card { background:#fff; border-radius:var(--ssl-radius); overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06); transition:.25s; position:relative; }
.ssl-product-card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,.12); }
.ssl-product-img-placeholder { background:#f1f5f9; height:160px; display:flex; align-items:center; justify-content:center; }
.ssl-click-to-enlarge { display:block; text-align:center; color:var(--ssl-gray); font-size:.75rem; padding:.35rem 0; }
.ssl-img-fallback { font-size:4rem; }
.ssl-img-fallback-lg { background:#f1f5f9; height:280px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:6rem; }
.ssl-product-detail-img img { border-radius:12px; width:100%; }
.ssl-product-body { padding:1.25rem; }
.ssl-product-name { font-weight:700; font-size:1.05rem; margin-bottom:.4rem; }
.ssl-product-desc { color: var(--ssl-gray); font-size:.9rem; margin-bottom:.75rem; }
.ssl-product-footer { display:flex; justify-content:space-between; align-items:center; }
.ssl-product-type-badge { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.2rem .6rem; border-radius:999px; position:absolute; top:.75rem; right:.75rem; }
.ssl-featured-badge { position:absolute; top:.75rem; left:.75rem; background: var(--ssl-accent); color: var(--ssl-dark); font-size:.7rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; }
.ssl-type-hardware    { background:#dbeafe; color:#1e40af; }
.ssl-type-subscription { background:#dcfce7; color:#166534; }
.ssl-type-pdf         { background:#fef3c7; color:#92400e; }

/* ── Price ───────────────────────────────────────────── */
.ssl-price    { font-size:1.25rem; font-weight:800; color: var(--ssl-dark); }
.ssl-price-lg { font-size:2rem; font-weight:900; color: var(--ssl-dark); }

/* ── Feature List ────────────────────────────────────── */
.ssl-feature-list { list-style:none; padding:0; margin:0; }
.ssl-feature-list li { padding:.2rem 0; font-size:.9rem; }

/* ── Filter Tabs ─────────────────────────────────────── */
.ssl-filter-tabs { display:flex; gap:.5rem; flex-wrap:wrap; }
.ssl-filter-tab { padding:.4rem 1rem; border-radius:999px; font-size:.85rem; font-weight:600; text-decoration:none; color: var(--ssl-gray); border:1px solid var(--ssl-border); transition:.2s; }
.ssl-filter-tab:hover, .ssl-filter-tab.active { background: var(--ssl-blue); color:#fff; border-color: var(--ssl-blue); }

/* ── Cards ───────────────────────────────────────────── */
.ssl-card { background:#fff; border-radius:var(--ssl-radius); box-shadow:0 2px 12px rgba(0,0,0,.06); overflow:hidden; }
.ssl-card-header { padding:1rem 1.25rem; border-bottom:1px solid var(--ssl-border); background:#fff; }
.ssl-card-body { padding:1.25rem; }

/* ── Auth ─────────────────────────────────────────────── */
.ssl-auth-body { background: linear-gradient(135deg, var(--ssl-dark) 0%, #1e3a5f 100%); }
.ssl-auth-card { background:#fff; border-radius:16px; padding:2rem; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.ssl-input { border-radius:8px; border:1.5px solid var(--ssl-border); transition:.2s; }
.ssl-input:focus { border-color: var(--ssl-blue); box-shadow:0 0 0 3px rgba(26,86,219,.15); }
.fw-500 { font-weight:500; }
.ssl-link { color: var(--ssl-blue); font-weight:600; text-decoration:none; }
.ssl-link:hover { text-decoration:underline; }

/* ── Tables ──────────────────────────────────────────── */
.ssl-table th { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--ssl-gray); border-bottom:2px solid var(--ssl-border); }
.ssl-table td { vertical-align:middle; border-bottom:1px solid var(--ssl-border); font-size:.9rem; }

/* ── Status Badges ───────────────────────────────────── */
.ssl-status-badge { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.25rem .65rem; border-radius:999px; }
.ssl-status-pending    { background:#fef3c7; color:#92400e; }
.ssl-status-paid       { background:#dcfce7; color:#166534; }
.ssl-status-processing { background:#dbeafe; color:#1e40af; }
.ssl-status-shipped    { background:#ede9fe; color:#5b21b6; }
.ssl-status-delivered  { background:#dcfce7; color:#166534; }
.ssl-status-cancelled  { background:#fee2e2; color:#991b1b; }
.ssl-status-refunded   { background:#f1f5f9; color:#475569; }

/* ── Stat Cards (backoffice) ─────────────────────────── */
.ssl-stat-card { background:#fff; border-radius:var(--ssl-radius); padding:1.5rem; text-align:center; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.ssl-stat-icon { font-size:2.5rem; margin-bottom:.5rem; }
.ssl-stat-num  { font-family:'Poppins',sans-serif; font-weight:900; font-size:2rem; }
.ssl-stat-label { color: var(--ssl-gray); font-size:.85rem; }

/* ── Quick Cards (home) ──────────────────────────────── */
.ssl-quick-card { background:#fff; border-radius:var(--ssl-radius); padding:1.5rem; text-align:center; box-shadow:0 2px 12px rgba(0,0,0,.06); transition:.25s; display:block; color: var(--ssl-dark); }
.ssl-quick-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.1); color: var(--ssl-dark); }
.ssl-quick-icon { font-size:2rem; }

/* ── Value Cards (about) ─────────────────────────────── */
.ssl-value-card { background:#fff; border-radius:var(--ssl-radius); padding:2rem; text-align:center; box-shadow:0 2px 12px rgba(0,0,0,.06); height:100%; }
.ssl-value-icon { font-size:2.5rem; margin-bottom:1rem; }

/* ── CTA Section ─────────────────────────────────────── */
.ssl-cta-section { background: linear-gradient(135deg, var(--ssl-blue) 0%, var(--ssl-dark) 100%); color:#fff; }
.ssl-cta-title { font-family:'Poppins',sans-serif; font-weight:900; font-size:clamp(1.8rem,4vw,2.8rem); }
.ssl-cta-sub { font-size:1.1rem; opacity:.85; }

/* ── About ───────────────────────────────────────────── */
.ssl-about-hero { background: linear-gradient(135deg, var(--ssl-dark) 0%, #1e3a5f 100%); color:#fff; }

/* ── Empty State ─────────────────────────────────────── */
.ssl-empty-state { text-align:center; padding:4rem 1rem; }

/* ── Footer ──────────────────────────────────────────── */
.ssl-footer { background: var(--ssl-dark); color:#fff; padding:3rem 0 1.5rem; }
.footer-heading { font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ssl-accent); margin-bottom:1rem; }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:.5rem; }
.footer-links a { color:rgba(255,255,255,.6); text-decoration:none; font-size:.9rem; transition:.2s; }
.footer-links a:hover { color:#fff; }
.footer-divider { border-color:rgba(255,255,255,.1); margin:2rem 0 1rem; }
.ssl-footer-row { line-height: 1.6; min-height: 1.8rem; display: flex; align-items: center; }
.col-md-4:last-child .ssl-footer-row { justify-content: flex-end; }
.ssl-footer-text { color: rgba(255,255,255,.55); }
.ssl-footer-link { color: rgba(255,255,255,.6); text-decoration: none; font-size: .9rem; transition: color .15s; }
.ssl-footer-link:hover { color: #fff; }

/* ── Stripe placeholder ──────────────────────────────── */
.ssl-stripe-element { border:1.5px solid var(--ssl-border); border-radius:8px; padding:1rem; min-height:44px; }

/* ── Flash ───────────────────────────────────────────── */
.ssl-flash { border-radius:10px; }

/* ── Hero Logo ───────────────────────────────────────── */
.ssl-hero-logo { max-width:100%; width:420px; height:auto; border-radius:24px; filter:drop-shadow(0 20px 40px rgba(0,0,0,.4)); }

/* ── Panel Mockup (landing hero) ────────────────────── */
.ssl-panel-mockup { max-width:320px; background:#fff; border-radius:16px; box-shadow:0 25px 60px rgba(0,0,0,.4); overflow:hidden; border:3px solid rgba(255,255,255,.15); }
.ssl-panel-seat-label { background:#1e293b; color:rgba(255,255,255,.5); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; text-align:center; padding:.4rem 1rem; }
.ssl-panel-inner { text-align:center; }
.ssl-panel-subjects { font-size:.75rem; color: var(--ssl-gray); border-top:1px solid var(--ssl-border); padding-top:.75rem; margin-top:.25rem; }

/* ── Pricing Table ───────────────────────────────────── */
.ssl-pricing-table { border-radius:var(--ssl-radius); overflow:hidden; border:1.5px solid var(--ssl-border); }
.ssl-pricing-row { display:grid; grid-template-columns:1fr 1fr 1fr; padding:.9rem 1.25rem; gap:.5rem; align-items:center; border-bottom:1px solid var(--ssl-border); font-size:.95rem; }
.ssl-pricing-row:last-child { border-bottom:none; }
.ssl-pricing-header { background:var(--ssl-dark); color:#fff; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.ssl-pricing-best { background:#fefce8; }
.ssl-discount-badge { display:inline-block; background:#dcfce7; color:#166534; font-size:.75rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; }
.ssl-discount-best { background:#fef9c3; color:#854d0e; }

/* ── Pilot Program ───────────────────────────────────── */
.ssl-pilot-list { list-style:none; padding:0; margin:0; }
.ssl-pilot-list li { padding:.5rem 0; border-bottom:1px solid var(--ssl-border); color: var(--ssl-gray); font-size:.95rem; }
.ssl-pilot-list li::before { content:"✓ "; color: var(--ssl-blue); font-weight:700; }
.ssl-pilot-list li:last-child { border-bottom:none; }
.ssl-pilot-investment-card { background:var(--ssl-light); border:1.5px solid var(--ssl-border); border-radius:var(--ssl-radius); padding:2rem; }
.ssl-pilot-price-row { display:flex; justify-content:space-between; align-items:center; padding:.75rem 0; border-bottom:1px solid var(--ssl-border); }
.ssl-pilot-price-row:last-of-type { border-bottom:none; }
.ssl-pilot-total { background:var(--ssl-dark); color:#fff; border-radius:8px; padding:.75rem 1rem; margin-top:.5rem; }
.ssl-pilot-total span { color:#fff; }

/* ── Landing Page ────────────────────────────────────── */
.ssl-landing-quote { font-family:'Poppins',sans-serif; font-weight:900; font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.2; color: var(--ssl-dark); }
.ssl-landing-sub { font-size:clamp(1.1rem,2.5vw,1.5rem); color: var(--ssl-dark); }
.ssl-landing-logo { max-width:100%; width:380px; height:auto; }

/* ── Our Story ────────────────────────────────────────── */
.ssl-story-para { font-size:1.1rem; color: var(--ssl-dark); margin-bottom:2rem; line-height:1.8; }

/* ── Program Pages ───────────────────────────────────── */
.ssl-program-section { background: var(--ssl-dark); color:#fff; padding:5rem 0; }
.ssl-program-section-alt { background:#1e293b; }
.ssl-program-title { font-family:'Poppins',sans-serif; font-weight:900; font-size:clamp(1.6rem,4vw,2.4rem); color:#fff; }
.ssl-program-lead { font-size:1.15rem; font-weight:600; color:rgba(255,255,255,.9); }
.ssl-program-body { font-size:1rem; color:rgba(255,255,255,.8); line-height:1.8; }
.ssl-program-subhead { font-family:'Poppins',sans-serif; font-weight:700; font-size:1.2rem; color:#fff; }

/* ── How It Works ────────────────────────────────────── */
.ssl-hiw-img-placeholder { display:flex; justify-content:center; }
.ssl-hiw-img { max-width:100%; width:480px; height:auto; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,.12); }

/* ── Pricing side cards ──────────────────────────────── */
.ssl-pricing-side-card { background: #0000002e; border-radius: 12px; padding: 1.25rem; height: 100%; }

/* ── Pilot plain list ────────────────────────────────── */
.ssl-pilot-plain-list { list-style:disc; padding-left:1.4rem; margin:0; }
.ssl-pilot-plain-list li { padding:.35rem 0; color: var(--ssl-gray); font-size:.95rem; }

/* ── Image copy protection ───────────────────────────── */
.ssl-no-copy {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ── Responsive tweaks ───────────────────────────────── */
@media (max-width: 576px) {
  .ssl-product-footer { flex-direction:column; align-items:flex-start; gap:.5rem; }
  .ssl-filter-tabs { gap:.35rem; }
}