/* ===== Hero ===== */
.hero{
  position: relative;
  min-height: calc(100vh - 4.5rem);
  min-height: calc(100svh - 4.5rem);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.hero-grid{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.05) 0.0625rem, transparent 0.0625rem),
    linear-gradient(to bottom, rgba(255,255,255,.05) 0.0625rem, transparent 0.0625rem);
  background-size: 5rem 5rem;
  opacity:.18;
  mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
  pointer-events:none;
}

.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(50rem 31.25rem at 50% 40%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(43.75rem 28.125rem at 35% 20%, rgba(34,211,238,.08), transparent 60%);
  filter: blur(0.625rem);
  opacity: .9;
  pointer-events:none;
}

.hero-inner{
  position:relative;
  z-index:2;
  text-align:center;
  max-width: 56.25rem;
  padding: 0 1.125rem;
}

.hero-tag{ color: var(--muted); margin-bottom:1rem; font-size:.95rem; }
.hero-title{ margin:0; font-weight:800; letter-spacing:-0.0625rem; font-size:clamp(2.2rem,7vw,3.2rem); line-height:1.08; }
.hero-title-light{ color: var(--fg); }
.hero-title-accent{ color: var(--primary); text-shadow:0 0 1.25rem rgba(34,211,238,.18); }
.hero-subtitle,.hero-subtitle2{ margin:.9rem auto 0; max-width:60ch; color:var(--muted); line-height:1.65; font-size:.98rem; }
.hero-scroll{ margin-top:1.8rem; color:var(--muted); font-size:.8rem; letter-spacing:.08em; opacity:.9; }

@media (min-width:48rem){
  .hero-tag{ font-size:1.05rem; }
  .hero-title{ font-size:clamp(3.0rem,4.2vw,4.3rem); }
  .hero-subtitle,.hero-subtitle2{ font-size:1.06rem; }
}
@media (min-width:64rem){
  .hero-title{ font-size:clamp(3.6rem,3.6vw,5.2rem); }
  .hero-subtitle,.hero-subtitle2{ font-size:1.12rem; }
}

/* ===== Platforms ===== */
.lp-section{
  max-width: 75rem;
  margin: 0 auto;
  padding: 2.5rem 1.125rem 4rem;
}

.lp-head{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.25rem;
}

.lp-title{ margin:0; font-size:1.4rem; color:var(--fg); }
.lp-line{ height:1px; flex:1; background:var(--border); }

.platform-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
}

.p-card{
  display:block;
  text-decoration:none;
  color: inherit;

  border:1px solid var(--border);
  background: var(--panel);
  border-radius:1rem;
  padding:1rem;

  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.p-card:hover{
  background: var(--hover);
  box-shadow: 0 0 0 1px var(--border);
  transform: translateY(-2px);
}

.p-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}

.p-name{ font-size:1.05rem; font-weight:800; color:var(--fg); }
.p-count{ font-size:.85rem; color:var(--muted); white-space:nowrap; }
.p-hint{ margin-top:.75rem; font-size:.9rem; color:var(--primary); }

.lp-empty{
  margin-top:1rem;
  padding:1.2rem 1rem;
  border:1px dashed var(--border);
  border-radius:1rem;
  color:var(--muted);
}

@media (max-width:64rem){ .platform-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:48rem){ .platform-grid{ grid-template-columns: 1fr; } }

/* ===== Homepage section wrapper ===== */
.hp-section{
  max-width: 75rem;
  margin: 0 auto;
  padding: 2.5rem 1.125rem;
}

