/* ============================================================
   TARH PLATFORM — RESPONSIVE STYLESHEET
   ============================================================ */

/* ------------------------------------------------------------
   1. REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition: none !important;
  }
  body.motion-ready [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   2. TABLET — max-width: 900px
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .nav-links { gap: 17px; }
  .split { gap: 42px; }
  .section { padding: 90px 0; }
  .network { grid-template-columns: 1fr 150px 1fr; gap: 12px; }
  .network-center { width: 138px; height: 138px; }
  .faq-wrap { gap: 45px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { gap: 35px; }
  .page-title { font-size: clamp(36px, 6vw, 54px); }

  /* Footer (Tablet) */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-about { grid-column: 1 / -1; }
  .footer-contact-col { grid-column: 1 / -1; }
  .store-badge { min-width: 116px; }
  .legal-document { padding: 25px; }

  /* About Page (Tablet) */
  .values-grid { grid-template-columns: 1fr; gap: 20px; }
  .value-card { padding: 30px; }
  .timeline-callout { padding: 30px; }

  /* Legal Pages (Tablet) */
  .legal-layout { grid-template-columns: 1fr; }
  [dir="ltr"] .legal-layout { grid-template-columns: 1fr; }
  .legal-sidebar { position: static; max-height: none; padding-right: 0; margin-bottom: 20px; }

  /* --- CTA (Tablet) --- */
  .cta-section { padding: 80px 0; }
  .cta-row { display: flex; flex-direction: column; gap: 40px; text-align: center; }
  .cta-row::after { display: none; }
  .cta-left { order: 1; align-items: center; text-align: center; width: 100%; }
  .cta-right { order: 2; width: 100%; }
  .cta-form-wrapper { width: 100%; max-width: 100%; margin: 0 auto; }
  .cta-content { text-align: center; }
  .cta-title { text-align: center; font-size: clamp(28px, 6vw, 36px); }
  .cta-badge { margin-inline: auto; }

  /* --- Closing Banner (Tablet) --- */
  .closing-banner .closing-inner {
    display: flex;
    flex-direction: column !important;
    text-align: center;
    gap: 24px;
  }
  .closing-banner .closing-text { text-align: center !important; width: 100%; }
  .closing-banner .closing-actions { width: 100%; display: flex; justify-content: center; }
  .closing-banner .button-primary { width: 100%; max-width: 300px; }
}

