/* =========================================================
   HEXOR.DEV Index Interface
   Coffee-tech responsive CSS for the landing index only.
   ========================================================= */

:root {
  color-scheme: dark;

  --bg: #080503;
  --bg-deep: #120b06;
  --panel: rgba(31, 20, 12, .78);
  --panel-solid: #1b110b;
  --panel-soft: rgba(255, 214, 162, .055);
  --line: rgba(226, 164, 96, .16);
  --line-strong: rgba(246, 198, 131, .38);
  --txt: #fff3df;
  --muted: #cdb99e;
  --accent: #d28d4b;
  --accent-2: #8b5630;
  --accent-3: #f3c37a;
  --gold: #ffd585;
  --electric: #ffbd70;
  --success-glow: rgba(255, 202, 122, .34);
  --danger-glow: rgba(255, 204, 124, .28);
  --shadow: rgba(0, 0, 0, .48);

  --topbar-height: 64px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --transition-fast: 160ms ease;
  --transition-normal: 260ms ease;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding-top: var(--topbar-height);
  color: var(--txt);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
  background:
    radial-gradient(circle at 50% 46%, rgba(214, 139, 71, .18), transparent 28%),
    radial-gradient(circle at 18% 12%, rgba(126, 73, 39, .14), transparent 32%),
    radial-gradient(circle at 82% 82%, rgba(255, 204, 124, .10), transparent 30%),
    linear-gradient(145deg, #080503 0%, #130b06 46%, #050302 100%);
  -webkit-tap-highlight-color: transparent;
}

body::before,
body::after,
.scene-glow {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: 0;
  opacity: .36;
  background-image:
    linear-gradient(rgba(255, 202, 122, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 202, 122, .065) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 48%, black 0%, transparent 76%);
  animation: hexorGridFlow 16s linear infinite;
}

body::after {
  z-index: 0;
  opacity: .46;
  background:
    linear-gradient(115deg, transparent 0%, rgba(214, 139, 71, .075) 42%, transparent 54%),
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(255, 231, 198, .025) 53px 54px);
  animation: hexorScan 8s linear infinite;
}

.scene-glow {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 203, 125, .14), transparent 12%),
    radial-gradient(circle at 50% 50%, rgba(255, 202, 122, .08), transparent 30%);
  filter: blur(2px);
}

.site-main,
.top-bar,
.btn,
.modal {
  position: relative;
}

.site-main {
  z-index: 1;
}

@keyframes hexorGridFlow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 34px 34px, 34px 34px; }
}

@keyframes hexorScan {
  0% { background-position: -320px 0, 0 0; }
  100% { background-position: 320px 0, 54px 0; }
}

/* =========================================================
   Top navigation
   ========================================================= */

.top-bar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 20;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(35, 22, 13, .88), rgba(17, 10, 6, .66));
  border-bottom: 1px solid rgba(226, 164, 96, .14);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .26);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.dropdown {
  position: relative;
  min-width: 0;
  overflow: visible;
  flex: 0 1 230px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid rgba(226, 164, 96, .18);
  border-radius: var(--radius-sm);
  color: var(--txt);
  background:
    linear-gradient(145deg, rgba(255, 231, 198, .075), rgba(255, 231, 198, .025)),
    rgba(21, 13, 8, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 231, 198, .08),
    0 10px 26px rgba(0, 0, 0, .22);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 202, 122, .48);
  background:
    linear-gradient(145deg, rgba(214, 139, 71, .16), rgba(126, 73, 39, .07)),
    rgba(28, 17, 10, .88);
  box-shadow:
    0 0 0 1px rgba(255, 202, 122, .10),
    0 16px 34px rgba(0, 0, 0, .28),
    0 0 26px rgba(214, 139, 71, .14);
  outline: none;
}

.btn:active {
  transform: translateY(0) scale(.98);
}

.btn.accent {
  color: #02121f;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--electric));
}

#servicesBtn {
  width: 100%;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  z-index: 21;
  display: grid;
  width: min(250px, calc(100vw - 24px));
  gap: 7px;
  padding: 9px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  border: 1px solid rgba(226, 164, 96, .18);
  border-radius: var(--radius-md);
  background: rgba(18, 11, 7, .94);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, .44),
    0 0 38px rgba(214, 139, 71, .08);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
}

.dropdown.show .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dropdown-menu .btn {
  width: 100%;
  justify-content: center;
  padding: 11px 12px;
  font-size: 13.5px;
}

