/* ==========================================================================
   Pixelz Lab — Landing Page Redesign
   landing.css

   Layer order (this file is built up across tasks):
     1. Design tokens (:root)            — task 4.1  [this block]
     2. Base element styles + responsive — task 4.1  [this block]
     3. Reusable component classes       — task 5.1  (appended later)
     4. Section layouts + responsive     — task 5.2  (appended later)

   Do NOT edit css/styles.css or css/animations.css — those are shared by the
   legal pages and use a different (dark) theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens — declared once, referenced everywhere via var(--token).
      (Req 1.5, 14.1, 14.2, 14.3, 14.4)
   -------------------------------------------------------------------------- */
:root {
  /* Color tokens (Req 14.4) */
  --color-bg: #F3F6FD;
  --color-bg-light: #F8FAFE;
  --color-primary: #377CFB;
  --color-primary-dark: #2345BD;
  --color-navy: #10145F;
  --color-muted: #7B86A8;
  --color-border: #DCE6FA;
  --color-cyan: #37D9FF;

  /* Gradients */
  --gradient-highlight: linear-gradient(135deg, #377CFB, #37D9FF); /* Req 14.3 */
  --gradient-cta: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));

  /* Typography */
  --font-sans: "Inter", "Manrope", "Plus Jakarta Sans", system-ui, sans-serif; /* Req 14.1 */
  --fs-hero: clamp(48px, 6vw, 88px);   /* Req 14.2 */
  --lh-hero: 1.05;
  --fw-hero: 800;
  --ls-hero: -0.04em;

  /* Fluid supporting type scale (stays readable 320–4096px) */
  --fs-section-title: clamp(30px, 4vw, 48px);
  --fs-subtitle: clamp(16px, 1.4vw, 20px);
  --fs-body: clamp(15px, 1.1vw, 18px);
  --lh-body: 1.6;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* Layout */
  --container-max: 1200px;

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 24px;   /* service/glass cards, Req 5.4 */
  --radius-lg: 32px;

  /* Shadows / glow (blue tint derived from --color-primary) */
  --shadow-card: 0 12px 32px rgba(55, 124, 251, 0.12);
  --shadow-lift: 0 20px 48px rgba(55, 124, 251, 0.20);
  --glow-blue: 0 0 48px rgba(55, 124, 251, 0.45);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-blur: 16px;

  /* Motion */
  --dur-fast: 200ms;
  --dur-lift: 300ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Showcase / video gallery tokens (literals confined here per Property 8) */
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border-strong: rgba(220, 230, 250, 0.9);
  --glass-blur-lg: 18px;
  --radius-xl: 32px;
  --radius-2xl: 36px;
  --shadow-showcase: 0 24px 70px rgba(35, 69, 189, 0.14);
  --glow-cyan: 0 0 60px rgba(55, 217, 255, 0.45);
  --overlay-navy: rgba(16, 20, 95, 0.55);
  --scrim-navy: rgba(16, 20, 95, 0.28);
}

/* --------------------------------------------------------------------------
   2. Base element styles + global overflow control.
      (Req 12.6, 14.1, 14.5)
   -------------------------------------------------------------------------- */

/* Modern box model everywhere. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Global horizontal-overflow control so no content forces h-scroll
   across the 320–4096px range (Req 12.6). */
html,
body {
  overflow-x: hidden;
}

html {
  /* Smooth in-page navigation; motion is neutralized for reduced-motion
     users in landing-animations.css. */
  scroll-behavior: smooth;
  /* Offset for the sticky glass header so anchored sections aren't hidden. */
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  font-family: var(--font-sans);           /* Req 14.1 */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-muted);               /* secondary/body text (Req 14.5) */
  background-color: var(--color-bg);       /* background role (Req 14.5) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Primary text (headings) uses the navy token (Req 14.5). */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--color-navy);
  font-weight: var(--fw-hero);
  line-height: 1.15;
}

p {
  margin: 0;
}

/* Links inherit and use the primary accent (Req 14.5). */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--color-primary-dark);
}

/* Media is fluid and never wider than its container (Req 12.4, 12.6). */
img,
svg,
video,
canvas,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Form controls inherit the type system. */
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* Lists used for nav / footer groups reset to unstyled by default. */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Visible focus ring using the accent token for keyboard users. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Screen-reader-only utility for accessible names on controls. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Component classes (task 5.1) and section layouts (task 5.2) are appended
   below this line in later tasks.
   -------------------------------------------------------------------------- */
