/* static/public-halden.css — paginile publice în stilul Halden (25.10.2026, cerut de user după
   demo.codeandchill.store/halden): fundal gri-verzui deschis, carduri aproape albe cu linie fină,
   accent petrol, Manrope, cifre mari cu litere strânse, cardul „hero” petrol închis cu grilă.
   Culorile paginilor (login, Prețuri, Blog, articole, Funcționalități, documentele legale, meniul,
   subsolul, banerul de campanie) au fost trecute pe variabilele de aici; schimbi tema schimbând
   doar blocul :root. Inclus din _nav_public.html, deci pe toate paginile care au meniul public. */

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --h-a-950: #0a3338; --h-a-800: #0d4f57; --h-a-700: #12707a; --h-a-600: #198591; --h-a-400: #55b4bc; --h-a-100: #dff1f1;
  --h-page: #f3f4f3;        /* fundalul paginii */
  --h-panel: #eceeed;       /* câmpuri, fundaluri secundare */
  --h-card: #fdfdfc;        /* cardurile */
  --h-hair: #e0e4e3;        /* liniile fine */
  --h-hair-strong: #d2d8d7;
  --h-ink: #111a1b;         /* textul principal */
  --h-muted: #5d6869;       /* textul secundar */
  --h-faint: #667172;
  --h-accent: var(--h-a-700);
  --h-accent-hover: var(--h-a-800);
  --h-accent-soft: var(--h-a-100);
  --h-on-accent: #f1f8f8;
  --h-deep: var(--h-a-950); /* cardul „hero” */
  --h-good: #1d7745; --h-good-bg: #e3f3e8;
  --h-amber: #a5620a; --h-amber-bg: #fdf2e0;
  --h-rose: #bf3838; --h-rose-bg: #fdeceb;
  --h-blue: #2a78d6;
  --h-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --h-r-lg: 18px; --h-r-md: 14px; --h-r-sm: 10px;
  --h-shadow: 0 1px 2px #111a1b0a;
  --h-shadow-pop: 0 0 0 1px var(--h-hair), 0 24px 60px -20px #111a1b4d;
  --h-topbar: #f3f4f3db;
  --h-ease: cubic-bezier(.22, 1, .36, 1);
  --h-focus: 0 0 0 2px var(--h-card), 0 0 0 4px var(--h-a-600);
  color-scheme: light;
}

/* fundalul „Revenue won” din Halden: petrol închis, grila de 28px și lumina din colțul dreapta-sus,
   estompată spre stânga. Pus pe orice element cu clasa .h-adanc (cardul de pe login, CTA-urile). */
.h-adanc { position: relative; isolation: isolate; overflow: hidden; color: #eef7f7; background: var(--h-deep); }
.h-adanc::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, #ffffff0d 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(#ffffff0d 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--h-a-600) 70%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(105deg, #0000 20%, #000 75%); mask-image: linear-gradient(105deg, #0000 20%, #000 75%);
}

html body { font-family: var(--h-font) !important; background: var(--h-page) !important; color: var(--h-muted); }
html body :is(h1, h2, h3, h4) { font-family: var(--h-font); }
html body :is(button, input, select, textarea) { font-family: inherit; }
::selection { background: var(--h-a-100); color: var(--h-a-950); }
:focus-visible { outline: none; box-shadow: var(--h-focus); }
html body ::-webkit-scrollbar-track { background: var(--h-page); }
html body ::-webkit-scrollbar-thumb { background: var(--h-hair-strong); }

/* ── Sigla (_marca_publica.html): imaginea, nu desenul de dinainte ─────── */
.h-marca { display: inline-flex; align-items: center; text-decoration: none; }
.h-marca-img { display: block; height: 52px; width: auto; }
html body .pf .h-marca-img { height: 56px; }

