/* =========================================================
   Arsenal Computing — Brand New Site
   Design System: Modern Dark, #4C40F7 accent
   =========================================================

   HOW THIS FILE IS ORGANIZED — use Ctrl+F to jump to any section:
     1.  Google Fonts Import
     2.  CSS Variables  ← START HERE to customize colors/fonts
     3.  Base Reset
     4.  Utility Classes
     5.  Preloader
     6.  Header & Navigation
     7.  Off-Canvas Mobile Menu
     8.  Hero Section (homepage only)
     9.  Section Labels & Titles (used site-wide)
    10.  Service Cards (homepage 2×2 grid)
    11.  Portfolio Cards (homepage preview + full page)
    12.  Why Us / Approach Cards (4-column grid)
    13.  CTA Banner
    14.  Footer
    15.  Inner Page Hero (About, Services, Portfolio, Contact)
    16.  About Page Layout
    17.  Stats Band (animated counters row)
    18.  Services Full Page (horizontal row cards)
    19.  Portfolio Full Page (filter buttons + grid)
    20.  Contact Page
    21.  Responsive Breakpoints (tablet & mobile overrides)
*/

/* =========================================================
   1. GOOGLE FONTS IMPORT
   Loads two fonts from Google's CDN. Requires an internet
   connection. If fonts fail to load, the browser falls back
   to 'sans-serif'.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* =========================================================
   2. CSS VARIABLES (Your Site's "Settings Panel")
   Everything defined here controls the entire site's look.
   Changing ONE variable updates it everywhere it's used.
   ★ TO REBRAND: Change --brand to your new color hex code.
   ========================================================= */
:root {

  /* --- BACKGROUNDS (darkest to lightest) ---
     These are layered to create depth. bg is the base,
     bg-2 is slightly lighter for alternating sections. */
  --bg:           #09090f;  /* Main page background — deepest dark */
  --bg-2:         #111119;  /* Slightly lighter — Services section, Footer */
  --bg-card:      #14141e;  /* Card / panel background inside boxes */
  --bg-hover:     #1c1c2a;  /* Background on hover (nav links, tags) */

  /* --- BRAND COLOR (your purple accent) ---
     Change --brand to any hex code to rebrand the whole site. */
  --brand:        #4C40F7;  /* ★ PRIMARY BRAND COLOR — change this hex to rebrand */
  --brand-light:  #6366f1;  /* Lighter purple — gradient text, secondary accents */
  --brand-dark:   #3730d4;  /* Darker purple — button hover & pressed state */
  --brand-glow:   rgba(76, 64, 247, 0.18); /* Transparent purple — glowing backgrounds */

  /* --- TEXT (brightest to most faded) --- */
  --text:         #ededf5;  /* Main readable text — headings, body copy */
  --text-muted:   #9898a8;  /* Secondary text — descriptions, subtitles */
  --text-faint:   #5a5a72;  /* Near-invisible — small labels, placeholders */

  /* --- BORDERS --- */
  --border:       #1e1e2e;  /* Standard divider line between sections and cards */
  --border-light: #2a2a3e;  /* Slightly lighter — form inputs and tag pills */

  --white:        #ffffff;  /* Pure white — button text, bright headings */

  /* --- TYPOGRAPHY --- */
  --font-main:    'Inter', sans-serif;         /* Body font — all paragraphs and small text */
  --font-head:    'Space Grotesk', sans-serif; /* Heading font — all h1/h2/h3/h4 titles */

  /* --- SHAPES & SHADOWS --- */
  --radius:       10px;  /* Corner rounding on buttons and small cards */
  --radius-lg:    18px;  /* Corner rounding on larger cards and panels */
  --shadow:       0 4px 32px rgba(0,0,0,0.4);           /* Standard drop shadow */
  --shadow-brand: 0 4px 32px rgba(76,64,247,0.25);      /* Purple glow shadow on hover */

  /* --- ANIMATION SPEED ---
     Controls how fast hover/transition effects play.
     Lower = faster, higher = slower. 0.3s is standard. */
  --transition:   all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   3. BASE RESET
   Removes default browser styles so everything starts clean.
   You generally don't need to touch anything in this block.
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-behavior: smooth makes anchor (#hash) links scroll smoothly */
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;      /* Space between lines of text — 1.7 is comfortable for reading */
  overflow-x: hidden;    /* Prevents a horizontal scrollbar from appearing */
}
a { text-decoration: none; color: inherit; transition: var(--transition); }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* =========================================================
   4. UTILITY CLASSES
   Small reusable helpers you can apply directly in HTML.
   e.g. <div class="container"> or <p class="text-center">
   ========================================================= */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Centers content, limits max width */
.section { padding: 100px 0; } /* Standard vertical spacing for every major section */
.text-center { text-align: center; }
.text-brand { color: var(--brand); } /* Makes any text element purple */

/* =========================================================
   5. PRELOADER
   The full-screen loading overlay shown when the page first
   loads. JS fades it out 400ms after everything is loaded.
   See main.js → "Preloader" block.
   ========================================================= */
#preloader {
  position: fixed; inset: 0;  /* Covers the entire screen (top/right/bottom/left: 0) */
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;               /* Sits on top of absolutely everything else */
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
/* JS adds class "hidden" to trigger this fade-out and hide */
#preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { text-align: center; }
.preloader-ring {
  width: 54px; height: 54px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);   /* Only the top border is colored — creates the arc spinner */
  border-radius: 50%;
  animation: spin 0.9s linear infinite; /* Spins forever. Change 0.9s to speed up / slow down. */
  margin: 0 auto 16px;
}
.preloader-name {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--text-faint);
}
/* Keyframe: rotates from 0 to 360 degrees (one full spin) */
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   6. HEADER & NAVIGATION
   Fixed top bar that stays visible while scrolling.
   Starts transparent. When user scrolls past 40px, JS adds
   the "scrolled" class which triggers the glass blur effect.
   See main.js → "Sticky Header" block.
   ========================================================= */
