@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    --ink: #14231c;
    --muted: #68756e;
    --paper: #f7f8f4;
    --surface: #ffffff;
    --forest: #173b2b;
    --forest-2: #24583d;
    --leaf: #9fc65a;
    --line: rgba(20, 35, 28, .12);
    --shadow: 0 24px 70px rgba(20, 35, 28, .11);
    --radius: 24px;
    --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper) !important; color: var(--ink) !important; font-family: 'DM Sans', Arial, sans-serif !important; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

.container, .about-container, .logo-container, .topbar-container { width: min(calc(100% - 48px), var(--max)) !important; max-width: var(--max) !important; margin-inline: auto !important; }

.topbar { padding: 9px 0 !important; background: var(--forest) !important; color: rgba(255,255,255,.78) !important; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 12px !important; letter-spacing: .02em; }
.topbar-container { display: flex !important; align-items: center; gap: 18px; }
.topbar a { color: rgba(255,255,255,.8) !important; transition: color .25s ease; }
.topbar a:hover { color: #fff !important; }
.topbar .contact-info { display: flex; align-items: center; }
.topbar .contact-info span { margin-right: 0 !important; }
.topbar .social-media { display: flex; gap: 12px; margin-left: auto; }
.topbar .social-media a { margin-left: 0 !important; opacity: .72; }

header { position: sticky !important; top: 0; z-index: 1000; height: auto !important; padding: 14px 0 !important; background: rgba(247,248,244,.92) !important; color: var(--ink) !important; border-bottom: 1px solid var(--line); box-shadow: 0 8px 26px rgba(20,35,28,.04); backdrop-filter: blur(18px); }
.logo-container { min-height: 58px; display: flex !important; align-items: center; justify-content: space-between !important; gap: 32px; }
.site-logo { width: 190px !important; height: 96px !important; max-width: none; margin: 0 !important; object-fit: cover; object-position: center 57%; }
nav ul { display: flex !important; align-items: center; justify-content: flex-end !important; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
nav li { margin: 0 !important; }
nav a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; color: var(--ink) !important; font-size: 13px !important; font-weight: 700; letter-spacing: .02em; transition: background .25s ease, color .25s ease, transform .25s ease; }
nav a:hover, nav a:focus-visible { background: var(--forest) !important; color: #fff !important; transform: translateY(-1px); }
.language-toggle { flex: 0 0 auto; min-width: 42px; height: 36px; margin-left: auto; padding: 0 11px; border: 1px solid var(--forest); border-radius: 999px; background: transparent; color: var(--forest); cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: .08em; transition: background .25s ease, color .25s ease, transform .25s ease; }
.language-toggle:hover, .language-toggle:focus-visible { background: var(--forest); color: #fff; transform: translateY(-2px); }

.hero-stage { display: grid; grid-template-columns: minmax(0, 840px) minmax(220px, 260px); gap: 18px; width: min(calc(100% - 48px), 1118px); margin: 24px auto 0; align-items: stretch; }
.hero-stage .carousel { width: 100% !important; height: min(66vh, 640px) !important; min-height: 450px; margin: 0 !important; }
.hero-sidecard { display: flex; flex-direction: column; justify-content: flex-end; min-height: 450px; padding: 30px 26px; border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(155deg, var(--forest), #2f6048); color: #fff; box-shadow: var(--shadow); }
.hero-side-label { margin-bottom: auto; color: rgba(255,255,255,.68); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero-sidecard h2 { margin: 0 0 14px; color: #fff; font-family: 'Manrope', sans-serif; font-size: clamp(1.8rem, 2.6vw, 2.55rem); line-height: 1.02; letter-spacing: -.055em; }
.hero-sidecard p { margin: 0 0 24px; color: rgba(255,255,255,.72) !important; font-size: 13px; line-height: 1.6; }
.hero-side-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); }
.hero-side-stats div { display: flex; flex-direction: column; gap: 4px; }
.hero-side-stats strong { color: var(--leaf); font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1; }
.hero-side-stats span { color: rgba(255,255,255,.64); font-size: 10px; }
.hero-side-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff !important; font-size: 12px; font-weight: 800; text-decoration: none; transition: background .25s ease, transform .25s ease; }
.hero-side-link:hover { background: var(--leaf); color: var(--forest) !important; transform: translateY(-2px); }
.carousel { position: relative; width: min(calc(100% - 48px), 840px) !important; height: min(66vh, 640px) !important; min-height: 450px; margin: 24px auto 0 !important; overflow: hidden; border-radius: 30px !important; box-shadow: var(--shadow) !important; background: var(--forest); }
.carousel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10,28,20,.73) 0%, rgba(10,28,20,.18) 52%, rgba(10,28,20,.08) 100%); z-index: 1; }
.hero-copy { position: absolute; left: clamp(24px, 7vw, 92px); bottom: clamp(34px, 9vw, 96px); z-index: 3; width: min(560px, calc(100% - 48px)); color: #fff; }
.hero-kicker { display: inline-block; margin-bottom: 18px; color: rgba(255,255,255,.78); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero-copy h1 { margin: 0 0 16px; color: #fff; font-family: 'Manrope', sans-serif; font-size: clamp(2.5rem, 5.2vw, 4.8rem); font-weight: 800; line-height: 1.02; letter-spacing: -.065em; }
.hero-copy p { max-width: 440px; margin: 0 0 26px; color: rgba(255,255,255,.82) !important; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.65; }
.hero-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 18px 0 20px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.13); color: #fff !important; font-size: 13px; font-weight: 700; backdrop-filter: blur(12px); transition: background .25s ease, transform .25s ease; }
.hero-cta span { font-size: 20px; line-height: 1; }
.hero-cta:hover { background: var(--leaf); color: var(--forest) !important; transform: translateY(-3px); }
.carousel-container { display: flex; width: 100%; height: 100%; gap: 0; flex-shrink: 0; }
.carousel-slide { flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100%; box-sizing: border-box; overflow: hidden; }
.carousel-slide img { display: block; width: 100% !important; height: 100% !important; border-radius: 0 !important; object-fit: cover; object-position: center; }
.carousel-slide:first-child { position: relative; background: url('img/ev.jpeg') center / cover no-repeat; }
.carousel-slide:first-child::before { content: ''; position: absolute; inset: -20px; background: inherit; filter: blur(18px); opacity: .55; transform: scale(1.06); }
.carousel-slide:first-child img { position: relative; z-index: 1; object-fit: contain !important; background: rgba(23,59,43,.12); }
.carousel-slide:nth-child(2) { position: relative; background: url('img/header5.jpeg') center / cover no-repeat; }
.carousel-slide:nth-child(2)::before { content: ''; position: absolute; inset: -20px; background: inherit; filter: blur(18px); opacity: .55; transform: scale(1.06); }
.carousel-slide:nth-child(2) img { position: relative; z-index: 1; object-fit: contain !important; background: rgba(23,59,43,.08); }
.carousel-prev, .carousel-next { z-index: 2; width: 48px; height: 48px; padding: 0 !important; border: 1px solid rgba(255,255,255,.4) !important; background: rgba(255,255,255,.13) !important; color: #fff !important; backdrop-filter: blur(12px); transition: background .25s ease, transform .25s ease; }
.carousel-prev:hover, .carousel-next:hover { background: var(--leaf) !important; transform: translateY(-50%) scale(1.06); }

.about-hero { position: relative; min-height: clamp(360px, 52vh, 560px) !important; display: grid !important; place-items: center; margin: 0 !important; padding: 72px 24px !important; overflow: hidden; background: url('img/header.jpg') center / cover no-repeat !important; color: #fff !important; text-align: center; isolation: isolate; }
.about-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(15,42,29,.88), rgba(15,42,29,.22)); }
.hero-content { width: min(100%, 900px); position: relative; z-index: 1; }
.hero-content h1 { margin: 0 0 18px !important; color: #fff !important; font-family: 'Manrope', sans-serif !important; font-size: clamp(2.4rem, 6vw, 5.7rem) !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -.055em; }
.hero-content h3 { max-width: 680px; margin: 0 auto !important; color: rgba(255,255,255,.82) !important; font-size: clamp(1rem, 1.8vw, 1.35rem) !important; font-weight: 500 !important; line-height: 1.6 !important; }

section { padding: 100px 0 !important; }
section h2 { color: var(--forest) !important; font-family: 'Manrope', sans-serif !important; font-size: clamp(1.8rem, 3vw, 3.15rem) !important; font-weight: 800 !important; line-height: 1.1; letter-spacing: -.045em; }
p { color: var(--muted); }
.about-section { background: var(--paper) !important; padding: 110px 24px !important; }
.about-container { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(44px, 8vw, 110px); }
.about-section:nth-of-type(odd) .about-container { direction: rtl; }
.about-section:nth-of-type(odd) .about-container > * { direction: ltr; }
.about-text { max-width: 570px !important; }
.about-text h2 { margin: 0 0 18px !important; border: 0 !important; color: var(--forest) !important; font-size: 14px !important; letter-spacing: .16em; text-transform: uppercase; }
.about-text h3 { margin: 0 0 20px !important; color: var(--ink) !important; font-family: 'Manrope', sans-serif !important; font-size: clamp(1.7rem, 3vw, 3rem) !important; line-height: 1.12 !important; letter-spacing: -.045em; }
.about-text p { margin: 0 0 28px !important; font-size: 16px !important; line-height: 1.85 !important; }
.about-image { min-width: 0; }
.about-image img { display: block; width: 100% !important; height: 520px !important; max-width: none !important; margin: 0 !important; border-radius: var(--radius) !important; object-fit: cover; box-shadow: var(--shadow) !important; }
.about-btn, .btn, .details-btn { display: inline-flex !important; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px !important; border: 1px solid var(--forest) !important; border-radius: 999px !important; background: var(--forest) !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .03em; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.about-btn:hover, .btn:hover, .details-btn:hover { background: var(--forest-2) !important; color: #fff !important; transform: translateY(-3px); box-shadow: 0 14px 28px rgba(23,59,43,.2); }

.products, .services, .process-section { background: var(--surface) !important; padding: 110px 24px !important; }
.products h2, .services h2, .process-section h2 { margin: 0 0 40px !important; text-align: left !important; }
.product-grid, .service-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px !important; justify-content: initial !important; }
.product-item, .service-item { min-width: 0; padding: 0 0 22px !important; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius) !important; background: var(--surface) !important; text-align: left !important; box-shadow: none !important; transition: transform .3s ease, box-shadow .3s ease; }
.product-item:hover, .service-item:hover { transform: translateY(-7px); box-shadow: var(--shadow) !important; }
.product-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.product-item img, .service-item img { display: block; width: 100% !important; height: 360px !important; margin: 0 !important; border-radius: 0 !important; object-fit: cover; }
.product-item h3, .service-item h3 { margin: 18px 20px 0; color: var(--ink); font-family: 'Manrope', sans-serif; font-size: 17px; line-height: 1.3; }
.service-item p { margin: 8px 20px 0; font-size: 14px; }
.process-section { background: var(--paper) !important; text-align: center !important; }
.process-section h2 { text-align: center !important; background: none !important; color: var(--forest) !important; font-size: clamp(1.8rem, 3vw, 3rem) !important; text-transform: none !important; text-decoration: none !important; }
.process-container { display: grid !important; grid-template-columns: repeat(3, 1fr); max-width: 1000px; margin: auto; gap: 18px !important; }
.process-box { width: auto !important; padding: 30px !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; background: var(--surface) !important; box-shadow: none !important; text-align: left; }
.process-box:hover { transform: translateY(-7px); box-shadow: var(--shadow) !important; }
.step-number { color: var(--leaf) !important; font-family: 'Manrope', sans-serif; font-size: 48px !important; line-height: 1; }
.fancy-heading { margin: 15px 0 8px !important; background: none !important; color: var(--forest) !important; font-size: 18px !important; }
.process-box p { margin: 0; font-size: 14px; }

.services-section { padding: 110px 24px !important; background: var(--paper) !important; }
.services-section > h2 { width: min(calc(100% - 48px), var(--max)); margin: 0 auto 42px !important; text-align: left !important; }
.services-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px !important; max-width: var(--max) !important; margin: 0 auto !important; padding: 0 !important; }
.service-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius) !important; background: var(--surface) !important; box-shadow: none !important; text-align: left !important; transition: transform .3s ease, box-shadow .3s ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow) !important; }
.image-container { position: relative; overflow: hidden; height: 290px; }
.image-container img { display: block; width: 100% !important; height: 100% !important; border-radius: 0 !important; object-fit: cover; transition: transform .5s ease; }
.service-card:hover .image-container img { transform: scale(1.06); }
.badge { position: absolute; left: 18px; bottom: 18px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--forest); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.service-content { padding: 24px !important; }
.service-content h3 { margin: 0 0 10px !important; color: var(--ink) !important; font-family: 'Manrope', sans-serif !important; font-size: 20px !important; line-height: 1.25; }
.service-content p { min-height: 76px; margin: 0 0 20px !important; font-size: 14px; }
.details-btn { min-height: 42px; padding: 0 16px !important; font-size: 11px !important; }

