/* styles.css — Base variables and layout (overridden/extended by modern.css) */

:root {
  --ink:    #132420;
  --paper:  #f5f4ef;
  --lime:   #d6fa55;
  --orange: #ef7654;
  --line:   #dce6df;
  --muted:  #62736c;
  --green:  #1f6a52;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', Manrope, Arial, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Ensure images are responsive */
img { max-width: 100%; height: auto; }

/* Brand / logo base */
.brand { font-weight: 800; font-size: 20px; letter-spacing: -1.1px; display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.brand-logo { font-size: 0; }
.brand-logo img { display: block; width: 175px; height: auto; }
footer .brand-logo img { width: 142px; }

/* Eyebrow utility */
.eyebrow {
  font: 500 11px 'DM Mono', monospace;
  letter-spacing: 1.2px;
  color: #53625c;
  margin: 0 0 21px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.eyebrow span {
  height: 7px; width: 7px;
  background: var(--orange);
  border-radius: 50%;
  display: inline-block;
}

/* ==============================
   PRINT STYLESHEET
   ============================== */
@media print {
  /* Hide everything except the pamphlet */
  header,
  .page-glow,
  .hero,
  .intro-strip,
  .services,
  .hardware-detail,
  .software-detail,
  .projects-section,
  .about,
  .why,
  .contact,
  footer,
  .whatsapp-float,
  .pamphlet-top,
  script {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .pamphlet-section {
    padding: 0 !important;
    background: #fff !important;
  }

  .pamphlet-inner {
    max-width: 100% !important;
    margin: 0 !important;
  }

  .pamphlet-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    page-break-inside: avoid;
  }

  .reveal { opacity: 1 !important; transform: none !important; }
}