/*
Theme Name: Mesar
Theme URI: https://mesar.net
Author: Mesar Team
Author URI: https://mesar.net
Description: قالب ووردبريس مخصص لـ "مِسار" — وكالة تسويق وإنتاج بالذكاء الاصطناعي متخصصة في براندات المطاعم والكافيهات (F&B) في مصر والسعودية. ثنائي اللغة (عربي RTL / إنجليزي)، بهوية بصرية كاملة مبنية على ألوان لوجو مِسار.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orbix
Tags: rtl-language-support, custom-menu, custom-logo, blog, one-column
*/

:root{
  /* brand palette derived from the Mesar mark:
     slate #2A3645 (the meem), teal #349186 (the path swoosh),
     red #AB2938 (Arabic wordmark), gold #D8A63F (Latin wordmark) */
  --slate-950:#131B24;
  --slate-900:#18222D;
  --slate-800:#1F2B37;
  --slate-700:#2A3645;
  --teal-500:#349186;
  --teal-400:#46A99D;
  --teal-300:#7FC9BF;
  --teal-100:#E0F1EF;
  --gold-500:#D8A63F;
  --red-600:#AB2938;
  --paper-50:#F9FAFA;
  --paper-100:#EFF3F2;
  --ink-900:#1B2530;
  --ink-600:#4C5A66;
  --ink-400:#8795A0;
  --white:#FFFFFF;
  --r-lg:28px;
  --r-md:18px;
  --r-sm:10px;
  --font-ar:'IBM Plex Sans Arabic', sans-serif;
  --font-en-display:'Inter', sans-serif;
  --font-en-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --heading-font: var(--font-ar);
  --body-font: var(--font-ar);
  --ease:cubic-bezier(.22,.9,.3,1);
}

body.lang-en{
  --heading-font: var(--font-en-display);
  --body-font: var(--font-en-body);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper-50);
  color:var(--ink-900);
  font-family:var(--body-font);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea,select{font-family:inherit;}

h1,h2,h3,h4{font-family:var(--heading-font);font-weight:700;letter-spacing:-0.01em;color:var(--slate-950);}
body.lang-en h1, body.lang-en h2, body.lang-en h3, body.lang-en h4{font-weight:700;letter-spacing:-0.02em;}
body.lang-en .hero h1{font-weight:800;}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
section{position:relative;}

body.lang-en [data-ar-only]{display:none !important;}
body:not(.lang-en) [data-en-only]{display:none !important;}

.screen-reader-text{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);word-wrap:normal !important;
}

