/* ============================================================
   SAJJAD HUSSAIN — PORTFOLIO STYLESHEET
   This is the ONLY file that controls colors, fonts and spacing
   for every page. Change a value here and it updates everywhere.
   ============================================================ */

:root{
  /* ---- EDIT COLORS HERE ---- */
  --bg:#0A0A0B;
  --card:#161514;
  --primary:#E8A33D;
  --secondary:#7FB69E;
  --accent:#D9634A;
  --text:#F5F1EA;
  --subtext:#A89E93;
  --border:rgba(168,158,147,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
  position:relative;
}
::selection{background:var(--primary); color:#fff;}
.font-display{font-family:'Space Grotesk', sans-serif;}
.font-alt{font-family:'Plus Jakarta Sans', sans-serif;}
.font-mono{font-family:'JetBrains Mono', monospace;}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--primary),var(--accent)); border-radius:8px;}

.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(168,158,147,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,158,147,0.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.glow-orb{position:fixed; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; animation:orbDrift 16s ease-in-out infinite alternate;}
.glow-orb:nth-of-type(2){animation-duration:20s; animation-delay:-6s;}
.glow-orb:nth-of-type(3){animation-duration:24s; animation-delay:-11s;}
@keyframes orbDrift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(26px,-22px) scale(1.08); }
}

.grain{
  position:fixed; inset:-60px; z-index:0; pointer-events:none; opacity:0.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.section{position:relative; z-index:1; padding:100px 24px;}
.section.first{padding-top:150px;}
@media (max-width:768px){ .section{padding:64px 20px;} .section.first{padding-top:120px;} }
.container{max-width:1180px; margin:0 auto;}

.glass{
  background:linear-gradient(180deg, rgba(11,18,32,0.7), rgba(11,18,32,0.4));
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s;
  will-change:transform;
}
.card:hover{
  border-color:rgba(232,163,61,0.4);
  box-shadow:0 20px 60px -20px rgba(232,163,61,0.25);
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--secondary); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{content:''; width:24px; height:1px; background:var(--secondary);}

.grad-text{
  background:linear-gradient(90deg, var(--primary), var(--accent) 60%, var(--secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  color:#fff; font-weight:600; font-size:14px;
  padding:14px 26px; border-radius:10px; border:none; cursor:pointer;
  transition:transform .3s, box-shadow .3s; position:relative;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(232,163,61,0.5);}
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--text); font-weight:600; font-size:14px;
  padding:14px 26px; border-radius:10px; border:1px solid var(--border); cursor:pointer;
  transition:all .3s;
}
.btn-ghost:hover{border-color:rgba(168,158,147,0.4); background:rgba(168,158,147,0.06);}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---- NAV ---- */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:18px 24px; transition:background .4s, border-color .4s, padding .4s;
  border-bottom:1px solid transparent;
}
#nav.scrolled{background:rgba(5,8,22,0.85); backdrop-filter:blur(16px); border-color:var(--border); padding:12px 24px;}
.nav-link{color:var(--subtext); font-size:14px; font-weight:500; transition:color .25s; position:relative; padding-bottom:2px;}
.nav-link::after{content:''; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:var(--secondary); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.16,1,.3,1);}
.nav-link:hover, .nav-link.active{color:var(--text);}
.nav-link.active{color:var(--secondary);}
.nav-link:hover::after, .nav-link.active::after{transform:scaleX(1);}
#mobile-menu-btn{display:none; background:none; border:none; color:#fff; cursor:pointer;}
#mobile-menu{
  display:none; position:fixed; inset:0; z-index:60; background:rgba(5,8,22,0.98);
  backdrop-filter:blur(10px); flex-direction:column; align-items:center; justify-content:center; gap:28px;
}
#mobile-menu.open{display:flex;}
#mobile-menu a{font-size:22px; font-family:'Space Grotesk',sans-serif; font-weight:600;}
#mobile-close{position:absolute; top:24px; right:24px; background:none; border:none; color:#fff; cursor:pointer;}

@media (max-width:860px){
  #desktop-links{display:none !important;}
  #mobile-menu-btn{display:block;}
}

#typed-role{color:var(--secondary); font-family:'JetBrains Mono', monospace;}
.cursor-blink{display:inline-block; width:2px; background:var(--secondary); margin-left:2px; animation:blink 1s step-start infinite;}
@keyframes blink{50%{opacity:0;}}

.particle{position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(232,163,61,0.8), transparent 70%); pointer-events:none;}
@keyframes float-up{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  10%{opacity:1;} 90%{opacity:1;}
  100%{transform:translateY(-140px) translateX(20px); opacity:0;}
}

.pipeline-line{stroke-dasharray:6 6; animation:dash 3s linear infinite;}
@keyframes dash{to{stroke-dashoffset:-120;}}
.pipeline-pulse{animation:pulse-move 4s ease-in-out infinite;}
@keyframes pulse-move{
  0%{offset-distance:0%; opacity:0;} 8%{opacity:1;} 92%{opacity:1;}
  100%{offset-distance:100%; opacity:0;}
}

.timeline-line{position:absolute; left:19px; top:0; bottom:0; width:2px; background:linear-gradient(var(--primary), var(--accent), transparent);}
@media (max-width:640px){.timeline-line{left:15px;}}

