/*!
 * © 2025–2026 Davide Marcolongo
 * GPL-3.0-or-later
 */

/* =========================================================
   01 – Variables
========================================================= */

:root {
  --bg:#f6f4f1;
  --surface:#fcfbf9;
  --surface-2:#f2efeb;
  --text:#1c1c1c;
  --muted:#6f6f6f;
  --border:#ddd8d2;
  --accent:#550815;
  --accent-soft:rgba(85,8,21,.08);
  --shadow:0 10px 30px rgba(0,0,0,.05);
  --radius:20px;
}

/* =========================================================
   02 – Reset
========================================================= */

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at top left, rgba(85,8,21,.035), transparent 28%),
    var(--bg);
  color:var(--text);
  line-height:1.65;
}

/* =========================================================
   03 – Base typography
========================================================= */

h1,h2,h3 {
  margin:0;
  font-weight:550;
  letter-spacing:-0.02em;
}

h1 {
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.06;
}

h2 {
  font-size:1.55rem;
  line-height:1.15;
}

h3 {
  font-size:1.02rem;
  line-height:1.25;
}

p {
  margin:0 0 1rem;
  font-size:.96rem;
}

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

a:hover { text-decoration:underline; }

.muted {
  color:var(--muted);
  font-size:.92rem;
}

.eyebrow {
  display:inline-block;
  margin-bottom:.55rem;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--accent);
}

/* =========================================================
   04 – Layout
========================================================= */

.container {
  max-width:1280px;
  margin:0 auto;
  padding:0 1.2rem;
}

.main-stack {
  display:flex;
  flex-direction:column;
  gap:1.6rem;
  padding:1.6rem 0 3.2rem;
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:1rem;
  margin-bottom:1rem;
}

/* =========================================================
   05 – Hero
========================================================= */

.hero {
  padding:2.4rem 0 1.6rem;
  border-bottom:1px solid var(--border);
}

.hero-inner {
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

@media(min-width:900px){
  .hero-inner {
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-end;
  }
}

.header-title {
  display:flex;
  align-items:center;
  gap:1.25rem;
}

.header-logo {
  width:88px;
  height:88px;
  border-radius:50%;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.92;
  flex-shrink:0;
  background:var(--surface);
  border:1px solid var(--border);
  padding:.45rem;
}

.hero-subtitle {
  margin-top:.5rem;
  max-width:52rem;
  color:var(--muted);
}

.hero-stats {
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
}

.hero-stat {
  min-width:120px;
  padding:.9rem 1rem;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(8px);
}

.hero-stat-value {
  display:block;
  font-size:1.4rem;
  font-weight:650;
  line-height:1;
}

.hero-stat-label {
  display:block;
  margin-top:.25rem;
  font-size:.82rem;
  color:var(--muted);
}

/* =========================================================
   06 – Info band
========================================================= */

.info-band {
  position:relative;
  z-index:20;
}

.info-launcher-wrap {
  position:relative;
}

.info-launchers {
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
}

.info-chip {
  appearance:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.72);
  color:var(--text);
  padding:.68rem 1rem;
  border-radius:999px;
  cursor:pointer;
  font-size:.9rem;
  transition:all .18s ease;
  position:relative;
}

.info-chip::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  box-shadow:0 0 0 0 rgba(85,8,21,.15);
  transition:box-shadow .25s ease;
}

.info-chip:hover::after {
  box-shadow:0 0 0 4px rgba(85,8,21,.08);
}

.info-chip:hover {
  border-color:var(--accent);
  background:var(--accent-soft);
}

