/* stat-ro.com | the app's own identity: its dark palette
   (assets/css/palette_dark.css) and its font, IBM Plex Sans Arabic. */

@font-face{font-family:"Plex";src:url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");font-weight:700 800;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* the app's dark palette */
  --bg:#060f1e;--bg2:#0a1628;--bg3:#13212F;--bg4:#182A3C;
  --cy:#00b4d8;--cy2:#0096b4;--cy3:#48cae4;
  --gr:#06d6a0;--am:#ffb703;--rd:#ef476f;
  --text:#E6EEF4;--mid:#A9BBCB;--dim:#8A9DB0;
  --on-accent:#06121f; /* text on cyan or amber: 4.5:1 and up */
  --border:rgba(0,180,216,.15);--bord2:rgba(0,180,216,.28);--bord3:rgba(0,180,216,.45);
  --glass:rgba(255,255,255,.03);--glass2:rgba(255,255,255,.06);
  --r:14px;--r2:20px;--transition:.25s ease;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"Plex",Tahoma,Arial,sans-serif;line-height:1.65;width:100%}
.ar{display:block}.en{display:none}
[data-lang="en"] .ar{display:none}[data-lang="en"] .en{display:block}
html[data-lang="en"]{direction:ltr}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}
svg use{pointer-events:none}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,15,30,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;height:64px;gap:16px;padding:0 clamp(16px,4vw,48px);justify-content:space-between}
.nav-logo{flex:0 0 auto;line-height:0}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;gap:4px;flex:1;justify-content:center;min-width:0}
.nav-links a{padding:7px 13px;border-radius:8px;font-size:.9rem;color:var(--mid);transition:all var(--transition)}
.nav-links a:hover{background:var(--glass2);color:var(--cy)}
.nav-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.btn-cta{padding:8px 18px;border-radius:8px;font-size:.88rem;font-weight:700;background:var(--cy);color:var(--on-accent);transition:all var(--transition)}
.btn-cta:hover{background:var(--cy3)}
.lang-btn{padding:6px 11px;border-radius:8px;font-size:.8rem;font-weight:600;border:1px solid var(--bord2);color:var(--mid);transition:all var(--transition)}
.lang-btn:hover{border-color:var(--cy);color:var(--cy)}

/* LAYOUT */
section{padding:clamp(56px,7vw,96px) clamp(16px,5vw,80px);width:100%;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;width:100%}
.section-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:99px;border:1px solid var(--bord2);background:rgba(0,180,216,.08);color:var(--cy);font-size:.82rem;font-weight:600;margin-bottom:18px}
h1{font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:800;line-height:1.25}
h2{font-size:clamp(1.5rem,3.2vw,2.2rem);font-weight:700;line-height:1.3}
h3{font-size:1.05rem;font-weight:700}
p{color:var(--mid);line-height:1.8}
.text-cy{color:var(--cy)}
.center{text-align:center}.section-header.center p{margin:0 auto;text-align:center}
.section-header{margin-bottom:clamp(28px,4vw,48px)}.section-header h2{margin-bottom:10px}.section-header p{max-width:620px;font-size:1rem}

/* BUTTONS */
.btn-primary{display:inline-block;padding:14px 28px;border-radius:10px;font-size:1rem;font-weight:700;background:var(--cy);color:var(--on-accent);transition:all var(--transition)}
.btn-primary:hover{background:var(--cy3);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,180,216,.3)}
.btn-outline{display:inline-block;padding:13px 26px;border-radius:10px;font-size:1rem;font-weight:600;border:1.5px solid var(--bord3);color:var(--text);background:rgba(255,255,255,.05);transition:all var(--transition)}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:var(--cy)}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:0;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(6,15,30,.94) 0%,rgba(6,15,30,.8) 60%,rgba(6,15,30,.64) 100%)}
.hero-content{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:100px clamp(16px,5vw,80px) 72px;width:100%}
.hero h1{max-width:720px;margin-bottom:18px}
.hero-lead{max-width:640px;font-size:1.08rem;margin-bottom:32px;color:var(--text);opacity:.88}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:46px}
.hero-stats{display:flex;gap:clamp(18px,4vw,48px);flex-wrap:wrap}
.hero-stat{display:flex;flex-direction:column;gap:3px;max-width:230px}
.hero-stat strong{font-size:1.5rem;font-weight:800;color:var(--cy);line-height:1.3}
.hero-stat>span{font-size:.82rem;color:var(--mid)}
.stat-unit{display:inline !important;font-size:.95rem}
[data-lang="ar"] .en.stat-unit,[data-lang="en"] .ar.stat-unit{display:none !important}

/* MARQUEE */
.marquee-wrap{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px 0;background:var(--bg2)}
.marquee-track{display:flex;gap:48px;animation:marquee 26s linear infinite;width:max-content;will-change:transform}
.marquee-copy{display:contents}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{font-size:.82rem;font-weight:600;color:var(--text);letter-spacing:.5px;white-space:nowrap}

