:root{
  --navy:#07172f;
  --navy-2:#0b2243;
  --navy-3:#102b51;
  --gold:#e5aa3b;
  --gold-2:#f3c665;
  --cream:#fbf7f0;
  --paper:#ffffff;
  --text:#10213c;
  --muted:#6f7c8f;
  --line:#e6eaf0;
  --shadow:0 20px 50px rgba(7,23,47,.12);
  --radius:22px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:"Cairo",system-ui,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.8;
  overflow-x:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}

button,
input,
select{
  font:inherit;
}

button{
  cursor:pointer;
}

.container{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(6,20,42,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.nav-wrap{
  height:76px;
  display:flex;
  align-items:center;
  gap:28px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  min-width:max-content;
}

.brand-mark{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid rgba(229,170,59,.8);
  border-radius:12px;
  color:var(--gold);
  font-size:13px;
  font-weight:900;
  box-shadow:inset 0 0 18px rgba(229,170,59,.12);
}

.brand-copy{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.brand-copy strong{
  font-size:17px;
}

.brand-copy small{
  font-size:8px;
  letter-spacing:.8px;
  color:#bfc8d7;
  margin-top:5px;
}

.nav{
  display:flex;
  align-items:center;
  gap:26px;
  margin-inline:auto;
}

.nav a{
  position:relative;
  color:#d5dbea;
  font-size:13px;
  font-weight:700;
  transition:.25s;
}

.nav a:hover,
.nav a.active{
  color:#fff;
}

.nav a.active:after{
  content:"";
  position:absolute;
  height:2px;
  background:var(--gold);
  left:0;
  right:0;
  bottom:-9px;
  border-radius:10px;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.07);
  padding:11px;
}

.menu-toggle span{
  display:block;
  height:2px;
  background:#fff;
  margin:5px 0;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:14px;
  padding:13px 22px;
  font-weight:800;
  font-size:14px;
  transition:.25s;
  white-space:nowrap;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-gold{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#13223b;
  box-shadow:0 10px 28px rgba(229,170,59,.25);
}

.btn-sm{
  padding:10px 16px;
  font-size:12px;
}

.btn-outline{
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.03);
}

.btn-navy{
  background:var(--navy);
  color:#fff;
}

.dark-section{
  position:relative;
  background:
    radial-gradient(
      circle at 25% 12%,
      #1a3155 0,
      rgba(17,44,80,.7) 17%,
      transparent 42%
    ),
    linear-gradient(140deg,#06152c,#0b1c37 58%,#06152a);
  color:#fff;
  overflow:hidden;
}

.light-section{
  background:#fff;
}

.cream-section{
  background:linear-gradient(180deg,#fff 0,#fffaf4 48%,#fff 100%);
}

.hero{
  min-height:auto;
  padding:32px 0 0;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:70px;
  align-items:center;
}

.hero-content{
  position:relative;
  z-index:3;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 13px;
  border-radius:999px;
  background:rgba(229,170,59,.09);
  border:1px solid rgba(229,170,59,.18);
  color:#f3d58f;
  font-size:12px;
  font-weight:800;
}

.eyebrow i{
  width:7px;
  height:7px;
  background:var(--gold);
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(229,170,59,.11);
}

.eyebrow.light{
  color:#80601f;
  background:#fff6e4;
  border-color:#f4e4bd;
}

.hero h1{
  font-size:52px;
  line-height:1.35;
  margin:20px 0 16px;
  letter-spacing:-1.4px;
}

.hero h1 span,
.challenge-copy h2 span{
  color:var(--gold);
}

.hero-content>p{
  font-size:16px;
  line-height:2;
  color:#c4cede;
  max-width:650px;
}

.hero-actions{
  display:flex;
  gap:12px;
  margin-top:30px;
}

.hero-trust{
  display:flex;
  gap:30px;
  margin-top:28px;
  color:#dbe2ed;
  font-size:12px;
}

.hero-trust div{
  display:flex;
  align-items:center;
  gap:8px;
}

.trust-icon{
  color:var(--gold);
  font-size:17px;
}

.hero-visual{
  position:relative;
  min-height:480px;
  z-index:2;
}

.laptop-card{
  position:absolute;
  inset:50px 0 45px 40px;
  border-radius:18px;
  background:#0e1c35;
  box-shadow:
    0 50px 90px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.12);
  transform:perspective(1100px) rotateY(-7deg) rotateX(2deg);
  overflow:hidden;
}

.laptop-topbar{
  height:38px;
  background:#172742;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 14px;
  color:#96a5bb;
  font-size:9px;
}

.laptop-topbar span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#51617b;
}

.laptop-topbar b{
  margin-inline-start:auto;
}

.dashboard{
  height:calc(100% - 38px);
  display:flex;
}

.dash-menu{
  width:65px;
  background:#0a1529;
  border-left:1px solid rgba(255,255,255,.06);
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.dash-menu i{
  display:block;
  width:22px;
  height:7px;
  border-radius:8px;
  background:#1d3458;
}

.dash-menu i:nth-of-type(2){
  background:#d39b34;
}

.logo-dot{
  width:18px;
  height:18px;
  border-radius:6px;
  border:2px solid var(--gold);
}

.dash-main{
  padding:24px;
  flex:1;
}

.dash-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.dash-head small{
  display:block;
  color:#8191a9;
  font-size:10px;
}

.dash-head strong{
  display:block;
  font-size:24px;
}

.mini-pill{
  font-size:9px;
  padding:6px 10px;
  border-radius:10px;
  background:#162b4a;
  color:#95a4bb;
}

.chart-area{
  height:225px;
  margin-top:14px;
  padding:10px;
  border-radius:14px;
  background:linear-gradient(180deg,#102340,#0b1a31);
}

.chart-area svg{
  width:100%;
  height:100%;
}

.gridline{
  stroke:#27405f;
  stroke-width:1;
  opacity:.7;
}

.line{
  fill:none;
  stroke:#e7ad43;
  stroke-width:4;
  stroke-linecap:round;
}

.area{
  fill:url(#area);
}

.dash-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
}

.dash-stats div{
  padding:10px;
  border-radius:10px;
  background:#122846;
}

.dash-stats span{
  display:block;
  color:#8292aa;
  font-size:8px;
}

.dash-stats b{
  font-size:16px;
  color:#fff;
}

.metric{
  position:absolute;
  z-index:4;
  width:155px;
  padding:13px 15px;
  border:1px solid rgba(240,188,84,.38);
  border-radius:15px;
  background:linear-gradient(
    135deg,
    rgba(16,40,72,.96),
    rgba(22,27,58,.93)
  );
  box-shadow:
    0 14px 35px rgba(0,0,0,.3),
    0 0 28px rgba(229,170,59,.12);
}

.metric span{
  display:block;
  color:#c9d3e1;
  font-size:9px;
}

.metric b{
  display:block;
  font-size:23px;
  color:#fff;
  margin-top:3px;
}

.metric-1{
  top:45px;
  right:-20px;
}

.metric-2{
  top:180px;
  right:5px;
}

.metric-3{
  bottom:30px;
  right:-8px;
}

.offer-badge{
  position:absolute;
  left:-15px;
  top:0;
  z-index:5;
  width:150px;
  background:#fff;
  color:#182640;
  border-radius:18px;
  padding:15px;
  text-align:center;
  box-shadow:var(--shadow);
}

.offer-badge small,
.offer-badge span{
  display:block;
  font-size:9px;
}

.offer-badge strong{
  display:block;
  font-size:42px;
  line-height:1.15;
  color:var(--gold);
  margin:2px 0;
}

.hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.2;
}

.glow-a{
  width:340px;
  height:340px;
  background:#8a65a5;
  left:-120px;
  top:20px;
}

.glow-b{
  width:260px;
  height:260px;
  background:#d6a449;
  right:10%;
  bottom:30px;
}

.hero-curve{
  position:absolute;
  height:110px;
  left:-5%;
  right:-5%;
  bottom:-60px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:#fff;
}

section{
  padding:90px 0;
}

.steps-section{
  padding-top:65px;
}

.section-heading{
  margin-bottom:38px;
}

.section-heading.center{
  text-align:center;
}

.section-heading h2{
  font-size:36px;
  line-height:1.4;
  margin:14px 0 6px;
}

.section-heading p{
  margin:0;
  color:var(--muted);
}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.step-card{
  position:relative;
  padding:26px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 35px rgba(12,34,65,.06);
  transition:.25s;
}

.step-card:hover{
  transform:translateY(-5px);
  border-color:#edd092;
}

.step-card .number{
  position:absolute;
  left:18px;
  top:18px;
  color:#c8ced7;
  font-weight:800;
}

.step-card .icon{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:#fff4df;
  color:#c88b1e;
  font-size:25px;
  margin-bottom:16px;
}

.step-card h3{
  font-size:20px;
  margin:0 0 8px;
}

.step-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.challenges{
  padding-top:20px;
}

.challenge-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  align-items:center;
}

.challenge-copy{
  position:relative;
  padding:34px 18px 30px 0;
}

.challenge-copy h2{
  font-size:37px;
  line-height:1.5;
  margin:16px 0;
}

.challenge-copy p{
  color:var(--muted);
  font-size:14px;
  max-width:560px;
}

.challenge-copy .btn{
  margin-top:18px;
}

.growth-graphic{
  height:120px;
  display:flex;
  gap:9px;
  align-items:end;
  position:absolute;
  left:40px;
  bottom:15px;
  opacity:.9;
}

.growth-graphic span{
  width:23px;
  border-radius:7px 7px 2px 2px;
  background:linear-gradient(180deg,var(--gold),#244b7e);
  box-shadow:0 8px 22px rgba(32,64,103,.18);
}

.challenge-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px;
  box-shadow:var(--shadow);
}

.challenge-card h3{
  font-size:21px;
  margin:0;
}

.challenge-card>p{
  font-size:13px;
  color:var(--muted);
  margin-top:5px;
}

.accordion{
  margin-top:20px;
}

.accordion button{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-align:right;
  border:0;
  border-radius:11px;
  padding:13px 15px;
  margin-top:9px;
  background:#f5f7fa;
  color:#20314d;
  font-size:12px;
  font-weight:800;
}

.accordion button b{
  font-size:18px;
  color:#ba801c;
}

.accordion-content{
  max-height:0;
  overflow:hidden;
  padding:0 14px;
  color:var(--muted);
  font-size:12px;
  transition:max-height .3s ease,padding .3s;
}

.accordion button.open + .accordion-content{
  max-height:100px;
  padding:10px 14px 2px;
}

.testimonials{
  padding:80px 0;
}

.testimonial-shell{
  position:relative;
}

.testimonial-track{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.testimonial-card{
  min-height:240px;
  background:#fff;
  border:1px solid #eadfce;
  border-radius:18px;
  padding:27px;
  box-shadow:0 14px 32px rgba(82,60,24,.06);
  display:flex;
  flex-direction:column;
}

.testimonial-card.featured{
  background:linear-gradient(160deg,#0b203e,#0a1830);
  color:#fff;
  border-color:#d6a443;
  transform:translateY(-10px);
}

.quote{
  font-size:42px;
  line-height:1;
  color:var(--gold);
  font-weight:900;
}

.testimonial-card p{
  font-size:13px;
  flex:1;
}

.person{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e9edf3;
  color:#153254;
  font-weight:800;
}

.featured .avatar{
  background:#f2d28e;
  color:#20314e;
}

.person b{
  display:block;
  font-size:13px;
}

.person small{
  display:block;
  color:#8d98aa;
  font-size:10px;
}

.stars{
  color:#e9a824;
  letter-spacing:2px;
  font-size:12px;
  margin-top:10px;
}

.slider-btn{
  position:absolute;
  z-index:2;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid #e5e7ec;
  background:#fff;
  color:#152b49;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.slider-btn.next{
  right:-54px;
}

.slider-btn.prev{
  left:-54px;
}

.slider-dots{
  text-align:center;
  margin-top:20px;
}

.slider-dots button{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#d7dbe1;
  margin:0 4px;
}

.slider-dots button.active{
  width:22px;
  border-radius:10px;
  background:var(--gold);
}

.work{
  padding-top:65px;
}

.work-tabs{
  display:flex;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.work-tabs button{
  border:0;
  border-radius:999px;
  padding:9px 18px;
  background:#f1f3f6;
  color:#45536a;
  font-weight:800;
  font-size:12px;
}

.work-tabs button.active{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#12223b;
}

.results-panel{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:18px;
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
  background:#fff;
  box-shadow:var(--shadow);
}

.result-kpis{
  display:grid;
  gap:12px;
}

.result-kpis>div{
  padding:18px;
  border-radius:15px;
  background:#f8fafc;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
}

.kpi-icon{
  grid-row:1/3;
  width:35px;
  height:35px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#fff1d4;
  color:#bf841b;
}

.result-kpis b{
  font-size:25px;
  line-height:1.1;
}

.result-kpis small{
  color:var(--muted);
  font-size:9px;
}

.table-window{
  border:1px solid #dfe5ed;
  border-radius:15px;
  overflow:hidden;
}

.table-top{
  height:38px;
  background:#f4f7fa;
  border-bottom:1px solid #e2e7ee;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 13px;
}

.table-top span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#cad1db;
}

.table-top strong{
  margin-inline-start:auto;
  font-size:10px;
  color:#778398;
}

.campaign-table{
  font-size:10px;
  min-width:660px;
}

.campaign-table .row{
  display:grid;
  grid-template-columns:1.7fr repeat(5,1fr);
  padding:10px 14px;
  border-bottom:1px solid #edf0f4;
  align-items:center;
}

.campaign-table .row.head{
  background:#fafbfd;
  font-weight:800;
  color:#617086;
}

.campaign-table .row span:first-child{
  font-weight:700;
}

.campaign-table i{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#3b7cff;
  margin-left:5px;
}

.lead-section{
  padding:85px 0;
}

.lead-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:38px;
  align-items:center;
}

.lead-copy h2{
  font-size:38px;
  line-height:1.45;
  margin:18px 0 12px;
}

.lead-copy p{
  color:#c4cede;
  max-width:480px;
}

.lead-copy ul{
  padding:0;
  margin:25px 0;
  list-style:none;
}

.lead-copy li{
  position:relative;
  padding-right:28px;
  margin:10px 0;
  color:#e6ebf3;
  font-size:13px;
}

.lead-copy li:before{
  content:"✓";
  position:absolute;
  right:0;
  top:1px;
  width:19px;
  height:19px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--gold);
  color:#14213a;
  font-size:11px;
  font-weight:900;
}

.target-art{
  position:relative;
  width:125px;
  height:125px;
  margin:25px 50px 0 0;
}

.target-ring{
  position:absolute;
  border:8px solid #e5aa3b;
  border-radius:50%;
  inset:0;
}

.target-ring.r2{
  inset:24px;
  border-color:#fff;
}

.target-ring.r3{
  inset:48px;
  border-color:#e5aa3b;
}

.target-art span{
  position:absolute;
  left:-16px;
  top:6px;
  color:#fff;
  font-size:62px;
  transform:rotate(-45deg);
}

.lead-form{
  background:#fff;
  color:var(--text);
  border-radius:22px;
  padding:26px;
  box-shadow:0 35px 60px rgba(0,0,0,.3);
}

.form-steps{
  display:flex;
  gap:8px;
  margin-bottom:20px;
}

.form-steps button{
  flex:1;
  border:0;
  border-radius:999px;
  padding:9px;
  background:#f0f3f7;
  color:#657188;
  font-size:10px;
  font-weight:800;
}

.form-steps button.active{
  background:#f7c45f;
  color:#13213b;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.form-grid label{
  font-size:11px;
  font-weight:800;
  color:#39475e;
}

.form-grid label.full{
  grid-column:1/-1;
}

.form-grid input,
.form-grid select{
  width:100%;
  margin-top:6px;
  border:1px solid #e1e6ed;
  border-radius:11px;
  padding:12px 13px;
  background:#f9fafc;
  color:#5e6b80;
  outline:none;
}

.form-grid input:focus,
.form-grid select:focus{
  border-color:#e3ad45;
  box-shadow:0 0 0 3px rgba(227,173,69,.12);
}

.form-submit{
  width:100%;
  margin-top:16px;
}

.form-note{
  text-align:center!important;
  color:#8995a7!important;
  font-size:9px!important;
  margin:8px 0 0!important;
}

.cta-strip{
  padding:40px 0 70px;
}

.cta-box{
  background:linear-gradient(125deg,#0a1d39,#102a50);
  color:#fff;
  border-radius:22px;
  padding:28px 34px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 18px 44px rgba(7,23,47,.18);
}

.cta-box h3{
  font-size:27px;
  margin:6px 0 0;
}

.cta-box p{
  margin:0;
  color:#c7d0de;
  font-size:12px;
}

.footer{
  background:#061428;
  color:#d4dce8;
  padding:58px 0 18px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:45px;
}

.footer-brand p{
  font-size:12px;
  color:#aeb9c9;
  max-width:340px;
}

.footer h4{
  margin:0 0 17px;
  color:#fff;
}

.footer-grid>div:not(.footer-brand){
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:12px;
}

.footer-grid a,
.footer-grid span{
  color:#b9c3d1;
}

.socials{
  display:flex;
  gap:9px;
  margin-top:16px;
}

.socials a{
  width:34px;
  height:34px;
  border:1px solid #31415b;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #24344e;
  margin-top:42px;
  padding-top:17px;
  font-size:10px;
  color:#7f8ca0;
}

.footer-bottom div{
  display:flex;
  gap:20px;
}

.back-top{
  position:fixed;
  left:18px;
  bottom:18px;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--gold);
  color:#13213b;
  font-weight:900;
  box-shadow:0 10px 30px rgba(229,170,59,.25);
  z-index:20;
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
}

.reveal.visible{
  opacity:1;
  transform:none;
}

@media(max-width:1050px){

  .nav{
    gap:15px;
  }

  .nav a{
    font-size:11px;
  }

  .hero-grid{
    gap:30px;
  }

  .hero h1{
    font-size:44px;
  }

  .metric-1,
  .metric-2,
  .metric-3{
    right:0;
  }

  .slider-btn{
    display:none;
  }

  .footer-grid{
    grid-template-columns:1.2fr repeat(3,1fr);
    gap:24px;
  }
}

@media(max-width:900px){

  .nav{
    position:absolute;
    top:76px;
    right:20px;
    left:20px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    background:#0a1c36;
    border:1px solid rgba(255,255,255,.1);
    padding:18px;
    border-radius:16px;
  }

  .nav.open{
    display:flex;
  }

  .nav a{
    padding:8px;
  }

  .nav a.active:after{
    display:none;
  }

  .menu-toggle{
    display:block;
  }

  .nav-actions .btn{
    display:none;
  }

  .hero{
    padding-top:55px;
  }

  .hero-grid,
  .challenge-grid,
  .lead-grid{
    grid-template-columns:1fr;
  }

  .hero-content{
    text-align:center;
  }

  .hero-content>p{
    margin-inline:auto;
  }

  .hero-actions,
  .hero-trust{
    justify-content:center;
  }

  .hero-visual{
    min-height:480px;
  }

  .steps-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .challenge-copy{
    padding-bottom:130px;
  }

  .challenge-copy .growth-graphic{
    left:50%;
    transform:translateX(-50%);
  }

  .testimonial-track{
    grid-template-columns:1fr;
  }

  .testimonial-card{
    display:none;
  }

  .testimonial-card.active{
    display:flex;
  }

  .testimonial-card.featured{
    transform:none;
  }

  .results-panel{
    grid-template-columns:1fr;
  }

  .result-kpis{
    grid-template-columns:repeat(3,1fr);
  }

  .result-kpis>div{
    display:block;
    text-align:center;
  }

  .kpi-icon{
    margin:0 auto 8px;
  }

  .table-window{
    overflow:auto;
  }

  .lead-copy{
    text-align:center;
  }

  .lead-copy p{
    margin-inline:auto;
  }

  .lead-copy ul{
    display:inline-block;
    text-align:right;
  }

  .target-art{
    margin-inline:auto;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:640px){

  .container{
    width:min(100% - 28px,1180px);
  }

  .site-header .brand-copy small{
    display:none;
  }

  .hero{
    min-height:auto;
    padding-bottom:105px;
  }

  .hero h1{
    font-size:34px;
  }

  .hero-content>p{
    font-size:14px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .hero-trust{
    gap:12px;
    flex-wrap:wrap;
  }

  .hero-visual{
    min-height:390px;
  }

  .laptop-card{
    inset:55px 0 45px 5px;
    transform:none;
  }

  .offer-badge{
    width:125px;
    left:0;
    padding:12px;
  }

  .offer-badge strong{
    font-size:34px;
  }

  .metric{
    width:118px;
    padding:10px;
  }

  .metric b{
    font-size:17px;
  }

  .metric-1{
    top:75px;
  }

  .metric-2{
    top:165px;
  }

  .metric-3{
    bottom:22px;
  }

  .dash-main{
    padding:14px;
  }

  .chart-area{
    height:170px;
  }

  .dash-stats{
    gap:5px;
  }

  .dash-stats div{
    padding:7px;
  }

  .section-heading h2,
  .challenge-copy h2,
  .lead-copy h2{
    font-size:28px;
  }

  .steps-grid{
    grid-template-columns:1fr;
  }

  .challenge-copy{
    text-align:center;
    padding-right:0;
  }

  .challenge-copy p{
    margin-inline:auto;
  }

  .testimonial-card{
    min-height:230px;
  }

  .work-tabs{
    justify-content:flex-start;
    overflow:auto;
    flex-wrap:nowrap;
    padding-bottom:6px;
  }

  .work-tabs button{
    flex:0 0 auto;
  }

  .result-kpis{
    grid-template-columns:1fr 1fr 1fr;
  }

  .result-kpis>div{
    padding:12px 8px;
  }

  .result-kpis b{
    font-size:19px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .form-grid label.full{
    grid-column:auto;
  }

  .form-steps{
    overflow:auto;
  }

  .form-steps button{
    min-width:110px;
  }

  .cta-box{
    flex-direction:column;
    text-align:center;
    gap:18px;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-bottom{
    flex-direction:column;
    gap:10px;
  }

  .footer-bottom div{
    gap:12px;
  }

  .back-top{
    width:38px;
    height:38px;
  }

  .dashboard{
    font-size:8px;
  }
}

:root{
  --navy:#061529;
  --navy-light:#0b2240;
  --gold:#e9ad42;
  --gold-light:#f5cd78;
  --white:#fff;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:"Cairo",sans-serif;
}

.container{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
}

/* HEADER */

.site-header{
  position:relative;
  z-index:100;
  height:82px;
  background:#061529;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff;
}

.navbar{
  height:82px;
  display:flex;
  align-items:center;
  gap:40px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-decoration:none;
}

.brand-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(231,172,67,.5);
  color:var(--gold);
  font-weight:900;
}

.brand-text strong{
  display:block;
  font-size:16px;
}

.brand-text small{
  display:block;
  font-size:7px;
  color:#8996aa;
  letter-spacing:1.5px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:31px;
  margin:auto;
}

.nav-links a{
  position:relative;
  padding:30px 0;
  color:#aeb7c4;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
}

.nav-links a:hover,
.nav-links a.active{
  color:#fff;
}

.nav-links a.active::after{
  content:"";
  position:absolute;
  right:50%;
  bottom:19px;
  width:22px;
  height:2px;
  transform:translateX(50%);
  background:var(--gold);
}

.nav-contact{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 12px 10px 18px;
  border:1px solid rgba(232,173,65,.65);
  border-radius:13px;
  color:#fff;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
}

.nav-contact i{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(231,173,67,.1);
  color:var(--gold);
  font-style:normal;
}

.menu-btn{
  display:none;
  border:0;
  background:transparent;
}

.menu-btn span{
  display:block;
  width:25px;
  height:2px;
  margin:5px 0;
  background:#fff;
}

/* HERO */

.hero{
  position:relative;
  overflow:hidden;
  padding-top:68px;
  color:#fff;
  background:
    radial-gradient(circle at 20% 35%,rgba(35,101,180,.32),transparent 32%),
    radial-gradient(circle at 75% 20%,rgba(83,60,154,.23),transparent 30%),
    linear-gradient(120deg,#06162d,#0a1f3c 52%,#07172e);
}

.hero-grid{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center;
  min-height:610px;
}

.hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(110px);
  opacity:.24;
}

.hero-glow-1{
  width:350px;
  height:350px;
  left:-100px;
  top:200px;
  background:#2876d0;
}

.hero-glow-2{
  width:300px;
  height:300px;
  right:20%;
  top:30px;
  background:#764bd4;
}

.hero-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.05);
}

.ring-one{
  width:650px;
  height:650px;
  left:-370px;
  top:-60px;
}

.ring-two{
  width:800px;
  height:800px;
  right:-600px;
  bottom:-500px;
  border-color:rgba(233,173,66,.08);
}

/* HERO CONTENT */

.hero-content{
  padding-bottom:50px;
}

.hero-badge{
  width:max-content;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 13px;
  border-radius:999px;
  color:#efc063;
  background:rgba(232,172,65,.08);
  border:1px solid rgba(232,172,65,.34);
  font-size:9px;
  font-weight:800;
}

.badge-icon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(232,172,65,.1);
}

.hero h1{
  margin:21px 0 18px;
  font-size:clamp(43px,4.2vw,65px);
  line-height:1.35;
  letter-spacing:-2px;
}

.hero h1 span{
  display:block;
  color:var(--gold-light);
}

.hero-description{
  max-width:610px;
  margin:0;
  color:#c0cad8;
  font-size:14px;
  line-height:2.1;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:30px;
}

.primary-btn{
  min-width:235px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:12px 13px 12px 20px;
  border-radius:15px;
  color:#12213a;
  background:linear-gradient(135deg,#f4cb74,#dfa132);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}

.primary-btn i{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#10233e;
  color:#fff;
  font-style:normal;
}

.secondary-btn{
  min-height:61px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 15px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:15px;
  color:#fff;
  background:rgba(255,255,255,.02);
  font-size:11px;
  font-weight:800;
  text-decoration:none;
}

.play{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(232,173,65,.45);
  color:var(--gold);
  font-style:normal;
  font-size:8px;
}

.hero-stats{
  width:max-content;
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:32px;
  padding:19px 22px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:rgba(255,255,255,.028);
}

.stat{
  display:flex;
  align-items:center;
  gap:10px;
}

.stat-icon{
  color:var(--gold);
}

.stat strong{
  display:block;
  font-size:20px;
}

.stat span{
  display:block;
  color:#8b9ab0;
  font-size:8px;
}

.stat-divider{
  width:1px;
  height:30px;
  background:rgba(255,255,255,.09);
}

/* VISUAL */

.hero-visual{
  position:relative;
  min-height:560px;
}

.neon-circle{
  position:absolute;
  width:470px;
  height:470px;
  left:50%;
  top:47%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:4px solid rgba(76,114,255,.6);
  box-shadow:
    0 0 30px #285eff,
    0 0 60px #7a34ff,
    inset 0 0 22px #e3a43d;
}

.neon-circle::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  border-top:4px solid #f5b845;
  transform:rotate(18deg);
}

.laptop{
  position:absolute;
  z-index:5;
  width:510px;
  height:360px;
  left:50%;
  top:49%;
  transform:
    translate(-50%,-50%)
    perspective(1200px)
    rotateY(5deg)
    rotateX(2deg);
}

.laptop-screen{
  position:absolute;
  top:0;
  width:100%;
  height:315px;
  overflow:hidden;
  border:5px solid #101927;
  border-radius:20px 20px 9px 9px;
  background:#07182e;
  box-shadow:0 35px 70px rgba(0,0,0,.48);
}

.laptop-base{
  position:absolute;
  width:110%;
  height:32px;
  left:-5%;
  bottom:6px;
  border-radius:4px 4px 40px 40px;
  background:linear-gradient(180deg,#9ca7b5,#2a3443);
  transform:perspective(300px) rotateX(48deg);
}

.dashboard-top{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  background:#0d213d;
}

.dashboard-logo{
  color:var(--gold);
  font-size:9px;
  font-weight:900;
}

.dashboard-period{
  padding:4px 7px;
  border-radius:7px;
  color:#8b99ad;
  background:#132b4d;
  font-size:6px;
}

.dashboard-body{
  display:flex;
  height:calc(100% - 34px);
}

.dashboard-sidebar{
  width:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  padding:14px 10px;
  background:#08182e;
}

.sidebar-logo{
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border:1px solid rgba(232,173,65,.4);
  border-radius:6px;
  color:var(--gold);
  font-size:8px;
}

.side{
  width:20px;
  height:5px;
  border-radius:10px;
  background:#17395e;
}

.side.active{
  background:var(--gold);
}

.dashboard-content{
  flex:1;
  padding:16px;
}

.dashboard-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.dashboard-heading small{
  display:block;
  color:#71839b;
  font-size:6px;
}

.dashboard-heading strong{
  color:#fff;
  font-size:19px;
}

.green-status{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border-radius:999px;
  color:#48d68d;
  background:rgba(55,210,137,.07);
  font-size:6px;
}

.green-status span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#46da91;
}

.chart{
  position:relative;
  height:145px;
  margin-top:10px;
  overflow:hidden;
  border-radius:12px;
  background:linear-gradient(180deg,#102744,#0a1d34);
}

.chart-lines{
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px);
  background-size:100% 36px;
}

.chart svg{
  width:100%;
  height:100%;
}

.chart-line{
  fill:none;
  stroke:#f0af3e;
  stroke-width:4;
}

.chart-fill{
  fill:url(#chartFill);
}

.dashboard-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:9px;
}

.dashboard-cards div{
  padding:8px;
  border-radius:8px;
  background:#102946;
}

.dashboard-cards small{
  display:block;
  color:#6e819a;
  font-size:5px;
}

.dashboard-cards strong{
  font-size:10px;
}

/* CARDS */

.metric-card{
  position:absolute;
  z-index:10;
  min-width:145px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(88,123,255,.46);
  border-radius:15px;
  background:rgba(9,24,46,.88);
  backdrop-filter:blur(14px);
  box-shadow:0 22px 45px rgba(0,0,0,.34);
}

.metric-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#efb345;
  background:rgba(239,179,69,.08);
}

.metric-icon.purple{
  color:#bd70ff;
  background:rgba(155,81,255,.1);
}

.metric-card small{
  display:block;
  color:#76879d;
  font-size:6px;
}

.metric-card strong{
  display:block;
  font-size:19px;
}

.metric-card span{
  color:#9eaabd;
  font-size:7px;
}

.metric-left{
  left:-10px;
  top:115px;
}

.metric-top{
  right:20px;
  top:65px;
}

.metric-right{
  right:-10px;
  top:260px;
}

.discount-card{
  position:absolute;
  z-index:11;
  left:20px;
  bottom:15px;
  width:225px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,207,111,.5);
  border-radius:18px;
  transform:rotate(-4deg);
  background:linear-gradient(135deg,rgba(211,142,26,.85),rgba(116,69,18,.9));
}

.discount-card strong{
  display:block;
  font-size:19px;
}

.discount-card span{
  display:block;
  color:#f8d99a;
  font-size:8px;
}

.discount-arrow{
  margin-right:auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#17243c;
  background:#f4c560;
}

/* SERVICE STRIP */

.services-strip{
  position:relative;
  z-index:20;
  min-height:78px;
  display:flex;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:0;
  margin:0;
  background:rgba(4,15,31,.96);
}

.services-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.service-item{
  display:flex;
  align-items:center;
  gap:12px;
  color:#d2d9e3;
  font-size:10px;
  font-weight:700;
}

.service-icon{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.04);
}

