/* =========================================================
   Hackley Tech Angels
   ---------------------------------------------------------
   FONTS: The brand fonts are BD Megalona Extra Light (titles)
   and BB Noname Pro Regular (body). Both are commercial and
   unavailable for free web use, so we're standing in close
   free lookalikes. To swap in the real fonts later, add
   @font-face rules and change the two variables below.
   ========================================================= */

:root {
  --font-display: "Playfair Display", Georgia, serif;  /* stand-in for BD Megalona Extra Light */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* stand-in for BB Noname Pro */

  /* Brand */
  --navy: #1b2a5b;
  --purple: #4a3a8c;
  --coral: #ff6b4a;
  --coral-deep: #e04f2f;   /* AA-safe coral for text on white */
  --teal: #1b8a96;
  --gold: #e0a32e;

  /* Surface */
  --ink: #1a1d2b;
  --ink-soft: #545a70;
  --white: #ffffff;
  --tint: #f6f4fb;
  --tint-warm: #fff5f2;
  --line: #e6e4ef;

  --gradient: linear-gradient(135deg, var(--navy) 0%, var(--purple) 100%);
  --nav-h: 72px;
  --radius: 18px;
  --shadow: 0 2px 4px rgba(27, 42, 91, .04), 0 12px 32px rgba(27, 42, 91, .08);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--coral-deep); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.15;
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  padding: 12px 20px;
  z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Emphasis: instructions to the reader — bold + italic, in the display font */
.emphasis {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
}

.wrap {
  width: min(1140px, calc(100% - 48px));
  margin-inline: auto;
}
.wrap--narrow { width: min(760px, calc(100% - 48px)); }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  width: min(1140px, calc(100% - 48px));
  margin-inline: auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--navy);
  flex-shrink: 0;
}
.nav__brand img { height: 38px; width: auto; }

.nav__wordmark {
  font-family: var(--font-display);
  font-size: 1.12rem;
  letter-spacing: .01em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav__links a {
  position: relative;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .95rem;
  font-weight: 500;
  padding: 6px 0;
  transition: color .2s;
}
.nav__links a:hover { color: var(--ink); }

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--coral);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .25s;
}
.nav__links a.is-active { color: var(--navy); }
.nav__links a.is-active::after { transform: scaleX(1); }

/* Contact styled as a pill — no underline indicator */
.nav__cta {
  background: var(--coral);
  color: var(--white) !important;
  padding: 9px 20px !important;
  border-radius: 999px;
  transition: background .2s, transform .2s;
}
.nav__cta:hover { background: var(--coral-deep); transform: translateY(-1px); }
.nav__cta::after { display: none; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
}
.nav__toggle span {
  display: block;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.nav__toggle span + span { margin-top: 6px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--gradient);
  color: var(--white);
  padding: clamp(72px, 12vw, 128px) 0 clamp(88px, 13vw, 140px);
  overflow: hidden;
  text-align: center;
}

/* faint circuit lattice echoing the logo */
.hero__circuits {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(circle at 18% 28%, rgba(224,163,46,.20), transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(27,138,150,.28), transparent 46%);
  background-size: 56px 56px, 56px 56px, 100% 100%, 100% 100%;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  width: min(860px, calc(100% - 48px));
  margin-inline: auto;
}

.hero__logo {
  width: clamp(120px, 18vw, 178px);
  margin: 0 auto clamp(24px, 4vw, 36px);
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .32));
}

.hero__title {
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  letter-spacing: -.015em;
  margin-bottom: 22px;
}

.hero__lede {
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  color: rgba(255, 255, 255, .86);
  max-width: 620px;
  margin: 0 auto 38px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.hero__scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 42px;
  background: rgba(255,255,255,.22);
  overflow: hidden;
}
.hero__scroll span {
  display: block;
  width: 100%;
  height: 40%;
  background: var(--coral);
  animation: trickle 2.4s ease-in-out infinite;
}
@keyframes trickle {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 999px;
  transition: transform .2s, background .2s, box-shadow .2s;
}

.btn--primary {
  background: var(--coral);
  color: var(--white);
  box-shadow: 0 8px 22px rgba(255, 107, 74, .32);
}
.btn--primary:hover {
  background: var(--coral-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 107, 74, .40);
}

.btn--ghost {
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, .48);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn--lg {
  font-size: clamp(.92rem, 2.4vw, 1.06rem);
  padding: 17px 38px;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(72px, 10vw, 116px) 0;
  scroll-margin-top: var(--nav-h);
}
.section--tint {
  background: var(--tint);
  border-block: 1px solid var(--line);
  text-align: center;
}

.section__eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin: 0 0 14px;
}
.section__eyebrow--light { color: rgba(255, 255, 255, .78); }

.section__title {
  font-size: clamp(1.85rem, 4.2vw, 2.9rem);
  letter-spacing: -.01em;
  margin-bottom: 20px;
  max-width: 20ch;
}
.section--tint .section__title,
.contact .section__title { max-width: none; }
.section__title--light { color: var(--white); }

