:root {
  --color-canvas-cream: #f8f5ed;
  --color-canvas-soft: #fffdf8;
  --color-deep-green: #123f3a;
  --color-green-muted: #59766d;
  --color-muted-gold: #9f7f3c;
  --color-border-green: rgba(18, 63, 58, 0.16);
  --page: var(--color-canvas-cream);
  --panel: rgba(255, 253, 248, 0.84);
  --panel-soft: #f0f1ea;
  --ink: var(--color-deep-green);
  --muted: rgba(18, 63, 58, 0.68);
  --subtle: rgba(18, 63, 58, 0.48);
  --line: var(--color-border-green);
  --line-strong: rgba(18, 63, 58, 0.26);
  --primary: var(--color-deep-green);
  --primary-strong: #0b2f2b;
  --accent: var(--color-deep-green);
  --accent-soft: rgba(18, 63, 58, 0.09);
  --nav: rgba(248, 245, 237, 0.74);
  --shadow: 0 22px 60px -42px rgba(18, 63, 58, 0.62);
  --radius: 12px;
  --radius-sm: 8px;
  --transition: 180ms ease;

  --bg: var(--color-canvas-cream);
  --surface: rgba(255, 253, 248, 0.84);
  --surface-subtle: #f0f2ee;
  --surface-hover: #ecefeb;
  --surface-muted: #f4f5f1;
  --text-primary: var(--color-deep-green);
  --text-secondary: rgba(18, 63, 58, 0.68);
  --text-tertiary: rgba(18, 63, 58, 0.48);
  --accent-hover: #0b2f2b;
  --border: var(--color-border-green);
  --border-strong: rgba(18, 63, 58, 0.26);

  --paper: rgba(255, 253, 247, 0.76);
  --paper-solid: #fffdf7;
  --accent-dark: #0a4d3e;
  --blueprint: #1c475d;
  --green: #406a4c;
  --radius-md: 10px;
}

body[data-product] {
  padding-top: 100px !important;
  background:
    radial-gradient(
      ellipse at 50% 12%,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.62) 34%,
      transparent 66%
    ),
    radial-gradient(ellipse at 50% 0%, rgba(159, 127, 60, 0.08) 0%, transparent 42%), var(--page) !important;
  color: var(--ink);
}

.gakiwoo-footer {
  width: min(1440px, 100%);
  margin-top: 80px;
  margin-right: auto;
  margin-left: auto;
  padding: 90px clamp(20px, 5vw, 80px) 36px;
  border-top: 1px solid var(--line, var(--border));
  box-sizing: border-box;
}

.gakiwoo-footer-inner {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) repeat(3, minmax(140px, 0.45fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.navbar,
.top-nav,
.nav {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;
  height: 100px !important;
  background: var(--nav) !important;
  border-bottom: 1px solid rgba(18, 63, 58, 0.08) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  z-index: 100;
}

.navbar .nav-container,
.top-nav .nav-container,
.nav .nav-container {
  width: 100%;
  max-width: 1440px !important;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo,
.top-nav .logo,
.nav .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink) !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
}

.navbar .logo-icon,
.top-nav .logo-icon,
.nav .logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
}

.navbar .nav-links,
.top-nav .nav-links,
.nav .nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar .mobile-menu-btn,
.top-nav .mobile-menu-btn,
.nav .mobile-menu-btn {
  display: none !important;
}

.navbar a,
.top-nav a,
.nav a {
  color: var(--muted);
}

.navbar .nav-links a,
.top-nav .nav-links a,
.nav .nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.navbar a:hover,
.top-nav a:hover,
.nav a:hover {
  color: var(--ink);
}

.nav-auth--avatar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
}
.nav-auth-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.navbar .nav-cta,
.top-nav .nav-cta,
.nav .nav-cta {
  border: 1px solid var(--primary);
  border-radius: 999px;
  padding: 10px 22px;
  color: var(--primary) !important;
}

.navbar .nav-links li[hidden],
.top-nav .nav-links li[hidden],
.nav .nav-links li[hidden],
.navbar .nav-cta[hidden],
.top-nav .nav-cta[hidden],
.nav .nav-cta[hidden] {
  display: none !important;
}