#header {
  position: fixed; top: 0; left: 0; right: 0; /* Pins to top of screen always */
  z-index: 1000;            /* Above page content but below preloader (9999) */
  padding: 22px 0;
  transition: var(--transition);
}
/* Applied by JS when user scrolls 40px down the page */
#header.scrolled {
  background: rgba(9, 9, 15, 0.9);    /* Semi-transparent dark background appears */
  backdrop-filter: blur(20px);         /* Frosted glass blur effect */
  -webkit-backdrop-filter: blur(20px); /* Same thing, required for Safari */
  border-bottom: 1px solid var(--border); /* Subtle line appears under header */
  padding: 14px 0;                     /* Header shrinks slightly on scroll */
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
}
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* Logo image — height is fixed, width scales automatically to preserve proportions */
.logo img { height: 36px; width: auto; max-width: none; }

/* Desktop navigation links row */
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-muted);
  border-radius: 6px;
  transition: var(--transition);
}
/* Highlighted state: hovered link or current page link */
.nav a:hover, .nav a.active { color: var(--text); background: var(--bg-hover); }
.header-right { display: flex; align-items: center; gap: 12px; }

/* --- Buttons (used throughout the whole site) --- */

/* Primary button: solid purple background */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 28px;
  background: var(--brand);
  color: var(--white);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: var(--radius);
  transition: var(--transition);
  border: 1px solid var(--brand);
  cursor: pointer;
  white-space: nowrap; /* Prevents the button text from wrapping to multiple lines */
}
.btn-primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-1px);      /* Button lifts 1px upward on hover */
  box-shadow: var(--shadow-brand);  /* Purple glow appears */
}
/* Outline/ghost button: transparent with a border */
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: transparent;
  color: var(--text);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  transition: var(--transition);
  cursor: pointer;
}
.btn-outline:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-glow);
}
/* Larger size modifier — add alongside btn-primary or btn-outline for big CTA buttons */
.btn-lg { padding: 15px 34px; font-size: 15px; border-radius: 12px; }

/* Hamburger menu icon (three horizontal bars) — hidden on desktop, shown on mobile */
.hamburger {
  display: none; flex-direction: column;
  gap: 5px; cursor: pointer; padding: 6px;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: var(--transition);
}
/* When menu is open, the three bars animate to form an X shape */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   7. OFF-CANVAS MOBILE MENU
   The slide-in side drawer shown on mobile screens.
   Positioned off-screen to the right by default.
   JS adds/removes the "open" class to slide it in/out.
   See main.js → "Off-Canvas Menu" block.
   ========================================================= */

/* Dark semi-transparent overlay covering the page behind the drawer */
.offcanvas-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1098;
  opacity: 0; visibility: hidden; /* Hidden by default */
  transition: var(--transition);
}
.offcanvas-overlay.open { opacity: 1; visibility: visible; } /* Fades in when menu opens */

.offcanvas {
  position: fixed; top: 0; right: -340px; /* Starts 340px off the right edge — invisible */
  width: 300px; height: 100%;
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  z-index: 1099; /* Above the overlay */
  padding: 28px 24px;
  overflow-y: auto;
  transition: right 0.38s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth slide-in animation */
  display: flex; flex-direction: column; gap: 28px;
}
.offcanvas.open { right: 0; } /* Slides into view */

