:root{
    --bg:#F4F6FA;
    --card-bg:#FFFFFF;
    --card-border: rgba(15,23,42,0.06);
    --text-1:#0F172A;
    --text-2:#64748B;
    --text-3:#94A3B8;
    --primary:#2563EB;
    --primary-2:#38BDF8;
    --shadow: 0 20px 40px -12px rgba(15,23,42,0.12), 0 4px 10px -4px rgba(15,23,42,0.06);
    --shadow-sm: 0 6px 16px -4px rgba(15,23,42,0.10);
    --pill-bg: rgba(15,23,42,0.05);
    --divider: rgba(15,23,42,0.07);
    --scrim: rgba(15,23,42,0.45);
    --sheet-bg:#FFFFFF;
    --success:#16A34A;
    --success-2:#22C55E;
    --purple:#7C3AED;
    --purple-2:#A855F7;
    --cyan:#0891B2;
    --cyan-2:#22D3EE;
    --radius-lg:24px;
    --radius-md:20px;
    --radius-sm:14px;
    --transition: 320ms cubic-bezier(.22,.9,.31,1);
  }

  html.dark{
    --bg:#0B0F19;
    --card-bg:#141A29;
    --card-border: rgba(255,255,255,0.06);
    --text-1:#F1F5F9;
    --text-2:#94A3B8;
    --text-3:#64748B;
    --primary:#3B82F6;
    --primary-2:#38BDF8;
    --shadow: 0 24px 48px -12px rgba(0,0,0,0.55), 0 4px 14px -4px rgba(0,0,0,0.4);
    --shadow-sm: 0 8px 20px -4px rgba(0,0,0,0.5);
    --pill-bg: rgba(255,255,255,0.06);
    --divider: rgba(255,255,255,0.08);
    --scrim: rgba(0,0,0,0.6);
    --sheet-bg:#141A29;
  }

  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    background: var(--bg);
    min-height:100vh;
    font-family:'Vazirmatn','Inter',sans-serif;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding: 28px 14px 60px;
    transition: background var(--transition);
    color:var(--text-1);
  }
  body.en{ font-family:'Inter','Vazirmatn',sans-serif; }

  .phone{
    width:100%;
    max-width:400px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  /* Header controls */
  .header-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding: 0 2px;
  }
  .controls-group{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .theme-toggle{
    position:relative;
    display:flex;
    background: var(--pill-bg);
    border:1px solid var(--card-border);
    border-radius:999px;
    padding:3px;
    gap:2px;
  }
  .theme-indicator{
    position:absolute;
    top:3px;
    bottom:3px;
    left:3px;
    width:38px;
    border-radius:999px;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 4px 12px rgba(37,99,235,0.35);
    transition: left var(--transition);
    z-index:0;
  }
  .theme-toggle button{
    position:relative;
    z-index:1;
    border:none;
    background:transparent;
    color:var(--text-2);
    width:38px;
    padding:7px 0;
    border-radius:999px;
    cursor:pointer;
    transition: color var(--transition);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .theme-toggle button svg{ width:15px; height:15px; }
  .theme-toggle button.active{ color:#fff; }
  .theme-toggle button:not(.active){ color: var(--text-3); }

  .lang-switch{
    position:relative;
    display:flex;
    background: var(--pill-bg);
    border:1px solid var(--card-border);
    border-radius:999px;
    padding:3px;
    gap:2px;
  }
  .lang-indicator{
    position:absolute;
    top:3px;
    bottom:3px;
    left:3px;
    width:38px;
    border-radius:999px;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 4px 12px rgba(37,99,235,0.35);
    transition: left var(--transition);
    z-index:0;
  }
  .lang-switch button{
    position:relative;
    z-index:1;
    border:none;
    background:transparent;
    color:var(--text-2);
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:12.5px;
    width:38px;
    padding:7px 0;
    border-radius:999px;
    cursor:pointer;
    transition: color var(--transition);
    letter-spacing:0.3px;
    text-align:center;
  }
  .lang-switch button.active{
    color:#fff;
  }

  /* Card */
  .card{
    background: var(--card-bg);
    border:1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:18px;
    transition: background var(--transition), border-color var(--transition);
  }

  .profile-row{
    display:flex;
    align-items:center;
    gap:5px;
  }
  html[dir="ltr"] .profile-row{ flex-direction:row-reverse; }

  .avatar-wrap{
    position:relative;
    flex-shrink:0;
    width:81px;
    height:81px;
    border-radius:50%;
    overflow:hidden;
    border:3px solid var(--card-bg);
    box-shadow: 0 0 0 2px var(--primary), var(--shadow-sm);
  }
  .avatar{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: center 22%;
    transform: scale(1.55);
    transform-origin: center 30%;
    display:block;
  }

  .name-block{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .name-block{ text-align:right; align-items:flex-start; }
  html[dir="ltr"] .name-block{ align-items:flex-end; }

  .name-block h1{
    margin:0;
    font-size:21px;
    font-weight:800;
    color:var(--text-1);
    letter-spacing:-0.2px;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .name-block p{
    margin:0;
    font-size:13px;
    color:var(--text-2);
    font-weight:500;
  }
  body.en .name-block p{ text-align:left; }
  body.en .name-block h1{ text-align:left; }
  body.en .name-block{ align-items:flex-end; }
  /* Brand carousel */
  .brand-carousel{
    display:flex;
    align-items:center;
    gap:10px;
    background: var(--pill-bg);
    border-radius: var(--radius-md);
    padding:12px 12px;
  }
  .brand-track{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
    min-width:0;
    overflow:hidden;
    scrollbar-width:none;
  }
  .brand-track::-webkit-scrollbar{ display:none; }
  .more-badge{
    flex-shrink:0;
    width:46px;
    height:46px;
    border-radius:50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: var(--shadow-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    cursor:pointer;
    padding:2px;
    color:#fff;
    transition: transform 200ms ease;
  }
  .more-badge:active{ transform: scale(0.92); }
  .more-badge span{
    font-size:10.5px;
    font-weight:800;
    line-height:1.05;
    text-align:center;
    white-space:nowrap;
  }
  .more-circle-placeholder{
    flex-shrink:0;
    width:56px;
    height:56px;
    border-radius:50%;
    background: var(--pill-bg);
    border: 1px dashed var(--divider);
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--text-3);
    font-weight:800;
    font-size:20px;
    letter-spacing:1px;
  }
  .brand-badge{
    flex-shrink:0;
    width:46px;
    height:46px;
    border-radius:50%;
    background:#fff;
    box-shadow: var(--shadow-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4px;
    overflow:hidden;
    transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1), opacity 620ms ease, margin 620ms ease, width 620ms ease;
  }
  .brand-badge:active{ transform: scale(0.92); }
  .brand-badge.badge-leave{
    opacity:0;
    transform: translateX(-24px) scale(0.7);
    width:0;
    margin-inline-end:-10px;
    pointer-events:none;
  }
  .brand-badge.badge-enter-prep{
    opacity:0;
    transform: translateX(24px) scale(0.7);
  }
  .brand-badge.badge-enter-active{
    opacity:1;
    transform: translateX(0) scale(1);
  }
  .brand-badge img{
    width:100%;
    height:100%;
    object-fit:contain;
  }

  /* Phone number box */
  .phone-box{
    position:relative;
    display:flex;
    align-items:center;
    background: var(--card-bg);
    border:1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding:14px 16px;
    text-decoration:none;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  }
  .phone-box:hover{
    transform: scale(1.02);
    border-color: var(--primary);
    box-shadow: 0 10px 22px -8px rgba(37,99,235,0.35), var(--shadow-sm);
  }
  .phone-box:active{ transform: scale(0.97); }
  .phone-box .icon-circle{
    position:absolute;
    left:16px;
    top:50%;
    transform: translateY(-50%);
    flex-shrink:0;
    width:38px;
    height:38px;
    border-radius:50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 6px 14px -6px rgba(37,99,235,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
    transition: box-shadow 160ms ease;
  }
  .phone-box:hover .icon-circle{ box-shadow: 0 6px 16px -4px rgba(37,99,235,0.75); }
  .phone-box .icon-circle svg{ width:17px; height:17px; color:#fff; }
  .phone-box-number{
    display:block;
    width:100%;
    text-align:center;
    font-family:'Vazirmatn','Inter',sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight:700;
    font-size:15px;
    color:var(--text-1);
    letter-spacing:0.2px;
    transition: color 160ms ease;
  }
  .phone-box:hover .phone-box-number{ color: var(--primary); }

  /* Warehouse image */
  .hero-image{
    position:relative;
    border-radius: var(--radius-md);
    overflow:hidden;
    box-shadow: var(--shadow-sm);
    aspect-ratio: 4/3;
  }
  .hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .hero-caption-row{
    position:absolute;
    inset-inline-start:12px;
    bottom:12px;
    display:flex;
    gap:8px;
  }
  .hero-caption{
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(8px);
    color:#fff;
    font-size:11.5px;
    font-weight:600;
    padding:6px 12px;
    border-radius:999px;
  }

  /* Action buttons */
  .actions-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .action-btn{
    position:relative;
    border:none;
    border-radius: var(--radius-sm);
    padding:18px 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
    overflow:hidden;
    transition: transform 160ms ease, box-shadow var(--transition);
    text-align:center;
    font-family:inherit;
  }
  .action-btn:active{ transform: scale(0.96); }
  .btn-call:hover, .btn-sms:hover, .btn-save:hover, .btn-share:hover{
    transform: scale(1.035);
    z-index:2;
  }
  .action-btn .icon-circle{
    width:34px;
    height:34px;
    border-radius:50%;
    background: rgba(255,255,255,0.22);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .action-btn .icon-circle svg{ width:17px; height:17px; color:#fff; }
  .action-btn .label{
    color:#fff;
    font-weight:700;
    font-size:13.5px;
    text-align:center;
  }
  .btn-call{ background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 10px 22px -8px rgba(37,99,235,0.55); }
  .btn-sms{ background: linear-gradient(135deg, var(--cyan), var(--cyan-2)); box-shadow: 0 10px 22px -8px rgba(8,145,178,0.5); }
  .btn-save{ background: linear-gradient(135deg, var(--success), var(--success-2)); box-shadow: 0 10px 22px -8px rgba(22,163,74,0.5); }
  .btn-share{ background: linear-gradient(135deg, var(--purple), var(--purple-2)); box-shadow: 0 10px 22px -8px rgba(124,58,237,0.5); }

  /* Bottom sheet */
  .sheet-overlay{
    position:fixed;
    inset:0;
    background: var(--scrim);
    backdrop-filter: blur(3px);
    opacity:0;
    pointer-events:none;
    transition: opacity var(--transition);
    z-index:50;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .sheet-overlay.open{ opacity:1; pointer-events:auto; }

  .sheet{
    width:100%;
    max-width:400px;
    background: var(--sheet-bg);
    border-radius: 28px 28px 0 0;
    padding:10px 20px 26px;
    transform: translateY(100%);
    transition: transform var(--transition);
    box-shadow: 0 -20px 50px rgba(0,0,0,0.25);
  }
  .sheet-overlay.open .sheet{ transform: translateY(0); }

  .sheet-handle{
    width:40px;
    height:4px;
    border-radius:999px;
    background: var(--divider);
    margin: 6px auto 16px;
  }

  .sheet-profile{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
  }
  html[dir="ltr"] .sheet-profile{ flex-direction:row-reverse; }
  .sheet-profile img{
    width:48px; height:48px;
    border-radius:50%;
    object-fit:cover;
  }
  .sheet-profile div h3{ margin:0; font-size:15px; color:var(--text-1); }
  .sheet-profile div p{ margin:2px 0 0; font-size:12px; color:var(--text-2); }

  .qr-box{
    display:flex;
    justify-content:center;
    margin-bottom:18px;
  }
  .qr-placeholder{
    width:150px;
    height:150px;
    border-radius:18px;
    background: var(--pill-bg);
    border: 1px dashed var(--divider);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    color: var(--text-3);
  }
  .qr-placeholder svg{ width:46px; height:46px; opacity:0.6; }
  .qr-placeholder span{ font-size:10.5px; font-weight:600; }
  .qr-image{
    width:150px;
    height:150px;
    border-radius:18px;
    background:#fff;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    padding:8px;
    box-sizing:border-box;
  }
  .qr-image img{ width:100%; height:100%; display:block; object-fit:contain; }

  .url-row{
    display:flex;
    align-items:center;
    gap:8px;
    background: var(--pill-bg);
    border-radius: var(--radius-sm);
    padding:12px 14px;
    margin-bottom:16px;
  }
  .url-row span{
    flex:1;
    font-size:12.5px;
    color: var(--text-2);
    direction:ltr;
    text-align:left;
    unicode-bidi: isolate;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .copy-btn{
    border:none;
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    width:32px; height:32px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    color: var(--primary);
    flex-shrink:0;
  }
  .copy-btn svg{ width:15px; height:15px; }

  .share-main-btn{
    width:100%;
    border:none;
    border-radius: var(--radius-sm);
    padding:15px;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color:#fff;
    font-weight:700;
    font-size:14.5px;
    font-family:inherit;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    box-shadow: 0 10px 22px -8px rgba(37,99,235,0.5);
    margin-bottom:10px;
  }
  .share-main-btn svg{ width:17px; height:17px; }

  .cancel-btn{
    width:100%;
    border:none;
    background: transparent;
    color: var(--text-2);
    font-weight:700;
    font-size:14px;
    font-family:inherit;
    padding:13px;
    cursor:pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
  }
  .cancel-btn:active{ background: var(--pill-bg); }
  .cancel-btn:hover{ background: var(--primary); color:#fff; }

  .footer-credit{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:2px;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--divider);
    text-decoration:none;
    cursor:pointer;
  }
  .footer-credit span{
    display:block;
    text-align:center;
    width:100%;
  }
  .footer-credit-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    direction:ltr;
  }
  body.en .footer-credit-row{
    flex-direction:row-reverse;
  }
  .footer-credit-row span{
    width:auto;
  }
  .footer-credit-label{
    font-size:16px;
    font-weight:600;
    color: var(--text-3);
    unicode-bidi: plaintext;
  }
  .footer-credit-url{
    font-size:16px;
    font-weight:800;
    color: var(--primary);
    letter-spacing:0.2px;
  }

  /* Vizitema footer logo — logo stays fully static; random scanning light streaks behind it */
  .footer-logo-wrap{
    position:relative;
    width:23px;
    height:23px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .footer-logo-img{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }
  .footer-logo-ambient{
    position:absolute;
    inset:-45%;
    z-index:1;
    border-radius:50%;
    background: radial-gradient(circle, rgba(56,189,248,0.20) 0%, rgba(34,211,238,0.10) 45%, rgba(34,211,238,0) 75%);
    pointer-events:none;
  }
  .scan-beam{ display:none; }

  /* ===== Vizitema footer logo animation =====
     Logo image itself never moves. A bright glossy light chases around
     it in a ring: it cruises at a steady pace, suddenly bursts forward
     fast, then eases back to the same steady pace — repeating forever
     in a 4s cycle, never pausing or stopping. */
  .footer-logo-shine{
    position:absolute;
    inset:-32%;
    z-index:1;
    border-radius:50%;
    background: conic-gradient(from 0deg,
      transparent 0deg,
      transparent 128deg,
      rgba(103,232,249,0.30) 155deg,
      rgba(186,230,253,0.75) 168deg,
      rgba(224,242,254,0.96) 176deg,
      #ffffff 184deg,
      rgba(224,242,254,0.96) 192deg,
      rgba(186,230,253,0.75) 200deg,
      rgba(103,232,249,0.30) 213deg,
      transparent 240deg,
      transparent 360deg
    );
    -webkit-mask: radial-gradient(circle, transparent 50%, #000 58%, #000 90%, transparent 97%);
            mask: radial-gradient(circle, transparent 50%, #000 58%, #000 90%, transparent 97%);
    filter: drop-shadow(0 0 3px rgba(224,242,254,0.95)) drop-shadow(0 0 7px rgba(56,189,248,0.85));
    pointer-events:none;
    animation: footerLogoShine 4s cubic-bezier(0.45,0,0.55,1) infinite;
  }
  @keyframes footerLogoShine{
    0%   { transform: rotate(0deg); }
    40%  { transform: rotate(96deg); }
    48%  { transform: rotate(236deg); }
    100% { transform: rotate(360deg); }
  }

  .brands-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:14px;
    justify-items:center;
    padding: 4px 2px 20px;
  }
  .brand-badge.lg{
    width:56px;
    height:56px;
    padding:4px;
  }

  .toast{
    position:fixed;
    bottom:24px;
    left:50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--text-1);
    color: var(--bg);
    padding:11px 20px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:600;
    opacity:0;
    pointer-events:none;
    transition: all var(--transition);
    z-index:100;
    white-space:nowrap;
  }
  .toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

  @media (prefers-reduced-motion: reduce){
    *{ transition: none !important; }
  }