.service-separator{
  width:1px;
  height:38px;
  background:rgba(255,255,255,.09);
}

@media(max-width:900px){

  .nav-links{
    display:none;
  }

  .menu-btn{
    display:block;
  }

  .nav-contact{
    margin-right:auto;
  }

  .hero-grid{
    grid-template-columns:1fr;
  }

  .hero-content{
    text-align:center;
  }

  .hero-badge,
  .hero-description,
  .hero-stats{
    margin-inline:auto;
  }

  .hero-actions{
    justify-content:center;
  }

}

@media(max-width:600px){

  .container{
    width:calc(100% - 28px);
  }

  .nav-contact{
    display:none;
  }

  .hero h1{
    font-size:35px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .primary-btn,
  .secondary-btn{
    width:100%;
  }

  .secondary-btn{
    justify-content:center;
  }

  .hero-visual{
    min-height:445px;
  }

  .neon-circle{
    width:320px;
    height:320px;
  }

  .laptop{
    width:345px;
    height:280px;
  }

  .laptop-screen{
    height:245px;
  }

  .dashboard-sidebar{
    display:none;
  }

  .metric-card{
    min-width:108px;
    padding:7px;
  }

  .metric-card strong{
    font-size:14px;
  }

  .discount-card{
    width:175px;
    left:0;
  }

  .services-row{
    overflow-x:auto;
    justify-content:flex-start;
  }

  .service-item{
    flex:none;
  }

}
.hero-grid{
  grid-template-columns:1fr 1fr;
  gap:50px;
}

.hero-content{
  max-width:560px;
}

.hero-visual{
  min-height:520px;
}

.laptop{
  width:460px;
}

.metric-right{
  display:none;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 1.25fr;
  gap:36px;
  align-items:center;
}

.hero-content{
  max-width:680px;
}

.hero h1{
  max-width:680px;
  font-size:56px;
  line-height:1.18;
  letter-spacing:-1.5px;
}

.hero h1 span{
  display:inline;
}

.hero-description{
  max-width:640px;
  font-size:14px;
  line-height:1.9;
}

.hero-actions{
  margin-top:24px;
}

.hero-stats{
  margin-top:22px;
}

.hero-visual{
  min-height:500px;
}

.hero h1{
  font-size:54px;
  line-height:1.2;
}

.hero h1 span{
  display:block;
  white-space:nowrap;
}

.hero-content{
  max-width:620px;
}

.hero-badge{
  padding:6px 12px;
  font-size:9px;
  margin-bottom:18px;
}

.hero h1{
  margin:0 0 20px;
  font-size:54px;
  line-height:1.22;
  letter-spacing:-1.4px;
}

.hero h1 span{
  display:block;
  color:var(--gold-light);
}

.hero-description{
  max-width:560px;
  margin:0;
  color:#b9c5d6;
  font-size:14px;
  line-height:1.9;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:28px;
}

.primary-btn{
  min-width:240px;
}

.simple-work-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#fff;
  font-size:11px;
  font-weight:800;
  opacity:.88;
  transition:.25s;
}

