/* =========================================================
   Charisma Mobile Luxury Responsive Layer
   هدف: مرتب‌سازی و لوکس‌سازی موبایل بدون تغییر منطق سایت
   ========================================================= */

html{overflow-x:hidden;-webkit-text-size-adjust:100%;}
body{overflow-x:hidden;}
img,svg,video,canvas{max-width:100%;height:auto;}
button,input,select,textarea{font-family:inherit;}

@media (max-width: 980px){
  :root{--container:min(1200px,calc(100% - 32px));}
  .container,
  .site-header .container,
  .cta-section .container,
  .site-footer .container,
  .charisma-footer .container{
    width:min(100% - 32px, 1120px) !important;
  }

  .site-header{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    z-index:90 !important;
    padding:10px 0 !important;
    background:linear-gradient(135deg,rgba(5,8,22,.98),rgba(12,20,42,.96)) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 18px 50px rgba(4,8,22,.24) !important;
    backdrop-filter:blur(18px) !important;
  }

  .header-row{
    min-height:auto !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:12px !important;
  }

  .brand{justify-self:start !important;gap:9px !important;min-width:0 !important;}
  .brand img{width:38px !important;height:38px !important;flex:0 0 auto !important;}
  .brand-copy strong{font-size:1.25rem !important;line-height:1.15 !important;white-space:nowrap !important;}
  .brand-copy span{font-size:.72rem !important;line-height:1.2 !important;white-space:nowrap !important;}

  .menu-toggle{
    display:inline-grid !important;
    place-items:center !important;
    justify-self:end !important;
    width:44px !important;
    height:44px !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.18) !important;
    background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04)) !important;
    color:#fff !important;
    box-shadow:0 12px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .main-nav{
    position:absolute !important;
    top:calc(100% + 10px) !important;
    left:16px !important;
    right:16px !important;
    display:none !important;
    width:auto !important;
    max-height:calc(100vh - 110px) !important;
    overflow:auto !important;
    grid-column:1 / -1 !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:8px !important;
    padding:12px !important;
    border-radius:24px !important;
    background:linear-gradient(145deg,rgba(7,11,25,.98),rgba(12,20,42,.98)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 26px 80px rgba(0,0,0,.38) !important;
    backdrop-filter:blur(22px) !important;
  }

  .main-nav.is-open{display:flex !important;}
  .main-nav a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:48px !important;
    padding:12px 14px !important;
    border-radius:16px !important;
    color:rgba(255,255,255,.88) !important;
    background:rgba(255,255,255,.045) !important;
    border:1px solid rgba(255,255,255,.06) !important;
    font-weight:900 !important;
    line-height:1.5 !important;
  }
  .main-nav a::after{display:none !important;}
  .main-nav a[aria-current="page"],
  .main-nav a:hover{
    color:#fff !important;
    background:linear-gradient(135deg,rgba(124,58,237,.34),rgba(6,182,212,.18)) !important;
    border-color:rgba(255,255,255,.14) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) !important;
  }

  .header-auth-actions,
  .header-actions{
    display:none !important;
  }

  .hero-shell{
    min-height:auto !important;
    overflow:hidden !important;
    background:#f6f7fb !important;
  }
  .hero-shell::after{display:none !important;}
  .hero-shell::before{
    height:540px !important;
    border-bottom-left-radius:30px !important;
    border-bottom-right-radius:30px !important;
    background:
      radial-gradient(circle at 16% 15%,rgba(124,58,237,.28),transparent 34%),
      radial-gradient(circle at 86% 18%,rgba(6,182,212,.18),transparent 32%),
      linear-gradient(180deg,rgba(5,8,22,.97),rgba(8,13,31,.92)) !important;
  }

  .hero-section{
    display:block !important;
    direction:rtl !important;
    min-height:auto !important;
    padding:36px 0 28px !important;
  }
  .hero-copy{
    max-width:100% !important;
    padding:0 !important;
    margin:0 auto !important;
    text-align:center !important;
  }
  .hero-copy h1{
    margin:0 auto 14px !important;
    font-size:clamp(1.82rem,8vw,2.6rem) !important;
    line-height:1.35 !important;
    letter-spacing:-.4px !important;
    white-space:normal !important;
  }
  .hero-copy h1 span{white-space:normal !important;}
  .hero-copy p{
    max-width:680px !important;
    margin:0 auto 18px !important;
    font-size:.94rem !important;
    line-height:2 !important;
    color:rgba(226,232,240,.84) !important;
  }
  .hero-actions{
    width:100% !important;
    justify-content:center !important;
    direction:rtl !important;
    gap:10px !important;
  }
  .hero-actions .btn,
  .btn{
    min-height:46px !important;
    padding:12px 18px !important;
    border-radius:16px !important;
    white-space:normal !important;
    text-align:center !important;
  }

  .hero-trust{
    width:100% !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:10px !important;
    padding:14px !important;
    margin:18px auto 0 !important;
    border-radius:24px !important;
    background:rgba(255,255,255,.075) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    backdrop-filter:blur(14px) !important;
  }
  .hero-trust__text{text-align:center !important;align-items:center !important;}

  .feature-strip-wrap{margin-top:0 !important;padding:18px 0 !important;background:#f6f7fb !important;}
  .feature-strip{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    padding:12px !important;
    border-radius:26px !important;
    box-shadow:0 20px 55px rgba(15,23,42,.10) !important;
  }
  .mini-feature{
    border:0 !important;
    border-radius:20px !important;
    background:linear-gradient(180deg,#fff,#f8fbff) !important;
    padding:16px 12px !important;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.06) !important;
  }

  .section-head--split,
  .products-list-head,
  .purchase-path-head,
  .footer-bottom,
  .footer-row,
  .cta-card,
  .panel-head,
  .dashboard-title{
    flex-direction:column !important;
    align-items:stretch !important;
    text-align:center !important;
  }
  .section-head h2,
  .products-list-head h2,
  .section-title h2,
  .buy-main h2{
    font-size:clamp(1.55rem,6vw,2.1rem) !important;
    line-height:1.45 !important;
  }

  .product-grid,
  .products-redesign-grid,
  .benefits-grid,
  .stats-grid,
  .purchase-steps,
  .testimonial-rotator,
  .footer-main,
  .quick-cards,
  .feature-grid,
  .edition-grid,
  .buy-box,
  .buy-points,
  .gallery-grid,
  .card-grid,
  .content-layout,
  .hero-content,
  .hero-grid{
    grid-template-columns:1fr !important;
  }

  .product-card,
  .product-page-card{
    min-height:360px !important;
    border-radius:26px !important;
  }
  .product-page-card__body{padding-top:92px !important;}
  .product-page-card__actions,
  .edition-actions,
  .buy-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
  }
  .product-action,
  .edition-actions .btn,
  .buy-actions .btn{
    width:100% !important;
    min-height:46px !important;
    border-radius:16px !important;
  }

  .products-list-head.products-list-head--with-search{
    padding:16px !important;
    border-radius:24px !important;
  }
  .products-head-tools{
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-content:stretch !important;
  }
  .products-inline-search,
  .products-search-box,
  .search-box{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    border-radius:22px !important;
    gap:8px !important;
  }
  .products-inline-search input,
  .products-search-box input,
  .search-box input{
    min-height:46px !important;
    text-align:right !important;
  }
  .products-inline-search button,
  .products-search-box button,
  .search-box button{
    width:100% !important;
    min-height:46px !important;
  }

  .price-start-card,
  .price-start-card.price-start-card--premium,
  .purchase-path-card,
  .why-card,
  .cta-card,
  .clean-card,
  .page-hero,
  .marketing-panel,
  .buy-box,
  .edition-card,
  .support-card,
  .demo-card{
    border-radius:24px !important;
    padding:18px !important;
  }

  .footer-main{gap:16px !important;}
  .footer-brand-card,
  .footer-trust-box{grid-column:auto !important;}
  .footer-bottom{gap:10px !important;align-items:center !important;}
  .footer-bottom-links,
  .footer-links{justify-content:center !important;}
}

@media (max-width: 640px){
  :root{--container:min(1200px,calc(100% - 24px));}
  .container,
  .site-header .container,
  .cta-section .container,
  .site-footer .container,
  .charisma-footer .container{
    width:min(100% - 24px, 1120px) !important;
  }

  .site-header{padding:8px 0 !important;}
  .header-row{gap:9px !important;grid-template-columns:auto 1fr auto !important;}
  .brand img{width:34px !important;height:34px !important;}
  .brand-copy strong{font-size:1.06rem !important;}
  .brand-copy span{font-size:.66rem !important;}
  .menu-toggle{width:40px !important;height:40px !important;border-radius:14px !important;}
  .main-nav{left:12px !important;right:12px !important;border-radius:20px !important;}

  .hero-shell::before{height:520px !important;border-bottom-left-radius:24px !important;border-bottom-right-radius:24px !important;}
  .hero-section{padding:30px 0 22px !important;}
  .hero-copy h1{font-size:clamp(1.58rem,9vw,2.15rem) !important;}
  .hero-copy p{font-size:.88rem !important;line-height:2 !important;}
  .hero-actions{display:grid !important;grid-template-columns:1fr !important;}
  .hero-actions .btn,.btn{width:100% !important;}

  .feature-strip{grid-template-columns:1fr !important;border-radius:22px !important;}
  .mini-feature__icon{width:52px !important;height:52px !important;}

  .product-card,
  .product-page-card{min-height:340px !important;padding:14px !important;}
  .product-page-card h3{font-size:1.12rem !important;}
  .product-page-card__desc{font-size:.82rem !important;}
  .product-page-card__price{flex-direction:column !important;align-items:flex-start !important;gap:4px !important;}

  .section-head,
  .products-list-title,
  .section-title{text-align:center !important;}
  .section-link,
  .products-count-pill{width:100% !important;justify-content:center !important;}

  .price-start-card h2,
  .purchase-path-head h2,
  .page-hero h1,
  h1{font-size:clamp(1.55rem,8vw,2rem) !important;}
  .price-start-card__deal strong,
  .price-start-card__price strong{font-size:1.7rem !important;}

  .footer-logo-row,
  .footer-enamad-mini{
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
  }

  .goftino-fallback{left:14px !important;bottom:14px !important;}
}

