/* =========================================================================
   FEXIFY — MAIN STYLESHEET (v2, light theme)
   =========================================================================
   Table of contents:
   1.  Design tokens (CSS custom properties)
   2.  Reset & base styles
   3.  Utility classes (containers, buttons, section headers, reveal anim)
   4.  Navigation bar
   5.  Hero section (homepage)
   6.  Stats bar
   7.  Products bento grid
   8.  Services grid (homepage summary)
   9.  Why Fexify section
   10. CTA section
   11. Footer
   12. Inner-page hero (About / Services / Contact / Blog headers)
   13. About page (story + values)
   14. Services page (alternating detail rows)
   15. Contact page (form + details)
   16. Blog index (article cards)
   17. Products showcase page (device mockups + per-product styled screens)
   18. Individual blog post pages (hero image, body copy, pull quote, etc.)
   19. Responsive breakpoints (768px tablet, 1024px desktop)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   Every color, radius and spacing value used across the site is defined
   here once, so the whole design system can be retuned from one place.
------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --color-bg: #F2F1F8;
  --color-bg-soft: #E8E4F5;

  /* Text */
  --color-text: #0f0f1a;
  --color-text-secondary: #555555;
  --color-text-muted: #888888;

  /* Brand accents */
  --color-accent: #1A9E96;
  --color-accent-light: rgba(26, 158, 150, 0.08);
  --color-accent-border: rgba(26, 158, 150, 0.2);
  --color-purple: #2D1A4A;

  /* Structural */
  --color-border: rgba(0, 0, 0, 0.07);
  --color-shadow: rgba(45, 26, 74, 0.12);

  /* Typography — DM Sans is used for both headings and body copy */
  --font-primary: 'DM Sans', sans-serif;

  /* Layout helpers */
  --max-width: 1200px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --transition: 0.2s ease;
}

/* -------------------------------------------------------------------------
   2. RESET & BASE STYLES
------------------------------------------------------------------------- */
* ,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* fallback for browsers/cases where the JS smooth-scroll doesn't run */
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden; /* guards against accidental horizontal scroll from the hero orbs */
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* -------------------------------------------------------------------------
   3. UTILITY CLASSES
------------------------------------------------------------------------- */

/* Centered content wrapper used by every section */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Small uppercase eyebrow label above section headlines, e.g. "OUR PRODUCTS" */
.section-tag {
  display: inline-block;
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.section-heading {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.section-sub {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.8;
  max-width: 560px;
}

.section-header {
  margin-bottom: 48px;
}

.section-header.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-header.center .section-sub {
  margin-left: auto;
  margin-right: auto;
}

section {
  position: relative;
  padding: 64px 0;
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-primary);
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), filter var(--transition);
  white-space: nowrap;
}

/* Dark filled button — used for primary actions like "See Our Work" and the nav CTA */
.btn-dark {
  background: var(--color-text);
  color: #ffffff;
  border: 1.5px solid var(--color-text);
}
.btn-dark:hover {
  filter: brightness(1.25); /* slight darken/lighten on hover per spec */
  transform: translateY(-2px);
}

/* Outline button — used for secondary actions like "Our Services" */
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
}
.btn-outline:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Teal filled button — used for the final CTA and form submit */
.btn-accent {
  background: var(--color-accent);
  color: #ffffff;
  border: 1.5px solid var(--color-accent);
  padding: 16px 36px;
}
.btn-accent:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* Scroll-reveal animation ------------------------------------------------
   Elements start slightly translated + transparent; main.js toggles the
   `.is-visible` class via IntersectionObserver as they enter the viewport. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gentle pulse used by the animated dot in the hero eyebrow pill */
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(26, 158, 150, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(26, 158, 150, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 158, 150, 0); }
}

/* -------------------------------------------------------------------------
   4. NAVIGATION BAR
------------------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition);
}

/* Added by main.js once the user scrolls past 60px — adds a soft shadow
   so the blur reads more clearly against page content underneath it. */
