/* HouseWinner — base / reset / layout primitives */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: var(--fs-300);
    line-height: 1.6;
    color: var(--c-ink);
    background:
        radial-gradient(1200px 600px at 85% -10%, var(--c-bg-2) 0%, transparent 55%),
        var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    overflow-x: clip; /* safety net against accidental horizontal scroll on mobile */
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--c-primary); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--c-primary-2); }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; color: var(--c-ink-2); font-weight: 600; letter-spacing: -0.01em; }

button { font: inherit; cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--c-cta);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Layout helpers */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.section { padding-block: var(--sp-9); }
.section.narrow { padding-block: var(--sp-10); }
.center { text-align: center; }

.eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: var(--fs-100);
    font-weight: 600;
    color: var(--c-primary);
    background: var(--grad-fusion-line);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--sp-4);
}
.eyebrow.on-dark { -webkit-text-fill-color: currentColor; color: var(--c-primary-2); background: none; }

.section-head { margin-bottom: var(--sp-7); max-width: 720px; }
.section-head.center { margin-inline: auto; }
.section-title { font-size: var(--fs-700); }
.section-sub { color: var(--c-muted); margin-top: var(--sp-3); font-size: var(--fs-400); }

.lead { font-size: var(--fs-400); color: var(--c-muted); }
.prose { max-width: 680px; margin-inline: auto; }
.page-title { font-size: var(--fs-800); margin-block: var(--sp-4); }

/* Skip link */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
    background: var(--c-ink-2); color: #fff; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 0.85rem 1.5rem;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: var(--fs-300);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-sm { padding: 0.55rem 1rem; font-size: var(--fs-200); }
.btn-block { display: flex; width: 100%; }
.btn-cta { background: linear-gradient(100deg, var(--c-cta) 0%, var(--c-cta) 52%, var(--orange) 126%); color: var(--c-cta-ink); background-size: 160% 100%; background-position: 0% 50%; transition: background-position var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn-cta:hover { background: linear-gradient(100deg, var(--c-cta-hover) 0%, var(--c-cta-hover) 44%, var(--orange-deep) 122%); background-size: 160% 100%; background-position: 100% 50%; color: #fff; }
.btn-ghost { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn-ghost:hover { background: var(--c-primary); color: #fff; }
.btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn-primary:hover { background: var(--c-ink-2); border-color: var(--c-ink-2); color: #fff; }
.btn-outline { background: transparent; color: var(--c-ink-2); border-color: var(--c-line); }
.btn-outline:hover { background: var(--c-bg-2); border-color: var(--c-primary); color: var(--c-primary); }

/* 3D relief on important (primary) buttons — a solid bottom "ledge" + soft drop. */
.btn-cta { box-shadow: 0 5px 0 var(--c-cta-2), 0 16px 26px -12px rgba(76, 46, 196, .5); }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--c-cta-2), 0 22px 34px -12px rgba(76, 46, 196, .55); }
.btn-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-cta-2), 0 8px 16px -12px rgba(76, 46, 196, .5); }
.btn-primary { box-shadow: 0 5px 0 var(--c-ink-2), 0 16px 26px -12px rgba(46, 26, 122, .45); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(3px); }

@media (prefers-reduced-motion: no-preference) {
    .btn:active { transform: translateY(1px); }
    .btn-cta:active, .btn-primary:active { transform: translateY(3px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

@media (max-width: 720px) {
    .page-title { font-size: var(--fs-700); }
    .section { padding-block: var(--sp-7); }
}