/* =========================================================
   nowadays.ro - ProShade visual layer
   Palette, glows, cards, hovers and the ProShade navbar.
   Loaded last (after style.css, motion.css, shop.css).
   ========================================================= */
:root {
    --accent: #de222c;
    --accent-2: #ff4d55;
    --accent-deep: #8b0a10;
    --accent-glow: rgba(222, 34, 44, 0.55);
    --glass-bg: rgba(15, 15, 18, 0.66);
    --glass-border: rgba(255, 255, 255, 0.09);
    --border-hi: rgba(255, 255, 255, 0.16);
    --text-muted: #a7a7ad;
}
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

/* background glows in the ProShade red */
.bg-ambient { background: radial-gradient(ellipse at center, rgba(222, 34, 44, 0.26) 0%, transparent 60%); }
.bg-ambient-right { background: radial-gradient(ellipse at center, rgba(222, 34, 44, 0.15) 0%, transparent 60%); }

/* type: ProShade gradients */
.text-glow-red { background: linear-gradient(180deg, #ff5a61 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; }
.text-grad-red { background: linear-gradient(180deg, #ff5a61 0%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 0 15px var(--accent-glow)); }
.section-kicker { display: inline-flex; align-items: center; color: var(--accent-2); letter-spacing: 2px; }
.section-kicker::before, .section-kicker::after { content: none !important; display: none !important; }

/* ---------- buttons (ProShade red pill) ---------- */
.btn { gap: 10px; border: 1px solid transparent; transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 0 24px rgba(222, 34, 44, .35), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-primary:hover { background: #f02a35; color: #fff; box-shadow: 0 0 40px rgba(222, 34, 44, .6), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn-primary .btn-discord-icon, .btn-primary svg { color: #fff; fill: currentColor; }
.btn-sm { padding: 11px 18px; font-size: 12px; }

/* ---------- navbar: same design as proshade.nowadays.ro ---------- */
.nav-wrap { top: 16px; padding: 0 var(--gutter, 24px); }
.nav-wrap .nav.ps-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    width: 100%; max-width: 1240px; height: auto; margin: 0 auto; padding: 10px 10px 10px 20px;
    background: rgba(10, 10, 12, .62); border: 1px solid var(--glass-border); border-radius: 999px;
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: none;
}
.nav-wrap.nav-scrolled .nav.ps-nav { box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.ps-nav a { text-transform: none; letter-spacing: normal; text-shadow: none; }
.ps-nav .brand { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 900; letter-spacing: -.02em; font-size: 18px; line-height: 1.1; }
.ps-nav .brand img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 12px var(--accent-glow)); transition: transform .3s ease; }
.ps-nav .brand:hover { color: #fff; text-shadow: none; }
.ps-nav .brand:hover img { transform: scale(1.06); }
.ps-nav .brand small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.ps-nav .nav-links { display: flex; align-items: center; gap: 4px; }
.ps-nav .nav-links a { padding: 10px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #cfcfd4; transition: color .25s ease, background .25s ease; }
.ps-nav .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .06); text-shadow: none; }
.ps-nav .nav-cta { display: flex; align-items: center; gap: 10px; }
.ps-nav .nav-cta .lang-switch { margin-left: 0; }
.ps-nav .nav-discord { color: #fff; padding: 11px 18px; font-size: 12px; }
.ps-nav .nav-discord:hover { color: #fff; transform: none; }
.ps-nav .nav-toggle { border: 1px solid var(--border-hi); background: rgba(255, 255, 255, .05); }
.ps-nav .nav-toggle-bar { width: 18px; margin-left: -9px; }
.ps-nav .nav-toggle-bar:nth-child(1) { top: 14px; }
.ps-nav .nav-toggle-bar:nth-child(2) { top: 20px; }
.ps-nav .nav-toggle-bar:nth-child(3) { top: 26px; }
.menu-open .ps-nav .nav-toggle-bar:nth-child(1), .menu-open .ps-nav .nav-toggle-bar:nth-child(3) { top: 20px; }
.mobile-menu { background: rgba(5, 5, 6, .96); }
.mobile-menu-links a:hover, .mobile-menu-links a:focus-visible { color: var(--accent-2); }
@media (max-width: 1023.98px) {
    .nav-wrap { top: 12px; padding: 0 12px; }
    .nav-wrap .nav.ps-nav { padding: 8px 8px 8px 16px; height: auto; }
    .ps-nav .nav-links { display: none; }
    .ps-nav .nav-toggle { display: block; }
}
@media (max-width: 640px) {
    .ps-nav .nav-discord { display: none; }
    .ps-nav .brand small { display: none; }
}

/* ---------- cards: ProShade glass + red hover glow ---------- */
.panel, .hero-card, .service-preview {
    background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 22px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .5s ease;
}
.hero-card { background: linear-gradient(180deg, rgba(20, 20, 24, .94), rgba(10, 10, 12, .96)); border-color: var(--border-hi);
    box-shadow: 0 40px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(222, 34, 44, .08), inset 0 1px 0 rgba(255, 255, 255, .06); }
.hero-visual { position: relative; }
.hero-visual::before { content: ''; position: absolute; inset: 10% 5%; background: radial-gradient(closest-side, rgba(222, 34, 44, .32), transparent); filter: blur(40px); z-index: -1; pointer-events: none; }
.panel:hover, .service-preview:hover { border-color: rgba(222, 34, 44, .35); background: rgba(18, 18, 22, .8); box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 50px rgba(222, 34, 44, .12); }
.panel { position: relative; overflow: hidden; }
.panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(520px circle at 0% 0%, rgba(222, 34, 44, .16), transparent 50%); }
.panel:hover::before { opacity: 1; }

.service-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-left: 3px solid transparent; border-radius: 18px; transition: border-color .35s ease, background .35s ease, transform .35s ease, box-shadow .35s ease; }
.service-card:hover { background: rgba(18, 18, 22, .8); border-color: rgba(222, 34, 44, .3); }
.service-card.active { border-left-color: var(--accent); border-color: rgba(222, 34, 44, .35);
    background: linear-gradient(90deg, rgba(222, 34, 44, .14) 0%, rgba(15, 15, 18, .66) 100%); box-shadow: 0 10px 30px rgba(222, 34, 44, .1); }

.feedback-item { border-color: var(--glass-border); }
.feedback-item:hover { border-color: rgba(222, 34, 44, .45); box-shadow: 0 0 30px rgba(222, 34, 44, .18); }

.mod-card { border-color: rgba(255, 255, 255, .09); border-radius: 22px; }
.mod-card:hover { border-color: rgba(222, 34, 44, .45); box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 60px rgba(222, 34, 44, .16); }

.stat-value { letter-spacing: -.03em; }
.lang-switch button.active { background: var(--accent); box-shadow: 0 0 16px var(--accent-glow); }

/* ProShade banner on nowadays.ro */
.nvb-ps { --nvb-img: url('/proshade/ps-bg.webp'); margin-bottom: clamp(20px, 4vw, 50px); }
@media (max-width: 760px) { .nvb-ps { --nvb-img: url('/proshade/ps-bg-960.webp'); } }

@media (prefers-reduced-motion: reduce) {
    .panel, .hero-card, .service-card, .btn { transition: none; }
}


/* =========================================================
   Liquid glass everywhere (2026-10-20): the same clear glass as the ProShade license note
   (proshade.nowadays.ro): barely-white fill + thin light border, no dark tint, no blur.
   ========================================================= */
:root { --glass-bg: rgba(255, 255, 255, .03); --glass-border: rgba(255, 255, 255, .09); }
.panel, .hero-card, .service-preview, .service-card, .mod-card {
    background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .09);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero-card, .mod-card { box-shadow: none; }
.panel:hover, .service-preview:hover, .service-card:hover { background: rgba(255, 255, 255, .05); }
.service-card.active { background: linear-gradient(90deg, rgba(222, 34, 44, .14) 0%, rgba(255, 255, 255, .03) 100%); }
/* the photo of a product card used to fade into the dark card; now it fades out softly */
.mod-card-shade {
    background:
        linear-gradient(140deg, rgba(230, 0, 0, 0.42) 0%, rgba(230, 0, 0, 0) 45%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%);
}

/* Featured Showcase (2026-10-20): the fade-in now runs on .hero-visual (index.html: data-intro moved there), not on
   .hero-card. A fading element flattens 3D, which made the text and video jump in size after ~1 s; the parent of the
   3D card can fade without that. The card keeps its tilt, the 20px depth of its content and the hover effect
   (GSAP no longer writes an inline transform on the card, which blocked the hover rule). */