/**
 * Adacity Media — brand palette (dark glassmorphism theme)
 * Primary: #667eea | Secondary: #764ba2 | Accent: #00ffcc
 */
:root {
    --bg-dark: #0f0f23;
    --bg-mid: #1a1a2e;
    --bg-deep: #16213e;
    --bg-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);

    --text-primary: #ffffff;
    --text-muted: #aaa;
    --text-subtle: #888;
    --text-soft: #bbb;
    --text-highlight: #ccc;

    --brand-primary: #667eea;
    --brand-secondary: #764ba2;
    --brand-accent: #00ffcc;
    --brand-accent-soft: #a8a8ff;

    --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --brand-gradient-wide: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
    --title-gradient: linear-gradient(135deg, #ffffff 0%, #a8a8ff 100%);

    --glass-surface: rgba(255, 255, 255, 0.05);
    --glass-surface-hover: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-hover: rgba(102, 126, 234, 0.4);

    --glow-purple: rgba(120, 119, 198, 0.3);
    --glow-pink: rgba(255, 119, 198, 0.15);
    --shadow-brand: rgba(102, 126, 234, 0.4);
    --shadow-brand-strong: rgba(102, 126, 234, 0.6);

    --star-gold: #ffd700;
    --success: #28a745;
    --error: #dc3545;

    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 25px;
    --radius-pill: 50px;

    /* Icon backgrounds */
    --icon-bg-purple: linear-gradient(135deg, rgba(102, 126, 234, 0.32) 0%, rgba(118, 75, 162, 0.22) 100%);
    --icon-bg-cyan: linear-gradient(135deg, rgba(0, 255, 204, 0.22) 0%, rgba(102, 126, 234, 0.14) 100%);
    --icon-bg-violet: linear-gradient(135deg, rgba(168, 168, 255, 0.28) 0%, rgba(118, 75, 162, 0.2) 100%);
    --icon-bg-magenta: linear-gradient(135deg, rgba(255, 119, 198, 0.22) 0%, rgba(118, 75, 162, 0.18) 100%);
    --icon-border-purple: rgba(102, 126, 234, 0.38);
    --icon-border-cyan: rgba(0, 255, 204, 0.35);
    --icon-border-violet: rgba(168, 168, 255, 0.35);
    --icon-border-magenta: rgba(255, 119, 198, 0.32);
    --icon-glow-purple: 0 6px 20px rgba(102, 126, 234, 0.22);
    --icon-glow-cyan: 0 6px 20px rgba(0, 255, 204, 0.18);
    --icon-color-purple: #b8c4ff;
    --icon-color-cyan: #00ffcc;
    --icon-color-violet: #c4b8ff;
    --icon-color-magenta: #ffb8e0;
}

/* Reusable icon box */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.icon-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, transparent 55%);
    pointer-events: none;
}
.icon-box svg {
    position: relative;
    z-index: 1;
    display: block;
}
.icon-box--purple {
    background: var(--icon-bg-purple);
    border: 1px solid var(--icon-border-purple);
    color: var(--icon-color-purple);
    box-shadow: var(--icon-glow-purple);
}
.icon-box--cyan {
    background: var(--icon-bg-cyan);
    border: 1px solid var(--icon-border-cyan);
    color: var(--icon-color-cyan);
    box-shadow: var(--icon-glow-cyan);
}
.icon-box--violet {
    background: var(--icon-bg-violet);
    border: 1px solid var(--icon-border-violet);
    color: var(--icon-color-violet);
    box-shadow: 0 6px 20px rgba(168, 168, 255, 0.18);
}
.icon-box--magenta {
    background: var(--icon-bg-magenta);
    border: 1px solid var(--icon-border-magenta);
    color: var(--icon-color-magenta);
    box-shadow: 0 6px 20px rgba(255, 119, 198, 0.16);
}
.icon-box--gradient {
    background: var(--brand-gradient);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    box-shadow: 0 8px 24px var(--shadow-brand);
}
.icon-box--gradient svg { stroke: #fff; }

/* Width safety */
img, video { max-width: 100%; height: auto; }
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }
}