/** ScrollBar CSS **/

	::-webkit-scrollbar {
	  width: 4px;
	}

	::-webkit-scrollbar-thumb {
	  background: #c9c9c9;
	  border-radius: 6px;
	}

	::-webkit-scrollbar-track {
	  background: transparent;
	}

    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      /*font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Inter, Helvetica, Arial, sans-serif;*/
      font-family: "Space Grotesk", sans-serif;
	  font-optical-sizing: auto;
	  scroll-behavior: smooth;
      background: #ffffff;
      color: #000000;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
    }

	.footer{ position: fixed; bottom: 2%; left: 50%; transform: translateX(-50%); text-align: center; font-size: max(0.7vw, 14px); color: #ccc; }

	a {
	  position: relative;
	}

	a::after {
	  content: "";
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  width: 18px;
	  height: 18px;
	  border: 2px solid #000;
	  border-radius: 50%;
	  transform: translate(-50%, -50%) scale(0);
	  transition: transform 0.25s ease;
	  pointer-events: none;
	}

	a::before {
	  content: "";
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  width: 10px;
	  height: 10px;
	  background: #000;
	  border-radius: 50%;
	  transform: translate(-50%, -50%) scale(0);
	  transition: transform 0.25s ease;
	  pointer-events: none;
	}

	a:hover::after,
	a:hover::before {
	  transform: translate(-50%, -50%) scale(1);
	}

	.arb{ font-family: "Mada", sans-serif; font-optical-sizing: auto; }
	.heb { font-family: "Heebo", sans-serif; font-optical-sizing: auto; }


    /* Logo */
    .logo {
      position: fixed;
      top: 24px;
      left: 24px;
      width: 50px;
      height: 50px;
    }

    .logo img {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Center content */
    .center {
      text-align: center;
      max-width: 750px;
      padding: 0 24px;
    }

    .center h1 {
      font-size: 54px;
      font-weight: 400;
	  color: #ccc;
      letter-spacing: -0.01em;
      line-height: 1.4;
      margin: 0;
	  text-transform: capitalize;
    }

	 .center h2{
		position:relative;
		font-size: 24px;
        font-weight: 400;
        letter-spacing: -0.01em;
        line-height: 1.4;
        margin: 0;
	  }

	.anim{
		position:absolute;
		inset:0;
		pointer-events:none;
		color:#000;
	  }

	  .anim span{
		opacity:0;
		animation:show .4s forwards;
	  }

	  @keyframes show{
		to{opacity:1}
	  }

    /*.center h2 {
      font-size: 24px;
      font-weight: 400;
      letter-spacing: -0.01em;
      line-height: 1.4;
      margin: 0;
	  text-transform: capitalize;
    }*/

	.typing {
	  display: inline-block;
	  position: relative;
	  white-space: nowrap;
	  text-align: center;

	  /* key part */
	  clip-path: inset(0 100% 0 0);
	  animation: typeReveal 3.0s cubic-bezier(.4,0,.2,1) forwards;
	}

	@keyframes typeReveal {
	  to {
		clip-path: inset(0 0 0 0);
	  }
	}

	/* optional cursor 
	.typing::after {
	  content: "▍";
	  margin-left: 2px;
	  animation: blink 1.2s infinite;
	}

	@keyframes blink {
	  50% { opacity: 0; }
	}*/

	.section-links {
	  margin-top: 25%;
	  display: flex;
	  justify-content: center;
	  gap: 24px;
	  text-align: center;
	}

	.section-links a {
	  opacity: 0;
	  transform: translateY(6px);
	  animation: linkReveal 0.5s ease forwards;
	}

	.section-links {
	  flex-wrap: nowrap;
	}

	.section-links a {
	  white-space: nowrap;
	  text-transform: capitalize;
	  font-size: 14px;
	  font-weight: 500;
	  letter-spacing: 0.02em;
	  color: #000;
	  text-decoration: none;
	}

	.section-links a:hover {

	}


	/* staggered timing */
	.section-links a:nth-child(1) { animation-delay: 3.2s; }
	.section-links a:nth-child(2) { animation-delay: 3.6s; }
	.section-links a:nth-child(3) { animation-delay: 4.0s; }
	.section-links a:nth-child(4) { animation-delay: 4.4s; }
	.section-links a:nth-child(5) { animation-delay: 4.8s; }
	.section-links a:nth-child(6) { animation-delay: 5.2s; }

	@keyframes linkReveal {
	  to {
		opacity: 1;
		transform: translateY(0);
	  }
	}


	/* popup core */
	.popup-overlay {
	  position: fixed;
	  inset: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  pointer-events: none;
	}

	.popup-box {
	  width: 10px;
	  height: 10px;
	  border: 1px dashed #000;
	  background: #fff;
	  border-radius: 2px;
	  transform: scale(0);
	  transition:
		transform 0.4s ease,
		width 1s cubic-bezier(.4,0,.2,1),
		height 1s cubic-bezier(.4,0,.2,1),
		border-radius 1s ease;
	}

	/* active state */
	.popup-overlay.active {
	  pointer-events: auto;
	}

	.popup-overlay.active .popup-box {
	  transform: scale(1);
	  width: 460px;
	  height: 360px;
	  border-radius: 12px;
	}

	 /* CHAT */
	.chat {
	  height: 100%;
	  display: flex;
	  flex-direction: column;
	  padding: 16px;
	  font-size: 14px;
	}
	.chat-title {
      position: absolute;
      top: -12px;          /* outside the box */
      left: 12px;          /* top-left */
      padding: 4px 10px;
      background: #fff;    /* black background */
      color: #777;
      font-size: 17px;
      font-weight: 600;
      border-radius: 4px;
      border: dashed 1px #333;
      line-height: 1;
      z-index: 10;
    }

	.messages {
	  flex: 1;
	  overflow-y: auto;
	}

	.bubble {
	  max-width: 75%;
	  padding: 8px 10px;
	  margin-bottom: 10px;
	  border: 0px solid #000;
	  border-radius: 18px;
	  line-height: 1.5;
	  background: #fbfbfb;
	  font-size: 14px;
	  font-weight: 600;
	}

	/* FIX #1 */
	.bubble.user {
	  align-self: flex-end;
	  text-align: right;
	}

	.bubble.system {
	  align-self: flex-start;
	  text-align: left;
	  white-space: pre-line;
	}

	.input-row {
	  display: flex;
	  gap: 8px;
	}
	.input-row input {
	  flex: 1;
	  padding: 6px;
	  border: 1px solid #000;
	}
	.input-row button {
	  padding: 6px 12px;
	  border: 1px solid #000;
	  background: #fff;
	}

	.options {
	  margin-top: 8px;
	  display: flex;
	  gap: 8px;
	  flex-wrap: wrap;
	}

	.options button {
	  border: 0px solid #000;
	  border-radius: 18px;
	  font-size: 14px;
	  font-weight: 600;
	  color: #fff;
	  background: #000;
	  padding: 4px 8px;
	  cursor: pointer;
	}

	.skill-options {
	  display: flex;
	  flex-wrap: wrap;      /* allows wrap ONLY if screen is too small */
	  gap: 6px;            /* spacing between options */
	  padding: 0;
	  margin-bottom: 0;
	}

	.skill-options a {
	  display: inline-flex;
	  align-items: center;
	  margin: 0;
	  height: 23px;
	  padding: 4px 8px;
	}


	.skill-link {
      border: 0px solid #000;
	  border-radius: 18px;
	  color: #fff;
	  background: #000;
	  padding: 4px 8px;
	  text-decoration: none;
	  cursor: pointer;
	}

	.skill-exit {
	  border-radius: 0px;
	  color: #000;
	  background: transparent;
	}

	.fake-cursor {
	  position: fixed;
	  width: 18px;
	  height: 18px;
	  border: 2px solid #000;
	  border-radius: 50%;
	  pointer-events: none;
	  z-index: 9999;
	  transition: left 0.8s ease, top 0.8s ease;
	}

	.fake-cursor::after {
	  content: "";
	  position: absolute;
	  inset: 4px;
	  border-radius: 50%;
	  background: #000;
	}

	.chat-close {
	  font-size: 14px;
	  opacity: 0.6;
	}

	.chat-close:hover {
	  opacity: 1;
	}

	.chat-link {
      font-size: 14px;
	  font-weight: 600;
	  color: #005ec6;
	  text-decoration: none;
	}




	/* ===============================
   MOBILE ADJUSTMENTS
================================ */
@media (max-width: 768px) {

  /* ===== Parent Page ===== */

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }

  .center {
    width: 100%;
    text-align: center;
  }

  .typing_h2 {
    white-space: normal;
    max-width: 100%;
  }

  .typing_h2::after {
    display: none;           /* remove blinking cursor */
  }

  .typing {
    white-space: normal;
    text-align: center;
  }

  .typing span {
    display: inline;
    opacity: 0;
    animation: mobileReveal 0.35s ease forwards;
    font: inherit;
	text-transform: none;
  }

  @keyframes mobileReveal {
    to { opacity: 1; }
  }


  .center h1 {
    font-size: 37px;
    line-height: 1.5;
  }

  .center h2 {
    /*font-size: 20px;
    line-height: 1.5;*/
	font-size: min(8vw, 54px); /* LARGE but bounded */
	line-height:1.2;
	white-space:normal;
	word-break:normal;
	overflow-wrap:normal;
	max-width:100%;
	margin-top:25px;
  }

  .section-links {
    flex-wrap: wrap;
    gap: 16px;
  }

  .section-links a {
    font-size: 16px;
	border-bottom: solid 1px #9BCBFF;
  }

  .bubble {
      max-width: 95%;
	  line-height: 1.5;
	  font-size: 16px;
  }

  .options button {
		font-size: 16px;
   }

  .popup-overlay.active .popup-box {
	  transform: scale(1);
	  width: 90%;
	  height: 70%;
	  border-radius: 12px;
	}

  
}