:root{
  --burgundy:#660C1F;
  --burgundy-deep:#3E0710;
  --orange:#D07429;
  --orange-light:#E5964F;
  --cream:#FBF8F4;
  --paper:#FFFFFF;
  --ink:#241512;
  --muted:#8A7B74;
  --line:#E7DED4;
  --ksa-green:#14532D;
  --ksa-green-deep:#0C3A20;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream); color:var(--ink);
  font-family:'Cairo', sans-serif; font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1080px; margin-inline:auto; padding-inline:32px;}
@media (max-width:720px){ .wrap{padding-inline:20px;} }
svg{display:block;}

.drip{
  width:46px; height:46px; border-radius:50% 50% 50% 0%;
  transform:rotate(-45deg);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.drip svg{transform:rotate(45deg);}

/* ---------- national day ribbon ---------- */
.nd-ribbon{
  background:var(--ksa-green); color:#fff; text-align:center;
  padding:10px 16px; font-size:13.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.nd-ribbon .flag{font-size:15px;}
.nd-ribbon .sep{opacity:.5;}

/* ---------- sadu-inspired geometric divider ---------- */
.sadu-divider{
  height:16px;
  background-image:
    repeating-linear-gradient(45deg, var(--ksa-green) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(-45deg, var(--orange) 0 8px, transparent 8px 16px);
  background-size:16px 16px;
  background-position:0 0, 0 0;
  opacity:.9;
}
.sadu-divider.sm{height:8px;}

/* ---------- top bar ---------- */
.topbar{
  border-bottom:1px solid var(--line); background:rgba(251,248,244,.92); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:40;
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:74px;}
.topbar .logo img{height:34px; width:auto;}
.topbar .wa{
  display:inline-flex; align-items:center; gap:8px; background:var(--burgundy); color:#fff;
  padding:11px 22px; border-radius:7px; font-size:14px; font-weight:700;
}
.topbar .wa svg{width:16px; height:16px; stroke:#fff;}

/* ---------- hero ---------- */
.hero{padding-block:56px 40px; text-align:center;}
.limited-badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--burgundy); color:#fff;
  padding:9px 20px; border-radius:30px; font-size:13.5px; font-weight:700; margin-bottom:26px;
}
.limited-badge i{width:7px; height:7px; border-radius:50%; background:var(--orange-light); display:block;}
.hero h1{
  font-size:clamp(28px,4.6vw,44px); font-weight:800; line-height:1.35; margin-bottom:18px; max-width:760px; margin-inline:auto;
}
.hero h1 span{
  background:linear-gradient(90deg, var(--burgundy), var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{font-size:17px; color:#5B4C45; max-width:560px; margin-inline:auto; margin-bottom:30px;}
.hero-cta{
  display:inline-flex; align-items:center; gap:10px; background:var(--orange); color:#fff;
  padding:17px 36px; border-radius:8px; font-size:16px; font-weight:700;
  box-shadow:0 12px 26px -10px rgba(208,116,41,.55);
}
.hero-cta svg{width:18px; height:18px; stroke:#fff;}
.hero-note{margin-top:16px; font-size:13px; color:var(--muted);}

/* ---------- pricing ---------- */
.pricing{padding-block:50px 70px;}
.pricing-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:24px; align-items:stretch; max-width:820px; margin-inline:auto;
}
@media (max-width:760px){ .pricing-grid{grid-template-columns:1fr;} }

.price-card{
  background:var(--paper); border:1.5px solid var(--line); border-radius:18px; padding:34px 30px;
  display:flex; flex-direction:column;
}
.price-card.featured{
  border-color:var(--burgundy); position:relative; background:var(--paper);
  box-shadow:0 24px 50px -22px rgba(102,12,31,.28); padding-top:46px;
}
.save-badge{
  position:absolute; top:-16px; inset-inline-start:24px; inset-inline-end:24px;
  background:var(--orange); color:#fff; font-size:12px; font-weight:700;
  padding:8px 14px; border-radius:20px; text-align:center; white-space:normal;
}
.price-card .plabel{font-size:14.5px; font-weight:700; color:var(--muted); margin-bottom:14px;}
.price-card .pnum{font-size:40px; font-weight:800; color:var(--ink); margin-bottom:4px;}
.price-card .pnum sup{font-size:16px; font-weight:700; margin-inline-start:4px;}
.price-card .punit{font-size:13.5px; color:var(--muted); margin-bottom:22px;}
.price-card .pvat{font-size:12.5px; color:var(--muted); margin-bottom:24px;}
.price-card hr{border:none; border-top:1px solid var(--line); margin-bottom:20px;}
.price-card .ptotal{font-size:13.5px; color:var(--muted); margin-bottom:22px;}
.price-card .ptotal b{color:var(--ink);}
.price-btn{
  margin-top:auto; text-align:center; padding:14px; border-radius:8px; font-size:14.5px; font-weight:700;
}
.price-card .price-btn{background:var(--cream); color:var(--ink); border:1px solid var(--line);}
.price-card.featured .price-btn{background:var(--burgundy); color:#fff;}

/* ---------- features ---------- */
.features{padding-block:70px; background:var(--paper); border-block:1px solid var(--line);}
.features-head{text-align:center; max-width:560px; margin-inline:auto; margin-bottom:46px;}
.features-head h2{font-size:clamp(24px,3.2vw,32px); font-weight:800; margin-bottom:12px;}
.features-head p{color:var(--muted); font-size:15.5px;}

.feat-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; max-width:820px; margin-inline:auto;}
@media (max-width:640px){ .feat-grid{grid-template-columns:1fr;} }
.feat-item{
  display:flex; align-items:center; gap:16px; background:var(--cream); border:1px solid var(--line);
  border-radius:14px; padding:18px 20px;
}
.feat-item .drip{width:40px; height:40px; background:#F4E3E6;}
.feat-item:nth-child(even) .drip{background:#FBEADA;}
.feat-item .drip svg{width:18px; height:18px; stroke:var(--burgundy);}
.feat-item:nth-child(even) .drip svg{stroke:var(--orange);}
.feat-item span{font-size:15px; font-weight:700;}
.feat-item.highlight{border-color:var(--burgundy); background:#FBF1F2;}

/* ---------- dashboard tracking section ---------- */
.dash{padding-block:70px; background:var(--paper); border-block:1px solid var(--line);}
.dash-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:50px; align-items:center; max-width:1000px; margin-inline:auto;}
@media (max-width:860px){ .dash-grid{grid-template-columns:1fr; gap:30px;} }
.dash-text .kicker{color:var(--orange); font-weight:700; font-size:13.5px; margin-bottom:10px; display:block;}
.dash-text h2{font-size:clamp(22px,3vw,30px); font-weight:800; margin-bottom:14px; line-height:1.4;}
.dash-text p{color:#5B4C45; font-size:15px; line-height:1.85; margin-bottom:20px;}
.dash-points{list-style:none; display:flex; flex-direction:column; gap:12px;}
.dash-points li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; font-weight:600;}
.dash-points li svg{width:18px; height:18px; stroke:var(--ksa-green); flex:0 0 auto; margin-top:2px;}
.dash-shot{border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 50px -22px rgba(102,12,31,.22);}
.dash-shot img{width:100%; display:block;}

/* ---------- testimonials (voice notes) ---------- */
.voice-section{padding-block:70px;}
.voice-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; max-width:920px; margin-inline:auto;}
@media (max-width:760px){ .voice-grid{grid-template-columns:1fr;} }
.voice-card{
  background:#DCF3E6; border:1px solid #BFE6D2; border-radius:16px; padding:20px;
  display:flex; align-items:center; gap:14px;
}
.voice-card.empty{
  background:var(--cream); border:1.5px dashed var(--line); justify-content:center; text-align:center; color:var(--muted); font-size:13.5px;
}
.voice-play{
  width:46px; height:46px; border-radius:50%; background:var(--ksa-green); color:#fff; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
}
.voice-play svg{width:18px; height:18px;}
.voice-mid{flex:1; min-width:0;}
.voice-wave{display:flex; align-items:center; gap:2px; height:26px; margin-bottom:6px;}
.voice-wave span{width:3px; background:#4FA57E; border-radius:2px; display:block;}
.voice-meta{display:flex; justify-content:space-between; font-size:11.5px; color:#3D7A5C; font-weight:600;}

/* ---------- portfolio ---------- */
.works{padding-block:70px; background:var(--paper); border-block:1px solid var(--line);}
.works-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;}
@media (max-width:860px){ .works-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:520px){ .works-grid{grid-template-columns:1fr;} }
.work-card{
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--cream);
  display:block; transition:.2s; position:relative;
}
.work-card:hover{transform:translateY(-3px); box-shadow:0 18px 34px -18px rgba(102,12,31,.22);}
.work-thumb{aspect-ratio:4/3; overflow:hidden; position:relative; background:#eee;}
.work-thumb img{width:100%; height:100%; object-fit:cover;}
.work-play{
  position:absolute; inset:0; background:rgba(36,21,18,.25); display:flex; align-items:center; justify-content:center;
}
.work-play i{
  width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
}
.work-play svg{width:18px; height:18px; stroke:var(--burgundy); fill:var(--burgundy);}
.work-body{padding:14px 16px;}
.work-body .wtag{font-size:11.5px; font-weight:700; color:var(--orange); display:block; margin-bottom:4px;}
.work-body h4{font-size:14.5px; font-weight:800;}

/* video lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(15,8,7,.85); display:none; align-items:center; justify-content:center;
  z-index:100; padding:24px;
}
.lightbox.open{display:flex;}
.lightbox-inner{max-width:360px; width:100%; position:relative;}
.lightbox video{width:100%; border-radius:14px; display:block; max-height:80vh;}
.lightbox-close{
  position:absolute; top:-42px; inset-inline-end:0; width:34px; height:34px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
}

/* ---------- trust ---------- */
.trust{padding-block:64px;}
.trust-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; max-width:920px; margin-inline:auto; text-align:center;}
@media (max-width:760px){ .trust-grid{grid-template-columns:1fr;} }
.trust-item .drip{margin-inline:auto; margin-bottom:16px;}
.trust-item .drip svg{width:20px; height:20px; stroke:var(--burgundy);}
.trust-item h4{font-size:16.5px; font-weight:800; margin-bottom:8px;}
.trust-item p{font-size:13.5px; color:var(--muted); line-height:1.75;}

/* ---------- final cta ---------- */
.final{background:var(--burgundy); color:#fff; text-align:center; padding-block:64px;}
.final h2{font-size:clamp(24px,3.6vw,32px); font-weight:800; margin-bottom:14px;}
.final p{opacity:.85; margin-bottom:28px; font-size:15px;}
.final .hero-cta{background:#fff; color:var(--burgundy); box-shadow:none;}

/* ---------- footer ---------- */
footer{padding-block:26px; text-align:center; font-size:12.5px; color:var(--muted);}