/* Interkey Hero — drop-in section. No framework, no dependencies.
   Works LTR (en) and RTL (ar): every side-specific value uses logical properties. */


.ik-hero {
  --ik-navy: #2A2A77;
  --ik-deep: #1F1F5C;
  --ik-cyan: #5CCFF7;
  --ik-cyan-hover: #3FC2EF;
  --ik-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  position: relative;
  isolation: isolate;
  min-height: 86vh;
  min-height: 86svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, var(--ik-deep) 0%, var(--ik-navy) 100%);
  font-family: "Cairo", sans-serif;
  color: #FFFFFF;
  box-sizing: border-box;
}
.ik-hero *, .ik-hero *::before, .ik-hero *::after { box-sizing: border-box; }

/* Globe */
.ik-hero__globe {
  position: absolute;
  z-index: 0;
  top: 38%;
  inset-inline-end: -35%;
  width: min(112vw, 1420px);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.ik-hero__globe canvas { display: block; width: 100%; height: 100%; }

/* Content */
.ik-hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(72px, 10vh, 110px) 56px clamp(72px, 9vh, 130px);
}
.ik-hero__content { max-width: 760px; display: flex; flex-direction: column; gap: 28px; }

.ik-hero__title { margin: 0; font-weight: 800; }
.ik-hero__line1 {
  display: block;
  width: fit-content;
  font-size: clamp(37px, 4.6vw, 64px);
  line-height: 1.2;
  color: #FFFFFF;
}
.ik-hero__line2 {
  display: inline-block;
  font-size: clamp(42px, 5.2vw, 72px);
  line-height: 1.2;
  padding: 0.04em 0.18em 0.1em;
  background: var(--ik-cyan);
  color: var(--ik-navy);
}
.ik-hero__lead {
  margin: 0;
  max-width: 620px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
}

/* Buttons — square, brand cyan + outline */
.ik-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.ik-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 60px;
  padding: 0 30px;
  border-radius: 0;
  font-family: inherit;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms var(--ik-ease), color 160ms var(--ik-ease), border-color 160ms var(--ik-ease), transform 120ms var(--ik-ease);
}
.ik-btn:active { transform: translateY(1px); }
.ik-btn:focus-visible { outline: 3px solid var(--ik-cyan); outline-offset: 3px; }
.ik-btn--cyan { background: var(--ik-cyan); color: var(--ik-navy); border: 2px solid var(--ik-cyan); }
.ik-btn--cyan:hover { background: var(--ik-cyan-hover); border-color: var(--ik-cyan-hover); }
.ik-btn--outline { background: transparent; color: #FFFFFF; border: 2px solid rgba(255, 255, 255, 0.7); }
.ik-btn--outline:hover { background: rgba(255, 255, 255, 0.08); border-color: #FFFFFF; }
.ik-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
[dir="rtl"] .ik-btn svg { transform: scaleX(-1); }

/* Corner labels: "Since 1999" at inline-start, "From Riyadh" at inline-end */
.ik-hero__corner {
  position: absolute;
  z-index: 3;
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.86);
}
.ik-hero__corner--start { inset-inline-start: 56px; }
.ik-hero__corner--end { inset-inline-end: 56px; }
.ik-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ik-cyan); flex: 0 0 auto; }

.ik-hero__scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
}
.ik-hero__scroll span:first-child { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.ik-hero__chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

/* Arabic typography: no tracking, no uppercase, taller lines */
[dir="rtl"] .ik-hero__line1, [dir="rtl"] .ik-hero__line2 { line-height: 1.45; letter-spacing: 0; }
[dir="rtl"] .ik-hero__lead { line-height: 1.85; }
[dir="rtl"] .ik-hero__scroll span:first-child { letter-spacing: 0; text-transform: none; font-size: 13px; }

/* Tablet */
@media (max-width: 1024px) {
  .ik-hero__inner { padding-inline: 40px; }
  .ik-hero__globe { inset-inline-end: -48%; }
  .ik-hero__corner--start { inset-inline-start: 40px; }
  .ik-hero__corner--end { inset-inline-end: 40px; }
}

/* Mobile: text on top, globe rises from the bottom edge, centred and full strength */
@media (max-width: 640px) {
  .ik-hero { min-height: 0; }
  .ik-hero__inner {
    order: 1;
    flex: 0 0 auto;
    align-items: flex-start;
    padding: 56px 22px 0;
  }
  .ik-hero__content { gap: 22px; }
  .ik-hero__line1 { font-size: clamp(32px, 9.4vw, 44px); }
  .ik-hero__line2 { font-size: clamp(36px, 10.6vw, 50px); }
  .ik-hero__lead { font-size: 17px; }
  .ik-hero__actions { flex-direction: column; gap: 12px; }
  .ik-btn { width: 100%; height: 54px; font-size: 17px; }

  .ik-hero__globe {
    position: relative;
    top: auto;
    inset-inline-end: auto;
    width: 128vw;
    margin: -6vw 0 -46vw;
    margin-inline-start: -14vw;
    transform: none;
    flex: 0 0 auto;
    order: 2;
  }
  .ik-hero__corner, .ik-hero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ik-btn { transition: none; }
}