.brand-chip {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 40px;
  padding: 8px 16px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 202, 122, .28);
  border-radius: var(--radius-md);
  color: #fff3df;
  background:
    linear-gradient(90deg, #8a532d, #d28d4b, #f3c37a, #8a532d);
  background-size: 320% 100%;
  box-shadow:
    inset 0 0 18px rgba(255, 231, 198, .08),
    0 0 22px rgba(126, 73, 39, .26),
    0 12px 32px rgba(0, 0, 0, .24);
  animation: chipGradient 6s linear infinite;
}

.brand-chip::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: calc(var(--radius-md) - 2px);
  background:
    repeating-linear-gradient(90deg, rgba(255, 229, 191, .09) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(255, 236, 204, .12), transparent 55%);
  opacity: .46;
  pointer-events: none;
}

.brand-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, transparent 0%, rgba(255,231,198,.42) 46%, transparent 54%);
  transform: translateX(-140%);
  animation: chipSweep 3.4s ease-in-out infinite;
}

.brand-chip span {
  position: relative;
  z-index: 3;
  direction: ltr;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 1px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 0 14px rgba(255, 231, 198, .28);
}

.brand-chip canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes chipGradient {
  0% { background-position: 0 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@keyframes chipSweep {
  0%, 38% { transform: translateX(-140%); opacity: 0; }
  48% { opacity: 1; }
  78%, 100% { transform: translateX(140%); opacity: 0; }
}

/* =========================================================
   Center logo scene
   ========================================================= */

.hero-logo-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(58vw, 360px);
  max-width: calc(100vw - 40px);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  perspective: 920px;
}

.hero-logo-wrap::before,
.hero-logo-wrap::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}

.hero-logo-wrap::before {
  inset: -14%;
  z-index: -3;
  background:
    radial-gradient(circle, rgba(255, 209, 139, .13) 0 28%, transparent 61%),
    conic-gradient(from 180deg, transparent, rgba(167, 98, 48, .18), transparent, rgba(255, 213, 142, .12), transparent);
  filter: blur(10px);
  opacity: .85;
  animation: logoAuraBreath 5.5s ease-in-out infinite;
}

.hero-logo-wrap::after {
  inset: -9%;
  z-index: -2;
  background:
    linear-gradient(rgba(255, 201, 124, .35), rgba(255, 201, 124, .35)) 50% 0 / 1px 12% no-repeat,
    linear-gradient(rgba(255, 201, 124, .24), rgba(255, 201, 124, .24)) 50% 100% / 1px 12% no-repeat,
    linear-gradient(90deg, rgba(255, 201, 124, .26), rgba(255, 201, 124, .26)) 0 50% / 12% 1px no-repeat,
    linear-gradient(90deg, rgba(255, 201, 124, .26), rgba(255, 201, 124, .26)) 100% 50% / 12% 1px no-repeat;
  border: 1px solid rgba(178, 111, 57, .16);
  opacity: .74;
  animation: logoTargetDrift 9s linear infinite;
}

.hero-logo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
  border-radius: 999px;
  transform-origin: 50% 56%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 221, 166, .14), transparent 36%),
    repeating-conic-gradient(from 0deg, rgba(255, 201, 124, .16) 0deg 1.4deg, transparent 1.4deg 12deg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 217, 163, .10),
    inset 0 0 34px rgba(120, 69, 34, .17),
    0 24px 70px rgba(0, 0, 0, .36);
  animation: logoFloatTilt 6s ease-in-out infinite;
}

.hero-logo-frame::before,
.hero-logo-frame::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.hero-logo-frame::before {
  inset: -6.2%;
  z-index: -2;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 10deg,
      rgba(255, 224, 170, .96) 12deg 28deg,
      transparent 31deg 74deg,
      rgba(172, 100, 50, .82) 80deg 105deg,
      transparent 111deg 170deg,
      rgba(255, 204, 123, .92) 178deg 196deg,
      transparent 204deg 264deg,
      rgba(212, 139, 71, .88) 272deg 294deg,
      transparent 302deg 360deg
    );
  filter: drop-shadow(0 0 12px rgba(255, 194, 112, .46)) drop-shadow(0 0 26px rgba(132, 75, 37, .34));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
  animation: logoOuterRing 4.6s linear infinite;
}

