/* ============================================================
   The Pixels Inc. — Company Profile
   Single-page static site
   Palette: black + white + violet accent
   ============================================================ */

:root {
  --black: #0a0a0b;
  --black-soft: #141417;
  --white: #ffffff;
  --cream: #ece8e1;
  --violet: #7c3aed;
  --violet-dark: #5b21b6;
  --violet-deep: #2e1065;
  --violet-light: #a855f7;
  --gray: #9b9ba6;
  --gray-line: rgba(255, 255, 255, 0.12);

  --maxw: 1160px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --radius: 18px;

  --font-head: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 4.25rem; /* clear the fixed footer bar */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- Shared section + typography ---------- */
section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violet-light);
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.section-title--center { text-align: center; margin-inline: auto; }

.accent-block {
  background: var(--violet);
  padding: 0 0.18em;
  border-radius: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
  border: 1.5px solid transparent;
}
.btn--primary { background: var(--violet); color: var(--white); box-shadow: 0 8px 26px -10px var(--violet); }
.btn--primary:hover { background: var(--violet-dark); transform: translateY(-2px); }
.btn--ghost { border-color: rgba(255,255,255,0.35); color: var(--white); }
.btn--ghost:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.btn--lg { font-size: 1.05rem; padding: 1em 2.2em; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--pad);
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.nav.scrolled {
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--gray-line);
  padding-block: 0.6rem;
}
.nav__brand { display: flex; align-items: center; gap: 0.6rem; }
.nav__logo { border-radius: 9px; }
.nav__name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.nav__name em { color: var(--violet-light); font-style: normal; }

.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links a { font-size: 0.92rem; font-weight: 500; color: rgba(255,255,255,0.78); transition: color 0.18s ease; }
.nav__links a:hover, .nav__links a.active { color: var(--white); }
.nav__cta {
  background: var(--violet);
  color: var(--white) !important;
  padding: 0.55em 1.25em;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 600;
}
.nav__cta:hover { background: var(--violet-dark); }

.nav__scrim { display: none; }

.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__toggle span { width: 26px; height: 2.5px; background: var(--white); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  /* Short of full height so the next section's heading peeks above the fold —
     that peek is the cue that the page continues. The offset has to clear the
     fixed footer bar (~4rem) as well as the peek itself, or the bleed lands
     behind the bar and shows nothing. */
  min-height: calc(100svh - 9rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding-block: 7rem;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 80% 10%, rgba(124,58,237,0.45), transparent 55%),
    radial-gradient(100% 90% at 10% 90%, rgba(34,211,238,0.18), transparent 50%),
    linear-gradient(160deg, #060608 0%, #16091f 55%, #060608 100%);
}
.hero__bg::after {
  /* animated fiber-optic streaks */
  content: "";
  position: absolute; inset: -20%;
  background:
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(168,85,247,0.06) 39px 40px),
    repeating-linear-gradient(65deg, transparent 0 60px, rgba(56,189,248,0.05) 61px 62px);
  animation: drift 22s linear infinite;
}
@keyframes drift { to { transform: translate3d(-60px, -40px, 0); } }

.hero__inner { position: relative; z-index: 1; max-width: 760px; padding-inline: var(--pad); }
.hero__logo { width: clamp(72px, 11vw, 104px); height: auto; margin: 0 auto 1.6rem; border-radius: 20px; box-shadow: 0 20px 60px -20px var(--violet); }
.hero__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.8rem, 9vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.hero__title span { color: var(--violet-light); }
.hero__tag { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.1rem, 3vw, 1.6rem); margin-top: 1.1rem; }
.hero__tag strong { color: var(--violet-light); }
.hero__sub { color: var(--gray); font-size: clamp(0.98rem, 2vw, 1.1rem); margin-top: 1rem; }
.hero__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }

/* ============================================================
   WHO WE ARE
   ============================================================ */
.about { background: var(--black); }
.about__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.about__body p { color: rgba(255,255,255,0.82); font-size: 1.08rem; }
.about__body p + p { margin-top: 1.2rem; }

/* ============================================================
   MISSION & VISION
   ============================================================ */
