/* =====================================================================
   HASAN SHHADE — Executive Digital Identity Platform
   Design system: luxury dark, one gold accent, whitespace-led.
   Themes via [data-theme] tokens. RTL via body.rtl.
===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --gold:#C9A961; --gold-deep:#A8883F; --gold-soft:rgba(201,169,97,.13);
  --tg:#2AABEE; --green:#3FA66B;
  --serif:"Cormorant Garamond",serif;
  --sans:"Inter Tight",sans-serif;
  --mono:"JetBrains Mono",monospace;
  --arabic:"IBM Plex Sans Arabic",sans-serif;
  --r:16px; --r-sm:11px;
  --maxw:1060px;
  --ease:cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"]{
  --canvas:#0B0C10; --surface:#12131A; --surface-2:#171922;
  --ink1:#EDEBE4; --ink2:#A6A49E; --ink3:#74726C;
  --hairline:#242732; --scrim:rgba(11,12,16,.82);
  color-scheme:dark;
}
[data-theme="light"]{
  --canvas:#FAF9F5; --surface:#FFFFFF; --surface-2:#F2F0E9;
  --ink1:#1B1B18; --ink2:#54524D; --ink3:#8B8983;
  --hairline:#E4E1D7; --scrim:rgba(250,249,245,.85);
  color-scheme:light;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  background:var(--canvas);color:var(--ink1);
  font-family:var(--sans);font-weight:300;font-size:15.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .4s,color .4s;
}
body.rtl{font-family:var(--arabic)}
body.rtl :where(h1,h2,h3,p,span,div,a,button){letter-spacing:0!important}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
.serif{font-family:var(--serif)}
body.rtl .serif{font-family:var(--arabic);font-weight:400}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(20px,4vw,40px)}
section{padding-block:clamp(56px,9vw,110px) 0}
section.hero{padding-block:calc(96px + env(safe-area-inset-top)) 70px}

/* focus */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- Loader ---------- */
.loader{
  position:fixed;inset:0;z-index:100;background:var(--canvas);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .6s var(--ease),visibility .6s;
}
.loader.done{opacity:0;visibility:hidden}
.loader .mk{width:16px;height:16px;background:var(--gold);transform:rotate(45deg);border-radius:3px;animation:pulse 1.4s ease-in-out infinite}
.loader .nm{font-family:var(--serif);font-size:20px;letter-spacing:.14em;color:var(--ink2)}
body.rtl .loader .nm{font-family:var(--arabic)}
@keyframes pulse{0%,100%{opacity:.35;transform:rotate(45deg) scale(.9)}50%{opacity:1;transform:rotate(45deg) scale(1)}}

/* ---------- Ambient background ---------- */
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora .blob{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
  will-change:transform;
}
.aurora .b1{width:520px;height:520px;top:-180px;inset-inline-end:-140px;background:radial-gradient(circle,rgba(201,169,97,.18),transparent 65%);animation:drift1 26s ease-in-out infinite alternate}
.aurora .b2{width:420px;height:420px;bottom:-160px;inset-inline-start:-120px;background:radial-gradient(circle,rgba(74,90,140,.14),transparent 65%);animation:drift2 32s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-60px,70px) scale(1.08)}}
@keyframes drift2{to{transform:translate(70px,-60px) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.aurora .blob{animation:none}}

/* ---------- Header ---------- */
.site-head{
  position:fixed;top:0;inset-inline:0;z-index:50;
  background:var(--scrim);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hairline);
}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;max-width:var(--maxw);margin:0 auto;padding-inline:clamp(20px,4vw,40px)}
.brand{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--gold)}
body.rtl .brand{letter-spacing:.08em}
.brand .mk{width:9px;height:9px;background:var(--gold);transform:rotate(45deg);border-radius:1.5px}
.nav-links{display:flex;gap:26px;font-size:12.5px;color:var(--ink2)}
.nav-links a{transition:color .2s;padding-block:4px}
.nav-links a:hover{color:var(--ink1)}
@media(max-width:760px){.nav-links{display:none}}
.head-tools{display:flex;align-items:center;gap:10px}
.lang-toggle{display:flex;gap:2px;border:1px solid var(--hairline);border-radius:999px;padding:2px;background:var(--surface)}
.lang-toggle button{background:none;border:0;color:var(--ink3);font-size:10.5px;padding:4px 10px;border-radius:999px;cursor:pointer;transition:all .25s}
.lang-toggle button.active{background:var(--gold);color:#14120B;font-weight:500}
.theme-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--hairline);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink2);transition:all .25s}
.theme-btn:hover{color:var(--gold);border-color:var(--gold-deep)}
.theme-btn svg{width:15px;height:15px}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding-block:calc(96px + env(safe-area-inset-top)) 70px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,72px);align-items:center;width:100%}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;text-align:center}}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px}
body.rtl .eyebrow{font-family:var(--arabic);font-size:11.5px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,7vw,68px);line-height:1.04;margin-bottom:14px}
body.rtl .hero h1{font-family:var(--arabic);font-size:clamp(34px,6vw,56px)}
.typed-line{min-height:30px;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:18px}
body.rtl .typed-line{letter-spacing:.03em}
.typed-line .caret{display:inline-block;width:1px;height:1em;background:var(--gold);vertical-align:-2px;margin-inline-start:3px;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.hero .desc{color:var(--ink2);max-width:480px;margin-bottom:26px}
@media(max-width:820px){.hero .desc{margin-inline:auto}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:20px}
@media(max-width:820px){.hero-ctas{justify-content:center}}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hairline);border-radius:999px;padding:5px 15px;font-size:11px;color:var(--ink2)}
.pill .dot{width:5px;height:5px;border-radius:50%;background:var(--green)}

