/* ============================================================
   Deen First Tech — Home
   Near-black, warm ivory type, a single metal accent.
   ============================================================ */

:root {
  --bg: #070708;
  --surface: #0d0d10;
  --surface-2: #121216;
  --line: rgba(255, 246, 228, 0.09);
  --line-strong: rgba(255, 246, 228, 0.16);
  --ink: #f4efe6;
  --ink-dim: rgba(244, 239, 230, 0.68);
  --ink-faint: rgba(244, 239, 230, 0.44);
  --accent: #e2b866;           /* updated live to match the hero finish */
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1160px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }

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

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
}

h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.005em; }

.starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

.starfield-home { opacity: 0.75; }

main, .site-footer { position: relative; z-index: 1; }

/* ---------------- Shooting stars (shooting-stars.js) ---------------- */

.sky-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.sky-fixed { position: fixed; z-index: 0; }

.hero .sky-layer { z-index: 1; }

/* the bright end is the head: it sits on the start point and the tail
   trails behind, whichever way --rot points it */
.shooting-star {
  position: absolute;
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), transparent);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
  opacity: 0;
  transform-origin: 0 50%;
  transform: rotate(var(--rot, 148deg));
}

.shooting-star.fly { animation: shoot 1.1s var(--ease) forwards; }

@keyframes shoot {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--rot, 148deg)); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, -42vw), var(--dy, 26vh)) rotate(var(--rot, 148deg)); }
}

/* ---------------- Buttons ---------------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s, color 0.3s;
}

.pill:hover { transform: translateY(-1px); }
.pill:active { transform: translateY(0); }

.pill-light { background: var(--ink); color: #0a0a0b; }
.pill-light:hover { background: #fff; }

.pill-ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.pill-ghost:hover { border-color: rgba(255, 246, 228, 0.34); }

.pill-sm { height: 36px; padding: 0 16px; font-size: 0.84rem; }
.pill-lg { height: 56px; padding: 0 30px; font-size: 1.02rem; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.pill:focus-visible { border-radius: 999px; }

/* ---------------- Header ---------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
  padding: 0 var(--gutter);
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(7, 7, 8, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
.brand-mark { width: 28px; height: 28px; border-radius: 7px; }

.site-nav { display: flex; gap: 32px; margin-left: auto; margin-right: 8px; }
.site-nav a { font-size: 0.9rem; color: var(--ink-dim); transition: color 0.25s; }
.site-nav a:hover { color: var(--ink); }

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 104px var(--gutter) 96px;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}

.hero::after {
  /* fade the hero's black into the page */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
  z-index: 1;
}

.hero-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-light.is-fallback {
  background: radial-gradient(55% 45% at 50% 50%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
}

.hero-card {
  position: relative;
  z-index: 2;
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(32px, 5.5vw, 72px);
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 40%),
    #09090b;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 40px 120px -40px rgba(0, 0, 0, 0.9);
  cursor: default;
  --mx: 50%;
  --my: -40%;
}

/* a rim of light on the card's border that follows the cursor */
.hero-card::before,
.hero-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--spot, 0);
  transition: opacity 0.5s var(--ease);
}

.hero-card::before {
  padding: 1px;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 85%, white), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.hero-card::after {
  background: radial-gradient(520px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
}

.hero-card > * { position: relative; z-index: 1; }

/* The emblem as a layered tilt, like the app icons: the ringed medallion
   as a tile, the polished gold emblem floating in front of it, and a shine.
   home.js's tilt loop sets --rx/--ry/--sx/--sy/--float on .hero-mark. */
.hero-mark {
  --lift: 40px;
  width: clamp(150px, 20vw, 240px);
  aspect-ratio: 1;
  perspective: 700px;
}

.mark-tilt {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--float, 0px));
}

.mark-tile {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 210deg, rgba(255,255,255,0.5), rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.35) 55%, rgba(255,255,255,0.05) 80%, rgba(255,255,255,0.5));
  box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.75);
}

.mark-tile::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #0d1524, #060c17 70%);
}