.offcanvas-header {
  display: flex; align-items: center; justify-content: space-between;
}
.offcanvas-close {
  width: 34px; height: 34px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 16px;
  cursor: pointer; transition: var(--transition);
}
.offcanvas-close:hover { color: var(--text); border-color: var(--brand); }
.offcanvas-nav { display: flex; flex-direction: column; gap: 2px; }
.offcanvas-nav a {
  display: block; padding: 12px 14px;
  font-size: 15px; font-weight: 500;
  color: var(--text-muted); border-radius: 8px;
  transition: var(--transition);
}
.offcanvas-nav a:hover { color: var(--text); background: var(--bg-hover); }
.offcanvas-divider { border: none; border-top: 1px solid var(--border); }
.offcanvas-contact { display: flex; flex-direction: column; gap: 8px; }
.offcanvas-contact-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-faint);
}
.offcanvas-contact a { font-size: 14px; color: var(--text-muted); }
.offcanvas-contact a:hover { color: var(--brand); }
/* margin-top: auto pushes the CTA button all the way to the bottom of the drawer */
.offcanvas-cta { margin-top: auto; }

/* =========================================================
   8. HERO SECTION (Homepage only)
   The full-height opening section. Contains the gradient
   background, dot grid overlay, headline, subtitle,
   two CTA buttons, and the three stat counters.
   ========================================================= */
.hero {
  min-height: 100vh;           /* Takes up at least the full screen height */
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 140px 0 80px;
}
/* The purple radial glow behind the headline — purely decorative */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(76,64,247,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(76,64,247,0.06) 0%, transparent 60%);
}
/* Dot grid overlay on the background */
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(30,30,46,0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,30,46,0.6) 1px, transparent 1px);
  background-size: 64px 64px;  /* Size of each grid square — change to resize the grid */
  /* mask-image fades the grid out toward the edges so it doesn't look harsh */
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
}
/* Hero content sits above background layers */
.hero-content { position: relative; z-index: 1; max-width: 820px; }

/* Small pill badge above the headline ("Web Development Agency") */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px;
  background: var(--brand-glow);
  border: 1px solid rgba(76,64,247,0.35);
  border-radius: 100px; /* Fully rounded pill shape */
  font-size: 12px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--brand-light);
  margin-bottom: 28px;
}
/* The small dot that pulses inside the badge */
.hero-badge-dot { width: 6px; height: 6px; background: var(--brand); border-radius: 50%; animation: pulse-dot 2s infinite; }
/* Fades the dot in and out to create a "breathing" pulse effect */
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Main hero headline */
.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(42px, 6vw, 78px); /* clamp(min, preferred, max) — scales between 42px and 78px with the screen */
  font-weight: 700; line-height: 1.1;
  letter-spacing: -1.5px; /* Tight spacing looks more premium for large headings */
  color: var(--white);
  margin-bottom: 24px;
}
/* The purple gradient text on part of the headline — e.g. "Custom Software" */
.hero h1 .gradient-text {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* Clips gradient to text shape */
  background-clip: text;
}
.hero-sub {
  font-size: 18px; color: var(--text-muted);
  max-width: 520px; margin-bottom: 40px;
  line-height: 1.75;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; } /* Two CTA buttons side by side */

/* Row of three stats below the buttons (100+, 5+, 98%) */
.hero-stats {
  display: flex; gap: 48px; margin-top: 64px;
  padding-top: 40px; border-top: 1px solid var(--border); /* Thin line separating stats from buttons */
  flex-wrap: wrap;
}
/* The large animated number (e.g. "100+") — counts up via JS */
.stat-num {
  font-family: var(--font-head);
  font-size: 34px; font-weight: 700;
  color: var(--white); line-height: 1;
  margin-bottom: 6px;
}
.stat-label { font-size: 13px; color: var(--text-muted); } /* Label below the number */

/* =========================================================
   9. SECTION LABELS & TITLES
   Reusable heading components used at the top of each section.
   Structure in HTML:
     <p class="section-tag">What We Build</p>       ← small all-caps label
     <h2 class="section-title">Big Heading</h2>     ← main section heading
     <p class="section-sub">Subtitle paragraph</p>  ← supporting sentence
   ========================================================= */
.section-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--brand); margin-bottom: 16px;
}
/* The short purple line that appears before the tag text (CSS-generated, no HTML needed) */
.section-tag::before {
  content: ''; width: 20px; height: 2px;
  background: var(--brand); border-radius: 2px;
}
.section-title {
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 46px); /* Fluid: scales between 28px and 46px */
  font-weight: 700; line-height: 1.2;
  letter-spacing: -0.5px; color: var(--white);
  margin-bottom: 16px;
}
.section-sub {
  font-size: 17px; color: var(--text-muted);
  max-width: 540px; line-height: 1.75;
}

/* =========================================================
   9.5 WHAT WE DO CODE ANIMATION (Homepage)
   Adds a compact, animated code editor visual next to the
   "What We Do" copy. Decorative only.
   ========================================================= */
.what-we-do-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  align-items: center;
  gap: 56px;
}
.what-we-do-copy .section-sub { max-width: 640px; }

