/* =========================================================
   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:        #53afe6;  /* Primary brand tone aligned to site-wide accent blend */
  --brand-light:  #8f9dff;  /* Supporting violet tone for blended gradients */
  --brand-dark:   #2b93c6;  /* Darker accent for hover and pressed states */
  --brand-glow:   rgba(103, 200, 255, 0.18); /* Accent glow used across components */

  /* --- 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(88, 144, 228, 0.3);   /* Accent 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);

  /* --- LEGACY TEMPLATE TOKENS ---
     Older inner pages still reference these names in inline styles.
     They are mapped to the current system so everything stays unified. */
  --primary-blue: #8fd7ff;
  --bg-white:     var(--bg-card);
  --bg-light:     var(--bg-2);
  --spacing-base: 8px;
  --spacing-md:   14px;
  --spacing-lg:   20px;
  --spacing-xl:   28px;
  --spacing-2xl:  40px;
  --spacing-3xl:  56px;
}

/* =========================================================
   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: 50%; /* Pins to top of screen always */
  width: 100%;
  transform: translateX(-50%);
  z-index: 1000;            /* Above page content but below preloader (9999) */
  padding: 22px 0;
  border-radius: 0;
  transition: var(--transition);
}
/* Applied by JS when user scrolls 40px down the page */
#header.scrolled {
  top: 12px;
  width: min(1248px, calc(100% - 24px)); /* Pulls in from edges so rounded corners are visible */
  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: 1px solid var(--border-light);
  border-radius: 999px;                /* Makes the scrolled header an oval/pill shape */
  padding: 14px 0;                     /* Header shrinks slightly on scroll */
  box-shadow: var(--shadow);
}
.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 */
body .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 */
}
body .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 */
body .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;
}
body .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)
   Premium split hero with focused copy and a contained visual
   journey from concept to finished product.
   ========================================================= */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: clamp(112px, 14vh, 148px) 0 clamp(56px, 9vh, 86px);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 64% 56% at 18% 20%, rgba(73, 177, 255, 0.2) 0%, rgba(73, 177, 255, 0) 70%),
    radial-gradient(ellipse 60% 54% at 88% 72%, rgba(67, 228, 203, 0.18) 0%, rgba(67, 228, 203, 0) 66%),
    linear-gradient(160deg, rgba(13, 17, 30, 0.94) 0%, rgba(7, 10, 18, 1) 100%);
}
.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.96fr);
  gap: clamp(32px, 4vw, 68px);
  align-items: center;
}
.hero-copy { max-width: 620px; }

.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.2px;
  color: var(--white);
  margin-bottom: 20px;
}
.hero h1 .gradient-text {
  display: block;
  margin-top: 4px;
  background: linear-gradient(130deg, #74d1ff 0%, #80e2da 45%, #b0a7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  font-size: clamp(16px, 1.25vw, 19px);
  color: #aab1c5;
  max-width: 560px;
  line-height: 1.72;
  margin-bottom: 32px;
}
.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-btns .btn-lg {
  min-width: 190px;
  justify-content: center;
}
.hero-offerings {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-offerings li {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #b4bdd8;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(142, 155, 196, 0.32);
  background: rgba(20, 28, 48, 0.55);
}

.hero-visual-wrap {
  width: 100%;
  max-width: 560px;
  margin-left: auto;
}
.hero-visual {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(120, 151, 207, 0.35);
  background: linear-gradient(165deg, rgba(15, 23, 43, 0.92) 0%, rgba(10, 15, 28, 0.98) 100%);
  box-shadow: 0 22px 64px rgba(2, 4, 12, 0.58), 0 0 0 1px rgba(120, 151, 207, 0.12);
  padding: 14px;
  overflow: hidden;
  animation: heroVisualFloat 6.8s ease-in-out infinite;
}
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -35% -18%;
  background: radial-gradient(circle at 68% 34%, rgba(103, 208, 255, 0.26), rgba(103, 208, 255, 0));
  pointer-events: none;
}
.hero-visual-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.hero-window-dots {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-window-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(188, 203, 237, 0.38);
}
.hero-window-dots span:nth-child(1) { background: rgba(239, 68, 68, 0.85); }
.hero-window-dots span:nth-child(2) { background: rgba(234, 179, 8, 0.85); }
.hero-window-dots span:nth-child(3) { background: rgba(34, 197, 94, 0.85); }
.hero-visual-meta {
  display: grid;
  justify-items: end;
  text-align: right;
  gap: 2px;
}
.hero-visual-kicker {
  font-size: 10px;
  color: #90a2cb;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.hero-visual-title {
  font-size: 12px;
  color: #d4ddf6;
  font-weight: 600;
}

.hero-scene-stage {
  position: relative;
  min-height: 318px;
  border-radius: 16px;
  border: 1px solid rgba(133, 156, 203, 0.27);
  background: rgba(10, 17, 31, 0.95);
  overflow: hidden;
}
.hero-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 720ms ease, transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
  padding: 20px;
  display: flex;
  align-items: center;
}
.hero-scene.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.hero-scene-site {
  background: linear-gradient(165deg, rgba(21, 33, 59, 0.9) 0%, rgba(12, 19, 35, 0.94) 100%);
}
.scene-site-shell {
  position: relative;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(130, 164, 221, 0.3);
  background: rgba(8, 15, 28, 0.88);
  overflow: hidden;
}
.scene-site-toolbar {
  height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(138, 172, 228, 0.24);
  background: rgba(255, 255, 255, 0.04);
}
.scene-site-address {
  display: block;
  width: 55%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(150, 176, 236, 0.44), rgba(150, 176, 236, 0.14));
}
.scene-site-nav {
  display: flex;
  gap: 8px;
  padding: 11px 12px 9px;
}
.scene-site-nav span {
  height: 8px;
  flex: 1;
  border-radius: 999px;
  background: rgba(142, 161, 208, 0.22);
}
.scene-site-nav span.is-active {
  flex: 1.3;
  background: linear-gradient(90deg, #69c6ff, #62f0cd);
}
.scene-site-body {
  padding: 14px 12px 15px;
  display: grid;
  gap: 12px;
}
.scene-site-title {
  height: 20px;
  width: 72%;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(124, 211, 252, 0.95), rgba(154, 235, 221, 0.92));
}
.scene-site-copy {
  height: 12px;
  width: 84%;
  border-radius: 999px;
  background: rgba(173, 191, 229, 0.32);
}
.scene-site-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.scene-site-grid span {
  display: block;
  border-radius: 10px;
  height: 68px;
  border: 1px solid rgba(136, 162, 213, 0.32);
  background: linear-gradient(180deg, rgba(22, 34, 60, 0.88), rgba(14, 21, 39, 0.95));
}
.scene-cursor {
  position: absolute;
  width: 22px;
  height: 28px;
  clip-path: polygon(4% 0, 4% 100%, 43% 74%, 60% 100%, 73% 92%, 56% 66%, 100% 66%);
  background: linear-gradient(160deg, #d7e7ff 0%, #7ec9ff 100%);
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.35));
  right: 44px;
  top: 96px;
  animation: cursorMove 4.2s ease-in-out infinite;
}