/* ==========================================================================
   3. Reusable component classes — task 5.1
      (Req 1.6, 2.4, 5.4, 5.5, 5.6, 5.7, 7.5, 7.6, 9.4)

   Every color/background/border/shadow/gradient references a var(--token);
   no literal color values appear (Req 14.6, Property 8). Motion for .btn
   (glow), .section (fade-in), .pixel (float) and the reduced-motion
   neutralization of .card--project hover-lift live in landing-animations.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Site header — glassmorphism + sticky (Req 2.4, 2.5)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Buttons — .btn + modifiers (Req 1.6)
   Pill-shaped, reusable on multiple elements. Hover glow is added by
   landing-animations.css (Req 13.3, 13.4).
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

/* Primary = blue gradient fill (Req 9.3-style CTA look) */
.btn--primary {
  background: var(--gradient-cta);
  color: var(--color-bg-light);
  box-shadow: var(--shadow-card);
}

/* Secondary = translucent glass with a bordered outline */
.btn--secondary {
  background: var(--glass-bg);
  color: var(--color-navy);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Ghost = minimal outline, no fill (background left as UA default) */
.btn--ghost {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* --------------------------------------------------------------------------
   Cards — .card + modifiers (Req 1.6, 5.4, 9.4)
   -------------------------------------------------------------------------- */
.card {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

/* Glass card: translucent bg + backdrop blur + 24px radius + blue-tinted
   shadow (Req 5.4). */
.card--glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Service card: glassmorphism, 24px radius, blue-tinted soft shadow
   (Req 5.4). Icon uses the primary accent token (Req 5.5). */
.card--service {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.card--service .card__icon,
.card--service__icon {
  color: var(--color-primary); /* Req 5.5 — icons use --color-primary */
}

/* Project card: solid light surface with rounded corners + blue-tinted
   shadow; content clipped to the rounded box. */
.card--project {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

/* Floating mini card (Why Choose Us) — small glass panel. */
.card--mini {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* CTA card: blue gradient background + soft blue glow (Req 9.4). Light text
   on the gradient uses the near-white bg-light token. */
.card--cta {
  padding: var(--space-8) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--gradient-cta);
  box-shadow: var(--glow-blue);
  color: var(--color-bg-light);
  text-align: center;
}

.card--cta h1,
.card--cta h2,
.card--cta h3,
.card--cta .section__title,
.card--cta .section__subtitle {
  color: var(--color-bg-light);
}

/* --------------------------------------------------------------------------
   Badges — .badge + modifiers (Req 1.6)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Hero eyebrow badge — glass pill with primary accent text. */
.badge--hero {
  background: var(--glass-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Feature badges — light surface, navy text, bordered pill. */
.badge--feature {
  background: var(--color-bg-light);
  color: var(--color-navy);
  border: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Section wrapper — consistent vertical rhythm + centered heading block
   (Req 1.6). NOTE: .section fade-in opacity/transform is defined in
   landing-animations.css; only layout/type is set here.
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--space-8);
}

.section__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section__title {
  color: var(--color-navy);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-hero);
  letter-spacing: -0.02em;
  text-align: center;
}

.section__subtitle {
  max-width: 60ch;
  margin-inline: auto;
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: var(--fs-subtitle);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Decorations — .pixel (blue squares) + .glow (soft radial blue glow)
   (Req 1.6). Float motion lives in landing-animations.css.
   -------------------------------------------------------------------------- */
.pixel {
  position: absolute;
  border-radius: 4px;
  background: var(--color-primary);
  box-shadow: var(--shadow-card);
  pointer-events: none;
}

.pixel--sm { width: 12px; height: 12px; }
.pixel--md { width: 20px; height: 20px; }
.pixel--lg { width: 32px; height: 32px; }

/* Soft radial blue glow blob — a blurred blue disc used behind hero/CTA. */
.glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--color-primary);
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   Hover-lift utility — .hover-lift (Req 5.6, 5.7, 7.5, 7.6)
   Translates the element up over --dur-lift and deepens the shadow. Only
   engages on hover-capable pointers (Req 7.5). Reduced-motion neutralization
   of .card--project hover-lift lives in landing-animations.css (Req 7.7).
   -------------------------------------------------------------------------- */
.hover-lift {
  transition:
    transform var(--dur-lift) var(--ease),
    box-shadow var(--dur-lift) var(--ease);
}

@media (hover: hover) {
  /* Default lift (used by mini/glass cards). */
  .hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
  }

  /* Service cards lift 6–10px (Req 5.6). */
  .card--service.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lift);
  }

  /* Project cards lift 4–12px within --dur-lift (300ms) (Req 7.5). */
  .card--project.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lift);
  }
}

