/* =========================================================
   Page-specific composition — built on tokens in style.css
   ========================================================= */

/* ---------- HERO (home) ---------- */
.hero{
  padding-top:clamp(3.5rem,8vw,6rem);
  display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center;
}
@media (max-width:980px){ .hero{ grid-template-columns:1fr; } }
.hero-copy .terminal-line{
  font-family:var(--f-mono); font-size:.86rem; color:var(--signal);
  display:flex; align-items:center; gap:.6em; margin-bottom:1.4em;
}
.hero-copy .terminal-line .caret{
  display:inline-block; width:8px; height:1.1em; background:var(--signal);
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
.hero-copy h1{ margin-bottom:.4em; }
.hero-copy h1 .accent{
  background:linear-gradient(100deg, var(--blue-300), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin:1.8em 0 2.2em; }
.hero-meta{ display:flex; gap:2.4rem; flex-wrap:wrap; }
.hero-meta div{ font-family:var(--f-mono); font-size:.78rem; color:var(--ink-2); }
.hero-meta strong{ display:block; font-family:var(--f-display); font-size:1.3rem; color:var(--ink-0); font-weight:600; }

/* signature: the infinity pipeline console */
.pipeline-console{
  background:linear-gradient(165deg, var(--surface), var(--surface-2));
  border:1px solid var(--surface-border);
  border-radius:var(--radius-l);
  padding:1.6rem;
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.6);
}
.console-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.console-dots{ display:flex; gap:.4em; }
.console-dots span{ width:9px; height:9px; border-radius:50%; background:var(--ink-3); }
.console-title{ font-family:var(--f-mono); font-size:.74rem; color:var(--ink-2); }
.console-status{ font-family:var(--f-mono); font-size:.7rem; color:var(--signal); display:flex; align-items:center; gap:.5em; }
.console-status::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 3px rgba(52,224,161,0.2); }

