:root{
  /* Palette - Now iOS Dark Mode Aesthetic */
  --bg: #14141d; /* Deep Slate Background */
  --card: rgba(255,255,255,0.08); /* Subtle card transparency */
  --glass: rgba(255,255,255,0.15); /* More visible glass for readability */
  --muted: #a1a1aa; /* Light Gray for muted text */
  --text: #f0f0f0; /* Off-White Text */
  
  /* PRIMARY: Vibrant Apple Blue */
  --primary: #007aff; 
  
  /* ACCENT: Sky Blue/Secondary iOS color for highlights */
  --accent: linear-gradient(135deg, #5ac8fa 0%, #007aff 100%);
  --accent-plain: #5ac8fa;
  
  /* NEON/GLOW Colors - Apple Blue Glow */
  --glow-primary: rgba(0, 122, 255, 0.6);  
  --glow-accent: rgba(90, 200, 250, 0.6);   

  --radius: 14px;
  --container: 1200px;
  --gap: 1.25rem;
  --glass-blur: 14px; /* Increased blur for stronger iOS effect */
  font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
  --transition: 350ms cubic-bezier(.2,.9,.3,1); /* Snappier transition for iOS feel */
  --header-height: 72px;
}

/* Light theme overrides (iOS Light Mode) */
:root[data-theme="light"]{
  --bg: #ffffff; /* Pure White */
  --card: rgba(0,0,0,0.05);
  --glass: rgba(255,255,255,0.8);
  --muted: #6e6e73; /* Dark Gray for muted text */
  --text: #1d1d1f; /* Near Black */
  --primary: #007aff; 
  --accent: linear-gradient(135deg, #5ac8fa 0%, #007aff 100%);
  --glow-primary: rgba(0, 122, 255, 0.4);
  --glow-accent: rgba(90, 200, 250, 0.4);
  color-scheme: light; 
}

/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* --- FIX: Prevents horizontal scroll on mobile --- */
  overflow-x: hidden; 
  
  /* Applying the new iOS Blue glow to the background (Parallax Effect) */
  background:radial-gradient(1200px 600px at 10% 10%, var(--glow-primary), transparent 18%),
             radial-gradient(900px 400px at 90% 90%, var(--glow-accent), transparent 22%),
             var(--bg);
  background-attachment: fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  direction: rtl; 
  font-feature-settings: "liga" 1, "tnum" 1;
  padding-top: var(--header-height);
  transition: background var(--transition);
}

/* Header (FIXED for all devices) */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-height);
  background: rgba(20, 20, 29, 0.8); /* Slate with high opacity */
  backdrop-filter: blur(var(--glass-blur)); 
  border-bottom:1px solid rgba(255,255,255,0.08); 
  transition: background var(--transition), backdrop-filter var(--transition);
}
.header-inner{
  max-width:var(--container);margin:0 auto;height:100%;
  display:flex;align-items:center;padding:0 var(--gap);
  gap:1.5rem;
}

/* BRAND GLOW EFFECT */
.brand{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--text);font-weight:700}
.brand .logo{width:36px;height:36px;border-radius:6px}
.brand .brand-name{font-size:1.2rem;white-space:nowrap}
.brand.glow-on-hover:hover{
  text-shadow: 0 0 6px var(--glow-primary);
  transform: translateY(-2px);
  transition: var(--transition);
}

/* Navigation */
.nav-list{display:flex;gap:1.5rem;list-style:none;padding:0;margin:0}
.nav-list a{text-decoration:none;color:var(--text);opacity:.8;transition:opacity var(--transition);font-weight:500;padding:.5rem 0}
.nav-list a:hover{opacity:1;color:var(--primary);} /* Hover uses primary Apple Blue */
.nav-list a[aria-current]{opacity:1;font-weight:700;border-bottom:2px solid var(--primary);}

/* Header Actions */
.header-actions{display:flex;align-items:center;margin-right:auto;gap:1rem}
.theme-toggle{background:var(--card);border:1px solid rgba(255,255,255,0.1);color:var(--text);padding:.5rem;border-radius:var(--radius);cursor:pointer;font-size:1.2rem;transition:background var(--transition);line-height:1}
.theme-toggle:hover{background:var(--glass)}

/* Buttons */
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:.75rem 1.25rem;border-radius:var(--radius);
    text-decoration:none;font-weight:600;font-size:.95rem;
    cursor:pointer;border:none;transition:all var(--transition);
}
.btn.primary{
    background:var(--primary);color:#fff;
    box-shadow:0 0 20px rgba(0, 122, 255, 0.25);
}
.btn.primary:hover{background: #3399ff; transform:translateY(-2px); box-shadow:0 8px 20px var(--glow-primary);}
.btn.primary.glow-on-click:active{
    box-shadow: 0 0 40px var(--glow-primary);
    transform: scale(0.98);
}
.btn.accent{
    background:var(--accent-plain);color:#14141d; /* Dark text on Sky Blue background */
    box-shadow:0 0 10px rgba(90, 200, 250, 0.3);
}
.btn.accent:hover{background:#8cd7ff; transform:translateY(-2px)}
.btn.outline{
    background:transparent;color:var(--text);
    border:1px solid rgba(255,255,255,0.3);
}
.btn.outline:hover{background:var(--card);transform:translateY(-2px)}

/* Layout */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gap)}
main{padding:2.5rem 0}
section{padding:3rem 0}