.hero-scene-dashboard {
  background: linear-gradient(165deg, rgba(15, 39, 56, 0.9) 0%, rgba(11, 22, 36, 0.96) 100%);
}
.scene-dashboard-shell {
  width: 100%;
  display: grid;
  gap: 12px;
}
.scene-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.scene-kpi {
  border: 1px solid rgba(98, 172, 195, 0.38);
  border-radius: 10px;
  padding: 10px;
  background: rgba(13, 29, 39, 0.66);
}
.scene-kpi span {
  display: block;
  height: 7px;
  width: 72%;
  border-radius: 999px;
  background: rgba(138, 193, 213, 0.35);
}
.scene-kpi strong {
  display: block;
  margin-top: 10px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, #6dc7ff, #65f0cb);
}
.scene-chart {
  border: 1px solid rgba(94, 167, 199, 0.36);
  border-radius: 12px;
  background: rgba(9, 24, 34, 0.72);
  padding: 14px 12px;
  height: 126px;
}
.scene-chart-bars {
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.scene-chart-bars span {
  flex: 1;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, rgba(118, 211, 250, 0.92), rgba(98, 170, 208, 0.38));
  transform-origin: bottom;
  animation: chartBounce 3.6s ease-in-out infinite;
}
.scene-chart-bars span:nth-child(1) { height: 72%; animation-delay: 0ms; }
.scene-chart-bars span:nth-child(2) { height: 48%; animation-delay: 140ms; }
.scene-chart-bars span:nth-child(3) { height: 82%; animation-delay: 280ms; }
.scene-chart-bars span:nth-child(4) { height: 58%; animation-delay: 420ms; }
.scene-chart-bars span:nth-child(5) { height: 70%; animation-delay: 560ms; }
.scene-table {
  border: 1px solid rgba(100, 163, 183, 0.34);
  border-radius: 12px;
  padding: 12px;
  background: rgba(12, 26, 37, 0.62);
  display: grid;
  gap: 9px;
}
.scene-table span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(140, 191, 209, 0.32);
}
.scene-table span:nth-child(1) { width: 90%; }
.scene-table span:nth-child(2) { width: 74%; }
.scene-table span:nth-child(3) { width: 82%; }
.scene-table span:nth-child(4) { width: 63%; }

.hero-scene-code {
  background: linear-gradient(160deg, rgba(23, 23, 39, 0.95) 0%, rgba(13, 15, 26, 0.98) 100%);
}
.scene-code-shell {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(143, 151, 205, 0.28);
  background: rgba(11, 12, 21, 0.9);
  padding: 14px;
}
.scene-code-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(141, 152, 216, 0.2);
}
.scene-code-top span {
  display: block;
  height: 11px;
  border-radius: 999px;
  background: rgba(143, 157, 220, 0.28);
}
.scene-code-top span:first-child { width: 44%; }
.scene-code-top span:last-child { width: 28%; }
.scene-code-lines {
  display: grid;
  gap: 9px;
  padding: 14px 0;
}
.scene-code-lines span {
  display: block;
  height: 8px;
  border-radius: 999px;
}
.scene-code-lines .line-long {
  width: 88%;
  background: linear-gradient(90deg, rgba(135, 169, 255, 0.85), rgba(130, 217, 255, 0.55));
}
.scene-code-lines .line-mid {
  width: 68%;
  background: linear-gradient(90deg, rgba(153, 138, 255, 0.82), rgba(153, 138, 255, 0.26));
}
.scene-code-lines .line-short {
  width: 52%;
  background: rgba(145, 158, 210, 0.35);
}
.scene-code-console {
  border-top: 1px solid rgba(141, 151, 210, 0.2);
  display: grid;
  gap: 10px;
  padding-top: 13px;
}
.scene-code-console span {
  display: block;
  height: 8px;
  border-radius: 999px;
}
.scene-code-console span:first-child {
  width: 66%;
  background: rgba(100, 239, 199, 0.58);
}
.scene-code-console span:last-child {
  width: 49%;
  background: rgba(147, 162, 213, 0.42);
}

