/* ═══════════════════════════════════════════════════════
   AKOX AI — desktop.css
   Responsive overrides only.
   Tablet ≥ 640px  |  Desktop ≥ 1024px  |  Wide ≥ 1280px
   Base/mobile styles live in mobile.css.
═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   TABLET  (≥ 640px)
══════════════════════════════════════════════════════ */
@media (min-width: 640px) {

  /* ── Section base ─── */
  .section-sub { font-size: 1.05rem; }

  /* ── Hero ─── */
  .hero-actions {
    flex-direction: row;
    justify-content: center;
  }

  /* ── Social proof ─── */
  .testimonials {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Features ─── */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Steps ─── */
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Pricing ─── */
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Analytics KPIs: 4-column on tablet ─── */
  .anl-kpis {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── Footer links ─── */
  .footer-links {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Footer bottom ─── */
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ══════════════════════════════════════════════════════
   DESKTOP  (≥ 1024px)
══════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Global section padding ─── */
  section { padding: 104px 0; }
  .social-proof { padding: 64px 0; }

  /* ── Navigation: show full links, hide hamburger ─── */
  .nav-links  { display: flex; }
  .nav-cta    { display: flex; }
  .nav-lang-wrap { margin-left: 0; }
  .hamburger  { display: none; }
  .nav-mobile-menu { display: none !important; }
  .logo-img   { height: 26px; }

  /* Footer logo slightly smaller than header */
  .footer .logo-img { height: 22px; }

  /* ── Hero: two-column layout ─── */
  .hero { padding: 144px 0 104px; }

  .hero-inner {
    flex-direction: row;
    align-items: center;
    gap: 80px;
  }

  .hero-content {
    text-align: left;
    flex: 1;
    max-width: 520px;
  }

  .hero-sub {
    margin-left: 0;
    margin-right: 0;
  }

  .hero-actions { justify-content: flex-start; }

  .hero-trust { text-align: left; }

  .hero-badge { justify-content: flex-start; }

  .hero-visual {
    flex: 1;
    max-width: 600px;
  }

  /* ── Testimonials: 3 columns ─── */
  .testimonials { grid-template-columns: repeat(3, 1fr); }

  /* ── Features: 3 columns ─── */
  .features-grid { grid-template-columns: repeat(3, 1fr); }

  /* ── Steps: 4 columns with connecting line ─── */
  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .steps-line {
    display: block;
    position: absolute;
    top: 88px;
    left: calc(12.5% + 27px);
    right: calc(12.5% + 27px);
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      rgba(243,113,36,.4),
      rgba(243,113,36,.6),
      rgba(243,113,36,.4),
      transparent
    );
    z-index: 0;
    pointer-events: none;
  }

  .step-card { z-index: 1; position: relative; }

  /* ── Pricing: 3 columns, popular card scaled ─── */
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  .pricing-popular {
    transform: scale(1.04);
  }

  .pricing-popular:hover {
    transform: scale(1.04) translateY(-4px);
  }

  /* ── Benefits: two-column layout ─── */
  .benefits-inner {
    flex-direction: row;
    gap: 80px;
    align-items: flex-start;
  }

  .benefits-content { flex: 1; }
  .benefits-visual  { flex: 1; }

  /* ── Footer: horizontal layout ─── */
  .footer-inner {
    display: grid;
    grid-template-columns: 1.15fr 1.85fr;
    align-items: start;
    column-gap: 72px;
  }

  /* Give the top divider more breathing room on desktop */
  .footer-inner {
    padding-top: 64px;
  }

  .footer-brand { max-width: none; }

  .footer-links {
    gap: 56px;
    justify-items: start;
  }

  /* Bottom bar: left/right alignment */
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .footer-bottom-inner { padding: 22px 0; }

  /* ── Hide mobile sticky CTA on desktop ─── */
  .mobile-sticky-cta { display: none; }

  .auth-modal-dialog {
    margin-top: 14vh;
    padding: 28px;
  }
}

/* ══════════════════════════════════════════════════════
   WIDE  (≥ 1280px)
══════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

  .container { padding: 0 40px; }

  .hero { padding: 156px 0 112px; }

  .hero-headline { font-size: 4rem; }

  .hero-inner { gap: 96px; }

  .section-title { font-size: 3rem; }

  /* Larger floating cards */
  .hero-floating-card { padding: 14px 20px; }
  .fc-title { font-size: 0.85rem; }
  .fc-sub   { font-size: 0.72rem; }

  /* ── Pricing grid: equal height ─── */
  .pricing-grid { align-items: stretch; }

  /* ── Larger preview window ─── */
  .preview-layout { min-height: 400px; }

  /* Footer: keep columns tighter on wide screens */
  .footer-inner { column-gap: 88px; }
}

/* ══════════════════════════════════════════════════════
   PRINT (basic reset to white)
══════════════════════════════════════════════════════ */
@media print {
  :root {
    --bg:          #fff;
    --bg-deep:     #fff;
    --bg-card:     #f5f5f5;
    --text-primary: #000;
    --text-body:    #333;
    --text-muted:   #666;
    --border:       #ccc;
  }

  .nav-header,
  .hero-orb,
  .final-orb,
  .mobile-sticky-cta,
  .hero-scroll-indicator { display: none; }

  section { padding: 32px 0; }
}