/* =============================================================
   pages/home.css — Hero section & About/Who Am I section
   ============================================================= */

/* ── Hero section ────────────────────────────────────────────
   Full-height intro with pixel grid background.
   ─────────────────────────────────────────────────────────── */
.hero {
  position:        relative;
  width:           100%;
  min-height:      982px;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  overflow:        hidden;
  /* Figma background gradient — sits behind the pixel grid */
  background:      linear-gradient(180deg, #0A014C 0%, #0E0911 23.56%, #0E0911 73.56%, #0A014C 100%);
}

/* ============================================
   #pixeled-bg / .pixeled-bg
   HTML+CSS only, no JavaScript
   16 cols × 12 rows = 192 pixel cells
   ============================================ */
#pixeled-bg,
.pixeled-bg {
  /* ── Positioning: absolute, below everything ── */
  position: absolute;
  inset: 0;                   /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: auto;       /* must be auto so .bg-pixel children receive events */

  /* ── Flex column: stack rows vertically ── */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(79, 28, 136, 0.70) 0%, rgba(79, 28, 136, 0.00) 19.71%, rgba(79, 28, 136, 0.00) 66.72%, rgba(79, 28, 136, 0.27) 83.65%, rgba(79, 28, 136, 0.70) 100%);
  }

/* ── .pixel-row ─────────────────────────────
   Horizontal strip. Grows equally to fill
   the full height of the container.
   ─────────────────────────────────────────── */
.pixel-row {
  display: flex;
  flex: 1 0 0;               /* all 12 rows share equal height */
  align-items: stretch;
  width: 100%;
}

/* ── .bg-pixel ──────────────────────────────
   Individual cell. 16 per row → each takes
   1/16 of the container width automatically.
   ─────────────────────────────────────────── */
.bg-pixel {
  flex: 1 0 0;               /* 16 cells share equal width */
  min-width: 1px;
  min-height: 1px;
  opacity: 0.3;

  /* 1px grid lines */
  border: 1px solid var(--pixel-border);

  transition:
    opacity var(--transition-speed) ease-in-out,
    background-color var(--transition-speed) ease-in-out,
    box-shadow var(--transition-speed) ease-in-out;

  cursor: pointer;
  position: relative;
  pointer-events: auto;
  z-index: 10;
}
.opacity-30 {
  opacity: 0.3 !important;
}
.opacity-25 {
  opacity: 0.25 !important;
}
.opacity-20 {
  opacity: 0.2 !important;
}
.opacity-15 {
  opacity: 0.15 !important;
}
.opacity-15 {
  opacity: 0.15 !important;
}
.opacity-10{
  opacity: 0.1 !important;
}
.opacity-07{
  opacity: 0.07 !important;
}



/* ── Hover: raise opacity to 34% (overrides inline styles and utility classes) ── */
.bg-pixel:hover {
  opacity: var(--pixel-hover-opacity) !important; /* 0.34 */
}

/* ── Pass pointer events through hero text layers → pixel grid receives hover ── */
.hero__body,
.hero__body *,
.hero__footer,
.hero__footer * { pointer-events: none; }
.hero__btn       { pointer-events: auto; }  /* keep button clickable */

/* Hero text block */
.hero__body {
  position:   relative;
  z-index:    2;
  display:    flex;
  align-items: center;
  flex:       1;
  padding:    0 96px 0 235px;
  min-height: 856px;
}

.hero__left {
  display:        flex;
  flex-direction: column;
  gap:            24px;
  width:          408px;
  position:       relative;
  z-index:        3;
}