.hero-scene-transform {
  background: linear-gradient(165deg, rgba(33, 28, 56, 0.94) 0%, rgba(15, 16, 34, 0.98) 100%);
}
.scene-transform-flow {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.scene-wireframe,
.scene-finished {
  min-height: 214px;
  border-radius: 12px;
  border: 1px solid rgba(156, 143, 211, 0.3);
  padding: 12px;
}
.scene-wireframe {
  background: rgba(21, 20, 38, 0.76);
  display: grid;
  gap: 10px;
  align-content: start;
}
.wire-line {
  display: block;
  height: 9px;
  width: 84%;
  border-radius: 999px;
  border: 1px dashed rgba(183, 174, 232, 0.52);
}
.wire-line.short { width: 60%; }
.wire-block {
  display: block;
  height: 74px;
  border-radius: 9px;
  border: 1px dashed rgba(183, 174, 232, 0.45);
}
.scene-transform-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(124, 236, 214, 0.5);
  background: rgba(31, 69, 67, 0.48);
  color: #a9f3de;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: arrowPulse 2.8s ease-in-out infinite;
}
.scene-finished {
  position: relative;
  overflow: hidden;
  border-color: rgba(107, 208, 255, 0.4);
  background: linear-gradient(160deg, rgba(11, 27, 49, 0.92), rgba(11, 18, 35, 0.96));
  display: grid;
  gap: 12px;
  align-content: start;
}
.scene-finished::after {
  content: '';
  position: absolute;
  top: -36%;
  left: -44%;
  width: 70%;
  height: 170%;
  background: linear-gradient(90deg, rgba(120, 205, 255, 0), rgba(120, 205, 255, 0.26), rgba(120, 205, 255, 0));
  transform: rotate(12deg);
  animation: panelShimmer 4.2s ease-in-out infinite;
  pointer-events: none;
}
.finish-title {
  display: block;
  height: 16px;
  width: 68%;
  border-radius: 8px;
  background: linear-gradient(90deg, #6bc8ff, #63f0cc);
}
.finish-metric {
  display: block;
  height: 42px;
  border-radius: 10px;
  background: rgba(12, 45, 74, 0.7);
  border: 1px solid rgba(108, 206, 255, 0.28);
}
.finish-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.finish-grid span {
  display: block;
  height: 52px;
  border-radius: 8px;
  background: rgba(16, 54, 81, 0.64);
  border: 1px solid rgba(106, 191, 231, 0.25);
}

.hero-scene-controls {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.hero-scene-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(151, 176, 228, 0.45);
  background: rgba(84, 99, 140, 0.42);
  cursor: pointer;
  transition: var(--transition);
}
.hero-scene-dot.is-active {
  width: 30px;
  border-color: rgba(111, 216, 255, 0.7);
  background: linear-gradient(90deg, #67c8ff, #61f0cc);
}
.hero-scene-dot:focus-visible {
  outline: 2px solid rgba(121, 212, 255, 0.72);
  outline-offset: 2px;
}
.hero-visual-caption {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.65;
  color: #9ea8c3;
  max-width: 520px;
}

@keyframes heroVisualFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes cursorMove {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(-30px, 16px); }
  70% { transform: translate(12px, 42px); }
}
@keyframes chartBounce {
  0%, 100% { transform: scaleY(0.86); opacity: 0.92; }
  45% { transform: scaleY(1.05); opacity: 1; }
}
@keyframes arrowPulse {
  0%, 100% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(104, 239, 202, 0.22); }
  50% { transform: translateX(4px); box-shadow: 0 0 0 10px rgba(104, 239, 202, 0); }
}
@keyframes panelShimmer {
  0%, 20% { transform: translateX(-100%) rotate(12deg); }
  72%, 100% { transform: translateX(320%) rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual,
  .scene-cursor,
  .scene-chart-bars span,
  .scene-transform-arrow,
  .scene-finished::after {
    animation: none !important;
  }
  .hero-scene {
    transition: none !important;
  }
}

/* =========================================================
   8.1 GLOBAL ACCENT BLEND OVERRIDES
   Extends the hero's higher-contrast blue/teal/purple accent
   styling across all pages while preserving core layout styles.
   ========================================================= */
:root {
  --accent-mix-1: #67c8ff;
  --accent-mix-2: #61f0cc;
  --accent-mix-3: var(--brand-light);
  --accent-mix-dark: #2b93c6;
  --accent-mix-glow: rgba(103, 200, 255, 0.2);
  --accent-mix-glow-soft: rgba(97, 240, 204, 0.16);
  --accent-mix-purple-glow: rgba(99, 102, 241, 0.18);
}
#header.scrolled {
  border-color: rgba(118, 163, 244, 0.4);
  box-shadow: 0 10px 42px rgba(4, 10, 22, 0.55);
}
body .btn-primary {
  background: linear-gradient(130deg, #53afe6 0%, #4fc7d5 50%, var(--accent-mix-3) 100%);
  border-color: rgba(122, 157, 246, 0.66);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(36, 78, 167, 0.32);
}
body .btn-primary:hover {
  background: linear-gradient(130deg, #4da8de 0%, #49bdca 48%, #5d61df 100%);
  border-color: rgba(138, 164, 247, 0.75);
  color: var(--white);
  box-shadow: 0 12px 28px rgba(40, 76, 155, 0.4);
}
body .btn-outline {
  border-color: rgba(130, 165, 236, 0.52);
}
body .btn-outline:hover {
  border-color: rgba(131, 183, 248, 0.86);
  color: #c7d7ff;
  background: linear-gradient(135deg, var(--accent-mix-glow), var(--accent-mix-glow-soft), var(--accent-mix-purple-glow));
}
body .section-tag {
  color: #9db9ff;
}
body .section-tag::before {
  background: linear-gradient(90deg, var(--accent-mix-1), var(--accent-mix-2), var(--accent-mix-3));
}
body .services-section,
body .cta-section {
  position: relative;
}
body .services-section > .container,
body .cta-section > .container {
  position: relative;
  z-index: 1;
}
body .services-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 68% at 12% 22%, rgba(103, 200, 255, 0.08), transparent 70%),
    radial-gradient(ellipse 44% 56% at 88% 74%, rgba(97, 240, 204, 0.07), transparent 70%),
    radial-gradient(ellipse 46% 62% at 48% 84%, rgba(99, 102, 241, 0.08), transparent 76%);
  pointer-events: none;
}
body .service-card {
  border: 1px solid rgba(116, 149, 208, 0.18);
}
body .service-card::after {
  background: linear-gradient(130deg, rgba(103, 200, 255, 0.2), rgba(97, 240, 204, 0.08), rgba(99, 102, 241, 0.11), transparent 76%);
}
body .service-num,
body .service-arrow {
  color: #a3b5ff;
}
body .service-icon-wrap {
  border-color: rgba(128, 163, 243, 0.42);
  background: linear-gradient(145deg, rgba(41, 93, 126, 0.3), rgba(63, 57, 143, 0.3));
  color: #9ac8ff;
}
body .service-card:hover .service-icon-wrap {
  background: linear-gradient(130deg, var(--accent-mix-1), var(--accent-mix-2), var(--accent-mix-3));
  color: var(--white);
  box-shadow: 0 10px 26px rgba(49, 74, 151, 0.4);
}
body .portfolio-card:hover {
  border-color: rgba(130, 172, 246, 0.52);
  box-shadow: 0 14px 32px rgba(6, 22, 41, 0.55), 0 0 0 1px rgba(124, 165, 248, 0.24);
}
body .portfolio-chip {
  background: linear-gradient(130deg, var(--accent-mix-1), var(--accent-mix-2), var(--accent-mix-3));
  color: var(--white);
}
body .portfolio-footer-row a {
  color: #a5b2ff;
}
body .why-card:hover {
  border-color: rgba(132, 172, 245, 0.5);
  box-shadow: 0 12px 28px rgba(6, 19, 37, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.14);
}
body .why-icon {
  background: linear-gradient(135deg, rgba(103, 200, 255, 0.24), rgba(97, 240, 204, 0.2), rgba(99, 102, 241, 0.24));
  color: #afbbff;
}
body .cta-section::before {
  background:
    radial-gradient(ellipse 70% 92% at 50% 50%, rgba(103, 200, 255, 0.17), transparent),
    radial-gradient(ellipse 52% 70% at 72% 76%, rgba(97, 240, 204, 0.12), transparent),
    radial-gradient(ellipse 45% 62% at 22% 28%, rgba(99, 102, 241, 0.13), transparent);
}

