/* CafeT — Complete Responsive UX System */

/* ── Global foundations ── */
html {
  overflow-x: clip;
}

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  min-width: 320px;
}

main {
  max-width: 100%;
  overflow-x: clip;
}

img.brand-logo,
img {
  max-width: 100%;
  height: auto;
}

/* Prevent grid/flex children from forcing overflow */
[class*='-grid'] > *,
.overview-grid > *,
.products-grid > *,
.testimonials-grid > *,
.features-grid > *,
.modules-grid > *,
.integrations-grid > *,
.industries-grid > *,
.arch-domains > *,
.footer-grid > * {
  min-width: 0;
}

.section {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  overflow-x: clip;
}

.section-header {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-page-x);
  padding-right: var(--space-page-x);
}

/* Fluid typography everywhere */
.hero-title {
  font-size: clamp(2.25rem, 5.5vw + 1rem, var(--text-hero-size));
}

.section-title {
  font-size: clamp(1.75rem, 3.5vw + 0.75rem, var(--text-section-size));
}

.section-desc,
.hero-desc {
  font-size: clamp(1rem, 1.5vw + 0.75rem, var(--text-body-size));
}

.counter-value {
  font-size: clamp(1.75rem, 4vw + 0.5rem, var(--text-stat-size));
}

/* Equal-height card grids */
.overview-grid,
.products-grid,
.testimonials-grid,
.ai-grid,
.security-grid,
.problems-grid,
.features-grid,
.counters-grid,
.monitoring-grid,
.reports-categories,
.integrations-grid,
.industries-grid,
.modules-grid {
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.product-card,
.overview-card,
.testimonial-card,
.ai-card,
.security-card,
.feature-card,
.counter-card,
.monitor-card,
.glass-card {
  min-width: 0;
}

.product-card,
.overview-card,
.testimonial-card,
.ai-card,
.security-card,
.feature-card,
.counter-card,
.monitor-card {
  height: 100%;
}

/* Word wrap in dense UI */
.module-chip span,
.eco-card-desc,
.eco-card-title,
.arch-node-title,
.arch-node-sub,
.product-card h3,
.integration-item,
.industry-card span,
.showcase-list-item span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── Navigation backdrop & drawer ── */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-drawer-header,
.nav-drawer-footer,
.nav-drawer-close {
  display: none;
}

body.nav-open {
  overflow: hidden;
  touch-action: none;
}

/* Desktop nav */
@media (min-width: 1024px) {
  .nav-drawer-header,
  .nav-drawer-footer,
  .nav-drawer-close {
    display: none !important;
  }

  .nav-links {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    gap: 0.125rem;
    position: static;
    transform: none !important;
    width: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
  }

  .nav-drawer-links {
    display: contents;
  }

  .nav-toggle,
  .nav-backdrop {
    display: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --nav-height: clamp(5.5rem, 8vw, 6rem);
    --nav-logo-height: clamp(3.5rem, 5vw, 4.25rem);
    --nav-logo-height-scrolled: clamp(3rem, 4.4vw, 3.5rem);
  }

  .nav-drawer-links a,
  .nav-links a {
    padding: 0.5rem 0.35rem;
    font-size: 0.8125rem;
  }

  .nav-cta {
    padding: 0.45rem 0.85rem;
    font-size: 0.8125rem;
  }

  .nav-inner {
    gap: 0.85rem;
  }

  .nav-actions {
    gap: 0.5rem;
  }
}

/* Mobile / tablet drawer */
@media (max-width: 1023px) {
  :root {
    --nav-height: clamp(5.25rem, 10vw, 5.75rem);
    --nav-logo-height: clamp(3.25rem, 5.8vw, 3.75rem);
    --nav-logo-height-scrolled: clamp(2.875rem, 5vw, 3.25rem);
  }

  .nav {
    padding-left: max(var(--space-page-x), env(safe-area-inset-left));
    padding-right: max(var(--space-page-x), env(safe-area-inset-right));
  }

  .nav-toggle {
    display: flex;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }

  .nav-cta {
    display: none;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    width: min(100%, 22rem);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    background: var(--glass);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 48px rgba(0, 0, 0, 0.18);
    transform: translateX(105%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .nav-links.open {
    transform: translateX(0);
  }

  .nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  .mobile-nav-logo {
    display: block !important;
    padding: 0;
  }

  .mobile-nav-logo .brand-logo {
    height: clamp(3rem, 6.5vw, 3.4rem);
    max-height: none;
  }

  .nav-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-min);
    height: var(--touch-min);
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
  }

  .nav-drawer-links {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.75rem;
    gap: 0.25rem;
  }

  .nav-drawer-links a {
    display: flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--fg-muted);
    border-radius: var(--radius-md);
  }

  .nav-drawer-links a:hover,
  .nav-drawer-links a.active {
    background: var(--bg-muted);
    color: var(--fg);
  }

  .nav-drawer-footer {
    display: block;
    padding: 1.25rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }

  .nav-drawer-cta {
    width: 100%;
    min-height: var(--touch-min);
  }

  .theme-toggle {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }
}

