:root{
  --bg-0:#07070c;
  --bg-1:#0e1120;
  --bg-2:#161a2e;
  --fire-1:#ff4500;
  --fire-2:#ff8c00;
  --gold:#ffd166;
  --cyan:#2be9d8;
  --ink-0:#f5f3ee;
  --ink-1:#a9adc4;
  --line:rgba(255,255,255,.09);
  --radius:14px;
  --font-display:'Sora','Tajawal',sans-serif;
  --font-body:'Inter','Tajawal',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:radial-gradient(ellipse at 50% -10%, #1c1430 0%, var(--bg-0) 55%) fixed;
  color:var(--ink-0);
  font-family:var(--font-body);
  overflow-x:hidden;
  cursor:none;
}
html[dir="rtl"] body, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] button{font-family:'Tajawal',var(--font-body);}
@media (hover:none){ body{cursor:auto;} }
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button, input, select, textarea{font-family:inherit;color:inherit;}
::selection{background:var(--fire-1);color:#fff;}

/* ---------- custom cursor ---------- */
#cursor{
  position:fixed;top:0;left:0;width:30px;height:30px;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 6px var(--fire-1)) drop-shadow(0 0 14px rgba(255,69,0,.6));
  transition:opacity .2s;
  display:none;
}
@media (hover:hover) and (pointer:fine){ #cursor{display:block;} }
#cursor img{width:100%;height:100%;object-fit:contain;}
.spark{position:fixed;pointer-events:none;z-index:9998;border-radius:50%;background:radial-gradient(circle, var(--gold), var(--fire-1) 60%, transparent 70%);}

/* ---------- ember canvas ---------- */
#embers{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;}

/* ---------- preloader ---------- */
#preloader{
  position:fixed;inset:0;z-index:10000;background:var(--bg-0);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  transition:opacity .8s ease, visibility .8s ease;
}
#preloader.hide{opacity:0;visibility:hidden;}
#preloader img{width:110px;animation:riseGlow 1.8s ease-in-out infinite alternate;}
#preloader .ptext{font-family:var(--font-display);letter-spacing:.35em;font-size:.72rem;color:var(--ink-1);text-transform:uppercase;}
@keyframes riseGlow{
  0%{filter:drop-shadow(0 0 6px var(--fire-1)) brightness(.85);transform:translateY(6px) scale(.96);}
  100%{filter:drop-shadow(0 0 30px var(--fire-2)) brightness(1.15);transform:translateY(-6px) scale(1.02);}
}

/* ---------- page transition overlay ---------- */
#transition-overlay{
  position:fixed;inset:0;z-index:9500;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(255,140,0,.35), rgba(10,8,16,.97) 60%);
  opacity:0;display:flex;align-items:center;justify-content:center;
}
#transition-overlay img{width:90px;opacity:0;}
#transition-overlay.active{opacity:1;transition:opacity .25s ease;}
#transition-overlay.active img{opacity:1;animation:burst .55s ease;}
@keyframes burst{
  0%{transform:scale(.4) rotate(-8deg);filter:drop-shadow(0 0 0 var(--fire-1));}
  50%{transform:scale(1.15) rotate(4deg);filter:drop-shadow(0 0 40px var(--fire-1));}
  100%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 10px var(--fire-2));}
}

