/* v2 — alternative homepage
 *
 * Self-contained on purpose: it does not touch style.css, so the current
 * site keeps working while this one is compared beside it.
 *
 * The idea: a pentester's homepage should read as evidence, not as a CV.
 * What you broke comes first, credentials come last, and the numbers do
 * the talking.
 */

:root {
  --bg:        #05080f;
  --bg-2:      #080d18;
  --surface:   #0b1220;
  --surface-2: #101a2c;
  --line:      #1a2440;
  --line-soft: #131c30;

  /* Cream rather than pure white: on a near-black background, #fff
     glares. A warm off-white reads as designed instead of default. */
  --fg:        #f2ece0;
  --fg-soft:   #aebdd0;
  --muted:     #61738f;

  /* Spring green. Deliberately not #00ff88 - that is the reference
     site's signature, and wearing someone else's accent shows. This one
     is deeper and less electric, which also holds up better against the
     red used for severity.

     One accent, not two: cyan fighting magenta was most of what made the
     old palette feel unsettled. Swap this value and the whole page
     follows - the swatches at the bottom right compare them live. */
  --accent:    #3ddc84;
  --accent-2:  #7df0b0;
  --accent-dim:rgba(61, 220, 132, .12);

  --crit:      #ff5f6d;
  --ok:        #7df0b0;

  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --display: "Chakra Petch", "Space Grotesk", var(--sans);

  --shell: 1080px;
  --rail: 190px;

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

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* A faint grid, low enough that it reads as texture rather than pattern. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .35;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
  animation: grid-drift 70s linear infinite;
}

@keyframes grid-drift {
  to { background-position: 64px 64px, 64px 64px; }
}

/* A wash of colour behind the hero, so the top of the page is not a
   flat black rectangle. Fixed, so it does not scroll away. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 45% at 22% 0%, rgba(45, 212, 234, .10), transparent 60%),
    radial-gradient(ellipse 45% 40% at 85% 12%, rgba(255, 79, 216, .07), transparent 62%);
}

/* Grain. Flat dark surfaces look like a screenshot of a colour; a
   little noise gives them a surface. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

/* ============================================================
   Layout
   ============================================================ */

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2rem);
}

/* ============================================================
   Rail — numbered navigation
   ============================================================
   Numbering the sections is borrowed from the reference site; putting
   the rail on the side is not. It stays visible while you scroll, which
   a top bar cannot do without stealing height from the content. */

.rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail);
  padding: 2rem 1.25rem;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 40;
}

.rail__brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--fg);
}
.rail__brand span {
  background: linear-gradient(100deg, var(--accent) 5%, var(--accent-2) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rail__role {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .06em;
  margin-top: .2rem;
}

.rail__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.rail__links a {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  padding: .42rem .55rem;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--fg-soft);
  border-left: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.rail__links a:hover,
.rail__links a.is-active {
  background: var(--accent-dim);
  color: var(--fg);
  border-left-color: var(--accent);
}
.rail__num { color: var(--muted); font-size: .7rem; }
.rail__links a:hover .rail__num,
.rail__links a.is-active .rail__num { color: var(--accent); }

.rail__foot {
  margin-top: auto;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--muted);
  display: grid;
  gap: .5rem;
}
.rail__foot a { color: var(--fg-soft); }
.rail__clock::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: .45rem;
  vertical-align: middle;
}

.rail__lang {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .7rem;
  padding: .25rem .55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-soft);
  cursor: pointer;
}
.rail__lang:hover { border-color: var(--accent); color: var(--accent); }

.page { margin-left: var(--rail); }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  min-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 0 3rem;
}

.hero__eyebrow {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--accent) 5%, var(--accent-2) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__role {
  font-family: var(--mono);
  color: var(--fg-soft);
  font-size: clamp(.9rem, .85rem + .3vw, 1.05rem);
  margin: 0 0 1.6rem;
}

.hero__intro {
  max-width: 62ch;
  color: var(--fg-soft);
  font-size: 1.05rem;
  margin: 0 0 2.4rem;
}
.hero__intro strong { color: var(--fg); font-weight: 600; }

