/* ============================================
   Gosheaper LLC — Corporate Design System
   Inspired by Google Material / Corporate Blue
   ============================================ */

/* CSS Custom Properties */
:root {
  /* Google Blue palette */
  --blue-50: #e8f0fe;
  --blue-100: #d2e3fc;
  --blue-200: #a8c7fa;
  --blue-400: #669df6;
  --blue-500: #4285f4;
  --blue-600: #1a73e8;
  --blue-700: #1557b0;
  --blue-800: #0d3b78;
  --blue-900: #092148;

  /* Gray palette */
  --gray-50: #f8f9fa;
  --gray-100: #f1f3f4;
  --gray-200: #e8eaed;
  --gray-300: #dadce0;
  --gray-400: #bdc1c6;
  --gray-500: #9aa0a6;
  --gray-600: #80868b;
  --gray-700: #5f6368;
  --gray-800: #3c4043;
  --gray-900: #202124;

  /* Spacing */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-section: 5rem;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);

  /* Transitions */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family:var(--font-sans); color:var(--gray-900); background:#fff; line-height:1.6; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

/* ============================================
   Container
   ============================================ */
.container { max-width:1280px; margin:0 auto; padding:0 var(--space-xl); }

/* ============================================
   Navbar
   ============================================ */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; height:64px; transition:all var(--duration-normal) var(--ease-smooth); }
.navbar.scrolled { background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow-sm); border-bottom:1px solid var(--gray-200); }
.navbar-inner { display:flex; align-items:center; justify-content:space-between; height:100%; }