/* ---------- nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 5vw;backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(7,7,12,.9), rgba(7,7,12,.15));
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{width:40px;height:40px;object-fit:contain;animation:breathe 4s ease-in-out infinite;}
@keyframes breathe{0%,100%{filter:drop-shadow(0 0 3px var(--fire-1));transform:scale(1);}50%{filter:drop-shadow(0 0 12px var(--fire-2));transform:scale(1.05);}}
.brand span{font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:.03em;}
nav.links{display:flex;gap:24px;align-items:center;}
nav.links a{font-size:.84rem;color:var(--ink-1);position:relative;padding:4px 0;}
nav.links a.active{color:var(--ink-0);}
nav.links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1.5px;background:linear-gradient(90deg,var(--fire-1),var(--gold));transition:width .25s;}
nav.links a:hover{color:var(--ink-0);}
nav.links a:hover::after, nav.links a.active::after{width:100%;}
.lang-switch{display:flex;gap:6px;border:1px solid var(--line);border-radius:20px;padding:4px;}
.lang-switch button{background:none;border:0;font-size:.7rem;padding:5px 10px;border-radius:16px;color:var(--ink-1);cursor:pointer;letter-spacing:.05em;}
.lang-switch button.active{background:linear-gradient(90deg,var(--fire-1),var(--fire-2));color:#fff;}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;}
.burger span{width:24px;height:2px;background:var(--ink-0);}
#mobile-menu{position:fixed;inset:0;background:var(--bg-1);z-index:600;display:none;flex-direction:column;align-items:center;justify-content:center;gap:24px;}
#mobile-menu.open{display:flex;}
#mobile-menu a{font-family:var(--font-display);font-size:1.15rem;}
#mobile-menu .close-x{position:absolute;top:24px;inset-inline-end:24px;font-size:1.6rem;background:none;border:0;color:var(--ink-0);}

@media (max-width:940px){
  nav.links, .lang-switch.desktop{display:none;}
  .burger{display:flex;}
}

/* ---------- layout helpers ---------- */
main{position:relative;z-index:2;}
section{position:relative;z-index:2;padding:100px 8vw;max-width:1400px;margin:0 auto;}
section.tight{padding-top:60px;padding-bottom:60px;}
.eyebrow{font-family:var(--font-display);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--fire-2);margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--fire-2);}
h1.page-title, h2.section-title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,4vw,3rem);margin-bottom:18px;background:linear-gradient(100deg,var(--ink-0) 30%, var(--fire-2) 55%, var(--gold) 70%, var(--ink-0) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% auto;animation:sheen 6s linear infinite;}
@keyframes sheen{to{background-position:-220% 0;}}
.lede{color:var(--ink-1);max-width:660px;line-height:1.75;font-size:1.02rem;}
.lede + .lede{margin-top:14px;}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---------- page hero banner (inner pages) ---------- */
.page-hero{
  min-height:56vh;display:flex;flex-direction:column;justify-content:center;
  padding:150px 8vw 70px;position:relative;overflow:hidden;
}
.page-hero .banner-img{position:absolute;inset:0;z-index:0;}
.page-hero .banner-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.35) saturate(1.05);}
.page-hero .banner-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(7,7,12,.55), var(--bg-0) 92%);}
.page-hero .inner{position:relative;z-index:2;max-width:900px;}

