/* AUTO-GENERATED for 'ssm' (Shubhamm Sukhlecha Mentorship) — do not edit by hand.
   Loaded AFTER css/app.css, so these override the base design tokens. */
:root {
  --primary-yellow: #f5a623;
  --primary: #2541b2;
  --primary-rgb: 37, 65, 178;
  --yellow-hover: #e09000;
  --primary-dark: #0d1b5e;
  --primary-dark-2: #1e3a8a;
  --accent: #3b5fe0;
  --text-dark: #111827;
  --text-gray: #6b7280;
  --success: #22c55e;
  --danger: #ef4444;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --navy-deep: #0d1b5e;
  --surface-warm: #f4f6fb;
  --border-color: #e5e7eb;

  /* SSM-specific tokens used in Home.razor */
  --ssm-navy: #0d1b5e;
  --ssm-blue: #1e3a8a;
  --ssm-royal: #2541b2;
  --ssm-accent: #3b5fe0;
  --ssm-gold: #f5a623;
  --ssm-gold-light: #ffd76e;
  --ssm-white: #fff;
  --ssm-light: #f4f6fb;
  --ssm-gray: #6b7280;
  --ssm-dark: #111827;
  --ssm-text: #1f2937;
  --ssm-border: #e5e7eb;
  --ssm-radius: 12px;
  --ssm-shadow: 0 4px 24px rgba(13,27,94,.08);
  --ssm-green: #22c55e;
  --ssm-red: #ef4444;
  --ssm-orange: #f59e0b;
}

/* ============================================================
   SSM SHARED COMPONENT CLASSES — used across Home, About, etc.
   ============================================================ */

