/* ==========================================================================
   Matchett Data Solutions
   Table of contents:
   1.  Design tokens (colors, fonts, sizes)
   2.  Base styles and resets
   3.  Accessibility helpers (skip link, focus ring, screen-reader text)
   4.  Layout helpers
   5.  Buttons
   6.  Header and navigation
   7.  Hero
   8.  Sections, cards, grids
   9.  How it works, projects, packages, about
   10. Contact form
   11. Footer
   12. Scroll animations
   13. Reduced motion
   ========================================================================== */


/* 1. DESIGN TOKENS
   Custom properties (CSS variables) keep every color in one place.
   Change a value here and it updates everywhere it is used. */
:root {
  --bg: #070A0C;            /* page background */
  --surface: #101518;       /* alternate section background */
  --card: #181E22;          /* card background */
  --border: rgba(255, 255, 255, 0.08);
  --text: #E8EEF0;          /* main text */
  --muted: #9AA5AA;         /* secondary text */
  --accent: #3DDC97;        /* brand green */
  --glow: #6AEFB4;          /* lighter green used for glows */
  --deep: #147A54;          /* darker green for backgrounds and borders */

  /* Form fields need a brighter border than cards so they meet the 3:1
     contrast rule for interactive controls. */
  --field-border: #6B777C;

  --font-sans: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius-card: 20px;
  --header-height: 68px;
}


/* 2. BASE STYLES AND RESETS */

/* border-box makes padding count inside an element's width, which is easier to reason about. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Leaves room for the sticky header when jumping to a section. */
  scroll-padding-top: calc(var(--header-height) + 8px);
  /* Stops mobile browsers from changing text size on rotate. */
  -webkit-text-size-adjust: 100%;
}

/* Smooth scrolling, but only for people who have not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 7vw, 4.25rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--glow); }

/* Small uppercase labels in the monospace font. */
.eyebrow,
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}


/* 3. ACCESSIBILITY HELPERS */

/* A visible 2px green ring for keyboard users on every interactive element. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The skip link sits off-screen until it gets keyboard focus. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Text that is hidden visually but still read aloud by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* main gets focus when the skip link is used, so hide the outline on it. */
main:focus {
  outline: none;
}


/* 4. LAYOUT HELPERS */

/* Centers content and keeps line lengths readable. */
.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.section {
  padding-block: clamp(4.5rem, 10vw, 7.5rem);
}

/* Slightly lighter strip to separate sections visually. */
.section-alt {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.section-head {
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.section-head .eyebrow {
  margin-bottom: 0.75rem;
}

/* Grids are one column on phones and grow on wider screens. */
.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}


/* 5. BUTTONS (rounded pills) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.75rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

/* Primary: light fill, dark text. */
.btn-primary {
  background: var(--text);
  color: var(--bg);
}

.btn-primary:hover {
  color: var(--bg);
  background: #fff;
  box-shadow: 0 0 24px rgba(106, 239, 180, 0.35);
}

/* Secondary: transparent with a light outline. */
.btn-secondary {
  background: transparent;
  border-color: var(--text);
  color: var(--text);
}

.btn-secondary:hover {
  color: var(--text);
  background: rgba(232, 238, 240, 0.08);
}

/* Smaller version used in the navigation bar. */
.btn-sm {
  min-height: 40px;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
}


/* 6. HEADER AND NAVIGATION */

/* Sticky "frosted glass" bar: semi-transparent with a blur behind it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 10, 12, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

/* Browsers without blur support get a more solid bar so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(7, 10, 12, 0.96);
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  gap: 1rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.logo:hover { color: var(--text); }

/* Small glowing square before the logo text. */
.logo::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--glow);
}

/* Hamburger button (phones and tablets only). */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 2px 0;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* When the menu is open, the three bars turn into an X. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu: a panel that drops down under the header.
   It is hidden with visibility so its links cannot be tabbed to while closed. */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem clamp(1.25rem, 5vw, 2.5rem) 1.5rem;
  background: rgba(16, 21, 24, 0.98);
  border-bottom: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.nav-links a {
  display: block;
  padding: 0.9rem 0.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.nav-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.nav-email {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-align: center;
  text-decoration: none;
  padding: 0.5rem;
  overflow-wrap: anywhere;            /* lets the long address wrap on very narrow screens */
}

.nav-email:hover { color: var(--glow); }

/* Desktop navigation: everything sits in one row and the hamburger disappears.
   The email address is long, so this switches on at 1120px instead of a smaller width. */
@media (min-width: 1120px) {
  /* Give the header row a little more room than the page content has. */
  .site-header .container { max-width: 1280px; }

  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-left: 2rem;
    padding: 0;
    background: none;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .nav-links {
    display: flex;
    gap: 1.5rem;
    margin-inline: auto;
  }

  .nav-links a {
    padding: 0.5rem 0;
    border: 0;
    color: var(--muted);
    font-size: 0.92rem;
    transition: color 0.2s ease;
  }

  .nav-links a:hover { color: var(--text); }

  .nav-actions {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
  }

  .nav-email {
    padding: 0;
    font-size: 0.82rem;
    white-space: nowrap;
  }
}


/* 7. HERO */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;                 /* keeps the glow layers behind the text */
  padding-block: clamp(5rem, 14vw, 9.5rem) clamp(4.5rem, 11vw, 8rem);
  text-align: center;
}

