/* 4Ummah marketing site.
   Palette and type match the product, so the two feel like one thing. */

:root {
  --brand: #1387d4;
  --brand-deep: #0b6bae;
  --brand-soft: #eef7fc;
  --navy: #0b3b5c;
  --teal: #0dafa6;
  --amber: #f59e42;

  --ink: #16233a;
  --ink-soft: #5b6b7c;
  --canvas: #fafcfd;
  --line: #eaeef2;

  /* Spacing scale. Everything below picks from this rather than inventing a
     value, so vertical rhythm stays consistent when sections move around. */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;

  /* Icon sizing, one place. */
  --icon-sm: 18px;
  --tap-min: 44px;

  --radius: 18px;
  --maxw: 1120px;
  --shadow: 0 20px 40px -22px rgba(19, 58, 90, 0.22);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15;
  /* Stops a short trailing word being orphaned onto its own line. */
  text-wrap: balance;
}
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 2.25rem); }
.narrow { max-width: 720px; }
.center { text-align: center; }

.skip {
  position: absolute; left: -9999px;
  background: #fff; padding: 0.75rem 1.25rem; border-radius: 10px; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

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

/* --- type helpers ---------------------------------------------------- */
.eyebrow {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.13em; color: var(--brand-deep); margin-bottom: 0.9rem;
}
.lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 46ch; margin-top: 1.4rem; }
.body-lg { font-size: 1.05rem; color: var(--ink-soft); margin-top: 1.1rem; }
.footnote { font-size: 0.92rem; color: var(--ink-soft); margin-top: 2.5rem; }

.rule { width: 46px; height: 4px; border-radius: 2px; background: var(--teal); margin: 1.25rem 0 0; }
.center-rule { margin-left: auto; margin-right: auto; }

/* --- buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 1.5rem; border-radius: 12px;
  font-weight: 700; font-size: 0.95rem; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn-primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 10px 22px -8px rgba(19, 135, 212, 0.55);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: #fff; border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-deep); transform: translateY(-2px); }
.btn-sm { padding: 0.6rem 1.15rem; font-size: 0.88rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.02rem; margin-top: 2rem; }

/* --- header ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 252, 253, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* padding-block, NOT the `1rem 0` shorthand. This element also carries .wrap,
   which supplies the horizontal padding; a shorthand here has equal specificity
   and comes later, so it silently zeroed the inline axis and pinned the logo
   and button to the viewport edges. */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-sm); gap: var(--space-sm);
}
.logo { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.1rem; }
.mark {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--brand); color: #fff;
  font-size: 0.8rem; font-weight: 800; letter-spacing: -0.02em;
}
.nav-links { display: flex; gap: 1.75rem; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }
.nav-links a:hover { color: var(--brand-deep); }
@media (max-width: 760px) { .nav-links { display: none; } }

/* --- hero ------------------------------------------------------------ */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.5rem); color: var(--navy); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.hero-note { margin-top: 1.75rem; font-size: 0.87rem; font-weight: 600; color: var(--ink-soft); }

.hero-visual { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 430px; margin: 0 auto; }
.blob { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(150deg, #eaf6fb, #e4f1fb); }
/* The logo sits on the soft blob rather than replacing it, so the hero keeps a
   circular shape at every width instead of becoming a lone floating square.

   mix-blend-mode: multiply is doing the work of the transparency the source
   file does not have. The supplied logo is a JPEG on a near white background,
   which would otherwise show as a white square, or as a white disc if clipped
   round. Multiply keeps dark pixels and lets near white ones take the colour
   underneath, so the mark reads as sitting directly on the blob. It only works
   because the backdrop is light; on a dark background this would need a real
   transparent PNG or SVG.

   Percentage width so it scales with the blob, with nothing pinned to a pixel
   size that happens to look right on one screen. */
.hero-logo {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 82%; height: auto;
  mix-blend-mode: multiply;
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 280px; }
  .lede { max-width: none; }
}

/* --- sections -------------------------------------------------------- */
section { padding: clamp(3.5rem, 8vw, 6rem) 0; }

/* The header is sticky, so an anchor jump would otherwise put the heading
   underneath it. Offset by a little more than the header's height. */
section[id] { scroll-margin-top: 90px; }
section h2 { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.3rem); color: var(--navy); }
.band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* --- pillar cards ---------------------------------------------------- */
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem; margin-top: var(--space-xl);
}
.card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem 1.35rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.card p { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; }
.card.muted { background: transparent; border-style: dashed; }
.card.muted:hover { transform: none; box-shadow: none; }