.hero__headings {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.hero__hi,
.hero__name {
  font-family:    var(--font-headings);
  font-size:      var(--fs-40);
  font-weight:    var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height:    48px;
  color:          var(--white);
}

.hero__tagline {
  font-family:    var(--font-mono);
  font-size:      var(--fs-24);
  /* mono tokens: 24px -> >20px */
  font-weight:    var(--mono-fw-gt20);
  letter-spacing: var(--mono-ls-gt20);
  line-height:    32px;
  color:          var(--white);
}

.hero__btn {
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  height:      48px;
  padding:     0 12px;
  width:       fit-content;
  border:      1px solid white;
  border-radius: 8px;
  background:  rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-family:    var(--font-text);
  font-size:      16px;
  font-weight:    var(--fw-body);
  letter-spacing: var(--ls-body);
  color:          var(--white);
  transition:     ease-in-out 0.4s;
}
.hero__btn:hover { background: rgba(255, 255, 255, 0.12); }


.hero__footer {
  position:       relative;
  z-index:        2;
  align-items:    center;
  gap:            10px;
  padding:        24px 96px 48px 235px;
  font-family:    var(--font-mono);
  font-size:      20px;
  /* mono tokens: 20px -> <=20px */
  font-weight:    var(--mono-fw-lte20);
  letter-spacing: var(--mono-ls-lte20);
  line-height:    32px;
  color:          var(--white);
}

.hero__footer-sep {
  font-family:    var(--font-text);
  font-size:      24px;
  font-weight:    var(--fw-display);
  letter-spacing: var(--ls-display);
}

/* ── About / Who Am I section ────────────────────────────────
   Two-column: bio + bullet list | AI widget
   ─────────────────────────────────────────────────────────── */
.about {
  display: flex;
  flex-direction: column;
  position:        relative;
  background:      var(--bg-hero);
  padding: 120px 0 120px 0;
  height: fit-content;
  overflow: hidden;
}

.logos {
  position:    relative;
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         98px;
  padding:     9px 192px 92px;
  overflow:    hidden;
}
.about__grid {
  position:       relative;
  display:        flex;
  flex-direction: column;
  gap:            160px;
  align-items:    flex-start;
  max-width:      1200px;
  width:          calc(100% - 235px - 96px);
  margin:         0 0 0 235px;
  padding:        0 0 96px;
}

/* Radial glow at mid-section (Figma: ellipse at top:427px) */
.about__grid::before {
  content:        '';
  position:       absolute;
  width:          100%;
  height:         400px;
  top:            300px;
  left:           0;
  background:     radial-gradient(ellipse 60% 50% at 50% 50%, rgba(143,0,216,0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index:        0;
}

.about__ellipse {
  position:       absolute;
  width:          100%;
  height:         100%;
  bottom:         0;
  left:           0;
  top: 0px;
  right:0px;
  background:     radial-gradient(ellipse 50% 50% at 50% 50%, rgba(143,0,216,0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index:        0;
}

/* ── Two-column Who Am I block ─────────────────────────────── */
.about__top-block {
  display:        flex;
  flex-direction: column;
  gap:            48px;
  width:          100%;
  position:       relative;
  z-index:        1;
}

.about__content-row {
  display:     flex;
  align-items: flex-start;
  width:       100%;
  gap: 120px;
}

.about__bio-col {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

/* Projects title wrapper (scale-to-white animation target) */
.about__who {
  width:    100%;
  position: relative;
  z-index:  1;
  height:   fit-content;
}

.about__title {
  font-family:    var(--font-headings);
  font-size:      var(--fs-48);
  font-weight:    var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height:    56px;
  color:          var(--white);
  width:          100%;
}

.about__bio {
  font-family:    var(--font-text);
  font-size:      var(--fs-16);
  font-weight:    var(--fw-body);
  letter-spacing: var(--ls-body);
  line-height:    24px;
  color:          var(--text-body);
  text-align:     justify;
}

.bullet-list {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.bullet-list__item {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-family: var(--font-mono);
  font-size:   var(--fs-16);
  font-weight: var(--mono-fw-lte20);
  line-height: 24px;
  color:       var(--purple-900);
}

.bullet-list__dot {
  display:    block;
  width:      12px;
  height:     12px;
  flex-shrink: 0;
  margin-top: 6px;
  background: var(--purple-900);
}

/* =============================================================
   AI Widget (inline, on home page — Figma redesign)
   ============================================================= */
.ai-widget {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-direction:  column;
  gap:             12px;
  width:           312px;
  flex-shrink:     0;
}

.ai-widget__bar {
  display:       flex;
  align-items:   center;
  background:    #878dea;
  border:        1px solid #36004d;
  border-radius: 8px;
  overflow:      hidden;
  gap:           0;
}

.ai-widget__input {
  flex:        1;
  min-height:  48px;
  max-height:  120px;
  padding:     12px 12px 12px 24px;
  background:  transparent;
  border:      none;
  font-family: var(--font-text);
  font-size:   var(--fs-16);
  color:       #3c4078;
  outline:     none;
  resize:      none;
  overflow-y:  auto;
  line-height: 24px;
}
.ai-widget__input::placeholder { color: rgba(60,64,120,0.75); }

.ai-widget__send {
  width:           48px;
  align-self:      stretch;
  background:      #4c006d;
  border:          2px solid #878dea;
  border-radius:   8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  flex-shrink:     0;
  transition:      opacity 0.2s;
}
.ai-widget__send:hover { opacity: 0.85; }

.ai-widget__response {
  background:    rgba(255,255,255,0.04);
  border:        1px solid var(--purple-card-border);
  border-radius: 8px;
  padding:       12px 16px;
}

.ai-widget__response-text {
  font-family: var(--font-text);
  font-size:   var(--fs-16);
  line-height: 24px;
  color:       var(--white);
}

/* FAQ suggestion chips — full-width column layout */
.chips {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.chip {
  width:       100%;
  min-height:  48px;
  padding:     8px 12px;
  background:  rgba(170,172,241,0.07);
  border:      1px solid rgba(170,172,241,0.11);
  border-radius: 8px;
  font-family: var(--font-text);
  font-size:   14px;
  font-weight: 400;
  line-height: 20px;
  color:       #e8c6fd;
  text-align:  left;
  cursor:      pointer;
  transition:  background 0.2s;
}
.chip:hover { background: rgba(170,172,241,0.14); }


/* =============================================================
   Housing Help — project card (#f3f3f3 background)
   Desktop (>940px): text left (460px) | mockup right, bottom-anchored
   Tablet  (≤940px): stacked — text then image
   Phone   (≤640px): same, tighter padding
   ============================================================= */

.project-section {
  position:   relative;
  background: #f3f3f3;
  overflow:   hidden;
  display:    flex;
  padding:    80px 70px 0 235px;
}

.project-section__overlay { display: none; }

/* ── Decorative glow ellipses ─────────────────────────────── */
.project-section__glow {
  position:       absolute;
  pointer-events: none;
  z-index:        1;
  border-radius:  50%;
}
.project-section--1 .project-section__glow--tl {
  width:      1054px;
  height:     749px;
  left:       -273px;
  top:        -247px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
                rgba(61, 114, 49, 0.12) 0%, transparent 70%);
}
.project-section--1 .project-section__glow--br {
  width:      882px;
  height:     602px;
  left:       662px;
  top:        483px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
                rgba(61, 114, 49, 0.10) 0%, transparent 70%);
}

/* ── Inner two-column layout ─────────────────────────────── */
.project-section__inner {
  position:    relative;
  z-index:     3;
  display:     flex;
  gap:         48px;
  align-items: stretch;
  width:       100%;
}

/* ── Left column: text + CTA ─────────────────────────────── */
.project-section__data {
  display:         flex;
  flex-direction:  column;
  gap:             24px;
  flex-shrink:     0;
  width:           460px;
  padding-bottom:  80px;
}

.project-section__text-block {
  display:        flex;
  flex-direction: column;
  gap:            24px;
}

.project-section__heading-row {
  display:     flex;
  gap:         24px;
  align-items: center;
}

.project-section__icon {
  flex-shrink: 0;
  width:       66px;
  height:      80px;
}
.project-section__icon img {
  width:      100%;
  height:     100%;
  display:    block;
  object-fit: contain;
}

.project-section__headings {
  display:        flex;
  flex-direction: column;
}

.project-section__title {
  font-family:    var(--font-headings);
  font-size:      72px;
  font-weight:    600;
  letter-spacing: -2.16px;
  line-height:    72px;
  color:          #292929;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.project-section__meta {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.project-section__desc {
  font-family: var(--font-text);
  font-size:   16px;
  font-weight: 500;
  line-height: 24px;
  color:       #666;
}

.project-section__categories {
  display:     flex;
  flex-wrap:   nowrap;
  overflow:    hidden;
  gap:         10px;
  font-family: var(--font-text);
  font-size:   16px;
  font-weight: 500;
  line-height: 24px;
  color:       #468082;
}

.project-section__role {
  font-family: var(--font-text);
  font-size:   16px;
  font-weight: 700;
  line-height: 24px;
  color:       #666;
}

.project-section__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          44px;
  padding:         0 24px;
  width:           fit-content;
  background:      #292929;
  border:          1px solid #000;
  border-radius:   6px;
  font-family:     var(--font-text);
  font-size:       16px;
  font-weight:     600;
  line-height:     24px;
  color:           #ededed;
  text-decoration: none;
  cursor:          pointer;
  transition:      opacity 0.2s ease;
}
.project-section__btn:hover { opacity: 0.78; }

/* ── Right column: mockup image, bottom-anchored ──────────── */
.project-section__mockup {
  flex:            1;
  min-width:       0;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
}

.project-section__mockup-img {
  display:        block;
  max-height:     640px;
  width:          auto;
  max-width:      100%;
  pointer-events: none;
}

/* ── Tablet ≤940px: stack vertically ────────────────────── */
@media (max-width: 940px) {
  .hero__body   { padding-left: 40px; padding-right: 40px; }
  .hero__footer { padding-left: 40px; font-size: 16px; }
  .hero__left   { width: 100%; max-width: 400px; }
  .hero__photo-wrap { width: 500px; opacity: 0.4; }
  .about__grid  { margin-left: 40px; width: calc(100% - 40px - 40px); }
  .about__content-row { flex-direction: column; gap: 48px; }
  .ai-widget    { width: 100%; }

  .project-section {
    padding: 48px 40px 0;
  }
  .project-section__inner {
    flex-direction: column;
    gap:            32px;
  }
  .project-section__data {
    width:          100%;
    padding-bottom: 0;
    gap:            32px;
  }
  .project-section__title {
    font-size:      40px;
    line-height:    48px;
    letter-spacing: 0;
  }
  .project-section__icon        { width: 41px; height: 49px; }
  .project-section__heading-row { gap: 16px; }
  .project-section__mockup {
    width:           100%;
    justify-content: center;
  }
  .project-section__mockup-img {
    max-height: 480px;
    width:      auto;
    max-width:  100%;
  }
}

/* ── Phone ≤640px: tighter padding ──────────────────────── */
@media (max-width: 640px) {
  /* Pull hero up to cancel .main's padding-top so the gradient fills to the very top */
  .hero         { margin-top: -88px; }
  .hero__body   { padding: 0 20px; padding-top: 104px; /* 88px nav area + 16px gap */ }
  .hero__footer { padding: 20px; font-size: 14px; }
  .hero__photo-wrap { display: none; }
  .logos { padding: 20px; gap: 24px; flex-wrap: wrap; }
  .about__grid  { width: 95%; margin: 0 auto; gap: 60px; }
  .about__title { font-size: 32px; line-height: 40px; }
  .about__top-block { gap: 32px; }
  .about__content-row { gap: 32px; }
  .ai-widget    { width: 100%; }

  .project-section {
    padding: 32px 24px 0;
  }
  .project-section__categories,
  .project-section__desc,
  .project-section__role {
    font-size: 14px;
  }
  .project-section__mockup-img {
    max-height: none;
    width:      100%;
    height:     auto;
  }
}


/* =============================================================
   North Polar — modifier on top of project-section
   ============================================================= */

.project-section--northpolar {
  background: #00030a;
}

.project-section--northpolar .project-section__icon      { width: 71px; height: 71px; }
.project-section--northpolar .project-section__title     { color: #ededed; }
.project-section--northpolar .project-section__categories{ color: #02e6ff; }
.project-section--northpolar .project-section__desc      { color: #eaeaea; }
.project-section--northpolar .project-section__role      { color: #fafafa; }

.project-section--northpolar .project-section__btn {
  background: linear-gradient(90deg, #cccbf6 0%, #ededed 23.5%, #ededed 58.6%, #cccbf6 100%);
  border:     1px solid #2e2e2e;
  color:      #0e006e;
}
.project-section--northpolar .project-section__btn:hover { opacity: 0.85; }

.project-section--northpolar .project-section__glow--tl {
  width:      969px;
  height:     678px;
  left:       -273px;
  top:        -247px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
                rgba(0, 80, 230, 0.40) 0%, transparent 70%);
}
.project-section--northpolar .project-section__glow--br {
  width:      882px;
  height:     602px;
  left:       662px;
  top:        483px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
                rgba(0, 60, 200, 0.22) 0%, transparent 70%);
}


/* =============================================================
   Beloo — modifier on top of project-section
   ============================================================= */

.project-section--beloo {
  background: radial-gradient(ellipse at 65% 55%,
                #fe913c 0%,
                #fe6b36 35%,
                #ff4630 65%,
                #ff282b 90%);
}

.project-section--beloo .project-section__title      { color: #010417; }
.project-section--beloo .project-section__categories { color: #2d0f00; font-weight: 700; }
.project-section--beloo .project-section__desc       { color: #010417; }
.project-section--beloo .project-section__role       { color: #010417; }

.project-section--beloo .project-section__btn {
  background: #ffc49c;
  border:     none;
  color:      #010417;
}
.project-section--beloo .project-section__btn:hover { opacity: 0.85; }