/* styles.css */
/* فونت Vazir از CDN که در HTML وارد شده */
:root{
    --accent:#06b6d4;
    --bg:#fff;
    --muted:#666;
    --card:#ffffff;
    --glass: rgba(255,255,255,0.7);
    --shadow: 0 6px 20px rgba(16,24,40,0.08);
    --radius:14px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: "Vazir", "Vazir Ref", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.5) 0%,  
      rgba(182, 157, 14, 0.3) 50%, 
      rgba(255, 255, 255, 0.5) 100%   
    );

    color:#0f172a;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
  }
  /* باکس شیشه‌ای زاویه‌دار زیر لوگو */
  .brand-glass-box {
    position: fixed;
    top: 60px; /* کمی زیر لوگو */
    left: 20px;
    width: 180px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    transform: rotate(-35deg); /* زاویه باکس */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 900;
    justify-items: center;
  }

  /* برند ثابت بالا سمت چپ */
  .brand-fixed{
    position:fixed;
    right:auto;
    color:#000000;
    padding:8px 14px;
    border-radius:12px;
    font-weight:700;
    z-index:1000;
    font-size: 2rem;

  }
  .brand-fixed, .brand-glass-box {
    transition: all 0.4s linear; /* حرکت روان */
  }
  

  
  .brand-glass-box.init {
    top: 140px;
    left: 80%;
    transform: rotate(35deg) scale(0.9);
  }
  
  /* کانتینر اصلی */
  .container{
    max-width:1200px;
    margin:90px auto 60px;
    padding:16px;
    
  }
  
  /* هیرو دو ستونه */
  .hero{
    display:grid;
    grid-template-columns: 1fr 700px;
    gap:20px;
    align-items:start;
    
  }
  .hero-text p {
    font-size: 1.2rem;
  }
  .step.step1 { color: #000000; font-size: 1.3rem; font-weight: 600; }
  .step.step2 { color: #000000; font-size: 1.3rem; font-weight: 600;}
  .step.step4 { color: #000000; font-size: 1.3rem; font-weight: 600;}

  /* موبایل: یک ستون */
  @media (max-width:900px){
    .hero{
      grid-template-columns:1fr;
    }
  }
  
  /* left column */
  .left-column{display:flex;flex-direction:column;gap:20px}
  
  /* carousel card */
  .carousel-card{
    border-radius:12px;
    padding:12px;
    overflow:hidden;
    margin-top: -110px;

  }
  
  .carousel {
    width: 640px;   /* 800 × 0.8 */
    height: 800px;  /* 1000 × 0.8 */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    
  }
  
  
  .slide{
    position:absolute;
    inset:0;
    opacity:0;
    transform:scale(1.02);
    transition:opacity .6s ease, transform .6s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    
  }
  .slide.active{opacity:1;transform:scale(1);z-index:2}
  .slide img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin-top: -200px;
  }
  
  /* controls (5 dots) */
  .carousel-controls{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:-230px;
  }
  .dot{
    width:14px;height:14px;border-radius:50%;
    border:2px solid rgba(0,0,0,0.12);
    background:transparent;
    cursor:pointer;
  }
  .dot.active{background:var(--accent); border-color:var(--accent)}
  .right-column {
    margin-right: 80px;
    margin-top: 100px;
  }




  .section-heading{
    margin-top: 150px;
  }
  /* زیر باکس: عکس ثابت و متن */
  .below-card{
    display:grid;
    grid-template-columns: 1fr 440px;
    gap:12px;
    align-items:center;
  }
  
  @media (max-width:700px){
    .below-card{grid-template-columns:1fr; text-align:center}
    .image-side{order:-1}
  }
  .text-side h3.subtitle{margin:0 0 10px;font-size:1.5rem}
  .text-side p{margin:0;color:var(--muted);font-size: 1.1rem;}
  .text-side {margin-top: -150px;}
  /* تصویر واکنش‌گرا (tilt) */
  .tilt-image{
    width:800px;
    height:600px;
    border-radius:8px;
    overflow:hidden;
    transition:transform .12s ease-out;
    transform-style:preserve-3d;
    will-change:transform;
    margin-right: -120px;
    margin-top: -100px;
  }
  
  /* راست ستون */
  .right-column{padding:6px}
  .hero-text h1{margin:0 0 12px;font-size:28px}
  .hero-text p{margin:0;color:var(--muted)}
  
  .features{
    margin:30px auto;
    display:grid;    
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    grid-template-columns: repeat(4,1fr);

  }
  @media (max-width:900px){
    .features{flex-direction:column; margin-top:12px; align-items:center;}
  }
  
  .feature{
    background:linear-gradient(180deg,#fff, #fbfbff);
    border-radius:12px;
    padding:16px 24px;
    min-height:60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition: all 0.4s linear; /* حرکت کاملا روان و خطی */
    cursor:pointer;
    box-shadow:var(--shadow);
    overflow:hidden;
    position:relative;
    flex: 0 0 auto; /* حالت پیشفرض مثل یک دکمه */
    width: 120px;   /* عرض اولیه */
    height: 60px;   /* ارتفاع اولیه */
  }
  
  .feature h4{
    margin:0;
    margin-top: 13px;
    transition: opacity 0.4s linear;
    text-align:center;
  }
  
  /* متن توضیحات */
  .feature .feature-content{
    opacity:0;
    transform:translateY(10px);
    transition: all 0.4s linear;
    color:var(--muted);
    font-size:14px;
    line-height:1.5;
    text-align:center;
    margin-top:12px;
  }
  
  /* حالت کوچک (inactive) */
  .feature.small{
    opacity:0.85;
    transform:scale(0.95);
  }
  
  /* حالت فعال */
  .feature.active{
    width: 300px;   /* افزایش عرض */
    height: auto;   /* ارتفاع بر اساس محتوا */
    max-height: 300px;
    flex: 0 0 auto;
    background:linear-gradient(180deg,#ffffff,#fff27a);
    transform:scale(1.05);
    justify-content:flex-start;
    align-items:flex-start;
    padding:20px;
  }
  
  .feature.active h4{
    opacity:0;
  }
  
  .feature.active .feature-content{
    opacity:1;
    transform:translateY(-20px);
    display:flex;
    flex-direction:column;
    justify-content:center; /* عمودی وسط */
    align-items:center;     /* افقی وسط */
    height:100%;
  }
  
  
  

  
  .orbit-wrap {
    width: 320px;
    height: 320px;
    position: relative;
    left: -150px;
  }
  
  .orbit-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .center-dot {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#ffffff,#909aa0);
    box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,0.1));
    font-weight: 700;
    font-size: 1.5rem;
  }
  
  /* Orbit items */
  .orbit-items {
    position: absolute;
    inset: 0;
  }
  
  .orbit-item {
    position: absolute;
    left: 73%;
    top: 60%;
    width: 64px;
    height: 64px;
    margin: -32px;
    --orbit-radius: 120px; /* پیش‌فرض */
    --orbit-speed: 16s;    /* پیش‌فرض */
    transform-origin: calc(-1 * var(--orbit-radius)) 0px;
    animation: spin var(--orbit-speed) linear infinite;
  }
  
  /* چرخش هر آیتم به نسبت موقعیت اولیه */
  .orbit-item:nth-child(1) { transform: rotate(0deg) translateX(var(--orbit-radius)); }
  .orbit-item:nth-child(2) { transform: rotate(90deg) translateX(var(--orbit-radius)); }
  .orbit-item:nth-child(3) { transform: rotate(180deg) translateX(var(--orbit-radius)); }
  .orbit-item:nth-child(4) { transform: rotate(270deg) translateX(var(--orbit-radius)); }
  
  .ai-logo { width: 100%; height: 100%; display: block; border-radius: 8px; }
  
  /* انیمیشن چرخش */
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  
  /* توقف چرخش هنگام هاور */
  .orbit-wrap:hover .orbit-item {
    animation-play-state: paused;
  }
  /* footer */
  .site-footer{margin-top:40px;padding:24px;text-align:center;color:var(--muted);font-size:14px}
  .novone-link{display:inline-block;margin:0 6px;vertical-align:middle}
  .novone-logo{height:28px}
  
  /* chat toggle (fixed) */
  .chat-toggle{
    position:fixed;bottom:20px;left:auto;right:20px;
    background: transparent;
    border-radius:50%;display:flex;
    align-items:center;justify-content:center;
    color:#fff;border:0;cursor:pointer;z-index:1200;
  }
  
  /* chat panel */
  .chat-panel{
    position:fixed;bottom:92px;right:20px;width:320px;max-height:70vh;border-radius:12px;
    background:#fff;box-shadow:0 20px 40px rgba(2,6,23,0.18);display:flex;flex-direction:column;overflow:hidden;
    transform:translateY(20px) scale(.98);opacity:0;pointer-events:none;transition:all .28s ease;z-index:1200;
  }
  .chat-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
  .chat-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #f1f5f9}
  .chat-header h3{margin:0;font-size:16px}
  .chat-header button{border:0;background:transparent;font-size:20px;cursor:pointer}
  .chat-body{padding:12px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px}
  .msg{display:flex}
  .msg.ai{justify-content:flex-start}
  .msg.user{justify-content:flex-end}
  .bubble{max-width:78%;padding:10px 12px;border-radius:12px;background:#f1f5f9;color:#0f172a}
  .msg.user .bubble{background:var(--accent);color:#fff}
  .chat-form{display:flex;border-top:1px solid #f1f5f9;padding:8px}
  .chat-form input{flex:1;padding:8px;border-radius:8px;border:1px solid #e6eef5;margin-right:8px}
  .chat-form button{background:var(--accent);color:#fff;border:0;padding:8px 12px;border-radius:8px;cursor:pointer}
  
  /* small screens tweak for chat */
  @media (max-width:480px){
    .chat-panel{right:10px;left:10px;width:auto}
  }