.navbar.scrolled {
  box-shadow: 0 4px 20px rgba(15, 15, 26, 0.06);
}

.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text);
  flex-shrink: 0;
}
.logo-accent {
  color: var(--color-accent);
}

/* Image-based nav logo — flex wrapper keeps the <img> vertically centered
   against the nav links and CTA button regardless of the nav bar's height. */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo img {
  height: 36px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0 auto; /* centers the nav links between logo and CTA on desktop */
}

.nav-link {
  font-size: 13px;
  color: #444444;
  font-weight: 500;
  position: relative;
  padding: 6px 0;
  transition: color var(--transition);
}
.nav-link:hover {
  color: var(--color-accent);
}
/* Active page indicator, set by main.js based on the current filename */
.nav-link.active {
  color: var(--color-accent);
}
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
}

.nav-cta {
  flex-shrink: 0;
  padding: 10px 20px;
}

/* Hamburger — hidden on desktop, shown on mobile via media query below */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
/* Morphs into an "X" when the mobile menu is open (.is-open on #hamburger) */
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   5. HERO SECTION (homepage)
------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--color-bg);
  overflow: hidden; /* keeps the decorative orbs from causing scrollbars */
  padding: 72px 0 48px;
}

/* Two soft radial-gradient orbs anchored top-right, purely decorative.
   Kept at very low opacity so they read as an ambient glow, not a shape. */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero::before {
  /* Teal orb */
  width: 480px;
  height: 480px;
  top: -180px;
  right: -80px;
  background: radial-gradient(circle, rgba(26, 158, 150, 0.14) 0%, rgba(26, 158, 150, 0) 70%);
}
.hero::after {
  /* Purple orb, offset slightly so the two overlap softly */
  width: 380px;
  height: 380px;
  top: -60px;
  right: 220px;
  background: radial-gradient(circle, rgba(45, 26, 74, 0.10) 0%, rgba(45, 26, 74, 0) 70%);
}

.hero-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

/* Eyebrow pill above the H1, with an animated dot on its left */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
  background: var(--color-accent-light);
  border: 1px solid var(--color-accent-border);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.hero-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}

