:root{
  
  --brand:        #4F46E5;        
  --brand-2:      #6D28D9;        
  

  
  --writer:  #2B579A;   
  --calc:    #107C41;   
  --slides:  #B7472A;   
  --pdf:     #C8102E;   

  
  --ink:     #14161c;
  --body:    #444b59;
  --muted:   #6b7280;
  --line:    #e7e8ee;
  --bg:      #ffffff;
  --bg-soft: #f6f7fb;
  --card:    #ffffff;
  --radius:  18px;
  --shadow:  0 1px 2px rgba(20,22,28,.04), 0 12px 32px rgba(20,22,28,.07);
  --shadow-lg: 0 24px 60px rgba(20,22,28,.14);
  --container: 1140px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Cairo", sans-serif;
}
.xrero-office *{box-sizing:border-box}
.xrero-office{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.xrero-office h1, .xrero-office h2, .xrero-office h3{color:var(--ink); line-height:1.12; letter-spacing:-.02em; margin:0}
.xrero-office a{color:inherit; text-decoration:none}
.xrero-office img, .xrero-office svg{display:block}
.xrero-office .container{width:100%; max-width:var(--container); margin:0 auto; padding:0 24px}
.xrero-office .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand); background:color-mix(in srgb, var(--brand) 10%, transparent);
  padding:6px 12px; border-radius:999px;
}
.xrero-office .muted{color:var(--muted)}
.xrero-office .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-weight:700; font-size:16px; cursor:pointer;
  padding:13px 22px; border-radius:12px; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.xrero-office .btn:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset:2px}
