@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  .section--inner {
    min-height: unset;
  }

  .ill-autoslide-track,
  .ill-marquee-track {
    overflow: hidden;
  }

  .ill-autoslide-wrapper,
  .ill-marquee {
    overflow: hidden;
    max-width: 100%;
  }

  .footer-geo,
  .footer-geo--1,
  .footer-geo--2,
  .footer-geo--3,
  .footer-geo--4 {
    display: none;
  }
}

@keyframes aboutFloat {
  0%   { transform: translateX(-20px) translateY(0px)   rotate(0deg);    }
  25%  { transform: translateX(-20px) translateY(-10px) rotate(0.3deg);  }
  50%  { transform: translateX(-20px) translateY(-18px) rotate(0deg);    }
  75%  { transform: translateX(-20px) translateY(-8px)  rotate(-0.3deg); }
  100% { transform: translateX(-20px) translateY(0px)   rotate(0deg);    }
}

@media (max-width: 768px) {
  .section--home {
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    overflow: hidden;
  }

  .home-center {
    width: 100%;
    max-width: 100%;
    height: 100svh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .char-image        { order: 1; }
  .name-display      { order: 2; }
  .home-side-left    { order: 3; }
  .home-gallery-cta  { order: 4; }
  .scroll-hint       { order: 5; }

  .orb-ring,
  .orb-main,
  .orb-inner {
    display: none;
  }

  .char-image {
    position: relative !important;
    inset: unset !important;
    transform: none !important;
    animation: none !important;
    height: 48svh;
    width: auto;
    margin: 0 auto;
    flex-shrink: 0;
  }

  .name-display {
    position: relative !important;
    inset: unset !important;
    transform: none !important;
    animation: none !important;
    text-align: center;
    margin-top: -1svh;
    margin-bottom: 18px;
    z-index: 4;
    flex-shrink: 0;
    pointer-events: none;
  }

  .name-display img {
    width: min(76vw, 340px);
    height: auto;
  }

  .home-side-left {
    position: relative !important;
    inset: unset !important;
    transform: none !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: 100%;
    margin-top: 16px;
    z-index: 5;
    flex-shrink: 0;
  }

  .home-menu-item img {
    height: 18px;
    width: auto;
  }

  .home-side-left .home-socials-panel {
    display: none;
  }

  .home-gallery-cta {
    position: relative !important;
    inset: unset !important;
    transform: none !important;
    animation: none !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 14px;
    z-index: 5;
    flex-shrink: 0;
    opacity: 1 !important;
  }

  .home-gallery-cta img {
    height: clamp(44px, 11vw, 70px) !important;
    width: auto;
    margin: 0 auto;
  }

  .scroll-hint {
    position: absolute !important;
    left: 50% !important;
    bottom: 8px !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    z-index: 6;
  }
}

@media (max-width: 540px) {
  .char-image {
    height: 44svh;
  }

  .name-display img {
    width: 82vw;
  }

  .home-side-left {
    gap: 8px;
    margin-top: 12px;
  }

  .home-menu-item img {
    height: clamp(18px, 5vw, 24px) !important;
  }

  .home-gallery-cta {
    margin-top: 10px;
  }

  .home-gallery-cta img {
    height: clamp(38px, 10vw, 56px) !important;
  }
}

.home-socials-panel--bottom {
  display: none;
}

@media (max-width: 768px) {
  .home-socials-panel--bottom {
    display: flex !important;
    order: 7;
    position: absolute !important;
    bottom: 114px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: max-content;
    gap: 5px;
    z-index: 10;
    animation: none;
  }
}

@media (min-width: 769px) and (max-width: 2200px) {
  .home-side-left { left: 5%; }
  .home-gallery-cta { right: 5%; top: 50%; bottom: auto; transform: translateY(-50%); }
  .home-gallery-cta:hover { transform: translateY(-50%) scale(1.04); }
}

@media (min-width: 769px) and (max-width: 1800px) {
  .home-side-left { left: 4.5%; }
  .home-gallery-cta { right: 4.5%; }
}

@media (min-width: 769px) and (max-width: 1700px) {
  .home-side-left { left: 4%; }
  .home-gallery-cta { right: 4%; }
}

@media (min-width: 769px) and (max-width: 1600px) {
  .home-side-left { left: 3.5%; }
  .home-gallery-cta { right: 3.5%; }
}

@media (min-width: 769px) and (max-width: 1500px) {
  .home-side-left { left: 3%; }
  .home-gallery-cta { right: 3%; }
}

@media (min-width: 769px) and (max-width: 1400px) {
  .home-side-left { left: 2.5%; }
  .home-gallery-cta { right: 2.5%; }
}

@media (min-width: 769px) and (max-width: 1350px) {
  .home-gallery-cta {
    top: auto;
    bottom: clamp(30px, 5%, 50px);
    transform: none;
    right: 0.5%;
  }
  .home-gallery-cta:hover { transform: scale(1.04); }
}

@media (min-width: 769px) and (max-width: 1300px) {
  .home-side-left { left: 2%; }
  .home-gallery-cta { right: 2%; }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .home-side-left { left: 1.5%; }
  .home-gallery-cta { right: 1.5%; }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .home-side-left { left: 1%; }
  .home-gallery-cta {
    top: auto;
    bottom: clamp(30px, 5%, 50px);
    transform: none;
    right: 1%;
  }
  .home-gallery-cta:hover { transform: scale(1.04); }
}

@media (min-width: 769px) and (max-width: 1000px) {
  .home-side-left { left: 0.5%; }
  .home-gallery-cta {
    top: auto;
    bottom: clamp(30px, 5%, 50px);
    transform: none;
    right: 0.5%;
  }
}

@media (max-width: 768px) {
  .ill-hero {
    margin-bottom: clamp(24px, 5vw, 40px);
  }

  .ill-autoslide-track img {
    height: clamp(160px, 48vw, 260px);
  }

  .ill-slide-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
  }

  .ill-slide-btn {
    width: 80%;
    max-width: 100%;
    font-size: 13px;
    padding: 14px 0;
  }

  .ill-marquee {
    margin-top: clamp(24px, 5vw, 40px);
  }
}