/* Product detail pages with inline styles */
@media (max-width: 980px){
  .site-header .nav,
  .nav{
    gap:7px !important;
  }
  .site-header:not(.simple-header){
    width:100% !important;
    margin:0 !important;
    border-radius:0 !important;
  }
  .site-header .nav,
  .site-header > .nav{
    width:100% !important;
    order:3 !important;
    justify-content:flex-start !important;
    overflow:auto !important;
    padding:8px 0 2px !important;
    scrollbar-width:none !important;
  }
  .site-header .nav::-webkit-scrollbar,
  .site-header > .nav::-webkit-scrollbar{display:none !important;}
  .site-header .nav a,
  .site-header > .nav a{
    flex:0 0 auto !important;
    min-height:40px !important;
    padding:9px 13px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.07) !important;
    border:1px solid rgba(255,255,255,.08) !important;
  }
  .brand-mark{width:42px !important;height:42px !important;border-radius:14px !important;}
  .hero-side{max-width:none !important;justify-self:stretch !important;}
  .hero-top{padding:16px !important;border-radius:24px !important;}
  .quick-card{grid-template-columns:1fr !important;text-align:center !important;}
  .quick-card .icon{margin-inline:auto !important;}
}

@media (max-width: 640px){
  .site-header{flex-wrap:wrap !important;gap:10px !important;padding:12px !important;}
  .brand strong{font-size:1rem !important;}
  .brand small{font-size:.72rem !important;}
  .hero-actions,.header-actions{display:grid !important;grid-template-columns:1fr !important;width:100% !important;}
  .hero-note,.icon-strip,.compare-strip,.badge-row{justify-content:center !important;}
  section{padding:34px 0 !important;}
  .edition-features li,.buy-points div{padding:12px 14px !important;font-size:.9rem !important;}
}

/* =========================================================
   MOBILE PHASE 1 — Core UX polish for Charisma
   Scope: mobile-only spacing, RTL rhythm, product/demo cards, filters, CTA safety
   Does not change payment/license/email/enamad/goftino logic.
   ========================================================= */

@media (max-width: 780px){
  html{scroll-behavior:smooth;}
  body{
    background:#f6f7fb !important;
    color:#111827 !important;
    padding-bottom:72px !important;
  }

  .container,
  .site-header .container,
  .cta-section .container,
  .site-footer .container,
  .charisma-footer .container,
  .demo-filter-section .container{
    width:calc(100% - 22px) !important;
    max-width:100% !important;
  }

  /* Compact premium hero for inner mobile pages */
  .hero-shell,
  .charisma-page-hero-shell,
  body.demo-download-page .hero-shell,
  body.charisma-products-page .hero-shell{
    overflow:hidden !important;
  }

  .charisma-page-hero-shell::before,
  .hero-shell::before{
    height:500px !important;
    border-bottom-left-radius:28px !important;
    border-bottom-right-radius:28px !important;
  }

  .charisma-page-hero-shell::after{
    top:472px !important;
    height:108px !important;
    border-top-left-radius:32px !important;
    border-top-right-radius:32px !important;
  }

  .hero-section,
  .charisma-page-hero{
    min-height:auto !important;
    padding:94px 0 26px !important;
    text-align:center !important;
  }

  .hero-copy,
  .charisma-page-hero .hero-copy{
    max-width:100% !important;
    text-align:center !important;
    padding:0 !important;
    margin:0 auto !important;
  }

  .hero-copy h1,
  .charisma-page-hero .hero-copy h1,
  .products-redesign-hero h1{
    margin:0 auto 12px !important;
    font-size:clamp(1.62rem, 8.2vw, 2.12rem) !important;
    line-height:1.42 !important;
    letter-spacing:-.25px !important;
    text-wrap:balance;
  }

  .hero-copy p,
  .charisma-page-hero .hero-copy p,
  .products-redesign-hero p{
    width:min(100%, 560px) !important;
    margin:0 auto 16px !important;
    font-size:.9rem !important;
    line-height:1.95 !important;
    color:rgba(238,242,255,.88) !important;
    text-align:center !important;
  }

  .hero-actions,
  .charisma-page-hero .hero-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:11px !important;
    margin:0 auto !important;
  }

  .hero-actions .btn,
  .charisma-page-hero .hero-actions .btn,
  .btn{
    width:100% !important;
    min-height:52px !important;
    padding:12px 16px !important;
    border-radius:19px !important;
    font-size:.94rem !important;
    line-height:1.6 !important;
    font-weight:900 !important;
  }

  .charisma-page-hero .hero-note,
  .hero-note{
    width:100% !important;
    justify-content:center !important;
    margin-top:15px !important;
    padding:11px 13px !important;
    border-radius:19px !important;
    font-size:.82rem !important;
    line-height:1.85 !important;
    text-align:center !important;
  }

  /* Demo filter: horizontal mobile-native pills */
  .demo-filter-section{
    padding:14px 0 6px !important;
    margin-top:-16px !important;
    background:#f6f7fb !important;
    position:relative !important;
    z-index:5 !important;
  }

  .demo-filter-panel{
    width:100% !important;
    margin:0 auto !important;
    padding:11px 10px 12px !important;
    border-radius:22px !important;
    background:linear-gradient(180deg,#ffffff,#fbfbff) !important;
    border:1px solid rgba(124,58,237,.10) !important;
    box-shadow:0 16px 42px rgba(15,23,42,.075) !important;
    overflow:hidden !important;
  }

  .demo-filter-list{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:9px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:0 2px 2px !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }
  .demo-filter-list::-webkit-scrollbar{display:none !important;}

  .demo-filter-btn{
    flex:0 0 auto !important;
    scroll-snap-align:start !important;
    min-height:40px !important;
    padding:0 15px !important;
    border-radius:999px !important;
    font-size:.83rem !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-shadow:0 8px 20px rgba(15,23,42,.055) !important;
  }

  .demo-filter-btn.is-active{
    box-shadow:0 12px 28px rgba(109,71,255,.22) !important;
  }

  .demo-filter-result{
    margin:10px auto 0 !important;
    font-size:.78rem !important;
    line-height:1.8 !important;
    color:#6b7280 !important;
  }

  /* Product/demo listing grid */
  .product-grid,
  .products-redesign-grid,
  .demo-products-section .product-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    align-items:stretch !important;
  }

  .products-list-section,
  .demo-products-section{
    padding:18px 0 38px !important;
    background:#f6f7fb !important;
  }

  .product-card,
  .product-card--image,
  .demo-product-card{
    width:100% !important;
    min-height:292px !important;
    max-height:none !important;
    padding:15px !important;
    border-radius:28px !important;
    overflow:hidden !important;
    box-shadow:0 18px 42px rgba(8,13,31,.14) !important;
  }

  .demo-product-card::after,
  .product-card--image::after{
    background:linear-gradient(180deg,rgba(5,8,22,.08) 0%,rgba(5,8,22,.40) 36%,rgba(5,8,22,.92) 100%) !important;
  }

  .product-badge,
  .product-page-card__badge{
    top:14px !important;
    right:14px !important;
    min-height:32px !important;
    padding:6px 12px !important;
    border-radius:999px !important;
    font-size:.78rem !important;
    font-weight:900 !important;
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    backdrop-filter:blur(10px) !important;
  }

  .product-card__content{
    width:100% !important;
    margin-top:auto !important;
    text-align:right !important;
  }

  .product-card__content h3,
  .demo-product-card h3{
    margin:0 0 8px !important;
    font-size:1.12rem !important;
    line-height:1.55 !important;
    font-weight:950 !important;
    text-align:right !important;
  }

  .product-card__content p,
  .demo-product-card p{
    margin:0 0 12px !important;
    font-size:.86rem !important;
    line-height:1.9 !important;
    color:rgba(238,242,255,.86) !important;
    text-align:right !important;
  }

  .demo-card-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
    margin-top:0 !important;
  }

  .demo-detail-link,
  .demo-download-link{
    min-height:44px !important;
    border-radius:16px !important;
    padding:9px 10px !important;
    font-size:.82rem !important;
    line-height:1.55 !important;
  }

  /* Products page cards: reduce clutter and improve RTL hierarchy */
  .products-list-head{
    margin-bottom:16px !important;
    gap:12px !important;
    text-align:right !important;
  }

  .products-list-head h2{
    font-size:1.45rem !important;
    line-height:1.55 !important;
  }

  .products-list-head p{
    font-size:.88rem !important;
    line-height:1.95 !important;
  }

  .products-count-pill{
    width:100% !important;
    min-height:44px !important;
    justify-content:center !important;
    font-size:.84rem !important;
  }

  .product-page-card{
    width:100% !important;
    min-height:430px !important;
    padding:15px !important;
    border-radius:28px !important;
    box-shadow:0 18px 44px rgba(8,13,31,.16) !important;
    transform:none !important;
  }

  .product-page-card::after{
    background:linear-gradient(180deg,rgba(5,8,20,.06) 0%,rgba(5,8,20,.38) 34%,rgba(4,7,16,.94) 100%) !important;
  }

  .product-page-card__body{
    padding-top:94px !important;
    margin-top:auto !important;
  }

  .product-page-card h3{
    margin-bottom:8px !important;
    font-size:1.18rem !important;
    line-height:1.55 !important;
    text-align:right !important;
  }

  .product-page-card__desc{
    margin-bottom:10px !important;
    font-size:.86rem !important;
    line-height:1.9 !important;
    text-align:right !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  .product-page-card__features{
    gap:7px !important;
    margin-bottom:11px !important;
  }

  .product-page-card__features span{
    padding:6px 9px !important;
    font-size:.72rem !important;
    line-height:1.45 !important;
  }

  .product-page-card__price{
    margin-bottom:10px !important;
    padding:10px 12px !important;
    border-radius:17px !important;
    flex-direction:row !important;
    align-items:center !important;
  }

  .product-page-card__price span{font-size:.76rem !important;}
  .product-page-card__price strong{font-size:1rem !important;}

  .product-page-card__actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .product-action{
    min-height:43px !important;
    padding:9px 10px !important;
    border-radius:16px !important;
    font-size:.80rem !important;
    line-height:1.45 !important;
  }

  .product-action--video,
  .product-action--more{
    min-height:40px !important;
    background:rgba(255,255,255,.10) !important;
  }

  .product-action--demo{
    order:1 !important;
    min-height:46px !important;
  }
  .product-action--buy{
    order:2 !important;
    min-height:46px !important;
  }
  .product-action--video{order:3 !important;}
  .product-action--more{order:4 !important;}

  /* Keep floating chat from covering key bottom CTAs on mobile */
  .goftino-fallback,
  iframe[src*="goftino"],
  iframe[id*="goftino"],
  iframe[name*="goftino"],
  [id*="goftino"],
  [class*="goftino"]{
    bottom:82px !important;
  }
}

