/* =========================================================
   YUVRAJ GUPTA — PORTFOLIO
   Design tokens, layout system and component styles.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* surfaces */
  --bg: #08090D;
  --bg-elevated: #0D0F16;
  --surface: rgba(255,255,255,0.045);
  --surface-strong: rgba(255,255,255,0.07);
  --surface-border: rgba(255,255,255,0.09);
  --surface-border-strong: rgba(255,255,255,0.16);

  /* text */
  --text-primary: #F3F4F7;
  --text-secondary: #B7BAC7;
  --text-muted: #7C7F93;

  /* accents */
  --violet: #7C6FFF;
  --violet-soft: #A79BFF;
  --cyan: #4FD1FF;
  --coral: #FF6B6B;
  --gold: #FFC876;

  --gradient-primary: linear-gradient(135deg, var(--violet) 0%, var(--cyan) 100%);
  --gradient-text: linear-gradient(135deg, #B6ADFF 0%, #7FE3FF 55%, #7FF0D9 100%);
  --gradient-radial: radial-gradient(circle at 30% 20%, rgba(124,111,255,.35), transparent 60%);

  /* type */
  --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* layout */
  --max-w: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
*{ margin:0; padding:0; }
html{
  scroll-behavior: smooth;
  color-scheme: dark;
}
body{
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; background:none; border:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-0.02em; }

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

:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background: var(--violet); color:#fff; padding:12px 18px;
  border-radius: 0 0 8px 0; z-index: 1000;
}
.skip-link:focus{ left:0; }

/* ---------- Layout helpers ---------- */
.section{ position:relative; padding: clamp(80px, 12vw, 140px) 0; }
.section__inner{ max-width: var(--max-w); margin:0 auto; padding: 0 var(--pad); }
.section__head{ max-width: 640px; margin-bottom: clamp(40px, 6vw, 64px); }
.section__eyebrow{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}
.section__title{
  font-size: clamp(28px, 4vw, 42px);
  color: var(--text-primary);
}
.section__note{ margin-top:10px; color: var(--text-muted); font-size:14px; }

.glass-card{
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-l);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 60px -30px rgba(0,0,0,.6);
  transition: transform .5s var(--ease), border-color .4s var(--ease), background .4s var(--ease), box-shadow .5s var(--ease);
}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-visible{ opacity: 1; transform: none; }

/* ---------- Background layers ---------- */
.bg-layer{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.blob{
  position:absolute;
  border-radius:50%;
  filter: blur(90px);
  opacity:.55;
  will-change: transform;
}
.blob--one{
  width:44vw; height:44vw; top:-14vw; left:-10vw;
  background: radial-gradient(circle, rgba(124,111,255,.55), transparent 70%);
  animation: float-a 22s ease-in-out infinite;
}
.blob--two{
  width:38vw; height:38vw; bottom:-16vw; right:-8vw;
  background: radial-gradient(circle, rgba(79,209,255,.4), transparent 70%);
  animation: float-b 26s ease-in-out infinite;
}
.blob--three{
  width:26vw; height:26vw; top:40%; left:50%;
  background: radial-gradient(circle, rgba(255,200,118,.22), transparent 70%);
  animation: float-c 30s ease-in-out infinite;
}
@keyframes float-a{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(6vw, 8vw) scale(1.1); }
}
@keyframes float-b{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-5vw,-6vw) scale(1.08); }
}
@keyframes float-c{
  0%,100%{ transform: translate(-50%,-50%) scale(1); }
  50%{ transform: translate(-45%,-55%) scale(1.15); }
}
.grain{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity:.5;
}

.cursor-glow{
  position:fixed; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(124,111,255,.14), transparent 65%);
  pointer-events:none; z-index:0;
  transform: translate(-50%,-50%);
  left:-999px; top:-999px;
  transition: opacity .3s ease;
}
#particles{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
}

@media (max-width: 768px){
  .cursor-glow{ display:none; }
}

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:9999;
  background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-hidden{ opacity:0; visibility:hidden; }