/* Soft teal glow behind the hero text. */
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -10%;
  left: 50%;
  width: min(1000px, 140vw);
  height: 720px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(61, 220, 151, 0.22), rgba(20, 122, 84, 0.12) 50%, transparent 78%);
  pointer-events: none;
}

/* Faint grid lines that fade out toward the edges, for a techy feel. */
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center top, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at center top, #000 20%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero h1 {
  max-width: 16ch;
}

.hero-sub {
  max-width: 40rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 1.15rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.25rem;
}


/* 8. CARDS */
.card {
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Soft green glow when a card is hovered, or when something inside it has keyboard focus. */
.card:hover,
.card:focus-within {
  border-color: rgba(61, 220, 151, 0.4);
  box-shadow: 0 0 0 1px rgba(61, 220, 151, 0.15), 0 8px 40px rgba(106, 239, 180, 0.14);
}

.card h3 {
  margin-bottom: 0.75rem;
}

.card p {
  color: var(--muted);
}

/* Rounded square holding a service icon. */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1.25rem;
  border-radius: 14px;
  background: rgba(20, 122, 84, 0.25);
  border: 1px solid rgba(61, 220, 151, 0.3);
  color: var(--accent);
}

.icon svg {
  width: 24px;
  height: 24px;
}


/* 9. HOW IT WORKS, PROJECTS, PACKAGES, ABOUT */

/* Numbered steps */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--deep);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 500;
  box-shadow: 0 0 20px rgba(61, 220, 151, 0.25);
}

.steps .card h3 {
  margin-bottom: 0;
}

/* Project cards */
.mono-label {
  margin-bottom: 0.9rem;
}

.text-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-weight: 600;
}

/* Package cards: flex column so the button always sits at the bottom. */
.card-package {
  display: flex;
  flex-direction: column;
}

.checklist {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

/* Green check mark drawn with CSS in front of each bullet. */
.checklist li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text);
}

.checklist li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.45em;
  width: 0.4rem;
  height: 0.7rem;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.card .price-note {
  margin-top: auto;                   /* pushes the price note and button to the bottom */
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--glow);
}

/* About */
.about {
  max-width: 800px;
}

.about-text {
  color: var(--muted);
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  line-height: 1.75;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

.chips li {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text);
}


/* 10. CONTACT */
.contact {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .contact { grid-template-columns: 1fr 1.1fr; gap: 4rem; }
}

.contact-info .eyebrow { margin-bottom: 0.75rem; }

.contact-lede {
  margin-top: 1rem;
  color: var(--muted);
}

.contact-list {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.contact-list li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.contact-list a {
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 500;
  /* Long email address may need to wrap on very narrow screens. */
  overflow-wrap: anywhere;
}

.contact-list a:hover { color: var(--glow); }

.contact-form {
  display: grid;
  gap: 1.25rem;
}

.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
}

/* 1rem font size also stops iPhones from zooming in when a field is tapped. */
.field input,
.field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--field-border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.contact-form .btn {
  justify-self: start;
}

.form-note {
  font-size: 0.85rem;
}


/* 11. FOOTER */
.site-footer {
  padding-block: 2.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.site-footer a {
  color: var(--muted);
}

.site-footer a:hover {
  color: var(--text);
}


/* 12. SCROLL ANIMATIONS
   Elements with the "reveal" class start hidden and slightly lower down.
   script.js adds "is-visible" when they scroll into view, and they fade and rise.
   Everything is scoped to ".js" so that visitors without JavaScript still see all content. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  /* --reveal-delay is set by script.js to stagger cards by 80ms each.
     It only delays opacity and transform, so the hover glow stays instant. */
  transition:
    opacity 0.7s ease var(--reveal-delay, 0ms),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}


/* 13. REDUCED MOTION
   If the visitor has asked their device for less motion, show everything
   immediately and turn off transitions and animations. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}