/* Cansas — brand styles
   Palette: Emerald & Teal
   bg #06120E | surface #0B1B16 | teal-light #5EEAD4 | teal #2DD4BF | emerald #10B981
*/
:root {
  --bg: #07140F;       /* lifted base — less flat than near-black */
  --surface: #0C1F19;
  --surface-2: #133027;
  --line: rgba(148, 184, 170, 0.16);
  --text: #EAF3EE;
  --muted: #93B0A3;
  --cyan: #5EEAD4;   /* light teal accent */
  --brand: #2DD4BF;  /* teal */
  --violet: #10B981; /* emerald */
  --grad: linear-gradient(120deg, #5EEAD4 0%, #2DD4BF 45%, #10B981 100%);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ===== Living aurora background — soft colour drifting behind everything ===== */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 40% at 18% 22%, rgba(45,212,191,0.22), transparent 62%),
    radial-gradient(34% 44% at 82% 16%, rgba(16,185,129,0.20), transparent 62%),
    radial-gradient(44% 42% at 68% 72%, rgba(94,234,212,0.18), transparent 62%),
    radial-gradient(36% 36% at 22% 82%, rgba(56,189,248,0.13), transparent 62%);
  filter: blur(46px) saturate(1.1);
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.09); }
  100% { transform: translate3d(-2.5%, 2.5%, 0) scale(1.05); }
}
/* Fine grain for richness (kills banding + flatness) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Gradient helpers */
.text-grad {
  background: var(--grad);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradShift 7s ease-in-out infinite;
}
@keyframes gradShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Animated logo mark — gentle lift + glow on hover */
.logo-mark {
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s;
  will-change: transform;
}
a:hover .logo-mark {
  transform: rotate(-8deg) scale(1.1);
  filter: drop-shadow(0 4px 16px rgba(45,212,191,0.55));
}
.bg-grad { background: var(--grad); }
.border-grad {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
}

/* Glass card */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
/* Mobile dropdown menu — solid backdrop so page content doesn't bleed through */
.mobile-menu {
  background: rgba(6, 18, 14, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6);
}
.mobile-menu a:not(.btn-primary) { transition: color .2s; }
.mobile-menu a:not(.btn-primary):hover { color: var(--text); }

.card-hover { position: relative; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; }
.card-hover:hover {
  transform: translateY(-6px);
  border-color: rgba(16,185,129,0.45);
  box-shadow: 0 20px 50px -20px rgba(16,185,129,0.35);
}
/* Service "pillar" cards */
.svc-icon {
  box-shadow: 0 8px 24px -10px rgba(45,212,191,0.5);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.svc-card:hover .svc-icon {
  transform: translateY(-3px) rotate(-6deg) scale(1.07);
  box-shadow: 0 14px 32px -10px rgba(45,212,191,0.75);
}
.svc-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px; width: 100%;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
  z-index: 2;
}
.svc-card:hover::after { transform: scaleX(1); }

/* Cursor spotlight that follows the mouse across a card */
.card-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(94,234,212,0.16), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
}
.card-hover:hover::before { opacity: 1; }
.card-hover > * { position: relative; z-index: 1; }

/* WhatsApp chat widget */
.wa-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7);
  transform-origin: bottom right;
  animation: waPop .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes waPop {
  from { opacity: 0; transform: translateY(14px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
.wa-header { background: linear-gradient(135deg, #0d9488 0%, #047857 100%); }
.wa-online {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #22c55e; border: 2px solid #0b5345;
}
.wa-body {
  background:
    radial-gradient(circle at 18% 12%, rgba(94,234,212,0.05), transparent 40%),
    var(--surface);
  min-height: 92px;
}
.wa-bubble {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px 14px 14px 14px;
  padding: .7rem .9rem;
  color: var(--text);
  max-width: 92%;
  line-height: 1.5;
}
.wa-input { background: var(--surface); border-top: 1px solid var(--line); }
.wa-badge {
  position: absolute; top: -3px; inset-inline-end: -3px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
@media (prefers-reduced-motion: reduce) { .wa-panel { animation: none; } }

/* Back to top button */
.to-top {
  background: var(--surface-2);
  border: 1px solid rgba(94,234,212,0.45);
  box-shadow: 0 10px 26px -8px rgba(0,0,0,0.6);
  color: var(--cyan);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, border-color .3s, background .3s, box-shadow .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover {
  border-color: var(--cyan);
  background: rgba(16,185,129,0.18);
  box-shadow: 0 14px 30px -8px rgba(45,212,191,0.5);
  transform: translateY(-3px);
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 100%;
  background: var(--grad);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 60;
  pointer-events: none;
}

/* Glow blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
  animation: blobDrift 17s ease-in-out infinite;
}
@keyframes blobDrift {
  0%,100% { transform: translate3d(0, 0, 0) scale(1); }
  50%     { transform: translate3d(0, -22px, 0) scale(1.1); }
}

/* Buttons */
.btn-primary {
  background: var(--grad);
  color: #04120D;
  font-weight: 600;
  transition: transform .2s, box-shadow .2s, filter .2s;
  box-shadow: 0 10px 30px -10px rgba(45,212,191,0.5);
}
.btn-primary { position: relative; overflow: hidden; }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 40px -12px rgba(16,185,129,0.6); }
/* Shine sweep on hover */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
  pointer-events: none;
}
.btn-primary:hover::after { left: 150%; }
.btn-ghost {
  border: 1px solid var(--line);
  color: var(--text);
  transition: border-color .2s, background .2s, transform .2s;
}
.btn-ghost:hover { border-color: rgba(16,185,129,0.6); background: rgba(16,185,129,0.08); transform: translateY(-2px); }

/* Animated entrance */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Floating animation */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.float { animation: float 7s ease-in-out infinite; }

/* Marquee */
.marquee { display: flex; gap: 3rem; width: max-content; animation: scroll 26s linear infinite; }
@keyframes scroll { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
.tech-item { display: inline-flex; align-items: center; gap: .55rem; opacity: .62; transition: opacity .3s ease; }
.tech-item:hover { opacity: 1; }
.tech-logo { width: 22px; height: 22px; object-fit: contain; display: block; }
.tech-logo-fa { font-size: 22px; width: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: #fff; }

/* Grid backdrop */
.grid-bg {
  background-image:
    linear-gradient(rgba(141,168,156,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141,168,156,0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
}

.divider-line { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* Forms */
.field {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }
.field::placeholder { color: #5a766b; }

/* Language switcher */
.lang-menu { min-width: 168px; }
.lang-link.active { color: var(--cyan); font-weight: 600; }

/* ===== RTL (Arabic) support ===== */
html[dir="rtl"] body { font-family: 'Noto Naskh Arabic', 'Inter', sans-serif; }
html[dir="rtl"] .mono { font-family: 'Noto Naskh Arabic', 'JetBrains Mono', monospace; }
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .marquee { animation-direction: reverse; }
/* Flip horizontal-only utilities that assume LTR */
html[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .float, .marquee, .text-grad, .blob, .wa-panel { animation: none; }
  body::before { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .text-grad { background-position: 0% 50%; }
  .logo-mark, .btn-primary::after { transition: none; }
}