/* ==========================================================
   Tourfecto — Compass Design System (homepage)
   مبني بـ logical properties عشان يشتغل صح LTR/RTL من غير نسخة منفصلة.
   ========================================================== */
:root{
  --bg:#060A13; --panel:#0F1A2C; --panel-2:#152238;
  --line:rgba(255,255,255,.09); --text:#F2F4F8; --muted:#8996AC;
  --gold:#EFB05E; --gold-glow:rgba(239,176,94,.45);
  --teal:#4ECDC4; --teal-glow:rgba(78,205,196,.4);
  --coral:#FF6B5B; --coral-glow:rgba(255,107,91,.4);
  --violet:#8B7CF6;
  --font-display:'Fraunces',serif;
  --font-tech:'Space Grotesk',sans-serif;
  --font-body:'IBM Plex Sans Arabic','Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.compass{margin:0;background:
    radial-gradient(ellipse at 15% -10%, #101d33 0%, transparent 50%),
    radial-gradient(ellipse at 100% 10%, #16233a 0%, transparent 45%),
    var(--bg);
  color:var(--text);font-family:var(--font-body);overflow-x:hidden;}

.compass .stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%, #fff 100%, transparent),
    radial-gradient(1px 1px at 70% 60%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 45% 80%, #fff 100%, transparent),
    radial-gradient(1px 1px at 85% 20%, #fff 100%, transparent),
    radial-gradient(1px 1px at 10% 65%, #fff 100%, transparent);
  background-size:340px 340px;animation:drift 90s linear infinite;}
@keyframes drift{to{background-position:340px 170px;}}

.compass .wrap{position:relative;z-index:2;}
.compass section{padding:0 8vw;}
@media (max-width:900px){.compass section{padding:0 5vw;}}

/* ===== Glass nav ===== */
.compass nav.topnav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:20px 8vw;transition:background .3s, backdrop-filter .3s, border-color .3s;border-bottom:1px solid transparent;}
.compass nav.topnav.scrolled{background:rgba(6,10,19,.72);backdrop-filter:blur(14px);border-color:var(--line);}
.compass .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:19px;}
.compass .brand-mark{width:32px;height:32px;border-radius:50%;background:conic-gradient(from 0deg, var(--gold), var(--coral), var(--teal), var(--gold));
  box-shadow:0 4px 16px -4px var(--gold-glow);animation:spinslow 8s linear infinite;flex-shrink:0;}
@keyframes spinslow{to{transform:rotate(360deg);}}
.compass .navlinks{display:flex;gap:28px;font-size:13.5px;color:var(--muted);font-family:var(--font-tech);}
.compass .navlinks a{color:inherit;text-decoration:none;transition:color .2s;}
.compass .navlinks a:hover{color:var(--text);}
.compass .nav-right{display:flex;align-items:center;gap:16px;}
.compass .cta-ghost{border:1px solid var(--line);border-radius:99px;padding:9px 20px;font-size:13px;color:var(--text);
  cursor:pointer;text-decoration:none;display:inline-block;font-family:var(--font-tech);transition:.25s;}
.compass .cta-ghost:hover{border-color:var(--teal);box-shadow:0 0 20px -6px var(--teal-glow);}

/* mobile hamburger toggle - hidden on desktop */
.compass .mobile-menu-btn{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.compass .mobile-menu-btn span, .compass .mobile-menu-btn span::before, .compass .mobile-menu-btn span::after{
  content:"";display:block;width:16px;height:2px;background:var(--text);border-radius:2px;position:relative;transition:.25s;}
.compass .mobile-menu-btn span::before{position:absolute;top:-5px;}
.compass .mobile-menu-btn span::after{position:absolute;top:5px;}
.compass .mobile-menu-btn.open span{background:transparent;}
.compass .mobile-menu-btn.open span::before{top:0;transform:rotate(45deg);}
.compass .mobile-menu-btn.open span::after{top:0;transform:rotate(-45deg);}

.compass .mobile-menu{display:none;flex-direction:column;gap:4px;padding:14px 8vw 20px;border-bottom:1px solid var(--line);
  background:rgba(6,10,19,.96);backdrop-filter:blur(14px);}
.compass .mobile-menu.open{display:flex;}
.compass .mobile-menu a{color:var(--muted);text-decoration:none;font-family:var(--font-tech);font-size:14px;padding:10px 4px;
  border-bottom:1px solid var(--line);}
.compass .mobile-menu a:last-child{border-bottom:none;}
.compass .mobile-menu a:hover{color:var(--text);}

@media (max-width:760px){
  .compass .navlinks{display:none;}
  .compass .nav-right .cta-ghost{display:none;}
  .compass .mobile-menu-btn{display:flex;}
  .compass nav.topnav{padding:16px 5vw;}
}

/* language switcher */
.compass .langsel{position:relative;}
.compass .langsel summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--muted);font-family:var(--font-mono);border:1px solid var(--line);border-radius:99px;padding:8px 14px;}
.compass .langsel summary::-webkit-details-marker{display:none;}
.compass .langsel[open] summary{color:var(--text);border-color:var(--teal);}
.compass .langsel .menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:6px;min-width:130px;box-shadow:0 20px 40px -12px rgba(0,0,0,.6);z-index:20;}
.compass .langsel .menu a{display:block;padding:8px 12px;border-radius:8px;font-size:13px;color:var(--muted);text-decoration:none;}
.compass .langsel .menu a:hover{background:rgba(255,255,255,.05);color:var(--text);}
.compass .langsel .menu a.on{color:var(--teal);}