/* The numbers are the credential: a 9.1 in a shipping product says more
   than a paragraph describing what you can do. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  max-width: 640px;
}
.stat { background: var(--surface); padding: 1.05rem 1.15rem; }
.stat__n {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fg);
}
.stat__l {
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-top: .45rem;
}
.stat--crit .stat__n { color: var(--crit); }

.cursor {
  display: inline-block;
  width: .55ch;
  background: var(--accent);
  animation: blink 1.15s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* ============================================================
   Sections
   ============================================================ */

.sec { padding: 4.5rem 0; border-top: 1px solid var(--line-soft); }

.sec__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.sec__num {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--accent);
}
.sec__head h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.3rem + .8vw, 2.1rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: -.01em;
}
.sec__more {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
}
.sec__more:hover { color: var(--accent); }

.prose { max-width: 66ch; color: var(--fg-soft); }
.prose p { margin: 0 0 1rem; }
.prose strong { color: var(--fg); }

/* ============================================================
   Cards
   ============================================================ */

.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  transition: border-color .18s, transform .18s, background .18s;
}
.card:hover {
  border-color: rgba(45, 212, 234, .45);
  background: var(--surface-2);
  transform: translateY(-2px);
}

.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .55rem;
}
.card__title {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
}
.card__title a { color: var(--fg); }
.card__title a:hover { color: var(--accent); }
.card p { margin: 0; color: var(--fg-soft); font-size: .92rem; }

.card--cert { min-height: 150px; padding-right: 6.8rem; }
.card--cert-personal { padding-right: 1rem; padding-bottom: 5.7rem; }
.cert-mark {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 4.6rem;
  height: 4.6rem;
  object-fit: contain;
  opacity: .92;
  pointer-events: none;
}
.cert-mark--certificate {
  width: 5.9rem;
  height: 4.55rem;
  object-fit: cover;
  opacity: 1;
  border: 1px solid var(--border);
  border-radius: .35rem;
  background: #fff;
}

.tag {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: .68rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.tag--crit { color: var(--crit); border-color: rgba(255, 95, 109, .4); background: rgba(255, 95, 109, .08); }
.tag--tool { color: var(--accent); border-color: rgba(45, 212, 234, .35); background: var(--accent-dim); }

/* A severity bar reads faster than a number: you see the row is red
   before you read what it says. */
.card--cve { border-left: 2px solid rgba(255, 95, 109, .5); }

.card__meta {
  margin-top: .8rem;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--muted);
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
}

/* ============================================================
   Contact
   ============================================================ */