.hero-title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 22px;
}
.hero-title .line {
  display: block;
}
/* "We grow." — diagonal gradient text from purple to teal */
.hero-title .gradient-text {
  background: linear-gradient(90deg, var(--color-purple), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-text {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.85;
  margin-bottom: 32px;
  max-width: 480px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Right-hand hero image */
.hero-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 280px;
  box-shadow: 0 24px 64px var(--color-shadow);
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   6. STATS BAR
------------------------------------------------------------------------- */
.stats {
  background: var(--color-bg-soft);
  border-top: 1px solid rgba(45, 26, 74, 0.06);
  border-bottom: 1px solid rgba(45, 26, 74, 0.06);
  padding: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.stat-item {
  padding: 40px 24px;
  text-align: center;
  border-right: 1px solid rgba(45, 26, 74, 0.08);
  border-bottom: 1px solid rgba(45, 26, 74, 0.08);
}
.stat-item:nth-child(2n) {
  border-right: none;
}
.stat-item:nth-last-child(-n+2) {
  border-bottom: none;
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text);
}
.stat-number .plus {
  color: var(--color-accent);
}

.stat-label {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* -------------------------------------------------------------------------
   7. PRODUCTS BENTO GRID
------------------------------------------------------------------------- */
.products-section {
  background: var(--color-bg);
  padding: 72px 0;
}

.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.product-card {
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 15, 26, 0.08);
}

/* Card color themes, applied per-product via modifier classes */
.product-card.theme-teal {
  background: linear-gradient(135deg, #f0fafa, #ffffff);
  border: 1px solid rgba(26, 158, 150, 0.2);
}
.product-card.theme-purple {
  background: linear-gradient(135deg, #f5f0ff, #ffffff);
  border: 1px solid rgba(45, 26, 74, 0.15);
}
.product-card.theme-soon {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.product-badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 20px;
}
.product-badge.is-live {
  color: var(--color-accent);
  background: var(--color-accent-light);
}
.product-badge.is-soon {
  color: #999999;
  background: rgba(0, 0, 0, 0.05);
}

.product-title {
  font-size: 24px;
  font-weight: 700;
}

.product-subtitle {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999999;
  font-weight: 600;
}

.product-desc {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.75;
  flex-grow: 1;
}

.product-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition), color var(--transition);
}
.product-link:hover {
  gap: 10px;
}
.product-link.is-disabled {
  color: #cccccc;
  pointer-events: none; /* not clickable per spec */
}

/* -------------------------------------------------------------------------
   8. SERVICES GRID (homepage summary)
------------------------------------------------------------------------- */
.services-section {
  background: var(--color-bg-soft);
  padding: 72px 0;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.service-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 32px;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(15, 15, 26, 0.06);
}

.service-index {
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  display: block;
}

.service-title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 12px;
}

.service-desc {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.8;
}

/* -------------------------------------------------------------------------
   9. WHY FEXIFY SECTION
------------------------------------------------------------------------- */
.why-section {
  background: var(--color-bg);
  padding: 72px 0;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

.why-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 280px;
  box-shadow: 0 24px 64px rgba(45, 26, 74, 0.12);
}
.why-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
}

.why-point {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
}
.why-point:last-child {
  border-bottom: 1px solid var(--color-border);
}

.why-index {
  color: var(--color-accent);
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.why-point-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.why-point-desc {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.8;
}

/* -------------------------------------------------------------------------
   10. CTA SECTION
------------------------------------------------------------------------- */
.cta-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2D1A4A 0%, #1A3A4A 50%, #0f2d2a 100%);
  text-align: center;
  padding: 72px 0;
}

/* Subtle teal glow centered behind the CTA content */
.cta-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 158, 150, 0.25) 0%, rgba(26, 158, 150, 0) 70%);
  pointer-events: none;
}

.cta-section .container {
  position: relative;
  z-index: 1;
}

.cta-heading {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
}

.cta-sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: 1.8;
}

.cta-note {
  margin-top: 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}
.cta-note a {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   11. FOOTER
------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-bg);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 72px 0 0;
}

/* Four-column footer: brand column (2fr) plus Company / Products / Services
   link columns (1fr each). Stacked on mobile, side by side from tablet up
   (see the .footer-container rule in the media query block further down). */
.footer-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 56px;
}

.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 18px;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col ul li a,
.footer-col ul li span {
  color: #666666;
  font-size: 14px;
  transition: color var(--transition);
}
.footer-col ul li a:hover {
  color: var(--color-accent);
}

.footer-tagline {
  margin-top: 14px;
  font-size: 13px;
  color: #666666;
}

/* Image-based footer logo, sized independently from the nav logo */
.ft-logo img {
  height: 40px;
  width: auto;
  display: block;
}

.footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 24px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: #666666;
}

/* -------------------------------------------------------------------------
   12. INNER-PAGE HERO (About / Services / Contact / Blog)
------------------------------------------------------------------------- */
.page-hero {
  padding: 72px 0;
  text-align: center;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
}

.page-hero-title {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}

.page-hero-sub {
  color: var(--color-text-secondary);
  font-size: 15px;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.85;
}

/* -------------------------------------------------------------------------
   13. ABOUT PAGE
------------------------------------------------------------------------- */
.story-section {
  background: var(--color-bg);
  padding: 72px 0;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

.story-text p {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.9;
}

.story-image {
  width: 100%;
  height: 280px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: 0 24px 64px var(--color-shadow);
}

.values-section {
  background: var(--color-bg-soft);
  padding: 72px 0;
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.value-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: left;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  transition: transform var(--transition), box-shadow var(--transition);
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(15, 15, 26, 0.06);
}

.value-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 10px;
}

.value-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* -------------------------------------------------------------------------
   14. SERVICES PAGE (alternating detail rows)
------------------------------------------------------------------------- */
.service-detail-section {
  background: var(--color-bg);
}

