/* styles.css */
:root{
  --bg-base: #e2e9f4;      /* main background */
  --edge-tint: #dbeaec;   /* side tint */

  --text: #8d9a9a;
  --text-strong: #7f8d8d;

  --link: inherit;
  --link-hover: inherit;

  --hero-min: 240px;
  --hero-max: 560px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg-base);
}

a{
  color: inherit;
  text-decoration: none;
}
a:hover,
a:focus{
  text-decoration: none;
}

/* background look: subtle green tint around edges + soft center */
.page{
  min-height:100vh;
  display:flex;
  justify-content:center;
  background:
    linear-gradient(
      90deg,
      #dbeaec 0%,
      #e2e9f4 20%,
      #e2e9f4 80%,
      #dbeaec 100%
    );
}

.wrap{
  width: min(980px, 92vw);
  padding: 72px 0 36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 22px;
}

.top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
}

.logoLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  margin-bottom: 80px;
}

.logoImg{
  width: clamp(100px, 10vw, 130px);
  height: auto;
  display:block;
}

.tagline{
  margin: 10px 0 0;
  margin-bottom: -38px;
  text-align:center;
  font-size: clamp(14px, 3vw, 24px);
  color: var(--text-strong);
  opacity: 0.9;
}

.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  margin: 6px 0;
  padding: 10px 0;
}

/* Hero: “half width” with min/max */
.heroImg{
  width: clamp(var(--hero-min), 70vw, var(--hero-max));
  max-width: 70%;
  height:auto;
  display:block;
}

.slogan{
  margin: 6px 0 0;
  text-align:center;
  font-size: clamp(20px, 3.4vw, 38px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}

.footer{
  margin-top: auto;
  padding-top: 20vh;
  display:flex;
  flex-direction:column;
  align-items:center;

.footerLink{
  margin: 30px;
}
.copyright{
  padding-top: 50px;
}