/* ================= ROOT VARIABLES ================= */
:root {
  --black: #000000;
  --white: #ffffff;

  --blue: #1f6cff;
  --blue2: #1fb0ff;
  --blue-dark: #0f4ec7;

  --gray-light: #f4f4f4;
  --gray-dark: #1a1a1a;

  --shadow: 0 12px 32px rgba(0,0,0,0.15);

  /* Shared spacing control */
  --container: 1200px;
  --hero-inset: clamp(16px, 4vw, 80px);

  /* Section separation */
  --section-pad: 56px;
  --section-tint: #f6f9ff;   /* subtle blue-tint background */
  --divider: #e7ecf5;
}

/* ================= RESET / BASE ================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--white);
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ================= CONTAINER ================= */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px;
}

/* ================= NAV (SITEWIDE) ================= */
.nav{
  background:#000;
  border-bottom:1px solid rgba(255,255,255,0.10);

  position: sticky;
  top: 0;
  z-index: 9999;
}

.nav-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 18px;
  display:flex;
  align-items:center;
  gap:18px;
}
.logo{ height: 52px; width:auto; display:block; }
.logo img{ height:100%; width:auto; }

.nav-center{
  flex: 1 1 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  flex-wrap: wrap;
}
.nav-center a{
  color:#fff;
  font-weight:800;
  font-size:15px;
  opacity:0.92;
  white-space:nowrap;
}
.nav-center a:hover,
.nav-center a.active{
  color: var(--blue);
  opacity: 1;
}

.phone-pill{
  background: rgba(255,255,255,0.12);
  color:#fff;
  padding: 10px 16px;
  border-radius:999px;
  font-weight:900;
  border:1px solid rgba(255,255,255,0.18);
  white-space:nowrap;
}

/* ================= NAV — MOBILE ================= */
@media (max-width: 900px){
  .nav-inner{ justify-content: space-between; }
  .nav-center{ display:none; }   /* clean mobile like wraps */
  .logo{ height: 34px; }
  .phone-pill{ padding: 10px 14px; }
}

/* ================= BUTTONS ================= */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
  transition: transform .08s ease, opacity .08s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0px); opacity: 0.95; }

.btn-primary {
  background: var(--blue-dark);
  color: var(--white);
}

.btn-outline {
  border: 2px solid var(--white);
  color: var(--white);
  background: transparent;
}

.btn-small {
  background: var(--blue);
  color: var(--white);
  padding: 10px 14px;
}

/* ================= HERO ================= */
.hero {
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: var(--white);
  padding-top: 42px;
  padding-bottom: 18px;
  overflow: hidden; /* allows van to bleed right without scrollbar */
  position: relative;
}

/* Add subtle “end cap” / separator under hero so next section doesn’t blend */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background: rgba(255,255,255,0.14); /* slight band, not a redesign */
}

/* Make hero content closer to edges than the rest of the site */
.hero .container {
  max-width: none;
  width: min(100% - 24px, 1600px);
  padding: 0;
  margin: 0 auto;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

/* Left text */
.hero-text {
  flex: 1;
  min-width: 320px;
  max-width: 720px;
  padding-left: var(--hero-inset);
}

.hero h1 {
  font-size: clamp(42px, 4.5vw, 64px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.6px;
  margin-bottom: 12px;
  text-shadow:
    0 3px 0 rgba(0,0,0,0.25),
    0 10px 22px rgba(0,0,0,0.25);
}

.hero-highlight {
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 900;
  color: #ffd400;
  margin-top: 10px;
  text-shadow:
    0 3px 0 rgba(0,0,0,0.25),
    0 10px 18px rgba(0,0,0,0.22);
}

.hero-sub {
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 900;
  color: #00c8ff;
  letter-spacing: 0.3px;
  margin-top: 18px;
  text-shadow:
    0 3px 0 rgba(0,0,0,0.20),
    0 10px 18px rgba(0,0,0,0.18);
}

.hero-buttons { margin-top: 24px; }
.hero-buttons .btn { margin-right: 12px; margin-bottom: 10px; }

/* Right image */
.hero-image {
  flex: 1;
  min-width: 320px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  overflow: visible;
  margin-right: 180px;
}

.hero-image img {
  width: 780px;
  max-width: none;
  height: auto;
  margin-top: -70px;
  margin-bottom: -40px;
  transform: translateX(90px);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.25));
}

/* Large desktop tuning */
@media (min-width: 1100px) {
  .hero-image img {
    width: 860px;
    margin-top: -90px;
    margin-bottom: -55px;
    transform: translateX(120px);
  }
}