@media (max-width: 540px) {
  .ill-autoslide-track img {
    height: clamp(140px, 44vw, 200px);
  }

  .ill-slide-btn {
    width: 90%;
  }
}

@media (max-width: 1600px) {
  .vtuber-text {
    margin-left: clamp(-90px, -4.5vw, -60px);
    width: calc(100% + clamp(60px, 3vw, 40px));
    max-width: 580px;
  }
}

@media (max-width: 1400px) {
  #vtuber .inner-wrap {
    grid-template-columns: 28% 1fr 300px;
  }
}

@media (max-width: 1280px) {
  #vtuber .inner-wrap {
    grid-template-columns: 26% 1fr 280px;
  }

  .vtuber-text {
    margin-left: clamp(-40px, -2vw, -20px);
    width: calc(100% + clamp(40px, 2vw, 20px));
    max-width: 520px;
  }
}

@media (max-width: 1200px) {
  .vtuber-text {
    margin-left: clamp(-20px, -2vw, -10px);
  }
}

@media (max-width: 1100px) {
  #vtuber .inner-wrap {
    grid-template-columns: 24% 1fr 260px;
    column-gap: 28px;
    padding-right: 40px;
  }
}

@media (max-width: 960px) {
  #vtuber .inner-wrap {
    grid-template-columns: 22% 1fr 220px;
    column-gap: 20px;
    padding-right: 28px;
  }
}

@media (max-width: 860px) {
  #vtuber {
    background-image: url('../assets/vtuber_neru_bg.png');
    background-size: cover;
    background-position: center top;
  }

  #vtuber .inner-wrap {
    padding: 40px 20px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: auto;
  }

  .page-header {
    text-align: center;
    grid-column: 1;
    grid-row: 1;
    padding-top: 20px;
  }

  .vtuber-text {
    grid-column: 1;
    grid-row: 2;
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }

  .vtuber-cta {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 768px) {
  .vtuber-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .vtuber-text {
    max-width: 100%;
    margin-left: 0 !important;
    width: 100% !important;
  }

  .vtuber-cta {
    gap: 10px;
  }

  .vtuber-card {
    padding: 20px;
  }

  .vtuber-card-main {
    font-size: clamp(14px, 4vw, 18px);
  }
}

@media (max-width: 540px) {
  .vtuber-card {
    padding: 16px;
  }
}

@media (max-width: 1200px) {
  .about-content {
    width: 65%;
    margin-right: 3%;
  }
}

