/* ============================================================
   Deen First Tech — Websites
   Builds on ../home.css (tokens, header, buttons, footer).
   ============================================================ */

.page-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(140px, 18vw, 200px) var(--gutter) clamp(56px, 8vw, 96px);
}

.page-hero h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); margin-bottom: 22px; }
.page-hero .lede { margin-bottom: 0; }

/* the hero as a card, like the homepage, on a soft gold light instead of the live field */
.page-hero-card {
  position: relative;
  display: grid;
  justify-items: center;
}

.page-hero-card::before {
  content: "";
  position: absolute;
  inset: 12% 8% -4%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  filter: blur(40px);
  pointer-events: none;
}

.page-hero.page-hero-card h1 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); margin-bottom: 22px; }
.page-hero.page-hero-card .lede { margin-bottom: 32px; }

/* this page's emblem: the minaret in its eight-pointed star */
.hero-mark-websites {
  --mark-mask: url("/icons/websites-mask.webp");
  --mark-scale: 1.25;
  --mark-origin: 49.8% 47.9%;
}

@media (max-width: 760px) {
  .page-hero.page-hero-card h1 { font-size: 2.35rem; }
}

/* ---------- The site picker: each site's navbar logo on a tile ---------- */

.shelf {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 64px);
  margin-top: clamp(48px, 7vw, 80px);
}

.shelf a { display: grid; justify-items: center; gap: 6px; }

/* same size, depth and perspective as the app shelf, so both pages tilt alike */
.shelf-icon {
  display: block;
  perspective: 600px;
  margin-bottom: 14px;
  --depth: 26;   /* px, unitless so it can scale too */
}

.shelf .tilt { display: block; width: 112px; height: 112px; }
.shelf .tilt-tile,
.shelf .tilt-shine { display: block; border-radius: 26px; }

/* the logo floats in front of its tile, with room around it. No filters on
   these layers: a filter on a 3D-tilted image makes Chrome redraw it soft. */
.shelf .tilt-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 12%;
  object-fit: contain;
  pointer-events: none;
}

.shelf a[href="#iswa"] .tilt-fg { padding: 9%; }
.shelf a[href="#isb"] .tilt-fg { padding: 9%; }
.shelf a[href="#mcc"] .tilt-fg { padding: 5%; }
.shelf a[href="#smashakhs"] .tilt-fg { padding: 8%; }
.shelf a[href="#legends"] .tilt-fg { padding: 7%; }
.shelf a[href="#firsthijrah"] .tilt-fg { padding: 9%; }
.shelf a[href="#isg"] .tilt-fg { padding: 14%; }

/* Legends: the unlit tubes sit on the tile, the lit sign floats over them
   and flickers back on every three seconds (opacity only, so no redraw) */
.shelf .shelf-neon { animation: neon-catch 3s linear infinite; animation-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) { .shelf .shelf-neon { animation: none; } }

/* the logo hovers off its tile like an app icon's artwork, so as the tile
   sways the logo drifts at its own rate; its front layer (the name, or the
   burger) floats further out again */
.shelf .tilt-back { --z: var(--depth); }
.shelf .tilt-front { --z: calc(var(--depth) * 1.7); }

/* scaled by (perspective − z) / perspective, so at rest both halves still
   line up at the logo's true size; only tilting moves them apart */
.shelf .tilt-back,
.shelf .tilt-front { transform: translateZ(calc(var(--z) * 1px)) scale(calc(1 - var(--z) / 600)); }