.simple-work-link:hover{
  opacity:1;
}

.play-small{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(232,173,65,.45);
  color:var(--gold);
  font-size:8px;
}

/* تقليل المسافة بين الـ Navbar ومحتوى الـ Hero فقط */
.hero{
  padding-top: 10px !important;
}

.hero-grid{
  min-height: 640px !important;
  transform: translateY(-20px);
}

/* ==========================================
   PREMIUM NAVBAR - TAMYUZ
========================================== */

.premium-navbar{
  position:relative;
  z-index:1000;

  width:100%;
  height:76px;

  background:
    rgba(5,18,37,.94);

  border-bottom:
    1px solid rgba(255,255,255,.07);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}


.premium-navbar .navbar{
  height:76px;

  display:flex;
  align-items:center;

  gap:38px;
}


/* ==========================
   LOGO
========================== */

.original-brand{
  display:flex;
  align-items:center;

  gap:11px;

  flex-shrink:0;

  text-decoration:none;
}


.original-logo{
  width:auto;

  height:50px;

  object-fit:contain;

  display:block;

  filter:
    drop-shadow(
      0 6px 12px
      rgba(224,164,45,.12)
    );
}


.original-brand .brand-text{
  display:flex;

  flex-direction:column;

  justify-content:center;

  line-height:1.1;
}


.original-brand .brand-text strong{
  color:#fff;

  font-size:15px;

  font-weight:800;
}