/* Legacy templates: app-development, website-development,
   it-consultation, blog, and similar detail pages. */
body .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
body .nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
}
body .nav-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.1px;
}
body .nav-link:hover {
  color: var(--text);
  background: var(--bg-hover);
}
body .nav-link.active {
  color: #cad6ff;
  background: linear-gradient(135deg, rgba(103, 200, 255, 0.14), rgba(99, 102, 241, 0.16));
  border: 1px solid rgba(128, 163, 243, 0.3);
}
body .nav-link.nav-cta {
  padding: 10px 16px;
  border-radius: 10px;
  color: var(--white);
  border: 1px solid rgba(122, 157, 246, 0.65);
  background: linear-gradient(130deg, #53afe6 0%, #4fc7d5 50%, var(--accent-mix-3) 100%);
}
body .nav-link.nav-cta:hover {
  color: var(--white);
  border-color: rgba(138, 164, 247, 0.75);
  background: linear-gradient(130deg, #4da8de 0%, #49bdca 48%, #5d61df 100%);
}
body .menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}
body .menu-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
}
body .page-header {
  padding: 150px 0 74px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 58% 52% at 20% 8%, rgba(103, 200, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 55% 48% at 84% 18%, rgba(99, 102, 241, 0.16), transparent 66%);
}
body .page-header h1 {
  font-family: var(--font-head);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 14px;
}
body .page-header p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.75;
}
body .section-header {
  text-align: center;
  margin: 0 auto 52px;
  max-width: 760px;
}
body .section-header h2 {
  font-family: var(--font-head);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--white);
  margin-bottom: 12px;
}
body .section-header p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.75;
}
body .content-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
body .service-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(128, 163, 243, 0.42);
  background: linear-gradient(145deg, rgba(41, 93, 126, 0.3), rgba(63, 57, 143, 0.3));
  color: #9ac8ff;
  margin-bottom: 18px;
  transition: var(--transition);
}
body .service-icon svg {
  width: 22px;
  height: 22px;
}
body .service-card:hover .service-icon {
  background: linear-gradient(130deg, var(--accent-mix-1), var(--accent-mix-2), var(--accent-mix-3));
  color: var(--white);
  box-shadow: 0 10px 26px rgba(49, 74, 151, 0.4);
}
body .cta-content {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
body .cta-content h2 {
  font-family: var(--font-head);
  font-size: clamp(30px, 4.4vw, 54px);
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.7px;
  margin-bottom: 16px;
}
body .cta-content p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 auto 32px;
  max-width: 620px;
}
body .footer-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 30px;
  padding: 38px 0 28px;
  border-bottom: 1px solid var(--border);
}
body .footer-section h4 {
  font-family: var(--font-head);
  font-size: 16px;
  color: var(--white);
  margin-bottom: 10px;
}
body .footer-section p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
}
body .footer-section ul {
  display: grid;
  gap: 8px;
}
body .footer-section a {
  color: var(--text-muted);
  font-size: 14px;
}
body .footer-section a:hover {
  color: #c7d7ff;
}
body .footer-contact {
  margin-top: 12px;
}
body .footer-contact a {
  color: #a5b2ff;
}
body .blog-post-card {
  transition: var(--transition);
}
body .blog-post-card:hover {
  border-color: rgba(130, 172, 246, 0.52) !important;
  box-shadow: 0 14px 32px rgba(6, 22, 41, 0.55), 0 0 0 1px rgba(124, 165, 248, 0.24);
  transform: translateY(-4px);
}
body .insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
  gap: 28px;
  align-items: stretch;
}
body .insight-card,
body .article-panel,
body .article-shot,
body .article-callout {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
}
body .insight-card {
  padding: 28px;
  transition: var(--transition);
}
body .insight-card:hover {
  border-color: rgba(130, 172, 246, 0.52);
  box-shadow: 0 14px 32px rgba(6, 22, 41, 0.45);
  transform: translateY(-4px);
}
body .insight-card--featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
  gap: 24px;
}
body .insight-meta,
body .article-meta,
body .article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
body .insight-meta span,
body .article-meta span,
body .article-tags span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(87, 132, 255, 0.12);
  border: 1px solid rgba(119, 160, 247, 0.2);
  color: #d7e4ff;
  font-size: 12px;
  letter-spacing: 0.4px;
}
body .insight-card h2,
body .insight-card h3,
body .article-prose h2,
body .article-panel h3 {
  font-family: var(--font-head);
  color: var(--white);
  letter-spacing: -0.4px;
}
body .insight-card p,
body .article-prose p,
body .article-panel p,
body .article-prose li {
  color: var(--text-muted);
  line-height: 1.8;
}
body .insight-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: #a8c9ff;
  font-weight: 600;
}
body .insight-link:hover {
  color: var(--white);
}
body .insight-preview,
body .article-shot img {
  width: 100%;
  border-radius: 18px;
}
body .insight-preview {
  min-height: 100%;
  object-fit: cover;
  border: 1px solid rgba(126, 164, 255, 0.18);
  background: linear-gradient(180deg, rgba(11, 18, 40, 0.85), rgba(9, 13, 30, 0.95));
}
body .article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.78fr);
  gap: 30px;
  align-items: start;
}
body .article-prose {
  min-width: 0;
}
body .article-prose h2 {
  font-size: clamp(24px, 3vw, 34px);
  margin: 34px 0 14px;
}
body .article-prose h3 {
  font-family: var(--font-head);
  color: var(--white);
  font-size: 19px;
  margin: 26px 0 10px;
}
body .article-prose p {
  margin: 14px 0;
}
body .article-prose ul {
  display: grid;
  gap: 12px;
  padding-left: 20px;
  margin: 18px 0;
  list-style: disc;
}
body .article-panel,
body .article-callout {
  padding: 24px;
}
body .article-quick-answer,
body .article-checklist,
body .article-next-steps {
  padding: 24px;
  border-radius: 20px;
  background: rgba(13, 20, 44, 0.88);
  border: 1px solid rgba(120, 154, 237, 0.18);
  margin: 26px 0;
}
body .article-quick-answer h2,
body .article-checklist h2,
body .article-next-steps h2 {
  margin-top: 0;
}
body .article-link-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
body .article-link-list a,
body .article-inline-links a,
body .article-panel a {
  color: #a8c9ff;
}
body .article-link-list a:hover,
body .article-inline-links a:hover,
body .article-panel a:hover {
  color: var(--white);
}
body .article-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 18px;
}
body .article-panel-section + .article-panel-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
body .article-summary-list {
  display: grid;
  gap: 14px;
}
body .article-summary-list li {
  color: var(--text-muted);
  line-height: 1.7;
}
body .article-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
body .article-stat {
  padding: 18px;
  border-radius: 18px;
  background: rgba(13, 20, 44, 0.85);
  border: 1px solid rgba(120, 154, 237, 0.18);
}
body .article-stat strong {
  display: block;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 28px;
  margin-bottom: 6px;
}
body .article-stat span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
body .article-shot {
  padding: 18px;
  margin: 28px 0;
}
body .article-faq {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}
body .article-faq-item {
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
body .article-faq-item h3 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.4;
}
body .article-faq-item p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}
body .article-shot figcaption {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 12px;
}
body .article-callout {
  margin: 28px 0;
  background:
    linear-gradient(145deg, rgba(27, 55, 105, 0.5), rgba(12, 20, 43, 0.92)),
    var(--bg-card);
}
body .article-callout h3 {
  color: var(--white);
  margin-bottom: 10px;
}
body .article-panel ul {
  display: grid;
  gap: 10px;
  padding-left: 18px;
  list-style: disc;
}