/* Laptop-only: keep hero text visually above van */
@media (max-width: 1400px) and (min-width: 769px) {
  .hero-image img { margin-top: -40px; }
}

/* Mobile hero */
@media (max-width: 768px) {
  .hero { padding-top: 28px; padding-bottom: 18px; }

  .hero .container {
    width: min(100% - 28px, 1100px);
    padding: 0 14px;
  }

  .hero-text { padding-left: 0; }

  .hero-inner { align-items: flex-start; }

  .hero-image {
    justify-content: center;
    align-items: center;
    margin-right: 0;
  }

  .hero-image img {
    width: 100%;
    max-width: 420px;
    margin: 0;
    transform: none;
  }
}

/* ================= SECTION SEPARATION (GLOBAL) ================= */
/* This is the “less white / clearer sections” fix */
.features,
.two-col,
.printing,
.testimonials,
.cred-section {
  padding: var(--section-pad) 0;
}

/* Alternating subtle background tint */
.cred-section,
.printing {
  background: var(--section-tint);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

/* Keep your existing gray areas */
.features,
.testimonials {
  background: var(--gray-light);
}

/* Two-col alternation (already exists, but we tighten it) */
.two-col { background: var(--white); }
.two-col.alt { background: var(--gray-light); }

/* Optional: thin divider between “white on white” sections */
.two-col,
.features,
.testimonials {
  border-top: 1px solid rgba(0,0,0,0.04);
}
/* =========================
   WHY ID GRAPHX — DARK BLUE BACKGROUND
   ========================= */

.testimonials{
  background: linear-gradient(
    180deg,
    #0b1220 0%,
    #0f1a2e 100%
  );
  padding: 80px 0;
}

/* Section heading */
.testimonials .section-title h2{
  color: #ffffff;
}

/* Section subheading */
.testimonials .section-title p{
  color: rgba(255,255,255,.75);
}

/* Cards */
.testimonials .card{
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

/* Card titles */
.testimonials .card h3{
  color: #0b1220;
}

/* Card body text */
.testimonials .card p{
  color: #333;
}

/* ================= WHAT WE DO BEST / CRED SECTION ================= */
.cred-section {
  text-align: center;
}

.cred-divider {
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, #1f6cff, #1fb0ff);
  margin: 16px auto 20px;
  border-radius: 2px;
}

.cred-title {
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 18px;
  color: #111;
}

.cred-desc {
  max-width: 820px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
  color: #444;
}

.cred-section h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 12px;
}

.cred-spanish {
  font-weight: 800;
  margin-top: 6px;
  margin-bottom: 0;
}

.cred-cta {
  margin-top: 28px;
  text-align: center;
}

.cred-phone {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  color: #2563eb;
  text-decoration: none;
  display: inline-block;
}

.se-habla {
  margin-top: 4px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .cred-desc {
    font-size: 16px;
    padding: 0 12px;
  }

  .cred-phone {
    font-size: 22px;
  }
}

/* ================= FEATURES (BIG GRADIENT CARDS) ================= */
.feature-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

.fcard {
  border-radius: 18px;
  padding: 40px 28px;
  text-align: center;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow);
}

.fcard h3 {
  font-size: 32px;
  margin: 18px 0 12px;
  font-weight: 900;
}

.fcard p {
  font-size: 18px;
  line-height: 1.6;
  max-width: 30ch;
}

/* Icon badge */
.ficon {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 22px solid rgba(0,0,0,0.85);
  background: rgba(255,255,255,0.1);
}

.ficon svg {
  width: 64px;
  height: 64px;
  color: #fff;
}

