:root{
  --pine:    #1B2B4A;
  --pine-dk: #111D35;
  --pine-lt: #2D4070;
  --accent:  #374151;
  --accent-lt:#4B5563;
  --cream:   #F2F4F8;
  --cream-dk:#E6E9F0;
  --ink:     #1B2B4A;
  --muted:   #64748B;
  --border:  rgba(27,43,74,0.12);
  --ff:      'Tajawal',sans-serif;
  --shadow:  0 4px 24px rgba(27,43,74,0.10);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--ff);background:var(--cream);color:var(--ink);font-size:16px;line-height:1.7;overflow-x:hidden;}

/* ═══ NAV ═══ */
nav{position:fixed;top:0;inset-inline:0;z-index:100;background:rgba(242,244,248,0.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 5%;display:flex;align-items:center;justify-content:space-between;height:68px;}
.nav-logo{display:flex;align-items:center;text-decoration:none;}
.nav-logo-img{height:40px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{color:var(--muted);font-size:.9rem;font-weight:500;text-decoration:none;transition:color .2s;padding-bottom:2px;border-bottom:2px solid transparent;}
.nav-links a:hover,.nav-links a.active{color:var(--pine);border-bottom-color:var(--pine);}
.btn-lang{background:none;border:1px solid var(--border);padding:5px 14px;border-radius:20px;color:var(--pine);font-size:.85rem;cursor:pointer;font-family:var(--ff);transition:all .2s;}
.btn-lang:hover{background:var(--pine);color:#fff;border-color:var(--pine);}
.btn-wa-nav{background:var(--pine);color:#ffffff!important;padding:8px 18px;border-radius:24px;border:none;font-size:.88rem;font-family:var(--ff);cursor:pointer;text-decoration:none;transition:background .2s;display:inline-flex;align-items:center;gap:6px;}
.btn-wa-nav:hover{background:var(--pine-lt);}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px 6px;background:none;border:none;}
.hamburger span{width:22px;height:2px;background:var(--pine);border-radius:2px;display:block;transition:all .3s;}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
.mob-menu{display:none;position:fixed;top:68px;right:0;left:0;background:rgba(242,244,248,0.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:8px 5% 20px;z-index:99;flex-direction:column;}
.mob-menu.open{display:flex;}
.mob-menu a{color:var(--pine);font-size:1rem;font-weight:600;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.mob-menu a:last-child{border-bottom:none;}
.mob-menu a::after{content:"←";font-size:.78rem;opacity:.35;}
.mob-lang-item{color:var(--pine);font-size:1rem;font-weight:600;font-family:var(--ff);text-align:start;padding:14px 0;border:0;border-bottom:1px solid var(--border);background:none;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:space-between;}
.mob-lang-item::after{content:attr(data-next);font-size:.78rem;opacity:.55;font-family:var(--ff);}
.mob-wa-item{margin-top:12px;background:var(--pine);color:#fff!important;padding:13px 20px!important;border-radius:28px;justify-content:center!important;}
.mob-wa-item::after{display:none!important;}
@media(max-width:768px){.hamburger{display:flex;}.nav-links{display:none;}}

/* ═══ HERO ═══ */
.hero{min-height:100vh;background:linear-gradient(160deg,#F2F4F8 0%,#EDF0F8 55%,#E8ECF5 100%);display:flex;align-items:center;justify-content:center;text-align:center;padding:100px 5% 60px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231B2B4A' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;}
.hero-inner{position:relative;max-width:700px;z-index:1;}
.logo-wrap{margin-bottom:36px;display:flex;justify-content:center;position:relative;}
.hero-logo{width:clamp(200px,50vw,340px);height:auto;max-width:100%;animation:logoFloat 4s ease-in-out 2;filter:drop-shadow(0 4px 16px rgba(27,43,74,0.14));}
@keyframes logoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.sparkles-svg{position:absolute;inset:-18% -10%;width:120%;height:136%;pointer-events:none;overflow:visible;}
.sp{transform-box:fill-box;transform-origin:center;}
.sp1{animation:flash 2.6s ease-in-out 3;}
.sp2{animation:flash 2.6s 0.65s ease-in-out 3;}
.sp3{animation:flash 2.6s 1.3s ease-in-out 3;}
.sp4{animation:flash 2.6s 0.32s ease-in-out 3;}
.sp5{animation:flash 2.6s 1.95s ease-in-out 3;}
@keyframes flash{0%,100%{opacity:0;transform:scale(0.1) rotate(0deg);}40%,60%{opacity:1;transform:scale(1) rotate(18deg);}}
.hero-badge{display:inline-block;border:1px solid rgba(27,43,74,0.22);color:var(--pine);font-size:.78rem;padding:5px 18px;border-radius:20px;margin-bottom:20px;}
.hero h1{font-size:clamp(1.8rem,5vw,3.2rem);color:var(--pine-dk);font-weight:800;line-height:1.25;margin-bottom:20px;}
.hero h1 em{color:var(--pine-lt);font-style:italic;}
.hero p{color:var(--muted);font-size:clamp(.95rem,2vw,1.1rem);max-width:520px;margin:0 auto 40px;}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn-primary{background:var(--pine);color:#fff;padding:14px 32px;border-radius:28px;font-size:1rem;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-family:var(--ff);transition:all .25s;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 18px rgba(27,43,74,0.28);}
.btn-primary:hover{background:var(--pine-lt);transform:translateY(-2px);box-shadow:0 8px 24px rgba(27,43,74,0.35);}
.btn-outline{background:transparent;color:var(--pine);padding:14px 32px;border-radius:28px;font-size:1rem;font-weight:600;text-decoration:none;border:1.5px solid var(--pine);font-family:var(--ff);cursor:pointer;transition:all .25s;}
.btn-outline:hover{background:var(--pine);color:#fff;}
.hero-stats{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:56px;padding-top:36px;border-top:1px solid rgba(27,43,74,0.12);}
.stat{text-align:center;}
.stat-num{font-size:2rem;font-weight:800;color:var(--pine-dk);line-height:1;}
.stat-lbl{font-size:.82rem;color:var(--muted);margin-top:4px;}

/* ═══ SECTIONS ═══ */
section{padding:90px 5%;}
.wrap{max-width:1100px;margin:0 auto;}
.stag{display:inline-block;background:var(--cream-dk);color:var(--pine);font-size:.78rem;font-weight:700;padding:5px 16px;border-radius:16px;margin-bottom:14px;}
.stitle{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;color:var(--pine-dk);margin-bottom:14px;line-height:1.3;}
.ssub{color:var(--muted);font-size:1.05rem;max-width:540px;}
.tc{text-align:center;}.tc .ssub{margin:0 auto;}

/* ═══ SERVICES ═══ */
.services{background:#fff;}
.svcs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:52px;}
.svc{background:var(--cream);border:1px solid var(--cream-dk);border-radius:12px;padding:32px;transition:all .3s;position:relative;overflow:hidden;cursor:default;}
.svc::after{content:'';position:absolute;bottom:0;right:0;left:0;height:3px;background:linear-gradient(90deg,var(--pine),var(--accent));transform:scaleX(0);transform-origin:right;transition:transform .3s;}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);background:#fff;}
.svc:hover::after{transform:scaleX(1);}
.svc-icon{width:46px;height:46px;background:var(--pine);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.svc-icon svg{width:22px;height:22px;fill:#fff;}
.svc-title{font-size:1.05rem;font-weight:700;color:var(--pine-dk);margin-bottom:8px;}
.svc-desc{font-size:.88rem;color:var(--muted);line-height:1.65;}

/* ═══ WHY ═══ */
.why{background:var(--pine-dk);}
.why .stag{background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.88);border:1px solid rgba(255,255,255,0.2);}
.why .stitle{color:#fff;}
.why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin-top:52px;}
.why-card{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);border-radius:12px;padding:32px 24px;text-align:center;transition:background .3s;}
.why-card:hover{background:rgba(255,255,255,0.12);}
.why-num{font-size:2.8rem;font-weight:800;color:#fff;margin-bottom:8px;line-height:1;}
.why-lbl{font-size:.9rem;color:rgba(255,255,255,0.72);line-height:1.5;}

/* ═══ PROCESS ═══ */
.process{background:var(--cream);}
.steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;margin-top:52px;position:relative;}
.steps::before{content:'';position:absolute;top:26px;right:12%;left:12%;height:2px;background:linear-gradient(90deg,transparent,var(--cream-dk) 15%,var(--cream-dk) 85%,transparent);pointer-events:none;}
@media(max-width:768px){.steps::before{display:none;}}
.step{text-align:center;padding:28px 20px;background:#fff;border:1px solid var(--cream-dk);border-radius:12px;transition:box-shadow .3s;}
.step:hover{box-shadow:var(--shadow);}
.step-num{width:52px;height:52px;border-radius:50%;background:var(--pine);color:#fff;font-size:1.25rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.step-title{font-size:1rem;font-weight:700;color:var(--pine-dk);margin-bottom:8px;}
.step-desc{font-size:.87rem;color:var(--muted);}

/* ═══ LANGS ═══ */
.langs{background:#fff;}
.lang-cloud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:44px;}
.lang-tag{padding:8px 18px;border-radius:24px;border:1.5px solid var(--cream-dk);font-size:.88rem;color:var(--pine);font-weight:600;transition:all .2s;cursor:default;}
.lang-tag:hover{border-color:var(--pine);background:var(--pine);color:#fff;}
.lang-tag.lang-primary{font-size:1rem;padding:10px 24px;border-color:rgba(27,43,74,0.35);background:rgba(27,43,74,0.05);font-weight:700;color:var(--pine-dk);}
.lang-tag.lang-primary:hover{background:var(--pine);color:#fff;}

/* ═══ ORDER ═══ */
.order{background:linear-gradient(135deg,var(--pine) 0%,var(--pine-dk) 100%);}
.order .stag{background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.88);border:1px solid rgba(255,255,255,0.2);}
.order .stitle{color:#fff;}
.order .ssub{color:rgba(255,255,255,0.72);}
.form-wrap{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.18);border-radius:16px;padding:40px;max-width:680px;margin:44px auto 0;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-full{grid-column:1/-1;}
.fgroup{display:flex;flex-direction:column;gap:5px;}
label{font-size:.83rem;color:rgba(255,255,255,0.78);font-weight:600;}
label .req{color:#f87171;margin-inline-start:2px;}
input,select,textarea{background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.22);border-radius:8px;padding:12px 16px;color:#fff;font-size:.95rem;font-family:var(--ff);outline:none;transition:border-color .2s;}
input:focus,select:focus,textarea:focus{border-color:rgba(255,255,255,0.6);}
input.err,select.err,textarea.err{border-color:#f87171!important;}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.32);}
select option{background:var(--pine-dk);}
.ferr{color:#f87171;font-size:.75rem;margin-top:2px;display:none;}
.ferr.show{display:block;}
.btn-submit{width:100%;margin-top:8px;background:#fff;color:var(--pine-dk);padding:15px;border-radius:28px;border:none;font-size:1rem;font-weight:700;cursor:pointer;font-family:var(--ff);transition:all .25s;}
.btn-submit:hover{background:var(--cream);transform:translateY(-2px);}
.or-div{text-align:center;margin:20px 0;font-size:.83rem;color:rgba(255,255,255,0.45);position:relative;}
.or-div::before,.or-div::after{content:'';position:absolute;top:50%;width:36%;height:1px;background:rgba(255,255,255,0.14);}
.or-div::before{right:0;}.or-div::after{left:0;}
.btn-wa-big{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;border-radius:28px;background:#25D366;color:#fff;font-size:1rem;font-weight:700;border:none;cursor:pointer;font-family:var(--ff);text-decoration:none;transition:all .25s;}
.btn-wa-big:hover{background:#1da851;transform:translateY(-2px);}
.form-note{text-align:center;margin-top:16px;font-size:.78rem;color:rgba(255,255,255,0.42);}

/* ═══ FOOTER ═══ */
footer{background:var(--pine-dk);color:rgba(255,255,255,0.65);padding:60px 5% 28px;}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.1);margin-bottom:28px;}
.foot-brand{font-size:1.05rem;color:#fff;font-weight:700;margin-bottom:10px;}
.foot-desc{font-size:.87rem;line-height:1.7;}
.foot-col h4{color:#fff;font-weight:700;margin-bottom:14px;font-size:.9rem;}
.foot-col a{display:block;color:rgba(255,255,255,0.55);text-decoration:none;font-size:.87rem;margin-bottom:8px;transition:color .2s;}
.foot-col a:hover{color:#fff;}
.foot-bottom{display:flex;justify-content:space-between;font-size:.78rem;color:rgba(255,255,255,0.35);flex-wrap:wrap;gap:8px;}

/* ═══ FLOATING WA ═══ */
.float-wa{position:fixed;bottom:28px;left:24px;z-index:998;display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:13px 20px;border-radius:32px;text-decoration:none;font-size:.9rem;font-weight:700;font-family:var(--ff);box-shadow:0 4px 20px rgba(37,211,102,0.42);animation:waPulse 2s ease-in-out 2s 3;transition:transform .2s,box-shadow .2s;}
.float-wa:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(37,211,102,0.55);}
.float-wa svg{width:20px;height:20px;fill:#fff;flex-shrink:0;}
@keyframes waPulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.42);}50%{box-shadow:0 4px 32px rgba(37,211,102,0.7),0 0 0 10px rgba(37,211,102,0.12);}}

/* ═══ REVEAL ═══ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.reveal.visible{opacity:1;transform:none;}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  .hero{padding:80px 5% 40px;}
  .hero-logo{width:clamp(180px,60vw,280px);}
  .logo-wrap{margin-bottom:24px;}
  .hero h1{font-size:clamp(1.5rem,7vw,2rem);}
  .hero p{font-size:.87rem;}
  .hero-ctas{gap:10px;}
  .btn-primary,.btn-outline{padding:12px 22px;font-size:.9rem;}
  .hero-stats{gap:18px;margin-top:32px;padding-top:24px;}
  .stat-num{font-size:1.6rem;}
  .foot-top{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .float-wa span{display:none;}
  .float-wa{padding:14px;border-radius:50%;left:18px;bottom:calc(22px + env(safe-area-inset-bottom,0px));}
}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}.hero-logo,.float-wa{animation:none;}}


/* Approved launch-form additions — uses existing visual system */
.file-note{font-size:.74rem;color:rgba(255,255,255,.48);line-height:1.65;margin-top:3px;}
.privacy-consent{font-size:.76rem;color:rgba(255,255,255,.58);line-height:1.75;text-align:center;margin-top:12px;}
.privacy-consent a{color:#fff;text-underline-offset:3px;}
.form-status{display:none;margin-top:12px;padding:11px 14px;border-radius:8px;font-size:.82rem;line-height:1.6;text-align:center;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.16);}
.form-status.show{display:block;}
input[type="file"]{padding:10px 12px;}
input[type="file"]::file-selector-button{font-family:var(--ff);border:0;border-radius:18px;padding:7px 12px;margin-inline-end:10px;cursor:pointer;background:#fff;color:var(--pine-dk);font-weight:700;}