/* gr84x.com — lightweight dark theme (no framework)
   Design goals: modern, clean, fast. */

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0}
img,svg{display:block;max-width:100%}

:root{
  /* Colors */
  --bg: #0a0a0a;
  --panel: #101214;
  --panel-2: #14181c;
  --border: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.90);
  --muted: rgba(255,255,255,.66);
  --faint: rgba(255,255,255,.48);

  --accent: #2DE2E6;   /* teal */
  --accent-2: #FF6B35; /* orange */
  --danger: #ef4444;

  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fs-0: 0.875rem;
  --fs-1: 1rem;
  --fs-2: 1.125rem;
  --fs-3: 1.5rem;
  --fs-4: 2.25rem;
  --fs-5: 3rem;

  /* Layout */
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 20px 60px rgba(0,0,0,.45);

  --container: 1100px;
  --gutter: 24px;
}

@media (max-width: 700px){
  :root{ --gutter: 16px; --fs-4: 2rem; --fs-5: 2.25rem; }
}

body{
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}

/* Gradient glow — fixed to viewport so it doesn't repeat on long pages */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(1000px 600px at 20% 0%, rgba(45,226,230,.16), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(255,107,53,.12), transparent 55%);
  pointer-events: none;
}

a{color:inherit}
a:hover{color:var(--text)}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* Header / Nav */
.site-header{
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  background: rgba(10,10,10,.70);
  border-bottom: 1px solid var(--border);
  z-index: 50;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 14px 0;
  flex-wrap: wrap;
}