/* ---------- dot / node background texture ---------- */
.dot-field{
  position:absolute;inset:0;
  background-image:radial-gradient(var(--teal-300) 1px, transparent 1.5px);
  background-size:26px 26px;
  opacity:.10;
  pointer-events:none;
}
.on-dark .dot-field{opacity:.14;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(249,250,250,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(27,37,48,.06);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
.brand{display:flex;align-items:center;gap:10px;}
/* the Mesar wordmark stacks Arabic over Latin, so it needs more height
   than a single-line mark to stay legible */
.brand img{height:44px;width:auto;}
.nav-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.nav-links a{font-size:15px;font-weight:600;color:var(--ink-600);transition:color .2s;}
.nav-links a:hover{color:var(--teal-500);}
.nav-right{display:flex;align-items:center;gap:14px;}
.lang-btn{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:var(--slate-950);
  border:1.5px solid rgba(27,37,48,.15);border-radius:999px;
  padding:8px 14px;transition:.2s;
}
.lang-btn:hover{border-color:var(--teal-500);color:var(--teal-500);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:15px;border-radius:999px;padding:12px 24px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.btn-primary{background:var(--teal-500);color:#fff;box-shadow:0 8px 20px -6px rgba(52,145,134,.55);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -6px rgba(52,145,134,.6);color:#fff;}
.btn-ghost{background:transparent;color:var(--slate-950);border:1.5px solid rgba(27,37,48,.15);}
.btn-ghost:hover{border-color:var(--slate-950);}
.btn-light{background:#fff;color:var(--slate-950);}
.btn-light:hover{transform:translateY(-2px);}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 8px 20px -6px rgba(37,211,102,.5);}
.btn-wa:hover{transform:translateY(-2px);color:#fff;}
.menu-toggle{display:none;font-size:22px;width:38px;height:38px;align-items:center;justify-content:center;}

.mobile-drawer{
  display:none;
  max-height:0;overflow:hidden;
  background:var(--paper-50);border-top:1px solid rgba(27,37,48,.06);
  transition:max-height .3s var(--ease);
}
.mobile-drawer.open{max-height:440px;}
.mobile-drawer .wrap{display:flex;flex-direction:column;gap:4px;padding:14px 28px 22px;}
.mobile-drawer a{padding:12px 4px;font-weight:700;font-size:15px;border-bottom:1px solid rgba(27,37,48,.06);}
.mobile-drawer .btn{margin-top:10px;width:100%;}

/* ---------- hero ---------- */
.hero{padding:88px 0 70px;overflow:hidden;}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--teal-500);
  background:var(--teal-100);padding:8px 16px;border-radius:999px;margin-bottom:22px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:2px;background:var(--teal-500);}
.hero h1{font-size:48px;line-height:1.5;margin-bottom:22px;}
body.lang-en .hero h1{font-size:52px;line-height:1.4;}
.pill-highlight{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--teal-500);color:#fff;
  border-radius:999px;padding:4px 20px 4px 14px;
  vertical-align:middle;
}
body.lang-en .pill-highlight{padding:4px 14px 4px 20px;}
.pill-highlight svg{flex:none;}
.hero p.lead{font-size:18px;color:var(--ink-600);max-width:540px;margin-bottom:34px;}
.hero-ctas{display:flex;gap:14px;margin-bottom:38px;flex-wrap:wrap;}
.badges{display:flex;flex-wrap:wrap;gap:10px 22px;}
.badge{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-600);}
.badge svg{flex:none;color:var(--teal-500);}

/* orbit diagram */
.orbit-wrap{position:relative;width:100%;max-width:440px;aspect-ratio:1/1;margin:0 auto;}
.orbit-ring{
  position:absolute;inset:8%;border:1.5px dashed rgba(52,145,134,.28);border-radius:50%;
  animation:spin 46s linear infinite;
}
.orbit-ring.inner{inset:26%;border-color:rgba(52,145,134,.16);animation-duration:34s;animation-direction:reverse;}
@keyframes spin{to{transform:rotate(360deg);}}
.orbit-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:118px;height:118px;border-radius:30px;
  background:linear-gradient(155deg, var(--slate-900), var(--slate-950));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 24px 46px -14px rgba(27,37,48,.5);
}
.orbit-core img{height:60px;width:60px;}
.orbit-node{
  position:absolute;width:128px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
}
.orbit-node .sq{
  width:46px;height:46px;border-radius:13px;background:var(--teal-500);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 12px 24px -8px rgba(52,145,134,.55);
  animation:pulse 3.6s ease-in-out infinite;
}
.orbit-node:nth-child(3) .sq{animation-delay:.4s;}
.orbit-node:nth-child(4) .sq{animation-delay:.8s;}
.orbit-node:nth-child(5) .sq{animation-delay:1.2s;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.orbit-node span{font-size:12.5px;font-weight:700;color:var(--slate-950);}
.orbit-node.n{top:0;left:50%;transform:translateX(-50%);}
.orbit-node.e{top:50%;right:-6%;transform:translateY(-50%);}
.orbit-node.s{bottom:0;left:50%;transform:translateX(-50%);}
.orbit-node.w{top:50%;left:-6%;transform:translateY(-50%);}

/* ---------- scroll badge ---------- */
.scroll-badge-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 28px;}
.scroll-badge{position:relative;width:52px;height:52px;}
.scroll-badge-ring{
  position:absolute;inset:0;border:1.5px dashed rgba(52,145,134,.35);border-radius:50%;
  animation:spin 12s linear infinite;
}
.scroll-badge-ring.inner{inset:10px;border-color:rgba(52,145,134,.2);animation-duration:8s;animation-direction:reverse;}
.scroll-badge-arrow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--teal-500);
  animation:bob 1.6s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,-50%);}50%{transform:translate(-50%,-40%);}}
.scroll-badge-label{font-size:12px;font-weight:700;color:var(--ink-400);letter-spacing:.03em;}

