/* ============================================================
   VideoAnalytics.io — shared stylesheet
   Generated from the site's own pages by build/refactor.
   Derived from: ai-camera-resolution-guide.html
   Covers all 104 pages. Do not hand-edit page <style> blocks;
   edit this file instead.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#0d1117;--ink2:#24292f;--ink3:#57606a;--page:#fff;--page2:#f6f8fa;--blue:#1a5fff;--blue-d:#1348cc;--blue-bg:#dbeafe;--green:#25d366;--line:#d0d7de;--font:'Inter',system-ui,-apple-system,sans-serif;--t:0.18s ease;--r:10px}
html{scroll-behavior:smooth}
body{background:var(--page);color:var(--ink);font-family:var(--font);line-height:1.6;overflow-x:hidden}
body.ar{direction:rtl;text-align:right}
a{color:inherit;text-decoration:none;cursor:pointer}
.nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,0.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__inner{max-width:1280px;margin:0 auto;padding:0 2rem;height:62px;display:flex;align-items:center;gap:1.5rem}
.nav__logo{font-size:1.4rem;font-weight:800;color:var(--ink);letter-spacing:-0.03em;cursor:pointer;white-space:nowrap}
.nav__logo span{color:var(--blue)}
.nav__spacer{flex:1}
.nav__search{display:flex;align-items:center;gap:0.5rem;background:var(--page2);border:1px solid var(--line);border-radius:8px;padding:6px 12px;width:220px}
.nav__search svg{width:15px;height:15px;stroke:var(--ink3);fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.nav__search input{border:none;background:none;font-size:13px;color:var(--ink);outline:none;width:100%;font-family:var(--font)}
.nav__search input::placeholder{color:var(--ink3)}
.lang-btn{background:none;border:1px solid #c8d4e8;border-radius:6px;padding:5px 12px;font-size:13px;color:var(--ink3);cursor:pointer;font-family:var(--font)}
.nav__demo{background:var(--blue);color:#fff;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:600;white-space:nowrap;display:inline-block}
.nav__demo:hover{background:var(--blue-d)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hamburger span{width:22px;height:2px;background:var(--ink3);border-radius:2px}
.mobile-nav{display:none;position:fixed;top:62px;left:0;right:0;bottom:0;background:#fff;z-index:199;padding:1.5rem 2rem;flex-direction:column;gap:0.75rem;border-top:1px solid var(--line);overflow-y:auto}
.mobile-nav.open{display:flex}
.mobile-nav a{font-size:1rem;color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:0.75rem;font-weight:500;cursor:pointer}
.hero{padding:0;height:420px;display:flex;align-items:flex-end;position:relative;overflow:hidden;background:#050d1a center/cover no-repeat}
/* Looping background video. The <video> carries the poster, so the poster is
   only pulled in as a CSS background where the video itself is suppressed. */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(5,13,26,0.92) 0%,rgba(5,13,26,0.4) 45%,rgba(5,13,26,0.6) 100%)}
.hero__inner{max-width:1280px;margin:0 auto;padding:0 2rem 2.5rem;width:100%;position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
  .hero{background-image:url('hero-poster.jpg')}
}
/* Phones get the 64 KB poster instead of the 890 KB video. site.js enforces
   the same cut-off so the video is never even requested at this size. */
