:root {
      /* --- Dark Theme Variables (Metallic Black & Blue) --- */
      --bg: #111111;
      --card-bg: #1a1a1a;
      --text-color: #f0f0f0;
      --muted-color: #b0b0b0;
      --border-color: rgba(255,255,255,0.08);
      --header-bg: rgba(26, 26, 26, 0.8);
      --shadow-color: rgba(0, 0, 0, 0.5);
      --accent: #007BFF;
      --accent-2: #0056b3;
    }

    /* --- Light Theme Variables (White & Purple) --- */
    body.light-theme {
      --bg: #f8f9fa;
      --card-bg: #ffffff;
      --text-color: #212529;
      --muted-color: #6c757d;
      --border-color: rgba(0, 0, 0, 0.1);
      --header-bg: rgba(255, 255, 255, 0.9);
      --shadow-color: rgba(0, 0, 0, 0.1);
      --accent: #6f42c1;
      --accent-2: #5a2d91;
    }

    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:'Vazirmatn',system-ui,-apple-system,'Segoe UI',Roboto,"Helvetica Neue",Arial; background: var(--bg); color: var(--text-color); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height: 1.6;}
    html,body{overflow:hidden}

    /* --- Tubes Cursor Effect Styles --- */
    #app {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }
    
    #canvas {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      z-index: 1;
    }

    /* Ensure main content is above the canvas */
    main, header, #customer-gallery {
      position: relative;
      z-index: 2;
    }

    /* Ensure modal is above everything */
    .modal {
      z-index: 120;
    }

    header{
      height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:12px 28px;
      position:fixed;
      inset-inline:0;
      top:0;
      z-index:60;
      background: var(--header-bg);
      border-bottom:1px solid var(--border-color);
      backdrop-filter: blur(10px) saturate(180%);
    }
    .logo{font-weight:700;color:var(--accent);font-size:20px;display:flex;align-items:center;gap:10px}
    .logo svg{width: 28px; height: 28px; fill: var(--accent);}
    .logo .dot{width:10px;height:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:50%}

    .header-controls { display: flex; align-items: center; gap: 16px; }

    /* --- Dark/Light Mode Toggle --- */
    .theme-switch-wrapper {
      display: flex;
      align-items: center;
    }
    .theme-switch {
      display: none;
    }
    .theme-switch-label {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 30px;
      background: #ccc;
      border-radius: 34px;
      cursor: pointer;
      transition: background 0.3s;
    }
    .theme-switch-label .slider {
      position: absolute;
      top: 3px;
      right: 3px;
      width: 24px;
      height: 24px;
      background: white;
      border-radius: 50%;
      transition: transform 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .theme-switch-label .slider i {
      font-size: 14px;
      color: #f39c12;
      transition: transform 0.3s, opacity 0.3s;
    }
    .theme-switch-label .slider i.fa-moon {
      position: absolute;
      opacity: 0;
      transform: rotate(-90deg);
    }
    .theme-switch:checked + .theme-switch-label {
      background: var(--accent);
    }
    .theme-switch:checked + .theme-switch-label .slider {
      transform: translateX(-30px);
    }
    .theme-switch:checked + .theme-switch-label .slider i.fa-sun {
      opacity: 0;
      transform: rotate(90deg);
    }
    .theme-switch:checked + .theme-switch-label .slider i.fa-moon {
      opacity: 1;
      transform: rotate(0deg);
    }

    .login-btn{
      background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:700;
      box-shadow:0 4px 15px rgba(0,123,255,0.2);border:1px solid rgba(255,255,255,0.2);
      position: relative; overflow: hidden; transition: transform 0.1s ease-out, box-shadow 0.3s ease;
    }
    body.light-theme .login-btn {
      box-shadow:0 4px 15px rgba(111,66,193,0.2);
    }
    .login-btn:active{transform:translateY(1px)}
    .login-btn::after{
      content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.3), transparent 70%);
      opacity:0; transition:opacity .3s;
    }
    .login-btn:hover::after{opacity:1}
    .login-btn:hover{ box-shadow: 0 6px 25px rgba(0,123,255,0.3); }
    body.light-theme .login-btn:hover {
      box-shadow: 0 6px 25px rgba(111,66,193,0.3);
    }


    main{height:calc(100vh - 72px); padding-top:72px; padding-bottom: 248px; display:flex; align-items:center; justify-content:center;}
    .container{width:100%;max-width:1200px;padding:28px;display:flex;gap:28px;align-items:center;justify-content:space-between;}

    /* video showcase */
    #video-showcase{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:320px; gap: 12px;}
    .video-thumbnail{
      width:100%; max-width:680px; aspect-ratio:16/9; border-radius:14px;
      background: var(--card-bg);
      box-shadow: 0 30px 80px var(--shadow-color);
      border:2px solid var(--border-color);
      position:relative; overflow:hidden; cursor:pointer;
      transition:transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s, border-color 0.3s;
      display:flex;align-items:center;justify-content:center;
      background-image: url('https://ouldoooz.ir/img/v-photo.jpeg'); background-size:cover; background-position:center;
      transform-style: preserve-3d; perspective: 1000px;
    }
    .video-thumbnail:hover{transform:translateY(-6px); box-shadow: 0 40px 90px var(--shadow-color);}
    .video-thumbnail::after{
      content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.45)); mix-blend-mode:multiply;
    }
    body.light-theme .video-thumbnail::after {
      background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
    }
    