.skill-pill{
  font-size:13px; font-family:'JetBrains Mono',monospace; padding:8px 14px; border-radius:8px;
  background:rgba(232,163,61,0.08); border:1px solid rgba(232,163,61,0.2); color:#E5DFD3;
  transition:all .25s; display:inline-block;
}
.skill-pill:hover{background:rgba(232,163,61,0.16); border-color:rgba(232,163,61,0.5); transform:translateY(-2px);}

#loader{
  position:fixed; inset:0; z-index:999; background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.hide{opacity:0; visibility:hidden;}
.loader-bar{width:180px; height:2px; background:rgba(168,158,147,0.15); border-radius:2px; overflow:hidden;}
.loader-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--primary),var(--accent)); animation:load 1.4s ease-in-out forwards;}
@keyframes load{to{width:100%;}}

.stat-num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(32px,4vw,48px);}

input, textarea{
  background:rgba(168,158,147,0.05); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; color:var(--text); font-family:'Inter',sans-serif; font-size:14px; width:100%;
  transition:border-color .25s, background .25s;
}
input:focus, textarea:focus{outline:none; border-color:var(--primary); background:rgba(232,163,61,0.05);}
input::placeholder, textarea::placeholder{color:#726A5F;}

a{color:inherit; text-decoration:none;}

.marquee-track{display:flex; gap:48px; animation:marquee 28s linear infinite; width:max-content;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

.page-header{padding:150px 24px 60px; position:relative; z-index:1;}
@media (max-width:768px){.page-header{padding:120px 20px 40px;}}

.photo-frame{
  position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--border);
  background:var(--card);
}
.photo-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(5,8,22,0.5));
  pointer-events:none;
}
.photo-tag{
  position:absolute; bottom:16px; left:16px; z-index:2;
  background:rgba(10,10,11,0.72); backdrop-filter:blur(8px); border:1px solid var(--border);
  padding:8px 14px; border-radius:8px; font-size:12px; font-family:'JetBrains Mono',monospace; color:var(--secondary);
  max-width:calc(100% - 32px);
}
@media (max-width:640px){
  .photo-tag{ font-size:10.5px; padding:6px 10px; bottom:10px; left:10px; max-width:calc(100% - 20px); line-height:1.4; }
}

/* Responsive grid helpers used across pages */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr 1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
}

/* Two-column layout helpers — these were missing before, causing the
   about/services/education/contact pages to stay side-by-side and
   squash the photo on mobile. Now every split layout collapses to
   a single column under 860px. */
.split{display:grid; gap:50px; align-items:start;}
.split-55-45{grid-template-columns:1.1fr .9fr;}
.split-45-55{grid-template-columns:.9fr 1.1fr;}
.split-60-40{grid-template-columns:1.2fr .8fr;}
.split-40-60{grid-template-columns:.8fr 1.2fr;}
.split-center{align-items:center;}
@media (max-width:860px){
  .split-55-45, .split-45-55, .split-60-40, .split-40-60{
    grid-template-columns:1fr !important; gap:36px;
  }
}
.hide-mobile{}
@media (max-width:860px){ .hide-mobile{display:none !important;} }

footer.site-footer{padding:50px 24px; border-top:1px solid var(--border); position:relative; z-index:1;}

/* ---- Cursor spotlight ---- */
#cursor-spot{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(650px circle at var(--x,50%) var(--y,-20%), rgba(232,163,61,0.10), transparent 42%);
  transition:background .1s linear;
}
@media (max-width:860px){ #cursor-spot{display:none;} }

/* ---- Button ripple ---- */
.btn-primary, .btn-ghost{position:relative; overflow:hidden;}
.ripple-el{
  position:absolute; border-radius:50%; background:rgba(255,255,255,0.45);
  transform:scale(0); opacity:1; pointer-events:none; animation:rippleAnim .65s ease-out forwards;
}
@keyframes rippleAnim{ to{ transform:scale(3.2); opacity:0; } }

/* ---- Card tilt (JS sets transform inline; this just smooths it) ---- */
.card{ transform-style:preserve-3d; }

/* ---- WhatsApp success state ---- */
.wa-success{
  display:flex; align-items:center; gap:10px; color:var(--secondary); font-size:13px;
  opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease;
}
.wa-success.show{opacity:1; transform:translateY(0);}
.wa-check{
  width:20px; height:20px; border-radius:50%; background:rgba(127,182,158,0.15);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.wa-check svg{ stroke-dasharray:20; stroke-dashoffset:20; animation:checkDraw .5s ease forwards .15s; }
@keyframes checkDraw{ to{ stroke-dashoffset:0; } }

/* ---- Subtle floating for hero SVG nodes ---- */
@keyframes nodeFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
.pipeline-node-anim{ animation:nodeFloat 3.5s ease-in-out infinite; }

/* ---- Gradient shimmer on primary buttons ---- */
.btn-primary{ background-size:200% 100%; animation:shimmer 6s linear infinite; }
@keyframes shimmer{ 0%{ background-position:0% 50%;} 100%{ background-position:200% 50%;} }