.loader__mark{
  font-family: var(--font-display);
  font-size: clamp(32px, 6vw, 48px);
  font-weight:700;
  display:flex; align-items:center; gap:10px;
  color: var(--text-primary);
}
.loader__bracket{ color: var(--cyan); animation: pulse-op 1.4s ease-in-out infinite; }
.loader__initials{
  background: var(--gradient-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@keyframes pulse-op{ 0%,100%{opacity:.4} 50%{opacity:1} }
.loader__bar{
  width:180px; height:2px; background: var(--surface-border-strong); border-radius:2px; overflow:hidden;
}
.loader__bar span{
  display:block; height:100%; width:0%;
  background: var(--gradient-primary);
  animation: load-bar 1.5s var(--ease) forwards;
}
@keyframes load-bar{ to{ width:100%; } }

/* ---------- Navbar ---------- */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding: 18px var(--pad) 0;
  transition: padding .4s var(--ease);
}
.navbar__inner{
  max-width: var(--max-w); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  background: rgba(13,15,22,.55);
  border:1px solid var(--surface-border);
  border-radius: 999px;
  padding: 10px 10px 10px 22px;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.navbar.is-scrolled .navbar__inner{
  background: rgba(10,11,16,.75);
  box-shadow: 0 12px 40px -18px rgba(0,0,0,.65);
  border-color: var(--surface-border-strong);
}
.navbar__logo-mark{
  font-family: var(--font-display); font-weight:700; font-size:18px;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--gradient-primary); color:#08090D;
}
.navbar__links{ display:flex; align-items:center; gap:28px; }
.navbar__links a{
  font-size:14px; color: var(--text-secondary); position:relative; padding:6px 0;
  transition: color .3s var(--ease);
}
.navbar__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--gradient-primary); transform: scaleX(0); transform-origin:left;
  transition: transform .35s var(--ease);
}
.navbar__links a:hover{ color: var(--text-primary); }
.navbar__links a.is-active{ color: var(--text-primary); }
.navbar__links a.is-active::after{ transform: scaleX(1); }

.navbar__cta{ white-space:nowrap; }
.navbar__toggle{
  display:none; flex-direction:column; gap:5px; padding:10px; margin-right:2px;
}
.navbar__toggle span{
  width:20px; height:1.5px; background: var(--text-primary); transition: transform .35s var(--ease), opacity .3s ease;
}
.navbar__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px){
  .navbar__links{
    position:fixed; top:76px; left: var(--pad); right: var(--pad);
    flex-direction:column; align-items:flex-start; gap:4px;
    background: rgba(10,11,16,.92);
    border:1px solid var(--surface-border);
    border-radius: var(--radius-l);
    padding: 16px;
    backdrop-filter: blur(20px);
    transform: translateY(-12px); opacity:0; pointer-events:none;
    transition: transform .4s var(--ease), opacity .35s ease;
  }
  .navbar__links.is-open{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .navbar__links a{ width:100%; padding:10px 8px; }
  .navbar__cta{ display:none; }
  .navbar__toggle{ display:flex; }
}

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size:14px; font-weight:600;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .3s var(--ease);
  white-space:nowrap;
}
.btn svg{ transition: transform .35s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }
.btn--primary{
  background: var(--gradient-primary); color:#060710;
  box-shadow: 0 10px 30px -10px rgba(124,111,255,.55);
}
.btn--primary:hover{ box-shadow: 0 14px 40px -10px rgba(79,209,255,.65); transform: translateY(-2px); }
.btn--outline{
  border:1px solid var(--surface-border-strong); color: var(--text-primary);
}
.btn--outline:hover{ border-color: var(--cyan); background: rgba(79,209,255,.08); transform: translateY(-2px); }
.btn--ghost{
  padding: 10px 20px; background: var(--surface); border:1px solid var(--surface-border); font-size:13px;
}
.btn--ghost:hover{ background: var(--surface-strong); }
.btn--block{ width:100%; padding:15px 24px; margin-top:6px; }

