/*
Theme Name: Skillantro Premium
Theme URI: https://skillantro.com/
Author: Skillantro
Description: Premium UAE-focused leadership and human-performance WordPress theme.
Version: 2.0.0
Requires at least: 5.8
Tested up to: 6.8
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: skillantro
*/
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Montserrat,Arial,sans-serif;background:#080612;color:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
.container{width:min(1180px,88%);margin:auto}
.site-header{height:78px;display:flex;align-items:center;position:sticky;top:0;z-index:99;background:rgba(8,6,18,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{width:min(1180px,88%);margin:auto;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:22px;font-weight:800;letter-spacing:1px}.logo span{color:#00fff6}
.main-nav{display:flex;gap:25px;font-size:12px;color:#c9c5d5}.main-nav a:hover{color:#00fff6}
.nav-btn,.btn{display:inline-block;padding:13px 21px;border-radius:9px;font-size:12px;font-weight:700;letter-spacing:.3px}
.nav-btn,.primary{background:linear-gradient(110deg,#5a019e,#00cfc8);box-shadow:0 12px 35px rgba(0,255,246,.13)}
.secondary{border:1px solid rgba(0,255,246,.45);color:#dffefd}
.hero{min-height:calc(100vh - 78px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:7% 0;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 50%,rgba(90,1,158,.3),transparent 35%),#080612}
.hero-copy{position:relative;z-index:2}.eyebrow{font-size:11px;letter-spacing:2.5px;color:#00fff6;font-weight:700}
.hero h1{font-size:clamp(45px,6vw,86px);line-height:1.02;margin:18px 0}.hero h1 span,h2 span{color:#00fff6}
.lead{font-size:17px;color:#bcb8c9;max-width:650px}.actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.staircase{height:520px;position:relative}.skyline{position:absolute;top:8%;right:3%;font-size:10px;letter-spacing:3px;color:#777286}
.step{position:absolute;width:58%;height:75px;right:4%;padding:25px;color:#fff;font-size:12px;font-weight:800;letter-spacing:2px;border:1px solid rgba(0,255,246,.28);background:linear-gradient(90deg,rgba(90,1,158,.65),rgba(0,255,246,.08));transform:skewY(-10deg);box-shadow:0 18px 45px rgba(0,0,0,.3)}
.s1{bottom:5%}.s2{bottom:20%}.s3{bottom:35%}.s4{bottom:50%}.s5{bottom:65%}
.person{position:absolute;right:42%;top:18%;font-size:75px;color:#00fff6;text-shadow:0 0 30px #00fff6;animation:float 2.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.section{padding:110px 0;background:#0b0916}.section.dark{background:#07050e}
.section h2,.uae h2{font-size:clamp(34px,4.5vw,62px);line-height:1.08;margin:12px 0 50px;max-width:900px}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.cards article{min-height:260px;padding:25px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));transition:.35s}
.cards article:hover{transform:translateY(-10px);border-color:rgba(0,255,246,.45)}.cards b{color:#00fff6;font-size:11px}.cards h3{margin-top:60px}.cards p{font-size:13px;color:#a9a5b5}
.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.program-grid div{padding:32px;border-radius:14px;border:1px solid rgba(0,255,246,.16);font-size:19px;font-weight:700;background:linear-gradient(135deg,rgba(90,1,158,.18),rgba(0,255,246,.035))}
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.timeline>div{border-top:1px solid #403a50;padding:25px 15px}.timeline strong{color:#00fff6}.timeline p{font-size:13px;color:#a9a5b5}
.uae{padding:110px 0;display:grid;grid-template-columns:1.4fr .6fr;align-items:center;background:linear-gradient(120deg,#130524,#080612)}.uae h2{margin-bottom:20px}.uae p{color:#aaa6b6;max-width:750px}
.uae-orb{width:280px;height:280px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:30px;font-weight:800;letter-spacing:4px;color:#00fff6;border:1px solid rgba(0,255,246,.35);box-shadow:0 0 80px rgba(0,255,246,.12);background:radial-gradient(circle,rgba(90,1,158,.55),transparent 65%)}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:900px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:16px;background:#11101c;border:1px solid #292536;border-radius:8px;color:#fff;font-family:inherit}.contact-form textarea{grid-column:1/-1;min-height:140px}.contact-form button{border:0;cursor:pointer}
.site-footer{text-align:center;padding:30px;color:#777286;border-top:1px solid rgba(255,255,255,.08);font-size:11px}
.reveal{opacity:0;transform:translateY(25px);transition:.7s}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.main-nav{display:none}.hero,.uae{grid-template-columns:1fr}.staircase{height:380px;margin-top:30px}.cards{grid-template-columns:1fr 1fr}.timeline{grid-template-columns:1fr 1fr}.program-grid{grid-template-columns:1fr}}
@media(max-width:560px){.hero{padding:60px 0}.hero h1{font-size:45px}.section,.uae{padding:75px 0}.cards,.timeline{grid-template-columns:1fr}.contact-form{grid-template-columns:1fr}.contact-form textarea{grid-column:auto}.nav-btn{display:none}.staircase{transform:scale(.88);transform-origin:center}}

/* ===== Skillantro Motion System ===== */
:root{
 --skillantro-purple:#5a019e;
 --skillantro-cyan:#00fff6;
 --motion:cubic-bezier(.2,.8,.2,1);
}
body{overflow-x:hidden}
body:before{
 content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
 background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);
 background-size:70px 70px;
}
.site-header{transition:background .4s var(--motion),box-shadow .4s var(--motion),transform .4s var(--motion)}
.site-header.scrolled{background:rgba(8,6,18,.96);box-shadow:0 12px 45px rgba(0,0,0,.25)}
.logo{transition:transform .35s var(--motion),text-shadow .35s}
.logo:hover{transform:translateY(-2px);text-shadow:0 0 22px rgba(0,255,246,.45)}
.main-nav a{position:relative;transition:color .3s var(--motion)}
.main-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:var(--skillantro-cyan);transition:right .35s var(--motion)}
.main-nav a:hover:after{right:0}

.btn,.nav-btn{
 position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--motion),box-shadow .35s var(--motion),border-color .35s;
}
.btn:before,.nav-btn:before{
 content:"";position:absolute;top:0;left:-120%;width:75%;height:100%;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
 transform:skewX(-20deg);transition:left .65s var(--motion);z-index:-1;
}
.btn:hover,.nav-btn:hover{transform:translateY(-4px) scale(1.025);box-shadow:0 16px 42px rgba(0,255,246,.22)}
.btn:hover:before,.nav-btn:hover:before{left:145%}
.btn:active,.nav-btn:active{transform:translateY(-1px) scale(.985)}

.hero{animation:heroIn 1.1s var(--motion) both}
@keyframes heroIn{from{opacity:0;transform:scale(1.025) translateY(20px)}to{opacity:1;transform:none}}
.hero-copy .eyebrow{animation:fadeUp .8s .15s var(--motion) both}
.hero h1{animation:fadeUp .9s .25s var(--motion) both}
.hero .lead{animation:fadeUp .9s .4s var(--motion) both}
.hero .actions{animation:fadeUp .9s .55s var(--motion) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.glow{animation:glowPulse 7s ease-in-out infinite alternate}
.glow-b{animation-delay:-3s}
@keyframes glowPulse{from{transform:scale(.85);opacity:.14}to{transform:scale(1.2);opacity:.28}}

.staircase{animation:stairIn 1.25s .2s var(--motion) both}
@keyframes stairIn{from{opacity:0;transform:translateX(50px) perspective(800px) rotateY(-8deg)}to{opacity:1;transform:none}}
.step{transition:transform .45s var(--motion),box-shadow .45s var(--motion),border-color .45s}
.step:hover{transform:skewY(-10deg) translateX(-14px);border-color:rgba(0,255,246,.7);box-shadow:0 22px 55px rgba(0,255,246,.12)}
.s1{animation:stepFloat 4s ease-in-out infinite}.s2{animation:stepFloat 4s .3s ease-in-out infinite}.s3{animation:stepFloat 4s .6s ease-in-out infinite}.s4{animation:stepFloat 4s .9s ease-in-out infinite}.s5{animation:stepFloat 4s 1.2s ease-in-out infinite}
@keyframes stepFloat{50%{margin-right:5px}}
.person{animation:float 2.5s ease-in-out infinite,personGlow 2s ease-in-out infinite alternate}
@keyframes personGlow{to{text-shadow:0 0 50px rgba(0,255,246,.9)}}

.section{position:relative}
.section:before{
 content:"";position:absolute;top:0;left:50%;width:180px;height:1px;
 transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--skillantro-cyan),transparent);opacity:.4;
}
.cards article,.program-grid div,.timeline>div{
 will-change:transform;transition:transform .55s var(--motion),opacity .7s var(--motion),border-color .4s,box-shadow .4s;
}
.cards article:hover{box-shadow:0 22px 55px rgba(0,0,0,.3)}
.program-grid div:hover{transform:translateY(-9px) scale(1.015);border-color:rgba(0,255,246,.55);box-shadow:0 20px 50px rgba(90,1,158,.18)}
.timeline>div:hover{transform:translateY(-7px);border-color:var(--skillantro-cyan)}

.uae{position:relative;overflow:hidden}
.uae:after{
 content:"";position:absolute;width:520px;height:520px;right:-180px;top:-160px;border:1px solid rgba(0,255,246,.1);border-radius:50%;
 box-shadow:0 0 0 55px rgba(0,255,246,.02),0 0 0 110px rgba(90,1,158,.025);
 animation:orbRotate 18s linear infinite;
}
@keyframes orbRotate{to{transform:rotate(360deg)}}
.uae-orb{animation:orbPulse 4s ease-in-out infinite;transition:transform .5s var(--motion)}
.uae-orb:hover{transform:scale(1.06) rotate(3deg)}
@keyframes orbPulse{50%{box-shadow:0 0 100px rgba(0,255,246,.22)}}

.contact-form input,.contact-form select,.contact-form textarea{transition:border-color .3s,box-shadow .3s,transform .3s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--skillantro-cyan);box-shadow:0 0 0 3px rgba(0,255,246,.08);transform:translateY(-2px)}

.reveal{transition:opacity .8s var(--motion),transform .8s var(--motion)}
.reveal.visible{animation:revealPop .8s var(--motion) both}
@keyframes revealPop{0%{opacity:0;transform:translateY(35px) scale(.98)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.wp-content{font-size:16px;color:#c9c5d5}.wp-content h2,.wp-content h3{color:#fff}.wp-content a{color:#00fff6}.wp-content blockquote{border-left:3px solid #00fff6;padding-left:20px}

/* ===== HERO V2: CINEMATIC TRANSFORMATION ===== */
.hero-v2{min-height:calc(100vh - 78px);position:relative;overflow:hidden;background:#07050e;isolation:isolate}
.hero-v2:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 52%,rgba(90,1,158,.38),transparent 31%),radial-gradient(circle at 92% 10%,rgba(0,255,246,.12),transparent 25%);z-index:-3}
.hero-noise{position:absolute;inset:0;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");z-index:-1}
.hero-grid{position:absolute;inset:-20%;background-image:linear-gradient(rgba(0,255,246,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,246,.055) 1px,transparent 1px);background-size:75px 75px;transform:perspective(700px) rotateX(62deg) translateY(25%);transform-origin:center bottom;mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 72%);animation:gridMove 14s linear infinite;z-index:-2}
@keyframes gridMove{to{background-position:0 75px,75px 0}}
.hero-content{min-height:calc(100vh - 78px);display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:20px;position:relative}
.hero-v2-copy{padding:50px 0;z-index:5}.hero-reveal{animation:heroFade .9s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroFade{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero-title{font-size:clamp(48px,6vw,84px);line-height:.98;letter-spacing:-3px;margin:22px 0 28px;font-weight:800}
.hero-title .line{display:block;overflow:hidden;padding-bottom:7px}
.hero-title .line:first-child{animation:titleLine .95s .12s cubic-bezier(.2,.8,.2,1) both}
.hero-title .line:last-child{animation:titleLine .95s .27s cubic-bezier(.2,.8,.2,1) both}
@keyframes titleLine{from{opacity:0;transform:translateY(100%);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.hero-title em{font-style:normal;color:#00fff6;text-shadow:0 0 40px rgba(0,255,246,.22)}
.hero-title strong{font-weight:800;background:linear-gradient(90deg,#fff,#00fff6,#9c4dff,#fff);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradientText 5s linear infinite}
@keyframes gradientText{to{background-position:300% center}}
.hero-v2-lead{max-width:650px;color:#bcb8c9;font-size:17px;animation:heroFade .9s .45s both}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-actions .btn{animation:buttonIn .8s .6s both}
.hero-actions .btn:nth-child(2){animation-delay:.72s}
@keyframes buttonIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.hero-actions .btn span{display:inline-block;margin-left:8px;transition:transform .35s}.hero-actions .btn:hover span{transform:translate(4px,-4px)}
.hero-trust{margin-top:36px;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:1.5px;color:#777286;text-transform:uppercase}
.hero-trust span{color:#00fff6}.hero-trust i{width:22px;height:1px;background:#3a3546;display:block}
.hero-v2-visual{height:620px;position:relative;animation:visualIn 1.2s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes visualIn{from{opacity:0;transform:translateX(70px) scale(.94)}to{opacity:1;transform:none}}
.hero-orb{position:absolute;border-radius:50%;filter:blur(55px);pointer-events:none}
.orb-one{width:300px;height:300px;right:14%;top:15%;background:#5a019e;opacity:.32;animation:orbFloat 7s ease-in-out infinite alternate}
.orb-two{width:210px;height:210px;right:50%;bottom:7%;background:#00fff6;opacity:.11;animation:orbFloat 9s -3s ease-in-out infinite alternate}
@keyframes orbFloat{to{transform:translate(20px,-28px) scale(1.15)}}
.skyline-back{position:absolute;right:3%;top:4%;display:flex;gap:14px;font-size:8px;letter-spacing:3px;color:#656071}
.stairs-v2{position:absolute;width:72%;height:82%;right:3%;bottom:2%;transform:skewY(-9deg)}
.vstep{position:absolute;right:0;width:72%;height:68px;padding:23px 25px;border:1px solid rgba(0,255,246,.25);border-radius:5px;color:#e8e6ed;font-size:11px;font-weight:800;letter-spacing:2.5px;background:linear-gradient(90deg,rgba(90,1,158,.72),rgba(17,8,28,.65));box-shadow:0 20px 50px rgba(0,0,0,.32);overflow:hidden;transition:.5s}
.vstep:before{content:"";position:absolute;left:-30%;top:0;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,246,.28),transparent);transform:skewX(-20deg);animation:stepShine 4.5s infinite}
@keyframes stepShine{0%,55%{left:-35%}80%,100%{left:130%}}
.vstep small{color:#00fff6;margin-right:16px}.vs1{bottom:4%;animation:stepRise 4s ease-in-out infinite}.vs2{bottom:20%;animation:stepRise 4s .2s ease-in-out infinite}.vs3{bottom:36%;animation:stepRise 4s .4s ease-in-out infinite}.vs4{bottom:52%;animation:stepRise 4s .6s ease-in-out infinite}.vs5{bottom:68%;animation:stepRise 4s .8s ease-in-out infinite}
@keyframes stepRise{50%{transform:translateX(-9px)}}
.leader{position:absolute;right:31%;top:14%;width:90px;height:160px;animation:leaderFloat 3.5s ease-in-out infinite;z-index:3}
@keyframes leaderFloat{50%{transform:translateY(-14px)}}
.leader-head{width:27px;height:27px;border-radius:50%;background:#00fff6;position:absolute;left:32px;top:13px;box-shadow:0 0 28px #00fff6}.leader-body{position:absolute;width:42px;height:95px;left:25px;top:44px;border-radius:22px 22px 9px 9px;background:linear-gradient(180deg,#fff,#7343ad 45%,#250b39);box-shadow:0 0 35px rgba(90,1,158,.55)}.leader-ring{position:absolute;width:95px;height:95px;border:1px solid rgba(0,255,246,.3);border-radius:50%;left:-2px;top:-20px;animation:ringSpin 7s linear infinite}.leader-ring:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#00fff6;top:-4px;left:44px;box-shadow:0 0 15px #00fff6}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.float-card{position:absolute;padding:12px 16px;border:1px solid rgba(0,255,246,.22);background:rgba(12,9,22,.7);backdrop-filter:blur(10px);border-radius:10px;font-size:9px;letter-spacing:1.5px;font-weight:700;color:#d8d5df;box-shadow:0 15px 40px rgba(0,0,0,.25);animation:cardFloat 5s ease-in-out infinite}
.float-card b{color:#00fff6;margin-left:12px}.fc1{top:18%;right:2%;animation-delay:-1s}.fc2{top:43%;left:2%;animation-delay:-3s}.fc3{bottom:28%;right:0;animation-delay:-2s}.fc4{bottom:8%;left:9%;animation-delay:-4s}
@keyframes cardFloat{50%{transform:translateY(-10px) rotate(.7deg)}}
.scroll-cue{position:absolute;bottom:2%;right:35%;font-size:8px;letter-spacing:2px;color:#716b7c;display:flex;align-items:center;gap:10px;animation:pulseCue 2s ease-in-out infinite}
.scroll-cue span{width:7px;height:7px;border:1px solid #00fff6;border-radius:50%;box-shadow:0 0 14px #00fff6}
@keyframes pulseCue{50%{opacity:.45;transform:translateY(4px)}}
.hero-v2 .eyebrow i{display:inline-block;width:30px;height:1px;background:#00fff6;margin:0 8px;vertical-align:middle}
@media(max-width:900px){.hero-content{grid-template-columns:1fr}.hero-v2-visual{height:470px;margin-top:-20px}.hero-title{letter-spacing:-2px}.leader{right:30%}.float-card{transform:scale(.9)}.hero-trust{flex-wrap:wrap}.scroll-cue{right:35%}}
@media(max-width:560px){.hero-v2{min-height:auto}.hero-content{min-height:auto}.hero-v2-copy{padding:75px 0 20px}.hero-title{font-size:46px}.hero-v2-lead{font-size:14px}.hero-v2-visual{height:390px}.stairs-v2{width:95%;right:-8%}.vstep{width:76%;height:57px;padding:18px;font-size:9px}.leader{right:25%;top:10%;transform:scale(.8)}.fc1{right:-2%;top:15%}.fc2{left:0;top:42%}.fc3{right:0;bottom:29%}.fc4{left:4%;bottom:6%}.scroll-cue{display:none}}