/* ── Hero ── */
.hero-content {
  padding-left: var(--space-page-x);
  padding-right: var(--space-page-x);
}

@media (max-width: 767px) {
  :root {
    --nav-height: clamp(4.875rem, 12vw, 5.25rem);
    --nav-logo-height: clamp(2.875rem, 9vw, 3.4rem);
    --nav-logo-height-scrolled: clamp(2.625rem, 7.5vw, 3rem);
    --hero-logo-width: clamp(15rem, 72vw, 17rem);
    --footer-logo-height: clamp(4.75rem, 20vw, 5.5rem);
  }

  .hero {
    min-height: 100svh;
    min-height: 100dvh;
  }

  .hero-content {
    padding-top: clamp(2rem, 6vw, 3rem);
    padding-bottom: clamp(2rem, 6vw, 3rem);
  }

  .hero-brand-logo .brand-logo {
    width: 100%;
    max-height: none;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-ctas .btn {
    width: 100%;
    min-height: var(--touch-min);
  }

  .hero-trust-badges {
    justify-content: center;
  }

  .trust-badge {
    font-size: clamp(0.75rem, 2.8vw, 0.8125rem);
  }
}

/* ── Grids: Desktop 1280+ (default in showcase.css) ── */

@media (max-width: 1279px) {
  .showcase-split {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }

  .problems-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .overview-grid,
  .products-grid,
  .ai-grid,
  .security-grid,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-grid,
  .counters-grid,
  .monitoring-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modules-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .integrations-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .industries-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .reports-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1199px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .showcase-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .overview-grid,
  .products-grid,
  .problems-grid,
  .features-grid,
  .ai-grid,
  .security-grid,
  .testimonials-grid,
  .counters-grid,
  .monitoring-grid {
    grid-template-columns: 1fr;
  }

  .modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .integrations-grid,
  .industries-grid,
  .reports-categories {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonial-card {
    padding: 1.5rem;
  }

  .testimonial-quote {
    font-size: clamp(0.9375rem, 3.8vw, 1.0625rem);
  }

  .overview-card,
  .product-card,
  .security-card,
  .ai-card {
    padding: clamp(1.25rem, 4vw, 2rem);
  }
}

@media (max-width: 374px) {
  :root {
    --nav-logo-height: 2.875rem;
    --nav-logo-height-scrolled: 2.625rem;
    --hero-logo-width: min(100%, 15rem);
  }

  .modules-grid,
  .integrations-grid,
  .industries-grid,
  .reports-categories,
  .problems-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Journey ── */
@media (min-width: 768px) and (max-width: 1279px) {
  .journey-steps {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
  }

  .journey-steps::before {
    display: none;
  }

  .journey-step {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }
}

@media (max-width: 767px) {
  .journey-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 0;
  }

  .journey-steps::before {
    display: none;
  }

  .journey-step {
    flex: none !important;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
    padding: 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .journey-step-num {
    margin: 0;
    flex-shrink: 0;
  }

  .journey-step p {
    padding: 0;
  }
}

/* ── Workflow ── */
@media (max-width: 767px) {
  .workflow {
    max-width: 100%;
    padding: 0;
  }

  .workflow-dot {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .workflow-track {
    left: 22px;
  }

  .workflow-packet {
    left: 17px;
  }

  .workflow-step {
    gap: 0.75rem;
    padding: 0.85rem 0;
  }

  .workflow-step-content {
    padding: 0.85rem 1rem;
    min-width: 0;
  }
}

/* ── Comparison table → cards on mobile ── */
.table-scroll {
  overflow-x: visible;
  max-width: 100%;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .comparison-table {
    font-size: clamp(0.8125rem, 2vw, 0.9375rem);
  }

  .comparison-table th,
  .comparison-table td {
    padding: 0.75rem 0.65rem;
  }
}

@media (max-width: 767px) {
  .comparison-table {
    display: block;
    border: none;
    background: transparent;
    box-shadow: none;
    width: 100%;
  }

  .comparison-table thead {
    display: none;
  }

  .comparison-table tbody {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .comparison-table tr {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
  }

  .comparison-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0;
    text-align: right;
    border-bottom: 1px solid var(--border);
    font-size: clamp(0.875rem, 3.5vw, 1rem);
  }

  .comparison-table td:last-child {
    border-bottom: none;
  }

  .comparison-table td:first-child {
    display: block;
    font-weight: 600;
    font-size: clamp(1rem, 4vw, 1.125rem);
    text-align: left;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.85rem;
    margin-bottom: 0.25rem;
  }

  .comparison-table td:not(:first-child)::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--fg-muted);
    text-align: left;
    flex-shrink: 0;
    max-width: 48%;
  }

  .comparison-table .highlight-col {
    background: transparent !important;
  }
}

/* ── Charts & reports ── */
@media (max-width: 767px) {
  .chart-mockup {
    padding: 1.25rem;
    overflow: hidden;
  }

  .chart-bars {
    height: clamp(120px, 28vw, 180px);
    gap: 0.35rem;
  }

  .export-badges {
    flex-wrap: wrap;
    justify-content: center;
  }

  .report-category {
    padding: 1rem 0.75rem;
  }

  .report-category strong {
    font-size: clamp(1.125rem, 4vw, 1.375rem);
  }
}

/* ── POS / showcase ── */
@media (max-width: 767px) {
  .showcase-visual {
    padding: 1.25rem;
  }

  .pos-body {
    grid-template-columns: 1fr;
  }

  .pos-item {
    font-size: clamp(0.6875rem, 3vw, 0.75rem);
  }

  .pos-total {
    font-size: clamp(0.8125rem, 3.5vw, 0.875rem);
  }

  .showcase-list {
    grid-template-columns: 1fr;
  }

  .showcase-list-item {
    padding: 0.85rem;
  }

  .sync-workflow {
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem;
    gap: 0.5rem;
  }

  .sync-workflow-arrow {
    transform: rotate(90deg);
    align-self: center;
  }

  .sync-workflow-step {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    min-width: 0;
    width: 100%;
    gap: 0.85rem;
  }

  .sync-workflow-step .icon-wrap {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
}

/* ── Footer ── */
@media (max-width: 767px) {
  .footer {
    padding: 3rem 0 calc(2rem + env(safe-area-inset-bottom));
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-brand-logo,
  .footer-contact-block .brand-logo {
    justify-self: center;
  }

  .footer-brand p {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-tags {
    justify-content: center;
  }

  .footer-col a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-min);
    padding: 0 0.5rem;
  }

  .footer-contact-block {
    padding: 1.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    padding-left: var(--space-page-x);
    padding-right: var(--space-page-x);
  }
}

/* ── Buttons & touch ── */
.btn,
.nav-cta,
.nav-toggle,
.theme-toggle,
.back-to-top {
  min-height: var(--touch-min);
}

.back-to-top {
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  right: max(1.25rem, env(safe-area-inset-right));
}

/* ── Loader ── */
@media (max-width: 767px) {
  .pos-loader-main {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    gap: clamp(0.75rem, 3vh, 1.5rem);
  }

  .pos-loader-logo {
    max-height: clamp(3.75rem, 12vw, 4.5rem);
    width: auto;
  }

  .pos-loader-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .pos-loader-subtitle {
    font-size: clamp(0.6875rem, 2.5vw, 0.8125rem);
    padding: 0 0.5rem;
    text-align: center;
  }

  .pos-loader-visual {
    width: min(100%, 360px);
  }

  .pos-loader-boot {
    width: 100%;
    max-width: 480px;
  }

  .pos-loader-stage {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .pos-loader-stage-text {
    font-size: clamp(0.8125rem, 3.5vw, 0.9375rem);
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .pos-loader-steps.is-visible {
    max-height: min(38vh, 260px);
    overflow-y: auto;
  }

  .pos-loader-step {
    font-size: clamp(0.6875rem, 2.8vw, 0.8125rem);
  }

  .pos-loader-statusbar {
    height: auto;
    min-height: var(--pl-status-h, 56px);
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.65rem max(1rem, env(safe-area-inset-right)) max(0.65rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    gap: 0.5rem 1rem;
  }

  .pos-loader-status-item {
    font-size: clamp(0.625rem, 2.5vw, 0.6875rem);
  }
}

@media (max-width: 374px) {
  .pos-loader-steps {
    grid-template-columns: 1fr;
  }
}

/* ── Ultra-wide ── */
@media (min-width: 1440px) {
  :root {
    --container: min(1240px, calc(100% - 4rem));
  }
}

@media (min-width: 1728px) {
  :root {
    --container: min(1320px, calc(100% - 5rem));
  }

  .hero-content {
    max-width: min(960px, 56vw);
  }
}

@media (min-width: 1920px) {
  :root {
    --container: min(1400px, calc(100% - 6rem));
    --section-gap: clamp(6rem, 7vw, 9rem);
  }
}

/* ── Landscape phone ── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-height) + 0.75rem);
    padding-bottom: 1.5rem;
  }

  .hero-brand-logo {
    margin-bottom: 0.75rem;
  }

  .hero-brand-logo .brand-logo {
    width: min(100%, 12rem);
    max-height: none;
  }

  .hero-ctas {
    margin-bottom: 1rem;
  }

  .pos-loader-main {
    justify-content: flex-start;
    padding-top: 0.75rem;
    overflow-y: auto;
  }

  .pos-loader-visual {
    display: none;
  }
}

/* ── Motion ── */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .arch-node {
    animation: none !important;
  }

  .glass-card:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links,
  .nav-backdrop {
    transition-duration: 0.01ms !important;
  }
}