.btn__spinner{ display:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(6,7,16,.3); border-top-color:#060710; animation: spin .7s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.btn.is-loading .btn__label{ opacity:.55; }
.btn.is-loading .btn__spinner{ display:inline-block; }
.btn.is-loading .btn__icon{ display:none; }

/* magnetic buttons handled via JS transform, keep transition smooth */
.magnetic{ will-change: transform; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 140px var(--pad) 100px;
}
.hero__inner{
  max-width: var(--max-w); margin:0 auto; width:100%;
  display:grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:13px; color: var(--text-secondary);
  border:1px solid var(--surface-border); background: var(--surface);
  padding:7px 14px; border-radius:999px; width:fit-content;
}
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(255,200,118,.6);
  animation: dot-pulse 2s ease-out infinite;
}
@keyframes dot-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,200,118,.55); }
  70%{ box-shadow: 0 0 0 8px rgba(255,200,118,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,200,118,0); }
}
.hero__title{
  margin-top:22px;
  font-size: clamp(38px, 5.6vw, 68px);
  color: var(--text-primary);
}
.hero__name{ color: var(--text-primary); }
.hero__gradient-text{
  background: var(--gradient-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lede{
  margin-top:22px; max-width:520px;
  color: var(--text-secondary); font-size: clamp(15px,1.6vw,17px);
}
.hero__actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__stack{
  margin-top:44px; display:flex; gap:22px; flex-wrap:wrap;
  font-family: var(--font-mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  color: var(--text-muted);
}
.hero__stack span{ position:relative; padding-left:16px; }
.hero__stack span::before{
  content:''; position:absolute; left:0; top:50%; width:6px; height:6px; border-radius:50%;
  background: var(--cyan); transform: translateY(-50%);
}

/* hero visual: terminal + orbit */
.hero__visual{ position:relative; height: 420px; }
.terminal{
  position:absolute; inset:0; margin:auto; width:100%; max-width:420px; height: fit-content;
  background: rgba(13,15,22,.72);
  border:1px solid var(--surface-border-strong);
  border-radius: var(--radius-l);
  overflow:hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  backdrop-filter: blur(16px);
  z-index:2;
  animation: terminal-float 7s ease-in-out infinite;
}
@keyframes terminal-float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
.terminal__bar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; border-bottom:1px solid var(--surface-border);
  background: rgba(255,255,255,.02);
}
.dot{ width:10px; height:10px; border-radius:50%; }
.dot--red{ background:#FF5F57; } .dot--yellow{ background:#FEBC2E; } .dot--green{ background:#28C840; }
.terminal__title{ margin-left:8px; font-family: var(--font-mono); font-size:12px; color: var(--text-muted); }
.terminal__body{ padding: 22px 20px 30px; font-family: var(--font-mono); font-size:15px; min-height:130px; }
.terminal__line{ display:flex; gap:8px; color: var(--text-secondary); margin-bottom:14px; }
.terminal__prompt{ color: var(--cyan); }
.terminal__path{ color: var(--violet-soft); }
.terminal__output{ color: var(--text-primary); font-weight:500; }
.terminal__cursor{
  display:inline-block; width:8px; height:18px; background: var(--cyan); margin-left:2px;
  vertical-align:middle; animation: blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
.terminal__glow{
  position:absolute; inset:-40% -40% auto auto; width:60%; height:60%;
  background: radial-gradient(circle, rgba(124,111,255,.35), transparent 70%);
  filter: blur(20px); z-index:-1;
}

.orbit{ position:absolute; inset:0; z-index:1; }
.orbit__ring{
  position:absolute; top:50%; left:50%; border:1px dashed var(--surface-border-strong);
  border-radius:50%; transform: translate(-50%,-50%);
}
.orbit__ring--1{ width:340px; height:340px; animation: spin-slow 40s linear infinite; }
.orbit__ring--2{ width:440px; height:440px; animation: spin-slow-rev 55s linear infinite; }
@keyframes spin-slow{ to{ transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes spin-slow-rev{ to{ transform: translate(-50%,-50%) rotate(-360deg); } }
.orbit__chip{
  position:absolute;
  font-family: var(--font-mono); font-size:11.5px; color: var(--text-secondary);
  background: rgba(13,15,22,.8); border:1px solid var(--surface-border);
  padding:6px 12px; border-radius:999px; white-space:nowrap;
  animation: chip-bob 6s ease-in-out infinite;
}
.orbit__chip--1{ top:2%; left:52%; animation-delay:0s; }
.orbit__chip--2{ top:22%; left:2%; animation-delay:.6s; }
.orbit__chip--3{ bottom:8%; left:8%; animation-delay:1.2s; }
.orbit__chip--4{ bottom:0%; right:4%; animation-delay:1.8s; }
.orbit__chip--5{ top:18%; right:0%; animation-delay:2.4s; }
@keyframes chip-bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--text-muted);
}
.scroll-cue__line{
  width:1px; height:34px; background: var(--surface-border-strong); position:relative; overflow:hidden;
}
.scroll-cue__line::after{
  content:''; position:absolute; top:-40%; left:0; width:100%; height:40%;
  background: var(--cyan); animation: cue-drop 1.8s ease-in-out infinite;
}
@keyframes cue-drop{ 0%{ top:-40%; } 100%{ top:100%; } }

@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__visual{ height:340px; order:-1; }
  .orbit{ display:none; }
  .terminal{ max-width:100%; }
}

/* ---------- About ---------- */
.about__grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap:60px; }
.about__lead{ font-size: 19px; color: var(--text-primary); margin-bottom:16px; }
.about__body p{ color: var(--text-secondary); margin-bottom:16px; max-width:640px; }
.about__cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:36px; }
.about__card{ padding:24px; }
.about__card:hover{ transform: translateY(-6px); border-color: var(--surface-border-strong); }
.about__card-icon{ color: var(--cyan); font-size:14px; }
.about__card h3{ font-size:16px; margin: 12px 0 8px; }
.about__card p{ font-size:13.5px; color: var(--text-muted); }

@media (max-width: 980px){
  .about__grid{ grid-template-columns:1fr; }
  .about__cards{ grid-template-columns:1fr; }
}

/* ---------- Stats ---------- */
.stats{ padding: 50px 0; border-top:1px solid var(--surface-border); border-bottom:1px solid var(--surface-border); }
.stats__grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; text-align:center; }
.stat{ display:flex; flex-direction:column; gap:6px; }
.stat__number{
  font-family: var(--font-display); font-size: clamp(32px,5vw,48px); font-weight:700;
  background: var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__label{ font-size:13px; color: var(--text-muted); }
@media (max-width:700px){ .stats__grid{ grid-template-columns: repeat(2,1fr); gap:32px; } }

/* ---------- Skills ---------- */
.skills__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.skill-group{ padding:26px; }
.skill-group:hover{ transform: translateY(-6px); border-color: var(--surface-border-strong); }
.skill-group__title{ font-size:17px; margin-bottom:18px; color: var(--text-primary); }
.skill-bars li{ margin-bottom:14px; }
.skill-bars li:last-child{ margin-bottom:0; }
.skill-bars span{ display:block; font-size:13px; color: var(--text-secondary); margin-bottom:6px; }
.bar{ height:5px; border-radius:4px; background: rgba(255,255,255,.06); overflow:hidden; }
.bar i{
  display:block; height:100%; width:0%; border-radius:4px;
  background: var(--gradient-primary);
  transition: width 1.4s var(--ease-out);
}
.skill-group.is-visible .bar i{ width: var(--w); }

.tools{ margin-top:40px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.tools__label{ font-family: var(--font-mono); font-size:12.5px; color: var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.tools__chips{ display:flex; flex-wrap:wrap; gap:10px; }
.tools__chips span{
  font-size:12.5px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--surface-border); color: var(--text-secondary);
  transition: border-color .3s ease, color .3s ease;
}
.tools__chips span:hover{ border-color: var(--cyan); color: var(--text-primary); }

@media (max-width:980px){ .skills__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .skills__grid{ grid-template-columns: 1fr; } }

/* ---------- Services ---------- */
.services__grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.service-card{ padding:26px; position:relative; overflow:hidden; }
.service-card::before{
  content:''; position:absolute; inset:0; opacity:0; background: var(--gradient-radial);
  transition: opacity .5s ease;
}
.service-card:hover::before{ opacity:1; }
.service-card:hover{ transform: translateY(-6px); border-color: var(--surface-border-strong); }
.service-card__icon{ display:block; font-size:20px; color: var(--cyan); margin-bottom:16px; }
.service-card h3{ font-size:16px; margin-bottom:8px; position:relative; }
.service-card p{ font-size:13.5px; color: var(--text-muted); position:relative; }

@media (max-width:980px){ .services__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .services__grid{ grid-template-columns: 1fr; } }

/* ---------- Work / Projects ---------- */
.work__grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; }
.project-card{
  display:flex; flex-direction:column; overflow:hidden;
  transition: transform .5s var(--ease), border-color .4s ease;
}
.project-card:hover{ transform: translateY(-8px); border-color: var(--surface-border-strong); }
.project-card--wide{ grid-column: span 2; flex-direction:row; }
.project-card__visual{
  position:relative; min-height:180px; flex:1;
  display:flex; align-items:flex-end; padding:18px;
  background: linear-gradient(135deg, rgba(124,111,255,.35), rgba(79,209,255,.2));
  overflow:hidden;
}
.project-card__visual::after{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity:.5;
}
.project-card:hover .project-card__visual{ transform: scale(1.02); }
.project-card__visual--fit24{ background: linear-gradient(135deg, rgba(79,209,255,.4), rgba(124,111,255,.25)); }
.project-card__visual--prottiva{ background: linear-gradient(135deg, rgba(255,200,118,.35), rgba(255,107,107,.2)); }
.project-card__visual--undercost{ background: linear-gradient(135deg, rgba(124,111,255,.4), rgba(79,209,255,.2)); }
.project-card__visual--gulf{ background: linear-gradient(135deg, rgba(255,107,107,.3), rgba(255,200,118,.2)); }
.project-card__visual--labor{ background: linear-gradient(135deg, rgba(79,209,255,.35), rgba(255,200,118,.2)); }
.project-card__badge{
  position:relative; font-family: var(--font-mono); font-size:11.5px;
  background: rgba(8,9,13,.55); border:1px solid rgba(255,255,255,.18);
  padding:6px 12px; border-radius:999px; color:#fff;
}
.project-card__body{ padding:22px; flex:1; }
.project-card--wide .project-card__body{ flex:1.1; }
.project-card__body h3{ font-size:19px; margin-bottom:8px; }
.project-card__body p{ font-size:13.5px; color: var(--text-muted); margin-bottom:16px; }
.project-card__link{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color: var(--cyan);
}
.project-card__link svg{ transition: transform .35s var(--ease); }
.project-card:hover .project-card__link svg{ transform: translateX(4px); }

@media (max-width:860px){
  .work__grid{ grid-template-columns:1fr; }
  .project-card--wide{ grid-column: span 1; flex-direction:column; }
}

/* ---------- Journey / Timeline ---------- */
.timeline{ position:relative; padding-left:34px; }
.timeline::before{
  content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px;
  background: linear-gradient(var(--violet), var(--cyan));
  opacity:.4;
}
.timeline__item{ position:relative; margin-bottom:26px; }
.timeline__item:last-child{ margin-bottom:0; }
.timeline__marker{
  position:absolute; left:-34px; top:22px; width:11px; height:11px; border-radius:50%;
  background: var(--gradient-primary);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--surface-border-strong);
}
.timeline__content{ padding:22px 26px; }
.timeline__content:hover{ border-color: var(--surface-border-strong); }
.timeline__tag{
  font-family: var(--font-mono); font-size:11.5px; color: var(--cyan); text-transform:uppercase; letter-spacing:.06em;
}
.timeline__content h3{ font-size:17px; margin: 8px 0 8px; }
.timeline__content p{ font-size:14px; color: var(--text-muted); }

