/* LeylRus v4 — brand re-skin on top of fide.css/v2/v3.
   Palette sampled from the LeylRus logo: deep navy + graphite steel.
   Warm accent (from v3) is kept but narrowed to CTAs only. */
:root{
--brand-navy:#0A2240;--brand-navy-2:#123059;--brand-navy-3:#1C3D6E;--brand-graphite:#3A3A3A;--brand-ink:#05121F;

--bg-page:#F3F5FA;--bg-surface:#FFFFFF;--bg-sunken:#E9EDF6;--bg-hover:#EDF1F9;
--fg-1:var(--brand-navy);--fg-2:#4B5565;--fg-disabled:#98A2B5;
--border-1:#DCE2EE;--border-2:#C3CCDE;

--gradient-accent:linear-gradient(135deg,var(--brand-navy-3),var(--brand-navy));
--gradient-blue:linear-gradient(135deg,#334E7A,var(--brand-navy-2));
--gradient-green:linear-gradient(135deg,#5B6578,var(--brand-graphite));
--gradient-hero:var(--gradient-accent);
--shadow-navy:0 12px 26px -6px rgba(10,34,64,.35);
}
[data-theme="dark"]{
--bg-page:#060B14;--bg-surface:#0E1830;--bg-sunken:#0A1324;--bg-hover:#132040;
--fg-1:#EAF0FC;--fg-2:#93A3C2;--fg-disabled:#5A6684;
--border-1:#1C2B4A;--border-2:#283A5F;
--gradient-accent:linear-gradient(135deg,#2A4D8C,#0F1E38);
--gradient-blue:linear-gradient(135deg,#43506B,#1C2639);
--gradient-green:linear-gradient(135deg,#505A6E,#272E3C);
--gradient-hero:linear-gradient(135deg,#CBDBFF,#6E9EEA);
--shadow-navy:0 16px 32px -8px rgba(0,0,0,.55);
}
@media (prefers-color-scheme:dark){
[data-theme="system"]{
--bg-page:#060B14;--bg-surface:#0E1830;--bg-sunken:#0A1324;--bg-hover:#132040;
--fg-1:#EAF0FC;--fg-2:#93A3C2;--fg-disabled:#5A6684;
--border-1:#1C2B4A;--border-2:#283A5F;
--gradient-accent:linear-gradient(135deg,#2A4D8C,#0F1E38);
--gradient-blue:linear-gradient(135deg,#43506B,#1C2639);
--gradient-green:linear-gradient(135deg,#505A6E,#272E3C);
--gradient-hero:linear-gradient(135deg,#CBDBFF,#6E9EEA);
--shadow-navy:0 16px 32px -8px rgba(0,0,0,.55);
}
}

/* ---- Header: steel panel instead of warm glass ---- */
.site-header{background:color-mix(in srgb,var(--bg-surface) 88%,transparent);border-bottom:1px solid var(--border-1)}

/* ---- Logo: real mark, frameless, sized to the wordmark's letter height ----
   Two colourways ship (navy-on-transparent / white-on-transparent) so the
   icon always reads without needing a background chip in either theme. */
.logo-mark{display:inline-flex;align-items:center;width:auto;height:auto;background:none;box-shadow:none;border-radius:0;padding:0;flex:none}
.logo-mark img{display:block;height:30px;width:auto}
@media (min-width:768px){.logo-mark img{height:38px}}
.logo-mark img.logo-mark__light{display:none}
[data-theme="dark"] .logo-mark img.logo-mark__dark{display:none}
[data-theme="dark"] .logo-mark img.logo-mark__light{display:block}
@media (prefers-color-scheme:dark){
  [data-theme="system"] .logo-mark img.logo-mark__dark{display:none}
  [data-theme="system"] .logo-mark img.logo-mark__light{display:block}
}

/* ---- Hero: navy-led wash, warm accent kept out of the ambient blobs ---- */
.hero::before{background:var(--brand-navy-3);opacity:.20}
.hero::after{background:var(--brand-graphite);opacity:.16}
.hero h1{position:relative}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .hero h1{background:var(--gradient-hero);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.hero h1::after{content:"";display:block;width:64px;height:4px;margin-top:14px;border-radius:2px;background:var(--cta-bg)}

/* ---- Category tiles: steel family instead of a rainbow cycle ---- */
.cat-art{background:var(--gradient-accent);box-shadow:var(--shadow-navy)}
.cat-grid>a:nth-child(3n+2) .cat-art{background:var(--gradient-blue);box-shadow:var(--shadow-navy)}
.cat-grid>a:nth-child(3n) .cat-art{background:var(--gradient-green);box-shadow:var(--shadow-navy)}

/* ---- Chips: active state reads as brand, not CTA ---- */
.f-chip[aria-pressed="true"],.f-chip.is-active{background:var(--gradient-accent);border-color:transparent;color:#fff;box-shadow:var(--shadow-navy)}

/* ---- Perk / fact icon circles follow the steel palette ---- */
.perk .ic{background:var(--bg-sunken);color:var(--brand-navy)}
[data-theme="dark"] .perk .ic,[data-theme="system"] .perk .ic{color:#9FB4E0}