/* the emblem floats in front of the medallion, so tilting shows real depth */
.mark-fg {
  position: absolute;
  inset: 6px;
  transform: translateZ(var(--lift)) scale(0.8);
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

/* polished gold in the emblem's shape; the highlight slides with the tilt */
/* another page can swap the artwork with --mark-mask (a root-relative url),
   --mark-scale and --mark-origin */
.mark-emblem {
  position: absolute;
  inset: 0;
  transform: scale(var(--mark-scale, 1.18));         /* same framing as the original icon */
  transform-origin: var(--mark-origin, 47.2% 50%);  /* the arch's centre line */
  -webkit-mask: var(--mark-mask, url("icons/brand-mask.webp")) center / 100% 100% no-repeat;
  mask: var(--mark-mask, url("icons/brand-mask.webp")) center / 100% 100% no-repeat;
  background:
    linear-gradient(105deg,
      #6b4a14 0%, #a77a2a 14%, #e0b75c 26%, #fbe7a6 34%, #fffaf0 38%,
      #f3d27f 43%, #c8963d 55%, #f0cd78 66%, #fff1c4 70%, #d9ab52 76%,
      #8e6420 90%, #5c3f10 100%)
    calc(100% - var(--sx, 50%)) 50% / 260% 100% no-repeat;
}

.mark-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at var(--sx, 30%) var(--sy, 20%), rgba(255, 255, 255, 0.45), transparent 55%);
  mix-blend-mode: overlay;
  transform: translateZ(1px);
  opacity: 0.5;
  pointer-events: none;
}

.hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.4rem);
  margin-bottom: 22px;
}

.lede {
  max-width: 34em;
  color: var(--ink-dim);
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  margin-bottom: 32px;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.finish-hint {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.finish-hint b { color: var(--ink-dim); font-weight: 500; }
.finish-sub { opacity: 0.7; }

.finish-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  transition: background 0.9s var(--ease), box-shadow 0.9s var(--ease);
}

/* ---------------- Strip ---------------- */

.strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 22px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 36px var(--gutter) 24px;
  color: var(--ink-faint);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

.strip .sep { color: var(--accent); font-size: 0.6rem; opacity: 0.8; transition: color 0.9s; }

/* ---------------- Sections ---------------- */

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(88px, 12vw, 150px) var(--gutter) 0;
}

.section-head { max-width: 680px; margin-bottom: 56px; }

.section h2,
.eclipse-title,
.contact h2 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
}

.section-sub { margin-top: 18px; color: var(--ink-dim); font-size: 1.05rem; max-width: 34em; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}

.service {
  background: var(--surface);
  padding: 32px 28px 36px;
  transition: background 0.4s;
}

.service:hover { background: var(--surface-2); }

.service-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 44px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.9s var(--ease);
}

.service { position: relative; display: flex; flex-direction: column; }

/* the whole card links to its section; a page link can sit on top of it */
.service-cover { position: absolute; inset: 0; z-index: 1; }
.service-cover:focus-visible { outline-offset: -3px; border-radius: 0; }

.service-page {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 22px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--accent);
  transition: color 0.9s;
}

.service-page span { display: inline-block; transition: transform 0.3s var(--ease); }
.service-page:hover span { transform: translateX(3px); }

.service-more {
  position: absolute;
  right: 26px;
  top: 32px;
  color: var(--ink-faint);
  transition: transform 0.4s var(--ease), color 0.3s;
}

.service:hover .service-more { color: var(--accent); transform: translateX(4px); }

.service h3 { margin-bottom: 10px; }
.service p { color: var(--ink-dim); font-size: 0.93rem; }

.solutions {
  margin-top: 64px;
  display: grid;
  gap: 18px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.solutions-label { color: var(--ink-faint); font-size: 0.88rem; }

.solutions ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.solutions li {
  text-align: center;
  white-space: nowrap;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--ink-dim);
}

/* ---------------- Work ---------------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.work {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: start;
  gap: 22px;
  padding: 28px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.35s, background 0.35s, transform 0.5s var(--ease);
}

a.work:hover { border-color: var(--line-strong); background: var(--surface-2); transform: translateY(-2px); }

.work img { width: 64px; height: 64px; border-radius: 15px; }
.work h3 { margin-bottom: 6px; }
.work p { color: var(--ink-dim); font-size: 0.93rem; }

.work-meta {
  font-size: 0.8rem;
  color: var(--ink-faint);
  white-space: nowrap;
  padding-top: 2px;
}

.work-soon { color: var(--accent); opacity: 0.8; transition: color 0.9s; }

/* Apps: a stage on top of each card for its 3D icon, glowing in the app's colour */
.app-grid { grid-template-columns: repeat(4, 1fr); }