.ico { display: block; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 1.1rem; }
.ico-teal   { background: #e3f8f6; box-shadow: inset 0 0 0 2px rgba(13,175,166,0.25); }
.ico-blue   { background: #e7f2fc; box-shadow: inset 0 0 0 2px rgba(19,135,212,0.25); }
.ico-amber  { background: #fef1e4; box-shadow: inset 0 0 0 2px rgba(245,158,66,0.24); }

.tag {
  display: inline-block; margin-top: 1rem;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  padding: 0.2rem 0.6rem; border-radius: 99px;
  background: #f2f5f7; color: var(--ink-soft);
}
.tag-live { background: var(--brand-soft); color: var(--brand-deep); }

@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }

/* Three cards in two columns leaves the last one alone in the left column with
   a hole beside it. Span the row and centre it at the same width its siblings
   have, so it reads as deliberate rather than as a layout that ran out.

   Keyed on :last-child:nth-child(odd) rather than on .card:nth-child(3), so it
   is the parity that triggers it, not the count. Add a fourth card and the rule
   stops applying by itself; add a fifth and it starts again.

   Bounded below at 561px because under that the grid is a single column, where
   halving the width would be wrong. */
@media (max-width: 1000px) and (min-width: 561px) {
  .cards > .card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - (1.15rem / 2));
    margin-inline: auto;
  }
}
@media (max-width: 560px)  { .cards { grid-template-columns: 1fr; } }

/* --- who ------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.who-list { display: grid; gap: 1.75rem; }
.who-list h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.who-list p { color: var(--ink-soft); font-size: 0.97rem; }
.who-list li { padding-left: 1.25rem; border-left: 3px solid var(--brand-soft); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* --- contact --------------------------------------------------------- */
.contact { background: linear-gradient(160deg, #f2f9fd, #eaf4fb); }

/* --- footer ---------------------------------------------------------- */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 2.5rem 0; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-note { font-size: 0.9rem; color: var(--ink-soft); font-weight: 600; }
.footer-copy { font-size: 0.82rem; color: var(--ink-soft); }

/* --- scroll reveal --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* No JavaScript, or reduced motion: everything is simply visible. A
   marketing page that renders blank without JS is worse than one with no
   animation at all. */
.no-js .reveal { opacity: 1; transform: none; }

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

/* --- shared ----------------------------------------------------------- */

.center-row { justify-content: center; margin-top: 2rem; }

/* Disabled on purpose: the waitlist is not open yet. Styled as clearly
   inert rather than merely greyed, so nobody clicks it twice wondering. */
/* 0.65 rather than 0.55: still unmistakably inert, but the label clears 4.5:1
   instead of sitting at roughly 3.6:1. */
.btn[disabled] {
  opacity: 0.65; cursor: not-allowed; box-shadow: none;
}
.btn[disabled]:hover { transform: none; border-color: var(--line); color: inherit; }
.soon {
  margin-left: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 99px;
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}

/* --- socials ---------------------------------------------------------- */
/* Grouped by brand rather than one row of six identical icons, so the eye
   reads three things instead of counting six. */
.social-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem; margin-top: 3rem;
}
.social-group {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.35rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.social-group:hover { border-color: #d8e3ea; transform: translateY(-2px); }

.social-label { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot-blue  { background: var(--brand); }
.dot-teal  { background: var(--teal); }
.dot-amber { background: var(--amber); }

.social-name { display: block; font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.social-note { display: block; font-size: 0.8rem; color: var(--ink-soft); }

.social-links { display: flex; gap: 0.5rem; flex-shrink: 0; }
.social-links a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 10px; border: 1px solid var(--line); background: #fff;
  color: var(--ink-soft);
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.social-links a:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-2px); }
/* The markup also carries width="18" height="18" on every icon. That is not
   redundant: an inline <svg> with only a viewBox and no intrinsic size falls
   back to filling its container, so if this stylesheet is stale, cached or
   simply never arrives, the icons render enormous rather than slightly wrong.
   A cofounder hit exactly that. CSS still wins over the attributes, so this
   rule stays in charge whenever it does load. */
.social-links svg { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; }

@media (max-width: 900px) { .social-grid { grid-template-columns: 1fr; } }

/* --- mobile breathing room -------------------------------------------- */
/* The header sat tight against both edges on a phone: the logo on one side and
   the button on the other, with the viewport padding doing all the work. */
@media (max-width: 620px) {
  .wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
  /* padding-block again, for the reason spelled out above .nav. The shorthand
     was here and zeroed the inline axis at this breakpoint only, which is why
     the desktop nav looked right and the phone one sat on the edges. */
  .nav { padding-block: 0.85rem; gap: 0.75rem; }
  .logo { font-size: 1rem; gap: 0.5rem; }
  .mark { width: 30px; height: 30px; font-size: 0.72rem; border-radius: 9px; }
  .btn-sm { padding: 0.55rem 0.9rem; font-size: 0.82rem; }
  .cta-row .btn, .center-row .btn { width: 100%; }
  .center-row { flex-direction: column; }
  .btn-lg { padding: 0.9rem 1.5rem; font-size: 0.95rem; }
  .social-group { padding: 1.1rem; }
}

/* --- contact ---------------------------------------------------------- */
/* Sits under the CTA pair, so it needs separation from them rather than the
   default paragraph gap, which read as though it belonged to the buttons. */
.contact-alt {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(11, 59, 92, 0.08);
  max-width: 28rem; margin-inline: auto;
  font-size: 0.92rem; color: var(--ink-soft);
}
.contact-alt a { color: var(--brand-deep); font-weight: 600; }
.contact-alt a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  /* Comfortable thumb targets. The glyph stays --icon-sm so nothing reflows. */
  .social-links a { width: var(--tap-min); height: var(--tap-min); }
}