:root {
    color-scheme: light;
    --bg: #f7f5f1;
    --surface: #ffffff;
    --surface-muted: #f3f4ef;
    --ink: #0f172a;
    --ink-soft: #334155;
    --muted: #475569;
    --accent: #136b39;
    --accent-strong: #0e8f4a;
    --accent-soft: #dcf7e6;
    --accent-deep: #0b3b24;
    --border: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.16);
    --shadow-soft: 0 12px 30px -20px rgba(15, 23, 42, 0.35);
    --shadow: 0 24px 60px -32px rgba(15, 23, 42, 0.45);
}

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(1200px 600px at 5% -10%, rgba(31, 191, 99, 0.18), transparent 60%),
        radial-gradient(900px 500px at 95% 10%, rgba(224, 194, 122, 0.16), transparent 55%),
        linear-gradient(180deg, #f7f5f1 0%, #ffffff 55%, #f3f4ef 100%);
    background-attachment: fixed;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body > * {
    position: relative;
    z-index: 1;
}

::selection {
    background: rgba(31, 191, 99, 0.25);
    color: #0b3b24;
}

section {
    scroll-margin-top: 96px;
}

.font-display {
    font-family: 'Golos Display', 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    letter-spacing: -0.02em;
}

.bg-white { background-color: var(--surface); }
.bg-gray-50 { background-color: #f4f5f0; }
.bg-gray-100 { background-color: #eef0ea; }
.bg-gray-900 { background-color: #0b1f14; }
.text-gray-900 { color: var(--ink); }
.text-gray-700 { color: var(--ink-soft); }
.text-gray-600 { color: var(--muted); }
.border-gray-100 { border-color: var(--border); }
.border-gray-200 { border-color: var(--border-strong); }

.bg-green-500 { background-color: var(--accent); }
.bg-green-600 { background-color: var(--accent-strong); }
.text-green-500 { color: var(--accent); }
.text-green-600 { color: var(--accent-strong); }
.text-green-700 { color: var(--accent-strong); }
.bg-green-50 { background-color: var(--accent-soft); }
.border-green-100 { border-color: rgba(31, 191, 99, 0.2); }
.border-green-200 { border-color: rgba(31, 191, 99, 0.35); }

.glass {
    backdrop-filter: blur(18px);
    background: rgba(248, 247, 244, 0.78);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 30px -24px rgba(15, 23, 42, 0.5);
}

.gradient-text {
    background: linear-gradient(135deg, var(--accent) 0%, #14b86a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#home h1 {
    letter-spacing: -0.04em;
    text-shadow: 0 25px 45px rgba(11, 59, 36, 0.18);
    text-wrap: balance;
}

#home h1 span {
    display: inline-block;
    animation: dotPulse 3.2s ease-in-out infinite;
}

#home p {
    text-wrap: balance;
}

@supports (-webkit-background-clip: text) {
    #home h1 {
        background: linear-gradient(120deg, #5ec14c 0%, #f6f9ff 40%, #33ad68 60%, #56f969 85%);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: text-flow 14s ease infinite;
    }
    #home h1 span {
        -webkit-text-fill-color: var(--accent);
        color: var(--accent);
    }
}

input,
textarea {
    border-color: var(--border-strong);
    background-color: #f7f7f2;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(31, 191, 99, 0.18);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(31, 191, 99, 0.35);
    outline-offset: 3px;
}

#services {
    background: linear-gradient(180deg, #ffffff 0%, #f6f6f0 100%);
}

#about,
#contact {
    background: linear-gradient(180deg, #f8f7f3 0%, #ffffff 55%, #f1f4ef 100%);
}

#portfolio {
    background: #fdfdfb;
}

#mobileMenuContent {
    background: linear-gradient(180deg, #ffffff 0%, #f7f6f2 100%);
}

@keyframes text-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes dotPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.08); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(3deg); }
}

@keyframes floatReverse {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(18px) rotate(-3deg); }
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 16px rgba(31, 191, 99, 0.35), 0 0 36px rgba(31, 191, 99, 0.22), 0 10px 20px -12px rgba(15, 23, 42, 0.2);
    }
    50% {
        box-shadow: 0 0 26px rgba(31, 191, 99, 0.55), 0 0 60px rgba(31, 191, 99, 0.35), 0 16px 28px -12px rgba(15, 23, 42, 0.25);
    }
}

.animated-gradient {
    background: linear-gradient(-45deg, #f7f5f1, #ffffff, #eef6f1, #ffffff);
    background-size: 320% 320%;
    animation: gradient 18s ease infinite;
}

.shape {
    position: absolute;
    opacity: 0.14;
    mix-blend-mode: multiply;
}

.shape-1 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle at 30% 30%, rgba(31, 191, 99, 0.65), rgba(14, 143, 74, 0.45));
    border-radius: 55% 45% 60% 40% / 55% 45% 55% 45%;
    top: 8%;
    right: 4%;
    animation: float 10s ease-in-out infinite;
    filter: blur(70px);
}

.shape-2 {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle at 70% 30%, rgba(134, 239, 172, 0.65), rgba(31, 191, 99, 0.4));
    border-radius: 35% 65% 65% 35% / 35% 35% 65% 65%;
    bottom: 12%;
    left: 8%;
    animation: floatReverse 12s ease-in-out infinite;
    filter: blur(60px);
}

.shape-3 {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle at 40% 40%, rgba(110, 231, 183, 0.55), rgba(31, 191, 99, 0.35));
    border-radius: 60% 40% 55% 45% / 60% 40% 60% 40%;
    top: 52%;
    left: 4%;
    animation: float 14s ease-in-out infinite 2s;
    filter: blur(55px);
}

.grid-bg {
    background-image:
        linear-gradient(rgba(31, 191, 99, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 191, 99, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
}

.glow-button {
    animation: pulse-glow 2.4s ease-in-out infinite;
    background-color: var(--accent) !important;
    box-shadow: 0 12px 30px rgba(31, 191, 99, 0.35), 0 0 0 1px rgba(31, 191, 99, 0.25) !important;
}

.glow-button:hover {
    background-color: var(--accent-strong) !important;
}

.card-hover {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 246, 240, 0.96));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

@media (hover: hover) {
    .card-hover:hover {
        transform: translateY(-10px) rotate(-0.25deg);
        box-shadow: var(--shadow);
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: slide-up 0.8s ease-out forwards;
}

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

.floating-shape:nth-child(2) { animation-delay: 1s; }
.floating-shape:nth-child(3) { animation-delay: 2s; }
.floating-shape:nth-child(4) { animation-delay: 3s; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }

    .shape-1, .shape-2, .shape-3 {
        display: none;
    }

    .floating-shape {
        display: none;
    }

    h1 {
        font-size: 3rem !important;
        line-height: 1.1 !important;
    }

    .text-7xl {
        font-size: 3rem !important;
    }

    .text-6xl {
        font-size: 2.5rem !important;
    }

    .text-5xl {
        font-size: 2rem !important;
    }

    section {
        padding-top: 6rem !important;
        padding-bottom: 4rem !important;
    }

    .card-hover {
        padding: 1.5rem !important;
    }
}

@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}