@media (max-width: 420px){
  .container,
  .site-header .container,
  .demo-filter-section .container{
    width:calc(100% - 18px) !important;
  }

  .hero-copy h1,
  .charisma-page-hero .hero-copy h1{
    font-size:1.56rem !important;
  }

  .hero-actions .btn,
  .btn{
    min-height:50px !important;
    border-radius:18px !important;
  }

  .demo-card-actions{
    grid-template-columns:1fr !important;
  }

  .product-card,
  .demo-product-card{
    min-height:286px !important;
    border-radius:25px !important;
  }

  .product-page-card{
    min-height:420px !important;
    border-radius:25px !important;
  }

  .product-page-card__price{
    gap:6px !important;
  }

  .product-page-card__price strong{
    font-size:.96rem !important;
  }
}

/* =========================================================
   PHASE 2 — Mobile Premium Visual Polish
   هدف: لوکس‌تر شدن ظاهر موبایل، کارت‌ها، دکمه‌ها، فیلترها و ریتم RTL
   فقط CSS است و منطق پرداخت/لایسنس/ایمیل/اینماد/گفتینو را تغییر نمی‌دهد.
   ========================================================= */
@media (max-width: 768px){
  :root{
    --mobile-bg:#f5f7ff;
    --mobile-ink:#0f172a;
    --mobile-muted:#64748b;
    --mobile-violet:#7c3aed;
    --mobile-cyan:#06b6d4;
    --mobile-card-radius:28px;
    --mobile-soft-shadow:0 18px 50px rgba(15,23,42,.10);
    --mobile-deep-shadow:0 24px 70px rgba(2,6,23,.22);
  }

  html,body{
    background:var(--mobile-bg) !important;
    direction:rtl !important;
  }

  body{
    text-rendering:geometricPrecision;
    -webkit-font-smoothing:antialiased;
  }

  /* Mobile spacing rhythm */
  main,
  .page-main,
  .products-page,
  .demo-page{
    background:
      radial-gradient(circle at 92% 3%, rgba(124,58,237,.08), transparent 28%),
      radial-gradient(circle at 6% 24%, rgba(6,182,212,.08), transparent 30%),
      var(--mobile-bg) !important;
  }

  section{
    scroll-margin-top:80px !important;
  }

  .section-head,
  .products-list-head,
  .section-title,
  .demo-section-head{
    text-align:right !important;
  }

  .section-head h2,
  .products-list-head h2,
  .section-title h2,
  .demo-section-head h2{
    letter-spacing:-.55px !important;
    color:#111827 !important;
  }

  .section-head p,
  .products-list-head p,
  .section-title p,
  .demo-section-head p{
    color:rgba(71,85,105,.92) !important;
  }

  /* Header premium gloss */
  .site-header{
    background:
      radial-gradient(circle at 12% 5%, rgba(124,58,237,.26), transparent 35%),
      linear-gradient(135deg,rgba(4,7,18,.985),rgba(12,18,38,.97)) !important;
    border-bottom-color:rgba(255,255,255,.12) !important;
  }

  .brand img{
    filter:drop-shadow(0 10px 22px rgba(124,58,237,.26)) !important;
  }

  .menu-toggle{
    position:relative !important;
    overflow:hidden !important;
  }
  .menu-toggle::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 55%) !important;
    pointer-events:none !important;
  }

  .main-nav a{
    position:relative !important;
    overflow:hidden !important;
  }
  .main-nav a[aria-current="page"]::before,
  .main-nav a:hover::before{
    content:"" !important;
    width:8px !important;
    height:8px !important;
    border-radius:999px !important;
    background:#22d3ee !important;
    box-shadow:0 0 0 6px rgba(34,211,238,.11), 0 0 20px rgba(34,211,238,.45) !important;
    margin-left:8px !important;
  }

  /* Hero: more compact luxury surface */
  .hero-shell::before,
  .charisma-page-hero::before{
    background:
      radial-gradient(circle at 12% 18%, rgba(139,92,246,.36), transparent 32%),
      radial-gradient(circle at 88% 12%, rgba(34,211,238,.22), transparent 34%),
      linear-gradient(180deg,rgba(4,7,18,.99),rgba(10,15,35,.94)) !important;
  }

  .hero-copy,
  .charisma-page-hero .hero-copy{
    isolation:isolate !important;
  }

  .hero-copy h1,
  .charisma-page-hero .hero-copy h1{
    text-shadow:0 10px 30px rgba(0,0,0,.28) !important;
  }

  .hero-copy p,
  .charisma-page-hero .hero-copy p{
    text-wrap:pretty !important;
  }

  .hero-actions,
  .charisma-page-hero .hero-actions{
    margin-top:12px !important;
  }

  .hero-actions .btn,
  .charisma-page-hero .hero-actions .btn,
  .btn{
    position:relative !important;
    overflow:hidden !important;
    font-weight:950 !important;
    letter-spacing:-.2px !important;
    box-shadow:0 14px 34px rgba(15,23,42,.16) !important;
  }

  .hero-actions .btn::after,
  .charisma-page-hero .hero-actions .btn::after,
  .btn::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.22) 42%,transparent 66%) !important;
    transform:translateX(110%) !important;
    opacity:.9 !important;
    pointer-events:none !important;
  }

  .hero-actions .btn:active,
  .charisma-page-hero .hero-actions .btn:active,
  .btn:active,
  .product-action:active,
  .demo-filter-btn:active{
    transform:scale(.985) !important;
  }

  /* Demo filter: premium mobile tab bar */
  .demo-filter-section{
    padding-top:18px !important;
    padding-bottom:10px !important;
  }

  .demo-filter-panel{
    position:relative !important;
    overflow:hidden !important;
    padding:12px 12px 14px !important;
    border-radius:28px !important;
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(148,163,184,.18) !important;
    box-shadow:var(--mobile-soft-shadow), inset 0 1px 0 rgba(255,255,255,.88) !important;
    backdrop-filter:blur(18px) !important;
  }

  .demo-filter-panel::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:radial-gradient(circle at 88% 10%, rgba(124,58,237,.10), transparent 32%) !important;
    pointer-events:none !important;
  }

  .demo-filter-list{
    position:relative !important;
    gap:10px !important;
    padding:0 1px 4px 1px !important;
    scroll-snap-type:x proximity !important;
  }

  .demo-filter-btn{
    scroll-snap-align:start !important;
    min-height:44px !important;
    padding:0 17px !important;
    border-radius:18px !important;
    background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
    color:#1e293b !important;
    border:1px solid rgba(148,163,184,.22) !important;
    box-shadow:0 10px 22px rgba(15,23,42,.06) !important;
    font-weight:950 !important;
  }

  .demo-filter-btn.is-active{
    color:#fff !important;
    border-color:rgba(255,255,255,.34) !important;
    background:linear-gradient(135deg,#8b5cf6 0%,#6d5dfc 45%,#06b6d4 100%) !important;
    box-shadow:0 16px 34px rgba(124,58,237,.30), inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  .demo-filter-result{
    position:relative !important;
    margin-top:10px !important;
    padding:12px 12px 2px !important;
    font-size:.84rem !important;
    color:#64748b !important;
    text-align:center !important;
    border-top:1px solid rgba(148,163,184,.16) !important;
  }

  /* Product and demo cards: richer premium glass */
  .product-page-card,
  .product-card,
  .demo-product-card{
    isolation:isolate !important;
    border:1px solid rgba(255,255,255,.20) !important;
    box-shadow:var(--mobile-deep-shadow), inset 0 1px 0 rgba(255,255,255,.14) !important;
    background-color:#08111f !important;
  }

  .product-page-card::before,
  .product-card::before,
  .demo-product-card::before{
    filter:saturate(1.08) contrast(1.04) brightness(.88) !important;
    transform:scale(1.01) !important;
  }

  .product-page-card::after,
  .product-card::after,
  .demo-product-card::after{
    background:
      linear-gradient(180deg,rgba(3,7,18,.04) 0%,rgba(3,7,18,.26) 32%,rgba(3,7,18,.86) 70%,rgba(3,7,18,.97) 100%),
      radial-gradient(circle at 88% 22%, rgba(124,58,237,.18), transparent 34%) !important;
  }

  .product-page-card__badge,
  .product-card__tag,
  .demo-product-card .product-card__tag{
    border-radius:999px !important;
    padding:8px 13px !important;
    background:rgba(15,23,42,.62) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    color:#fff !important;
    box-shadow:0 14px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.14) !important;
    backdrop-filter:blur(14px) !important;
  }

  .product-page-card__body,
  .product-card__content,
  .demo-product-card .product-card__content{
    position:relative !important;
    z-index:2 !important;
  }

  .product-page-card h3,
  .product-card__content h3,
  .demo-product-card h3{
    color:#fff !important;
    text-shadow:0 10px 24px rgba(0,0,0,.36) !important;
    letter-spacing:-.45px !important;
  }

  .product-page-card__desc,
  .product-card__content p,
  .demo-product-card p{
    color:rgba(241,245,249,.90) !important;
    text-shadow:0 8px 20px rgba(0,0,0,.22) !important;
  }

  .product-page-card__features span,
  .product-card__features span,
  .demo-product-card .product-card__features span{
    background:rgba(255,255,255,.105) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    color:rgba(255,255,255,.91) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important;
    backdrop-filter:blur(10px) !important;
  }

  .product-page-card__price{
    background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.09)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 12px 26px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.14) !important;
    backdrop-filter:blur(14px) !important;
  }

  .product-page-card__price span{
    color:rgba(241,245,249,.72) !important;
    font-weight:850 !important;
  }

  .product-page-card__price strong{
    color:#fff !important;
    letter-spacing:-.25px !important;
  }

  /* CTA hierarchy: make primary actions unmistakable */
  .product-action,
  .demo-detail-link,
  .demo-download-link{
    position:relative !important;
    overflow:hidden !important;
    font-weight:950 !important;
    letter-spacing:-.24px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 12px 26px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.14) !important;
  }

  .product-action--demo,
  .demo-download-link{
    background:linear-gradient(135deg,#8b5cf6 0%,#6d5dfc 48%,#06b6d4 100%) !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.28) !important;
    box-shadow:0 16px 34px rgba(124,58,237,.34), inset 0 1px 0 rgba(255,255,255,.25) !important;
  }

  .product-action--buy,
  .demo-detail-link{
    background:linear-gradient(135deg,#ffffff 0%,#effcff 100%) !important;
    color:#0f172a !important;
    border-color:rgba(255,255,255,.60) !important;
    box-shadow:0 16px 32px rgba(34,211,238,.16), inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  .product-action--video,
  .product-action--more{
    background:rgba(15,23,42,.42) !important;
    color:rgba(255,255,255,.91) !important;
    backdrop-filter:blur(12px) !important;
  }

  .product-action--demo::before,
  .product-action--buy::before,
  .demo-download-link::before,
  .demo-detail-link::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.22) 43%,transparent 68%) !important;
    transform:translateX(110%) !important;
    pointer-events:none !important;
  }

  .product-action:focus-visible,
  .demo-filter-btn:focus-visible,
  .demo-detail-link:focus-visible,
  .demo-download-link:focus-visible,
  .btn:focus-visible{
    outline:3px solid rgba(34,211,238,.35) !important;
    outline-offset:3px !important;
  }

  /* White content cards: softer and more native */
  .demo-info-card,
  .support-card,
  .auth-card,
  .account-card,
  .order-card,
  .download-card,
  .faq-card,
  .panel-card,
  .product-info-panel,
  .benefit-card,
  .feature-card,
  .cta-card{
    border-radius:28px !important;
    border:1px solid rgba(148,163,184,.16) !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:0 18px 50px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.85) !important;
    backdrop-filter:blur(18px) !important;
  }

  /* Floating chat: premium safe zone without hiding CTA */
  .goftino-fallback,
  iframe[src*="goftino"],
  iframe[id*="goftino"],
  iframe[name*="goftino"],
  [id*="goftino"],
  [class*="goftino"]{
    filter:drop-shadow(0 16px 34px rgba(79,70,229,.22)) !important;
  }
}