.mv { background: var(--black-soft); }
.mv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.mv__card {
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.mv__card--mission { background: var(--cream); color: #1a1a1a; }
.mv__card--vision { background: linear-gradient(150deg, var(--violet) 0%, var(--violet-deep) 100%); color: var(--white); }
.mv__tag {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  padding: 0.15em 0.6em;
  border-radius: 10px;
}
.mv__card--mission .mv__tag { background: #111; color: #fff; }
.mv__card--vision .mv__tag { background: rgba(255,255,255,0.15); color: #fff; }
.mv__card p { font-size: 1.05rem; }

/* ============================================================
   TIMELINE
   ============================================================ */
.story { background: var(--black); }
.timeline { list-style: none; margin-top: 3.5rem; position: relative; display: grid; gap: 2.4rem; }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(var(--violet), rgba(124,58,237,0.1));
}
.timeline__item { position: relative; padding-left: 3rem; }
.timeline__dot {
  position: absolute; left: 0; top: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--violet); box-shadow: 0 0 0 5px rgba(124,58,237,0.18);
}
.timeline__date { font-family: var(--font-head); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-light); }
.timeline__item h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; margin: 0.25rem 0 0.5rem; }
.timeline__item p { color: rgba(255,255,255,0.8); max-width: 60ch; }

/* ============================================================
   TEAM
   ============================================================ */
.team { background: var(--black-soft); }
.team__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 3.5rem; }
.team__card {
  background: var(--black);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.team__card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,0.5); }
.team__avatar {
  width: 120px; height: 120px; border-radius: 50%;
  margin: 0 auto 1.4rem;
  background: linear-gradient(150deg, var(--violet), var(--violet-deep));
  display: grid; place-items: center;
  position: relative;
  box-shadow: 0 0 0 4px rgba(124,58,237,0.2);
}
.team__avatar::after {
  content: attr(data-initials);
  font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; color: #fff;
}
.team__card h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; }
.team__role { display: inline-block; color: var(--violet-light); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0.35rem 0 0.6rem; }
.team__card p { color: var(--gray); font-size: 0.95rem; }

.quote {
  margin-top: 3.5rem;
  background: linear-gradient(150deg, var(--violet) 0%, var(--violet-deep) 100%);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.quote blockquote { font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.6; font-weight: 500; }
.quote figcaption { margin-top: 1.6rem; }
.quote__sign { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; }
.quote__role { color: rgba(255,255,255,0.75); font-size: 0.9rem; }

/* ============================================================
   WHAT WE OFFER
   ============================================================ */
.offer { background: var(--black); }
.offer__lead { max-width: 720px; margin: 1.4rem auto 0; text-align: center; color: rgba(255,255,255,0.8); font-size: 1.05rem; }

.pillar { margin-top: 3.5rem; }
.pillar__title {
  font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.8rem);
  display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.6rem;
}
.pillar__num {
  font-size: 0.95rem; font-weight: 700; color: var(--violet-light);
  border: 1.5px solid rgba(124,58,237,0.5); border-radius: 8px; padding: 0.1em 0.5em;
}
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.3rem; }
.card {
  background: var(--black-soft);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 1.8rem;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,0.55); background: #181820; }
.card h4 { font-family: var(--font-head); font-weight: 600; font-size: 1.18rem; margin-bottom: 0.7rem; }
.card p { color: rgba(255,255,255,0.74); font-size: 0.98rem; }
.pillar--accent .card:hover { border-color: var(--violet); }

/* ============================================================
   TECH ECOSYSTEM
   ============================================================ */
.ecosystem { background: var(--black-soft); }
.eco__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-top: 3.5rem; }
.eco__cat {
  background: var(--black);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.eco__cat h4 {
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  color: var(--violet-light); letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--gray-line);
}
.eco__cat ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.eco__cat li { color: rgba(255,255,255,0.78); font-size: 0.95rem; position: relative; padding-left: 1.1rem; }
.eco__cat li::before { content: "▪"; color: var(--violet); position: absolute; left: 0; }

/* ============================================================
   PARTNERS
   ============================================================ */
.partners { background: var(--black); }
.partners__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem; margin-top: 3.5rem;
}
/* Light tiles: these are the clients' own colour logos, drawn for white
   backgrounds. Whitening them destroys the marks whose shape depends on
   internal colour contrast (Eagle Cement, PiVOT), so the tile carries the
   light background instead of the logo being recoloured. */
/* Definite height rather than aspect-ratio: against an auto-sized grid row a
   percentage height on the image does not resolve, and portrait logos
   (Hospicio, Ayup Takbang) stretch their tile out of line with the rest. */