/* ---------- Testimonials ---------- */
.testimonials__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.testimonial-card{ padding:28px; position:relative; }
.testimonial-card:hover{ transform: translateY(-6px); border-color: var(--surface-border-strong); }
.testimonial-card__quote{
  font-family: var(--font-display); font-size:40px; color: var(--violet-soft); opacity:.5; line-height:1;
}
.testimonial-card blockquote{ font-size:14.5px; color: var(--text-secondary); margin:16px 0 22px; }
.testimonial-card figcaption{ display:flex; align-items:center; gap:12px; }
.testimonial-card figcaption strong{ display:block; font-size:13.5px; }
.testimonial-card figcaption small{ font-size:12px; color: var(--text-muted); }
.avatar{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--gradient-primary); color:#060710; font-size:12px; font-weight:700; font-family: var(--font-mono);
  flex-shrink:0;
}

@media (max-width:980px){ .testimonials__grid{ grid-template-columns:1fr; } }

/* ---------- Contact ---------- */
.contact__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:start; }
.contact__head p{ color: var(--text-secondary); max-width:480px; margin-top:12px; }
.contact__cards{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:34px; }
.contact-card{
  display:flex; align-items:center; gap:14px; padding:16px 18px;
}
.contact-card:hover{ transform: translateY(-4px); border-color: var(--cyan); }
.contact-card--soon{ opacity:.5; cursor:default; }
.contact-card--soon:hover{ transform:none; border-color: var(--surface-border); }
.contact-card__icon{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-strong); color: var(--cyan);
}
.contact-card strong{ display:block; font-size:13.5px; }
.contact-card small{ font-size:12px; color: var(--text-muted); word-break:break-word; }