.hp-head{
  display:flex;
  align-items:center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.hp-title{
  margin:0;
  font-family:"JetBrains Mono", monospace;
  font-size: 1.4rem;
  color: var(--fg);
}

.hp-line{
  height: 1px;
  flex: 1;
  background: var(--border);
}

.hp-empty{
  margin-top: .75rem;
  padding: 1.2rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 1rem;
  color: var(--muted);
  font-family:"JetBrains Mono", monospace;
}

/* ===== Vulnerability cards (used on homepage + list page) ===== */
.vuln-list{
  display:grid;
  gap: 1rem;
}

.vuln-card{
  display:block;
  text-decoration:none;
  color: inherit;

  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 1rem;
  padding: 1rem;

  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.vuln-card:hover{
  background: var(--hover);
  box-shadow: 0 0 0 1px var(--border);
  transform: translateY(-2px);
}

.vuln-top{
  display:flex;
  align-items:center;
  gap: .75rem;
  flex-wrap:wrap;
}

.vuln-id{
  color: var(--primary);
  font-weight: 800;
  font-size: .9rem;
}

.vuln-date{
  margin-left:auto;
  color: var(--muted);
  font-size: .85rem;
}

.vuln-title{
  margin-top: .55rem;
  color: var(--fg);
  font-weight: 800;
  font-size: 1.1rem;
}

.vuln-summary{
  margin-top: .35rem;
  color: var(--muted);
  line-height: 1.6;
  font-size: .95rem;
}

/* ===== Severity pill ===== */
.sev{
  font-size: .75rem;
  padding: .2rem .5rem;
  border-radius: .6rem;
  border: 1px solid var(--border);
  font-family:"JetBrains Mono", monospace;
}

.sev-critical{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.18); color: rgba(239,68,68,.98); }
.sev-high{     border-color: rgba(251,146,60,.35); background: rgba(251,146,60,.18); color: rgba(251,146,60,.98); }
.sev-medium{   border-color: rgba(255,193,77,.35); background: rgba(255,193,77,.18); color: rgba(255,193,77,.98); }
.sev-low{      border-color: rgba(34,197,94,.28);  background: rgba(34,197,94,.14);  color: rgba(34,197,94,.95); }
.sev-info{     border-color: rgba(148,163,184,.25); background: rgba(148,163,184,.10); color: rgba(148,163,184,.9); }
.sev-unk{      border-color: rgba(148,163,184,.25); background: rgba(148,163,184,.10); color: rgba(148,163,184,.9); }

/* ===== Responsive ===== */
@media (max-width: 48rem){
  .vuln-date{ margin-left: 0; width: 100%; }
}

.lp-head .fancy-link{
  margin-left: auto;
  white-space: nowrap;
}

/* ===== About page ===== */
.about{ padding: 2.5rem 1.125rem 4rem; }
.about-wrap{ max-width: 75rem; margin: 0 auto; }

.about-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.about-title{ margin:0; font-size:1.4rem; color:var(--fg); }
.about-line{ height:1px; flex:1; background:var(--border); }

.about-card{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:1rem;
  padding:1.25rem;
}

.about-top{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  align-items:flex-start;
}

.about-name{
  margin:0;
  font-size:2rem;
  letter-spacing:-.02em;
  color:var(--fg);
  font-weight:800;
}

.about-sub{
  margin:.6rem 0 0;
  color:var(--muted);
  line-height:1.65;
  max-width: 65ch;
}

.about-sub-small{ font-size: .9rem; opacity: .9; }

.about-grid{
  margin-top: 1.2rem;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:1rem;
}

.about-block-title{
  color:var(--fg);
  font-weight:800;
  margin-bottom:.65rem;
}

.about-list{
  margin:0;
  padding-left:1.1rem;
  color:var(--muted);
  line-height:1.7;
}

.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.tag{
  display:inline-flex;
  font-size:.78rem;
  padding:.25rem .55rem;
  border-radius:.75rem;
  border:1px solid var(--border);
  background:hsl(220 10% 10% / .35);
  color:var(--fg);
}

/* span 2 columns for platforms block */
.about-block-span2{ grid-column: 1 / -1; }

.about-stats{
  margin-top: 1rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
}

.stat-card{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:1rem;
  padding:1rem;
  text-align:center;
}

.stat-num{
  font-size:2rem;
  font-weight:800;
  color:var(--fg);
}

.stat-label{
  margin-top:.3rem;
  font-size:.85rem;
  color:var(--muted);
}

.about-note{ margin-top: 1rem; }

/* ===== Icon buttons (ROW) ===== */
.about-icons{
  display:flex;
  gap:.6rem;
  align-items:center;
  flex-wrap:wrap;
}

.platform-icons{
  display:flex;
  gap:.6rem;
  align-items:center;
  flex-wrap:wrap;
}

.icon-link{
  width: 44px;
  height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  text-decoration:none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.icon-link:hover{
  background: var(--hover);
  box-shadow: 0 0 0 1px var(--border);
  transform: translateY(-2px);
}

.icon-svg{
  width: 20px;
  height: 20px;
  color: hsl(220 10% 90%);
  opacity: .95;
}

@media (max-width: 64rem){
  .about-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 48rem){
  .about-stats{ grid-template-columns: 1fr; }
}

.about-mini-card{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:1rem;
  padding:1.25rem;
  max-width: 52rem;   /* like the screenshot (not full width) */
  margin: 0 auto;
}

.about-mini-card p{
  margin:0 0 1rem;
  color: var(--muted);
  line-height: 1.7;
}

.about-mini-card p:last-of-type{ margin-bottom: 1.25rem; }

.about-mini-actions{
  display:flex;
  gap:.6rem;
  align-items:center;
}

/* ===== Writeups page ===== */
.wu-page{max-width:75rem;margin:0 auto;padding:2.5rem 1.125rem}
.wu-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.wu-title{margin:0;font-size:1.4rem;color:var(--fg)}
.wu-title-icon{color:var(--primary);display:inline-flex}
.wu-line{height:1px;flex:1;background:var(--border)}
.wu-muted{color:var(--muted);font-size:.85rem}

.wu-filters{display:flex;gap:1.25rem;flex-wrap:wrap;margin:1rem 0 1.25rem}
.wu-field{display:grid;gap:.4rem}
.wu-label{font-size:.85rem;color:var(--muted)}
.wu-filters select,
.wu-filters input{
  font-family:"JetBrains Mono", monospace;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--fg);
  padding:.65rem .8rem;
  border-radius:.9rem;
  outline:none;
}
.wu-search{min-width:18rem;flex:1}

.wu-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:1rem;
}

