/* ============================================
   Lin2Web — Responsive v3 (Dark Crystal)
   ============================================ */

/* ── Large tablet ── */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-visual { max-width: 640px; margin: 0 auto; }
  .hero-text { text-align: center; }
  .hero-badge { margin-left: auto; margin-right: auto; }
  .hero-btns { justify-content: center; }
  .banner-btn { justify-content: center; }
  .features-list { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .container { padding: 0 16px; }

  /* Nav */
  .gw-burger { display: flex; }
  .mob-hidden { display: none !important; }
  .nav-mob { display: flex !important; }

  .navbar {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    height: auto;
    padding: 12px 16px;
    gap: 0;
  }

  .logo { grid-column: 1; grid-row: 1; align-self: center; }
  .gw-burger { grid-column: 2; grid-row: 1; justify-self: end; }

  /* ── Full-screen menu overlay ── */
  .top-line-menu.menu-open {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    overflow-y: auto;
    z-index: 1000;
    background: linear-gradient(170deg, rgba(16,14,28,0.99) 0%, rgba(13,10,24,0.99) 100%);
    border-bottom: none;
  }
  .top-line-menu.menu-open .navbar {
    min-height: 100dvh;
    height: auto;
    align-content: start;
    padding-bottom: 32px;
  }

  /* ── Action buttons section ── */
  .top-right-sidebar {
    grid-column: 1 / -1;
    grid-row: 2;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    padding: 20px 0 4px;
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.08);
    justify-self: stretch;
  }
  .navbar.active .top-right-sidebar { display: flex; }

  .navbar.active .others-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .navbar.active .others-options .btn {
    justify-content: center;
    text-align: center;
    padding: 10px 8px;
    font-size: 13px;
    width: 100%;
  }
  .navbar.active .lang-switch {
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 1001;
  }
  .navbar.active .lang-switch .lang-dropdown {
    top: auto;
    bottom: calc(100% + 7px);
    transform: translateY(6px);
  }
  .navbar.active .lang-switch.open .lang-dropdown {
    transform: translateY(0);
  }

  /* ── Nav links section ── */
  .nav-menu {
    grid-column: 1 / -1;
    grid-row: 3;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 16px 0 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .navbar.active .nav-menu { display: flex; }

  .nav-menu li { width: 100%; }
  .nav-menu li a {
    width: 100%;
    padding: 13px 16px;
    font-size: 14px;
    border-radius: 10px;
    color: rgba(240,236,255,0.72);
    transition: color 0.2s, background 0.2s, padding-left 0.2s;
  }
  .nav-menu li a:hover {
    color: #ffd460;
    background: rgba(255,212,96,0.08);
    padding-left: 22px;
  }
  .nav-menu .current-menu-item a {
    color: #ffd460 !important;
    background: rgba(255,212,96,0.09) !important;
    border-left: 2px solid rgba(255,212,96,0.55);
    padding-left: 22px;
  }
  .nav-menu li a::after { display: none; }

  .nav-new-badge { display: none; }

  .others-options {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Hide cursor effects on touch devices */
  .cursor-dot, .cursor-ring { display: none; }

  /* Hero */
  .hero { padding: 52px 0 44px; }
  .hero-text h1 { font-size: 2.1rem; }
  .hero-sub { font-size: 0.95rem; }
  .hero-btns .btn { width: 100%; justify-content: center; }
  .banner-btn { flex-direction: column; }
  .banner-btn .link { text-align: center; justify-content: center; }

  /* Stats strip */
  .hero-strip-inner { grid-template-columns: 1fr; }
  .stat-block { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-block:last-child { border-bottom: none; }

  /* Features */
  .features-area { padding: 44px 0 64px; }
  .features-list { grid-template-columns: 1fr; }
  .feature-item h3 { font-size: 0.97rem; }

  /* Contacts */
  .contact-area { padding: 44px 0 64px; }
  .contact_all { grid-template-columns: 1fr; max-width: 360px; }

  /* Modal */
  .modal-content { padding: 26px 22px; }

  /* Breadcrumb */
  .breadcrumb-nav { font-size: 12.5px; }
}

@media (max-width: 480px) {
  .hero-text h1 { font-size: 1.8rem; }
  .footer-socials { flex-direction: column; }
}

/* ── Guard responsive ── */
@media (max-width: 900px) {
  .guard-flow {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .guard-flow-arrow {
    transform: rotate(90deg);
    padding: 0;
    justify-self: center;
  }
}

@media (max-width: 768px) {
  .guard-area { padding: 40px 0 64px; }
  .guard-step-header { padding: 14px 20px; }
  .guard-step-body { padding: 20px 20px; }
  .guard-order-cmd { display: none; }
  .guard-table thead th:nth-child(4),
  .guard-table tbody td:nth-child(4) { display: none; }
  .guard-section-title { font-size: 1.05rem; }
  .code-block pre { font-size: 12px; }
}

/* ── Guard marketing — extended responsive ── */
@media (max-width: 900px) {
  .guard-stats-4 { grid-template-columns: repeat(2, 1fr); }
  .guard-blocks-grid { grid-template-columns: repeat(2, 1fr); }
  .guard-feat-grid { grid-template-columns: 1fr; }
  .guard-comp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .guard-blocks-grid { grid-template-columns: 1fr; }
  .guard-block-badge { position: static; display: inline-flex; margin-bottom: 10px; }
  .guard-compat-badge { font-size: 12px; padding: 8px 14px; }
  .guard-cta { padding: 36px 24px; }
  .guard-cta-btns { flex-direction: column; align-items: stretch; }
  .guard-cta-btns .btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .guard-stats-4 { grid-template-columns: repeat(2, 1fr); }
  .guard-hero-btns { flex-direction: column; align-items: center; }
}