.what-we-do-code {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
}
.what-we-do-code::before {
  content: '';
  position: absolute;
  inset: -18px -16px;
  background: radial-gradient(circle at 65% 35%, rgba(76, 64, 247, 0.28), rgba(76, 64, 247, 0) 70%);
  filter: blur(20px);
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
  animation: codeGlow 4.8s ease-in-out infinite;
}

.code-window {
  position: relative;
  z-index: 1;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #121221 0%, #0b0b14 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(76, 64, 247, 0.12);
  animation: codeFloat 5s ease-in-out infinite;
}
.code-window-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.code-window-dots {
  display: inline-flex;
  gap: 7px;
}
.code-window-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #313146;
}
.code-window-dots span:nth-child(1) { background: #ff5f57; }
.code-window-dots span:nth-child(2) { background: #febc2e; }
.code-window-dots span:nth-child(3) { background: #28c840; }
.code-window-file {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.code-window-body {
  position: relative;
  z-index: 1;
  padding: 18px 18px 20px;
  font-family: Consolas, "SFMono-Regular", "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.8;
  color: #d8d8eb;
}
.code-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.code-token-keyword { color: #8ba7ff; }
.code-token-string { color: #8de9b6; }
.code-token-function { color: #79d8ff; }
.code-line-active { color: #ececff; }

.typed-code {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  border-right: 2px solid var(--brand-light);
  animation: typeSnippet 4.6s steps(30, end) infinite, caretBlink 0.9s steps(1, end) infinite;
}

.code-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -60px;
  height: 56px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(76, 64, 247, 0), rgba(76, 64, 247, 0.15), rgba(76, 64, 247, 0));
  animation: scanDown 6.4s ease-in-out infinite;
}

@keyframes codeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes codeGlow {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
@keyframes typeSnippet {
  0%, 8% { max-width: 0; }
  42%, 70% { max-width: 31ch; }
  100% { max-width: 0; }
}
@keyframes caretBlink {
  0%, 49% { border-right-color: var(--brand-light); }
  50%, 100% { border-right-color: transparent; }
}
@keyframes scanDown {
  0%, 12% { transform: translateY(0); opacity: 0; }
  30%, 75% { opacity: 1; }
  88%, 100% { transform: translateY(300px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .what-we-do-code::before,
  .code-window,
  .typed-code,
  .code-scan { animation: none !important; }
  .typed-code {
    max-width: 31ch;
    border-right: 0;
  }
}

/* =========================================================
   10. SERVICE CARDS (Homepage 2×2 grid)
   The four service preview cards on the homepage.
   NOTE: The full Services page uses .service-row instead
   (horizontal layout, defined further down).
   ========================================================= */
.services-section { background: var(--bg-2); } /* Alternating section uses a slightly lighter bg */

/* 2-column grid — the 1px gaps styled as dividers between cards */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  gap: 1px; background: var(--border);   /* Gap filled with border color = visible grid lines */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden; margin-top: 56px;
}
.service-card {
  background: var(--bg-card);
  padding: 40px 36px;
  position: relative; overflow: hidden;
  transition: var(--transition);
}
/* Gradient overlay that reveals on hover (the subtle brand glow) */
.service-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--brand-glow), transparent);
  opacity: 0; transition: opacity 0.3s ease; /* Hidden until hover */
}
.service-card:hover::after { opacity: 1; } /* Glow fades in on hover */
.service-card:hover { transform: translateY(-3px); } /* Card lifts 3px on hover */

/* Small number label at top of card (e.g. "01") */
.service-num {
  font-size: 11px; font-weight: 700;
  letter-spacing: 3px; color: var(--brand);
  margin-bottom: 20px;
}
/* Square icon box */
.service-icon-wrap {
  width: 52px; height: 52px;
  background: var(--brand-glow);
  border: 1px solid rgba(76,64,247,0.25);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--brand);
  margin-bottom: 20px;
  transition: var(--transition);
  position: relative; z-index: 1; /* z-index keeps icon above the ::after overlay */
}
/* Icon box fills solid purple when card is hovered */
.service-card:hover .service-icon-wrap {
  background: var(--brand); color: var(--white);
  box-shadow: var(--shadow-brand);
}
.service-card h3 {
  font-family: var(--font-head);
  font-size: 20px; font-weight: 600;
  color: var(--white); margin-bottom: 10px;
  position: relative; z-index: 1;
}
.service-card p {
  font-size: 14px; color: var(--text-muted);
  line-height: 1.7; margin-bottom: 24px;
  position: relative; z-index: 1;
}
/* "Learn More →" link at the bottom of each card */
.service-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  color: var(--brand); letter-spacing: 0.5px;
  text-transform: uppercase; position: relative; z-index: 1;
}
.service-arrow i { transition: transform 0.3s; }
/* Arrow slides right on card hover */
.service-card:hover .service-arrow i { transform: translateX(5px); }
.services-cta { text-align: center; margin-top: 44px; } /* "View All Services" button wrapper */

/* =========================================================
   11. PORTFOLIO CARDS
   Used on both the homepage preview (3-col) and the full
   Portfolio page (.portfolio-full-grid, also 3-col).
   Each card has a thumbnail area, a chip badge, and a body.
   ========================================================= */

/* 3-column grid on homepage */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 56px;
}
.portfolio-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden; transition: var(--transition);
}
/* Card lifts and glows purple on hover */
.portfolio-card:hover {
  border-color: rgba(76,64,247,0.4);
  transform: translateY(-5px);
  box-shadow: var(--shadow-brand);
}

/* Top image / thumbnail area of the card */
.portfolio-thumb {
  height: 200px; position: relative; overflow: hidden;
  background: var(--bg-hover);
  display: flex; align-items: center; justify-content: center;
}
/* Placeholder shown when there is no real project screenshot yet */
.portfolio-thumb-placeholder {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  color: var(--text-faint);
}
.portfolio-thumb-placeholder i { font-size: 28px; }
.portfolio-thumb-placeholder span { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
/* When a real image is added, it fills and covers the thumbnail area */
.portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
/* Image zooms slightly when card is hovered */
.portfolio-card:hover .portfolio-thumb img { transform: scale(1.06); }

/* Colored pill badge in the top-left corner of the thumbnail (e.g. "Web App") */
.portfolio-chip {
  position: absolute; top: 14px; left: 14px;
  padding: 3px 10px;
  background: var(--brand);
  color: var(--white);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  border-radius: 100px;
}
.portfolio-body { padding: 24px; } /* The text content below the thumbnail */
.portfolio-body h3 {
  font-family: var(--font-head);
  font-size: 17px; font-weight: 600;
  color: var(--white); margin-bottom: 8px;
}
.portfolio-body p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 18px; }

/* Bottom row of the card: tech stack on the left, "View →" link on the right */
.portfolio-footer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-faint);
}
.portfolio-footer-row a {
  font-size: 12px; font-weight: 600; color: var(--brand);
  display: flex; align-items: center; gap: 5px;
}
.portfolio-cta { text-align: center; margin-top: 44px; }