/* portrait */
.portrait{
  width:min(340px,72vw);aspect-ratio:3/4;margin-inline:auto;position:relative;border-radius:22px;
  padding:6px;background:linear-gradient(160deg,rgba(201,169,97,.55),rgba(201,169,97,.06) 45%,rgba(201,169,97,.4));
  will-change:transform;
}
.portrait .inner{width:100%;height:100%;border-radius:17px;overflow:hidden;position:relative;background:var(--surface);box-shadow:0 26px 70px rgba(0,0,0,.5)}
[data-theme="light"] .portrait .inner{box-shadow:0 22px 60px rgba(30,25,10,.18)}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait .sweep{
  position:absolute;inset:0;border-radius:17px;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(201,169,97,.20) 48%,rgba(255,244,214,.26) 50%,rgba(201,169,97,.20) 52%,transparent 70%);
  background-size:280% 100%;background-position:120% 0;
  animation:sweep 8s ease-in-out infinite;
}
@keyframes sweep{0%,58%{background-position:120% 0}82%,100%{background-position:-60% 0}}
@media(prefers-reduced-motion:reduce){.portrait .sweep,.typed-line .caret{animation:none}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:12px;cursor:pointer;border:1px solid var(--hairline);
  font-size:13.5px;font-weight:500;letter-spacing:.02em;background:var(--surface);
  transition:transform .15s,opacity .2s,border-color .2s,background .2s;
  min-height:46px;
}
.btn:active{transform:scale(.985)}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-gold{background:var(--gold);color:#14120B;border-color:var(--gold)}
.btn-gold:hover{opacity:.92}
.btn-line:hover{border-color:var(--gold-deep)}
.btn-tg{background:var(--tg);border-color:var(--tg);color:#fff}
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* ---------- Section headers ---------- */
.sec-eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-deep);display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
body.rtl .sec-eyebrow{font-family:var(--arabic);font-size:11.5px}
.sec-eyebrow::after{content:"";flex:1;height:1px;background:var(--hairline)}
.sec-title{font-family:var(--serif);font-size:clamp(26px,4vw,38px);font-weight:400;line-height:1.15;margin-bottom:22px;max-width:560px}
body.rtl .sec-title{font-family:var(--arabic)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:26px 16px;text-align:center;transition:border-color .3s}
.stat:hover{border-color:var(--gold-deep)}
.stat .v{font-family:var(--serif);font-size:clamp(28px,3.4vw,38px);color:var(--gold);line-height:1.1}
.stat .l{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-top:7px}
body.rtl .stat .l{letter-spacing:.03em}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,56px)}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}}
.about-bio p{color:var(--ink2);margin-bottom:14px}
.about-bio strong{color:var(--ink1);font-weight:500}
.mvv{display:grid;gap:12px;margin-top:8px}
.mvv .card-sm{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:16px 18px}
.card-sm .h{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:5px}
body.rtl .card-sm .h{letter-spacing:.04em}
.card-sm .b{font-size:13.5px;color:var(--ink2);line-height:1.7}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
@media(max-width:480px){.facts{grid-template-columns:1fr}}

