/* style.css - FINAL VERSION with Inter font (matching main site) */

/* Main site color variables */
:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --secondary: #10b981;
    --accent: #f59e0b;
    --danger: #ef4444;
    --success: #10b981;
    --warning: #f59e0b;
    --dark: #0f172a;
    --darker: #0a0e17;
    --light: #ffffff;
    --gray: #94a3b8;
    --gray-dark: #475569;
    --gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
    --gradient-accent: linear-gradient(135deg, #6366f1, #8b5cf6);
    --gradient-dark: linear-gradient(135deg, #0f172a, #1e1b4b);
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.25);
    --border: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.2);

    /* Type scale - consistent hierarchy: H1 2.5em, H2 2em, H3 1.5em, H4 1.125em */
    --fs-h1: clamp(1.7rem, 4.5vw, 2.5rem);
    --fs-h2: clamp(1.4rem, 3.5vw, 2rem);
    --fs-h3: clamp(1.125rem, 2.2vw, 1.5rem);
    --fs-h4: clamp(1rem, 1.5vw, 1.125rem);
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.75rem;
}

/* Base Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Replaces the part of Bootstrap's Reboot this page actually relied on */
img,
svg {
  vertical-align: middle;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* ===== FIXED: Using Inter font (main site) ===== */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--darker);
  color: var(--light);
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Typography - Main site weights */
h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  margin-bottom: 1rem;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  margin-bottom: 1rem;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

p {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--gray);
  margin-bottom: 1rem;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Grid - replaces Bootstrap's grid */
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
  border-top: var(--bs-gutter-y) solid transparent;
}

.g-3 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}

@media (min-width: 992px) {
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
}

/* Spacing utilities - replace Bootstrap's.
   These keep !important deliberately: they have to outrank component rules
   such as `.card-premium p`, which is what Bootstrap's utilities did too. */
.mt-1 {
  margin-top: 0.25rem !important;
}
.mt-3 {
  margin-top: 1rem !important;
}
.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}
.mb-3 {
  margin-bottom: 1rem !important;
}
.ms-1 {
  margin-left: 0.25rem !important;
}

/* Section Spacing */
section {
  padding: 2.5rem 0;
  position: relative;
  scroll-margin-top: 80px;
}

/* Alternating section bands, mirroring the homepage's .faq-section */
#experience,
#certs {
  background: var(--dark);
  border-top: 1px solid var(--border);
}

/* Navigation - matches main site */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  padding: 8px 0;
  transition: all 0.3s ease;
}