@media (max-width: 500px){
  .nav{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .nav-links{
    width: 100%;
    justify-content: flex-start;
  }
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  font-weight: 700;
  letter-spacing: .2px;
}

.brand-mark{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(45,226,230,.95), rgba(255,107,53,.95));
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.nav-links{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.nav-links a{
  text-decoration:none;
  color: var(--muted);
  font-size: var(--fs-0);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.nav-links a[aria-current="page"],
.nav-links a:hover{
  color: var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,.03);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  border-radius: 999px;
  padding: 12px 16px;
  text-decoration:none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight: 650;
}
.btn:hover{background: rgba(255,255,255,.06)}

.btn-primary{
  border-color: rgba(45,226,230,.35);
  background: linear-gradient(135deg, rgba(45,226,230,.95), rgba(255,107,53,.75));
  color: rgba(0,0,0,.92);
}
.btn-primary:hover{filter:saturate(1.05) brightness(1.02)}

.btn-ghost{background:transparent}

/* Sections */
main{padding: 44px 0 60px}
.section{margin-top: 48px}
.section h2{font-size: var(--fs-3);letter-spacing: -.2px}
.section p{color:var(--muted)}

.section-anchor{scroll-margin-top: 90px}

.h2{font-size: var(--fs-2); letter-spacing: -.2px; margin: 0}

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(10px); transition: opacity 420ms ease, transform 420ms ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel-pad{padding: 22px}

.hero{padding-top: 28px}
.hero-grid{display:grid;grid-template-columns: 1.2fr .8fr;gap: 18px;align-items:stretch}
@media (max-width: 900px){.hero-grid{grid-template-columns: 1fr;}}

.kicker{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-size: var(--fs-0);
}

.h1{
  font-size: var(--fs-5);
  line-height: 1.05;
  letter-spacing: -0.8px;
  margin-top: 14px;
}

.lede{font-size: var(--fs-2); color: var(--muted); margin-top: 12px; max-width: 56ch}

.hero-cta{display:flex; gap: 12px; flex-wrap:wrap; margin-top: 18px}

.stats{display:grid;grid-template-columns:1fr;gap: 12px}
.stat{padding: 16px;border-radius: var(--radius-sm);border:1px solid var(--border);background: rgba(0,0,0,.20)}
.stat .num{font-size: 1.35rem;font-weight: 750}
.stat .lbl{font-size: var(--fs-0);color: var(--muted);margin-top: 2px}

.grid-3{display:grid;grid-template-columns: repeat(3, 1fr);gap: 14px; margin-top: 14px}
@media (max-width: 900px){.grid-3{grid-template-columns:1fr;}}

/* How we work steps — stack vertically inside the narrow hero aside */
.how-steps{display:grid;grid-template-columns:1fr;gap:12px}

.grid-2{display:grid;grid-template-columns: repeat(2, 1fr);gap: 14px}
@media (max-width: 900px){.grid-2{grid-template-columns:1fr;}}

.card{
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}

.card h3{font-size: 1.05rem;letter-spacing: -.2px}
.card p{margin-top: 8px;color:var(--muted)}

/* Project card cinematic heroes */
.card-project{overflow:hidden}

.card-hero{
  margin: -18px -18px 14px -18px;
  height: 180px;
  border-bottom: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.hero-label{
  position:absolute;
  bottom:10px;
  left:0;right:0;
  text-align:center;
  font-size:.7rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--faint);
}

/* Spatial — scattered glowing cells on dark tissue */
.card-hero--spatial{
  background:
    radial-gradient(200px 200px at 45% 40%, rgba(45,226,230,.08), transparent),
    radial-gradient(150px 150px at 60% 55%, rgba(255,107,53,.06), transparent),
    var(--panel);
}
.hero-scatter{position:absolute;inset:0}
.cell{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  animation: cellPulse 3s infinite ease-in-out;
}
.cell.c1{background:rgba(45,226,230,.8);box-shadow:0 0 8px rgba(45,226,230,.5)}
.cell.c2{background:rgba(255,107,53,.8);box-shadow:0 0 8px rgba(255,107,53,.5);animation-delay:.5s}
.cell.c3{background:rgba(251,191,36,.8);box-shadow:0 0 8px rgba(251,191,36,.5);animation-delay:1s}
.cell.c4{background:rgba(239,68,68,.7);box-shadow:0 0 8px rgba(239,68,68,.4);animation-delay:1.5s}
@keyframes cellPulse{
  0%,100%{opacity:.6;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.15)}
}

/* Tech Debt — health metrics bars */
.card-hero--debt{
  background:
    radial-gradient(250px 150px at 50% 60%, rgba(251,191,36,.08), transparent),
    var(--panel);
}
.debt-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
  position:relative;
  z-index:1;
}
.debt-repo-name{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--faint);
  letter-spacing:.02em;
}
.debt-repo-name::before{
  content:'▸ ';
  color:var(--muted);
}
.grid-spinner{
  display:grid;
  grid-template-columns:repeat(3,5px);
  gap:2px;
  opacity:0;
  transition:opacity 0.25s ease;
}
.grid-spinner.active{opacity:1}
.grid-spinner span{
  width:5px;
  height:5px;
  border-radius:1px;
  background:rgba(255,255,255,.08);
  animation:gspin 1.2s ease-in-out infinite;
}
.grid-spinner span:nth-child(1){animation-delay:0s}
.grid-spinner span:nth-child(2){animation-delay:.1s}
.grid-spinner span:nth-child(3){animation-delay:.2s}
.grid-spinner span:nth-child(4){animation-delay:.7s}
.grid-spinner span:nth-child(5){animation-delay:.8s}
.grid-spinner span:nth-child(6){animation-delay:.3s}
.grid-spinner span:nth-child(7){animation-delay:.6s}
.grid-spinner span:nth-child(8){animation-delay:.5s}
.grid-spinner span:nth-child(9){animation-delay:.4s}
@keyframes gspin{
  0%,60%,100%{background:rgba(255,255,255,.08)}
  30%{background:#f59e0b}
}
.hero-metrics{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  padding:0 22px;
  position:absolute;
  top:24px;
  left:0;
  right:0;
}
.metric-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.metric-label{
  font-size:.7rem;
  font-family:var(--mono);
  color:var(--muted);
  width:110px;
  flex-shrink:0;
  text-align:right;
  white-space:nowrap;
}
.metric-bar{
  flex:1;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.metric-fill{
  height:100%;
  border-radius:999px;
  width:0%;
  transition:width 1s ease-out;
}
.fill-green{background:#3fb950}
.fill-amber{background:#f59e0b}
.fill-red{background:#f85149}
.metric-val{
  font-size:.68rem;
  font-family:var(--mono);
  color:var(--faint);
  width:28px;
  flex-shrink:0;
}

/* Incident — terminal output */
.card-hero--incident{
  background:
    radial-gradient(250px 150px at 50% 30%, rgba(239,68,68,.1), transparent),
    var(--panel);
}
.hero-terminal{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family:var(--mono);
  font-size:.75rem;
  padding:0 18px;
  width:100%;
}
.term-line{
  opacity:0;
  animation: termType .3s ease forwards;
}
.term-line:nth-child(1){animation-delay:.3s}
.term-line:nth-child(2){animation-delay:1s}
.term-line:nth-child(3){animation-delay:1.7s}
.term-line:nth-child(4){animation-delay:2.4s}
@keyframes termType{to{opacity:1}}
.term-red{color:#ef4444}
.term-amber{color:#f59e0b}
.term-green{color:#22c55e}
.term-muted{color:var(--faint);animation: termType .3s ease forwards, blinkCursor 1s step-end infinite 2.7s; animation-delay:2.4s}
@keyframes blinkCursor{0%,100%{opacity:1}50%{opacity:.3}}

.badges{display:flex; gap: 8px; flex-wrap:wrap; margin-top: 12px}
.badge{font-size:.75rem;color: var(--muted);border:1px solid var(--border);padding:4px 10px;border-radius:999px;background: rgba(255,255,255,.02)}

.callout{
  display:flex;
  align-items:flex-start;
  gap: 14px;
  padding: 18px;
}
.callout .dot{width:10px;height:10px;border-radius:999px;background: var(--accent);margin-top: 7px;box-shadow: 0 0 0 6px rgba(45,226,230,.15)}

/* Chat */
.chat-wrap{display:grid;grid-template-columns: 1fr;gap: 12px}
.chat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  font-size: var(--fs-0);
  color: var(--muted);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
}
.chip:hover{color:var(--text);background: rgba(255,255,255,.05)}

.chat-window{
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  height: min(520px, 64vh);
  overflow:auto;
}

/* Inline chat on the landing page: keep it a bit tighter */
.chat-window--inline{
  height: min(400px, 50vh);
}

.msg{display:flex;gap:10px;margin: 10px 0}
.avatar{width: 26px;height: 26px;border-radius: 10px;background: rgba(255,255,255,.06);border: 1px solid var(--border);flex:0 0 auto}
.avatar.assistant{background: linear-gradient(135deg, rgba(45,226,230,.35), rgba(255,107,53,.20));border-color: rgba(45,226,230,.22)}

.bubble{
  max-width: 78ch;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.user{justify-content:flex-end}
.msg.user .bubble{background: rgba(45,226,230,.10);border-color: rgba(45,226,230,.25)}
.msg.user .avatar{display:none}

.chat-form{display:flex;gap: 10px}
.chat-form input{
  flex:1;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline: none;
  font-size: var(--fs-1);
}
.chat-form input:focus{border-color: rgba(45,226,230,.55)}

.chat-form button{
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(45,226,230,.30);
  background: rgba(45,226,230,.18);
  color: var(--text);
  cursor:pointer;
  font-weight: 650;
  min-width: 90px;
}
.chat-form button:hover{background: rgba(45,226,230,.26)}
.chat-form button:disabled{opacity:.55;cursor:not-allowed}

.small{font-size: var(--fs-0); color: var(--faint)}

/* Contact form */
.contact-panel{
  border-color: rgba(45,226,230,.15);
  background: linear-gradient(180deg, rgba(45,226,230,.04), rgba(255,255,255,.01));
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 120px rgba(45,226,230,.06);
}

.contact-header{
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.contact-icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(45,226,230,.2), rgba(255,107,53,.12));
  border: 1px solid rgba(45,226,230,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.contact-form{margin-top: 0}
.contact-grid{display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px}
@media (max-width: 900px){.contact-grid{grid-template-columns: 1fr}}

.field label{
  display:block;
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: .2px;
}

.field input,
.field textarea{
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.28);
  color: var(--text);
  outline: none;
  font-size: var(--fs-1);
  font-family: var(--font);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field input::placeholder,
.field textarea::placeholder{
  color: var(--faint);
}

.field textarea{resize: vertical; min-height: 150px; line-height: 1.55}

.field input:focus,
.field textarea:focus{
  border-color: rgba(45,226,230,.55);
  box-shadow: 0 0 0 3px rgba(45,226,230,.1);
}

.contact-actions{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-lg{
  padding: 14px 24px;
  font-size: var(--fs-2);
}

.contact-alt{
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.notice{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  padding: 16px 18px;
  color: var(--muted);
  font-size: var(--fs-1);
  margin-top: 16px;
}
.notice--success{
  border-color: rgba(255,107,53,.35);
  background: rgba(255,107,53,.08);
  color: rgba(255,255,255,.85);
}
.notice--error{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.08);
  color: rgba(255,255,255,.85);
}

/* Footer */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 26px 0;
  color: var(--muted);
}

.footer-grid{display:flex;align-items:center;justify-content:space-between;gap: 12px;flex-wrap:wrap}

/* Typing indicator */
.typing-indicator .bubble{
  display:flex;gap:5px;align-items:center;padding:12px 18px;
}
.typing-indicator .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--muted);
  animation:typingBounce 1.4s infinite ease-in-out;
}
.typing-indicator .dot:nth-child(2){animation-delay:0.2s}
.typing-indicator .dot:nth-child(3){animation-delay:0.4s}
@keyframes typingBounce{
  0%,80%,100%{opacity:.3;transform:scale(.8)}
  40%{opacity:1;transform:scale(1)}
}

/* Utilities */
.mt-8{margin-top: 8px}
.mt-12{margin-top: 12px}
.mt-16{margin-top: 16px}
.mt-20{margin-top: 20px}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;transition:none !important;animation:none !important}
}

:focus-visible{outline: 2px solid rgba(45,226,230,.75); outline-offset: 3px}