.work.app-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
  transition: border-color 0.35s, background 0.35s, transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

/* a.app-card too, so the link cards' plain hover border doesn't win over the colour */
.app-card:hover,
a.app-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--app) 65%, transparent);
  box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--app) 60%, transparent);
}

.app-stage {
  position: relative;
  height: 210px;
  overflow: hidden;
  background:
    radial-gradient(48% 40% at 50% 92%, rgba(0, 0, 0, 0.55), transparent 70%),
    radial-gradient(55% 55% at 50% 52%, color-mix(in srgb, var(--app) 30%, transparent), transparent 72%);
  border-bottom: 1px solid var(--line);
  transition: background 0.5s;
}

.app-stage::after {
  /* a soft spotlight that brightens on hover */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 45% at 50% 48%, color-mix(in srgb, var(--app) 35%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.app-card:hover .app-stage::after { opacity: 1; }

/* Layered tilt: the icon's background as a tile, its artwork lifted off it,
   and a shine. JS sets --rx/--ry (tilt) and --sx/--sy (shine position). */
.tilt-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 700px;
  z-index: 1;
  opacity: 0;
  transform: translateY(24px) scale(0.8);
  transition: opacity 0.8s var(--ease), transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-card.is-in .tilt-wrap { opacity: 1; transform: none; }

.tilt {
  position: relative;
  width: 136px;
  height: 136px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--float, 0px));
}

.tilt-tile {
  position: absolute;
  inset: 0;
  border-radius: 31px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.12)),
    var(--tile);
  box-shadow:
    0 30px 40px -20px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* the artwork floats in front of the tile, so tilting shows real depth */
.app-card .tilt-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  transform: translateZ(42px) scale(0.92);
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: 31px;
  background: radial-gradient(circle at var(--sx, 30%) var(--sy, 20%), rgba(255, 255, 255, 0.45), transparent 55%);
  mix-blend-mode: overlay;
  transform: translateZ(1px);
  opacity: 0.35;
  transition: opacity 0.4s;
  pointer-events: none;
}

.app-card:hover .tilt-shine { opacity: 0.9; }


.app-body { padding: 20px 22px 24px; }

.app-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.app-card .app-title img { width: 28px; height: 28px; border-radius: 7px; }
.app-title { flex-wrap: wrap; row-gap: 4px; }
.app-title h3 { margin: 0; white-space: nowrap; }
.app-title .work-meta { margin-left: auto; padding-top: 0; }
.app-body p { color: var(--ink-dim); font-size: 0.9rem; }


.work-group {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  scroll-margin-top: 96px;
}

.work-group h3 { font-size: 1.05rem; font-weight: 500; }

/* the way through to each full page: a real button, tinted gold */
.work-link {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:
    0 0 14px -2px color-mix(in srgb, var(--accent) 45%, transparent),
    inset 0 0 10px -4px color-mix(in srgb, var(--accent) 50%, transparent);
  animation: link-glow 4s ease-in-out infinite;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}

@keyframes link-glow {
  0%, 100% { box-shadow: 0 0 10px -3px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 0 10px -4px color-mix(in srgb, var(--accent) 40%, transparent); }
  50%      { box-shadow: 0 0 22px -2px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 0 12px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
}

@media (prefers-reduced-motion: reduce) { .work-link { animation: none; } }

.work-link span { color: var(--accent); transition: transform 0.3s var(--ease); }
.work-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.work-link:hover span { transform: translateX(3px); }

.work-group ~ .work-group { margin-top: 56px; }

/* ---------------- AI ---------------- */

.ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ai-card {
  padding: 30px 28px 28px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.ai-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--accent);
  margin-bottom: 28px;
  transition: color 0.9s;
}

.ai-card h3 { margin-bottom: 10px; }
.ai-card p { color: var(--ink-dim); font-size: 0.93rem; margin-bottom: 24px; }

.tool-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.tool-list li {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.8rem;
  color: var(--ink-dim);
}

.ai-note { margin-top: 24px; color: var(--ink-faint); font-size: 0.86rem; }

/* Masjid Fikra: a featured project under the AI cards */
.feature + .ai-grid { margin-top: 16px; }

.feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 28px clamp(24px, 4vw, 56px);
  padding: 28px clamp(24px, 4vw, 48px) 28px 28px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.35s, background 0.35s;
}

.feature:hover { border-color: var(--line-strong); background: var(--surface-2); }