@media (max-width: 980px) {
  body .insights-grid,
  body .article-layout,
  body .insight-card--featured {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  body .article-stats {
    grid-template-columns: 1fr;
  }
  body .insight-card,
  body .article-panel,
  body .article-callout,
  body .article-quick-answer,
  body .article-checklist,
  body .article-next-steps {
    padding: 22px;
  }
}

@media (max-width: 980px) {
  body .nav-list {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
@media (max-width: 768px) {
  body .header-content { gap: 12px; }
  body .menu-toggle { display: none; }
  body .nav-list {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  body .page-header { padding: 132px 0 62px; }
  body .footer-content {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 30px;
  }
}

/* =========================================================
   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: 600px; line-height: 1.75;
}
.text-center .section-sub { margin-left: auto; margin-right: auto; }
.section-header-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}

/* =========================================================
   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(103, 200, 255, 0.28), rgba(103, 200, 255, 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(103, 200, 255, 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(103, 200, 255, 0), rgba(103, 200, 255, 0.15), rgba(103, 200, 255, 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(103, 200, 255, 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.
   ========================================================= */

/* Centered, even project cards on homepage and related grids */
.portfolio-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 22px;
  margin-top: 56px;
}
.portfolio-card {
  flex: 1 1 260px;
  max-width: calc((100% - 66px) / 4);
  display: flex;
  flex-direction: column;
  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(103, 200, 255, 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; }
.portfolio-thumb--split {
  gap: 10px;
  padding: 14px;
  background:
    radial-gradient(circle at 16% 18%, rgba(83, 175, 230, 0.22), transparent 32%),
    linear-gradient(145deg, rgba(16, 23, 38, 0.96), rgba(10, 12, 20, 0.98));
}
.portfolio-thumb--split img {
  width: calc(50% - 5px);
  min-width: 0;
  height: 100%;
  flex: 1 1 0;
  border-radius: 12px;
  border: 1px solid rgba(143, 215, 255, 0.18);
  object-fit: cover;
  object-position: top center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}
/* 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 {
  display: flex;
  flex: 1;
  flex-direction: column;
  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;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-faint);
}
.portfolio-footer-row a {
  flex-shrink: 0;
  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(103, 200, 255, 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(103, 200, 255, 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;
}

/* =========================================================
   BLOG CARDS
   3-column grid of blog post preview cards on the homepage.
   ========================================================= */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  height: 100%;
}
.blog-card:hover {
  border-color: rgba(103, 200, 255, 0.35);
  transform: translateY(-4px);
  box-shadow: var(--shadow-brand);
}
.blog-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.blog-card-category {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand);
}
.blog-card-read {
  font-size: 12px;
  color: var(--text-faint);
}
.blog-card h3 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
  margin-bottom: 12px;
}
.blog-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
}
.blog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand);
}
.blog-card-cta i { font-size: 11px; transition: transform 0.2s; }
.blog-card:hover .blog-card-cta i { transform: translateX(3px); }
.blog-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 22px;
  margin-bottom: 28px;
}
.blog-intro-card {
  padding: 26px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.blog-intro-card h2,
.blog-intro-card h3 {
  font-family: var(--font-head);
  color: var(--white);
  margin-bottom: 12px;
}
.blog-intro-card p,
.blog-intro-card li {
  color: var(--text-muted);
  line-height: 1.75;
}
.blog-intro-card ul {
  display: grid;
  gap: 10px;
  padding-left: 18px;
  list-style: disc;
  margin-top: 14px;
}
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-intro-grid { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   AEO SECTION
   Two-column layout: copy on the left, stacked AEO points on the right.
   ========================================================= */
.aeo-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.aeo-copy .section-title { margin-top: 8px; }
.aeo-copy .section-sub { margin-top: 16px; }
.aeo-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.aeo-point {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.25s;
}
.aeo-point:hover { border-color: var(--border-light); }
.aeo-point-icon {
  color: var(--brand);
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}
.aeo-point h4 {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
  line-height: 1.4;
}
.aeo-point p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 900px) {
  .aeo-layout { grid-template-columns: 1fr; gap: 36px; }
}

/* =========================================================
   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: logo left, email right */
.footer-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; flex-wrap: wrap;
  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); }


