:root {
    --glass-fill: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 58%, rgba(255,255,255,.065));
    --glass-edge: linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.06) 35%, rgba(255,255,255,.025) 62%, rgba(255,255,255,.3));
    --glass-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04), inset 1px 0 0 rgba(255,255,255,.06), 0 20px 48px -28px rgba(0,0,0,.8);
}

/* Broad light fields give transparent surfaces something to refract. */
body {
    background-color: #060607;
    background-image: linear-gradient(118deg, rgba(160,180,187,.09), transparent 42%), linear-gradient(238deg, rgba(191,177,155,.045), transparent 57%), linear-gradient(165deg, transparent 48%, rgba(169,179,188,.035) 73%, transparent);
    background-attachment: fixed;
}
:where(.glass, .btn-secondary, .icon-button, .media-action, .project-filter, .showcase-tab, .technology-grid > div, .stats-strip > div, .service-row, .faq-item, .review-feature, .admin-sidebar, .admin-header, .card, .stat-card, .action-card, .login-card, .crm-card, .admin-header-link) {
    position: relative;
    isolation: isolate;
}
.glass,
.btn-secondary,
.icon-button,
.media-action,
.project-filter:not([aria-pressed="true"]),
.showcase-tab[aria-selected="true"],
.technology-grid > div,
.stats-strip > div,
.service-row,
.faq-item,
.review-feature {
    background: var(--glass-fill);
    border: 1px solid rgba(255,255,255,.1);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
    box-shadow: var(--glass-shadow);
}
:is(.glass, .btn-secondary, .icon-button, .media-action, .project-filter, .showcase-tab[aria-selected="true"], .technology-grid > div, .stats-strip > div, .service-row, .faq-item, .review-feature)::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--glass-edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
:is(.glass, .btn-secondary, .icon-button, .media-action, .project-filter, .showcase-tab[aria-selected="true"], .technology-grid > div, .stats-strip > div, .service-row, .faq-item, .review-feature)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at var(--glass-x, 18%) var(--glass-y, 0%), rgba(255,255,255,.14), transparent 62%);
    opacity: .55;
    z-index: -1;
    pointer-events: none;
    transition: opacity .3s;
}
@media (hover: hover) and (pointer: fine) {
    :is(.glass, .btn-secondary, .icon-button, .project-filter, .showcase-tab[aria-selected="true"], .technology-grid > div, .stats-strip > div, .service-row, .faq-item, .review-feature):hover::after { opacity: 1; }
}
.site-header.glass { background: linear-gradient(130deg, rgba(76,79,83,.42), rgba(28,30,33,.52) 55%, rgba(57,60,63,.34)); }
.btn-primary { background: linear-gradient(155deg, #fff, #e0e4e8); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 5px rgba(0,0,0,.1), 0 8px 28px -18px rgba(255,255,255,.6); }
.btn-secondary:hover, .icon-button:hover, .project-filter:hover:not([aria-pressed="true"]), .showcase-tab[aria-selected="true"]:hover { background: var(--glass-fill); }
.demo-chat.glass, .demo-dashboard.glass { background: var(--glass-fill); }
.demo-chat.glass { border-radius: 30px; }
.demo-dashboard.glass { border-radius: 26px; }
.demo-avatar, .contact-icon { background: linear-gradient(140deg, rgba(255,255,255,.24), rgba(255,255,255,.055)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.demo-message.bot { background: rgba(255,255,255,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.065); }
.demo-message.user { background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.demo-spark i { background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08)); }
.demo-spark .last { background: linear-gradient(180deg, #d5e3df, #7c9993); }
.demo-chips span { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.showcase-tab { border-radius: 14px; }
.showcase-tab[aria-selected="true"] { border-radius: 14px; }
.showcase-image, .case-shot { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 18px 44px -28px #000; border-color: rgba(255,255,255,.2); }
.project-card.glass { border-radius: 16px; }
.project-card .project-cover { border: 0; border-bottom: 1px solid rgba(255,255,255,.12); border-radius: 16px 16px 0 0; }
.project-card .project-copy { padding: 22px; }
.review-card.glass, .contact-form.glass { border-radius: 20px; }
.technology-grid > div { border-radius: 8px; padding: 20px; }
.stats-strip { gap: 12px; border: 0; }
.stats-strip > div, .stats-strip > div:first-child { padding: 28px 24px; border-radius: 16px; }
.stats-strip > div + div { border: 1px solid rgba(255,255,255,.1); }
.service-list { display: grid; gap: 10px; }
.service-row, .service-row:last-child { border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 24px; }
.review-feature { padding: 36px; border-radius: 20px; }
.faq-list { border: 0; display: grid; gap: 10px; }
.faq-item { border-radius: 8px; padding-inline: 22px; }
.faq-item summary { padding-block: 20px; }
.faq-item p { margin-bottom: 20px; }
.tech-tags span { background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.contact-form input, .contact-form textarea, .contact-form select { background-color: rgba(0,0,0,.22); }
.lightbox { background: linear-gradient(145deg, rgba(47,49,53,.7), rgba(16,17,19,.88)); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); box-shadow: var(--glass-shadow); }
.lightbox-toolbar .icon-button { background: #eee; box-shadow: inset 0 1px 0 #fff; }
.lightbox-toolbar .icon-button::after { display: none; }

/* The management interface uses the same material with quieter highlights. */
.admin-sidebar, .admin-header, .card, .stat-card, .action-card, .login-card, .crm-card {
    background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    border-color: rgba(255,255,255,.13);
    box-shadow: var(--glass-shadow);
}
:is(.admin-sidebar, .admin-header, .card, .stat-card, .action-card, .login-card, .crm-card)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse at var(--glass-x, 0%) var(--glass-y, 0%), rgba(255,255,255,.09), transparent 60%);
    z-index: -1;
}
.admin-sidebar { background: linear-gradient(150deg, rgba(47,50,54,.7), rgba(14,16,18,.6)); }
.admin-header { background: linear-gradient(115deg, rgba(40,42,45,.68), rgba(16,17,19,.78)); }
.login-wrapper { background: transparent; }
.stat-card:hover, .action-card:hover { box-shadow: var(--glass-shadow); }
.form-input, .form-textarea, .form-select { background: rgba(0,0,0,.24); }
@media (max-width: 720px) {
    .site-header .site-nav { background: linear-gradient(145deg, rgba(40,43,46,.97), rgba(19,21,23,.96)); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); border-color: rgba(255,255,255,.22); }
    .stats-strip > div, .stats-strip > div:nth-child(odd) { padding: 22px 18px; border: 1px solid rgba(255,255,255,.1); }
    .stats-strip strong { font-size: 30px; }
    .service-row, .service-row:last-child { padding: 20px 16px; }
    .review-feature { padding: 24px 20px; }
    .faq-item { padding-inline: 18px; }
    .faq-item summary { font-size: 16px; }
}
@media (max-width: 500px) {
    .demo-chat.glass { border-radius: 22px; }
    .demo-dashboard.glass { border-radius: 20px; }
    .project-card .project-copy { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .glass::after { transition: none; }
}