:root{--navy:#102843;--dark:#0a1c31;--teal:#076b68;--mint:#90e1d4;--paper:#fbf9f3;--gold:#d6ba80;--line:#d9e3df;--muted:#465a6a}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--paper);color:var(--navy);font:17px/1.8 Tahoma,Arial,sans-serif}
a{color:inherit}
a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #c18120;outline-offset:4px}
.skip{position:fixed;z-index:5;top:.7rem;right:.7rem;background:white;padding:.5rem 1rem;transform:translateY(-200%)}
.skip:focus{transform:none}
.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.top{position:sticky;top:0;z-index:3;background:var(--paper);border-bottom:1px solid var(--line)}
.top-inner,.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;font:bold 17px Arial,sans-serif;text-decoration:none;white-space:nowrap}
.mark{display:grid;place-items:center;width:42px;height:42px;background:var(--teal);color:white;border-radius:12px;font:bold 20px Georgia,serif;direction:ltr}
nav{display:flex;gap:24px;font-size:14px}
nav a,.footer a,.text-link{text-decoration:none}
nav a:hover,.footer a:hover,.text-link:hover{text-decoration:underline}
.button{display:inline-flex;justify-content:center;align-items:center;padding:12px 22px;border-radius:9px;background:var(--teal);color:white;font-weight:bold;text-decoration:none;text-align:center;line-height:1.5}
.button:hover{background:#055956}
.small{padding:8px 14px;font-size:14px;white-space:nowrap}
.hero,.offer-section{background:var(--navy);color:white}
.hero{background:radial-gradient(ellipse at 12% 24%,#174d56,transparent 52%),var(--navy);padding:80px 0}
.hero-grid,.split,.offer{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.eyebrow,.kicker{font-weight:bold;font-size:14px;margin:0 0 12px}
.eyebrow{color:var(--mint)}
.eyebrow span{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gold);margin-inline-end:7px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(42px,6vw,77px);line-height:1.18;margin-bottom:20px;letter-spacing:-.025em}
h1 em{font-style:normal;color:var(--mint)}
h2{font-size:clamp(29px,4vw,47px);line-height:1.35;margin-bottom:16px}
h3{font-size:22px;line-height:1.4;margin-bottom:8px}
.intro{color:#e2ebef;font-size:19px;max-width:560px}
.hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero .button,.offer .button{background:var(--mint);color:var(--dark)}
.hero .button:hover,.offer .button:hover{background:#b2f0e7}
.text-link{font-size:14px;color:white}
.byline{margin:24px 0 0;text-align:right;color:#d6e4e9;font-size:14px}
.hero-visual{border:1px solid #ffffff40;border-radius:22px;padding:20px;background:#0e253c;box-shadow:0 20px 55px #0004}
.visual-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 13px;font-size:13px}
.visual-tag{color:var(--mint)}
.mini-brand{font-weight:bold;color:#fff}
.visual-step{display:flex;gap:13px;background:#ffffff0c;border:1px solid #ffffff20;border-radius:12px;margin-top:9px;padding:14px}
.visual-step>span{font-weight:bold;color:var(--mint)}
.visual-step strong{display:block;font-size:17px}
.visual-step p{margin:0;color:#d6e4e9;font-size:14px}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pills span{color:#c9fff4;background:#154849;border-radius:6px;padding:2px 7px;font-size:12px}
.section{padding-block:68px}
.section p,.faq p{color:var(--muted)}
.kicker,.section .kicker{color:var(--teal)}
.note{border-inline-start:3px solid var(--teal);padding-inline-start:14px;font-size:14px;margin-bottom:0}
.demo,.feature-grid article,.price-box{background:white;border:1px solid var(--line);border-radius:16px;padding:24px}
.demo fieldset{padding:0;border:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:10px}
.demo legend{font-weight:bold;margin-bottom:10px}
.demo label{cursor:pointer;border:1px solid #a8cfca;border-radius:8px;padding:7px 10px;background:#ecf7f4;font-size:14px}
.demo input{accent-color:var(--teal);vertical-align:middle}
.demo-result{background:#e6f4ef;border-radius:9px;padding:14px}
.demo-result p,.fine{margin:3px 0 0;font-size:14px}
.demo .fine{margin-top:12px;font-size:12px}
.study{background:#edf4f0;border-block:1px solid #dfe8e3}
.section-intro{max-width:650px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.feature-grid p{margin-bottom:0}
.number{display:grid;place-items:center;background:#dff0eb;color:var(--teal);border-radius:9px;width:38px;height:38px;margin-bottom:14px;font-weight:bold}
.steps{margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:auto 1fr;column-gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(step);grid-row:span 2;align-self:center;background:#deeeea;color:var(--teal);width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font-weight:bold}
.steps span{color:var(--muted);font-size:15px}
.offer-section{background:radial-gradient(ellipse at 12% 24%,#164450,transparent 58%),var(--navy)}
.offer-section p{color:#e2ebef}
.price-box{background:#ffffff0c;border-color:#ffffff3b}
.price-meta{display:flex;align-items:center;gap:14px;color:#d9e6ed}
.price-meta span{background:#ffffff19;border-radius:5px;color:#ffe3a4;padding:2px 8px;font-size:14px}
.price{font-weight:bold;font-size:68px;line-height:1.25;margin:10px 0 18px}
.price span{font-size:20px}
.price-box .button{width:100%}
.price-box p{font-size:14px;margin:10px 0 0;text-align:center}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:bold}
.faq p{margin:9px 0 0}
.footer{border-top:1px solid var(--line);font-size:14px}
@media(max-width:800px){nav{display:none}.hero{padding:45px 0}.hero-grid,.split,.offer{grid-template-columns:1fr;gap:26px}.section{padding-block:44px}.feature-grid{grid-template-columns:1fr}.hero-copy .intro{font-size:17px}.footer-inner{flex-wrap:wrap;padding-block:15px}}
@media(max-width:380px){.wrap{width:calc(100% - 30px)}.brand{font-size:14px;gap:6px}.mark{width:34px;height:34px}.small{font-size:12px;padding:7px 9px}.hero-visual,.demo,.price-box{padding:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@font-face{font-family:DP Arabic;src:url("fonts/NotoSansArabic-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:DP Arabic;src:url("fonts/NotoSansArabic-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
body{font-family:DP Arabic,Arial,sans-serif}
h1{line-height:1.32}
h2{line-height:1.45}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.button{gap:8px;min-height:45px;box-shadow:0 4px 12px #071a251f}
.button.small{min-height:40px}
.button .icon{width:18px;height:18px}
.hero .secondary,.offer .secondary{color:#e3f6f4;background:transparent;border:1px solid #b1d8d59c;box-shadow:none}
.hero .secondary:hover,.offer .secondary:hover{background:#ffffff16}
.contact-button{margin-top:10px}
nav a,.footer-link,.eyebrow,.demo-label{display:inline-flex;align-items:center;gap:8px}
nav a{padding:8px 4px;border-radius:8px}
nav a .icon,.eyebrow .icon,.demo-label .icon{width:17px;height:17px}
.hero-visual .icon-tile{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#15494d;color:var(--mint);flex:none}
.byline{font-family:Arial,sans-serif;font-weight:700;letter-spacing:.025em}
.price bdi{font-family:Arial,sans-serif;letter-spacing:-.04em}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{color:var(--teal);transition:transform .15s}
.faq details[open] summary .icon{transform:rotate(180deg)}
@media(max-width:800px){.top-inner{flex-wrap:wrap;gap:0;min-height:0;padding-top:9px}.top-inner nav{display:flex;order:3;width:100%;overflow-x:auto;gap:15px;white-space:nowrap;font-size:12px;padding-top:3px}.top-inner nav .icon{width:15px;height:15px}html{scroll-padding-top:7rem}}
@media(max-width:380px){.top-inner nav{gap:7px;font-size:11px}.top-inner nav .icon{width:13px;height:13px}}