@media screen and (max-width: 1024px) {
  #header .header-content {
    width: 90%; }

  .nav-toggle {
    display: block; }

  .navigation {
    position: fixed;
    background-color: #000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s; }
    .navigation .primary-nav {
      position: relative;
      top: 45%;
      -moz-transform: translateY(-45%);
      -ms-transform: translateY(-45%);
      -webkit-transform: translateY(-45%);
      transform: translateY(-45%); }
    .navigation li {
      display: block;
      margin-bottom: 20px; }
    .navigation a {
      display: block;
      font-size: 25px;
      margin: 0;
      text-align: center; }

  .person {
    margin: 0 auto 50px; }
    .person-content {
      text-align: center; }
    .person .social-icons li {
      display: inline-block;
      float: none;
      margin-bottom: 5px; }

  .testimonials blockquote {
    padding: 20px 5% 0; }
  .testimonials p {
    font-size: 26px; }

  .flex-control-nav {
    bottom: 20px; } }
@media screen and (max-width: 768px) {
  .banner-text {
    padding-top: 30%; }
    .banner-text h1 {
      font-size: 42px; }
    .banner-text p {
      font-size: 18px; }

  .flexslider {
    padding-bottom: 80px; }

  .flex-control-nav {
    width: 100%; }

  .footer .footer-col {
    margin-bottom: 50px; } }
@media screen and (max-width: 640px) {
  .banner-text {
    padding-top: 35%; } }
@media screen and (max-width: 480px) {
  .banner-text {
    padding-top: 45%; }
    .banner-text h1 {
      font-size: 32px; } }
@media screen and (max-width: 320px) {
  .banner-text {
    padding-top: 55%; }

  .testimonials blockquote {
    padding: 20px 5% 0; }
  .testimonials p {
    font-size: 26px; } }


/* === MOBILE FIX === */
html, body {
  width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

.soc a{
  color:#228fff;
  text-decoration:none;
  background:none;
}

.soc a h3{
  display:inline-block;
  margin:0 0 14px;
  line-height:1.15;
  padding-bottom:4px;
  border-bottom:2px solid currentColor;
}

.soc a:hover,
.soc a:focus{
  color:#fed000;
  text-decoration:none;
  outline:none;
  transition: color .3s;
}

/* =========================================================
   CUSTOM FINAL PATCHES (no duplicates)
   ========================================================= */

/* --- Clean social links underline / hover scope --- */
.soc a,
.soc-link{
  background: none !important;
}

.soc a:hover, .soc a:focus,
.soc-link:hover, .soc-link:focus{
  text-decoration: none;
}

/* --- Social cards base --- */
.soc-link{
  display: block;
  color: inherit;
}

.soc-link h3{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 12px 0 12px;
  line-height: 1.2;
}

.soc-link img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* --- TG/VK posters: centered + nice spacing on mobile --- */
@media (max-width: 768px){
  #soc.section{
    padding-top: 26px;
    padding-bottom: 30px;
  }

  .soc-row{
    margin-left: 0;
    margin-right: 0;
  }

  .soc-col{
    padding-left: 14px;
    padding-right: 14px;
    margin-bottom: 26px;
  }

  .soc-link{
    text-align: center;
  }

  .soc-link h3{
    justify-content: center;
    margin-top: 6px;
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 1.25;
  }

  .soc-note{
    margin-top: 4px;
  }
}

/* --- v20.astar.bz button: same “big” feel on PC + mobile --- */
.section-website,
.website{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 0;
}

.website .btn.btn-large{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: clamp(18px, 3.8vw, 26px);
  font-weight: 600;

  padding: clamp(16px, 3.5vw, 22px) clamp(32px, 7vw, 64px);

  border-radius: 20px;
  background: linear-gradient(135deg, #3f0066, #5b159d);
  color: #fff !important;

  text-transform: none;
  letter-spacing: 0.4px;

  max-width: 95%;
  width: fit-content;

  box-shadow: 0 10px 30px rgba(63, 0, 102, 0.55);
  transition: all .25s ease;
}

.website .btn.btn-large:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(63, 0, 102, 0.7);
}

@media (max-width: 768px){
  .website .btn.btn-large{
    font-size: 20px;
    padding: 18px 34px;
    border-radius: 20px;
  }
}

/* --- Long text: size like the VK heading on mobile --- */
@media (max-width: 768px){
  .content,
  .text,
  .description,
  .about,
  #info h4,
  .anime-text{
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: 0.1px;
    max-width: 92%;
    margin-left: auto;
    margin-right: auto;
  }

  .content p,
  .text p,
  .description p,
  .about p{
    margin-bottom: 14px;
  }
}

@media (max-width: 420px){
  .content,
  .text,
  .description,
  .about,
  #info h4,
  .anime-text{
    font-size: 15px;
    line-height: 1.5;
  }
}


/* === FINAL CTA INTERACTION === */
/* Works on desktop (hover) + mobile (tap/active) */
.website .btn.btn-large{
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow, filter;
}

/* subtle sheen */
.website .btn.btn-large::after{
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 50%;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: rotate(20deg);
  opacity: 0;
  pointer-events: none;
}

/* Desktop hover */
@media (hover: hover) and (pointer: fine){
  .website .btn.btn-large:hover{
    transform: translateY(-3px) scale(1.03);
    filter: brightness(1.05);
  }
  .website .btn.btn-large:hover::after{
    opacity: 1;
    animation: btnSheen 0.75s ease-out;
  }
}

/* Mobile tap/press */
@media (hover: none) and (pointer: coarse){
  .website .btn.btn-large:active{
    transform: scale(0.98);
    filter: brightness(1.08);
  }
  .website .btn.btn-large:active::after{
    opacity: 1;
    animation: btnSheen 0.65s ease-out;
  }
}

/* Keyboard focus */
.website .btn.btn-large:focus-visible{
  outline: 3px solid rgba(255, 255, 255, 0.55);
  outline-offset: 4px;
}

@keyframes btnSheen{
  from { left: -60%; }
  to   { left: 130%; }
}