/* 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(103, 200, 255, 0.18), transparent); /* Subtle purple glow at the top */
}
.page-hero .container {
  position: relative;
  z-index: 1;
}
.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; }
.page-hero .hero-btns {
  justify-content: center;
}

/* Breadcrumb navigation trail — shows "Home › About" etc. */
.breadcrumb {
  display: none;
}

/* =========================================================
   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(103, 200, 255, 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(103, 200, 255, 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);
}

/* Centered full portfolio grid using the same card sizing as homepage */
.portfolio-full-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  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);
}

/* Local SEO and FAQ sections */
.local-services-section {
  background:
    radial-gradient(560px 260px at 8% 10%, rgba(83, 175, 230, 0.12), transparent 72%),
    var(--bg);
}
.local-service-grid,
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.local-area-section {
  background: var(--bg-2);
}
.local-area-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 42px;
  align-items: center;
}
.local-link-card {
  display: grid;
  gap: 10px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.local-link-card a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
}
.local-link-card a::after {
  content: '\f061';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--brand);
  font-size: 12px;
  flex-shrink: 0;
}
.local-link-card a:hover {
  border-color: rgba(83, 175, 230, 0.45);
  background: var(--brand-glow);
  color: var(--brand);
}

.local-page-content {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}
.local-page-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.22);
}
.local-page-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand), rgba(128, 226, 218, 0.25));
  opacity: 0.8;
}
.local-page-card h2 {
  font-family: var(--font-head);
  font-size: 28px;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 12px;
}
.local-page-card p,
.local-page-card li {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.8;
}
.local-page-card ul {
  list-style: disc;
  margin: 12px 0 0 20px;
}
.local-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.local-page-links a {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: 13px;
}
.local-page-links a:hover {
  color: var(--brand);
  border-color: rgba(83, 175, 230, 0.45);
  background: var(--brand-glow);
}

.local-build-showcase {
  position: relative;
  padding: 34px 0 18px;
  overflow: hidden;
}
.local-build-showcase::before {
  content: '';
  position: absolute;
  inset: -120px 0 auto;
  height: 260px;
  background:
    radial-gradient(circle at 22% 30%, rgba(83, 175, 230, 0.18), transparent 34%),
    radial-gradient(circle at 78% 42%, rgba(128, 226, 218, 0.12), transparent 36%);
  pointer-events: none;
}
.local-showcase-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(360px, 1.12fr);
  gap: 22px;
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
}
.local-code-panel,
.local-map-panel {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  border-radius: 22px;
  border: 1px solid rgba(139, 177, 236, 0.22);
  background:
    linear-gradient(155deg, rgba(19, 27, 48, 0.9), rgba(10, 12, 22, 0.98)),
    var(--bg-card);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}