/* ---------- home hero ---------- */
#hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:80px;}
#hero .logo-wrap{position:relative;margin-bottom:26px;}
#hero .logo-wrap img{width:140px;position:relative;z-index:2;animation:heroPulse 3.2s ease-in-out infinite;}
@keyframes heroPulse{0%,100%{filter:drop-shadow(0 0 20px var(--fire-1));}50%{filter:drop-shadow(0 0 46px var(--fire-2));}}
.flame-ring{position:absolute;inset:-40px;border-radius:50%;background:radial-gradient(circle, rgba(255,140,0,.4), transparent 65%);filter:blur(6px);z-index:1;animation:ringPulse 3.2s ease-in-out infinite;}
@keyframes ringPulse{0%,100%{transform:scale(.9);opacity:.6;}50%{transform:scale(1.15);opacity:1;}}
#hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,5.6vw,4.4rem);line-height:1.08;max-width:920px;}
#hero h1 .accent{background:linear-gradient(90deg,var(--fire-1),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;}
#hero p.tag{margin-top:20px;color:var(--ink-1);max-width:560px;font-size:1.05rem;}
.cta-row{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;justify-content:center;}
.btn{
  font-family:var(--font-display);font-weight:700;font-size:.86rem;letter-spacing:.02em;
  padding:14px 30px;border-radius:30px;border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;
}
.btn.primary{background:linear-gradient(90deg,var(--fire-1),var(--fire-2));color:#fff;box-shadow:0 8px 26px rgba(255,69,0,.35);}
.btn.primary:hover{box-shadow:0 8px 34px rgba(255,140,0,.55);transform:translateY(-1px);}
.btn.ghost{border-color:var(--line);color:var(--ink-0);background:rgba(255,255,255,.03);}
.btn.ghost:hover{border-color:var(--fire-2);color:var(--fire-2);}
.scroll-cue{position:absolute;bottom:30px;font-size:.68rem;letter-spacing:.25em;color:var(--ink-1);text-transform:uppercase;}

/* ---------- pillars (home) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
.pillar{border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0));transition:transform .3s, border-color .3s;}
.pillar:hover{transform:translateY(-6px);border-color:rgba(255,140,0,.4);}
.pillar .ic{font-size:1.6rem;margin-bottom:14px;}
.pillar h3{font-family:var(--font-display);font-size:1.05rem;margin-bottom:10px;}
.pillar p{color:var(--ink-1);font-size:.9rem;line-height:1.6;}
@media (max-width:880px){.pillars{grid-template-columns:1fr;}}

/* ---------- featured work band (home) ---------- */
.feature-band{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.feature-band img{border-radius:var(--radius);border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover;}
@media (max-width:880px){.feature-band{grid-template-columns:1fr;}}

/* ---------- about gallery (masonry-ish) ---------- */
.about-hero-imgs{display:grid;grid-template-columns:1.3fr .7fr;gap:14px;margin-top:6px;}
.about-hero-imgs img{border-radius:12px;border:1px solid var(--line);object-fit:cover;height:100%;}
.about-hero-imgs .col2{display:grid;grid-template-rows:1fr 1fr;gap:14px;}
@media (max-width:760px){.about-hero-imgs{grid-template-columns:1fr;}.about-hero-imgs .col2{grid-template-columns:1fr 1fr;grid-template-rows:none;}}

.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:12px;margin-top:50px;}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:10px;border:1px solid var(--line);transition:transform .4s, box-shadow .4s;}
.mosaic img:hover{transform:scale(1.03);box-shadow:0 0 26px rgba(255,140,0,.3);}
.mosaic .a{grid-column:span 2;grid-row:span 2;}
.mosaic .b{grid-column:span 2;grid-row:span 1;}
.mosaic .c{grid-column:span 1;grid-row:span 1;}
@media (max-width:760px){.mosaic{grid-template-columns:repeat(2,1fr);}.mosaic .a{grid-column:span 2;}.mosaic .b{grid-column:span 2;}}

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px;}
@media (max-width:880px){.values-grid{grid-template-columns:1fr;}}

/* ---------- portfolio ---------- */
.folio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:44px;}
.folio-card{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  transition:transform .35s, border-color .35s, box-shadow .35s;position:relative;
}
.folio-card:hover{transform:translateY(-6px);border-color:rgba(255,140,0,.5);box-shadow:0 18px 40px rgba(255,69,0,.18);}
.folio-media{height:190px;position:relative;overflow:hidden;}
.folio-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.folio-card:hover .folio-media img{transform:scale(1.06);}
.folio-media.icon-mock{display:flex;align-items:center;justify-content:center;}
.folio-media.icon-mock svg{width:100%;height:100%;display:block;}
.folio-body{padding:22px 24px 26px;}
.folio-card h3{font-family:var(--font-display);font-size:1.08rem;margin-bottom:6px;}
.folio-card p{color:var(--ink-1);font-size:.88rem;margin-bottom:14px;line-height:1.6;}
.folio-card a.visit{font-size:.8rem;color:var(--fire-2);border-bottom:1px solid rgba(255,140,0,.4);}

