@charset 'UTF-8';

:root {
    --bg: #f7f8fa;
    --text: #1a1a1a;
    --subtext: #555;
    --border: rgba(0, 0, 0, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --shadow: rgba(0, 0, 0, 0.08);
}

html,
body {
    background: var(--bg);
}

.logo,
.info-card,
.webwork-card {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px var(--shadow);
    backdrop-filter: blur(12px);
}

.hero-visual {
    border: none;
    box-shadow: 0 4px 20px var(--shadow);
    background: radial-gradient(circle at top left, #ff6bcb 0, var(--bg) 60%);
}

.wt1 {
    background: radial-gradient(circle at top left, #ff6bcb 0, var(--bg) 60%);
}

.wt2 {
    background: radial-gradient(circle at top left, #6b9bff 0, var(--bg) 60%);
}

.wt3 {
    background: radial-gradient(circle at top left, #ffd66b 0, var(--bg) 60%);
}

.wt4 {
    background: radial-gradient(circle at top left, #ff6bcb 0, var(--bg) 60%);
}

.webwork-card:hover {
    box-shadow: 0 4px 20px var(--shadow);
}