.partners__logo {
  height: clamp(74px, 7.5vw, 104px);
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border-radius: 12px;
  padding: 1.1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.partners__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partners__logo:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(124,58,237,0.3); }
.partners__logo:focus-visible { outline: 2px solid var(--violet-light); outline-offset: 3px; }
.partners__note { text-align: center; margin-top: 1.5rem; color: var(--gray); font-size: 0.85rem; font-style: italic; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { text-align: center; overflow: hidden; }
.contact__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(124,58,237,0.5), transparent 60%),
    linear-gradient(180deg, #0a0a0b, #120a1f);
}
.contact__inner { position: relative; z-index: 1; }
.contact__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 7vw, 4.5rem); letter-spacing: -0.02em; }
.contact__sub { color: rgba(255,255,255,0.8); max-width: 560px; margin: 1rem auto 2rem; font-size: 1.08rem; }
.contact__email { margin-top: 1.6rem; color: var(--gray); }
.contact__email a { color: var(--violet-light); font-weight: 600; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--gray-line);
  padding-block: 0.6rem;
}
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: nowrap; }
.footer__brand { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-head); font-weight: 700; }
.footer__brand em { color: var(--violet-light); font-style: normal; }
.footer__copy { color: var(--gray); font-size: 0.88rem; }

.footer__social { display: flex; align-items: center; gap: 0.35rem; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  color: var(--gray);
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.footer__social a:hover, .footer__social a:focus-visible {
  color: var(--white); background: rgba(124, 58, 237, 0.18); transform: translateY(-2px);
}
.footer__social svg { width: 19px; height: 19px; display: block; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__bg::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .about__grid, .mv__grid, .team__grid { grid-template-columns: 1fr; }

  /* Desktop-scale whitespace reads as dead space once the grids stack to one
     column. Card and list spacing carries most of the page height here, not
     the section padding. */
  section { padding-block: clamp(2.75rem, 7vw, 4rem); }

  .pillar { margin-top: 2.25rem; }
  .cards { gap: 1rem; }
  .card { padding: 1.35rem; }
  .card h4 { margin-bottom: 0.5rem; }

  /* Three columns rather than two: 14 tiles at the desktop minimum would add
     roughly 750px of scroll on a phone. */
  .partners__grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0.6rem; margin-top: 2.25rem; }
  .partners__logo { padding: 0.6rem; border-radius: 9px; }

  .eco__grid { gap: 0.9rem; margin-top: 2.25rem; }
  .eco__cat { padding: 1.2rem; }
  .eco__cat h4 { margin-bottom: 0.7rem; padding-bottom: 0.55rem; }
  .eco__cat ul { gap: 0.35rem; }

  /* No backdrop-filter on the header at this width: it would make .nav the
     containing block for the fixed drawer below, collapsing it to header
     height. Solid background stands in for the frosted effect. */
  .nav.scrolled { background: rgba(10,10,11,0.96); backdrop-filter: none; }

  .nav__links {
    position: fixed; inset: 0 0 0 auto;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 5.5rem 2.4rem 2rem;
    background: var(--black-soft);
    box-shadow: -10px 0 40px rgba(0,0,0,0.5);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  }
  .nav__links.open { transform: translateX(0); }
  .nav__links a { font-size: 1.15rem; padding-block: 0.65rem; }
  .nav__links a:not(.nav__cta) { width: 100%; }
  .nav__cta { margin-top: 1rem; }

  .nav__toggle {
    display: flex; z-index: 110;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
  }

  /* The drawer slides over the brand; fade the wordmark so it isn't clipped mid-word. */
  .nav__name { transition: opacity 0.2s ease; }
  .nav-open .nav__name { opacity: 0; }

  .nav__scrim {
    display: block;
    position: fixed; inset: 0;
    /* Between the fixed footer bar (90) and the nav (100) so the footer dims too. */
    z-index: 95;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
  }
  .nav__scrim.open { opacity: 1; pointer-events: auto; }

  /* Scoped to this width so a resize past the breakpoint always restores scrolling. */
  .nav-open, .nav-open body { overflow: hidden; }
}

/* Keep the fixed footer bar to a single row on small screens */
@media (max-width: 700px) {
  .footer__copy { display: none; }
}
@media (max-width: 480px) {
  .footer__brand img { display: none; }
}