.hero-logo-frame::after {
  inset: -2.4%;
  z-index: 0;
  background:
    repeating-conic-gradient(from 7deg, rgba(255, 221, 166, .44) 0deg 1.2deg, transparent 1.2deg 8.5deg),
    conic-gradient(from 120deg, transparent, rgba(255, 199, 117, .16), transparent 24%, rgba(166, 95, 46, .16), transparent 62%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  filter: drop-shadow(0 0 10px rgba(255, 196, 115, .30));
  opacity: .88;
  animation: logoInnerRing 13s linear infinite reverse;
}

.hero-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52vh, 420px);
  object-fit: contain;
  transform-origin: 50% 55%;
  filter:
    drop-shadow(0 0 10px rgba(255, 213, 133, .31))
    drop-shadow(0 0 22px rgba(211, 132, 58, .18))
    drop-shadow(0 18px 38px rgba(0, 0, 0, .62));
  animation: logoEnergyPulse 3.2s ease-in-out infinite;
}

@keyframes logoFloatTilt {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(-1.8deg) rotateY(-5deg) scale(1); }
  25% { transform: translate3d(0, -6px, 0) rotateZ(1.8deg) rotateY(5deg) scale(1.006); }
  50% { transform: translate3d(0, 2px, 0) rotateZ(2.6deg) rotateY(3deg) scale(1.002); }
  75% { transform: translate3d(0, -4px, 0) rotateZ(-1.4deg) rotateY(-4deg) scale(1.006); }
}

@keyframes logoOuterRing { to { transform: rotate(360deg); } }
@keyframes logoInnerRing { to { transform: rotate(360deg); } }
@keyframes logoTargetDrift { to { transform: rotate(-360deg); } }

@keyframes logoAuraBreath {
  0%, 100% { opacity: .62; transform: scale(.985); }
  50% { opacity: .94; transform: scale(1.025); }
}

@keyframes logoEnergyPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 10px rgba(255, 213, 133, .30))
      drop-shadow(0 0 22px rgba(211, 132, 58, .16))
      drop-shadow(0 18px 38px rgba(0, 0, 0, .62));
  }
  50% {
    filter:
      drop-shadow(0 0 17px rgba(255, 222, 169, .45))
      drop-shadow(0 0 32px rgba(211, 132, 58, .28))
      drop-shadow(0 22px 44px rgba(0, 0, 0, .64));
  }
}

/* =========================================================
   Fixed bottom actions
   ========================================================= */

.about-btn,
.contact-btn {
  position: fixed;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 2;
  min-width: unset;
  width: auto;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  letter-spacing: .5px;
}

.about-btn {
  inset-inline-end: 14px;
}

.contact-btn {
  inset-inline-start: 14px;
}

/* =========================================================
   Modal base + about popup
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  visibility: hidden;
  opacity: 0;
  background:
    radial-gradient(circle at center, rgba(214, 139, 71, .10), transparent 46%),
    rgba(0, 0, 0, .66);
  backdrop-filter: blur(10px) saturate(112%);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.modal.show {
  visibility: visible;
  opacity: 1;
}

.modal-card {
  width: min(90vw, 360px);
  max-height: 90vh;
  overflow: auto;
  padding: 18px 20px;
  text-align: center;
  color: var(--txt);
  border: 1px solid rgba(226, 164, 96, .18);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(255, 231, 198, .07), rgba(255, 231, 198, .025)),
    rgba(35, 22, 13, .96);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .58),
    0 0 42px rgba(214, 139, 71, .12),
    inset 0 1px 0 rgba(255, 231, 198, .08);
}

.modal-card .title {
  margin: 0 0 6px;
  font-weight: 800;
}

.modal-card .muted {
  color: var(--muted);
  font-size: 14px;
}

.modal-card .actions {
  margin-top: 12px;
}

.about-card {
  width: min(90vw, 360px);
}

.modal-separator {
  width: min(210px, 70%);
  height: 1px;
  margin: 12px auto;
  background: linear-gradient(90deg, transparent, rgba(255, 202, 122, .44), rgba(255, 203, 125, .32), transparent);
}

.copyright-text {
  text-align: center;
}

/* About policy buttons moved from index.php inline CSS */
@keyframes hexorPolicyPulse {
  0%, 100% {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22), 0 0 22px rgba(214, 139, 71, .16) inset;
  }
  50% {
    box-shadow: 0 12px 30px rgba(0, 0, 0, .26), 0 0 34px rgba(214, 139, 71, .34) inset;
  }
}

@keyframes hexorPolicyShine {
  0%, 35% { transform: translateX(-130%); }
  70%, 100% { transform: translateX(130%); }
}

@keyframes hexorPolicyGlow {
  from { opacity: .65; transform: scale(.95); }
  to { opacity: 1; transform: scale(1.12); }
}