.section__lede {
  font-size: clamp(1.02rem, 2vw, 1.16rem);
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 12px;
}
.section--tint .section__lede { margin-inline: auto; }
.section--tint .btn { margin-top: 22px; }

.section__body {
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 8px;
}

/* ---------- Project cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px;
  margin-top: 46px;
}

.card {
  --card-pad-x: 28px;
  --card-pad-y: 30px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--card-pad-y) var(--card-pad-x);
  box-shadow: var(--shadow);
  /* Clips the full-bleed screenshot to the card's rounded corners. */
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(74, 58, 140, .28);
  box-shadow: 0 4px 8px rgba(27,42,91,.05), 0 18px 44px rgba(27,42,91,.13);
}

/* Project screenshot: bleeds to the card edges by cancelling the card padding. */
.card__media {
  width: calc(100% + var(--card-pad-x) * 2);
  max-width: none;  /* overrides the global img { max-width: 100% } */
  height: auto;     /* overrides the width/height HTML attributes */
  margin: calc(var(--card-pad-y) * -1) calc(var(--card-pad-x) * -1) 22px;
  /* Matches the screenshots' native landscape ratio. `contain` guarantees the
     whole frame is shown — never cropped, never stretched — while the fixed
     ratio keeps every card's banner exactly the same height. */
  aspect-ratio: 2.31 / 1;
  object-fit: contain;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

/* Stand-in banner for cards that have no screenshot yet. */
.card__media--placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--tint) 0%, var(--tint-warm) 100%);
  color: var(--purple);
}
.card__media--placeholder svg { width: 40px; height: 40px; }

.card__title {
  font-size: 1.32rem;
  font-weight: 400;
  margin-bottom: 12px;
}

.card__text {
  color: var(--ink-soft);
  font-size: .96rem;
  margin: 0 0 18px;
  flex-grow: 1;
}
.card__text a { color: var(--coral-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.card__link {
  font-size: .93rem;
  font-weight: 600;
  color: var(--coral-deep);
  text-decoration: none;
  align-self: flex-start;
}
.card__link span { display: inline-block; transition: transform .2s; }
.card__link:hover span { transform: translateX(4px); }

/* --- "Your Project Here" --- */
.card--empty {
  align-items: center;
  text-align: center;
  background: var(--tint-warm);
  border: 2px dashed rgba(255, 107, 74, .48);
  box-shadow: none;
}
.card--empty:hover {
  border-color: var(--coral);
  border-style: solid;
  box-shadow: 0 18px 44px rgba(255, 107, 74, .18);
}

.card__silhouette {
  color: #d8cfe6;
  margin-bottom: 18px;
  transition: color .3s, transform .3s;
}
.card__silhouette svg { width: 74px; height: 86px; }
.card--empty:hover .card__silhouette {
  color: var(--coral);
  transform: translateY(-3px);
}

.card__title--empty { color: var(--navy); }
.card--empty .card__text { flex-grow: 0; max-width: 42ch; }
.card__link--empty { align-self: center; }

/* At three columns the five cards leave a hole in row two — let the invitation
   stretch across it so it reads as an open seat rather than a leftover. */
@media (min-width: 960px) {
  .card--empty {
    grid-column: span 2;
    justify-content: center;
  }
  .card--empty .card__silhouette svg { width: 88px; height: 102px; }
}

/* ---------- About tiles ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  margin-top: 42px;
}

.tile {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 22px;
}
.tile h3 {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 8px;
}
.tile p {
  margin: 0;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* ---------- Contact ---------- */
.contact {
  background: var(--gradient);
  text-align: center;
}
.contact .wrap { display: flex; flex-direction: column; align-items: center; }
.contact__lede {
  font-size: clamp(1.04rem, 2.2vw, 1.24rem);
  color: rgba(255, 255, 255, .9);
  max-width: 58ch;
  margin: 0 0 34px;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--white);
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.footer__inner img { height: 30px; width: auto; }
.footer__inner p {
  margin: 0;
  font-size: .88rem;
  color: var(--ink-soft);
}

/* ---------- Scroll reveal ----------
   Scoped to .js so content stays visible if JavaScript never runs. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav__wordmark { display: none; }
  .nav__links { gap: 22px; }
}

@media (max-width: 720px) {
  .nav__toggle { display: block; }

  .nav__links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 32px rgba(27, 42, 91, .10);
    padding: 8px 24px 20px;
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 14px 0; font-size: 1.02rem; }
  .nav__links a::after { display: none; }
  .nav__links a.is-active { color: var(--coral-deep); }

  .nav__cta {
    text-align: center;
    margin-top: 10px;
    padding: 13px 20px !important;
  }
  .nav__wordmark { display: inline; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .wrap, .wrap--narrow, .nav__inner, .hero__inner { width: calc(100% - 36px); }
  /* Set the vars, not padding directly, so .card__media stays flush. */
  .card { --card-pad-x: 22px; --card-pad-y: 26px; }
  .hero__actions .btn { width: 100%; }
  .btn--lg { padding: 16px 22px; font-size: .84rem; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}