:root{
  --about-ink:#020817;
  --about-cyan:#55dcff;
  --about-blue:#278fff;
  --about-line:rgba(82,191,255,.18);
}

html{scroll-behavior:smooth}
body.about-page{background:var(--about-ink);overflow-x:hidden}
.about-main{position:relative;isolation:isolate}
.about-world{position:fixed;inset:0;z-index:-5;overflow:hidden;background:#020817}
.about-bg{position:absolute;inset:-3%;background:url('assets/iot-building.webp') center center/cover no-repeat;filter:brightness(.78) saturate(1.08) contrast(1.03);transform:scale(1.025);animation:aboutBreath 18s ease-in-out infinite alternate}
.about-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,8,23,.88) 0%,rgba(2,8,23,.46) 36%,rgba(2,8,23,.18) 60%,rgba(2,8,23,.35) 100%),linear-gradient(0deg,rgba(2,8,23,.60),transparent 38%,rgba(2,8,23,.28))}
[dir="rtl"] .about-bg:after{background:linear-gradient(270deg,rgba(2,8,23,.88) 0%,rgba(2,8,23,.46) 36%,rgba(2,8,23,.18) 60%,rgba(2,8,23,.35) 100%),linear-gradient(0deg,rgba(2,8,23,.60),transparent 38%,rgba(2,8,23,.28))}
.about-bg-glow{position:absolute;inset:0;background:radial-gradient(circle at 69% 48%,rgba(29,139,255,.15),transparent 24%),radial-gradient(circle at 49% 52%,rgba(42,222,255,.07),transparent 29%);mix-blend-mode:screen;animation:aboutGlow 8s ease-in-out infinite alternate}
.about-grid{position:absolute;inset:0;opacity:.055;background-image:linear-gradient(rgba(76,177,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(76,177,255,.4) 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(90deg,transparent,black 25%,black 75%,transparent)}

.about-stage{position:relative;min-height:92vh;display:flex;align-items:center;padding:120px clamp(34px,7vw,132px);border-bottom:1px solid rgba(92,166,230,.08)}
.about-stage:nth-of-type(even){justify-content:flex-end}
.about-card,.contact-card{position:relative;width:min(650px,43vw);padding:40px 42px;border:1px solid rgba(94,194,255,.17);border-radius:30px;background:linear-gradient(145deg,rgba(5,15,33,.76),rgba(3,10,25,.52));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 34px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);overflow:hidden}
.about-card:before,.contact-card:before{content:"";position:absolute;inset:-1px;background:linear-gradient(115deg,transparent 15%,rgba(104,220,255,.08) 39%,rgba(157,231,255,.20) 47%,rgba(46,139,255,.06) 55%,transparent 72%);transform:translateX(-130%);animation:glassSheen 9s ease-in-out infinite;pointer-events:none}
.about-card:after,.contact-card:after{content:"";position:absolute;left:40px;right:40px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(74,218,255,.55),rgba(46,127,255,.3),transparent);box-shadow:0 0 18px rgba(68,206,255,.18)}
.about-card-right{margin-inline-start:auto}
[dir="rtl"] .about-card-right{margin-inline-start:0;margin-inline-end:auto}

