/* Abdul Rahim GTM Portfolio - V5.2 refined */
:root{
  --bg:#f5efe6;
  --surface:#eee5d7;
  --surface-2:#e8ddcc;
  --ink:#171612;
  --muted:#736d63;
  --line:#d7cdbd;
  --accent:#9a7939;
  --green:#789b7c;
  --blue:#5b76a2;
  --red:#c56445;
  --dark:#12130f;
  --dark-soft:#1c1d18;
  --max:1120px;
}

html[data-theme="dark"]{
  --bg:#15130f;
  --surface:#211e19;
  --surface-2:#28231d;
  --ink:#f2eadf;
  --muted:#aaa095;
  --line:#3a3329;
  --accent:#d7b26a;
  --green:#91ae93;
  --blue:#8da7ce;
  --red:#dd7a59;
  --dark:#0d0e0b;
  --dark-soft:#171814;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;line-height:1.5;
  transition:background .2s ease,color .2s ease;
}
a{color:inherit;text-decoration:none}
.page{width:min(var(--max),calc(100% - 40px));margin:auto}

.scroll-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:100}
.scroll-progress span{display:block;width:0;height:100%;background:var(--accent)}

.theme-toggle{
  position:fixed;right:24px;top:22px;z-index:90;
  width:46px;height:46px;border:1px solid var(--line);border-radius:50%;
  background:rgba(245,239,230,.86);color:#171612;backdrop-filter:blur(12px);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .18s ease,background .2s ease,border-color .2s ease
}
html[data-theme="dark"] .theme-toggle{background:rgba(21,19,15,.86);color:#f2eadf}
.theme-toggle:hover{transform:rotate(9deg) scale(1.04)}
.theme-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .moon-icon{display:none}
html[data-theme="dark"] .theme-toggle .sun-icon{display:none}
html[data-theme="dark"] .theme-toggle .moon-icon{display:block}

.hero{
  min-height:820px;padding:92px 0 86px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:62px;align-items:center
}
.hello{margin:0 0 10px;color:var(--muted);font-size:clamp(25px,3vw,41px)}
.name-wrap{position:relative;display:inline-block}
h1{margin:0;font-size:clamp(78px,10.5vw,142px);letter-spacing:-.078em;line-height:.76}
h1 strong,h1 span{display:block}
h1 strong{font-weight:800}
h1 span{font-weight:300}

.signal-sticker{
  --drag-x:0px;--drag-y:0px;
  position:absolute;right:-104px;top:34px;width:195px;
  background:#ffd96b;color:#171612;border:2px solid #171612;border-radius:13px;
  padding:13px 14px;box-shadow:8px 9px 0 rgba(23,22,18,.95);
  transform:translate(var(--drag-x),var(--drag-y)) rotate(5deg);
  font-family:"Courier New",monospace;cursor:grab;touch-action:none;user-select:none;
  transition:box-shadow .18s ease;
  z-index:10
}
.signal-sticker:hover{box-shadow:11px 13px 0 rgba(23,22,18,.95)}
.signal-sticker.is-dragging{cursor:grabbing;box-shadow:13px 15px 0 rgba(23,22,18,.95);transition:none}
.sticker-top{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700;letter-spacing:.07em}
.drag-label{margin-left:auto;font-size:7px;opacity:.58}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:#ff5c46;box-shadow:0 0 0 4px rgba(255,92,70,.12)}
.signal-sticker>strong{display:block;font-size:16px;margin:10px 0 8px}
.sticker-row,.sticker-route{display:flex;justify-content:space-between;gap:8px;font-size:9px}
.sticker-row b{font-size:13px}
.sticker-route{margin-top:7px;padding-top:7px;border-top:1px dashed rgba(23,22,18,.45);justify-content:flex-start}

.hero-copy{margin:54px 0 0;max-width:680px;font-size:clamp(20px,2.2vw,28px);line-height:1.46}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.button{
  min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;transition:.18s ease
}
.button:hover{transform:translateY(-2px);border-color:var(--ink)}
.button-primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.button-icon{width:44px;padding:0}
.button-icon svg{width:18px;height:18px;fill:currentColor}

.hero-right{display:grid;gap:18px}
.system-card{background:var(--dark);color:#f3ede4;border-radius:18px;padding:24px;box-shadow:0 24px 50px rgba(48,38,23,.13)}
.system-head{display:flex;justify-content:space-between;align-items:center;color:#aaa99c;font:11px "Courier New",monospace;padding-bottom:17px;border-bottom:1px solid #303129}
.system-live{display:flex;align-items:center;gap:7px;color:#9fcca6}
.system-live i{width:7px;height:7px;background:#82ca92;border-radius:50%;box-shadow:0 0 0 5px rgba(130,202,146,.08)}
.route-line{padding-top:8px}
.route-node{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px dashed #303129}
.route-node:last-child{border-bottom:0}
.route-num{width:34px;height:34px;border-radius:10px;background:var(--dark-soft);display:grid;place-items:center;color:#8f9088;font-size:11px}
.route-node strong{display:block;font-size:14px}
.route-node small{display:block;color:#94968d;margin-top:2px}
.route-node>b{color:#86ddb0;font:10px "Courier New",monospace;letter-spacing:.05em}

.identity-row{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font:11px "Courier New",monospace}
.identity-row span{border-bottom:1px solid var(--line);padding-bottom:5px}

.section{padding:88px 0;border-top:1px solid var(--line)}
.section-heading{display:grid;grid-template-columns:180px 1fr;gap:30px;margin-bottom:42px}
.section-index{color:var(--muted);font:11px "Courier New",monospace;letter-spacing:.07em;padding-top:9px}
.section-heading h2,.resume-strip h2{margin:0;font-size:clamp(39px,5vw,66px);letter-spacing:-.055em;line-height:.96}
.section-heading h2 em{font-style:normal;color:var(--muted);font-weight:300}

/* Four equal project cards, like the earlier version */
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.project-card{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;min-height:540px;
  transition:transform .2s ease,box-shadow .2s ease
}
.project-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(51,42,28,.08)}
.project-visual{height:230px;min-height:230px;background:var(--surface-2);padding:24px;display:grid;place-items:center}
.project-body{padding:24px;display:flex;flex-direction:column;flex:1}
.project-meta{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font:10px "Courier New",monospace}
.status-live{color:var(--green)} .status-building{color:var(--accent)} .status-running{color:var(--red)} .status-client{color:var(--blue)}
.project-body h3{font-size:25px;letter-spacing:-.04em;margin:24px 0 6px}
.project-body h4{margin:0 0 10px;color:var(--accent);font-size:16px}
.project-body p{margin:0;color:var(--muted);min-height:96px}
.tool-row{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0}
.tool-row span{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 9px;color:var(--muted);font:10px "Courier New",monospace}
.project-link{margin-top:auto;border-top:1px solid var(--line);padding-top:16px;font-size:13px;font-weight:700}
.project-link-muted{color:var(--muted);font-weight:400}

.mini-window{width:min(100%,430px);background:#12130f;color:#f2eee8;border-radius:10px;padding:13px}
.mini-window-head{display:flex;justify-content:space-between;color:#92948b;font:10px "Courier New",monospace;padding:5px 5px 11px}
.mini-row{display:grid;grid-template-columns:1.4fr 1fr 52px;gap:8px;padding:11px 8px;border-top:1px solid #2c2d27;font:11px "Courier New",monospace}
.mini-row span{color:#aaa99c}.mini-row b{color:#91e0aa}.mini-head{color:#7f8178}
.flow-chain{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
.flow-chain span,.source-cluster span,.source-cluster strong{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 11px;font:10px "Courier New",monospace}
.flow-chain i{font-style:normal;color:var(--accent)}
.pipeline-bars{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%;align-items:end}
.pipeline-bars span{min-height:150px;border:1px solid var(--line);border-radius:8px;padding:8px 4px;display:grid;place-items:end center;background:linear-gradient(to top,rgba(154,121,57,.24),rgba(154,121,57,.03))}
.pipeline-bars b{font:9px "Courier New",monospace;color:var(--muted)}
.source-cluster{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;align-items:center;max-width:390px}
.source-cluster i{flex-basis:100%;text-align:center;color:var(--accent);font-style:normal}
.source-cluster strong{background:var(--ink);color:var(--bg)}

.work-method{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.method-line{margin:0;font-size:clamp(29px,4vw,46px);letter-spacing:-.04em;line-height:1.08}
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:52px 1fr;gap:15px;padding:15px 0;border-bottom:1px solid var(--line)}
.step b{color:var(--muted);font:11px "Courier New",monospace}
.step span{font-size:14px}

.stack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 42px}
.stack-grid article{display:grid;grid-template-columns:145px 1fr;gap:15px;padding:15px 0;border-bottom:1px solid var(--line)}
.stack-grid article span{color:var(--muted);font:10px "Courier New",monospace}
.stack-grid article strong{font-size:13px}

.resume-strip{
  margin:76px auto 86px;padding:38px;border:1px solid var(--line);border-radius:22px;
  background:var(--surface);display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:center
}
.resume-strip p{max-width:670px;color:var(--muted);font-size:16px}
.resume-card-link{
  min-height:170px;background:var(--dark);color:#f4efe8;border-radius:15px;padding:21px;
  display:flex;flex-direction:column;justify-content:space-between;transform:rotate(1.5deg);transition:transform .18s ease
}
.resume-card-link:hover{transform:rotate(0deg) translateY(-3px)}
.resume-card-link span{font:10px "Courier New",monospace;color:#aaa99d}
.resume-card-link strong{font-size:27px;letter-spacing:-.04em}
.resume-card-link small{font:11px "Courier New",monospace;color:#d3b870}

.site-footer{border-top:1px solid var(--line);padding:28px 0 40px}
.footer-inner{width:min(var(--max),calc(100% - 40px));margin:auto;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}
.footer-inner>div:first-child strong,.footer-inner>div:first-child span{display:block}
.footer-inner>div:first-child strong{font-size:13px}
.footer-inner>div:first-child span,.footer-clock{color:var(--muted);font:10px "Courier New",monospace}
.social-links{justify-self:end;display:flex;gap:8px}
.social-links a{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;transition:transform .18s ease,border-color .18s ease}
.social-links a:hover{transform:translateY(-3px) rotate(-2deg);border-color:var(--ink)}
.social-links svg{width:18px;height:18px;fill:currentColor}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:104px}
  .hero-left{max-width:760px}
  .signal-sticker{right:0;top:5px}
  .resume-strip{grid-template-columns:1fr}
  .section-heading{grid-template-columns:1fr;gap:12px}
  .work-method{grid-template-columns:1fr;gap:38px}
}
@media(max-width:700px){
  .projects-grid{grid-template-columns:1fr}
  .project-card{min-height:auto}
  .project-body p{min-height:auto}
}
@media(max-width:620px){
  .page,.footer-inner{width:min(var(--max),calc(100% - 24px))}
  .theme-toggle{right:12px;top:12px}
  h1{font-size:clamp(70px,22vw,104px)}
  .signal-sticker{position:relative;right:auto;top:auto;margin:24px 0 0 8px;display:inline-block;width:195px}
  .stack-grid{grid-template-columns:1fr}
  .stack-grid article{grid-template-columns:1fr;gap:5px}
  .resume-strip{padding:26px 20px}
  .footer-inner{grid-template-columns:1fr;justify-items:start}
  .social-links{justify-self:start}
}


/* ---------- V5.3 signature GTM signal rail ---------- */
.signal-rail{
  width:100%;
  min-height:58px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  overflow:hidden;
  color:var(--muted);
  font:10px "Courier New",monospace;
  letter-spacing:.035em;
}
.signal-rail-label{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  color:var(--ink);
  font-weight:700;
}
.rail-live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 12%,transparent);
  animation:railPulse 1.9s ease-in-out infinite;
}
.signal-rail-window{
  min-width:0;
  overflow:hidden;
  mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);
}
.signal-rail-track{
  width:max-content;
  display:flex;
  align-items:center;
  gap:13px;
  white-space:nowrap;
  animation:signalRailMove 27s linear infinite;
}
.signal-rail:hover .signal-rail-track{
  animation-play-state:paused;
}
.signal-rail-track span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.signal-rail-track b{
  color:var(--accent);
  font-weight:700;
}
.signal-rail-track i{
  color:var(--line);
  font-style:normal;
}
.signal-rail-demo{
  white-space:nowrap;
  color:var(--muted);
  opacity:.62;
}
@keyframes signalRailMove{
  to{transform:translateX(-50%)}
}
@keyframes railPulse{
  0%,100%{transform:scale(1);opacity:.72}
  50%{transform:scale(1.22);opacity:1}
}

/* Give the operating model a little more breathing room and hierarchy. */
#how-i-work .method-line{
  max-width:620px;
}
#how-i-work .step{
  transition:padding-left .18s ease,background .18s ease;
}
#how-i-work .step:hover{
  padding-left:8px;
  background:color-mix(in srgb,var(--surface) 44%,transparent);
}
#how-i-work .step:hover b{
  color:var(--accent);
}

/* A tiny animated "signal travelling through the system" detail. */
.route-node{
  position:relative;
}
.route-node::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  width:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#86ddb0,transparent);
  opacity:.7;
}
.route-node:nth-child(1)::after{animation:nodeSignal 7s ease-in-out infinite 0s}
.route-node:nth-child(2)::after{animation:nodeSignal 7s ease-in-out infinite 1.15s}
.route-node:nth-child(3)::after{animation:nodeSignal 7s ease-in-out infinite 2.3s}
.route-node:nth-child(4)::after{animation:nodeSignal 7s ease-in-out infinite 3.45s}
.route-node:nth-child(5)::after{animation:nodeSignal 7s ease-in-out infinite 4.6s}
@keyframes nodeSignal{
  0%,75%,100%{width:0;opacity:0}
  84%{width:100%;opacity:.75}
  92%{width:0;opacity:0}
}

@media(max-width:760px){
  .signal-rail{
    grid-template-columns:auto 1fr;
    gap:12px;
    min-height:54px;
  }
  .signal-rail-demo{display:none}
}
@media(prefers-reduced-motion:reduce){
  .signal-rail-track,
  .rail-live-dot,
  .route-node::after{
    animation:none !important;
  }
}


/* ---------- V5.4 final layout refinements ---------- */

/* Align chapter label + heading to the same left edge.
   This removes the "floating middle heading" feeling. */
.section-heading{
  display:block;
  margin-bottom:38px;
}
.section-heading .section-index{
  display:block;
  padding-top:0;
  margin-bottom:12px;
}
.section-heading h2{
  max-width:980px;
}

/* Tighten the transition from the GTM feed into selected systems. */
#systems{
  padding-top:62px;
}
.signal-rail{
  margin-bottom:0;
}

/* Cleaner operating-model composition. */
#how-i-work .section-heading{
  margin-bottom:44px;
}
#how-i-work .work-method{
  grid-template-columns:.92fr 1.08fr;
  gap:68px;
  align-items:start;
}
#how-i-work .method-line{
  max-width:560px;
  font-size:clamp(31px,3.65vw,52px);
  line-height:1.06;
}

/* GTM Stack should read immediately as a section, not a floating title. */
#stack .section-heading{
  margin-bottom:34px;
}

/* Slightly reduce dead space between major sections. */
.section{
  padding-top:78px;
  padding-bottom:78px;
}
.resume-strip{
  margin-top:68px;
}

/* Keep the four project cards equal and visually balanced. */
.projects-grid{
  align-items:stretch;
}
.project-card{
  height:100%;
}
.project-body{
  min-height:300px;
}

/* Desktop chapter rhythm */
@media(min-width:901px){
  .section-heading .section-index{
    margin-left:0;
  }
}

/* Responsive: preserve simple single-column reading flow. */
@media(max-width:900px){
  #how-i-work .work-method{
    grid-template-columns:1fr;
    gap:34px;
  }
  #how-i-work .method-line{
    max-width:720px;
  }
}