/* ===== Hero + globe ===== */
.compass .hero{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:20px;padding-top:40px;padding-bottom:70px;min-height:80vh;}
@media (max-width:900px){.compass .hero{grid-template-columns:1fr;min-height:auto;padding-top:20px;}}
.compass .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--teal);text-transform:uppercase;background:rgba(78,205,196,.08);border:1px solid rgba(78,205,196,.25);
  padding:7px 14px;border-radius:99px;margin-bottom:26px;}
.compass .eyebrow .p{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal-glow);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.compass h1{font-family:var(--font-display);font-size:clamp(32px,4.4vw,52px);line-height:1.14;font-weight:700;margin:0 0 22px;letter-spacing:-.01em;}
.compass h1 .grad{background:linear-gradient(90deg,var(--gold),var(--coral),var(--gold));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite;}
@keyframes shine{to{background-position:200% center}}
.compass .hero p.sub{color:var(--muted);font-size:16.5px;line-height:1.85;max-width:450px;margin-bottom:34px;}
.compass .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.compass .btn-primary{font-family:var(--font-body);font-weight:600;border:none;border-radius:13px;padding:16px 28px;font-size:14.5px;
  color:#0A0E16;background:linear-gradient(155deg,var(--gold),#F5D08F);cursor:pointer;text-decoration:none;display:inline-block;
  box-shadow:0 12px 30px -8px var(--gold-glow);transition:transform .25s, box-shadow .25s;}
.compass .btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 38px -8px var(--gold-glow);}

.compass .globe-stage{position:relative;height:560px;display:flex;align-items:center;justify-content:center;perspective:1300px;}
@media (max-width:900px){.compass .globe-stage{height:400px;}}
.compass .globe-inner{transform-style:preserve-3d;transition:transform .3s ease-out;}
.compass .globe{position:relative;width:290px;height:290px;transform-style:preserve-3d;animation:spin 24s linear infinite;}
@keyframes spin{from{transform:rotateY(0deg) rotateX(10deg)}to{transform:rotateY(360deg) rotateX(10deg)}}
.compass .globe .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(78,205,196,.32);}
.compass .globe .ring:nth-child(1){transform:rotateY(0deg);}
.compass .globe .ring:nth-child(2){transform:rotateY(25deg);}
.compass .globe .ring:nth-child(3){transform:rotateY(50deg);}
.compass .globe .ring:nth-child(4){transform:rotateY(75deg);}
.compass .globe .ring:nth-child(5){transform:rotateY(100deg);}
.compass .globe .ring:nth-child(6){transform:rotateY(125deg);}
.compass .globe .ring:nth-child(7){transform:rotateY(150deg);}
.compass .globe .eq1{position:absolute;inset:36px;border-radius:50%;border:1px solid rgba(239,176,94,.3);transform:rotateX(90deg);}
.compass .globe .eq2{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(239,176,94,.55);}
.compass .globe .core{position:absolute;inset:56px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(78,205,196,.3), rgba(15,26,44,.92) 70%);
  box-shadow:0 0 70px 14px rgba(78,205,196,.18), inset 0 0 44px rgba(0,0,0,.55);}