/* =========================================================
   12. WHY US / APPROACH CARDS (4-column grid)
   Reused on three pages:
   - Homepage: "Built Different" section
   - About: "Our Approach" section
   - Services: "How Every Engagement Works" section
   ========================================================= */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop — reduces on smaller screens */
  gap: 20px; margin-top: 56px;
}
.why-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  transition: var(--transition);
}
.why-card:hover { border-color: rgba(76,64,247,0.35); transform: translateY(-3px); }

/* Small icon box at the top of each card */
.why-icon {
  width: 44px; height: 44px;
  background: var(--brand-glow);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--brand);
  margin-bottom: 16px;
}
.why-card h4 {
  font-family: var(--font-head);
  font-size: 16px; font-weight: 600;
  color: var(--white); margin-bottom: 8px;
}
.why-card p { font-size: 13px; color: var(--text-muted); line-height: 1.65; }

/* =========================================================
   13. CTA BANNER
   The call-to-action section near the bottom of every page.
   Has a big headline, subtitle, and two buttons (centered).
   The ::before creates a subtle radial glow behind the content.
   ========================================================= */
.cta-section {
  text-align: center; position: relative; overflow: hidden;
}
/* Purple radial glow in the background — purely decorative */
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(76,64,247,0.12), transparent);
}
.cta-section h2 {
  font-family: var(--font-head);
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 700; line-height: 1.2;
  color: var(--white); margin-bottom: 18px;
  position: relative; /* Keeps text visible above the ::before glow overlay */
}
.cta-section p {
  font-size: 17px; color: var(--text-muted);
  max-width: 480px; margin: 0 auto 36px;
  position: relative; line-height: 1.7;
}
/* Wraps the two buttons — centered row that stacks vertically on small screens */
.cta-btns {
  display: flex; gap: 14px;
  justify-content: center; flex-wrap: wrap;
  position: relative;
}

/* =========================================================
   14. FOOTER
   Three rows:
     Top:    Logo (left) | Email (center) | Status dot (right)
     Middle: Nav links (left) | Social icons (right)
     Bottom: Copyright (left) | Privacy + Terms (right)
   Plus a large decorative "ARSENAL" watermark at the very bottom.
   ========================================================= */
footer { background: var(--bg-2); border-top: 1px solid var(--border); }

/* Top row uses a 3-column grid */
.footer-top {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 32px;
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--border);
}
.footer-logo img { height: 30px; }

/* Large clickable email address in the center of the footer top */
.footer-email-link {
  font-family: var(--font-head);
  font-size: clamp(14px, 1.8vw, 20px); /* Scales with viewport width */
  font-weight: 600; color: var(--white);
  text-align: center;
}
.footer-email-link:hover { color: var(--brand); }