@keyframes hexorBoxSweep {
  0%, 45% { transform: translateX(-120%); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

.hexor-policy-box {
  position: relative;
  margin: 0 auto 18px;
  padding: 18px 14px;
  overflow: hidden;
  border: 1px solid rgba(226, 164, 96, .32);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 20% 0%, rgba(214, 139, 71, .22), transparent 34%),
    radial-gradient(circle at 80% 100%, rgba(126, 73, 39, .18), transparent 34%),
    linear-gradient(145deg, rgba(20, 12, 7, .92), rgba(37, 24, 14, .78));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .35), 0 0 38px rgba(214, 139, 71, .18);
}

.hexor-policy-box::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(120deg, transparent, rgba(214, 139, 71, .55), transparent);
  transform: translateX(-120%);
  animation: hexorBoxSweep 3.4s ease-in-out infinite;
  pointer-events: none;
}

.hexor-policy-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 231, 198, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 231, 198, .035) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .42;
  pointer-events: none;
}

.hexor-policy-link {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 14px 15px;
  overflow: hidden;
  color: #fff1d9;
  text-decoration: none;
  font-weight: 850;
  letter-spacing: .2px;
  border: 1px solid rgba(238, 177, 105, .38);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(214, 139, 71, .24), rgba(255, 231, 198, .055)), rgba(255, 231, 198, .045);
  animation: hexorPolicyPulse 2.8s ease-in-out infinite;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.hexor-policy-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent, rgba(255, 231, 198, .28), transparent);
  transform: translateX(-130%);
  animation: hexorPolicyShine 2.8s ease-in-out infinite;
  pointer-events: none;
}

.hexor-policy-link:hover,
.hexor-policy-link:focus-visible {
  transform: translateY(-2px) scale(1.015);
  border-color: rgba(168, 213, 255, .9);
  outline: none;
}

.hexor-policy-icon {
  color: #f7c477;
  text-shadow: 0 0 14px #d28d4b;
  animation: hexorPolicyGlow 1.9s ease-in-out infinite alternate;
}

.hexor-policy-arrow {
  direction: ltr;
  color: #ffd39a;
  text-shadow: 0 0 12px #d28d4b;
}

.policy-spacer {
  height: 12px;
}

.hexor-policy-note {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  padding: 12px 13px;
  border: 1px solid rgba(238, 177, 105, .18);
  border-radius: 15px;
  color: #e6c9a2;
  background: rgba(0, 0, 0, .18);
  font-size: .92rem;
  line-height: 1.8;
  text-align: center;
}

/* =========================================================
   Legacy chat/code utility styles retained for compatibility
   ========================================================= */

.chatgpt-box {
  position: fixed;
  inset-inline: 0;
  bottom: 64px;
  z-index: 2;
  width: min(92vw, 700px);
  min-height: 120px;
  margin-inline: auto;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid rgba(255, 231, 198, .12);
  border-radius: 14px;
  background: rgba(34, 21, 13, .28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 0 0 20px rgba(255, 231, 198, .05);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.chatgpt-title {
  margin-bottom: 6px;
  color: var(--accent);
  font-weight: 800;
}

.chatgpt-hint {
  color: #d6c4ad;
  font-size: 13px;
}

.typing-dots {
  direction: ltr;
  display: flex;
  gap: 4px;
  padding: 5px;
  color: #b79f83;
  font-size: 16px;
  letter-spacing: 2px;
  text-align: left;
}

.typing-dots .dot {
  opacity: .3;
  font-weight: bold;
  animation: bounce 1s infinite ease-in-out;
}

.typing-dots .dot1 { animation-delay: 0s; }
.typing-dots .dot2 { animation-delay: .2s; }
.typing-dots .dot3 { animation-delay: .4s; }

@keyframes bounce {
  0% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px); }
  80% { opacity: .3; transform: translateY(0); }
  100% { opacity: .3; }
}

.code-block {
  position: relative;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid #3a2718;
  border-radius: 8px;
  background: #1a1009;
}

.code-block pre {
  margin: 0;
  overflow-x: auto;
}

.code-block code {
  color: #f4e1c4;
  font-family: "Courier New", monospace;
  font-size: 13px;
  white-space: pre;
}

.copy-btn {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 8px;
  border: 0;
  border-radius: 4px;
  color: #fff3df;
  background: #d28d4b;
  font-size: 12px;
  cursor: pointer;
}

.copy-btn:hover {
  background: #f0b56f;
}

.chat-link {
  color: #ffc781;
  text-decoration: underline;
  word-break: break-all;
}

