html { font-size: 90%; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #000; color: #fff; font-family: 'Alexandria', sans-serif; overflow-x: hidden; text-align: right; }
::selection { background: #fff; color: #000; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Global Arabic Typography Fix: Prevent Any Heading/Text Overlap */
h1, h2, h3, h4, h5, h6, 
.text-lg, .text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl {
  line-height: 1.55 !important;
}

p, span, .body-text, .dd-desc {
  line-height: 1.7 !important;
}

:root {
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

section[id] { scroll-margin-top: 120px; }
.body-text { text-wrap: pretty; }

.noise {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.grid-pattern {
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* Header & Nav Layout */
#site-header { padding: 0; transition: padding .4s cubic-bezier(0.4, 0, 0.2, 1); will-change: padding; pointer-events: none; }
#site-header > * { pointer-events: auto; }
#site-header.nav-scrolled { padding: 0 1.5rem; }
#nav-shell {
  position: relative; max-width: 100%; margin-top: 0; border-radius: 0; border: 1px solid transparent; background: transparent; box-shadow: none;
  transition: max-width .4s cubic-bezier(0.4, 0, 0.2, 1), margin-top .4s cubic-bezier(0.4, 0, 0.2, 1), border-radius .4s cubic-bezier(0.4, 0, 0.2, 1), border-color .4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: max-width, margin-top, box-shadow, border-radius, border-color;
}
#nav-shell::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: transparent;
  transition: background-color .4s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter .4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-backdrop-filter .4s cubic-bezier(0.4, 0, 0.2, 1);
}
#nav-shell.nav-scrolled { max-width: 58rem; margin-top: 1.25rem; border-radius: 9999px; border-color: rgba(255, 255, 255, 0.12); background: transparent; box-shadow: none; }
#nav-shell.nav-scrolled::before { background: rgba(20, 20, 20, 0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

@media (max-width: 1024px) {
  #site-header.nav-scrolled { padding: 0 0.75rem; }
  #nav-shell.nav-scrolled { margin-top: 0.75rem; border-radius: 9999px; }
  #nav-shell.nav-scrolled::before { background: rgba(15, 15, 15, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

#nav-progress-container { transition: opacity .3s cubic-bezier(0.4, 0, 0.2, 1); }
#nav-shell.nav-scrolled #nav-progress-container { opacity: 0; }
#nav-progress { transform-origin: left; will-change: transform; }

.nav-item { position: relative; }
.nav-pill-btn { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: none; transition: background-color .4s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter .4s cubic-bezier(0.4, 0, 0.2, 1); }
#nav-shell.nav-scrolled .nav-pill-btn { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
#nav-left-zone { flex: 1 1 0%; min-width: 0; transition: padding-inline-end .4s cubic-bezier(0.4, 0, 0.2, 1); }
#nav-shell.nav-scrolled #nav-left-zone { padding-inline-end: 1.5rem; }
#nav-right-zone { flex: 1 1 0%; min-width: 0; display: flex; justify-content: flex-end; }

.dd-trigger svg { transition: transform .3s var(--ease-expo); }
.nav-item.dd-open .dd-trigger { color: #fff; background: rgba(255, 255, 255, .06); }
.nav-item.dd-open .dd-trigger svg { transform: rotate(180deg); }

/* Pure Glassmorphism Dropdown without Grey Color Opacity */
.nav-dropdown-shared {
  overflow: hidden; position: absolute; top: calc(100% + 10px); left: 0;
  background: transparent; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
  border-radius: 1rem; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
  transition: opacity .25s ease, transform .35s var(--ease-expo), visibility .25s, width .35s var(--ease-expo), height .35s var(--ease-expo), left .35s var(--ease-expo);
  z-index: 60;
}
.nav-dropdown-shared.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

.dropdown-panel { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s; text-align: left !important; }
.dropdown-panel.active { opacity: 1; visibility: visible; pointer-events: auto; position: relative; }
.dropdown-panel a { display: flex; gap: 12px; border-radius: .6rem; padding: 10px; text-decoration: none; transition: background .15s ease; }
.dropdown-panel a:hover { background: rgba(255, 255, 255, .06); }
.dropdown-panel a .dd-icon { color: rgba(255, 255, 255, .7); flex-shrink: 0; margin-top: 2px; }
.dropdown-panel a .dd-title { font-size: 14px; font-weight: 600; color: #fff; text-align: left; }
.dropdown-panel a .dd-desc { font-size: 12.5px; line-height: 1.4 !important; color: rgba(255, 255, 255, .4); margin-top: 2px; text-align: right; }

#models-menu, #models-menu *, #models-menu li, #models-menu div {
  text-align: left !important;
}

#specs-menu, #specs-menu *, #specs-menu .dd-title {
  text-align: right !important;
}

/* Model Card Icons — Always show in brand color, no hover needed */
#models .model-item .absolute img {
  opacity: 60% !important;
  filter: none !important;
  brightness: unset !important;
}
/* Except OpenAI and Flux, which are black by default, make them white */
#models .model-item .absolute img[src*="openai.svg"],
#models .model-item .absolute img[src*="flux.svg"] {
  filter: brightness(0) invert(1) !important;
}
#models .model-item:hover .absolute img {
  opacity: 90% !important;
}

/* Hover Rolling Text Animation (Infinite downward swap) */
.hover-anim-item { align-items: center; display: flex; overflow: hidden; }
.nav-anim-scroller { height: 20px; position: relative; overflow: hidden; flex: 1; text-align: right !important; }
.nav-anim-track { position: absolute; top: 0; right: 0; width: 100%; text-align: right !important; }
.nav-anim-track span { height: 20px; display: flex; align-items: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 0.75rem; font-weight: 600; text-align: right !important; position: absolute; right: 0; width: 100%; }
.nav-anim-default { top: 0; }
.nav-anim-hover.top { top: -20px; color: #fff; }
.nav-anim-hover.bottom { top: 20px; color: #fff; }

@keyframes text-swap-down-hover {
  0% { transform: translateY(0); }
  100% { transform: translateY(20px); }
}
@keyframes text-swap-down-return {
  0% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.hover-anim-item .nav-anim-track {
  animation: text-swap-down-return 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hover-anim-item:hover .nav-anim-track {
  animation: text-swap-down-hover 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* SVG Entrance & Hover Animations */
#specs-menu svg { transform-origin: center; }

/* Dashboard */
#nav-dashboard.icon-animate svg rect:nth-child(1) { animation: dashTile 0.5s ease 0s 1; }
#nav-dashboard.icon-animate svg rect:nth-child(2) { animation: dashTile 0.5s ease 0.08s 1; }
#nav-dashboard.icon-animate svg rect:nth-child(4) { animation: dashTile 0.5s ease 0.16s 1; }
#nav-dashboard.icon-animate svg rect:nth-child(3) { animation: dashTile 0.5s ease 0.24s 1; }
@keyframes dashTile {
    0% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.35); opacity: 1; }
    100% { transform: scale(1); opacity: 0.6; }
}

/* Team */
#nav-team.icon-animate svg circle, #nav-team.icon-animate svg path:nth-of-type(1) { animation: teamPersonLeft 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
#nav-team.icon-animate svg path:nth-of-type(3), #nav-team.icon-animate svg path:nth-of-type(4) { animation: teamPersonRight 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
@keyframes teamPersonLeft { 0% { transform: translateX(0); } 50% { transform: translateX(-3px); } 100% { transform: translateX(0); } }
@keyframes teamPersonRight { 0% { transform: translateX(0); } 50% { transform: translateX(3px); } 100% { transform: translateX(0); } }

/* Models */
#nav-models.icon-animate svg { animation: modelCubeSpin 0.7s cubic-bezier(0.4, 0, 0.2, 1) 1; }
@keyframes modelCubeSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.22); } 100% { transform: rotate(360deg) scale(1); } }

/* Events */
#nav-events.icon-animate svg { animation: giftSurprisePop 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1; }
@keyframes giftSurprisePop {
    0% { transform: scale(1) rotate(0deg); }
    15% { transform: scale(1.1) rotate(-12deg); }
    30% { transform: scale(1.1) rotate(12deg); }
    45% { transform: scale(1.15) rotate(-8deg); }
    60% { transform: scale(1.25) rotate(0deg) translateY(-2px); }
    80% { transform: scale(0.95) rotate(0deg); }
    100% { transform: scale(1) rotate(0deg) translateY(0); }
}

/* Security */
#nav-security.icon-animate svg { animation: shieldCyberLock 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
@keyframes shieldCyberLock {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(0.9) rotate(-10deg); }
    60% { transform: scale(1.28) rotate(5deg); }
    80% { transform: scale(0.96) rotate(-2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Instructions */
#nav-instructions.icon-animate svg line:nth-of-type(1) { animation: docWriteLine 0.4s ease 0s 1; }
#nav-instructions.icon-animate svg line:nth-of-type(2) { animation: docWriteLine 0.4s ease 0.15s 1; }
#nav-instructions.icon-animate svg polyline { animation: docFoldCorner 0.5s ease 0.1s 1; }
@keyframes docWriteLine { 0% { opacity: 0.2; transform: translateX(-4px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes docFoldCorner { 0% { transform: translate(0, 0); } 50% { transform: translate(2px, 2px) scale(1.2); } 100% { transform: translate(0, 0); } }

/* Card Dotted Frame */
.card-dotted-frame { position: relative; }
.card-dotted-frame::before, .card-dotted-frame::after { content: ''; position: absolute; background: rgba(255, 255, 255, .15); top: 0; bottom: 0; width: 1px; z-index: 20; pointer-events: none; }
.card-dotted-frame::before { left: 0; }
.card-dotted-frame::after { right: 0; }
.card-dotted-frame .dot-line-top, .card-dotted-frame .dot-line-bottom { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .15); z-index: 20; pointer-events: none; }
.card-dotted-frame .dot-line-top { top: 0; }
.card-dotted-frame .dot-line-bottom { bottom: 0; }
.card-dotted-frame .dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffffff; z-index: 20; transform: translate(-50%, -50%); }
.card-dotted-frame .dot-tl { top: 0; left: 0; }
.card-dotted-frame .dot-tr { top: 0; left: 100%; }
.card-dotted-frame .dot-bl { top: 100%; left: 0; }
.card-dotted-frame .dot-br { top: 100%; left: 100%; }

/* Mobile Overlay */
.mobile-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transform: translateX(100%); visibility: hidden; transition: transform .45s var(--ease-expo), visibility 0s .45s; }
.mobile-overlay.open { transform: translateX(0); visibility: visible; transition: transform .45s var(--ease-expo), visibility 0s; }
.mobile-acc-content { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-expo); }
.mobile-acc-content.open { max-height: 500px; }

/* Animations & Morphing */
.reveal { opacity: 0; filter: blur(6px); transform: translateY(34px) scale(.985); transition: opacity 1.1s ease, filter 1.1s ease, transform 1.2s var(--ease-expo); will-change: opacity, transform; }
.reveal.in { opacity: 1; filter: blur(0); transform: none; }

.wm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.w { display: inline-block; transform: translateY(118%) rotate(3deg); opacity: .001; transition: transform 1.15s var(--ease-expo), opacity .8s ease; will-change: transform; }
.words-reveal.in .w { transform: translateY(0) rotate(0); opacity: 1; }

.bg-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; animation: hero-bg-cycle 15s infinite; will-change: transform, opacity; pointer-events: none; user-select: none; }
.bg-layer-1 { animation-delay: 0s; }
.bg-layer-2 { animation-delay: 5s; }
.bg-layer-3 { animation-delay: 10s; }

.morph-container { position: relative; filter: url(#threshold); user-select: none; }
.morph-text { animation: hero-content-morph 15s infinite ease-in-out; transform-origin: right center; will-change: opacity, filter, transform; opacity: 0; }
.morph-text-weak { animation: hero-content-morph-weak 15s infinite ease-in-out; will-change: opacity, filter, transform; opacity: 0; }

.content-layer-1, .content-layer-1 .morph-text, .content-layer-1 .morph-text-weak { animation-delay: 0s; }
.content-layer-2, .content-layer-2 .morph-text, .content-layer-2 .morph-text-weak { animation-delay: 5s; }
.content-layer-3, .content-layer-3 .morph-text, .content-layer-3 .morph-text-weak { animation-delay: 10s; }

@keyframes hero-bg-cycle {
  0% { opacity: 0; pointer-events: none; }
  10% { opacity: 1; pointer-events: auto; }
  33.33% { opacity: 1; pointer-events: auto; }
  43.33% { opacity: 0; pointer-events: none; }
  100% { opacity: 0; pointer-events: none; }
}

@keyframes hero-content-morph {
  0% { opacity: 0; filter: blur(20px); transform: scale(0.95); pointer-events: none; }
  2% { opacity: 0.5; filter: blur(10px); pointer-events: auto; }
  7.5%, 33.33% { opacity: 1; filter: blur(0px); transform: scale(1); pointer-events: auto; }
  35.5% { opacity: 0.5; filter: blur(10px); pointer-events: none; }
  40.83%, 100% { opacity: 0; filter: blur(20px); transform: scale(1.05); pointer-events: none; }
}

@keyframes hero-content-morph-weak {
  0% { opacity: 0; filter: blur(6px); transform: scale(0.98); pointer-events: none; }
  2% { opacity: 0.6; filter: blur(3px); pointer-events: auto; }
  7.5%, 33.33% { opacity: 1; filter: blur(0px); transform: scale(1); pointer-events: auto; }
  35.5% { opacity: 0.6; filter: blur(3px); pointer-events: none; }
  40.83%, 100% { opacity: 0; filter: blur(6px); transform: scale(1.02); pointer-events: none; }
}

/* Code Snippet Switcher */
.code-tab.active { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: rgba(255, 255, 255, 0.3); }


/* --- Fix Mobile Touch Highlight & Sticky Hover Ghost Effect --- */
* {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
  outline: none !important;
}

@media (hover: none) {
  /* Remove sticky hover states on touch devices */
  .main-card:hover,
  .company-stack-group:hover .main-card {
    background-color: rgba(30, 30, 30, 0.75) !important;
  }
  
  .company-drawer > div:hover {
    background-color: rgba(35, 35, 35, 0.75) !important;
  }
}


/* --- Universal Glassmorphism Blur Fix for Mobile & Desktop --- */
.main-card,
.peek-card,
.model-item,
#performance [class*="rounded-2xl"],
#models [class*="rounded-2xl"],
.glass-card {
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}

/* Translucent Glass Card Styling for beautiful blur & background bleed */
#performance [class*="bg-[rgba"],
#models [class*="bg-[rgba"] {
  background: rgba(22, 22, 22, 0.52) !important;
  border: none !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.peek-card {
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

/* Remove blur from models cards on mobile only */
@media (max-width: 767px) {
  #models .main-card,
  #models .model-item {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgb(24, 24, 24) !important;
  }
  
  #models .peek-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}