.feature .site-frame {
  margin: 0;
  border-radius: 14px;
  border-bottom: 1px solid var(--line);
}

.feature:hover .site-frame img { transform: scale(1.025); }

/* the two phone apps, across the bottom of the card */
.feature-apps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px clamp(24px, 4vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.feature-app { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; }

/* the Fikra apps get the same layered tilt as the app cards, at icon size */
.fa-icon { perspective: 400px; }
.fa-icon .tilt { width: 64px; height: 64px; }
.fa-icon .tilt-tile,
.fa-icon .tilt-shine { border-radius: 15px; }
.fa-icon .tilt-tile { box-shadow: 0 14px 18px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.16); }

.feature-app .tilt-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  transform: translateZ(18px) scale(0.92);
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.feature-app:hover .tilt-shine { opacity: 0.9; }

/* the Fikra screenshot floats and leans toward the cursor */
.feature-shot { perspective: 1100px; }

.feature-shot .site-frame {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--float, 0px));
  transition: box-shadow 0.5s var(--ease);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

.feature-shot:hover .site-frame {
  box-shadow:
    0 40px 70px -30px rgba(0, 0, 0, 0.85),
    0 0 40px -10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.feature-app h4 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.feature-app h4 span { margin-left: 8px; font-size: 0.78rem; font-weight: 400; color: var(--ink-faint); }
.feature-app p { color: var(--ink-dim); font-size: 0.9rem; }

.feature-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.feature-title h3 { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.1; }

.feature-role {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  font-size: 0.76rem;
  transition: color 0.9s, border-color 0.9s;
}

.feature-info p { color: var(--ink-dim); font-size: 0.93rem; }
.feature-info p + p { margin-top: 12px; }

.feature-facts { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0 20px; }
.feature-facts li { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.feature-facts b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--accent); transition: color 0.9s; }
.feature-facts span { color: var(--ink-faint); font-size: 0.8rem; line-height: 1.4; }

/* ---------------- AWS ---------------- */

.aws {
  margin-top: 72px;
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  padding: clamp(28px, 4vw, 48px);
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  scroll-margin-top: 96px;
}

.aws-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  font-size: 0.78rem;
  margin-bottom: 20px;
  transition: color 0.9s, border-color 0.9s;
}

.aws-head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.1; margin-bottom: 14px; }
.aws-head { max-width: 640px; }

.aws-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

/* the constellation: lines draw in, then the nodes light up, then pulses travel */
.aws-net { width: 100%; height: auto; overflow: visible; }

.net-lines path {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 45%, transparent);
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease) 0.2s, stroke 0.9s;
}

.net-lines .net-dashed { stroke-dasharray: 0.03 0.03; stroke-dashoffset: 0; opacity: 0; transition: opacity 1s 1.4s; }

.net-nodes g {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.6);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(0.5s + var(--i) * 0.15s);
}

.net-ring { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: color-mix(in srgb, var(--accent) 50%, transparent); stroke-width: 1; }
.net-dot { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); transition: fill 0.9s; }
.net-nodes text { fill: var(--ink-faint); font-family: var(--sans); font-size: 11px; text-anchor: middle; }

.net-pulses circle {
  fill: #fff6e2;
  filter: drop-shadow(0 0 5px var(--accent));
  opacity: 0;
  transition: opacity 0.8s 2s;
}

.aws.is-in .net-lines path { stroke-dashoffset: 0; }
.aws.is-in .net-lines .net-dashed { opacity: 0.6; }
.aws.is-in .net-nodes g { opacity: 1; transform: none; }
.aws.is-in .net-pulses circle { opacity: 1; }

.net-dot { animation: node-breathe 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.5s); }
@keyframes node-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

/* big numbers from the AWS work, counting up as they come into view */
.aws-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.aws-stats > div {
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.aws-stats b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 8px;
  transition: color 0.9s;
  font-variant-numeric: tabular-nums;
}

.aws-stats span { color: var(--ink-dim); font-size: 0.9rem; }

/* ---------------- Staggered reveals ----------------
   Children of [data-stagger] rise in one after another once their section is in view. */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms + 150ms);
}

.is-in [data-stagger] > *,
[data-stagger].is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-stagger] > *, .net-nodes g, .net-lines path, .net-pulses circle { opacity: 1; transform: none; transition: none; stroke-dashoffset: 0; }
  .net-dot { animation: none; }
}
.aws-head p { color: var(--ink-dim); }

