/* ============================================================
   homepage-v2.css
   Homepage-only stylesheet (index.html exclusively).
   Do NOT link this file from any other page — assets/homepage.css
   remains the stylesheet for about-us.html, job-biodata-format.html,
   privacy-policy.html and the blog templates.

   Contains "below the fold" styles per the existing critical-CSS
   split (nav/hero/buttons/section-title/container stay inline in
   index.html for fastest first paint).

   Design tokens sourced from /docs/02-brand — see :root below.
   ============================================================ */

:root {
  /* Color — docs/02-brand/COLOR_SYSTEM.md */
  --color-primary: #001A3F;
  --color-primary-2: #0A2E5C;
  --color-accent: #F57C00;
  --color-accent-hover: #DB6E00;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F8FAFC;
  --color-border: #E5E7EB;
  --color-text: #0B1C30;
  --color-text-secondary: #64748B;
  --color-text-muted: #94A3B8;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;

  /* Radius — docs/02-brand/DESIGN_TOKENS.md */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadow — docs/02-brand/DESIGN_TOKENS.md */
  --shadow-card: 0 4px 16px rgba(0,0,0,.05);
  --shadow-hover: 0 12px 30px rgba(0,0,0,.08);
  --shadow-dropdown: 0 20px 40px rgba(0,0,0,.10);
  --shadow-modal: 0 24px 60px rgba(0,0,0,.15);

  /* Motion — docs/02-brand/MOTION_SYSTEM.md */
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
  --transition-slow: 350ms ease-out;

  /* Spacing — docs/02-brand/SPACING_SYSTEM.md */
  --space-section: 96px;
  --space-card-gap: 24px;
}

/* ============================================================
   Accessibility — reduced motion (docs/02-brand/MOTION_SYSTEM.md:
   "Respect prefers-reduced-motion")
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Accessibility — focus ring (docs/02-brand/DESIGN_SYSTEM.md:
   "Focus Ring", WCAG AA)
   ============================================================ */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Skip link — hidden until focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 2000;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--transition-base);
}
.skip-link:focus {
  top: 16px;
}

/* ============================================================
   Section rhythm
   ============================================================ */
.features-section,
.how-it-works-section,
.language-section,
.pricing-section,
.testimonials-section,
.template-gallery {
  padding: var(--space-section) 0;
}

.section-title { text-align: center; margin-bottom: 48px; }
.section-title h2 {
  font-family: 'Montserrat', 'Noto Sans Devanagari', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 12px;
}
.section-title p {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0 auto;
}

/* ============================================================
   Features
   ============================================================ */
.features-section { background: var(--color-bg); }

.feature-card {
  background: var(--color-bg);
  padding: 32px 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  height: 100%;
  margin-bottom: var(--space-card-gap);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-primary);
}
.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.feature-icon svg { width: 26px; height: 26px; stroke: #fff; }
.feature-card h3 {
  font-family: 'Montserrat', 'Noto Sans Devanagari', sans-serif;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}
.feature-card p { color: var(--color-text-secondary); line-height: 1.6; }

/* ============================================================
   How It Works
   ============================================================ */
.how-it-works-section { background: var(--color-bg-alt); }

.step-card {
  text-align: center;
  padding: 32px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  margin-bottom: var(--space-card-gap);
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.step-number {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.step-card h3 {
  font-family: 'Montserrat', 'Noto Sans Devanagari', sans-serif;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}
.step-card p { color: var(--color-text-secondary); }

/* ============================================================
   Language switcher
   ============================================================ */
.language-section { background: var(--color-bg); padding: 64px 0; }

.language-switcher {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 24px 0 0;
}
.lang-btn {
  min-height: 48px;
  min-width: 150px;
  padding: 12px 24px;
  font-family: 'Montserrat', 'Noto Sans Devanagari', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}
.lang-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}
.lang-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ============================================================
   Template gallery (cards are injected by assets/footer.js —
   class names below MUST match what that shared script creates)
   ============================================================ */
.template-gallery { background: var(--color-bg); }

.template-scroll-container {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: var(--space-card-gap);
  padding: 8px 4px 24px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.template-scroll-container::-webkit-scrollbar { height: 8px; }
.template-scroll-container::-webkit-scrollbar-track { background: var(--color-bg-alt); border-radius: var(--radius-pill); }
.template-scroll-container::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: var(--radius-pill); }

.template-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  cursor: pointer;
  flex: 0 0 320px;
  min-width: 320px;
  padding: 12px;
}
.template-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--color-primary); }
.template-image {
  width: 100%;
  height: 340px;
  object-fit: contain;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  display: block;
}
.template-info { padding: 16px 4px 4px; text-align: center; }
.btn-select-template {
  min-height: 48px;
  padding: 12px 28px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
}
.btn-select-template:hover { background: var(--color-accent-hover); transform: translateY(-2px); }

