/* Styles for atrixtechnology.ae/insights — original stylesheet for Atrix Technology Solutions. */
:root {
  --navy: #042c71; --ink: #052232; --orange: #ff4013; --muted: #4a5568; --line: #e3e9f2; --bg: #f6f9fc;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ffffff; color: var(--ink); font-family: "Open Sans", Arial, sans-serif; font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
h1, h2, h3 { font-family: Poppins, "Segoe UI", Arial, sans-serif; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.ins-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ins-narrow { max-width: 820px; }
.ins-hl { background: linear-gradient(92deg, var(--orange), #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ins-chip { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
  background: #fff1ec; border: 1px solid #ffd6c8; border-radius: 999px; padding: 5px 14px; }
.ins-btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 14px 26px; font-weight: 700; font-size: 15px; text-decoration: none;
  background: var(--orange); color: #fff; box-shadow: 0 12px 24px -12px rgba(255,64,19,.85); transition: transform .2s ease, background .2s ease; white-space: nowrap; }
.ins-btn:hover { background: #e0350c; transform: translateY(-1px); }
.ins-btn-sm { padding: 10px 18px; font-size: 14px; }

/* Header */
.ins-header { position: sticky; top: 0; z-index: 20; background: #ffffffee; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 #e9eef6, 0 8px 24px -18px rgba(5,34,50,.35); }
.ins-header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 10px; padding-bottom: 10px; }
.ins-logo { flex: none; }
.ins-logo img { height: 80px; width: auto; }  /* same size as the Sitejet pages' header logo (183x80) */
.ins-nav { display: flex; gap: 2px; flex-wrap: nowrap; }
.ins-nav a { color: var(--ink); text-decoration: none; font-size: 15px; padding: 7px 10px; border-radius: 8px; white-space: nowrap; }
@media (max-width: 1260px) { .ins-nav a { font-size: 14px; padding: 7px 7px; } }
@media (max-width: 1200px) { .ins-nav a { font-size: 13.5px; padding: 7px 5px; } }
.ins-nav a:hover { background: #eef3fd; }
.ins-nav a.active { background: var(--navy); color: #fff; }
@media (max-width: 1100px) { .ins-nav { display: none; } }

/* Article hero */
.ins-hero { padding: 64px 0 36px; background: radial-gradient(800px 360px at 90% 0%, rgba(4,44,113,.10), transparent 70%), radial-gradient(700px 320px at 0% 100%, rgba(255,64,19,.07), transparent 70%), linear-gradient(180deg, var(--bg), #fff); }
.ins-crumbs { font-size: 14px; color: #6a7486; margin-bottom: 18px; }
.ins-crumbs a { color: #6a7486; text-decoration: none; }
.ins-crumbs a:hover { color: var(--navy); }
.ins-crumbs span { margin: 0 4px; }
.ins-hero h1 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 800; margin: 18px 0 0; }
.ins-lede { font-size: 19.5px; color: var(--muted); margin: 18px 0 0; }
.ins-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 14.5px; color: #5a6576; }
.ins-meta span { display: inline-flex; align-items: center; gap: 7px; }
.ins-hero-index { text-align: center; padding-bottom: 56px; }
.ins-hero-index .ins-lede { margin-left: auto; margin-right: auto; max-width: 640px; }

.ins-cover-wrap { max-width: 1000px; }
.ins-cover { width: 100%; border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(4,44,113,.55); }

/* Article body */
.ins-article { padding-top: 48px; padding-bottom: 80px; }
.ins-article > p:first-child { font-size: 19px; }
.ins-article h2 { font-size: clamp(23px, 2.4vw, 29px); font-weight: 700; margin: 48px 0 14px; }
.ins-article h3 { font-size: 20px; font-weight: 700; margin: 30px 0 8px; }
.ins-article p { margin: 0 0 18px; color: #2f3a4b; }
.ins-article ul, .ins-article ol { margin: 0 0 22px; padding-left: 0; list-style: none; counter-reset: step; }
.ins-article li { position: relative; padding: 4px 0 4px 34px; margin: 0 0 6px; color: #2f3a4b; }
.ins-article ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 20px; height: 20px; border-radius: 50%;
  background: #e8f7ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }
.ins-article ol li { counter-increment: step; }
.ins-article ol li::before { content: counter(step); position: absolute; left: 0; top: 7px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; line-height: 24px; text-align: center; }
.ins-article strong { color: var(--ink); }
.ins-article table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 10px 0 28px; font-size: 15.5px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ins-article th, .ins-article td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ins-article thead th { background: var(--navy); color: #fff; font-family: Poppins, "Segoe UI", Arial, sans-serif; font-weight: 600; }
.ins-article tbody tr:nth-child(even) td { background: var(--bg); }
.ins-article tbody tr:last-child td { border-bottom: 0; }
.ins-article tbody td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (max-width: 640px) { .ins-article table { display: block; overflow-x: auto; } }

.ins-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 52px; padding: 34px 36px; border-radius: 22px;
  background: radial-gradient(500px 220px at 100% 100%, rgba(248,214,5,.3), transparent 70%), radial-gradient(500px 220px at 0% 0%, rgba(255,64,19,.35), transparent 70%), var(--navy); }
.ins-cta h2 { color: #fff; margin: 0; font-size: 26px; }
.ins-cta p { color: #dbe5f7; margin: 8px 0 0; }

/* Cards */
.ins-related { background: var(--bg); padding: 72px 0 88px; }
.ins-related h2 { font-size: 30px; margin: 0 0 30px; }
.ins-list { padding: 8px 0 96px; }
.ins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ins-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(5,34,50,.04), 0 14px 32px -20px rgba(5,34,50,.25); transition: transform .25s ease, box-shadow .25s ease; }
.ins-card:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(5,34,50,.05), 0 26px 46px -22px rgba(4,44,113,.4); }
.ins-card img { aspect-ratio: 1200 / 630; object-fit: cover; }
.ins-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }
.ins-card h3 { font-size: 19px; margin: 14px 0 8px; }
.ins-card p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 16px; flex: 1; }
.ins-card-meta { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #6a7486; }
.ins-read { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--orange); font-weight: 700; }
@media (max-width: 1000px) { .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ins-grid { grid-template-columns: 1fr; } .ins-hero { padding-top: 40px; } .ins-cta { padding: 28px 24px; } .ins-header .ins-btn-sm { display: none; } }

/* Footer */
.ins-footer { background: #052232; color: #c9d4e6; padding: 48px 0 36px; font-size: 14.5px; }
.ins-footer a { color: #e3ebf9; text-decoration: none; }
.ins-footer a:hover { color: #fff; text-decoration: underline; }
.ins-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ins-footer-logo { display: inline-block; background: #fff; border-radius: 12px; padding: 10px 14px; line-height: 0; }
.ins-footer-logo img { display: block; height: 80px; width: auto; }
.ins-footer-row nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ins-footer-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.ins-social { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ins-social a { display: inline-flex; align-items: center; gap: 7px; }
.ins-social svg { flex: none; }
.ins-footer-note { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: #93a1ba; }
.ins-card .ins-chip { align-self: flex-start; }

/* Neon blue theme (body.sol-neon): Insights + solution pages. Matches the homepage glow background. */
body.sol-neon { color: #dbe7fb; background-color: #051638;
  background-image: radial-gradient(900px 600px at 8% 12%, rgba(46,150,255,.30), transparent 60%),
    radial-gradient(800px 600px at 92% 45%, rgba(61,123,255,.28), transparent 60%),
    radial-gradient(900px 700px at 15% 88%, rgba(46,150,255,.24), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120,185,255,.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(120,185,255,.04) 0 1px, transparent 1px 40px),
    linear-gradient(180deg, #04122f 0%, #071f52 45%, #04102e 100%); background-attachment: fixed; }
.sol-neon h1, .sol-neon h2, .sol-neon h3, .sol-neon .ins-article strong, .sol-neon .ins-article tbody td:first-child { color: #fff; }
.sol-neon .ins-article a { color: #8fd0ff; }
.sol-neon .ins-header { background: rgba(4,18,47,.78); box-shadow: 0 1px 0 rgba(74,168,255,.28); }
.sol-neon .ins-logo img { background: #fff; border-radius: 10px; padding: 0 6px; box-sizing: content-box; }
.sol-neon .ins-nav a { color: #e6efff; }
.sol-neon .ins-nav a:hover { background: rgba(124,196,255,.16); }
.sol-neon .ins-nav a.active { background: #1f6bff; color: #fff; box-shadow: 0 0 16px rgba(74,168,255,.6); }
.sol-neon .ins-hero, .sol-neon .ins-related { background: transparent; }
.sol-neon .ins-crumbs, .sol-neon .ins-crumbs a, .sol-neon .ins-meta, .sol-neon .ins-card-meta { color: #9fb6d9; }
.sol-neon .ins-crumbs a:hover { color: #fff; }
.sol-neon .ins-lede, .sol-neon .ins-article p, .sol-neon .ins-article li, .sol-neon .ins-card p { color: #c9d8f0; }
.sol-neon .ins-article ul li::before { background-color: rgba(74,168,255,.2); }
.sol-neon .ins-article ol li::before { background: #1f6bff; }
.sol-neon .ins-article table { border-color: rgba(74,168,255,.4); }
.sol-neon .ins-article th, .sol-neon .ins-article td { border-color: rgba(74,168,255,.25); }
.sol-neon .ins-article tbody tr:nth-child(even) td { background: rgba(74,168,255,.08); }
.sol-neon .ins-card { background: linear-gradient(160deg, rgba(31,107,255,.22), rgba(6,26,64,.55) 60%);
  border: 1.5px solid rgba(74,168,255,.55); box-shadow: 0 0 22px rgba(74,168,255,.18), inset 0 0 18px rgba(74,168,255,.08); }
.sol-neon .ins-card:hover { border-color: #7cc4ff; box-shadow: 0 0 30px rgba(74,168,255,.4); }
.sol-neon .ins-read { color: #ff8a5c; }
.sol-neon .ins-cover { box-shadow: 0 0 30px rgba(74,168,255,.3); border-radius: 18px; }
.sol-neon .ins-cta { border: 1.5px solid rgba(74,168,255,.55); box-shadow: 0 0 30px rgba(74,168,255,.3); }
.sol-neon .ins-footer { background: rgba(3,12,34,.85); border-top: 1px solid rgba(74,168,255,.28); }

/* ===================== Light theme for inner pages (body.site-light), matching the home page =====================
   The hero, contact block and footer stay dark; steps, call-to-action boxes and the logo strip are navy bands;
   everything else is white or light grey with dark text, orange accents and neon-border cards without shadow. */
body.sol-neon.site-light { background: #fff; color: #4a5873; }
body.site-light .ins-hero, body.site-light .site-contact, body.site-light .sol-steps, body.site-light .ins-footer {
  background: radial-gradient(900px 500px at 12% 0%, rgba(46,150,255,.28), transparent 60%),
    radial-gradient(800px 500px at 95% 100%, rgba(61,123,255,.22), transparent 60%),
    linear-gradient(180deg, #04122f 0%, #071f52 55%, #04102e 100%); }
body.site-light .ins-hero { border-bottom: 1px solid rgba(74,168,255,.3); }
body.site-light .ins-header { background: #04122f; }
body.site-light .site-logos { background: linear-gradient(90deg, #061a40, #042c71); border: 0; }
body.site-light .site-logos p { color: #fff; }

/* light sections */
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) { background: #fff; }
body.site-light main > :is(.sol-features, .sol-related, .ins-related, .sol-faq, .ins-list),
body.site-light main > .site-sec:nth-child(odd) { background: #f4f7fc; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) :is(h1, h2, h3, h4, strong, th), body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .ins-article tbody td:first-child { color: #0b1f44; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) :is(.site-head h2, .sol-h2, .site-h2) { color: #042c71; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) :is(p, li, td, .ins-lede, .site-head p, .site-split-body p, .site-notice p, .site-highlights span, .sol-tl span, .sol-note,
  .ins-card p, .ins-card-meta, .ins-meta, .site-price-note, .sol-rel span, .sol-card p, .sol-faq-item p, .site-prose p) { color: #4a5873; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .site-ticks li { color: #0b1f44; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) :is(.site-ticks, .sol-points) svg { color: #16a34a; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .site-plan .site-price { color: #042c71; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .site-plan .site-price small { color: #6b7a96; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .ins-article a, body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .sol-faq-item a, body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .sol-card a, body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .site-prose a { color: #1e4fa8; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .ins-chip { color: #c2410c; background: #fff1ea; border-color: #fbd0bd; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .ins-hl { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ee5a24; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) :is(.site-eyebrow, .site-more, .ins-read, .site-product .site-tag) { color: #ee5a24; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .site-more:hover { color: #d4471a; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .site-tag { color: #6b7a96; }

/* buttons: orange solid everywhere, white outlined ghost in light sections */
body.site-light .ins-btn { background: #ee5a24; color: #fff; }
body.site-light .ins-btn:hover { background: #d4471a; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .sol-btn-ghost { background: #fff; color: #042c71; border: 1.5px solid #b9c9e4; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .sol-btn-ghost:hover { background: #fff; color: #ee5a24; border-color: #ee5a24; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .site-tab-list button { color: #042c71; background: #fff; border-color: #b9c9e4; box-shadow: none; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .site-tab-list button[aria-selected="true"] { background: #042c71; border-color: #042c71; color: #fff; box-shadow: none; }

/* cards: white with the neon border, no glow or shadow */
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) :is(.sol-x, .sol-card, .sol-rel, .sol-faq-item, .site-plan, .site-split, .site-highlights li, .site-notice, .ins-card, .site-minis li) {
  background: #fff; border: 1.5px solid #4aa8ff; box-shadow: none; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) :is(.sol-x, .sol-card, .sol-rel, .sol-faq-item, .site-plan, .site-split, .site-highlights li, .site-notice, .ins-card, .site-minis li):hover {
  border-color: #1f6bff; box-shadow: none; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .sol-x::before, body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .sol-x::after { display: none; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .site-plan.site-plan-feat { border-color: #ee5a24; background: #fff8f4; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .site-plan.site-plan-feat:hover { border-color: #d4471a; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) :is(.site-frame, .ins-cover, .site-invoice) { box-shadow: none; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .sol-ic { background: #fff1ea; color: #ee5a24; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .sol-x-n { color: #f5b49b; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .sol-faq-item summary { color: #042c71; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .sol-faq-item summary span { background: #fff1ea; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .sol-faq-item summary span::before, body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .sol-faq-item summary span::after { background: #ee5a24; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .sol-tl { border-left-color: #d6e0ef; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .ins-article table { border-color: #d6e0ef; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) :is(.ins-article th, .ins-article td) { border-color: #e1e8f4; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .ins-article tbody tr:nth-child(even) td { background: #f4f7fc; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .ins-article ul li::before { background-color: #fff1ea; }
body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .ins-crumbs, body.site-light main > :not(.ins-hero, .site-contact, .sol-steps, .sol-cta-wrap, .site-logos) .ins-crumbs a { color: #6b7a96; }

/* call-to-action boxes: navy panel with the neon border */
body.site-light .ins-cta { background: radial-gradient(500px 220px at 100% 0%, rgba(238,90,36,.25), transparent 70%), linear-gradient(120deg, #061a40, #042c71);
  border: 1.5px solid #4aa8ff; box-shadow: none; }
body.site-light main .ins-cta.ins-cta :is(h2, h3, strong) { color: #fff; }
body.site-light main .ins-cta.ins-cta p { color: #c9d8f0; }

/* Solution pages of atrixtechnology.ae (uae-e-invoicing, erp-dubai, ai-automation-dubai, ...).
   Original stylesheet for Atrix Technology Solutions; builds on /insights/insights.css. */
.sol-hero { padding: 56px 0 64px; }
.sol-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: center; }
.sol-hero h1 { font-size: clamp(30px, 4vw, 48px); }
.sol-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.sol-btn-ghost { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; padding: 13px 22px; font-weight: 700; font-size: 15px;
  text-decoration: none; color: var(--navy); border: 1.5px solid #c9d6ee; background: #fff; transition: border-color .2s ease, background .2s ease; }
.sol-btn-ghost:hover { border-color: var(--navy); background: #f2f6fd; }
.sol-points { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: #2f3a4b; }
.sol-points li { display: inline-flex; align-items: center; gap: 8px; }
.sol-points svg { color: #16a34a; flex: none; }

.sol-art { position: relative; aspect-ratio: 1; max-width: 400px; width: 100%; justify-self: center; display: grid; place-items: center; }
.sol-art-d { position: absolute; inset: 12%; transform: rotate(45deg); border-radius: 44px;
  background: radial-gradient(circle at 30% 20%, #ff8a3d55, transparent 60%), linear-gradient(135deg, #042c71, #1d4fb8);
  box-shadow: 0 50px 90px -40px rgba(4,44,113,.7); }
.sol-art-d2 { inset: 4%; background: none; border: 2px dashed #ffb08f; box-shadow: none; opacity: .7; }
.sol-art span { position: relative; color: #fff; display: grid; place-items: center; }
.sol-art svg { width: 38%; height: auto; min-width: 96px; }

.sol-intro { padding-bottom: 24px; }
.sol-intro > h2:first-child { margin-top: 8px; }

.sol-timeline { padding: 24px 0 64px; }
.sol-timeline h2 { font-size: clamp(23px, 2.4vw, 29px); margin: 0 0 22px; }
.sol-tl { list-style: none; margin: 0; padding: 0; border-left: 3px solid #dfe7f5; }
.sol-tl li { position: relative; padding: 0 0 22px 28px; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 20px; }
.sol-tl li::before { content: ""; position: absolute; left: -9px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px #fff1ec; }
.sol-tl time { font-family: Poppins, "Segoe UI", Arial, sans-serif; font-weight: 700; color: var(--navy); }
.sol-tl span { color: #2f3a4b; }
.sol-note { font-size: 14px; color: #6a7486; margin: 6px 0 0; }
@media (max-width: 640px) { .sol-tl li { grid-template-columns: 1fr; } }

.sol-features { background: var(--bg); padding: 72px 0 80px; }
.sol-features h2, .sol-steps h2, .sol-related h2 { font-size: clamp(25px, 2.8vw, 32px); margin: 0 0 30px; }
.sol-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sol-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px;
  box-shadow: 0 1px 2px rgba(5,34,50,.04), 0 14px 32px -22px rgba(5,34,50,.25); }
.sol-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: #fff1ec; color: var(--orange); }
.sol-card h3 { font-size: 18.5px; margin: 16px 0 8px; }
.sol-card p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; }

.sol-steps { background: radial-gradient(700px 300px at 100% 0%, rgba(255,64,19,.25), transparent 70%), var(--navy); padding: 76px 0 84px; color: #dbe5f7; }
.sol-steps h2 { color: #fff; }
.sol-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.sol-steps-list li { border-top: 2px solid rgba(255,255,255,.18); padding-top: 18px; }
.sol-step-n { font-family: Poppins, "Segoe UI", Arial, sans-serif; font-weight: 800; font-size: 15px; color: #ffb08f; letter-spacing: .08em; }
.sol-steps-list h3 { color: #fff; font-size: 19px; margin: 10px 0 8px; }
.sol-steps-list p { margin: 0; font-size: 15px; line-height: 1.65; }

.sol-faq { padding: 0 0 72px; }
.sol-faq + .sol-related, .ins-article + .sol-faq { margin-top: -24px; }
.sol-faq h2 { font-size: clamp(25px, 2.8vw, 32px); margin: 0 0 22px; }
.sol-faq-item { border: 1px solid var(--line); border-radius: 14px; margin: 0 0 12px; background: #fff; }
.sol-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; font-family: Poppins, "Segoe UI", Arial, sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); }
.sol-faq-item summary::-webkit-details-marker { display: none; }
.sol-faq-item summary span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #eef3fd; position: relative; }
.sol-faq-item summary span::before, .sol-faq-item summary span::after { content: ""; position: absolute; left: 6px; right: 6px; top: 10px; height: 2px; background: var(--navy); }
.sol-faq-item summary span::after { transform: rotate(90deg); transition: transform .2s ease; }
.sol-faq-item[open] summary span::after { transform: rotate(0); }
.sol-faq-item p { margin: 0; padding: 0 22px 20px; color: #2f3a4b; font-size: 16px; }

.sol-related { background: var(--bg); padding: 64px 0 72px; }
.sol-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sol-rel { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 22px 24px; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; text-decoration: none; color: inherit; transition: transform .2s ease, border-color .2s ease; }
.sol-rel:hover { transform: translateY(-3px); border-color: #b9c9e8; }
.sol-rel strong { font-family: Poppins, "Segoe UI", Arial, sans-serif; color: var(--ink); font-size: 17px; }
.sol-rel span { grid-column: 1; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.sol-rel svg { grid-column: 2; grid-row: 1 / span 2; color: var(--orange); }
.sol-cta-wrap { padding-bottom: 88px; }
.sol-cta-wrap .ins-cta { margin-top: 64px; }

.sol-footer-sol { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; }
.sol-footer-nap { margin: 14px 0 0; color: #a9b7cf; }

@media (max-width: 1000px) {
  .sol-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .sol-art { max-width: 260px; order: -1; }
  .sol-grid, .sol-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sol-hero { padding: 36px 0 48px; }
  .sol-art { display: none; }
  .sol-grid, .sol-rel-grid, .sol-steps-list { grid-template-columns: 1fr; }
  .sol-ctas .ins-btn, .sol-ctas .sol-btn-ghost { width: 100%; justify-content: center; }
}

/* Phone menu (the shared header hides its nav below 1100px) */
.sol-menu { display: none; position: relative; }
.sol-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line);
  display: grid; align-content: center; justify-items: center; gap: 5px; }
.sol-menu summary::-webkit-details-marker { display: none; }
.sol-menu summary span { width: 20px; height: 2px; border-radius: 2px; background: var(--ink); }
.sol-menu nav { position: absolute; right: 0; top: 52px; width: min(300px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 8px; box-shadow: 0 24px 48px -20px rgba(5,34,50,.35); display: grid; }
.sol-menu nav a { color: var(--ink); text-decoration: none; padding: 11px 14px; border-radius: 10px; font-size: 15.5px; }
.sol-menu nav a:hover { background: #eef3fd; }
@media (max-width: 1100px) { .sol-menu { display: block; } }

/* Neon blue theme (body.sol-neon) - used by /ai-automation-dubai only. Matches the homepage glow background. */
body.sol-neon { color: #dbe7fb;
  background: radial-gradient(900px 600px at 8% 12%, rgba(46,150,255,.30), transparent 60%),
    radial-gradient(800px 600px at 92% 45%, rgba(61,123,255,.28), transparent 60%),
    radial-gradient(900px 700px at 15% 88%, rgba(46,150,255,.24), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120,185,255,.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(120,185,255,.04) 0 1px, transparent 1px 40px),
    linear-gradient(180deg, #04122f 0%, #071f52 45%, #04102e 100%) fixed; background-color: #051638; }
.sol-neon h1, .sol-neon h2, .sol-neon h3, .sol-neon .ins-article strong, .sol-neon .ins-article tbody td:first-child { color: #fff; }
.sol-neon .ins-article a, .sol-neon .sol-card a, .sol-neon .sol-faq-item a { color: #8fd0ff; }
.sol-neon .ins-hero { background: transparent; }
.sol-neon .ins-header { background: rgba(4,18,47,.78); border-bottom: 1px solid rgba(74,168,255,.28); }
.sol-neon .ins-logo img { background: #fff; border-radius: 10px; padding: 0 6px; box-sizing: content-box; }
.sol-neon .ins-nav a, .sol-neon .sol-menu summary { color: #e6efff; }
.sol-neon .ins-nav a:hover, .sol-neon .sol-menu nav a:hover { background: rgba(124,196,255,.16); }
.sol-neon .ins-nav a.active { background: #1f6bff; color: #fff; box-shadow: 0 0 16px rgba(74,168,255,.6); }
.sol-neon .sol-menu summary { border-color: rgba(124,196,255,.4); }
.sol-neon .sol-menu summary span { background: #e6efff; }
.sol-neon .sol-menu nav { background: #071f52; border-color: rgba(74,168,255,.45); }
.sol-neon .sol-menu nav a { color: #e6efff; }
.sol-neon .ins-crumbs, .sol-neon .ins-crumbs a { color: #9fb6d9; }
.sol-neon .ins-crumbs a:hover { color: #fff; }
.sol-neon .ins-lede, .sol-neon .sol-points, .sol-neon .ins-article p, .sol-neon .ins-article li,
.sol-neon .sol-card p, .sol-neon .sol-faq-item p, .sol-neon .sol-rel span, .sol-neon .sol-note, .sol-neon .sol-tl span { color: #c9d8f0; }
.sol-neon .sol-points svg { color: #4ade80; }
.sol-neon .sol-btn-ghost { background: rgba(255,255,255,.06); color: #e6efff; border-color: rgba(124,196,255,.45); }
.sol-neon .sol-btn-ghost:hover { background: rgba(124,196,255,.16); border-color: #7cc4ff; }
.sol-neon .sol-art-d { background: radial-gradient(circle at 30% 20%, #4aa8ff66, transparent 60%), linear-gradient(135deg, #0a3a9e, #1f6bff);
  box-shadow: 0 0 60px rgba(74,168,255,.45), 0 50px 90px -40px rgba(0,0,0,.6); }
.sol-neon .sol-art-d2 { background: none; border-color: #7cc4ff; box-shadow: none; }
/* Sections share the page background */
.sol-neon .sol-features, .sol-neon .sol-related { background: transparent; }
.sol-neon .sol-steps { background: radial-gradient(700px 300px at 100% 0%, rgba(74,168,255,.22), transparent 70%), rgba(4,16,46,.55);
  border-top: 1px solid rgba(74,168,255,.22); border-bottom: 1px solid rgba(74,168,255,.22); }
.sol-neon .sol-step-n { color: #7cc4ff; }
/* Neon glass cards */
.sol-neon .sol-card, .sol-neon .sol-faq-item, .sol-neon .sol-rel {
  background: linear-gradient(160deg, rgba(31,107,255,.22), rgba(6,26,64,.55) 60%);
  border: 1.5px solid rgba(74,168,255,.55); box-shadow: 0 0 22px rgba(74,168,255,.18), inset 0 0 18px rgba(74,168,255,.08); }
.sol-neon .sol-rel:hover { border-color: #7cc4ff; box-shadow: 0 0 30px rgba(74,168,255,.4), inset 0 0 18px rgba(74,168,255,.12); }
.sol-neon .sol-ic { background: rgba(74,168,255,.16); color: #7cc4ff; }
.sol-neon .sol-rel strong, .sol-neon .sol-faq-item summary { color: #fff; }
.sol-neon .sol-faq-item summary span { background: rgba(124,196,255,.18); }
.sol-neon .sol-faq-item summary span::before, .sol-neon .sol-faq-item summary span::after { background: #e6efff; }
.sol-neon .ins-article ul li::before { background-color: rgba(74,168,255,.2); }
.sol-neon .ins-article table { border-color: rgba(74,168,255,.4); }
.sol-neon .ins-article th, .sol-neon .ins-article td { border-color: rgba(74,168,255,.25); }
.sol-neon .ins-article tbody tr:nth-child(even) td { background: rgba(74,168,255,.08); }
.sol-neon .ins-cta { border: 1.5px solid rgba(74,168,255,.55); box-shadow: 0 0 30px rgba(74,168,255,.3); }
.sol-neon .ins-footer { background: rgba(3,12,34,.85); border-top: 1px solid rgba(74,168,255,.28); }

/* Hero photo/illustration instead of the diamond icon (pages with hero_img) */
.sol-hero-grid-img { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.sol-hero-img { margin: 0; border-radius: 22px; overflow: hidden; border: 1.5px solid rgba(74,168,255,.6);
  box-shadow: 0 0 40px rgba(74,168,255,.35), 0 40px 80px -40px rgba(0,0,0,.6); }
.sol-hero-img img { width: 100%; height: auto; display: block; }
@media (max-width: 1000px) { .sol-hero-grid-img { grid-template-columns: 1fr; gap: 28px; } }

/* "Explore our AI solutions" cards (pages with explore): same neon glass card as the homepage e-invoicing steps */
.sol-explore { padding: 8px 0 40px; }
.sol-explore h2 { font-size: clamp(25px, 2.8vw, 32px); margin: 0 0 28px; }
.sol-x-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sol-x { position: relative; margin: 0; padding: 28px 24px 26px; border-radius: 20px; display: flex; flex-direction: column;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 30%),
    repeating-linear-gradient(0deg, rgba(120,185,255,.07) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, rgba(120,185,255,.07) 0 1px, transparent 1px 26px),
    radial-gradient(120% 70% at 100% 100%, rgba(46,150,255,.32), transparent 60%), radial-gradient(90% 60% at 0% 0%, rgba(90,170,255,.22), transparent 60%),
    linear-gradient(160deg, #0d3584 0%, #071f52 55%, #04122f 100%);
  border: 1.5px solid #4aa8ff;
  box-shadow: 0 0 0 1px rgba(110,190,255,.35), 0 0 16px rgba(46,150,255,.55), 0 0 44px -6px rgba(46,150,255,.5), inset 0 0 24px rgba(80,170,255,.28), inset 0 1px 0 rgba(255,255,255,.35);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.sol-x:hover { border-color: #7cc4ff; transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(140,205,255,.55), 0 0 22px rgba(60,165,255,.8), 0 0 64px -4px rgba(60,165,255,.65), inset 0 0 30px rgba(90,180,255,.38), inset 0 1px 0 rgba(255,255,255,.45); }
.sol-x-n { position: absolute; top: 22px; right: 22px; font-family: Poppins, "Segoe UI", Arial, sans-serif; font-weight: 700; font-size: 28px; color: rgba(124,196,255,.35); line-height: 1; }
.sol-x-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #042c71, #0a4fb3); color: #fff;
  box-shadow: 0 0 0 1px rgba(124,196,255,.35); }
.sol-x h3 { font-size: 18px; line-height: 1.35; margin: 18px 0 6px; color: #fff; }
.sol-x p { margin: 0; font-size: 14.5px; line-height: 1.7; color: #c9d8f0; flex: 1; }
.sol-x-tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sol-x-tags li { font-size: 12px; font-weight: 600; line-height: 1.4; padding: 4px 10px; border-radius: 999px; color: #e6efff;
  background: rgba(124,196,255,.12); border: 1px solid rgba(124,196,255,.35); }
@media (max-width: 1100px) { .sol-x-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sol-x-grid { grid-template-columns: 1fr; } .sol-explore { padding-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .sol-x, .sol-x:hover { transition: none; transform: none; } }

/* atrixtechnology.ae main pages: additions to insights.css + solutions.css (concatenated into /assets/site.css by build.py).
   Original stylesheet for Atrix Technology Solutions. Neon blue theme (body.sol-neon) throughout. */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: #fff; color: #042c71; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { left: 16px; }
:focus-visible { outline: 2px solid #7cc4ff; outline-offset: 3px; }
.site-menu-h { display: block; padding: 12px 14px 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7cc4ff; }
.sol-menu nav { max-height: calc(100vh - 120px); overflow-y: auto; }
.sol-neon .ins-chip { color: #ffb08f; background: rgba(255,64,19,.14); border-color: rgba(255,138,92,.45); }
.sol-neon .ins-hl { background: linear-gradient(92deg, #ff6a33, #ffb347); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-hero-solo { max-width: 900px; }

/* Generic section + heading */
.site-sec { padding: 72px 0; }
.site-sec-tight { padding: 40px 0; }
.site-head { margin: 0 0 34px; max-width: 760px; }
.site-head-c { text-align: center; margin-left: auto; margin-right: auto; }
.site-head h2 { font-size: clamp(27px, 3.2vw, 40px); margin: 14px 0 10px; }
.site-head p { margin: 0; color: #c9d8f0; font-size: 17.5px; }
.site-eyebrow { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ff8a5c; margin: 0 0 10px; }
.site-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-weight: 700; font-size: 14.5px; color: #8fd0ff; text-decoration: none; }
.site-more:hover { color: #fff; }
.site-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .site-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .site-cols-3, .site-cols-2 { grid-template-columns: 1fr; } .site-sec { padding: 52px 0; } }
.site-prose { max-width: 820px; margin: 0 auto; }
.site-prose p { color: #c9d8f0; margin: 0 0 18px; }

/* Home hero with network canvas */
.site-home-hero { position: relative; overflow: hidden; min-height: min(78vh, 680px); display: grid; align-items: center; padding: 80px 0 90px;
  background: radial-gradient(900px 500px at 50% 40%, rgba(31,107,255,.25), transparent 70%), #020a1f; border-bottom: 1px solid rgba(74,168,255,.25); }
.site-home-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-home-hero .ins-wrap { position: relative; text-align: center; max-width: 1000px; }
.site-home-hero h1 { font-size: clamp(34px, 5.4vw, 66px); line-height: 1.1; margin: 18px 0 22px; color: #fff; }
.site-home-hero h1 .site-grad { display: block; background: linear-gradient(92deg, #2fe0cf, #8ef07a 45%, #ffe34a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-home-hero p { font-size: clamp(17px, 1.9vw, 21px); color: #e8eef8; margin: 0 auto 12px; max-width: 860px; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.site-home-hero p.site-hero-2 { color: #9fe8c9; font-size: clamp(16px, 1.6vw, 18.5px); }
.site-home-hero .sol-ctas { justify-content: center; }

/* Client logos */
.site-logos { padding: 34px 0; border-bottom: 1px solid rgba(74,168,255,.18); background: rgba(3,12,34,.35); }
.site-logos p { text-align: center; margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9fb6d9; }
.site-logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.site-logos li { background: #fff; border-radius: 14px; padding: 10px 18px; height: 80px; display: grid; place-items: center; box-shadow: 0 0 18px rgba(74,168,255,.2); }
.site-logos img { height: 52px; width: auto; max-width: 170px; object-fit: contain; }
@media (max-width: 640px) { .site-logos li { height: 64px; padding: 8px 12px; } .site-logos img { height: 40px; max-width: 120px; } }

/* Partner cards (Creatio / Atrix CRM / SugarAI) */
.site-partner-logo { background: #fff; border-radius: 14px; height: 84px; display: grid; place-items: center; margin: 0 0 18px; }
.site-partner-logo img { height: 46px; width: auto; }
.site-cards-c .sol-x { text-align: center; align-items: center; }

/* Product cards */
.site-product .site-ticks { margin-top: 14px; }
.site-product .sol-x-ico { background: linear-gradient(135deg, #ff5a1f, #ff9a4d); }
.site-product:nth-child(2) .sol-x-ico { background: linear-gradient(135deg, #1f6bff, #4aa8ff); }
.site-product:nth-child(3) .sol-x-ico { background: linear-gradient(135deg, #d4a300, #f8d605); }
.site-product:nth-child(5) .sol-x-ico { background: linear-gradient(135deg, #14a44d, #25d366); }
.site-product:nth-child(6) .sol-x-ico { background: linear-gradient(135deg, #5b5bd6, #8b8bff); }
.site-product .site-tag { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9fb6d9; margin: 16px 0 -10px; }
.site-product .ins-btn, .site-product .sol-btn-ghost { margin-top: 20px; justify-content: center; }

/* Ticks list */
.site-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.site-ticks li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; color: #dbe7fb; line-height: 1.5; }
.site-ticks svg { flex: none; color: #4ade80; margin-top: 2px; }

/* Split rows (image + text) */
.site-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 24px; overflow: hidden; margin: 0 0 30px;
  background: linear-gradient(160deg, rgba(31,107,255,.22), rgba(6,26,64,.6) 60%); border: 1.5px solid rgba(74,168,255,.55);
  box-shadow: 0 0 26px rgba(74,168,255,.2), inset 0 0 18px rgba(74,168,255,.08); }
.site-split-flip .site-split-media { order: 2; }
.site-split-media { position: relative; min-height: 320px; background: #061a40; }
.site-split-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-split-media .site-frame { position: relative; margin: 32px; }
.site-split-body { padding: 40px 42px; }
.site-split-body h3 { font-size: clamp(23px, 2.4vw, 30px); margin: 0 0 14px; }
.site-split-body p { color: #c9d8f0; margin: 0 0 14px; font-size: 16px; }
.site-split-body .ins-btn, .site-split-body .sol-btn-ghost { margin-top: 22px; }
.site-badge { position: absolute; left: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #ff5a1f, #ff9a4d); box-shadow: 0 10px 24px -8px rgba(255,90,31,.8); }
.site-split-flip .site-badge { left: auto; right: 18px; }
@media (max-width: 900px) {
  .site-split { grid-template-columns: 1fr; }
  .site-split-flip .site-split-media { order: 0; }
  .site-split-media { min-height: 240px; }
  .site-split-body { padding: 30px 24px; }
}

/* Browser frame for screenshots */
.site-frame { margin: 0; border-radius: 16px; overflow: hidden; background: #0b1d45; border: 1.5px solid rgba(74,168,255,.55);
  box-shadow: 0 0 34px rgba(74,168,255,.3), 0 40px 80px -40px rgba(0,0,0,.7); }
.site-frame-bar { display: flex; gap: 7px; padding: 11px 14px; background: #0e2556; border-bottom: 1px solid rgba(74,168,255,.3); }
.site-frame-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.site-frame-bar i:nth-child(2) { background: #febc2e; }
.site-frame-bar i:nth-child(3) { background: #28c840; }
.site-frame img { width: 100%; height: auto; display: block; }

/* Tabs (product tour) */
.site-tab-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 28px; }
.site-tab-list button { font: 700 15px "Open Sans", Arial, sans-serif; color: #e6efff; background: rgba(255,255,255,.06); border: 1.5px solid rgba(124,196,255,.45);
  border-radius: 999px; padding: 11px 24px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.site-tab-list button:hover { border-color: #7cc4ff; }
.site-tab-list button[aria-selected="true"] { background: #1f6bff; border-color: #1f6bff; box-shadow: 0 0 18px rgba(74,168,255,.55); color: #fff; }
.site-tab-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; margin: 0 0 40px; }
.js .site-tab-panel:not(.on) { display: none; }
.site-tab-text h3 { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 12px; }
.site-tab-text p { color: #c9d8f0; margin: 0; }
html:not(.js) .site-tab-list { display: none; }
@media (max-width: 900px) { .site-tab-panel { grid-template-columns: 1fr; gap: 24px; } }

/* Pricing */
.site-pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.site-plan { position: relative; display: flex; flex-direction: column; padding: 34px 28px 30px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(31,107,255,.2), rgba(6,26,64,.6) 60%); border: 1.5px solid rgba(74,168,255,.5); box-shadow: 0 0 22px rgba(74,168,255,.18); }
.site-plan-feat { border-color: #ff8a5c; box-shadow: 0 0 34px rgba(255,106,51,.35); background: linear-gradient(160deg, rgba(255,106,51,.22), rgba(6,26,64,.7) 60%); }
.site-plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(92deg, #ff5a1f, #ff9a4d); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.site-plan h3 { font-size: 20px; margin: 0; }
.site-plan .site-price { font-family: Poppins, "Segoe UI", Arial, sans-serif; font-weight: 800; font-size: 38px; color: #fff; margin: 14px 0 2px; line-height: 1.1; }
.site-plan .site-price small { font-size: 15px; font-weight: 600; color: #9fb6d9; }
.site-plan .site-price-note { font-size: 14px; color: #9fb6d9; margin: 0 0 4px; }
.site-plan .site-ticks { flex: 1; margin-bottom: 24px; }
.site-plan .ins-btn, .site-plan .sol-btn-ghost { justify-content: center; }
.site-small { font-size: 14px; color: #9fb6d9; text-align: center; margin: 22px 0 0; }
@media (max-width: 1000px) { .site-pricing { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 30px; } }

/* Highlights strip */
.site-highlights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.site-highlights li { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 18px; background: rgba(4,16,46,.5); border: 1px solid rgba(74,168,255,.35); }
.site-highlights .sol-ic { flex: none; }
.site-highlights strong { display: block; font-family: Poppins, "Segoe UI", Arial, sans-serif; color: #fff; font-size: 16px; margin: 0 0 2px; }
.site-highlights span { font-size: 14px; color: #c9d8f0; line-height: 1.5; }
@media (max-width: 1000px) { .site-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .site-highlights { grid-template-columns: 1fr; } }

/* Stat / fact tiles */
.site-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.site-facts li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(4,16,46,.55); border: 1px solid rgba(74,168,255,.4);
  font-weight: 600; font-size: 15px; color: #fff; }
.site-facts svg { color: #7cc4ff; flex: none; }
@media (max-width: 560px) { .site-facts { grid-template-columns: 1fr; } }

/* E-invoicing demo card */
.site-einv { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; margin: 0 0 40px; }
.site-einv-text p { color: #c9d8f0; }
.site-invoice { position: relative; background: #fff; color: #0b1f44; border-radius: 20px; padding: 26px 26px 22px; box-shadow: 0 0 40px rgba(74,168,255,.35), 0 30px 60px -30px rgba(0,0,0,.7); }
.site-invoice::after { content: ""; position: absolute; inset: 18px -14px -14px 18px; z-index: -1; border-radius: 20px; background: linear-gradient(135deg, #1f6bff, #ff6a33); }
.site-inv-top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #e3e9f2; }
.site-inv-top .sol-ic { background: #fff1ec; color: #ff4013; }
.site-inv-top strong { font-family: Poppins, Arial, sans-serif; font-size: 16px; display: block; }
.site-inv-top small { color: #5a6576; font-size: 13px; }
.site-inv-tag { margin-left: auto; font-size: 12px; font-weight: 700; color: #1f4fa8; background: #eaf1ff; border-radius: 999px; padding: 4px 10px; }
.site-inv-ok { position: absolute; top: -16px; right: -10px; display: inline-flex; align-items: center; gap: 6px; background: #16a34a; color: #fff; font-weight: 700; font-size: 13.5px; padding: 7px 14px; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(22,163,74,.9); }
.site-inv-rows { margin: 14px 0; display: grid; gap: 8px; font-size: 14.5px; }
.site-inv-rows div { display: flex; justify-content: space-between; color: #3a475c; }
.site-inv-rows div:last-child { font-weight: 800; color: #0b1f44; font-size: 15.5px; padding-top: 8px; border-top: 1px solid #e3e9f2; }
.site-inv-status { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid #e3e9f2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13.5px; font-weight: 600; color: #3a475c; }
.site-inv-status li { display: flex; align-items: center; gap: 7px; }
.site-inv-status svg { color: #16a34a; }
@media (max-width: 900px) { .site-einv { grid-template-columns: 1fr; gap: 44px; } .site-invoice { max-width: 460px; } }

/* Feature mini cards (2 x 3) */
.site-minis { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.site-minis li { display: flex; gap: 14px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(160deg, rgba(31,107,255,.2), rgba(6,26,64,.55) 60%); border: 1.5px solid rgba(74,168,255,.45); }
.site-minis .sol-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; }
.site-minis strong { display: block; color: #fff; font-family: Poppins, "Segoe UI", Arial, sans-serif; font-size: 15.5px; }
.site-minis span { font-size: 14px; color: #c9d8f0; line-height: 1.55; }
@media (max-width: 1000px) { .site-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .site-minis { grid-template-columns: 1fr; } }

/* Anchor chips */
.site-anchors { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -8px 0 36px; padding: 0; list-style: none; }
.site-anchors a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #e6efff;
  text-decoration: none; background: rgba(255,255,255,.05); border: 1px solid rgba(124,196,255,.4); }
.site-anchors a:hover { border-color: #7cc4ff; background: rgba(124,196,255,.14); }
.site-anchors svg { color: #ff8a5c; }

/* WhatsApp chat mock */
.site-wa-art { position: relative; }
.site-wa-art .site-frame { border-color: rgba(37,211,102,.6); box-shadow: 0 0 34px rgba(37,211,102,.25), 0 40px 80px -40px rgba(0,0,0,.7); }
.site-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: rgba(7,31,82,.92); border: 1px solid rgba(74,168,255,.5);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,.8); font-size: 13px; color: #c9d8f0; line-height: 1.35; animation: site-float 7s ease-in-out infinite; }
.site-float strong { display: block; color: #fff; font-size: 13.5px; }
.site-float .site-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; flex: none; }
.site-float-a { left: -18px; bottom: -22px; }
.site-float-b { right: -12px; top: -22px; animation-delay: -3.5s; }
.site-float-b .site-dot { background: #1f6bff; }
@keyframes site-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 640px) { .site-float-a { left: 8px; } .site-float-b { right: 8px; } }
@media (prefers-reduced-motion: reduce) { .site-float { animation: none; } }
.site-wa .sol-x-ico { background: linear-gradient(135deg, #14a44d, #25d366); }

/* Careers notice */
.site-notice { display: flex; gap: 22px; align-items: center; padding: 30px 32px; border-radius: 22px; background: linear-gradient(160deg, rgba(31,107,255,.22), rgba(6,26,64,.6) 60%);
  border: 1.5px solid rgba(74,168,255,.55); box-shadow: 0 0 26px rgba(74,168,255,.2); }
.site-notice .sol-ic { width: 56px; height: 56px; border-radius: 16px; flex: none; }
.site-notice h3 { margin: 0 0 6px; font-size: 22px; }
.site-notice p { margin: 0; color: #c9d8f0; }
.site-notice .ins-btn { margin-left: auto; }
@media (max-width: 760px) { .site-notice { flex-direction: column; align-items: flex-start; } .site-notice .ins-btn { margin-left: 0; } }

/* Contact section */
.site-contact { padding: 72px 0 88px; border-top: 1px solid rgba(74,168,255,.22); background: rgba(3,12,34,.35); }
.site-contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 28px; align-items: start; }
.site-form-card, .site-office { border-radius: 22px; padding: 34px 32px; background: linear-gradient(160deg, rgba(31,107,255,.2), rgba(6,26,64,.6) 60%);
  border: 1.5px solid rgba(74,168,255,.5); box-shadow: 0 0 26px rgba(74,168,255,.18); }
.site-contact h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 0 0 6px; }
.site-sub { margin: 0 0 22px; color: #c9d8f0; font-size: 16px; }
.site-form { display: grid; gap: 16px; }
.site-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.site-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: #e6efff; }
.site-form label > span[aria-hidden] { color: #ff8a5c; margin-left: 2px; display: inline; }
.site-form input:not([type=checkbox]), .site-form textarea { font: 16px "Open Sans", Arial, sans-serif; color: #fff; background: rgba(2,10,31,.55); border: 1.5px solid rgba(124,196,255,.4);
  border-radius: 12px; padding: 12px 14px; width: 100%; transition: border-color .2s ease, box-shadow .2s ease; }
.site-form input:focus, .site-form textarea:focus { outline: none; border-color: #7cc4ff; box-shadow: 0 0 0 3px rgba(74,168,255,.25); }
.site-form textarea { resize: vertical; min-height: 120px; }
.site-form .site-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: #c9d8f0; font-size: 14px; }
.site-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: #1f6bff; }
.site-check a { color: #8fd0ff; }
.site-form .ins-btn { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.site-form .ins-btn[disabled] { opacity: .6; cursor: wait; }
.site-form-msg { margin: 0; font-size: 15px; min-height: 1.5em; }
.site-form-msg.ok { color: #4ade80; }
.site-form-msg.err { color: #ff9b8a; }
.site-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.site-office ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.site-office li { display: flex; gap: 12px; align-items: flex-start; }
.site-office li svg { flex: none; color: #ff8a5c; margin-top: 3px; }
.site-office a { color: #e6efff; text-decoration: none; line-height: 1.5; }
.site-office a:hover { color: #fff; text-decoration: underline; }
.site-office-h { margin: 26px 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9fb6d9; }
.site-office-social { display: flex; gap: 10px; }
.site-office-social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(124,196,255,.45); background: rgba(255,255,255,.05); }
.site-office-social a:hover { background: rgba(124,196,255,.18); }
@media (max-width: 900px) { .site-contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .site-row { grid-template-columns: 1fr; } .site-form-card, .site-office { padding: 26px 20px; } .site-form .ins-btn { justify-self: stretch; justify-content: center; } }

/* Legal pages */
.site-legal { padding-top: 24px; }
.site-legal h2 { font-size: 24px; }
.site-legal address { font-style: normal; line-height: 1.9; color: #dbe7fb; }

/* Header: keep the CTA visible on small screens, menu button beside it */
@media (max-width: 640px) { .ins-logo img { height: 60px; } }
.site-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .site-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .site-cols-4 { grid-template-columns: 1fr; } }
.site-h2 { font-size: clamp(27px, 3.2vw, 40px); margin: 14px 0 14px; }
.site-steps-sub { margin: -14px 0 30px; color: #c9d8f0; }
.sol-steps .site-head h2 { color: #fff; }
.site-nowrap { white-space: nowrap; }
.site-home-hero h1 { font-size: clamp(34px, 5vw, 60px); }
.site-lbl b { color: #ff8a5c; font-weight: 700; }
html { background: #051638; }
.sol-ctas:empty { display: none; }
@media (min-width: 1001px) { .sol-steps-list.site-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Brand orange (#CE4912) for buttons: white text passes WCAG AA contrast */
.ins-btn { background: #ce4912; box-shadow: 0 12px 24px -12px rgba(206,73,18,.85); }
.ins-btn:hover { background: #b33e0f; }
/* Keep the animated canvas on its own layer so the fixed page background is not repainted every frame */
.site-home-hero { contain: paint; isolation: isolate; }
.site-home-hero canvas { will-change: transform; transform: translateZ(0); }

/* Performance: same neon look, cheaper to paint.
   1) The page background sits on a fixed layer that is painted once (instead of background-attachment: fixed).
   2) Cards drop the per-card grid pattern and stack fewer glow shadows. */
body.sol-neon { background: #051638; }
body.sol-neon::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(900px 600px at 8% 12%, rgba(46,150,255,.30), transparent 60%),
    radial-gradient(800px 600px at 92% 45%, rgba(61,123,255,.28), transparent 60%),
    radial-gradient(900px 700px at 15% 88%, rgba(46,150,255,.24), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120,185,255,.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(120,185,255,.04) 0 1px, transparent 1px 40px),
    linear-gradient(180deg, #04122f 0%, #071f52 45%, #04102e 100%); }
.sol-x { background: linear-gradient(115deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 30%),
    radial-gradient(120% 70% at 100% 100%, rgba(46,150,255,.30), transparent 60%), linear-gradient(160deg, #0d3584 0%, #071f52 55%, #04122f 100%);
  box-shadow: 0 0 18px rgba(46,150,255,.45), inset 0 1px 0 rgba(255,255,255,.3); }
.sol-x:hover { box-shadow: 0 0 28px rgba(60,165,255,.7), inset 0 1px 0 rgba(255,255,255,.4); }
.site-split, .site-plan, .site-form-card, .site-office, .site-notice, .sol-neon .sol-card, .sol-neon .sol-faq-item, .sol-neon .sol-rel { box-shadow: 0 0 22px rgba(74,168,255,.2); }
.site-plan-feat { box-shadow: 0 0 30px rgba(255,106,51,.3); }
.ins-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
.sol-neon .ins-header { background: rgba(4,18,47,.94); }
.sol-footer-nap a { text-decoration: underline; text-underline-offset: 2px; }
/* Hero text stays readable over the dense network (same shadows as the old live hero) */
.site-home-hero h1 { text-shadow: 0 2px 18px rgba(7,11,22,.95), 0 0 3px rgba(7,11,22,.9); }
.site-home-hero h1 .site-grad { text-shadow: none; filter: drop-shadow(0 2px 14px rgba(7,11,22,.95)); }
.site-home-hero p { text-shadow: 0 1px 12px rgba(7,11,22,1), 0 0 3px rgba(7,11,22,.95); }
/* Rolling client logos (continuous; pauses on hover). The list is repeated 4x, so moving by -50% loops seamlessly. */
.site-logos { padding: 44px 0; border-top: 1px solid rgba(74,168,255,.18); }
.site-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.site-marquee ul { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 18px; width: max-content; animation: site-roll 38s linear infinite; }
.site-marquee:hover ul, .site-marquee:focus-within ul { animation-play-state: paused; }
.site-marquee li { flex: none; width: 220px; height: 96px; }
.site-marquee img { height: 60px; max-width: 180px; }
@keyframes site-roll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
@media (max-width: 640px) { .site-marquee li { width: 160px; height: 74px; } .site-marquee img { height: 44px; max-width: 130px; } .site-marquee ul { animation-duration: 28s; } }

/* ===== Uniform vertical rhythm =====
   Every top-level block in <main> gets the same padding above and below its content (half the gap), and inner
   blocks lose their trailing margins, so the space between any two sections is the same everywhere: --gap. */
:root { --gap: 120px; }
@media (max-width: 900px) { :root { --gap: 96px; } }
@media (max-width: 640px) { :root { --gap: 72px; } }
main > .site-sec, main > .site-sec-tight, main > .sol-hero, main > .sol-faq, main > .sol-steps, main > .sol-cta-wrap,
main > .site-logos, main > .site-contact, main > .ins-article, main > .site-prose {
  padding-top: calc(var(--gap) / 2); padding-bottom: calc(var(--gap) / 2); margin-top: 0; margin-bottom: 0; }
main > .sol-hero { padding-top: calc(var(--gap) / 2.5); }
.sol-faq + .sol-related, .ins-article + .sol-faq { margin-top: 0; }
.sol-cta-wrap .ins-cta, .ins-cta { margin-top: 0; }
.site-split:last-child, .site-tab-panel, .sol-faq-item:last-of-type, .site-einv:last-child { margin-bottom: 0; }
.site-sec .ins-wrap > :last-child, .site-legal > :last-child { margin-bottom: 0; }
.ins-footer { padding-top: calc(var(--gap) / 2); }
.site-logos p { margin-bottom: 22px; }
.site-home-hero { min-height: 0; padding-top: calc(var(--gap) * .8); padding-bottom: calc(var(--gap) / 2); }
main > .site-home-hero + * { padding-top: calc(var(--gap) / 2); }
.site-legal > :first-child, .site-legal > h2:first-child { margin-top: 0; }
.site-prose p:last-child { margin-bottom: 0; }

/* ===================== Home page, Shuraa-style layout (body.site-home-light only) =====================
   Light sections alternate with navy bands; hero, header, contact and footer keep the dark theme. */
.site-home-light { --hm-navy: #042c71; --hm-deep: #061a40; --hm-text: #0b1f44; --hm-body: #4a5873; --hm-line: #d6e0ef;
  --hm-grey: #f4f7fc; --hm-or: #ee5a24; --hm-or-h: #d4471a; }
.site-home-light .hm-light { background: #fff; }
.site-home-light .hm-grey { background: var(--hm-grey); }
.site-home-light .hm-light, .site-home-light .hm-grey { color: var(--hm-body); border-top: 1px solid #e7edf6; }
.site-home-light :is(.hm-light, .hm-grey) :is(h2, h3, strong) { color: var(--hm-text); }
.site-home-light :is(.hm-light, .hm-grey) .site-head h2 { color: var(--hm-navy); }
.site-home-light :is(.hm-light, .hm-grey) .site-head p, .site-home-light :is(.hm-light, .hm-grey) p { color: var(--hm-body); }
.site-home-light :is(.hm-light, .hm-grey) .ins-chip { color: #c2410c; background: #fff1ea; border-color: #fbd0bd; }
.site-home-light :is(.hm-light, .hm-grey) .ins-hl { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--hm-or); }
.site-home-light .ins-btn { background: var(--hm-or); color: #fff; }
.site-home-light .ins-btn:hover { background: var(--hm-or-h); }
.site-home-light :is(.hm-light, .hm-grey) .sol-btn-ghost { background: #fff; color: var(--hm-navy); border: 1.5px solid #b9c9e4; }
.site-home-light :is(.hm-light, .hm-grey) .sol-btn-ghost:hover { border-color: var(--hm-or); color: var(--hm-or); background: #fff; }
.site-home-light .hm-center { display: flex; justify-content: center; margin-top: 34px; }
.site-home-light .site-sec { padding: 76px 0; }

/* light cards (CRM platforms, products): white, thin border, soft shadow, lift on hover */
.site-home-light :is(.hm-light, .hm-grey) .sol-x { background: #fff; border: 1px solid var(--hm-line); box-shadow: 0 10px 30px -18px rgba(4,44,113,.35); }
.site-home-light :is(.hm-light, .hm-grey) .sol-x::before, .site-home-light :is(.hm-light, .hm-grey) .sol-x::after { display: none; }
.site-home-light :is(.hm-light, .hm-grey) .sol-x:hover { border-color: #9db8e6; box-shadow: 0 18px 40px -18px rgba(4,44,113,.45); transform: translateY(-3px); }
.site-home-light :is(.hm-light, .hm-grey) .sol-x p { color: var(--hm-body); }
.site-home-light :is(.hm-light, .hm-grey) .site-ticks li { color: var(--hm-text); }
.site-home-light :is(.hm-light, .hm-grey) .site-ticks svg { color: #16a34a; }
.site-home-light :is(.hm-light, .hm-grey) .site-tag { color: #6b7a96; }
.site-home-light :is(.hm-light, .hm-grey) .site-more { color: var(--hm-or); }
.site-home-light :is(.hm-light, .hm-grey) .site-more:hover { color: var(--hm-or-h); }
.site-home-light :is(.hm-light, .hm-grey) .site-partner-logo { border: 1px solid #e7edf6; }

/* 1. service tiles (Shuraa "Our services" grid) */
.hm-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hm-tiles a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 168px; padding: 24px 16px; text-align: center;
  background: #fff; border: 1px solid var(--hm-line); border-radius: 14px; box-shadow: 0 8px 24px -18px rgba(4,44,113,.4); text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s; }
.hm-tiles a:hover { transform: translateY(-3px); border-color: var(--hm-or); box-shadow: 0 16px 32px -18px rgba(238,90,36,.45); }
.hm-tile-ic { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 18px; background: #fff1ea; color: var(--hm-or); }
.hm-tile-t { font-family: Poppins, "Segoe UI", Arial, sans-serif; font-weight: 700; font-size: 16px; color: var(--hm-navy); line-height: 1.3; }

/* 2. client logos as a navy band */
.site-home-light .site-logos { background: linear-gradient(90deg, var(--hm-deep), var(--hm-navy)); border: 0; padding: 38px 0; }
.site-home-light .site-logos p { color: #fff; }

/* navy bands (Who we are, Why Atrix) */
.site-home-light .hm-navy { background: radial-gradient(700px 360px at 85% 0%, rgba(61,123,255,.28), transparent 70%), linear-gradient(120deg, var(--hm-deep), var(--hm-navy)); color: #dbe7fb; }
.site-home-light .hm-navy :is(h2, h3, strong) { color: #fff; }
.site-home-light .hm-navy p, .site-home-light .hm-navy .site-head p { color: #c9d8f0; }
.site-home-light .hm-navy .ins-chip { color: #ffd2bf; background: rgba(238,90,36,.18); border-color: rgba(255,150,110,.5); }
.site-home-light .hm-navy .sol-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.site-home-light .hm-navy .sol-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.hm-who { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.hm-who h2 { font-size: clamp(27px, 3.2vw, 40px); margin: 14px 0 14px; }
.hm-who-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
.hm-who-facts li { display: flex; align-items: center; gap: 16px; }
.hm-who-facts svg { flex: none; color: #ffb08f; }
.hm-who-facts strong { font-family: Poppins, "Segoe UI", Arial, sans-serif; font-size: 18px; line-height: 1.3; }
.hm-why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; text-align: center; }
.hm-why li { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hm-why svg { color: #ffb08f; }
.hm-why strong { font-family: Poppins, "Segoe UI", Arial, sans-serif; font-size: 18px; }
.hm-why span { font-size: 15px; color: #c9d8f0; line-height: 1.6; }

/* e-invoicing on light: steps and minis become white bordered cards */
.site-home-light .hm-light .site-einv-text p { color: var(--hm-body); }
.site-home-light .hm-light .site-invoice { box-shadow: 0 24px 50px -24px rgba(4,44,113,.45); border: 1px solid var(--hm-line); }
.site-home-light .hm-light .sol-x-n { color: #f5b49b; }
.site-home-light .hm-light .site-minis li { background: #fff; border: 1px solid var(--hm-line); box-shadow: 0 8px 24px -18px rgba(4,44,113,.4); }
.site-home-light .hm-light .site-minis span { color: var(--hm-body); }
.site-home-light .hm-light .sol-ic { background: #fff1ea; color: var(--hm-or); }

/* expertise: tall image tiles (Shuraa "Jurisdictions") */
.hm-exp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.hm-exp li { display: flex; flex-direction: column; scroll-margin-top: 90px; }
.hm-exp-img { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; text-decoration: none; box-shadow: 0 16px 34px -20px rgba(4,44,113,.6); }
.hm-exp-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hm-exp-img:hover img { transform: scale(1.05); }
.hm-exp-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,44,113,.05) 35%, rgba(6,26,64,.92) 100%); }
.hm-exp-cap { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 1; color: #fff; }
.hm-exp-ey { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffd2bf; }
.site-home-light .hm-exp-cap strong { display: block; margin-top: 8px; color: #fff; font-family: Poppins, "Segoe UI", Arial, sans-serif; font-size: 26px; line-height: 1.2; text-transform: uppercase; letter-spacing: .01em; }
.hm-exp p { margin: 18px 0 16px; font-size: 15px; line-height: 1.65; flex: 1; }
.hm-exp .sol-btn-ghost { align-self: flex-start; }

/* appointment band (dark photo) */
.hm-appt { position: relative; overflow: hidden; padding: 96px 0; text-align: center; background: #061a40; }
.hm-appt-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: grayscale(.4); }
.hm-appt::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,26,64,.55), rgba(4,44,113,.75)); z-index: 1; }
.hm-appt .ins-wrap { position: relative; z-index: 2; }
.hm-appt h2 { color: #fff; font-size: clamp(27px, 3.2vw, 40px); margin: 0 0 12px; }
.hm-appt p { color: #dbe7fb; font-size: 17.5px; margin: 0 auto 28px; max-width: 640px; }
.hm-appt-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hm-pill { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; padding: 13px 24px; font-weight: 700; font-size: 15px; text-decoration: none;
  background: #fff; color: var(--hm-navy); border: 1.5px solid #fff; transition: background .2s, color .2s; }
.hm-pill:hover { background: transparent; color: #fff; }

/* insights cards */
.hm-posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hm-posts a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--hm-line); border-radius: 14px; overflow: hidden; text-decoration: none;
  box-shadow: 0 8px 24px -18px rgba(4,44,113,.4); transition: transform .2s, box-shadow .2s; }
.hm-posts a:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(4,44,113,.45); }
.hm-posts img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--hm-navy); }
.hm-post-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.hm-post-cat { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hm-or); }
.site-home-light .hm-post-body strong { font-family: Poppins, "Segoe UI", Arial, sans-serif; font-size: 17.5px; line-height: 1.35; color: var(--hm-navy); }
.hm-post-ex { font-size: 14.5px; line-height: 1.6; color: var(--hm-body); flex: 1; }
.hm-post-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14.5px; color: var(--hm-or); }

/* tabbed FAQ */
.hm-faq { max-width: 900px; margin: 0 auto; }
.hm-faq-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 26px; }
.hm-faq-tabs button { font: 700 15px/1 "Open Sans", Arial, sans-serif; padding: 13px 22px; border-radius: 10px; cursor: pointer;
  background: #fff; color: var(--hm-navy); border: 1.5px solid var(--hm-line); }
.hm-faq-tabs button[aria-selected=true] { background: var(--hm-navy); color: #fff; border-color: var(--hm-navy); }
.js .hm-faq-panel:not(.on) { display: none; }
html:not(.js) .hm-faq-tabs { display: none; }
.site-home-light .hm-faq .sol-faq-item { background: var(--hm-grey); border: 1px solid #e3eaf5; box-shadow: none; }
.site-home-light .hm-faq .sol-faq-item summary { color: var(--hm-navy); }
.site-home-light .hm-faq .sol-faq-item p { color: var(--hm-body); }
.site-home-light .hm-faq .sol-faq-item summary span { background: #fff1ea; }
.site-home-light .hm-faq .sol-faq-item summary span::before, .site-home-light .hm-faq .sol-faq-item summary span::after { background: var(--hm-or); }

/* industries carousel */
.hm-car { position: relative; }
.hm-car-row { list-style: none; margin: 0; padding: 6px 4px 18px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.hm-car-row li { scroll-snap-align: start; background: #fff; border: 1px solid var(--hm-line); border-radius: 14px; padding: 26px 22px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 8px 24px -18px rgba(4,44,113,.4); }
.hm-ind-ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(135deg, var(--hm-navy), #1e4fa8); color: #fff; }
.site-home-light .hm-car-row strong { font-family: Poppins, "Segoe UI", Arial, sans-serif; font-size: 18px; color: var(--hm-navy); }
.hm-car-row span:not(.hm-ind-ic) { font-size: 14.5px; line-height: 1.6; color: var(--hm-body); }
.hm-car-btn { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -30px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--hm-or); color: #fff; box-shadow: 0 8px 20px -8px rgba(238,90,36,.7); }
.hm-car-btn:hover { background: var(--hm-or-h); }
.hm-car-prev { left: -20px; } .hm-car-prev svg { transform: rotate(180deg); }
.hm-car-next { right: -20px; }
html:not(.js) .hm-car-btn { display: none; }

@media (max-width: 1000px) {
  .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-who { grid-template-columns: 1fr; gap: 36px; }
  .hm-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-exp, .hm-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-car-row { grid-auto-columns: calc((100% - 20px) / 2); }
}
@media (max-width: 640px) {
  .site-home-light .site-sec { padding: 56px 0; }
  .hm-tiles { gap: 12px; } .hm-tiles a { min-height: 140px; padding: 18px 10px; } .hm-tile-t { font-size: 14.5px; }
  .hm-why, .hm-exp, .hm-posts, .hm-who-facts { grid-template-columns: 1fr; }
  .hm-car-row { grid-auto-columns: 82%; }
  .hm-car-btn { display: none; }
  .hm-exp-img { aspect-ratio: 16 / 11; }
  .hm-appt { padding: 72px 0; }
}

/* Home (light sections): every card gets the site's glowing blue border, as on the other pages */
body.site-home-light :is(.hm-light, .hm-grey) :is(.sol-x, .site-minis li, .site-invoice, .sol-faq-item),
body.site-home-light :is(.hm-tiles a, .hm-posts a, .hm-car-row li, .hm-exp > li) {
  border: 1.5px solid #4aa8ff; box-shadow: none; }
body.site-home-light :is(.hm-light, .hm-grey) :is(.sol-x, .site-minis li, .sol-faq-item):hover,
body.site-home-light :is(.hm-tiles a, .hm-posts a, .hm-car-row li, .hm-exp > li):hover {
  border-color: #1f6bff; box-shadow: none; }
body.site-home-light .hm-car-row { padding: 16px 12px 24px; }
/* Our solutions: each item is a full card like Our products (image, text and button inside the glowing border) */
body.site-home-light .hm-exp > li { background: #fff; border-radius: 20px; padding: 14px 14px 24px; transition: box-shadow .2s, transform .2s; }
body.site-home-light .hm-exp > li:hover { transform: translateY(-3px); }
body.site-home-light .hm-exp-img { border-radius: 14px; box-shadow: none; }
body.site-home-light .hm-exp p { margin: 18px 10px 16px; }
body.site-home-light .hm-exp .sol-btn-ghost { margin: 0 10px; }