.aws-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.aws-label { color: var(--ink-faint); font-size: 0.82rem; letter-spacing: 0.04em; margin-bottom: 18px; }

.aws-list { list-style: none; display: grid; gap: 18px; align-content: start; }
.aws-list li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.aws-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.aws-list b { font-weight: 500; }
.aws-list span { color: var(--ink-dim); font-size: 0.93rem; }

#ai, #about { scroll-margin-top: 40px; }

/* Websites: screenshots in a quiet browser frame */

/* a marquee: the cards drift right to left across the full width of the page,
   on a loop (home.js clones the set once so the seam never shows). It's still a
   native scroller, so a swipe or trackpad moves it by hand. The padding leaves
   room for the hover lift and the glow under a card (it reaches ~56px down),
   which the scroller would otherwise clip; the negative margin gives it back. */
.site-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(360px, 30vw, 470px);
  gap: 18px;
  width: 100vw;
  margin: -8px 0 -88px calc(50% - 50vw);
  padding: 8px var(--gutter) 88px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* the cards fade in and out at the page's edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.site-grid::-webkit-scrollbar { display: none; }

/* only the cards take the pointer: the padding above and below (and the gaps)
   let clicks and hovers through to whatever is underneath, like the Apps
   button the bottom padding overlaps. Wheel and swipe over a card still
   scroll the track, and its hover pause still hears the cards. */
.site-grid { pointer-events: none; }
.site-grid > .site { pointer-events: auto; }

/* while the mouse drags the cards along (home.js), nothing lifts or opens */
.site-grid.is-dragging > .site { cursor: grabbing; }
.site-grid.is-dragging { user-select: none; -webkit-user-select: none; }

.site {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.35s, background 0.35s, transform 0.5s var(--ease);
}

/* outlined in the site's own colour on hover, like the app cards */
.site:hover {
  border-color: color-mix(in srgb, var(--site, var(--ink)) 65%, transparent);
  background: var(--surface-2);
  box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--site, var(--ink)) 60%, transparent);
  transform: translateY(-2px);
}

.site-frame {
  margin: 14px 14px 0;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: #000;
}

.site-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: #16161a;
  border-bottom: 1px solid var(--line);
}

.site-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }

.site-bar span {
  margin: 0 auto;
  padding-right: 34px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.site-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 1.2s var(--ease);
}

.site:hover .site-frame img { transform: scale(1.025); }

.site-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 28px 26px;
  border-top: 1px solid var(--line);
}

/* three to a row: the domain sits under the description */
.site-grid .site-info { flex-direction: column; gap: 10px; padding: 20px 22px 24px; }

.site-info h3 { margin-bottom: 6px; }
.site-info p { color: var(--ink-dim); font-size: 0.93rem; }

.site { position: relative; }
.site-frame { position: relative; }

/* MCC: a small V of geese crosses the screenshot now and then.
   The sprite is a 10 × 10 sheet of wingbeat frames. */
.flock {
  position: absolute;
  left: 0;
  top: 34%;
  width: 30%;
  aspect-ratio: 1.3;
  pointer-events: none;
  animation: flock-cross 11s linear infinite;
  animation-delay: -3s;
}

@keyframes flock-cross {
  0%   { transform: translate(-110%, 10%); }
  62%  { transform: translate(340%, -28%); }
  100% { transform: translate(340%, -28%); }
}