.service-detail-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--color-border);
}
.service-detail-row:last-of-type {
  border-bottom: none;
}

/* On desktop, alternate rows flip which side the image/number block sits on.
   `.is-reversed` swaps the visual order using CSS grid's order property. */
.service-detail-visual {
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  text-align: center;
}

.service-detail-index {
  font-size: 64px;
  font-weight: 800;
  color: var(--color-accent-border);
  line-height: 1;
}

.service-detail-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 14px;
}

.service-detail-desc {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 18px;
}

.service-detail-list {
  display: grid;
  gap: 10px;
}
.service-detail-list li {
  color: var(--color-text-secondary);
  font-size: 14px;
  padding-left: 20px;
  position: relative;
}
.service-detail-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

/* -------------------------------------------------------------------------
   15. CONTACT PAGE
------------------------------------------------------------------------- */
.contact-section {
  background: var(--color-bg);
  padding: 72px 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.contact-heading {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

.contact-sub {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 36px;
}

.contact-form {
  display: grid;
  gap: 20px;
}

.form-group {
  display: grid;
  gap: 8px;
}

.form-label {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 600;
}

.form-input,
.form-textarea {
  width: 100%;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}
.form-textarea {
  resize: vertical;
}

.form-submit {
  justify-self: start;
  margin-top: 8px;
}

/* Feedback message shown while/after the form submits (populated by main.js) */
.form-status {
  font-size: 13px;
  color: var(--color-accent);
  min-height: 18px;
}

.contact-info {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  height: fit-content;
}

.contact-info h3 {
  font-size: 18px;
  margin-bottom: 20px;
}

.contact-info-item {
  margin-bottom: 20px;
}
.contact-info-item:last-child {
  margin-bottom: 0;
}

.contact-info-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.contact-info-value {
  font-size: 15px;
  color: var(--color-accent);
  font-weight: 700;
}

.contact-info-note {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Phone entry in the Contact Details card — spaced to match the other
   .contact-info-item rows around it. */
.contact-detail-item {
  margin-bottom: 20px;
}
.contact-detail-label {
  font-size: 10px;
  font-weight: 700;
  color: #999999;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.contact-detail-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   16. BLOG INDEX
------------------------------------------------------------------------- */
.blog-section {
  background: var(--color-bg);
  padding: 72px 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Card shell: image on top, text body below, whole card lifts on hover */
.blog-card {
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 15, 26, 0.08);
}

.blog-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* lets the excerpt push the read-more link to a consistent baseline */
}

.blog-card-category {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.blog-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 10px;
}

.blog-card-excerpt {
  font-size: 13px;
  color: #666666;
  line-height: 1.75;
  margin-bottom: 16px;
  flex-grow: 1;
}

.blog-card-meta {
  font-size: 12px;
  color: #999999;
  margin-bottom: 14px;
}

.blog-card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
}
.blog-card-link:hover {
  color: var(--color-purple);
}

/* -------------------------------------------------------------------------
   17. PRODUCTS SHOWCASE PAGE (products.html)
   Each product gets its own full-width section that alternates background
   and content/device order. The "device" is a pure-CSS laptop + tilted
   phone frame; some products show real screenshots inside those frames,
   others show hand-built HTML/CSS mockups of their UI (see the per-product
   ".mock-*" rules further down).
------------------------------------------------------------------------- */

/* Hero specific to products.html — soft lilac fading into white */
.products-page-hero {
  padding: 72px 0 64px;
  text-align: center;
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
  border-bottom: none;
}
.products-page-hero .page-hero-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1.5px;
}
.products-page-hero .page-hero-sub {
  font-size: 16px;
  color: #666666;
}

/* One full-width band per product ------------------------------------- */
.product-block {
  padding: 72px 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: var(--color-bg);
  overflow: hidden; /* keeps the tilted phone's drop-shadow from causing overflow scroll */
}
.product-block:last-of-type {
  border-bottom: none;
}
/* Modifier for the alternating soft-lilac background (Obidax, Accquan) */
.product-block.is-soft {
  background: var(--color-bg-soft);
}

/* pb-inner centers and caps the row's width itself, so .product-block no
   longer needs a .container wrapper around it. Mobile stacks in a single
   column; the two-column grid (as given) kicks in from tablet up so the
   340px+ laptop frame always has room to breathe. */
.pb-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
/* On desktop, odd products (ZUWAC, Kwamic) go content-left/device-right by
   default; even products (Obidax, Accquan) add `.is-reversed` to flip it —
   handled with `order` further down since pb-inner is a grid, not a flexbox. */

/* Left/right content column -------------------------------------------- */
.product-showcase-content {
  min-width: 0;
}

.product-category-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
  margin-left: 10px;
}