.header.scrolled {
  padding: 6px 0;
  background: rgba(15, 23, 42, 0.98);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand .logo {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: white;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}

.nav-brand .logo i {
  color: var(--primary);
  margin-right: 8px;
  font-size: 1.6rem;
}

.logo-highlight {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-menu {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: var(--gray);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  position: relative;
  padding: 0.35rem 0;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--light);
  outline: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link:focus::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.nav-toggle:hover,
.nav-toggle:focus {
  background-color: rgba(255, 255, 255, 0.1);
  outline: none;
}

/* ============================================
   FOOTER - single compact bar
   ============================================
   Replaces a four-column grid whose tallest column set the footer height
   and which collapsed to one column on narrow screens, measuring 399px on
   desktop and 973px at 360px wide. One flex row that wraps keeps every
   destination while dropping the per-column headings and description text
   that made the grid tall. */
.footer {
  background: var(--dark);
  border-top: 1px solid var(--border);
  padding: 1.75rem 0;
}

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: white;
  white-space: nowrap;
}

/* The header renders fa-shield-halved from the Font Awesome font in
   --primary. This inlines the same FA 6 glyph so the footer matches it
   on the pages that load no icon font (services and links). */
.footer-brand .footer-icon {
  width: 1.05rem;
  height: 1.05rem;
  fill: var(--primary);
  flex-shrink: 0;
}

/* links/style.css scopes this to .logo-lockup, so restate it for the footer.
   legal.html has no --gradient token, hence the literal fallback. */
.footer-brand .logo-highlight {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
}

.footer-nav a {
  color: var(--gray);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-nav a:hover,
.footer-nav a:focus {
  color: white;
}

.footer-copy {
  margin: 0;
  color: var(--gray);
  font-size: 0.8125rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .footer-bar {
    justify-content: center;
    text-align: center;
  }

  .footer-copy {
    white-space: normal;
  }
}

/* Container - matches main site (header/footer) */
.header .container,
.footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* First section padding - clears the fixed header, then sits tight to it */
section:first-of-type {
  padding-top: calc(1rem + 80px);
}

/* Mobile nav - matches main site */
@media (max-width: 768px) {
  .header { padding: 8px 0; }

  .nav-brand .logo i {
    font-size: 1.5rem;
    margin-right: 6px;
  }

  .nav-menu {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: none;
    z-index: 999;
    box-shadow: var(--shadow-lg);
  }

  .nav-menu.show {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }
}

/* HERO Section - mirrors the homepage .hero-section */
.hero {
  padding: 0 0 60px;
  background: var(--gradient-dark);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(139, 92, 246, 0.10) 0%, transparent 50%);
  pointer-events: none;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

/* Hero content - mirrors the homepage .hero-content */
.hero-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.hero-title {
  margin-bottom: 1rem;
}

.hero-gradient {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  font-size: var(--fs-h1);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}

/* Hero paragraph. This is the homepage's .hero-description, under the same
   name here, so it carries that rule's metrics: 1.05rem on a 700px measure
   at 1.6 line-height. The 700px cap matters, the hero column is 900px and a
   39-word sentence across all of it is too long a line. */
.hero-subtitle {
  font-size: 1.05rem;
  color: var(--gray);
  max-width: 700px;
  margin: 0 auto 1.75rem;
  line-height: 1.6;
}

.trust-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.trust-badge {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 50px;
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
}

/* Hero CTA wrapper */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* Buttons - match main site .btn/.btn-premium */
.btn-secondary-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
}

.btn-secondary-custom:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-3px);
}

.btn-secondary-custom::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.btn-secondary-custom:hover::before,
.btn-secondary-custom:focus::before {
  left: 100%;
}

/* Section Headers */
.section-header {
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  padding-bottom: 1rem;
  border-bottom: none;
}

.section-header::after {
    width: 56px;
    height: 4px;

    background: linear-gradient(
        90deg,
        #6366f1,
        transparent
    );

    border-radius: 999px;
}

.section-header:hover::after {
  width: 120px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--gradient);
  color: white;
  padding: 0.6rem 1.25rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  /* The homepage's badge is a div, so it takes body's 1.7 line-height. This
     one is an h2 and would pick up the 1.2 from the h1..h6 rule instead, which
     measured 23.12px against the homepage's 16.32px of line box. Declare 1.7
     so the pill matches. Font-weight and letter-spacing already win over the
     h2 rule on specificity, so they need no restatement here. */
  line-height: 1.7;
  /* The homepage stacks this badge above the title in a centred column, so it
     carries a 1.25rem bottom margin there. Here it sits in a flex row beside
     .section-kicker, where that margin lifted the badge 10px off the kicker's
     centre line and added 20px to the header height. The row's own gap
     supplies the spacing. */
  margin-bottom: 0;
}

.section-kicker {
  font-size: 0.9rem;
  color: var(--gray);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  border: 1px solid var(--border);
}

/* Cards - Base Style - matches the homepage .product-card */
.card-premium {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 1.5rem;
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.card-premium:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-premium h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: white;
  font-weight: 700;
}

.card-premium p {
  font-size: 0.95rem;
  color: var(--gray);
  margin-bottom: 1rem;
  line-height: 1.7;
}

/* Card Links */
.card-links {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.card-links a {
  color: var(--primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.3s ease;
}

.card-links a:hover {
  text-decoration: underline;
  transform: translateX(3px);
}

/* Badges */
.badge-soft {
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--gray);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;
}

.badge-soft i {
  color: var(--primary);
  font-size: 0.75rem;
}

/* Add-on sub-cards (nested inside the Browser Add-ons card) */
.addon-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.addon-card:hover {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.04);
}