.local-code-panel::before {
  content: '';
  position: absolute;
  inset: -40% -20%;
  background: conic-gradient(from 140deg, transparent, rgba(83, 175, 230, 0.12), transparent 34%);
  animation: localPanelGlow 7s linear infinite;
}
.local-code-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(139, 177, 236, 0.16);
  color: #9fb1d8;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.local-code-top span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef6461;
}
.local-code-top span:nth-child(2) { background: #f1c453; }
.local-code-top span:nth-child(3) { background: #57cc99; margin-right: 8px; }
.local-code-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  padding: 34px 24px 22px;
  font-family: Consolas, 'SFMono-Regular', monospace;
  font-size: 14px;
  color: #c9d5f2;
}
.local-code-body p {
  position: relative;
  min-height: 24px;
  line-height: 1.7;
  opacity: 0;
  transform: translateX(-12px);
  animation: localCodeType 560ms ease forwards;
}
.local-code-body p:nth-child(2) { animation-delay: 260ms; }
.local-code-body p:nth-child(3) { animation-delay: 520ms; }
.local-code-body p:nth-child(4) { animation-delay: 780ms; }
.local-code-body em {
  color: #80e2da;
  font-style: normal;
}
.local-code-body strong {
  color: #ffffff;
  font-weight: 600;
}
.local-code-active {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(83, 175, 230, 0.12);
  border: 1px solid rgba(83, 175, 230, 0.22);
}
.local-code-active::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 1.25em;
  margin-left: 5px;
  vertical-align: -0.2em;
  background: #80e2da;
  animation: localCursorBlink 1s steps(1) infinite;
}
.local-code-metrics {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.local-code-metrics span {
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid rgba(139, 177, 236, 0.18);
  background: rgba(255, 255, 255, 0.035);
  color: #b8c4e4;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.local-map-panel {
  padding: 26px;
  background:
    radial-gradient(circle at 68% 46%, rgba(83, 175, 230, 0.16), transparent 36%),
    linear-gradient(155deg, rgba(13, 24, 42, 0.96), rgba(9, 10, 18, 0.98));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.local-map-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(128, 226, 218, 0.08) 44%, transparent 58%);
  transform: translateX(-100%);
  animation: localScan 5.5s ease-in-out infinite;
  pointer-events: none;
}
.local-map-copy {
  position: relative;
  z-index: 1;
  max-width: 430px;
}
.local-map-copy h2 {
  font-family: var(--font-head);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.12;
  color: var(--white);
  margin-bottom: 10px;
}
.local-map-copy p {
  color: #aab6d2;
  line-height: 1.7;
  font-size: 15px;
}
.local-system-visual {
  position: relative;
  z-index: 1;
  min-height: 210px;
  margin-top: 24px;
  border-radius: 18px;
  border: 1px solid rgba(139, 177, 236, 0.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(83, 175, 230, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  overflow: hidden;
}
.system-orbit {
  position: absolute;
  inset: 28px;
  border: 1px dashed rgba(157, 198, 255, 0.24);
  border-radius: 50%;
  animation: localPanelGlow 18s linear infinite;
}
.system-orbit-two {
  inset: 58px 92px;
  animation-duration: 12s;
  animation-direction: reverse;
}
.system-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(139, 177, 236, 0.25);
  background: rgba(8, 13, 24, 0.82);
  color: #dbe7ff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.system-node i {
  color: #80e2da;
}
.system-node-primary {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 16px;
  background: rgba(83, 175, 230, 0.18);
}
.system-node-seo { left: 9%; top: 18%; }
.system-node-leads { right: 9%; top: 18%; }
.system-node-growth { right: 13%; bottom: 16%; }

@keyframes localPanelGlow {
  to { transform: rotate(360deg); }
}
@keyframes localCodeType {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes localCursorBlink {
  50% { opacity: 0; }
}
@keyframes localScan {
  0%, 32% { transform: translateX(-100%); opacity: 0; }
  42% { opacity: 1; }
  72%, 100% { transform: translateX(100%); opacity: 0; }
}
/* =========================================================
   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) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.94fr);
    gap: 34px;
  }
  .hero h1 { font-size: clamp(36px, 5.2vw, 58px); }
  .hero-visual-wrap { max-width: 520px; }
  .portfolio-card { max-width: calc((100% - 22px) / 2); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* TABLET - under 900px */
@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding: 120px 0 66px;
  }
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero-copy { max-width: 100%; }
  .hero-visual-wrap {
    max-width: 100%;
    margin-left: 0;
  }
  .about-layout { grid-template-columns: 1fr; gap: 48px; }
  .about-stat-badge { right: 0; }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; text-align: center; align-items: center; }
  .footer-logo img { margin: 0 auto; }
  .what-we-do-layout { grid-template-columns: 1fr; gap: 30px; }
  .what-we-do-code { max-width: 100%; margin-left: 0; }
  .local-service-grid,
  .faq-grid,
  .local-area-layout { grid-template-columns: 1fr; }
  .local-showcase-grid { grid-template-columns: 1fr; }
  .local-code-panel,
  .local-map-panel { min-height: 330px; }
}

