/*
 * PinguSama — Mobile working pass 2026-09-23
 * Scope: <= 48rem only. Desktop intentionally untouched.
 */
@media (max-width: 48rem) {
  :root {
    --mobile-edge: max(0.9rem, env(safe-area-inset-left));
    --mobile-top: max(0.72rem, env(safe-area-inset-top));
    --mobile-bottom: max(1rem, env(safe-area-inset-bottom));
  }

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

  body {
    width: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
  }

  /* Fixed utilities: keep the same hierarchy on every page and respect notches. */
  .language-dock {
    top: var(--mobile-top);
    right: max(0.72rem, env(safe-area-inset-right));
    z-index: 90;
  }

  .language-toggle {
    min-width: 2.7rem;
    min-height: 2.3rem;
    border-color: rgb(197 239 250 / 26%);
    background: rgb(5 14 23 / 82%);
    box-shadow:
      0 0.45rem 1.1rem rgb(0 0 0 / 22%),
      inset 0 1px 0 rgb(255 255 255 / 8%);
    backdrop-filter: blur(14px) saturate(118%);
    -webkit-backdrop-filter: blur(14px) saturate(118%);
  }

  .language-menu {
    width: min(10rem, calc(100vw - 1.4rem));
    border-color: rgb(198 239 250 / 24%);
    background: rgb(5 15 24 / 96%);
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 42%);
  }

  .web-service-home-link,
  .app-service-home-link,
  .contacts-home-link,
  .kingdom-home-link {
    top: var(--mobile-top);
    left: max(0.72rem, env(safe-area-inset-left));
    z-index: 90;
    min-height: 2.3rem;
    padding: 0.48rem 0.75rem;
    border-radius: 0.62rem;
    backdrop-filter: blur(14px) saturate(116%);
    -webkit-backdrop-filter: blur(14px) saturate(116%);
  }

  /* Home: natural single-column flow, tighter rhythm and better safe-area handling. */
  .site-background {
    top: -14svh;
    right: 0;
    bottom: -14svh;
    left: 0;
    width: auto;
    height: auto;
    min-height: 128svh;
    background-position: center top;
    background-size: cover;
    transform: translateZ(0);
  }

  .site-wordmark {
    top: calc(var(--mobile-top) - 0.08rem);
    width: min(9.5rem, 39vw);
  }

  .page-section--home {
    padding:
      max(5.35rem, calc(env(safe-area-inset-top) + 4.7rem))
      0.9rem
      3.6rem;
  }

  .page-section--services,
  .page-section--contacts {
    padding: 4.5rem 0.9rem 3.7rem;
  }

  .page-section--services::before,
  .page-section--contacts::before {
    top: 1.2rem;
    width: min(17rem, 74vw);
  }

  .home-shell {
    width: min(100%, 32.5rem);
  }

  .home-intro {
    margin-bottom: 1.55rem;
    padding-inline: 0.15rem;
  }

  .home-intro-line {
    font-size: clamp(0.95rem, 4vw, 1.02rem);
    line-height: 1.58;
  }

  .home-intro-line--lead {
    font-size: clamp(1.2rem, 5.2vw, 1.42rem);
    line-height: 1.28;
  }

  .software-grid,
  .services-grid,
  .contacts-grid {
    width: min(100%, 30rem);
  }

  .software-grid { gap: 1rem; }
  .services-grid { gap: 1.15rem; }

  .software-card {
    aspect-ratio: 16 / 10.2;
    border-radius: 0.72rem;
    border-color: rgb(229 249 255 / 72%);
    box-shadow:
      0 0.95rem 2rem rgb(0 7 14 / 30%),
      inset 0 0 0 1px rgb(240 253 255 / 42%),
      inset 0 0 0 3px rgb(128 92 255 / 19%),
      inset 0 0.16rem 0.9rem rgb(186 154 255 / 14%);
  }

  /* Web/App Service: convert the desktop slide deck into a calm vertical narrative. */
  .service-section-viewport {
    position: relative;
    inset: auto;
    display: block;
    overflow: visible;
  }

  .service-section-track {
    width: 100%;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }

  .service-page-section {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .service-page-section--intro {
    min-height: 100svh;
    padding-top: max(5.4rem, calc(env(safe-area-inset-top) + 4.65rem));
    padding-bottom: 3.2rem;
  }

  .service-page-title {
    width: min(91vw, 31rem);
    margin-bottom: 1.45rem;
    padding-inline: 0.15rem;
    font-size: clamp(1.85rem, 8vw, 2.7rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-shadow:
      0 0.15rem 0.35rem rgb(0 0 0 / 92%),
      0 0.55rem 1.4rem rgb(0 0 0 / 72%);
  }

  .service-hero-glass {
    border-color: rgb(222 244 255 / 21%);
    background:
      linear-gradient(120deg, rgb(19 31 45 / 64%), rgb(10 20 32 / 40%)),
      rgb(11 21 33 / 38%);
    box-shadow:
      0 1.15rem 2.8rem rgb(0 0 0 / 24%),
      inset 0 1px 0 rgb(255 255 255 / 7%),
      inset 0 -1px 0 rgb(137 193 225 / 7%);
    backdrop-filter: blur(13px) saturate(112%);
    -webkit-backdrop-filter: blur(13px) saturate(112%);
  }

  .service-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 34rem);
    height: auto;
    min-height: 0;
    margin-inline: auto;
    padding: 1.35rem 0.95rem 1.7rem;
    gap: 1.3rem;
  }

  .web-service-showcase,
  .app-service-showcase {
    width: 100%;
    min-height: clamp(15.5rem, 70vw, 18.5rem);
    margin: 0;
    overflow: hidden;
    border-radius: 0.75rem;
  }

  .web-service-showcase-image--primary,
  .app-service-showcase-image--primary {
    top: 55%;
    left: 48%;
    width: min(75vw, 25rem);
  }

  .web-service-showcase-image--secondary,
  .app-service-showcase-image--secondary {
    top: 31%;
    left: 57%;
    width: min(57vw, 18.5rem);
  }

  .web-service-showcase-image--tertiary,
  .app-service-showcase-image--tertiary {
    top: 76%;
    left: 34%;
    width: min(49vw, 15.8rem);
  }

  .service-hero-copy,
  .service-hero-copy--web,
  .service-hero-copy--app,
  .service-hero-copy--web-detail,
  .service-hero-copy-slot--left {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.25rem 0.32rem 0;
  }

  .service-hero-paragraph {
    font-size: clamp(1rem, 4.15vw, 1.075rem);
    line-height: 1.64;
    text-shadow:
      0 0.12rem 0.42rem rgb(0 0 0 / 82%),
      0 0.55rem 1.3rem rgb(0 0 0 / 48%);
  }

  .service-page-section--detail {
    position: relative;
    min-height: 0;
    padding: 3.35rem 0 3.5rem;
    align-items: stretch;
  }

  .service-page-section--detail::before,
  .app-service-detail-section::before {
    position: absolute;
    top: 0.2rem;
    left: 50%;
    width: min(16rem, 70vw);
    height: 1px;
    content: "";
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgb(167 220 244 / 25%), rgb(169 135 247 / 45%), rgb(167 220 244 / 25%), transparent);
    box-shadow: 0 0 1rem rgb(129 92 218 / 20%);
  }

  .service-hero-inner--mirrored {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-hero-inner--mirrored > .web-service-showcase,
  .service-hero-inner--mirrored > .app-service-showcase,
  .web-service-detail-visual {
    grid-column: 1;
    grid-row: 2;
  }

  .web-service-showcase--mirrored,
  .app-service-showcase--mirrored {
    width: 100%;
    margin: 0;
    transform: none;
  }

  .web-service-detail-visual {
    width: 100%;
    min-height: 0;
    padding: 0.6rem 0 0;
    overflow: hidden;
  }

  .web-service-detail-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    transform: none;
  }

  .app-service-detail-section {
    padding: 3.35rem 0 3.6rem;
  }

  .app-service-detail-section .app-service-detail-inner {
    width: min(100%, 34rem);
    padding: 1.65rem 1.2rem 1.9rem;
  }

  .service-page-section--cta {
    min-height: 58svh;
    padding:
      4rem
      1rem
      max(4.5rem, calc(env(safe-area-inset-bottom) + 3.4rem));
  }

  .service-quote-button {
    width: min(90vw, 24rem);
    min-height: 3.55rem;
    border-radius: 0.82rem;
    font-size: 1rem;
    box-shadow:
      0 0.9rem 2rem rgb(0 0 0 / 28%),
      0 0 1.75rem rgb(52 194 98 / 22%),
      inset 0 1px 0 rgb(255 255 255 / 20%);
  }

  .service-quote-dialog {
    max-height: min(94dvh, 48rem);
    padding:
      1.35rem
      1rem
      max(1.25rem, env(safe-area-inset-bottom));
    box-shadow:
      0 -1.25rem 3.2rem rgb(0 0 0 / 44%),
      inset 0 1px 0 rgb(255 255 255 / 8%);
  }

  .service-quote-field input,
  .service-quote-field textarea {
    font-size: 1rem; /* avoids iOS focus zoom */
  }

  /* Contacts: reduce visual density without shrinking controls. */
  .contacts-page-shell {
    min-height: 100dvh;
    padding:
      max(5.15rem, calc(env(safe-area-inset-top) + 4.55rem))
      0.72rem
      max(1.5rem, env(safe-area-inset-bottom));
  }

  .contact-glass {
    width: min(100%, 34rem);
    padding: 1.15rem 1rem 1.2rem;
    border-radius: 0.95rem;
    border-color: rgb(201 236 245 / 20%);
    box-shadow:
      0 1.15rem 2.8rem rgb(0 0 0 / 30%),
      inset 0 1px 0 rgb(255 255 255 / 7%);
  }

  .contact-header h1 {
    font-size: clamp(1.5rem, 7vw, 1.9rem);
    line-height: 1.08;
  }

  .contact-header p {
    font-size: 0.9rem;
    line-height: 1.58;
  }

  .contact-field-label {
    font-size: 0.78rem;
  }

  .contact-control {
    min-height: 3.05rem;
    font-size: 1rem;
  }

  .contact-message {
    min-height: 9rem;
  }

  .contact-privacy {
    font-size: 0.72rem;
    line-height: 1.52;
  }

  /* Kingdom: desktop intentionally used a slide deck; mobile gets a full natural-flow page. */
  .kingdom-body {
    overflow-x: hidden;
    overflow-y: auto;
    background: #050209;
  }

  .kingdom-section-viewport {
    position: relative;
    inset: auto;
    display: block !important;
    overflow: visible;
  }

  .kingdom-section-viewport .service-section-track {
    padding-bottom: max(4.9rem, calc(env(safe-area-inset-bottom) + 4.2rem));
  }

  .kingdom-page-section {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .kingdom-page-section--feature {
    position: relative;
    display: block;
    min-height: 88svh;
    padding: 4rem 0;
  }

  .kingdom-page-section--feature:first-child {
    padding-top: max(5.6rem, calc(env(safe-area-inset-top) + 5rem));
  }

  .kingdom-page-section--feature + .kingdom-page-section--feature::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(16rem, 70vw);
    height: 1px;
    content: "";
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgb(189 146 255 / 26%), rgb(216 181 255 / 52%), rgb(189 146 255 / 26%), transparent);
    box-shadow: 0 0 1rem rgb(129 68 194 / 26%);
  }

  .kingdom-feature-band {
    position: relative;
    display: grid;
    align-items: center;
    width: 100%;
    min-height: 0;
    isolation: isolate;
    overflow: hidden;
  }

  .kingdom-feature-band::before {
    position: absolute;
    z-index: 0;
    inset: 4% -18% 3% -22%;
    content: "";
    pointer-events: none;
    background-image: url("../assets/images/kingdom-dissolution-band-v2.png");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 90%;
    opacity: 0.8;
    transform: translateY(-24%);
    filter: drop-shadow(0 1rem 2.3rem rgb(0 0 0 / 30%));
  }

  .kingdom-band-fragments {
    display: none;
  }

  .kingdom-feature-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 34rem);
    min-height: 0;
    margin-inline: auto;
    padding: 1.25rem 1rem 1.7rem;
    gap: 2rem;
  }

  .kingdom-screenshot-frame,
  .kingdom-screenshot-frame--hero {
    width: 88%;
    min-height: 0;
    justify-self: center;
    margin: 0 auto;
    aspect-ratio: 16 / 9.6;
    border-radius: 0.78rem;
    border-color: rgb(203 151 255 / 74%);
    box-shadow:
      0 1.3rem 2.8rem rgb(0 0 0 / 38%),
      0 0 1.55rem rgb(145 81 231 / 28%),
      inset 0 0 0 1px rgb(239 222 255 / 13%);
    transform: perspective(1100px) rotateY(-13deg) rotateZ(-0.75deg);
    transform-origin: center center;
  }

  .kingdom-screenshot-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .kingdom-feature-copy {
    width: min(100%, 30rem);
    max-width: none;
    gap: 0.9rem;
    padding: 0 0.25rem;
    color: rgb(255 255 255 / 96%);
    text-shadow:
      0 0.2rem 0.55rem rgb(0 0 0 / 100%),
      0 0.65rem 1.45rem rgb(0 0 0 / 88%),
      0 0 1.25rem rgb(83 28 116 / 38%);
  }

  .kingdom-feature-copy-lead {
    font-size: clamp(1.4rem, 6.4vw, 1.8rem);
    line-height: 1.18;
  }

  .kingdom-feature-copy-body {
    font-size: clamp(1rem, 4.25vw, 1.08rem);
    line-height: 1.62;
    color: rgb(248 243 252 / 93%);
  }

  .kingdom-page-section--cta {
    display: grid;
    min-height: 56svh;
    place-items: center;
    padding:
      4rem
      1rem
      max(6rem, calc(env(safe-area-inset-bottom) + 5.2rem));
  }

  .kingdom-get-button {
    min-width: 0;
    width: min(88vw, 22rem);
  }

  .kingdom-disclaimer {
    position: fixed;
    z-index: 95;
    left: 50%;
    bottom: max(0.45rem, env(safe-area-inset-bottom));
    display: block;
    width: min(calc(100vw - 1rem), 32rem);
    margin: 0;
    padding: 0.48rem 0.62rem;
    border: 1px solid rgb(195 151 236 / 14%);
    border-radius: 0.6rem;
    color: rgb(229 219 237 / 67%);
    background: rgb(8 4 13 / 77%);
    box-shadow: 0 0.55rem 1.4rem rgb(0 0 0 / 30%);
    backdrop-filter: blur(10px) saturate(108%);
    -webkit-backdrop-filter: blur(10px) saturate(108%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(0.58rem, 2.55vw, 0.68rem);
    line-height: 1.38;
    text-align: center;
    text-shadow: 0 0.2rem 0.55rem rgb(0 0 0 / 95%);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .kingdom-download-modal {
    align-items: end;
    padding: 0;
  }

  .kingdom-download-dialog {
    width: 100%;
    max-height: 92dvh;
    overflow-y: auto;
    padding:
      1.45rem
      1rem
      max(1.4rem, env(safe-area-inset-bottom));
    border-radius: 1.15rem 1.15rem 0 0;
    border-bottom: 0;
    box-shadow:
      0 -1.5rem 4rem rgb(0 0 0 / 54%),
      0 0 2.4rem rgb(123 64 194 / 18%);
  }

  .kingdom-download-title {
    margin: 0 2.65rem 1.35rem 0;
    font-size: clamp(1.45rem, 6.4vw, 1.85rem);
  }

  .kingdom-download-option {
    min-height: 3.8rem;
  }

  body.kingdom-download-open .kingdom-disclaimer {
    opacity: 0;
    visibility: hidden;
  }
}

@media (max-width: 22rem) {
  .site-wordmark {
    width: 7.9rem;
  }

  .home-intro-line--lead,
  .kingdom-feature-copy-lead {
    font-size: 1.18rem;
  }

  .web-service-home-link,
  .app-service-home-link,
  .contacts-home-link,
  .kingdom-home-link {
    padding-inline: 0.62rem;
  }
}

@media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kingdom-screenshot-frame--hero { transform: none; }
}