/* ============================================================
   Template preview panel — treated as a "floating card / preview
   panel" per docs/02-brand/GLASSMORPHISM.md, so a light glass
   treatment is acceptable here (never on forms).
   ============================================================ */
.template-preview-section { padding: 0 0 var(--space-section); background: var(--color-bg-alt); }

.preview-card {
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-dropdown);
}
.preview-image-container {
  padding: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-bg-alt);
}
.preview-template-img {
  max-width: 100%;
  max-height: 600px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.preview-actions {
  padding: 24px 32px 32px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--color-bg);
}
.btn-preview-action {
  min-height: 48px;
  padding: 12px 28px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  display: inline-flex;
  align-items: center;
}
.btn-use-template { background: var(--color-accent); color: #fff; }
.btn-use-template:hover { background: var(--color-accent-hover); transform: translateY(-2px); }
.btn-close-preview { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-close-preview:hover { background: var(--color-bg-alt); transform: translateY(-2px); }

/* ============================================================
   Pricing — docs/02-brand/DESIGN_SYSTEM.md: "No dark backgrounds
   for content, prefer white surfaces" — section stays light,
   the card itself carries the accent highlight.
   ============================================================ */
.pricing-section { background: var(--color-bg-alt); }
.pricing-section .section-title h2,
.pricing-section .section-title p { color: var(--color-text); }
.pricing-section .section-title p { color: var(--color-text-secondary); }

.pricing-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-xl);
  padding: 48px 32px;
  text-align: center;
  box-shadow: var(--shadow-hover);
}
.pricing-card h3 {
  font-family: 'Montserrat', 'Noto Sans Devanagari', sans-serif;
  font-weight: 700;
  color: var(--color-text);
}
.price-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 12px 0;
}
.price-features { list-style: none; padding: 0; margin: 24px 0; text-align: left; max-width: 360px; margin-inline: auto; }
.price-features li {
  padding: 10px 0;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-features li svg { width: 18px; height: 18px; stroke: var(--color-success); flex-shrink: 0; }

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials-section { background: var(--color-bg); }

.testimonial-card {
  background: var(--color-bg-alt);
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-card-gap);
  height: calc(100% - var(--space-card-gap));
}
.testimonial-text { color: var(--color-text); margin-bottom: 20px; line-height: 1.8; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  flex-shrink: 0;
}
.author-info h4 { margin: 0; color: var(--color-text); font-weight: 600; }
.author-info p { margin: 0; color: var(--color-text-secondary); font-size: .9rem; }

/* ============================================================
   Footer — docs/02-brand/COMPONENT_RULES.md: "Minimal, 4 Columns"
   ============================================================ */
footer[role="contentinfo"] {
  background: var(--color-primary);
  color: #fff;
  padding: 64px 0 24px;
}
.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-bottom: 40px;
}
.footer-section h5 { font-family: 'Montserrat', sans-serif; font-weight: 700; margin-bottom: 16px; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: rgba(255,255,255,.75); text-decoration: none; transition: color var(--transition-fast); }
.footer-links a:hover { color: #fff; }
.footer-bottom { text-align: center; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.6); font-size: .9rem; }
.footer-bottom a { color: rgba(255,255,255,.75); }

/* ============================================================
   Video
   ============================================================ */
.video-responsive {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 48px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.video-responsive iframe { width: 100%; height: 100%; border: 0; }

/* ============================================================
   Mobile sticky CTA — docs/03-ux/MOBILE_FIRST.md +
   docs/03-ux/NAVIGATION.md ("Sticky Bottom CTA: Enabled")
   ============================================================ */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1500;
  padding: 12px 16px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
}
.mobile-sticky-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: 100%;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast);
}
.mobile-sticky-cta a:hover { background: var(--color-accent-hover); }

/* ============================================================
   Responsive — docs/02-brand/GRID_SYSTEM.md breakpoints
   (mobile 390 / tablet 1024 / desktop 1440)
   ============================================================ */
@media (min-width: 1440px) {
  .container { padding-left: 120px; padding-right: 120px; }
}

@media (max-width: 1023px) {
  .container { padding-left: 48px; padding-right: 48px; }
}

@media (max-width: 767px) {
  .container { padding-left: 16px; padding-right: 16px; }

  .mobile-sticky-cta { display: block; }
  body { padding-bottom: 76px; } /* clears the sticky CTA */

  .section-title h2 { font-size: 1.8rem; }
  .features-section, .how-it-works-section, .language-section,
  .pricing-section, .testimonials-section, .template-gallery { padding: 56px 0; }

  .template-card { flex: 0 0 260px; min-width: 260px; }
  .template-image { height: 280px; }
  .preview-template-img { max-height: 380px; }
  .btn-preview-action { width: 100%; justify-content: center; }
  .price-tag { font-size: 2.25rem; }
  .footer-content { text-align: center; }
  .price-features { max-width: none; }
}