/* Screen-only design preserves the catalog's existing print layout. */
@media screen {
:root { --paper:#f6f8fc; --card:#fff; --ink:#15213b; --muted:#59667e; --line:#dde4ef; --teal:#2859d9; --teal-dark:#2048b1; --header:rgba(255,255,255,.95); --header-scrolled:rgba(255,255,255,.98); --radius:16px; }
body { background:var(--paper); }
.site-head { border-bottom:1px solid var(--line); }
.site-head::after, .site-foot::before { display:none; }
.site-head .inner { max-width:80rem; padding-block:.9rem; gap:.8rem; }
.brand { font-size:1.45rem; gap:.7rem; }
.brand img { width:40px; height:40px; border-radius:12px; }
.site-head nav { gap:.25rem; }
.site-head nav a { padding-inline:.85rem; font-size:.9rem; }
.site-head nav a[aria-current="page"] { color:#2048b1; background:#eaf0ff; }
.site-head nav a:hover { background:#edf2fb; }
.lang-btn { border-radius:10px; font-size:.9rem; }
.menu-toggle { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.4rem .7rem; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font:inherit; cursor:pointer; }
.site-head nav[hidden],.menu-toggle[hidden] { display:none; }
.wrap { padding-top:2.5rem; }
h1 { line-height:1.5; letter-spacing:-.035em; }
h2 { line-height:1.6; font-size:1.3rem; }
p { line-height:1.85; }
.btn { min-height:3.1rem; padding-inline:1.4rem; border-radius:11px; font-size:.95rem; }
.btn.secondary { color:var(--ink); background:#fff; border:1px solid #ccd6e7; }
.btn.secondary:hover { background:#edf2fb; }
:is(a,button,select,summary):focus-visible { outline:3px solid #729cff; outline-offset:4px; }
th { background:#eaf0fa; color:#34435e; }
td,th { padding:.85rem 1rem; }
tbody tr:nth-child(even) { background:#f8faff; }
.site-foot { padding-top:2.5rem; margin-top:4rem; border-top:1px solid var(--line); }
.docs-sidebar { border-radius:18px; box-shadow:0 8px 30px #15213b05; }
.docs-content h2[id] { color:#2048b1; }
.docs-sidebar a:hover,.docs-sidebar a[aria-current="location"] { background:#eaf0ff; }
.cat-kicker { color:#2859d9; }
.page-catalog h1 { font-size:clamp(1.8rem,3vw,2.6rem); }
.cat-stats { gap:1rem; margin-block:1.75rem; }
.cat-stat { padding:1.5rem; border:1px solid #d9e2f1; box-shadow:0 8px 24px #15213b04; }
.cat-stat strong { color:#2048b1; font-size:2rem; }
.cat-stat > span { margin-top:.6rem; }
.cat-tabs { padding-block:1rem; background:var(--paper); gap:.55rem; }
.cat-tabs button { border-radius:11px; padding:.5rem 1rem; }
.cat-note { padding:1.25rem 1.5rem; }
.plan-card.is-featured { box-shadow:0 8px 24px #2859d914; }
.page-home .wrap { max-width:80rem; padding-top:1.5rem; }
.home-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:1.05fr 1fr; gap:3rem; align-items:center; padding:4.5rem 3rem 4rem; border:1px solid #223153; border-radius:28px; color:#fff; background:#0b1530; }
.home-hero::before { content:""; z-index:-1; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(ellipse at 15% 75%,#234fa950,transparent 55%),radial-gradient(ellipse at 85% 0,#4056a52b,transparent 55%); }
.hero-copy { min-width:0; }
.hero-kicker { color:#c0d3ff; font-size:.78rem; font-weight:600; display:inline-flex; align-items:center; gap:.65rem; border:1px solid #40557c; padding:.3rem .8rem; border-radius:999px; }
.hero-kicker::before { content:""; width:6px; height:6px; border-radius:50%; background:#81adff; }
.hero-copy h1 { margin:1.4rem 0; font-size:clamp(2.4rem,3.6vw,3.55rem); line-height:1.5; font-weight:800; letter-spacing:-.05em; }
.hero-copy h1 em { color:#86adff; font-style:normal; }
.hero-copy .lede { color:#bac7df; font-size:1rem; line-height:1.95; }
.hero-copy .actions { gap:.75rem; margin-top:1.7rem; }
.hero-copy .btn { background:#447bff; box-shadow:0 6px 22px #1759ff35; }
.hero-copy .btn:hover { background:#3568e5; }
.hero-copy .btn.secondary { background:#ffffff08; color:#e4ecff; border-color:#455578; box-shadow:none; }
.hero-copy .btn.secondary:hover { background:#ffffff14; }
.hero-platforms { color:#99acca; font-size:.75rem; margin-top:1.2rem; }
.product-scene { position:relative; min-width:0; padding:1.5rem 0 3rem; direction:ltr; }
.workspace-preview { border:1px solid #455c88; border-radius:16px; overflow:hidden; background:#111f3c; box-shadow:0 35px 60px #0005,0 0 70px #3e75f51a; transform:perspective(1200px) rotateY(-6deg) rotateX(3deg); }
.preview-bar { display:flex; align-items:center; justify-content:space-between; padding:1rem; background:#1b2b4a; border-bottom:1px solid #334768; }
.preview-brand { display:inline-flex; align-items:center; gap:.5rem; font:700 1rem/1 "Segoe UI",sans-serif; }
.preview-brand img { border-radius:7px; }
.preview-dots { color:#8299c0; font:8px/1 monospace; letter-spacing:3px; }
.preview-body { display:flex; min-height:260px; }
.preview-rail { display:flex; flex-direction:column; align-items:center; gap:1rem; width:51px; flex-shrink:0; padding-block:1rem; color:#8098c1; border-right:1px solid #2b3e60; font:20px/1 "Segoe UI",sans-serif; }
.preview-rail span { width:30px; height:30px; display:grid; place-items:center; border-radius:7px; }
.preview-rail .rail-active { background:#3769d1; color:#fff; }
.preview-content { flex:1; min-width:0; padding:1.4rem 1rem 1rem; }
html[lang="ar"] .preview-content { direction:rtl; }
.preview-eyebrow { color:#8ca9de; font:600 9px/1.6 "Segoe UI",sans-serif; letter-spacing:2px; }
.preview-content h2 { font-size:.95rem; color:#edf3ff; margin:.5rem 0 1rem; }
.topology { display:flex; align-items:center; justify-content:center; direction:ltr; padding:.6rem 0 1.2rem; }
.topology-router { flex-shrink:0; display:grid; place-items:center; width:100px; height:112px; border:1px solid #5387ef; border-radius:20px; background:#254a87; color:#dbeaff; font:600 .75rem/1.5 "Segoe UI",sans-serif; box-shadow:0 0 30px #3a7afa20; }
.topology-router svg { width:55px; height:55px; }
.topology-end { padding:.4rem .5rem; border:1px solid #3c5277; border-radius:7px; color:#b7cae8; background:#1b2b49; font:11px/1.5 "Segoe UI",sans-serif; }
.topology-line { flex:1; min-width:8px; height:1px; background:#4677c9; }
.preview-modules { display:flex; gap:.4rem; direction:ltr; }
.preview-modules > span { flex:1; text-align:center; padding:.55rem .25rem; color:#a9c4f3; background:#1b2f52; border:1px solid #31486d; border-radius:6px; font:10px/1.6 "Segoe UI",sans-serif; }
.preview-caption { font-size:.65rem; color:#91a8cb; text-align:center; margin:0; padding:.6rem; background:#0e1a32; }
.device-badge { position:absolute; bottom:.8rem; left:1.4rem; display:flex; align-items:center; gap:.75rem; padding:1rem 1.2rem; border:1px solid #5c759c; border-radius:13px; background:#eaf0fc; color:#172d50; box-shadow:0 15px 30px #0003; }
.device-badge-icon { display:grid; place-items:center; width:37px; height:37px; border-radius:10px; background:#d4e2ff; color:#2859d9; font-size:1.3rem; }
.device-badge strong { display:block; font-size:.72rem; }
.device-badge small { display:block; margin-top:.3rem; color:#5d6c85; font:11px/1.6 "Segoe UI",sans-serif; }
.capabilities { padding:5rem 0 2rem; }
.section-heading { max-width:48rem; margin-bottom:2rem; }
.eyebrow { color:#2859d9; font-size:.75rem; font-weight:700; letter-spacing:.07em; }
.section-heading h2 { margin:.4rem 0; font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; }
.section-heading > p:last-child { color:var(--muted); font-size:.95rem; }
.capability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; }
.capability-card { position:relative; display:flex; flex-direction:column; padding:1.8rem; border:1px solid var(--line); border-radius:18px; background:#fff; color:var(--ink); text-decoration:none; transition:border-color .2s,box-shadow .2s; }
.capability-card:hover { border-color:#91ace8; box-shadow:0 10px 24px #15213b08; }
.feature-icon { display:grid; place-items:center; width:45px; height:45px; background:#ebf1ff; color:#2859d9; font:27px/1 "Segoe UI",sans-serif; border-radius:13px; }
.feature-number { position:absolute; top:2rem; right:1.8rem; color:#8997ac; direction:ltr; font:11px/1.5 monospace; }
html[dir="rtl"] .feature-number { right:auto; left:1.8rem; }
.capability-card h3 { font-size:1.13rem; margin:1.5rem 0 .6rem; line-height:1.7; }
.capability-card p { color:var(--muted); font-size:.9rem; min-height:5.2rem; }
.feature-link { display:block; margin-top:1.4rem; color:#2859d9; font-size:.8rem; font-weight:700; }
.capability-card .feature-link { margin-top:auto; padding-top:1rem; }
.visitor-start { padding-block:1rem 3rem; }
.setup-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; list-style:none; padding:0; counter-reset:setup; }
.setup-steps li { counter-increment:setup; padding:1.5rem; border:1px solid var(--line); border-radius:18px; background:var(--card); }
.setup-steps li::before { content:counter(setup,decimal-leading-zero); display:inline-block; color:var(--teal); font:700 1.4rem/1.4 "Segoe UI",sans-serif; }
.setup-steps h3 { font-size:1rem; line-height:1.8; }
.setup-steps p,.setup-note { color:var(--muted); font-size:.9rem; }
.setup-note { padding-inline-start:1rem; border-inline-start:3px solid #91ace8; margin-block:1.5rem; }
.visitor-faq { padding-block:3rem 1rem; max-width:60rem; margin-inline:auto; }
.visitor-faq details { margin-block:.75rem; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.visitor-faq summary { padding:1.2rem; cursor:pointer; font-weight:700; line-height:1.8; }
.visitor-faq details[open] summary { border-bottom:1px solid var(--line); color:var(--teal-dark); }
.faq-answer { padding:.25rem 1.2rem 1.2rem; }
.faq-answer p { color:var(--muted); }
.faq-answer a { font-size:.9rem; }
.home-sections { border-block:1px solid var(--line); margin:1.5rem 0 3rem; gap:0; }
.home-sections a { background:transparent; border:0; border-radius:0; padding:1rem .5rem; font-size:.8rem; color:#52637e; }
.home-sections a:hover { color:#2859d9; background:#eaf0ff; }
.home-overview { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-block:1rem 3rem; }
.home-overview > div { position:relative; padding:1rem 0; }
.home-overview > div::before { display:block; margin-bottom:1rem; color:#2859d9; font:600 1rem/1 monospace; }
#getting-started::before { content:"01 /"; }
#how-it-works::before { content:"02 /"; }
.home-overview h2 { margin:.5rem 0 1rem; font-size:1.5rem; }
.home-overview p { color:var(--muted); font-size:.9rem; }
.page-home #guide { border:1px solid #cbd9f3; border-radius:18px; background:#eaf0fb; padding:2rem 2.5rem; margin-bottom:4rem; }
.page-home #guide h2 { margin-top:0; }
.page-home #guide p { color:#516382; max-width:52rem; }
.page-home #plans { padding-bottom:3rem; }
.page-home #plans h2 { font-size:2rem; margin-top:0; }
.page-home #plans > :is(.ar-block,.en-block,.fr-block) > p { color:var(--muted); }
.home-pricing { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; margin-top:2rem; }
.pricing-card { display:flex; flex-direction:column; padding:1.6rem; background:#fff; border:1px solid var(--line); border-radius:18px; }
.pricing-tier { color:#52637e; font:700 .7rem/1.7 "Segoe UI",sans-serif; letter-spacing:.1em; min-height:2.5rem; }
.pricing-badge { display:block; width:fit-content; margin-top:.5rem; padding:.15rem .5rem; background:#eaf0ff; color:#2859d9; font:600 .65rem/1.8 Cairo,sans-serif; letter-spacing:0; border-radius:5px; }
.pricing-card h3 { font-size:1rem; line-height:1.7; margin-top:.9rem; }
.plan-amount { display:flex; flex-wrap:wrap; gap:.4rem; align-items:baseline; margin:1rem 0; }
.plan-amount b { font:700 3rem/1.2 "Segoe UI",sans-serif; letter-spacing:-.06em; }
.plan-amount > span,.plan-amount small { font-size:.75rem; color:#52637e; }
.pricing-card > p:not(.plan-amount) { font-size:.85rem; color:var(--muted); }
.pricing-card > .pricing-periods { margin-top:auto; padding-block:1rem; font-size:.75rem; border-top:1px solid var(--line); }
.pricing-card .btn { width:100%; }
.pricing-featured { border:2px solid #4779ec; box-shadow:0 10px 35px #2859d915; background:linear-gradient(160deg,#f2f6ff,#fff 65%); }
.page-home #download { background:#0b1530; border-radius:26px; color:#eff4ff; padding:3rem; margin-block:1.5rem; }
.page-home #download h2 { color:#fff; font-size:2rem; margin-top:0; }
.page-home #download p,.page-home #download li { color:#b4c4df; font-size:.85rem; }
.page-home .dl-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-top:1.5rem; }
.page-home .dl-top { flex-direction:column; align-items:flex-start; }
.page-home .dl-card strong { font-size:.9rem; line-height:1.7; }
.page-home .dl-card .dl-go { margin-top:auto; }
.page-home .dl-card { background:#172746; border:1px solid #3b5277; color:#f1f5ff; border-radius:14px; }
.page-home .dl-card .meta { color:#b4c4df; }
.page-home .dl-card:hover { background:#21385f; border-color:#7ca1ed; }
.page-home .dl-icon { background:#294b85; color:#c2d7ff; }
.page-home .dl-go { color:#c2d7ff; }
@media (max-width:68rem) {
.site-head nav { order:4; flex:1 0 100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding-top:.7rem; border-top:1px solid var(--line); }
.site-head nav a { justify-content:center; }
.menu-toggle { margin-inline-start:auto; font-size:.8rem; }
.home-hero { padding:3rem 2rem; gap:1.5rem; }
.hero-copy h1 { font-size:2.5rem; }
.hero-copy .lede { font-size:.9rem; }
.workspace-preview { transform:none; }
.preview-content { padding-inline:.7rem; }
.topology-router { width:76px; }
.capability-card { padding:1.3rem; }
.pricing-card { padding:1.2rem; }
}
@media (max-width:52rem) {
.home-hero { grid-template-columns:minmax(0,1fr); padding:2.5rem 2rem 2rem; }
.hero-copy { max-width:36rem; }
.hero-copy h1 { font-size:2.8rem; }
.product-scene { width:100%; max-width:32rem; margin-inline:auto; }
.capability-grid,.home-pricing { grid-template-columns:minmax(0,1fr); }
.setup-steps { grid-template-columns:minmax(0,1fr); }
.page-home .dl-list { grid-template-columns:minmax(0,1fr); }
.capability-card p { min-height:0; }
.home-overview { gap:2rem; }
.pricing-tier { min-height:0; }
.pricing-card { padding:1.5rem; }
.pricing-card .pricing-periods { margin-top:.75rem; }
}
@media (max-width:36rem) {
.page-home .wrap { padding-inline:.85rem; padding-top:1rem; }
.site-head .inner { padding-block:.6rem; }
.site-head nav a { padding-inline:.7rem; font-size:.8rem; }
.home-hero { padding:2rem 1.2rem 1.3rem; border-radius:20px; gap:.5rem; }
.hero-kicker { font-size:.65rem; }
.hero-copy h1 { font-size:2rem; line-height:1.6; }
.hero-copy .actions { flex-direction:column; }
.hero-platforms { font-size:.65rem; }
.product-scene { padding-top:2rem; }
.preview-bar { padding:.7rem; }
.preview-rail { width:32px; font-size:16px; }
.preview-rail span { width:25px; }
.preview-content h2 { font-size:.72rem; }
.preview-eyebrow { font-size:7px; letter-spacing:1px; }
.topology-router { width:67px; height:95px; font-size:10px; }
.topology-end { padding:.3rem; font-size:8px; }
.preview-modules > span { font-size:8px; }
.device-badge { left:.6rem; bottom:1rem; padding:.65rem .8rem; }
.device-badge strong { font-size:.65rem; }
.capabilities { padding-top:3rem; }
.home-overview { grid-template-columns:minmax(0,1fr); gap:.7rem; margin-bottom:2rem; }
.home-sections a { flex-basis:8rem; }
.page-home #guide { padding:1.5rem; margin-bottom:3rem; }
.page-home #download { padding:1.5rem; border-radius:20px; }
.page-home #download h2,.page-home #plans h2 { font-size:1.6rem; }
.cat-stats { gap:.65rem; }
.cat-stat { padding:1rem; }
.cat-stat strong { font-size:1.6rem; }
td,th { padding:.65rem; }
}
@media (prefers-reduced-motion:reduce) { .capability-card { transition:none; } }
}
@media print { .menu-toggle,.product-scene { display:none !important; } }