.addon-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.addon-head i {
  color: var(--primary);
  font-size: 0.95rem;
  flex: 0 0 auto;
}

.addon-head h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.addon-head h4 a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

.addon-head h4 a:hover {
  color: var(--primary);
}

.addon-card p {
  font-size: 0.85rem;
  margin-bottom: 0;
  flex: 1 1 auto;
}

.addon-card .card-links {
  margin-top: 0.85rem;
}

/* Link List */
.link-list {
  margin-top: 1rem;
}

.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 0.95rem;
  color: #f3f4f6;
  padding: 0.6rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  transition: all 0.3s ease;
}

.link-list a span {
  font-size: 0.8rem;
  color: var(--gray);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}

.link-list a:hover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
  transform: translateX(4px);
}

/* ===== TESTIMONIALS ===== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Testimonial cards - layout only, the box comes from .card-premium */
.testimonials-grid .card-premium {
  display: flex;
  flex-direction: column;
}

.testimonials-grid .card-premium:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Quote mark */
.testimonials-grid .card-premium::before {
  content: '"';
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 4rem;
  color: var(--primary);
  opacity: 0.15;
  font-family: serif;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

/* Stars */
.testimonial-stars {
  color: #ffd700;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 0.2rem;
  position: relative;
  z-index: 1;
}

.testimonial-stars i {
  color: #ffd700;
}

/* Quote text */
.testimonial-quote {
  font-size: 0.9rem;
  color: var(--light);
  margin-bottom: 1.25rem;
  font-style: italic;
  line-height: 1.7;
  position: relative;
  z-index: 1;
  flex: 1;
  padding-right: 1rem;
}

/* Author section */
.testimonial-author {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.author-name {
  font-weight: 700;
  color: white;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.author-title {
  color: var(--gray);
  font-size: 0.8rem;
  line-height: 1.4;
}

.author-title a {
  color: var(--primary);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.author-title a:hover {
  text-decoration: underline;
}

.author-title a i {
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.author-title a:hover i {
  opacity: 1;
}

/* Scroll Top Button */
.scroll-top-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--gradient);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease;
  z-index: 100;
}

.scroll-top-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Responsive Design */
@media (max-width: 992px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  section {
    padding: 2rem 0;
  }
  
  section:first-of-type {
    padding-top: calc(1rem + 70px);
  }

  /* keeps the hero CTA off the gradient edge, scaled with the section rhythm */
  .hero {
    padding-bottom: 48px;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .trust-badges {
    gap: 0.5rem;
  }

  .trust-badge {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }

  .section-badge {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .hero-cta {
    flex-direction: column;
  }
  
  .btn-secondary-custom {
    width: 100%;
    justify-content: center;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .header { padding: 6px 0; }
  .nav-menu { top: 100%; }

  section:first-of-type {
    padding-top: calc(1rem + 60px);
  }

  .hero {
    padding-bottom: 40px;
  }

  .card-premium {
    padding: 1.25rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .trust-badge {
    padding: 0.4rem 0.8rem;
    font-size: 0.7rem;
  }

  .hero-cta {
    gap: 0.5rem;
  }
  
  .btn-secondary-custom {
    padding: 0.8rem 1.5rem;
    font-size: 0.95rem;
  }
  
  .testimonial-stars {
    font-size: 0.8rem;
  }
  
  .testimonial-quote {
    font-size: 0.85rem;
  }
  
  .scroll-top-btn {
    bottom: 1rem;
    right: 1rem;
  }
}

@media (max-width: 360px) {
  .header { padding: 5px 0; }
  .nav-brand .logo { font-size: 1.3rem; }
  .nav-brand .logo i { font-size: 1.3rem; }
  .nav-menu { top: 70px; }

  .hero {
    padding-bottom: 36px;
  }
}

/* Print Styles */
@media print {
  .header,
  .scroll-top-btn,
  .footer {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
  
  .card-premium {
    border: 1px solid #ddd;
    box-shadow: none;
    background: white;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .card-premium:hover,
  .btn-secondary-custom:hover {
    transform: none;
  }
  
  .section-header:hover::after {
    width: 80px;
  }
}