/* ---------- dotted divider ---------- */
.dot-divider{border-top:1.5px dashed rgba(27,37,48,.14);max-width:1180px;margin:0 auto;}

/* ---------- marquee ---------- */
.marquee-sec{padding:36px 0;border-top:1px solid rgba(27,37,48,.06);border-bottom:1px solid rgba(27,37,48,.06);}
.marquee-label{text-align:center;font-size:13px;font-weight:700;color:var(--ink-400);margin-bottom:22px;letter-spacing:.02em;}
.marquee-rows{display:flex;flex-direction:column;gap:22px;}
.marquee-track{display:flex;align-items:center;gap:34px;justify-content:center;flex-wrap:wrap;opacity:.75;}
.marquee-track img{height:60px;width:auto;object-fit:contain;}

/* ---------- stats ---------- */
.stats-sec{padding:80px 0;background:var(--slate-950);color:#fff;overflow:hidden;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;z-index:1;}
.stat-card{padding:8px 4px;}
.stat-num{font-family:var(--font-mono);font-size:38px;font-weight:700;color:var(--teal-300);margin-bottom:10px;}
.stat-label{font-size:14px;color:rgba(255,255,255,.68);max-width:210px;}

/* bento variant (homepage) */
.stats-bento{
  display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:20px;
  position:relative;z-index:1;
}
.bento-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);
  padding:28px 24px;display:flex;flex-direction:column;justify-content:flex-end;min-height:130px;
}
.bento-card:nth-child(1){grid-column:1;grid-row:1 / 3;min-height:auto;}
.bento-card:nth-child(2){grid-column:2;grid-row:1;}
.bento-card:nth-child(3){grid-column:3;grid-row:1;}
.bento-card:nth-child(4){grid-column:2 / 4;grid-row:2;}
.bento-card.accent{background:linear-gradient(150deg, var(--teal-500), var(--teal-400));border-color:transparent;}
.bento-icon{
  width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.1);color:var(--teal-300);
  display:flex;align-items:center;justify-content:center;margin-bottom:auto;
}
.bento-card.accent .bento-icon{background:rgba(255,255,255,.2);color:#fff;}
.bento-num{font-family:var(--font-mono);font-size:40px;font-weight:700;color:var(--teal-300);margin:18px 0 8px;}
.bento-card.accent .bento-num{color:#fff;font-size:52px;}
.bento-label{font-size:14px;color:rgba(255,255,255,.68);}
.bento-card.accent .bento-label{color:rgba(255,255,255,.9);font-size:15px;max-width:220px;}

/* ---------- section headers ---------- */
.sec-pad{padding:100px 0;}
.sec-head{max-width:640px;margin-bottom:56px;}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.sec-head h2{font-size:36px;margin-bottom:14px;}
.sec-head p{font-size:16.5px;color:var(--ink-600);}

/* ---------- services (modules) ---------- */
.modules-sec{background:var(--paper-50);}
.modules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:22px;}
.module-card{
  background:#fff;border:1px solid rgba(27,37,48,.07);border-radius:var(--r-lg);
  padding:30px 24px;position:relative;z-index:1;display:block;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.module-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(27,37,48,.18);}
.module-num{
  width:34px;height:34px;border-radius:10px;background:var(--slate-950);color:var(--teal-300);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;font-weight:700;
  margin-bottom:20px;
}
.module-card h3{font-size:18px;margin-bottom:10px;}
.module-card p{font-size:14.5px;color:var(--ink-600);}
.module-card.highlight{background:linear-gradient(155deg, var(--slate-950), var(--slate-800));border-color:transparent;}
.module-card.highlight h3, .module-card.highlight p{color:#fff;}
.module-card.highlight p{color:rgba(255,255,255,.68);}
.module-card.highlight .module-num{background:var(--teal-500);color:#fff;}
.module-card .more{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--teal-500);}
.module-card.highlight .more{color:var(--teal-300);}

/* ---------- journey: scroll-driven 3D path ----------
   Each card gets --p from JS: 0 when it sits at the focal point of the
   viewport, negative above it, positive below. Everything below is driven
   off that single value, so the whole rail animates from one scroll read. */
.journey-sec{background:var(--slate-950);overflow:hidden;}
.journey-sec .sec-head h2{color:#fff;}
.journey-sec .sec-head p{color:rgba(255,255,255,.68);}

.journey{
  position:relative;
  padding:10px 0;
}
/* the path itself — echoes the swoosh under the logo */
.journey-rail{
  position:absolute;top:0;bottom:0;left:50%;margin-left:-1px;
  width:2px;background:rgba(255,255,255,.09);border-radius:2px;overflow:hidden;
}
.journey-rail-fill{
  position:absolute;top:0;left:0;width:100%;
  height:calc(var(--fill, 0) * 100%);
  background:linear-gradient(180deg, var(--teal-300), var(--teal-500));
  box-shadow:0 0 14px rgba(52,145,134,.7);
}
/* the travelling marker rides the rail as you scroll */
.journey-marker{
  position:absolute;left:50%;margin-left:-26px;top:0;z-index:3;
  width:52px;height:52px;border-radius:16px;
  background:linear-gradient(155deg, var(--slate-800), var(--slate-950));
  border:1px solid rgba(127,201,191,.35);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.75), 0 0 0 6px var(--slate-950);
  display:flex;align-items:center;justify-content:center;
  will-change:top;
}
.journey-marker img{width:28px;height:28px;}

.journey-stops{position:relative;z-index:2;display:flex;flex-direction:column;gap:56px;}
.journey-stop{
  display:flex;
  /* perspective lives on the card's DIRECT parent — putting it further up
     would be flattened by the intermediate .journey-stops box and translateZ
     would end up doing nothing */
  perspective:900px;
  perspective-origin:50% 50%;
}
.journey-stop:nth-child(odd){justify-content:flex-start;}
.journey-stop:nth-child(even){justify-content:flex-end;}

.journey-card{
  width:min(46%, 430px);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);
  padding:28px 26px;
  position:relative;
  /* the 3D itself: cards lie back in Z and rotate up as they reach focus */
  transform:
    translateZ(calc(var(--depth, -260px)))
    rotateX(calc(var(--p, 0) * -16deg))
    rotateY(calc(var(--dir, 1) * var(--away, 1) * 14deg));
  opacity:var(--op, .35);
  transition:opacity .25s linear;
  will-change:transform, opacity;
  backface-visibility:hidden;
}
.journey-stop:nth-child(even) .journey-card{--dir:-1;}
.journey-card::before{
  /* connector nub pointing back to the rail */
  content:'';position:absolute;top:38px;
  width:34px;height:2px;background:linear-gradient(90deg, var(--teal-500), transparent);
}
.journey-stop:nth-child(odd) .journey-card::before{inset-inline-end:-34px;transform:scaleX(-1);}
.journey-stop:nth-child(even) .journey-card::before{inset-inline-start:-34px;}

.journey-num{
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  color:var(--teal-300);letter-spacing:.08em;
}
.journey-icon{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;margin:14px 0 16px;
  background:rgba(52,145,134,.18);color:var(--teal-300);
}
.journey-card h3{color:#fff;font-size:19px;margin-bottom:8px;}
.journey-card p{color:rgba(255,255,255,.66);font-size:14.5px;line-height:1.75;}

/* the in-focus card comes forward and lights up */
.journey-stop.is-active .journey-card{
  background:rgba(52,145,134,.13);
  border-color:rgba(127,201,191,.4);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9);
}
.journey-stop.is-active .journey-icon{background:var(--teal-500);color:#fff;}

/* ---------- industries ---------- */
.industries-sec{background:var(--paper-100);}
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.ind-card{
  background:#fff;border-radius:var(--r-md);padding:26px 22px;text-align:center;
  border:1px solid rgba(27,37,48,.06);
}
.ind-icon{
  width:52px;height:52px;border-radius:14px;background:var(--teal-100);color:var(--teal-500);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.ind-card h4{font-size:16px;margin-bottom:6px;}
.ind-card p{font-size:13.5px;color:var(--ink-600);}

/* ---------- problem / solution ---------- */
.ps-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;}
.ps-list details{
  border-bottom:1px solid rgba(27,37,48,.1);padding:22px 0;
}
.ps-list summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:17px;font-weight:700;color:var(--slate-950);
}
.ps-list summary::-webkit-details-marker{display:none;}
.ps-list summary .plus{
  flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(27,37,48,.2);
  display:flex;align-items:center;justify-content:center;font-size:16px;transition:.2s;
}
.ps-list details[open] summary .plus{background:var(--teal-500);border-color:var(--teal-500);color:#fff;transform:rotate(45deg);}
.ps-list .answer{padding-top:14px;font-size:15px;color:var(--ink-600);max-width:520px;}
.ps-list .tag{
  display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--teal-500);
  padding:4px 10px;border-radius:999px;margin-top:10px;
}

/* ---------- why ---------- */
.why-sec{background:var(--slate-950);color:#fff;}
.why-sec .sec-head h2, .why-sec .sec-head p{color:#fff;}
.why-sec .sec-head p{color:rgba(255,255,255,.68);}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1;}
.why-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);
  padding:28px 22px;
}
.why-card .sq{
  width:42px;height:42px;border-radius:12px;background:var(--teal-500);margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;
}
.why-card h4{color:#fff;font-size:16.5px;margin-bottom:8px;}
.why-card p{font-size:13.5px;color:rgba(255,255,255,.62);}

/* ---------- cta banner + contact form ---------- */
.cta-banner{padding:90px 0;}
.cta-box{
  background:linear-gradient(120deg, var(--teal-500), var(--teal-400) 60%, var(--slate-900));
  border-radius:36px;padding:64px 56px;text-align:center;color:#fff;position:relative;overflow:hidden;
}
.cta-box h2{color:#fff;font-size:32px;margin-bottom:14px;}
.cta-box p{color:rgba(255,255,255,.85);font-size:16px;margin-bottom:30px;}
.cta-box .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

.consult-form{
  position:relative;z-index:1;
  max-width:640px;margin:0 auto;text-align:start;
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.consult-form .field-full{grid-column:1 / -1;}
.consult-form label{display:block;font-size:13px;font-weight:700;color:rgba(255,255,255,.9);margin-bottom:6px;}
.consult-form input,.consult-form select,.consult-form textarea{
  width:100%;border:1.5px solid rgba(255,255,255,.35);border-radius:14px;
  background:rgba(255,255,255,.12);color:#fff;
  padding:13px 16px;font-size:15px;outline:none;transition:.2s;
}
.consult-form input::placeholder,.consult-form textarea::placeholder{color:rgba(255,255,255,.55);}
.consult-form input:focus,.consult-form select:focus,.consult-form textarea:focus{border-color:#fff;background:rgba(255,255,255,.18);}
.consult-form select{appearance:none;}
.consult-form select option{color:var(--ink-900);}
.consult-form textarea{min-height:110px;resize:vertical;}
.consult-form .btn{width:100%;font-size:16px;padding:15px 24px;}
.form-note{margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.65) !important;text-align:center;}
.form-msg{
  grid-column:1 / -1;border-radius:14px;padding:14px 18px;font-weight:700;font-size:14.5px;
  background:rgba(255,255,255,.95);color:var(--slate-950);
}
.form-msg.err{background:#FFE4E4;color:#8A1F2D;}

/* ---------- faq ---------- */
.faq-sec .wrap{max-width:820px;}
.faq-list details{border-bottom:1px solid rgba(27,37,48,.1);padding:20px 0;}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;font-weight:700;font-size:16px;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary .plus{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(27,37,48,.2);display:flex;align-items:center;justify-content:center;font-size:15px;transition:.2s;}
.faq-list details[open] summary .plus{background:var(--teal-500);border-color:var(--teal-500);color:#fff;transform:rotate(45deg);}
.faq-list .answer{padding-top:12px;font-size:14.5px;color:var(--ink-600);max-width:640px;}

/* ---------- blog ---------- */
.blog-sec{background:var(--paper-100);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.blog-card{background:#fff;border-radius:var(--r-md);padding:26px;border:1px solid rgba(27,37,48,.06);transition:.25s var(--ease);display:block;}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 20px 36px -18px rgba(27,37,48,.16);}
.blog-card .thumb{
  height:120px;border-radius:12px;background:linear-gradient(135deg, var(--slate-900), var(--teal-500));
  margin-bottom:18px;position:relative;overflow:hidden;
}
.blog-card .thumb img{width:100%;height:100%;object-fit:cover;}
.blog-card .thumb .dot-field{opacity:.35;}
.blog-card .meta{font-size:12px;color:var(--ink-400);font-weight:700;margin-bottom:8px;}
.blog-card h4{font-size:16px;line-height:1.4;margin-bottom:12px;}
.blog-card .read{font-size:13.5px;font-weight:700;color:var(--teal-500);}

/* ---------- inner pages (single post / page / service) ---------- */
.page-hero{
  background:var(--slate-950);color:#fff;padding:84px 0 64px;overflow:hidden;
}
.page-hero h1{color:#fff;font-size:40px;line-height:1.2;max-width:760px;position:relative;z-index:1;}
.page-hero .eyebrow{position:relative;z-index:1;background:rgba(255,255,255,.1);color:var(--teal-300);}
.page-hero .meta{position:relative;z-index:1;margin-top:18px;font-size:14px;color:rgba(255,255,255,.6);font-weight:600;}
.entry-wrap{max-width:820px;margin:0 auto;padding:70px 28px 90px;}
.entry-content{font-size:17px;color:var(--ink-600);line-height:1.9;}
.entry-content h2,.entry-content h3{margin:38px 0 14px;color:var(--slate-950);}
.entry-content h2{font-size:27px;}
.entry-content h3{font-size:21px;}
.entry-content p{margin-bottom:18px;}
.entry-content ul,.entry-content ol{margin:0 0 18px;padding-inline-start:24px;}
.entry-content ul{list-style:disc;}
.entry-content ol{list-style:decimal;}
.entry-content li{margin-bottom:8px;}
.entry-content a{color:var(--teal-500);font-weight:600;}
.entry-content blockquote{
  border-inline-start:4px solid var(--teal-500);background:var(--teal-100);
  padding:18px 22px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin-bottom:18px;color:var(--slate-950);
}
.entry-content img{border-radius:var(--r-md);margin:22px 0;}
.entry-cta{
  margin-top:52px;background:linear-gradient(120deg, var(--teal-500), var(--teal-400));
  border-radius:var(--r-lg);padding:38px 32px;text-align:center;color:#fff;
}
.entry-cta h3{color:#fff;font-size:22px;margin-bottom:10px;}
.entry-cta p{color:rgba(255,255,255,.85);font-size:15px;margin-bottom:20px;}

/* services archive */
.services-archive-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}

/* blog archive */
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:48px;flex-wrap:wrap;}
.pagination .page-numbers{
  min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;border:1.5px solid rgba(27,37,48,.12);font-weight:700;font-size:14px;padding:0 12px;
}
.pagination .page-numbers.current{background:var(--teal-500);border-color:var(--teal-500);color:#fff;}
.pagination a.page-numbers:hover{border-color:var(--teal-500);color:var(--teal-500);}

/* ---------- portfolio ---------- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px;justify-content:center;}
.filter-chip{
  font-size:14px;font-weight:700;color:var(--ink-600);
  border:1.5px solid rgba(27,37,48,.15);border-radius:999px;
  padding:9px 20px;transition:.2s;
}
.filter-chip:hover{border-color:var(--teal-500);color:var(--teal-500);}
.filter-chip.active{background:var(--teal-500);border-color:var(--teal-500);color:#fff;}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;}
.work-card{
  position:relative;aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(155deg, var(--slate-900), var(--slate-950));
  cursor:pointer;border:1px solid rgba(27,37,48,.08);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.work-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -18px rgba(27,37,48,.3);}
.work-card.hidden-by-filter{display:none;}
.work-card img,.work-card video{width:100%;height:100%;object-fit:cover;display:block;}
.work-card .overlay{
  position:absolute;inset:0;padding:18px;
  background:linear-gradient(180deg, transparent 55%, rgba(27,37,48,.88));
  opacity:0;transition:opacity .25s;display:flex;align-items:flex-end;
}
.work-card:hover .overlay,.work-card:focus-visible .overlay{opacity:1;}
.work-card .overlay h4{color:#fff;font-size:15px;margin-bottom:4px;}
.work-card .overlay p{color:rgba(255,255,255,.75);font-size:12.5px;margin:0;}
.work-card .play-badge{
  position:absolute;top:12px;inset-inline-end:12px;z-index:2;
  width:36px;height:36px;border-radius:50%;
  background:rgba(27,37,48,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.work-single video,.work-single img{
  display:block;max-width:420px;width:100%;margin:0 auto;
  border-radius:var(--r-md);box-shadow:0 28px 60px -20px rgba(27,37,48,.35);
}
.work-single img{max-width:640px;}

/* lightbox */
.orbix-lightbox{
  position:fixed;inset:0;z-index:300;
  background:rgba(27,37,48,.94);
  display:flex;align-items:center;justify-content:center;
  padding:28px;animation:lbFade .2s ease;
}
@keyframes lbFade{from{opacity:0;}to{opacity:1;}}
.orbix-lightbox video{max-height:88vh;max-width:min(92vw,480px);border-radius:16px;display:block;}
.orbix-lightbox img{max-height:88vh;max-width:min(92vw,680px);border-radius:16px;display:block;object-fit:contain;}
.orbix-lightbox .lb-close{
  position:absolute;top:18px;inset-inline-end:18px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:20px;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.orbix-lightbox .lb-close:hover{background:var(--teal-500);}
.orbix-lightbox .lb-title{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.85);font-size:14px;font-weight:700;text-align:center;max-width:80vw;
}

/* ---------- about: vision & mission ---------- */
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.vm-grid .module-card{padding:38px 32px;}
.vm-grid .module-card p{font-size:15.5px;line-height:1.8;}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
.team-card{
  background:#fff;border:1px solid rgba(27,37,48,.07);border-radius:var(--r-lg);
  padding:30px 24px;text-align:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.team-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(27,37,48,.18);}
.team-photo{
  width:104px;height:104px;border-radius:50%;margin:0 auto 20px;overflow:hidden;
  background:linear-gradient(155deg, var(--slate-900), var(--slate-950));
  display:flex;align-items:center;justify-content:center;
}
.team-photo img{width:100%;height:100%;object-fit:cover;}
.team-initials{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--teal-300);}
.team-card h4{font-size:17px;margin-bottom:6px;}
.team-role{font-size:13.5px;color:var(--ink-600);}

/* ---------- pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;align-items:stretch;}
.pricing-card{
  position:relative;background:#fff;border:1px solid rgba(27,37,48,.08);border-radius:var(--r-lg);
  padding:34px 26px;display:flex;flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pricing-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(27,37,48,.18);}
.pricing-card.highlight{
  background:linear-gradient(155deg, var(--slate-950), var(--slate-800));
  border-color:transparent;color:#fff;
}
.pricing-card.highlight h3, .pricing-card.highlight .pricing-price{color:#fff;}
.pricing-card.highlight .pricing-desc{color:rgba(255,255,255,.68);}
.pricing-card.highlight .pricing-features li{color:rgba(255,255,255,.85);}
.pricing-card.highlight .pricing-features svg{color:var(--teal-300);}
.pricing-badge{
  position:absolute;top:-13px;right:26px;background:var(--teal-500);color:#fff;
  font-size:12px;font-weight:700;padding:5px 14px;border-radius:999px;
}
.pricing-card h3{font-size:19px;margin-bottom:8px;}
.pricing-desc{font-size:13.5px;color:var(--ink-600);margin-bottom:20px;min-height:40px;}
.pricing-price{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--slate-950);margin-bottom:22px;}
.pricing-features{margin-bottom:26px;flex:1;}
.pricing-features li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-600);margin-bottom:12px;}
.pricing-features svg{flex:none;color:var(--teal-500);margin-top:2px;}
.pricing-card .btn{width:100%;}

/* 404 */
.err-sec{padding:110px 0;text-align:center;}
.err-sec .big{font-family:var(--font-mono);font-size:96px;font-weight:700;color:var(--teal-500);line-height:1;margin-bottom:18px;}
.err-sec h1{font-size:30px;margin-bottom:12px;}
.err-sec p{color:var(--ink-600);margin-bottom:28px;}

/* ---------- footer ---------- */
.site-footer{background:var(--slate-950);color:rgba(255,255,255,.7);padding:70px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.1);}
/* dedicated light artwork on the dark footer — no invert filter, so the
   gold Latin wordmark keeps its brand colour */
.foot-brand img{height:52px;margin-bottom:16px;}
.foot-brand p{font-size:14px;line-height:1.7;max-width:280px;color:rgba(255,255,255,.55);}
.foot-social{display:flex;gap:10px;margin-top:18px;}
.foot-social a{
  width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:.2s;
}
.foot-social a:hover{background:var(--teal-500);color:#fff;}
.foot-col h5{color:#fff;font-size:14px;font-weight:700;margin-bottom:16px;}
.foot-col ul li{margin-bottom:11px;}
.foot-col a{font-size:14px;color:rgba(255,255,255,.6);transition:.2s;}
.foot-col a:hover{color:var(--teal-300);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:13px;color:rgba(255,255,255,.45);flex-wrap:wrap;gap:12px;}
.foot-legal{display:flex;gap:22px;}

/* floating whatsapp */
.wa-float{
  position:fixed;bottom:22px;inset-inline-end:22px;z-index:99;
  width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.6);
  transition:transform .2s var(--ease);
}
.wa-float:hover{transform:scale(1.08);color:#fff;}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;}
  .orbit-wrap{max-width:340px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);row-gap:36px;}
  .stats-bento{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;}
  .bento-card:nth-child(1){grid-column:1 / 3;grid-row:1;min-height:150px;}
  .bento-card:nth-child(2){grid-column:1;grid-row:2;}
  .bento-card:nth-child(3){grid-column:2;grid-row:2;}
  .bento-card:nth-child(4){grid-column:1 / 3;grid-row:3;}
  .ind-grid,.why-grid{grid-template-columns:repeat(2,1fr);}
  .ps-grid,.vm-grid{grid-template-columns:1fr;}
  .blog-grid,.archive-grid{grid-template-columns:1fr;}
  .work-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .menu-toggle{display:flex;}
  .mobile-drawer{display:block;}
  .page-hero h1{font-size:32px;}
  /* journey: rail moves to the inline-start edge (flips correctly in RTL),
     cards go full width in one column beside it */
  .journey-stop{perspective:700px;}
  .journey-rail{left:auto;margin-left:0;inset-inline-start:22px;}
  .journey-marker{left:auto;margin-left:0;inset-inline-start:22px;margin-inline-start:-25px;}
  .journey-stops{gap:34px;}
  .journey-stop:nth-child(odd),.journey-stop:nth-child(even){justify-content:flex-start;}
  /* flex:1 so the card fills what's left *after* the rail offset —
     width:100% would overflow past the opposite edge */
  .journey-card{width:auto;flex:1;margin-inline-start:56px;}
  .journey-stop:nth-child(odd) .journey-card::before,
  .journey-stop:nth-child(even) .journey-card::before{
    inset-inline-start:-34px;inset-inline-end:auto;transform:none;
  }
}
@media(max-width:560px){
  .wrap{padding:0 18px;}
  .nav-right{gap:8px;}
  .nav-right > a.btn-primary{display:none;}
  .hero h1{font-size:32px;}
  body.lang-en .hero h1{font-size:34px;}
  .sec-head h2{font-size:26px;}
  .modules-grid{grid-template-columns:1fr;}
  .ind-grid,.why-grid,.stats-grid{grid-template-columns:1fr;}
  .stats-bento{grid-template-columns:1fr;}
  .bento-card:nth-child(1),.bento-card:nth-child(2),.bento-card:nth-child(3),.bento-card:nth-child(4){grid-column:1;grid-row:auto;}
  .scroll-badge{width:64px;height:64px;}
  .cta-box{padding:40px 22px;}
  .consult-form{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .mobile-drawer .wrap{padding:14px 18px 22px;}
  .page-hero h1{font-size:27px;}
  .entry-wrap{padding:48px 18px 70px;}
}

@media (prefers-reduced-motion: reduce){
  .orbit-ring, .orbit-node .sq, .reveal{animation:none !important;transition:none !important;}
  /* journey: drop the depth and the travelling marker (the vestibular-
     triggering parts) but keep the in-focus card highlighting as you scroll,
     which is a colour change rather than movement */
  .journey-stop{perspective:none;}
  .journey-card{transform:none !important;opacity:1 !important;}
  .journey-marker{display:none;}
  .journey-rail-fill{height:100% !important;}
  .journey-stop.is-active .journey-card{transition:background .2s linear, border-color .2s linear;}
}