@media (max-width: 480px){
  .site-header{
    padding:8px 0 !important;
  }

  .brand img{
    width:34px !important;
    height:34px !important;
  }

  .brand-copy strong{
    font-size:1.08rem !important;
  }

  .brand-copy span{
    max-width:170px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .menu-toggle{
    width:42px !important;
    height:42px !important;
    border-radius:15px !important;
  }

  .hero-section,
  .charisma-page-hero{
    padding-top:26px !important;
    padding-bottom:22px !important;
  }

  .hero-copy h1,
  .charisma-page-hero .hero-copy h1{
    font-size:1.50rem !important;
    line-height:1.48 !important;
    margin-bottom:10px !important;
  }

  .hero-copy p,
  .charisma-page-hero .hero-copy p{
    font-size:.88rem !important;
    line-height:1.95 !important;
    margin-bottom:13px !important;
  }

  .hero-actions .btn,
  .charisma-page-hero .hero-actions .btn,
  .btn{
    min-height:48px !important;
    border-radius:18px !important;
    font-size:.90rem !important;
  }

  .demo-filter-panel{
    border-radius:24px !important;
    padding:10px 10px 12px !important;
  }

  .demo-filter-btn{
    min-height:42px !important;
    padding:0 15px !important;
    border-radius:17px !important;
    font-size:.82rem !important;
  }

  .product-page-card,
  .demo-product-card,
  .product-card{
    border-radius:27px !important;
  }

  .product-page-card__body{
    padding-top:86px !important;
  }

  .product-page-card h3,
  .demo-product-card h3,
  .product-card__content h3{
    font-size:1.12rem !important;
    line-height:1.52 !important;
  }

  .product-page-card__desc,
  .demo-product-card p,
  .product-card__content p{
    font-size:.84rem !important;
    line-height:1.86 !important;
  }

  .product-page-card__features span{
    font-size:.70rem !important;
    padding:6px 8px !important;
  }

  .product-action,
  .demo-detail-link,
  .demo-download-link{
    min-height:44px !important;
    border-radius:16px !important;
    font-size:.80rem !important;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 768px){
  .hero-actions .btn:active::after,
  .charisma-page-hero .hero-actions .btn:active::after,
  .btn:active::after,
  .product-action:active::before,
  .demo-detail-link:active::before,
  .demo-download-link:active::before{
    transform:translateX(-115%) !important;
    transition:transform .55s ease !important;
  }

  .demo-filter-btn,
  .product-action,
  .demo-detail-link,
  .demo-download-link,
  .btn,
  .product-page-card,
  .demo-product-card{
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
  }
}

/* =========================================================
   PHASE 3 — Mobile Conversion & CTA Optimization
   هدف: واضح‌تر شدن مسیر تست رایگان/خرید، کاهش شلوغی و بهبود فروش در موبایل
   فقط لایه ظاهری موبایل است؛ پرداخت/لایسنس/ایمیل/اینماد/گفتینو تغییر نمی‌کند.
   ========================================================= */
@media (max-width: 768px){
  :root{
    --mobile-action-glow:0 18px 42px rgba(124,58,237,.34);
    --mobile-buy-glow:0 16px 38px rgba(6,182,212,.18);
  }

  body{
    padding-bottom:96px !important;
  }

  /* Make the first screen more decision-focused */
  .hero-section,
  .charisma-page-hero{
    padding-bottom:18px !important;
  }

  .hero-actions,
  .charisma-page-hero .hero-actions{
    gap:9px !important;
  }

  .hero-actions .btn,
  .charisma-page-hero .hero-actions .btn{
    min-height:48px !important;
    border-radius:18px !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn--primary,
  .charisma-page-hero .hero-actions .btn-primary,
  .charisma-page-hero .hero-actions .btn--primary{
    box-shadow:var(--mobile-action-glow), inset 0 1px 0 rgba(255,255,255,.24) !important;
  }

  .charisma-page-hero .hero-note,
  .hero-note,
  .hero-trust{
    max-width:100% !important;
    margin-top:12px !important;
  }

  /* Keep filters accessible and compact while scrolling */
  .demo-filter-section{
    position:sticky !important;
    top:0 !important;
    z-index:40 !important;
    padding-top:10px !important;
    padding-bottom:8px !important;
    background:linear-gradient(180deg,rgba(245,247,255,.96),rgba(245,247,255,.86)) !important;
    backdrop-filter:blur(14px) !important;
  }

  .demo-filter-panel{
    box-shadow:0 14px 34px rgba(15,23,42,.075), inset 0 1px 0 rgba(255,255,255,.90) !important;
  }

  .demo-filter-result{
    padding-top:9px !important;
    margin-top:8px !important;
    font-size:.80rem !important;
  }

  /* Product cards: reduce scroll fatigue and make purchase path obvious */
  .product-page-card{
    min-height:390px !important;
    padding:13px !important;
    border-radius:26px !important;
  }

  .product-page-card__body{
    padding-top:70px !important;
  }

  .product-page-card h3{
    font-size:1.12rem !important;
    line-height:1.48 !important;
    margin-bottom:6px !important;
  }

  .product-page-card__desc{
    margin-bottom:8px !important;
    line-height:1.78 !important;
    -webkit-line-clamp:2 !important;
  }

  .product-page-card__features{
    max-height:62px !important;
    overflow:hidden !important;
    gap:6px !important;
    margin-bottom:9px !important;
  }

  .product-page-card__features span{
    font-size:.68rem !important;
    padding:5px 8px !important;
    border-radius:999px !important;
  }

  .product-page-card__price{
    position:relative !important;
    margin-bottom:9px !important;
    padding:10px 12px !important;
    border-radius:18px !important;
    background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.10)) !important;
  }

  .product-page-card__price::before{
    content:"" !important;
    width:8px !important;
    height:8px !important;
    border-radius:999px !important;
    background:#22d3ee !important;
    box-shadow:0 0 0 6px rgba(34,211,238,.11), 0 0 18px rgba(34,211,238,.40) !important;
    flex:0 0 auto !important;
    margin-left:7px !important;
  }

  .product-page-card__price span{
    font-size:.72rem !important;
  }

  .product-page-card__price strong{
    font-size:1.02rem !important;
  }

  .product-page-card__actions{
    position:relative !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
    padding:8px !important;
    border-radius:20px !important;
    background:rgba(2,6,23,.30) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important;
    backdrop-filter:blur(14px) !important;
  }

  .product-page-card__actions::before{
    content:"مسیر سریع انتخاب" !important;
    grid-column:1 / -1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:22px !important;
    margin-bottom:1px !important;
    color:rgba(255,255,255,.72) !important;
    font-size:.68rem !important;
    font-weight:900 !important;
    letter-spacing:-.15px !important;
  }

  .product-action{
    min-height:40px !important;
    padding:8px 9px !important;
    border-radius:15px !important;
    font-size:.77rem !important;
    line-height:1.45 !important;
  }

  .product-action--demo,
  .product-action--buy{
    grid-column:1 / -1 !important;
    min-height:46px !important;
    font-size:.86rem !important;
  }

  .product-action--demo{
    box-shadow:var(--mobile-action-glow), inset 0 1px 0 rgba(255,255,255,.24) !important;
  }

  .product-action--buy{
    box-shadow:var(--mobile-buy-glow), inset 0 1px 0 rgba(255,255,255,.88) !important;
  }

  .product-action--video,
  .product-action--more{
    min-height:37px !important;
    font-size:.71rem !important;
    color:rgba(255,255,255,.84) !important;
    opacity:.92 !important;
  }

  /* Demo cards: make direct demo/download action easier to tap */
  .demo-product-card,
  .product-card{
    min-height:278px !important;
    padding:14px !important;
    border-radius:26px !important;
  }

  .demo-card-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:7px !important;
    border-radius:19px !important;
    background:rgba(2,6,23,.26) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    backdrop-filter:blur(12px) !important;
  }

  .demo-download-link,
  .demo-detail-link{
    min-height:44px !important;
    border-radius:15px !important;
    font-size:.82rem !important;
  }

  .demo-download-link{
    order:1 !important;
    box-shadow:var(--mobile-action-glow), inset 0 1px 0 rgba(255,255,255,.22) !important;
  }

  .demo-detail-link{
    order:2 !important;
  }

  /* Search and order forms: make final action obvious */
  .products-inline-search button,
  .products-search-box button,
  .search-box button,
  form button[type="submit"],
  .order-card .btn,
  .auth-card .btn,
  .support-card .btn{
    min-height:48px !important;
    border-radius:17px !important;
    font-weight:950 !important;
  }

  /* Prevent floating chat from blocking conversion buttons */
  .goftino-fallback,
  iframe[src*="goftino"],
  iframe[id*="goftino"],
  iframe[name*="goftino"],
  [id*="goftino"],
  [class*="goftino"]{
    bottom:104px !important;
  }
}

@media (max-width: 420px){
  .product-page-card{
    min-height:376px !important;
    padding:12px !important;
    border-radius:24px !important;
  }

  .product-page-card__body{
    padding-top:62px !important;
  }

  .product-page-card h3{
    font-size:1.06rem !important;
  }

  .product-page-card__desc{
    font-size:.80rem !important;
    line-height:1.72 !important;
  }

  .product-page-card__features{
    max-height:56px !important;
  }

  .product-action--demo,
  .product-action--buy{
    min-height:44px !important;
    font-size:.82rem !important;
  }

  .product-action--video,
  .product-action--more{
    font-size:.68rem !important;
  }

  .demo-product-card,
  .product-card{
    min-height:268px !important;
  }

  .demo-filter-section{
    top:0 !important;
  }
}