/* ==========================================================================
   4. Section layouts + responsive rules — task 5.2
      (Req 3.8, 3.9, 6.3, 6.4, 8.4, 8.5, 8.6, 12.1, 12.2, 12.3, 12.4, 12.5, 12.7)

   Approach: desktop-first base layout, with two max-width breakpoints that
   progressively collapse toward a single column:
     - Tablet : @media (max-width: 1023px)  → 768–1023px (Req 12.2)
     - Mobile : @media (max-width: 767px)   → ≤767px      (Req 12.3)
   Desktop is the un-queried base (≥1024px, Req 12.1). Every grid collapses so
   no element renders wider than the viewport across 320–4096px (Req 12.6),
   backed by the global `overflow-x: hidden` + `max-width:100%` media rules
   from the base layer. Colors reference var(--token) only (Property 8).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — two-column on desktop (text left / illustration right),
   single column stacked on mobile (Req 3.8, 3.9, 12.1, 12.4, 12.5).
   -------------------------------------------------------------------------- */
/* The hero section is a normal block; the two-column grid lives on
   .hero__inner (its .section__inner child), which is width-constrained and
   centered like every other section. */
.hero {
  display: block;
}

/* Left text column. */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0; /* allow the column to shrink and prevent overflow */
}

/* CTA button row — wraps rather than overflowing on narrow widths. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Feature badge row — wrap onto multiple lines so no badge is clipped
   or overflows the viewport (Req 12.5). */
.hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Right column 3D visual — its internals live in the HTML/animations layers;
   here we only reserve/position and constrain its width. */
.hero-illustration {
  position: relative;
  width: 100%;
  max-width: 100%; /* never wider than its column / the viewport (Req 12.4) */
}

/* --------------------------------------------------------------------------
   Services — responsive 4-card grid (Req 5.3 layout).
   -------------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Why Choose Us — split two-column layout with ≥2 floating mini cards on
   desktop/tablet; stacked single column on mobile (Req 6.3, 6.4).
   -------------------------------------------------------------------------- */
.why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-6);
}

/* Highlight blocks stack vertically within their column. */
.why__highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Floating mini-card cluster — a positioned canvas so mini cards can float
   with slight offsets while remaining fully inside the section bounds
   (Req 6.3). */
.why__cards {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Slight horizontal float offsets on desktop/tablet; neutralized on mobile. */
.why__cards .card--mini:nth-child(odd) {
  margin-inline-end: var(--space-6);
}

.why__cards .card--mini:nth-child(even) {
  margin-inline-start: var(--space-6);
}

/* --------------------------------------------------------------------------
   Portfolio — responsive 3-card grid (Req 7.2 layout).
   -------------------------------------------------------------------------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Process — horizontal timeline on desktop (single row, left→right),
   vertical column on mobile, fits within width on tablet without
   horizontal scroll (Req 8.4, 8.5, 8.6).
   -------------------------------------------------------------------------- */
.process-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* single row Discover→Launch (Req 8.4) */
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Connector line running left→right behind the steps on desktop. */
.process-timeline::before {
  content: "";
  position: absolute;
  top: 28px; /* aligns with the step number markers */
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

.process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

/* Sequential step number marker. */
.process-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gradient-cta);
  color: var(--color-bg-light);
  font-weight: var(--fw-hero);
  box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------------------------
   CTA — centered container layout (Req 9 layout).
   -------------------------------------------------------------------------- */
.cta {
  display: flex;
  justify-content: center;
  /* Match the horizontal gutter used by .section__inner so the gradient card
     never touches the viewport edges (important on phones where the card is
     narrower than its 900px max-width and would otherwise span full width). */
  padding-inline: var(--space-4);
}

/* Constrain the gradient CTA card and center it within the section. */
.cta .card--cta {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

/* CTA action buttons centered and wrapping. */
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   Footer — multi-column layout collapsing on mobile (Req 10 layout).
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-7);
}

.site-footer .section__inner,
.footer__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Brand column (wider) + four link-group columns. */
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--space-5);
}