.contact-challenge {
  max-width: 50rem;
  margin-top: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.contact-challenge__bar {
  display: flex;
  align-items: center;
  gap: .42rem;
  padding: .58rem .8rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.contact-challenge__bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.contact-challenge__bar span:nth-child(1) { background: #ff5f57; }
.contact-challenge__bar span:nth-child(2) { background: #ffbd2e; }
.contact-challenge__bar span:nth-child(3) { background: #28c840; }
.contact-challenge__bar em {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .66rem;
  font-style: normal;
  letter-spacing: .06em;
}
.contact-challenge__lede {
  margin: 0;
  padding: .95rem 1.1rem 0;
  color: var(--muted);
  font-size: .82rem;
}
.contact-challenge__cipher {
  display: block;
  padding: .85rem 1.15rem 1.2rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: .92rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.contact {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .85rem;
  padding: .62rem 1.05rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--fg-soft);
  transition: border-color .16s, color .16s, background .16s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.btn--primary {
  border-color: rgba(45, 212, 234, .5);
  background: var(--accent-dim);
  color: var(--accent);
}

.foot {
  border-top: 1px solid var(--line-soft);
  padding: 2rem 0 3rem;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   Small screens — the rail becomes a top bar
   ============================================================ */

@media (max-width: 900px) {
  .rail {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  .rail__role, .rail__foot { display: none; }
  .rail__links { grid-auto-flow: column; gap: .2rem; }
  .rail__links a { border-left: 0; border-bottom: 2px solid transparent; padding: .3rem .5rem; }
  .rail__links a.is-active { border-left: 0; border-bottom-color: var(--accent); }
  .rail__num { display: none; }
  .rail__lang { margin-left: auto; }
  .page { margin-left: 0; }
  .hero { min-height: auto; padding: 3rem 0 2rem; }
}


/* ============================================================
   Reveal on scroll
   ============================================================
   Sections arrive rather than being there already. Kept small - 18px
   and 0.6s - because a page that makes you wait to read it is worse
   than one with no animation at all. */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Cards in a row arrive one after another, not all at once. */
/* Only while arriving: once the animation ends the transform is
   released, so :hover can move the card without fighting it. */
.reveal.is-in .card { animation: card-in .45s var(--ease) backwards; }
.reveal.is-in .card:nth-child(2) { animation-delay: .07s; }
.reveal.is-in .card:nth-child(3) { animation-delay: .14s; }
.reveal.is-in .card:nth-child(4) { animation-delay: .21s; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
}

/* Status dot breathes instead of just sitting there. */
.rail__clock::before { animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

/* Frosted rail, so content scrolling behind it stays suggested. */
.rail {
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(8, 13, 24, .92), rgba(5, 8, 15, .92));
}

/* A hairline that lights up under the section heading. */
.sec__head {
  position: relative;
  padding-bottom: .9rem;
}
/* Drawn as a border on the container, not injected as another flex
   item: as a flex child it competed for space on the same row and
   pushed the "view all" link out of place. */
.sec__head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 45%);
  opacity: .45;
}

/* Nobody should be made motion-sick by a portfolio. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal.is-in .card { animation: none; }
  body::before { animation: none; }
  .rail__clock::before { animation: none; }
  html { scroll-behavior: auto; }
}


/* ============================================================
   Hero — featured finding and terminal
   ============================================================ */

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 2rem;
  align-items: start;
}

/* The strongest finding gets a card of its own. A 9.1 buried as one row
   in a list is a wasted headline. */
.feat {
  display: block;
  position: relative;
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(255, 95, 109, .32);
  border-radius: 12px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 95, 109, .13), transparent 60%),
    var(--surface);
  margin-bottom: 1.4rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.feat:hover { border-color: rgba(255, 95, 109, .6); transform: translateY(-2px); }

.feat__tag {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  color: var(--crit);
  margin-bottom: .5rem;
}
.feat__id {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.1;
}
.feat__score {
  position: absolute;
  top: 1rem; right: 1.3rem;
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--crit);
  line-height: 1;
}
.feat__desc {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--muted);
  margin-top: .45rem;
}

.hero__cta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* ---- Terminal ---- */

.term {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #060a12;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.term__bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .85rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.term__dot { width: 9px; height: 9px; border-radius: 50%; background: #2c3648; }
.term__dot:first-child { background: #ff5f57; }
.term__dot:nth-child(2) { background: #febc2e; }
.term__dot:nth-child(3) { background: #28c840; }
.term__title {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--muted);
  margin-left: .5rem;
}
.term__live {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  color: var(--ok);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.term__live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  animation: pulse-dot 2s ease-in-out infinite;
}

.term__body {
  margin: 0;
  padding: 1rem 1.1rem;
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.75;
  color: var(--fg-soft);
  height: 310px;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
.term__body .p { color: var(--accent); }
.term__body .c { color: var(--fg); }
.term__body .o { color: var(--muted); }
.term__body .g { color: var(--ok); }
.term__body .r { color: var(--crit); }
.term__cur {
  display: inline-block;
  width: .55ch; height: 1em;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}

/* ============================================================
   Section subtitles and tag clouds
   ============================================================ */

.sec__sub {
  width: 100%;
  margin: -.6rem 0 1.6rem;
  color: var(--muted);
  font-size: .95rem;
  max-width: 60ch;
}

.tagset { margin-top: 2rem; }
.tagset h4 {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .7rem;
}
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tags span {
  font-family: var(--mono);
  font-size: .72rem;
  padding: .3rem .65rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg-soft);
  transition: border-color .15s, color .15s;
}
.tags span:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .term__body { height: 240px; }
}