/* styles.css */
/* ===== Design tokens ===== */
:root {
  --c-ink: #10213b;
  --c-accent: #1dffc4;
  --c-green-50: #f3fffc;
  --c-pink-50: #fbf1ef;
  --c-peach-100: #ffe9e2;
  --c-peach-200: #ffd8cb;
  --c-peach-300: #ffc7b5;
  --c-peach-400: #ffb69e;
  --c-mint-200: #9dffe5;
  --c-mint-300: #c8fff0;

  --ff: "gamay-variable",
        ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji",
        sans-serif;

  --h1-size: 48px;
  --h1-line: 60px;
  --h1-w: 800;
  --h3-size: 25px;
  --h3-line: 32px;
  --h3-w: 800;
  --h3-track: 3.75px;
  --h4-size: 18px;
  --h4-line: 24px;
  --h4-w: 500;

  --p-size: 16px;
  --p-line: 26px;
  --p-w: 400;
  --menu-size: 16px;
  --menu-w: 600;
  --menu-track: 0.32px;
  --tag-size: 14px;
  --tag-line: 24px;
  --tag-w: 500;
}
@media (max-width: 900px) {
  :root {
    --h1-size: 40px;
    --h1-line: 52px;
    --h3-size: 20px;
    --h3-line: 28px;
    --h3-track: 2px;
    --h4-size: 16px;
    --h4-line: 22px;
  }
}
@media (max-width: 600px) {
  :root {
    --h1-size: 32px;
    --h1-line: 42px;
    --h3-size: 18px;
    --h3-line: 24px;
    --h3-track: 1.5px;
    --h4-size: 15px;
    --h4-line: 22px;
  }
}

/* ===== Base ===== */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  font-family: var(--ff);
  color: #000;
  background: #fff;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* ===== Layout helpers ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.section {
  padding: 128px 0;
  width: 100%;
}
.section-lg {
  padding: 48px 0;
}
.row {
  display: flex;
  gap: 48px;
}
.row.wrap {
  flex-wrap: wrap;
}
.row.center {
  align-items: center;
}
.row.between {
  justify-content: space-between;
  align-items: center;
}
.grow {
  flex: 1 1 0;
}
.w-hero {
  width: 100%;
  max-width: 100%;
}
.w-col {
  max-width: 100%;
}
.centered-text {
  text-align: center;
}

/* ===== Typography ===== */
.surtitre {
  font-size: 18px;
  letter-spacing: 4.5px;
  color: #0ad69f;
  font-weight: 500;
  margin: 0;
  text-transform: uppercase;
}
.h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  font-weight: var(--h1-w);
  color: var(--c-ink);
  margin: 0 0 0.5em 0;
}
.h2 {
  font-size: 36px;
  line-height: 46px;
  font-weight: 800;
  color: #000;
  margin: 0;
}
.h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  font-weight: var(--h3-w);
  letter-spacing: var(--h3-track);
  margin: 0;
}
.h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  font-weight: var(--h4-w);
  color: var(--c-ink);
  margin: 0;
}
.p {
  font-size: var(--p-size);
  line-height: var(--p-line);
  font-weight: var(--p-w);
  margin: 0 0 16px 0;
}
.menu {
  font-size: var(--menu-size);
  font-weight: var(--menu-w);
  letter-spacing: var(--menu-track);
  color: var(--c-ink);
}
.tag {
  font-size: var(--tag-size);
  line-height: var(--tag-line);
  font-weight: var(--tag-w);
  color: #404040;
}

/* ===== Header / Nav ===== */
.header {
  padding: 24px 0;
}
.logo svg {
  display: block;
  width: 180px;
  height: auto;
}
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav {
  display: flex;
  gap: 32px;
  align-items: center;
}
.cta,
.cta-h {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border: 2px solid var(--c-ink);
  border-radius: 64px;
  box-shadow: 4px 4px 0 var(--c-ink);
}
.cta.primary,
.cta-h.primary {
  background: var(--c-accent);
  color: var(--c-ink);
}
.cta.ghost,
.cta-h.ghost {
  background: #fff;
  color: var(--c-ink);
}
.cta::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 12H4M20 12C20 13.318 15 17 15 17M20 12C20 10.682 15 7 15 7' stroke='%2310213B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.cta:hover,
.cta-h:hover {
  box-shadow: none;
}

/* ===== Badges ===== */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #fff;
  border-radius: 5px;
  backdrop-filter: blur(5px);
}

/* ===== Cards / grids ===== */
.benefit {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.benefit .h3 {
  text-transform: uppercase;
  margin-bottom: 16px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
}
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
}
.tile img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.card {
  border-radius: 5px;
  padding: 32px;
}
.card h3 {
  text-transform: uppercase;
}
.card.mint {
  background: var(--c-mint-300);
}
.card.peach-100 {
  background: var(--c-peach-100);
}
.card.green-50 {
  background: var(--c-green-50);
}
.card.white {
  background: #fff;
}
.card.mint-200 {
  background: var(--c-mint-200);
}
.card.peach-200 {
  background: var(--c-peach-200);
}