.product-showcase-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 14px 0 4px;
}

.product-showcase-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

.product-showcase-desc {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: 24px;
  max-width: 480px;
}

/* Feature list — small teal dot + label, per spec: 10px gap between items,
   28px margin below the whole list before the CTA button. */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #444444;
}
.feature-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}
/* Accquan's list isn't live yet, so its dots render in muted gray instead of teal */
.feature-item.is-muted .feature-dot {
  background: #cccccc;
}
.feature-item.is-muted {
  color: #999999;
}

/* Device showcase: laptop + overlapping tilted phone -------------------- */
.device-wrap {
  position: relative;
  height: 400px;
  width: 100%;
}

.laptop {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 340px;
}
.laptop-lid {
  background: #1e1e2e;
  border-radius: 12px 12px 0 0;
  padding: 9px;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.22), 0 6px 20px rgba(0, 0, 0, 0.12);
}
.laptop-screen {
  border-radius: 6px;
  overflow: hidden;
  height: 200px;
}
.laptop-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.laptop-hinge {
  height: 4px;
  background: #1a1a2e;
  margin: 0 -2px;
}
.laptop-base {
  height: 20px;
  background: linear-gradient(to bottom, #252535, #1e1e2e);
  border-radius: 0 0 8px 8px;
}
.laptop-shadow {
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  margin: 3px 24px 0;
  filter: blur(6px);
}

.phone {
  position: absolute;
  bottom: 0;
  right: 20px;
  width: 120px;
  transform: rotate(6deg);
  transform-origin: bottom center;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.28));
  z-index: 10;
}
.phone-body {
  background: #1e1e2e;
  border-radius: 20px;
  padding: 7px 5px 10px;
  border: 2px solid #2a2a3e;
}
.phone-notch {
  width: 30px;
  height: 5px;
  background: #0f0f1a;
  border-radius: 3px;
  margin: 0 auto 5px;
}
.phone-screen {
  border-radius: 13px;
  overflow: hidden;
  height: 172px;
}
.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.phone-home {
  width: 24px;
  height: 3px;
  background: #2a2a3e;
  border-radius: 2px;
  margin: 6px auto 0;
}

/* ---- Per-product styled-HTML screens (used where we don't have a real
   screenshot yet: Obidax, Kwamic, Accquan). Each lives inside a
   .laptop-screen or .phone-screen and fills it completely. ---- */

/* Obidax: deep magenta/purple brand color, simple top bar + headline */
.mock-obidax {
  width: 100%;
  height: 100%;
  background: #7B2D8B;
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
}
.mock-obidax-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mock-obidax-logo {
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
}
.mock-obidax-login {
  background: #ffd447;
  color: #3a1240;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
}
.mock-obidax-headline {
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  max-width: 80%;
}
/* Phone version: sidebar-style menu rows instead of the headline */
.mock-obidax-phone {
  width: 100%;
  height: 100%;
  background: #7B2D8B;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mock-obidax-phone .mock-obidax-logo {
  margin-bottom: 8px;
}
.mock-sidebar-item {
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  padding: 7px 10px;
  border-radius: 5px;
}