/* Card themes */
.fcard-blue {
  background: linear-gradient(180deg, #13d8ff, #1c63ff);
  color: #fff;
}

.fcard-pink {
  background: linear-gradient(180deg, #ff00c8, #a01b44);
  color: #fff;
}

.fcard-orange {
  background: linear-gradient(180deg, #ffe100, #ff6a3d);
  color: #111;
}

.fcard-orange p { color: rgba(0,0,0,0.7); }



/* ================= TWO COLUMN SECTIONS ================= */
.two-col-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.two-col .text,
.two-col .image { flex: 1; }

.two-col img {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
}

/* ================= PRINTING ================= */
.printing {
  text-align: center;
}

/* ================= TESTIMONIALS ================= */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

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

blockquote {
  background: var(--white);
  padding: 28px;
  border-radius: 10px;
  font-style: italic;
}

/* ================= FOOTER ================= */
.footer {
  background: var(--blue-dark);
  color: var(--white);
  padding: 28px 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer a {
  color: var(--white);
  text-decoration: none;
}

/* =========================
   HOMEPAGE LAYOUT PATCH
   (Keeps existing hero intact)
   ========================= */

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Section spacing */
.features,
.printing,
.testimonials {
  padding: 80px 0;
}

/* Section headers */
.section-title {
  max-width: 720px;
  margin-bottom: 40px;
}

.section-title h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.section-title p {
  color: #6b7280;
}

/* Two-column route section */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* Card base */
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.card ul {
  margin: 14px 0 18px;
  padding-left: 18px;
}

/* Services + Why grids */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 26px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: transform 0.15s ease;
}

.service-card:hover {
  transform: translateY(-3px);
}

/* Small info row */
.mini-notes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
  font-size: 14px;
}

/* Mobile */
@media (max-width: 900px) {
  .two-col,
  .grid-3,
  .mini-notes {
    grid-template-columns: 1fr;
  }
}
/* Homepage: safe centered wrapper (doesn't conflict with existing .container) */
.home-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  display: block;
}

/* Force homepage sections to center (prevents right-anchored layouts) */
.features .container,
.printing .container,
.testimonials .container,
.footer-cta .container{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  display: block;
  text-align: left;
}
.features,
.printing,
.testimonials,
.footer-cta{
  display: block;
}

/* =========================
   QUICK ROUTING STRIP — FINAL
   ========================= */

.quick-route{
  background: linear-gradient(180deg, #0f1a2e, #0b1220);
  padding: 28px 0 32px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.quick-route .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Label */
.qr-label{
  margin: 0;
  color: rgba(255,255,255,.85);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
}

/* Buttons wrapper */
.qr-pills{
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Buttons */
.qr-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 30px;
  border-radius: 12px; /* rectangular */
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
  color: #ffffff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.qr-pill:hover{
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}

/* Primary button */
.qr-pill.primary{
  background: linear-gradient(180deg, #1f7cff, #1b63ff);
  border-color: transparent;
}

/* Mobile */
@media (max-width: 720px){
  .qr-pill{
    width: 100%;
    min-width: 0;
  }
}
.qr-label{
  margin: 0 0 6px;
  color: #ffcc00; /* same yellow/orange as hero */
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 800;
}
/* =========================
   FIX: MOBILE NAV VISIBLE + CLEAN
   ========================= */
@media (max-width: 900px){

  /* keep sticky bar readable */
  .nav-inner{
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
  }

  /* SHOW links on mobile (override previous hide rule) */
  .nav-center{
    display: flex !important;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    text-align: center;
  }

  .nav-center a{
    font-size: 14px;
    padding: 6px 2px;
  }

  .phone-pill{
    margin-top: 4px;
    padding: 10px 14px;
  }
}
/* =========================
   NAV COMPAT PATCH (supports both markup versions)
   Paste at VERY BOTTOM of styles.css
   ========================= */

/* Make logo work whether it's a <div class="logo"> or <a class="logo"> */
.logo { display:block; height:52px; width:auto; }
.logo img{ height:100%; width:auto; display:block; }

/* If your HTML uses .nav-links, style it like .nav-center */
.nav-links{
  flex: 1 1 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  flex-wrap: wrap;
}
.nav-links a{
  color:#fff;
  font-weight:800;
  font-size:15px;
  opacity:0.92;
  white-space:nowrap;
  text-decoration:none;
}
.nav-links a:hover,
.nav-links a.active{
  color: var(--blue);
  opacity: 1;
}

/* If your HTML uses .nav-phone, style it like .phone-pill */
.nav-phone a{
  display:inline-block;
  background: rgba(255,255,255,0.12);
  color:#fff;
  padding: 10px 16px;
  border-radius:999px;
  font-weight:900;
  border:1px solid rgba(255,255,255,0.18);
  white-space:nowrap;
  text-decoration:none;
}

/* MOBILE: do NOT hide the nav links */
@media (max-width: 900px){
  .nav-inner{
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px;
  }

  .nav-center{ display:flex !important; }
  .nav-links{ display:flex !important; }

  .nav-center a,
  .nav-links a{
    font-size: 14px;
    padding: 6px 2px;
  }

  .phone-pill{ padding: 10px 14px; }
  .nav-phone a{ padding: 10px 14px; }
}
body { outline: 6px solid lime !important; }