/* ---------- academy ---------- */
.sponsor-note{margin-top:18px;padding:14px 20px;border:1px solid rgba(43,233,216,.35);border-radius:10px;background:rgba(43,233,216,.06);font-size:.87rem;color:var(--ink-1);display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;}
.sponsor-note a{color:var(--cyan);font-weight:600;}
.programs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:30px;}
.program-chip{border:1px solid var(--line);border-radius:10px;padding:18px;background:rgba(255,255,255,.02);transition:border-color .3s,transform .3s;}
.program-chip:hover{border-color:var(--fire-2);transform:translateY(-3px);}
.program-chip .n{font-family:var(--font-display);color:var(--fire-2);font-weight:800;font-size:.76rem;letter-spacing:.1em;}
.program-chip h4{font-size:.96rem;margin-top:6px;line-height:1.4;}

/* ---------- forms ---------- */
.card-form{
  margin-top:40px;border:1px solid var(--line);border-radius:var(--radius);padding:40px;
  background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.005));
  backdrop-filter:blur(4px);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-grid .full{grid-column:1/-1;}
@media (max-width:700px){.form-grid{grid-template-columns:1fr;}}
.field label{display:block;font-size:.8rem;color:var(--ink-1);margin-bottom:8px;letter-spacing:.02em;}
.field input, .field select, .field textarea{
  width:100%;padding:13px 15px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink-0);font-size:.92rem;
  transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--fire-2);box-shadow:0 0 0 3px rgba(255,140,0,.15);}
.field input[type="file"]{padding:10px;}
.form-submit{margin-top:28px;}
.form-note{margin-top:16px;font-size:.78rem;color:var(--ink-1);}
#academy-success, #contact-success{display:none;margin-top:22px;padding:16px 20px;border-radius:10px;border:1px solid rgba(43,233,216,.4);background:rgba(43,233,216,.08);font-size:.9rem;}
#academy-success.show, #contact-success.show{display:block;animation:pop .5s ease;}
@keyframes pop{0%{transform:scale(.9);opacity:0;}100%{transform:scale(1);opacity:1;}}

/* ---------- login ---------- */
.login-box{max-width:440px;margin:20px auto 0;text-align:center;}
.login-box .card-form{text-align:start;}

/* ---------- certificates ---------- */
.verify-box{display:flex;gap:12px;margin-top:30px;max-width:520px;flex-wrap:wrap;}
.verify-box input{flex:1;min-width:220px;padding:14px 16px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink-0);}
#verify-result{margin-top:18px;padding:16px 20px;border-radius:10px;border:1px solid var(--line);display:none;}
#verify-result.ok{display:block;border-color:rgba(43,233,216,.5);background:rgba(43,233,216,.07);}
#verify-result.no{display:block;border-color:rgba(255,69,0,.5);background:rgba(255,69,0,.07);}
.trainee-table{margin-top:44px;width:100%;border-collapse:collapse;font-size:.88rem;}
.trainee-table th, .trainee-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:start;}
.trainee-table th{color:var(--fire-2);font-family:var(--font-display);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;}
.trainee-table tr:hover td{background:rgba(255,140,0,.04);}

/* ---------- contact ---------- */
#contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;}
.contact-info{display:flex;flex-direction:column;gap:22px;margin-top:26px;}
.contact-info .item{display:flex;gap:14px;align-items:flex-start;}
.contact-info .ic{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--fire-1),var(--fire-2));display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem;}
.contact-info h4{font-size:.83rem;color:var(--ink-1);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px;}
.map-wrap{margin-top:30px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);height:220px;}
.map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(.3) invert(.92) contrast(.9);}
@media (max-width:880px){#contact-grid{grid-template-columns:1fr;}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:50px 8vw 30px;position:relative;z-index:2;}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;}
.foot-brand{display:flex;align-items:center;gap:10px;}
.foot-brand img{width:34px;animation:breathe 4s ease-in-out infinite;}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;}
.foot-links a{color:var(--ink-1);font-size:.85rem;}
.foot-links a:hover{color:var(--fire-2);}
.foot-bottom{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.78rem;color:var(--ink-1);}
.foot-bottom a{color:var(--cyan);}