/* ========================================
   TECH NOXE - Consolidated Styles
   Original: 45 separate style blocks
   Merged: 2025-01-26
   Order preserved for CSS specificity
   ======================================== */

/* --- Block 1 --- */
  html { scroll-behavior:smooth; }
  body { font-family:'Heebo',sans-serif; background:#111111; color:#e5e7eb; overflow-x: hidden; padding-bottom: 80px; }
  @media (min-width: 1026px) { body { padding-bottom: 0; } }
  
  /* Slider marquee keyframes
     - LTR: move left by 50% (assumes duplicated content)
     - RTL: move right by 50% (prevents "air" / empty space on RTL pages) */
  @keyframes scrollLtr {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  @keyframes scrollRtl {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
  }

  .animate-scroll-logos{ animation-name: scrollLtr; }
  html[dir="rtl"] .animate-scroll-logos{ animation-name: scrollRtl; }
  
  /* PRELOADER */
  #preloader {
    position: fixed; inset: 0; background: #111111; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.5s ease-out;
  }
  #preloader.loaded { opacity: 0; pointer-events: none; }
  
  /* SCROLL PROGRESS BAR */
  #scrollProgress {
    position: fixed; top: 0; left: 0; height: 3px; background: #FDB915;
    width: 0%; z-index: 10000; box-shadow: 0 0 10px #FDB915;
    transition: width 0.1s;
  }

  /* Custom Scrollbar */
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: #111111; }
  ::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; border: 2px solid #0d0d0d; transition: background 0.3s; }
  ::-webkit-scrollbar-thumb:hover { background: #FDB915; }

  /* Text Shimmer */
  .text-shimmer {
    background: linear-gradient(to right, #b6bcc6 0%, #f5f7fa 50%, #b6bcc6 100%);
    background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text;
    animation: shimmer 10s linear infinite;
  }
  @keyframes shimmer { to { background-position: 200% center; } }

  /* Utilities */
  .glass { background: rgba(13,13,13,.85); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.08); }
  .focus-ring:focus { outline: none; }
  [x-cloak]{display:none!important;}

  /* Backgrounds */
  .hero-bg {
    background-color: #0d0d0d;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  }
  .footer-bg {
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 30px 30px;
  }
  
  /* Reveal Animation */
  .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
  .reveal.active { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  
  /* Components */
  .tn-sep { height: 3px; background: linear-gradient(90deg, transparent, #FDB915, transparent); margin: 30px auto; width: min(720px, 92%); box-shadow: 0 0 20px rgba(253,185,21,0.08); opacity: 1; }
  .card { background:#161616; border:1px solid rgba(255,255,255,.08); transition: all .3s ease; display: flex; flex-direction: column; }
  .card:hover { border-color: rgba(253,185,21,.25) !important; box-shadow: 0 0 40px rgba(253,185,21,.08); transform: translateY(-5px); }
  .readmore-btn { text-decoration: none !important; cursor: pointer; }
  .readmore-btn:hover { filter: drop-shadow(0 0 8px #FDB915); }
  .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 9999px; font-weight: 800; transition: all 0.2s; }
  .btn-primary { background-color: #FDB915; color: #000; box-shadow: 0 0 20px rgba(253,185,21,0.08); }
  .btn-primary:hover { box-shadow: 0 0 40px rgba(253,185,21,0.08); transform: translateY(-2px); background-color: #e5a50a; }
  
  /* Modern Solution Cards */
  .solution-card { 
    background: linear-gradient(135deg, #161616 0%, #1a1a1a 100%); 
    border: 1px solid rgba(255,255,255,.08); 
    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1); 
    position: relative; 
    overflow: hidden;
  }
  .solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(253,185,21,0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .solution-card:hover { 
    border-color: rgba(253,185,21,.4); 
    box-shadow: 0 8px 30px rgba(253,185,21,.15), 0 0 0 1px rgba(253,185,21,.1);
    transform: translateY(-2px);
  }
  .solution-card:hover::before { opacity: 1; }
  .solution-card.active { 
    border-color: rgba(253,185,21,.6); 
    box-shadow: 0 12px 40px rgba(253,185,21,.2), 0 0 0 1px rgba(253,185,21,.2);
    background: linear-gradient(135deg, #1a1a1a 0%, #1f1f1f 100%);
    z-index: 10;
  }
  .solution-card.active::before { opacity: 1; background: linear-gradient(90deg, transparent, #FDB915, transparent); }
  
  /* Blur/fade inactive cards - handled by JavaScript for compatibility */
  
  .solution-toggle { 
    cursor: pointer; 
    user-select: none;
    position: relative;
    transition: all 0.3s ease;
  }
  .solution-toggle:hover { 
    color: #FDB915 !important;
    transform: translateX(-2px);
  }
  .solution-toggle-icon { 
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease; 
  }
  .solution-card.active .solution-toggle-icon { 
    transform: rotate(0deg); 
    color: #FDB915; 
  }
  
  /* Close button styling */
  .solution-close-btn {
    display: none;
  }
  .solution-card.active .solution-close-btn {
    display: inline-flex;
  }
  .solution-card.active .solution-read-more {
    display: none;
  }
  
  .solution-content { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease; 
    opacity: 0; 
    margin-top: 0;
  }
  .solution-card.active .solution-content { 
    max-height: 1000px; 
    opacity: 1; 
    margin-top: 1rem;
  }
  
  .solution-detail-text { line-height: 1.8; margin-bottom: 0.75rem; font-size: 0.9rem; }
  .solution-detail-text:last-of-type { margin-bottom: 1rem; }
  
  .solution-bullets { 
    list-style: none; 
    padding: 0; 
    margin: 1rem 0 0; 
    display: grid;
    gap: 0.5rem;
  }
  .solution-bullets li { 
    position: relative; 
    padding-right: 1.5rem; 
    color: #d1d5db; 
    font-size: 0.875rem;
    line-height: 1.6;
  }
  .solution-bullets li:before { 
    content: "◆"; 
    position: absolute; 
    right: 0; 
    color: #FDB915; 
    font-size: 0.6rem;
    top: 0.5em;
  }

  /* SECTION PADDING */
  section { padding-top: 50px; padding-bottom: 50px; scroll-margin-top: 80px; }
  @media (min-width: 768px) {
    section { padding-top: 100px; padding-bottom: 100px; }
  }

  /* FLOAT BUTTONS */
  .float-btn { position: fixed; bottom: 80px; z-index: 40; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0,0,0,0.5); transition: transform 0.2s; cursor: pointer; }
  .float-btn:hover { transform: scale(1.1); }
  
  @media (min-width: 1026px) {
    .float-btn { width: 55px; height: 55px; bottom: 20px; z-index: 9990; }
  }

  .left-5 { left: 20px; }
  .right-5 { right: 20px; }
  
  
  /* Access & Modals */
  .acc-panel{
    position: fixed;
    top: 50%;
    right: 0;
    transform: translate(110%, -50%);
    width: 290px;
    max-width: calc(100vw - 28px);
    background: linear-gradient(145deg, #141414 0%, #0b0b0b 100%);
    border: 2px solid #3b82f6;
    border-right: 0;
    z-index: 10000;
    padding: 14px 14px 12px;
    border-radius: 18px 0 0 18px;
    box-shadow:
      0 20px 55px rgba(0,0,0,0.80),
      0 0 0 1px rgba(253,185,21,0.10);
    transition: transform .28s ease, opacity .28s ease;
    opacity: 0.98;
  }
  .acc-panel.open{ transform: translate(0, -50%); }

  .acc-title{ font-weight: 900; color: #fff; font-size: 15px; letter-spacing: .2px; }
  .acc-sub{ color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 4px; line-height: 1.35; }
  .acc-x{
    width: 34px; height: 34px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.75);
    display: grid; place-items: center;
    transition: all .18s ease;
  }
  .acc-x:hover{ border-color: rgba(253,185,21,0.55); color:#FDB915; transform: rotate(90deg); background: rgba(253,185,21,0.08); }

  .acc-btn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    transition: all .18s ease;
  }
  .acc-btn:hover{
    border-color: rgba(253,185,21,0.55);
    background: rgba(253,185,21,0.10);
    transform: translateY(-1px);
  }
  .acc-left{ display:flex; align-items:center; gap: 10px; }
  .acc-ic{
    width: 34px; height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(253,185,21,0.35);
    background: rgba(253,185,21,0.12);
    display: grid; place-items: center;
    flex: 0 0 auto;
  }
  .acc-ic i{ color: #FDB915; }
  .acc-state{
    min-width: 46px;
    text-align: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.80);
  }

  .acc-divider{
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin: 10px 0;
  }

  .acc-reset{
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(59,130,246,0.18);
    color: #fff;
    font-weight: 900;
    transition: all .18s ease;
  }
  .acc-reset:hover{ background: rgba(59,130,246,0.28); transform: translateY(-1px); }

  /* Accessibility classes (applied on <html>) */
  html.acc-grayscale { filter: grayscale(100%); }
  html.acc-high-contrast { filter: none !important; background: #000 !important; color: #fff !important; }
  html.acc-underline-links a { text-decoration: underline !important; text-underline-offset: 3px; }
  html.acc-focus-ring :focus { outline: 3px solid rgba(253,185,21,0.95) !important; outline-offset: 3px !important; border-radius: 8px; }
  html.acc-line-height body, html.acc-line-height p, html.acc-line-height li { line-height: 1.9 !important; }
  html.acc-pause-anim * { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; }

  html{ --tn-font-scale: 1; font-size: calc(100% * var(--tn-font-scale)); }

  .acc-panel.acc-he { text-align: right; }
  .acc-panel.acc-en { text-align: left; }


  /* Modal System */
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .tn-modal-backdrop { position: fixed; inset: 0; background: rgba(5,5,5,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: none; align-items: center; justify-content: center; padding: 18px; z-index: 9999; }
  .tn-modal-backdrop.is-open { display: flex; animation: fadeIn 0.3s ease-out forwards; }
  .tn-modal { width: min(800px, 96vw); border-radius: 26px; border: 2px solid rgba(253,185,21,.45); background: linear-gradient(145deg, #111 0%, #0a0a0a 100%); box-shadow: 0 25px 50px -12px rgba(0,0,0,.95), 0 0 0 2px rgba(253,185,21,.45); overflow: hidden; display: flex; flex-direction: column; max-height: 85vh; }
  .tn-modal-backdrop.is-open .tn-modal { animation: modalPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  @keyframes modalPop { 0% { opacity: 0; transform: scale(0.95) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
  
  .tn-modal-header { flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; gap: 12px; padding: 26px 32px; background: linear-gradient(135deg, rgba(253,185,21,.04), rgba(0,0,0,0)); border-bottom: 1px solid rgba(255,255,255,0.10); text-align: center; }
  .tn-modal-title { font-size: 27px; font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: -0.02em; }
  .tn-modal-close { 
    position: absolute; 
    left: 20px; 
    top: 20px; 
    width: 36px; 
    height: 36px; 
    border-radius: 12px; 
    border: 1px solid rgba(255,255,255,.10); 
    background: rgba(255,255,255,.03); 
    color: rgba(255,255,255,.7); 
    cursor: pointer; 
    display: grid; 
    place-items: center; 
    transition: all .2s ease; 
    font-size: 18px;
  }
  @media (max-width: 768px) {
    .tn-modal-close {
      left: 14px;
      top: 14px;
      width: 32px;
      height: 32px;
    }
  }
  .tn-modal-close:hover { border-color: #FDB915; color: #FDB915; transform: rotate(90deg); background: rgba(253,185,21,0.08); }
  .tn-modal-body { padding: 32px 28px; color: rgba(255,255,255,.80); line-height: 1.65; overflow-y: auto; font-size: 0.95rem; }
  .tn-modal-body p { margin-bottom: 16px; text-align: justify; margin-left: 10px; }
  .tn-modal-body ul { list-style: none; margin-top: 10px; padding: 0; background: rgba(255,255,255,0.02); border-radius: 16px; padding: 20px; border: 1px solid rgba(255,255,255,0.08); }
  .tn-modal-body li { margin-bottom: 10px; padding-right: 20px; position: relative; }
  .tn-modal-body li:last-child { margin-bottom: 0; }
  .tn-modal-body li::before { content: "✓"; color: #FDB915; position: absolute; right: 0; font-weight: 900; }
  .modal-cta { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; }
  .modal-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); color: #fff; font-weight: 700; padding: 12px 32px; border-radius: 50px; transition: all 0.3s; cursor: pointer; text-decoration: none; position: relative; overflow: hidden; }
  .modal-cta-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(253,185,21,0.3); }
  .modal-cta-btn:hover i { transform: translateX(-4px); }
  .modal-cta-btn i { transition: transform 0.3s; }
  .modal-cta-btn::after { content:""; position:absolute; inset:-120% -60%; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%); transform: translateX(-60%) rotate(12deg); opacity: 0; transition: transform .55s ease, opacity .25s ease; pointer-events:none; }
  .modal-cta-btn:hover::after { opacity: .9; transform: translateX(70%) rotate(12deg); }
  
  .contact-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); transition: all 0.2s; }
  .contact-row:hover { border-color: #FDB915; background: rgba(253,185,21,.08); transform: translateX(-4px); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
  .contact-ico { 
    width: 40px !important; 
    height: 40px !important; 
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 10px; 
    background: rgba(255,255,255,0.05); 
    display: grid !important; 
    place-items: center !important;
    place-content: center !important;
    font-size: 1.3rem; 
    flex-shrink: 0; 
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .contact-ico span {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
  }
  .contact-ico::before {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .field input, .field textarea { width: 100%; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,.12); border-radius: 0.75rem; padding: 0.6rem 0.8rem 0.6rem 2.5rem; color: white; transition: all 0.2s; font-size: 0.95rem; }
  .field input:focus, .field textarea:focus { outline: none; border-color: #FDB915; box-shadow: 0 0 15px rgba(253,185,21,.08); background: rgba(0,0,0,0.6); }
  
  /* Form Validation States */
  .field { position: relative; }
  .field input.valid, .field textarea.valid { 
    border-color: #10b981 !important; 
    background: rgba(16,185,129,0.05) !important;
  }
  .field input.invalid, .field textarea.invalid { 
    border-color: #ef4444 !important; 
    background: rgba(239,68,68,0.05) !important;
  }
  .field .validation-icon {
    position: absolute;
    left: 12px;
    top: 38px;
    font-size: 18px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .field .validation-icon.show { opacity: 1; }
  .field .error-message {
    color: #ef4444;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: none;
    font-weight: 600;
  }
  .field .error-message.show { display: block; }
  .field span { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.3rem; color: #ccc; }


  /* SUBTLE MODE OVERRIDES */
  .btn-primary { box-shadow: 0 0 14px rgba(253,185,21,0.08); }
  .btn-primary:hover { box-shadow: 0 0 22px rgba(253,185,21,0.08); transform: translateY(-1px); }
  .card:hover { box-shadow: 0 0 28px rgba(253,185,21,0.08); transform: translateY(-3px); }
  .tn-sep { box-shadow: 0 0 14px rgba(253,185,21,0.08); opacity: 0.9; }
  .readmore-btn:hover { filter: drop-shadow(0 0 4px rgba(253,185,21,0.08)); }

  /* Language Switcher */
  .lang-switcher {
    display: flex;
    align-items: center;
  }

  /* Desktop nav: language item sits on same baseline/height as menu text */
  .tn-lang-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
  }

  .tn-lang-label {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
    color: currentColor;
  }

  /* Remove the circular container, enlarge the globe itself */
  .lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: filter 0.18s ease;
    text-decoration: none;
    color: currentColor;
  }

  .lang-btn i {
    width: 22px;
    height: 22px;
    color: currentColor;
  }

  /* Color + Hover Glow (applies to icon + label together) */
  .tn-lang-red { color: #ef4444; }
  .tn-lang-blue { color: #3b82f6; }

  .tn-lang-item:hover,
  .tn-lang-item:hover .lang-btn,
  .tn-lang-item:hover .tn-lang-label {
    filter: none;
  }

  /* Mobile-only tweaks (HE/EN parity) */
  @media (max-width: 767px) {
    .tn-mobile-hide-tagline { display: none !important; }
    .tn-hero-rotwrap { display: block; margin-top: 16px; }
  }

/* --- Block 2 --- */
@media (min-width: 1026px) {
  /* Desktop-only: make the ping ring visibly larger & more opaque */
  .hero-dot-pulse {
    opacity: 0.55 !important;
    transform: scale(1.65) !important;
    animation-duration: 1.9s !important;
  }
}

/* --- Block 3 --- */
@media (max-width: 1026px) { /* bar is mobile-only anyway via lg:hidden */
  .tn-mobile-actionbar .tn-cta-wa,
  .tn-mobile-actionbar .tn-cta-call{
    box-shadow: none !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .tn-mobile-actionbar.tn-ab-opt1 .tn-cta-wa,
  .tn-mobile-actionbar.tn-ab-opt1 .tn-cta-call{
    background: rgba(14,14,14,0.92) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.9) !important;
  }
  .tn-mobile-actionbar.tn-ab-opt1 .tn-cta-call{ color: rgba(253,185,21,0.95) !important; }
  .tn-mobile-actionbar.tn-ab-opt1 .tn-cta-wa{   color: rgba(34,197,94,0.92) !important; }
  .tn-mobile-actionbar.tn-ab-opt1 .tn-cta-wa:active,
  .tn-mobile-actionbar.tn-ab-opt1 .tn-cta-call:active{
    background: rgba(14,14,14,0.98) !important;
    border-color: rgba(255,255,255,0.18) !important;
  }
}

/* --- Block 4 --- */
/* Mobile Sticky Action Bar – remove outer container pill */
@media (max-width: 767px) {
  .tn-mobile-actionbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* --- Block 5 --- */
/* Mobile Sticky Action Bar – subtle brand border on buttons */
@media (max-width: 767px) {
  .tn-mobile-actionbar .tn-cta-call,
  .tn-mobile-actionbar .tn-cta-wa {
    border: 1px solid rgba(253,185,21,0.35) !important; /* brand orange, subtle */
  }
  
  /* Fill icons in sticky bar */
  .tn-mobile-actionbar .tn-cta-call svg,
  .tn-mobile-actionbar .tn-cta-wa svg {
    fill: currentColor !important;
    stroke-width: 2 !important;
  }
}

/* --- Block 6 --- */
/* IT/DR/SEC badges – unified enterprise icon treatment */
.tn-solution-badge{
  width:48px !important; height:48px !important;
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  border-radius:14px !important;
  background: rgba(11,11,11,0.92) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
  color: rgba(253,185,21,0.92) !important; /* SAME color for all */
}
.tn-solution-badge svg{
  display:block;
  color: inherit;
}

/* --- Block 7 --- */
/* Badges – V3: circular rings per section */
.tn-solution-badge{
  width:48px !important; height:48px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border-radius:999px !important;
  background: rgba(11,11,11,0.88) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  position: relative;
}
.tn-solution-badge svg{ color: rgba(255,255,255,0.90) !important; }
.tn-solution-it  { border-color: rgba(59,130,246,0.26) !important; }
.tn-solution-dr  { border-color: rgba(16,185,129,0.26) !important; }
.tn-solution-sec { border-color: rgba(168,85,247,0.24) !important; }
.tn-solution-badge::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,0.06);
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events:none;
}
.tn-solution-badge:hover{
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}
.tn-solution-badge:hover::after{ opacity: 1; }
.tn-solution-badge:active{ transform: translateY(0) scale(0.99); }

/* --- Block 8 --- */
.tn-solution-badge{
  width:52px !important;
  height:52px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.tn-solution-badge svg{ color:#ffffff !important; }
.tn-solution-badge:hover{
  transform: translateY(-1px) scale(1.06);
  background: rgba(253,185,21,0.10) !important;
  border-color: rgba(253,185,21,0.65) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 18px rgba(253,185,21,0.18);
}
.tn-solution-badge:active{ transform: translateY(0) scale(0.98); }

/* --- Block 9 --- */
/* Mobile Font Size Boost */
@media (max-width: 768px) {
  section:not(#contact) p.text-sm { font-size: 1.0625rem !important; } /* 17px */
  section:not(#contact) p.text-base { font-size: 1.1875rem !important; } /* 19px */
  section:not(#contact) .text-gray-400 { font-size: 1.0625rem !important; }
  section:not(#contact) li { font-size: 1.0625rem !important; }
  .card p:not(.text-xs) { font-size: 1.0625rem !important; }
  #about .text-gray-300 { font-size: 1.125rem !important; } /* 18px */
  .text-xs.text-gray-400 { font-size: 0.875rem !important; }
  
  /* FAQ Text Boost Mobile */
  #faq button span { font-size: 1.0625rem !important; } /* 17px */
  #faq [x-show] { font-size: 1rem !important; } /* 16px */
}
/* Desktop FAQ Questions Smaller */
@media (min-width: 769px) {
  #faq button span { font-size: 1rem !important; } /* 16px instead of 18px */
}
/* Contact Mobile Spacing */
@media (max-width: 1023px) {
  #contact .grid.lg\:grid-cols-2 { gap: 2rem !important; }
}

/* --- Block 10: id="tn-lang-align-hover" --- */
@media (min-width: 1026px){
  /* Match desktop nav links: px-2 py-1 => 0.5rem 0.25rem */
  .lang-switcher{ display:flex; align-items:center; }
  .tn-lang-item{
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    padding: 0.25rem 0.5rem !important;
    line-height: 1 !important;
    transform: translateY(0);
    transition: transform 0.18s ease, filter 0.18s ease;
  }
  .tn-lang-label{
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
    color: currentColor !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Remove any baseline quirks */
  .lang-btn{ line-height:0 !important; }
  .lang-btn i{
    width: 22px !important;
    height: 22px !important;
    display:block !important;
  }

  /* Hover: glow + subtle motion */
  .tn-lang-item:hover{
    transform: translateY(-1px) scale(1.03);
  }
}

/* --- Block 11: id="tn-lang-glow-currentcolor" --- */
@media (min-width: 1026px){
  .tn-lang-item:hover,
  .tn-lang-item:hover .lang-btn,
  .tn-lang-item:hover .tn-lang-label{
    filter: none;
  }
}

/* --- Block 12: id="tn-lang-tweak-final" --- */
@media (min-width: 1026px){
  /* Fine vertical tweak for English only */
  .tn-lang-red{
    transform: translateY(1px);
  }

  /* Softer glow */
  .tn-lang-item:hover,
  .tn-lang-item:hover .lang-btn,
  .tn-lang-item:hover .tn-lang-label{
    filter: none;
  }
}

/* --- Block 13: id="tn-lang-glow-soft-override" --- */
@media (min-width: 1026px){
  /* Override any previous glow rules */
  .tn-lang-item:hover,
  .tn-lang-item:hover .lang-btn,
  .tn-lang-item:hover .tn-lang-label{
    filter: none !important;
  }

  /* Soft glow per color */
  .tn-lang-red:hover,
  .tn-lang-red:hover .lang-btn,
  .tn-lang-red:hover .tn-lang-label{
    filter: none !important;
  }

  .tn-lang-blue:hover,
  .tn-lang-blue:hover .lang-btn,
  .tn-lang-blue:hover .tn-lang-label{
    filter: none !important;
  }
}

/* --- Block 14: id="tn-lang-final-microalign" --- */
@media (min-width: 1026px){
  /* Micro vertical alignment: Hebrew (blue) */
  .tn-lang-blue{
    transform: translateY(1px);
  }
}

/* --- Block 15: id="tn-client-logos-hover-match" --- */
@media (min-width: 1026px){
  /* Match the Reviews cards hover glow */
  .tn-client-logo{
    transition: all .3s ease;
    will-change: transform, box-shadow, border-color;
  }
  .tn-client-logo:hover{
    border-color: rgba(253,185,21,.25) !important;
    box-shadow: 0 0 40px rgba(253,185,21,.08);
    transform: translateY(-5px);
  }
}

/* --- Block 16: id="tn-lang-force-menu-color" --- */
  .tn-lang-red,
  .tn-lang-blue{
    color: inherit !important;
  }

  /* Neutral hover glow */
  .tn-lang-item:hover,
  .tn-lang-item:hover .lang-btn,
  .tn-lang-item:hover .tn-lang-label{
    filter: none !important;
  }

/* --- Block 17: id="tn-lang-globe-crisp" --- */
/* Language globe: keep same icon/style, but render sharper */
.tn-lang-item svg,
.lang-switcher svg,
.lang-btn svg,
.tn-mobile-actionbar svg{
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}
.tn-lang-item svg *,
.lang-switcher svg *,
.lang-btn svg *,
.tn-mobile-actionbar svg *{
  vector-effect: non-scaling-stroke;
}

/* --- Block 18: id="tn-lang-desktop-micro-align" --- */
@media (min-width: 1026px){
  html[lang="he"] .tn-lang-item{
    transform: translateY(1px);
  }
}

/* --- Block 19: id="tn-lang-hover-glow-match-nav" --- */
@media (min-width: 1026px){
  /* Match main nav text hover glow exactly */
  .tn-lang-item:hover,
  .tn-lang-item:hover .tn-lang-label,
  .tn-lang-item:hover .lang-btn,
  .tn-lang-item:hover .lang-btn i{
    text-shadow: 0 0 12px rgba(255,255,255,0.35);
    filter: none !important;
  }
}

/* --- Block 20: id="tn-lang-hover-glow-orange" --- */
@media (min-width: 1026px){
  /* Match main nav hover glow color (brand orange) */
  .tn-lang-item:hover,
  .tn-lang-item:hover .tn-lang-label,
  .tn-lang-item:hover .lang-btn,
  .tn-lang-item:hover .lang-btn i{
    text-shadow: 0 0 14px rgba(253,185,21,0.55);
    filter: none !important;
  }
}

/* --- Block 21: id="tn-lang-desktop-match-nav-exact" --- */
@media (min-width: 1026px){
  /* Make desktop language switcher look identical to header menu links (same box, font, hover) */
  .tn-lang-item{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0.25rem 0.5rem !important; /* px-2 py-1 */
    font: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important; /* same as header menu text */
    text-decoration: none !important;
    transition: all 0.2s ease !important; /* transition-all */
    transform: none !important; /* keep micro-align handled elsewhere if needed */
  }

  .tn-lang-item .tn-lang-label,
  .tn-lang-item .lang-btn,
  .tn-lang-item .lang-btn i{
    font: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
    filter: none !important;
    text-shadow: none !important;
  }

  /* Hover: exactly like the nav links (brand color only, no shadow) */
  .tn-lang-item:hover{
    color: #FDB915 !important; /* hover:text-brand */
    text-shadow: none !important;
  }
  .tn-lang-item:hover .tn-lang-label,
  .tn-lang-item:hover .lang-btn,
  .tn-lang-item:hover .lang-btn i{
    color: inherit !important;
    filter: none !important;
    text-shadow: none !important;
  }
}

/* --- Block 22: id="tn-lang-desktop-micro-down" --- */
@media (min-width: 1026px){
  .tn-lang-item{
    transform: translateY(1px) !important;
  }
}

/* --- Block 23: id="tn-lang-globe-size-crisp-fix" --- */
/* Force the new SVG globe to match the previous icon size exactly and render crisply */
.lang-btn svg{
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}
.lang-btn svg *{
  vector-effect: non-scaling-stroke;
}

/* --- Block 24: id="tn-lang-globe-mobile-upsize" --- */
/* Desktop stays as-is (22px). Slightly larger on mobile for clarity */
@media (max-width: 1023px){
  .lang-btn svg{
    width: 26px !important;
    height: 26px !important;
  }
}

/* --- Block 25: id="tn-lang-globe-mobile-upsize-28" --- */
/* Larger mobile globe for clear visual difference */
@media (max-width: 1023px){
  .lang-btn svg{
    width: 28px !important;
    height: 28px !important;
  }
}

/* --- Block 26: id="tn-lang-globe-mobile-upsize-30" --- */
/* Mobile globe size set to 30px for clear visibility */
@media (max-width: 1023px){
  .lang-btn svg{
    width: 30px !important;
    height: 30px !important;
  }
}

/* --- Block 27: id="tn-lang-globe-mobile30-fix" --- */
/* Force mobile language globe to 30px regardless of whether it is an inline SVG or a lucide-rendered SVG */
@media (max-width: 1023px){
  .tn-lang-item .lang-btn svg,
  .tn-lang-item .lang-btn i,
  .tn-lang-item .lang-btn .lucide{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
}

/* --- Block 28: id="tn-globe-size-mobile-realfix" --- */
/* Mobile: force BOTH header language globe + sticky-bar globe to 30px (lucide renders i->svg at runtime) */
@media (max-width: 1023px){
  i[data-lucide="globe"]{
    width: 30px !important;
    height: 30px !important;
  }
  svg.lucide-globe{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
}

/* --- Block 29: id="tn-globe-size-mobile-27" --- */
/* Mobile: fine-tuned globe size to 27px */
@media (max-width: 1023px){
  i[data-lucide="globe"]{
    width: 27px !important;
    height: 27px !important;
  }
  svg.lucide-globe{
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }
}

/* --- Block 30: id="tn-globe-mobile-25-center" --- */
/* Mobile: set globe to 25px and ensure it is centered inside its container */
@media (max-width: 1023px){
  /* size */
  i[data-lucide="globe"]{
    width: 25px !important;
    height: 25px !important;
  }
  svg.lucide-globe{
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
  }

  /* centering: make the clickable container a flex-center box */
  a:has(> i[data-lucide="globe"]),
  a:has(> svg.lucide-globe){
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* --- Block 31: id="tn-globe-mobile-24-center" --- */
/* Mobile: set globe to 26px and keep it perfectly centered */
@media (max-width: 1023px){
  i[data-lucide="globe"]{
    width: 26px !important;
    height: 26px !important;
  }
  svg.lucide-globe{
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  a:has(> i[data-lucide="globe"]),
  a:has(> svg.lucide-globe){
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* --- Block 32: id="tn-mobile-hero-gap-fix" --- */
@media (max-width: 1023px){
  section.hero,
  .hero,
  #hero{
    margin-bottom: 26px !important;
    padding-bottom: 26px !important;
  }

  section#about,
  section.about,
  #about{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* --- Block 33: id="tn-mobile-faq-match-testimonials-final-v2" --- */
/* Mobile only: FAQ questions match testimonials card text size & color.
   Answers are one step smaller. No bold anywhere. */
@media (max-width: 1023px){
  #faq *, section#faq *, .faq *{
    font-weight: 400 !important;
  }

  /* Questions */
  #faq button > span:first-child,
  section#faq button > span:first-child,
  .faq button > span:first-child{
    font-size: 1rem !important;
    color: inherit !important;
    line-height: 1.45 !important;
  }

  /* Answers */
  #faq div[x-show],
  #faq div[x-collapse],
  section#faq div[x-show],
  section#faq div[x-collapse]{
    font-size: 0.9rem !important;
    color: inherit !important;
    line-height: 1.55 !important;
  }

  #faq strong, #faq b,
  section#faq strong, section#faq b,
  .faq strong, .faq b{
    font-weight: 400 !important;
  }
}

/* --- Block 34: id="tn-mobile-faq-open-orange-fix" --- */
/* Mobile only:
   - Questions: normal weight (no bold)
   - When the item is open (the + span gets rotate-45), the question text turns brand orange */
@media (max-width: 1023px){
  /* Ensure normal weight for questions */
  #faq button > span:first-child,
  section#faq button > span:first-child,
  .faq button > span:first-child{
    font-weight: 400 !important;
  }

  /* Open state (Alpine adds rotate-45 to the + span) */
  #faq button:has(> span.rotate-45) > span:first-child,
  section#faq button:has(> span.rotate-45) > span:first-child,
  .faq button:has(> span.rotate-45) > span:first-child{
    color: #FDB915 !important;
  }
}

/* --- Block 35: id="tn-wow-upgrades" --- */
  /* WOW HERO VIDEO */
  .tn-hero-video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    transform: scale(1.03);
    filter: brightness(1.0) contrast(1.06) saturate(1.12);
  }
  .tn-hero-overlay{
    position:absolute; inset:0;
    background: radial-gradient(1200px 600px at 70% 20%, rgba(253,185,21,0.04), transparent 60%),
                radial-gradient(900px 500px at 20% 80%, rgba(59,130,246,0.04), transparent 62%),
                linear-gradient(to bottom, rgba(5,5,5,0.25), rgba(5,5,5,0.35));
    pointer-events:none;
  }
  .tn-hero-grid{ opacity: 0.25; }
  .tn-hero-grain{
    position:absolute; inset:0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: 0.12;
    pointer-events:none;
  }

  /* ORANGE COUNTERS */
  .tn-counter{
    color: #FDB915 !important;
    text-shadow: none !important;
  }

  /* Scroll cue */
  .tn-scroll-cue{
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    bottom: 18px;
    width: 30px;
    height: 48px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.18);
    backdrop-filter: blur(10px);
  }
  .tn-scroll-cue::after{
    content:"";
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    top: 10px;
    width: 6px; height: 6px;
    border-radius: 999px;
    background: rgba(253,185,21,0.9);
    box-shadow: 0 0 18px rgba(253,185,21,0.35);
    animation: tnScrollDot 1.7s ease-in-out infinite;
  }
  @keyframes tnScrollDot{
    0%{ transform: translateX(-50%) translateY(0); opacity: 0.25; }
    35%{ opacity: 1; }
    70%{ transform: translateX(-50%) translateY(18px); opacity: 0.25; }
    100%{ opacity: 0.25; }
  }
  @media (prefers-reduced-motion: reduce){
    .tn-hero-video{ transform:none; }
    .tn-scroll-cue::after{ animation:none; }
  }

/* CTA sheen (subtle) */
.btn-primary{ position: relative; overflow: hidden; }
.btn-primary::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22), transparent 70%);
  transform: translateX(-40%) rotate(8deg);
  opacity: 0;
  transition: opacity .25s ease;
}
.btn-primary:hover::after{
  opacity: 1;
  animation: tnSheen 1.15s ease forwards;
}
@keyframes tnSheen{
  0%{ transform: translateX(-40%) rotate(8deg); }
  100%{ transform: translateX(60%) rotate(8deg); }
}

/* TN Sheen Effect - New shine animation on buttons */
.tn-sheen{ position:relative; overflow:hidden; }
.tn-sheen::after{
  content:""; position:absolute; inset:-120% -60%;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);
  transform: translateX(-60%) rotate(12deg);
  opacity: 0;
  transition: transform .55s ease, opacity .25s ease;
  pointer-events:none;
}
.tn-sheen:hover::after{
  opacity: .9;
  transform: translateX(70%) rotate(12deg);
}




  /* Process section: more visual, less "dry" */
  #process .tn-process-card{
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
  }
  #process .tn-process-card:hover{
    transform: translateY(-3px);
    border-color: rgba(253,185,21,0.28);
    background: rgba(253,185,21,0.04);
  }
  #process .tn-process-card::before{
    content:"";
    position:absolute;
    top:14px;
    bottom:14px;
    width:4px;
    border-radius:999px;
    background: linear-gradient(to bottom, rgba(253,185,21,0.0), rgba(253,185,21,0.85), rgba(253,185,21,0.0));
    opacity:0.9;
  }
  html[dir="ltr"] #process .tn-process-card::before{ right:14px; left:auto; }
  html[dir="ltr"] #process .tn-process-card::before{ left:14px; right:auto; }

  #process .tn-step-num{
    background: rgba(253,185,21,0.10) !important;
    border-color: rgba(253,185,21,0.35) !important;
    color: #FDB915 !important;
    box-shadow: none !important;
  }

  /* Footer contact alignment */
  .tn-footcontact{
    justify-content: flex-start !important;
  }
  html[dir="ltr"] .tn-footcontact{
    justify-content: flex-end !important;
    flex-direction: row-reverse;
    text-align: right;
  }


/* --- Block 36: id="tn-wow-2" --- */
  /* WOW2: premium chips */
  .tn-chip{
    display:inline-flex; align-items:center; gap:10px;
    padding: 10px 14px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.88);
    backdrop-filter: blur(14px);
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
    font-weight: 700;
    font-size: 0.95rem;
  }
  .tn-chip i{ color: #FDB915; }
  .tn-chip:hover{
    transform: translateY(-1px);
    border-color: rgba(253,185,21,0.45);
    background: rgba(253,185,21,0.08);
    box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 18px rgba(253,185,21,0.16);
  }

  /* WOW2: stat numbers in brand orange (no glow) */
  .tn-stat-num{ position:relative; display:inline-block; padding-bottom:6px; }
  .tn-stat-num::after{
    content:"";
    position:absolute;
    left:0; right:0;
    bottom:0;
    height:2px;
    border-radius:999px;
    background: linear-gradient(90deg, transparent, rgba(253,185,21,0.95), transparent);
    opacity:0.9;
  }
  .tn-stat-num .tn-counter{ color:#FDB915; text-shadow:none !important; }

  

/* HERO stats: tighter + no separators */
.tn-stats-inline{ gap:18px !important; }
@media (min-width: 768px){ .tn-stats-inline{ gap:26px !important; } }
.tn-stats-inline .tn-stat-sep, .tn-stats-inline .tn-sep, .tn-stats-inline .tn-divider{ display:none !important; }
.tn-stat-inline{ padding:0 !important; border:none !important; background:transparent !important; }
.tn-counter{ font-size:clamp(22px, 2.4vw, 34px) !important; font-weight:900 !important; }

/* WOW2: hero parallax highlight */
  #top{ --hx:70%; --hy:20%; }
  #top .tn-hero-overlay{
    background: radial-gradient(900px 520px at var(--hx) var(--hy), rgba(253,185,21,0.15), transparent 60%),
                radial-gradient(900px 520px at calc(100% - var(--hx)) calc(100% - var(--hy)), rgba(59,130,246,0.12), transparent 62%),
                linear-gradient(to bottom, rgba(5,5,5,0.10), rgba(5,5,5,0.45));
  }

  /* WOW2: CTA sheen */
  .tn-sheen{ position:relative; overflow:hidden; }
  .tn-sheen::after{
    content:""; position:absolute; inset:-120% -60%;
    background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);
    transform: translateX(-60%) rotate(12deg);
    opacity: 0;
    transition: transform .55s ease, opacity .25s ease;
    pointer-events:none;
  }
  .tn-sheen:hover::after{
    opacity: .9;
    transform: translateX(70%) rotate(12deg);
  }

  /* Mobile: keep chips readable */
  @media (max-width: 480px){
    .tn-chip{ font-size: 0.9rem; padding: 9px 12px; }
  }

/* --- Block 37: id="tn-modern-tweaks" --- */
  /* Hero rotating line */
  #tn-hero-rotate { display: inline-block; min-width: 10ch; transition: opacity .45s ease-in-out; will-change: opacity; }
  .tn-caret { animation: tnCaretBlink 1s steps(2,end) infinite; }
  @keyframes tnCaretBlink { 0%, 49% { opacity: 0.1; } 50%, 100% { opacity: 0.75; } }

  /* Subtle hover polish */
  .card { border-radius: 26px; }
  .card:hover { transform: translateY(-4px); }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .tn-caret{ animation: none !important; }
  }

/* --- Block 38: id="tn-stats-layout-fix" --- */
/* Metrics section layout: centered, even spacing (matches NEW design) */
#stats .tn-stats-inline{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  text-align:center;
  gap: clamp(36px, 6vw, 90px) !important;
}
#stats .tn-stat-inline{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width: 140px;
}
#stats .tn-stat-inline-value{
  font-weight: 900;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1;
  color:#FDB915;
}
#stats .tn-stat-inline-label{
  margin-top: 10px;
  font-size: 14px;
  color: rgba(229,231,235,0.78);
}

/* --- Block 39: id="tn-solutions-icon-scale" --- */
/* Solutions icons sizing (HE+EN sync) */
#solutions .tn-emojiicon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* Card-level solution icons (keep as agreed) */
#solutions .card .tn-emojiicon{
  font-size: 22px;
}

/* Category icon styling - Soft Shadow */
#solutions .group-wrapper > .flex > div.rounded-full {
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

#solutions .group-wrapper > .flex > div.rounded-full:hover {
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* --- Block 40 --- */
/* Category header icon container sizing removed - using inline Tailwind classes instead */

/* --- Block 41 --- */
/* Support category SVG icon (kept as-is) */
.tn-support-svg{width:30px;height:30px;display:block}

@media (max-width: 767px) {
  /* HERO: reduce spacing after "מתמחים ב:" */
  .hero-specialties {
    margin-bottom: 10px !important;
  }

  /* Increase spacing between metrics and About section */
  .tn-metrics {
    margin-bottom: 28px !important;
  }
}


@media (max-width: 767px) {
  /* HERO: tighten spacing between 'מתמחים ב:' and next line */
  .hero-specialties {
    margin-bottom: 6px !important;
  }

  /* Metrics -> About: add clearer separation after numbers block */
  .tn-metrics {
    margin-bottom: 40px !important;
  }
}


/* --- Block 42: id="tn-mobile-spacing-v4" --- */
@media (max-width: 767px){
  /* Extra separation between stats (metrics) and the next section */
  #stats{ padding-bottom: 86px !important; }
}

/* --- Block 43: id="tn-mobile-spacing-v5" --- */
@media (max-width: 767px){
  /* HERO: force tighter spacing between 'מתמחים ב:' and rotating line */
  .tn-hero-rotwrap{ margin-top: 6px !important; }

  /* Metrics -> About: very clear separation */
  #stats{ padding-bottom: 120px !important; }
}

/* --- Block 44: id="tn-contact-icons-white" --- */
  /* Contact row: force icons to white */
  .tn-contact-ico { color: #ffffff !important; }

/* --- Block 45: id="tn-contact-orange-icons" --- */
/* Contact buttons under the form – large with visible text */
.tn-contact-link{
  padding: 12px 26px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 50px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  font-weight: 600 !important;
}
.tn-contact-link:hover{
  background: rgba(255,255,255,0.10) !important;
  border-color: #FDB915 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(253,185,21,0.15) !important;
}
/* Show the text */
.tn-contact-link span{
  display: inline !important;
  color: #fff !important;
  font-size: 0.95rem !important;
}
/* Icon color (Lucide) */
.tn-contact-ico{
  
  
  color: #FDB915 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.tn-contact-ico svg{
  
  
  stroke: currentColor !important;
  fill: none !important;
}


/* --- Mobile hamburger menu text slightly smaller --- */
@media (max-width: 1023px){
  .lg\:hidden [x-show] span.font-bold.text-lg{
    font-size: 1rem !important; /* was ~1.125rem */
  }
}


/* --- Mobile header: scale avatar + center title + hamburger by 20% (keep exact positions) --- */
@media (max-width: 1023px){
  .tn-mobile-header-scale{
    transform: scale(1.368);
    transform-origin: center;
    will-change: transform;
  }
}


/* --- Mobile header: center title text +15% only (keep exact position & baseline) --- */
@media (max-width: 1023px){
  .tn-mobile-header-title-scale{
    transform: scale(1.52);
    transform-origin: center;
    will-change: transform;
  }
}


/* --- Contact spacing fine-tune: match gap to services subtitle->title --- */
#contact .text-center.mb-16{
  margin-bottom: 3rem !important;
}


/* --- Mobile ONLY: center header text +15% --- */
@media (max-width: 1023px){
  .tn-mobile-header-title-scale{
    transform: scale(1.52);
    transform-origin: center;
  }
}


/* --- Mobile ONLY: REAL font-size increase for center header text (+20%) --- */
@media (max-width: 1023px){
  .tn-mobile-header-title-text{
    font-size: 1.2em !important;
    line-height: 1.15 !important;
  }
}


/* --- Mobile ONLY: force real font-size bump for center header title/subtitle (+~20%) --- */
@media (max-width: 1023px){
  .tn-mobile-header-title-scale .text-\[28px\]{
    font-size: 34px !important; /* 28px * 1.2 */
  }
  .tn-mobile-header-title-scale .text-\[12px\]{
    font-size: 14px !important; /* 12px * 1.2 */
  }
}


/* --- Mobile ONLY: nudge center header text up to align with avatar --- */
@media (max-width: 1023px){
  .tn-mobile-header-title-scale{
    top: 13px !important; /* raised a few pixels from previous 17px */
  }
}



/* --- Popup/Cookie/Modal readability & positioning tweaks (no visual redesign elsewhere) --- */
.tn-modal-backdrop { overflow-y: auto; }
.tn-modal { max-height: calc(100vh - 90px); margin: auto; }
@media (max-height: 700px) {
  .tn-modal { max-height: calc(100vh - 40px); }
}
.tn-slide-in-right { animation: tnSlideInRight 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes tnSlideInRight {
  from { opacity: 0; transform: translate(18px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}


/* Mobile: keep entrance direction (left/right) but end perfectly centered */
@media (max-width: 768px) {
  #promoModal{
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    width: min(92vw, 420px) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    /* ensure we control the final transform */
    transform: translate(-50%, -50%) !important;
  }

  #promoModal.tn-slide-in-right{
    animation: tnPromoMobileInRight 0.55s ease-out forwards !important;
  }
  #promoModal.tn-slide-in-left{
    animation: tnPromoMobileInLeft 0.55s ease-out forwards !important;
  }
}

@keyframes tnPromoMobileInRight{
  from { opacity: 0; transform: translate(60vw, -50%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes tnPromoMobileInLeft{
  from { opacity: 0; transform: translate(-160vw, -50%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}



/* =======================================
   TN PATCH Release 10 (Mobile typography + read-more consistency + slightly lighter base)
   Safe: mobile-only overrides + base background tweak
======================================= */

/* Slightly lighter base (keeps original design) */
body { background:#111111; }

/* Mobile typography harmony */
@media (max-width: 768px) {
  /* Section titles (e.g., Solutions / FAQ / Contact) */
  .text-center.mb-16.reveal > h2,
  #clients .text-center.reveal > h2,
  #faq .text-center.reveal > h2 {

    font-size: 26px !important;
    line-height: 2rem !important;
    font-weight: 900 !important;
  }
  /* Normalize section-title block spacing so Clients/FAQ match Contact on mobile */
  #clients .text-center.reveal,
  #faq .text-center.reveal {
    margin-bottom: 4rem !important; /* matches mb-16 */
  }


  /* Section subtitles / lead paragraphs */
  .text-center.mb-16.reveal > p,
  .text-center.mb-16.reveal p {
    font-size: 17px !important;
    line-height: 1.65 !important;
  }

  /* Generic readable text scale on mobile */
  p, li, a, button, input, textarea, label {
    font-size: 17px;
    line-height: 1.65;
  }

  /* Sub-headings within sections/cards */
  h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  /* Smaller supporting text (keeps hierarchy) */
  .text-sm, .tn-small, small {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }


  /* FAQ answers – match Read-more (Solutions) text on mobile */
  /* More specific than .text-sm overrides */
  #faq [x-collapse],
  #faq [x-show],
  #faq [x-collapse].text-sm,
  #faq [x-show].text-sm {
    font-size: 17px !important;
    line-height: 1.75 !important;
  }

  /* Read-more / expanded content – force single font size (use the larger one) */
  .solution-detail-text,
  .tn-modal-body,
  .tn-modal-body p,
  .tn-modal-body li,
  .modal-body,
  #faq .accordion-content,
  #faq .accordion-content p,
  #faq .accordion-content li {
    font-size: 17px !important;
    line-height: 1.75 !important;
  }

  /* HERO main title (H1) – mobile only */
  #top h1 {
    font-size: 46px !important;
  }
}

/* Desktop section heading spacing consistency */
@media (min-width: 769px) {
  /* Ensure section heading blocks keep the same rhythm across the page */
  .text-center.mb-16.reveal,
  #clients .text-center.reveal,
  #faq .text-center.reveal,
  #contact .text-center.reveal,
  #metrics .text-center.reveal,
  #solutions .text-center.reveal {
    margin-bottom: 4rem !important;
  }
}




}


@media (max-width: 768px) {
  .confidence-metric-number,
  #metrics .counter,
  #metrics .number {
    font-size: 2.9rem;
    line-height: 1.2;
  }
}


@media (max-width: 768px) {
  /* FAQ questions – match answers (mobile) */
  #faq button span.text-sm {
    font-size: 17px !important;
    line-height: 1.75 !important;
  }
}


/* removed */
@media (max-width: 767px) {
  .tn-mobile-actionbar{
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    padding: 6px 10px !important;
  }
  .tn-mobile-actionbar .tn-cta-call,
  .tn-mobile-actionbar .tn-cta-wa{
    height: 44px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    
  }
  .tn-mobile-actionbar .tn-cta-call svg,
  .tn-mobile-actionbar .tn-cta-wa svg{
    
    
  }
}



/* Mobile: adjust sticky bar position and button size ONLY (no visual redesign) */
@media (max-width: 767px) {
  .tn-mobile-actionbar{
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  .tn-mobile-actionbar .tn-cta-call,
  .tn-mobile-actionbar .tn-cta-wa{
    height: 44px !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
  }
}



/* Mobile: further slight reduction of sticky CTA buttons (size only) */
@media (max-width: 767px) {
  .tn-mobile-actionbar{
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  }
  .tn-mobile-actionbar .tn-cta-call,
  .tn-mobile-actionbar .tn-cta-wa{
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
  }
}



/* Mobile: hide subtitle/description text under main section headings */
@media (max-width: 768px) {
  /* Subtitles placed under section headings (common pattern in this site) */
  .text-center.mb-16 p.text-gray-400,
  .text-center.mb-8 p.text-gray-400,
  .text-center.mb-16 p.text-gray-400.max-w-2xl,
  .text-center.mb-8 p.text-gray-400.max-w-2xl,
  p.tn-mobile-hide-tagline {
    display: none !important;
  }
}



/* Mobile: lower sticky bar slightly (closer to bottom) */
@media (max-width: 767px) {
  .tn-mobile-actionbar{
    bottom: calc(0px + env(safe-area-inset-bottom)) !important;
  }
}

/* Mobile: Confidence Metrics numbers – match EN sizing */
@media (max-width: 768px) {
  #stats .tn-stat-inline-value{
    font-size: clamp(34px, 3.2vw, 46px) !important;
    line-height: 1.05 !important;
  }
}



/* Mobile: fix Hebrew stats numbers (remove smaller tn-counter sizing inside #stats) */
@media (max-width: 768px) {
  #stats .tn-counter{
    font-size: inherit !important;
    line-height: inherit !important;
  }
}



/* --- Global brightness lift (subtle) --- */
body{
  background: #151515 !important; /* was ~#111 */
}

/* Cards / surfaces */
.card{
  background: #1c1c1c !important; /* was #161616 */
  border-color: rgba(255,255,255,.10) !important;
}

/* Read more / modals / popups */
.tn-modal-backdrop{
  background: rgba(0,0,0,.65) !important; /* less dark overlay */
}
.tn-modal{
  background: linear-gradient(145deg, #1a1a1a 0%, #121212 100%) !important; /* lighter than before */
  border-color: rgba(255,255,255,.12) !important;  box-shadow: 0 25px 50px -12px rgba(0,0,0,.92), 0 0 0 1px rgba(253,185,21,.12), 0 0 60px rgba(253,185,21,.18), 0 0 140px rgba(253,185,21,.08) !important;
}


/* Cookie banner */
#cookieConsent{
  background: #1a1a1a !important; /* was bg-[#121212] */
  border-color: rgba(255,255,255,.20) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.65) !important;
}



/* Mobile: ensure "Read more" / modal text aligns by language */
@media (max-width: 768px) {
  /* Hebrew (RTL) */
  html[lang="he"] .tn-modal,
  html[lang="he"] .tn-modal *,
  body[dir="rtl"] .tn-modal,
  body[dir="rtl"] .tn-modal *,
  body.rtl .tn-modal,
  body.rtl .tn-modal * {
    direction: rtl !important;
    text-align: right !important;
  }

  /* English (LTR) */
  html[lang="en"] .tn-modal,
  html[lang="en"] .tn-modal *,
  body[dir="ltr"] .tn-modal,
  body[dir="ltr"] .tn-modal * {
    direction: ltr !important;
    text-align: left !important;
  }

  /* Prevent awkward full-justify gaps in small screens */
  .tn-modal p{
    text-align: inherit !important;
    text-justify: auto !important;
  }
}



/* Mobile: keep CTA buttons centered inside modals */
@media (max-width: 768px) {
  .tn-modal .modal-actions,
  .tn-modal .actions,
  .tn-modal .cta,
  .tn-modal .button-group,
  .tn-modal .contact-actions,
  .tn-modal .modal-footer {
    justify-content: center !important;
    text-align: center !important;
  }

  .tn-modal .modal-actions a,
  .tn-modal .actions a,
  .tn-modal .cta a,
  .tn-modal .button-group a,
  .tn-modal .contact-actions a,
  .tn-modal .modal-footer a {
    margin-left: 6px;
    margin-right: 6px;
  }
}



/* Mobile: center the "Read more" modal CTA button */
@media (max-width: 768px) {
  .tn-modal .modal-cta{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  .tn-modal .modal-cta-btn{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



/* Mobile: center modal headings in "Read more" */
@media (max-width: 768px) {
  .tn-modal h1,
  .tn-modal h2,
  .tn-modal h3,
  .tn-modal .modal-title {
    text-align: center !important;
  }
}



/* Mobile: truly center modal header titles (account for close button) */
@media (max-width: 768px) {
  .tn-modal .modal-header,
  .tn-modal .tn-modal-header,
  .tn-modal .modal-top {
    position: relative !important;
    text-align: center !important;
  }

  .tn-modal .modal-header .close-modal,
  .tn-modal .tn-modal-header .close-modal,
  .tn-modal .modal-top .close-modal,
  .tn-modal .modal-header .modal-close,
  .tn-modal .tn-modal-header .modal-close,
  .tn-modal .modal-top .modal-close,
  .tn-modal .modal-header button[aria-label*="close" i],
  .tn-modal .tn-modal-header button[aria-label*="close" i]{
    position: absolute !important;
    left: 12px !important;
    top: 12px !important;
    transform: none !important;
  }

  .tn-modal .modal-header h1,
  .tn-modal .modal-header h2,
  .tn-modal .modal-header h3,
  .tn-modal .tn-modal-header h1,
  .tn-modal .tn-modal-header h2,
  .tn-modal .tn-modal-header h3,
  .tn-modal .modal-top h1,
  .tn-modal .modal-top h2,
  .tn-modal .modal-top h3{
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    width: 100% !important;
  }
}



/* Mobile: force true visual centering of modal titles (independent of close button) */
@media (max-width: 768px) {
  .tn-modal .modal-header,
  .tn-modal .tn-modal-header {
    display: block !important;
  }

  .tn-modal .modal-header h1,
  .tn-modal .modal-header h2,
  .tn-modal .modal-header h3,
  .tn-modal .tn-modal-header h1,
  .tn-modal .tn-modal-header h2,
  .tn-modal .tn-modal-header h3 {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    width: max-content !important;
    max-width: 90% !important;
    margin: 0 auto !important;
  }
}



/* Mobile: keep modal header title centered; apply language alignment only to modal body */
@media (max-width: 768px) {
  .tn-modal-header { text-align: center !important; justify-content: center !important; }
  .tn-modal-title { text-align: center !important; }

  /* Hebrew body text */
  html[lang="he"] .tn-modal-body,
  html[lang="he"] .tn-modal-body *,
  body[dir="rtl"] .tn-modal-body,
  body[dir="rtl"] .tn-modal-body *,
  body.rtl .tn-modal-body,
  body.rtl .tn-modal-body * {
    direction: rtl !important;
    text-align: right !important;
  }

  /* English body text */
  html[lang="en"] .tn-modal-body,
  html[lang="en"] .tn-modal-body *,
  body[dir="ltr"] .tn-modal-body,
  body[dir="ltr"] .tn-modal-body * {
    direction: ltr !important;
    text-align: left !important;
  }

  /* prevent full-justify gaps */
  .tn-modal-body p { text-align: inherit !important; text-justify: auto !important; }
}



/* Mobile: true visual centering for modal title/subtitle */
@media (max-width: 768px) {
  .tn-modal-header{
    padding-left: 72px !important;   /* reserve space for close button */
    padding-right: 72px !important;  /* keep symmetric so center is real */
  }
  .tn-modal-header > div{
    width: 100% !important;
    text-align: center !important;
  }
  .tn-modal-title,
  #tnModalTitle,
  #tnModalSubtitle{
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .tn-modal-close{
    left: 16px !important;
    top: 16px !important;
  }
}



/* Mobile: add breathing room for modal titles to avoid awkward line breaks */
@media (max-width: 768px) {
  .tn-modal-header{
    padding-left: 88px !important;
    padding-right: 88px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .tn-modal-title,
  #tnModalTitle{
    line-height: 1.25 !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  #tnModalSubtitle{
    margin-top: 6px !important;
    line-height: 1.3 !important;
  }
}



/* Mobile: slightly reduce modal header font sizes to prevent crowding */
@media (max-width: 768px) {
  .tn-modal-title,
  #tnModalTitle {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  #tnModalSubtitle {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
}



/* Mobile: slightly increase modal headings and widen usable text area */
@media (max-width: 768px) {
  .tn-modal-header{
    padding-left: 72px !important;
    padding-right: 72px !important;
  }

  .tn-modal-title,
  #tnModalTitle{
    font-size: 1.7rem !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
  }

  #tnModalSubtitle{
    font-size: 0.9rem !important;
    max-width: 100% !important;
  }
}



/* Mobile: maximize usable width for modal titles */
@media (max-width: 768px) {
  .tn-modal-header{
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  .tn-modal-title,
  #tnModalTitle{
    max-width: 100% !important;
  }

  #tnModalSubtitle{
    max-width: 100% !important;
  }
}



/* Mobile: adjust modal main title and subtitle sizes */
@media (max-width: 768px) {
  /* Main (white) title */
  .tn-modal-title,
  #tnModalTitle{
    font-size: calc(1.7rem - 8px) !important;
  }

  /* Subtitle (orange) */
  #tnModalSubtitle{
    font-size: calc(0.9rem + 2px) !important;
  }
}



/* Mobile: fine-tune modal title hierarchy */
@media (max-width: 768px) {
  /* Main (white) title: +4px */
  .tn-modal-title,
  #tnModalTitle{
    font-size: calc(1.7rem - 8px + 4px) !important;
  }

  /* Subtitle (orange): -1px */
  #tnModalSubtitle{
    font-size: calc(0.9rem + 2px - 1px) !important;
  }
}



.tn-modal[data-modal="cyber"] .tn-modal-title::after { content: "Advanced Cybersecurity"; }
  .tn-modal[data-modal="backup"] .tn-modal-title::after { content: "Cloud Backup & DR"; }
  .tn-modal[data-modal="support"] .tn-modal-title::after { content: "Ongoing IT Support"; }
  .tn-modal[data-modal="accessibility"] .tn-modal-title::after { content: "Accessibility & Compliance"; }
  .tn-modal[data-modal="terms"] .tn-modal-title::after { content: "Terms & Disclaimer"; }

  /* Hebrew */
  html[lang="he"] .tn-modal[data-modal="infrastructure"] .tn-modal-title::after { content: "תשתיות מאובטחות"; }
  html[lang="he"] .tn-modal[data-modal="cyber"] .tn-modal-title::after { content: "אבטחת מידע מתקדמת"; }
  html[lang="he"] .tn-modal[data-modal="backup"] .tn-modal-title::after { content: "גיבוי בענן"; }
  html[lang="he"] .tn-modal[data-modal="support"] .tn-modal-title::after { content: "תמיכה וניהול IT"; }
  html[lang="he"] .tn-modal[data-modal="accessibility"] .tn-modal-title::after { content: "נגישות ורגולציה"; }
  html[lang="he"] .tn-modal[data-modal="terms"] .tn-modal-title::after { content: "תנאי שימוש"; }

  /* hide original text visually */
  }

/* STRONG_MODAL_GLOW */
.tn-modal-backdrop.is-open .tn-modal{
  /* keep existing shadow depth + add strong orange halo */
  box-shadow:
    0 25px 50px -12px rgba(0,0,0,.92),
    0 0 0 1px rgba(253,185,21,.22),
    0 0 35px rgba(253,185,21,.28),
    0 0 120px rgba(253,185,21,.16),
    0 0 220px rgba(253,185,21,.10) !important;
  /* drop-shadow is not clipped and gives the “light aura” effect */
  filter:
    drop-shadow(0 0 22px rgba(253,185,21,.22))
    drop-shadow(0 0 80px rgba(253,185,21,.16))
    drop-shadow(0 0 160px rgba(253,185,21,.10)) !important;
}

/* === Mobile hamburger: thinner lines === */
@media (max-width: 768px){
  .hamburger span,
  .menu-toggle span,
  .nav-toggle span{
    height: 2px !important;
  }
}


/* === FORCE: Mobile hamburger thinner lines (override existing rules) === */
@media (max-width: 768px){
  header .menu-toggle span,
  header .hamburger span,
  header .nav-toggle span{
    height: 1.5px !important;
    border-radius: 1px !important;
  }
}


/* === Mobile header hamburger: thinner lucide lines === */
@media (max-width: 1023px){
  button[aria-label="פתח תפריט"] svg,
  button[aria-label="Open menu"] svg,
  button[aria-label*="menu"] svg{
    stroke-width: 1.5 !important;
  }
}




}








/* === Mobile menu language item alignment (Hebrew) === */
@media (max-width: 1023px){
  /* Override the global globe-link centering rule: a:has(> i[data-lucide="globe"]) */
  a.tn-mobile-lang,
  a.tn-mobile-lang:has(> i[data-lucide="globe"]),
  a.tn-mobile-lang:has(> svg.lucide-globe){
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    direction: rtl !important;
    justify-content: flex-start !important; /* RTL: start = right */
    text-align: right !important;
    align-items: center !important;
    gap: 16px !important;
  }
}


/* === Mobile menu: normalize language icon size to match other menu icons === */
@media (max-width: 1023px){
  a.tn-mobile-lang i[data-lucide],
  a.tn-mobile-lang svg.lucide{
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
}





/* === Mobile menu divider (text width, RTL) === */
@media (max-width: 1023px){
  .tn-mobile-divider{
    width: fit-content;
    min-width: 140px; /* approx longest menu label */
    height: 1px;
    background: rgba(255,255,255,0.35);
    margin: 8px 0 8px auto;
  }
}


/* === Mobile: enlarge Legal modals titles (Accessibility / Terms / Privacy) === */
@media (max-width: 1023px){
  /* white main title */
  .tn-modal h2,
  .tn-modal .modal-title{
    font-size: calc(100% + 2px);
  }

  /* orange subtitle */
  .tn-modal .subtitle,
  .tn-modal .modal-subtitle,
  .tn-modal h3{
    font-size: calc(100% + 2px);
  }
}


/* === Accessibility panel: statement link === */
.acc-accessibility-footer{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center;
}
.acc-accessibility-link{
  color: #FDB915;
  font-size: 14px;
  text-decoration: underline;
}
.acc-accessibility-link:hover{
  opacity: 0.85;
}


/* === Accessibility panel title centered === */
.acc-panel h3,
.acc-panel .acc-title{
  text-align: center !important;
}