.original-brand .brand-text small{
  margin-top:5px;

  color:#74849b;

  font-size:6px;

  letter-spacing:1.5px;
}


/* ==========================
   MENU
========================== */

.premium-navbar .nav-links{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:30px;

  margin-inline:auto;
}


.premium-navbar .nav-links a{
  position:relative;

  display:flex;

  align-items:center;

  height:76px;

  padding:0 2px;

  color:#9eacbe;

  font-size:11px;

  font-weight:700;

  text-decoration:none;

  transition:
    color .25s ease;
}


.premium-navbar .nav-links a:hover{
  color:#fff;
}


.premium-navbar .nav-links a.active{
  color:#fff;
}


.premium-navbar .nav-links a.active::after{
  content:"";

  position:absolute;

  right:50%;

  bottom:17px;

  width:18px;
  height:2px;

  transform:
    translateX(50%);

  border-radius:10px;

  background:
    linear-gradient(
      90deg,
      #d89b2c,
      #f2c264
    );

  box-shadow:
    0 0 12px
    rgba(232,173,66,.35);
}


/* ==========================
   CTA
========================== */

.nav-cta{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:14px;

  min-width:157px;

  height:44px;

  padding:
    0 9px
    0 15px;

  flex-shrink:0;

  border-radius:13px;

  color:#13213a;

  text-decoration:none;

  font-size:10px;

  font-weight:900;

  background:
    linear-gradient(
      135deg,
      #f4cb74,
      #dfa02f
    );

  box-shadow:
    0 10px 25px
    rgba(221,157,43,.15);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.nav-cta:hover{
  transform:
    translateY(-2px);

  box-shadow:
    0 14px 30px
    rgba(221,157,43,.22);
}


.nav-cta i{
  display:grid;

  place-items:center;

  width:30px;
  height:30px;

  border-radius:9px;

  background:#10233e;

  color:#fff;

  font-size:14px;

  font-style:normal;
}


/* ==========================
   MOBILE BUTTON
========================== */

.premium-navbar .menu-btn{
  display:none;

  width:42px;
  height:42px;

  padding:8px;

  border:0;

  border-radius:11px;

  background:
    rgba(255,255,255,.05);
}


.premium-navbar .menu-btn span{
  display:block;

  width:23px;
  height:2px;

  margin:5px auto;

  border-radius:10px;

  background:#fff;
}


/* ==========================
   RESPONSIVE
========================== */

@media(max-width:950px){

  .premium-navbar .nav-links{
    position:absolute;

    top:76px;

    right:20px;
    left:20px;

    display:none;

    flex-direction:column;

    align-items:stretch;

    gap:2px;

    padding:15px;

    border-radius:16px;

    background:
      rgba(5,18,37,.98);

    border:
      1px solid
      rgba(255,255,255,.08);

    box-shadow:
      0 25px 50px
      rgba(0,0,0,.3);
  }


  .premium-navbar .nav-links.open{
    display:flex;
  }


  .premium-navbar .nav-links a{
    height:auto;

    padding:11px 12px;

    border-radius:8px;
  }


  .premium-navbar .nav-links a:hover{
    background:
      rgba(255,255,255,.04);
  }


  .premium-navbar .nav-links a.active::after{
    display:none;
  }


  .premium-navbar .menu-btn{
    display:block;
  }


  .nav-cta{
    margin-inline-start:auto;
  }

}


@media(max-width:600px){

  .premium-navbar,
  .premium-navbar .navbar{
    height:68px;
  }


  .original-logo{
    height:42px;
  }


  .original-brand .brand-text strong{
    font-size:13px;
  }


  .original-brand .brand-text small{
    display:none;
  }


  .nav-cta{
    display:none;
  }


  .premium-navbar .menu-btn{
    margin-inline-start:auto;
  }


  .premium-navbar .nav-links{
    top:68px;
  }

}

/* ==============================
   HERO BUTTONS REDESIGN
============================== */

.hero-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:28px;
}

/* base */
.hero-btn{
  min-height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  padding:0 20px;

  border-radius:16px;

  font-size:13px;
  font-weight:900;

  text-decoration:none;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease;
}


/* primary gold */
.hero-btn-primary{
  min-width:220px;

  color:#12213a;

  background:
    linear-gradient(
      135deg,
      #f6d27d 0%,
      #e8ab3c 100%
    );

  box-shadow:
    0 14px 32px rgba(232,171,60,.20);
}

.hero-btn-primary:hover{
  transform:translateY(-3px);

  box-shadow:
    0 18px 38px rgba(232,171,60,.28);
}


/* primary icon */
.hero-btn-icon{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:#10233e;

  color:#fff;

  font-size:15px;

  transition:transform .25s ease;
}

.hero-btn-primary:hover .hero-btn-icon{
  transform:translate(-2px,-2px);
}


/* secondary */
.hero-btn-secondary{
  min-width:145px;

  color:#fff;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid rgba(232,173,65,.35);

  backdrop-filter:blur(10px);
}

.hero-btn-secondary:hover{
  transform:translateY(-3px);

  background:
    rgba(255,255,255,.07);

  border-color:
    rgba(232,173,65,.6);
}


/* arrow circle */
.hero-btn-arrow{
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(232,173,65,.09);

  color:#efb54a;

  border:
    1px solid rgba(232,173,65,.25);

  font-size:14px;

  transition:transform .25s ease;
}

.hero-btn-secondary:hover .hero-btn-arrow{
  transform:translateY(3px);
}


/* mobile */
@media(max-width:600px){

  .hero-actions{
    flex-direction:column;
    gap:10px;
  }

  .hero-btn{
    width:100%;
  }

}

/* ==============================
   HERO BUTTONS - FINAL REDESIGN
============================== */

.hero-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:28px;
}

.hero-btn{
  height:56px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:12px;

  padding:0 14px 0 18px;

  border-radius:15px;

  font-size:13px;
  font-weight:900;

  text-decoration:none;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.hero-btn-text{
  line-height:1;
}


/* ==============================
   PRIMARY
============================== */

.hero-btn-primary{
  min-width:220px;

  color:#10213a;

  background:
    linear-gradient(
      135deg,
      #f7d37e 0%,
      #e7a83a 100%
    );

  box-shadow:
    0 12px 28px rgba(231,168,58,.18);
}

.hero-btn-primary:hover{
  transform:translateY(-2px);

  box-shadow:
    0 17px 34px rgba(231,168,58,.27);
}

.primary-icon{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:#10233e;

  color:#fff;

  font-size:15px;
  font-weight:700;

  transform:rotate(0deg);

  transition:transform .25s ease;
}

.hero-btn-primary:hover .primary-icon{
  transform:translate(2px,-2px);
}


/* ==============================
   SECONDARY
============================== */

.hero-btn-secondary{
  min-width:145px;

  color:#fff;

  background:rgba(255,255,255,.025);

  border:1px solid rgba(232,173,65,.28);

  backdrop-filter:blur(8px);

  padding:0 16px;
}

.hero-btn-secondary:hover{
  transform:translateY(-2px);

  background:rgba(255,255,255,.055);

  border-color:rgba(232,173,65,.5);
}

.secondary-icon{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#eab248;

  background:rgba(234,178,72,.07);

  border:1px solid rgba(234,178,72,.22);

  font-size:14px;

  transition:transform .25s ease;
}

.hero-btn-secondary:hover .secondary-icon{
  transform:translateY(3px);
}


/* ==============================
   MOBILE
============================== */

@media(max-width:600px){

  .hero-actions{
    flex-direction:column;
    gap:10px;
  }

  .hero-btn{
    width:100%;
  }

}

/* =========================================
   FORCE HERO BUTTONS REDESIGN
   حطي الكود ده في آخر ملف CSS بالكامل
========================================= */

.hero-actions{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin-top:28px !important;
}


/* إلغاء أي ستايل قديم */
.hero-actions .hero-btn{
  all:unset;
  box-sizing:border-box !important;

  height:58px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:13px !important;

  cursor:pointer !important;

  font-family:"Cairo",sans-serif !important;
  font-size:13px !important;
  font-weight:800 !important;

  text-decoration:none !important;

  transition:.25s ease !important;
}


/* ==============================
   احصل على عرض سعر
============================== */

.hero-actions .hero-btn-primary{
  min-width:230px !important;

  padding:
    0 12px
    0 20px !important;

  border-radius:18px !important;

  color:#081b33 !important;

  background:
    linear-gradient(
      135deg,
      #f7d47e 0%,
      #e9aa38 100%
    ) !important;

  box-shadow:
    0 14px 30px
    rgba(232,170,57,.22) !important;
}


/* الأيقونة */
.hero-actions .hero-btn-primary .primary-icon{
  width:38px !important;
  height:38px !important;

  flex:none !important;

  display:grid !important;
  place-items:center !important;

  border-radius:12px !important;

  background:#071c37 !important;

  color:#ffffff !important;

  font-size:17px !important;
  font-weight:400 !important;

  border:1px solid rgba(255,255,255,.06) !important;

  transform:none !important;
}


/* ترتيب زر عرض السعر RTL */
.hero-actions .hero-btn-primary{
  flex-direction:row !important;
}


/* ==============================
   ابدأ الآن
============================== */

.hero-actions .hero-btn-secondary{
  min-width:150px !important;

  padding:
    0 17px !important;

  border-radius:18px !important;

  color:#ffffff !important;

  background:
    rgba(255,255,255,.025) !important;

  border:
    1px solid
    rgba(231,172,61,.40) !important;

  box-shadow:none !important;

  backdrop-filter:
    blur(10px) !important;
}


/* أيقونة ابدأ الآن */
.hero-actions .hero-btn-secondary .secondary-icon{
  width:36px !important;
  height:36px !important;

  flex:none !important;

  display:grid !important;
  place-items:center !important;

  border-radius:11px !important;

  background:
    rgba(231,172,61,.10) !important;

  border:
    1px solid
    rgba(231,172,61,.25) !important;

  color:#f0b54c !important;

  font-size:16px !important;

  transform:none !important;
}


/* نخلي سهم ابدأ الآن ناحية اليسار */
.hero-actions .hero-btn-secondary{
  flex-direction:row-reverse !important;
}


/* text */
.hero-actions .hero-btn-text{
  display:block !important;

  white-space:nowrap !important;

  line-height:1 !important;
}


/* hover */
.hero-actions .hero-btn-primary:hover{
  transform:
    translateY(-3px) !important;

  box-shadow:
    0 18px 38px
    rgba(232,170,57,.30) !important;
}


.hero-actions .hero-btn-secondary:hover{
  transform:
    translateY(-3px) !important;

  background:
    rgba(255,255,255,.06) !important;

  border-color:
    rgba(231,172,61,.65) !important;
}


/* موبايل */
@media(max-width:600px){

  .hero-actions{
    flex-direction:column !important;
    width:100% !important;
  }

  .hero-actions .hero-btn{
    width:100% !important;
  }

}

/* =====================================
   PROCESS SECTION - LIGHT CREATIVE
===================================== */

.process-section{
  position:relative;
  overflow:hidden;
  padding:105px 0 110px;

  background:
    radial-gradient(
      circle at 8% 20%,
      rgba(232,173,66,.09),
      transparent 25%
    ),
    radial-gradient(
      circle at 92% 80%,
      rgba(38,79,130,.07),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfe 100%
    );
}


.process-section .container{
  position:relative;
  z-index:2;
}


/* DECORATIONS */

.process-decoration{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.process-decoration-one{
  width:280px;
  height:280px;
  right:-170px;
  top:50px;

  border:
    1px solid
    rgba(232,173,66,.12);
}

.process-decoration-two{
  width:420px;
  height:420px;
  left:-260px;
  bottom:-220px;

  border:
    1px solid
    rgba(10,40,76,.08);
}


/* HEADER */

.process-heading{
  max-width:720px;
  margin:0 auto 65px;
  text-align:center;
}


.process-badge{
  width:max-content;
  margin:0 auto 14px;

  display:flex;
  align-items:center;
  gap:7px;

  padding:7px 12px;

  border-radius:999px;

  color:#a16d0e;

  background:#fff6e4;

  border:
    1px solid #f0ddb4;

  font-size:10px;
  font-weight:800;
}


.process-badge span{
  color:#e4a62f;
}


.process-heading h2{
  margin:0;

  color:#10213d;

  font-size:42px;
  line-height:1.35;

  letter-spacing:-1px;
}


.process-heading h2 span{
  color:#d99a27;
}


.process-heading p{
  max-width:610px;

  margin:12px auto 0;

  color:#6d7a8e;

  font-size:13px;
  line-height:1.9;
}


/* WRAPPER */

.process-wrapper{
  position:relative;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:20px;
}


/* connector */

.process-line{
  position:absolute;

  top:43px;
  right:8%;
  left:8%;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(226,169,57,.32),
      rgba(23,55,93,.14),
      rgba(226,169,57,.32),
      transparent
    );

  z-index:0;
}


/* CARD */

.process-card{
  position:relative;
  z-index:1;

  min-height:295px;

  padding:
    32px 27px
    27px;

  border-radius:24px;

  background:
    rgba(255,255,255,.92);

  border:
    1px solid #e9edf2;

  box-shadow:
    0 18px 45px
    rgba(18,39,70,.065);

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}


.process-card:nth-of-type(even){
  margin-top:24px;
}


.process-card:hover{
  transform:
    translateY(-8px);

  border-color:
    rgba(225,166,54,.4);

  box-shadow:
    0 24px 55px
    rgba(16,36,66,.11);
}


/* NUMBER */

.process-number{
  position:absolute;

  left:22px;
  top:18px;

  color:#dfe4ea;

  font-size:34px;
  line-height:1;

  font-weight:900;

  letter-spacing:-2px;
}


/* ICON */

.process-icon{
  position:relative;

  width:66px;
  height:66px;

  display:grid;
  place-items:center;

  margin-bottom:24px;

  border-radius:20px;

  color:#c7891c;

  background:
    linear-gradient(
      145deg,
      #fff7e6,
      #fff
    );

  border:
    1px solid #f2deb5;

  box-shadow:
    0 10px 25px
    rgba(212,154,42,.1);
}


.process-icon::after{
  content:"";

  position:absolute;

  width:10px;
  height:10px;

  top:-6px;
  right:-6px;

  border-radius:50%;

  background:#e9ac3d;

  box-shadow:
    0 0 0 5px
    #fff7e6;
}


.process-icon svg{
  width:29px;
  height:29px;
}


/* CONTENT */

.process-card h3{
  margin:0 0 10px;

  color:#10223f;

  font-size:20px;
  font-weight:800;
}


.process-card p{
  margin:0;

  color:#6c798b;

  font-size:12px;
  line-height:1.95;
}


/* bottom accent */

.process-card::after{
  content:"";

  position:absolute;

  right:25px;
  bottom:0;

  width:45px;
  height:3px;

  border-radius:999px 999px 0 0;

  background:
    linear-gradient(
      90deg,
      #e5a532,
      #f0c46a
    );

  opacity:0;

  transition:.28s;
}


.process-card:hover::after{
  opacity:1;
}


/* =====================================
   RESPONSIVE
===================================== */

@media(max-width:950px){

  .process-wrapper{
    grid-template-columns:
      repeat(2,1fr);
  }

  .process-line{
    display:none;
  }

  .process-card:nth-of-type(even){
    margin-top:0;
  }

}


@media(max-width:600px){

  .process-section{
    padding:
      75px 0;
  }

  .process-heading{
    margin-bottom:38px;
  }

  .process-heading h2{
    font-size:30px;
  }

  .process-heading p{
    font-size:12px;
  }

  .process-wrapper{
    grid-template-columns:1fr;
  }

  .process-card{
    min-height:auto;

    padding:25px;
  }

  .process-number{
    font-size:27px;
  }

}
/* =========================================
   WHY US SECTION
========================================= */

.why-section{
  padding:90px 0 105px;
  background:#fff;
}

.why-section .container{
  width:min(1180px, calc(100% - 40px));
  margin:auto;
}


/* HEADING */

.why-heading{
  max-width:760px;
  margin:0 auto 48px;
  text-align:center;
}

.why-badge{
  width:max-content;
  margin:0 auto 14px;

  display:flex;
  align-items:center;
  gap:7px;

  padding:7px 13px;

  border-radius:999px;

  background:#fff8e9;
  border:1px solid #efd69f;

  color:#9b6810;

  font-size:10px;
  font-weight:800;
}

.why-badge span{
  color:#e2a32d;
}

.why-heading h2{
  margin:0;

  color:#10223e;

  font-size:40px;
  line-height:1.35;

  font-weight:900;
  letter-spacing:-1px;
}

.why-heading h2 span{
  color:#dc9b24;
}

.why-heading p{
  max-width:600px;

  margin:10px auto 0;

  color:#718097;

  font-size:13px;
  line-height:1.9;
}


/* GRID */

.why-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:18px;
}


