/* ============================================================
   RSB.ir — Apple color layer
   Translates the whole palette to apple.com's neutrals:
   #f5f5f7 canvas, #1d1d1f ink, #86868b secondary,
   #0071e3 Apple blue accent, flat surfaces, pill CTAs.
   Overrides: --rsb-* theme, --rsb-p-* mobile shell,
   --nm-* neumorphic layer, Bootstrap accents.
   ============================================================ */

:root{
    /* --- Core theme → Apple light palette --- */
    --rsb-bg:#f5f5f7;            /* apple.com signature canvas gray */
    --rsb-bg2:#fbfbfd;           /* Apple's alt-section white */
    --rsb-panel:#ffffff;
    --rsb-panel-border:#d2d2d7;  /* Apple's neutral hairline */
    --rsb-text:#1d1d1f;          /* Apple near-black ink */
    --rsb-muted:#86868b;         /* Apple secondary text */
    --rsb-accent:#0071e3;        /* Apple blue (links/CTAs) */
    --rsb-accent2:#0077ed;       /* Apple blue hover */
    --rsb-accent-light:rgba(0,113,227,.1);
    /* Flat = same-color gradient — keeps var consumers working */
    --rsb-grad:linear-gradient(135deg,#0071e3,#0071e3);
    --rsb-grad-text:linear-gradient(120deg,#0071e3,#0071e3);
    --rsb-grad-reverse:linear-gradient(135deg,#0071e3,#0071e3);
    /* Neutral shadows — Apple's depth comes from black, not blue */
    --rsb-shadow:0 4px 20px rgba(0,0,0,.07);
    --rsb-shadow-hover:0 12px 34px rgba(0,0,0,.13);
    --rsb-radius:18px;

    /* --- Legacy blue vars (Porto nav, home sections) --- */
    --rsb-blue:#0071e3;
    --rsb-blue-dark:#0077ed;
    --rsb-blue-glow:rgba(0,113,227,.35);

    /* --- Mobile app shell --- */
    --rsb-p-bg:#f5f5f7;
    --rsb-p-bg-2:#fbfbfd;
    --rsb-p-text:#1d1d1f;
    --rsb-p-text-muted:#86868b;
    --rsb-p-accent:#0071e3;
    --rsb-p-accent2:#0077ed;
    --rsb-p-accent-soft:rgba(0,113,227,.12);
    --rsb-p-neon-blue:linear-gradient(135deg,#0071e3,#0071e3);

    /* --- Neumorphic 3D layer --- */
    --nm-bg:#f5f5f7;
    --nm-surface:#f5f5f7;
    --nm-surface-2:#fbfbfd;
    --nm-text:#1d1d1f;
    --nm-muted:#86868b;
    --nm-accent:#0071e3;
    --nm-accent2:#0077ed;
    --nm-neon-blue:linear-gradient(135deg,#0071e3,#0071e3);

    /* --- Bootstrap accent remap --- */
    --primary:#0071e3;
    --blue:#0071e3;
}

/* Dark theme: the site's dark palette only redefines a subset of
   vars — every var this file overrides must be re-overridden here,
   otherwise light values leak into dark surfaces and text becomes
   unreadable. Apple's dark palette: #161617 canvas, #1c1c1e panels,
   #f5f5f7 ink, #98989d secondary, #2997ff dark-mode link blue. */
[data-theme="dark"]{
    --rsb-bg:#161617;
    --rsb-bg2:#1c1c1e;
    --rsb-panel:#1c1c1e;
    --rsb-panel-border:#38383a;
    --rsb-text:#f5f5f7;
    --rsb-muted:#98989d;
    --rsb-accent:#2997ff;
    --rsb-accent2:#147ce5;
    --rsb-accent-light:rgba(41,151,255,.15);
    --rsb-grad:linear-gradient(135deg,#2997ff,#2997ff);
    --rsb-grad-text:linear-gradient(120deg,#2997ff,#2997ff);
    --rsb-grad-reverse:linear-gradient(135deg,#2997ff,#2997ff);
    --rsb-shadow:0 4px 20px rgba(0,0,0,.5);
    --rsb-shadow-hover:0 12px 34px rgba(0,0,0,.6);
    --rsb-blue:#2997ff;
    --rsb-blue-dark:#147ce5;
    --rsb-blue-glow:rgba(41,151,255,.4);

    --rsb-p-bg:#161617;
    --rsb-p-bg-2:#1c1c1e;
    --rsb-p-glass:rgba(28,28,30,.6);
    --rsb-p-glass-border:rgba(255,255,255,.12);
    --rsb-p-text:#f5f5f7;
    --rsb-p-text-muted:#98989d;
    --rsb-p-accent:#2997ff;
    --rsb-p-accent2:#147ce5;
    --rsb-p-accent-soft:rgba(41,151,255,.15);
    --rsb-p-neon-blue:linear-gradient(135deg,#2997ff,#2997ff);

    --nm-bg:#161617;
    --nm-surface:#1c1c1e;
    --nm-surface-2:#2c2c2e;
    --nm-text:#f5f5f7;
    --nm-muted:#98989d;
    --nm-accent:#2997ff;
    --nm-accent2:#147ce5;
    --nm-neon-blue:linear-gradient(135deg,#2997ff,#2997ff);

    --primary:#2997ff;
    --blue:#2997ff;
}

/* ============================================================
   Chrome — scrollbar, selection, focus ring
   ============================================================ */
::-webkit-scrollbar-track{background:#f5f5f7}
::-webkit-scrollbar-thumb{background:#d2d2d7!important;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#86868b}

::selection{background:rgba(0,113,227,.18);color:#1d1d1f}

:focus-visible{outline:2px solid #0071e3;outline-offset:2px;border-radius:4px}

/* ============================================================
   Buttons — Apple pill CTAs (radius 980px, solid, no shine)
   ============================================================ */
.btn-grad{
    background:#0071e3;border-radius:980px;
    box-shadow:0 4px 14px rgba(0,113,227,.25);
}
.btn-grad:hover{
    background:#0077ed;color:#fff;transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,113,227,.3);
}
/* Old shine sweep replaced by the gleam-edge ::after below */

.btn-outline-grad{
    border:1.5px solid #0071e3;color:#0071e3;border-radius:980px;
}
.btn-outline-grad:hover{
    background:#0071e3;color:#fff;transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,113,227,.25);
}

/* Bootstrap primary buttons → same Apple pill */
.btn-primary{
    background-color:#0071e3;border-color:#0071e3;border-radius:980px;
}
.btn-primary:hover,.btn-primary:focus{
    background-color:#0077ed;border-color:#0077ed;
}
.btn-primary:focus,.btn-primary.focus{
    box-shadow:0 0 0 4px rgba(0,113,227,.25);
}

/* ============================================================
   Flatten literal brand gradients → solid Apple blue
   (hero photo overlays + dark navy sections stay — those are
   functional depth, not brand chrome)
   ============================================================ */
.rsb-page-header,
.rsb-service-hero,
.rsb-menu-premium__header{
    background-color:#0071e3!important;
    background-image:none!important;
}

/* Accent bars & underlines → solid */
.rsb-footer-title::after{background:#0071e3!important}
.rsb-hero__title-underline{background:#0071e3!important}

/* Icon/badge fills that used the brand gradient */
.rsb-footer-contact li:hover i,
.rsb-social-mail:hover,
.rsb-expertise-item:hover>i:first-child{
    background:#0071e3!important;background-image:none!important;
}

/* Thin top utility strip — neutral dark like Apple's nav chrome */
.rsb-topline{background:#000000!important;color:#86868b!important}
.rsb-topline a{color:#f5f5f7!important}
.rsb-topline a:hover{color:#0071e3!important}

/* ============================================================
   Surfaces — cards & panels get Apple's neutral treatment
   ============================================================ */
.rsb-card{
    border-color:#d2d2d7;
    box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.rsb-card:hover{
    border-color:#86868b;
    box-shadow:0 12px 34px rgba(0,0,0,.12);
}

/* ============================================================
   Links inside content → Apple's inline-link blue
   ============================================================ */
.rsb-article-content a,
.rsb-service-desc a,
.post-content a{
    color:#0071e3;
}
.rsb-article-content a:hover,
.rsb-service-desc a:hover,
.post-content a:hover{
    color:#0077ed;
}

/* ============================================================
   HARMONIOUS ACCENT PALETTE — Apple's own secondary hues
   (iOS system colors), all cool-family so nothing clashes:
   indigo · teal · cyan · violet, + one warm orange used
   sparingly for highlights that need to feel alive.
   ============================================================ */
:root{
    --apple-indigo:#5856d6;   /* Apple's indigo */
    --apple-teal:#30b0c7;     /* Apple's teal */
    --apple-cyan:#32ade6;     /* Apple's cyan */
    --apple-violet:#af52de;   /* Apple's purple */
    --apple-green:#28a745;    /* Apple green, darkened for light bg */
    --apple-orange:#e8890c;   /* Apple's orange, darkened for text/bg use */

    /* Soft tints for chips/icons (10-14% alpha pastels) */
    --apple-indigo-soft:rgba(88,86,214,.1);
    --apple-teal-soft:rgba(48,176,199,.12);
    --apple-cyan-soft:rgba(50,173,230,.12);
    --apple-violet-soft:rgba(175,82,222,.1);
    --apple-green-soft:rgba(40,167,69,.1);
    --apple-orange-soft:rgba(232,137,12,.12);
}

[data-theme="dark"]{
    --apple-indigo:#7d7aff;
    --apple-teal:#40c8e0;
    --apple-cyan:#64d2ff;
    --apple-violet:#bf5af2;
    --apple-green:#30d158;
    --apple-orange:#ff9f0a;
}

/* --- Section eyebrows: indigo reads as "metadata" like Apple's
       secondary labels; distinct from links without clashing --- */
.rsb-kicker,.rsb-services-kicker,.rsb-news-premium__kicker,
.rsb-expertise-label,.rsb-feature-eyebrow-label{
    color:var(--apple-indigo);
}
.rsb-services-kicker i,.rsb-news-premium__kicker i{color:var(--apple-indigo)}

/* --- Homepage stats: the four big numbers cycle the cool family --- */
.rsb-stats .stat-item:nth-child(4n+1) strong{color:#0071e3}
.rsb-stats .stat-item:nth-child(4n+2) strong{color:var(--apple-indigo)}
.rsb-stats .stat-item:nth-child(4n+3) strong{color:var(--apple-teal)}
.rsb-stats .stat-item:nth-child(4n+4) strong{color:var(--apple-violet)}
.rsb-stats .stat-item span{color:#86868b}

/* --- Homepage service icons (.feature-box-icon) — pastel chip
       tints cycling blue/indigo/teal/violet so adjacent cards
       never repeat --- */
.rsb-service-cell:nth-child(4n+1) .feature-box-icon{
    background:rgba(0,113,227,.12)!important;color:#0071e3!important;
}
.rsb-service-cell:nth-child(4n+2) .feature-box-icon{
    background:var(--apple-indigo-soft)!important;color:var(--apple-indigo)!important;
}
.rsb-service-cell:nth-child(4n+3) .feature-box-icon{
    background:var(--apple-teal-soft)!important;color:#0a8a99!important;
}
.rsb-service-cell:nth-child(4n+4) .feature-box-icon{
    background:var(--apple-violet-soft)!important;color:var(--apple-violet)!important;
}

/* --- Expertise icon chips — same cycle on their tinted squares --- */
.rsb-expertise-item:nth-child(4n+1)>i:first-child{
    background:rgba(0,113,227,.14)!important;color:#5eb5ff!important;
}
.rsb-expertise-item:nth-child(4n+2)>i:first-child{
    background:var(--apple-indigo-soft)!important;color:#a5a3ff!important;
}
.rsb-expertise-item:nth-child(4n+3)>i:first-child{
    background:var(--apple-teal-soft)!important;color:#5fd8e8!important;
}
.rsb-expertise-item:nth-child(4n+4)>i:first-child{
    background:var(--apple-violet-soft)!important;color:#d4a5f5!important;
}

/* --- Inner-page icon chips + step numbers (service pages).
       NOTE: cards sit inside .row > .col-* wrappers, so the
       cycle must key off the column, not the card itself --- */
.rsb-svc-icon{background:var(--apple-cyan-soft);color:#0071e3}
.row>div:nth-child(4n+2) .rsb-svc-icon{
    background:var(--apple-indigo-soft);color:var(--apple-indigo);
}
.row>div:nth-child(4n+3) .rsb-svc-icon{
    background:var(--apple-teal-soft);color:#0a8a99;
}
.row>div:nth-child(4n+4) .rsb-svc-icon{
    background:var(--apple-violet-soft);color:var(--apple-violet);
}
.step-num{background:#0071e3}
.row>div:nth-child(4n+2) .step-num{background:var(--apple-indigo)}
.row>div:nth-child(4n+3) .step-num{background:var(--apple-teal)}
.row>div:nth-child(4n+4) .step-num{background:var(--apple-violet)}

/* --- Badges & chips: quiet tints instead of flat gray --- */
.rsb-feature-card .rsb-feature-eyebrow{background:var(--apple-indigo)}
.rsb-news-card-premium__meta-badge{
    /* keeps the white glass over photos; just tints the ink teal */
    color:#0a7d90;
}
.rsb-brand-chips span{background:#fff;border-color:#d2d2d7}
.rsb-brand-chips span:nth-child(4n+1){border-color:rgba(0,113,227,.25)}
.rsb-brand-chips span:nth-child(4n+2){border-color:rgba(88,86,214,.25)}
.rsb-brand-chips span:nth-child(4n+3){border-color:rgba(48,176,199,.3)}
.rsb-brand-chips span:nth-child(4n+4){border-color:rgba(175,82,222,.25)}

/* --- Intro band: Bootstrap's hardcoded #007bff → Apple blue --- */
.bg-primary{background-color:#0071e3!important}
.home-intro{background-color:#0071e3!important}
a.bg-primary:hover,button.bg-primary:hover{background-color:#0077ed!important}

/* --- Map chrome: province buttons & personnel accents --- */
.rsb-province-btn:hover{border-color:var(--apple-indigo);color:var(--apple-indigo)}
.rsb-iran-map-3d__eyebrow{color:var(--apple-indigo)}

/* --- Warm accent (sparing): hero progress + "new" markers --- */
.rsb-hero__progress-bar{background:linear-gradient(90deg,#ff9f0a,#e8890c)!important}
.rsb-news-card-premium__new{
    background:var(--apple-orange-soft)!important;
    color:var(--apple-orange)!important;
}
.badge-new,.badge-hot{background:var(--apple-orange-soft);color:var(--apple-orange)}

/* --- Success/positive markers → Apple green --- */
.badge-success,.text-success,.rsb-status-open{color:#28a745}

/* ============================================================
   DARK VARIANTS — every accent above needs its dark-mode twin:
   #0071e3/#5856d6 on a dark surface fail contrast; Apple bumps
   them to the lighter iOS dark hues (#2997ff, #7d7aff, …)
   ============================================================ */
[data-theme="dark"] .rsb-kicker,
[data-theme="dark"] .rsb-services-kicker,
[data-theme="dark"] .rsb-news-premium__kicker,
[data-theme="dark"] .rsb-expertise-label{
    color:#7d7aff;
}
[data-theme="dark"] .rsb-services-kicker i,
[data-theme="dark"] .rsb-news-premium__kicker i{color:#7d7aff}

[data-theme="dark"] .rsb-stats .stat-item:nth-child(4n+1) strong{color:#2997ff}
[data-theme="dark"] .rsb-stats .stat-item:nth-child(4n+2) strong{color:#7d7aff}
[data-theme="dark"] .rsb-stats .stat-item:nth-child(4n+3) strong{color:#40c8e0}
[data-theme="dark"] .rsb-stats .stat-item:nth-child(4n+4) strong{color:#bf5af2}
[data-theme="dark"] .rsb-stats .stat-item span{color:#98989d}

[data-theme="dark"] .rsb-service-cell:nth-child(4n+1) .feature-box-icon{
    background:rgba(41,151,255,.15)!important;color:#2997ff!important;
}
[data-theme="dark"] .rsb-service-cell:nth-child(4n+2) .feature-box-icon{
    background:rgba(125,122,255,.15)!important;color:#7d7aff!important;
}
[data-theme="dark"] .rsb-service-cell:nth-child(4n+3) .feature-box-icon{
    background:rgba(64,200,224,.15)!important;color:#40c8e0!important;
}
[data-theme="dark"] .rsb-service-cell:nth-child(4n+4) .feature-box-icon{
    background:rgba(191,90,242,.15)!important;color:#bf5af2!important;
}

[data-theme="dark"] .rsb-svc-icon{background:rgba(41,151,255,.15);color:#2997ff}
[data-theme="dark"] .rsb-news-card-premium__new{
    background:rgba(255,159,10,.16)!important;color:#ff9f0a!important;
}
[data-theme="dark"] .badge-success,[data-theme="dark"] .text-success{color:#30d158}

/* Top strip in dark: pure black like Apple's dark chrome */
[data-theme="dark"] .rsb-topline{background:#000!important}
[data-theme="dark"] .rsb-topline a:hover{color:#2997ff!important}

/* --- Dark buttons/surfaces: iOS filled-blue is #0a84ff,
       outlined/text elements use #2997ff --- */
[data-theme="dark"] .btn-grad{background:#0a84ff;
    box-shadow:0 4px 14px rgba(41,151,255,.3)}
[data-theme="dark"] .btn-grad:hover{background:#2997ff;color:#fff}
[data-theme="dark"] .btn-outline-grad{border-color:#2997ff;color:#2997ff}
[data-theme="dark"] .btn-outline-grad:hover{background:#0a84ff;color:#fff}
[data-theme="dark"] .btn-primary{background-color:#0a84ff;border-color:#0a84ff}
[data-theme="dark"] .btn-primary:hover{background-color:#2997ff;border-color:#2997ff}

[data-theme="dark"] .rsb-page-header,
[data-theme="dark"] .rsb-service-hero,
[data-theme="dark"] .rsb-menu-premium__header{
    background-color:#0a84ff!important;
}
[data-theme="dark"] .rsb-footer-title::after{background:#2997ff!important}

/* Cards/borders in dark — Apple's hairline #38383a */
[data-theme="dark"] .rsb-card{border-color:#38383a;
    box-shadow:0 2px 12px rgba(0,0,0,.4)}
[data-theme="dark"] .rsb-card:hover{border-color:#48484a;
    box-shadow:0 12px 34px rgba(0,0,0,.55)}
[data-theme="dark"] .rsb-brand-chips span{background:#1c1c1e;border-color:#38383a}
[data-theme="dark"] .rsb-feature-card .rsb-feature-eyebrow{background:#5e5ce6}
[data-theme="dark"] .rsb-province-btn:hover{border-color:#7d7aff;color:#7d7aff}
[data-theme="dark"] .rsb-iran-map-3d__eyebrow{color:#7d7aff}

/* Selection in dark: dark-mode link blue */
[data-theme="dark"] ::selection{background:rgba(41,151,255,.3);color:#f5f5f7}
[data-theme="dark"] :focus-visible{outline-color:#2997ff}

/* ============================================================
   WIDER ACCENT SPREAD — secondary hues across all pages
   ============================================================ */

/* --- Premium dropdown menu icons: pastel chip cycle, hover fills
       with the matching solid hue --- */
.rsb-menu-premium__item-icon{
    background:rgba(0,113,227,.1)!important;
    color:#0071e3!important;
}
.rsb-menu-premium__item:nth-child(4n+2) .rsb-menu-premium__item-icon{
    background:var(--apple-indigo-soft)!important;color:var(--apple-indigo)!important;
}
.rsb-menu-premium__item:nth-child(4n+3) .rsb-menu-premium__item-icon{
    background:var(--apple-teal-soft)!important;color:#0a8a99!important;
}
.rsb-menu-premium__item:nth-child(4n+4) .rsb-menu-premium__item-icon{
    background:var(--apple-violet-soft)!important;color:var(--apple-violet)!important;
}
.rsb-menu-premium__item:hover .rsb-menu-premium__item-icon{
    background:#0071e3!important;color:#fff!important;
}
.rsb-menu-premium__item:nth-child(4n+2):hover .rsb-menu-premium__item-icon{
    background:var(--apple-indigo)!important;color:#fff!important;
}
.rsb-menu-premium__item:nth-child(4n+3):hover .rsb-menu-premium__item-icon{
    background:var(--apple-teal)!important;color:#fff!important;
}
.rsb-menu-premium__item:nth-child(4n+4):hover .rsb-menu-premium__item-icon{
    background:var(--apple-violet)!important;color:#fff!important;
}
.rsb-menu-premium__item:hover .rsb-menu-premium__item-title{color:#0071e3}
.rsb-menu-premium__item:nth-child(4n+2):hover .rsb-menu-premium__item-title{color:var(--apple-indigo)}
.rsb-menu-premium__item:nth-child(4n+3):hover .rsb-menu-premium__item-title{color:#0a8a99}
.rsb-menu-premium__item:nth-child(4n+4):hover .rsb-menu-premium__item-title{color:var(--apple-violet)}

/* --- Tender cards: the 6px accent bar cycles the family --- */
.rsb-tender-card:nth-child(4n+1) .rsb-tender-card__accent{
    background:#0071e3!important;
}
.rsb-tender-card:nth-child(4n+2) .rsb-tender-card__accent{
    background:#5856d6!important;
}
.rsb-tender-card:nth-child(4n+3) .rsb-tender-card__accent{
    background:#30b0c7!important;
}
.rsb-tender-card:nth-child(4n+4) .rsb-tender-card__accent{
    background:#af52de!important;
}

/* --- Related services: cards sit inside .row > .col-* wrappers,
       so hue cycles key off the column; on hover the icon flips
       to the NEXT family hue (visible color change, not just a
       scale) --- */
.rsb-related-services .row>div:nth-child(4n+1) .rsb-related-icon{
    background:linear-gradient(135deg,#0055c8 0%,#0071e3 55%,#32ade6 100%)!important;
}
.rsb-related-services .row>div:nth-child(4n+2) .rsb-related-icon{
    background:linear-gradient(135deg,#4038b0 0%,#5856d6 55%,#8a87f0 100%)!important;
}
.rsb-related-services .row>div:nth-child(4n+3) .rsb-related-icon{
    background:linear-gradient(135deg,#0a7d90 0%,#30b0c7 55%,#5fd8e8 100%)!important;
}
.rsb-related-services .row>div:nth-child(4n+4) .rsb-related-icon{
    background:linear-gradient(135deg,#7a2fa8 0%,#af52de 55%,#d08ff0 100%)!important;
}
/* Hover: swap to the next hue in the cycle */
.rsb-related-services .row>div:nth-child(4n+1) .rsb-related-card:hover .rsb-related-icon{
    background:linear-gradient(135deg,#4038b0 0%,#5856d6 55%,#8a87f0 100%)!important;
}
.rsb-related-services .row>div:nth-child(4n+2) .rsb-related-card:hover .rsb-related-icon{
    background:linear-gradient(135deg,#0a7d90 0%,#30b0c7 55%,#5fd8e8 100%)!important;
}
.rsb-related-services .row>div:nth-child(4n+3) .rsb-related-card:hover .rsb-related-icon{
    background:linear-gradient(135deg,#7a2fa8 0%,#af52de 55%,#d08ff0 100%)!important;
}
.rsb-related-services .row>div:nth-child(4n+4) .rsb-related-card:hover .rsb-related-icon{
    background:linear-gradient(135deg,#0055c8 0%,#0071e3 55%,#32ade6 100%)!important;
}
/* Matching link color on hover */
.rsb-related-services .row>div:nth-child(4n+1) .rsb-related-card:hover .rsb-related-link{color:#0071e3}
.rsb-related-services .row>div:nth-child(4n+2) .rsb-related-card:hover .rsb-related-link{color:var(--apple-indigo)}
.rsb-related-services .row>div:nth-child(4n+3) .rsb-related-card:hover .rsb-related-link{color:#0a8a99}
.rsb-related-services .row>div:nth-child(4n+4) .rsb-related-card:hover .rsb-related-link{color:var(--apple-violet)}

/* --- News page sidebar icon list + meta badges --- */
.list-icons i,.list-icons .fa,.list-icons .fas{color:#0071e3}
.list-icons li:nth-child(4n+2) i,.list-icons li:nth-child(4n+2) .fa,.list-icons li:nth-child(4n+2) .fas{color:var(--apple-indigo)}
.list-icons li:nth-child(4n+3) i,.list-icons li:nth-child(4n+3) .fa,.list-icons li:nth-child(4n+3) .fas{color:#0a8a99}
.list-icons li:nth-child(4n+4) i,.list-icons li:nth-child(4n+4) .fa,.list-icons li:nth-child(4n+4) .fas{color:var(--apple-violet)}
.text-color-primary{color:#0071e3!important}

.news-card .news-meta-badges .meta-badge{
    background:rgba(255,255,255,.85);
    color:#0a7d90;
}
/* cards sit inside .row > .col-* — key the cycle off the column */
.row>div:nth-child(4n+2) .news-card .news-meta-badges .meta-badge{color:var(--apple-indigo)}
.row>div:nth-child(4n+3) .news-card .news-meta-badges .meta-badge{color:#0a8a99}
.row>div:nth-child(4n+4) .news-card .news-meta-badges .meta-badge{color:var(--apple-violet)}

/* --- Bootstrap primary badge → Apple blue --- */
.badge-primary{background-color:#0071e3}

/* --- Customer logo tiles: subtle alternating hover rings --- */
.rsb-customer-grid a{transition:border-color .3s,box-shadow .3s,transform .3s}
.rsb-customer-grid a:nth-child(4n+1):hover{border-color:rgba(0,113,227,.4)}
.rsb-customer-grid a:nth-child(4n+2):hover{border-color:rgba(88,86,214,.4)}
.rsb-customer-grid a:nth-child(4n+3):hover{border-color:rgba(48,176,199,.5)}
.rsb-customer-grid a:nth-child(4n+4):hover{border-color:rgba(175,82,222,.4)}

/* --- Map province buttons: alternating accent borders --- */
.rsb-province-btn:nth-child(4n+1){border-right:3px solid #0071e3}
.rsb-province-btn:nth-child(4n+2){border-right:3px solid var(--apple-indigo)}
.rsb-province-btn:nth-child(4n+3){border-right:3px solid var(--apple-teal)}
.rsb-province-btn:nth-child(4n+4){border-right:3px solid var(--apple-violet)}

/* --- Footer contact icon hover: keeps one hue per row position --- */
.rsb-footer-contact li:nth-child(4n+2):hover i{background:var(--apple-indigo)!important;background-image:none!important}
.rsb-footer-contact li:nth-child(4n+3):hover i{background:var(--apple-teal)!important;background-image:none!important}
.rsb-footer-contact li:nth-child(4n+4):hover i{background:var(--apple-violet)!important;background-image:none!important}

/* --- Wide intro band: barely-there two-hue wash — Apple does use
       very quiet gradients on wide bands; this adds depth without
       breaking the flat rule --- */
.home-intro{
    background:linear-gradient(120deg,#0071e3 0%,#0062d0 60%,#4a4ecb 100%)!important;
}

/* --- Section heading accent words: subtle indigo for <strong> --- */
.rsb-services-heading h2 strong,
.rsb-expertise-heading strong{
    color:var(--apple-indigo);
}

/* --- Dark twins for the wider spread --- */
[data-theme="dark"] .rsb-menu-premium__item-icon{
    background:rgba(41,151,255,.12)!important;color:#2997ff!important;
}
[data-theme="dark"] .rsb-menu-premium__item:nth-child(4n+2) .rsb-menu-premium__item-icon{
    background:rgba(125,122,255,.12)!important;color:#7d7aff!important;
}
[data-theme="dark"] .rsb-menu-premium__item:nth-child(4n+3) .rsb-menu-premium__item-icon{
    background:rgba(64,200,224,.12)!important;color:#40c8e0!important;
}
[data-theme="dark"] .rsb-menu-premium__item:nth-child(4n+4) .rsb-menu-premium__item-icon{
    background:rgba(191,90,242,.12)!important;color:#bf5af2!important;
}
[data-theme="dark"] .rsb-menu-premium__item:hover .rsb-menu-premium__item-title{color:#2997ff}
[data-theme="dark"] .rsb-menu-premium__item:nth-child(4n+2):hover .rsb-menu-premium__item-title{color:#7d7aff}
[data-theme="dark"] .rsb-menu-premium__item:nth-child(4n+3):hover .rsb-menu-premium__item-title{color:#40c8e0}
[data-theme="dark"] .rsb-menu-premium__item:nth-child(4n+4):hover .rsb-menu-premium__item-title{color:#bf5af2}
[data-theme="dark"] .list-icons i,[data-theme="dark"] .list-icons .fas{color:#2997ff}
[data-theme="dark"] .list-icons li:nth-child(4n+2) i,[data-theme="dark"] .list-icons li:nth-child(4n+2) .fas{color:#7d7aff}
[data-theme="dark"] .list-icons li:nth-child(4n+3) i,[data-theme="dark"] .list-icons li:nth-child(4n+3) .fas{color:#40c8e0}
[data-theme="dark"] .list-icons li:nth-child(4n+4) i,[data-theme="dark"] .list-icons li:nth-child(4n+4) .fas{color:#bf5af2}
[data-theme="dark"] .news-card .news-meta-badges .meta-badge{color:#5fd8e8}
[data-theme="dark"] .row>div:nth-child(4n+2) .news-card .news-meta-badges .meta-badge{color:#a5a3ff}
[data-theme="dark"] .row>div:nth-child(4n+4) .news-card .news-meta-badges .meta-badge{color:#d4a5f5}
[data-theme="dark"] .rsb-services-heading h2 strong,
[data-theme="dark"] .rsb-expertise-heading strong{color:#7d7aff}
[data-theme="dark"] .text-color-primary{color:#2997ff!important}


/* ============================================================
   SHINY BUTTON — faithful CSS port of 21st.dev/@hyperiux/shiny-button
   (fillColor #000, labelColor #fff, accent #ff5f00, soft #ff9253,
   sweepDuration 3s, easeDuration .8s, arcWidth 5%, cornerRadius 32,
   speckle .4, sheen on).  Mirrors the TSX rule-for-rule.
   Applied to: .rsb-shiny-btn, .rsb-news-premium__archive a, .btn-grad
   ============================================================ */
@property --gradient-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --gradient-angle-offset{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --gradient-percent{syntax:"<percentage>";initial-value:5%;inherits:false}
@property --gradient-shine{syntax:"<color>";initial-value:white;inherits:false}

.rsb-shiny-btn,
.rsb-news-premium__archive a,
.btn-grad{
    --gleam-base:#000000;
    --gleam-inset:#1a1818;
    --gleam-label:#ffffff;
    --gleam-accent:#ff5f00;
    --gleam-accent-soft:#ff9253;
    --animation:gradient-angle linear infinite;
    --duration:3s;
    --shadow-size:2px;
    --transition:.8s cubic-bezier(.25,1,.5,1);

    isolation:isolate;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    outline-offset:4px;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:1.25rem 2.5rem!important;
    font-size:1.125rem!important;
    line-height:1.2!important;
    font-weight:500!important;
    border:1px solid transparent!important;
    border-radius:32px!important;
    color:var(--gleam-label)!important;
    text-decoration:none!important;
    /* fallback if @property is unsupported: plain black pill, never blue */
    background:#000!important;
    background:
        linear-gradient(var(--gleam-base),var(--gleam-base)) padding-box,
        conic-gradient(
            from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
            transparent,
            var(--gleam-accent) var(--gradient-percent),
            var(--gradient-shine) calc(var(--gradient-percent) * 2),
            var(--gleam-accent) calc(var(--gradient-percent) * 3),
            transparent calc(var(--gradient-percent) * 4)
        ) border-box!important;
    box-shadow:inset 0 0 0 1px var(--gleam-inset)!important;
    transition:var(--transition)!important;
    transition-property:--gradient-angle-offset,--gradient-percent,--gradient-shine!important;
    transform:none!important;
}

/* Shared pseudo geometry: centered, behind the label */
.rsb-shiny-btn::before,.rsb-shiny-btn::after,.rsb-shiny-btn span::before,
.rsb-news-premium__archive a::before,.rsb-news-premium__archive a::after,.rsb-news-premium__archive a span::before,
.btn-grad::before,.btn-grad::after,.btn-grad span::before{
    content:"";
    pointer-events:none;
    position:absolute;
    inset:auto!important;
    left:50%!important;
    top:50%!important;
    translate:-50% -50%;
    transform:none!important;
    z-index:-1;
}

.rsb-shiny-btn:active,
.rsb-news-premium__archive a:active,
.btn-grad:active{translate:0 1px;transform:none!important}

/* ::before — speckle dot-grid, masked to the sweep's leading edge */
.rsb-shiny-btn::before,
.rsb-news-premium__archive a::before,
.btn-grad::before{
    --size:calc(100% - var(--shadow-size) * 3);
    --position:2px;
    --space:calc(var(--position) * 2);
    width:var(--size);
    height:var(--size);
    background:radial-gradient(circle at var(--position) var(--position),white calc(var(--position) / 4),transparent 0) padding-box;
    background-size:var(--space) var(--space);
    background-repeat:space;
    -webkit-mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg),black,transparent 10% 90%,black);
    mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg),black,transparent 10% 90%,black);
    border-radius:inherit;
    opacity:.4;
    z-index:-1;
}

/* ::after — rotating square of ACCENT (not white), masked to the bottom */
.rsb-shiny-btn::after,
.rsb-news-premium__archive a::after,
.btn-grad::after{
    --animation:shimmer linear infinite;
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:1;
    transition:none!important;
    background:linear-gradient(-50deg,transparent,var(--gleam-accent),transparent);
    -webkit-mask-image:radial-gradient(circle at bottom,transparent 40%,black);
    mask-image:radial-gradient(circle at bottom,transparent 40%,black);
    opacity:.6;
}

/* Label span: above pseudo layers; carries the hover glow */
.rsb-shiny-btn span,
.rsb-news-premium__archive a span,
.btn-grad span{position:static;z-index:1}

.rsb-shiny-btn span::before,
.rsb-news-premium__archive a span::before,
.btn-grad span::before{
    --size:calc(100% + 1rem);
    width:var(--size);
    height:var(--size);
    box-shadow:inset 0 -1ex 2rem 4px var(--gleam-accent);
    opacity:0;
    transition:opacity var(--transition);
    animation:calc(var(--duration) * 1.5) breathe linear infinite;
}

/* Two stacked spins: the second (slower, reverse) is paused until
   hover — this is what produces the signature "hesitation" */
.rsb-shiny-btn,.rsb-shiny-btn::before,.rsb-shiny-btn::after,
.rsb-news-premium__archive a,.rsb-news-premium__archive a::before,.rsb-news-premium__archive a::after,
.btn-grad,.btn-grad::before,.btn-grad::after{
    animation:
        var(--animation) var(--duration),
        var(--animation) calc(var(--duration) / .4) reverse paused;
    animation-composition:add;
}

.rsb-shiny-btn:is(:hover,:focus-visible),
.rsb-news-premium__archive a:is(:hover,:focus-visible),
.btn-grad:is(:hover,:focus-visible){
    --gradient-percent:20%;
    --gradient-angle-offset:95deg;
    --gradient-shine:var(--gleam-accent-soft);
    color:var(--gleam-label)!important;
    box-shadow:inset 0 0 0 1px var(--gleam-inset)!important;
    transform:none!important;
}
.rsb-shiny-btn:is(:hover,:focus-visible),.rsb-shiny-btn:is(:hover,:focus-visible)::before,.rsb-shiny-btn:is(:hover,:focus-visible)::after,
.rsb-news-premium__archive a:is(:hover,:focus-visible),.rsb-news-premium__archive a:is(:hover,:focus-visible)::before,.rsb-news-premium__archive a:is(:hover,:focus-visible)::after,
.btn-grad:is(:hover,:focus-visible),.btn-grad:is(:hover,:focus-visible)::before,.btn-grad:is(:hover,:focus-visible)::after{
    animation-play-state:running;
}
.rsb-shiny-btn:is(:hover,:focus-visible) span::before,
.rsb-news-premium__archive a:is(:hover,:focus-visible) span::before,
.btn-grad:is(:hover,:focus-visible) span::before{opacity:1}

/* Dark theme: the theme's own !important blue gradient on these
   links must be re-overridden; the component is theme-agnostic */
[data-theme="dark"] .rsb-shiny-btn,
[data-theme="dark"] .rsb-news-premium__archive a,
[data-theme="dark"] .btn-grad{
    background:#000!important;
    background:
        linear-gradient(var(--gleam-base),var(--gleam-base)) padding-box,
        conic-gradient(
            from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
            transparent,
            var(--gleam-accent) var(--gradient-percent),
            var(--gradient-shine) calc(var(--gradient-percent) * 2),
            var(--gleam-accent) calc(var(--gradient-percent) * 3),
            transparent calc(var(--gradient-percent) * 4)
        ) border-box!important;
    color:var(--gleam-label)!important;
    box-shadow:inset 0 0 0 1px var(--gleam-inset)!important;
}
[data-theme="dark"] .rsb-shiny-btn:is(:hover,:focus-visible),
[data-theme="dark"] .rsb-news-premium__archive a:is(:hover,:focus-visible),
[data-theme="dark"] .btn-grad:is(:hover,:focus-visible){
    color:var(--gleam-label)!important;
    box-shadow:inset 0 0 0 1px var(--gleam-inset)!important;
}

@keyframes gradient-angle{to{--gradient-angle:360deg}}
@keyframes shimmer{to{rotate:360deg}}
@keyframes breathe{from,to{scale:1}50%{scale:1.2}}

@media (prefers-reduced-motion:reduce){
    .rsb-shiny-btn,.rsb-shiny-btn::before,.rsb-shiny-btn::after,.rsb-shiny-btn span::before,
    .rsb-news-premium__archive a,.rsb-news-premium__archive a::before,.rsb-news-premium__archive a::after,.rsb-news-premium__archive a span::before,
    .btn-grad,.btn-grad::before,.btn-grad::after,.btn-grad span::before{animation:none!important}
    .rsb-shiny-btn:is(:hover,:focus-visible) span::before,
    .rsb-news-premium__archive a:is(:hover,:focus-visible) span::before,
    .btn-grad:is(:hover,:focus-visible) span::before{opacity:0}
    .rsb-shiny-btn,.rsb-news-premium__archive a,.btn-grad{transition:none!important}
}

/* Archive link had a legacy translateY hover — neutralise it */
.rsb-news-premium__archive a:hover{transform:none!important}

/* "ادامه مطلب" links — still on legacy #0088cc */
.btn-read-more{color:#0071e3}
.btn-read-more:hover{color:#0077ed}
[data-theme="dark"] .btn-read-more{color:#2997ff}

/* ============================================================
   BORDER BEAM SEARCH — faithful CSS port of the `border-beam` npm
   package, size="line" colorVariant="colorful" duration=3.1
   borderRadius=20, wrapping the reference SearchBar (#1d1d1d, 42px,
   inset 0 0 0 1px rgba(44,47,54,.52), placeholder #565656).
   Ported from github.com/Jakubantalik/Libraries/packages/border-beam
   styles.ts → generateLineVariantCSS + lineColorPalettes.colorful.dark
   + lineInnerGradientData.colorful.  Dark preset: stroke 1.14,
   inner .7, hueRange 13, brightness 1.3, saturation 1.2.
   The component is theme-fixed (theme="dark") — it stays a dark
   surface in light mode too, exactly like the 21st.dev demo.
   ============================================================ */
@property --beam-x{syntax:"<number>";initial-value:0;inherits:true}
@property --beam-w{syntax:"<number>";initial-value:1;inherits:true}
@property --beam-h{syntax:"<number>";initial-value:1;inherits:true}
@property --beam-edge{syntax:"<number>";initial-value:1;inherits:true}
@property --beam-opacity{syntax:"<number>";initial-value:0;inherits:true}

/* --- Wrapper = BorderBeam root + SearchBar surface merged --- */
.rsb-search-page-input-wrap,
.rsb-articles-search,
.rsb-faq-search-box,
.br-search,
.rsb-p-search-wrap{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    padding:0 13px!important;
    margin-bottom:0;
    border:0!important;
    border-radius:20px!important;
    background:#1d1d1d!important;
    color:#565656!important;
    box-shadow:inset 0 0 0 1px rgba(44,47,54,.52),inset 0 0 50px 0 rgba(255,255,255,.02)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:none!important;
    animation:
        beam-travel 3.1s linear infinite,
        beam-edge-fade 3.1s linear infinite,
        beam-breathe 4s ease-in-out infinite,
        beam-fade-in .6s ease forwards;
}
/* focus-within must not shift geometry (theme had translateY/ring) */
.rsb-search-page-input-wrap:focus-within,
.rsb-articles-search:focus-within,
.rsb-faq-search-box:focus-within,
.br-search:focus-within,
.rsb-p-search-wrap:focus-within{
    transform:none!important;
    border-color:transparent!important;
    box-shadow:inset 0 0 0 1px rgba(44,47,54,.52),inset 0 0 50px 0 rgba(255,255,255,.02)!important;
}

/* --- ::after = 1px border STROKE. 9 colored ellipses hugging the
       bottom edge, masked to the padding ring, then masked again to a
       78×60 ellipse that travels with --beam-x. --- */
.rsb-search-page-input-wrap::after,
.rsb-articles-search::after,
.rsb-faq-search-box::after,
.br-search::after,
.rsb-p-search-wrap::after{
    content:"";
    position:absolute;inset:0;
    border-radius:19px;
    padding:1px;
    clip-path:inset(0 round 20px);
    pointer-events:none;
    z-index:2;
    background:
        radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px),rgba(255,255,255,.38) 0%,rgba(255,255,255,.12) 30%,transparent 65%),
        radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px),rgb(255,50,100),transparent),
        radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) 100%,rgb(40,180,220),transparent),
        radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px),rgb(50,200,80),transparent),
        radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) 100%,rgb(180,40,240),transparent),
        radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px),rgb(255,160,30),transparent),
        radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px),rgb(100,70,255),transparent),
        radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) 100%,rgb(40,140,255),transparent),
        radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px),rgb(240,50,180),transparent),
        radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px),rgb(30,185,170),transparent);
    -webkit-mask:
        radial-gradient(ellipse calc(78px * var(--beam-w)) calc(60px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%,white 0%,rgba(255,255,255,.5) 45%,transparent 100%),
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:source-in,xor;
    mask:
        radial-gradient(ellipse calc(78px * var(--beam-w)) calc(60px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%,white 0%,rgba(255,255,255,.5) 45%,transparent 100%),
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite:intersect,exclude;
    opacity:calc(var(--beam-opacity) * var(--beam-edge) * 1.14);
    animation:beam-hue-shift 12s ease-in-out infinite;
}

/* --- ::before = INNER GLOW. Same cluster at lower alpha, faded away
       from the edges (28px), so colour bleeds softly into the field. --- */
.rsb-search-page-input-wrap::before,
.rsb-articles-search::before,
.rsb-faq-search-box::before,
.br-search::before,
.rsb-p-search-wrap::before{
    content:"";
    position:absolute;inset:0;
    border-radius:20px;
    clip-path:inset(0 round 20px);
    pointer-events:none;
    z-index:1;
    background:
        radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%,rgba(255,50,100,.48),transparent),
        radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px),rgba(40,180,220,.42),transparent),
        radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) 100%,rgba(50,200,80,.48),transparent),
        radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px),rgba(180,40,240,.42),transparent),
        radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px),rgba(255,160,30,.5),transparent),
        radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) 100%,rgba(100,70,255,.45),transparent),
        radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px),rgba(40,140,255,.4),transparent),
        radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) 100%,rgba(240,50,180,.45),transparent),
        radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px),rgba(30,185,170,.52),transparent);
    box-shadow:inset 0 0 9px 1px rgba(255,255,255,.1);
    -webkit-mask-image:
        radial-gradient(ellipse calc(78px * var(--beam-w)) calc(60px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%,white 0%,rgba(255,255,255,.5) 45%,transparent 100%),
        linear-gradient(white,transparent 28px,transparent calc(100% - 28px),white),
        linear-gradient(to right,white,transparent 28px,transparent calc(100% - 28px),white);
    -webkit-mask-composite:source-in,source-over;
    mask-image:
        radial-gradient(ellipse calc(78px * var(--beam-w)) calc(60px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%,white 0%,rgba(255,255,255,.5) 45%,transparent 100%),
        linear-gradient(white,transparent 28px,transparent calc(100% - 28px),white),
        linear-gradient(to right,white,transparent 28px,transparent calc(100% - 28px),white);
    mask-composite:intersect,add;
    opacity:calc(var(--beam-opacity) * var(--beam-edge) * .7);
    animation:beam-hue-shift 12s ease-in-out infinite;
}

/* --- Content above the beam layers --- */
.rsb-search-page-input-wrap>*,
.rsb-articles-search>*,
.rsb-faq-search-box>*,
.br-search>*,
.rsb-p-search-wrap>*{position:relative;z-index:3}

/* --- SearchBar internals: reference is icon(20px, opacity .4) +
       15px/18px text in #565656 --- */
.rsb-search-page-input-wrap input,
.rsb-articles-search input,
.rsb-faq-search-input,
.br-search input,
.rsb-p-search input{
    flex:1 1 auto!important;min-width:0!important;
    height:100%!important;min-height:0!important;
    padding:0!important;margin:0!important;
    border:0!important;border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;outline:none!important;
    color:#caccd2!important;
    font-size:15px!important;line-height:18px!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.rsb-search-page-input-wrap input::placeholder,
.rsb-articles-search input::placeholder,
.rsb-faq-search-input::placeholder,
.br-search input::placeholder,
.rsb-p-search input::placeholder{color:#565656!important;opacity:1!important}

.rsb-faq-search-icon,
.rsb-articles-search .s-icon{
    position:static!important;
    width:auto!important;height:auto!important;
    margin:0!important;padding:0!important;
    background:none!important;border:0!important;box-shadow:none!important;
    color:#fff!important;opacity:.4!important;
    font-size:16px!important;flex:0 0 auto!important;
}
.rsb-faq-search-input{padding-right:0!important;padding-left:0!important}
.rsb-faq-search-clear{
    position:static!important;
    color:#565656!important;background:transparent!important;border:0!important;
    box-shadow:none!important;flex:0 0 auto!important;
}

/* Submit buttons: reference SearchBar has none — keep ours quiet,
   a dim chip that only wakes on hover so the beam stays the hero. */
.rsb-search-page-btn,
.rsb-articles-search button,
.br-btn{
    flex:0 0 auto!important;
    height:28px!important;
    padding:0 12px!important;
    margin:0!important;
    border:0!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.06)!important;
    color:#8a8d94!important;
    font-size:13px!important;font-weight:500!important;
    box-shadow:none!important;
    transform:none!important;
    transition:background .2s ease,color .2s ease!important;
}
.rsb-search-page-btn:hover,
.rsb-articles-search button:hover,
.br-btn:hover{
    background:rgba(255,255,255,.12)!important;
    color:#e6e7ea!important;
    transform:none!important;
    box-shadow:none!important;
}

/* Mobile overlay: hide the decorative liquid blob (reference has none) */
.rsb-p-search-wrap .rsb-p-liquid-overlay{display:none!important}

/* Wrapper spacing that the theme put on inner elements */
.rsb-articles-search-wrap{margin-top:-21px}

/* --- Keyframes: exact curves from generateLineVariantCSS --- */
@keyframes beam-travel{
    0%  {--beam-x:.06;--beam-w:.5}
    10% {--beam-x:.15;--beam-w:.8}
    20% {--beam-x:.25;--beam-w:1.1}
    30% {--beam-x:.35;--beam-w:1.3}
    40% {--beam-x:.44;--beam-w:1.45}
    50% {--beam-x:.5; --beam-w:1.5}
    60% {--beam-x:.56;--beam-w:1.45}
    70% {--beam-x:.65;--beam-w:1.3}
    80% {--beam-x:.75;--beam-w:1.1}
    90% {--beam-x:.85;--beam-w:.8}
    100%{--beam-x:.94;--beam-w:.5}
}
@keyframes beam-edge-fade{
    0%   {--beam-edge:0}
    12.5%{--beam-edge:0}
    32.5%{--beam-edge:1}
    67.5%{--beam-edge:1}
    87.5%{--beam-edge:0}
    100% {--beam-edge:0}
}
@keyframes beam-breathe{
    0%,100%{--beam-h:.8}
    25%    {--beam-h:1.25}
    55%    {--beam-h:.85}
    80%    {--beam-h:1.3}
}
@keyframes beam-fade-in{to{--beam-opacity:1}}
@keyframes beam-hue-shift{
    0%  {filter:hue-rotate(-13deg) brightness(1.3) saturate(1.2)}
    50% {filter:hue-rotate(13deg)  brightness(1.3) saturate(1.2)}
    100%{filter:hue-rotate(-13deg) brightness(1.3) saturate(1.2)}
}

/* Reduced motion: beam parked at centre, static */
@media (prefers-reduced-motion:reduce){
    .rsb-search-page-input-wrap,.rsb-articles-search,.rsb-faq-search-box,.br-search,.rsb-p-search-wrap,
    .rsb-search-page-input-wrap::before,.rsb-articles-search::before,.rsb-faq-search-box::before,.br-search::before,.rsb-p-search-wrap::before,
    .rsb-search-page-input-wrap::after,.rsb-articles-search::after,.rsb-faq-search-box::after,.br-search::after,.rsb-p-search-wrap::after{
        animation:none!important;
        --beam-x:.5;--beam-w:1.5;--beam-h:1;--beam-edge:1;--beam-opacity:1;
    }
}