/* "Ready to Help" status indicator with the green pulsing dot */
.footer-status {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; font-size: 13px; color: var(--text-muted);
}
/* The animated green dot — shows availability */
.status-dot {
  width: 8px; height: 8px; background: #22c55e;
  border-radius: 50%; animation: pulse-green 2s infinite;
}
/* Expanding ring pulse animation on the green dot */
@keyframes pulse-green {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } /* Ring expands then fades out */
}

/* Middle row: nav links and social icons */
.footer-mid {
  display: flex; align-items: center; justify-content: space-between;
  padding: 32px 0; border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: 20px;
}
.footer-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.footer-nav a {
  padding: 7px 12px; font-size: 13px;
  color: var(--text-muted); border-radius: 6px;
}
.footer-nav a:hover { color: var(--text); background: var(--bg-hover); }

/* Social icon buttons (LinkedIn, GitHub, Twitter) */
.footer-social { display: flex; gap: 8px; }
.footer-social a {
  width: 34px; height: 34px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: 13px; color: var(--text-muted);
  transition: var(--transition);
}
.footer-social a:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-glow); }

/* Bottom row: copyright and legal links */
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0; flex-wrap: wrap; gap: 12px;
}
.footer-copy { font-size: 13px; color: var(--text-faint); }
.footer-legal { display: flex; gap: 16px; }
.footer-legal a { font-size: 13px; color: var(--text-faint); }
.footer-legal a:hover { color: var(--brand); }

/* Large decorative "ARSENAL" text at the very bottom — purely visual, no function */
.footer-watermark {
  text-align: center; padding: 16px 0 48px;
  overflow: hidden; user-select: none; /* Prevents this text from being highlighted/copied */
}
/* Outline-only text: transparent fill with just a thin stroke border */
.footer-watermark-text {
  font-family: var(--font-head);
  font-size: clamp(36px, 9vw, 110px); /* Scales with screen width */
  font-weight: 800; letter-spacing: 6px;
  text-transform: uppercase; color: transparent; /* No fill — just the outline stroke */
  -webkit-text-stroke: 1px var(--border-light); /* Thin outline drawn using border color */
  opacity: 0.5;
}

/* =========================================================
   15. INNER PAGE HERO
   Used on About, Services, Portfolio, and Contact pages.
   Smaller than the homepage hero — just a page title and
   a breadcrumb (Home > PageName).
   ========================================================= */
.page-hero {
  padding: 150px 0 72px; text-align: center;
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse 60% 50% at 50% -10%, rgba(76,64,247,0.18), transparent); /* Subtle purple glow at the top */
}
.page-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 700; color: var(--white);
  margin-bottom: 16px; letter-spacing: -1px;
}
.page-hero p { font-size: 17px; color: var(--text-muted); max-width: 520px; margin: 0 auto; line-height: 1.7; }

/* Breadcrumb navigation trail — shows "Home › About" etc. */
.breadcrumb {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 13px; color: var(--text-faint);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand); }

/* =========================================================
   16. ABOUT PAGE — Two-Column Layout
   Left column: image box with a floating stat badge overlapping
   the bottom-right corner.
   Right column: text, paragraphs, and 2×2 bullet grid.
   ========================================================= */

/* Side-by-side two-column layout — collapses to single column on tablet */
.about-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
}
/* Left column: dark box that will hold a company photo */
.about-img-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); aspect-ratio: 4/3; /* Forces 4:3 proportions */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.about-img-box img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder shown until a real company photo is provided */
.about-placeholder {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px; color: var(--text-faint);
}
.about-placeholder i { font-size: 44px; }
.about-placeholder span { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }

/* The "100+ Projects Delivered" badge floating in the bottom-right corner of the image */
.about-stat-badge {
  position: absolute; bottom: -16px; right: -16px; /* Hangs slightly off the corner */
  background: var(--brand); color: var(--white);
  border-radius: var(--radius-lg); padding: 18px 24px;
  text-align: center;
}
.about-stat-badge-num {
  font-family: var(--font-head);
  font-size: 34px; font-weight: 700; line-height: 1;
}
.about-stat-badge-label { font-size: 12px; opacity: 0.85; margin-top: 4px; }

/* Right column: stacked text content */
.about-text-wrap { display: flex; flex-direction: column; gap: 16px; }
.about-text-wrap p { font-size: 15px; color: var(--text-muted); line-height: 1.8; }

