@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Cairo:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg-primary:#080810;
  --bg-secondary:#0e0e1a;
  --bg-tertiary:#161625;
  --bg-card:rgba(255,255,255,0.02);
  --bg-glass:rgba(255,255,255,0.04);
  --bg-glass-hover:rgba(255,255,255,0.07);
  --border-subtle:rgba(255,255,255,0.06);
  --border-glow:rgba(255,255,255,0.12);
  --text-primary:#e4e4ed;
  --text-secondary:#8585a0;
  --text-muted:#4a4a60;
  --accent:#00d4ff;
  --accent-rgb:0,212,255;
  --accent-design:#e040fb;
  --accent-design-rgb:224,64,251;
  --accent-video:#ff5252;
  --accent-video-rgb:255,82,82;
  --accent-motion:#ffd740;
  --accent-motion-rgb:255,215,64;
  --accent-research:#69f0ae;
  --accent-research-rgb:105,240,174;
  --accent-pres:#448aff;
  --accent-pres-rgb:68,138,255;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-xl:32px;
  --transition-fast:0.2s cubic-bezier(.4,0,.2,1);
  --transition-base:0.35s cubic-bezier(.4,0,.2,1);
  --transition-slow:0.6s cubic-bezier(.4,0,.2,1);
  --font-sans:'Inter',system-ui,sans-serif;
  --font-ar:'Cairo','Inter',sans-serif;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-quart:cubic-bezier(.25,.46,.45,.94);
  color-scheme:dark;
}

[data-theme="light"]{
  --bg-primary:#f0f0f8;
  --bg-secondary:#ffffff;
  --bg-tertiary:#e8e8f2;
  --bg-card:rgba(0,0,0,0.02);
  --bg-glass:rgba(255,255,255,0.6);
  --bg-glass-hover:rgba(255,255,255,0.8);
  --border-subtle:rgba(0,0,0,0.08);
  --border-glow:rgba(0,0,0,0.12);
  --text-primary:#1a1a2e;
  --text-secondary:#555570;
  --text-muted:#888898;
  --accent:#0099cc;
  --accent-rgb:0,153,204;
  color-scheme:light;
}

html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  font-family:var(--font-sans);
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background var(--transition-slow),color var(--transition-slow),border-color var(--transition-slow),box-shadow var(--transition-slow);
}
.theme-ripple {
  position: fixed; border-radius: 50%; z-index: 9999;
  background: var(--bg-primary); pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: theme-ripple-expand 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes theme-ripple-expand {
  to { transform: translate(-50%, -50%) scale(150); opacity: 0; }
}
[dir="rtl"] body{font-family:var(--font-ar)}

h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:700;color:var(--text-primary)}
h1{font-size:clamp(2.5rem,6vw,5.5rem);font-weight:800;letter-spacing:-0.03em}
h2{font-size:clamp(1.8rem,3.5vw,3rem);letter-spacing:-0.02em}
h3{font-size:clamp(1.2rem,2vw,1.6rem)}
h4{font-size:clamp(1rem,1.5vw,1.25rem)}

p{color:var(--text-secondary);max-width:65ch}

a{color:inherit;text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--accent)}

button{
  font-family:inherit;font-size:inherit;
  border:none;background:none;cursor:pointer;
  color:inherit;outline:none;
}

img,video{max-width:100%;display:block}
ul,ol{list-style:none}

::selection{background:rgba(var(--accent-rgb),0.3);color:var(--text-primary)}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),0.3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--accent-rgb),0.5)}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Global Ambient Orbs */
#bgSnakesCanvas {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -2; pointer-events: none; opacity: 0.8;
  filter: blur(8px);
}
.global-ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.global-orb {
  position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.15;
}
[data-theme="light"] .global-orb { opacity: 0.25; }
.global-orb--1 {
  width: 600px; height: 600px; background: rgba(var(--accent-rgb), 0.8);
  top: -200px; left: -200px;
  animation: drift-orb-1 25s ease-in-out infinite alternate;
}
.global-orb--2 {
  width: 700px; height: 700px; background: rgba(var(--accent-design-rgb), 0.6);
  bottom: -300px; right: -200px;
  animation: drift-orb-2 30s ease-in-out infinite alternate;
}
.global-orb--3 {
  width: 500px; height: 500px; background: rgba(var(--accent-video-rgb), 0.5);
  top: 40%; left: 60%;
  animation: drift-orb-3 35s ease-in-out infinite alternate;
}

@keyframes drift-orb-1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(100px, 150px) scale(1.2); }
}
@keyframes drift-orb-2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-150px, -100px) scale(1.1); }
}
@keyframes drift-orb-3 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-100px, 200px) scale(1.3); }
}