.goose {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  background: url("work/goose-sprite.webp") 0 0 / 1000% 1000% no-repeat;
  animation: goose-x 0.5s steps(10) infinite, goose-y 5s steps(10) infinite, goose-lift 0.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.goose-1 { left: 52%; top: 0;   transform: scale(0.8); }
.goose-2 { left: 24%; top: 22%; transform: scale(0.9); animation-delay: -0.17s, -1.7s, -0.2s; }
.goose-3 { left: 0;   top: 48%; transform: scale(1);   animation-delay: -0.33s, -3.3s, -0.35s; }

@keyframes goose-x { to { background-position-x: 111.111%; } }
@keyframes goose-y { to { background-position-y: 111.111%; } }
@keyframes goose-lift { from { translate: 0 2%; } to { translate: 0 -5%; } }

/* MCC: a goose paces at the card's corner, where ISWA has its minaret.
   The sprite is 15 × 5 frames of one walk cycle. */
.goose-walker {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 22px;
  width: 92px;
  height: 92px;
  pointer-events: none;
  animation: walker-path 9s ease-in-out infinite;
}

.goose-walker span {
  position: absolute;
  inset: 0;
  background: url("work/goose-walk.webp") 0 0 / 1500% 500% no-repeat;
  animation: walk-x 1s steps(15) infinite, walk-y 5s steps(5) infinite, walker-face 9s steps(1) infinite;
  /* a dark goose on a dark card: a cream outline (the minaret's paper colour) keeps it readable */
  filter:
    drop-shadow(1px 0 0 #f4ecdb) drop-shadow(-1px 0 0 #f4ecdb)
    drop-shadow(0 1px 0 #f4ecdb) drop-shadow(0 -1px 0 #f4ecdb)
    drop-shadow(0 0 10px rgba(244, 236, 219, 0.25));
}

@keyframes walk-x { to { background-position-x: 107.1429%; } }
@keyframes walk-y { to { background-position-y: 125%; } }

/* a few steps left, turn, a few steps back, turn */
@keyframes walker-path {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-34px); }
}
@keyframes walker-face {
  0%   { transform: scaleX(-1); }
  50%  { transform: scaleX(1); }
}

.site-mcc .site-info { padding-right: 110px; }

/* ISWA: the minaret stands at the card's corner, over the screenshot */
.site-minaret {
  position: absolute;
  z-index: 2;
  right: 26px;
  bottom: 24px;
  width: 120px;
  height: 470px;
  transform: scale(0.4);
  transform-origin: bottom right;
  pointer-events: none;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}

.site-iswa .site-info,
.site-isb .site-info { padding-right: 96px; }

.site-minaret-isb { width: 160px; height: 560px; transform: scale(0.34); }

/* Smash Akhs: the truck drives across the screenshot now and then */
.smash-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3%;
  pointer-events: none;
}

.site-frame .smash-truck {
  width: 26%;
  height: auto;
  aspect-ratio: auto;
  object-fit: fill;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
  animation: truck-drive 10s linear infinite, truck-bob 0.36s ease-in-out infinite alternate;
  animation-delay: -1s, 0s;
}

@keyframes truck-drive {
  0%   { transform: translateX(-105%); }
  55%  { transform: translateX(400%); }
  100% { transform: translateX(400%); }
}

@keyframes truck-bob { from { translate: 0 0; } to { translate: 0 -2px; } }

/* and its round badge turns at the card's corner, faster while hovered */
.smash-badge {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 22px;
  width: 104px;
  height: 104px;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
}

.smash-badge img {
  width: 100%;
  height: 100%;
  animation: badge-spin 18s linear infinite;
}

@keyframes badge-spin { to { transform: rotate(360deg); } }

.site-smash .site-info { padding-right: 126px; }

/* Legends: the neon sign from their counter sits at the card's corner. The
   unlit tubes stay put; the lit layer drops out every three seconds and
   catches again like a tube starting up (two false starts, a stutter, on). */
.legends-neon {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 26px;
  width: 124px;
  aspect-ratio: 520 / 353;
  pointer-events: none;
}

.legends-neon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.legends-neon-lit {
  filter: drop-shadow(0 0 10px rgba(255, 60, 90, 0.45));
  animation: neon-catch 3s linear infinite;
  animation-delay: 0.6s;
}

.site-legends:hover .legends-neon-lit { filter: drop-shadow(0 0 16px rgba(255, 70, 100, 0.7)); }

@keyframes neon-catch {
  0%, 52%  { opacity: 1; }
  54%      { opacity: 0.05; }
  60%      { opacity: 0.05; }
  62%      { opacity: 0.9; }
  65%      { opacity: 0.1; }
  70%      { opacity: 0.1; }
  72%      { opacity: 1; }
  75%      { opacity: 0.4; }
  78%      { opacity: 1; }
  100%     { opacity: 1; }
}

.site-legends .site-info { padding-right: 170px; }

/* First Hijrah: the mark at the card's corner, still; the motion is the
   light in the screenshot below */
.fhf-mark {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 28px;
  width: 128px;
  aspect-ratio: 708 / 374;
  pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5));
}

.fhf-mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fhf-sun { filter: drop-shadow(0 0 8px rgba(240, 180, 76, 0.45)); }

