/* Aylat Aljanoob — shared styles */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#003366;
  --primary-2:#00509e;
  --secondary:#007acc;
  --secondary-2:#3399dd;
  --bg:#ffffff;
  --fg:#0c243c;
  --muted:#3a6188;
  --muted-bg:#dcebff;
  --border:#c2d9ff;
  --white:#ffffff;
  --radius:14px;
  --shadow:0 4px 24px rgba(0,51,102,.10);
  --shadow-lg:0 12px 40px rgba(0,51,102,.16);
}

html{scroll-behavior:smooth;}
*{box-sizing:border-box;}

/* refined selection + scrollbar for a more considered, premium feel */
::selection{background:var(--secondary);color:#fff;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--secondary-2);border-radius:20px;border:3px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--secondary);}
html{scrollbar-color:var(--secondary-2) var(--bg);scrollbar-width:thin;}

/* smooth page entrance */
body{opacity:0;animation:pageFadeIn .5s ease forwards;}
@keyframes pageFadeIn{to{opacity:1;}}

h1,h2,h3{letter-spacing:-.01em;}

@media (prefers-reduced-motion: reduce){
  body{animation:none !important;opacity:1 !important;}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Cairo','Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
html[dir="ltr"] body{font-family:'Inter','Cairo',sans-serif;}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}

.container{max-width:1180px;margin:0 auto;padding:0 20px;}

/* language toggle: show/hide based on html[lang] */
[data-en]{display:none;}
[data-ar]{display:inline;}
html[lang="en"] [data-en]{display:inline;}
html[lang="en"] [data-ar]{display:none;}
[data-en].block, [data-ar].block{display:none;}
html[lang="ar"] [data-ar].block{display:block;}
html[lang="en"] [data-en].block{display:block;}

/* header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,248,250,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s ease;
}
.site-header.scrolled{box-shadow:0 6px 24px rgba(0,51,102,.12);}
.header-inner{height:84px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.logo img{height:62px;width:auto;transition:transform .25s ease;}
.logo:hover img{transform:scale(1.05);}
nav.desktop-nav{display:none !important;align-items:center;gap:22px;}
nav.desktop-nav a{position:relative;font-size:14.5px;font-weight:600;color:var(--fg);transition:color .2s;white-space:nowrap;padding-bottom:6px;}
nav.desktop-nav a::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:0;height:2px;background:var(--secondary);transition:width .25s cubic-bezier(.4,0,.2,1);}
nav.desktop-nav a:hover, nav.desktop-nav a.active{color:var(--secondary);}
nav.desktop-nav a:hover::after, nav.desktop-nav a.active::after{width:100%;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:10px;font-weight:700;font-size:14.5px;
  border:1px solid transparent;transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, background-color .2s ease, color .2s ease;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.98);}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-2);box-shadow:0 8px 20px rgba(0,51,102,.28);}
.btn-gold{background:var(--secondary);color:#fff;}
.btn-gold:hover{background:var(--secondary-2);box-shadow:0 8px 20px rgba(0,122,204,.32);}
.btn-outline{background:transparent;border-color:var(--primary);color:var(--primary);}
.btn-outline:hover{background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(0,51,102,.2);}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;}
.btn-outline-light:hover{background:rgba(255,255,255,.12);}
.btn-lg{padding:15px 30px;font-size:16.5px;}
.btn-block{width:100%;}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:var(--primary);
}
.icon-btn:hover{background:var(--muted-bg);}

.mobile-toggle{display:flex !important;}
.mobile-menu{display:none;border-top:1px solid var(--border);background:var(--bg);padding:14px 20px 22px;}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block;padding:12px 0;font-weight:600;border-bottom:1px solid var(--border);}

@media (min-width: 900px){
  nav.desktop-nav{display:flex !important;}
  .mobile-toggle{display:none !important;}
  .mobile-menu{display:none !important;}
}

/* hero */
.hero{background:var(--primary);color:#fff;padding:70px 0 60px;text-align:center;position:relative;overflow:hidden;}
.hero::before, .hero::after,
.page-hero::before, .page-hero::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;
}
.hero::before, .page-hero::before{
  width:340px;height:340px;background:var(--secondary);opacity:.30;
  top:-120px;inset-inline-end:-100px;animation:heroFloat 9s ease-in-out infinite;
}
.hero::after, .page-hero::after{
  width:240px;height:240px;background:#66a3ff;opacity:.22;
  bottom:-100px;inset-inline-start:-80px;animation:heroFloat 11s ease-in-out infinite reverse;
}
@keyframes heroFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-26px) scale(1.08);}}
.hero .inner{position:relative;max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:44px;}
.hero .hero-text{flex:1 1 420px;text-align:center;}
.hero .hero-art{flex:1 1 380px;display:flex;justify-content:center;}
.hero .hero-art svg{width:100%;max-width:400px;height:auto;filter:drop-shadow(0 18px 34px rgba(0,20,50,.35));}
@media (max-width:860px){
  .hero .inner{flex-direction:column;}
  .hero .hero-art{order:-1;max-width:260px;}
}
.hero .hero-logo{height:96px;margin:0 auto 24px;filter:brightness(0) invert(1);}
.hero-credential{
  display:inline-flex;align-items:center;gap:10px;
  font-size:1.55rem;font-weight:800;
  color:var(--secondary);
  letter-spacing:.3px;
  margin-bottom:18px;
  text-shadow:0 2px 12px rgba(0,122,204,.35);
}
.hero-credential svg{flex-shrink:0;}
.hero h1{font-size:2.5rem;font-weight:800;margin:0 0 20px;line-height:1.25;}
.hero p{font-size:1.15rem;color:rgba(255,255,255,.8);margin:0 0 30px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.page-hero{background:var(--primary);color:#fff;padding:64px 0;text-align:center;position:relative;overflow:hidden;}
.page-hero .container{position:relative;}
.page-hero .icon-badge{width:56px;height:56px;color:var(--secondary);margin:0 auto 16px;}
.page-hero h1{font-size:2.4rem;font-weight:800;margin:0 0 14px;}
.page-hero p{color:rgba(255,255,255,.8);font-size:1.1rem;max-width:640px;margin:0 auto;}

/* sections */
section{padding:64px 0;}
.section-muted{background:var(--muted-bg);}
.section-primary{background:var(--primary);color:#fff;}
h2.section-title{font-size:1.9rem;font-weight:800;color:var(--primary);text-align:center;margin:0 0 12px;}
.section-primary h2.section-title, .section-primary p.section-desc{color:#fff;}
p.section-desc{text-align:center;color:var(--muted);max-width:600px;margin:0 auto 44px;}

/* stats */
.stats{display:grid;grid-template-columns:1fr;gap:28px;text-align:center;}
.stats .stat b{display:block;font-size:2.2rem;font-weight:800;color:var(--secondary);}
.stats .stat span{color:var(--muted);font-weight:600;}
@media(min-width:800px){.stats{grid-template-columns:repeat(3,1fr);}}

/* cards */
.grid{display:grid;gap:26px;}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
@media(min-width:760px){.grid-2{grid-template-columns:1fr 1fr;}.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1050px){.grid-3{grid-template-columns:repeat(3,1fr);}}

.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);
  transition:box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
}
.card:hover{box-shadow:var(--shadow-lg);border-color:rgba(0,122,204,.4);transform:translateY(-6px);}
.card-icon{
  width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,51,102,.06);color:var(--secondary);margin-bottom:16px;font-size:22px;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.card:hover .card-icon{transform:scale(1.1) rotate(-4deg);}
.card h3{color:var(--primary);font-size:1.15rem;font-weight:700;margin:0 0 10px;}
.card p{color:var(--muted);font-size:.95rem;margin:0 0 14px;}
.badge{
  display:inline-block;background:rgba(0,122,204,.1);color:var(--secondary);border:1px solid rgba(0,122,204,.28);
  font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;float:inline-end;
}
.bullet-list{list-style:none;margin:0 0 18px;padding:0;}
.bullet-list li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--fg);opacity:.85;margin-bottom:8px;}
.bullet-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--secondary);margin-top:7px;flex-shrink:0;}