/* Each footer link group stacks its links vertically. */
.footer__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Bottom bar: copyright + social row. */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ==========================================================================
   Responsive breakpoints
   Desktop ≥1024px (base above) · Tablet 768–1023px · Mobile ≤767px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet — width 768–1023px (Req 12.2, 12.7, 8.6).
   Grids reflow to fit the viewport with no horizontal scroll; the Process
   timeline becomes a 2×2 grid that preserves the Discover→Launch order.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Hero stays readable: stack text above the illustration, no overflow. */
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .hero-illustration {
    margin-inline: auto;
  }

  /* Services: 4 → 2 columns. */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Portfolio: 3 → 2 columns. */
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Process: 4-in-a-row → 2×2 grid; order Discover→Launch preserved,
     fits within width without horizontal scroll (Req 8.6). */
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  /* The horizontal connector line only makes sense for the single-row
     desktop layout. */
  .process-timeline::before {
    display: none;
  }

  /* Footer: collapse the 5-column layout to a 2-column grid. */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   Mobile — width ≤767px (Req 3.9, 6.4, 8.5, 12.3, 12.4, 12.5).
   Every section becomes a single stacked column.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Hero: single column, text stacked above the illustration (Req 3.9). */
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Scale the illustration so its rendered width never exceeds the
     viewport width (Req 12.4). */
  .hero-illustration {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  /* Services: single column. */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* Why Choose Us: stack the split layout into one full-width column in
     top-to-bottom source order; remove the desktop float offsets so each
     highlight block and mini card fills the content width (Req 6.4). */
  .why__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .why__cards .card--mini:nth-child(odd),
  .why__cards .card--mini:nth-child(even) {
    margin-inline: 0;
  }

  /* Portfolio: single column. */
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  /* Process: single vertical column ordered top→bottom Discover→Launch
     (Req 8.5). */
  .process-timeline {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Footer: collapse to a single column. */
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   5. Element-level styles (BEM children) — fills the gaps between the
      component/layout classes and the actual markup in index.html.
      Colors reference var(--token) only (Property 8), except the two allowed
      exceptions: the hero headline gradient and the .hero-illustration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header inner layout + navigation
   -------------------------------------------------------------------------- */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-logo__img {
  height: 32px;
  width: auto;
}

.nav-logo__text {
  font-weight: var(--fw-hero);
  color: var(--color-navy);
  font-size: 1.15rem;
}

/* Push the nav (and the CTA/toggle after it) to the right of the logo. */
.site-nav {
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-link {
  color: var(--color-navy);
  font-weight: 600;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--color-primary);
}

/* Hamburger toggle — hidden on desktop, shown on mobile. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-navy);
}

/* --------------------------------------------------------------------------
   Hero — inner two-column grid (the grid must live on .hero__inner, since
   .hero-content and .hero-illustration are its children).
   -------------------------------------------------------------------------- */
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

.hero__headline {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  font-weight: var(--fw-hero);
  letter-spacing: var(--ls-hero);
  color: var(--color-navy);
}

/* Allowed exception (Req 14.6): the hero headline gradient. */
.headline-gradient {
  background: var(--gradient-highlight);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero__subtitle {
  max-width: 54ch;
  color: var(--color-muted);
  font-size: var(--fs-subtitle);
}

/* --------------------------------------------------------------------------
   Hero Illustration — a positioned canvas; each card floats independently.
   (All internals are an allowed exception to token-only colors, Req 14.6.)
   -------------------------------------------------------------------------- */
.hero-illustration {
  min-height: 500px;
}

.hero-window,
.hero-chip,
.hero-code,
.hero-chart,
.hero-message {
  position: absolute;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
}

/* Largest element — the app window (≥40% of the illustration, Req 4.3). */
.hero-window {
  top: 56px;
  left: 0;
  width: 66%;
  padding: var(--space-4);
  z-index: 2;
}

.hero-window__bar {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.hero-window__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}

.hero-window__row {
  height: 10px;
  border-radius: 5px;
  background: var(--color-border);
  margin-bottom: 8px;
}

.hero-window__row--wide { width: 85%; }
.hero-window__row--short { width: 50%; }

.hero-window__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: var(--space-3);
}

.hero-window__tile {
  height: 38px;
  border-radius: 10px;
  background: var(--gradient-highlight);
  opacity: 0.92;
}

.hero-chip {
  top: 8px;
  right: 4%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  z-index: 3;
}

.hero-chip__icon { color: var(--color-primary); }

.hero-chip__label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-navy);
}

.hero-chart {
  top: 96px;
  right: 0;
  width: 42%;
  color: var(--color-primary);
  z-index: 3;
}

.hero-chart__svg { width: 100%; height: auto; }

.hero-code {
  bottom: 84px;
  left: 4%;
  width: 44%;
  z-index: 3;
}

