.servisato-landing{
      --navy-950: #002638;
      --navy-900: #003047;
      --navy-800: #06465c;
      --navy-700: #0B5A73;
      --orange-500: #F68828;
      --orange-600: #DC6F0F;
      --orange-100: #FFF1E4;
      --ink: #102631;
      --muted: #667983;
      --surface: #ffffff;
      --surface-soft: #f4f8fa;
      --border: #dfe9ed;
      --success: #13a071;
      --shadow-sm: 0 10px 30px rgba(0, 52, 72, .08);
      --shadow-lg: 0 26px 80px rgba(0, 38, 52, .18);
      --radius-sm: 14px;
      --radius-md: 22px;
      --radius-lg: 34px;
      --container: min(1180px, calc(100% - 40px));
    }

    .servisato-landing, .servisato-landing *{ box-sizing: border-box; }
    .servisato-landing{ scroll-behavior: smooth; }
    .servisato-landing{
      margin: 0;
      font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
      color: #102631;
      background: #fff;
      line-height: 1.8;
      overflow-x: hidden;
    }
    .servisato-landing img{ max-width: 100%; display: block; }
    .servisato-landing a{ color: inherit; text-decoration: none; }
    .servisato-landing button, .servisato-landing input{ font: inherit; }
    .servisato-landing button{ cursor: pointer; }

    .servisato-landing .container{ width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
    .servisato-landing .section{ padding: 100px 0; position: relative; }
    .servisato-landing .eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #DC6F0F;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -.1px;
      background: #FFF1E4;
      border: 1px solid #ffd7ad;
      padding: 7px 13px;
      border-radius: 999px;
    }
    .servisato-landing .eyebrow::before{
      content: "";
      width: 7px;
      height: 7px;
      background: #F68828;
      border-radius: 50%;
      box-shadow: 0 0 0 5px rgba(245, 138, 40, .14);
    }
    .servisato-landing .section-head{
      max-width: 720px;
      margin-bottom: 44px;
    }
    .servisato-landing .section-head.center{ margin-inline: auto; text-align: center; }
    .servisato-landing .section-title{
      margin: 14px 0 12px;
      color: #002638;
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.35;
      letter-spacing: -1.5px;
    }
    .servisato-landing .section-text{ color: #667983; font-size: 17px; margin: 0; }

    .servisato-landing .sato-action{
      min-height: 52px;
      padding: 0 22px;
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-weight: 800;
      border: 1px solid transparent;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .servisato-landing .sato-action:hover{ transform: translateY(-2px); }
    .servisato-landing .sato-action-primary{
      color: #fff;
      background: linear-gradient(135deg, #F68828, #DC6F0F);
      box-shadow: 0 12px 30px rgba(232, 121, 23, .28);
    }
    .servisato-landing .sato-action-primary:hover{ box-shadow: 0 16px 38px rgba(232, 121, 23, .34); }
    .servisato-landing .sato-action-ghost{
      color: #fff;
      border-color: rgba(255, 255, 255, .25);
      background: rgba(255, 255, 255, .07);
      backdrop-filter: blur(10px);
    }
    .servisato-landing .sato-action-light{
      color: #003047;
      background: #fff;
      box-shadow: 0 10px 30px rgba(0, 48, 71, .08);
    }
    .servisato-landing .icon{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    /* Hero */
    .servisato-landing .hero{
      min-height: 850px;
      padding: 78px 0 95px;
      color: #fff;
      background:
        radial-gradient(circle at 15% 15%, rgba(245,138,40,.18), transparent 30%),
        radial-gradient(circle at 85% 70%, rgba(33,145,183,.17), transparent 34%),
        linear-gradient(145deg, #002638 0%, #003047 52%, #07536b 100%);
      position: relative;
      overflow: hidden;
    }
    .servisato-landing .hero::before, .servisato-landing .hero::after{
      content: "";
      position: absolute;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 50%;
      pointer-events: none;
    }
    .servisato-landing .hero::before{ width: 580px; height: 580px; top: -280px; right: -130px; }
    .servisato-landing .hero::after{ width: 880px; height: 880px; bottom: -590px; left: -240px; }
    .servisato-landing .hero-grid{ display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 70px; position: relative; z-index: 2; }
    .servisato-landing .hero-copy{ max-width: 620px; }
    .servisato-landing .hero .eyebrow{ color: #ffd9b3; background: rgba(245,138,40,.12); border-color: rgba(245,138,40,.32); }
    .servisato-landing .hero-title{
      margin: 20px 0 18px;
      font-size: clamp(44px, 6vw, 72px);
      line-height: 1.23;
      letter-spacing: -2.5px;
      font-weight: 900;
    }
    .servisato-landing .hero-title span{ color: #F68828; position: relative; }
    .servisato-landing .hero-subtitle{ color: rgba(255,255,255,.73); max-width: 590px; font-size: 18px; margin: 0 0 32px; }
    .servisato-landing .hero-actions{ display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 34px; }
    .servisato-landing .hero-points{ display: flex; gap: 20px; flex-wrap: wrap; color: rgba(255,255,255,.78); font-size: 14px; }
    .servisato-landing .hero-points span{ display: flex; align-items: center; gap: 7px; }
    .servisato-landing .hero-points i{ width: 20px; height: 20px; display: grid; place-items: center; color: #002638; background: #9ee6cf; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 900; }

    .servisato-landing .hero-visual{ position: relative; min-height: 560px; }
    .servisato-landing .dashboard-shell{
      position: absolute;
      inset: 32px 0 25px 18px;
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(255,255,255,.6);
      border-radius: 28px;
      box-shadow: 0 42px 90px rgba(0,20,30,.35);
      transform: perspective(1200px) rotateY(-7deg) rotateX(2deg);
      overflow: hidden;
    }
    .servisato-landing .mock-top{
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      border-bottom: 1px solid #e9f0f3;
      background: #fff;
    }
    .servisato-landing .mock-user{ display: flex; align-items: center; gap: 10px; color: #002638; font-size: 13px; font-weight: 800; }
    .servisato-landing .avatar{ width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #FFF1E4; color: #DC6F0F; }
    .servisato-landing .mock-logo{ width: 108px; }
    .servisato-landing .mock-body{ display: grid; grid-template-columns: 150px 1fr; min-height: 450px; }
    .servisato-landing .mock-sidebar{ background: #002638; padding: 22px 14px; color: rgba(255,255,255,.65); }
    .servisato-landing .mock-nav-item{ height: 38px; margin-bottom: 8px; border-radius: 9px; display: flex; align-items: center; gap: 9px; padding: 0 10px; font-size: 11px; }
    .servisato-landing .mock-nav-item.active{ background: rgba(245,138,40,.18); color: #fff; }
    .servisato-landing .dot-icon{ width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .85; }
    .servisato-landing .mock-content{ background: #f4f7f8; padding: 22px; }
    .servisato-landing .mock-heading{ color: #002638; font-size: 17px; font-weight: 900; margin-bottom: 15px; }
    .servisato-landing .stat-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .servisato-landing .stat-card{ padding: 15px; border-radius: 15px; background: #fff; border: 1px solid #e8eef1; }
    .servisato-landing .stat-label{ font-size: 10px; color: #7d9099; }
    .servisato-landing .stat-number{ color: #002638; font-size: 21px; font-weight: 900; margin-top: 5px; }
    .servisato-landing .stat-trend{ color: #13A071; font-size: 9px; font-weight: 800; }
    .servisato-landing .chart-card{ margin-top: 12px; background: #fff; border: 1px solid #e8eef1; border-radius: 15px; padding: 15px; display: grid; grid-template-columns: 1.4fr .8fr; gap: 15px; }
    .servisato-landing .bars{ height: 155px; display: flex; align-items: end; justify-content: space-between; gap: 8px; padding-top: 15px; border-bottom: 1px solid #e7edef; }
    .servisato-landing .bar{ width: 12%; border-radius: 6px 6px 0 0; background: linear-gradient(to top, #0B5A73, #1c83a3); }
    .servisato-landing .bar:nth-child(2n){ background: linear-gradient(to top, #DC6F0F, #F68828); }
    .servisato-landing .appointment-list{ display: grid; gap: 8px; }
    .servisato-landing .appointment{ padding: 10px; border-radius: 11px; background: #f7fafb; display: flex; justify-content: space-between; align-items: center; }
    .servisato-landing .appointment b{ color: #002638; font-size: 10px; }
    .servisato-landing .appointment small{ color: #83949c; font-size: 8px; }
    .servisato-landing .appointment-time{ color: #DC6F0F; background: #FFF1E4; padding: 3px 6px; border-radius: 6px; font-size: 8px; font-weight: 800; }
    .servisato-landing .float-card{
      position: absolute;
      z-index: 3;
      background: rgba(255,255,255,.97);
      color: #102631;
      border: 1px solid rgba(255,255,255,.8);
      border-radius: 17px;
      box-shadow: 0 26px 80px rgba(0, 38, 52, .18);
      backdrop-filter: blur(12px);
    }
    .servisato-landing .float-reminder{ left: -22px; top: 4px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; animation: float 5s ease-in-out infinite; }
    .servisato-landing .float-invoice{ right: -16px; bottom: 2px; width: 210px; padding: 15px; animation: float 5.8s ease-in-out infinite .4s; }
    .servisato-landing .float-icon{ width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #FFF1E4; color: #DC6F0F; }
    .servisato-landing .float-card b{ display: block; font-size: 12px; color: #002638; }
    .servisato-landing .float-card small{ font-size: 10px; color: #667983; }
    .servisato-landing .invoice-row{ display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
    .servisato-landing .invoice-price{ color: #002638; font-weight: 900; font-size: 14px; }
    .servisato-landing .invoice-status{ color: #13A071; background: #e9faf4; font-size: 9px; font-weight: 800; padding: 4px 7px; border-radius: 7px; }
    @keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

    .servisato-landing .hero-wave{ position: absolute; bottom: -1px; left: 0; right: 0; height: 75px; }
    .servisato-landing .hero-wave svg{ width: 100%; height: 100%; display: block; }

    /* Quick value cards */
    .servisato-landing .value-strip{ margin-top: -30px; position: relative; z-index: 5; }
    .servisato-landing .value-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .servisato-landing .value-card{ background: #fff; border: 1px solid #DFE9ED; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 48, 71, .08); padding: 24px 20px; display: flex; gap: 13px; align-items: center; }
    .servisato-landing .value-icon{ width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; color: #0B5A73; background: #eaf5f8; border-radius: 14px; }
    .servisato-landing .value-card b{ color: #002638; font-size: 15px; display: block; }
    .servisato-landing .value-card span{ color: #667983; font-size: 12px; }

    /* Features */
    .servisato-landing .owner-section{ background: linear-gradient(180deg, #fff 0%, #f8fbfc 100%); }
    .servisato-landing .feature-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .servisato-landing .feature-card{
      background: #fff;
      border: 1px solid #DFE9ED;
      border-radius: 22px;
      padding: 24px;
      min-height: 190px;
      position: relative;
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .servisato-landing .feature-card:hover{ transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0, 48, 71, .08); border-color: #c9dce3; }
    .servisato-landing .feature-card::after{ content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; background: #FFF1E4; left: -45px; bottom: -45px; opacity: .7; }
    .servisato-landing .feature-icon{ width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: #DC6F0F; background: #FFF1E4; margin-bottom: 18px; }
    .servisato-landing .feature-card h3{ margin: 0 0 7px; color: #002638; font-size: 18px; }
    .servisato-landing .feature-card p{ margin: 0; color: #667983; font-size: 14px; line-height: 1.75; }

    /* Customer app */
    .servisato-landing .customer-section{ overflow: hidden; background: #002638; color: #fff; }
    .servisato-landing .customer-section::before{ content: ""; position: absolute; width: 650px; height: 650px; border-radius: 50%; border: 110px solid rgba(245,138,40,.05); left: -320px; top: -190px; }
    .servisato-landing .customer-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
    .servisato-landing .customer-section .section-title{ color: #fff; }
    .servisato-landing .customer-section .section-text{ color: rgba(255,255,255,.67); }
    .servisato-landing .phone-stage{ min-height: 620px; position: relative; display: grid; place-items: center; }
    .servisato-landing .phone{
      width: 305px;
      height: 610px;
      background: #f6f8f9;
      border: 9px solid #112f3a;
      border-radius: 48px;
      box-shadow: 0 42px 80px rgba(0,0,0,.34);
      overflow: hidden;
      position: relative;
      transform: rotate(-3deg);
    }
    .servisato-landing .notch{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 110px; height: 25px; background: #112f3a; border-radius: 0 0 18px 18px; z-index: 2; }
    .servisato-landing .phone-head{ height: 150px; background: linear-gradient(145deg, #0B5A73, #003047); padding: 40px 20px 17px; color: #fff; }
    .servisato-landing .phone-head-top{ display: flex; align-items: center; justify-content: space-between; }
    .servisato-landing .phone-head h4{ margin: 0; font-size: 17px; }
    .servisato-landing .phone-head p{ margin: 4px 0 0; color: rgba(255,255,255,.66); font-size: 10px; }
    .servisato-landing .phone-avatar{ width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.14); }
    .servisato-landing .car-select{ margin: 15px 16px 0; background: #fff; border-radius: 16px; box-shadow: 0 10px 28px rgba(0,30,40,.12); padding: 14px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 3; }
    .servisato-landing .car-info{ display: flex; align-items: center; gap: 9px; }
    .servisato-landing .car-icon{ width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #FFF1E4; color: #DC6F0F; }
    .servisato-landing .car-info b{ font-size: 11px; color: #002638; display: block; }
    .servisato-landing .car-info small{ color: #84949c; font-size: 8px; }
    .servisato-landing .next-service{ margin: 14px 16px; border-radius: 16px; padding: 15px; background: #fff8f1; border: 1px solid #ffe4c6; }
    .servisato-landing .next-service-head{ display: flex; align-items: center; justify-content: space-between; }
    .servisato-landing .next-service b{ color: #002638; font-size: 11px; }
    .servisato-landing .next-service .days{ color: #DC6F0F; font-weight: 900; font-size: 10px; }
    .servisato-landing .progress{ height: 6px; border-radius: 99px; background: #f0e4d8; margin-top: 11px; overflow: hidden; }
    .servisato-landing .progress span{ display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #DC6F0F, #F68828); }
    .servisato-landing .phone-services{ padding: 0 16px; }
    .servisato-landing .phone-title{ display: flex; align-items: center; justify-content: space-between; color: #002638; font-size: 11px; font-weight: 900; margin-bottom: 9px; }
    .servisato-landing .service-mini{ display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #e7edef; border-radius: 13px; padding: 10px; margin-bottom: 8px; }
    .servisato-landing .service-mini .right{ display: flex; align-items: center; gap: 8px; }
    .servisato-landing .mini-icon{ width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #e9f5f8; color: #0B5A73; }
    .servisato-landing .service-mini b{ font-size: 9px; color: #002638; display: block; }
    .servisato-landing .service-mini small{ font-size: 7px; color: #8999a0; }
    .servisato-landing .mini-status{ font-size: 8px; font-weight: 800; color: #13A071; background: #e9faf4; border-radius: 6px; padding: 3px 6px; }
    .servisato-landing .phone-nav{ position: absolute; bottom: 0; left: 0; right: 0; height: 62px; background: #fff; border-top: 1px solid #e7edef; display: grid; grid-template-columns: repeat(4, 1fr); place-items: center; }
    .servisato-landing .phone-nav i{ width: 7px; height: 7px; border-radius: 50%; background: #afbdc3; }
    .servisato-landing .phone-nav i.active{ width: 28px; height: 8px; border-radius: 9px; background: #F68828; }
    .servisato-landing .phone-float{ position: absolute; background: #fff; border-radius: 17px; box-shadow: 0 26px 80px rgba(0, 38, 52, .18); padding: 13px; color: #102631; display: flex; align-items: center; gap: 10px; }
    .servisato-landing .phone-float.one{ right: 0; top: 100px; animation: float 5s ease-in-out infinite; }
    .servisato-landing .phone-float.two{ left: -15px; bottom: 90px; animation: float 6s ease-in-out infinite .6s; }
    .servisato-landing .phone-float b{ font-size: 10px; display: block; color: #002638; }
    .servisato-landing .phone-float small{ font-size: 8px; color: #667983; }
    .servisato-landing .customer-features{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 36px; }
    .servisato-landing .customer-item{ display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.035); }
    .servisato-landing .customer-item .check{ width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; display: grid; place-items: center; color: #F68828; background: rgba(245,138,40,.12); }
    .servisato-landing .customer-item b{ font-size: 13px; display: block; color: #fff; }
    .servisato-landing .customer-item span{ font-size: 11px; color: rgba(255,255,255,.56); }

    /* Flow */
    .servisato-landing .flow-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; }
    .servisato-landing .flow-grid::before{ content: ""; position: absolute; top: 42px; right: 16%; left: 16%; height: 1px; border-top: 2px dashed #cddde3; z-index: 0; }
    .servisato-landing .flow-card{ text-align: center; position: relative; z-index: 1; }
    .servisato-landing .flow-num{ width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 24px; display: grid; place-items: center; background: #fff; color: #DC6F0F; border: 1px solid #DFE9ED; box-shadow: 0 10px 30px rgba(0, 48, 71, .08); font-size: 26px; font-weight: 900; }
    .servisato-landing .flow-card h3{ color: #002638; margin: 0 0 7px; font-size: 19px; }
    .servisato-landing .flow-card p{ color: #667983; margin: 0 auto; max-width: 290px; font-size: 14px; }

    /* CTA */
    .servisato-landing .cta-section{ padding-top: 20px; padding-bottom: 100px; }
    .servisato-landing .cta-box{ position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, #002638, #0B5A73); border-radius: 34px; padding: 64px; display: flex; align-items: center; justify-content: space-between; gap: 30px; box-shadow: 0 26px 80px rgba(0, 38, 52, .18); }
    .servisato-landing .cta-box::before{ content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: rgba(245,138,40,.12); left: -100px; top: -170px; }
    .servisato-landing .cta-box::after{ content: ""; position: absolute; width: 180px; height: 180px; border: 35px solid rgba(255,255,255,.05); border-radius: 50%; right: -50px; bottom: -80px; }
    .servisato-landing .cta-copy{ position: relative; z-index: 1; max-width: 680px; }
    .servisato-landing .cta-copy h2{ font-size: clamp(29px, 4vw, 44px); line-height: 1.4; margin: 0 0 10px; }
    .servisato-landing .cta-copy p{ color: rgba(255,255,255,.68); margin: 0; }
    .servisato-landing .cta-actions{ position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }

    
    
    
    
    
    
    
    
    

    /* Reveal animation */
    .servisato-landing [data-reveal]{ opacity: 1; transform: none; transition: opacity .65s ease, transform .65s ease; }
    .servisato-landing [data-reveal].visible{ opacity: 1; transform: translateY(0); }

    @media (max-width: 1050px){
      
      
      .servisato-landing .hero-grid{ grid-template-columns: 1fr; gap: 30px; }
      .servisato-landing .hero-copy{ max-width: 760px; text-align: center; margin-inline: auto; }
      .servisato-landing .hero-actions, .servisato-landing .hero-points{ justify-content: center; }
      .servisato-landing .hero-visual{ max-width: 760px; width: 100%; margin-inline: auto; }
      .servisato-landing .value-grid{ grid-template-columns: repeat(2, 1fr); }
      .servisato-landing .feature-grid{ grid-template-columns: repeat(2, 1fr); }
      .servisato-landing .customer-grid{ grid-template-columns: 1fr; }
      .servisato-landing .customer-copy{ order: -1; }
      .servisato-landing .customer-copy .section-head{ max-width: 760px; margin-inline: auto; text-align: center; }
      .servisato-landing .customer-features{ max-width: 800px; margin-inline: auto; margin-top: 36px; }
      .servisato-landing .phone-stage{ max-width: 650px; margin-inline: auto; width: 100%; }
      .servisato-landing .cta-box{ padding: 48px; }
      
    }

    @media (max-width: 720px){
      .servisato-landing{ --container: min(100% - 28px, 1180px); }
      .servisato-landing .section{ padding: 74px 0; }
      
      
      
      .servisato-landing .hero{ padding-top: 68px; min-height: auto; }
      .servisato-landing .hero-title{ font-size: 42px; letter-spacing: -1.6px; }
      .servisato-landing .hero-subtitle{ font-size: 16px; }
      .servisato-landing .hero-actions .sato-action{ flex: 1 1 180px; }
      .servisato-landing .hero-visual{ min-height: 450px; margin-top: 10px; }
      .servisato-landing .dashboard-shell{ inset: 25px 0 45px 0; transform: none; border-radius: 22px; }
      .servisato-landing .mock-body{ grid-template-columns: 1fr; }
      .servisato-landing .mock-sidebar{ display: none; }
      .servisato-landing .stat-grid{ gap: 8px; }
      .servisato-landing .stat-card{ padding: 10px; }
      .servisato-landing .stat-number{ font-size: 17px; }
      .servisato-landing .chart-card{ grid-template-columns: 1fr; }
      .servisato-landing .appointment-list{ display: none; }
      .servisato-landing .float-reminder{ left: 4px; top: 0; }
      .servisato-landing .float-invoice{ right: 3px; bottom: 4px; width: 185px; }
      .servisato-landing .value-grid, .servisato-landing .feature-grid, .servisato-landing .customer-features, .servisato-landing .flow-grid{ grid-template-columns: 1fr; }
      .servisato-landing .value-strip{ margin-top: -18px; }
      .servisato-landing .feature-card{ min-height: auto; }
      .servisato-landing .phone-stage{ transform: scale(.92); min-height: 570px; }
      .servisato-landing .phone-float.one{ right: -15px; }
      .servisato-landing .phone-float.two{ left: -22px; }
      .servisato-landing .flow-grid::before{ display: none; }
      .servisato-landing .cta-box{ padding: 38px 24px; display: block; text-align: center; }
      .servisato-landing .cta-actions{ justify-content: center; margin-top: 25px; }
      .servisato-landing .cta-actions .sato-action{ width: 100%; }
      
    }

    @media (prefers-reduced-motion: reduce){
      .servisato-landing{ scroll-behavior: auto; }
      .servisato-landing, .servisato-landing *, .servisato-landing *::before, .servisato-landing *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      .servisato-landing [data-reveal]{ opacity: 1; transform: none; }
    }
  

/* محافظت رنگ‌ها در برابر استایل قالب وردپرس */
.servisato-landing{
  color-scheme: light !important;
  isolation: isolate;
  background: #FFFFFF !important;
  color: #102631 !important;
}
.servisato-landing .hero{
  color: #FFFFFF !important;
  background:
    radial-gradient(circle at 15% 15%, rgba(246,136,40,.20), transparent 30%),
    radial-gradient(circle at 85% 70%, rgba(11,90,115,.24), transparent 34%),
    linear-gradient(145deg, #002638 0%, #003047 52%, #0B5A73 100%) !important;
}
.servisato-landing .hero-title,
.servisato-landing .hero-subtitle,
.servisato-landing .hero-points,
.servisato-landing .hero .eyebrow,
.servisato-landing .cta-box,
.servisato-landing .cta-copy h2{ color: #FFFFFF !important; }
.servisato-landing .hero-title span{ color: #F68828 !important; }

.servisato-landing .section-title,
.servisato-landing .feature-card h3,
.servisato-landing .value-card b,
.servisato-landing .flow-card h3,
.servisato-landing .mock-heading,
.servisato-landing .stat-number,
.servisato-landing .float-card b,
.servisato-landing .invoice-price{ color: #002638 !important; }
.servisato-landing .section-text,
.servisato-landing .feature-card p,
.servisato-landing .value-card div > span,
.servisato-landing .flow-card p,
.servisato-landing .float-card small{ color: #667983 !important; }

.servisato-landing .eyebrow,
.servisato-landing .feature-icon,
.servisato-landing .float-icon{ color: #DC6F0F !important; background: #FFF1E4 !important; }
.servisato-landing .value-icon{ color: #0B5A73 !important; background: #EAF5F8 !important; }
.servisato-landing .sato-action-primary{
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #F68828, #DC6F0F) !important;
  border-color: transparent !important;
}
.servisato-landing .sato-action-ghost{
  color: #FFFFFF !important;
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.25) !important;
}
.servisato-landing .sato-action-light{
  color: #003047 !important;
  background: #FFFFFF !important;
}

.servisato-landing .mock-sidebar{ background: #002638 !important; }
.servisato-landing .owner-section{ background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFC 100%) !important; }
.servisato-landing .customer-section{ background: #002638 !important; color: #FFFFFF !important; }
.servisato-landing .customer-section .section-title,
.servisato-landing .customer-item b{ color: #FFFFFF !important; }
.servisato-landing .customer-section .section-text,
.servisato-landing .customer-item div > span{ color: rgba(255,255,255,.67) !important; }
.servisato-landing .customer-item .check{ color: #F68828 !important; background: rgba(246,136,40,.12) !important; }
.servisato-landing .cta-box{ background: linear-gradient(135deg, #002638, #0B5A73) !important; }
.servisato-landing .cta-copy p{ color: rgba(255,255,255,.68) !important; }
.servisato-landing .feature-card,
.servisato-landing .value-card,
.servisato-landing .flow-card,
.servisato-landing .dashboard-shell,
.servisato-landing .float-card{ background-color: #FFFFFF !important; }

.servisato-landing .icon{ fill: none !important; stroke: currentColor !important; }
.servisato-landing .hero-wave svg path{ fill: #FFFFFF !important; stroke: none !important; }
.servisato-landing a,
.servisato-landing a:hover,
.servisato-landing a:focus{ text-decoration: none !important; }



/* Full-bleed root */
.servisato-landing#servisato-top{
  display: block !important;
  position: relative !important;
  inset: auto !important;
  width: 100vw !important;
  width: 100dvw !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  padding: 0 !important;
  clear: both !important;
  overflow-x: clip !important;
  text-align: right !important;
}
@supports not (overflow: clip){
  .servisato-landing#servisato-top{ overflow-x: hidden !important; }
}
@supports (width: 100dvw){
  .servisato-landing#servisato-top{
    margin-right: calc(50% - 50dvw) !important;
    margin-left: calc(50% - 50dvw) !important;
  }
}
.servisato-landing#servisato-top > section,
.servisato-landing#servisato-top > .value-strip{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}
.servisato-landing#servisato-top .container{
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.servisato-landing#servisato-top #servisato-business{
  scroll-margin-top: 100px;
}

/* دکمه‌ها: ایزوله‌سازی کامل در برابر استایل قالب */
.servisato-landing#servisato-top a.sato-action{
  all: unset !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* دکمه‌ها: نام اختصاصی + حذف کامل pseudo-element و استایل قالب */
.servisato-landing#servisato-top a.sato-action,
.servisato-landing#servisato-top a.sato-action:link,
.servisato-landing#servisato-top a.sato-action:visited,
.servisato-landing#servisato-top a.sato-action:hover,
.servisato-landing#servisato-top a.sato-action:focus,
.servisato-landing#servisato-top a.sato-action:active{
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 56px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 24px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 14px !important;
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  cursor: pointer !important;
  isolation: isolate !important;
}
.servisato-landing#servisato-top a.sato-action::before,
.servisato-landing#servisato-top a.sato-action::after{
  content: none !important;
  display: none !important;
}
.servisato-landing#servisato-top .sato-action-label{
  display: inline-block !important;
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  white-space: inherit !important;
}
.servisato-landing#servisato-top .sato-action-icon{
  display: block !important;
  flex: 0 0 21px !important;
  width: 21px !important;
  height: 21px !important;
  margin: 0 !important;
  padding: 0 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.servisato-landing#servisato-top a.sato-action-primary,
.servisato-landing#servisato-top a.sato-action-primary:link,
.servisato-landing#servisato-top a.sato-action-primary:visited{
  color: #FFFFFF !important;
  background-color: #F68828 !important;
  background-image: linear-gradient(135deg, #F68828 0%, #DC6F0F 100%) !important;
  border-color: #F68828 !important;
  box-shadow: 0 12px 30px rgba(220,111,15,.30) !important;
}
.servisato-landing#servisato-top a.sato-action-primary:hover,
.servisato-landing#servisato-top a.sato-action-primary:focus-visible{
  color: #FFFFFF !important;
  background-color: #DC6F0F !important;
  background-image: linear-gradient(135deg, #DC6F0F 0%, #C95F08 100%) !important;
  border-color: #DC6F0F !important;
  box-shadow: 0 16px 38px rgba(220,111,15,.38) !important;
  transform: translateY(-2px) !important;
}
.servisato-landing#servisato-top a.sato-action-ghost,
.servisato-landing#servisato-top a.sato-action-ghost:link,
.servisato-landing#servisato-top a.sato-action-ghost:visited{
  color: #FFFFFF !important;
  background-color: rgba(255,255,255,.08) !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.42) !important;
  box-shadow: none !important;
}
.servisato-landing#servisato-top a.sato-action-ghost:hover,
.servisato-landing#servisato-top a.sato-action-ghost:focus-visible{
  color: #002638 !important;
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}
.servisato-landing#servisato-top a.sato-action-light,
.servisato-landing#servisato-top a.sato-action-light:link,
.servisato-landing#servisato-top a.sato-action-light:visited{
  color: #003047 !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(0,25,38,.18) !important;
}
.servisato-landing#servisato-top a.sato-action-light:hover,
.servisato-landing#servisato-top a.sato-action-light:focus-visible{
  color: #FFFFFF !important;
  background-color: #F68828 !important;
  border-color: #F68828 !important;
  transform: translateY(-2px) !important;
}
.servisato-landing#servisato-top a.sato-action:focus-visible{
  outline: 3px solid rgba(246,136,40,.38) !important;
  outline-offset: 3px !important;
}

@media (max-width: 720px){
  .servisato-landing#servisato-top .container{
    width: calc(100% - 28px) !important;
  }
  .servisato-landing#servisato-top .hero-actions,
  .servisato-landing#servisato-top .cta-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 420px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .servisato-landing#servisato-top .hero-actions a.sato-action,
  .servisato-landing#servisato-top .cta-actions a.sato-action{
    width: 100% !important;
    white-space: normal !important;
  }
}



/* Plugin host mode: keep the active theme header and footer */
html.sato-lf-theme-mode,
body.sato-lf-theme-mode{
  max-width: none !important;
  overflow-x: clip !important;
}

/*
 * These classes are added only to wrappers between the landing root and the
 * page's <main>. Header, navigation and footer wrappers are never modified.
 */
body.sato-lf-theme-mode .sato-lf-layout-host{
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
}
body.sato-lf-theme-mode .sato-lf-content-host{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  overflow: visible !important;
}

/* Remove only the theme's duplicate page title, not the landing H1. */
body.sato-lf-theme-mode .entry-title.sato-lf-hidden-title,
body.sato-lf-theme-mode .page-title.sato-lf-hidden-title,
body.sato-lf-theme-mode .entry-header.sato-lf-hidden-title,
body.sato-lf-theme-mode .page-header.sato-lf-hidden-title,
body.sato-lf-theme-mode .wp-block-post-title.sato-lf-hidden-title{
  display: none !important;
}

/* Gutenberg may impose intrinsic content widths on direct block children. */
body.sato-lf-theme-mode .wp-site-blocks .servisato-landing#servisato-top,
body.sato-lf-theme-mode .is-layout-constrained .servisato-landing#servisato-top,
body.sato-lf-theme-mode .is-layout-flow .servisato-landing#servisato-top{
  max-width: none !important;
}

@supports not (overflow: clip){
  html.sato-lf-theme-mode,
  body.sato-lf-theme-mode{ overflow-x: hidden !important; }
}


/* ================================================================
 * Servisato Landing Fix 1.2 — title, eyebrow and real app screenshots
 * ================================================================ */

/* The active theme prints the page title with this Tailwind class set. */
body.sato-lf-theme-mode [class~="text-base"][class~="lg:text-2xl"][class~="font-bold"][class~="text-black"][class~="leading-8"],
body.sato-lf-theme-mode [class~="text-base"][class~="lg:text-2xl"][class~="font-bold"][class~="text-black"][class~="leading-8"].sato-lf-hidden-title{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Keep eyebrow labels readable even when the theme forces span text to white. */
.servisato-landing#servisato-top .eyebrow,
.servisato-landing#servisato-top .hero .eyebrow,
.servisato-landing#servisato-top .customer-section .eyebrow,
.servisato-landing#servisato-top .eyebrow:link,
.servisato-landing#servisato-top .eyebrow:visited{
  color: #8A3D00 !important;
  -webkit-text-fill-color: #8A3D00 !important;
  background-color: #FFF1E4 !important;
  background-image: none !important;
  border-color: #F6B36F !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.servisato-landing#servisato-top .eyebrow::before{
  background-color: #F68828 !important;
  box-shadow: 0 0 0 5px rgba(246,136,40,.16) !important;
}

/* Real dashboard screenshot in the hero. */
.servisato-landing#servisato-top .hero-visual{
  min-height: 735px !important;
  display: grid !important;
  place-items: center !important;
}
.servisato-landing#servisato-top .dashboard-shell.sato-dashboard-screenshot{
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: min(330px, 86vw) !important;
  height: auto !important;
  aspect-ratio: 591 / 1280 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.76) !important;
  border-radius: 34px !important;
  box-shadow: 0 42px 95px rgba(0,20,30,.38) !important;
  transform: perspective(1200px) rotateY(-4deg) rotateX(1deg) !important;
}
.servisato-landing#servisato-top .dashboard-shell .sato-dashboard-image{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  object-fit: cover !important;
  object-position: center top !important;
}
.servisato-landing#servisato-top .float-reminder{
  left: 0 !important;
  top: 82px !important;
}
.servisato-landing#servisato-top .float-invoice{
  right: 0 !important;
  bottom: 70px !important;
}

/* Real customer profile screenshot in the phone section. */
.servisato-landing#servisato-top .phone-stage{
  min-height: 700px !important;
}
.servisato-landing#servisato-top .phone.sato-phone-screenshot{
  position: relative !important;
  display: block !important;
  width: min(315px, 78vw) !important;
  height: auto !important;
  aspect-ratio: 591 / 1280 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: 42px !important;
  box-shadow: 0 42px 82px rgba(0,0,0,.34) !important;
  transform: rotate(-2deg) !important;
}
.servisato-landing#servisato-top .phone .sato-phone-image{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  object-fit: cover !important;
  object-position: center top !important;
}

@media (max-width: 1050px){
  .servisato-landing#servisato-top .hero-visual{
    min-height: 715px !important;
  }
}

@media (max-width: 720px){
  .servisato-landing#servisato-top .hero-visual{
    min-height: 665px !important;
  }
  .servisato-landing#servisato-top .dashboard-shell.sato-dashboard-screenshot{
    width: min(292px, 82vw) !important;
    border-radius: 29px !important;
    transform: none !important;
  }
  .servisato-landing#servisato-top .float-reminder,
  .servisato-landing#servisato-top .float-invoice{
    display: none !important;
  }
  .servisato-landing#servisato-top .phone-stage{
    min-height: 630px !important;
    transform: none !important;
  }
  .servisato-landing#servisato-top .phone.sato-phone-screenshot{
    width: min(286px, 82vw) !important;
    border-radius: 36px !important;
    transform: none !important;
  }
  .servisato-landing#servisato-top .phone-float.one,
  .servisato-landing#servisato-top .phone-float.two{
    display: none !important;
  }
}