@media (max-width:768px){
  .hero__video{display:none}
  .hero{background-image:url('hero-poster.jpg');height:300px}
}
.hero__title{font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:700;color:#fff;line-height:1.3;letter-spacing:-0.01em;max-width:380px;text-shadow:0 2px 12px rgba(0,0,0,0.8),0 1px 3px rgba(0,0,0,0.9)}
.hero__title span{color:#93c5fd}
.page{background:var(--page)}
.section{max-width:1280px;margin:0 auto;padding:3rem 2rem}
.section__header{margin-bottom:1.75rem}
.section__title{font-size:1.35rem;font-weight:700;color:var(--ink);letter-spacing:-0.02em;margin-bottom:0.25rem}
.section__sub{font-size:0.85rem;color:var(--ink3)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color var(--t),box-shadow var(--t);display:flex;flex-direction:column;background:var(--page);cursor:pointer}
.card:hover{border-color:var(--blue);box-shadow:0 4px 20px rgba(0,0,0,0.08)}
.card__img{height:150px;background-size:cover;background-position:center;background-color:#e5e7eb;flex-shrink:0}
.card__body{padding:1rem;flex:1;display:flex;flex-direction:column}
.card__badge{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.4rem}
.card__title{font-size:0.88rem;font-weight:600;color:var(--ink);line-height:1.4;flex:1;margin-bottom:0.5rem;unicode-bidi:plaintext}
.card__read{font-size:12px;color:var(--blue)}
.card-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.card-wide{border:1px solid var(--line);border-radius:12px;padding:1.25rem;transition:border-color 0.18s,box-shadow 0.18s,transform 0.18s;display:flex;gap:1rem;align-items:flex-start;background:var(--page);cursor:pointer}
.card-wide:hover{border-color:transparent;box-shadow:0 8px 32px rgba(0,0,0,0.1);transform:translateY(-2px)}
.card-wide__icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.card-wide__icon svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.card-wide__body{flex:1}
.card-wide__badge{font-size:10px;font-weight:700;color:var(--blue);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.3rem}
.card-wide__title{font-size:0.88rem;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:0.3rem}
.card-wide__read{font-size:12px;color:var(--blue)}
hr.divider{border:none;border-top:1px solid var(--line)}
#homeView{display:block}
#articleView{display:none}
.back-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink3);cursor:pointer;padding:6px 0;border:none;background:none;font-family:var(--font)}
.back-btn:hover{color:var(--blue)}
.back-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.a-hero{height:280px;background-size:cover;background-position:center;position:relative;display:flex;align-items:flex-end;border-radius:12px;overflow:hidden;margin-bottom:2rem}
.a-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(5,13,26,0.9) 0%,rgba(5,13,26,0.3) 100%)}
.a-hero-body{position:relative;z-index:2;padding:1.5rem 2rem}
.a-badge{display:inline-block;background:var(--blue);color:#fff;border-radius:4px;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:0.06em;margin-bottom:0.75rem}
.a-title{font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:700;color:#fff;line-height:1.2;letter-spacing:-0.025em}
.a-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink3)}
.a-meta-stars{color:#f59e0b}
.a-meta-tag{background:var(--blue-bg);color:var(--blue);border-radius:4px;padding:2px 9px;font-size:11px;font-weight:700}
#aC h2{font-size:1.35rem;font-weight:700;color:var(--ink);margin:2.25rem 0 0.75rem;letter-spacing:-0.015em;line-height:1.3}
#aC h3{font-size:1.05rem;font-weight:600;color:var(--ink);margin:1.5rem 0 0.5rem}
#aC p{font-size:0.97rem;color:var(--ink2);margin-bottom:1.1rem;line-height:1.85}
#aC ul,#aC ol{margin:0.75rem 0 1.1rem 1.5rem;color:var(--ink2);font-size:0.97rem}
#aC li{margin-bottom:0.5rem;line-height:1.7}
#aC strong{color:var(--ink);font-weight:600}
#aC .callout{background:var(--blue-bg);border-left:4px solid var(--blue);border-radius:0 8px 8px 0;padding:1rem 1.25rem;margin:1.75rem 0;font-size:0.92rem;color:var(--ink2);line-height:1.7}
#aC .callout strong{color:var(--blue);display:block;margin-bottom:0.35rem;font-size:0.82rem;text-transform:uppercase;letter-spacing:0.06em}
#aC .stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.75rem 0;background:var(--page2);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem}
#aC .stat{text-align:center}
#aC .stat__num{font-size:1.7rem;font-weight:700;color:var(--blue);line-height:1}
#aC .stat__label{font-size:11px;color:var(--ink3);margin-top:5px;line-height:1.4}
#aC .comparison-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.88rem;overflow-x:auto;display:block}
#aC .comparison-table th{background:var(--ink);color:#fff;padding:10px 14px;text-align:left;font-weight:600;font-size:12px}
#aC .comparison-table td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:top}
#aC .comparison-table tr:nth-child(even) td{background:var(--page2)}
#aC .tick{color:#22c55e;font-weight:700}
#aC .cross{color:#ef4444;font-weight:700}
#aC .cta-box{background:linear-gradient(135deg,#0a1628,#0f2a50);border-radius:12px;padding:2rem;margin:2.5rem 0;text-align:center}
#aC .cta-box h3{color:#fff;font-size:1.1rem;margin-bottom:0.5rem}
#aC .cta-box p{color:rgba(255,255,255,0.6);font-size:0.88rem;margin-bottom:1.25rem;line-height:1.6}
#aC .cta-box__btns{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap}
#aC .btn-primary{background:var(--blue);color:#fff;border-radius:8px;padding:10px 22px;font-size:13px;font-weight:600;display:inline-block}
#aC .btn-wa{background:var(--green);color:#fff;border-radius:8px;padding:10px 22px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
#aC .related{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
#aC .related h2{font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:1.25rem}
#aC .related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
#aC .related-card{border:1px solid var(--line);border-radius:var(--r);padding:1rem;cursor:pointer;background:var(--page);display:block}
#aC .related-card:hover{border-color:var(--blue)}
#aC .related-card__badge{font-size:10px;font-weight:700;color:var(--blue);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:0.4rem}
#aC .related-card__title{font-size:0.88rem;font-weight:600;color:var(--ink);line-height:1.4}
#aC .related-card__read{font-size:12px;color:var(--blue);margin-top:0.5rem}
#aC .breadcrumb{display:none}
#aC .article-wrap{max-width:800px}
#aC .article-hero{display:none}
#aC .article-meta{display:none}
.cta-band{background:linear-gradient(135deg,#0a1628,#0f2a50);padding:3.5rem 2rem;text-align:center}
.cta-band__inner{max-width:600px;margin:0 auto}
.cta-band h2{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:0.6rem}
.cta-band p{color:rgba(255,255,255,0.55);font-size:0.9rem;margin-bottom:1.75rem;line-height:1.65}
.cta-btns{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap}
.btn-p{background:var(--blue);color:#fff;border-radius:8px;padding:11px 24px;font-size:13px;font-weight:600;display:inline-block}
.btn-wa2{background:var(--green);color:#fff;border-radius:8px;padding:11px 24px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.wa-float{position:fixed;bottom:1.5rem;right:1.5rem;z-index:300;width:54px;height:54px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,0.4)}
footer{background:var(--ink);color:rgba(255,255,255,0.6);padding:3rem 2rem 2rem}
.fi{max-width:1280px;margin:0 auto}
.ft{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.5rem}
.fb{font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:-0.02em}
.fb span{color:#5b9fff}
.fp{font-size:0.8rem;color:rgba(255,255,255,0.4);line-height:1.6;max-width:220px;margin-top:0.5rem}
.fc h4{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:0.9rem}
.fc a{display:block;font-size:12px;color:rgba(255,255,255,0.5);margin-bottom:0.35rem;cursor:pointer}
.fc a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,0.08);padding-top:1.25rem}
.fbot p{font-size:11px;color:rgba(255,255,255,0.3)}
@media(max-width:1024px){.card-grid{grid-template-columns:repeat(2,1fr)}.ft{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.nav__search,.nav__demo{display:none}.hamburger{display:flex}.card-grid{grid-template-columns:1fr}.card-grid-2{grid-template-columns:1fr}.card-wide{flex-direction:column}.ft{grid-template-columns:1fr}#aC .stats-row{grid-template-columns:1fr}}
.contact-section{background:linear-gradient(135deg,#020810 0%,#071428 100%);padding:5rem 2rem}
.contact-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.contact-label{font-size:10px;font-weight:700;letter-spacing:0.12em;color:#1a5fff;text-transform:uppercase;margin-bottom:1rem}
.contact-title{font-size:clamp(1.5rem,2.5vw,2rem);font-weight:700;color:#fff;line-height:1.2;letter-spacing:-0.02em;margin-bottom:0.75rem}
.contact-sub{font-size:0.9rem;color:rgba(255,255,255,0.5);line-height:1.7;margin-bottom:2rem}
.contact-details{display:flex;flex-direction:column;gap:1.25rem}
.contact-detail-item{display:flex;align-items:flex-start;gap:1rem}
.contact-detail-icon{width:36px;height:36px;background:rgba(26,95,255,0.15);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-detail-icon svg{width:16px;height:16px;stroke:#60a5fa;fill:none;stroke-width:2;stroke-linecap:round}
.contact-detail-label{font-size:11px;color:rgba(255,255,255,0.4);margin-bottom:2px;text-transform:uppercase;letter-spacing:0.06em}
.contact-detail-value{font-size:0.88rem;color:#fff;font-weight:500}
.contact-detail-value a{color:#60a5fa}
.contact-form{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{margin-bottom:1.1rem}
.form-label{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,0.6);margin-bottom:0.4rem;letter-spacing:0.02em}
.form-input{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:10px 14px;font-size:13px;color:#fff;font-family:var(--font);outline:none;transition:border-color 0.15s}
.form-input:focus{border-color:#1a5fff;background:rgba(26,95,255,0.08)}
.form-input::placeholder{color:rgba(255,255,255,0.25)}
.form-select{cursor:pointer;-webkit-appearance:none;appearance:none}
.form-textarea{resize:vertical;min-height:100px}
.form-submit{width:100%;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:13px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);transition:background 0.15s;margin-top:0.25rem}
.form-submit:hover{background:var(--blue-d)}
.form-success{display:flex;align-items:center;gap:0.75rem;color:#22c55e;font-size:14px;font-weight:500;margin-top:1rem;padding:1rem;background:rgba(34,197,94,0.1);border-radius:8px;border:1px solid rgba(34,197,94,0.2)}
.form-success svg{width:20px;height:20px;stroke:#22c55e;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.diagrams-section{background:var(--page2);padding:5rem 2rem;border-top:1px solid var(--line)}
.diagrams-inner{max-width:1280px;margin:0 auto}
.diagrams-header{text-align:center;margin-bottom:3rem}
.section-eyebrow{font-size:10px;font-weight:700;letter-spacing:0.12em;color:var(--blue);text-transform:uppercase;margin-bottom:0.75rem}
.diagrams-title{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:700;color:var(--ink);letter-spacing:-0.025em;margin-bottom:0.6rem}
.diagrams-sub{font-size:0.9rem;color:var(--ink3);max-width:480px;margin:0 auto}
.diagrams-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.diagram-card{background:var(--page);border:1px solid var(--line);border-radius:16px;padding:1.75rem;transition:box-shadow 0.2s}
.diagram-card:hover{box-shadow:0 8px 32px rgba(0,0,0,0.08)}
.diagram-card__label{font-size:9px;font-weight:700;letter-spacing:0.1em;color:var(--blue);text-transform:uppercase;margin-bottom:0.5rem}
.diagram-card__title{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:0.35rem;letter-spacing:-0.01em}
.diagram-card__sub{font-size:0.82rem;color:var(--ink3);margin-bottom:1.25rem;line-height:1.5}
.diagram-viz{border-radius:10px;overflow:hidden}
.diagram-svg{width:100%;height:auto;display:block}
@media(max-width:900px){.diagrams-grid{grid-template-columns:1fr}.contact-inner{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}
.card-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.card-wide {
  border:1px solid var(--line); border-radius:14px; padding:1.4rem;
  display:flex; gap:1rem; align-items:flex-start; background:var(--page);
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform 0.25s cubic-bezier(.22,.68,0,1.2), box-shadow 0.25s, border-color 0.2s;
}
.card-wide::before {
  content:''; position:absolute; inset:0; opacity:0;
  transition:opacity 0.3s;
  border-radius:14px;
}
.card-wide:hover { transform:translateY(-4px) scale(1.01); box-shadow:0 16px 40px rgba(0,0,0,0.13); border-color:transparent; }
.card-wide:nth-child(1)::before { background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.06)); }
.card-wide:nth-child(2)::before { background:linear-gradient(135deg,rgba(245,158,11,0.08),rgba(239,68,68,0.06)); }
.card-wide:nth-child(3)::before { background:linear-gradient(135deg,rgba(16,185,129,0.08),rgba(6,182,212,0.06)); }
.card-wide:nth-child(4)::before { background:linear-gradient(135deg,rgba(59,130,246,0.08),rgba(99,102,241,0.06)); }
.card-wide:nth-child(5)::before { background:linear-gradient(135deg,rgba(239,68,68,0.08),rgba(249,115,22,0.06)); }
.card-wide:nth-child(6)::before { background:linear-gradient(135deg,rgba(139,92,246,0.08),rgba(236,72,153,0.06)); }
.card-wide:hover::before { opacity:1; }
.card-wide__icon {
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; position:relative; z-index:1;
  transition:transform 0.25s cubic-bezier(.22,.68,0,1.2), box-shadow 0.25s;
}
.card-wide:hover .card-wide__icon { transform:scale(1.12) rotate(-4deg); box-shadow:0 8px 20px rgba(0,0,0,0.2); }
.card-wide__icon svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; position:relative; z-index:1; }
.card-wide__body { flex:1; position:relative; z-index:1; }
.card-wide__badge { font-size:10px; font-weight:700; color:var(--blue); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.3rem; }
.card-wide__title { font-size:0.9rem; font-weight:600; color:var(--ink); line-height:1.4; margin-bottom:0.3rem; }
.card-wide__read { font-size:12px; color:var(--blue); opacity:0; transform:translateX(-6px); transition:opacity 0.2s, transform 0.2s; display:inline-flex; align-items:center; gap:4px; }
.card-wide__read::after { content:'→'; }
.card-wide:hover .card-wide__read { opacity:1; transform:translateX(0); }
.retail-anim-section { background:linear-gradient(180deg,#020810 0%,#071428 100%); padding:5rem 2rem; overflow:hidden; }
.retail-anim-inner { max-width:1280px; margin:0 auto; }
.retail-anim-header { text-align:center; margin-bottom:3rem; }
.retail-anim-header .section-eyebrow { color:#60a5fa; }
.retail-anim-title { font-size:clamp(1.5rem,2.5vw,2rem); font-weight:700; color:#fff; letter-spacing:-0.025em; margin-bottom:0.6rem; }
.retail-anim-sub { font-size:0.9rem; color:rgba(255,255,255,0.5); max-width:520px; margin:0 auto; }
.retail-dashboard { display:grid; grid-template-columns:1fr 1.8fr; gap:2rem; align-items:center; }
.retail-metrics { display:flex; flex-direction:column; gap:1rem; }
.r-metric { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:1.1rem 1.25rem; }
.r-metric__label { font-size:10px; font-weight:700; letter-spacing:0.08em; color:rgba(255,255,255,0.4); text-transform:uppercase; margin-bottom:0.35rem; }
.r-metric__value { font-size:1.6rem; font-weight:700; color:#fff; letter-spacing:-0.02em; line-height:1; }
.r-metric__delta { font-size:11px; font-weight:600; margin-top:4px; }
.r-metric__delta.up { color:#22c55e; }
.r-metric__delta.down { color:#ef4444; }
.r-metric__bar { height:4px; background:rgba(255,255,255,0.08); border-radius:2px; margin-top:8px; overflow:hidden; }
.r-metric__bar-fill { height:100%; border-radius:2px; animation:barGrow 2s ease-out forwards; }
@keyframes barGrow { from{width:0} }
.retail-viz { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:16px; padding:1.5rem; }
.retail-viz__title { font-size:12px; font-weight:600; color:rgba(255,255,255,0.5); margin-bottom:1.25rem; letter-spacing:0.04em; }
.heatmap-grid { display:grid; grid-template-columns:40px repeat(8,1fr); gap:3px; }
.heatmap-label { font-size:9px; color:rgba(255,255,255,0.3); display:flex; align-items:center; }
.heatmap-cell { height:28px; border-radius:3px; animation:cellPulse 3s ease-in-out infinite; }
@keyframes cellPulse { 0%,100%{opacity:0.7} 50%{opacity:1} }
.flow-bars { margin-top:1.5rem; }
.flow-bar-row { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.6rem; }
.flow-bar-label { font-size:10px; color:rgba(255,255,255,0.4); width:80px; flex-shrink:0; }
.flow-bar-track { flex:1; height:8px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; }
.flow-bar-fill { height:100%; border-radius:4px; animation:barGrow 2.5s ease-out forwards; }
.flow-bar-val { font-size:10px; color:rgba(255,255,255,0.5); width:36px; text-align:right; flex-shrink:0; }
@keyframes dash-flow { to { stroke-dashoffset: -20; } }
@keyframes pulse-ring { 0%,100%{r:6;opacity:0.8} 50%{r:9;opacity:0.3} }
@keyframes glow-pulse { 0%,100%{opacity:0.6} 50%{opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.section { animation:fadeUp 0.5s ease both; }
.card { transition:border-color 0.18s,box-shadow 0.18s,transform 0.2s; }
.card:hover { transform:translateY(-3px); }
@media(max-width:900px){ .retail-dashboard{grid-template-columns:1fr} }
.roi-strip { background:linear-gradient(135deg,#020810,#071428); padding:4rem 2rem; }
.roi-strip__inner { max-width:1280px; margin:0 auto; }
.roi-strip__label { font-size:10px; font-weight:700; letter-spacing:0.12em; color:#1a5fff; text-transform:uppercase; text-align:center; margin-bottom:2.5rem; }
.roi-counters { display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; }
.roi-counter { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:14px; padding:1.5rem 1.25rem; text-align:center; transition:border-color 0.2s, transform 0.2s; }
.roi-counter:hover { border-color:rgba(26,95,255,0.4); transform:translateY(-3px); }
.roi-counter__num { font-size:2.2rem; font-weight:800; color:#fff; letter-spacing:-0.03em; line-height:1; margin-bottom:0.5rem; font-variant-numeric:tabular-nums; }
.roi-counter__desc { font-size:11px; color:rgba(255,255,255,0.45); line-height:1.4; margin-bottom:0.75rem; }
.roi-counter__bar { height:4px; background:rgba(255,255,255,0.07); border-radius:2px; overflow:hidden; }
.roi-counter__fill { height:100%; border-radius:2px; width:0; transition:width 2s cubic-bezier(.22,.68,0,1); }
.pipeline-section { background:linear-gradient(180deg,#070310 0%,#0a0520 100%); padding:5rem 2rem; }
.pipeline-inner { max-width:1280px; margin:0 auto; }
.pipeline-header { text-align:center; margin-bottom:3.5rem; }
.pipeline-title { font-size:clamp(1.5rem,2.5vw,2rem); font-weight:700; color:#fff; letter-spacing:-0.025em; margin-bottom:0.6rem; }
.pipeline-sub { font-size:0.9rem; color:rgba(255,255,255,0.45); max-width:480px; margin:0 auto; }
.pipeline-flow { display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding-bottom:1rem; }
.pipe-step { flex:1; min-width:160px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:1.25rem; opacity:0; transform:translateY(20px); transition:opacity 0.5s, transform 0.5s, border-color 0.2s, box-shadow 0.2s; }
.pipe-step.visible { opacity:1; transform:translateY(0); }
.pipe-step:hover { border-color:rgba(124,58,237,0.5); box-shadow:0 8px 32px rgba(124,58,237,0.15); }
.pipe-step__icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.pipe-step__icon svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pipe-step__num { font-size:9px; font-weight:700; letter-spacing:0.12em; color:rgba(255,255,255,0.25); margin-bottom:0.35rem; }
.pipe-step__title { font-size:0.9rem; font-weight:700; color:#fff; margin-bottom:0.4rem; letter-spacing:-0.01em; }
.pipe-step__desc { font-size:11px; color:rgba(255,255,255,0.45); line-height:1.6; margin-bottom:0.6rem; }
.pipe-step__tag { display:inline-block; background:rgba(124,58,237,0.15); color:#a78bfa; border-radius:4px; padding:2px 8px; font-size:10px; font-weight:600; }
.pipe-arrow { display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:1.5rem; flex-shrink:0; width:40px; position:relative; }
.pipe-arrow-svg { width:40px; height:24px; overflow:visible; }
.pipe-data-dot { width:8px; height:8px; background:#7c3aed; border-radius:50%; margin-top:6px; animation:dotPulse 1.5s ease-in-out infinite; box-shadow:0 0 8px #7c3aed; }
@keyframes dotPulse { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.4);opacity:1} }
.pipeline-bar-wrap { display:flex; align-items:center; gap:1rem; margin-top:2.5rem; max-width:600px; margin-left:auto; margin-right:auto; }
.pipeline-bar-label { font-size:11px; color:rgba(255,255,255,0.35); white-space:nowrap; }
.pipeline-bar-track { flex:1; height:6px; background:rgba(255,255,255,0.07); border-radius:3px; overflow:hidden; }
.pipeline-bar-fill { height:100%; width:0%; background:linear-gradient(90deg,#7c3aed,#ec4899,#22c55e); border-radius:3px; transition:width 0.05s linear; }
.pipeline-bar-ms { font-size:11px; color:#a78bfa; font-weight:700; width:36px; text-align:right; font-variant-numeric:tabular-nums; }
svg defs { display:none; }
@media(max-width:900px) { .roi-counters{grid-template-columns:repeat(2,1fr)} .pipeline-flow{flex-direction:column} .pipe-arrow{transform:rotate(90deg)} }
@media(max-width:640px) { .roi-counters{grid-template-columns:1fr 1fr} }
.globe-section { background:linear-gradient(180deg,#020810 0%,#050e1e 100%); padding:5rem 2rem; }
.globe-inner { max-width:1280px; margin:0 auto; }
.globe-header { text-align:center; margin-bottom:3rem; }
.globe-title { font-size:clamp(1.5rem,2.5vw,2rem); font-weight:700; color:#fff; letter-spacing:-0.025em; margin-bottom:0.6rem; }
.globe-sub { font-size:0.9rem; color:rgba(255,255,255,0.45); max-width:480px; margin:0 auto; }
.globe-layout { display:grid; grid-template-columns:1.6fr 1fr; gap:2.5rem; align-items:center; }
.globe-map-wrap { border-radius:14px; overflow:hidden; border:1px solid rgba(26,95,255,0.15); }
.globe-map-svg { width:100%; height:auto; display:block; }
.globe-cards { display:flex; flex-direction:column; gap:0.75rem; }
.globe-card { display:flex; align-items:center; gap:0.9rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:0.9rem 1rem; transition:border-color 0.2s,transform 0.2s,background 0.2s; cursor:default; }
.globe-card:hover { border-color:var(--accent); background:rgba(255,255,255,0.05); transform:translateX(4px); }
.globe-card__dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; animation:dotPulse 2s ease-in-out infinite; box-shadow:0 0 8px var(--accent); }
.globe-card__body { flex:1; }
.globe-card__country { font-size:12px; font-weight:700; color:#fff; margin-bottom:2px; }
.globe-card__stat { font-size:11px; color:rgba(255,255,255,0.4); margin-bottom:5px; }
.globe-card__num { font-size:1.1rem; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.globe-card__tags { display:flex; gap:4px; flex-wrap:wrap; }
.globe-card__tags span { background:rgba(255,255,255,0.06); border-radius:3px; padding:1px 7px; font-size:9px; color:rgba(255,255,255,0.45); font-weight:600; }
.globe-live-box { display:flex; align-items:center; gap:0.6rem; background:rgba(34,197,94,0.06); border:1px solid rgba(34,197,94,0.15); border-radius:10px; padding:0.75rem 1rem; font-size:11px; color:rgba(255,255,255,0.5); margin-top:0.25rem; }
.globe-live-dot { width:7px; height:7px; background:#22c55e; border-radius:50%; flex-shrink:0; animation:dotPulse 1s ease-in-out infinite; box-shadow:0 0 6px #22c55e; }
@media(max-width:900px){ .globe-layout{grid-template-columns:1fr} }
body.ar .card__title, body.ar .card__read, body.ar .card__badge { text-align:right; }
body.ar .section__title, body.ar .section__sub { text-align:right; }
body.ar .pipeline-flow { flex-direction: row-reverse; }
body.ar .pipe-arrow svg { transform: scaleX(-1); }
body.ar .globe-card:hover { transform: translateX(-4px); }
body.ar .card-wide__read { transform: translateX(6px); }
body.ar .card-wide:hover .card-wide__read { transform: translateX(0); }
body.ar .contact-inner { direction: rtl; }
body.ar .form-row { direction: rtl; }
body.ar .retail-dashboard { direction: rtl; }
body.ar #aC ul, body.ar #aC ol { margin-left: 0; margin-right: 1.5rem; }
body.ar .callout { border-left: none; border-right: 4px solid var(--blue); border-radius: 8px 0 0 8px; }
body.ar .back-btn { flex-direction: row-reverse; }
body.ar .back-btn svg { transform: scaleX(-1); }
.article-page{max-width:860px;margin:0 auto;padding:2.5rem 2rem 4rem}
.a-hero{height:320px;background-size:cover;background-position:center;position:relative;display:flex;align-items:flex-end;border-radius:12px;overflow:hidden;margin-bottom:2rem}
.a-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(5,13,26,0.92) 0%,rgba(5,13,26,0.25) 100%)}
.a-hero-body{position:relative;z-index:2;padding:1.75rem 2rem}
.a-badge{display:inline-block;background:var(--blue);color:#fff;border-radius:4px;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:0.06em;margin-bottom:0.75rem}
.a-title{font-size:clamp(1.35rem,2.8vw,2rem);font-weight:700;color:#fff;line-height:1.2;letter-spacing:-0.025em}
.a-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:1.25rem 0 2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink3)}
.a-meta-stars{color:#f59e0b}
.a-meta-tag{background:var(--blue-bg);color:var(--blue);border-radius:4px;padding:2px 9px;font-size:11px;font-weight:700}
.breadcrumb-nav{font-size:13px;color:var(--ink3);margin-bottom:1.5rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.breadcrumb-nav a{color:var(--ink3)}
.breadcrumb-nav a:hover{color:var(--blue)}
.breadcrumb-nav .sep{color:var(--line)}
.related-section{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.related-section h2{font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:1.25rem}
.related-grid-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.related-card{border:1px solid var(--line);border-radius:var(--r);padding:1rem;display:block;text-decoration:none;background:var(--page)}
.related-card:hover{border-color:var(--blue)}
.related-card__badge{font-size:10px;font-weight:700;color:var(--blue);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:0.4rem}
.related-card__title{font-size:0.88rem;font-weight:600;color:var(--ink);line-height:1.4}
.related-card__read{font-size:12px;color:var(--blue);margin-top:0.5rem}
#aC h2{font-size:1.35rem;font-weight:700;color:var(--ink);margin:2.25rem 0 0.75rem;letter-spacing:-0.015em;line-height:1.3}
#aC h3{font-size:1.05rem;font-weight:600;color:var(--ink);margin:1.5rem 0 0.5rem}
#aC p{font-size:0.97rem;color:var(--ink2);margin-bottom:1.1rem;line-height:1.85}
#aC ul,#aC ol{margin:0.75rem 0 1.1rem 1.5rem;color:var(--ink2);font-size:0.97rem}
#aC li{margin-bottom:0.5rem;line-height:1.7}
#aC strong{color:var(--ink);font-weight:600}
#aC .callout{background:var(--blue-bg);border-left:4px solid var(--blue);border-radius:0 8px 8px 0;padding:1rem 1.25rem;margin:1.75rem 0;font-size:0.92rem;color:var(--ink2);line-height:1.7}
#aC .callout strong{color:var(--blue);display:block;margin-bottom:0.35rem;font-size:0.82rem;text-transform:uppercase;letter-spacing:0.06em}
#aC .stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.75rem 0;background:var(--page2);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem}
#aC .stat{text-align:center}
#aC .stat__num{font-size:1.7rem;font-weight:700;color:var(--blue);line-height:1}
#aC .stat__label{font-size:11px;color:var(--ink3);margin-top:5px;line-height:1.4}
#aC .comparison-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.88rem;display:block;overflow-x:auto}
#aC .comparison-table th{background:var(--ink);color:#fff;padding:10px 14px;text-align:left;font-weight:600;font-size:12px}
#aC .comparison-table td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:top}
#aC .comparison-table tr:nth-child(even) td{background:var(--page2)}
#aC .tick{color:#22c55e;font-weight:700}
#aC .cross{color:#ef4444;font-weight:700}
#aC .cta-box{background:linear-gradient(135deg,#0a1628,#0f2a50);border-radius:12px;padding:2rem;margin:2.5rem 0;text-align:center}
#aC .cta-box h3{color:#fff;font-size:1.1rem;margin-bottom:0.5rem}
#aC .cta-box p{color:rgba(255,255,255,0.6);font-size:0.88rem;margin-bottom:1.25rem;line-height:1.6}
#aC .cta-box__btns{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap}
#aC .btn-primary{background:var(--blue);color:#fff;border-radius:8px;padding:10px 22px;font-size:13px;font-weight:600;display:inline-block;text-decoration:none}
#aC .btn-wa{background:#25d366;color:#fff;border-radius:8px;padding:10px 22px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.faq-item{border-bottom:1px solid var(--line);padding:1.1rem 0}
.faq-item:last-child{border-bottom:none}
.faq-q{font-size:0.97rem;font-weight:600;color:var(--ink);margin-bottom:0.5rem}
.faq-a{font-size:0.93rem;color:var(--ink2);line-height:1.75}
body.ar #aC ul,body.ar #aC ol{margin-left:0;margin-right:1.5rem}
body.ar .callout{border-left:none;border-right:4px solid var(--blue);border-radius:8px 0 0 8px}
@media (max-width:768px){
  .article-page{padding:1.5rem 1.25rem 3rem}
  .a-hero{height:200px;border-radius:8px}
  .a-hero-body{padding:1rem 1.25rem}
  .a-title{font-size:1.15rem}
  .related-grid-wrap{grid-template-columns:1fr}
  #aC .comparison-table{display:block;overflow-x:auto}
  #aC .stats-row{grid-template-columns:1fr 1fr}
  #aC .cta-box__btns{flex-direction:column;align-items:stretch}
  #aC .btn-primary,#aC .btn-wa{text-align:center;justify-content:center}
}

/* --- page-specific additions (404, etc.) --- */
.not-found-wrap{max-width:560px;margin:8rem auto;padding:2rem;text-align:center}
.not-found-wrap h1{font-size:5rem;font-weight:800;color:var(--blue);line-height:1;margin-bottom:0.5rem}
.not-found-wrap h2{font-size:1.35rem;font-weight:700;color:var(--ink);margin-bottom:0.75rem}
.not-found-wrap p{color:var(--ink3);margin-bottom:2rem;line-height:1.7}
.not-found-wrap a.btn{background:var(--blue);color:#fff;border-radius:8px;padding:12px 28px;font-size:14px;font-weight:600;display:inline-block}