/* ── Meniul de sus (_nav_public.html), ca bara Halden ──────────────────── */
html body .pn { background: var(--h-topbar); font-family: var(--h-font);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
html body .pn::after { background: var(--h-hair); opacity: 1; }
html body .pn.pn-jos { background: var(--h-topbar); box-shadow: none; }
html body .pn-in { height: 64px; }
html body .pn-links { gap: 4px; }
html body .pn-links a { color: var(--h-muted); font-size: 14.5px; font-weight: 600; padding: 8px 14px; border-radius: var(--h-r-sm);
  border: 1px solid transparent; }
html body .pn-links a::after { display: none; }
html body .pn-links a:hover { color: var(--h-ink); background: var(--h-panel); }
html body .pn-links a.pn-act { color: var(--h-ink); background: var(--h-card); border-color: var(--h-hair-strong); box-shadow: var(--h-shadow); }
html body .pn-btn { font: 700 14px/1 var(--h-font); border-radius: var(--h-r-sm); padding: 11px 16px; }
html body .pn-pri { background: var(--h-accent); color: var(--h-on-accent); box-shadow: none; }
html body .pn-pri:hover { background: var(--h-accent-hover); filter: none; box-shadow: none; }
html body .pn-meniu { border-color: var(--h-hair-strong); background: var(--h-card); color: var(--h-ink); border-radius: var(--h-r-sm); }
@media (max-width: 860px) {
  html body .pn-links { background: var(--h-card); border-bottom: 1px solid var(--h-hair); box-shadow: var(--h-shadow-pop); }
  html body .pn-links a.pn-act { background: var(--h-accent-soft); border-color: transparent; }
  html body .h-marca-img { height: 38px; }
}

/* ── Butoanele ─────────────────────────────────────────────────────────── */
html body :is(.hero-btn-primary, .btn-primary, .pf-btn-pri, .cta-btn, .plan-btn-primary) {
  background: var(--h-accent) !important; color: var(--h-on-accent) !important; border: 0 !important;
  border-radius: var(--h-r-sm) !important; box-shadow: none !important; font-weight: 700; font-family: var(--h-font);
  transition: background-color .2s var(--h-ease), transform .1s;
}
html body :is(.hero-btn-primary, .btn-primary, .pf-btn-pri, .cta-btn, .plan-btn-primary):hover { background: var(--h-accent-hover) !important; transform: none; }
html body :is(.hero-btn-primary, .btn-primary, .pf-btn-pri, .cta-btn, .plan-btn-primary):active { transform: scale(.98); }
html body :is(.hero-btn-ghost, .btn-ghost, .btn-secondary, .pf-btn-sec) {
  background: var(--h-card) !important; color: var(--h-ink) !important; border: 1px solid var(--h-hair-strong) !important;
  border-radius: var(--h-r-sm) !important; box-shadow: var(--h-shadow) !important; font-weight: 700; font-family: var(--h-font);
}
html body :is(.hero-btn-ghost, .btn-ghost, .btn-secondary, .pf-btn-sec):hover { background: var(--h-panel) !important; }

/* ── Titlurile secțiunilor: sprânceana Halden (majuscule mici, petrol) ── */
html body .section-label { background: none; border: 0; padding: 0; border-radius: 0; color: var(--h-accent);
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; gap: 0; }
html body .section-label .ti { display: none; }
html body .section-title { color: var(--h-ink); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; text-wrap: balance; }
html body .section-sub { color: var(--h-muted); text-wrap: pretty; }

/* ── Cardurile ─────────────────────────────────────────────────────────── */
html body :is(.feat-card, .testimonial-card, .faq-item, .split-item-detail, .plan-card, .pricing-card, .blog-card,
              .article-card, .post-card, .legal-card, .card) {
  background: var(--h-card); border: 1px solid var(--h-hair); border-radius: var(--h-r-lg); box-shadow: var(--h-shadow);
}
html body :is(.feat-card, .testimonial-card, .faq-item, .split-item-detail, .blog-card, .post-card):hover {
  transform: none; border-color: var(--h-hair-strong); box-shadow: var(--h-shadow);
}
html body .feat-card-icon { background: var(--h-accent-soft) !important; color: var(--h-accent) !important; border: 0 !important;
  border-radius: var(--h-r-sm) !important; box-shadow: none !important; }
html body :is(.feat-card-title, .di-title, .testimonial-company) { color: var(--h-ink); font-weight: 700; letter-spacing: -.01em; }
html body :is(.feat-card-desc, .di-desc, .testimonial-msg, .faq-answer) { color: var(--h-muted); }
html body .feat-badge-new { background: var(--h-accent-soft) !important; color: var(--h-accent) !important; border: 0 !important;
  border-radius: 6px !important; font-weight: 700; }
html body .faq-item summary { color: var(--h-ink); font-weight: 700; }
html body .faq-item .faq-icon { color: var(--h-accent); }
html body .faq-item[open] { border-color: var(--h-hair-strong); }

/* ── Banda campaniei (_campanie.html) pe fundalul „hero” Halden ────────── */
html body .camp-banner:not(.camp-inline) { color: #eef7f7; background: var(--h-deep); border-bottom: 0; font-family: var(--h-font); isolation: isolate; overflow: hidden; }
html body .camp-banner:not(.camp-inline)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #ffffff0d 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(#ffffff0d 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(60% 160% at 100% 0%, color-mix(in srgb, var(--ca) 45%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(105deg, #0000 10%, #000 70%); mask-image: linear-gradient(105deg, #0000 10%, #000 70%);
}
html body .camp-banner:not(.camp-inline) :is(.camp-titlu, .camp-ceas b) { color: #f4fafa; }
html body .camp-banner:not(.camp-inline) :is(.camp-sub, .camp-ceas i, .camp-procent small, .camp-x) { color: #c5e0e1; }
html body .camp-banner:not(.camp-inline) .camp-ceas > span { background: #ffffff12; box-shadow: inset 0 0 0 1px #ffffff1f; border-radius: 8px; }
html body .camp-banner:not(.camp-inline) .camp-x:hover { background: #ffffff14; color: #fff; }
html body .camp-banner:not(.camp-inline) .camp-btn { border-radius: var(--h-r-sm); box-shadow: none; font-family: var(--h-font); }

/* ── Subsolul (_footer_public.html) ────────────────────────────────────── */
html body .pf { background: var(--h-card) !important; border-top: 1px solid var(--h-hair); font-family: var(--h-font); }
html body .pf::before, html body .pf::after { display: none !important; }
html body .pf-logo { display: inline-flex; height: auto; max-width: none; text-decoration: none; }
html body .pf-h { color: var(--h-ink) !important; font-weight: 800; letter-spacing: .06em; }
html body .pf-links a { color: var(--h-muted); }
html body .pf-links a:hover { color: var(--h-accent); }

/* ── Bandele fixe (WhatsApp, înapoi sus) rămân; liniile de separare din pagini ── */
html body hr { border-color: var(--h-hair); }

/* ── Antetul paginilor (Prețuri, Blog, documentele legale): ca „Reports” / „Settings” din Halden —
   pe fundalul paginii, aliniat la stânga, sprânceana petrol, titlul mare și strâns, fără animație. ── */
.h-sprinceana { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--h-accent); margin-bottom: 8px; }
html body :is(.hero, .blog-hero, .art-hero):not(:has(.h-adanc)) {
  background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible;
  max-width: 1180px; margin: 0 auto; padding: 44px 24px 10px; text-align: left;
}
html body :is(.hero, .blog-hero, .art-hero):not(:has(.h-adanc))::before,
html body :is(.hero, .blog-hero, .art-hero):not(:has(.h-adanc))::after { display: none !important; }
html body :is(.hero, .blog-hero, .art-hero, .pricing-header):not(:has(.h-adanc)) > * { margin-left: 0 !important; text-align: left; }
html body :is(.hero, .blog-hero, .pricing-header):not(:has(.h-adanc)) h1 {
  color: var(--h-ink) !important; font-weight: 800; letter-spacing: -.04em; line-height: 1.05;
  font-size: clamp(30px, 4vw, 44px); margin: 0 0 10px; background: none; -webkit-text-fill-color: currentColor;
}
html body :is(.hero, .blog-hero, .pricing-header):not(:has(.h-adanc)) h1 .ti { display: none; }
html body :is(.hero, .blog-hero, .pricing-header):not(:has(.h-adanc)) > p { color: var(--h-muted) !important; font-size: 15px; max-width: 64ch; }
html body .pricing-header { max-width: none; margin: 0; padding: 0; text-align: left; }
html body .pricing-header > div[style*="justify-content:center"] { justify-content: flex-start !important; }
/* căutarea din blog: câmp Halden */
html body .blog-hero .search-bar { margin: 18px 0 14px; max-width: 520px; gap: 8px; }   /* 14px până la filtre: erau lipite de câmp */
/* !important: logat, pagina primește și tema firmei, care colora câmpul închis (25.10.2026) */
html body .blog-hero .search-bar input { background: var(--h-card) !important; border: 1px solid var(--h-hair-strong) !important; border-radius: var(--h-r-sm) !important; color: var(--h-ink) !important; }
html body .blog-hero .search-bar input::placeholder { color: var(--h-faint) !important; }
html body .blog-hero .search-bar button { background: var(--h-accent); color: var(--h-on-accent); border-radius: var(--h-r-sm); }
@media (max-width: 860px) {
  html body :is(.hero, .blog-hero, .art-hero):not(:has(.h-adanc)) { padding: 26px 16px 4px; }
}

/* ── Prețuri: cardurile de plan ca „Open pipeline” — albe; cel recomandat cu linie petrol, fără umflare ── */
html body .pricing-card { border-radius: var(--h-r-lg) !important; box-shadow: var(--h-shadow) !important; }
html body .pricing-card:hover { transform: none !important; }
html body .pricing-card.featured { border: 1.5px solid var(--h-accent) !important; transform: none !important; box-shadow: var(--h-shadow) !important; }
html body .pricing-card.featured::before { background: var(--h-accent); color: var(--h-on-accent); box-shadow: none; border-radius: 6px;
  letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; padding: 4px 10px; }
html body .pricing-card :is(.plan-price, .price, .pc-pret) { color: var(--h-ink); letter-spacing: -.045em; font-weight: 800; }
html body .pricing-card:not(.featured) .pc-cta { background: var(--h-card) !important; color: var(--h-ink) !important; border: 1px solid var(--h-hair-strong) !important; }
html body .pricing-card:not(.featured) .pc-cta:hover { background: var(--h-panel) !important; color: var(--h-ink) !important; border-color: var(--h-hair-strong) !important; }
html body .pc-cta { border-radius: var(--h-r-sm) !important; font-weight: 700 !important; }
html body .pc-wa { border-radius: var(--h-r-sm) !important; }
html body :is(.pn-brand, .pf-logo, .h-marca) { text-decoration: none !important; }

/* ── Program service GSM: hero-ul e cardul închis Halden, captura stă în el ── */
html body .ps-hero { padding: 18px 22px 24px; }
html body .ps-hero::before { display: none; }
html body .ps-hero > .in { position: relative; isolation: isolate; overflow: hidden; background: var(--h-deep); border-radius: var(--h-r-lg);
  padding: 52px 52px; max-width: 1320px; margin: 0 auto; }
html body .ps-hero > .in::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #ffffff0d 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(#ffffff0d 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--h-a-600) 70%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(105deg, #0000 20%, #000 75%); mask-image: linear-gradient(105deg, #0000 20%, #000 75%); }
html body .ps-hero h1 { color: #f4fafa; font-weight: 800; letter-spacing: -.045em; }
html body .ps-hero h1 b { background: none; color: #8fd1d6; -webkit-text-fill-color: #8fd1d6; }
html body .ps-hero :is(p.ps-lead, .ps-mic, .ps-bife) { color: #c5e0e1; }
html body .ps-hero .ps-bife .ti { color: #8fd1d6; }
html body .ps-hero .ps-eti { background: none; border: 0; padding: 0; color: #c5e0e1; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html body .ps-hero .ps-eti .ti { display: none; }
html body .ps-btn { border-radius: var(--h-r-sm); box-shadow: none; }
html body .ps-hero .ps-pri { background: #f4fafa; color: var(--h-a-950); }
html body .ps-hero .ps-sec { background: #ffffff12; color: #f4fafa; border: 1px solid #ffffff33; }
html body .ps-pri { background: var(--h-accent); color: var(--h-on-accent); }
html body .ps-sec { background: var(--h-card); color: var(--h-ink); border: 1px solid var(--h-hair-strong); }
html body .ps-fer { box-shadow: 0 0 0 1px #ffffff14, 0 30px 70px -24px #000000a0; border-radius: var(--h-r-md); }
html body .ps-final { position: relative; isolation: isolate; overflow: hidden; background: var(--h-deep); border: 0; border-radius: var(--h-r-lg); }
html body .ps-final::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #ffffff0d 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(#ffffff0d 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--h-a-600) 70%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(105deg, #0000 20%, #000 75%); mask-image: linear-gradient(105deg, #0000 20%, #000 75%); }
html body .ps-final h2 { color: #f4fafa; font-weight: 800; letter-spacing: -.04em; }
html body .ps-final p { color: #c5e0e1; }
html body .ps-final .ps-pri { background: #f4fafa; color: var(--h-a-950); }
@media (max-width: 860px) {
  html body .ps-hero { padding: 12px 12px 16px; }
  html body .ps-hero > .in { padding: 28px 18px; }
  html body .ps-final { margin: 0 12px 40px; }
}
html body .blog-hero .cat-pills { justify-content: flex-start; }
html body .hero:not(:has(.h-adanc)):not(:has(.pricing-header)) { max-width: 1008px; }
html body .hero:has(.pricing-header) { max-width: 1384px; }
html body .blog-hero { max-width: 1408px; }

/* ── Blog și Prețuri: antetul e cardul petrol închis, ca pe Acasă și „Program service GSM” (25.10.2026).
   Pe Blog cardul e chiar .blog-hero; pe Prețuri e .pricing-header din .hero (.hero rămâne cadru transparent). ── */
html body .blog-hero:not(:has(.h-adanc)), html body .hero:not(:has(.h-adanc)) > .pricing-header {
  position: relative; isolation: isolate; overflow: hidden; background: var(--h-deep) !important; border-radius: var(--h-r-lg) !important;
}
html body .blog-hero:not(:has(.h-adanc)) { width: calc(100% - 44px); max-width: 1364px; margin: 18px auto 8px; padding: 44px 48px 34px; box-sizing: border-box; }
html body .hero:has(.pricing-header) { padding: 18px 22px 8px !important; }
html body .hero:not(:has(.h-adanc)) > .pricing-header { padding: 44px 48px 40px; }
html body .blog-hero:not(:has(.h-adanc))::before, html body .hero:not(:has(.h-adanc)) > .pricing-header::before {
  content: "" !important; display: block !important; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #ffffff0d 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(#ffffff0d 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--h-a-600) 70%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(105deg, #0000 20%, #000 75%); mask-image: linear-gradient(105deg, #0000 20%, #000 75%);
}
html body :is(.blog-hero, .pricing-header) .h-sprinceana { color: #8fd1d6; }
html body :is(.blog-hero, .pricing-header):not(:has(.h-adanc)) h1 { color: #f4fafa !important; }
html body :is(.blog-hero, .pricing-header):not(:has(.h-adanc)) > p,
html body .pricing-header > div[style*="justify-content"], html body .pricing-header > div[style*="justify-content"] strong { color: #c5e0e1 !important; }
html body .pricing-header .ti, html body .pricing-header .register-link { color: #8fd1d6 !important; }
html body .blog-hero .search-bar input { background: #ffffff12 !important; border-color: #ffffff33 !important; color: #f4fafa !important; }
html body .blog-hero .search-bar input::placeholder { color: #c5e0e1b0 !important; }
html body .blog-hero .search-bar button { background: #f4fafa !important; color: var(--h-a-950) !important; }
html body .blog-hero .cat-pill { background: #ffffff12 !important; border-color: #ffffff33 !important; color: #e6f2f2 !important; }
html body .blog-hero .cat-pill:hover { background: #ffffff22 !important; }
html body .blog-hero .cat-pill.active { background: #f4fafa !important; border-color: #f4fafa !important; color: var(--h-a-950) !important; }
@media (max-width: 860px) {
  html body .blog-hero:not(:has(.h-adanc)) { width: calc(100% - 24px); margin-top: 12px; padding: 28px 18px 22px; }
  html body .hero:has(.pricing-header) { padding: 12px 12px 4px !important; }
  html body .hero:not(:has(.h-adanc)) > .pricing-header { padding: 28px 18px 24px; }
}

/* ── Articolul de blog: antetul e cardul petrol închis, ca lista Blogului și Prețurile (26.10.2026, cerut de user).
   În card: categoria, titlul, autorul/data și coperta în dreapta; pe telefon coperta trece sub titlu. ── */
html body .art-hero:not(:has(.h-adanc)) {
  position: relative; isolation: isolate; overflow: hidden; background: var(--h-deep) !important; border: 0 !important;
  border-radius: var(--h-r-lg); width: calc(100% - 44px); max-width: 1364px; margin: 18px auto 0; box-sizing: border-box;
  padding: 44px 48px !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 44px; align-items: center;
}
html body .art-hero:not(:has(.h-adanc)):not(:has(.art-featured-img-wrap)) { grid-template-columns: minmax(0, 1fr); }
html body .art-hero:not(:has(.h-adanc))::before {
  content: "" !important; display: block !important; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #ffffff0d 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(#ffffff0d 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--h-a-600) 70%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(105deg, #0000 20%, #000 75%); mask-image: linear-gradient(105deg, #0000 20%, #000 75%);
}
html body .art-hero .art-hero-inner { max-width: none; margin: 0; min-width: 0; }
html body .art-hero .art-cat { background: #ffffff12 !important; border-color: #ffffff33 !important; color: #e6f2f2 !important; margin-bottom: 16px; }
html body .art-hero .art-cat:hover { background: #ffffff22 !important; }
html body .art-hero .art-title { color: #f4fafa !important; font-weight: 800; letter-spacing: -.035em; line-height: 1.1;
  font-size: clamp(28px, 3.2vw, 42px); margin: 0 0 16px; }
html body .art-hero .art-meta { color: #c5e0e1 !important; margin: 0; gap: 8px 18px; }
html body .art-hero .art-meta .ti { color: #8fd1d6; }
html body .art-hero .art-featured-img-wrap { max-width: none; margin: 0; border-radius: var(--h-r-md); min-width: 0;
  box-shadow: 0 0 0 1px #ffffff14, 0 30px 70px -24px #000000a0; }
@media (max-width: 960px) {
  html body .art-hero:not(:has(.h-adanc)) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 860px) {
  html body .art-hero:not(:has(.h-adanc)) { width: calc(100% - 24px); margin-top: 12px; padding: 28px 18px 18px !important; }
  html body .art-hero .art-title { font-size: 26px; }
}