/* SkillSwap visual system — calm editorial marketplace, dependency-free. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --ink: #191919; --ink-soft: #5f5f5c; --paper: #fff; --paper-warm: #f7f7f4;
    --paper-muted: #efefeb; --line: #dfdfda; --accent: #315e4c; --accent-soft: #e4eee7;
    --success: #176b45; --danger: #a73737; --warning: #9a5b15;
    --bg-base: var(--paper); --bg-surface: var(--paper-warm); --bg-surface-elevated: var(--paper);
    --bg-card: var(--paper); --bg-card-hover: #fafaf8; --bg-glass: rgba(255,255,255,.92); --bg-input: #fff;
    --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: #777772; --text-ice: var(--accent);
    --ice-50: #f2f7f3; --ice-100: #e4eee7; --ice-200: #bed1c3; --ice-300: #779b82;
    --ice-400: #4d7a5c; --ice-500: #315e4c; --ice-cyan: #315e4c; --neon-blue: #315e4c;
    --electric-violet: #315e4c; --aurora-green: #176b45; --glacial-rose: #a73737; --amber-pulse: #9a5b15;
    --border-subtle: var(--line); --border-ice: #b7cbbd; --border-glow: #779b82; --glow-cyan: none; --glow-card: none;
    --font-heading: 'DM Serif Display', Georgia, serif; --font-body: Inter, Arial, sans-serif;
    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; --transition-smooth: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light; font-size: 16px; scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.6; min-height: 100vh; overflow-x: hidden; }
a { color: inherit; }
h1,h2,h3,h4,h5,h6 { color: var(--ink); font-family: var(--font-heading); font-weight: 400; letter-spacing: -.035em; line-height: 1.05; }
button,input,select,textarea { font: inherit; }
.container { margin: 0 auto; max-width: 1240px; padding: 0 28px; position: relative; width: 100%; }
.bg-ambient-orb { display: none; }
.text-muted { color: var(--text-muted); }
.text-ice,.text-gradient-cyan { -webkit-text-fill-color: currentColor; background: none; color: var(--accent); }
.display-title { color: var(--ink); font-size: clamp(3.2rem, 7.2vw, 6.9rem); font-weight: 400; letter-spacing: -.065em; line-height: .94; }
.section-title { font-size: clamp(2rem, 4vw, 3.45rem); margin-bottom: .75rem; }
.reveal { opacity: 1; transform: none; }
.stagger-1,.stagger-2,.stagger-3,.stagger-4 { transition-delay: 0ms; }

.btn { align-items: center; background: transparent; border: 1px solid var(--ink); border-radius: 7px; color: var(--ink); cursor: pointer; display: inline-flex; font-size: .9rem; font-weight: 600; gap: .5rem; justify-content: center; padding: .72rem 1.08rem; text-decoration: none; transition: background var(--transition-smooth), color var(--transition-smooth), transform var(--transition-smooth); white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #3a3a38; color: #fff; }
.btn-secondary { background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { background: var(--paper-muted); color: var(--ink); }
.btn-success { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-danger { background: #fff; border-color: #e4c6c6; color: var(--danger); }
.btn-danger:hover { background: #fff5f4; color: var(--danger); }
.btn-sm { border-radius: 6px; font-size: .8rem; padding: .48rem .72rem; }
.btn-lg { border-radius: 8px; font-size: .98rem; padding: .95rem 1.35rem; }
.glass-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.hero-pill { background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--accent); display: inline-flex; font-size: .72rem; font-weight: 700; letter-spacing: .12em; margin-bottom: 1rem; padding: 0; text-transform: uppercase; }
.form-group { margin-bottom: 1.1rem; }
.form-label { color: var(--ink); display: block; font-size: .82rem; font-weight: 600; margin-bottom: .42rem; }
.form-control { background: var(--paper); border: 1px solid #cfcfca; border-radius: 7px; color: var(--ink); outline: none; padding: .76rem .85rem; transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth); width: 100%; }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.form-control { min-height: 120px; resize: vertical; }
@media (max-width: 720px) { .container { padding: 0 18px; } .display-title { font-size: clamp(2.8rem, 15vw, 4.5rem); } .btn { white-space: normal; } }