/* timeline */
.timeline{margin-top:26px;border-inline-start:1px solid var(--hairline);padding-inline-start:24px;display:grid;gap:20px;position:relative}
.tl-item{position:relative}
.tl-item::before{content:"";position:absolute;inset-inline-start:-28.5px;top:7px;width:8px;height:8px;background:var(--gold);transform:rotate(45deg);border-radius:1.5px}
.tl-item .y{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.1em}
.tl-item .t{font-size:13.5px;color:var(--ink2);margin-top:2px}

/* ---------- Expertise ---------- */
.expertise{display:flex;flex-wrap:wrap;gap:10px}
.exp-chip{
  border:1px solid var(--hairline);border-radius:999px;padding:11px 20px;
  font-size:13px;color:var(--ink1);background:var(--surface);transition:all .25s;
  display:inline-flex;align-items:center;gap:9px;
}
.exp-chip:hover{border-color:var(--gold);background:var(--gold-soft)}
.exp-chip .mk{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);border-radius:1px}

/* ---------- Services ---------- */
.services{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:11px}
.svc{
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:20px 17px;display:flex;flex-direction:column;gap:11px;
  transition:border-color .3s,transform .3s var(--ease);
}
.svc:hover{border-color:var(--gold-deep);transform:translateY(-3px)}
.svc .ic{color:var(--gold)}
.svc .ic svg{width:21px;height:21px}
.svc .t{font-size:13.5px;font-weight:400;line-height:1.45}

/* ---------- Trusted ---------- */
.trusted{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tr-logo{
  border:1px dashed var(--hairline);border-radius:var(--r-sm);padding:16px 22px;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  background:var(--surface);flex:1 1 150px;text-align:center;
}
body.rtl .tr-logo{letter-spacing:.03em}
.tr-note{font-size:12px;color:var(--ink3);margin-top:12px}

/* ---------- Testimonials ---------- */
.carousel{position:relative;overflow:hidden;border:1px solid var(--hairline);border-radius:var(--r);background:var(--surface)}
.track{display:flex;transition:transform .55s var(--ease)}
.slide{min-width:100%;padding:clamp(28px,5vw,48px) clamp(24px,6vw,64px) 24px;text-align:center}
.slide .q{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.4vw,22px);line-height:1.6;margin-bottom:16px;max-width:640px;margin-inline:auto}
body.rtl .slide .q{font-family:var(--arabic);font-style:normal;font-weight:300}
.slide .who{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
body.rtl .slide .who{letter-spacing:.03em}
.slide .from{font-size:11px;color:var(--ink3);margin-top:2px}
.dots{display:flex;justify-content:center;gap:8px;padding-bottom:22px}
.dots button{width:6px;height:6px;border-radius:50%;border:0;background:var(--hairline);cursor:pointer;transition:all .25s;padding:0}
.dots button.active{background:var(--gold);width:20px;border-radius:999px}

/* ---------- Contact cards ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:18px;transition:border-color .3s}
.card:hover{border-color:var(--gold-deep)}
.card .head{display:flex;align-items:center;gap:14px}
.card .cic{width:40px;height:40px;border:1px solid var(--hairline);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
.card .cic svg{width:17px;height:17px}
.card .meta{min-width:0;flex:1}
.card .lbl{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3)}
body.rtl .card .lbl{letter-spacing:.03em}
.card .val{font-size:14.5px;direction:ltr;text-align:start;unicode-bidi:embed;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.rtl .card .val{text-align:end}
.card .note{font-size:11.5px;color:var(--ink3);margin-top:2px}
.card .ops{display:flex;gap:8px;margin-top:14px}
.op{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 8px;border-radius:9px;border:1px solid var(--hairline);background:var(--surface-2);
  color:var(--ink2);font-size:11.5px;cursor:pointer;transition:all .2s;min-height:38px;
}
.op:hover{border-color:var(--gold-deep);color:var(--ink1)}
.op svg{width:13px;height:13px}

/* social cards */
.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.social-grid{grid-template-columns:1fr}}
.so-card{position:relative;overflow:hidden}
.so-card::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(300px 140px at 20% 0%,var(--gold-soft),transparent 70%);
}
.so-card:hover::after{opacity:1}
.so-card .followers{font-family:var(--mono);font-size:11px;color:var(--gold);margin-inline-start:auto}