/* Kwamic: near-black background, pink accent, CV-bars mockup on the laptop */
.mock-kwamic {
  width: 100%;
  height: 100%;
  background: #1a0a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  gap: 10px;
}
.mock-kwamic-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.mock-kwamic-logo {
  color: #ff6b8a;
  font-weight: 800;
  font-size: 13px;
}
.mock-kwamic-pill {
  background: rgba(255, 107, 138, 0.15);
  color: #ff6b8a;
  font-size: 8px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}
.mock-kwamic-headline {
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.3;
}
.mock-kwamic-headline .pink {
  color: #ff6b8a;
}
.mock-kwamic-cta {
  background: #ffd447;
  color: #1a0a1a;
  font-size: 8px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 5px;
  margin-top: 2px;
}
.mock-kwamic-outline {
  color: rgba(255, 255, 255, 0.6);
  font-size: 8px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 5px 10px;
  border-radius: 5px;
}
/* Simple CV mockup made of colored bars, shown next to the headline on the laptop */
.mock-cv {
  background: #ffffff;
  border-radius: 6px;
  padding: 8px;
  width: 74px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cv-bar {
  height: 4px;
  border-radius: 2px;
  background: #eeeeee;
}
.cv-bar.cv-bar-lg {
  width: 100%;
  height: 8px;
  background: #ff6b8a;
}
.cv-bar.cv-bar-sm {
  width: 60%;
}
/* Phone version: stacked, no CV mockup (screen is too narrow for it) */
.mock-kwamic-phone {
  width: 100%;
  height: 100%;
  background: #1a0a1a;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
}

/* Accquan: soft animated teal-to-purple gradient placeholder */
.mock-accquan {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(135deg, var(--color-accent), var(--color-purple));
  display: flex;
  align-items: center;
  justify-content: center;
}
.mock-accquan-glow {
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
  animation: accquan-pulse 2.6s ease-in-out infinite;
}
.mock-accquan-text {
  position: relative;
  z-index: 1;
  text-align: center;
}
.mock-accquan-title {
  display: block;
  color: #ffffff;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.5px;
}
.mock-accquan-sub {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}
/* Smaller type inside the narrow phone screen */
.mock-accquan-title.is-small {
  font-size: 14px;
}
.mock-accquan-sub.is-small {
  font-size: 8px;
}

@keyframes accquan-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.6; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* -------------------------------------------------------------------------
   18. INDIVIDUAL BLOG POST PAGES (blog/post-1.html, post-2.html, post-3.html)
   Article layout: full-width hero image, centered narrow reading column
   for the body copy, a highlighted pull-quote, tag pills, prev/next post
   navigation and a closing dark-gradient CTA matching the rest of the site.
------------------------------------------------------------------------- */
.post-hero-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 40px;
}

.post-category {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.post-title {
  font-size: 42px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.post-body {
  font-size: 16px;
  color: #444444;
  line-height: 1.85;
  max-width: 720px;
  margin: 0 auto;
}
.post-body p {
  margin-bottom: 24px;
}
.post-body h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  margin: 36px 0 16px;
}

.post-blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 16px 24px;
  margin: 32px 0;
  background: rgba(26, 158, 150, 0.05);
  border-radius: 0 8px 8px 0;
}
.post-blockquote p {
  font-size: 18px;
  font-style: italic;
  color: var(--color-purple);
  margin: 0;
  line-height: 1.6;
}

.post-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 40px 0;
}
.post-tag {
  background: var(--color-bg);
  color: #555555;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
}

.post-nav {
  display: flex;
  justify-content: space-between;
  padding: 32px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  margin-top: 40px;
}
.post-nav a {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}
.post-nav a:hover {
  color: var(--color-purple);
}
/* When there's no previous/next post, this keeps the remaining link pinned
   to its correct side instead of the flexbox collapsing it to the center */
.post-nav .post-nav-spacer {
  visibility: hidden;
}

.post-cta {
  background: linear-gradient(135deg, #2D1A4A, #1A3A4A);
  padding: 60px 40px;
  text-align: center;
  border-radius: 14px;
  margin-top: 60px;
}
.post-cta h3 {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}
.post-cta p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 24px;
}

