:root{
  --ink:#f5f0e6;
  --paper:#f5f0e6;
  --cream:#eae4d8;
  --dark:#0b2926;
  --petrol:#123b36;
  --petrol-2:#0e312d;
  --mint:#74e3c0;
  --coral:#ff6b5f;
  --cobalt:#536dfe;
  --gold:#74e3c0;
  --muted:#6b746f;
  --line:#c9d2ca;
  --shadow:0 28px 80px rgba(8,37,34,.18)
}
html{background:var(--paper)}
body{
  color:#112c29;
  background:
    radial-gradient(circle at 12% 8%,rgba(116,227,192,.13),transparent 24rem),
    var(--paper)
}
body:before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.17;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E")
}
::selection{background:var(--coral);color:white}
.topbar{
  background:rgba(245,240,230,.9)!important;
  border-color:rgba(18,59,54,.15)!important;
  backdrop-filter:blur(18px)
}
.brand-mark{background:var(--petrol)!important;border-radius:8px!important}
.brand small,.kicker{color:var(--coral)!important}
.nav a{color:#173b37!important}
.nav a:after{background:var(--coral)!important}
.lang-button,.menu-button{border-color:rgba(18,59,54,.18)!important;background:#fff8!important}
.nav-cta,.button{
  background:var(--coral)!important;color:#fff!important;border-color:var(--coral)!important;
  box-shadow:5px 5px 0 var(--petrol)!important;border-radius:3px!important
}
.nav-cta:hover,.button:hover{transform:translate(-2px,-2px)!important;box-shadow:8px 8px 0 var(--petrol)!important}
.hero{
  color:var(--paper);
  background:
    linear-gradient(90deg,rgba(116,227,192,.06) 1px,transparent 1px),
    linear-gradient(rgba(116,227,192,.06) 1px,transparent 1px),
    var(--petrol);
  background-size:54px 54px;
  border-bottom:10px solid var(--mint)!important;
  overflow:hidden
}
.hero:after{
  content:"01";position:absolute;inset-inline-end:5vw;top:6rem;
  font:400 clamp(90px,16vw,260px)/.8 "Bebas Neue",sans-serif;
  color:rgba(255,107,95,.15);pointer-events:none
}
.hero-copy{position:relative;z-index:2}
.hero h1{
  max-width:1050px!important;text-transform:uppercase;
  font-family:"Bebas Neue","Tajawal",sans-serif!important;
  font-size:clamp(70px,10vw,150px)!important;line-height:.87!important;
  letter-spacing:.005em!important;color:var(--paper)!important
}
[dir=rtl] .hero h1{font-family:"Tajawal",sans-serif!important;font-size:clamp(55px,8.5vw,118px)!important;line-height:1.02!important}
.hero h1 em,.hero h1 span{color:var(--mint)!important;font-style:normal!important}
.hero-copy>p{color:#c4d2cc!important;max-width:720px!important;font-size:17px!important}
.hero .kicker{display:inline-flex;background:var(--coral);color:#fff!important;padding:7px 11px;border-radius:2px;letter-spacing:.12em}
.text-link{color:var(--paper)!important;border-color:var(--mint)!important}
.hero-notes span{color:#d4ddd8!important}
.hero-notes span:before{color:var(--mint)!important}
.device-switch{
  background:var(--paper)!important;border:1px solid var(--petrol)!important;
  border-radius:4px!important;box-shadow:7px 7px 0 var(--coral)!important
}
.device-switch button{border-radius:2px!important;color:var(--petrol)!important}
.device-switch button[aria-pressed=true]{background:var(--petrol)!important;color:var(--paper)!important}
.live-demo{border-radius:8px!important;background:#061e1c!important;border:2px solid var(--mint)!important;box-shadow:14px 14px 0 var(--cobalt),var(--shadow)!important}
.live-demo-bar{background:#092b28!important;border-color:#24514c!important}
.visual-glow{background:var(--mint)!important;opacity:.18!important}
.data-float{border-radius:3px!important;background:var(--coral)!important;color:#fff!important;border:0!important;box-shadow:6px 6px 0 var(--petrol)!important}
.data-float b{color:#fff!important}
.proof{background:var(--paper)!important;border-color:var(--line)!important}
.proof-inner b{color:var(--petrol)!important}
.results{border-color:var(--line)!important}
.result-grid strong{color:var(--petrol)!important}
.section h2,.why-section h2,.insight-section h2,.setup-section h2,.faq-section h2{
  color:var(--petrol);font-weight:800!important
}
.feature-grid{border-color:var(--petrol)!important;gap:12px;border:0!important}
.feature{
  background:rgba(255,255,255,.4);border:1px solid rgba(18,59,54,.25)!important;
  min-height:230px!important;box-shadow:5px 5px 0 rgba(18,59,54,.12)
}
.feature:nth-child(2),.feature:nth-child(5){background:#dff7ed}
.feature:nth-child(3){background:#ffe1dc}
.feature:hover{background:var(--petrol)!important;color:var(--paper);transform:translate(-4px,-4px)!important;box-shadow:10px 10px 0 var(--coral)}
.feature:hover p{color:#c5d3ce!important}
.feature-mark{background:var(--coral)!important;width:48px!important;border-radius:0!important}
.why-section{background:var(--cream)!important}
.text-arrow{border-color:var(--coral)!important;color:var(--petrol)!important}
.benefit-grid{gap:12px;border:0!important}
.benefit-grid article{background:var(--paper);border:1px solid rgba(18,59,54,.23)!important;box-shadow:5px 5px 0 rgba(18,59,54,.12)}
.benefit-mark{background:var(--cobalt)!important;color:white!important;border-radius:50%!important}
.dark-section,.pricing-section,.footer{
  background:
    radial-gradient(circle at 85% 10%,rgba(83,109,254,.2),transparent 25rem),
    var(--petrol)!important
}
.dark-section{border-block:10px solid var(--coral)}
.dark-heading .kicker,.pricing-heading .kicker{color:var(--mint)!important}
.dark-section h2,.pricing-section h2{font-family:"Bebas Neue","Tajawal",sans-serif;font-size:clamp(48px,6.5vw,92px)!important;line-height:.92!important;letter-spacing:.01em!important}
[dir=rtl] .dark-section h2,[dir=rtl] .pricing-section h2{font-family:"Tajawal",sans-serif;line-height:1.05!important}
.flow{border-color:#3c6a64!important;gap:8px;border:0!important}
.flow>div{background:#0d3430;border:1px solid #3c6a64!important;min-height:145px!important}
.flow b{background:var(--coral)!important;color:white!important;border:0!important;box-shadow:none!important}
.metric-band strong{color:var(--mint)!important}
.module-list article.selected{border-color:var(--coral)!important;background:#ffe4df!important}
.module-list article.selected .module-mark{background:var(--coral)!important;box-shadow:0 0 0 5px rgba(255,107,95,.15)!important}
.module-dashboard,.insight-screen{background:var(--petrol)!important;border-radius:6px!important;box-shadow:10px 10px 0 var(--cobalt)!important}
.insight-section{background:#dff7ed!important}
.setup-grid article{border-radius:4px!important;border-color:rgba(18,59,54,.25)!important;box-shadow:5px 5px 0 rgba(18,59,54,.12)!important}
.setup-mark{background:var(--coral)!important;color:white!important;border-radius:50%!important;box-shadow:none!important}
.launch-offer{background:#0b2e2a!important;border:1px solid var(--mint)!important;border-radius:4px!important}
.launch-offer b{color:var(--mint)!important}
.price-card{background:#0a2d29!important;border-color:#3b625e!important;border-radius:5px!important}
.price-card.is-selected{border-color:var(--coral)!important;background:#123b36!important;box-shadow:10px 10px 0 var(--coral)!important}
.popular{background:var(--coral)!important;border-radius:2px!important}
.price small,.saving{color:var(--mint)!important}
.saving{background:#174e44!important}
.price-card.is-selected .price-button{background:var(--coral)!important}
.cta-section{
  background:var(--cobalt)!important;border-radius:5px!important;
  box-shadow:12px 12px 0 var(--coral)!important
}
.cta-section:after{content:"ZAIN";font-family:"Bebas Neue",sans-serif!important;color:#ffffff0d!important}
.subscribe-dialog{background:var(--petrol)!important;border-color:var(--mint)!important;border-radius:7px!important;box-shadow:12px 12px 0 var(--coral),0 40px 100px #0008!important}
.subscribe-dialog:before{background:radial-gradient(circle at 90% 0,rgba(83,109,254,.32),transparent 40%)!important}
.modal-badge{color:var(--mint)!important;border-color:var(--mint)!important}
.modal-submit{background:var(--coral)!important;border-radius:3px!important}
.discount-input{text-transform:uppercase;letter-spacing:.08em}
.success-modal{
  position:fixed;z-index:3100;inset:0;display:grid;place-items:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s
}
.success-modal.is-open{opacity:1;visibility:visible}
.success-backdrop{position:absolute;inset:0;background:rgba(5,28,26,.78);backdrop-filter:blur(14px)}
.success-dialog{
  position:relative;width:min(470px,100%);overflow:hidden;text-align:center;
  background:var(--paper);color:var(--petrol);border:2px solid var(--mint);
  border-radius:7px;padding:46px 36px 34px;
  box-shadow:12px 12px 0 var(--coral),0 40px 100px rgba(0,0,0,.45);
  transform:translateY(20px) scale(.96);transition:transform .3s cubic-bezier(.2,.8,.2,1)
}
.success-modal.is-open .success-dialog{transform:none}
.success-dialog:after{
  content:"";position:absolute;inset:auto -45px -70px auto;width:180px;height:180px;
  border-radius:50%;background:var(--cobalt);opacity:.12;pointer-events:none
}
.success-dialog .modal-close{color:var(--petrol);border-color:rgba(18,59,54,.18);background:rgba(18,59,54,.06)}
.success-check{
  width:72px;height:72px;margin:0 auto 18px;display:grid;place-items:center;
  border-radius:50%;background:var(--mint);color:var(--petrol);
  font:900 34px/1 "Manrope",sans-serif;box-shadow:0 0 0 10px rgba(116,227,192,.18)
}
.success-kicker{display:block;color:var(--coral);font:800 10px/1 "Manrope",sans-serif;letter-spacing:.18em}
.success-dialog h2{font-size:32px;line-height:1.15;margin:13px 0 10px;letter-spacing:-.03em}
.success-dialog p{max-width:360px;margin:0 auto;color:#63706b;font-size:14px;line-height:1.75}
.success-close{
  position:relative;z-index:1;min-width:150px;min-height:48px;margin-top:24px;
  border:0;border-radius:3px;background:var(--coral);color:white;
  font:800 13px inherit;cursor:pointer;box-shadow:5px 5px 0 var(--petrol)
}
.footer{border-top:10px solid var(--mint)}
.footer-status i{background:var(--mint)!important}
.whatsapp-float{background:var(--coral)!important;border-color:var(--paper)!important;box-shadow:6px 6px 0 var(--petrol)!important}
.whatsapp-icon{color:var(--coral)!important}

/* Keep the live mobile preview inside the original realistic iPhone shell.
   The campaign skin must style the page, not replace the device hardware. */
.hero-visual.preview-mobile .live-demo{
  border:0!important;
  outline:0!important;
  background:#050505 url("iphone-shell-with-status.png") center/100% 100% no-repeat!important;
  box-shadow:
    0 42px 90px rgba(17,19,26,.27),
    0 0 0 1px #67696d,
    inset 0 0 0 1px rgba(255,255,255,.6)!important;
  border-radius:58px!important
}
.hero-visual.preview-mobile .live-demo-bar{
  background:transparent!important;
  border:0!important;
  border-radius:53px 53px 0 0!important
}
.hero-visual.preview-mobile .live-demo-stage{
  border-radius:0 0 52px 52px!important
}
.hero-visual.preview-mobile .live-demo-stage>iframe,
.hero-visual.preview-mobile .live-demo-cover{
  border-radius:0 0 52px 52px!important
}
.hero-visual.preview-mobile .visual-glow{
  background:radial-gradient(ellipse,rgba(116,227,192,.2),rgba(83,109,254,.08) 45%,transparent 70%)!important
}

@media(max-width:760px){
  .hero{padding-top:32px!important}
  .hero:after{top:4rem;font-size:130px}
  .hero h1{font-size:clamp(54px,18vw,76px)!important;line-height:.9!important}
  [dir=rtl] .hero h1{font-size:clamp(43px,13vw,60px)!important;line-height:1.05!important}
  .hero-copy>p{font-size:15px!important}
  .feature-grid,.benefit-grid{gap:8px}
  .feature,.benefit-grid article,.setup-grid article{box-shadow:3px 3px 0 rgba(18,59,54,.12)!important}
  .dark-section h2,.pricing-section h2{font-size:48px!important}
  .live-demo{box-shadow:7px 7px 0 var(--cobalt)!important}
  .price-card.is-selected{box-shadow:6px 6px 0 var(--coral)!important}
  .cta-section{box-shadow:7px 7px 0 var(--coral)!important}
  .success-dialog{padding:40px 22px 28px;box-shadow:7px 7px 0 var(--coral),0 30px 80px rgba(0,0,0,.42)}
  .success-dialog h2{font-size:28px}
}

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