/* ------------------------------------------------------------
   3. MOBILE — max-width: 700px
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .container { width: min(var(--container), calc(100% - 36px)); }
  .nav { height: 72px; }
  .mobile-actions { display: flex; align-items: center; gap: 8px; z-index: 100; }
  .nav-actions { display: none !important; }
  .mobile-menu-btn { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; }
  .mobile-menu-btn span { display: block; width: 24px; height: 2px; background-color: var(--white); transition: 0.3s; }

  .nav-links {
    display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0;
    background: #071421; padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); opacity: 0; visibility: hidden;
    transform: translateY(-10px); transition: all 0.3s ease; z-index: 99;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links a { padding: 12px 0; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .nav-links a:last-child { border-bottom: none; }

  .brand { font-size: 22px; }
  .brand-logo { height: 64px; max-width: 150px; }

  .lang-switcher { margin-inline-end: 5px; }
  .lang-toggle { width: 72px; height: 32px; padding: 2px; }
  .lang-toggle__option { font-size: 11px; font-weight: 700; }
  .lang-toggle__indicator { width: calc(50% - 2px); top: 2px; bottom: 2px; box-shadow: 0 1px 6px rgba(91, 190, 177, 0.35); }
  [dir="rtl"] .lang-toggle__indicator { right: 2px; left: auto; }
  [dir="rtl"] .lang-toggle.lang-en .lang-toggle__indicator { transform: translateX(-100%); }
  [dir="ltr"] .lang-toggle__indicator { left: 2px; right: auto; }
  [dir="ltr"] .lang-toggle.lang-en .lang-toggle__indicator { transform: translateX(100%); }

  .hero { min-height: 690px; align-items: flex-end; padding-bottom: 70px; }
  .hero-image { object-position: center; opacity: 0.58; }
  .hero-shade { background: linear-gradient(0deg, rgba(5, 18, 30, 0.98) 0%, rgba(6, 20, 32, 0.82) 52%, rgba(6, 20, 32, 0.28) 100%); }
  .hero-content { padding-top: 120px; }
  .hero h1 { font-size: 46px; letter-spacing: -1.8px; }
  .hero-copy { font-size: 16px; }
  .hero-note { margin-top: 28px; }

  .trust-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; padding: 22px 0; align-items: center; }
  .trust-label { grid-column: 1 / -1; margin-bottom: 4px; font-size: 13px; }
  [dir="rtl"] .trust-label { text-align: right; }
  [dir="ltr"] .trust-label { text-align: left; }
  .trust-item { font-size: 13px; justify-content: flex-start; }
  [dir="ltr"] .trust-item { flex-direction: row; }
  .check { width: 20px; height: 20px; font-size: 11px; }

  .section { padding: 76px 0; }
  .section-head { margin-bottom: 38px; }
  .section-lede { font-size: 15px; }

  .journey { grid-template-columns: 1fr; gap: 25px; margin-top: 20px; position: relative; }
  .journey:before { top: 30px; bottom: 30px; right: 27px; left: auto; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(91, 190, 177, 0.5), transparent); z-index: 0; }
  [dir="ltr"] .journey:before { right: auto; left: 27px; }

  .step { display: flex; flex-direction: row; align-items: flex-start; text-align: right; padding: 0 75px 0 0; gap: 15px; min-height: 56px; }
  [dir="ltr"] .step { flex-direction: row-reverse; text-align: left; padding: 0 0 0 75px; }
  .step-num { position: absolute; right: 0; top: 0; margin: 0; width: 56px; height: 56px; font-size: 20px; border-radius: 16px; flex-shrink: 0; }
  [dir="ltr"] .step-num { right: auto; left: 0; }

  .step-content { display: flex; flex-direction: column; }
  .step h3 { font-size: 17px; margin-top: 0; margin-bottom: 6px; }
  .step p { font-size: 13.5px; line-height: 1.7; margin-bottom: 0; }
  .journey-foot { margin-top: 30px; padding: 16px; font-size: 13px; text-align: center; justify-content: center; flex-direction: column; }

  .split { grid-template-columns: 1fr; gap: 40px; }
  .product-window { min-height: 385px; padding: 19px; }
  .window-body { grid-template-columns: 1fr 115px; gap: 10px; }
  .mock-side { padding-right: 10px; }

  /* About Mobile */
  .values-grid { grid-template-columns: 1fr; gap: 16px; }
  .value-card { padding: 24px; }
  .value-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .timeline-callout { padding: 24px; gap: 24px; }
  .timeline-step { gap: 15px; }
  .timeline-text { font-size: 14px; }

  /* FAQ Mobile (Dark Theme) */
  .faq-page { padding: 50px 0; }
  .faq-search-wrap { padding: 4px 16px; border-radius: 16px; }
  .faq-search-wrap input { padding: 12px 0; font-size: 14px; }
  .faq-search-wrap kbd { display: none; }
  .faq-item summary { padding: 18px; font-size: 15px; }
  .faq-item p { padding: 0 18px 18px 18px; font-size: 14px; }
  .faq-contact { flex-direction: column; text-align: center; gap: 16px; padding: 24px; }

  /* Platform Section (Mobile Fix) */
  #platform .split { direction: rtl; }
  #platform .split > div:last-child { direction: rtl; text-align: right; }
  #platform .product-window { direction: ltr; }

  /* Audience Section */
  .audience { padding: 70px 0; }
  .audience-cards { grid-template-columns: 1fr; gap: 16px; }
  .audience-card { padding: 24px; }
  .audience-card h3 { font-size: 20px; }
  .audience-card p { font-size: 14px; margin-bottom: 20px; }
  .audience-symbol { width: 46px; height: 46px; border-radius: 12px; }

  .network-wrapper { flex-direction: column; min-height: auto; gap: 30px; margin-top: 40px; }
  .network-visual { position: relative; left: auto; top: auto; transform: none; width: 280px; height: 280px; order: -1; margin-bottom: 10px; }
  .network-map { inset: -20%; opacity: 0.08; }
  .network-center { width: 120px; height: 120px; }
  .network-center .brand-mark { width: 30px; height: 30px; border-radius: 8px; margin-top: 4px; }
  .network-center .brand-mark svg { width: 16px; height: 16px; }
  .network-center .brand-name { font-size: 26px; margin-top: -2px; margin-bottom: 6px; }
  .network-center > span:last-child { font-size: 8px; margin-bottom: 12px; }
  .network-side { width: 100%; max-width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
  .network-side.left-side, .network-side.right-side { align-items: stretch; }
  .network-side.left-side .network-chip { flex-direction: row; }
  .network-chip { font-size: 12px; padding: 12px 10px; justify-content: center; text-align: center; max-width: 100%; }
  .network-chip i { display: none; }

  .faq-wrap { grid-template-columns: 1fr; gap: 25px; }

  .cta-section { padding: 60px 0; }
  .cta-row { display: flex; flex-direction: column; gap: 30px; text-align: center; }
  .cta-left { order: 1; text-align: center; }
  .cta-right { order: 2; }
  .cta-title { font-size: clamp(26px, 7vw, 34px); }
  .cta-description { font-size: 15px; margin-bottom: 20px; }
  .cta-trust { display: flex; flex-direction: column; align-items: flex-start; max-width: 280px; margin: 0 auto; text-align: right; }
  .cta-trust .check-icon { width: 32px; height: 32px; }
  .cta-trust .check-icon svg { width: 14px; height: 14px; }
  .cta-trust span { justify-content: flex-start; text-align: right; width: 100%; }
  [dir="ltr"] .cta-trust { text-align: left; }
  [dir="ltr"] .cta-trust span { text-align: left; }
  .cta-form { text-align: right; padding: 24px; }
  .form-group { text-align: right; align-items: flex-start; }
  .form-input { text-align: right; }
  .submit-button { padding: 14px; }
  [dir="ltr"] .cta-form { text-align: left; }
  [dir="ltr"] .form-group { text-align: left; align-items: flex-start; }
  [dir="ltr"] .form-input { text-align: left; }
  
  .closing-banner { padding: 50px 0; }
  .closing-banner .closing-inner { display: flex; flex-direction: column !important; text-align: center; gap: 20px; }
  .closing-banner .closing-text { text-align: center !important; width: 100%; }
  .closing-banner .closing-actions { width: 100%; display: flex; justify-content: center; }
  .closing-banner h2 { font-size: 26px; }
  .closing-banner p { font-size: 15px; margin-bottom: 10px; }
  .closing-banner .button-primary { width: 100%; max-width: 100%; padding: 14px; }

  .footer-grid { grid-template-columns: 1fr; gap: 35px; }
  .footer-about { grid-column: auto; }
  .footer-contact-col { grid-column: auto; }
  .footer-about img { height: 75px; }
  .copyright { flex-direction: column; text-align: center; gap: 10px; }
  .legal-links { justify-content: center; }

  .inner-hero { padding: 132px 0 62px; min-height: 360px; }
  .page-title { font-size: 42px; letter-spacing: -1px; }
  .values-grid, .feature-grid, .contact-grid { grid-template-columns: 1fr; }
  .value-card { padding: 25px; }
  .feature-card { min-height: auto; }
  .contact-grid { gap: 30px; }
  .contact-form { padding: 22px; }
  .form-fields { grid-template-columns: 1fr; }
  .contact-form .field-full { grid-column: auto; }
  .faq-contact { align-items: flex-start; flex-direction: column; }
  .faq-search-wrap { gap: 8px; padding-inline: 12px; }
  .faq-search-wrap kbd { display: none; }

  .legal-hero { padding-top: 125px; min-height: 300px; }
  .legal-hero .page-title { font-size: 38px; }
  .legal-document { padding: 22px 18px; }
  .legal-toc ol { grid-template-columns: 1fr; }
  .legal-document p, .legal-document li { font-size: 13px; line-height: 1.95; }
  .legal-document h2 { font-size: 20px; }
}

/* ------------------------------------------------------------
   4. SMALL MOBILE — max-width: 390px
   ------------------------------------------------------------ */
@media (max-width: 390px) {
  .hero h1 { font-size: 40px; }
  .hero-buttons .button { width: 100%; }
  .trust-item { font-size: 11px; }
  .window-body { grid-template-columns: 1fr 98px; }
  .product-window { padding: 15px; }

  .network-side { grid-template-columns: 1fr; }
  .network-visual { width: 240px; height: 240px; }
  .network-center { width: 105px; height: 105px; }
  .network-center .brand-mark { width: 26px; height: 26px; margin-top: 2px; }
  .network-center .brand-mark svg { width: 14px; height: 14px; }
  .network-center .brand-name { font-size: 22px; margin-bottom: 4px; }
  .network-center > span:last-child { font-size: 7px; margin-bottom: 4px; }

  .cta-form { padding: 16px; }
  .cta-title { font-size: 24px; }

  .footer-about img { height: 40px; }
  .store-badge { width: 100%; justify-content: center; }
  .app-badges { flex-direction: column; }
}