/* SPIRAL — custom styling */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

::selection { background: #C8FF3D; color: #0A0F0D; }

/* ---------- Hero diagonal grid ---------- */
.diag-grid {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 120%;
  background-image:
    linear-gradient(115deg, rgba(10,15,13,0.06) 1px, transparent 1px),
    linear-gradient(25deg, rgba(10,15,13,0.04) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0) 85%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0) 85%);
}

.diag-lines {
  background-image: repeating-linear-gradient(
    115deg,
    rgba(245,243,238,0.4) 0 1px,
    transparent 1px 42px
  );
}

/* Floating blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.55;
  animation: float 14s ease-in-out infinite;
}
.blob-lime  { width: 28rem; height: 28rem; background: #C8FF3D; top: -6rem; right: -6rem; }
.blob-moss  { width: 22rem; height: 22rem; background: #0F3D2E; bottom: -8rem; left: -5rem; opacity: 0.25; animation-delay: -6s;}

@keyframes float {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(0,-24px,0) scale(1.04); }
}

/* Diagonal edge between sections */
.diagonal-edge {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 80px;
  background: #0A0F0D;
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
}

/* ---------- Float cards in hero ---------- */
.float-card {
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow:
    0 30px 60px -20px rgba(10,15,13,0.18),
    0 8px 20px -10px rgba(10,15,13,0.1);
  border: 1px solid rgba(10,15,13,0.06);
  animation: drift 9s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.float-chip {
  position: absolute;
  right: -10px;
  bottom: -24px;
  background: #0A0F0D;
  color: #F5F3EE;
  padding: 14px 18px;
  border-radius: 18px;
  box-shadow: 0 20px 40px -15px rgba(10,15,13,0.5);
  animation: drift 11s ease-in-out infinite reverse;
}
@keyframes drift {
  0%,100% { transform: translateY(0) rotate(var(--r, -4deg)); }
  50%     { transform: translateY(-10px) rotate(var(--r, -4deg)); }
}
.rotate-\[-4deg\] { --r: -4deg; }
.rotate-\[6deg\]  { --r: 6deg; }

/* ---------- Problem cards ---------- */
.problem-card {
  background: #fff;
  border: 1px solid rgba(10,15,13,0.08);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.problem-card:hover {
  transform: translateY(-4px);
  border-color: #0F3D2E;
  box-shadow: 0 24px 50px -30px rgba(10,15,13,0.25);
}
.problem-card .num {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  color: #0F3D2E;
}
.problem-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 12px;
  line-height: 1.25;
}
.problem-card p {
  color: rgba(10,15,13,0.6);
  font-size: 0.95rem;
  margin-top: 10px;
  line-height: 1.55;
}

/* ---------- Solution cards ---------- */
.solution-card {
  background: #F5F3EE;
  border-radius: 22px;
  padding: 28px;
  border: 1px solid rgba(10,15,13,0.06);
  position: relative;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), background .4s;
}
.solution-card:hover { transform: translateY(-6px); background:#0A0F0D; color:#F5F3EE; }
.solution-card:hover .icon-box { background:#C8FF3D; color:#0A0F0D; border-color:#C8FF3D; }
.solution-card:hover .sub { color: #C8FF3D; }
.solution-card:hover .body { color: rgba(245,243,238,0.7); }
.icon-box {
  width: 48px; height: 48px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: #fff;
  border: 1px solid rgba(10,15,13,0.08);
  color: #0F3D2E;
  transition: all .4s;
  margin-bottom: 22px;
}
.icon-box svg { width: 22px; height: 22px; }
.solution-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.1;
}
.solution-card .sub {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
  font-style: italic;
  color: #0F3D2E;
  font-weight: 300;
  margin-bottom: 14px;
}
.solution-card .body { color: rgba(10,15,13,0.65); font-size:0.95rem; line-height:1.55; }

/* ---------- Impact cards ---------- */
.impact-card {
  background: #fff;
  border: 1px solid rgba(10,15,13,0.08);
  border-radius: 22px;
  padding: 32px;
  transition: transform .5s ease, box-shadow .5s ease;
}
.impact-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(10,15,13,0.25); }
.impact-card .tag {
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #0F3D2E;
}
.impact-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.6rem; font-weight: 500; margin-top: 14px; line-height: 1.15;
}
.impact-card p {
  color: rgba(10,15,13,0.65);
  margin-top: 12px; line-height: 1.55; font-size: 0.95rem;
}
.impact-card .metric {
  margin-top: 28px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.15rem;
  color: #0F3D2E;
  border-top: 1px solid rgba(10,15,13,0.08);
  padding-top: 18px;
}
.impact-card.bg-moss h3 { color: #F5F3EE; }
.impact-card.bg-moss p  { color: rgba(245,243,238,0.75); }
.impact-card.bg-moss .tag { color: #C8FF3D; }
.impact-card.bg-moss .metric {
  color: #C8FF3D;
  border-top-color: rgba(245,243,238,0.15);
}

.skew-card:nth-child(1) { transform: translateY(0); }
.skew-card:nth-child(2) { transform: translateY(28px); }
.skew-card:nth-child(3) { transform: translateY(0); }
@media (max-width: 768px) {
  .skew-card:nth-child(2) { transform: translateY(0); }
}

/* ---------- Tanzania city cards ---------- */
.city-card {
  position: relative;
  background: rgba(245,243,238,0.04);
  border: 1px solid rgba(245,243,238,0.12);
  padding: 22px;
  border-radius: 18px;
  backdrop-filter: blur(6px);
}
.city-card .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #C8FF3D;
  margin-bottom: 16px;
  box-shadow: 0 0 0 4px rgba(200,255,61,0.15);
}

/* ---------- Founder portrait ---------- */
.founder-portrait {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 28px;
  background: linear-gradient(150deg, #0F3D2E 0%, #0A0F0D 70%);
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(10,15,13,0.4);
}
.portrait-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.initials {
  font-family: "Space Grotesk", sans-serif;
  font-size: 6rem;
  font-weight: 300;
  color: #C8FF3D;
  letter-spacing: -0.05em;
  z-index: 2;
}
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(245,243,238,0.2);
}
.ring-1 { width: 70%; height: 70%; }
.ring-2 { width: 88%; height: 88%; border-color: rgba(200,255,61,0.3); }
.ring-3 { width: 50%; height: 50%; border-color: rgba(245,243,238,0.4); }
.founder-tag {
  position: absolute;
  left: 18px; bottom: 18px;
  background: rgba(245,243,238,0.95);
  color: #0A0F0D;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: "Space Grotesk", sans-serif;
}

/* ---------- Partners slots ---------- */
.partner-slot {
  background: #F5F3EE;
  padding: 40px 20px;
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  color: rgba(10,15,13,0.75);
  transition: background .3s, color .3s;
  min-height: 120px;
  display:flex; align-items:center; justify-content:center;
}
.partner-slot:hover { background: #0A0F0D; color: #C8FF3D; }

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .blob, .float-card, .float-chip { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}