@media (max-width: 900px) {
  .about-content {
    width: 100%;
    margin-right: 2%;
  }

  .about-top-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .about-content {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 40px 20px;
  }

  .about-top-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-text-col {
    width: 100%;
    gap: 32px;
  }

  .about-name {
    font-size: clamp(28px, 8vw, 48px);
  }

  .about-bio {
    font-size: clamp(20px, 6vw, 22px);
  }

  .about-tags {
    gap: 6px;
  }

  .about-tag {
    font-size: 10px;
    padding: 6px 12px;
  }

  .about-twitch-col {
    gap: 24px;
  }

  .about-social-row {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  .about-social-btn {
    font-size: 11px;
    padding: 10px 8px;
    min-height: 42px;
  }

  .twitch-embed-wrap {
    margin: 4px 0;
  }
}

@media (max-width: 600px) {
  .about-bg-img--mobile {
    object-position: 70% center;
  }
}

@media (max-width: 768px) {
  .trello-embed-frame {
    height: 480px;
  }

  .queue-board {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 540px) {
  .trello-embed-frame {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .ma-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ma-divider-v {
    display: none;
  }

  .ma-col {
    padding: clamp(16px, 4vw, 24px);
  }

  .ma-col-header {
    margin-bottom: 20px;
  }

  .ma-addon-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ma-addon-sep {
    display: none;
  }

  .ma-cta-btn {
    padding: 16px 32px;
    font-size: 11px;
    letter-spacing: 4px;
    width: 100%;
    justify-content: center;
  }

  .ma-note {
    padding: 16px 18px;
    gap: 12px;
  }
}

@media (max-width: 540px) {
  .ma-list li {
    font-size: clamp(14px, 4vw, 16px);
    padding: 10px 0 10px 18px;
  }

  .ma-addon {
    padding: 16px;
  }

  .ma-addons-title {
    font-size: 10px;
    letter-spacing: 4px;
  }

  .ma-cta {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: clamp(40px, 8vw, 60px) var(--inner-pad) clamp(32px, 6vw, 48px);
    overflow: hidden;
    width: 100%;
  }

  .footer-left,
  .footer-right {
    width: 100%;
    overflow: hidden;
  }

  .footer-form {
    width: 100%;
  }

  .footer-input,
  .footer-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .footer-contact-title {
    font-size: clamp(28px, 10vw, 52px);
  }

  .footer-contact-desc {
    word-break: break-word;
  }

  .footer-sitemap-title {
    font-size: clamp(24px, 8vw, 48px);
  }

  .footer-form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .footer-submit {
    padding: 16px 24px;
    font-size: 12px;
    letter-spacing: 4px;
  }

  .footer-sitemap-links {
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
}

@media (max-width: 540px) {
  .footer-sitemap-links {
    grid-template-columns: 1fr;
  }

  .site-footer {
    background:
      linear-gradient(
        to bottom,
        rgba(22, 20, 14, 0.97) 0%,
        rgba(48, 40, 20, 0.92) 35%,
        rgba(82, 68, 28, 0.88) 60%,
        rgba(118, 96, 36, 0.9) 80%,
        rgba(145, 118, 42, 0.93) 100%
      ),
      url("../assets/neru_bg_end.webp") 70% 20% / cover no-repeat;
  }
}

@media (max-width: 640px) {
  .vp-modal-inner {
    grid-template-columns: 1fr;
  }

  .vp-modal-img {
    min-height: 280px;
    max-height: 340px;
  }

  .vp-modal-info-col {
    border-left: none;
    border-top: 1px solid rgba(245, 232, 168, 0.1);
    padding: 28px 24px;
  }

  .vp-bubbles-grid {
    gap: clamp(16px, 4vw, 28px);
  }

  .vp-bubble-wrap {
    width: clamp(100px, 38vw, 150px);
    height: clamp(100px, 38vw, 150px);
  }
}

@media (max-width: 768px) {
  .credits-wrap {
    padding: 0 clamp(16px, 5vw, 32px);
    overflow-x: hidden;
  }

  .credits-grid {
    grid-template-columns: 1fr;
  }

  .credits-hero {
    padding: clamp(80px, 12vw, 120px) clamp(16px, 5vw, 32px) clamp(32px, 5vw, 56px);
  }

  .credits-hero-title {
    font-size: clamp(28px, 8vw, 52px);
  }

  .credits-hero-sub {
    font-size: clamp(15px, 4vw, 18px);
    padding: 0 8px;
  }

  .credits-section-header {
    flex-wrap: wrap;
  }

  .credits-note-block {
    padding: clamp(18px, 4vw, 28px) clamp(16px, 4vw, 28px);
  }

  .credits-note-text {
    font-size: clamp(15px, 4vw, 18px);
  }
}

@media (max-width: 1024px) {
  .about-content {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 60px 40px !important;
    box-sizing: border-box;
  }

  .about-text-col {
    width: 100% !important;
  }

  .about-top-row {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .footer-main {
    overflow: hidden;
  }

  .footer-input,
  .footer-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 768px) and (max-height: 700px) {
  .home-socials-panel--bottom {
    bottom: 50px;
  }
}
@media (max-width: 768px) {
  .about-text-col,
  .twitch-embed-wrap,
  .about-social-row {
    width: 100% !important;
    max-width: 100% !important;
  }

  .about-twitch-col {
    width: 100%;
    overflow-x: hidden;
    align-items: center;
  }

  .about-social-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}