:root{
    --blue:#44a8f2; --blue-d:#2b93df; --blue-l:#eaf6ff;
    --ink:#121212; --ink2:#333; --gray:#666; --gray2:#999; --gray3:#bbb;
    --line:#e5e5e5; --line2:#eee; --panel:#f6f8fa; --white:#fff; --orange:#fe950f;
    --wrap:1240px; --h:60px;
    --shadow:0 18px 40px -26px rgba(18,18,18,.35);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--white);color:var(--ink);font-family:Inter,Arial,'Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif;
    font-size:14.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
  html[dir="rtl"] body{font-family:'Segoe UI',Tahoma,Arial,'Noto Naskh Arabic',sans-serif;line-height:1.9}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
  .os{font-family:'Oswald',Impact,Arial,sans-serif;letter-spacing:.02em}
  h1,h2,h3{margin:0;font-weight:700;line-height:1.15}
  p{margin:0}

  /* topbar */
  .topbar{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line2);position:sticky;top:0;z-index:40;backdrop-filter:blur(8px)}
  .topbar .wrap{display:flex;align-items:center;gap:20px;height:var(--h)}
  .brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;white-space:nowrap;letter-spacing:-.01em}
  .brand .mark{width:30px;height:30px;flex:none;fill:var(--ink)}
  .brand .lx{background:var(--blue);color:#fff;font-family:'Oswald',Arial,sans-serif;font-weight:600;font-size:15px;
    padding:3px 8px;border-radius:3px;letter-spacing:.1em}
  .brand small{color:var(--gray2);font-weight:400;font-size:10.5px;letter-spacing:.16em;display:block}
  .navlinks{display:flex;gap:2px;margin-inline-start:8px}
  .navlinks a{font-size:13.5px;color:var(--ink2);padding:8px 12px;border-radius:4px;transition:.16s;white-space:nowrap}
  .navlinks a:hover{color:var(--blue);background:var(--blue-l)}
  .search{margin-inline-start:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:4px;
    padding:7px 11px;background:#fafbfc;width:280px;max-width:32vw}
  .search svg{width:15px;height:15px;flex:none;stroke:var(--gray2);fill:none;stroke-width:2}
  .search input{border:0;background:none;outline:none;font:inherit;font-size:13px;width:100%;color:var(--ink)}
  .langs{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;flex:none}
  .langs button{background:#fff;border:0;color:var(--gray);font:inherit;font-size:11.5px;font-weight:700;
    padding:7px 9px;cursor:pointer;letter-spacing:.04em;transition:.16s}
  .langs button+button{border-inline-start:1px solid var(--line)}
  .langs button:hover{color:var(--blue)}
  .langs button.on{color:#fff;background:var(--blue)}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:4px;font-size:13.5px;font-weight:700;
    padding:11px 20px;cursor:pointer;border:1px solid transparent;transition:.18s;white-space:nowrap;font-family:inherit}
  .btn-p{background:var(--blue);color:#fff}
  .btn-p:hover{background:var(--blue-d);box-shadow:0 12px 24px -14px rgba(68,168,242,.9)}
  .btn-g{border-color:var(--line);color:var(--ink2);background:#fff}
  .btn-g:hover{border-color:var(--blue);color:var(--blue)}
  .btn-sm{padding:8px 14px;font-size:12.5px}

  /* hero */
  .hero{background:#fff;border-bottom:1px solid var(--line2);position:relative;overflow:hidden}
  .hero-bg{position:absolute;inset:0;z-index:0}
  .hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;min-width:100%;min-height:100%}
  .hero-bg .veil{position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(251,253,255,.92) 0%,rgba(250,253,255,.78) 42%,rgba(255,255,255,.9) 100%)}
  .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    background-image:linear-gradient(rgba(68,168,242,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(68,168,242,.06) 1px,transparent 1px);
    background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 70% at 70% 0%,#000,transparent 80%)}
  .hero .wrap{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:64px;z-index:3}
  @media (prefers-reduced-motion: reduce){.hero-bg video{display:none}}
  @media(max-width:900px){.hero-bg .veil{background:linear-gradient(180deg,rgba(251,253,255,.94),rgba(255,255,255,.92))}}
  .kick{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:16px;
    display:flex;align-items:center;gap:10px}
  .kick::before{content:"";width:26px;height:2px;background:var(--blue);flex:none}
  .hero h1{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.02em}
  .hero h1 em{font-style:normal;color:var(--blue)}
  .hero .lead{color:var(--gray);font-size:16px;max-width:590px;margin-top:18px}
  .hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line2)}
  .stat b{font-family:'Oswald',Arial,sans-serif;font-size:26px;font-weight:600;color:var(--ink);display:block;line-height:1.1}
  .stat span{font-size:11.5px;color:var(--gray2);letter-spacing:.02em}
  .heroart{border:1px solid var(--line2);border-radius:6px;background:#fff;padding:18px;box-shadow:var(--shadow);position:relative}
  .heroart img{width:100%;height:330px;object-fit:contain}
  .heroart .tag{position:absolute;top:14px;inset-inline-start:14px;background:var(--blue);color:#fff;font-family:'Oswald',Arial,sans-serif;
    font-size:11.5px;letter-spacing:.1em;padding:4px 10px;border-radius:3px;text-transform:uppercase}
  .heroart .cap{border-top:1px solid var(--line2);margin-top:12px;padding-top:12px;font-size:12.5px;color:var(--gray);display:flex;justify-content:space-between;gap:10px}

  /* sections */
  section{padding:74px 0}
  .sec-head{margin-bottom:34px;max-width:720px}
  .sec-head h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.01em}
  .sec-head p{color:var(--gray);margin-top:12px;font-size:15px}
  .sec-head .seclink{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:700;color:var(--blue)}
  .sec-head .seclink:hover{text-decoration:underline}

  /* category cards */
  .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .cat{border:1px solid var(--line2);border-radius:5px;overflow:hidden;background:#fff;transition:.2s;display:flex;flex-direction:column}
  .cat:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-3px)}
  .cat .img{aspect-ratio:16/10;background:#fafcfe;display:flex;align-items:center;justify-content:center;padding:16px;border-bottom:1px solid var(--line2)}
  .cat .img img{max-height:100%;width:auto;object-fit:contain;transition:.3s}
  .cat:hover .img img{transform:scale(1.04)}
  .cat .b{padding:16px 16px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
  .cat h3{font-family:'Oswald',Arial,sans-serif;font-size:18px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;display:flex;align-items:baseline;gap:7px}
  .cat h3 em{font-style:normal;color:var(--blue);font-size:12.5px;font-family:Inter,Arial,sans-serif;font-weight:700}
  .chips{display:flex;flex-wrap:wrap;gap:6px}
  .chips button,.chips a{font:inherit;font-size:11.5px;font-weight:600;color:var(--ink2);background:#f4f8fc;border:1px solid var(--line2);
    border-radius:999px;padding:4px 11px;cursor:pointer;transition:.15s;display:inline-flex;gap:5px;align-items:baseline}
  .chips button i,.chips a i{font-style:normal;color:var(--gray3);font-size:10.5px}
  .chips button:hover,.chips a:hover{border-color:var(--blue);color:var(--blue);background:#fff}
  .cat .go{margin-top:auto;padding-top:10px;font-size:12.5px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:6px;cursor:pointer;background:none;border:0;font-family:inherit;text-align:start}
  .cat .go:hover{text-decoration:underline}

  /* model library */
  .alt{background:var(--panel);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
  .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
  .gtab{font-size:12.5px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:7px 15px;background:#fff;color:var(--ink2);cursor:pointer;transition:.16s;white-space:nowrap;font-family:inherit}
  .gtab:hover{border-color:var(--blue);color:var(--blue)}
  .gtab.on{background:var(--blue);border-color:var(--blue);color:#fff}
  .gtab em{font-style:normal;font-size:11px;opacity:.65;margin-inline-start:4px}
  .subbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:24px}
  .schip{font:inherit;font-size:12px;border:1px dashed var(--line);border-radius:999px;padding:5px 12px;background:#fff;color:var(--gray);cursor:pointer;transition:.16s;white-space:nowrap}
  .schip:hover{border-color:var(--blue);color:var(--blue);border-style:solid}
  .schip.on{border:1px solid var(--blue);color:var(--blue);background:var(--blue-l);font-weight:600}
  .fbarcnt{margin-inline-start:auto;font-size:12.5px;color:var(--gray2)}

  .mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .pcard{border:1px solid var(--line2);border-radius:5px;background:#fff;overflow:hidden;transition:.18s;display:flex;flex-direction:column}
  .pcard:hover{border-color:var(--blue);box-shadow:0 12px 28px -16px rgba(68,168,242,.7);transform:translateY(-2px)}
  .pimg{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:14px;border-bottom:1px solid var(--line2)}
  .pimg img{max-height:100%;width:auto;object-fit:contain;transition:.25s}
  .pcard:hover .pimg img{transform:scale(1.05)}
  .pbody{padding:12px 13px 13px;flex:1;display:flex;flex-direction:column;gap:7px}
  .ptag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
  .pname{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35;word-break:break-word;flex:1}
  .pact{display:flex;align-items:center;gap:10px;margin-top:4px}
  .pact .btn{flex:1}
  .plink{font-size:12.5px;font-weight:600;color:var(--gray2);white-space:nowrap;transition:.15s}
  .plink:hover{color:var(--blue)}
  .empty{grid-column:1/-1;text-align:center;color:var(--gray2);padding:60px 0;font-size:13.5px}
  .more{grid-column:1/-1;text-align:center;padding-top:6px}
  .more button{border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:4px;padding:11px 32px;font:inherit;font-size:13px;cursor:pointer;transition:.16s}
  .more button:hover{border-color:var(--blue);color:var(--blue)}

  /* why / apps */
  .pills{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .pill{background:#fff;border:1px solid var(--line2);border-radius:5px;padding:22px 20px}
  .pill .n{font-family:'Oswald',Arial,sans-serif;font-size:12px;font-weight:600;color:var(--blue);letter-spacing:.16em}
  .pill h3{font-size:16px;margin:10px 0 8px}
  .pill p{font-size:13.2px;color:var(--gray)}
  .apps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .app{border:1px solid var(--line2);border-radius:5px;padding:18px 18px;background:#fff;display:flex;align-items:center;gap:12px;transition:.18s}
  .app:hover{border-color:var(--blue);color:var(--blue)}
  .app .dot{width:8px;height:8px;background:var(--blue);border-radius:2px;flex:none}
  .app span{font-size:14px;font-weight:600}

  /* contact */
  .contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:start}
  form.enq{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:#fff;border:1px solid var(--line2);border-radius:6px;padding:24px;box-shadow:var(--shadow)}
  form.enq .full{grid-column:1/-1}
  form.enq label{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin-bottom:6px;letter-spacing:.02em}
  form.enq input,form.enq textarea,form.enq select{width:100%;border:1px solid var(--line);border-radius:4px;padding:10px 12px;
    font:inherit;font-size:13.5px;color:var(--ink);background:#fafbfc;outline:none;transition:.16s}
  form.enq input:focus,form.enq textarea:focus,form.enq select:focus{border-color:var(--blue);background:#fff}
  form.enq textarea{resize:vertical;min-height:96px}
  .ok{grid-column:1/-1;background:#eefaf3;border:1px solid #bfe8d3;color:#1c7a4d;border-radius:4px;padding:12px 14px;font-size:13px;display:none}
  .ok.show{display:block}
  .ok.err{background:#fdf1f1;border-color:#f1c9c9;color:#a13333}
  .ok a{text-decoration:underline;word-break:break-all}
  .cinfo{display:flex;flex-direction:column;gap:18px}
  .cinfo .row{display:flex;gap:14px;align-items:flex-start}
  .cinfo .ico{width:34px;height:34px;border-radius:4px;background:var(--blue-l);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none;font-weight:800}
  .cinfo b{display:block;font-size:13.5px}
  .cinfo span{font-size:13px;color:var(--gray)}

  /* quick-quote modal */
  .qq-ov{position:fixed;inset:0;background:rgba(15,25,35,.55);z-index:9500;display:none;align-items:center;justify-content:center;padding:20px}
  .qq-ov.open{display:flex}
  .qq-box{background:#fff;border-radius:8px;max-width:520px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);
    animation:qqin .18s ease}
  @keyframes qqin{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
  .qq-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 24px 0}
  .qq-head h3{font-size:20px;letter-spacing:-.01em}
  .qq-head p{font-size:13px;color:var(--gray);margin-top:6px}
  .qq-x{border:0;background:#f2f5f8;color:var(--gray);width:32px;height:32px;border-radius:5px;cursor:pointer;font-size:17px;line-height:1;flex:none}
  .qq-x:hover{background:var(--blue-l);color:var(--blue)}
  form.qq{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:18px 24px 24px}
  form.qq .full{grid-column:1/-1}
  form.qq label{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin-bottom:6px}
  form.qq input,form.qq textarea{width:100%;border:1px solid var(--line);border-radius:4px;padding:10px 12px;font:inherit;font-size:13.5px;
    background:#fafbfc;outline:none;transition:.16s}
  form.qq input:focus,form.qq textarea:focus{border-color:var(--blue);background:#fff}
  form.qq textarea{resize:vertical;min-height:76px}
  form.qq .ok{grid-column:1/-1}
  .qq-alt{grid-column:1/-1;display:flex;align-items:center;gap:8px;justify-content:center;font-size:12.5px;color:var(--gray)}
  .qq-alt a{color:#1da851;font-weight:700;display:inline-flex;align-items:center;gap:6px}
  .qq-alt a:hover{text-decoration:underline}
  .qq-alt svg{width:16px;height:16px;fill:#25D366}

  footer{border-top:1px solid var(--line2);background:var(--panel);padding:30px 0;color:var(--gray);font-size:12.5px}
  footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
  footer b{color:var(--ink2)}
  footer .warn{color:#a76d00}

  /* how it works — 3 steps */
  .proc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
  .step{background:#fff;border:1px solid var(--line2);border-radius:6px;padding:26px 24px 24px;position:relative;overflow:hidden}
  .step::before{counter-increment:step;content:"0" counter(step);position:absolute;top:14px;inset-inline-end:18px;
    font-family:'Oswald',Arial,sans-serif;font-size:38px;font-weight:600;color:#eef4f9;line-height:1}
  .step h3{font-size:16.5px;position:relative;margin-bottom:8px;padding-inline-end:40px}
  .step p{font-size:13.4px;color:var(--gray);position:relative}
  .step .tagline{display:inline-flex;margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}

  /* model-system explainer */
  .explain{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
  .explain h2{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.02em}
  .explain p{color:var(--gray);font-size:14.6px;margin-top:14px}
  .explain ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
  .explain li{display:flex;gap:10px;font-size:13.6px;color:var(--ink2);align-items:flex-start}
  .explain li::before{content:"";width:14px;height:14px;flex:none;margin-top:4px;border-radius:50%;
    background:var(--blue-l) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2344a8f2'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/9px no-repeat}
  .explain .btn{margin-top:22px}
  .codecard{border:1px solid var(--line2);border-radius:6px;background:#fff;box-shadow:var(--shadow);padding:26px 26px 22px}
  .codecard .lab{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray2);font-weight:700}
  .codecard .code{font-family:'Oswald',Arial,sans-serif;font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:.02em;
    margin:8px 0 2px;display:flex;flex-wrap:wrap;gap:2px}
  .codecard .code span{padding:0 2px;border-radius:3px}
  .codecard .code .c1{background:#e8f4ff;color:#1f7cc0}
  .codecard .code .c2{background:#e4f7ee;color:#1c7a4d}
  .codecard .code .c3{background:#fff3e0;color:#a86400}
  .codecard .rows{margin-top:18px;border-top:1px solid var(--line2);padding-top:14px;display:grid;gap:9px}
  .codecard .rows div{display:flex;gap:10px;font-size:12.6px;color:var(--gray);align-items:baseline}
  .codecard .rows i{font-style:normal;font-weight:700;color:var(--ink2);min-width:64px}

  /* quote contents strip */
  .qbwrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .qbit{background:#fff;border:1px solid var(--line2);border-radius:5px;padding:18px 18px 16px}
  .qbit b{display:block;font-size:13.6px;margin-bottom:5px}
  .qbit span{font-size:12.6px;color:var(--gray)}

  @media(max-width:1100px){.mgrid{grid-template-columns:repeat(3,1fr)}.cats{grid-template-columns:repeat(2,1fr)}.pills{grid-template-columns:repeat(2,1fr)}
    .proc{grid-template-columns:1fr}.qbwrap{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:900px){.explain{grid-template-columns:1fr;gap:26px}}
  @media(max-width:900px){.navlinks{display:none}.hero .wrap{grid-template-columns:1fr;gap:32px}.contact-grid{grid-template-columns:1fr}
    .apps{grid-template-columns:repeat(2,1fr)}form.qq{grid-template-columns:1fr}}
  @media(max-width:620px){.mgrid{grid-template-columns:repeat(2,1fr);gap:12px}.cats{grid-template-columns:1fr}
    .stats{grid-template-columns:repeat(2,1fr)}.search{display:none}form.enq{grid-template-columns:1fr}
    .pact{flex-direction:column;align-items:stretch;gap:7px}.plink{text-align:center}}

/* ── catalog page (/models) ── */
.pagehead{padding:44px 0 26px;border-bottom:1px solid var(--line2);background:#fff}
.pagehead h1{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em}
.pagehead p{color:var(--gray);font-size:15px;max-width:760px;margin-top:12px}
.pagehead .metaline{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:12.5px;color:var(--gray2)}
.pagehead .metaline b{color:var(--ink2)}
.catalog{padding:30px 0 64px}
.catalog .toolbar{margin-bottom:10px}
.catcta{margin-top:40px;border:1px solid var(--line2);background:var(--panel);border-radius:6px;padding:24px 26px;
  display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap}
.catcta b{font-size:15px}
.catcta span{display:block;color:var(--gray);font-size:13px;margin-top:4px}