/* -------------------------------------------------------------------------
   19. RESPONSIVE BREAKPOINTS
   Mobile-first: base styles above already stack single-column. From
   768px up we introduce tablet layouts, and 1024px brings full desktop
   grids (bento products grid, alternating service rows, etc.).
------------------------------------------------------------------------- */

/* ---- Tablet and up (>= 768px) ---- */
@media (min-width: 768px) {
  section {
    padding: 72px 0;
  }

  .hero {
    padding: 96px 0 64px;
  }
  .hero-container {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .hero-title {
    font-size: 54px;
  }
  .hero-visual {
    height: 420px;
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .stat-item {
    border-bottom: none;
  }
  .stat-item:nth-child(4n) {
    border-right: none;
  }
  .stat-item:nth-child(2n):not(:nth-child(4n)) {
    border-right: 1px solid rgba(45, 26, 74, 0.08);
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns: 1fr 1fr;
  }
  .why-visual {
    height: 400px;
  }

  .story-grid {
    grid-template-columns: 1fr 1fr;
  }
  .story-image {
    height: 380px;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-detail-row {
    grid-template-columns: 1fr 1.4fr;
  }
  /* Alternate layout: reversed rows put the visual on the right instead */
  .service-detail-row.is-reversed .service-detail-visual {
    order: 2;
  }
  .service-detail-row.is-reversed .service-detail-content {
    order: 1;
  }

  .contact-grid {
    grid-template-columns: 1.3fr 1fr;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-container {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }

  /* Products showcase: side-by-side content + device, alternating order */
  .pb-inner {
    grid-template-columns: 1fr 1fr;
  }
  /* Reversed rows (Obidax, Accquan) flip visually via grid order, since the
     content column always comes first in the markup either way. */
  .pb-inner.is-reversed .product-showcase-content {
    order: 2;
  }
  .pb-inner.is-reversed .device-wrap {
    order: 1;
  }
}

/* ---- Desktop (>= 1024px) ---- */
@media (min-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .values-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Small mobile (< 480px): tighten .product-block's side padding and
   shrink the laptop/phone device mockups so they fit inside narrow
   viewports without overflowing horizontally ---- */
@media (max-width: 479px) {
  .product-block {
    padding: 48px 24px;
  }
  .device-wrap {
    height: 290px;
  }
  .laptop {
    width: 270px;
  }
  .laptop-screen {
    height: 160px;
  }
  .phone {
    width: 95px;
    bottom: 18px;
  }
  .phone-screen {
    height: 135px;
  }
}

/* ---- Small mobile (< 600px): scale down the blog post header so the
   42px title and 420px hero image don't overwhelm a narrow screen ---- */
@media (max-width: 599px) {
  .post-hero-img {
    height: 220px;
    margin-bottom: 28px;
  }
  .post-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }
  .post-cta {
    padding: 40px 24px;
  }
}

/* ---- Mobile nav (< 900px): collapse links into a dropdown ---- */
@media (max-width: 899px) {
  .hamburger {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .nav-links.is-open {
    max-height: 400px;
  }
  .nav-link {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-cta {
    display: none; /* shown inside the dropdown instead, see HTML */
  }
  .nav-links .nav-cta-mobile {
    display: inline-flex;
    margin-top: 12px;
  }
}

/* Hide the mobile-only CTA duplicate on wider screens */
@media (min-width: 900px) {
  .nav-cta-mobile {
    display: none;
  }
}

/* ---- Footer, mobile/tablet (<= 768px) ----
   NOTE: the footer markup in this project uses .footer-container /
   .footer-brand (combined with .footer-col) / .footer-bottom rather than
   .ft-grid / .ft-brand / .ft-bottom — applying these rules to the actual
   classes so they take effect. Turns the 4-column desktop footer into a
   2-column link grid with the brand block spanning full width above it,
   and centers the bottom bar instead of stacking it left-aligned. */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    margin-bottom: 4px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }
}