.xrero-office .btn-primary{ background:var(--brand); color:#fff; box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 30%, transparent); }
.xrero-office .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px color-mix(in srgb, var(--brand) 38%, transparent); }
.xrero-office .btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.xrero-office .btn-ghost:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--brand) 40%, var(--line)); }
.xrero-office .btn-lg{padding:16px 28px; font-size:17px}
.xrero-office .btn .ico{width:18px;height:18px;flex:0 0 18px}
@media(max-width:820px){}
.xrero-office .hero{position:relative; overflow:hidden; padding:84px 0 72px}
.xrero-office .hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1100px 520px at 78% -8%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%),
    radial-gradient(820px 460px at 8% 12%, color-mix(in srgb, var(--brand-2) 12%, transparent), transparent 55%);
}
.xrero-office .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center}
.xrero-office .hero h1{font-size:clamp(34px, 5vw, 56px); font-weight:800; margin:18px 0 0}
.xrero-office .hero p.lead{font-size:clamp(17px,2.1vw,21px); margin:20px 0 0; max-width:38ch}
.xrero-office .hero .cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.xrero-office .hero .trust{display:flex; flex-wrap:wrap; gap:18px 26px; margin-top:28px; font-size:14.5px; color:var(--muted)}
.xrero-office .hero .trust span{display:inline-flex; align-items:center; gap:8px}
.xrero-office .hero .trust svg{width:17px;height:17px;color:var(--brand)}
@media(max-width:900px){.xrero-office .hero-grid{grid-template-columns:1fr; gap:40px}
.xrero-office .hero{padding:56px 0}}
.xrero-office .suite{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  background:#fff; border:1px solid var(--line); border-radius:24px; padding:22px;
  box-shadow:var(--shadow-lg);
  transform:rotate(-1.5deg);
}
.xrero-office .suite .tile{
  border-radius:16px; padding:20px; color:#fff; min-height:128px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.xrero-office .suite .tile::after{content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.12)}
.xrero-office .suite .tile svg{width:30px;height:30px;color:#fff;position:relative}
.xrero-office .suite .tile b{font-size:17px; font-weight:700; letter-spacing:-.01em}
.xrero-office .suite .tile small{display:block; opacity:.85; font-weight:500; font-size:12.5px; margin-top:2px}
.xrero-office .t-writer{background:linear-gradient(150deg, var(--writer), color-mix(in srgb, var(--writer) 78%, #000))}
.xrero-office .t-calc{background:linear-gradient(150deg, var(--calc), color-mix(in srgb, var(--calc) 78%, #000))}
.xrero-office .t-slides{background:linear-gradient(150deg, var(--slides), color-mix(in srgb, var(--slides) 78%, #000))}
.xrero-office .t-pdf{background:linear-gradient(150deg, var(--pdf), color-mix(in srgb, var(--pdf) 78%, #000))}
.xrero-office .strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft)}
.xrero-office .strip .row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 34px; padding:22px 0; font-weight:600; color:var(--body); font-size:15px}
.xrero-office .strip .row b{color:var(--ink)}
.xrero-office .chip{display:inline-flex;align-items:center;gap:9px}
.xrero-office .dot{width:9px;height:9px;border-radius:50%}
.xrero-office section{padding:84px 0}
.xrero-office .sec-head{max-width:62ch; margin:0 auto 50px; text-align:center}
.xrero-office .sec-head h2{font-size:clamp(28px,3.6vw,40px); font-weight:800}
.xrero-office .sec-head p{margin:16px 0 0; font-size:18px}
.xrero-office .apps{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media(max-width:760px){.xrero-office .apps{grid-template-columns:1fr}}
.xrero-office .app{
  --c:var(--brand);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 30px 26px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.xrero-office .app::before{content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:var(--c)}
.xrero-office .app:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--c) 35%, var(--line))}
.xrero-office .app .top{display:flex; align-items:center; gap:15px; margin-bottom:14px}
.xrero-office .app .icon{width:54px;height:54px;border-radius:14px;background:var(--c);display:grid;place-items:center;flex:0 0 54px;box-shadow:0 8px 18px color-mix(in srgb,var(--c) 32%,transparent)}
.xrero-office .app .icon svg{width:28px;height:28px;color:#fff}
.xrero-office .app h3{font-size:21px}
.xrero-office .app .kicker{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c)}
.xrero-office .app .desc{margin:2px 0 16px; font-size:15.5px}
.xrero-office .app ul{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px}
.xrero-office .app li{display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--body)}
.xrero-office .app li svg{width:18px;height:18px;color:var(--c);flex:0 0 18px;margin-top:3px}
.xrero-office .app .dl{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.xrero-office .app .dl .btn{background:var(--c); color:#fff; border-color:transparent}
.xrero-office .app .dl .btn:hover{transform:translateY(-2px); filter:brightness(1.05)}
.xrero-office .app .dl .meta{font-size:12.5px; color:var(--muted)}
.xrero-office .design{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.xrero-office .feats{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media(max-width:760px){.xrero-office .feats{grid-template-columns:1fr}}
.xrero-office .feat{display:flex; gap:18px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.xrero-office .feat .fi{width:48px;height:48px;border-radius:12px;flex:0 0 48px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
.xrero-office .feat .fi svg{width:24px;height:24px}
.xrero-office .feat h3{font-size:18px; margin-bottom:6px}
.xrero-office .feat p{margin:0; font-size:15px}
.xrero-office .band{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff}
.xrero-office .band .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
@media(max-width:760px){.xrero-office .band .grid{grid-template-columns:repeat(2,1fr); gap:30px 16px}}
.xrero-office .band .stat b{display:block; font-size:30px; font-weight:800; color:#fff; letter-spacing:-.02em}
.xrero-office .band .stat span{font-size:14.5px; opacity:.9}
.xrero-office .download .panel{
  background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-lg);
  padding:46px; text-align:center;
}
.xrero-office .download h2{font-size:clamp(26px,3.4vw,36px); font-weight:800}
.xrero-office .download p.sub{margin:14px auto 0; font-size:18px; max-width:52ch}
.xrero-office .dl-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:34px 0 8px}
@media(max-width:760px){.xrero-office .dl-grid{grid-template-columns:repeat(2,1fr)}}
.xrero-office .dl-app{
  border:1px solid var(--line); border-radius:14px; padding:18px 14px; display:flex; flex-direction:column;
  align-items:center; gap:10px; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.xrero-office .dl-app:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--c) 45%,var(--line)); box-shadow:var(--shadow)}
.xrero-office .dl-app .icon{width:46px;height:46px;border-radius:12px;background:var(--c);display:grid;place-items:center}
.xrero-office .dl-app .icon svg{width:24px;height:24px;color:#fff}
.xrero-office .dl-app b{font-size:15px;color:var(--ink)}
.xrero-office .dl-app .btn{padding:9px 16px;font-size:14px;background:var(--c);color:#fff}
.xrero-office .sysreq{margin-top:24px; font-size:14px; color:var(--muted)}
.xrero-office .sysreq b{color:var(--ink)}
.xrero-office .faq-list{max-width:780px;margin:0 auto;display:grid;gap:14px}
.xrero-office details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 22px;transition:border-color .15s}
.xrero-office details[open]{border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.xrero-office summary{cursor:pointer;font-weight:700;color:var(--ink);padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:16.5px}
.xrero-office summary::-webkit-details-marker{display:none}
.xrero-office summary::after{content:"+";font-size:24px;color:var(--brand);font-weight:400;line-height:1}
.xrero-office details[open] summary::after{content:"–"}
.xrero-office details .ans{padding:0 0 18px;font-size:15.5px}
@media (prefers-reduced-motion: reduce){.xrero-office *{transition:none !important; scroll-behavior:auto}
.xrero-office .suite{transform:none}}
/* ============================================================
   Integration overrides — keep the office content on a solid
   white sheet when embedded inside the main (dark-chrome) site,
   and contain the hero's decorative ::before so it can't bleed
   into the surrounding dark theme.
   ============================================================ */
.xrero-office{
  background:#ffffff !important;
  position:relative;
  z-index:1;
  isolation:isolate;
}
.xrero-office .hero{ background:#ffffff; }
.xrero-office .hero::before{ z-index:0 !important; }
.xrero-office .hero > *{ position:relative; z-index:1; }

/* ============================================================
   Fix Bootstrap .row collision — Odoo's framework defines
   `.row > * { width:100% }`, which forces the compat-strip chips
   to stack vertically. Restore the original inline-row layout.
   ============================================================ */
.xrero-office .strip .row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px 34px !important;
}
.xrero-office .strip .row > *{
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-top:0 !important;
}

/* ============================================================
   RTL (Arabic) adjustments for the office page
   ============================================================ */
.xrero-office[dir="rtl"]{ text-align:right; }
.xrero-office[dir="rtl"] .hero p.lead{ max-width:none; }
.xrero-office[dir="rtl"] .suite{ transform:rotate(1.5deg); }
.xrero-office[dir="rtl"] .tile::after{ right:auto; left:-30px; }
.xrero-office[dir="rtl"] .app::before{ left:auto; right:0; }
.xrero-office[dir="rtl"] .btn .ico,
.xrero-office[dir="rtl"] .app li svg,
.xrero-office[dir="rtl"] .hero .trust svg{ transform:scaleX(-1); }
.xrero-office[dir="rtl"] summary::after{ margin-left:0; margin-right:auto; }