/* =========================================================
   Contact iframe modal: same size limits, refined visuals
   ========================================================= */

#contactModal {
  z-index: 9999;
}

.modal-card.contact-iframe-card {
  position: relative;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  width: min(96vw, 980px);
  height: min(88vh, 760px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}

.frame-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(226, 164, 96, .16);
  background:
    linear-gradient(90deg, rgba(214, 139, 71, .10), transparent 38%, rgba(255, 204, 124, .08)),
    rgba(17, 10, 6, .98);
}

.frame-title {
  direction: ltr;
  font-size: clamp(14px, 3.2vw, 18px);
  font-weight: 950;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(90deg, #9a5d31 0%, #f0b56f 45%, #c47b3e 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: .6px rgba(255, 231, 198, .10);
  filter:
    drop-shadow(0 0 6px rgba(240, 181, 111, .55))
    drop-shadow(0 0 10px rgba(132, 75, 37, .35))
    drop-shadow(0 0 14px rgba(192, 117, 54, .35));
  animation: itaiNeonShift 3.2s ease-in-out infinite, itaiNeonPulse 1.8s ease-in-out infinite;
}

@keyframes itaiNeonShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 200% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes itaiNeonPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px rgba(240, 181, 111, .50))
      drop-shadow(0 0 10px rgba(132, 75, 37, .32))
      drop-shadow(0 0 14px rgba(192, 117, 54, .30));
  }
  50% {
    filter:
      drop-shadow(0 0 9px rgba(240, 181, 111, .75))
      drop-shadow(0 0 14px rgba(132, 75, 37, .48))
      drop-shadow(0 0 18px rgba(192, 117, 54, .46));
  }
}

.frame-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 231, 198, .14);
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  box-shadow: 0 0 14px rgba(240, 181, 111, .10);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.frame-close .x-icon {
  width: 20px;
  height: 20px;
}

.frame-close .x-icon path {
  stroke: rgba(255, 231, 198, .92);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.frame-close:hover,
.frame-close:focus-visible {
  transform: scale(1.05);
  border-color: rgba(255, 231, 198, .26);
  background: rgba(0, 0, 0, .32);
  box-shadow: 0 0 18px rgba(240, 181, 111, .20), 0 0 22px rgba(192, 117, 54, .14);
  outline: none;
}

.frame-close:active {
  transform: scale(.96);
}

#contactModal iframe#contactFrame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
  border: 0;
  background: #120b06;
}

/* =========================================================
   Responsive tuning
   ========================================================= */

@media (max-width: 768px) {
  .hero-logo-wrap {
    width: min(68vw, 300px);
  }

  .hero-logo {
    max-height: min(44vh, 320px);
  }
}

@media (max-width: 560px) {
  :root {
    --topbar-height: 62px;
  }

  .top-bar {
    gap: 8px;
    padding-inline: 10px;
  }

  .dropdown {
    flex: 1 1 auto;
  }

  #servicesBtn {
    padding-inline: 10px;
    font-size: 12.5px;
  }

  .brand-chip {
    min-width: min(36vw, 128px);
    min-height: 38px;
    padding-inline: 11px;
  }

  .brand-chip span {
    font-size: 12.5px;
    letter-spacing: .7px;
  }

  .dropdown-menu {
    width: min(238px, calc(100vw - 20px));
  }

  .hero-logo-wrap {
    width: min(76vw, 240px);
  }

  .hero-logo-frame::before {
    inset: -6.6%;
  }

  .hero-logo {
    max-height: min(38vh, 250px);
  }

  .about-btn,
  .contact-btn {
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 6px 11px;
    font-size: 12.5px;
  }

  .about-btn {
    inset-inline-end: 12px;
  }

  .contact-btn {
    inset-inline-start: 12px;
  }
}

@media (max-width: 520px) {
  #contactModal {
    align-items: stretch;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .contact-iframe-card {
    width: 98vw;
    height: calc(100dvh - 28px - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 28px - env(safe-area-inset-bottom));
    border-radius: 12px;
  }

  .frame-head {
    min-height: 56px;
    padding: 10px 12px;
  }

  .frame-close {
    width: 36px;
    height: 36px;
  }

  #contactModal iframe#contactFrame {
    height: auto;
  }
}

@media (min-width: 521px) {
  #contactModal {
    align-items: center;
    justify-content: center;
    padding-top: 0;
  }

  .modal-card.contact-iframe-card {
    height: min(88vh, 760px);
    max-height: calc(100vh - 32px);
  }
}

