* {
  font-family: 'Nunito', sans-serif !important;
}

:root {
  --sponge-top: 65%;
  --sponge-left: 25%;
  --sponge-width: 420px;

  --title-top: 34%;
  --title-left: 54%;
  --title-font-size: 66px;

  --about-label-top: 32%;
  --about-label-left: 78%;
  --about-label-font-size: 39px;

  --about-top: 54%;
  --about-left: 78%;
  --about-max-width: 260px;
  --about-font-size: 22px;

  --clean-top: 65%;
  --clean-left: 55%;
  --clean-font-size: 18px;

  --social-bottom: 30px;
  --social-left: 40px;
  --social-gap: 18px;
  --social-font-size: 18px;

  --bg-dirty: #d0d4dc;
  --bg-clean: #f4f6f9;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-dirty);
  color: #222;
  overflow: hidden;
}

.dirty-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("dirt.png");
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  mix-blend-mode: multiply;
  clip-path: inset(0 0 0 0);
}

body.clean-mode {
  background: var(--bg-clean);
}

body.clean-mode .dirty-layer {
  opacity: 0;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

.sponge-image {
  position: absolute;
  top: var(--sponge-top);
  left: var(--sponge-left);
  transform: translate(-50%, -50%);
  width: var(--sponge-width);
  animation: spongeFloat 4s ease-in-out infinite;
}

@keyframes spongeFloat {
  0%, 100% { transform: translate(-50%, -52%); }
  50% { transform: translate(-50%, -48%); }
}

.hero-title {
  position: absolute;
  top: var(--title-top);
  left: var(--title-left);
  transform: translate(-50%, -50%);
  font-size: var(--title-font-size);
  font-weight: 700;
  color: #ffffff;
  padding: 18px 32px;
  border-radius: 999px;
  background: #1f3d2a;
  white-space: nowrap;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.about-label {
  position: absolute;
  top: var(--about-label-top);
  left: var(--about-label-left);
  transform: translate(-50%, -50%);
  font-size: var(--about-label-font-size);
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #ffffff;
  -webkit-text-stroke: 2px #000000;
  text-shadow:
    0 0 5px rgba(0,0,0,0.65),
    0 3px 6px rgba(0,0,0,0.45);
  opacity: 0;
  animation: fadeInAbout 0.7s ease forwards 0.1s;
  -webkit-font-smoothing: antialiased;
}

@keyframes fadeInAbout {
  from { opacity: 0; transform: translate(-50%, -60%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

.hero-text {
  position: absolute;
  top: var(--about-top);
  left: var(--about-left);
  transform: translate(-50%, -50%);
  max-width: var(--about-max-width);
  font-size: var(--about-font-size);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.3px;
  color: #fff;
  -webkit-text-stroke: 0.3px #000;
  text-shadow:
    0 0 4px rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.35);
  text-align: center;
  opacity: 0;
  animation: fadeInText 0.9s ease forwards 0.2s;
  -webkit-font-smoothing: antialiased;
}

@keyframes fadeInText {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

.clean-toggle-btn {
  position: absolute;
  top: var(--clean-top);
  left: var(--clean-left);
  transform: translate(-50%, -50%);
  font-size: var(--clean-font-size);
  padding: 10px 28px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  background: #ffcf3c;
  color: #111;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.clean-toggle-btn:hover {
  transform: translate(-50%, -52%);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
}

.clean-toggle-btn:active {
  transform: translate(-50%, -46%) scale(0.96);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.social-links {
  position: absolute;
  left: var(--social-left);
  bottom: var(--social-bottom);
  display: flex;
  gap: var(--social-gap);
}

.social-btn {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 9px 20px;
  cursor: pointer;
  font-size: var(--social-font-size);
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.social-btn:hover {
  transform: translateY(-2px);
  background: #111;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.35);
}

.social-btn:active {
  transform: translateY(1px) scale(0.96);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

body.wiping .sponge-image {
  animation: spongeWipe 1.4s linear forwards;
}

@keyframes spongeWipe {
  0% { top: var(--sponge-top); left: 110%; transform: translate(-50%, -50%) rotate(-8deg); }
  100% { top: var(--sponge-top); left: -10%; transform: translate(-50%, -50%) rotate(0deg); }
}

body.wiping .dirty-layer {
  animation: dirtWipe 1.4s linear forwards;
}

@keyframes dirtWipe {
  0% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 100% 0 0); opacity: 0; }
}

@media (max-width: 768px) {
  :root {
    --sponge-top: 52%;
    --sponge-left: 50%;
    --sponge-width: 260px;

    --title-top: 18%;
    --title-left: 50%;
    --title-font-size: 28px;

    --about-label-top: 54%;
    --about-label-left: 50%;
    --about-label-font-size: 20px;

    --about-top: 68%;
    --about-left: 50%;
    --about-max-width: 80vw;
    --about-font-size: 16px;

    --clean-top: 84%;
    --clean-left: 50%;
    --clean-font-size: 16px;

    --social-bottom: 16px;
    --social-left: 50%;
    --social-font-size: 15px;
  }

  .social-links {
    left: 50%;
    transform: translateX(-50%);
  }
}