/* =========================================================
   PHASE 4 — Demo & Support Mobile Rescue
   هدف: رفع بهم‌ریختگی صفحه تست رایگان و پشتیبانی در موبایل
   فقط CSS است؛ پرداخت/لایسنس/ایمیل/اینماد/گفتینو تغییر نمی‌کند.
   ========================================================= */
@media (max-width: 780px){
  /* Remove the desktop hero image/logo from demo/support mobile so text never overlaps it */
  body.demo-download-page .charisma-page-hero-shell::before,
  body.charisma-support-page .charisma-page-hero-shell::before,
  body.demo-download-page .hero-shell::before,
  body.charisma-support-page .hero-shell::before{
    height:430px !important;
    border-bottom-left-radius:26px !important;
    border-bottom-right-radius:26px !important;
    background:
      radial-gradient(circle at 12% 12%, rgba(141,103,255,.30), transparent 34%),
      radial-gradient(circle at 88% 10%, rgba(34,211,238,.18), transparent 34%),
      radial-gradient(circle at 50% 100%, rgba(109,71,255,.16), transparent 42%),
      linear-gradient(180deg,#050816 0%,#071225 58%,#08101f 100%) !important;
  }

  body.demo-download-page .charisma-page-hero-shell::after,
  body.charisma-support-page .charisma-page-hero-shell::after{
    top:404px !important;
    height:86px !important;
    border-top-left-radius:30px !important;
    border-top-right-radius:30px !important;
    background:#f5f7ff !important;
  }

  /* Clean mobile header for demo/support: no overlap, proper RTL, menu button visible */
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header{
    display:block !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    margin:0 !important;
    padding:8px 0 !important;
    z-index:120 !important;
    background:linear-gradient(135deg,rgba(5,8,22,.98),rgba(8,18,36,.96)) !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    border-radius:0 0 20px 20px !important;
    box-shadow:0 18px 45px rgba(2,6,23,.26) !important;
    backdrop-filter:blur(18px) !important;
    overflow:visible !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .container,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .container{
    width:calc(100% - 22px) !important;
    margin-inline:auto !important;
    padding:0 !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .header-row,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .header-row{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:10px !important;
    min-height:48px !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .brand,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .brand{
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0 !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .brand img,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .brand img{
    width:34px !important;
    height:34px !important;
    object-fit:contain !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy{
    align-items:flex-end !important;
    min-width:0 !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy strong,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy strong{
    font-size:1.08rem !important;
    line-height:1.1 !important;
    color:#fff !important;
    white-space:nowrap !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy span,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy span{
    font-size:.62rem !important;
    line-height:1.25 !important;
    color:rgba(226,232,240,.68) !important;
    white-space:nowrap !important;
    max-width:140px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .menu-toggle,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .menu-toggle{
    display:inline-grid !important;
    place-items:center !important;
    justify-self:start !important;
    width:40px !important;
    height:40px !important;
    border-radius:14px !important;
    color:#fff !important;
    background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 12px 26px rgba(0,0,0,.18) !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .header-auth-actions,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .header-auth-actions{
    display:none !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav{
    position:absolute !important;
    top:calc(100% + 10px) !important;
    left:11px !important;
    right:11px !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:7px !important;
    padding:11px !important;
    border-radius:20px !important;
    background:linear-gradient(145deg,rgba(7,11,25,.99),rgba(10,20,42,.98)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 24px 72px rgba(0,0,0,.38) !important;
    backdrop-filter:blur(22px) !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav.is-open,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav.is-open{
    display:flex !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[href$="demo.html"],
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[href$="support.html"]{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-height:44px !important;
    padding:10px 13px !important;
    border-radius:15px !important;
    border:1px solid rgba(255,255,255,.07) !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
    background:rgba(255,255,255,.045) !important;
    color:rgba(255,255,255,.90) !important;
    font-size:.86rem !important;
    font-weight:900 !important;
    line-height:1.5 !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[aria-current="page"],
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[aria-current="page"],
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[href$="demo.html"],
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[href$="support.html"]{
    background:linear-gradient(135deg,rgba(124,58,237,.36),rgba(6,182,212,.18)) !important;
    color:#fff !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a::after,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a::after,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a::before,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a::before{
    display:none !important;
    content:none !important;
  }

  /* Hero content: centered, clean, enough breathing room */
  body.demo-download-page .charisma-page-hero,
  body.charisma-support-page .charisma-page-hero,
  body.demo-download-page .hero-section,
  body.charisma-support-page .hero-section{
    min-height:auto !important;
    padding:28px 0 22px !important;
    display:block !important;
    text-align:center !important;
  }

  body.demo-download-page .hero-copy,
  body.charisma-support-page .hero-copy{
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
    padding:0 !important;
    margin:0 auto !important;
  }

  body.demo-download-page .hero-copy h1,
  body.charisma-support-page .hero-copy h1,
  body.demo-download-page .charisma-page-hero .hero-copy h1,
  body.charisma-support-page .charisma-page-hero .hero-copy h1{
    margin:0 auto 12px !important;
    font-size:1.50rem !important;
    line-height:1.62 !important;
    letter-spacing:-.15px !important;
    color:#fff !important;
    text-shadow:0 12px 34px rgba(0,0,0,.30) !important;
  }

  body.demo-download-page .hero-copy h1 span,
  body.charisma-support-page .hero-copy h1 span{
    display:inline !important;
    color:inherit !important;
    background:none !important;
    -webkit-background-clip:initial !important;
    background-clip:initial !important;
  }

  body.demo-download-page .hero-copy p,
  body.charisma-support-page .hero-copy p,
  body.demo-download-page .charisma-page-hero .hero-copy p,
  body.charisma-support-page .charisma-page-hero .hero-copy p{
    width:min(100%, 520px) !important;
    margin:0 auto 15px !important;
    font-size:.86rem !important;
    line-height:2.05 !important;
    color:rgba(238,242,255,.86) !important;
    text-align:center !important;
  }

  body.demo-download-page .hero-actions,
  body.charisma-support-page .hero-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:0 auto !important;
  }

  body.demo-download-page .hero-actions .btn,
  body.charisma-support-page .hero-actions .btn{
    width:100% !important;
    min-height:48px !important;
    border-radius:18px !important;
    font-size:.90rem !important;
    padding:10px 14px !important;
  }

  body.demo-download-page .hero-note,
  body.charisma-support-page .hero-note,
  body.demo-download-page .charisma-page-hero .hero-note,
  body.charisma-support-page .charisma-page-hero .hero-note{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:13px auto 0 !important;
    padding:11px 13px !important;
    border-radius:18px !important;
    font-size:.79rem !important;
    line-height:1.9 !important;
    text-align:center !important;
    color:rgba(238,242,255,.84) !important;
    background:rgba(255,255,255,.075) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 16px 36px rgba(0,0,0,.14) !important;
  }

  /* Demo filters should sit below hero, not crash into it */
  body.demo-download-page .demo-filter-section{
    position:relative !important;
    top:auto !important;
    z-index:12 !important;
    margin-top:0 !important;
    padding:16px 0 10px !important;
    background:#f5f7ff !important;
    backdrop-filter:none !important;
  }

  body.demo-download-page .demo-filter-panel{
    border-radius:24px !important;
    padding:12px 10px 13px !important;
  }

  body.demo-download-page .demo-filter-list{
    direction:rtl !important;
    justify-content:flex-start !important;
    padding-bottom:5px !important;
  }

  body.demo-download-page .demo-filter-btn{
    min-height:42px !important;
    padding:0 15px !important;
    border-radius:17px !important;
    font-size:.82rem !important;
  }

  body.demo-download-page .demo-products-section{
    padding-top:16px !important;
  }

  /* Demo product cards: keep text and badge away from screen edges */
  body.demo-download-page .demo-product-card,
  body.demo-download-page .product-card{
    min-height:286px !important;
    border-radius:26px !important;
    margin-inline:auto !important;
  }

  body.demo-download-page .product-badge{
    top:13px !important;
    right:13px !important;
  }

  body.demo-download-page .product-card__content{
    padding-inline:2px !important;
  }

  /* Support page content: true one-column, form-friendly mobile layout */
  body.charisma-support-page .support-main{
    padding:18px 0 42px !important;
    background:#f5f7ff !important;
  }

  body.charisma-support-page .support-main::before{
    top:-20px !important;
    height:36px !important;
    border-top-left-radius:28px !important;
    border-top-right-radius:28px !important;
    background:#f5f7ff !important;
  }

  body.charisma-support-page .support-section-head{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    text-align:right !important;
    margin-bottom:16px !important;
  }

  body.charisma-support-page .support-section-head h2{
    font-size:1.30rem !important;
    line-height:1.55 !important;
  }

  body.charisma-support-page .support-section-head p{
    font-size:.86rem !important;
    line-height:1.9 !important;
  }

  body.charisma-support-page .support-pill{
    width:100% !important;
    justify-content:center !important;
    min-height:42px !important;
    border-radius:16px !important;
    font-size:.80rem !important;
  }

  body.charisma-support-page .support-feature-grid,
  body.charisma-support-page .support-workspace,
  body.charisma-support-page .support-form-grid,
  body.charisma-support-page .support-help-strip{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  body.charisma-support-page .support-feature-card,
  body.charisma-support-page .support-panel,
  body.charisma-support-page .support-online-card,
  body.charisma-support-page .support-info-card,
  body.charisma-support-page .support-help-strip{
    border-radius:24px !important;
    box-shadow:0 18px 46px rgba(15,23,42,.08) !important;
  }

  body.charisma-support-page .support-feature-card{
    min-height:auto !important;
    padding:18px !important;
  }

  body.charisma-support-page .support-feature-icon{
    width:44px !important;
    height:44px !important;
    border-radius:16px !important;
    margin-bottom:10px !important;
  }

  body.charisma-support-page .support-feature-card h3{
    font-size:1rem !important;
    line-height:1.55 !important;
  }

  body.charisma-support-page .support-feature-card p{
    font-size:.84rem !important;
    line-height:1.9 !important;
  }

  body.charisma-support-page .support-panel-header,
  body.charisma-support-page .support-ticket-form{
    padding:18px 16px !important;
  }

  body.charisma-support-page .support-panel-header h2{
    font-size:1.18rem !important;
    line-height:1.55 !important;
  }

  body.charisma-support-page .support-panel-header p{
    font-size:.84rem !important;
    line-height:1.9 !important;
  }

  body.charisma-support-page .support-field{
    margin-bottom:12px !important;
  }

  body.charisma-support-page .support-input,
  body.charisma-support-page .support-select,
  body.charisma-support-page .support-textarea{
    min-height:48px !important;
    border-radius:16px !important;
    font-size:.88rem !important;
    text-align:right !important;
  }

  body.charisma-support-page .support-textarea{
    min-height:124px !important;
  }

  body.charisma-support-page .support-submit-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  body.charisma-support-page .support-submit-row .support-btn,
  body.charisma-support-page .support-btn{
    width:100% !important;
    min-height:48px !important;
    border-radius:17px !important;
  }

  body.charisma-support-page .support-online-card,
  body.charisma-support-page .support-info-card,
  body.charisma-support-page .support-help-strip{
    padding:18px !important;
  }
}

@media (max-width: 420px){
  body.demo-download-page .hero-copy h1,
  body.charisma-support-page .hero-copy h1,
  body.demo-download-page .charisma-page-hero .hero-copy h1,
  body.charisma-support-page .charisma-page-hero .hero-copy h1{
    font-size:1.38rem !important;
    line-height:1.65 !important;
  }

  body.demo-download-page .hero-copy p,
  body.charisma-support-page .hero-copy p{
    font-size:.83rem !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy strong,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy strong{
    font-size:1rem !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy span,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy span{
    max-width:118px !important;
    font-size:.58rem !important;
  }

  body.demo-download-page .demo-filter-btn{
    min-height:40px !important;
    padding:0 13px !important;
    font-size:.78rem !important;
  }
}

/* ==========================================================
   PHASE 4 — Universal Mobile Header System
   Scope: mobile only. Desktop / Windows layout stays untouched.
   ========================================================== */
@media (max-width: 780px){
  html, body{
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* Remove heavy decorative header images on inner-page mobile heroes to prevent logo/text overlap */
  body .charisma-page-hero-shell::before,
  body.demo-download-page .hero-shell.charisma-page-hero-shell::before,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell::before{
    height:430px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(124,58,237,.22), transparent 34%),
      radial-gradient(circle at 86% 8%, rgba(34,211,238,.20), transparent 32%),
      linear-gradient(180deg,#050816 0%,#081326 62%,#10152a 100%) !important;
    background-size:cover !important;
    border-bottom-left-radius:28px !important;
    border-bottom-right-radius:28px !important;
  }

  body .charisma-page-hero-shell::after,
  body.demo-download-page .hero-shell.charisma-page-hero-shell::after,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell::after{
    top:390px !important;
    height:72px !important;
    border-top-left-radius:28px !important;
    border-top-right-radius:28px !important;
  }

  /* One consistent mobile header shell for all public pages */
  body:not(.order-checkout) .site-header,
  body:not(.order-checkout) .charisma-global-header,
  body:not(.order-checkout) .hero-shell > .site-header,
  body:not(.order-checkout) .charisma-page-hero-shell > .site-header,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header{
    position:sticky !important;
    top:0 !important;
    left:auto !important;
    right:auto !important;
    z-index:999 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:0 0 24px 24px !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(139,92,246,.20), transparent 38%),
      radial-gradient(circle at 88% 0%, rgba(34,211,238,.16), transparent 36%),
      linear-gradient(135deg, rgba(5,8,22,.985), rgba(12,18,38,.985)) !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 16px 42px rgba(5,8,22,.24) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    overflow:visible !important;
  }

  body:not(.order-checkout) .site-header > .container,
  body:not(.order-checkout) .site-header .container,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .container,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:9px 12px 10px !important;
  }

  body:not(.order-checkout) .site-header .header-row,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .header-row,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .header-row{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    align-items:center !important;
    gap:8px !important;
    min-height:58px !important;
    padding:0 !important;
  }

  body:not(.order-checkout) .site-header .brand,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .brand,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .brand{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:9px !important;
    min-width:0 !important;
    max-width:100% !important;
    color:#fff !important;
    text-decoration:none !important;
    justify-self:start !important;
    direction:ltr !important;
  }

  body:not(.order-checkout) .site-header .brand img,
  body:not(.order-checkout) .site-header .brand-mark,
  body:not(.order-checkout) .site-header .brand-mark img,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .brand img,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .brand img{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    border-radius:13px !important;
    padding:0 !important;
    object-fit:contain !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    filter:drop-shadow(0 8px 16px rgba(34,211,238,.18)) !important;
  }

  body:not(.order-checkout) .site-header .brand-copy,
  body:not(.order-checkout) .site-header .brand > span,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy{
    min-width:0 !important;
    max-width:calc(100vw - 96px) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    text-align:left !important;
    line-height:1.1 !important;
    color:#fff !important;
  }

  body:not(.order-checkout) .site-header .brand-copy strong,
  body:not(.order-checkout) .site-header .brand strong,
  body:not(.order-checkout) .site-header .brand > span,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy strong,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy strong{
    display:block !important;
    max-width:100% !important;
    color:#fff !important;
    font-size:1.05rem !important;
    line-height:1.15 !important;
    font-weight:950 !important;
    letter-spacing:.01em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    text-shadow:none !important;
  }

  body:not(.order-checkout) .site-header .brand-copy span,
  body:not(.order-checkout) .site-header .brand small,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy span,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .brand-copy span{
    display:block !important;
    max-width:100% !important;
    margin-top:3px !important;
    color:rgba(226,232,240,.72) !important;
    font-size:.58rem !important;
    line-height:1.25 !important;
    font-weight:750 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Menu button: same size on all mobile pages that have the hamburger */
  body:not(.order-checkout) .site-header .menu-toggle,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .menu-toggle,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .menu-toggle{
    display:inline-grid !important;
    place-items:center !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    padding:0 !important;
    border-radius:14px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:rgba(255,255,255,.075) !important;
    color:#fff !important;
    font-size:1.14rem !important;
    line-height:1 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
    justify-self:end !important;
  }

  /* Main navigation: clean dropdown where hamburger exists */
  body:not(.order-checkout) .site-header .main-nav,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav{
    position:absolute !important;
    top:62px !important;
    left:12px !important;
    right:12px !important;
    z-index:1000 !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:6px !important;
    padding:10px !important;
    margin:0 !important;
    border-radius:20px !important;
    background:rgba(7,10,23,.985) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 22px 54px rgba(5,8,22,.34) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    overflow:hidden !important;
  }

  body:not(.order-checkout) .site-header .main-nav.is-open,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav.is-open,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav.is-open{
    display:flex !important;
  }

  body:not(.order-checkout) .site-header .main-nav a,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-height:42px !important;
    padding:0 13px !important;
    border-radius:14px !important;
    color:rgba(255,255,255,.88) !important;
    background:rgba(255,255,255,.045) !important;
    border:1px solid rgba(255,255,255,.06) !important;
    box-shadow:none !important;
    font-size:.84rem !important;
    font-weight:850 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
  }

  body:not(.order-checkout) .site-header .main-nav a[aria-current="page"],
  body:not(.order-checkout) .site-header .main-nav a.active,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[aria-current="page"],
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[aria-current="page"]{
    color:#fff !important;
    background:linear-gradient(135deg,#8b5cf6,#22d3ee) !important;
    border-color:transparent !important;
    box-shadow:0 12px 26px rgba(34,211,238,.18) !important;
  }

  body:not(.order-checkout) .site-header .main-nav a::after,
  body:not(.order-checkout) .site-header .main-nav a::before{
    display:none !important;
    content:none !important;
  }

  /* Pages with old product detail .nav but no hamburger: show a premium horizontal mobile rail */
  body:not(.order-checkout) .site-header > .nav,
  body:not(.order-checkout) .site-header .nav:not(.main-nav),
  body:not(.order-checkout) .site-header > .header-actions{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    margin:0 !important;
    padding:4px 0 0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-wrap:nowrap !important;
    scrollbar-width:none !important;
  }

  body:not(.order-checkout) .site-header > .nav::-webkit-scrollbar,
  body:not(.order-checkout) .site-header .nav:not(.main-nav)::-webkit-scrollbar,
  body:not(.order-checkout) .site-header > .header-actions::-webkit-scrollbar{
    display:none !important;
  }

  body:not(.order-checkout) .site-header > .nav a,
  body:not(.order-checkout) .site-header .nav:not(.main-nav) a,
  body:not(.order-checkout) .site-header > .header-actions a,
  body:not(.order-checkout) .site-header .header-actions .btn{
    flex:0 0 auto !important;
    min-height:34px !important;
    width:auto !important;
    padding:7px 11px !important;
    border-radius:999px !important;
    color:rgba(255,255,255,.88) !important;
    background:rgba(255,255,255,.075) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:none !important;
    font-size:.76rem !important;
    font-weight:850 !important;
    line-height:1.35 !important;
    white-space:nowrap !important;
  }

  body:not(.order-checkout) .site-header > .nav a.active,
  body:not(.order-checkout) .site-header .nav:not(.main-nav) a.active{
    background:linear-gradient(135deg,#8b5cf6,#22d3ee) !important;
    color:#fff !important;
    border-color:transparent !important;
  }

  /* Header auth chips: hidden in compact mobile header to avoid crowding and overlap */
  body:not(.order-checkout) .site-header .header-auth-actions,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .header-auth-actions,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .header-auth-actions{
    display:none !important;
  }

  /* Compact hero under the new mobile header */
  body .charisma-page-hero,
  body.demo-download-page .charisma-page-hero,
  body.charisma-support-page .charisma-page-hero{
    min-height:auto !important;
    padding:26px 0 36px !important;
    text-align:right !important;
  }

  body .charisma-page-hero .hero-copy,
  body.demo-download-page .charisma-page-hero .hero-copy,
  body.charisma-support-page .charisma-page-hero .hero-copy{
    width:100% !important;
    max-width:100% !important;
    text-align:right !important;
    margin:0 !important;
  }

  body .charisma-page-hero .hero-copy h1,
  body.demo-download-page .charisma-page-hero .hero-copy h1,
  body.charisma-support-page .charisma-page-hero .hero-copy h1{
    font-size:1.42rem !important;
    line-height:1.72 !important;
    margin:0 0 10px !important;
    text-align:right !important;
    color:#fff !important;
    letter-spacing:-.02em !important;
  }

  body .charisma-page-hero .hero-copy p,
  body.demo-download-page .charisma-page-hero .hero-copy p,
  body.charisma-support-page .charisma-page-hero .hero-copy p{
    max-width:100% !important;
    font-size:.86rem !important;
    line-height:2.05 !important;
    margin:0 0 14px !important;
    color:rgba(238,242,255,.78) !important;
    text-align:right !important;
  }

  body .charisma-page-hero .hero-actions,
  body.demo-download-page .charisma-page-hero .hero-actions,
  body.charisma-support-page .charisma-page-hero .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    margin:0 0 12px !important;
  }

  body .charisma-page-hero .hero-actions .btn,
  body.demo-download-page .charisma-page-hero .hero-actions .btn,
  body.charisma-support-page .charisma-page-hero .hero-actions .btn{
    width:100% !important;
    min-height:48px !important;
    border-radius:18px !important;
    font-size:.90rem !important;
    padding:0 14px !important;
  }

  body .charisma-page-hero .hero-note,
  body.demo-download-page .charisma-page-hero .hero-note,
  body.charisma-support-page .charisma-page-hero .hero-note{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    text-align:center !important;
    min-height:auto !important;
    padding:13px 14px !important;
    border-radius:18px !important;
    font-size:.80rem !important;
    line-height:1.9 !important;
  }

  /* Order page gets the same mobile header language, scoped only to checkout */
  body.order-checkout .checkout-header{
    position:sticky !important;
    top:0 !important;
    z-index:999 !important;
    border-radius:0 0 24px 24px !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(139,92,246,.20), transparent 38%),
      radial-gradient(circle at 88% 0%, rgba(34,211,238,.16), transparent 36%),
      linear-gradient(135deg, rgba(5,8,22,.985), rgba(12,18,38,.985)) !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 16px 42px rgba(5,8,22,.24) !important;
  }

  body.order-checkout .checkout-header-row{
    width:100% !important;
    min-height:auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    align-items:start !important;
    padding:10px 12px 12px !important;
  }

  body.order-checkout .checkout-brand{
    width:100% !important;
    display:flex !important;
    justify-content:flex-start !important;
    gap:9px !important;
    direction:ltr !important;
  }

  body.order-checkout .checkout-brand img{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:13px !important;
    filter:drop-shadow(0 8px 16px rgba(34,211,238,.18)) !important;
  }

  body.order-checkout .checkout-brand strong{
    font-size:1.05rem !important;
    line-height:1.15 !important;
    color:#fff !important;
  }

  body.order-checkout .checkout-brand span span{
    font-size:.66rem !important;
    line-height:1.35 !important;
    color:rgba(226,232,240,.72) !important;
  }

  body.order-checkout .checkout-header-center{
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    gap:7px !important;
    justify-content:flex-start !important;
    padding:6px 0 0 !important;
    scrollbar-width:none !important;
  }
  body.order-checkout .checkout-header-center::-webkit-scrollbar{display:none !important;}

  body.order-checkout .checkout-header-center span,
  body.order-checkout .checkout-header-center b{
    flex:0 0 auto !important;
    font-size:.70rem !important;
    color:rgba(238,242,255,.76) !important;
    white-space:nowrap !important;
  }

  body.order-checkout .checkout-header-actions{
    width:100% !important;
    display:flex !important;
    justify-content:flex-start !important;
    gap:7px !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    padding-top:4px !important;
    scrollbar-width:none !important;
  }
  body.order-checkout .checkout-header-actions::-webkit-scrollbar{display:none !important;}

  body.order-checkout .checkout-header-actions a{
    flex:0 0 auto !important;
    min-height:34px !important;
    padding:7px 11px !important;
    border-radius:999px !important;
    font-size:.74rem !important;
    font-weight:850 !important;
    white-space:nowrap !important;
    box-shadow:none !important;
  }
}

@media (max-width: 420px){
  body:not(.order-checkout) .site-header > .container,
  body:not(.order-checkout) .site-header .container{
    padding-inline:10px !important;
  }

  body:not(.order-checkout) .site-header .brand-copy strong,
  body:not(.order-checkout) .site-header .brand strong,
  body:not(.order-checkout) .site-header .brand > span,
  body.order-checkout .checkout-brand strong{
    font-size:.98rem !important;
  }

  body .charisma-page-hero .hero-copy h1,
  body.demo-download-page .charisma-page-hero .hero-copy h1,
  body.charisma-support-page .charisma-page-hero .hero-copy h1{
    font-size:1.28rem !important;
    line-height:1.78 !important;
  }
}

/* PHASE 4 — compact mobile header support for account/auth/ticket pages using .topbar/.header-shell */
@media (max-width: 780px){
  body .header-shell,
  body header.topbar,
  body .wrap > header.topbar{
    position:sticky !important;
    top:0 !important;
    z-index:999 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:0 0 24px 24px !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(139,92,246,.20), transparent 38%),
      radial-gradient(circle at 88% 0%, rgba(34,211,238,.16), transparent 36%),
      linear-gradient(135deg, rgba(5,8,22,.985), rgba(12,18,38,.985)) !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 16px 42px rgba(5,8,22,.24) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    overflow:visible !important;
  }

  body .header-shell > .topbar,
  body header.topbar,
  body .wrap > header.topbar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:9px !important;
    flex-wrap:wrap !important;
    padding:9px 12px 10px !important;
  }

  body .header-shell .brand,
  body header.topbar .brand,
  body .wrap > header.topbar .brand{
    color:#fff !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:9px !important;
    min-width:0 !important;
    max-width:100% !important;
    font-size:1.05rem !important;
    line-height:1.15 !important;
    font-weight:950 !important;
    direction:ltr !important;
  }

  body .header-shell .brand img,
  body header.topbar .brand img,
  body .wrap > header.topbar .brand img{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:13px !important;
    object-fit:contain !important;
    filter:drop-shadow(0 8px 16px rgba(34,211,238,.18)) !important;
  }

  body .header-shell .nav,
  body header.topbar .nav,
  body .wrap > header.topbar .nav,
  body .header-shell .auth-header-actions{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    margin:0 !important;
    padding:4px 0 0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-wrap:nowrap !important;
    scrollbar-width:none !important;
  }

  body .header-shell .nav::-webkit-scrollbar,
  body header.topbar .nav::-webkit-scrollbar,
  body .wrap > header.topbar .nav::-webkit-scrollbar,
  body .header-shell .auth-header-actions::-webkit-scrollbar{display:none !important;}

  body .header-shell .nav a,
  body header.topbar .nav a,
  body .wrap > header.topbar .nav a,
  body .header-shell .auth-header-actions a{
    flex:0 0 auto !important;
    min-height:34px !important;
    width:auto !important;
    padding:7px 11px !important;
    border-radius:999px !important;
    color:rgba(255,255,255,.88) !important;
    background:rgba(255,255,255,.075) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:none !important;
    font-size:.76rem !important;
    font-weight:850 !important;
    line-height:1.35 !important;
    white-space:nowrap !important;
  }

  body .header-shell .nav a.active,
  body header.topbar .nav a.active,
  body .wrap > header.topbar .nav a.active{
    background:linear-gradient(135deg,#8b5cf6,#22d3ee) !important;
    color:#fff !important;
    border-color:transparent !important;
  }
}


/* =========================================================
   FIX: unify demo/support mobile dropdown with home/products
   فقط موبایل: منوی سه‌خط صفحات تست و پشتیبانی دقیقاً مثل خانه/محصولات کارت‌محور و لوکس نمایش داده شود.
   ========================================================= */
@media (max-width: 980px){
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav{
    position:absolute !important;
    top:62px !important;
    left:12px !important;
    right:12px !important;
    z-index:1000 !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:8px !important;
    width:auto !important;
    max-height:calc(100vh - 110px) !important;
    overflow:auto !important;
    padding:12px !important;
    margin:0 !important;
    border-radius:24px !important;
    background:linear-gradient(145deg,rgba(7,11,25,.985),rgba(12,20,42,.985)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 26px 80px rgba(0,0,0,.38) !important;
    backdrop-filter:blur(22px) !important;
    -webkit-backdrop-filter:blur(22px) !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav.is-open,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav.is-open{
    display:flex !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[href$="demo.html"],
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[href$="support.html"]{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:48px !important;
    width:100% !important;
    padding:12px 14px !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.06) !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    background:rgba(255,255,255,.045) !important;
    color:rgba(255,255,255,.88) !important;
    opacity:1 !important;
    box-shadow:none !important;
    font-size:.84rem !important;
    font-weight:900 !important;
    line-height:1.5 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[aria-current="page"],
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[aria-current="page"],
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[href$="demo.html"],
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a[href$="support.html"]{
    color:#fff !important;
    background:linear-gradient(135deg,#8b5cf6,#22d3ee) !important;
    border-color:transparent !important;
    border-bottom:1px solid transparent !important;
    border-radius:16px !important;
    box-shadow:0 12px 26px rgba(34,211,238,.18) !important;
    padding:12px 14px !important;
  }

  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a::before,
  body.demo-download-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a::after,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a::before,
  body.charisma-support-page .hero-shell.charisma-page-hero-shell > .site-header .main-nav a::after{
    display:none !important;
    content:none !important;
  }
}


/* =========================================================
   PHASE 5: Mobile sticky CTA — sales/conversion safe action bar
   فقط موبایل: دسکتاپ/ویندوز را تغییر نمی‌دهد.
   ========================================================= */
.charisma-mobile-sticky-cta{display:none;}

@media (max-width: 860px){
  body.charisma-has-mobile-sticky-cta{
    padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .charisma-mobile-sticky-cta{
    position:fixed !important;
    right:10px !important;
    left:10px !important;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:2147482800 !important;
    display:block !important;
    direction:rtl !important;
    pointer-events:auto !important;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  }

  .charisma-mobile-sticky-cta__inner{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    min-height:64px !important;
    padding:9px !important;
    border-radius:24px !important;
    background:linear-gradient(135deg,rgba(7,12,27,.94),rgba(12,22,45,.91)) !important;
    border:1px solid rgba(255,255,255,.13) !important;
    box-shadow:0 22px 68px rgba(2,6,23,.34), inset 0 1px 0 rgba(255,255,255,.10) !important;
    backdrop-filter:blur(22px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(145%) !important;
  }

  .charisma-mobile-sticky-cta__hint{
    position:absolute !important;
    right:18px !important;
    top:-15px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:24px !important;
    padding:3px 10px !important;
    border-radius:999px !important;
    color:#fff !important;
    background:linear-gradient(135deg,#8b5cf6,#22d3ee) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    box-shadow:0 12px 28px rgba(34,211,238,.18) !important;
    font-size:.68rem !important;
    font-weight:950 !important;
    letter-spacing:-.1px !important;
    white-space:nowrap !important;
  }

  .charisma-mobile-sticky-cta__btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:46px !important;
    padding:10px 12px !important;
    border-radius:17px !important;
    font-family:inherit !important;
    font-size:.84rem !important;
    font-weight:950 !important;
    line-height:1.35 !important;
    text-align:center !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    border:1px solid rgba(255,255,255,.12) !important;
    transition:transform .16s ease, filter .16s ease, box-shadow .16s ease !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .charisma-mobile-sticky-cta__btn:active{
    transform:scale(.985) !important;
  }

  .charisma-mobile-sticky-cta__btn--primary{
    color:#061528 !important;
    background:linear-gradient(135deg,#ffffff,#dff7ff 48%,#fff2bd) !important;
    border-color:rgba(255,255,255,.62) !important;
    box-shadow:0 12px 30px rgba(255,255,255,.12), 0 12px 26px rgba(34,211,238,.18) !important;
  }

  .charisma-mobile-sticky-cta__btn--secondary{
    color:#fff !important;
    background:linear-gradient(135deg,#7c3aed,#22d3ee) !important;
    border-color:rgba(255,255,255,.14) !important;
    box-shadow:0 12px 26px rgba(124,58,237,.22) !important;
  }

  body.charisma-mobile-menu-open .charisma-mobile-sticky-cta,
  body.charisma-mobile-input-focus .charisma-mobile-sticky-cta{
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(18px) !important;
    pointer-events:none !important;
  }

  body.charisma-has-mobile-sticky-cta .goftino-fallback,
  body.charisma-has-mobile-sticky-cta iframe[src*="goftino"],
  body.charisma-has-mobile-sticky-cta iframe[id*="goftino"],
  body.charisma-has-mobile-sticky-cta iframe[name*="goftino"],
  body.charisma-has-mobile-sticky-cta [id*="goftino"],
  body.charisma-has-mobile-sticky-cta [class*="goftino"]{
    bottom:calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 380px){
  .charisma-mobile-sticky-cta{
    right:8px !important;
    left:8px !important;
  }
  .charisma-mobile-sticky-cta__inner{
    gap:7px !important;
    padding:8px !important;
    border-radius:22px !important;
  }
  .charisma-mobile-sticky-cta__btn{
    min-height:44px !important;
    padding:9px 8px !important;
    border-radius:15px !important;
    font-size:.77rem !important;
  }
  .charisma-mobile-sticky-cta__hint{
    right:15px !important;
    font-size:.64rem !important;
  }
}


/* =========================================================
   PHASE 6: Mobile speed / image stability
   فقط موبایل: کاهش فشار تصویرهای بزرگ، جلوگیری از پرش چیدمان و هماهنگی با CTA چسبان.
   ========================================================= */
@media (max-width: 768px){
  html{scroll-behavior:smooth;}
  img{max-width:100%;height:auto;}
  .hero-visual,
  .demo-image-header > img,
  .product-hero__visual,
  .support-hero__visual{
    content-visibility:auto;
    contain-intrinsic-size: 320px 180px;
  }
  .product-page-card::before,
  .product-card::before,
  .hero-shell::before,
  .demo-hero::before,
  .support-hero::before{
    background-size:cover;
  }
  .shot-inner img,
  .dashboard-frame img{
    aspect-ratio: 1280 / 621;
    object-fit:cover;
    background:rgba(255,255,255,.04);
  }
  .charisma-footer img,
  .footer-logo-row img{
    contain:layout paint;
  }
}

/* =========================================================
   PHASE 7: Mobile QA final polish
   هدف: تست نهایی، یکدست‌سازی ریزه‌کاری‌ها و جلوگیری از بهم‌ریختگی موبایل
   فقط روی موبایل فعال است و نسخه دسکتاپ/ویندوز را تغییر نمی‌دهد.
   ========================================================= */
@media (max-width: 860px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    text-rendering:optimizeLegibility !important;
    -webkit-font-smoothing:antialiased !important;
  }

  body:not(.charisma-has-mobile-sticky-cta){
    padding-bottom:24px !important;
  }

  .container,
  .wrap,
  main,
  section,
  .hero,
  .hero-section,
  .charisma-page-hero,
  .products-section,
  .demo-products,
  .support-section,
  .checkout-main{
    max-width:100% !important;
  }

  input,
  select,
  textarea,
  button{
    font-size:16px !important;
  }

  input,
  select,
  textarea{
    width:100% !important;
    max-width:100% !important;
    min-height:48px !important;
    border-radius:16px !important;
  }

  textarea{
    min-height:116px !important;
    line-height:1.9 !important;
  }

  .form-grid,
  .support-form-grid,
  .ticket-form-grid,
  .checkout-form-grid,
  .order-form-grid,
  .edit-form,
  .ticket-claim-box .form-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .field,
  label.field{
    width:100% !important;
    min-width:0 !important;
  }

  .btn,
  button.btn,
  a.btn,
  .product-action,
  .demo-detail-link,
  .demo-download-link{
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    word-break:normal !important;
    line-height:1.55 !important;
  }

  .section-head,
  .section-head--split,
  .products-list-head,
  .panel-head,
  .checkout-section-head{
    gap:10px !important;
  }

  .section-head p,
  .hero-copy p,
  .charisma-page-hero p,
  .product-page-card__desc,
  .demo-product-card p,
  .support-card p,
  .empty span{
    text-align:center !important;
    overflow-wrap:anywhere !important;
  }

  /* یکدست‌سازی هدر و منوی موبایل برای صفحات عمومی */
  .site-header,
  header.site-header{
    isolation:isolate !important;
  }

  .main-nav{
    overscroll-behavior:contain !important;
    scrollbar-width:none !important;
  }
  .main-nav::-webkit-scrollbar{display:none !important;}

  .main-nav a{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* صفحات محصول داخل پوشه p: هدر و کارت‌ها در موبایل */
  body > .header,
  .header{
    width:min(100% - 22px, 980px) !important;
    margin:10px auto 0 !important;
    padding:12px !important;
    border-radius:24px !important;
    align-items:stretch !important;
    gap:10px !important;
  }

  .header .brand{
    width:100% !important;
    justify-content:center !important;
    min-width:0 !important;
    gap:9px !important;
  }

  .header .brand img{
    width:38px !important;
    height:38px !important;
    object-fit:contain !important;
  }

  .header .nav{
    width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    gap:8px !important;
    overflow-x:auto !important;
    padding:4px 2px 2px !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .header .nav::-webkit-scrollbar{display:none !important;}

  .header .nav a{
    flex:0 0 auto !important;
    min-height:38px !important;
    padding:8px 12px !important;
    border-radius:999px !important;
    font-size:.76rem !important;
    line-height:1.4 !important;
    white-space:nowrap !important;
  }

  .hero{
    padding:22px 0 18px !important;
  }

  .hero-card{
    padding:20px !important;
    border-radius:28px !important;
  }

  .hero-card h1{
    font-size:clamp(1.55rem, 7vw, 2.15rem) !important;
    line-height:1.45 !important;
    text-align:center !important;
  }

  .hero-card p{
    text-align:center !important;
    line-height:2 !important;
  }

  .grid,
  .mini-grid,
  .stats,
  .ticket-summary{
    grid-template-columns:1fr !important;
  }

  .mini-card,
  .mini,
  .stat{
    border-radius:22px !important;
  }

  .cta,
  .quick,
  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
  }

  .cta .btn,
  .quick .btn,
  .hero-actions .btn{
    width:100% !important;
  }

  /* حساب کاربری، ورود، عضویت و پیگیری‌ها */
  .wrap > .site-header{
    padding:12px !important;
    border-radius:24px !important;
  }

  .wrap > .site-header .brand{
    justify-content:center !important;
    width:100% !important;
  }

  .wrap > .site-header .nav,
  header.topbar .nav,
  .header-shell .nav{
    width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    gap:8px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    padding:4px 2px 2px !important;
  }

  .wrap > .site-header .nav::-webkit-scrollbar,
  header.topbar .nav::-webkit-scrollbar,
  .header-shell .nav::-webkit-scrollbar{display:none !important;}

  .wrap > .site-header .nav a,
  header.topbar .nav a,
  .header-shell .nav a{
    flex:0 0 auto !important;
    min-height:38px !important;
    padding:8px 12px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    font-size:.76rem !important;
  }

  .profile-head,
  .profile-row,
  .order-title,
  .order-meta,
  .ticket-actions{
    min-width:0 !important;
  }

  .order-card,
  .ticket-card{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    align-items:stretch !important;
  }

  .order-card .btn,
  .ticket-card .btn{
    width:100% !important;
  }

  .order-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:7px !important;
  }

  .order-meta span,
  .status,
  .ticket-code{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }

  /* فرم خرید: خوانا، بدون زوم ناخواسته و بدون پوشانده شدن با CTA */
  body.order-checkout .checkout-main,
  body.order-checkout main{
    padding-bottom:110px !important;
  }

  body.order-checkout .checkout-card,
  body.order-checkout .order-card,
  body.order-checkout .summary-card{
    border-radius:24px !important;
  }

  body.order-checkout .checkout-header-center{
    scroll-snap-type:x proximity !important;
  }

  body.order-checkout .checkout-header-center a{
    scroll-snap-align:start !important;
  }

  /* چت‌باکس و CTA: اولویت با لمس دکمه‌ها */
  .charisma-mobile-sticky-cta{
    transform:translateZ(0) !important;
  }

  body.charisma-mobile-scrolled .charisma-mobile-sticky-cta__hint{
    opacity:.92 !important;
  }

  /* فرم‌ها و صفحات پشتیبانی/تست: هیچ آیتمی از کادر بیرون نزند */
  body.demo-download-page .demo-filter-panel,
  body.demo-download-page .demo-products-grid,
  body.charisma-support-page .support-form,
  body.charisma-support-page .support-card,
  body.charisma-support-page .ticket-card{
    max-width:100% !important;
    overflow:hidden !important;
  }

  body.demo-download-page .demo-filter-btn,
  body.charisma-support-page .support-card a,
  body.charisma-support-page .support-card button{
    white-space:normal !important;
  }
}

@media (max-width: 420px){
  .container,
  .site-header .container,
  .cta-section .container,
  .site-footer .container,
  .charisma-footer .container,
  .wrap{
    width:calc(100% - 22px) !important;
  }

  .brand-copy strong{
    font-size:1rem !important;
    max-width:160px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .brand-copy span{
    max-width:150px !important;
  }

  .main-nav{
    left:10px !important;
    right:10px !important;
    border-radius:22px !important;
  }

  .main-nav a{
    min-height:46px !important;
    padding:11px 12px !important;
    font-size:.80rem !important;
  }

  .product-page-card,
  .demo-product-card,
  .support-card,
  .account-card,
  .order-card,
  .section,
  .mini,
  .stat{
    border-radius:22px !important;
  }

  .section-head h2,
  .products-list-head h2,
  .section-title h2,
  .buy-main h2{
    font-size:1.38rem !important;
  }

  .charisma-mobile-sticky-cta__inner{
    min-height:62px !important;
  }
}