.shelf a:hover .tilt-tile {
  box-shadow:
    0 30px 40px -20px rgba(0, 0, 0, 0.75),
    0 0 50px -6px color-mix(in srgb, var(--site) 70%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.shelf a:hover .tilt-shine { opacity: 0.9; }

/* a brightening shine can't show on a white or cream tile, so there the
   light shows by shading the tile away from the cursor instead */
.shelf .tile-light .tilt-shine {
  background: radial-gradient(circle at var(--sx, 30%) var(--sy, 20%), transparent 18%, rgba(70, 45, 20, 0.32) 95%);
  mix-blend-mode: multiply;
}
.shelf b { font-weight: 500; font-size: 0.98rem; }
.shelf small { color: var(--ink-faint); font-size: 0.8rem; letter-spacing: 0.04em; }

.case { scroll-margin-top: 110px; }

@media (max-width: 760px) {
  .shelf { gap: 22px; }
  .shelf .tilt { width: 84px; height: 84px; }
  .shelf .tilt-tile,
  .shelf .tilt-shine { border-radius: 20px; }
  .stage-badge { left: -8px; bottom: -22px; width: 64px; height: 64px; }
  .stage-neon { left: -8px; bottom: -22px; width: 110px; }
  .stage-fhf { right: -6px; bottom: -18px; width: 104px; }
  .stage-isg { right: -8px; bottom: -20px; width: 84px; }
}

.cases {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: clamp(72px, 10vw, 120px);
}

/* slider and details side by side; extras (the build, behind the site) run full width below.
   The second case swaps sides. */
.case {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 40px clamp(28px, 4vw, 56px);
  align-items: center;
}

.case > .build,
.case > .behind { grid-column: 1 / -1; order: 3; }

.case:nth-child(even) { grid-template-columns: 1fr 1.45fr; }
.case:nth-child(even) > .compare-stage { order: 2; }
.case:nth-child(even) > .case-info { order: 1; }

/* ---------- Before / after ---------- */

/* Light comes out of the divider line and spills past the frame, like the
   glow around the homepage card. It follows the line as it moves. */
.compare-stage {
  position: relative;
  isolation: isolate;
}

.compare-glow {
  position: absolute;
  inset: -110px 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* a tall beam on the line, reaching past the top and bottom of the frame */
    radial-gradient(14% 50% at var(--pos) 50%, color-mix(in srgb, var(--accent) 80%, transparent), transparent 100%),
    /* a soft rim of light all the way round */
    radial-gradient(62% 52% at 50% 50%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 100%);
  filter: blur(34px);
  animation: glow-breathe 7s ease-in-out infinite;
  transition: filter 0.5s var(--ease);
}

.compare-stage.is-moving .compare-glow { filter: blur(30px) brightness(1.45); }

@keyframes glow-breathe {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

.compare-stage .compare { border-color: color-mix(in srgb, var(--accent) 22%, var(--line-strong)); }

/* each site's mascot stands on the frame's bottom-right corner, half over the edge */
.stage-figure { position: absolute; z-index: 3; pointer-events: none; }

.stage-minaret {
  right: 22px;
  bottom: -4px;
  width: 120px;
  height: 470px;
  transform: scale(0.34);
  transform-origin: bottom right;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6));
}

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

.stage-goose {
  right: -30px;
  bottom: -46px;
  width: 140px;
  height: 140px;
  animation: goose-hover 5s ease-in-out infinite;
}

/* faces into the frame, with a cream outline so it reads on light and dark */
.stage-goose .goose {
  left: 0;
  top: 0;
  width: 100%;
  transform: scaleX(-1);
  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 12px 16px rgba(0, 0, 0, 0.5));
}

/* Smash Akhs: the round badge, turning slowly (faster while the slider is hovered),
   bottom left, clear of the same badge on the site's own hero */
.stage-badge {
  left: -26px;
  bottom: -34px;
  width: 112px;
  height: 112px;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.6));
}

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

/* Legends: the neon sign, bottom left (the site's own hero has it bottom right).
   The lit layer flickers on with the homepage card's neon-catch in home.css. */
.stage-neon {
  left: -30px;
  bottom: -36px;
  width: 190px;
  aspect-ratio: 520 / 353;
}

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

/* First Hijrah: the mark (sizes and sunrise from home.css's .fhf-mark), on the
   frame's bottom-right corner, clear of the logo in the site's own nav */
.stage-fhf { right: -22px; bottom: -30px; left: auto; width: 170px; }

/* ISG: the arch (drawing from home.css's .isg-arch) on the bottom-right corner */
.stage-isg { right: -26px; bottom: -34px; left: auto; width: 140px; }