@media (max-width: 380px) {
  #servicesBtn {
    font-size: 11.5px;
    letter-spacing: -.1px;
  }

  .brand-chip {
    min-width: 108px;
    padding-inline: 9px;
  }

  .brand-chip span {
    font-size: 11.5px;
  }

  #contactModal iframe#contactFrame {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   Interface refinement: cache-safe premium polish
   ========================================================= */

.top-bar {
  overflow: visible;
}

.top-bar::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 217, 163, .72), rgba(210, 141, 75, .45), transparent);
  transform: translateX(-100%);
  animation: hexorTopTrace 5.6s ease-in-out infinite;
  pointer-events: none;
}

.btn {
  overflow: hidden;
  isolation: isolate;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: calc(var(--radius-sm) - 1px);
  background:
    linear-gradient(100deg, transparent 0%, rgba(255, 231, 198, .15) 47%, transparent 54%),
    radial-gradient(circle at 50% 0%, rgba(255, 213, 142, .13), transparent 58%);
  opacity: .42;
  transform: translateX(-42%);
  transition: opacity var(--transition-fast), transform var(--transition-normal);
}

.btn:hover::before,
.btn:focus-visible::before {
  opacity: .78;
  transform: translateX(42%);
}

.hero-logo-frame {
  outline: 1px solid rgba(255, 217, 163, .08);
  outline-offset: 7px;
}

.hero-logo-frame::before {
  animation-duration: 4.2s;
}

.hero-logo-wrap {
  filter: saturate(1.05) contrast(1.02);
}

.about-btn,
.contact-btn {
  position: fixed;
  border-color: rgba(246, 198, 131, .30);
  box-shadow:
    inset 0 1px 0 rgba(255, 231, 198, .10),
    0 14px 30px rgba(0, 0, 0, .26),
    0 0 24px rgba(214, 139, 71, .09);
}

.modal-card {
  outline: 1px solid rgba(255, 231, 198, .035);
  outline-offset: -5px;
}

@keyframes hexorTopTrace {
  0%, 38% { transform: translateX(-100%); opacity: 0; }
  48% { opacity: 1; }
  82%, 100% { transform: translateX(100%); opacity: 0; }
}

@media (max-width: 560px) {
  .hero-logo-frame {
    outline-offset: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-bar::before,
  .btn::before,
  .hero-logo-frame::before {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   Center redesign: modern technical logo
   ========================================================= */


.scene-glow {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 213, 133, .18), transparent 9%),
    radial-gradient(circle at 50% 50%, rgba(210, 141, 75, .11), transparent 29%),
    radial-gradient(circle at 50% 56%, rgba(80, 43, 18, .20), transparent 46%);
  filter: blur(1.5px);
}

.site-main {
  z-index: 3;
  pointer-events: none;
}

.hero-logo-wrap {
  top: 50%;
  width: clamp(182px, 26vw, 286px);
  max-width: calc(100vw - 76px);
  filter: none;
  perspective: 760px;
}

.hero-logo-wrap::before,
.hero-logo-wrap::after {
  border-radius: 34px;
}

.hero-logo-wrap::before {
  inset: -28%;
  z-index: -3;
  opacity: .86;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 220, 164, .18), transparent 31%),
    radial-gradient(circle at 49% 51%, rgba(210, 141, 75, .16), transparent 48%),
    linear-gradient(135deg, transparent 16%, rgba(255, 213, 133, .10) 45%, transparent 72%);
  filter: blur(16px);
  animation: dataCoreBreath 5.8s ease-in-out infinite;
}

.hero-logo-wrap::after {
  inset: -18%;
  z-index: -2;
  opacity: .62;
  border: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 213, 133, .28), transparent) 50% 0 / 72% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(138, 83, 45, .30), transparent) 50% 100% / 72% 1px no-repeat,
    linear-gradient(rgba(255, 213, 133, .18), transparent 58%) 0 50% / 1px 60% no-repeat,
    linear-gradient(rgba(255, 213, 133, .18), transparent 58%) 100% 50% / 1px 60% no-repeat;
  transform: none;
  animation: dataBracketPulse 4.6s ease-in-out infinite;
}

.hero-logo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 213, 133, .18);
  border-radius: 30px;
  outline: 0;
  transform-origin: 50% 58%;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 231, 198, .13), transparent 30%),
    linear-gradient(145deg, rgba(255, 213, 133, .12), rgba(48, 28, 15, .42) 48%, rgba(13, 8, 5, .74)),
    rgba(18, 11, 7, .52);
  box-shadow:
    inset 0 1px 0 rgba(255, 231, 198, .12),
    inset 0 -18px 48px rgba(54, 30, 15, .42),
    0 20px 56px rgba(0, 0, 0, .48),
    0 0 34px rgba(210, 141, 75, .18);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  animation: logoConsoleFloat 6.8s ease-in-out infinite;
}