.hero-code__glyph {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: var(--fw-hero);
  color: var(--color-primary);
}

.hero-code__lines { margin-top: var(--space-2); }

.hero-code__line {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--color-border);
  margin-top: 6px;
  width: 100%;
}

.hero-code__line--short { width: 60%; }

.hero-message {
  bottom: 8px;
  right: 6%;
  width: 52%;
  z-index: 3;
}

.hero-message__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 8px;
}

.hero-message__row:first-child { margin-top: 0; }

.hero-message__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gradient-highlight);
  flex: none;
}

.hero-message__text {
  height: 8px;
  border-radius: 4px;
  background: var(--color-border);
  width: 100%;
}

.hero-message__text--short { width: 55%; }

/* --------------------------------------------------------------------------
   Card internals (service / project / mini) + section content
   -------------------------------------------------------------------------- */
.card__icon {
  display: inline-flex;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.card__icon svg { width: 32px; height: 32px; }

.card__title {
  font-size: 1.15rem;
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}

.card__desc { color: var(--color-muted); }

.card--project__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
}

.why__highlight .card__title { margin-bottom: var(--space-1); }

.process-step__title { font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   Footer internals
   -------------------------------------------------------------------------- */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__desc { color: var(--color-muted); }

.footer__title {
  font-size: 1rem;
  color: var(--color-navy);
  margin-bottom: var(--space-1);
}

.footer__link { color: var(--color-muted); }

.footer__link:hover,
.footer__link:focus { color: var(--color-primary); }

.footer__copy { color: var(--color-muted); }

/* --------------------------------------------------------------------------
   Responsive overrides for the newly-styled elements
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Hero inner column collapses to a single column (content above visual). */
  .hero__inner { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* Header: reveal the hamburger; collapse the nav into a dropdown. */
  .site-header__inner { flex-wrap: wrap; }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
    order: 2;
  }

  .site-header__cta { display: none; }

  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .nav-list {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    padding-top: var(--space-3);
  }

  /* Toggled open by js/landing.js (Req 2.9). */
  .nav-list.is-open { display: flex; }

  /* Shrink the illustration canvas so it fits small screens while keeping
     ALL elements present (Req 4.10). Cards get tighter so they overlap less. */
  .hero-illustration { min-height: 400px; }

  .hero-window { width: 74%; padding: var(--space-3); }
  .hero-window__grid { gap: 8px; }
  .hero-window__tile { height: 30px; }

  .hero-chip { top: 0; right: 0; }
  .hero-chart { top: 84px; width: 46%; padding: var(--space-2); }
  .hero-code { bottom: 72px; left: 0; width: 50%; padding: var(--space-2); }
  .hero-message { bottom: 0; right: 0; width: 58%; padding: var(--space-2); }
}

/* --------------------------------------------------------------------------
   Small-phone refinement — width ≤400px. Keeps the hero illustration legible
   and everything within the viewport (Req 4.10, 12.6).
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .hero-illustration { min-height: 340px; }
  .hero-window { width: 80%; }
  .hero-chart { width: 52%; top: 72px; }
  .hero-code { width: 56%; }
  .hero-message { width: 66%; }

  /* Give sections a touch more breathing room on tiny screens. */
  .section__inner,
  .footer__inner { padding-inline: var(--space-3); }
}

/* --------------------------------------------------------------------------
   Contact section — form + verified direct channels (email/Telegram/Facebook)
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
  text-align: left;
}

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-form__label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-navy);
}

.contact-form__input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-light);
  color: var(--color-navy);
  font: inherit;
}

.contact-form__input::placeholder { color: var(--color-muted); }

.contact-form__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--glass-border);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form__submit { align-self: flex-start; }

.contact-form__status { font-size: 0.9rem; }
.contact-form__status--ok { color: var(--color-primary); }
.contact-form__status--error { color: var(--color-primary-dark); }

/* Direct channels aside */
.contact__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-channel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--color-navy);
}

.contact-channel__icon {
  display: inline-flex;
  flex: none;
  color: var(--color-primary);
}

.contact-channel__body {
  display: flex;
  flex-direction: column;
}

.contact-channel__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-navy);
}

.contact-channel__value {
  color: var(--color-muted);
  font-size: 0.9rem;
  word-break: break-word;
}

