/* Mobile polish layer for NEW GROUP static app.
   Purpose: make the current single-page experience usable on phones without touching React logic. */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
}

img, svg, canvas, video {
  max-width: 100%;
}

button, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1024px) {
  header {
    position: sticky;
    top: 0;
  }

  .animate-scan,
  .animate-gridShift {
    animation-duration: 18s !important;
  }
}

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

  body {
    font-size: 16px;
  }

  section {
    scroll-margin-top: 84px;
  }

  h1 {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  p {
    overflow-wrap: anywhere;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }

  a,
  button {
    min-height: 42px;
  }

  header .max-w-7xl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  header nav + button,
  header button[aria-label="Menü"] {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
  }

  main section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .max-w-7xl,
  .max-w-5xl,
  .max-w-3xl {
    max-width: 100% !important;
  }

  .text-5xl,
  .sm\:text-6xl,
  .sm\:text-7xl,
  .lg\:text-7xl,
  .lg\:text-\[88px\] {
    font-size: clamp(2.25rem, 12vw, 4rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.045em !important;
  }

  .text-3xl,
  .sm\:text-4xl,
  .sm\:text-5xl {
    font-size: clamp(1.75rem, 8vw, 2.6rem) !important;
    line-height: 1.08 !important;
  }

  .text-2xl {
    font-size: 1.35rem !important;
  }

  .text-lg {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  .rounded-3xl {
    border-radius: 1.35rem !important;
  }

  .rounded-2xl {
    border-radius: 1.1rem !important;
  }

  .p-10,
  .sm\:p-14,
  .sm\:p-10,
  .p-8 {
    padding: 1.25rem !important;
  }

  .py-32,
  .py-24 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  .pt-24,
  .sm\:pt-32 {
    padding-top: 4.75rem !important;
  }

  .pb-32,
  .pb-24 {
    padding-bottom: 4.5rem !important;
  }

  .mt-24 {
    margin-top: 3.25rem !important;
  }

  .mt-16,
  .mt-14 {
    margin-top: 2.25rem !important;
  }

  .gap-16,
  .gap-12,
  .lg\:gap-16 {
    gap: 2rem !important;
  }

  .grid {
    min-width: 0;
  }

  .grid > * {
    min-width: 0;
  }

  .sm\:grid-cols-2,
  .md\:grid-cols-2,
  .lg\:grid-cols-3,
  .lg\:grid-cols-4,
  .sm\:grid-cols-3,
  .lg\:grid-cols-\[1\.3fr_1fr\],
  .lg\:grid-cols-\[1\.1fr_1fr\],
  .lg\:grid-cols-\[1fr_1fr\],
  .md\:grid-cols-\[1fr_2fr\] {
    grid-template-columns: 1fr !important;
  }

  .flex-wrap > a,
  .flex-wrap > button {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  form.flex,
  .sm\:flex-row {
    flex-direction: column !important;
  }

  form button,
  form input,
  form select,
  form textarea {
    width: 100% !important;
  }

  footer .max-w-7xl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  footer .grid {
    grid-template-columns: 1fr !important;
  }

  footer .space-x-6 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
  }

  footer .space-x-6 > * + * {
    margin-left: 0 !important;
  }

  footer a {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  footer .uppercase {
    letter-spacing: .08em !important;
  }

  /* Hero visuals: prevent oversized SVG/glow blocks from pushing the page sideways. */
  main svg[viewBox="0 0 100 100"] {
    max-width: min(58vw, 220px) !important;
    height: auto !important;
  }

  .h-\[420px\] {
    height: 300px !important;
  }

  .w-\[420px\],
  .h-\[420px\],
  .w-\[460px\],
  .h-\[460px\] {
    max-width: 82vw !important;
    max-height: 82vw !important;
  }

  .blur-3xl,
  .blur-\[80px\],
  .blur-\[120px\],
  .blur-\[140px\],
  .blur-\[160px\] {
    opacity: .55;
  }

  /* Brand cards should feel tappable and not too cramped. */
  a.group.relative.block,
  article.group,
  div.group.rounded-2xl,
  .rounded-2xl.border {
    touch-action: manipulation;
  }

  /* Hide tweak floating button on mobile; it is not useful for visitors. */
  button[aria-label="Tweaks öffnen"] {
    display: none !important;
  }
}

@media (max-width: 480px) {
  header .font-semibold.tracking-wide {
    font-size: .95rem;
  }

  header .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  header .grid.grid-cols-2 a {
    padding: 12px !important;
  }

  main section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .px-5,
  .sm\:px-8 {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .py-20,
  .py-24,
  .py-32 {
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
  }

  .p-7,
  .p-6,
  .p-5 {
    padding: 1.05rem !important;
  }

  .mt-10 {
    margin-top: 1.75rem !important;
  }

  .font-mono.text-\[11px\],
  .font-mono.text-\[10px\] {
    letter-spacing: .12em !important;
  }

  .rounded-full.px-5,
  .rounded-full.px-6 {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  main svg[viewBox="0 0 100 100"] {
    max-width: min(54vw, 190px) !important;
  }

  .h-\[420px\] {
    height: 250px !important;
  }

  footer {
    margin-top: 4rem !important;
  }

  footer .py-16 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}