/* Hero Section */
.hero{padding-top:3rem}
.hero-card{
  /* Clean Glassmorphism */
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  backdrop-filter: blur(var(--glass-blur)); 
  border-radius:24px; 
  padding:2.5rem; 
  border: 1px solid transparent; 
  border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%) 1;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.hero-grid{display:grid;grid-template-columns:1fr 400px;gap:2rem}
.hero-content h1{font-size:3rem;margin-top:0;line-height:1.2;text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);}
.hero-content .lead{font-size:1.25rem;opacity:.9;margin-bottom:1.5rem}
.hero-actions{display:flex;gap:1.25rem;margin-top:2rem}
.hero-media img{width:100%;height:auto;border-radius:18px;object-fit:cover;aspect-ratio:4/3;opacity:.9}

/* BADGE NEON */
.tag.badge-neon{
  display:inline-block;
  padding:.3rem .8rem;
  border-radius:999px;
  background: var(--accent-plain); 
  box-shadow: 0 0 10px var(--glow-accent);
  color: #14141d; 
  font-weight: 800;
  animation: pulse 4s infinite alternate;
}
@keyframes pulse {
  from {box-shadow: 0 0 8px var(--glow-accent);}
  to {box-shadow: 0 0 16px var(--glow-accent);}
}

/* KPIs - Neumorphism Style */
.kpis.neumorphic{
    display:flex;gap:1.5rem;margin-top:2rem;
}
.kpi{
    background: transparent;
    padding:.75rem 1rem;
    border-radius:16px;
    min-width:120px;
    text-align:center;
    box-shadow: 
        inset 5px 5px 10px rgba(0, 0, 0, 0.2), 
        inset -5px -5px 10px rgba(255, 255, 255, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.4); 
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.kpi strong{display:block;font-size:2rem;font-weight:800;color:var(--primary);} /* KPI number uses primary color */
.kpi span{display:block;font-size:.85rem;opacity:.7}


/* Cards & Glass effect - Enhanced Glassy Borders */
.card{
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    border-radius:20px;
    padding:1.5rem;
    /* Animated Glassy Border */
    border: 1px solid transparent; 
    border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%) 1;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transition: all var(--transition);
}
.card.glass{
    background:linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid transparent; 
    border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%) 1;
}

/* Products */
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}
.product{
    background: transparent;
    padding: 0;
    border: none;
    transition: transform var(--transition);
}
.product-inner {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    overflow: hidden;
    position: relative;
    padding: 1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    transition: transform var(--transition), box-shadow var(--transition);
}

.product:hover .product-inner{
    transform:translateY(-8px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 15px var(--glow-primary); 
    border-color: var(--glow-primary);
}
.product-inner img{width:100%;height:auto;border-radius:12px;object-fit:cover;aspect-ratio:16/9;opacity:.9;transition:transform var(--transition)}
.product:hover img{transform:scale(1.04) translateY(-3px);}
.product-body{padding:.5rem 0}
.product-body h3{font-size:1.15rem;margin:0 0 .5rem 0}
.product-actions{display:flex;gap:.75rem}

/* CEO Section */
.ceo-box{padding:2rem}
.ceo-layout{display:grid;grid-template-columns:1fr 280px;gap:2rem;align-items:center}
.ceo-photo img{width:100%;height:auto;border-radius:14px;object-fit:cover;aspect-ratio:1/1;} 

/* Contact & Footer */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.contact-card{
    background:var(--card);border-radius:var(--radius);padding:1.5rem;
    border:1px solid rgba(255,255,255,0.05);
    transition: border var(--transition), box-shadow var(--transition);
}
.contact-card:hover{
    border:1px solid var(--glow-primary); 
    box-shadow: 0 0 10px rgba(0, 122, 255, 0.1); 
}
.contact-card h3{margin-top:0;color:var(--primary)}
.contact-list{list-style:none;padding:0}
.contact-list li{margin-bottom:.75rem}
.contact-list a{color:var(--text);text-decoration:none;transition:color var(--transition)}
.contact-list a:hover{color:var(--primary)}

/* Form Elements Styling (Focus Glow) */
form label {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--muted); 
}
form input[type="text"],
form input[type="tel"],
form input[type="email"],
form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 0.3rem;
    border-radius: var(--radius);
    font-size: 1rem;
    color: var(--text);
    background: rgba(255, 255, 255, 0.08); 
    border: 1px solid rgba(255, 255, 255, 0.15); 
    resize: vertical;
    transition: all 300ms ease;
    box-shadow: none;
}
form input:focus,
form textarea:focus {
    outline: none;
    border-color: var(--primary); 
    box-shadow: 0 0 0 4px var(--glow-primary); 
    background: rgba(255, 255, 255, 0.12); 
}
.form-actions{display:flex;gap:.75rem;margin-top:1.5rem}