.hero-logo-frame::before,
.hero-logo-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.hero-logo-frame::before {
  inset: 0;
  z-index: 3;
  padding: 2px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 213, 133, .96) 14%, rgba(210, 141, 75, .55) 26%, transparent 38%) 0 0 / 240% 100%,
    linear-gradient(180deg, transparent 0%, rgba(255, 231, 198, .54) 18%, rgba(179, 110, 56, .52) 32%, transparent 46%) 0 0 / 100% 240%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .92;
  filter: drop-shadow(0 0 10px rgba(255, 213, 133, .30));
  animation: logoFrameTrace 3.9s linear infinite;
}

.hero-logo-frame::after {
  inset: 9px;
  z-index: 0;
  border: 1px solid rgba(255, 213, 133, .08);
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(255, 213, 133, .18) 50%, transparent 52%) 0 0 / 100% 100%,
    linear-gradient(rgba(255, 231, 198, .08), transparent 26%, transparent 74%, rgba(255, 231, 198, .08)) 0 0 / 100% 100%,
    repeating-linear-gradient(90deg, rgba(255, 213, 133, .045) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(0deg, rgba(255, 213, 133, .035) 0 1px, transparent 1px 13px);
  opacity: .70;
  animation: logoInternalScan 5.5s ease-in-out infinite;
}

.hero-logo {
  position: relative;
  z-index: 2;
  width: 86%;
  max-height: none;
  height: auto;
  object-fit: contain;
  transform-origin: 50% 55%;
  filter:
    drop-shadow(0 0 12px rgba(255, 213, 133, .34))
    drop-shadow(0 13px 26px rgba(0, 0, 0, .62));
  animation: logoMicroDrift 5.4s ease-in-out infinite;
}

@keyframes dataCoreBreath {
  0%, 100% { opacity: .58; transform: scale(.965); }
  50% { opacity: .92; transform: scale(1.045); }
}

@keyframes dataBracketPulse {
  0%, 100% { opacity: .42; transform: scale(.985); }
  50% { opacity: .76; transform: scale(1.015); }
}

@keyframes logoConsoleFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(-3deg); }
  25% { transform: translate3d(0, -5px, 0) rotateX(2deg) rotateY(3deg); }
  50% { transform: translate3d(0, 2px, 0) rotateX(-1deg) rotateY(2deg); }
  75% { transform: translate3d(0, -3px, 0) rotateX(1deg) rotateY(-2deg); }
}

@keyframes logoFrameTrace {
  0% { background-position: -180% 0, 0 -180%; opacity: .74; }
  50% { background-position: 40% 0, 0 40%; opacity: 1; }
  100% { background-position: 180% 0, 0 180%; opacity: .74; }
}

@keyframes logoInternalScan {
  0%, 100% { background-position: -42% 0, 0 0, 0 0, 0 0; opacity: .55; }
  50% { background-position: 42% 0, 0 0, 11px 0, 0 13px; opacity: .82; }
}

@keyframes logoMicroDrift {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      drop-shadow(0 0 12px rgba(255, 213, 133, .32))
      drop-shadow(0 13px 26px rgba(0, 0, 0, .62));
  }
  50% {
    transform: translate3d(0, -2px, 0) scale(1.012);
    filter:
      drop-shadow(0 0 17px rgba(255, 231, 198, .48))
      drop-shadow(0 16px 30px rgba(0, 0, 0, .66));
  }
}

@media (max-width: 768px) {
  .hero-logo-wrap {
    width: clamp(170px, 52vw, 250px);
  }
}

@media (max-width: 560px) {
  .hero-logo-wrap {
    top: 50.5%;
    width: clamp(160px, 57vw, 228px);
    max-width: calc(100vw - 96px);
  }

  .hero-logo-frame {
    border-radius: 24px;
  }

  .hero-logo-frame::after {
    inset: 7px;
  }
}