/* CARD */

.why-card{
  position:relative;

  overflow:hidden;

  min-height:375px;

  background:#fff;

  border:
    1px solid #e4e9ef;

  border-radius:22px;

  box-shadow:
    0 14px 35px
    rgba(14,40,73,.06);

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.why-card:hover{
  transform:
    translateY(-7px);

  border-color:
    rgba(221,160,42,.35);

  box-shadow:
    0 22px 45px
    rgba(13,37,68,.11);
}


/* IMAGE */

.why-image{
  position:relative;

  height:170px;

  margin:
    14px
    14px
    0;

  overflow:hidden;

  border-radius:16px;
}

.why-image img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:
    transform .45s ease;
}

.why-card:hover .why-image img{
  transform:
    scale(1.045);
}


/* subtle image overlay */

.why-image::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 60%,
      rgba(7,24,47,.08)
    );

  pointer-events:none;
}


/* ICON */

.why-icon{
  position:relative;

  z-index:3;

  width:64px;
  height:64px;

  margin:
    -32px auto
    8px;

  display:grid;
  place-items:center;

  border-radius:19px;

  color:#d4931e;

  background:
    linear-gradient(
      145deg,
      #fff9ed,
      #ffffff
    );

  border:
    1px solid #efd298;

  box-shadow:
    0 10px 24px
    rgba(191,133,28,.11);
}

.why-icon svg{
  width:28px;
  height:28px;
}


/* CONTENT */

.why-content{
  padding:
    0 22px
    25px;

  text-align:center;
}

.why-content h3{
  margin:
    5px 0
    8px;

  color:#0f2442;

  font-size:21px;
  font-weight:900;
}

.why-content p{
  margin:0;

  color:#6e7c91;

  font-size:12px;
  line-height:1.9;
}


/* subtle gold detail */

.why-content::after{
  content:"";

  display:block;

  width:30px;
  height:2px;

  margin:
    16px auto
    0;

  border-radius:10px;

  background:
    linear-gradient(
      90deg,
      #f1c461,
      #d8961b
    );
}


/* =========================================
   TABLET
========================================= */

@media(max-width:950px){

  .why-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:600px){

  .why-section{
    padding:
      70px 0;
  }

  .why-heading{
    margin-bottom:32px;
  }

  .why-heading h2{
    font-size:29px;
  }

  .why-heading p{
    font-size:12px;
  }

  .why-grid{
    grid-template-columns:1fr;
  }

  .why-card{
    min-height:auto;
  }

  .why-image{
    height:190px;
  }

}

/* ============================
   GROWTH SECTION
============================ */

.growth-section{
  padding: 95px 0;
  background:
    linear-gradient(180deg, #f7f8fb 0%, #f3f5f8 100%);
}

.growth-section .container{
  width: min(1180px, calc(100% - 40px));
  margin: auto;
}

.growth-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}


/* ============================
   RIGHT DARK CONTENT
============================ */

.growth-content{
  position: relative;
  overflow: hidden;
  padding: 42px 38px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, #071a34 0%, #0a2243 55%, #0d2b56 100%);
  color: #fff;
  box-shadow: 0 22px 55px rgba(7, 24, 46, .18);
}

.growth-content::before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  left:-70px;
  bottom:-90px;
  border-radius:50%;
  background: rgba(232,173,66,.08);
  filter: blur(8px);
}

.growth-content::after{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  top:-70px;
  right:-60px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
}

.growth-badge{
  width:max-content;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  margin-bottom:20px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(232,173,66,.28);
  color:#f0c36b;
  font-size:11px;
  font-weight:800;
}

.growth-badge span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#e7ad42;
  box-shadow:0 0 0 5px rgba(231,173,66,.12);
}

.growth-content h2{
  margin:0 0 18px;
  color:#fff;
  font-size: clamp(32px, 3vw, 52px);
  line-height:1.35;
  letter-spacing:-1px;
  font-weight:900;
}

.growth-content h2 span{
  display:block;
  color:#efb44a;
}

.growth-content p{
  margin:0;
  max-width:530px;
  color:#c7d2e0;
  font-size:14px;
  line-height:2;
}

.growth-mini-stats{
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin:28px 0 26px;
  height:110px;
}

.mini-bar{
  width:28px;
  border-radius:16px 16px 6px 6px;
  background:
    linear-gradient(180deg, #efb54a 0%, #3b6398 100%);
  box-shadow: 0 10px 18px rgba(14, 37, 68, .12);
}

.bar-1{ height:100px; }
.bar-2{ height:82px; }
.bar-3{ height:60px; }
.bar-4{ height:38px; }

.growth-btn{
  width:max-content;
  min-width:210px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:16px 18px 16px 22px;
  border-radius:16px;
  background:
    linear-gradient(135deg, #f3cb73 0%, #dfa033 100%);
  color:#10213c;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
  box-shadow: 0 14px 28px rgba(224,160,48,.22);
  transition:.25s ease;
}

.growth-btn:hover{
  transform: translateY(-3px);
}

.growth-btn i{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#0d2341;
  color:#fff;
  font-style:normal;
  font-size:18px;
}


/* ============================
   LEFT LIGHT CARD
============================ */

.growth-card{
  padding: 34px 28px;
  border-radius: 28px;
  background: rgba(255,255,255,.88);
  border:1px solid #e4e9f0;
  box-shadow: 0 18px 45px rgba(15, 35, 64, .08);
}

.growth-card-head{
  margin-bottom:22px;
}

.growth-card-head h3{
  margin:0 0 10px;
  color:#10233f;
  font-size:32px;
  line-height:1.4;
  font-weight:900;
}

.growth-card-head p{
  margin:0;
  color:#75849b;
  font-size:14px;
  line-height:1.9;
}


/* ============================
   ACCORDION
============================ */

.growth-accordion{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.growth-item{
  border-radius:18px;
  background:#f5f7fa;
  border:1px solid #e7ebf0;
  overflow:hidden;
  transition:.25s ease;
}

.growth-item.active{
  background:#ffffff;
  border-color:#ecd299;
  box-shadow:0 10px 22px rgba(18, 35, 63, .05);
}

.growth-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:20px 22px;
  border:0;
  background:transparent;
  cursor:pointer;
  color:#10233f;
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  text-align:right;
}

.growth-question b{
  width:28px;
  height:28px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff8e9;
  color:#d89a25;
  font-size:20px;
  line-height:1;
  transition:.25s ease;
}

.growth-item.active .growth-question b{
  transform:rotate(45deg);
  background:#f1b84f;
  color:#fff;
}

.growth-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}

.growth-item.active .growth-answer{
  max-height:160px;
}

.growth-answer p{
  margin:0;
  padding:0 22px 20px;
  color:#6d7b8f;
  font-size:13px;
  line-height:1.9;
}


/* ============================
   RESPONSIVE
============================ */

@media (max-width: 992px){
  .growth-grid{
    grid-template-columns:1fr;
  }

  .growth-content,
  .growth-card{
    padding:30px 22px;
  }

  .growth-card-head h3{
    font-size:27px;
  }
}

@media (max-width: 600px){
  .growth-section{
    padding:70px 0;
  }

  .growth-section .container{
    width: calc(100% - 28px);
  }

  .growth-content h2{
    font-size:30px;
  }

  .growth-card-head h3{
    font-size:24px;
  }

  .growth-question{
    padding:16px 16px;
    font-size:14px;
  }

  .growth-answer p{
    padding:0 16px 16px;
    font-size:12px;
  }
}

/* =========================================
   RESULTS SHOWCASE SECTION
========================================= */

.results-showcase{
  padding: 95px 0 110px;
  background:
    linear-gradient(180deg, #fbfcfe 0%, #f5f7fb 100%);
}

.results-showcase .container{
  width: min(1180px, calc(100% - 40px));
  margin: auto;
}


/* HEADING */

.results-heading{
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: center;
}

.results-badge{
  width: max-content;
  margin: 0 auto 14px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px 14px;
  border-radius: 999px;

  background: #fff8e9;
  border: 1px solid #efd7a4;

  color: #9e6e14;
  font-size: 11px;
  font-weight: 800;
}

.results-badge span{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e3a433;
}

.results-heading h2{
  margin: 0;
  color: #10233f;
  font-size: 46px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -1px;
}

.results-heading p{
  margin: 10px 0 0;
  color: #7b889c;
  font-size: 15px;
  line-height: 1.9;
}


/* TABS */

.results-tabs{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;

  margin-bottom: 28px;
}

.result-tab{
  border: 0;
  cursor: pointer;
  font-family: inherit;

  padding: 14px 22px;
  border-radius: 16px;

  background: #edf1f6;
  color: #43556f;

  font-size: 14px;
  font-weight: 800;

  transition: .25s ease;
}

.result-tab:hover{
  background: #e5ebf2;
}

.result-tab.active{
  background: linear-gradient(135deg, #f4cc74 0%, #e2a63a 100%);
  color: #10223e;
  box-shadow: 0 10px 25px rgba(226,166,58,.18);
}


/* LAYOUT */

.results-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 290px;
  gap: 20px;
  align-items: stretch;
}


/* PREVIEW CARD */

.results-preview-card{
  background: #ffffff;
  border: 1px solid #e4e9ef;
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(14, 34, 63, .07);
}

.preview-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 4px 2px 14px;
}

.preview-dots{
  display: flex;
  align-items: center;
  gap: 6px;
}

.preview-dots span{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cfd7e2;
}

.preview-label{
  color: #7d8a9e;
  font-size: 13px;
  font-weight: 700;
}

.preview-image-wrap{
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #e7ebf1;
  background: #f5f7fa;
}

.preview-image-wrap img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  min-height: 420px;
}