/* --- Rainbow Border Animation (Corrected) --- */
.video-thumbnail:hover, .feature-card:hover {
  border-color: transparent;
  background-image: linear-gradient(var(--card-bg), var(--card-bg)), conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 300% 300%;
  animation: rainbow-border-animation 3s linear infinite;
}
@keyframes rainbow-border-animation {
  to { background-position: 0 0, 300% 300%; }
}


    .play-button{
      position:relative; z-index:2; width:92px; height:92px; border-radius:50%;
      display:flex; align-items:center; justify-content:center; font-size:34px;
      background:linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
      border:2px solid rgba(255,255,255,0.1);
      box-shadow: 0 10px 40px var(--accent);
      color:#fff;
      transition: transform .18s ease;
    }
    body.light-theme .play-button {
      background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
      border: 2px solid rgba(255,255,255,0.8);
      box-shadow: 0 10px 40px rgba(0,0,0,0.1);
      color: #333;
    }
    .video-thumbnail:hover .play-button{ transform:scale(1.08); color: var(--accent) }
    
    .video-caption {
        font-size: 14px; color: var(--muted-color);
        text-align: center;
        opacity: 0;
        animation: fadeIn 1s ease 0.5s forwards;
    }
    @keyframes fadeIn { to { opacity: 1; } }

    /* features */
    #features-list{flex:1; display:flex; flex-direction:column; gap:18px; min-width:300px;}
    #features-list h2{font-size:26px;margin:0 0 6px 0;text-align:right}
    .features-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
    .feature-card{
      display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px;
      background: var(--card-bg);
      border:2px solid var(--border-color); transition: transform .28s, box-shadow .28s, border-color 0.3s;
      opacity: 0; transform: translateY(20px);
    }
    .feature-card i{font-size:20px;color:var(--accent);background:rgba(0,123,255,0.1);padding:10px;border-radius:10px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    body.light-theme .feature-card i {
      background: rgba(111,66,193,0.1);
    }
    .feature-card h3{margin:0;font-size:15px}
    .feature-card p{margin:0;color:var(--muted-color);font-size:13px; line-height: 1.5;}
    .feature-card:hover{transform:translateX(-8px); box-shadow: 0 8px 25px var(--shadow-color);}

    #customer-gallery{
      position: absolute; left:0; right:0; bottom:28px; margin-inline:auto; width:calc(100% - 56px);
      max-width:1200px;
      pointer-events:auto;
      display:block; padding:14px;
      border-radius:12px;
      background: var(--card-bg);
      border:1px solid var(--border-color);
      box-shadow: 0 18px 80px var(--shadow-color);
      backdrop-filter: blur(8px) saturate(120%);
      z-index:50;
      opacity: 0; transform: translateY(20px);
    }
    #customer-gallery h2{
      display:inline-block; padding:6px 14px; margin:0 0 10px 0; border-radius:999px;
      background: var(--card-bg);
      color:var(--accent); font-weight:700; font-size:14px;
    }
    .slider-container{position:relative;padding:8px 6px 6px 6px}
    .slider-container::before, .slider-container::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 1; pointer-events: none;
    }
    .slider-container::before { right: 0; background: linear-gradient(to right, transparent, var(--bg)); }
    .slider-container::after { left: 0; background: linear-gradient(to left, transparent, var(--bg)); }
    .slider-wrapper{
      display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-behavior:smooth;
      -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;
      scroll-snap-type: x mandatory;
    }
    .slider-wrapper::-webkit-scrollbar{display:none}
    .slider-wrapper img{
      height:130px; aspect-ratio:16/9; border-radius:10px; object-fit:cover; cursor:pointer; flex-shrink:0;
      border:1px solid var(--border-color); transition: transform .22s, filter .22s;
      background: var(--card-bg);
      scroll-snap-align: start;
    }
    .slider-wrapper img:hover{transform:scale(1.03); filter:brightness(1.08)}
    .slider-btn{
      position:absolute; top:50%; transform:translateY(-50%); width:44px;height:44px;border-radius:8px;border:none;
      display:flex;align-items:center;justify-content:center;background:rgba(6,7,10,0.6); color:#fff; cursor:pointer;
      transition:background .18s; z-index:60;
    }
    .slider-btn:hover{background:rgba(6,7,10,0.85)}
    .prev-btn{right:8px}
    .next-btn{left:8px}

    /* modal */
    .modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:120; background:linear-gradient(180deg, rgba(2,2,6,0.85), rgba(2,2,6,0.95));}
    body.light-theme .modal { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,242,245,1)); }
    .modal .modal-content{max-width:96%; max-height:88%; border-radius:12px; box-shadow:0 30px 120px rgba(0,0,0,0.8)}
    .modal .close-modal{position:fixed; left:26px; top:18px; font-size:34px; color: #000;; cursor:pointer; z-index:130}
    .modal video{width:100%; height:auto; display:block; border-radius:12px; background:#000}

    /* استایل برای دکمه‌های ناوبری مودال تصویر (جدید) */
    .modal-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
      z-index: 125;
      font-size: 18px;
    }
    .modal-nav-btn:hover {
      background: rgba(0, 0, 0, 0.8);
      transform: translateY(-50%) scale(1.1);
    }
    .modal-nav-btn.prev-btn {
      right: 15px;
    }
    .modal-nav-btn.next-btn {
      left: 15px;
    }
    body.light-theme .modal-nav-btn {
      background: rgba(255, 255, 255, 0.5);
      color: #333;
    }
    body.light-theme .modal-nav-btn:hover {
      background: rgba(255, 255, 255, 0.8);
    }


    @media (max-width:1100px){
      .container{padding:18px; gap:18px}
      .slider-wrapper img{height:110px}
      .video-thumbnail{max-width:520px}
    }
    @media (max-width:800px){
      html,body{overflow-y:auto !important;}
      .container{flex-direction:column; align-items:center; justify-content:flex-start; gap:14px}
      #customer-gallery{position: static; width:calc(100% - 56px); margin: 12px auto 18px;}
      main{height:auto; min-height: calc(100vh - 72px); padding-top:72px; padding-bottom:18px; display:block;}
      .video-thumbnail{max-width:100%; width:100%}
      .features-grid{grid-template-columns:1fr}
      .slider-container::before, .slider-container::after { display: none; }
    }
    @media (prefers-reduced-motion:reduce){
      *{transition:none!important; animation:none!important}
      .video-thumbnail:hover, .feature-card:hover {
        animation: none;
      }
    }