.nav-brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.25rem; color:var(--gray-900); letter-spacing:-0.01em; }
.nav-brand-icon { width:36px; height:36px; background:var(--blue-600); color:#fff; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:0.875rem; font-weight:700; }
.nav-brand-logo { width:36px; height:36px; border-radius:var(--radius-md); object-fit:cover; flex-shrink:0; }
.nav-brand-llc { font-size:0.7rem; font-weight:600; color:var(--blue-600); background:var(--blue-50); padding:2px 6px; border-radius:4px; margin-left:2px; }

.nav-links-desktop { display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-links-desktop a { font-size:0.875rem; font-weight:500; color:var(--gray-600); transition:color var(--duration-fast); }
.nav-links-desktop a:hover { color:var(--blue-600); }

.nav-cta { display:inline-flex; align-items:center; padding:0.625rem 1.25rem; background:var(--blue-600); color:#fff; font-weight:600; font-size:0.875rem; border-radius:var(--radius-md); transition:all var(--duration-fast); box-shadow:var(--shadow-xs); }
.nav-cta:hover { background:var(--blue-700); box-shadow:var(--shadow-md); }

.mobile-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.mobile-toggle span { width:22px; height:2px; background:var(--gray-700); border-radius:2px; transition:all var(--duration-normal); }

.mobile-menu { display:none; flex-direction:column; gap:8px; padding:1rem 0 1.5rem; border-top:1px solid var(--gray-200); background:#fff; }
.mobile-menu.open { display:flex; }
.mobile-menu a { padding:0.75rem 1rem; font-size:0.875rem; font-weight:500; color:var(--gray-700); border-radius:var(--radius-md); transition:background var(--duration-fast); }
.mobile-menu a:hover { background:var(--gray-50); }
.mobile-menu .mobile-cta { background:var(--blue-600); color:#fff; text-align:center; font-weight:600; margin:0 0.5rem; }

/* ============================================
   Hero
   ============================================ */
.hero { position:relative; padding:8rem 0 5rem; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:linear-gradient(135deg, rgba(26,115,232,0.04), #fff 50%); }
.hero-blob-1 { position:absolute; top:0; right:0; width:700px; height:700px; background:radial-gradient(circle, rgba(26,115,232,0.06), transparent 70%); border-radius:50%; transform:translate(33%, -33%); }
.hero-blob-2 { position:absolute; bottom:0; left:0; width:500px; height:500px; background:radial-gradient(circle, rgba(26,115,232,0.04), transparent 70%); border-radius:50%; transform:translate(-25%, 25%); }
.hero-inner { position:relative; z-index:1; }

.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }

.hero-badge { display:inline-flex; align-items:center; gap:0.5rem; padding:0.375rem 1rem; background:var(--blue-50); border:1px solid var(--blue-100); border-radius:var(--radius-full); font-size:0.75rem; font-weight:600; color:var(--blue-700); margin-bottom:1.5rem; }
.hero-badge-dot { width:6px; height:6px; border-radius:50%; background:var(--blue-600); animation:pulse-dot 2s ease-in-out infinite; }

.hero-title { font-size:clamp(2.5rem, 5vw, 4rem); font-weight:800; line-height:1.08; letter-spacing:-0.03em; color:var(--gray-900); margin-bottom:1.5rem; }
.hero-title-accent { color:var(--blue-600); }
.hero-text { font-size:1.125rem; color:var(--gray-600); line-height:1.7; max-width:520px; margin-bottom:2rem; }

.hero-actions { display:flex; gap:0.75rem; flex-wrap:wrap; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.875rem 1.75rem; font-size:1rem; font-weight:600; border-radius:var(--radius-md); transition:all var(--duration-fast); cursor:pointer; border:none; }
.btn-primary { background:var(--blue-600); color:#fff; box-shadow:var(--shadow-xs); }
.btn-primary:hover { background:var(--blue-700); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-outline { background:#fff; color:var(--gray-700); border:1px solid var(--gray-300); }
.btn-outline:hover { border-color:var(--blue-300); color:var(--blue-600); }
.btn-white { background:#fff; color:var(--blue-700); }
.btn-white:hover { background:var(--gray-50); }
.btn-ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.3); }
.btn-ghost:hover { background:rgba(255,255,255,0.1); }

/* Tracking card */
.hero-card { background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); border:1px solid var(--gray-200); padding:1.5rem; max-width:380px; margin-left:auto; }
.hero-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:1px solid var(--gray-100); }
.hero-card-header h3 { font-size:0.875rem; font-weight:600; color:var(--gray-800); }
.hero-card-status { font-size:0.75rem; font-weight:600; color:#16a34a; background:#dcfce7; padding:0.25rem 0.75rem; border-radius:var(--radius-full); }
.tracking-box { background:var(--gray-50); border-radius:var(--radius-md); padding:1rem; margin-bottom:1.25rem; }
.tracking-id { font-family:var(--font-mono); font-size:0.8125rem; font-weight:500; color:var(--blue-600); margin-bottom:0.75rem; }
.tracking-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem; }
.tracking-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.tracking-dot.done { background:#16a34a; }
.tracking-dot.active { background:var(--blue-500); }
.tracking-dot.pending { background:var(--gray-300); }
.tracking-line { flex:1; height:2px; border-radius:1px; }
.tracking-line.done { background:#16a34a; }
.tracking-line.pending { background:var(--gray-300); }
.tracking-labels { display:flex; justify-content:space-between; font-size:0.6875rem; color:var(--gray-500); }
.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0.625rem; }
.hero-stat { text-align:center; padding:0.75rem; background:var(--gray-50); border-radius:var(--radius-md); }
.hero-stat.blue { background:var(--blue-50); }
.hero-stat-value { font-size:1.25rem; font-weight:700; color:var(--gray-900); }
.hero-stat.blue .hero-stat-value { color:var(--blue-700); }
.hero-stat-label { font-size:0.6875rem; color:var(--gray-500); margin-top:0.125rem; }
.hero-stat.blue .hero-stat-label { color:var(--blue-600); }

/* ============================================
   Section shared
   ============================================ */
.section { padding:var(--space-section) 0; }
.section-alt { background:var(--gray-50); }
.section-header { max-width:640px; margin-bottom:3rem; }
.section-header.center { text-align:center; margin-left:auto; margin-right:auto; }
.section-label { font-size:0.75rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--blue-600); margin-bottom:0.75rem; display:block; }
.section-title { font-size:clamp(1.75rem, 3.5vw, 2.5rem); font-weight:800; letter-spacing:-0.03em; line-height:1.15; color:var(--gray-900); margin-bottom:1rem; }
.section-subtitle { font-size:1.0625rem; color:var(--gray-600); line-height:1.7; }

/* ============================================
   Services Grid
   ============================================ */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.service-card { background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:2rem; transition:all var(--duration-normal); position:relative; }
.service-card:hover { border-color:var(--blue-200); box-shadow:var(--shadow-sm); }
.service-card.featured { border:2px solid var(--blue-200); }
.service-card.featured .service-badge { display:inline-block; position:absolute; top:0; right:0; font-size:0.7rem; font-weight:600; color:#fff; background:var(--blue-600); padding:0.25rem 0.75rem; border-radius:0 0 0 var(--radius-md); }
.service-icon { width:48px; height:48px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.25rem; }
.service-icon.blue { background:var(--blue-50); }
.service-icon.gray { background:var(--gray-50); }
.service-card h3 { font-size:1.125rem; font-weight:700; color:var(--gray-900); margin-bottom:0.5rem; }
.service-card p { font-size:0.875rem; color:var(--gray-600); line-height:1.6; }

/* ============================================
   Why Us
   ============================================ */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.why-number { font-family:var(--font-mono); font-size:0.8125rem; font-weight:600; color:var(--blue-600); margin-bottom:1rem; }
.why-item h3 { font-size:1.25rem; font-weight:700; color:var(--gray-900); margin-bottom:0.625rem; }
.why-item p { font-size:0.9375rem; color:var(--gray-600); line-height:1.6; }

/* ============================================
   Coverage
   ============================================ */
.coverage-box { background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-xl); padding:2rem; max-width:800px; margin:0 auto; }
.coverage-states { display:flex; flex-wrap:wrap; gap:0.5rem 1.25rem; justify-content:center; font-size:0.875rem; }
.coverage-states .highlight { color:var(--blue-600); font-weight:600; }
.coverage-states span { color:var(--gray-600); }

/* ============================================
   Testimonials
   ============================================ */
.testimonials-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.testimonial-card { background:var(--gray-50); border-radius:var(--radius-lg); padding:2rem; }
.testimonial-stars { color:var(--blue-500); font-size:0.875rem; letter-spacing:0.2em; margin-bottom:1rem; }
.testimonial-card blockquote { font-size:0.9375rem; color:var(--gray-700); line-height:1.6; font-style:italic; margin-bottom:1.5rem; }
.testimonial-author { display:flex; align-items:center; gap:0.75rem; }
.testimonial-avatar { width:40px; height:40px; border-radius:50%; background:var(--blue-100); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.75rem; color:var(--blue-700); }
.testimonial-author strong { display:block; font-size:0.875rem; color:var(--gray-900); font-style:normal; }
.testimonial-author span { font-size:0.75rem; color:var(--gray-500); }

/* ============================================
   CTA Section
   ============================================ */
.cta { background:var(--blue-600); position:relative; overflow:hidden; }
.cta::before { content:''; position:absolute; top:0; right:0; width:500px; height:500px; background:rgba(255,255,255,0.05); border-radius:50%; transform:translate(25%, -50%); }
.cta::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(66,133,244,0.3), transparent); }
.cta-inner { position:relative; z-index:1; text-align:center; max-width:600px; margin:0 auto; }
.cta .section-label { color:var(--blue-200); }
.cta .section-title { color:#fff; }
.cta .section-subtitle { color:var(--blue-100); margin:0 auto 2.5rem; }
.cta-buttons { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; }

/* ============================================
   Footer
   ============================================ */
.footer { background:var(--gray-900); padding:4rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
.footer-brand p { font-size:0.875rem; color:var(--gray-400); line-height:1.6; margin-top:1rem; max-width:280px; }
.footer-contact { margin-top:1.5rem; display:flex; flex-direction:column; gap:0.25rem; }
.footer-contact a { font-size:0.875rem; color:var(--gray-300); transition:color var(--duration-fast); }
.footer-contact a:hover { color:#fff; }
.footer h4 { font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray-400); margin-bottom:1rem; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:0.625rem; }
.footer-links a { font-size:0.875rem; color:var(--gray-300); transition:color var(--duration-fast); }
.footer-links a:hover { color:#fff; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:2rem; border-top:1px solid var(--gray-800); font-size:0.75rem; color:var(--gray-500); }

/* Footer brand override */
.footer .nav-brand { color:#fff; }
.footer .nav-brand-llc { color:var(--blue-400); background:rgba(26,115,232,0.2); }

/* ============================================
   Animations
   ============================================ */
@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.animate-fade-up { animation:fadeUp 0.7s ease-out forwards; }
.stagger-1 { animation-delay:0.1s; opacity:0; }
.stagger-2 { animation-delay:0.2s; opacity:0; }
.stagger-3 { animation-delay:0.3s; opacity:0; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width:1024px) {
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .hero-text { margin-left:auto; margin-right:auto; }
  .hero-actions { justify-content:center; }
  .hero-card { display:none; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .why-grid { grid-template-columns:1fr; }
  .testimonials-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  :root { --space-section:3.5rem; }
  .nav-links-desktop { display:none; }
  .mobile-toggle { display:flex; }
  .section-header { max-width:100%; }
  .services-grid { grid-template-columns:1fr; }
  .hero { padding:6rem 0 3.5rem; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:0.5rem; text-align:center; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  html { scroll-behavior:auto; }
}