:root {
    --grad-start: #0C1937;
    --grad-mid: #4B1B38;
    --grad-end: #9d1237;
    --text: #f8fafc;
    --muted: #b7c2d1;
    --brand: #ff4d5a;
    --maxw: 1180px;
    --body-text: #0f172a;
    --body-muted: #475569;
    --border: rgba(15, 23, 42, .12);
    --card-border: rgba(2, 6, 23, .12);
    --card-bg: #fff;
    --shadow: 0 10px 24px rgba(2, 6, 23, .06);
    --header-border: rgba(255, 255, 255, .22);
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", "Arial", "Noto Sans";
    color: var(--body-text);
    background: #fff;
    overflow-x: hidden
}

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-block: 6px;
    padding-inline: clamp(12px, 4vw, 50px)
}

/* ===== Page hero ===== */
.cmp-hero {
    padding: clamp(48px, 8vw, 92px) 0 14px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    position: relative;
    background: #fff;
    overflow: hidden;
    overflow: clip;
}

.cmp-hero::before {
    content: "";
    position: absolute;
    inset: -12% -8%;
    background:
        radial-gradient(600px 360px at 14% 12%, rgba(255, 77, 90, .10), transparent 60%),
        radial-gradient(520px 320px at 86% 85%, rgba(72, 133, 237, .10), transparent 62%);
    pointer-events: none;
    z-index: 0
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-weight: 700
}

.cmp-title {
    margin: 14px 0 10px;
    font-weight: 800;
    letter-spacing: -.5px;
    font-size: clamp(36px, 3vw, 72px);
    line-height: 1.06;
    background: linear-gradient(120deg, var(--grad-start) 8%, var(--grad-mid) 50%, var(--grad-end) 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent
}

.cmp-sub {
    color: var(--body-muted);
    font-size: clamp(16px, 1.8vw, 20px);
    max-width: 900px;
    margin: 0 auto
}

/* ===== Body section ===== */
.contact {
    padding: clamp(26px, 7vw, 60px) 0
}

.card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: clamp(14px, 2vw, 18px);
    box-shadow: var(--shadow)
}

.card h2,
.card h3 {
    margin: 0 0 10px;
    font-weight: 800
}

.card p {
    line-height: 1.75;
    margin: 10px 0
}

.card ul {
    margin: 8px 0 16px;
    padding-left: 18px;
}

.card li {
    margin: 8px 0;
}