:root {
    /* Cardbriks Brand Colors */
    --background: 45 30% 98%;
    --foreground: 25 30% 15%;
    --card: 45 25% 96%;
    --card-foreground: 25 30% 15%;
    --popover: 45 25% 96%;
    --popover-foreground: 25 30% 15%;
    --primary: 25 65% 50%;
    --primary-foreground: 45 30% 98%;
    --secondary: 175 55% 42%;
    --secondary-foreground: 45 30% 98%;
    --accent: 15 85% 60%;
    --accent-foreground: 45 30% 98%;
    --muted: 40 20% 92%;
    --muted-foreground: 25 15% 45%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 35 25% 88%;
    --input: 35 25% 88%;
    --ring: 25 65% 50%;
    --radius: 0.75rem;
    --kraft: 35 45% 75%;
    --kraft-dark: 30 40% 55%;
    --teal: 175 55% 42%;
    --coral: 15 85% 60%;
    --cream: 45 30% 95%;
    --charcoal: 25 30% 15%;
    --shadow-soft: 0 4px 20px -4px hsl(25 30% 15% / 0.08);
    --shadow-card: 0 8px 30px -8px hsl(25 30% 15% / 0.12);
    --shadow-elevated: 0 20px 50px -15px hsl(25 30% 15% / 0.15);
}

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap");

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Space Grotesk", system-ui, sans-serif;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(100%, 1400px);
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.text-gradient-brand {
    background-image: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bg-pattern-grid {
    background-image:
        linear-gradient(hsl(var(--border)) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--border)) 1px, transparent 1px);
    background-size: 40px 40px;
}

.bg-pattern-dots {
    background-image: radial-gradient(hsl(var(--kraft-dark)) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 6s ease-in-out infinite;
    animation-delay: 2s;
}

.animate-float-slow {
    animation: float 8s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.animate-pulse-soft {
    animation: pulse-soft 3s ease-in-out infinite;
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: "Space Grotesk", system-ui, sans-serif;
    padding: 0.75rem 1.25rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.btn-hero {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: var(--shadow-card);
}

.btn-hero:hover {
    background: hsl(var(--primary));
    filter: brightness(0.96);
    box-shadow: var(--shadow-elevated);
    transform: translateY(-2px);
}

.btn-hero-outline {
    border: 2px solid hsl(var(--primary));
    color: hsl(var(--primary));
    background: transparent;
}

.btn-hero-outline:hover {
    background: hsl(var(--primary) / 0.1);
}

.btn-outline {
    border: 2px solid hsl(var(--primary));
    color: hsl(var(--primary));
    background: transparent;
}

.btn-outline:hover {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn-secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    box-shadow: var(--shadow-soft);
}

.btn-secondary:hover {
    filter: brightness(0.95);
}

.btn-teal {
    background: hsl(var(--teal));
    color: hsl(var(--secondary-foreground));
    box-shadow: var(--shadow-soft);
}

.btn-teal:hover {
    filter: brightness(0.95);
}

.btn-ghost {
    background: transparent;
    color: hsl(var(--foreground));
}

.btn-ghost:hover {
    background: hsl(var(--accent) / 0.1);
}

.btn-sm {
    padding: 0.5rem 0.9rem;
    border-radius: 0.65rem;
    font-size: 0.9rem;
}

.btn-lg {
    padding: 0.85rem 1.5rem;
    border-radius: 0.9rem;
    font-size: 1rem;
}

.btn-xl {
    padding: 1rem 1.9rem;
    border-radius: 1rem;
    font-size: 1.05rem;
}

.pill {
    border-radius: 9999px;
}

.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-elevated { box-shadow: var(--shadow-elevated); }

.border {
    border: 1px solid hsl(var(--border));
}

.bg-card {
    background-color: hsl(var(--card));
}

.bg-background {
    background-color: hsl(var(--background));
}

.text-muted {
    color: hsl(var(--muted-foreground));
}

.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    background: hsl(var(--background) / 0.9);
    border-bottom: 1px solid hsl(var(--border));
}