.card-index{display:flex;align-items:center;gap:13px;margin-bottom:25px;color:#63dbff}
.card-index span{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(72,178,255,.28);border-radius:50%;font-weight:600;font-size:12px;line-height:1;color:#5fcfff;background:rgba(6,21,43,.30)}
.card-index i{width:32px;height:1px;background:linear-gradient(90deg,transparent,#57dcff)}
.card-index b{font-weight:750;font-size:10px;line-height:1.2;letter-spacing:.20em;text-transform:uppercase}
[dir="rtl"] .card-index b{letter-spacing:.02em;text-transform:none;font-size:12px}

.about-card h1,.about-card h2,.contact-card h2{margin:0;color:#f4f8ff;line-height:1.06;letter-spacing:-.045em;text-wrap:balance}
.about-card h1{font-size:clamp(48px,4.2vw,72px)}
.about-card h2,.contact-card h2{font-size:clamp(42px,3.7vw,64px)}
[dir="rtl"] .about-card h1,[dir="rtl"] .about-card h2,[dir="rtl"] .contact-card h2{line-height:1.22;letter-spacing:-.018em}
.about-card h1 em,.about-card h2 em,.contact-card h2 em{display:block;margin-top:7px;font-style:normal;background:linear-gradient(90deg,#79e5ff,#4bd0ff 48%,#238cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-card>p,.contact-heading>p{margin:26px 0 0;color:#b3c2d6;font-size:16px;line-height:1.95;max-width:590px}

.hero-signature{display:flex;align-items:center;gap:11px;margin-top:30px;color:#6adfff;font-weight:700;font-size:10px;line-height:1;letter-spacing:.2em}
.hero-signature i{width:5px;height:5px;border-radius:50%;background:#27dec2;box-shadow:0 0 12px #27dec2}
.micro-points{display:grid;gap:13px;margin-top:28px;padding-top:23px;border-top:1px solid rgba(110,178,233,.12)}
.micro-points span{display:flex;align-items:center;gap:11px;color:#c0d0e2;font-size:13px}.micro-points i{width:6px;height:6px;border-radius:50%;background:#2cdfc7;box-shadow:0 0 13px #2cdfc7}.micro-points b{font-weight:500}

.about-card-ip{width:min(720px,46vw);border-color:rgba(102,213,255,.25);background:linear-gradient(145deg,rgba(4,16,35,.84),rgba(2,9,23,.60));box-shadow:0 34px 100px rgba(0,0,0,.34),0 0 70px rgba(18,113,255,.06),inset 0 1px 0 rgba(255,255,255,.04)}
.ip-seal{position:absolute;top:32px;inset-inline-end:34px;width:74px;height:74px;display:grid;place-items:center}
.ip-ring{position:absolute;inset:0;border:1px solid rgba(87,206,255,.35);border-radius:50%;box-shadow:0 0 26px rgba(46,184,255,.09);animation:ipPulse 3.8s ease-in-out infinite}.ip-ring:before{content:"";position:absolute;inset:9px;border:1px dashed rgba(82,182,255,.28);border-radius:50%;animation:spin 12s linear infinite}
.ip-core{position:relative;color:#65dcff;font-weight:800;font-size:13px;line-height:1;letter-spacing:.08em}
.ip-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.ip-tags span{padding:9px 12px;border:1px solid rgba(76,185,255,.18);border-radius:999px;background:rgba(4,18,39,.36);color:#86b6d2;font-weight:700;font-size:9px;line-height:1;letter-spacing:.13em}

.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
.value-grid article{padding:19px 17px 17px;border:1px solid rgba(86,180,255,.13);border-radius:18px;background:rgba(4,17,37,.36);min-height:154px}.value-grid article>span{color:#4dd8ff;font-weight:700;font-size:10px;line-height:1}.value-grid h3{margin:15px 0 8px;color:#eef7ff;font-size:17px}.value-grid p{margin:0;color:#91a7bf;font-size:12px;line-height:1.7}

.about-contact{min-height:100vh;justify-content:center!important;padding-bottom:150px}
.contact-card{width:min(1100px,82vw);display:grid;grid-template-columns:minmax(300px,.82fr) minmax(440px,1.18fr);gap:54px;align-items:center;padding:48px 50px;background:linear-gradient(145deg,rgba(3,14,32,.89),rgba(3,10,23,.70));border-color:rgba(89,203,255,.25)}
.contact-details{display:grid;gap:11px}.contact-row{display:grid;grid-template-columns:48px 1fr 24px;gap:14px;align-items:center;padding:14px 16px;border:1px solid rgba(86,183,255,.15);border-radius:17px;background:rgba(4,17,38,.44);text-decoration:none;transition:.35s}.contact-row:hover{transform:translateY(-3px);border-color:rgba(91,215,255,.38);background:rgba(7,27,55,.55);box-shadow:0 16px 42px rgba(0,0,0,.22)}.contact-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(90,207,255,.25);border-radius:50%;color:#61dcff;background:rgba(5,22,47,.48)}.contact-row>span:nth-child(2){display:flex;flex-direction:column;gap:5px}.contact-row small{color:#7f97b2;font-size:11px}.contact-row strong{color:#f0f7ff;font-size:15px;font-weight:650}.contact-row>b{color:#54d7ff;font-size:16px}

.reveal{opacity:0;transform:translateY(26px);filter:blur(4px)}.reveal.visible{animation:aboutReveal .85s cubic-bezier(.2,.78,.2,1) forwards}
.about-stage:nth-of-type(even) .reveal{transform:translateY(26px) translateX(15px)}
.about-stage:nth-of-type(odd) .reveal{transform:translateY(26px) translateX(-15px)}

@keyframes aboutBreath{from{transform:scale(1.025) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(-.35%,-.15%,0)}}
@keyframes aboutGlow{from{opacity:.55}to{opacity:1}}
@keyframes glassSheen{0%,62%{transform:translateX(-135%);opacity:0}68%{opacity:.4}82%{transform:translateX(135%);opacity:.12}100%{transform:translateX(135%);opacity:0}}
@keyframes aboutReveal{to{opacity:1;transform:none;filter:none}}
@keyframes ipPulse{0%,100%{transform:scale(.96);opacity:.7}50%{transform:scale(1.04);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:1100px){.about-card,.about-card-ip{width:min(630px,52vw)}.contact-card{width:90vw;grid-template-columns:1fr 1.15fr;gap:34px}.value-grid{grid-template-columns:1fr}}
@media(max-width:820px){.about-bg{background-position:62% center}.about-bg:after,[dir="rtl"] .about-bg:after{background:linear-gradient(0deg,rgba(2,8,23,.94) 0%,rgba(2,8,23,.70) 55%,rgba(2,8,23,.30) 100%)}.about-stage{min-height:790px;padding:118px 6vw 54px;align-items:flex-end!important}.about-card,.about-card-ip,.about-card-right{width:100%;margin:0!important;padding:28px 25px;border-radius:24px}.about-card h1{font-size:42px}.about-card h2,.contact-card h2{font-size:38px}.ip-seal{width:58px;height:58px;top:22px;inset-inline-end:23px}.contact-card{width:100%;grid-template-columns:1fr;padding:30px 24px;gap:30px}.about-contact{padding-bottom:80px}.value-grid{grid-template-columns:1fr}.about-grid{display:none}}
@media(max-width:560px){.about-stage{min-height:720px}.about-card h1{font-size:37px}.about-card h2,.contact-card h2{font-size:34px}.about-card>p,.contact-heading>p{font-size:14px}.contact-row{grid-template-columns:40px 1fr 18px;padding:12px}.contact-icon{width:36px;height:36px}.contact-row strong{font-size:13px}.ip-tags span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.about-bg,.about-bg-glow,.about-card:before,.contact-card:before,.ip-ring,.ip-ring:before,.reveal.visible{animation:none!important}.reveal{opacity:1;transform:none;filter:none}}

/* =========================================================
   WATCHOPS24 ABOUT — FINAL AR/EN PHYSICAL LAYOUT SYNC v2
   Keep the same card composition in both languages:
   01/03 on the physical left, 02/04 on the physical right.
   Arabic remains RTL inside the cards only.
   ========================================================= */
@media (min-width:821px){
  .about-stage{
    direction:ltr;
  }

  .about-stage .about-card,
  .about-stage .contact-card{
    direction:ltr;
  }

  html[dir="rtl"] .about-stage .about-card,
  html[dir="rtl"] .about-stage .contact-card{
    direction:rtl;
    text-align:right;
  }

  html[dir="ltr"] .about-stage .about-card,
  html[dir="ltr"] .about-stage .contact-card{
    direction:ltr;
    text-align:left;
  }

  .about-card-right{
    margin-left:auto !important;
    margin-right:0 !important;
  }

  html[dir="rtl"] .about-card-right{
    margin-left:auto !important;
    margin-right:0 !important;
  }

  .about-hero .about-card-hero,
  .about-ip .about-card-ip{
    margin-left:0 !important;
    margin-right:auto !important;
  }

  /* Contact remains centered and balanced in both languages. */
  .about-contact .contact-card{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* Do not mirror the cinematic background between AR and EN.
   This keeps the elevator/building visible in the same place on first view. */
html[dir="rtl"] .about-bg:after,
html[dir="ltr"] .about-bg:after{
  background:
    linear-gradient(90deg,rgba(2,8,23,.88) 0%,rgba(2,8,23,.46) 36%,rgba(2,8,23,.18) 60%,rgba(2,8,23,.35) 100%),
    linear-gradient(0deg,rgba(2,8,23,.60),transparent 38%,rgba(2,8,23,.28));
}

/* About footer uses the exact shared WatchOps24 footer geometry. */
.about-page .site-footer .footer-inner{
  width:auto;
  max-width:1480px;
  margin:0 auto;
}

/* =========================================================
   WATCHOPS24 ABOUT — FOOTER AR PHYSICAL LEFT FIX v4
   Keep the approved footer design. In Arabic, only the text
   direction is RTL; the navigation/trust group stays physically
   on the LEFT, matching the other approved pages.
   ========================================================= */
@media (min-width:981px){
  .about-page .site-footer .footer-links-row{
    direction:ltr !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    gap:clamp(44px,4vw,76px) !important;
  }

  /* Physical order on the left: trust marks first, menu beside them. */
  .about-page .site-footer .footer-trust{
    order:0 !important;
    direction:rtl !important;
    justify-content:flex-start !important;
    text-align:right !important;
    align-items:flex-start !important;
  }

  .about-page .site-footer .footer-nav{
    order:1 !important;
    direction:rtl !important;
    justify-content:flex-start !important;
    align-items:flex-end !important;
    text-align:right !important;
  }

  .about-page .site-footer .footer-nav a{
    direction:rtl !important;
    text-align:right !important;
  }

  /* English keeps the same physical placement and its own LTR text. */
  html[dir="ltr"] .about-page .site-footer .footer-trust,
  html[dir="ltr"] .about-page .site-footer .footer-nav{
    direction:ltr !important;
    text-align:left !important;
    align-items:flex-start !important;
  }
  html[dir="ltr"] .about-page .site-footer .footer-nav a{
    direction:ltr !important;
    text-align:left !important;
  }
}