/* ══════════════════════════════════════════
   index.html 專屬樣式
   所有字級皆引用 style.css 的 --fs-* token
   ══════════════════════════════════════════ */

/* ── INDEX OVERRIDES ── */
    

    * {  margin: 0; padding: 0; box-sizing: border-box;  }
/* ── NAVBAR ── */
    .navbar { 
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      background: rgba(10,31,60,0.97);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 0 62px;
     }
@keyframes phonePulse { 
      0%, 100% { text-shadow: 0 0 20px rgba(0,255,136,0.5); }
      50% { text-shadow: 0 0 30px rgba(0,255,136,0.8), 0 0 40px rgba(0,255,136,0.3); }
     }
/* ── FLOATING PHONE BTN ── */
    .floating-phone { 
      position: fixed; bottom: 24px; right: 24px; z-index: 9999;
      background: linear-gradient(135deg, #00C853, #00E676);
      color: white; padding: 16px 28px; border-radius: 50px;
      font-size: var(--fs-lg); font-weight: 900; text-decoration: none;
      display: flex; align-items: center; gap: 10px;
      box-shadow: 0 6px 24px rgba(0,200,83,0.5);
      letter-spacing: 1px;
      animation: floatPhone 3s ease-in-out infinite;
      transition: transform 0.2s;
     }
.floating-phone:hover {  transform: scale(1.05);  }
@keyframes floatPhone { 
      0%, 100% { box-shadow: 0 6px 24px rgba(0,200,83,0.5); }
      50% { box-shadow: 0 8px 32px rgba(0,200,83,0.7), 0 0 0 8px rgba(0,200,83,0.1); }
     }
/* ── HERO ── */
    .hero { 
      background: linear-gradient(160deg, #0A1F3C 0%, #162247 50%, #0D2B5E 100%);
      padding: 201.5px 62px 124px;
      position: relative;
      overflow: hidden;
     }
.hero-company-name { 
      font-size: var(--fs-5xl); font-weight: 900; color: white;
      letter-spacing: -2px; line-height: 1;
      margin-bottom: 12.4px;
      background: linear-gradient(135deg, #ffffff 0%, #a5d8ff 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      text-shadow: none;
     }
.hero-company-sub { 
      font-size: var(--fs-xl); color: var(--accent); font-weight: 700;
      margin-bottom: 31px; letter-spacing: 4.65px;
     }
.hero-stats { 
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24.8px;
     }
/* ── TRUST BAR ── */
    .trust-bar { 
      background: white;
      border-bottom: 1px solid var(--border);
      padding: 37.2px 62px;
     }
/* ── SECTION BASE ── */
    .section {  padding: 72px 40px;  }
/* ── SERVICES ── */
    .services-grid { 
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 31px;
     }
/* ── STATS ── */
    .stats-grid { 
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 31px;
     }
/* ── PROCESS ── */
    .process-steps { 
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 37.2px;
      position: relative;
     }
/* ── PLANS ── */
    .plans-grid { 
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 31px;
     }
/* ── CASES ── */
    .cases-grid { 
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 31px;
     }
/* ── TESTIMONIALS ── */
    .testimonials-grid { 
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 31px;
     }
/* ── FAQ ── */
    .faq-list {  max-width: 760px; margin: 0 auto;  }
/* ── CTA ── */
    .cta {  background: linear-gradient(160deg, var(--primary), #0049CC); padding: 72px 40px;  }
.cta-inner > p:not(.cta-note) {  font-size: var(--fs-sm); opacity: 0.8; margin-bottom: 36px;  }
/* ── FOOTER ── */
    footer { 
      background: var(--navy);
      color: white;
      padding: 86.8px 62px 0;
     }
/* ── RESPONSIVE ── */
    @media (max-width: 1024px) { 
      .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
      .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
     }
@media (max-width: 768px) {
.section {  padding: 56px 20px;  }
.hero {  padding: 110px 20px 60px;  }
.services-grid,
      .plans-grid,
      .cases-grid,
      .testimonials-grid {  grid-template-columns: minmax(0, 1fr);  }
.hero-stats {  grid-template-columns: repeat(2, minmax(0, 1fr));  }
.stats-grid {  grid-template-columns: repeat(2, minmax(0, 1fr));  }
.process-steps {  grid-template-columns: minmax(0, 1fr);  }
.trust-bar {  padding: 16px 20px;  }
}