/* ==========================================================================
   Muridi Tech: a single static page, no build step.
   Palette lifted from the logo: the orange chevron, the blue T, the grey
   wordmark. Everything else is space.
   ========================================================================== */

:root{
  --orange:#EF4E23;
  --coral:#F58E72;
  --blue:#1A4F9C;

  --ink:#1D1D1F;
  --ink-soft:#55565A;
  --ink-faint:#8A8B90;

  --paper:#FFFFFF;
  --wash:#F6F7F9;
  --line:#E6E8EC;

  --shell:1140px;
  --gutter:24px;

  --r:14px;
  --r-lg:22px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

.shell{ max-width:var(--shell); margin:0 auto; padding:0 var(--gutter); }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; background:var(--ink); color:#fff; padding:10px 16px; z-index:99; }

/* ---------------------------------------------------------------- header */

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}

.bar{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:74px; }

.brand img{ width:172px; }

.nav{ display:flex; align-items:center; gap:28px; }
.nav a{ font-size:14.5px; font-weight:500; color:var(--ink-soft); text-decoration:none; }
.nav a:not(.btn):hover{ color:var(--ink); }
/* The pill is dark, so its label stays white through the hover. Without the
   :not() above, .nav a:hover outranked this and turned the text near-black
   on a near-black background. */
.nav .btn, .nav .btn:hover{ color:#fff; }

/* --------------------------------------------------------------- buttons */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:999px;
  background:var(--ink); color:#fff;
  font-size:14.5px; font-weight:500; text-decoration:none;
  border:1px solid var(--ink);
  transition:transform .18s, background .2s, border-color .2s, color .2s;
}
.btn:hover{ background:#000; border-color:#000; transform:translateY(-1px); }
.btn-sm{ padding:9px 18px; font-size:13.5px; }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--wash); border-color:var(--ink-faint); color:var(--ink); }

.btn-light{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-light:hover{ background:#fff; color:var(--orange); border-color:#fff; }

/* ------------------------------------------------------------------ hero */

.hero{
  padding:clamp(72px,11vw,132px) 0 clamp(56px,8vw,96px);
  /* Two soft washes picked from the mark, so the logo does not sit on a
     field of nothing. */
  background:
    radial-gradient(58rem 30rem at 8% -12%, rgba(239,78,35,.09), transparent 62%),
    radial-gradient(50rem 28rem at 92% 6%, rgba(26,79,156,.09), transparent 60%);
}

.eyebrow{
  margin:0 0 18px;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange);
}

.hero h1{
  margin:0;
  font-size:clamp(40px,6vw,68px);
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:700;
  max-width:16ch;
}

.lede{
  margin:24px 0 0;
  font-size:clamp(17px,1.7vw,19.5px);
  color:var(--ink-soft);
  max-width:60ch;
}

.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:36px; }

/* -------------------------------------------------------------- sections */

.section{ padding:clamp(64px,9vw,104px) 0; }
.section-alt{ background:var(--wash); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.section-title{
  margin:0;
  font-size:clamp(28px,3.6vw,40px);
  letter-spacing:-.02em;
  font-weight:700;
}

.section-lede{ margin:14px 0 0; color:var(--ink-soft); max-width:56ch; font-size:17px; }

/* ----------------------------------------------------------------- cards */

.cards{
  display:grid; gap:22px; margin-top:48px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px 30px 30px;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{
  transform:translateY(-3px);
  border-color:transparent;
  box-shadow:0 18px 44px rgba(29,29,31,.10);
}

.card-mark{
  width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; color:#fff;
  margin-bottom:20px;
}
.card-mark-blue{ background:var(--blue); }
.card-mark-orange{ background:var(--orange); }
.card-mark-coral{ background:var(--coral); }

.card h3{ margin:0; font-size:21px; letter-spacing:-.01em; }

.card-role{
  margin:4px 0 16px;
  font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint);
}

.card p{ margin:0 0 14px; color:var(--ink-soft); font-size:15.5px; }

.card-meta{ margin:18px 0 0 !important; font-size:14px; color:var(--ink-faint) !important; }
.card-meta a{ color:var(--blue); text-decoration:none; font-weight:500; }
.card-meta a:hover{ text-decoration:underline; }
.card-meta .dot{ margin:0 6px; color:var(--line); }

/* ---------------------------------------------------------------- points */

.points{
  display:grid; gap:40px; margin-top:48px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.point h3{ margin:0 0 10px; font-size:19px; letter-spacing:-.01em; }
.point h3::before{
  content:""; display:block; width:34px; height:3px; border-radius:2px;
  background:var(--orange); margin-bottom:16px;
}
.point p{ margin:0; color:var(--ink-soft); font-size:15.5px; }

/* ------------------------------------------------------------------ band */

.band{
  padding:clamp(64px,9vw,100px) 0;
  background:linear-gradient(118deg, var(--blue) 0%, #16407f 52%, #2b2f36 100%);
  color:#fff; text-align:center;
}
.band h2{ margin:0; font-size:clamp(28px,3.6vw,40px); letter-spacing:-.02em; }
.band p{ margin:16px auto 30px; max-width:52ch; color:rgba(255,255,255,.82); font-size:17px; }

/* ---------------------------------------------------------------- footer */

.site-footer{ border-top:1px solid var(--line); padding:64px 0 26px; }

.foot{
  display:grid; gap:36px;
  grid-template-columns:2fr 1fr 1fr;
  align-items:start;
}
.foot-logo{ width:150px; margin-bottom:14px; }
.foot p{ margin:0; color:var(--ink-faint); font-size:14.5px; max-width:34ch; }

.foot-links h4{
  margin:0 0 14px;
  font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint);
}
.foot-links a{ display:block; margin-bottom:9px; font-size:14.5px; color:var(--ink-soft); text-decoration:none; }
.foot-links a:hover{ color:var(--orange); }

.foot-base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:52px; padding-top:22px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-faint);
}

/* ------------------------------------------------------------ responsive */

@media (max-width:820px){
  .nav a:not(.btn){ display:none; }
  .foot{ grid-template-columns:1fr 1fr; }
  .foot > div:first-child{ grid-column:1 / -1; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* ------------------------------------------------------------ ai section */

.section-ai{
  background:
    radial-gradient(46rem 26rem at 88% 0%, rgba(26,79,156,.07), transparent 62%),
    radial-gradient(40rem 24rem at 4% 96%, rgba(239,78,35,.06), transparent 60%),
    var(--paper);
  border-top:1px solid var(--line);
}
.section-ai .section-title{ max-width:22ch; }

.ai-grid{
  display:grid; gap:34px; margin-top:52px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}

.ai-num{
  display:inline-block; margin-bottom:14px;
  font-size:12.5px; font-weight:700; letter-spacing:.12em;
  color:var(--orange);
}
.ai-point h3{ margin:0 0 10px; font-size:18.5px; letter-spacing:-.01em; }
.ai-point p{ margin:0; color:var(--ink-soft); font-size:15.5px; }

/* The services block reads as an offer, so it gets a surface of its own. */
.services{
  margin-top:68px; padding:44px 40px;
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  text-align:center;
}
.services-title{ margin:0 0 34px; font-size:23px; letter-spacing:-.01em; }

.service-cards{
  display:grid; gap:26px; margin-bottom:36px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  text-align:left;
}
.service{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 22px;
}
.service h4{ margin:0 0 9px; font-size:16.5px; letter-spacing:-.01em; }
.service p{ margin:0; color:var(--ink-soft); font-size:15px; }

@media (max-width:620px){
  .services{ padding:32px 22px; }
}