/* Footer */
.site-footer{padding:2rem 0;background:rgba(20, 20, 29, 0.8)}
.footer-inner{display:grid;grid-template-columns:3fr 2fr 3fr;gap:2rem;align-items:flex-start}
.footer-links{display:flex;flex-wrap:wrap;gap:1.5rem;padding:0;margin:0;list-style:none}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-contact{text-align:left}

/* Scroll To Top Button */
.scroll-top{
    position:fixed;bottom:2rem;right:2rem;width:40px;height:40px;
    background: var(--primary);
    color:#fff;border-radius:50%;border:none;cursor:pointer;
    display:none;align-items:center;justify-content:center;
    box-shadow:0 0 20px rgba(0, 122, 255, 0.3);
    transition:opacity var(--transition), transform var(--transition);
    opacity:0;
}
.scroll-top.visible{display:flex;opacity:1}

/* Floating CTA Button (New Feature) */
.floating-cta {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 99;
    width: 56px;
    height: 56px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.6);
    transition: transform var(--transition);
}
.floating-cta:hover {
    transform: scale(1.08) translateY(-2px);
}


/* Headings Decoration */
.section-head{display:flex;flex-direction:column;gap:.25rem}
.section-head h2{position:relative;padding-inline-end:1rem}
.section-head h2::after{
    content:"";position:absolute;inset:auto 0 auto auto;
    width:160px;height:6px;border-radius:8px;
    background:var(--accent); 
    transform:translateY(6px);opacity:0.25; 
    box-shadow: 0 0 8px var(--glow-accent); 
}
.muted{color:var(--muted);font-size:.95rem}

/* Simple Lightbox */
.lb-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity var(--transition);
}
.lb-overlay.open{opacity:1;pointer-events:auto;cursor:pointer}
.lb-overlay img{max-width:90%;max-height:90vh;border-radius:12px;cursor:default}

/* Responsive */
@media(min-width:720px){
  .header-inner{gap:3rem}
  .hero-card{padding:3rem}
  .nav-toggle{display:none}
  .nav-list{gap:1.5rem}
  .ceo-layout{grid-template-columns:1fr 280px;} 
  .floating-cta {
    display: none; /* Hide on desktop */
  }
}

/* Small devices (Mobile Optimization FIXES) */
@media(max-width:719px){
  /* FIX: Force single column grid on mobile */
  .hero-grid,
  .product-grid,
  .contact-grid,
  .ceo-layout,
  .footer-inner {
      grid-template-columns: 1fr !important; 
  }
  
  /* Mobile Header & Navigation Fix: Menu is now a fixed sidebar */
  .nav-list{
    flex-direction: column;
  }
  .nav {
      position: fixed;
      top: var(--header-height); 
      right: 0;
      width: 86%; 
      max-width: 360px;
      height: calc(100vh - var(--header-height)); /* Full height below header */
      z-index: 90; 
      /* --- تنظیمات شیشه ای و مات برای خوانایی (iOS Glass Sidebar) --- */
      background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.15)); /* افزایش شفافیت برای خوانایی بهتر */
      backdrop-filter: blur(var(--glass-blur)); 
      border-left: 1px solid rgba(255, 255, 255, 0.3); /* مرز واضح‌تر */
      padding: 1.5rem;
      box-shadow: 0 12px 40px rgba(0,0,0,0.8);
      /* ------------------------------------------------------------- */
      /* Hide Off-Screen */
      transform: translateX(100%);
      visibility: hidden;
      transition: transform var(--transition), visibility 0s linear var(--transition);
      overflow-y: auto;
  }
  .nav.open {
      transform: translateX(0);
      visibility: visible;
      transition: transform var(--transition), visibility 0s;
  }
  
  /* Other Mobile Adjustments */
  .hero-card{padding:2rem 1.5rem;} 
  .hero-content h1{font-size:2.5rem;}
  .hero-media{display:none;} 
  .kpis.neumorphic{justify-content:space-around;gap:1rem;}
  
  .ceo-layout{text-align:center;} 
  .ceo-photo{order:-1; margin:0 auto 1.5rem;} 
  
  .product-grid{gap:1.5rem;} 
  
  .contact-card{padding:1.25rem;} 
  
  .footer-inner{text-align:center;} 
  .footer-links{justify-content:center;}
  .footer-contact{text-align:center;}
  
  /* Header adjustments for very small mobiles */
  .header-inner {
      padding: 0 1rem; 
      gap: 0.75rem; 
  }
  .brand .brand-name {
      font-size: 1.1rem; 
  }
}

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