/* ...and over the screenshot, the site's own night view of the hall sits on
   top. A soft-edged opening grows out of the oculus (54.2% across, 11.7% down
   the 16:10 shot) until the whole room shows the day view beneath, holds,
   then closes back into the oculus. The medallion glows with the day. */
@property --fhf-r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.fhf-light {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  pointer-events: none;
  --ox: 54.2%;
  --oy: 11.7%;
}

.compare .fhf-light { top: 0; aspect-ratio: auto; }

.fhf-light .fhf-night {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  /* the ellipse's height is 1.6 × its width in % of a 16:10 box, so it opens as a circle */
  -webkit-mask-image: radial-gradient(var(--fhf-r) calc(var(--fhf-r) * 1.6) at var(--ox) var(--oy), transparent 55%, #000 100%);
  mask-image: radial-gradient(var(--fhf-r) calc(var(--fhf-r) * 1.6) at var(--ox) var(--oy), transparent 55%, #000 100%);
  animation: fhf-day 10s ease-in-out infinite;
}

.fhf-light .fhf-oculus {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  width: 18%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 250, 232, 0.95), rgba(255, 224, 170, 0.35) 38%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: fhf-oculus 10s ease-in-out infinite;
}

@keyframes fhf-day {
  0%, 18%  { --fhf-r: 0%; }
  50%, 78% { --fhf-r: 150%; }
  100%     { --fhf-r: 0%; }
}

/* the oculus flares as the light comes in, and again as it draws back */
@keyframes fhf-oculus {
  0%, 14%  { opacity: 0; transform: scale(0.5); }
  24%      { opacity: 1; transform: scale(1.15); }
  45%, 80% { opacity: 0.25; transform: scale(1); }
  94%      { opacity: 0.7; transform: scale(0.8); }
  100%     { opacity: 0; transform: scale(0.5); }
}

.fhf-mark .fhf-sun { animation: fhf-medallion 10s ease-in-out infinite; }

@keyframes fhf-medallion {
  0%, 18%  { filter: brightness(0.7) drop-shadow(0 0 0 rgba(240, 180, 76, 0)); }
  50%, 78% { filter: brightness(1.08) drop-shadow(0 0 12px rgba(240, 180, 76, 0.75)); }
  100%     { filter: brightness(0.7) drop-shadow(0 0 0 rgba(240, 180, 76, 0)); }
}

.site-fhf .site-info { padding-right: 160px; }

/* ISG: the arch from their logo, cream with the gold line inside, traced from
   its left foot up over the round head and down, as in the site's loader.
   It draws in, stands for three seconds, wipes out the same way (the line's
   tail following its head), and draws straight back in. */
.isg-arch {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 26px;
  width: 104px;
  aspect-ratio: 514 / 464;
  overflow: visible;
  pointer-events: none;
}

.isg-arch path {
  fill: none;
  stroke-dasharray: 1;
  animation: isg-trace 5.2s infinite;
}

.isg-arch-outer { stroke: #faf6ec; stroke-width: 14; }
.isg-arch-inner { stroke: #c9a14a; stroke-width: 6; animation-name: isg-trace-inner; }

.site-isg:hover .isg-arch-inner { filter: drop-shadow(0 0 6px rgba(201, 161, 74, 0.8)); }

@keyframes isg-trace {
  0%       { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.3, 1); }
  19%, 77% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.55, 0, 0.3, 1); }
  94%, 100% { stroke-dashoffset: -1; }
}

@keyframes isg-trace-inner {
  0%, 4%   { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.3, 1); }
  21%, 80% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.55, 0, 0.3, 1); }
  97%, 100% { stroke-dashoffset: -1; }
}

.site-isg .site-info { padding-right: 150px; }

@media (prefers-reduced-motion: reduce) {
  .fhf-light { display: none; }
  .fhf-mark .fhf-sun { animation: none; }
  .isg-arch path { animation: none; stroke-dashoffset: 0; }
  .flock, .goose, .goose-walker, .goose-walker span { animation: none; }
  .flock { transform: translate(180%, -10%); }
  .smash-truck, .smash-badge img, .legends-neon-lit { animation: none; }
  .site-frame .smash-truck { transform: translateX(260%); }
}

/* Black holes left by clicks */

.holes {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  pointer-events: none;
}

.holes[hidden] { display: none; }


/* ---------------- Eclipse (process) ---------------- */

.eclipse-track {
  position: relative;
  height: 340vh;
  margin-top: clamp(88px, 12vw, 150px);
}

