@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap');

:root {
    --deep-water: #00639e;
    --capri-blue: #0099d6;
    --turquoise: #00b8d9;
    --soft-turquoise: #48d0e8;
    --light-cyan: #b0f0ff;
    --white-wash: #fffcf4;
    --cream-building: #fff2d8;
    --warm-sand: #f9e9d0;
    --soft-pink: #ff9ab8;
    --soft-orange: #ffb38a;
    --soft-gold: #ffcb8f;
    --terracotta: #e07a5f;
    --pine-green: #2aa38f;
    --pine-deep: #1f7a6e;
    --navy-text: #013a6b;
    --text-strong: #0f3154;
    --muted: #355f84;
    --soft-border: rgba(1, 58, 107, 0.18);
    --card-surface: rgba(255, 252, 240, 0.93);
    --card-border: rgba(255, 255, 255, 0.78);
    --surface-glass: rgba(255, 252, 240, 0.94);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--navy-text);
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background:
        radial-gradient(ellipse 82% 72% at 42% 82%, var(--soft-turquoise) 0%, var(--light-cyan) 40%, transparent 78%),
        radial-gradient(ellipse 68% 62% at 18% 88%, var(--deep-water) 0%, var(--capri-blue) 48%, transparent 78%),
        radial-gradient(ellipse 68% 52% at 80% 18%, var(--soft-pink) 0%, var(--soft-orange) 32%, var(--soft-gold) 58%, transparent 88%),
        radial-gradient(ellipse 92% 58% at 50% 15%, var(--white-wash) 0%, var(--cream-building) 38%, var(--warm-sand) 72%, transparent 95%),
        radial-gradient(ellipse 38% 32% at 15% 35%, var(--pine-green) 0%, transparent 72%),
        radial-gradient(ellipse 28% 22% at 65% 40%, var(--terracotta) 0%, transparent 68%),
        linear-gradient(140deg, var(--deep-water) 0%, var(--capri-blue) 25%, var(--soft-turquoise) 48%, var(--soft-gold) 72%, var(--cream-building) 100%);
    filter: brightness(1.12) saturate(0.92);
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.45;
    background:
        radial-gradient(ellipse 65% 55% at 38% 48%, rgba(255, 255, 255, 0.55) 0%, transparent 60%),
        radial-gradient(ellipse 60% 70% at 68% 58%, rgba(72, 208, 232, 0.35) 0%, transparent 65%),
        radial-gradient(ellipse 52% 45% at 78% 22%, rgba(255, 154, 184, 0.3) 0%, transparent 75%);
    filter: blur(75px);
    pointer-events: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header {
    background: var(--surface-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 20px 0;
    box-shadow: 0 6px 35px rgba(0, 0, 0, 0.12);
}

header h1,
header h1 a {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 2.75rem);
    background: linear-gradient(135deg, var(--capri-blue), var(--soft-turquoise), var(--soft-orange), var(--soft-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
}

header p {
    margin: 8px 0 0;
    color: var(--muted);
    font-weight: 600;
}

main.container,
.main,
section,
.card,
.property-card,
.county-card,
.locality-card,
.step,
.search-box,
.search-section,
.featured-section,
.counties-section,
.sidebar-card {
    border-radius: 14px;
}

a {
    color: var(--capri-blue);
}

a:hover {
    color: var(--deep-water);
}

footer {
    margin-top: 40px;
    background: rgba(1, 58, 107, 0.88);
    color: #f8fbff;
    padding: 28px 0;
}

footer a {
    color: var(--light-cyan);
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
}