/* 2×2 grid of highlight bullet points (Custom-Built, Modern Stack, etc.) */
.about-bullets {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-top: 12px;
}
/* Individual bullet: check icon on left, heading + description on right */
.about-bullet {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.about-bullet i { color: var(--brand); font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.about-bullet div h6 { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 3px; }
.about-bullet div p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* =========================================================
   17. STATS BAND
   A full-width row of 4 animated number statistics.
   Numbers count up from 0 when scrolled into view.
   The counting animation is handled by JS (see main.js).
   ========================================================= */
.stats-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border); /* 1px gap shows the border color as divider lines */
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; margin-top: 80px;
}
.stats-band-item {
  background: var(--bg-card); padding: 36px 20px; text-align: center;
}
/* The large animated number — displays in brand purple */
.stats-band-num {
  font-family: var(--font-head);
  font-size: 40px; font-weight: 700;
  color: var(--brand); line-height: 1; margin-bottom: 8px;
}
.stats-band-label { font-size: 14px; color: var(--text-muted); }

/* =========================================================
   18. SERVICES FULL PAGE — Horizontal Row Cards
   Used only on services.html. Each service is a wide
   horizontal card with an icon on the left and content
   on the right.
   Different from the homepage .service-card (which is a
   smaller vertical card in a 2×2 grid).
   ========================================================= */
.services-rows { display: grid; gap: 20px; margin-top: 56px; }
/* Anchor offset for Services page deep links (accounts for fixed header height) */
.service-row[id] { scroll-margin-top: 130px; }

/* Wide horizontal card — icon left, content right */
.service-row {
  display: flex; align-items: flex-start; gap: 32px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px 40px;
  transition: var(--transition);
}
/* Slides right on hover (instead of lifting up like portfolio cards) */
.service-row:hover { border-color: rgba(76,64,247,0.4); transform: translateX(4px); }

/* Square icon on the left side of the row */
.service-row-icon {
  width: 58px; height: 58px; flex-shrink: 0; /* flex-shrink: 0 = icon never squishes narrower */
  background: var(--brand-glow);
  border: 1px solid rgba(76,64,247,0.25);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--brand);
  transition: var(--transition);
}
.service-row:hover .service-row-icon { background: var(--brand); color: var(--white); }
.service-row-content { flex: 1; } /* Takes up all remaining width to the right of the icon */

/* Small number label (e.g. "01") above the service title */
.service-row-num {
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; color: var(--brand); margin-bottom: 8px;
}
.service-row-content h3 {
  font-family: var(--font-head);
  font-size: 22px; font-weight: 600;
  color: var(--white); margin-bottom: 10px;
}
.service-row-content p { font-size: 15px; color: var(--text-muted); line-height: 1.7; margin-bottom: 18px; }

/* Row of small pill badges listing tech/tools (e.g. "React", "Node.js") */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 4px 12px;
  background: var(--bg-hover); border: 1px solid var(--border-light);
  border-radius: 100px; /* Fully rounded pill */
  font-size: 12px; color: var(--text-muted);
}

/* =========================================================
   19. PORTFOLIO FULL PAGE
   Used on portfolio.html. Filter buttons above a 3-column
   grid. Clicking a button shows/hides cards by category.
   See main.js → "Portfolio Filter" block.
   ========================================================= */

/* Row of filter buttons: All Projects / Web App / Website / Automation */
.portfolio-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 40px 0 48px;
}
/* Individual filter button */
.filter-btn {
  padding: 8px 20px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 100px; font-size: 13px; font-weight: 500;
  color: var(--text-muted); cursor: pointer;
  transition: var(--transition); font-family: var(--font-main);
}
/* Active / hovered filter button fills solid purple */
.filter-btn:hover, .filter-btn.active {
  background: var(--brand); border-color: var(--brand); color: var(--white);
}

/* 3-column grid (same card style as homepage, different grid class) */
.portfolio-full-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* =========================================================
   20. CONTACT PAGE — Two-Column Layout
   Left column: intro text + 3 contact info items
   Right column: contact form inside a card
   ========================================================= */

/* Side-by-side layout — right column is slightly wider for the form */
.contact-layout {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 56px; margin-top: 56px; align-items: start;
}
.contact-left h3 {
  font-family: var(--font-head);
  font-size: 26px; font-weight: 700;
  color: var(--white); margin-bottom: 12px;
}
.contact-left p { font-size: 15px; color: var(--text-muted); line-height: 1.75; margin-bottom: 32px; }

/* Stack of three contact info rows (email, response time, location) */
.contact-items { display: flex; flex-direction: column; gap: 14px; }

/* Individual info row: icon box on left, label + value on right */
.contact-item {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Small icon box */
.contact-item-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--brand-glow); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand); font-size: 16px;
}
.contact-item-text h5 { font-size: 11px; font-weight: 600; color: var(--text-faint); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 3px; }
.contact-item-text a, .contact-item-text span { font-size: 15px; color: var(--text); }
.contact-item-text a:hover { color: var(--brand); }

/* The form card on the right side */
.contact-form-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px;
}
.contact-form-box h3 {
  font-family: var(--font-head);
  font-size: 20px; font-weight: 600;
  color: var(--white); margin-bottom: 24px;
}
/* Two-column layout for Name and Email fields side by side */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 7px; }