.top-section { display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(28px, 6vw, 80px); width: min(calc(100% - 48px), var(--max)) !important; margin: 80px auto !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.top-section .image { margin: 0 !important; }
.top-section .image img { display: block; width: 100% !important; height: 560px !important; border-radius: var(--radius) !important; object-fit: cover; box-shadow: var(--shadow); }
.top-section .description { padding: 0 !important; }
.top-section .description h2 { margin: 0 0 20px !important; text-align: left !important; }
.top-section .description p { margin: 0; font-size: 16px; line-height: 1.9; }
.gallery { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px !important; width: min(calc(100% - 48px), var(--max)) !important; margin: 80px auto !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.gallery .gallery-item { height: 260px; overflow: hidden; border-radius: 18px !important; box-shadow: none !important; }
.gallery .gallery-item img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .5s ease; }
.gallery .gallery-item:hover img { transform: scale(1.07); }

.contact-section { width: min(calc(100% - 48px), var(--max)) !important; margin: 80px auto !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.contact-section h2 { margin: 0 0 12px !important; text-align: left !important; }
.contact-section > .container > p { margin: 0 0 36px; }
.contact-content { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px !important; }
.contact-form, .contact-content > .contact-info { min-width: 0; padding: 32px !important; border: 1px solid var(--line); border-radius: var(--radius) !important; background: var(--surface) !important; box-shadow: none !important; }
.contact-form { max-width: none !important; margin: 0 !important; }
.form-group { margin-bottom: 18px !important; }
.form-group label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 700; }
.form-group input, .form-group textarea, input, textarea { width: 100%; margin: 0 !important; padding: 14px 16px !important; border: 1px solid var(--line) !important; border-radius: 14px !important; background: var(--paper) !important; color: var(--ink); outline: none; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--forest) !important; box-shadow: 0 0 0 4px rgba(23,59,43,.1); }
.submit-btn { width: auto !important; min-height: 48px; padding: 0 24px !important; border-radius: 999px !important; background: var(--forest) !important; }
.contact-info h3 { margin: 0 0 18px; color: var(--forest); font-family: 'Manrope', sans-serif; }
.map-container { margin: 0 0 22px; border-radius: 18px !important; overflow: hidden; }
.map-container iframe { display: block; min-height: 310px; }
.address p { margin: 0 0 8px !important; font-size: 14px !important; }