/* MOBILE - under 768px (hamburger menu appears at this breakpoint) */
@media (max-width: 768px) {
  .hero { padding: 108px 0 56px; }
  .hero h1 { font-size: clamp(34px, 8.8vw, 50px); }
  .hero-sub { margin-bottom: 26px; }
  .hero-btns .btn-lg { min-width: 0; }
  .hero-scene-stage { min-height: 286px; }
  .hero-scene { padding: 16px; }
  .scene-wireframe,
  .scene-finished { min-height: 194px; }
  .hero-visual-caption { font-size: 12px; }
  #header.scrolled { width: calc(100% - 16px); top: 8px; }
  .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; }
  .hamburger { display: flex; flex-shrink: 0; }
  .services-grid { grid-template-columns: 1fr; }
  .portfolio-card {
    flex-basis: 100%;
    max-width: 100%;
  }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .local-service-grid,
  .faq-grid { grid-template-columns: repeat(2, 1fr); }
  .local-build-showcase { padding-top: 12px; }
  .local-map-panel { min-height: 0; }
  .footer-mid { flex-direction: column; }
  .service-row { flex-direction: column; gap: 16px; }
  .service-row:hover { transform: none; }
  .about-bullets { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* SMALL MOBILE - under 520px */
@media (max-width: 520px) {
  .container { padding: 0 16px; }
  .hero { padding: 100px 0 50px; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn-lg { width: 100%; }
  .hero-offerings {
    margin-top: 18px;
    gap: 8px;
  }
  .hero-offerings li {
    font-size: 11px;
    padding: 6px 10px;
  }
  .hero-visual {
    border-radius: 18px;
    padding: 12px;
  }
  .hero-scene-stage {
    min-height: 250px;
    border-radius: 14px;
  }
  .scene-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-kpis .scene-kpi:last-child { grid-column: span 2; }
  .scene-transform-flow { grid-template-columns: 1fr; }
  .scene-transform-arrow {
    margin: 0 auto;
    transform: rotate(90deg);
    animation: none;
  }
  .scene-wireframe,
  .scene-finished { min-height: 150px; }
  .cta-btns { flex-direction: column; align-items: center; }
  .why-grid { grid-template-columns: 1fr; }
  .local-service-grid,
  .faq-grid { grid-template-columns: 1fr; }
  .local-code-panel,
  .local-map-panel {
    border-radius: 18px;
    min-height: 0;
  }
  .local-code-body {
    padding: 24px 18px 110px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }
  .local-code-metrics { grid-template-columns: 1fr; }
  .local-map-panel { padding: 22px; }
  .local-system-visual { min-height: 250px; }
  .system-orbit { inset: 32px 18px; }
  .system-orbit-two { inset: 72px 46px; }
  .system-node { font-size: 11px; padding: 8px 10px; }
  .system-node-seo { left: 6%; top: 18%; }
  .system-node-leads { right: 6%; top: 18%; }
  .system-node-growth { right: 8%; bottom: 14%; }
  .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; }
  .local-page-card,
  .local-link-card { padding: 22px; }
}

/* =========================================================
   GOOGLE REVIEWS (Homepage)
   ========================================================= */
.google-reviews-section {
  background:
    radial-gradient(600px 260px at 10% 0%, rgba(78, 172, 233, 0.14), transparent 70%),
    radial-gradient(520px 240px at 100% 100%, rgba(132, 160, 255, 0.1), transparent 75%);
}
.google-reviews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.google-reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(9, 9, 15, 0.6);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.google-reviews-badge:hover {
  border-color: rgba(143, 215, 255, 0.55);
  background: rgba(143, 215, 255, 0.08);
}
.google-reviews-badge img {
  width: 18px;
  height: 18px;
}
.google-reviews {
  background: rgba(12, 12, 20, 0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 26px;
}
.google-reviews-status {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 16px;
}
.google-reviews-carousel {
  display: flex;
  align-items: center;
  gap: 12px;
}
.google-reviews-viewport {
  overflow: hidden;
  flex: 1;
}
.google-reviews-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: google-reviews-marquee var(--reviews-marquee-duration, 24s) linear infinite;
  will-change: transform;
}
.google-reviews-carousel:hover .google-reviews-track,
.google-reviews-carousel:focus-within .google-reviews-track {
  animation-play-state: paused;
}
.google-reviews-nav {
  display: none;
}
.google-review-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px;
  min-height: 230px;
  width: clamp(250px, 30vw, 340px);
  flex: 0 0 auto;
}
.google-review-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.google-review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(135deg, rgba(143, 215, 255, 0.3), rgba(143, 157, 255, 0.18));
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.google-review-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.google-review-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.google-review-name {
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 1.2;
}
.google-review-stars {
  color: #fbbc04;
  font-size: 14px;
  letter-spacing: 1px;
}
.google-review-text {
  color: var(--text-muted);
  line-height: 1.65;
  font-size: 14px;
  flex: 1;
}
.google-review-date {
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: 0.2px;
}
.google-reviews-cta {
  margin-top: 20px;
}
.section-after-reviews {
  margin-top: 120px;
}

@media (max-width: 768px) {
  .google-reviews {
    padding: 20px;
    border-radius: 18px;
  }
  .google-review-card {
    width: min(84vw, 320px);
    min-height: 0;
    scroll-snap-align: start;
  }
  .google-reviews-carousel {
    gap: 8px;
  }
  .google-reviews-viewport {
    overflow: hidden;
  }
  .google-reviews-track {
    width: max-content;
    animation: google-reviews-marquee var(--reviews-marquee-duration, 26s) linear infinite;
    animation-duration: calc(var(--reviews-marquee-duration, 26s) * 1.35);
  }
  .google-review-text {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .google-reviews-cta .btn-outline {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .section-after-reviews {
    margin-top: 72px;
  }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .google-review-card { width: clamp(250px, 42vw, 360px); }
}
@media (max-width: 768px) {
  .google-review-card { width: min(84vw, 320px); }
}

@keyframes google-reviews-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 8px)); }
}