:root{
  --bg:#07070b;
  --bg-elev:#0e0e16;
  --line:rgba(255,255,255,0.08);
  --ink:#f3f3f8;
  --ink-dim:#9a9aab;
  --blue:#4f8cff;
  --purple:#8b5cf6;
  --cyan:#22d3ee;
}
*{scroll-behavior:smooth;}
html{background:var(--bg);}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}
.font-display{font-family:'Space Grotesk',sans-serif;}
.font-mono{font-family:'JetBrains Mono',monospace;}

::selection{background:var(--purple);color:#fff;}

/* scrollbar */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:#26263a;border-radius:8px;}

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

/* ---------- Mesh / glow backgrounds ---------- */
.mesh-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
.noise{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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");
}
.cursor-glow{
  position:fixed; width:520px; height:520px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(79,140,255,0.10), rgba(139,92,246,0.05) 45%, transparent 70%);
  transform:translate(-50%,-50%);
  transition:opacity .3s ease;
  will-change:transform;
}

/* glass */
.glass{
  background:rgba(20,20,32,0.55);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line);
}
.glow-border{
  position:relative;
}
.glow-border::before{
  content:'';
  position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(79,140,255,0.5), rgba(139,92,246,0.35), rgba(34,211,238,0.4));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s ease; pointer-events:none;
}
.glow-border:hover::before{opacity:1;}

.text-gradient{
  background:linear-gradient(100deg, #ffffff 10%, #b9c9ff 45%, #8b5cf6 75%, #22d3ee 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.bg-grid{
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, black 40%, transparent 100%);
}

/* reveal */
.reveal{opacity:0; transform:translateY(28px); filter:blur(6px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease;}
.reveal.in{opacity:1; transform:translateY(0); filter:blur(0);}
.reveal-scale{opacity:0; transform:scale(.92); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal-scale.in{opacity:1; transform:scale(1);}

.float{animation:float 6s ease-in-out infinite;}
.float-slow{animation:float 9s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0) translateX(0);} 50%{transform:translateY(-22px) translateX(10px);}}

.grad-move{background-size:200% 200%; animation:gradShift 8s ease infinite;}
@keyframes gradShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

.magnetic{transition:transform .25s cubic-bezier(.2,.8,.2,1);}

/* nav link underline */
.nav-link{position:relative;}
.nav-link::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:linear-gradient(90deg,var(--blue),var(--purple));transition:width .3s ease;}
.nav-link:hover::after{width:100%;}

/* loader */
#loader{position:fixed; inset:0; z-index:100; background:#07070b; display:flex; align-items:center; justify-content:center; transition:opacity .6s ease, visibility .6s ease;}
#loader.hide{opacity:0; visibility:hidden;}

.card-hover{transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;}
.card-hover:hover{transform:translateY(-6px);}

.accordion-content{max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.2,.8,.2,1), padding .3s ease;}

.timeline-line{
  background:linear-gradient(180deg, transparent, var(--blue) 10%, var(--purple) 50%, var(--cyan) 90%, transparent);
}

@media (min-width:1024px){
  .timeline-line-h{background:linear-gradient(90deg, transparent, var(--blue) 8%, var(--purple) 50%, var(--cyan) 92%, transparent);}
}

/* dynamic component styles */
.tag{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.03em; color:rgba(255,255,255,.55); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); padding:4px 10px; border-radius:999px;}
.form-label{display:block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.05em; color:rgba(255,255,255,.4); margin-bottom:8px;}
.form-input{width:100%; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:12px 14px; font-size:14px; color:#f3f3f8; outline:none; transition:border-color .3s ease, background .3s ease;}
.form-input:focus{border-color:#4f8cff; background:rgba(255,255,255,.05);}
.mobile-link{transition:color .2s ease;}
.mobile-link:hover{color:#fff;}
.process-dot{width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:600; background:#0e0e16; border:1px solid rgba(255,255,255,.15); position:relative; z-index:2;}