footer { position: relative; padding: 72px 24px 20px !important; background: var(--forest) !important; color: rgba(255,255,255,.72) !important; text-align: left !important; }
footer > div:first-child { display: grid !important; grid-template-columns: 1.4fr 1fr .7fr 1fr; gap: 36px !important; width: min(100%, var(--max)) !important; max-width: var(--max) !important; margin: 0 auto !important; padding: 0 !important; }
footer > div:first-child > div { min-width: 0 !important; margin: 0 !important; text-align: left !important; }
footer img { width: 190px !important; height: 96px !important; max-width: none; margin: 0 0 18px !important; object-fit: cover; object-position: center 57%; filter: brightness(0) invert(1); }
footer h3 { margin: 0 0 16px !important; color: #fff; font-family: 'Manrope', sans-serif; font-size: 15px; }
footer p { margin: 0 0 8px; color: rgba(255,255,255,.68) !important; font-size: 13px; line-height: 1.7; }
footer ul { margin: 0; padding: 0; list-style: none; }
footer li { margin: 0 0 8px; }
footer a { color: rgba(255,255,255,.72) !important; font-size: 13px; transition: color .25s ease; }
footer a:hover { color: #fff !important; }
footer .footer-bottom { width: min(100%, var(--max)) !important; margin: 48px auto 0 !important; padding: 18px 0 0 !important; border-top: 1px solid rgba(255,255,255,.14) !important; color: rgba(255,255,255,.5); font-size: 12px; text-align: left !important; }
.hotline-phone-ring-wrap { left: auto !important; right: 22px !important; bottom: 22px !important; }
.hotline-bar { left: auto !important; right: 70px !important; }

@media (max-width: 980px) {
    .hero-stage { grid-template-columns: 1fr; width: calc(100% - 32px); margin-top: 16px; }
    .hero-stage .carousel { width: 100% !important; height: auto !important; min-height: 0; aspect-ratio: 4 / 3; margin-top: 0 !important; }
    .hero-sidecard { min-height: 300px; border-radius: 22px; }
    .product-grid, .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-container, .top-section, .contact-content { gap: 34px; }
    footer > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .container, .about-container, .logo-container, .topbar-container { width: min(calc(100% - 32px), var(--max)) !important; }
    .topbar { font-size: 11px !important; }
    .topbar .social-media { display: none; }
    header { padding: 10px 0 !important; }
    .logo-container { min-height: 52px; gap: 12px; flex-wrap: wrap; }
    .site-logo { width: 155px !important; height: 78px !important; max-width: none; }
    nav { width: 100%; }
    nav ul { flex-wrap: wrap; justify-content: flex-start !important; gap: 2px; }
    .language-toggle { margin-left: auto; }
    nav a { min-height: 34px; padding: 0 9px; font-size: 11px !important; }
    .carousel { width: calc(100% - 32px) !important; min-height: 0; height: auto !important; aspect-ratio: 4 / 3; margin-top: 16px !important; border-radius: 22px !important; }
    .carousel-prev, .carousel-next { width: 40px; height: 40px; }
    .hero-copy { bottom: 42px; }
    .hero-copy h1 { font-size: clamp(2.25rem, 12vw, 4rem); }
    .hero-kicker { font-size: 9px; letter-spacing: .1em; }
    section { padding: 72px 0 !important; }
    .about-section, .products, .services, .process-section, .services-section { padding: 72px 16px !important; }
    .about-container, .top-section, .contact-content { grid-template-columns: 1fr !important; }
    .about-section:nth-of-type(odd) .about-container { direction: ltr; }
    .about-image { order: -1; }
    .about-image img { height: 340px !important; }
    .hero-content h1 { font-size: clamp(2.5rem, 13vw, 4.4rem) !important; }
    .hero-content h3 { font-size: 15px !important; }
    .product-grid, .service-grid, .services-grid, .process-container { grid-template-columns: 1fr !important; }
    .product-item img, .service-item img { height: 300px !important; }
    .services-section > h2 { width: 100%; }
    .service-content p { min-height: 0; }
    .top-section, .contact-section { width: calc(100% - 32px) !important; margin: 48px auto !important; }
    .top-section .image img { height: 330px !important; }
    .gallery { width: calc(100% - 32px) !important; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 48px auto !important; }
    .gallery .gallery-item { height: 170px; }
    .contact-form, .contact-content > .contact-info { padding: 22px !important; }
    .map-container iframe { min-height: 250px; }
    footer { padding: 52px 16px 18px !important; }
    footer > div:first-child { grid-template-columns: 1fr !important; gap: 28px !important; }
    footer > div:first-child > div { text-align: left !important; }
    footer .footer-bottom { margin-top: 32px !important; }
    .hotline-phone-ring-wrap { right: 8px !important; bottom: 8px !important; transform: scale(.82); transform-origin: bottom right; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}