.contact-form{ padding: clamp(24px,3vw,36px); }
.form-row{ margin-bottom:18px; display:flex; flex-direction:column; gap:8px; }
.form-row label{ font-size:13px; color: var(--text-secondary); }
.form-row input, .form-row textarea{
  border:1px solid var(--surface-border); border-radius: var(--radius-s);
  padding:13px 15px; background: rgba(255,255,255,.02); font-size:14px;
  transition: border-color .3s ease, background .3s ease;
  resize: vertical;
}
.form-row input::placeholder, .form-row textarea::placeholder{ color: var(--text-muted); }
.form-row input:focus, .form-row textarea:focus{ border-color: var(--cyan); background: rgba(79,209,255,.04); }
.form-row.has-error input, .form-row.has-error textarea{ border-color: var(--coral); }
.form-error{ font-size:12px; color: var(--coral); min-height:14px; }
.form-status{
  margin-top:14px; font-size:13.5px; text-align:center; min-height:18px;
  opacity:0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease;
}
.form-status.is-visible{ opacity:1; transform:none; }
.form-status.is-success{ color:#5FE3A1; }
.form-status.is-error{ color: var(--coral); }

@media (max-width:980px){
  .contact__grid{ grid-template-columns:1fr; }
  .contact__cards{ grid-template-columns:1fr; }
}

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--surface-border); padding-top: 56px; }
.footer__grid{
  display:flex; flex-wrap:wrap; gap:30px; align-items:center; justify-content:space-between;
  padding-bottom: 36px;
}
.footer__brand{ display:flex; align-items:center; gap:14px; }
.footer__brand p{ font-size:13.5px; color: var(--text-muted); }
.footer__links{ display:flex; gap:22px; }
.footer__links a{ font-size:13.5px; color: var(--text-secondary); transition: color .3s ease; }
.footer__links a:hover{ color: var(--text-primary); }
.footer__socials{ display:flex; gap:14px; }
.footer__socials a{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--surface-border); color: var(--text-secondary);
  transition: border-color .3s ease, color .3s ease, transform .3s ease;
}
.footer__socials a:hover{ border-color: var(--cyan); color: var(--cyan); transform: translateY(-3px); }
.footer__bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px var(--pad) 30px; max-width: var(--max-w); margin:0 auto;
  border-top:1px solid var(--surface-border);
  font-size:12.5px; color: var(--text-muted);
}
.back-to-top{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--surface-border);
  display:flex; align-items:center; justify-content:center; transition: transform .3s ease, border-color .3s ease;
}
.back-to-top:hover{ transform: translateY(-4px); border-color: var(--cyan); color: var(--cyan); }

@media (max-width:600px){
  .footer__bottom{ flex-direction:column; gap:14px; text-align:center; }
}