.pipeline-svg{ width:100%; height:auto; display:block; }
.pipeline-svg .loop{ fill:none; stroke:url(#pipeGrad); stroke-width:3; stroke-linecap:round; }
.pipeline-svg .node-ring{ fill:var(--bg-soft); stroke:var(--blue-400); stroke-width:2; }
.pipeline-svg .node-dot{ fill:var(--blue-400); }
.pipeline-svg .node-label{ font-family:var(--f-mono); font-size:9px; fill:var(--ink-2); letter-spacing:.03em; }
.pipeline-svg .pulse{ fill:var(--cyan); }
.pipeline-svg .flow-dash{
  stroke-dasharray: 6 10; animation: dash 3.2s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset:-160; } }

.console-log{ margin-top:1.2rem; font-family:var(--f-mono); font-size:.74rem; color:var(--ink-2); display:grid; gap:.45em; }
.console-log span.ok{ color:var(--signal); }
.console-log span.mut{ color:var(--ink-3); }

/* trust strip */
.trust-strip{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.trust-strip .pill{ font-size:.72rem; }

/* ---------- SERVICES ---------- */
.service-block{ margin-bottom:3.2rem; }
.service-block-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.service-block-head .tag{ font-family:var(--f-mono); font-size:.78rem; color:var(--ink-3); }
.service-card h3{ display:flex; align-items:center; gap:.6em; }
.service-icon{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(47,111,238,0.12); border:1px solid rgba(91,139,255,0.28); color:var(--blue-300); flex:none;
}
.service-icon svg{ width:19px; height:19px; }
.service-card p{ font-size:.94rem; }

.stack-strip{
  display:flex; flex-wrap:wrap; gap:.6rem; padding:1.6rem 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.stack-chip{
  font-family:var(--f-mono); font-size:.78rem; padding:.5em 1em; border-radius:999px;
  border:1px solid var(--surface-border); color:var(--ink-1); background:var(--surface);
}

/* ---------- WHY US ---------- */
.handover-panel{
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start;
}
@media (max-width:920px){ .handover-panel{ grid-template-columns:1fr; } }
.handover-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
.handover-list li{
  display:flex; gap:.9em; align-items:flex-start; font-size:.96rem; color:var(--ink-1);
  padding:1rem 1.1rem; border:1px solid var(--surface-border); border-radius:var(--radius-m); background:var(--surface);
}
.handover-list li .check{
  flex:none; width:22px; height:22px; border-radius:50%; background:rgba(52,224,161,0.14);
  color:var(--signal); display:flex; align-items:center; justify-content:center; font-size:.8rem; margin-top:.1em;
}
.reason-grid .card h3{ margin-bottom:.5em; }
.reason-grid .num{ font-family:var(--f-mono); color:var(--ink-3); font-size:.8rem; display:block; margin-bottom:.8em; }

.repo-mock{
  background:var(--bg-soft); border:1px solid var(--surface-border); border-radius:var(--radius-m);
  font-family:var(--f-mono); font-size:.8rem; overflow:hidden;
}
.repo-mock-head{ padding:.9em 1.1em; border-bottom:1px solid var(--hairline); color:var(--ink-2); display:flex; justify-content:space-between; }
.repo-mock ul{ list-style:none; margin:0; padding:.4em 0; }
.repo-mock li{ padding:.55em 1.1em; display:flex; justify-content:space-between; color:var(--ink-1); }
.repo-mock li:hover{ background:var(--surface-2); }
.repo-mock li .dim{ color:var(--ink-3); }

/* ---------- PORTFOLIO ---------- */
.work-card{ display:grid; grid-template-columns:.9fr 1.1fr; gap:0; overflow:hidden; padding:0; }
@media (max-width:820px){ .work-card{ grid-template-columns:1fr; } }
.work-visual{
  background:var(--grad-brand); position:relative;
  /* Fixed aspect ratio instead of min-height + grid-row stretch: previously
     this box's height tracked however tall the sibling text column
     happened to be, which produced two bad outcomes depending on the fix
     tried — either the image got cropped hard to fill an arbitrarily TALL
     box (object-fit:cover), or it sat tiny and lost in a sea of empty
     gradient (object-fit:contain). A fixed ratio makes the box's shape
     predictable regardless of description length, so a cover-fitted image
     crops gently instead of unpredictably either way. */
  aspect-ratio:4 / 3;
  align-self:center;
  padding:1.6rem;
  overflow:hidden;
}
@media (max-width:820px){ .work-visual{ aspect-ratio:16 / 10; } }
/* Absolute-centering instead of relying on flex centering: this stays
   perfectly centered no matter how tall the grid stretches this panel
   to match its sibling's content (which is what was pushing the icon
   toward the top-left before). */
.work-visual svg{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:70%; max-width:220px; height:auto; opacity:.92;
}
.work-body{ padding:2rem; display:flex; flex-direction:column; justify-content:center; align-self:center; }
.work-body .tag{ margin-bottom:.6em; }
.work-meta{ display:flex; flex-wrap:wrap; gap:1.6rem; margin:1.2rem 0; }
.work-meta div{ font-family:var(--f-mono); font-size:.72rem; color:var(--ink-3); }
.work-meta strong{ display:block; color:var(--ink-0); font-family:var(--f-body); font-size:.92rem; font-weight:600; margin-top:.25em; }

/* Portfolio to CTA spacing */
main#main > .portfolio-bottom-cta {
    margin-top: 40px;
}

/* ---------- PROCESS ---------- */
.timeline{ position:relative; margin-top:2.5rem; }
.timeline::before{
  content:""; position:absolute; left:27px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(var(--blue-500), var(--cyan), var(--surface-border));
}
@media (max-width:700px){ .timeline::before{ left:19px; } }
.tl-step{ position:relative; padding-left:76px; margin-bottom:2.6rem; }
@media (max-width:700px){ .tl-step{ padding-left:56px; } }
.tl-step:last-child{ margin-bottom:0; }
.tl-marker{
  position:absolute; left:0; top:0; width:56px; height:56px; border-radius:50%;
  background:var(--surface); border:1px solid var(--surface-border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:1rem; color:var(--blue-300);
}
@media (max-width:700px){ .tl-marker{ width:40px; height:40px; font-size:.82rem; } }
.tl-step.is-live .tl-marker{ border-color:var(--blue-400); box-shadow:0 0 0 5px rgba(47,111,238,0.14); color:var(--ink-0); background:var(--grad-brand); }
.tl-head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:.4em; }
.tl-duration{ font-family:var(--f-mono); font-size:.76rem; color:var(--signal); border:1px solid rgba(52,224,161,0.3); padding:.25em .7em; border-radius:999px; }
.tl-step p{ max-width:64ch; font-size:.95rem; }
.tl-deliv{ list-style:none; margin:.8em 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5em; }
.tl-deliv li{ font-family:var(--f-mono); font-size:.72rem; color:var(--ink-2); background:var(--surface); border:1px solid var(--surface-border); padding:.35em .75em; border-radius:6px; }

/* faq */
.faq-item{ border-bottom:1px solid var(--hairline); padding:1.5rem 0; }
.faq-item summary{ cursor:pointer; font-family:var(--f-display); font-size:1.05rem; color:var(--ink-0); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:var(--f-mono); color:var(--blue-300); font-size:1.3rem; transition:transform .2s; flex:none; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin-top:1em; font-size:.94rem; }