.wu-card{
  text-decoration:none;
  color:inherit;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:1rem;
  padding:1.1rem;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.wu-card:hover{
  background:var(--hover);
  box-shadow:0 0 0 1px var(--border);
  transform: translateY(-2px);
}

.wu-card-top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.wu-card-pills{display:flex;gap:.5rem;flex-wrap:wrap}
.wu-card-date{color:var(--muted);font-size:.85rem;white-space:nowrap}

.wu-card-title{
  margin-top:.75rem;
  color:var(--fg);
  font-weight:800;
  font-size:1.25rem;
  line-height:1.25;
}
.wu-card-desc{margin-top:.6rem;color:var(--muted);line-height:1.6;max-width:70ch}

.wu-card-tags{margin-top:.9rem;display:flex;gap:.5rem;flex-wrap:wrap}

.wu-empty{
  padding:1.2rem 1rem;
  border:1px dashed var(--border);
  border-radius:1rem;
  color:var(--muted);
}

.wu-footer{margin-top:1rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}
.wu-pager{display:flex;gap:.75rem;align-items:center}
.wu-btn{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--fg);
  padding:.55rem .9rem;
  border-radius:.9rem;
  cursor:pointer;
}
.wu-btn:disabled{opacity:.5;cursor:not-allowed}

@media (max-width:64rem){
  .wu-grid{grid-template-columns:1fr}
}

/* ===== Pills (if you don't already have them) ===== */
.pill{
  font-size:.75rem;
  padding:.2rem .55rem;
  border-radius:.65rem;
  border:1px solid var(--border);
  font-family:"JetBrains Mono", monospace;
}
.pill-platform{border-color:rgba(34,211,238,.20);background:rgba(34,211,238,.08);color:rgba(34,211,238,.95)}
.pill-cat{border-color:rgba(34,211,238,.15);background:rgba(34,211,238,.06);color:rgba(34,211,238,.9)}

.pill-veasy{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.12);color:rgba(34,197,94,.95)}
.pill-easy{border-color:rgba(34,197,94,.22);background:rgba(34,197,94,.10);color:rgba(34,197,94,.9)}
.pill-seasy{border-color:rgba(16,185,129,.22);background:rgba(16,185,129,.10);color:rgba(16,185,129,.9)}
.pill-med{border-color:rgba(255,193,77,.35);background:rgba(255,193,77,.16);color:rgba(255,193,77,.98)}
.pill-smed{border-color:rgba(251,146,60,.35);background:rgba(251,146,60,.16);color:rgba(251,146,60,.98)}
.pill-hard{border-color:rgba(251,146,60,.40);background:rgba(251,146,60,.18);color:rgba(251,146,60,.98)}
.pill-insane{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.18);color:rgba(239,68,68,.98)}
.pill-unk{border-color:rgba(148,163,184,.25);background:rgba(148,163,184,.10);color:rgba(148,163,184,.9)}

/* Make writeup HTML content look like the other solve pages */
.writeup-body h1, .writeup-body h2, .writeup-body h3{
  color: var(--fg);
  margin: 1.2rem 0 .6rem;
  line-height: 1.2;
}
.writeup-body p{
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 1rem;
}
.writeup-body img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
  border: 1px solid var(--border);
  margin: 1rem 0;
}