/* ============================================================
   مرکز خدمات پشتیبانی اودو در ایران — Odoo Center
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

:root{
  /* --- رنگ‌ها (برگرفته از لوگو) --- */
  --purple-900:#3F1740;
  --purple-800:#5A2158;
  --purple-700:#7C2E75;
  --purple-600:#8E3686;
  --purple-500:#A8449C;
  --purple-300:#CE8AC5;
  --purple-100:#F3E5F0;
  --purple-050:#FAF3F8;

  --ink-900:#24272E;
  --ink-700:#343A45;
  --ink-500:#5C636F;
  --ink-300:#9BA1AA;

  --bg:#FAF9FB;
  --white:#FFFFFF;
  --line:#E6E1E8;

  --font: 'Vazirmatn', Tahoma, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --container-max: 1220px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth; scroll-padding-top:90px;}

body{
  font-family: var(--font);
  color: var(--ink-900);
  background: var(--bg);
  font-weight:400;
  line-height:1.8;
  font-size:16px;
}

h1,h2,h3,h4,h5{
  font-family: var(--font);
  font-weight:800;
  color: var(--ink-900);
  line-height:1.4;
  margin:0;
}

p{margin:0;}

a{ text-decoration:none; color:inherit; }

img{max-width:100%; display:block;}

.container-xl{
  max-width: var(--container-max);
  margin:0 auto;
  padding:0 20px;
}