/* ===== Icons / images ===== */
.icon {
  display: block;
  width: 100%;
  max-width: 100px;
  height: auto;
}
.img-shadow {
  border: 1px solid #000;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #000;
}

/* ===== Dot background ===== */
.dotbg {
  --dot-size: 20px;
  --dot-color: #999;
  --dot-opacity: 0.4;
  background-color: #f8f8f8;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23999999' opacity='0.4'/></svg>");
  background-repeat: repeat;
  background-size: var(--dot-size) var(--dot-size);
}

/* ===== Accordion (Hero) ===== */
.hero-accordion {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px;
  border-radius: 14px;
  flex: 1;
}
.acc-item {
  border: 2px solid var(--c-ink);
  border-radius: 8px;
  background: #fff;
  padding: 0;
  box-shadow: none;
}
.acc-item > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 8px;
  outline: none;
}
.acc-item > summary::-webkit-details-marker {
  display: none;
}
.acc-item h3 {
  margin: 0;
  font-weight: 500;
  color: var(--c-ink);
}
.acc-toggle {
  --pm-bg: var(--c-ink);
  --pm-size: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pm-size);
  height: var(--pm-size);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--pm-bg);
  flex-shrink: 0;
}
.acc-toggle svg {
  width: 50%;
  height: 50%;
  display: block;
}
details[open] > summary .pm-vert {
  display: none;
}
.acc-content {
  padding: 0 24px 20px;
  color: var(--c-ink);
}
.acc-content p {
  margin: 12px 0 0;
}
.acc-mint {
  background: var(--c-mint-200);
}
.acc-peach {
  background: var(--c-peach-300);
}
.acc-mint-50 {
  background: var(--c-green-50);
}
.acc-peach-100 {
  background: var(--c-peach-100);
}
details[open] {
  border-radius: 8px;
}
.acc-item > summary:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* ===== Value list ===== */
.value-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.value-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  min-height: 48px;
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.value-item .title {
  margin: 0;
  font-weight: 500;
  color: var(--c-ink);
}
.value-item .desc {
  margin: 0;
  color: var(--c-ink);
}
.peach-100 {
  background: var(--c-peach-100);
}
.peach-200 {
  background: var(--c-peach-200);
}
.peach-300 {
  background: var(--c-peach-300);
}
.peach-400 {
  background: var(--c-peach-400);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .row {
    gap: 32px;
  }
}
@media (max-width: 960px) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  .h1 {
    font-size: 36px;
    line-height: 46px;
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .row {
    flex-direction: column;
  }
}

/* Nav: desktop / mobile */
.nav-desktop {
  display: flex;
}
.nav-mobile {
  display: none;
}
.nav-mobile > summary {
  list-style: none;
}
.nav-mobile > summary::-webkit-details-marker {
  display: none;
}
@media (max-width: 768px) {
  nav.main-nav {
    width: 100%;
  }
  .nav-desktop {
    display: none;
  }
  .nav-mobile {
    display: block;
    width: 100%;
  }
  .nav-toggle {
    display: block;
    padding: 12px;
    background: var(--c-ink);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
  }
  .nav-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px !important;
    background: #fff;
    border-radius: 8px;
    margin-top: 8px;
    border: 1px solid #000;
    box-shadow: 3px 3px 0 #000;
  }
}
@media (max-width: 600px) {
  .acc-item > summary {
    padding: 16px 18px;
  }
  .acc-toggle {
    --pm-size: 36px;
  }
  .grid-5 {
    grid-template-columns: 1fr;
  }
}

/* ===== About ===== */
.about {
  padding: 80px 0 0;
}
.about .container {
  display: flex;
  flex-direction: column;
}
.about-text {
  max-width: 800px;
  margin-left: 0;
  margin-right: auto;
}
@media (min-width: 801px) {
  .about-text {
    margin-left: 64px;
  }
}
.about-visual {
  margin: 32px 0 0;
  display: flex;
  justify-content: flex-end;
}
.about-visual img {
  max-width: 560px;
  width: 100%;
}
#services h3 {
  font-size: 20px;
  letter-spacing: 3px;
}
#contact .container {
  border: 2px solid #000;
  border-radius: 28px;
  max-width: 822px;
  padding: 96px 20px;
  background-color: var(--c-mint-300);
}
.contact-section {
  padding: 20px;
}

/* ===== Footer ===== */
.footer {
  padding: 28px 0;
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
  color: var(--c-ink);
}
.footer-meta .legal {
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 500;
}
.footer-meta .legal:hover {
  text-decoration: underline;
}
.footer-meta .copy {
  margin: 0;
  font-weight: 500;
}
@media (max-width: 700px) {
  .footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .footer-meta {
    text-align: left;
  }
}

#manifesto .p {
  max-width: 580px;
}