@media (max-width: 380px) {
  .hero-logo-wrap {
    width: clamp(148px, 54vw, 204px);
    max-width: calc(100vw - 96px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-wrap,
  .hero-logo-frame,
  .hero-logo-frame::before,
  .hero-logo-frame::after,
  .hero-logo {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   Logo color ambience + performance mode
   ========================================================= */

body {
  background:
    radial-gradient(circle at 50% 47%, rgba(64, 177, 255, .105), transparent 24%),
    radial-gradient(circle at 45% 52%, rgba(142, 92, 255, .090), transparent 30%),
    radial-gradient(circle at 58% 45%, rgba(255, 68, 92, .050), transparent 25%),
    radial-gradient(circle at 18% 12%, rgba(126, 73, 39, .14), transparent 32%),
    radial-gradient(circle at 82% 82%, rgba(177, 105, 54, .105), transparent 30%),
    linear-gradient(145deg, #080503 0%, #130b06 46%, #050302 100%);
}

.scene-glow {
  background:
    radial-gradient(circle at 50% 52%, rgba(64, 177, 255, .145), transparent 13%),
    radial-gradient(circle at 47% 48%, rgba(142, 92, 255, .105), transparent 24%),
    radial-gradient(circle at 57% 48%, rgba(255, 68, 92, .050), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(177, 105, 54, .090), transparent 32%);
  filter: none;
}


.modal {
  background: rgba(0, 0, 0, .68);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


body.modal-open::before,
body.modal-open::after,
body.modal-open .scene-glow,
body.modal-open .brand-chip::before,
body.modal-open .brand-chip::after,
body.modal-open .hero-logo-wrap,
body.modal-open .hero-logo-wrap::before,
body.modal-open .hero-logo-wrap::after,
body.modal-open .hero-logo-frame,
body.modal-open .hero-logo-frame::before,
body.modal-open .hero-logo-frame::after,
body.modal-open .hero-logo,
body.modal-open .hexor-policy-box::before,
body.modal-open .hexor-policy-link,
body.modal-open .hexor-policy-link::before,
body.modal-open .hexor-policy-icon {
  animation-play-state: paused !important;
}

body.modal-open .hexor-policy-box::before,
body.modal-open .hexor-policy-link::before {
  opacity: 0 !important;
}

body.modal-open .modal-card {
  box-shadow: 0 22px 52px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 231, 198, .08);
}


/* Lightweight compositor overrides */
.top-bar,
.dropdown-menu,
.hero-logo-frame,
.chatgpt-box,
.modal-card.contact-iframe-card,
.frame-window {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hexor-policy-link,
.hexor-policy-icon {
  animation-duration: 6s;
}

.hexor-policy-box::before,
.hexor-policy-link::before {
  animation-duration: 7s;
}


/* =========================================================
   Direct static speed pass + blue/purple technical palette
   ========================================================= */

body {
  background:
    radial-gradient(circle at 50% 47%, rgba(36, 174, 255, .13), transparent 24%),
    radial-gradient(circle at 45% 52%, rgba(156, 91, 255, .13), transparent 31%),
    radial-gradient(circle at 56% 45%, rgba(255, 67, 103, .035), transparent 24%),
    radial-gradient(circle at 17% 12%, rgba(126, 73, 39, .13), transparent 32%),
    radial-gradient(circle at 82% 82%, rgba(177, 105, 54, .09), transparent 30%),
    linear-gradient(145deg, #080503 0%, #130b06 46%, #050302 100%);
}

.scene-glow {
  background:
    radial-gradient(circle at 50% 52%, rgba(36, 174, 255, .16), transparent 13%),
    radial-gradient(circle at 47% 48%, rgba(156, 91, 255, .14), transparent 25%),
    radial-gradient(circle at 57% 48%, rgba(255, 67, 103, .035), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(177, 105, 54, .075), transparent 32%);
}

/* إيقاف المؤثرات الثقيلة المستمرة للحفاظ على سرعة الواجهة. */
body::before,
body::after {
  animation: none !important;
}

.top-bar::before,
.brand-chip::before,
.brand-chip::after,
.hero-logo-wrap::before,
.hero-logo-wrap::after,
.hero-logo-frame,
.hero-logo-frame::after,
.hero-logo {
  animation-duration: 14s !important;
}

.top-bar,
.dropdown-menu,
.hero-logo-frame,
.modal,
.modal-card,
.frame-window,
.modal-card.contact-iframe-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


.btn::before,
.hexor-policy-box::before,
.hexor-policy-link::before,
.hexor-policy-icon {
  animation-play-state: paused;
}

.btn:hover::before,
.btn:focus-visible::before,
.hexor-policy-link:hover::before,
.hexor-policy-link:focus-visible::before {
  animation-play-state: running;
}


body.modal-open .scene-glow {
  opacity: .25;
}