:root {
  color-scheme: dark;
}
html, body { background: #000; }
body {
  font-family: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', Cantarell, sans-serif;
  color: #E1E0CC;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* SVG noise utilities */
.noise-overlay {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
.bg-noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 300px 300px;
}

/* Subtle grain for cards */
.grain::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  mix-blend-mode: overlay;
  border-radius: inherit;
}

/* Smooth cross-fade loop for the hero video */
.video-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 900ms ease-in-out;
  will-change: opacity;
}

/* Marquee for partner logos */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 40s linear infinite; }

/* Field styles */
.field {
  background: #0d0d0d;
  border: 1px solid rgba(225, 224, 204, 0.08);
  color: #E1E0CC;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field:focus {
  outline: none;
  border-color: rgba(225, 224, 204, 0.35);
  background: #121212;
  box-shadow: 0 0 0 4px rgba(222, 219, 200, 0.06);
}
.field::placeholder { color: rgba(225, 224, 204, 0.35); }

/* Subtle hairline divider */
.hairline { background: linear-gradient(to right, transparent, rgba(225,224,204,0.14), transparent); height: 1px; }

/* Project thumbnail placeholder stripes */
.stripe-fill {
  background-image: repeating-linear-gradient(135deg,
    rgba(225,224,204,0.06) 0 10px,
    rgba(225,224,204,0.02) 10px 22px);
}
.stripe-fill-2 {
  background-image: repeating-linear-gradient(45deg,
    rgba(225,224,204,0.08) 0 8px,
    rgba(225,224,204,0.02) 8px 20px);
}
.stripe-fill-3 {
  background-image: repeating-linear-gradient(90deg,
    rgba(225,224,204,0.05) 0 2px,
    rgba(225,224,204,0.01) 2px 14px);
}

/* Small dotted grid for dashboards */
.dot-grid {
  background-image: radial-gradient(rgba(225,224,204,0.12) 1px, transparent 1px);
  background-size: 14px 14px;
}

/* Hide scrollbars on marquees */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Input auto-fill fix */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: #E1E0CC;
  -webkit-box-shadow: 0 0 0 1000px #0d0d0d inset;
  caret-color: #E1E0CC;
}

/* Focus ring for keyboard users on buttons */
button:focus-visible, a:focus-visible {
  outline: 2px solid rgba(222, 219, 200, 0.5);
  outline-offset: 3px;
  border-radius: 9999px;
}

/* Selection */
::selection { background: #DEDBC8; color: #000; }