/* ════════════════════════════════════════════════════════
   WACKT V7 — LIQUID GLASS · CHAMPAGNE (light, final)
   Studio-light glassmorphism · champagne accent · silver shine
   Loads AFTER wackt-v4.css. Colors & surfaces only —
   layout and logo files untouched (logo shown via invert).
   ════════════════════════════════════════════════════════ */

:root {
    /* ─── Studio light surfaces ─── */
    --void: #FAFAFC;
    --obsidian: #FFFFFF;
    --surface-1: #FFFFFF;
    --surface-2: #F1F2F6;
    --ivory: #0B0C10;                                /* text flips dark */
    --ivory-60: rgba(11, 12, 16, 0.64);
    --ivory-40: rgba(11, 12, 16, 0.44);
    --ivory-20: rgba(11, 12, 16, 0.2);

    /* ─── Silver leads · tailored blue for contrast ─── */
    --signal-a: #878E98;                          /* silver — labels, accents */
    --signal-b: #AC945F;                          /* champagne — contrast */
    --signal-grad: linear-gradient(115deg, #9AA1AB, #AC945F);
    --signal-soft-a: rgba(154, 161, 171, 0.12);
    --signal-soft-b: rgba(172, 148, 95, 0.09);
    --blue: #AC945F;                              /* champagne strong */
    --blue-soft: #D9C7A0;                         /* champagne light */
    --blue-grad: linear-gradient(115deg, #C9B384, #AC945F);
    --shine-panel:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -8px 20px rgba(11, 12, 16, 0.07),
        inset 0 8px 20px rgba(255, 255, 255, 0.5),
        0 8px 24px rgba(11, 12, 16, 0.12);

    /* ─── Glass & lines (light) ─── */
    --hairline: rgba(11, 12, 16, 0.08);
    --hairline-strong: rgba(11, 12, 16, 0.16);
    --glass: rgba(255, 255, 255, 0.55);
    --glass-strong: rgba(255, 255, 255, 0.75);

    /* ─── Hero waves — precision blue ─── */
    --wave-1a: rgba(172, 148, 95, 0.4);
    --wave-1b: rgba(217, 199, 160, 0.4);
    --wave-2a: rgba(135, 142, 152, 0.35);
    --wave-2b: rgba(154, 161, 171, 0.35);
    --wave-3a: rgba(11, 12, 16, 0.10);
    --wave-3b: rgba(11, 12, 16, 0.04);
    --wave-4a: rgba(135, 142, 152, 0.16);
    --wave-4b: rgba(172, 148, 95, 0.13);
}

/* ═══ BASE ═══════════════════════════════════════════════ */

body { background: var(--void); color: var(--ivory); }
::selection { background: var(--blue); color: #fff; }
body::after { opacity: 0.028; }              /* grain, whisper-quiet on light */

html { scrollbar-color: #C9CCD4 transparent; }

/* soft blue atmosphere */
.glow-a { background: radial-gradient(circle, var(--signal-soft-a) 0%, transparent 62%); }
.glow-b { background: radial-gradient(circle, var(--signal-soft-b) 0%, transparent 60%); }

/* ═══ LOGO — same file, shown dark via filter ════════════ */

.header-logo img, .footer-logo { filter: invert(1); }
#preloader { background: var(--void); }
#preloader img { filter: invert(1); }

/* ═══ HEADER ═════════════════════════════════════════════ */

.header.scrolled {
    background: rgba(255, 255, 255, 0.6);
    border-bottom-color: var(--hairline);
}
.nav a:not(.btn) { color: var(--ivory-60); }
.nav a:not(.btn):hover { color: var(--ivory); }
.burger .bar { background: var(--ivory); }
#mobile-nav { background: rgba(250, 250, 252, 0.88); }
#mobile-nav a { color: var(--ivory-60); }
#mobile-nav a:hover { color: var(--ivory); }

/* ═══ BUTTONS ════════════════════════════════════════════ */

.btn-signal { background: var(--blue-grad); color: #14161B; }
.btn-signal:hover { box-shadow: 0 12px 40px rgba(172, 148, 95, 0.35); }
.btn-line { color: var(--ivory); border-color: var(--hairline-strong); }
.btn-line:hover { border-color: var(--blue); color: var(--blue); }

/* ═══ HERO ═══════════════════════════════════════════════ */

.hero-eyebrow { color: var(--ivory-40); }
.hero-eyebrow .pulse-dot { background: var(--blue); }
.hero-title .t-solid { color: var(--ivory); }
.hero-title .t-spectral {
    background: linear-gradient(100deg, #878E98 10%, #AC945F 55%, #878E98 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
}
.hero-sub { color: var(--ivory-60); }
.hero-scroll { color: var(--ivory-40); }
.hero-scroll .scroll-line { background: var(--hairline-strong); }
#cursor { background: var(--blue); }
#cursor.hovering { border-color: var(--blue); background: rgba(172, 148, 95, 0.08); }

/* ═══ PROJECTS — LIQUID GLASS SQUIRCLES ══════════════════ */

.proj-group, .proj-group:last-of-type { border-color: var(--hairline); }
.proj-group-head { color: var(--ivory); }
.proj-group-head .g-num { color: var(--signal-a); }
.proj-group-head .g-count { color: var(--ivory-40); }
.proj-group-head .g-toggle { border-color: var(--hairline-strong); }
.proj-group-head .g-toggle::before,
.proj-group-head .g-toggle::after { background: var(--ivory); }
.proj-group.open .g-toggle { border-color: var(--blue); }
.proj-group.open .g-toggle::before { background: var(--blue); }

/* squircle glass card: framed thumbnail floating inside glass shell */
.proj-card {
    border-radius: 28px;
    background: rgba(240, 242, 246, 0.42);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 30px -14px rgba(11, 12, 16, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    padding: 10px;
}
.proj-thumb {
    border-radius: 20px;
    box-shadow: 0 4px 18px -6px rgba(11, 12, 16, 0.25);
}
.proj-thumb::after { background: linear-gradient(to top, rgba(11,12,16,0.35) 0%, transparent 40%); }
.proj-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(244, 246, 250, 0.55);
    box-shadow: 0 32px 64px -20px rgba(11, 12, 16, 0.2),
                inset 0 2px 4px rgba(255, 255, 255, 0.95),
                inset 0 -3px 8px rgba(11, 12, 16, 0.06);
}
.proj-play {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.8);
    color: var(--ivory);
}
.proj-card:hover .proj-play { background: var(--blue-grad); color: #fff; }
.proj-view {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    color: var(--ivory);
}
.proj-card:hover .proj-view { background: var(--blue-grad); color: #fff; }
.proj-cat { color: var(--signal-a); }
.proj-info h4 { color: var(--ivory); }
.proj-info p { color: var(--ivory-40); }

.inprod-chip {
    background: var(--glass);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 16px -8px rgba(11, 12, 16, 0.12);
    color: var(--ivory);
}
.inprod-chip .dot { background: var(--blue-grad); }
.inprod-chip em { color: var(--ivory-40); }

/* ═══ TRUSTED-BY — WHITE BAND WITH BORDER ════════════════ */

.marquee {
    background: #FFFFFF;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.marquee::before { background: linear-gradient(to right, #FFFFFF, transparent); }
.marquee::after { background: linear-gradient(to left, #FFFFFF, transparent); }
/* colored logos, soft grayscale at rest → full color on hover */
.logo-chip { filter: grayscale(1); opacity: 0.6; }
.logo-chip:hover { filter: grayscale(0); opacity: 1; transform: scale(1.06); }
.logo-chip.text-chip { color: #23252A; }

.stat-num { background: var(--blue-grad); -webkit-background-clip: text; background-clip: text; }
.stat-label { color: var(--ivory-40); }
.stats-bar, .stat + .stat::before { border-color: var(--hairline); }
.pillar h3 { color: var(--ivory); }
.pillar h3 span { color: var(--signal-a); }
.pillar p { color: var(--ivory-60); }

/* ═══ SERVICES — LIGHT LIQUID GLASS ══════════════════════ */

.svc-card {
    background: var(--glass);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 8px 30px -14px rgba(11, 12, 16, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    border-radius: 24px;
}
.svc-card::before {
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
                rgba(172, 148, 95, 0.08), transparent 42%);
}
.svc-card:hover { border-color: rgba(172, 148, 95, 0.35); background: var(--glass-strong); }
.svc-icon {
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(240,244,252,0.7));
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 #fff, 0 10px 24px -10px rgba(172, 148, 95, 0.25);
    border-radius: 18px;
}
/* vibrant blue silhouettes (black sprite → precision blue) */
.svc-icon .sprite {
    filter: invert(38%) sepia(93%) saturate(3500%) hue-rotate(198deg) brightness(1.02);
}
.svc-card h4 { color: var(--ivory); }
.svc-card p { color: var(--ivory-60); }

/* ═══ CAPABILITIES ═══════════════════════════════════════ */

.cap-col {
    background: rgba(240, 242, 246, 0.42);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 28px -14px rgba(11, 12, 16, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border-radius: 24px;
}
.cap-col:hover {
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(244, 246, 250, 0.55);
    box-shadow: 0 24px 50px -20px rgba(11, 12, 16, 0.18),
                inset 0 2px 4px rgba(255, 255, 255, 0.95),
                inset 0 -3px 8px rgba(11, 12, 16, 0.06);
}
.cap-col h4 { color: var(--ivory); border-color: var(--hairline); }
.cap-col li { color: var(--ivory-60); }
.cap-col li::before { background: var(--signal-grad); }

/* ═══ SOLUTIONS ══════════════════════════════════════════ */

.tab-btn { color: var(--ivory-60); border-color: var(--hairline-strong); }
.tab-btn:hover { color: var(--ivory); border-color: var(--ivory-40); }
.tab-btn.active { background: var(--blue-grad); color: #fff; }
.tab-text h3 { color: var(--ivory); }
.tab-text > p { color: var(--ivory-60); }
.tab-features li { color: var(--ivory); border-color: var(--hairline); }

.stack-tile {
    background: var(--glass);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 30px -16px rgba(11, 12, 16, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.stack-tile:hover { background: var(--glass-strong); border-color: rgba(172, 148, 95, 0.35); box-shadow: 0 24px 50px -22px rgba(172, 148, 95, 0.3); }
.stack-tile.inv img { filter: none; }        /* dark logos read fine on light glass */
.stack-tile span { color: var(--ivory-40); }

/* ═══ ABOUT ══════════════════════════════════════════════ */

.about-intro { color: var(--ivory); }
.mv-card {
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 34px -18px rgba(11, 12, 16, 0.14);
}
.mv-card h3 { color: var(--signal-a); }
.mv-card p { color: var(--ivory); }
.values-row { border-color: var(--hairline); }
.value { color: var(--ivory); }
.value span:first-child { color: var(--signal-a); }
.team-card {
    background: var(--glass);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 28px -16px rgba(11, 12, 16, 0.12);
}
.team-card:hover { border-color: rgba(172, 148, 95, 0.4); }
.team-avatar {
    background: radial-gradient(circle at 30% 30%, #EAF2FF, #D6E6FF);
    border-color: rgba(172, 148, 95, 0.35);
}
.team-card h4 { color: var(--ivory); }
.team-role { color: var(--signal-a); }
.team-card p { color: var(--ivory-60); }
.team-links a { color: var(--ivory-40); border-color: var(--hairline-strong); }
.team-links a:hover { color: var(--blue); border-color: var(--blue); }

/* ═══ CTA + FOOTER ═══════════════════════════════════════ */

.cta::before {
    background:
        radial-gradient(60% 80% at 50% 110%, rgba(172, 148, 95, 0.12), transparent 70%),
        radial-gradient(50% 60% at 20% -10%, rgba(90, 200, 250, 0.1), transparent 70%);
}
.cta h2 { color: var(--ivory); }
.cta p { color: var(--ivory-60); }

.footer { background: var(--void); border-color: var(--hairline); }
.footer-tag, .footer-contact p { color: var(--ivory-60); }
.footer h4 { color: var(--ivory-40); }
.footer-links a { color: var(--ivory-60); }
.footer-links a:hover { color: var(--blue); }
.footer-bottom { color: var(--ivory-40); border-color: var(--hairline); }
.footer-legal a { color: var(--ivory-40); }
.footer-legal a:hover { color: var(--ivory); }

/* ═══ LABELS ═════════════════════════════════════════════ */

.label { color: var(--signal-a); }
.title { color: var(--ivory); }


/* ─── team teaser (light glass) ─── */
.team-teaser {
    background: rgba(240, 242, 246, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 28px -16px rgba(11, 12, 16, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.team-teaser h3 { color: var(--ivory); }
.team-teaser p { color: var(--ivory-60); }
.teaser-badge { color: var(--blue); border-color: rgba(172, 148, 95, 0.4); }


/* ═══ SILVER SHINY GLASS (theme md §5b, light-adapted) ═══ */

.stats-bar {
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    background: linear-gradient(180deg, #FDFDFE, #EEF0F4);
    box-shadow: var(--shine-panel);
    overflow: hidden;
}

.svc-icon {
    background: none; border: none; box-shadow: none;
    width: 76px; height: 76px; border-radius: 0;
}
.svc-icon::after { display: none; }
.svc-icon img { width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(11, 12, 16, 0.18));
    transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1); }
.svc-card:hover .svc-icon img { transform: translateY(-3px) scale(1.05); }

.proj-group-head .g-toggle,
.tab-btn {
    background: linear-gradient(180deg, #FDFDFE, #ECEEF2);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -2px 4px rgba(11, 12, 16, 0.08);
}
.tab-btn.active {
    background: var(--blue-grad); color: #14161B;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(11, 12, 16, 0.15);
}

.team-avatar {
    background: linear-gradient(160deg, #F2F3F6, #D8DBE1);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(11, 12, 16, 0.15);
}
.teaser-badge {
    color: #8A7443; border-color: rgba(172, 148, 95, 0.45);
    background: linear-gradient(180deg, #FDFCF9, #F3EDDF);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(172, 148, 95, 0.12);
}

/* ─── icon gold tint on hover ─── */
.svc-card:hover .svc-icon img {
    transform: translateY(-3px) scale(1.05);
    filter: sepia(1) saturate(1.7) hue-rotate(-12deg) brightness(1.04)
            drop-shadow(0 6px 14px rgba(172, 148, 95, 0.35));
}

/* ─── dark micro-chip for light logos on the white band ─── */
.logo-chip.lc-dark {
    background: #14161B; border-radius: 14px;
    padding: 12px 26px; margin: 0 14px; height: 60px;
}
.logo-chip.lc-dark img { max-height: 36px; }