/* no website to put on the other side of a slider, so the tag says so */
.compare.is-single .compare-tag.tag-new { display: block; left: 50%; transform: translateX(-50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .stage-badge img { animation: none; } }

@keyframes goose-hover {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-8px, -10px); }
}

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

@media (prefers-reduced-motion: reduce) {
  .compare-glow { animation: none; opacity: 0.85; }
}

.compare {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #000;
  box-shadow: 0 40px 120px -50px rgba(0, 0, 0, 0.9);
  user-select: none;
  -webkit-user-select: none;
}

.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  pointer-events: none;
}

/* the truck drives along the bottom, over both the old and the new site */
.compare .smash-road { position: absolute; left: 0; right: 0; bottom: 4%; pointer-events: none; }

.compare .smash-truck {
  position: relative;
  inset: auto;
  width: 20%;
  height: auto;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5));
  animation: truck-drive-wide 11s linear infinite, truck-bob 0.36s ease-in-out infinite alternate;
  animation-delay: -1.5s, 0s;
}

/* the truck is narrower here, so it has further to go */
@keyframes truck-drive-wide {
  0%   { transform: translateX(-105%); }
  55%  { transform: translateX(520%); }
  100% { transform: translateX(520%); }
}

@media (prefers-reduced-motion: reduce) {
  .compare .smash-truck { animation: none; transform: translateX(330%); }
}

.compare-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff6e2;
  box-shadow:
    0 0 10px 1px color-mix(in srgb, var(--accent) 90%, transparent),
    0 0 36px 6px color-mix(in srgb, var(--accent) 45%, transparent);
  pointer-events: none;
}

.compare-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: #fff6e2;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 28px 4px color-mix(in srgb, var(--accent) 60%, transparent);
}

.compare-handle span::before,
.compare-handle span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-left: 2px solid #0a0a0b;
  border-bottom: 2px solid #0a0a0b;
}

.compare-handle span::before { left: 12px; transform: rotate(45deg); }
.compare-handle span::after { right: 12px; transform: rotate(-135deg); }

/* an invisible range input does the dragging and the keyboard support */
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.compare-range:focus-visible ~ .compare-handle span,
.compare:has(.compare-range:focus-visible) .compare-handle span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.compare-tag {
  position: absolute;
  top: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(7, 7, 8, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  pointer-events: none;
  transition: opacity 0.3s;
}

.tag-before { left: 16px; }
.tag-after { right: 16px; }

.compare.is-single .compare-tag,
.compare.is-single .compare-handle { display: none; }

/* ---------- Case details ---------- */

.case-info {
  display: grid;
  gap: 22px;
  align-content: center;
}

/* each site's own logo, in line before its name */
.case-name { display: flex; align-items: center; gap: 14px; }
.case-logo { height: 1.25em; width: auto; flex: none; }
.case-logo-iswa { height: 1.5em; }
.case-logo-isb { height: 1.5em; }
.case-logo-mcc { height: 1.5em; }
.case-logo-smashakhs { height: 1.35em; }
.case-logo-legends { height: 1.6em; }
.case-logo-firsthijrah { height: 1.3em; }
.case-logo-isg { height: 1.25em; }

.case-kicker { color: var(--ink-faint); font-size: 0.82rem; margin-bottom: 10px; }
.case-info h2 { font-size: clamp(2rem, 3.4vw, 2.6rem); margin-bottom: 10px; }
.case-info p { color: var(--ink-dim); font-size: 0.95rem; }

.case-facts { list-style: none; display: grid; gap: 10px; }

.case-facts li {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.case-facts b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.2; color: var(--accent); }
.case-facts span { color: var(--ink-dim); font-size: 0.88rem; }

.case-link {
  justify-self: start;
  color: var(--ink);
  font-size: 0.92rem;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color 0.3s, color 0.3s;
}

.case-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Behind the site (compact, inside the case) ---------- */

.behind { padding-top: 28px; border-top: 1px solid var(--line); }
.behind h3 { font-size: 1rem; font-weight: 600; margin-bottom: 18px; }

.behind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

.behind-grid span {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 6px;
}

.behind-grid h4 { font-size: 0.98rem; font-weight: 600; margin-bottom: 6px; }
.behind-grid p { color: var(--ink-dim); font-size: 0.9rem; }

/* ---------- ISWA: the masjid building and unbuilding ---------- */

.build {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(24px, 4vw, 40px);
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  --font-display: var(--serif);
}

.build h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.1; margin-bottom: 10px; }
.build-copy > p:not(.build-year) { color: var(--ink-dim); font-size: 0.92rem; }

