/* =========================================================
   Waathik — master stylesheet
   Shared by every page: base, typography, navigation,
   buttons, status tag, verified badge and footer.
   Page-specific styles live in landing.css, stores.css, store.css
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:#F6F3EC;color:#14212A;font-family:"Almarai","Segoe UI",Tahoma,sans-serif;font-size:16px;line-height:1.8}
a{color:#2D6A99;text-decoration:none}a:hover{color:#1D4F7A}
h1,h2,h3{font-weight:700;margin:0;line-height:1.4}
button,input,select{font-family:inherit}
:focus-visible{outline:2px solid #66A0D6;outline-offset:3px}
.wrap{max-width:1264px;margin:0 auto;padding:0 32px}
/* nav — identical to landing page */
.nav{position:fixed;top:0;left:0;right:0;width:100%;z-index:50;height:88px;padding:0 120px;display:flex;align-items:center;justify-content:space-between;background:rgba(11,24,32,.9);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.1);color:#E9EEF0}
.nav img{height:32px;width:auto;display:block}
.nav nav{display:flex;gap:40px;font-size:15px;font-weight:400;letter-spacing:.2px;white-space:nowrap}
@media (max-width:1520px){.nav{padding:0 64px}.nav nav{gap:22px}}
@media (max-width:1440px){.nav nav{gap:18px;font-size:14px}}
.nav nav a{color:#C9D4DA}.nav nav a:hover{color:#FFFFFF}
.nav nav a[aria-current]{color:#FFFFFF}
.pill-btn{height:46px;padding:0 24px;display:flex;align-items:center;border:1px solid rgba(143,203,136,.55);border-radius:999px;color:#E9EEF0;font-size:15px;font-weight:400;white-space:nowrap}
.pill-btn:hover{color:#FFFFFF;border-color:#8FCB88}
.nav-end{display:flex;align-items:center;gap:12px}
.pill-red{gap:8px;background:#B3261E;border-color:#B3261E;color:#FFFFFF}
.pill-red:hover{background:#8C1D18;border-color:#8C1D18;color:#FFFFFF}
.menu-report svg{flex-shrink:0}

.nav-toggle{display:none;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:transparent;cursor:pointer;position:relative;padding:0}
.nav-toggle span{position:absolute;right:12px;left:12px;height:2px;border-radius:2px;background:#E9EEF0;transition:transform .25s ease,opacity .2s ease,top .25s ease}
.nav-toggle span:nth-child(1){top:14px}.nav-toggle span:nth-child(2){top:21px}.nav-toggle span:nth-child(3){top:28px}
.nav.open .nav-toggle span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){top:21px;transform:rotate(-45deg)}
.menu-cta{display:none}
body.menu-open{overflow:hidden}
.vb{display:inline-block;vertical-align:middle;flex-shrink:0}
/* hero band */
.band{background:#0B1820;color:#E9EEF0;padding:88px 0 0}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;font-size:16px;font-weight:700}
.btn-dark{background:#14212A;color:#FFFFFF}.btn-dark:hover{background:#22384A;color:#FFFFFF}
.btn-green{background:#8FCB88;color:#0B1820}.btn-green:hover{background:#A7D8A1;color:#0B1820}
.btn-line{background:transparent;color:#14212A;border:1px solid #C9C1AF}.btn-line:hover{border-color:#14212A;color:#14212A}
/* status */
.status{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:14px;font-weight:700;background:#E3F2E5;color:#245A2B;white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:#3F7A45;display:block}
.mono{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#0B1820;color:#8FCB88;font-size:22px;font-weight:800}
.ltr{direction:ltr;unicode-bidi:isolate}
/* footer */
.site-footer{background:#0B1820;color:#A9B8C1;padding:56px 0 36px;margin-top:96px;font-size:15px}
.site-footer .wrap{display:flex;flex-direction:column;gap:28px}
.site-footer .top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.site-footer .links{display:flex;gap:28px;flex-wrap:wrap}
.site-footer a{color:#A9B8C1}.site-footer a:hover{color:#FFFFFF}
.site-footer .note{padding:18px 22px;border:1px solid rgba(255,255,255,.12);border-radius:16px;font-size:14px;line-height:1.9}
.site-footer .bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#8596A1;border-top:1px solid rgba(255,255,255,.1);padding-top:22px}
@media (max-width:900px){
 .wrap{padding:0 20px}
}
@media (max-width:1100px){
 .nav{padding:0 20px;height:72px;--navh:72px}.nav img{height:26px}
 .pill-btn{height:40px;padding:0 16px;font-size:14px}
 .nav-end{gap:8px}
 .band{padding-top:72px}
 html{scroll-padding-top:84px}
}
@media (max-width:420px){.nav-end .pill-btn:not(.pill-red){padding:0 12px;font-size:13px}.nav img{height:24px}.nav-toggle{width:40px;height:40px}.nav-toggle span{right:11px;left:11px}.nav-toggle span:nth-child(1){top:12px}.nav-toggle span:nth-child(2){top:19px}.nav-toggle span:nth-child(3){top:26px}.nav.open .nav-toggle span:nth-child(1),.nav.open .nav-toggle span:nth-child(3){top:19px}}
@media (max-width:350px){.nav-end .pill-btn:not(.pill-red){display:none}}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* mobile / tablet menu */
@media (max-width:1300px){
 .nav nav{display:none}
 .nav-toggle{display:block}
 .nav.open{background:#0B1820;-webkit-backdrop-filter:none;backdrop-filter:none}
 .nav.open nav{display:flex;flex-direction:column;gap:0;position:fixed;top:var(--navh,88px);left:0;right:0;bottom:0;padding:12px 20px 32px;background:#0B1820;overflow-y:auto;font-size:20px;animation:menuIn .22s ease-out}
 .nav.open nav a{color:#E9EEF0;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
 .nav.open nav a[aria-current]{color:#8FCB88}
 .nav-end .pill-red{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;gap:0}
 .nav-end .pill-red svg{width:18px;height:18px}
 .nav-end .pill-red .lbl{display:none}
 .nav.open nav .menu-cta+.menu-cta{margin-top:12px}
 .nav.open nav .menu-cta.menu-report{background:#B3261E;color:#FFFFFF;gap:10px;align-items:center}
 .nav.open nav .menu-cta{display:flex;justify-content:center;margin-top:28px;border:0;border-radius:999px;background:#8FCB88;color:#0B1820;font-weight:700;font-size:17px;padding:16px}
}
@media (max-width:1100px){.nav-end .pill-red{width:40px;height:40px}}
@keyframes wtk-spin{to{transform:rotate(360deg)}}
/* ---------- verification certificate (home + store page) ---------- */
.cert{position:relative;display:block;width:420px;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at 50% 38%,#16304A 0%,#0F2232 55%,#0B1820 100%);box-shadow:0 30px 60px rgba(11,24,32,.28),inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.cert::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(143,203,136,.55);animation:certPulse 3.2s ease-out infinite;pointer-events:none}
.cert:hover,.cert:focus-visible{transform:scale(1.03);box-shadow:0 36px 70px rgba(11,24,32,.34),inset 0 0 0 1px rgba(143,203,136,.35)}
.cert-ring1{position:absolute;inset:5%;border-radius:50%;border:1.5px dashed rgba(143,203,136,.55);animation:wtk-spin 60s linear infinite}
.cert-ring2{position:absolute;inset:12%;border-radius:50%;border:1.5px solid rgba(144,196,228,.14);border-top-color:rgba(144,196,228,.85);border-right-color:rgba(143,203,136,.6);animation:wtk-spin 18s linear infinite reverse}
.cert-core{position:absolute;inset:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.cert-ico{width:46%;height:auto;display:block;margin-bottom:4px;filter:drop-shadow(0 6px 18px rgba(125,197,118,.25))}
.cert-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(143,203,136,.16);border:1px solid rgba(143,203,136,.45);color:#B7E0B1;font-size:14px;font-weight:700;line-height:1.4;white-space:nowrap}
.cert-no{font-size:13px;color:#A9B8C1;line-height:1.5;white-space:nowrap}
.cert-no b{display:block;font-family:"Segoe UI",Arial,sans-serif;font-size:15px;color:#FFFFFF;letter-spacing:.5px;direction:ltr;margin-top:2px}
@keyframes certPulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.12);opacity:0}}
@media (max-width:1100px){
 .cert{width:min(300px,78vw)}
 .cert-core{gap:10px}
 .cert-tag{font-size:12px;padding:4px 11px}
 .cert-no{font-size:11px}.cert-no b{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.cert::after,.cert-ring1,.cert-ring2{animation:none}}
.cert.cert-sm{width:300px;flex-shrink:0}
.cert-sm .cert-core{inset:18%;gap:8px}
.cert-sm .cert-ico{width:38%;margin-bottom:2px}
.cert-sm .cert-tag{font-size:12px;padding:4px 11px}
.cert-sm .cert-no{font-size:11px}.cert-sm .cert-no b{font-size:14px}
.cert-sm .cert-valid{font-size:11px}
div.cert:hover{transform:none}
.cert-valid{font-size:12px;color:#8FA2AE;line-height:1.5;white-space:nowrap}
@media (max-width:900px){.cert.cert-sm{width:min(260px,72vw);align-self:center}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}