.info-chip.is-active {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.info-overlay {
  position:absolute;
  top:calc(100% + .8rem);
  left:0;
  width:min(760px, 100%);
  background:rgba(255,255,255,.96);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 24px 48px rgba(0,0,0,.12);
  padding:1.15rem 1.2rem 1rem;
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.info-overlay.is-open {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.info-overlay-close {
  appearance:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.82);
  color:var(--muted);
  width:34px;
  height:34px;
  border-radius:999px;
  cursor:pointer;
  font-size:1.1rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  margin-bottom:.7rem;
}

.info-overlay-close:hover {
  color:var(--accent);
  border-color:rgba(85,8,21,.25);
  background:var(--accent-soft);
}

.info-panel {
  display:none;
}

.info-panel.is-active {
  display:block;
}

.info-panel h3 {
  margin-bottom:.55rem;
}

.info-panel p {
  margin:0;
  font-size:.95rem;
  line-height:1.7;
  color:var(--text);
}

@media(max-width:640px){
  .info-overlay {
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    margin-top:.8rem;
    box-shadow:var(--shadow);
  }
}

/* =========================================================
   07 – Tools panel
========================================================= */

.tools-panel {
  min-width:0;
}

/* =========================================================
   08 – Category tabs
========================================================= */

.category-tabs {
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  margin:0 0 1.3rem;
}

.tab-button {
  appearance:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.7);
  color:var(--text);
  padding:.7rem 1rem;
  border-radius:999px;
  cursor:pointer;
  font-size:.9rem;
  transition:all .18s ease;
}

.tab-button:hover {
  border-color:var(--accent);
  background:var(--accent-soft);
}

.tab-button.is-active {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* =========================================================
   09 – Tool groups
========================================================= */

.tool-group {
  display:none;
}

.tool-group.is-active {
  display:block;
}

/* =========================================================
   10 – Tools grid compact
========================================================= */

.tools-grid,
.tools-grid-compact {
  display:grid;
  gap:.85rem;
  grid-template-columns:1fr;
}

@media (min-width:760px) {
  .tools-grid,
  .tools-grid-compact {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:1080px) {
  .tools-grid,
  .tools-grid-compact {
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (min-width:1360px) {
  .tools-grid,
  .tools-grid-compact {
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

/* =========================================================
   11 – Tool cards compact
========================================================= */

.tool-card,
.tool-card-compact {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:150px;
  padding:.9rem .95rem .85rem;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tool-card:hover,
.tool-card-compact:hover {
  transform:translateY(-2px);
  border-color:rgba(85,8,21,.35);
  box-shadow:0 14px 28px rgba(0,0,0,.07);
}

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

.tool-title {
  margin-bottom:.45rem;
  font-size:1rem;
  line-height:1.25;
}

.tool-title a {
  color:var(--text);
  text-decoration:none;
}

.tool-card:hover .tool-title a,
.tool-card-compact:hover .tool-title a {
  color:var(--accent);
}

.tool-desc {
  margin-bottom:.7rem;
  font-size:.9rem;
  color:var(--muted);
  line-height:1.5;

  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.tool-card-bottom {
  margin-top:auto;
  padding-top:.15rem;
}

.tool-link {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.88rem;
  font-weight:600;
}

.tool-link::after {
  content:"→";
  transition:transform .18s ease;
}

.tool-card:hover .tool-link::after,
.tool-card-compact:hover .tool-link::after {
  transform:translateX(3px);
}

.badge {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:.24rem .65rem;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--muted);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.tool-beta {
  font-size:.7rem;
  font-weight:700;
  padding:.24rem .5rem;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid rgba(85,8,21,.15);
}

/* =========================================================
   12 – Empty state / footer
========================================================= */

.empty-state {
  padding:2rem 1rem;
  border:1px dashed var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.55);
}

.site-footer {
  padding:1.2rem 0 2.4rem;
}

.site-footer .container {
  border-top:1px solid var(--border);
  padding-top:1rem;
}

.site-footer p {
  margin:0;
  font-size:.86rem;
  color:var(--muted);
  text-align:center;
}

/* =========================================================
   13 – Mobile
========================================================= */

@media(max-width:640px){

  .header-title {
    align-items:flex-start;
  }

  .header-logo {
    width:68px;
    height:68px;
  }

  .hero-stat {
    min-width:unset;
  }

  .main-stack {
    gap:1.3rem;
    padding:1.3rem 0 2.6rem;
  }

  .info-card {
    min-height:auto;
  }
}