.gakiwoo-footer-brand-block {
  max-width: 420px;
}

.gakiwoo-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink, var(--text-primary));
  font-size: 16px;
  font-weight: 750;
}

.gakiwoo-footer-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  object-fit: cover;
}

.gakiwoo-footer-slogan {
  margin: 18px 0 8px;
  color: var(--ink, var(--text-primary));
  font-size: 28px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
}

.gakiwoo-footer-desc {
  max-width: 36ch;
  margin: 0;
  color: var(--muted, var(--text-secondary));
  font-size: 15px;
  line-height: 1.75;
}

.gakiwoo-footer-col,
.gakiwoo-footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.gakiwoo-footer-col p,
.gakiwoo-footer-col-title {
  margin: 0 0 4px;
  color: var(--ink, var(--text-primary));
  font-size: 14px;
  font-weight: 750;
}

.gakiwoo-footer-col a,
.gakiwoo-footer-contact a {
  color: var(--muted, var(--text-secondary));
  font-size: 14px;
  text-decoration: none;
  transition:
    color var(--transition),
    opacity var(--transition);
}

.gakiwoo-footer-col a:hover,
.gakiwoo-footer-contact a:hover {
  color: var(--ink, var(--text-primary));
  opacity: 0.72;
}

.gakiwoo-footer-qr {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  color: var(--subtle, var(--text-tertiary));
  font-size: 12px;
}

.gakiwoo-footer-qr-img {
  width: 92px;
  height: 92px;
  border: 1px solid var(--line, var(--border));
  border-radius: 8px;
  background: #fff;
  object-fit: cover;
}

.gakiwoo-footer-wordmark {
  margin-top: 72px;
  overflow: hidden;
  color: rgba(18, 63, 58, 0.08);
  font-size: 160px;
  font-weight: 850;
  line-height: 0.82;
  letter-spacing: 0;
  user-select: none;
}

.gakiwoo-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid rgba(18, 63, 58, 0.1);
}

.gakiwoo-footer-bottom p {
  margin: 0;
  color: var(--subtle, var(--text-tertiary));
  font-size: 13px;
}

@media (max-width: 960px) {
  .gakiwoo-footer {
    padding-top: 64px;
  }

  .gakiwoo-footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .gakiwoo-footer-brand-block {
    grid-column: 1 / -1;
  }

  .gakiwoo-footer-wordmark {
    font-size: 96px;
  }
}

@media (max-width: 560px) {
  .gakiwoo-footer {
    margin-top: 56px;
  }

  .gakiwoo-footer-inner {
    grid-template-columns: 1fr;
  }

  .gakiwoo-footer-slogan {
    font-size: 24px;
  }

  .gakiwoo-footer-wordmark {
    margin-top: 48px;
    font-size: 56px;
  }
}

@media (max-width: 768px) {
  .navbar .mobile-menu-btn,
  .top-nav .mobile-menu-btn,
  .nav .mobile-menu-btn {
    display: flex !important;
  }

  .navbar .nav-links,
  .top-nav .nav-links,
  .nav .nav-links {
    display: none;
    position: absolute;
    top: 84px;
    right: 16px;
    left: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--color-canvas-soft);
    box-shadow: var(--shadow);
  }

  .navbar .nav-links.nav-links--open,
  .top-nav .nav-links.nav-links--open,
  .nav .nav-links.nav-links--open {
    display: flex;
  }

  .navbar .nav-links li,
  .top-nav .nav-links li,
  .nav .nav-links li {
    width: 100%;
  }

  .navbar .nav-links a,
  .top-nav .nav-links a,
  .nav .nav-links a {
    width: 100%;
    padding: 13px 14px;
    border-radius: 16px;
  }

  .navbar .nav-links a.nav-cta,
  .top-nav .nav-links a.nav-cta,
  .nav .nav-links a.nav-cta {
    justify-content: center;
    margin-top: 4px;
    background: var(--primary) !important;
    color: #fff !important;
  }
}