/* PROBLEM */
.problem-section{background:var(--bg2)}
.problem-img-wrap{position:relative;max-width:760px;margin:0 auto 48px;border-radius:var(--r2);overflow:hidden;border:1px solid var(--border)}
.problem-img-caption{position:absolute;bottom:0;left:0;right:0;padding:14px 20px;background:linear-gradient(transparent,rgba(6,15,30,.9));color:var(--mid);font-size:.85rem;text-align:center}
.prob-pairs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.prob-card,.sol-card{padding:22px;border-radius:var(--r);border:1px solid}
.prob-card{border-color:rgba(239,71,111,.25);background:rgba(239,71,111,.04)}
.sol-card{border-color:rgba(6,214,160,.25);background:rgba(6,214,160,.04)}
.card-icon{width:28px;height:28px;margin-bottom:10px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.prob-card .card-icon{color:var(--rd)}.sol-card .card-icon{color:var(--gr)}
.prob-card h3{color:#ff8fa8;margin-bottom:7px;font-size:1rem}
.sol-card h3{color:var(--gr);margin-bottom:7px;font-size:1rem}
.prob-card p,.sol-card p{font-size:.88rem}

/* HEARTBEAT */
.heartbeat-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;position:relative}
.heartbeat-inner{max-width:900px;margin:0 auto;padding:clamp(28px,5vw,52px) clamp(16px,4vw,48px);display:flex;flex-direction:column;align-items:center;gap:18px}
.heartbeat-ecg{width:100%;max-width:700px;height:60px;opacity:.6}
.heartbeat-ecg svg{width:100%;height:100%}
.ecg-line{stroke-dasharray:1200;stroke-dashoffset:1200;animation:ecg-draw 3s ease forwards infinite}
@keyframes ecg-draw{0%{stroke-dashoffset:1200;opacity:0}10%{opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.4}}
.heartbeat-content{text-align:center}
.heartbeat-quote{font-size:clamp(1.1rem,2.5vw,1.5rem);font-weight:800;color:var(--text);line-height:1.5;margin-bottom:8px}
.heartbeat-sub{font-size:clamp(.88rem,1.8vw,1rem);color:var(--mid)}

/* FEATURES */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat-card{padding:22px;border-radius:var(--r2);border:1px solid var(--border);background:var(--bg3);transition:border-color var(--transition),transform var(--transition);position:relative}
.feat-card:hover{border-color:var(--bord2);transform:translateY(-3px)}
.feat-icon{width:42px;height:42px;padding:9px;border-radius:12px;background:rgba(0,180,216,.12);color:var(--cy);margin-bottom:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feat-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.feat-head .feat-icon{margin-bottom:0;flex-shrink:0}
.feat-head h3{margin:0}
.feat-card p{font-size:.87rem}

/* SMART ADVISOR */
.sa-block{margin-top:40px;padding:24px 26px;border-radius:var(--r2);border:1px solid rgba(255,183,3,.32);background:linear-gradient(135deg,rgba(255,183,3,.08) 0%,rgba(255,183,3,.03) 100%)}
.sa-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sa-icon{width:40px;height:40px;color:var(--am);flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.sa-head-body{flex:1;min-width:200px}
.sa-head-body h3{color:var(--am);font-size:1.15rem;margin-bottom:4px}
.sa-head-body p{font-size:.9rem}
.sa-badge{padding:6px 14px;border-radius:99px;background:rgba(255,183,3,.14);border:1px solid rgba(255,183,3,.35);color:var(--am);font-size:.78rem;font-weight:700;white-space:nowrap;align-self:center}
.sa-items{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sa-item{display:flex;gap:12px;padding:16px;border-radius:var(--r);background:rgba(6,15,30,.45);border:1px solid rgba(255,183,3,.18)}
.sa-item svg{width:26px;height:26px;flex-shrink:0;color:var(--am);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sa-item h4{font-size:.95rem;color:#ffd166;margin-bottom:4px}
.sa-item p{font-size:.84rem}

/* DASHBOARD SAMPLES */
.dashboard-section{background:var(--bg2)}
.tab-bar{display:flex;gap:4px;flex-wrap:wrap;padding-bottom:2px;margin-bottom:22px;border-bottom:1px solid var(--border);overflow-x:auto}
.tab-btn{padding:7px 14px;border-radius:8px 8px 0 0;font-size:.82rem;font-weight:600;color:var(--mid);border-bottom:2px solid transparent;transition:all var(--transition);white-space:nowrap}
.tab-btn.active{color:var(--cy);border-bottom-color:var(--cy);background:rgba(0,180,216,.07)}
.tab-btn:hover:not(.active){color:var(--text);background:var(--glass2)}
.tab-panel{display:none;border-radius:var(--r2);overflow:hidden;border:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.tab-panel.active{display:block}.tab-panel img{width:100%}

/* PRICING */
.pricing-section{background:var(--bg)}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:18px;align-items:stretch}
.price-card{padding:26px 22px;border-radius:var(--r2);border:1.5px solid var(--bord2);background:var(--bg3);display:flex;flex-direction:column}
.price-card.premium-card{border:2px solid var(--am);background:linear-gradient(145deg,rgba(255,183,3,.07) 0%,var(--bg3) 100%)}
.price-name{font-size:1.3rem;font-weight:800;margin-bottom:10px}
.premium-name{color:var(--am)}
.price-final{font-size:1.9rem;font-weight:800;color:var(--text);line-height:1.2}
.price-final span{font-size:.85rem;font-weight:400;color:var(--mid)}
.price-quote{font-size:1.15rem;color:var(--am)}
.price-divider{height:1px;background:var(--border);margin:18px 0}
.price-features{list-style:none;display:flex;flex-direction:column;gap:9px;flex:1}
.price-features li{display:flex;align-items:flex-start;gap:9px;font-size:.88rem;color:var(--mid)}
.price-features li::before{content:"✓";color:var(--gr);font-weight:700;flex-shrink:0}
.price-features li.bold{color:var(--text);font-weight:600}
.price-cta{margin-top:22px;padding:12px;border-radius:10px;font-size:.93rem;font-weight:700;text-align:center;display:block;background:var(--cy);color:var(--on-accent);transition:all var(--transition)}
.price-cta:hover{background:var(--cy3)}
.price-cta.premium{background:var(--am);color:var(--on-accent)}.price-cta.premium:hover{background:#ffc93c}
.pricing-notes{margin-top:24px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.pricing-notes p{font-size:.86rem}
.pricing-notes a{color:var(--cy)}

/* GUIDE STRIP (under the packages) */
.guide-strip{padding:0 clamp(16px,5vw,80px) clamp(56px,7vw,96px);background:var(--bg)}
.guide-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:24px 28px;border-radius:var(--r2);border:1.5px solid var(--bord3);background:linear-gradient(135deg,rgba(0,180,216,.12) 0%,rgba(0,180,216,.04) 100%)}
.guide-icon{width:48px;height:48px;color:var(--cy);flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.guide-text{flex:1;min-width:220px}
.guide-text h2{font-size:1.25rem;margin-bottom:4px}
.guide-text p{font-size:.92rem}
.guide-btn{white-space:nowrap}

/* FOOTER */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:clamp(36px,5vw,64px) clamp(16px,5vw,80px) 28px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1fr auto auto;gap:36px;align-items:start;margin-bottom:32px}
.footer-logo{height:28px;width:auto}
.footer-tagline{font-size:.86rem;margin-top:10px;max-width:300px}
.footer-col h4{font-size:.86rem;font-weight:700;color:var(--text);margin-bottom:12px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.footer-col ul li a{font-size:.86rem;color:var(--mid);transition:color var(--transition)}.footer-col ul li a:hover{color:var(--cy)}
.footer-bottom{padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:.8rem;color:var(--dim)}
.footer-domain{color:var(--cy)}
.privacy-link{color:var(--mid);font-size:.82rem;text-decoration:underline;text-underline-offset:3px}

/* PRIVACY DIALOG */
.privacy{margin:auto;max-width:560px;width:90%;max-height:80vh;padding:28px 32px;border-radius:14px;background:var(--bg4);color:var(--text);border:1px solid var(--bord2)}
.privacy::backdrop{background:rgba(0,0,0,.75)}
.privacy h3{margin-bottom:16px;font-size:1.05rem}
.privacy-body p{font-size:.88rem;line-height:1.85;margin-bottom:12px}
.privacy-body strong{color:var(--text)}
.privacy-body a{color:var(--cy)}
.privacy-close{margin-top:8px;background:var(--cy);color:var(--on-accent);padding:9px 24px;border-radius:8px;font-size:.88rem;font-weight:700}

/* 404 */
.not-found{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px}
.not-found h1{font-size:3rem;color:var(--cy)}

/* KEYBOARD FOCUS */
a:focus-visible,button:focus-visible,[role="tab"]:focus-visible{outline:2px solid var(--cy3);outline-offset:3px;border-radius:6px}

/* RESPONSIVE */
@media(max-width:900px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .sa-items{grid-template-columns:1fr}
  .nav-links{display:none}
  .footer-top{grid-template-columns:1fr}
}
@media(max-width:640px){
  .prob-pairs{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .hero-ctas{flex-direction:column}
  .hero-ctas a{text-align:center}
  .btn-cta{padding:7px 12px;font-size:.8rem}
  .nav-logo img{height:28px}
  .guide-inner{flex-direction:column;align-items:flex-start}
}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  .marquee-track,.ecg-line{animation:none}
  .ecg-line{stroke-dashoffset:0}
  html{scroll-behavior:auto}
  .feat-card:hover,.btn-primary:hover{transform:none}
}