.btn{
  border-radius: var(--radius-sm);
  font-weight:600;
  padding:.75rem 1.6rem;
  border:1.5px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-purple{
  background: var(--purple-700);
  color:#fff;
}
.btn-purple:hover{ background: var(--purple-800); color:#fff; }
.btn-outline-purple{
  border-color: var(--purple-700);
  color: var(--purple-700);
  background:transparent;
}
.btn-outline-purple:hover{ background: var(--purple-700); color:#fff; }
.btn-ghost-light{
  border-color: rgba(255,255,255,.55);
  color:#fff;
}
.btn-ghost-light:hover{ background:#fff; color:var(--purple-800); }

.eyebrow-line{
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow-line .dash{ width:28px; height:2px; background:var(--purple-500); display:inline-block; }
.eyebrow-line span.label{ color:var(--purple-700); font-weight:700; font-size:.95rem; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position: sticky; top:0; z-index:1000;
  background: rgba(250,249,251,.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .navbar{ padding:.7rem 0; }
.brand-logo{ display:flex; align-items:center; gap:.6rem; }
.brand-logo img{ height:70px; width:auto; }
.brand-logo .brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-logo .brand-text b{ font-size:1.02rem; font-weight:800; color:var(--ink-900); }
.brand-logo .brand-text small{ font-size:.72rem; color:var(--purple-700); font-weight:600; }

.navbar-nav .nav-link{
  color: var(--ink-700);
  font-weight:600;
  padding:.5rem 1rem !important;
  position:relative;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover{ color: var(--purple-700); }
.navbar-nav .nav-link.active::after{
  content:"";
  position:absolute; bottom:0; right:1rem; left:1rem; height:2px;
  background: var(--purple-600);
}
.header-cta{ display:flex; align-items:center; gap:.6rem; }
.header-cta .phone-badge{
  display:flex; align-items:center; gap:.5rem;
  color:var(--ink-700); font-weight:700; font-size:.92rem;
}
.header-cta .phone-badge svg{ width:18px; height:18px; color:var(--purple-700); flex:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  background: var(--purple-050);
  padding:64px 0 0;
}
.hero-grid-bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, var(--purple-300) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity:.35;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
          mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 1.05fr .95fr; gap:2.5rem; align-items:center;
  padding-bottom:50px;
}
.hero h1{ font-size:2.55rem; letter-spacing:-.01em; }
.hero h1 .accent{ color: var(--purple-700); }
.hero .lead{
  margin-top:1.1rem; font-size:1.08rem; color: var(--ink-500); max-width:52ch;
}
.hero .hero-actions{ margin-top:1.8rem; display:flex; gap:.9rem; flex-wrap:wrap; }

.hero-visual{ position:relative; display:flex; justify-content:center; }
.hero-visual svg{ width:100%; max-width:420px; height:auto; }

/* quick nav chips */
.axis-nav{
  border-top:1px solid var(--line);
  background:#fff;
}
.axis-nav .container-xl{
  display:flex; gap:.6rem; overflow-x:auto; padding-top:14px; padding-bottom:14px;
  scrollbar-width:none;
}
.axis-nav .container-xl::-webkit-scrollbar{ display:none; }
.axis-chip{
  flex:none;
  display:flex; align-items:center; gap:.5rem;
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:.45rem 1rem;
  font-size:.85rem; font-weight:700; color:var(--ink-700);
  white-space:nowrap;
  transition:border-color .15s ease, color .15s ease;
}
.axis-chip:hover{ border-color:var(--purple-500); color:var(--purple-700); }
.axis-chip .num{ color:var(--purple-600); font-weight:800; }

/* ============================================================
   HIGHLIGHTS SLIDER (Carousel)
   ============================================================ */
.highlights-slider{
  background: var(--ink-900);
  position:relative;
}
.highlights-slider .carousel-item{
  padding:56px 0;
}
.slide-inner{
  display:grid; grid-template-columns: auto 1fr; gap:2rem; align-items:center;
  max-width:var(--container-max); margin:0 auto; padding:0 20px;
}
.slide-inner .slide-icon{
  width:76px; height:76px; flex:none;
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--purple-300);
}
.slide-inner .slide-icon svg{ width:34px; height:34px; }
.slide-inner h3{ color:#fff; font-size:1.35rem; margin-bottom:.5rem; }
.slide-inner p{ color:rgba(255,255,255,.72); max-width:62ch; font-size:.98rem; }
.highlights-slider .carousel-indicators{ bottom:10px; }
.highlights-slider .carousel-indicators [data-bs-target]{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); border:none; opacity:1;
}
.highlights-slider .carousel-indicators .active{ background:var(--purple-400,#A8449C); }
.highlights-slider .carousel-control-prev,
.highlights-slider .carousel-control-next{ width:5%; opacity:.6; }

/* ============================================================
   PROBLEM / SOLUTION SECTIONS (6 axes)
   ============================================================ */
.axis-section{ padding:70px 0; scroll-margin-top:90px; }
.axis-section.alt{ background: var(--purple-050); }

.axis-header{ max-width:680px; margin-bottom:2.6rem; }
.axis-header .axis-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.85rem; font-weight:800; color:var(--purple-700);
  margin-bottom:.9rem;
}
.axis-header .axis-badge .n{
  width:30px; height:30px; border-radius:50%;
  background:var(--purple-700); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
}
.axis-header h2{ font-size:1.75rem; margin-bottom:.6rem; }
.axis-header p{ color:var(--ink-500); font-size:1rem; }

.axis-body{ display:grid; grid-template-columns: 380px 1fr; gap:3rem; align-items:start; }
.axis-section.reverse .axis-body{ direction:ltr; }
.axis-section.reverse .axis-body > *{ direction:rtl; }

.axis-graphic{
  border:1.5px solid var(--line);
  border-radius: var(--radius-md);
  background:#fff;
  padding:2rem;
  display:flex; align-items:center; justify-content:center;
  min-height:280px;
}
.axis-graphic svg{ width:100%; height:auto; max-width:280px; }

.issue-list{ display:flex; flex-direction:column; }
.issue-item{
  padding:1.5rem 0;
  border-bottom:1px solid var(--line);
  display:grid; grid-template-columns: 1fr;
  gap:.9rem;
}
.issue-item:first-child{ padding-top:0; }
.issue-item:last-child{ border-bottom:none; padding-bottom:0; }

.issue-item .issue-title{
  display:flex; align-items:baseline; gap:.6rem;
  font-weight:700; font-size:1.05rem; color:var(--ink-900);
}
.issue-item .issue-title .tag{
  flex:none;
  font-size:.7rem; font-weight:800; color:#fff; background:var(--ink-700);
  border-radius:4px; padding:.18rem .5rem; letter-spacing:.02em;
}
.issue-item .issue-problem{ color:var(--ink-500); font-size:.95rem; }

.issue-item .issue-solution{
  display:flex; gap:.7rem; align-items:flex-start;
  background:var(--purple-050);
  border-inline-start:3px solid var(--purple-600);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:.85rem 1rem;
}
.axis-section.alt .issue-item .issue-solution{ background:#fff; }
.issue-item .issue-solution svg{ width:18px; height:18px; color:var(--purple-700); flex:none; margin-top:.2rem; }
.issue-item .issue-solution .txt{ font-size:.93rem; color:var(--ink-700); }
.issue-item .issue-solution .txt b{ color:var(--ink-900); font-weight:700; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner{
  background: linear-gradient(135deg, var(--purple-800), var(--purple-700) 60%, var(--purple-600));
  padding:56px 0;
  position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size:24px 24px;
  opacity:.5;
}
.cta-banner .row-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.cta-banner h3{ color:#fff; font-size:1.55rem; margin-bottom:.4rem; }
.cta-banner p{ color:rgba(255,255,255,.8); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background: var(--ink-900);
  color: rgba(255,255,255,.7);
  padding-top:60px;
}
.site-footer h6{ color:#fff; font-weight:700; font-size:1rem; margin-bottom:1.1rem; }
.site-footer .brand-logo .brand-text b{ color:#fff; }
.site-footer .foot-about{ color:rgba(255,255,255,.62); font-size:.92rem; max-width:34ch; margin-top:1rem; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.65rem; }
.site-footer ul a{ color:rgba(255,255,255,.68); font-size:.93rem; transition:color .15s ease; }
.site-footer ul a:hover{ color:#fff; }
.footer-contact li{ display:flex; align-items:flex-start; gap:.6rem; color:rgba(255,255,255,.68); font-size:.92rem; }
.footer-contact li svg{ width:17px; height:17px; flex:none; margin-top:.2rem; color:var(--purple-300); }
.social-row{ display:flex; gap:.6rem; margin-top:1.2rem; }
.social-row a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.social-row a:hover{ background:var(--purple-600); border-color:var(--purple-600); }
.social-row a svg{ width:16px; height:16px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:2.6rem; padding:1.3rem 0;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.85rem; color:rgba(255,255,255,.5);
}

/* ============================================================
   INNER PAGES (About / Contact)
   ============================================================ */
.page-hero{
  background: var(--purple-050);
  padding:52px 0;
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow-line{ margin-bottom:.8rem; }
.page-hero h1{ font-size:2rem; }
.page-hero p{ color:var(--ink-500); margin-top:.7rem; max-width:60ch; }

.section{ padding:64px 0; }
.section.alt{ background:var(--purple-050); }
.section h2{ font-size:1.6rem; margin-bottom:.6rem; }
.section .section-sub{ color:var(--ink-500); max-width:60ch; margin-bottom:2.2rem; }

.value-card{
  border:1.5px solid var(--line); border-radius:var(--radius-md);
  background:#fff; padding:1.6rem;
  height:100%;
}
.value-card .icon{
  width:46px; height:46px; border-radius:10px;
  background:var(--purple-100); color:var(--purple-700);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.value-card .icon svg{ width:22px; height:22px; }
.value-card h5{ font-weight:700; font-size:1.02rem; margin-bottom:.5rem; }
.value-card p{ font-size:.92rem; color:var(--ink-500); }

.process-steps{ position:relative; }
.process-step{
  display:flex; gap:1.2rem; padding-bottom:2.2rem; position:relative;
}
.process-step:last-child{ padding-bottom:0; }
.process-step::before{
  content:""; position:absolute; right:19px; top:44px; bottom:0; width:1.5px;
  background:var(--line);
}
.process-step:last-child::before{ display:none; }
.process-step .step-num{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:#fff; border:1.5px solid var(--purple-600); color:var(--purple-700);
  display:flex; align-items:center; justify-content:center; font-weight:800; z-index:2;
}
.process-step h5{ font-weight:700; margin-bottom:.35rem; }
.process-step p{ color:var(--ink-500); font-size:.93rem; max-width:60ch; }

.team-quote{
  border-inline-start:3px solid var(--purple-600);
  padding:0 1.3rem; font-size:1.15rem; color:var(--ink-700); font-weight:500;
}

/* contact page */
.contact-card{
  border:1.5px solid var(--line); border-radius:var(--radius-md); background:#fff;
  padding:1.5rem; display:flex; gap:1rem; align-items:flex-start; height:100%;
}
.contact-card .icon{
  width:44px; height:44px; border-radius:10px; flex:none;
  background:var(--purple-700); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.contact-card .icon svg{ width:20px; height:20px; }
.contact-card h6{ font-weight:700; margin-bottom:.3rem; }
.contact-card p, .contact-card a{ font-size:.92rem; color:var(--ink-500); }
.contact-card a:hover{ color:var(--purple-700); }

.contact-form-wrap{
  border:1.5px solid var(--line); border-radius:var(--radius-md); background:#fff; padding:2.2rem;
}
.form-label{ font-weight:600; font-size:.92rem; color:var(--ink-700); }
.form-control, .form-select{
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:.65rem .9rem; font-family:var(--font);
}
.form-control:focus, .form-select:focus{
  border-color:var(--purple-600); box-shadow:0 0 0 .18rem rgba(124,46,117,.13);
}

.map-block{
  border:1.5px solid var(--line); border-radius:var(--radius-md);
  background: var(--purple-050);
  min-height:320px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.map-block svg{ width:100%; height:100%; position:absolute; inset:0; opacity:.5; }
.map-block .map-label{
  position:relative; z-index:2; background:#fff; border:1.5px solid var(--line);
  border-radius:var(--radius-sm); padding:.9rem 1.3rem; display:flex; gap:.6rem; align-items:center;
  font-weight:700; color:var(--ink-700); font-size:.9rem;
}
.map-block .map-label svg{ position:static; width:18px; height:18px; opacity:1; color:var(--purple-700); }

.faq-accordion .accordion-item{
  border:none; border-bottom:1px solid var(--line); background:transparent; border-radius:0;
}
.faq-accordion .accordion-button{
  font-weight:700; color:var(--ink-900); background:transparent; padding:1.1rem 0; box-shadow:none;
}
.faq-accordion .accordion-button:not(.collapsed){ color:var(--purple-700); background:transparent; }
.faq-accordion .accordion-button::after{ margin-inline-start:auto; }
.faq-accordion .accordion-body{ padding:0 0 1.2rem; color:var(--ink-500); font-size:.94rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .hero h1{ font-size:2.05rem; }
  .axis-body{ grid-template-columns:1fr; }
  .axis-graphic{ max-width:320px; margin:0 auto; }
  .slide-inner{ grid-template-columns:1fr; text-align:center; }
  .slide-inner .slide-icon{ margin:0 auto; }
  .cta-banner .row-inner{ justify-content:center; text-align:center; }
}
@media (max-width: 575.98px){
  .hero h1{ font-size:1.7rem; }
  .axis-header h2{ font-size:1.45rem; }
}

/* focus visibility */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--purple-600); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}