/* Base */
.ssm-page{font-family:'Inter',system-ui,sans-serif;color:var(--ssm-text);line-height:1.6;overflow-x:hidden;background:var(--ssm-white)}
.ssm-container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Hero (inner pages) */
.ssm-page-hero{padding:30px 0 30px;background:linear-gradient(135deg,#fff 55%,var(--ssm-light) 100%);position:relative;overflow:hidden}
.ssm-breadcrumb{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--ssm-gray);margin-bottom:16px}
.ssm-breadcrumb a{color:var(--ssm-royal);text-decoration:none;font-weight:500}
.ssm-breadcrumb svg{width:16px;height:16px;fill:var(--ssm-gray)}
.ssm-page-hero .ssm-hero-badge{display:inline-block;padding:5px 14px;background:rgba(37,65,178,.08);color:var(--ssm-royal);font-size:11px;font-weight:700;border-radius:20px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.ssm-page-hero h2{font-size:38px;font-weight:900;color:var(--ssm-navy);line-height:1.15;margin:0 0 8px}
.ssm-page-hero h2 em{font-style:normal;color:var(--ssm-royal)}
.ssm-page-hero .ssm-sub{font-size:17px;color:var(--ssm-royal);font-weight:600;font-style:italic;margin-bottom:10px}
.ssm-page-hero .ssm-desc{font-size:14px;color:var(--ssm-gray);line-height:1.7;margin-bottom:10px;max-width:560px}
.ssm-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}

/* Buttons */
.ssm-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:.25s;font-family:inherit;text-decoration:none}
.ssm-btn-primary{background:var(--ssm-royal);color:#fff}
.ssm-btn-primary:hover{background:var(--ssm-navy);transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,65,178,.3)}
.ssm-btn-outline{background:transparent;color:var(--ssm-navy);border:2px solid var(--ssm-navy)}
.ssm-btn-outline:hover{background:var(--ssm-navy);color:#fff}

/* Section */
.ssm-section{padding:70px 0}
.ssm-section-alt{background:var(--ssm-light)}
.ssm-section-eyebrow{font-size:12px;font-weight:700;color:var(--ssm-royal);text-transform:uppercase;letter-spacing:.1em;text-align:center;margin-bottom:8px}
.ssm-section-title{font-size:32px;font-weight:800;color:var(--ssm-navy);text-align:center;margin-bottom:40px;line-height:1.2}
.ssm-section-title em{font-style:normal;color:var(--ssm-royal);text-decoration:underline;text-decoration-color:var(--ssm-gold);text-underline-offset:4px}

/* Stats Bar */
.ssm-stats-bar{background:var(--ssm-navy);padding:24px 0}
.ssm-stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;text-align:center}
.ssm-stat-item{display:flex;align-items:center;gap:10px;justify-content:center;color:#fff}
.ssm-stat-icon{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ssm-stat-icon svg{width:18px;height:18px;fill:var(--ssm-gold)}
.ssm-stat-num{font-size:20px;font-weight:800;color:var(--ssm-gold)}
.ssm-stat-lbl{font-size:11px;color:rgba(255,255,255,.7);margin-top:1px}

/* Cards */
.ssm-card{background:#fff;border:1px solid var(--ssm-border);border-radius:var(--ssm-radius);padding:28px;transition:.3s}
.ssm-card:hover{border-color:var(--ssm-royal);box-shadow:var(--ssm-shadow);transform:translateY(-3px)}
.ssm-icon-box{width:52px;height:52px;border-radius:14px;background:rgba(37,65,178,.08);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ssm-icon-box svg{width:24px;height:24px;fill:var(--ssm-royal)}
.ssm-card h4{font-size:15px;font-weight:700;color:var(--ssm-navy);margin:0 0 6px}
.ssm-card p{font-size:13px;color:var(--ssm-gray);line-height:1.6;margin:0}
.ssm-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.ssm-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* Feedback / Testimonials */
.ssm-fb-card{background:#fff;border:1px solid var(--ssm-border);border-radius:var(--ssm-radius);padding:24px;transition:.3s}
.ssm-fb-card:hover{border-color:var(--ssm-royal);box-shadow:var(--ssm-shadow)}
.ssm-fb-card .qm{font-family:'Playfair Display',serif;font-size:28px;color:var(--ssm-royal);line-height:1;margin-bottom:6px}
.ssm-fb-card p{font-size:13px;color:var(--ssm-text);line-height:1.7;margin:10px 0 16px}
.ssm-fb-author{display:flex;align-items:center;gap:10px}
.ssm-fb-avatar{width:36px;height:36px;border-radius:50%;background:var(--ssm-light);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--ssm-royal)}
.ssm-fb-name{font-size:13px;font-weight:600;color:var(--ssm-navy)}
.ssm-fb-role{font-size:11px;color:var(--ssm-gray)}
.ssm-stars{display:flex;gap:3px}
.ssm-stars svg{width:14px;height:14px;fill:var(--ssm-gold)}

/* Timeline */
.ssm-timeline{position:relative;padding-left:28px}
.ssm-timeline::before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--ssm-border)}
.ssm-tl-item{position:relative;margin-bottom:28px}
.ssm-tl-item::before{content:'';position:absolute;left:-24px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--ssm-royal);border:2px solid #fff;box-shadow:0 0 0 2px var(--ssm-royal)}
.ssm-tl-item .yr{font-size:11px;font-weight:700;color:var(--ssm-royal);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.ssm-tl-item h4{font-size:15px;font-weight:700;color:var(--ssm-navy);margin:0 0 4px}
.ssm-tl-item p{font-size:13px;color:var(--ssm-gray);margin:0;line-height:1.6}

/* Features row */
.ssm-features-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.ssm-feat-mini{text-align:center;padding:24px 16px}
.ssm-feat-mini svg{width:28px;height:28px;fill:var(--ssm-royal);margin-bottom:10px}
.ssm-feat-mini h5{font-size:14px;font-weight:700;color:var(--ssm-navy);margin:0 0 6px}
.ssm-feat-mini p{font-size:12px;color:var(--ssm-gray);line-height:1.6;margin:0}

/* Mentor section */
.ssm-about-mentor{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.ssm-about-mentor img{width:320px;height:auto;border-radius:16px;object-fit:cover}
.ssm-mentor-highlights{list-style:none;padding:0;margin:16px 0 0}
.ssm-mentor-highlights li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ssm-navy);margin-bottom:8px}
.ssm-mentor-highlights svg{width:18px;height:18px;fill:var(--ssm-royal);flex-shrink:0}

/* Animations */
.ssm-reveal{opacity:0;transform:translateY(24px);transition:.5s cubic-bezier(.16,1,.3,1)}
.ssm-reveal.visible{opacity:1;transform:translateY(0)}

/* Course cards */
.ssm-course-card{background:#fff;border:1px solid var(--ssm-border);border-radius:var(--ssm-radius);padding:28px;padding-top:0;transition:.3s}
.ssm-course-card:hover{border-color:var(--ssm-royal);box-shadow:var(--ssm-shadow);transform:translateY(-3px)}
.ssm-course-tag{display:inline-block;padding:4px 12px;font-size:11px;font-weight:700;color:#fff;border-radius:0 0 6px 6px;margin-bottom:16px}
.ssm-course-card h4{font-size:20px;font-weight:800;color:var(--ssm-navy);margin:0 0 4px}
.ssm-course-card .ssm-course-sub{color:var(--ssm-royal);font-weight:600;font-style:italic;font-size:13px;margin:4px 0 10px}
.ssm-course-card p{font-size:13px;color:var(--ssm-gray);line-height:1.6;margin:0 0 10px}
.ssm-course-features{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0;text-align:center;font-size:10px;color:var(--ssm-gray)}
.ssm-course-features svg{display:block;margin:0 auto 4px;width:20px;height:20px;fill:var(--ssm-royal)}
.ssm-course-link{display:inline-flex;align-items:center;gap:4px;color:var(--ssm-royal);font-weight:600;font-size:13px;text-decoration:none}
.ssm-course-link:hover{gap:8px}

/* Subject cards */
.ssm-subj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ssm-subj-card{padding:20px 16px;border-radius:var(--ssm-radius);text-align:center;transition:.3s}
.ssm-subj-card:hover{transform:translateY(-3px);box-shadow:var(--ssm-shadow)}
.ssm-subj-card svg{width:28px;height:28px;margin-bottom:8px}
.ssm-subj-card h5{font-size:12px;font-weight:700;color:var(--ssm-navy);margin:0 0 4px}
.ssm-subj-card span{font-size:10px;color:var(--ssm-gray);line-height:1.4}

/* CTA Banner */
.ssm-cta-banner{background:var(--ssm-navy);padding:48px 0}
.ssm-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.ssm-cta-inner h3{font-size:22px;font-weight:800;color:#fff;margin:0 0 6px}
.ssm-cta-inner p{color:rgba(255,255,255,.7);font-size:14px;margin:0}
.ssm-btn-whatsapp{background:#25d366!important;color:#fff!important}
.ssm-btn-whatsapp:hover{background:#1da851!important}
.ssm-btn-white{background:#fff!important;color:var(--ssm-navy)!important}
.ssm-btn-white:hover{background:var(--ssm-light)!important}

/* ===== RESPONSIVE ===== */

/* SSM Header — white background matching mockup */
.ssm-header.site-header{background:rgba(255,255,255,.97)!important;backdrop-filter:blur(12px);border-bottom:1px solid var(--ssm-border)}
.ssm-header .header-inner{max-width:1200px}
.ssm-header .site-nav a{color:var(--ssm-text)!important;font-size:12.5px;font-weight:500;padding:8px 10px;border-bottom:2px solid transparent;border-radius:0;white-space:nowrap}
.ssm-header .site-nav a:hover{color:var(--ssm-royal)!important}
.ssm-header .hamburger-btn{color:var(--ssm-navy)!important}
.ssm-header .btn-login{color:var(--ssm-navy)!important;border:1.5px solid var(--ssm-border)!important;background:#fff!important;padding:9px 22px!important;border-radius:8px!important;font-size:13px!important;font-weight:600!important}
.ssm-header .btn-login:hover{background:var(--ssm-light)!important;border-color:var(--ssm-navy)!important}
.ssm-header .btn-signup{background:var(--ssm-royal)!important;color:#fff!important;padding:9px 22px!important;border-radius:8px!important;font-size:13px!important;font-weight:600!important}
.ssm-header .btn-signup:hover{background:var(--ssm-navy)!important}
.ssm-header .hd-text-links a{color:var(--ssm-navy)!important}
.ssm-header .hd-logout{color:var(--ssm-navy)!important;border-color:var(--ssm-navy)!important}
.ssm-header .cart-btn{color:var(--ssm-navy)!important}
.ssm-header .profile-avatar{color:var(--ssm-navy)!important;background:var(--ssm-light)!important}
.ssm-header .hd-mobile-courses{color:var(--ssm-navy)!important}
.ssm-header .header-actions .cart-btn span{background:var(--ssm-gold)!important;color:var(--ssm-navy)!important}

.ssm-nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.ssm-nav-brand-text{display:flex;flex-direction:column;line-height:1.2}
.ssm-nav-brand-text strong{font-size:14px;font-weight:800;color:var(--ssm-navy);letter-spacing:-.02em}
.ssm-nav-brand-text span{font-size:9.5px;color:var(--ssm-gray);font-weight:500;letter-spacing:.03em}

/* SSM Footer — exact mockup match */
.ssm-footer.site-footer{background:var(--ssm-navy)!important;padding:56px 0 0!important}
.ssm-footer .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;max-width:1200px;margin:0 auto;padding:0 24px;gap:36px;margin-bottom:36px}
.ssm-footer .footer-column h4{color:var(--ssm-gold)!important;font-size:13px;font-weight:700;margin-bottom:14px}
.ssm-footer .footer-column ul li a{font-size:12px;opacity:.7}
.ssm-footer .footer-column ul li a:hover{opacity:1;color:var(--ssm-gold)}
.ssm-footer .footer-column ul li{margin-bottom:8px}

.ssm-footer-brand-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ssm-footer-brand-txt{display:flex;flex-direction:column;line-height:1.2}
.ssm-footer-brand-txt strong{font-size:14px;font-weight:800;color:#fff}
.ssm-footer-brand-txt span{font-size:9px;color:rgba(255,255,255,.6)}
.ssm-footer-desc{font-size:12px;line-height:1.7;color:rgba(255,255,255,.6);margin-bottom:16px}
.ssm-footer-social{display:flex;gap:8px;margin-top:14px}
.ssm-footer-social a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:.2s}
.ssm-footer-social a:hover{background:var(--ssm-gold)}
.ssm-footer-social a svg{width:14px;height:14px;fill:#fff}

.ssm-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:16px 24px;text-align:center;max-width:1200px;margin:0 auto}
.ssm-footer .footer-bottom p{font-size:11px;color:rgba(255,255,255,.5)}

@media(max-width:1024px){
  .ssm-footer .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .ssm-nav-brand-text{display:none}
  .ssm-footer .footer-grid{grid-template-columns:1fr}
}
@media(max-width:1024px){
  .ssm-hero-grid{grid-template-columns:1fr}
  .ssm-hero-visual{order:-1}
  .ssm-hero-img-wrap{width:280px;height:280px;margin:0 auto}
  .ssm-stats-grid{grid-template-columns:repeat(3,1fr)}
  .ssm-grid-3{grid-template-columns:repeat(2,1fr)}
  .ssm-grid-2{grid-template-columns:1fr}
  .ssm-features-row{grid-template-columns:repeat(2,1fr)}
  .ssm-about-mentor{grid-template-columns:1fr}
  .ssm-about-mentor img{width:100%;max-width:320px;margin:0 auto}
  .ssm-subj-grid{grid-template-columns:repeat(2,1fr)}
  .ssm-cta-inner{flex-direction:column;text-align:center}
}
@media(max-width:768px){
  .ssm-page-hero{padding:70px 0 30px}
  .ssm-page-hero h2{font-size:26px}
  .ssm-stats-grid{grid-template-columns:repeat(2,1fr)}
  .ssm-grid-3{grid-template-columns:1fr}
  .ssm-features-row{grid-template-columns:1fr}
  .ssm-section-title{font-size:24px}
  .ssm-section{padding:48px 0}
  .ssm-subj-grid{grid-template-columns:1fr 1fr}
  .ssm-course-features{grid-template-columns:repeat(2,1fr)}
}