.compass .globe .dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 14px var(--coral-glow);animation:blink 2.4s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.3);}}
.compass .globe .dot.d1{top:34%;left:18%;animation-delay:0s;}
.compass .globe .dot.d2{top:58%;left:72%;animation-delay:.8s;}
.compass .globe .dot.d3{top:18%;left:58%;animation-delay:1.6s;}

.compass .orbit-card{position:absolute;background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  border-radius:16px;padding:15px 17px;box-shadow:0 32px 64px -20px rgba(0,0,0,.75);
  font-family:var(--font-mono);animation:floaty 7s ease-in-out infinite;}
.compass .orbit-card .n{font-size:20px;font-weight:600;color:var(--gold);}
.compass .orbit-card .l{font-size:10px;color:var(--muted);margin-top:3px;font-family:var(--font-body);}
.compass .oc1{top:4%;inset-inline-end:-2%;animation-delay:0s;}
.compass .oc2{bottom:14%;inset-inline-start:-8%;animation-delay:1.5s;}
.compass .oc3{bottom:-2%;inset-inline-end:16%;animation-delay:3s;}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(-1deg)}}

.compass .flight-path{position:absolute;inset:0;pointer-events:none;}
.compass .flight-path svg{width:100%;height:100%;}
.compass .flight-path path{fill:none;stroke:var(--teal);stroke-width:1.5;stroke-dasharray:4 7;opacity:.45;animation:dash 2.5s linear infinite;}
.compass .flight-path circle{fill:var(--gold);filter:drop-shadow(0 0 5px var(--gold-glow));}
@keyframes dash{to{stroke-dashoffset:-22;}}

/* ===== Ticker ===== */
.compass .ticker-wrap{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;background:rgba(255,255,255,.02);}
.compass .ticker{display:flex;gap:60px;white-space:nowrap;animation:scroll 24s linear infinite;font-family:var(--font-mono);font-size:12.5px;color:var(--muted);width:max-content;}
[dir="rtl"] .compass .ticker{animation-direction:reverse;}
@keyframes scroll{to{transform:translateX(-50%)}}
.compass .ticker span b{color:var(--text);}

/* ===== Scroll reveal ===== */
.compass .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
.compass .reveal.in{opacity:1;transform:translateY(0);}

/* ===== Section head ===== */
.compass .section-head{text-align:center;padding:90px 0 50px;}
.compass .section-head .eyebrow{margin:0 auto 18px;width:fit-content;}
.compass .section-head h2{font-family:var(--font-display);font-size:clamp(26px,3vw,36px);margin:0 0 12px;font-weight:700;}
.compass .section-head p{color:var(--muted);max-width:540px;margin:0 auto;font-size:14.5px;line-height:1.8;}

/* ===== Service cards (3D tilt via JS) ===== */
.compass .compass-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px;perspective:1000px;}
@media(max-width:900px){.compass .compass-grid{grid-template-columns:1fr 1fr;}}
.compass .compass-card{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:18px;
  padding:26px 22px;text-align:center;transition:transform .12s ease-out, border-color .3s, box-shadow .3s;transform-style:preserve-3d;}
.compass .compass-card:hover{border-color:rgba(239,176,94,.4);box-shadow:0 24px 50px -20px rgba(0,0,0,.6);}
.compass .compass-icon{width:54px;height:54px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
  font-size:23px;background:radial-gradient(circle at 35% 30%, rgba(239,176,94,.28), rgba(15,26,44,.4));border:1px solid rgba(239,176,94,.32);}
.compass .compass-card h3{font-family:var(--font-display);font-size:16.5px;margin:0 0 8px;font-weight:600;}
.compass .compass-card p{color:var(--muted);font-size:12.5px;line-height:1.7;margin:0;}