.build-year { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 10px; }
.build-year b { font-family: var(--serif); font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 3.6ch; }
.build-year span { color: var(--ink-dim); font-size: 0.92rem; }

.build-ticks { display: flex; gap: 6px; margin-bottom: 22px; }
.build-ticks i { width: 22px; height: 2px; border-radius: 2px; background: var(--line-strong); transition: background 0.4s; }
.build-ticks i.is-on { background: var(--accent); }

/* the drawing, in the site's gold */
.build-art { color: var(--accent); }
.build-art .facade { display: block; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 35%, transparent)); }

/* ---------- Pricing ---------- */

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

/* the outright purchase: a quiet row under the plans that opens on click */
.plan-own {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color 0.3s;
}

.plan-own:hover,
.plan-own[open] { border-color: var(--line-strong); }

.plan-own summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  list-style: none;
  cursor: pointer;
  color: var(--ink-dim);
  font-size: 0.92rem;
}

.plan-own summary::-webkit-details-marker { display: none; }
.plan-own summary b { color: var(--ink); font-weight: 500; }

.plan-own-toggle {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
}

.plan-own-toggle::before,
.plan-own-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 1.5px;
  margin-top: -0.75px;
  background: var(--accent);
  transition: transform 0.3s var(--ease);
}

.plan-own-toggle::after { transform: rotate(90deg); }
.plan-own[open] .plan-own-toggle::after { transform: rotate(0deg); }

.plan-own-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 4px 22px 20px;
}

.plan-own-body ul { list-style: none; display: grid; gap: 8px; }

.plan-own-body li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-dim);
  font-size: 0.88rem;
}

.plan-own-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--accent);
}

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

.plan-featured {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 30px 80px -40px color-mix(in srgb, var(--accent) 35%, transparent);
}

.plan h3 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.1; }
.plan-for { color: var(--ink-dim); font-size: 0.9rem; margin: 8px 0 24px; min-height: 2.9em; }

.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price b { font-family: var(--serif); font-weight: 400; font-size: 3rem; line-height: 1; }
.plan-price span { color: var(--ink-dim); }
.plan-from { font-size: 0.9rem; }
.plan-setup { color: var(--ink-faint); font-size: 0.86rem; margin: 6px 0 24px; }

.plan ul {
  list-style: none;
  display: grid;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-bottom: 28px;
}

.plan li,
.plan-terms li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

.plan li::before,
.plan-terms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--accent);
}

.plan-actions { margin-top: auto; }
.plan-actions .pill { width: 100%; }

.plan-terms {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.plan-terms h4 { font-size: 1rem; font-weight: 600; margin-bottom: 14px; }
.plan-terms ul { list-style: none; display: grid; gap: 10px; }
.plan-terms p { color: var(--ink-dim); font-size: 0.9rem; }
.plan-terms a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.plan-terms a:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 960px) {
  .case, .case:nth-child(even) { grid-template-columns: 1fr; }
  .case:nth-child(even) > .compare-stage,
  .case:nth-child(even) > .case-info { order: 0; }
  .plans { grid-template-columns: 1fr; }
  .plan-own-body { flex-direction: column; align-items: flex-start; }
  .plan-for { min-height: 0; }
  .plan-terms { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .case-info, .behind-grid, .build { grid-template-columns: 1fr; }
  .build-art { order: -1; }
  .stage-minaret { right: 12px; bottom: -4px; transform: scale(0.3); }
  .stage-goose { right: -12px; bottom: -30px; width: 92px; height: 92px; }
  .case-link { grid-column: auto; }
  .case-facts li { grid-template-columns: 96px 1fr; }
  .compare { border-radius: 16px; }
  .compare-handle span { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
}

@media (max-width: 760px) {
  .stage-minaret-isb { transform: scale(0.25); }
}