/* STATS GRID */

.results-stats-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.result-stat-card{
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 22px 18px;
  min-height: 92px;

  border-radius: 22px;
  background: #f2f5f9;
  border: 1px solid #e7ebf0;
  box-shadow: 0 10px 25px rgba(18, 39, 70, .04);
}

.stat-icon{
  width: 52px;
  height: 52px;
  flex: none;

  display: grid;
  place-items: center;

  border-radius: 16px;
  background: #fff3d8;
  color: #d99922;

  font-size: 20px;
  font-weight: 900;
}

.stat-info strong{
  display: block;
  margin-bottom: 5px;

  color: #10233f;
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
}

.stat-info span{
  display: block;
  color: #7a879a;
  font-size: 13px;
  line-height: 1.7;
}


/* RESPONSIVE */

@media(max-width: 992px){

  .results-layout{
    grid-template-columns: 1fr;
  }

  .results-stats-grid{
    grid-template-columns: repeat(2, 1fr);
  }

}

@media(max-width: 600px){

  .results-showcase{
    padding: 70px 0 80px;
  }

  .results-showcase .container{
    width: calc(100% - 28px);
  }

  .results-heading h2{
    font-size: 31px;
  }

  .results-heading p{
    font-size: 13px;
  }

  .result-tab{
    width: 100%;
  }

  .preview-image-wrap img{
    min-height: 220px;
  }

  .results-stats-grid{
    grid-template-columns: 1fr;
  }

  .stat-info strong{
    font-size: 26px;
  }

}

/* =========================================
   FIX RESULTS SECTION SIZE BETWEEN TABS
========================================= */

.results-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) 290px;
  gap:20px;
  align-items:stretch;

  /* مهم: يمنع تغير طول السكشن */
  min-height:625px;
}


/* الكارت الرئيسي ثابت */
.results-preview-card{
  height:625px;
  display:flex;
  flex-direction:column;

  background:#fff;
  border:1px solid #e4e9ef;
  border-radius:26px;
  padding:18px;

  box-shadow:0 18px 40px rgba(14,34,63,.07);

  overflow:hidden;
}


/* الهيدر فوق الصورة ثابت */
.preview-topbar{
  flex:0 0 42px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;
  padding:4px 2px 14px;
}


/* أهم جزء */
.preview-image-wrap{
  flex:1;

  width:100%;
  height:545px;
  min-height:545px;
  max-height:545px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  border-radius:18px;
  border:1px solid #e7ebf1;

  background:#f7f8fa;

  padding:12px;
}


/* كل الصور تفضل في نفس الـ frame */
.preview-image-wrap img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;
  object-position:center;

  border-radius:12px;

  transition:
    opacity .25s ease,
    transform .25s ease;
}


/* الخانات الجانبية */
.results-stats-grid{
  height:625px;

  display:grid;
  grid-template-rows:repeat(4, 1fr);

  gap:16px;
}


/* كل خانة نفس الحجم */
.result-stat-card{
  min-height:0;
  height:100%;

  display:flex;
  align-items:center;

  gap:14px;

  padding:18px;

  border-radius:22px;

  background:#f2f5f9;
  border:1px solid #e7ebf0;

  box-shadow:0 10px 25px rgba(18,39,70,.04);
}


/* يمنع الأرقام الطويلة من تغيير شكل الكارت */
.stat-info{
  min-width:0;
}

.stat-info strong{
  display:block;

  white-space:nowrap;

  font-size:30px;
  line-height:1.1;
}

.stat-info span{
  display:block;

  min-height:22px;

  font-size:12px;
  line-height:1.5;
}


/* =========================================
   TABLET
========================================= */

@media(max-width:992px){

  .results-layout{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .results-preview-card{
    height:570px;
  }

  .preview-image-wrap{
    height:490px;
    min-height:490px;
    max-height:490px;
  }

  .results-stats-grid{
    height:auto;

    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(2,130px);
  }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:600px){

  .results-preview-card{
    height:380px;
  }

  .preview-image-wrap{
    height:300px;
    min-height:300px;
    max-height:300px;

    padding:6px;
  }

  .results-stats-grid{
    grid-template-columns:1fr;
    grid-template-rows:repeat(4,105px);
  }

}

/* =========================================
   CONSULTATION SECTION
========================================= */

.consult-section{
  padding:90px 0;
  background:
    linear-gradient(
      180deg,
      #081a34 0%,
      #07172e 100%
    );
}

.consult-section .container{
  width:min(1180px, calc(100% - 40px));
  margin:auto;
}

.consult-grid{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:34px;
  align-items:start;
}


/* RIGHT INTRO */

.consult-intro{
  position:sticky;
  top:110px;

  padding:36px 30px;

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.015)
    );

  border:1px solid rgba(232,173,66,.18);
}

.consult-badge{
  width:max-content;

  display:flex;
  align-items:center;
  gap:8px;

  padding:7px 12px;
  margin-bottom:17px;

  border-radius:999px;

  background:rgba(232,173,66,.08);
  border:1px solid rgba(232,173,66,.18);

  color:#efbf5e;

  font-size:10px;
  font-weight:800;
}

.consult-intro h2{
  margin:0;

  color:#fff;

  font-size:40px;
  line-height:1.45;

  font-weight:900;
}

.consult-intro h2 span{
  display:block;
  color:#efb348;
}

.consult-intro>p{
  margin:15px 0 25px;

  color:#b7c2d2;

  font-size:13px;
  line-height:2;
}

.consult-benefits{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.consult-benefits div{
  display:flex;
  align-items:center;
  gap:10px;

  padding:14px 15px;

  border-radius:13px;

  background:rgba(255,255,255,.035);

  border:1px solid rgba(255,255,255,.07);

  color:#d8e0eb;

  font-size:12px;
}

.consult-benefits span{
  width:22px;
  height:22px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:rgba(72,210,137,.1);

  color:#43d390;

  font-weight:900;
}


/* FORM */

.consult-form{
  padding:28px;

  border-radius:26px;

  background:
    linear-gradient(
      145deg,
      #0d203d,
      #0a1931
    );

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
    0 24px 60px rgba(0,0,0,.28);
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.form-group.full-width{
  grid-column:1 / -1;
}

.half-field{
  max-width:50%;
}

.form-group label{
  color:#f2f5f9;

  font-size:11px;
  font-weight:800;
}

.form-group input,
.form-group select{
  width:100%;
  height:48px;

  padding:0 14px;

  border-radius:12px;

  border:
    1px solid rgba(255,255,255,.1);

  background:
    rgba(255,255,255,.035);

  color:#fff;

  font-family:inherit;
  font-size:11px;

  outline:none;

  transition:.2s;
}

.form-group input::placeholder{
  color:#697b94;
}

.form-group select{
  color:#d4dcea;
}

.form-group select option{
  color:#10213b;
  background:#fff;
}

.form-group input:focus,
.form-group select:focus{
  border-color:
    rgba(232,173,66,.55);

  box-shadow:
    0 0 0 3px
    rgba(232,173,66,.08);
}


/* CHOICES */

.choice-group{
  display:flex;
  gap:9px;
  flex-wrap:wrap;

  padding:12px;

  border-radius:14px;

  border:
    1px solid rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.025);
}

.choice-btn{
  padding:8px 16px;

  border-radius:999px;

  border:
    1px solid rgba(232,173,66,.22);

  background:
    rgba(255,255,255,.02);

  color:#c9d2df;

  font-family:inherit;
  font-size:10px;
  font-weight:700;

  cursor:pointer;

  transition:.2s;
}

.choice-btn:hover,
.choice-btn.active{
  background:
    rgba(232,173,66,.12);

  border-color:
    rgba(232,173,66,.5);

  color:#f2bb54;
}


/* FORM FOOTER */

.form-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin-top:22px;
}

.form-footer p{
  margin:0;

  color:#8796aa;

  font-size:9px;
}

.consult-submit{
  min-width:145px;
  height:47px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:0 10px 0 16px;

  border:0;
  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #f5cb72,
      #dfa231
    );

  color:#10213b;

  font-family:inherit;
  font-size:11px;
  font-weight:900;

  cursor:pointer;

  box-shadow:
    0 12px 25px
    rgba(225,163,49,.18);
}

.consult-submit i{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:#0b203e;

  color:#fff;

  font-style:normal;
}


/* RESPONSIVE */

@media(max-width:992px){

  .consult-grid{
    grid-template-columns:1fr;
  }

  .consult-intro{
    position:static;
  }

}

@media(max-width:650px){

  .consult-section{
    padding:70px 0;
  }

  .consult-section .container{
    width:calc(100% - 28px);
  }

  .consult-intro{
    padding:25px 20px;
  }

  .consult-intro h2{
    font-size:30px;
  }

  .consult-form{
    padding:20px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .form-group.full-width,
  .half-field{
    grid-column:auto;
    max-width:none;
  }

  .form-footer{
    flex-direction:column;
    align-items:stretch;
  }

  .consult-submit{
    width:100%;
  }

}

/* =========================
   FOOTER LOGO
========================= */

.footer-logo-wrap{
  width:max-content;

  display:flex;
  align-items:center;
  gap:12px;

  text-decoration:none;

  margin-bottom:18px;
}

.footer-logo{
  width:auto;
  height:58px;

  display:block;

  object-fit:contain;

  filter:
    drop-shadow(
      0 8px 18px
      rgba(226,165,47,.14)
    );
}

.footer-logo-text{
  display:flex;
  flex-direction:column;

  line-height:1.1;
}

.footer-logo-text strong{
  color:#fff;

  font-size:17px;
  font-weight:800;
}

.footer-logo-text span{
  margin-top:5px;

  color:#7f8da3;

  font-size:7px;

  letter-spacing:1.6px;
}

.footer-brand p{
  max-width:340px;

  margin:0;

  color:#9eabbc;

  font-size:12px;
  line-height:1.9;
}

@media(max-width:600px){

  .footer-logo{
    height:50px;
  }

  .footer-logo-text strong{
    font-size:15px;
  }

}

/* =========================
   CONVERSION VISUAL
========================= */

.conversion-visual{
  position:relative;
  min-height:560px;
}

.conversion-glow{
  position:absolute;
  width:430px;
  height:430px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(38,103,255,.11);
  filter:blur(45px);
}

.conversion-ring{
  position:absolute;
  width:430px;
  height:430px;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:3px solid rgba(61,104,255,.55);
  box-shadow:
    0 0 28px rgba(61,104,255,.6),
    0 0 55px rgba(113,58,255,.35);
}

.conversion-ring::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  border-top:4px solid #efb343;
  border-left:4px solid transparent;
  transform:rotate(25deg);
}


