/**
 * Home page only. Kept in its own file so a redesign here can never affect
 * the service pages built in Stage 2.
 */

/* ---------- Hero ----------
   A photographic hero. It is dark in BOTH colour modes by design — a picture
   cannot be re-tinted for light mode — so everything inside it sets its own
   light colours rather than following the page tokens. */
.hero--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #060a1a;
  padding-block: clamp(56px, 7vw, 104px);
}

/* The picture, anchored to the right and fading out towards the words. */
.hero__photo {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  /* On a phone the picture sits behind everything, so it is dimmed and faded
     from the top instead. */
  opacity: 0.62;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
}
@media (min-width: 1000px) {
  .hero__photo {
    width: 68%;
    opacity: 1;
    object-position: center 62%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.42) 30%, #000 56%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.42) 30%, #000 56%);
  }
}

/* A wash over the picture: deep navy on the left where the words are, and a
   touch of cyan and violet light to tie it to the rest of the site. */
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Under the masthead, so the navigation reads against any part of the picture. */
    linear-gradient(180deg, rgba(4, 7, 20, 0.88) 0%, rgba(4, 7, 20, 0.52) 9%, rgba(4, 7, 20, 0.12) 15%, transparent 20%),
    /* Across the picture, deepest where the words are. */
    linear-gradient(96deg, #060a1a 0%, rgba(6, 10, 26, 0.96) 34%, rgba(6, 10, 26, 0.6) 54%, rgba(6, 10, 26, 0.14) 76%, rgba(6, 10, 26, 0.34) 100%),
    radial-gradient(60% 70% at 8% 18%, rgba(43, 217, 240, 0.16), transparent 70%),
    radial-gradient(54% 64% at 2% 88%, rgba(154, 107, 255, 0.18), transparent 70%);
  pointer-events: none;
}
@media (max-width: 999px) {
  .hero--photo::before {
    background:
      linear-gradient(180deg, rgba(4, 7, 20, 0.9) 0%, rgba(4, 7, 20, 0.5) 12%, transparent 22%),
      linear-gradient(180deg, rgba(6, 10, 26, 0.84) 0%, rgba(6, 10, 26, 0.7) 46%, rgba(6, 10, 26, 0.9) 86%, #060a1a 100%),
      radial-gradient(70% 50% at 10% 10%, rgba(43, 217, 240, 0.16), transparent 70%),
      radial-gradient(70% 50% at 90% 90%, rgba(154, 107, 255, 0.18), transparent 70%);
  }
}

.hero__inner { position: relative; max-width: var(--wrap); }
@media (min-width: 1000px) { .hero__inner > * { max-width: 52%; } }
@media (min-width: 1400px) { .hero__inner > * { max-width: 48%; } }

/* Everything in the hero is on a dark picture, whichever mode the page is in. */
.hero--photo .eyebrow { color: #6fe3f5; }
.hero--photo h1 { color: #ffffff; margin-bottom: 22px; }
.hero--photo .lede { color: #c9d4f2; }
/* Belt and braces over a photograph: the scrim does the work, this keeps the
   text safe wherever the picture happens to be bright. */
.hero--photo .eyebrow,
.hero--photo h1,
.hero--photo .lede,
.hero__features li { text-shadow: 0 1px 14px rgba(4, 8, 22, 0.75); }
.hero--photo :focus-visible { outline-color: #6fe3f5; }

.hero h1 .grad {
  /* Electric cyan into electric blue into violet. Every stop clears 11:1
     on the navy behind it, so it reads as brightly as the white does. */
  background-image: linear-gradient(104deg, #76f0ff 0%, #93bbff 46%, #cfb4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Keep "for tomorrow." together, so the line never breaks after "for". */
.hero h1 .nowrap { white-space: nowrap; }

.hero__lede { font-size: clamp(1.04rem, 0.98rem + 0.4vw, 1.2rem); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero--photo .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.34); }
.hero--photo .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.hero--photo .btn--primary { color: #04142c; }

/* The four disciplines, with ringed icons like the reference. */
.hero__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin: clamp(30px, 3vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}
/* Four even columns on a wide screen, with a hairline above them so the row
   reads as one group rather than four loose items. */
@media (min-width: 760px) {
  .hero__features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding-top: clamp(22px, 2.4vw, 30px);
    border-top: 1px solid rgba(126, 160, 255, 0.22);
  }
}
@media (min-width: 1000px) { .hero__inner > .hero__features { max-width: 72%; } }
.hero__features li {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  color: #dbe4ff;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.28;
}
.hero__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(126, 160, 255, 0.5);
  background: rgba(10, 18, 48, 0.5);
  backdrop-filter: blur(6px);
  color: #6fe3f5;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.hero__feature-icon .icon { width: 21px; height: 21px; }
.hero__features li:nth-child(2) .hero__feature-icon { color: #8fb0ff; }
.hero__features li:nth-child(3) .hero__feature-icon { color: #bda0ff; }
.hero__features li:nth-child(4) .hero__feature-icon { color: #6fe3f5; }
.hero__features li:hover .hero__feature-icon { transform: translateY(-3px); border-color: rgba(126, 160, 255, 0.95); }

/* ---- Motion: a gentle arrival, and a slow drift on the lighting ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__inner > * { animation: hero-rise 0.75s cubic-bezier(0.22, 0.75, 0.3, 1) backwards; }
  .js .hero__inner > :nth-child(1) { animation-delay: 0.05s; }
  .js .hero__inner > :nth-child(2) { animation-delay: 0.14s; }
  .js .hero__inner > :nth-child(3) { animation-delay: 0.23s; }
  .js .hero__inner > :nth-child(4) { animation-delay: 0.32s; }
  .js .hero__inner > :nth-child(5) { animation-delay: 0.41s; }
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
  .hero--photo::before { animation: hero-breathe 14s ease-in-out infinite alternate; }
  @keyframes hero-breathe {
    from { opacity: 1; }
    to   { opacity: 0.92; }
  }
  .hero__photo { animation: hero-drift 26s ease-in-out infinite alternate; }
  @keyframes hero-drift {
    from { transform: scale(1); }
    to   { transform: scale(1.045); }
  }
}


/* ---- The masthead floats over the hero until the page is scrolled ----
   Home page only: home.css is not loaded anywhere else, so no other page is
   affected. The hero is pulled up under the header and pays the height back
   as padding, which is what lets the header sit over the picture. */
.hero--photo {
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(34px, 4vw, 68px));
}

.site-header:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header:not(.is-stuck) .nav__link,
.site-header:not(.is-stuck) .header__phone { color: #cfd9f8; }
.site-header:not(.is-stuck) .nav__link:hover,
.site-header:not(.is-stuck) .nav__link[aria-current="page"],
.site-header:not(.is-stuck) .header__phone:hover { color: #ffffff; }
.site-header:not(.is-stuck) .icon-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.32);
}
.site-header:not(.is-stuck) .icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
.site-header:not(.is-stuck) :focus-visible { outline-color: #6fe3f5; }
/* Over the dark picture the logo always needs its white lettering. */
.site-header:not(.is-stuck) .brand img.brand__light { display: none; }
.site-header:not(.is-stuck) .brand img.brand__dark  { display: block; }

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.65s ease, transform 0.65s ease; }
  .js .reveal.is-in { opacity: 1; transform: none; }
  /* Cards in a row arrive one after another rather than all at once. */
  .js .cards > .reveal:nth-child(2),  .js .whys > .reveal:nth-child(2),  .js .builds > .reveal:nth-child(2)  { transition-delay: 0.07s; }
  .js .cards > .reveal:nth-child(3),  .js .whys > .reveal:nth-child(3),  .js .builds > .reveal:nth-child(3)  { transition-delay: 0.14s; }
  .js .cards > .reveal:nth-child(4),  .js .whys > .reveal:nth-child(4),  .js .builds > .reveal:nth-child(4)  { transition-delay: 0.07s; }
  .js .cards > .reveal:nth-child(5),  .js .whys > .reveal:nth-child(5),  .js .builds > .reveal:nth-child(5)  { transition-delay: 0.14s; }
  .js .cards > .reveal:nth-child(6),  .js .whys > .reveal:nth-child(6),  .js .builds > .reveal:nth-child(6)  { transition-delay: 0.21s; }
}

/* ---------- About / intro ---------- */
.intro__grid {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: 1fr;
}
@media (min-width: 920px) { .intro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }

.intro__copy p { max-width: 54ch; }

.pillars { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 540px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pillar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.pillar:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--cyan-soft);
  border: 1px solid var(--line-strong);
  color: var(--cyan);
}
.pillar__icon .icon { width: 22px; height: 22px; }
.pillar b { display: block; color: var(--heading); margin-bottom: 5px; font-size: 1.02rem; }
.pillar p { font-size: 0.93rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .pillar:hover { transform: none; } }

/* ---------- What we build ---------- */
.builds { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .builds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .builds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .builds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.build {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 24px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}
.build:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(126, 160, 255, 0.4);
}
.build__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(43, 217, 240, 0.14);
  border: 1px solid rgba(126, 160, 255, 0.28);
  color: #6fe3f5;
}
.build__icon .icon { width: 23px; height: 23px; }
.build b { display: block; color: var(--on-ink); font-size: 1.03rem; margin-bottom: 5px; }
.build p { font-size: 0.9rem; margin: 0; color: var(--on-ink-dim); }
.build:nth-child(3n+2) .build__icon { background: rgba(77, 124, 254, 0.18); color: #8fb0ff; }
.build:nth-child(3n+3) .build__icon { background: rgba(154, 107, 255, 0.18); color: #bda0ff; }
@media (prefers-reduced-motion: reduce) { .build:hover { transform: none; } }

/* ---------- Why choose ---------- */
.whys { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 680px)  { .whys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .whys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.why {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.why:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--blue-soft);
  border: 1px solid var(--line-strong);
  color: var(--blue);
}
.why__icon .icon { width: 21px; height: 21px; }
.why:nth-child(3n+2) .why__icon { background: var(--cyan-soft);   color: var(--cyan); }
.why:nth-child(3n+3) .why__icon { background: var(--violet-soft); color: var(--violet); }
.why b { display: block; color: var(--heading); font-size: 1.05rem; margin-bottom: 6px; }
.why p { font-size: 0.94rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .why:hover { transform: none; } }

/* ---------- Technology ---------- */
.techs { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .techs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .techs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tech-group {
  height: 100%;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.tech-group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tech-group__head .icon { width: 21px; height: 21px; color: var(--cyan); flex: none; }
.tech-group h3 { font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.tech-group ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tech-group li {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--heading);
  font-size: 0.9rem;
  font-weight: 600;
}


/* ---- The masthead floats over the hero until the page is scrolled ----
   Home page only: home.css is not loaded anywhere else, so no other page is
   affected. The hero is pulled up under the header and pays the height back
   as padding, which is what lets the header sit over the picture. */
.hero--photo {
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(34px, 4vw, 68px));
}

.site-header:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header:not(.is-stuck) .nav__link,
.site-header:not(.is-stuck) .header__phone { color: #cfd9f8; }
.site-header:not(.is-stuck) .nav__link:hover,
.site-header:not(.is-stuck) .nav__link[aria-current="page"],
.site-header:not(.is-stuck) .header__phone:hover { color: #ffffff; }
.site-header:not(.is-stuck) .icon-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.32);
}
.site-header:not(.is-stuck) .icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
.site-header:not(.is-stuck) :focus-visible { outline-color: #6fe3f5; }
/* Over the dark picture the logo always needs its white lettering. */
.site-header:not(.is-stuck) .brand img.brand__light { display: none; }
.site-header:not(.is-stuck) .brand img.brand__dark  { display: block; }

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.65s ease, transform 0.65s ease; }
  .js .reveal.is-in { opacity: 1; transform: none; }
  /* Cards in a row arrive one after another rather than all at once. */
  .js .cards > .reveal:nth-child(2),  .js .whys > .reveal:nth-child(2),  .js .builds > .reveal:nth-child(2)  { transition-delay: 0.07s; }
  .js .cards > .reveal:nth-child(3),  .js .whys > .reveal:nth-child(3),  .js .builds > .reveal:nth-child(3)  { transition-delay: 0.14s; }
  .js .cards > .reveal:nth-child(4),  .js .whys > .reveal:nth-child(4),  .js .builds > .reveal:nth-child(4)  { transition-delay: 0.07s; }
  .js .cards > .reveal:nth-child(5),  .js .whys > .reveal:nth-child(5),  .js .builds > .reveal:nth-child(5)  { transition-delay: 0.14s; }
  .js .cards > .reveal:nth-child(6),  .js .whys > .reveal:nth-child(6),  .js .builds > .reveal:nth-child(6)  { transition-delay: 0.21s; }
}

/* ---------- About / intro ---------- */
.intro__grid {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: 1fr;
}
@media (min-width: 920px) { .intro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }

.intro__copy p { max-width: 54ch; }

.pillars { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 540px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pillar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.pillar:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--cyan-soft);
  border: 1px solid var(--line-strong);
  color: var(--cyan);
}
.pillar__icon .icon { width: 22px; height: 22px; }
.pillar b { display: block; color: var(--heading); margin-bottom: 5px; font-size: 1.02rem; }
.pillar p { font-size: 0.93rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .pillar:hover { transform: none; } }

/* ---------- What we build ---------- */
.builds { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .builds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .builds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .builds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.build {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 24px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}
.build:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(126, 160, 255, 0.4);
}
.build__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(43, 217, 240, 0.14);
  border: 1px solid rgba(126, 160, 255, 0.28);
  color: #6fe3f5;
}
.build__icon .icon { width: 23px; height: 23px; }
.build b { display: block; color: var(--on-ink); font-size: 1.03rem; margin-bottom: 5px; }
.build p { font-size: 0.9rem; margin: 0; color: var(--on-ink-dim); }
.build:nth-child(3n+2) .build__icon { background: rgba(77, 124, 254, 0.18); color: #8fb0ff; }
.build:nth-child(3n+3) .build__icon { background: rgba(154, 107, 255, 0.18); color: #bda0ff; }
@media (prefers-reduced-motion: reduce) { .build:hover { transform: none; } }

/* ---------- Why choose ---------- */
.whys { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 680px)  { .whys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .whys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.why {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.why:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--blue-soft);
  border: 1px solid var(--line-strong);
  color: var(--blue);
}
.why__icon .icon { width: 21px; height: 21px; }
.why:nth-child(3n+2) .why__icon { background: var(--cyan-soft);   color: var(--cyan); }
.why:nth-child(3n+3) .why__icon { background: var(--violet-soft); color: var(--violet); }
.why b { display: block; color: var(--heading); font-size: 1.05rem; margin-bottom: 6px; }
.why p { font-size: 0.94rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .why:hover { transform: none; } }

/* ---------- Technology ---------- */
.techs { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .techs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .techs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tech-group {
  height: 100%;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.tech-group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tech-group__head .icon { width: 21px; height: 21px; color: var(--cyan); flex: none; }
.tech-group h3 { font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.tech-group ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tech-group li {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--heading);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---- The hero on a phone ----
   Trimmed so the whole introduction, both buttons and the four disciplines
   fit on one screen instead of filling it and spilling over. */
@media (max-width: 639px) {
  .hero--photo { padding-block: calc(var(--header-h) + 24px) 52px; }
  .hero--photo h1 { font-size: clamp(2rem, 1.15rem + 4.2vw, 2.7rem); margin-bottom: 18px; }
  .hero__lede { font-size: 1rem; }
  .hero__cta { margin-top: 26px; gap: 10px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
    margin-top: 30px;
  }
  .hero__features li { font-size: 0.86rem; }
  .hero__feature-icon { width: 40px; height: 40px; }
  .hero__feature-icon .icon { width: 19px; height: 19px; }
}