/* ---------- Telegram ---------- */
.tg-card{
  border:1px solid rgba(42,171,238,.35);border-radius:var(--r);
  background:linear-gradient(160deg,rgba(42,171,238,.09),var(--surface) 55%);
  padding:clamp(28px,5vw,44px);text-align:center;
}
.tg-card .tgic{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;background:var(--tg);display:flex;align-items:center;justify-content:center;color:#fff}
.tg-card .tgic svg{width:26px;height:26px}
.tg-card h3{font-family:var(--serif);font-size:clamp(20px,3vw,26px);font-weight:400;margin-bottom:10px}
body.rtl .tg-card h3{font-family:var(--arabic)}
.tg-card p{font-size:13.5px;color:var(--ink2);max-width:440px;margin:0 auto 20px}

/* ---------- Company ---------- */
.co-card{
  border:1px solid var(--hairline);border-radius:var(--r);
  background:linear-gradient(165deg,var(--surface-2),var(--surface));
  padding:clamp(28px,5vw,48px);position:relative;overflow:hidden;
}
.co-card::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 260px at 50% -30%,var(--gold-soft),transparent 70%);pointer-events:none}
.co-card>*{position:relative}
.co-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.co-logo{width:46px;height:46px;flex-shrink:0}
.co-name{font-family:var(--serif);font-size:24px;font-weight:400}
body.rtl .co-name{font-family:var(--arabic)}
.co-tag{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
body.rtl .co-tag{letter-spacing:.03em}
.co-card p{font-size:14px;color:var(--ink2);max-width:560px;margin-bottom:20px}
.co-svcs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.co-svcs span{border:1px solid var(--hairline);border-radius:999px;padding:6px 14px;font-size:11.5px;color:var(--ink2)}
.co-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.co-off{font-size:12px;color:var(--ink3)}

/* ---------- Map ---------- */
.map-wrap{margin-top:14px;border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.map-wrap iframe{width:100%;height:240px;border:0;display:block}
[data-theme="dark"] .map-wrap iframe{filter:grayscale(1) invert(.92) contrast(.9)}
[data-theme="light"] .map-wrap iframe{filter:grayscale(.4)}

/* ---------- QR ---------- */
.qr-flex{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,44px);border:1px solid var(--hairline);border-radius:var(--r);background:var(--surface);padding:clamp(24px,4vw,40px)}
.qr-img{padding:12px;background:#FDFCF8;border-radius:12px;flex-shrink:0}
.qr-img img{width:150px;height:150px}
.qr-cap{font-size:13px;color:var(--ink2);max-width:340px}

/* ---------- Footer ---------- */
.site-foot{margin-top:clamp(60px,9vw,110px);border-top:1px solid var(--hairline);padding:34px 0 120px;text-align:center}
.foot-legal{font-size:10.5px;color:var(--ink3);opacity:.75;margin-top:12px;font-style:italic}
body.rtl .foot-legal{font-style:normal}

/* ---------- Floating rail ---------- */
.fab-rail{
  position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:60;
  display:flex;gap:6px;padding:7px;border-radius:999px;
  background:var(--scrim);backdrop-filter:blur(16px);border:1px solid var(--hairline);
  box-shadow:0 14px 40px rgba(0,0,0,.4);
}
.fab{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink2);background:transparent;border:0;cursor:pointer;transition:all .2s}
.fab:hover{color:var(--ink1);background:var(--surface-2)}
.fab svg{width:18px;height:18px}
.fab.gold{background:var(--gold);color:#14120B}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(60px);
  background:var(--surface-2);border:1px solid var(--gold-deep);color:var(--ink1);
  padding:10px 24px;border-radius:999px;font-size:12.5px;opacity:0;transition:all .35s;z-index:70;pointer-events:none;white-space:nowrap;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ---------- Reveal (JS-driven; GSAP or IO fallback) ---------- */
.rv{opacity:0;transform:translateY(20px)}
.rv.on{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Print ---------- */
@media print{.site-head,.fab-rail,.aurora,.loader{display:none}body{background:#fff;color:#000}}

/* ---------- Selected Work gallery ---------- */
.gallery{
  display:flex;gap:12px;overflow-x:auto;padding:4px 2px 14px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--gold-deep) transparent;
}
.gallery img{
  height:min(420px,58vw);width:auto;flex-shrink:0;border-radius:14px;
  border:1px solid var(--hairline);scroll-snap-align:start;
  transition:transform .35s var(--ease),border-color .3s;
}
.gallery img:hover{transform:translateY(-4px);border-color:var(--gold-deep)}
.gallery::-webkit-scrollbar{height:5px}
.gallery::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:99px}