/* Shared mobile-first responsive layer for all public site pages */
:root {
  --site-header-height: 64px;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

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

button,
.btn,
.btn-primary,
.fixed-amount-btn,
.success-back,
.cs-trigger,
input,
select,
textarea {
  touch-action: manipulation;
}

@media (max-width: 1024px) {
  .hdr-wrap {
    min-width: 0;
    gap: 12px;
  }

  nav {
    min-width: 0;
    gap: 4px;
  }

  nav .btn,
  nav .btn-nav,
  nav .btn-nav-primary,
  nav .btn-nav-green {
    max-width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 12px !important;
  }

  .app-wrap {
    max-width: 100%;
    transform: none;
  }

  .app-wrap::before {
    display: none;
  }

  .app-win:hover {
    transform: none;
  }

  .aw-body,
  .aw-chat,
  .aw-messages,
  .aw-msg-body,
  .aw-members-col,
  .aw-ch-col {
    min-width: 0;
  }

  .footer-links-cols,
  .f-links-legal {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  body:has(.mobile-nav.open) {
    overflow: hidden;
    touch-action: none;
  }

  nav .btn,
  nav .btn-nav,
  nav .btn-nav-primary,
  nav .btn-nav-green {
    display: none !important;
  }

  .burger {
    display: flex !important;
    margin-left: auto;
  }

  #community .feature-ui {
    margin: 0 !important;
    min-width: 0;
    max-width: 100%;
  }

  #community .feature-ui img {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .mobile-nav {
    top: var(--site-header-height);
    bottom: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    gap: 8px;
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }

  .mobile-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .mobile-nav .btn,
  .mobile-nav .btn-nav,
  .mobile-nav .btn-nav-primary,
  .mobile-nav .btn-nav-green {
    display: inline-flex !important;
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hdr-wrap {
    min-width: 0;
    gap: 10px;
  }

  .logo {
    min-width: 0;
  }

  .logo-wordmark {
    font-size: 17px;
    line-height: 1.15;
  }

  .mobile-nav {
    top: var(--site-header-height);
    bottom: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    gap: 8px;
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }

  .mobile-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .mobile-nav .btn,
  .mobile-nav .btn-nav,
  .mobile-nav .btn-nav-primary,
  .mobile-nav .btn-nav-green {
    display: inline-flex !important;
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .btn,
  .btn-primary,
  .fixed-amount-btn {
    min-height: 44px;
  }

  .hero {
    min-height: auto;
    padding: 92px 0 44px;
  }

  .hero-h1 br {
    display: none;
  }

  .hero-sub,
  .brand-subtitle,
  .auth-subtitle,
  .cv-p,
  .cs-p,
  .srv-p {
    max-width: 100%;
  }

  .hero-metrics {
    gap: 18px;
    margin-top: 24px;
    padding-top: 18px;
  }

  .feature {
    gap: 32px;
    padding: 56px 0;
  }

  .feat-callouts {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 30px 0 44px;
  }

  .app-wrap {
    transform: none;
  }

  .app-wrap::before {
    display: none;
  }

  .aw-body {
    min-width: 0;
    height: auto;
  }

  .aw-chat,
  .aw-messages,
  .aw-msg-body,
  .srv-info,
  .news-card-body {
    min-width: 0;
  }

  .cs-body {
    height: auto;
    flex-direction: column;
  }

  .cs-screen {
    border-right: 0;
    min-height: 180px;
  }

  .cs-chat-col {
    width: 100%;
    border-top: 1px solid var(--border);
  }

  .srv-footer {
    flex-wrap: wrap;
    gap: 10px;
  }

  .auth-shell {
    gap: 26px;
    padding-bottom: 28px;
  }

  .auth-col {
    justify-content: center !important;
  }

  .xivy-card {
    width: 100%;
    max-width: 100% !important;
    padding: 22px 16px 18px;
  }

  .input-row,
  .cs-trigger,
  .btn-primary {
    min-height: 46px;
    height: 46px;
  }

  .textarea-row textarea {
    min-height: 108px;
  }

  .fixed-amounts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .news-main,
  .article-main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .news-card-link,
  .news-card.is-featured .news-card-link {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .news-cover,
  .news-card.is-featured .news-cover {
    height: clamp(170px, 48vw, 220px);
  }

  .news-card-title,
  .news-card.is-featured .news-card-title {
    font-size: clamp(20px, 6vw, 24px);
  }

  .news-card-desc {
    min-height: 0;
  }

  .article-card__content {
    padding: 20px 16px 22px;
  }

  .article-cover {
    height: clamp(180px, 52vw, 240px);
  }

  .footer-links-cols,
  .f-links-legal {
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
  }

  .footer-links-cols > div,
  .footer-links-cols > div:last-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .footer-links-cols > div + div {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
  }

  .footer-links-cols > div:last-child::before {
    display: none !important;
  }

  .f-links-legal .f-links-col {
    padding-right: 0 !important;
  }

  .f-links-legal .f-links-col:last-child {
    border-left: 0 !important;
    margin-top: 10px;
    padding-top: 10px;
    padding-left: 0 !important;
    border-top: 1px solid var(--border);
  }

  .f-links a,
  .f-links-legal a,
  .f-bot-links a {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .f-bot-links {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .footer-bot {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .cursor-glow {
    display: none !important;
  }
}

@media (max-width: 540px) {
  .logo {
    gap: 8px;
  }

  .logo-mark,
  .logo-mark img {
    width: 44px;
    height: 44px;
  }

  .logo-wordmark {
    display: none;
  }

  body.has-xivy-tetris-bg .hero {
    padding-top: 88px;
    padding-bottom: 86px;
  }

  body.has-xivy-tetris-bg .hero-col {
    max-width: 100%;
    min-width: 0;
  }

  body.has-xivy-tetris-bg .hero-h1 {
    margin-bottom: 18px;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-shadow: 0 3px 22px rgba(0, 0, 0, 0.45), 0 0 46px rgba(124, 92, 255, 0.16);
  }

  body.has-xivy-tetris-bg .hero-divider {
    margin: 18px 0;
  }

  body.has-xivy-tetris-bg .hero-sub {
    max-width: 100%;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  }

  .hero-btns {
    gap: 12px;
  }

  .hero-btns .btn {
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(135deg, #8f96ff 0%, #666af5 100%) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(49, 52, 178, 0.34), 0 1px 0 rgba(255, 255, 255, 0.22) inset;
  }

  .sec-product {
    padding-top: 38px;
  }

  .xivy-demo-toolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    margin-bottom: 12px;
    overflow: hidden;
    padding: 6px;
  }

  .xivy-demo-tab {
    min-width: 0;
    width: 100%;
    padding: 0 6px;
    gap: 5px;
    font-size: 11px;
  }

  .xivy-demo-tab .xd-tab-icon {
    flex: 0 0 18px;
  }

  .app-wrap,
  .app-win,
  .xivy-demo-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .xivy-demo-chrome {
    height: 34px;
    padding: 0 8px;
  }

  .xd-window-left {
    min-width: 0;
  }

  .xd-window-brand span,
  .xd-window-center,
  .xd-frame-btn {
    display: none;
  }

  .xd-window-actions {
    gap: 4px;
  }

  .xd-window-control-btn {
    width: 28px;
    height: 26px;
  }

  .xivy-demo-body {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 408px !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .xd-channel-rail,
  .xd-members {
    display: none !important;
  }

  .xd-main-header {
    height: 44px;
    padding: 0 12px;
  }

  .xd-main,
  .xd-scene-stack,
  .xd-scene,
  .xd-chat-flow,
  .xd-msg > div {
    max-width: 100%;
    min-width: 0;
  }

  .xd-current-channel {
    font-size: 15px;
  }

  .xd-msg {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
  }

  .xd-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .xd-msg-name,
  .xd-msg-text {
    font-size: 13px;
  }

  .xd-msg-text {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .xd-compose {
    min-height: 54px;
    padding: 8px 12px;
  }

  .xd-compose-inner {
    min-height: 38px;
    font-size: 13px;
  }

  .feat-callouts {
    border-top: 0;
    gap: 10px !important;
    padding: 24px 0 36px;
  }

  .feat-callouts > button {
    padding: 16px;
    border-radius: 10px;
    border-color: rgba(129, 140, 248, 0.18);
    background: rgba(10, 15, 31, 0.72);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  }

  .feat-callouts > button:hover,
  .feat-callouts > button.is-active {
    transform: none;
    background: rgba(96, 85, 245, 0.14);
    border-color: rgba(129, 140, 248, 0.34);
    box-shadow: 0 14px 34px rgba(40, 44, 130, 0.26);
  }

  .fco-name {
    font-size: 15px;
    line-height: 1.25;
    margin-bottom: 5px;
  }

  .fco-desc {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(210, 216, 241, 0.72);
  }

  #community .feature {
    padding-top: 42px;
  }
}

@media (max-width: 425px) {
  .wrap,
  .news-main,
  .article-main,
  .auth-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .logo {
    gap: 8px;
  }

  .logo-mark,
  .logo-mark img {
    width: 44px;
    height: 44px;
  }

  .logo-wordmark {
    display: none;
  }

  body.has-xivy-tetris-bg .hero {
    padding-top: 84px;
    padding-bottom: 82px;
  }

  body.has-xivy-tetris-bg .hero-h1 {
    font-size: clamp(20px, 7.4vw, 27px);
    line-height: 1.13;
    overflow-wrap: anywhere;
  }

  body.has-xivy-tetris-bg .hero-brand {
    font-size: clamp(36px, 13vw, 48px);
    letter-spacing: 0;
  }

  body.has-xivy-tetris-bg .hero-sub {
    font-size: 14px;
  }

  .hero-btns {
    width: 100%;
    max-width: 260px;
    flex-direction: column;
    align-items: stretch;
  }

  .hero-h1 {
    font-size: clamp(22px, 8.2vw, 30px);
  }

  .hero-brand {
    font-size: clamp(38px, 14vw, 52px);
    letter-spacing: -1.2px;
  }

  .hero-btns .btn,
  .cta-btns .btn,
  .cta-btns .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .feature {
    gap: 24px;
    padding: 48px 0;
  }

  .feature-card,
  .cv-live,
  .srv-list {
    padding: 16px;
  }

  .srv-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .news-card-link {
    padding: 10px;
  }

  .article-title,
  .news-title,
  .brand-title {
    letter-spacing: -1px;
  }
}

@media (max-width: 375px) {
  .logo-wordmark {
    font-size: 15px;
  }

  .hero {
    padding-top: 86px;
  }

  .hero-brand {
    font-size: clamp(34px, 13vw, 46px);
  }

  .xivy-card,
  .article-card__content {
    padding: 18px 14px 16px !important;
  }

  .auth-title {
    font-size: 23px !important;
  }

  .brand-title,
  .news-title {
    font-size: clamp(28px, 11vw, 36px);
  }

  .input-row,
  .cs-trigger,
  .btn-primary {
    min-height: 44px;
    height: 44px;
  }

  .textarea-row textarea {
    min-height: 96px;
  }

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

  .news-cover,
  .article-cover {
    height: 160px;
  }
}

@media (max-width: 360px) {
  .hdr-wrap {
    gap: 8px;
  }

  .logo-mark,
  .logo-mark img {
    width: 40px;
    height: 40px;
  }

  .logo-wordmark {
    display: none;
  }

  .burger {
    margin-left: 0;
    padding-left: 6px;
    padding-right: 6px;
  }

  body.has-xivy-tetris-bg .hero-h1 {
    max-width: 100%;
    font-size: clamp(19px, 6.4vw, 22px);
    line-height: 1.14;
    overflow-wrap: break-word;
  }

  body.has-xivy-tetris-bg .hero-brand {
    font-size: clamp(36px, 13vw, 44px);
  }

  .xivy-demo-tab {
    min-width: 0;
    padding: 0 3px;
    gap: 3px;
    font-size: 10px;
  }

  .xivy-demo-tab .xd-tab-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
}

@media (max-width: 320px) {
  .wrap,
  .news-main,
  .article-main,
  .auth-shell {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .logo-wordmark {
    display: none;
  }

  .btn,
  .btn-primary {
    font-size: 13px;
  }

  .hero-sub,
  .brand-subtitle,
  .auth-subtitle,
  .news-card-desc,
  .article-body p {
    font-size: 14px;
  }

  .f-bot-links {
    gap: 6px 8px;
  }
}