/* ═════════════════════════════════════════
   HERO: dark cinematic + scene ya animation
   (variables zote zipo kwenye base.css)
   ═════════════════════════════════════════ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  align-items: center;
  gap: 56px;
  padding: 140px var(--pad) 120px;
}
@media (min-width: 1000px) {
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
  }
}

/* mwanga wa cinematic unaosogea polepole */
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      38% 42% at 74% 44%,
      color-mix(in srgb, var(--accent) 17%, transparent),
      transparent 72%
    ),
    radial-gradient(
      50% 50% at 15% 95%,
      rgba(242, 239, 233, 0.06),
      transparent 70%
    );
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
  to {
    transform: translate3d(-3%, 2%, 0) scale(1.06);
  }
}

/* grain ya filamu */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ───── MAANDISHI ───── */
.hero__copy {
  container-type: inline-size;
  min-width: 0;
}

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__status .dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.hero__status .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: ping 2.2s var(--ease) infinite;
}
@keyframes ping {
  from {
    transform: scale(1);
    opacity: 0.55;
  }
  to {
    transform: scale(3.4);
    opacity: 0;
  }
}

.hero__title {
  margin: 28px 0 40px;
  font-family: var(--font-display);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
  line-height: 0.96;
  font-size: clamp(30px, 9vw, 110px);
  font-size: clamp(30px, 9.2cqw, 120px);
}
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.hero__line > span {
  display: block;
  animation: rise 1.2s var(--ease) 0.2s both;
}
.hero__line:nth-child(2) > span {
  animation-delay: 0.34s;
}
@keyframes rise {
  from {
    transform: translateY(112%);
  }
  to {
    transform: none;
  }
}
.hero__x {
  display: inline-block;
  font-style: normal;
  color: var(--accent);
  animation: x-in 1.4s var(--ease) 0.6s both;
}
@keyframes x-in {
  from {
    transform: rotate(-135deg) scale(0.3);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.fade-up {
  animation: fade-up 1s var(--ease) var(--d, 0s) both;
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* kiashiria cha ku-scroll */
.hero__scroll {
  position: absolute;
  left: var(--pad);
  bottom: 32px;
  display: none;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 700px) and (min-height: 640px) {
  .hero__scroll {
    display: flex;
  }
}
.hero__scroll i {
  position: relative;
  width: 1px;
  height: 44px;
  background: var(--line);
  overflow: hidden;
}
.hero__scroll i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--accent), transparent);
  transform: translateY(-100%);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  to {
    transform: translateY(100%);
  }
}

/* ───── CINEMATIC AI CHAT SCENE ─────
   A clear, English-language example conversation between a visitor and an AI assistant. */
.hero__visual {
  display: grid;
  place-items: center;
  min-width: 0;
  perspective: 1000px;
}
.scene {
  display: block;
  width: min(100%, 620px);
  height: auto;
  overflow: visible;
}
.js .scene { opacity: 0; }
.chat-micro {
  fill: rgba(242, 239, 233, 0.58);
  font: 500 9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 1.05px;
}
.chat-micro--muted { fill: rgba(242, 239, 233, 0.34); }
.chat-title {
  fill: #f2efe9;
  font: 600 10px Inter, Arial, sans-serif;
  letter-spacing: .45px;
}
.chat-subtitle {
  fill: rgba(242, 239, 233, .48);
  font: 400 8px Inter, Arial, sans-serif;
}
.chat-online {
  fill: rgba(242, 239, 233, .7);
  font: 500 7px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .8px;
}
.chat-user-text {
  fill: #10130d;
  font: 600 9.5px Inter, Arial, sans-serif;
}
.chat-user-meta {
  fill: rgba(16, 19, 13, .58);
  font: 500 6px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .65px;
}
.chat-ai-text {
  fill: rgba(242, 239, 233, .9);
  font: 400 9.5px Inter, Arial, sans-serif;
}
.chat-ai-meta {
  fill: rgba(198, 255, 61, .72);
  font: 500 5.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .7px;
}
.chat-input-text {
  fill: rgba(242, 239, 233, .35);
  font: 400 7px Inter, Arial, sans-serif;
}
.chat-complete-text {
  fill: rgba(242, 239, 233, .85);
  font: 600 6.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .85px;
}
.chat-typing { opacity: 0; }
.chat-message, .chat-typing, #chat-complete, #chat-light-sweep {
  transform-box: fill-box;
  transform-origin: center;
}
@media (max-width: 999px) {
  .hero__visual { width: min(100%, 620px); margin-inline: auto; }
  .scene { width: min(100%, 580px); }
}
@media (max-width: 520px) {
  .scene { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero__status .dot::after,
  .hero__scroll i::after {
    animation: none;
  }
}

/* ═════════════════════════════════════════
   ZA MUDA: font tester (tutaifuta tukishachagua font)
   ═════════════════════════════════════════ */
.font-test {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(11, 11, 12, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.font-test button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  font-size: 12px;
}
.font-test button:hover,
.font-test button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* ═════════════════════════════════════════
   CHAT SCENE: larger presentation for readability
   Keeps the two-column hero intact while giving the conversation more room.
   ═════════════════════════════════════════ */
@media (min-width: 1000px) {
  .hero__visual {
    width: calc(100% + clamp(40px, 4.5vw, 68px));
    margin-right: calc(-1 * clamp(40px, 4.5vw, 68px));
  }

  .scene {
    width: min(100%, 740px);
  }
}

@media (min-width: 521px) and (max-width: 999px) {
  .hero__visual {
    width: min(100%, 720px);
  }

  .scene {
    width: min(100%, 680px);
  }
}

@media (max-width: 520px) {
  .hero__visual {
    width: calc(100% + 2 * var(--pad));
    margin-inline: calc(-1 * var(--pad));
  }

  .scene {
    width: min(100%, 420px);
  }
}