.compass .all-services{margin-bottom:70px;}
.compass .all-services-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;text-align:center;margin-bottom:18px;}
.compass .chip-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
@media(max-width:900px){.compass .chip-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.compass .chip-grid{grid-template-columns:1fr 1fr;}}
.compass .chip{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;font-size:12.5px;transition:transform .25s, border-color .25s, background .25s;}
.compass .chip:hover{transform:translateY(-3px);border-color:rgba(239,176,94,.4);background:rgba(255,255,255,.05);}
.compass .chip .ci{font-size:16px;flex-shrink:0;}
.compass .chip span{color:var(--text);}

/* ===== Stats strip ===== */
.compass .stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;margin-bottom:90px;}
@media(max-width:900px){.compass .stats-strip{grid-template-columns:1fr 1fr;}}
.compass .stat-block{background:var(--panel);padding:30px 20px;text-align:center;}
.compass .stat-block .num{font-family:var(--font-mono);font-size:32px;font-weight:600;color:var(--gold);}
.compass .stat-block .lbl{color:var(--muted);font-size:12px;margin-top:6px;}

/* ===== Dashboard preview ===== */
.compass .dash{display:flex;border-radius:24px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 60px 120px -30px rgba(0,0,0,.85);margin-bottom:100px;transform:perspective(1700px) rotateX(1.5deg);transition:transform .4s;}
.compass .dash:hover{transform:perspective(1700px) rotateX(0deg);}
@media(max-width:900px){.compass .dash{flex-direction:column;transform:none;}}
.compass .drail{width:210px;background:#0A1220;padding:22px 14px;display:flex;flex-direction:column;gap:18px;}
@media(max-width:900px){.compass .drail{width:100%;flex-direction:row;flex-wrap:wrap;}}
.compass .dlabel{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;padding:0 8px;}
.compass .dlink{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;font-size:12.5px;color:var(--muted);}
.compass .dlink.on{color:var(--text);background:linear-gradient(160deg,#1C2A42,#131F33);box-shadow:0 4px 10px rgba(0,0,0,.4);}
.compass .dlink .dt{width:5px;height:5px;border-radius:50%;background:#33415C;}
.compass .dlink.on .dt{background:var(--gold);box-shadow:0 0 8px var(--gold-glow);}
.compass .dmain{flex:1;background:linear-gradient(155deg,var(--panel-2),#0B1524);padding:26px 30px;}
.compass .dtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.compass .dtop h3{font-family:var(--font-display);font-size:20px;margin:0;}
.compass .live{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;color:var(--teal);}
.compass .live .p{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite;}
.compass .kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
@media(max-width:560px){.compass .kgrid{grid-template-columns:1fr 1fr;}}
.compass .kcard{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:15px;padding:16px;transition:transform .3s;}
.compass .kcard:hover{transform:translateY(-4px);}
.compass .kcard .ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;
  background:rgba(78,205,196,.1);color:var(--teal);margin-bottom:12px;}
.compass .kcard.g .ic{background:rgba(239,176,94,.1);color:var(--gold);}
.compass .kcard.c .ic{background:rgba(255,107,91,.1);color:var(--coral);}
.compass .kval{font-family:var(--font-mono);font-size:23px;font-weight:600;}
.compass .klabel{color:var(--muted);font-size:11px;margin-top:5px;}
.compass .bigchart{height:110px;display:flex;align-items:flex-end;gap:7px;background:rgba(0,0,0,.2);border-radius:12px;padding:14px;}
.compass .bigchart b{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--teal),rgba(78,205,196,.1));
  transform:scaleY(0);transform-origin:bottom;animation:growbar 1s ease-out forwards;}
@keyframes growbar{to{transform:scaleY(1);}}

/* ===== Footer ===== */
.compass footer.site-footer{border-top:1px solid var(--line);padding:36px 0 50px;display:flex;justify-content:space-between;
  align-items:center;color:var(--muted);font-size:12.5px;flex-wrap:wrap;gap:12px;}
.compass footer.site-footer a{color:var(--muted);text-decoration:none;margin-inline-start:18px;}
.compass footer.site-footer a:hover{color:var(--text);}
@media (max-width:560px){
  .compass footer.site-footer{flex-direction:column;text-align:center;gap:14px;padding:30px 0 40px;}
  .compass footer.site-footer a{margin-inline-start:10px;margin-inline-end:10px;}
}