.eclipse-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  /* the light fades out before the stage's edges, so no border shows */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}

.eclipse-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.eclipse-copy {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eclipse-copy > * { max-width: 420px; }

.eclipse-title { margin-bottom: 40px; }

.steps { list-style: none; position: relative; min-height: 190px; }

.step {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}

.step.is-active { opacity: 1; transform: none; pointer-events: auto; }

.step-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--accent);
  margin-bottom: 4px;
  transition: color 0.9s;
}

.step h3 { font-size: 1.5rem; font-weight: 500; margin-bottom: 10px; }
.step p { color: var(--ink-dim); }

.step-ticks { display: flex; gap: 8px; margin-top: 20px; }

.step-ticks i {
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
  transition: background 0.5s;
}

.step-ticks i.is-on { background: var(--accent); }

/* ---------------- About ---------------- */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 6vw, 96px);
  padding-top: 8px;
}

.about-body p { color: var(--ink-dim); font-size: 1.06rem; }
.about-body p + p { margin-top: 18px; }

/* ---------------- Contact ---------------- */

.contact {
  padding: clamp(110px, 16vw, 200px) var(--gutter);
  text-align: center;
}

.contact-inner { max-width: 640px; margin: 0 auto; }

.contact-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto 32px;
  border-radius: 18px;
  box-shadow: 0 0 60px -10px color-mix(in srgb, var(--accent) 50%, transparent);
  transition: box-shadow 0.9s;
}

.contact p { color: var(--ink-dim); margin: 18px 0 36px; font-size: 1.05rem; }

/* ---------------- Footer ---------------- */

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--gutter) 36px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.84rem;
}

.site-footer nav { display: flex; gap: 24px; }
.site-footer a:hover { color: var(--ink); }

/* ---------------- Reveal ---------------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

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

/* ---------------- Responsive ---------------- */

@media (max-width: 960px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .solutions ul { grid-template-columns: repeat(2, 1fr); }
  .solutions li { white-space: normal; border-radius: 14px; padding: 8px 12px; }
  .about-grid, .aws-cols, .aws-top { grid-template-columns: 1fr; }
  .aws-stats { grid-template-columns: 1fr; }
  .ai-grid { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; padding: 16px 16px 22px; }
  .feature-info { padding: 4px 6px 0; }
  .feature-apps { grid-template-columns: 1fr; padding: 20px 6px 0; }
  .feature-facts { grid-template-columns: 1fr; gap: 0; }
  .feature-facts li { grid-template-columns: 110px 1fr; align-items: baseline; gap: 12px; padding: 10px 0; }
  .aws-list li { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 760px) {
  .site-nav { display: none; }
  .hero { padding: 96px 20px 80px; }
  .hero-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px 32px; border-radius: 26px; }
  .hero-mark { width: 84px; --lift: 16px; }
  .mark-tile::before, .mark-fg { inset: 4px; }
  .hero h1 { font-size: 2.35rem; }
  .finish-hint { left: var(--gutter); right: auto; bottom: 24px; }
  .finish-sub { display: none; }
  .strip { gap: 10px 20px; }
  .strip .sep { display: none; }
  .work-grid { grid-template-columns: 1fr; }
  .site-grid { grid-auto-columns: 82vw; gap: 12px; -webkit-mask-image: none; mask-image: none; }
  .legends-neon { width: 96px; right: 10px; }
  .site-legends .site-info { padding-right: 116px; }
  .fhf-mark { width: 100px; right: 12px; }
  .site-fhf .site-info { padding-right: 116px; }
  .isg-arch { width: 80px; right: 14px; }
  .site-isg .site-info { padding-right: 110px; }
  .site-info { flex-direction: column; gap: 10px; padding: 18px 22px 22px; }
  .site-frame { margin: 10px 10px 0; }
  .work { grid-template-columns: 52px 1fr; padding: 22px; gap: 16px; }
  .work img { width: 52px; height: 52px; border-radius: 12px; }
  .work-meta { grid-column: 2; }

  /* sun sits up top, copy underneath */
  .eclipse-copy { justify-content: flex-end; padding-bottom: 9vh; }
  .eclipse-title { margin-bottom: 22px; }
  .steps { min-height: 176px; }
}

@media (max-width: 520px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-icon { margin-bottom: 24px; }
  .site-header .pill-sm { padding: 0 14px; }
}