.card-dark{background:var(--primary);color:#fff;border:none;}
.card-dark p{color:rgba(255,255,255,.8);}
.card-dark h3{color:#fff;}

/* CTA banner */
.cta-banner{background:var(--primary);border-radius:24px;padding:56px 30px;text-align:center;color:#fff;position:relative;overflow:hidden;}
.cta-banner h2{font-size:1.9rem;font-weight:800;margin:0 0 16px;}
.cta-banner p{color:rgba(255,255,255,.8);font-size:1.1rem;margin:0 0 28px;max-width:600px;margin-inline:auto;}

/* footer */
footer.site-footer{background:var(--primary);color:rgba(255,255,255,.85);padding:56px 0 26px;border-top:4px solid var(--secondary);}
.footer-grid{display:grid;grid-template-columns:1fr;gap:36px;}
@media(min-width:900px){.footer-grid{grid-template-columns:repeat(4,1fr);}}
.footer-grid h3{color:var(--secondary);font-size:1.05rem;font-weight:700;margin:0 0 14px;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:8px;font-size:.92rem;}
.footer-grid img{height:64px;filter:brightness(0) invert(1);margin-bottom:14px;}
.footer-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:22px;font-size:.85rem;color:rgba(255,255,255,.6);}

.whatsapp-float{
  position:fixed;bottom:24px;inset-inline-end:24px;z-index:60;background:#25D366;color:#fff;
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:26px;transition:transform .15s;
}
.whatsapp-float:hover{transform:scale(1.08);}

/* forms */
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-weight:700;font-size:.92rem;margin-bottom:7px;color:var(--fg);}
.form-group input, .form-group select, .form-group textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;font-size:15px;
  font-family:inherit;background:#fff;color:var(--fg);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:2px solid var(--secondary);outline-offset:1px;}
.form-row{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:700px){.form-row{grid-template-columns:1fr 1fr;}}

table.tax-table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
table.tax-table th{background:var(--primary);color:#fff;padding:12px;font-size:.9rem;text-align:start;}
table.tax-table td{padding:12px;font-size:.9rem;border-top:1px solid var(--border);}
table.tax-table tr:nth-child(even){background:var(--muted-bg);}
table.tax-table td:last-child{text-align:center;font-weight:700;color:var(--secondary);}

.tabs{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap;background:var(--muted-bg);padding:6px;border-radius:12px;}
.tab-btn{flex:1;min-width:120px;padding:12px 10px;border:none;background:transparent;border-radius:8px;font-weight:700;font-size:.9rem;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;}
.tab-btn.active{background:#fff;color:var(--primary);box-shadow:var(--shadow);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.result-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:10px;background:var(--muted-bg);margin-bottom:8px;font-size:.95rem;}
.result-row.highlight{background:var(--primary);color:#fff;font-weight:800;font-size:1.05rem;}
.result-row.negative span:last-child{color:#c0392b;font-weight:700;}
.result-row.muted{background:transparent;color:var(--muted);}

.note{font-size:.8rem;color:var(--muted);margin-top:10px;}

.founder-photo{width:100%;max-width:220px;border-radius:50%;border:4px solid rgba(0,122,204,.3);object-fit:cover;aspect-ratio:1/1;margin:0 auto;box-shadow:var(--shadow);}
.about-grid{display:flex;flex-direction:column;gap:0;}
@media(min-width:800px){.about-grid{flex-direction:row;}}
.about-photo-col{background:var(--muted-bg);display:flex;align-items:center;justify-content:center;padding:36px;flex:0 0 34%;}
.about-content-col{padding:36px;flex:1;}

.post-card .cat{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:rgba(0,122,204,.12);color:var(--secondary);display:inline-block;margin-bottom:10px;}
.post-card .date{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:10px;}

.req-options{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px;}
.req-options .btn{flex:0 0 auto;}
.req-item{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:.92rem;}
.req-item:last-child{border-bottom:none;}
.req-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:2px solid var(--secondary);color:var(--secondary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;}
.req-step p.req-q{font-weight:700;color:var(--primary);margin:0 0 14px;}

.success-box{background:#eafaf0;border:1px solid #b7ebc6;color:#1e7e34;padding:16px 18px;border-radius:12px;font-weight:600;margin-bottom:18px;display:none;}
.success-box.show{display:block;}
.error-box{background:#fdeaea;border:1px solid #f3b8b8;color:#a83232;padding:14px 16px;border-radius:12px;font-weight:600;margin-bottom:14px;display:none;font-size:.9rem;}

/* ---------- Scroll-reveal animation system ---------- */
/* Only activates once JS confirms it's ready, so content is always visible without JS */
html.js-reveal-ready .card,
html.js-reveal-ready .hero .inner,
html.js-reveal-ready .page-hero .container,
html.js-reveal-ready .cta-banner{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
html.js-reveal-ready .revealed{
  opacity:1 !important;
  transform:none !important;
}
/* tab content is revealed by clicking a tab, not by scrolling — always show it */
html.js-reveal-ready .tab-panel .card{
  opacity:1 !important;
  transform:none !important;
}
/* staggered cascade for cards sitting in the same grid row */
.grid .card:nth-child(1){transition-delay:.04s;}
.grid .card:nth-child(2){transition-delay:.11s;}
.grid .card:nth-child(3){transition-delay:.18s;}
.grid .card:nth-child(4){transition-delay:.25s;}
.grid .card:nth-child(5){transition-delay:.32s;}
.grid .card:nth-child(6){transition-delay:.39s;}

.cta-banner{transition:transform .3s ease, box-shadow .3s ease;}
.cta-banner:hover{box-shadow:0 20px 50px rgba(0,51,102,.35);}

/* stat counter number gets a little pop when it lands */
@keyframes statPop{0%{transform:scale(.85);}60%{transform:scale(1.08);}100%{transform:scale(1);}}
.stats .stat b.counted{animation:statPop .4s ease;}

/* icon-btn subtle lift */
.icon-btn{transition:background-color .2s ease, transform .2s ease;}
.icon-btn:hover{transform:translateY(-2px);}

/* whatsapp float breathing pulse to feel alive */
@keyframes wappPulse{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.5);}50%{box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 10px rgba(37,211,102,0);}}
.whatsapp-float{animation:wappPulse 2.6s ease-in-out infinite;}
.whatsapp-float:hover{animation:none;}