/* Shared styles for all form controls (input, textarea, select) */
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 13px 15px;
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius); color: var(--text);
  font-size: 14px; outline: none; transition: var(--transition);
}
/* Purple border + soft glow appears when a field is clicked/focused */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-faint); }
.form-group select { cursor: pointer; appearance: none; } /* appearance: none removes the default browser dropdown arrow */
.form-group select option { background: var(--bg-2); }
.form-group textarea { resize: vertical; min-height: 120px; } /* User can drag to resize vertically only */

/* Success message shown after successful form submission — hidden by default */
/* JS shows this by setting display: block (see main.js → "Contact Form" block) */
.form-success-msg {
  display: none; padding: 14px 18px; margin-bottom: 16px;
  background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3);
  border-radius: var(--radius); color: #22c55e; font-size: 14px;
}
.form-error-msg {
  display: none; padding: 14px 18px; margin-bottom: 16px;
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35);
  border-radius: var(--radius); color: #fecaca; font-size: 14px;
}
/* Legal document pages (Privacy Policy + Terms) */
.legal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.legal-meta {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.legal-content {
  margin-top: 18px;
}
.legal-content h2 {
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.3;
  margin: 26px 0 10px;
  color: var(--white);
}
.legal-content h3 {
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.35;
  margin: 18px 0 8px;
  color: var(--white);
}
.legal-content p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.legal-content ul {
  margin: 0 0 14px 20px;
  color: var(--text-muted);
}
.legal-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}
.legal-content a {
  color: var(--brand);
}
.legal-content a:hover {
  color: var(--brand-light);
}

/* =========================================================
   21. RESPONSIVE BREAKPOINTS
   These override styles above when the screen is smaller.
   They run in order from widest to narrowest.
   You can add custom overrides here if needed.
   ========================================================= */

/* TABLET WIDE — under 1100px */
@media (max-width: 1100px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }      /* 3 cols → 2 cols */
  .portfolio-full-grid { grid-template-columns: repeat(2, 1fr); } /* 3 cols → 2 cols */
  .why-grid { grid-template-columns: repeat(2, 1fr); }             /* 4 cols → 2 cols */
}

/* TABLET — under 900px */
@media (max-width: 900px) {
  .about-layout { grid-template-columns: 1fr; gap: 48px; }         /* Side by side → stacked */
  .about-stat-badge { right: 0; }
  .stats-band { grid-template-columns: repeat(2, 1fr); }            /* 4 cols → 2 cols */
  .contact-layout { grid-template-columns: 1fr; }                   /* Side by side → stacked */
  .footer-top { grid-template-columns: 1fr; text-align: center; }  /* 3 cols → single column */
  .footer-logo { justify-self: center; }
  .footer-logo img { margin: 0 auto; }
  .footer-status { justify-content: center; }
  .what-we-do-layout { grid-template-columns: 1fr; gap: 30px; }
  .what-we-do-code { max-width: 100%; margin-left: 0; }
}

/* MOBILE — under 768px (hamburger menu appears at this breakpoint) */
@media (max-width: 768px) {
  .section { padding: 72px 0; }
  .header-inner { gap: 12px; }
  .logo img { height: 32px; }
  .header-right { gap: 0; flex-shrink: 0; }
  .header-right .btn-primary { display: none; }
  .nav { display: none; }          /* Desktop nav disappears */
  .hamburger { display: flex; flex-shrink: 0; }    /* Hamburger icon appears */
  .services-grid { grid-template-columns: 1fr; }        /* 2 cols → 1 col */
  .portfolio-grid { grid-template-columns: 1fr; }       /* 2 cols → 1 col */
  .portfolio-full-grid { grid-template-columns: 1fr; }  /* 2 cols → 1 col */
  .why-grid { grid-template-columns: repeat(2, 1fr); }  /* Stays 2 cols on mobile */
  .hero-stats { gap: 28px; }
  .footer-mid { flex-direction: column; }
  .service-row { flex-direction: column; gap: 16px; }   /* Icon stacks above text */
  .service-row:hover { transform: none; }               /* Disables slide-right on touch */
  .about-bullets { grid-template-columns: 1fr; }        /* 2 cols → 1 col */
  .form-row { grid-template-columns: 1fr; }             /* Side-by-side fields → stacked */
}

/* SMALL MOBILE — under 520px */
@media (max-width: 520px) {
  .container { padding: 0 16px; }            /* Tighter side padding on small screens */
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .hero-btns { flex-direction: column; }    /* Buttons stack vertically */
  .cta-btns { flex-direction: column; align-items: center; }
  .why-grid { grid-template-columns: 1fr; } /* 2 cols → 1 col */
  .stats-band { grid-template-columns: 1fr 1fr; }
  .code-window-file { font-size: 10px; letter-spacing: 0.04em; }
  .code-window-body { padding: 16px 14px 18px; font-size: 12px; }
  .legal-card { padding: 22px; }
}