/* laptop */

.conversion-laptop{
  position:absolute;
  z-index:5;
  width:500px;
  height:355px;
  left:50%;
  top:50%;
  transform:
    translate(-50%,-50%)
    perspective(1200px)
    rotateY(4deg);
}

.conversion-screen{
  height:305px;
  overflow:hidden;
  border-radius:18px 18px 8px 8px;
  border:5px solid #101a28;
  background:#07182e;
  box-shadow:0 34px 70px rgba(0,0,0,.45);
}

.conversion-topbar{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  background:#0e233f;
  color:#dce4ee;
  font-size:9px;
}

.conversion-topbar small{
  color:#7b8aa0;
}

.conversion-dashboard{
  padding:17px;
}

.conversion-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}

.conversion-kpis div{
  padding:10px;
  border-radius:10px;
  background:#102a4b;
}

.conversion-kpis strong{
  display:block;
  color:#fff;
  font-size:15px;
}

.conversion-kpis span{
  display:block;
  color:#778aa5;
  font-size:6px;
}

.conversion-chart{
  height:175px;
  margin-top:12px;
  border-radius:13px;
  overflow:hidden;
  background:linear-gradient(180deg,#102846,#0a1c33);
}

.conversion-chart svg{
  width:100%;
  height:100%;
}

.conversion-area{
  fill:url(#conversionArea);
}

.conversion-line{
  fill:none;
  stroke:#f1b344;
  stroke-width:4;
  stroke-linecap:round;
}

.conversion-base{
  width:110%;
  height:30px;
  margin-left:-5%;
  border-radius:4px 4px 38px 38px;
  background:linear-gradient(180deg,#9da8b5,#303947);
  transform:perspective(300px) rotateX(50deg);
}


/* phone */

.conversion-phone{
  position:absolute;
  z-index:8;
  width:118px;
  min-height:245px;
  left:5px;
  bottom:58px;
  padding:24px 10px 12px;
  border-radius:25px;
  border:4px solid #19314f;
  background:linear-gradient(160deg,#0f2949,#08182f);
  box-shadow:0 28px 50px rgba(0,0,0,.38);
  transform:rotate(-5deg);
}

.conversion-phone-head{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
}

.conversion-phone-head span{
  display:block;
  width:34px;
  height:4px;
  border-radius:10px;
  background:#334b68;
}

.channel-item{
  padding:9px 7px;
  margin-bottom:8px;
  border-radius:10px;
  background:#fff;
  color:#10213a;
}

.channel-item b{
  display:block;
  font-size:8px;
}

.channel-item strong{
  display:block;
  margin-top:2px;
  color:#28aa67;
  font-size:11px;
}


/* floating cards */

.conversion-card{
  position:absolute;
  z-index:10;
  min-width:175px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:15px;
  background:rgba(9,25,49,.9);
  border:1px solid rgba(86,125,255,.45);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 40px rgba(0,0,0,.32);
}

.conversion-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:11px;
  background:rgba(232,173,66,.1);
  color:#edb247;
  font-size:15px;
}

.conversion-card strong{
  display:block;
  color:#fff;
  font-size:11px;
}

.conversion-card span{
  display:block;
  margin-top:2px;
  color:#7c8da4;
  font-size:7px;
}

.card-strategy{
  top:80px;
  right:0;
}

.card-results{
  right:35px;
  bottom:100px;
}

.card-support{
  left:0;
  bottom:18px;
}


/* growth bars */

.conversion-bars{
  position:absolute;
  z-index:7;
  right:25px;
  top:195px;
  width:90px;
  height:150px;
  display:flex;
  align-items:flex-end;
  gap:8px;
}

.conversion-bars span{
  flex:1;
  border-radius:8px 8px 2px 2px;
  background:linear-gradient(180deg,#f3c04f,#d79622);
  box-shadow:0 8px 18px rgba(228,163,45,.18);
}


/* responsive */

@media(max-width:900px){

  .conversion-visual{
    min-height:520px;
  }

  .conversion-laptop{
    width:470px;
  }

}

@media(max-width:600px){

  .conversion-visual{
    min-height:420px;
  }

  .conversion-ring{
    width:310px;
    height:310px;
  }

  .conversion-laptop{
    width:340px;
    height:260px;
  }

  .conversion-screen{
    height:225px;
  }

  .conversion-chart{
    height:120px;
  }

  .conversion-phone{
    width:88px;
    min-height:180px;
    bottom:40px;
  }

  .channel-item{
    padding:6px 5px;
  }

  .conversion-card{
    min-width:120px;
    padding:8px;
  }

  .conversion-card strong{
    font-size:9px;
  }

  .conversion-card span{
    font-size:6px;
  }

  .card-strategy{
    top:45px;
  }

  .card-results{
    right:5px;
    bottom:80px;
  }

  .card-support{
    left:0;
    bottom:0;
  }

  .conversion-bars{
    display:none;
  }
}

/* =========================================
   HERO LEFT SIDE - CONVERSION FOCUSED
========================================= */

.hero-media{
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media-glow{
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: rgba(91, 74, 255, .16);
  filter: blur(55px);
  z-index: 1;
}

.hero-media-card{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 560px;
  border-radius: 30px;
  overflow: visible;
}

.hero-main-image{
  width: 100%;
  height: 430px;
  display: block;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid rgba(232,173,66,.22);
  box-shadow:
    0 30px 70px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.03) inset;
}


/* overlay cards */

.hero-overlay{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;

  min-width: 205px;
  padding: 14px 16px;

  border-radius: 18px;

  background: rgba(7, 24, 47, .92);
  border: 1px solid rgba(232,173,66,.22);

  box-shadow: 0 18px 35px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}

.hero-overlay-top{
  top: -18px;
  right: -22px;
}

.hero-overlay-bottom-right{
  bottom: 26px;
  left: -22px;
}

.overlay-icon{
  width: 40px;
  height: 40px;
  flex: none;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: rgba(232,173,66,.12);
  color: #efb349;

  font-size: 16px;
  font-weight: 800;
}

.hero-overlay strong{
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.hero-overlay small{
  display: block;
  margin-top: 3px;
  color: #93a3b8;
  font-size: 10px;
}


/* floating stat cards */

.hero-stat-card{
  position: absolute;
  min-width: 145px;
  padding: 14px 16px;

  border-radius: 18px;
  background: rgba(10, 28, 54, .95);
  border: 1px solid rgba(72, 114, 255, .32);

  box-shadow: 0 18px 35px rgba(0,0,0,.25);
}

.hero-stat-1{
  top: 62px;
  left: -28px;
}

.hero-stat-2{
  bottom: -18px;
  right: 24px;
}

.hero-stat-card strong{
  display: block;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
}

.hero-stat-card span{
  display: block;
  margin-top: 8px;
  color: #9dacbe;
  font-size: 11px;
  line-height: 1.6;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width: 992px){

  .hero-media{
    min-height: 500px;
  }

  .hero-media-card{
    max-width: 500px;
  }

  .hero-main-image{
    height: 390px;
  }

}

@media(max-width: 600px){

  .hero-media{
    min-height: 390px;
  }

  .hero-media-card{
    max-width: 100%;
  }

  .hero-main-image{
    height: 280px;
    border-radius: 22px;
  }

  .hero-overlay{
    min-width: 150px;
    padding: 10px 12px;
    gap: 9px;
  }

  .hero-overlay-top{
    top: -10px;
    right: 0;
  }

  .hero-overlay-bottom-right{
    bottom: 12px;
    left: 0;
  }

  .overlay-icon{
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .hero-overlay strong{
    font-size: 11px;
  }

  .hero-overlay small{
    font-size: 8px;
  }

  .hero-stat-card{
    min-width: 115px;
    padding: 10px 12px;
  }

  .hero-stat-1{
    top: 45px;
    left: 0;
  }

  .hero-stat-2{
    right: 0;
    bottom: -8px;
  }

  .hero-stat-card strong{
    font-size: 20px;
  }

  .hero-stat-card span{
    font-size: 9px;
  }

}

/* =====================================
   PORTFOLIO TABS SECTION
===================================== */

.portfolio-tabs-section{
  padding:90px 0 110px;

  background:
    linear-gradient(
      180deg,
      #09182f 0%,
      #08162b 100%
    );

  color:#fff;
}

.portfolio-tabs-section .container{
  width:min(1180px, calc(100% - 40px));
  margin:auto;
}


/* HEADER */

.portfolio-section-head{
  max-width:760px;
  margin:0 auto 34px;
  text-align:center;
}

.portfolio-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:34px;
  padding:0 14px;
  margin-bottom:14px;

  border-radius:999px;

  color:#efbd59;

  background:
    rgba(232,173,66,.08);

  border:
    1px solid
    rgba(232,173,66,.22);

  font-size:11px;
  font-weight:800;
}

.portfolio-section-head h2{
  margin:0;

  font-size:42px;
  line-height:1.3;

  font-weight:900;
}

.portfolio-section-head p{
  max-width:620px;
  margin:11px auto 0;

  color:#9eacc0;

  font-size:14px;
  line-height:1.9;
}


/* TABS */

.portfolio-tabs{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:12px;
  flex-wrap:wrap;

  margin-bottom:26px;
}

.portfolio-tab{
  min-height:48px;

  padding:0 22px;

  border-radius:999px;

  border:
    1px solid
    rgba(232,173,66,.28);

  background:
    rgba(255,255,255,.025);

  color:#d4dce7;

  font-family:inherit;
  font-size:13px;
  font-weight:800;

  cursor:pointer;

  transition:.25s ease;
}

.portfolio-tab:hover{
  border-color:
    rgba(232,173,66,.55);

  background:
    rgba(255,255,255,.045);
}

.portfolio-tab.active{
  color:#10213a;

  background:
    linear-gradient(
      135deg,
      #f3ca72,
      #dfa232
    );

  border-color:transparent;

  box-shadow:
    0 10px 28px
    rgba(225,162,49,.18);
}


/* =====================================
   FIXED FRAME
===================================== */

.portfolio-showcase-frame{
  position:relative;

  height:610px;

  padding:22px;

  border-radius:28px;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.015)
    );

  border:
    1px solid
    rgba(255,255,255,.09);

  box-shadow:
    0 25px 60px
    rgba(0,0,0,.22);
}


/* panel transition */

.portfolio-panel{
  position:absolute;
  inset:22px;

  opacity:0;
  visibility:hidden;

  transform:
    translateY(8px);

  transition:
    opacity .28s ease,
    transform .28s ease,
    visibility .28s ease;
}

.portfolio-panel.active{
  opacity:1;
  visibility:visible;

  transform:
    translateY(0);
}


/* =====================================
   COMMON GRID
===================================== */

.portfolio-grid{
  width:100%;
  height:100%;

  display:grid;
  gap:18px;
}


/* =====================================
   4 ADS - 2x2
===================================== */

.ads-grid{
  grid-template-columns:
    repeat(2, 1fr);

  grid-template-rows:
    repeat(2, 1fr);
}


/* =====================================
   3 ITEMS
===================================== */

.three-grid{
  grid-template-columns:
    repeat(3,1fr);

  align-items:center;
}


/* =====================================
   CARD
===================================== */

.portfolio-item{
  position:relative;

  overflow:hidden;

  min-width:0;
  min-height:0;

  border-radius:22px;

  background:#0b1730;

  border:
    1px solid
    rgba(232,173,66,.14);

  box-shadow:
    0 16px 32px
    rgba(0,0,0,.19);

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.portfolio-item::after{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      transparent 75%,
      rgba(6,19,38,.20)
    );
}

.portfolio-item:hover{
  transform:
    translateY(-5px);

  border-color:
    rgba(232,173,66,.38);

  box-shadow:
    0 22px 40px
    rgba(0,0,0,.26);
}

.portfolio-item img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;
  object-position:center;

  background:#111b30;
}


/* ADS */
.ads-grid .portfolio-item img{
  object-fit:cover;
}


/* SEO */
.three-grid .portfolio-item{
  height:430px;
}


/* SOCIAL */

.social-card{
  height:430px !important;
}

.social-card.featured{
  height:480px !important;
}


/* =====================================
   WEB SINGLE IMAGE
===================================== */

.web-design-preview{
  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;
}

.browser-window{
  width:90%;
  max-width:980px;
  height:500px;

  overflow:hidden;

  border-radius:22px;

  background:#fff;

  border:
    1px solid
    rgba(255,255,255,.12);

  box-shadow:
    0 22px 50px
    rgba(0,0,0,.3);
}

.browser-header{
  height:50px;

  display:flex;
  align-items:center;

  gap:15px;

  padding:0 17px;

  background:#edf1f5;

  border-bottom:
    1px solid #dde3ea;
}

.browser-dots{
  display:flex;
  gap:6px;
}

.browser-dots span{
  width:9px;
  height:9px;

  border-radius:50%;

  background:#c6ced8;
}

.browser-dots span:first-child{
  background:#e4a635;
}

.browser-address{
  flex:1;

  height:29px;

  display:flex;
  align-items:center;

  padding:0 12px;

  border-radius:8px;

  background:#fff;

  color:#8b97a8;

  font-size:9px;
}

.browser-body{
  height:
    calc(100% - 50px);

  background:#f1f3f6;

  overflow:hidden;
}

.browser-body img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;
  object-position:center;

  padding:12px;
}


/* =====================================
   RESPONSIVE
===================================== */

@media(max-width:992px){

  .portfolio-showcase-frame{
    height:720px;
  }

  .ads-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .three-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .three-grid .portfolio-item:last-child{
    grid-column:1 / -1;

    width:50%;
    justify-self:center;
  }

  .three-grid .portfolio-item,
  .social-card,
  .social-card.featured{
    height:auto !important;
  }

  .browser-window{
    width:100%;
    height:560px;
  }

}


@media(max-width:650px){

  .portfolio-tabs-section{
    padding:70px 0 80px;
  }

  .portfolio-section-head h2{
    font-size:30px;
  }

  .portfolio-tab{
    flex:1 1 45%;

    padding:0 12px;

    font-size:11px;
  }

  .portfolio-showcase-frame{
    height:720px;

    padding:14px;
  }

  .portfolio-panel{
    inset:14px;
  }

  .ads-grid{
    grid-template-columns:1fr;
    grid-template-rows:
      repeat(4,1fr);
  }

  .three-grid{
    grid-template-columns:1fr;
  }

  .three-grid .portfolio-item:last-child{
    grid-column:auto;

    width:100%;
  }

  .browser-window{
    height:620px;
  }

}.portfolio-tabs-section{
  padding:90px 0 110px;
  background:linear-gradient(180deg,#09182f 0%,#08162b 100%);
  color:#fff;
}

.portfolio-tabs-section .container{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
}

.portfolio-section-head{
  max-width:760px;
  margin:0 auto 34px;
  text-align:center;
}

.portfolio-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  margin-bottom:14px;
  border-radius:999px;
  color:#efbd59;
  background:rgba(232,173,66,.08);
  border:1px solid rgba(232,173,66,.22);
  font-size:11px;
  font-weight:800;
}

.portfolio-section-head h2{
  margin:0;
  font-size:42px;
  line-height:1.3;
  font-weight:900;
}

.portfolio-section-head p{
  max-width:620px;
  margin:11px auto 0;
  color:#9eacc0;
  font-size:14px;
  line-height:1.9;
}


/* TABS */

.portfolio-tabs{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:26px;
}

.portfolio-tab{
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid rgba(232,173,66,.28);
  background:rgba(255,255,255,.025);
  color:#d4dce7;
  font-family:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:.25s ease;
}

.portfolio-tab:hover{
  border-color:rgba(232,173,66,.55);
}

.portfolio-tab.active{
  color:#10213a;
  background:linear-gradient(135deg,#f3ca72,#dfa232);
  border-color:transparent;
  box-shadow:0 10px 28px rgba(225,162,49,.18);
}


/* FIXED FRAME */

.portfolio-showcase-frame{
  position:relative;
  height:610px;
  padding:22px;
  overflow:hidden;

  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.015)
    );

  border:1px solid rgba(255,255,255,.09);

  box-shadow:
    0 25px 60px rgba(0,0,0,.22);
}