@media (max-width: 1023px) {
  /* Stack the form above the channels on tablet/mobile. */
  .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* Name/email fields stack on small screens. */
  .contact-form__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   App Showcase Videos ("App Experiences in Motion") + modal lightbox.
   All colors reference var(--token) (Property 8). Motion lives in
   landing-animations.css.
   ========================================================================== */
.showcase {
  position: relative;
  background: linear-gradient(180deg, var(--color-bg-light), var(--color-bg));
  overflow: hidden;
}

/* Decorative soft glows + pixels */
.showcase__glow { z-index: 0; opacity: 0.28; }
.showcase__glow--1 { top: 40px; left: -80px; background: var(--color-primary); }
.showcase__glow--2 { bottom: 20px; right: -60px; background: var(--color-cyan); }
.showcase__pixel--1 { top: 80px; right: 8%; }
.showcase__pixel--2 { bottom: 120px; left: 6%; }
.showcase__pixel--3 { top: 40%; right: 4%; }

.showcase .section__inner { position: relative; z-index: 1; }

/* Featured stage */
.showcase__stage {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* Other demos grid */
.showcase__grid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* fixed columns → always full rows */
  gap: var(--space-4);
}

.showcase__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Showcase card (rounded glass "app-window" frame, 16:9 media)
   -------------------------------------------------------------------------- */
.showcase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--shadow-showcase);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.showcase-card--featured {
  width: 100%;
  max-width: 900px;
  border-radius: var(--radius-2xl);
}

@media (hover: hover) {
  .showcase-card:hover,
  .showcase-placeholder:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-lift), var(--glow-cyan);
  }

  /* Placeholders brighten on hover for a subtle "wake up" feel. */
  .showcase-placeholder:hover { opacity: 1; }
}

/* App-window top bar */
.showcase-card__frame { position: relative; }

.app-window__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
}

.app-window__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}

/* Media (16:9, no layout shift) */
.showcase-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-navy);
  overflow: hidden;
}

.showcase-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play overlay */
.showcase-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gradient-cta);
  color: var(--color-bg-light);
  box-shadow: var(--glow-blue);
  padding-left: 3px;
  pointer-events: none;
}

.showcase-card--featured .showcase-card__play { width: 78px; height: 78px; }

/* Meta */
.showcase-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
}

.showcase-card__title { font-size: 1.15rem; color: var(--color-navy); }
.showcase-card__desc { color: var(--color-muted); }
.showcase-card__cta { color: var(--color-primary); font-weight: 600; font-size: 0.95rem; }

/* Featured badge + floating micro-cards */
.showcase-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 4;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--gradient-cta);
  color: var(--color-bg-light);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: var(--shadow-card);
}

.showcase-float {
  position: absolute;
  z-index: 4;
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  color: var(--color-navy);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
}

.showcase-float--1 { top: 18%; right: -10px; }
.showcase-float--2 { top: 52%; left: -12px; }
.showcase-float--3 { bottom: 22%; right: -6px; }

/* --------------------------------------------------------------------------
   Modal / lightbox
   -------------------------------------------------------------------------- */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.video-modal[hidden] { display: none; }

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-navy);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.video-modal__player video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: var(--color-navy);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.video-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--color-border);
  color: var(--color-navy);
  box-shadow: var(--shadow-card);
}

.video-modal__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
}

.video-modal__title { color: var(--color-navy); font-size: 1.25rem; }
.video-modal__desc { color: var(--color-muted); }

/* Placeholder "coming soon" cards (non-interactive, balance the grid) */
.showcase-placeholder {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  background: var(--glass-bg-strong);
  border: 1px dashed var(--glass-border-strong);
  box-shadow: var(--shadow-showcase);
  overflow: hidden;
  opacity: 0.9;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), opacity 0.35s var(--ease);
}

.showcase-placeholder__media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: linear-gradient(135deg, var(--color-bg), var(--color-border));
}

.showcase-placeholder__icon { color: var(--color-primary); opacity: 0.75; }

.showcase-placeholder__soon {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-navy);
}

/* Cyan pixel variant for a livelier decorative field */
.pixel--cyan { background: var(--color-cyan); }

/* Random pixel overlay layers (behind the content) */
.showcase__pixels,
.hero__pixels {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Keep hero content above its pixel field. */
.hero .section__inner { position: relative; z-index: 1; }

/* Responsive */
@media (max-width: 1023px) {
  /* Tablet: 2 columns → 8 items make 4 full rows. */
  .showcase__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .showcase__grid { grid-template-columns: 1fr; }
  .showcase-card__play { width: 56px; height: 56px; }
  /* Keep floating labels inside the frame on small screens. */
  .showcase-float--1 { right: 6px; }
  .showcase-float--2 { left: 6px; }
  .showcase-float--3 { right: 6px; }
}