.portfolio-panel{
  position:absolute;
  inset:22px;

  opacity:0;
  visibility:hidden;

  transform:translateY(8px);

  transition:
    opacity .28s ease,
    transform .28s ease;
}

.portfolio-panel.active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}


/* GRID */

.portfolio-grid{
  width:100%;
  height:100%;
  display:grid;
  gap:18px;
}


/* ADS - 4 equal images */

.ads-grid{
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
}


/* SEO + SOCIAL */

.three-grid{
  grid-template-columns:repeat(3,1fr);
  align-items:center;
}


/* CARDS */

.portfolio-item{
  position:relative;
  overflow:hidden;
  min-width:0;
  min-height:0;

  border-radius:22px;

  background:#111b30;

  border:
    1px solid
    rgba(232,173,66,.14);

  box-shadow:
    0 16px 32px
    rgba(0,0,0,.19);

  transition:.28s ease;
}

.portfolio-item:hover{
  transform:translateY(-5px);

  border-color:
    rgba(232,173,66,.38);

  box-shadow:
    0 22px 40px
    rgba(0,0,0,.26);
}

.portfolio-item img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;
  object-position:center;

  background:#111b30;
}


/* Ads الصور كلها نفس الحجم */

.ads-grid .portfolio-item img{
  object-fit:cover;
}


/* SEO */

.seo-grid .portfolio-item{
  height:420px;
}


/* Social */

.social-grid .portfolio-item{
  height:420px;
}

.social-grid .featured-social{
  height:470px;
}


/* WEB */

.web-design-preview{
  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;
}

.browser-window{
  width:92%;
  max-width:1000px;
  height:500px;

  overflow:hidden;

  border-radius:22px;

  background:#fff;

  box-shadow:
    0 22px 50px
    rgba(0,0,0,.3);
}

.browser-header{
  height:48px;

  display:flex;
  align-items:center;
  gap:15px;

  padding:0 17px;

  background:#edf1f5;
}

.browser-dots{
  display:flex;
  gap:6px;
}

.browser-dots span{
  width:9px;
  height:9px;

  border-radius:50%;

  background:#c6ced8;
}

.browser-dots span:first-child{
  background:#e4a635;
}

.browser-address{
  flex:1;

  height:28px;

  display:flex;
  align-items:center;

  padding:0 12px;

  border-radius:8px;

  background:#fff;

  color:#8b97a8;

  font-size:9px;
}

.browser-body{
  height:calc(100% - 48px);

  overflow:hidden;

  background:#111b30;
}

.browser-body img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;
  object-position:center;

  background:#111b30;
}


/* TABLET */

@media(max-width:992px){

  .portfolio-showcase-frame{
    height:720px;
  }

  .three-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .three-grid .portfolio-item:last-child{
    grid-column:1 / -1;

    width:50%;
    justify-self:center;
  }

}


/* MOBILE */

@media(max-width:650px){

  .portfolio-tabs-section{
    padding:70px 0 80px;
  }

  .portfolio-section-head h2{
    font-size:30px;
  }

  .portfolio-tab{
    flex:1 1 45%;
    padding:0 12px;
    font-size:11px;
  }

  .portfolio-showcase-frame{
    height:760px;
    padding:14px;
  }

  .portfolio-panel{
    inset:14px;
  }

  .ads-grid{
    grid-template-columns:1fr;
    grid-template-rows:repeat(4,1fr);
  }

  .three-grid{
    grid-template-columns:1fr;
  }

  .three-grid .portfolio-item:last-child{
    width:100%;
    grid-column:auto;
  }

  .seo-grid .portfolio-item,
  .social-grid .portfolio-item,
  .social-grid .featured-social{
    height:auto;
  }

  .browser-window{
    width:100%;
    height:620px;
  }

}



/* CTA -> consultation form */
html{
  scroll-behavior:smooth;
}

#consultForm{
  scroll-margin-top:100px;
}


/* =========================================
   FORM VALIDATION STATES
========================================= */
.form-status{
  display:none;
  margin-bottom:18px;
  padding:13px 15px;
  border-radius:12px;
  font-size:11px;
  font-weight:700;
  line-height:1.7;
}
.form-status.error{
  display:block;
  color:#ffd7d7;
  background:rgba(231,76,60,.12);
  border:1px solid rgba(255,108,92,.32);
}
.form-status.success{
  display:block;
  color:#c9ffe0;
  background:rgba(45,201,120,.10);
  border:1px solid rgba(64,214,139,.28);
}
.field-error{
  display:none;
  min-height:16px;
  color:#ff8f86;
  font-size:9px;
  font-weight:700;
  line-height:1.55;
}
.form-group.has-error .field-error{
  display:block;
}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error .choice-group{
  border-color:rgba(255,103,91,.72) !important;
  box-shadow:0 0 0 3px rgba(255,86,72,.08) !important;
}
.form-group.has-error label{
  color:#ffaaa2;
}
.consult-submit:disabled{
  cursor:not-allowed;
  opacity:.72;
}
.consult-submit.is-loading i{
  animation:consultSpin .8s linear infinite;
}
@keyframes consultSpin{
  to{ transform:rotate(360deg); }
}


/* =========================================================
   FINAL PRE-LAUNCH NAVBAR — matches tamiyouzalrowad.com IA
========================================================= */
.site-main-navbar{
  position:sticky;
  top:0;
  z-index:1500;
  height:78px;
  background:rgba(7,22,43,.96);
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.site-main-navbar .navbar{
  height:78px;
  gap:22px;
}
.site-main-navbar .original-logo{height:52px;width:auto;}
.site-main-navbar .original-brand{gap:10px;flex-shrink:0;}
.site-main-navbar .brand-text strong{font-size:14px;}
.site-main-navbar .brand-text small{font-size:6px;letter-spacing:1.4px;}
.site-main-navbar .site-nav-links{
  gap:20px;
  margin-inline:auto;
}
.site-main-navbar .site-nav-links a{
  height:78px;
  padding:0 1px;
  font-size:10px;
  white-space:nowrap;
}
.site-main-navbar .site-nav-links a.active::after{bottom:17px;}
.site-nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.site-language{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 12px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.09);
  color:#aeb9c8;
  background:rgba(255,255,255,.025);
  font-size:9px;
  font-weight:700;
}
.site-main-navbar .nav-cta{
  min-width:145px;
  height:42px;
  font-size:9px;
}
#consultForm{scroll-margin-top:100px;}

@media(max-width:1180px){
  .site-main-navbar .site-nav-links{gap:13px;}
  .site-main-navbar .site-nav-links a{font-size:9px;}
  .site-language{display:none;}
}
@media(max-width:960px){
  .site-main-navbar .site-nav-links{
    position:absolute;
    top:78px;
    right:20px;
    left:20px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:14px;
    border-radius:16px;
    background:rgba(7,22,43,.99);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 24px 50px rgba(0,0,0,.32);
  }
  .site-main-navbar .site-nav-links.open{display:flex;}
  .site-main-navbar .site-nav-links a{height:auto;padding:11px 12px;border-radius:9px;}
  .site-main-navbar .site-nav-links a.active::after{display:none;}
  .site-main-navbar .menu-btn{display:block;}
}
@media(max-width:620px){
  .site-main-navbar,.site-main-navbar .navbar{height:68px;}
  .site-main-navbar .original-logo{height:44px;}
  .site-main-navbar .brand-text small{display:none;}
  .site-main-navbar .nav-cta{display:none;}
  .site-main-navbar .site-nav-links{top:68px;}
}