/* ==========================================================================
   Agroracio – varianta dizajnu „Moderný 3D“
   Načíta sa po site.css, len keď je varianta zapnutá (Nastavenia → Vzhľad webu).
   Obsah: farby · hlavička · pohyb · úvod (3D scéna, granula) · spoločné prvky · Maxi garden · pätička
   ========================================================================== */

.design-modern { --lime: #c8f560; --head: 78px; }

/* Tmavá paleta – všade okrem stránok Maxi garden, ktoré si držia vlastné pastelové farby. */
.design-modern:not(.theme-mg) {
  --paper: #07130d;
  --cream: #0a1b13;
  --card: #0e2218;
  --ink: #eef5ea;
  --muted: #9db3a3;
  --line: rgba(255, 255, 255, .11);
  --green: #c2ee5a;
  --green-bright: #6fd06a;
  --green-soft: rgba(200, 245, 96, .12);
  --forest: #0a1c13;
  --forest-2: #12301f;
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .85);
  color-scheme: dark;
}
.design-modern ::selection { background: var(--lime); color: #0a1c13; }

/* ---------- hlavička: plávajúca sklenená lišta ---------- */
.design-modern .site-header { top: 14px; width: min(1260px, calc(100% - 28px)); margin: 14px auto 0; border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px; background: rgba(8, 24, 16, .7); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 18px 44px -24px rgba(0, 0, 0, .8); }
.design-modern.theme-mg .site-header { background: rgba(8, 28, 20, .93); }
.design-modern .site-header.is-stuck { border-bottom-color: rgba(255, 255, 255, .13); }
.design-modern .header-inner { min-height: 62px; padding-inline: 24px 10px; }
.design-modern .logo img { height: 28px; }
.design-modern .site-nav ul a { color: #e6efe2; }
.design-modern .site-nav ul a::after { background: var(--lime); }
.design-modern .nav-new { background: var(--lime); color: #0a1c13; }
.design-modern .nav-toggle { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); border-radius: 50%; }
.design-modern .nav-toggle-bars, .design-modern .nav-toggle-bars::before, .design-modern .nav-toggle-bars::after { background: #fff; }
.design-modern .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
@media (max-width: 1020px) {
  .design-modern .site-nav { top: calc(100% + 10px); border: 1px solid rgba(255, 255, 255, .13); border-radius: 26px; background: rgba(8, 24, 16, .97); padding: 10px 22px 22px; }
  .design-modern .site-nav ul a { border-bottom-color: rgba(255, 255, 255, .1); }
  .design-modern .site-nav ul a[aria-current] { color: var(--lime); }
}

/* ---------- tlačidlá ---------- */
.design-modern .btn { transition: background-color .2s, color .2s, border-color .2s, box-shadow .3s, translate .25s cubic-bezier(.2, .8, .2, 1); }
.design-modern .btn-primary { background: var(--lime); color: #0a1c13; box-shadow: 0 14px 34px -14px rgba(200, 245, 96, .7); }
.design-modern .btn-primary:hover { background: #dcff86; box-shadow: 0 18px 44px -12px rgba(200, 245, 96, .9); }
.design-modern:not(.theme-mg) .btn-ghost { border-color: rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.design-modern:not(.theme-mg) .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- pohyb: odhaľovanie, naklápanie, vznášanie ---------- */
.js-reveal [data-reveal] { opacity: 0; translate: 0 30px; filter: blur(8px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 90ms), translate .9s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 90ms), filter .9s ease calc(var(--i, 0) * 90ms), transform .6s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s, background-color .3s; }
.js-reveal [data-reveal].is-in { opacity: 1; translate: none; filter: none; }

.design-modern [data-tilt] { position: relative; transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.design-modern [data-tilt]:not([data-reveal]) { transition: transform .6s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; }
.design-modern [data-tilt]:hover { transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.design-modern [data-tilt].is-tilting { transition: transform .1s linear !important; }
.tilt-glare { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .2), transparent 46%); opacity: 0; transition: opacity .3s; pointer-events: none; }
[data-tilt]:hover > .tilt-glare { opacity: 1; }

@keyframes m-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes m-float-s { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes m-drift { 0% { translate: 0 0; scale: 1; } 100% { translate: 6vw 4vw; scale: 1.18; } }
@keyframes m-spin { to { rotate: 360deg; } }
@keyframes m-ring-1 { from { transform: translateZ(-150px) rotateX(74deg) rotateZ(0deg); } to { transform: translateZ(-150px) rotateX(74deg) rotateZ(360deg); } }
@keyframes m-ring-2 { from { transform: translateZ(-150px) rotateY(18deg) rotateX(74deg) rotateZ(0deg); } to { transform: translateZ(-150px) rotateY(18deg) rotateX(74deg) rotateZ(360deg); } }
@keyframes m-pulse { 0% { box-shadow: 0 0 0 0 rgba(200, 245, 96, .7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(200, 245, 96, 0); } }
@keyframes m-marquee { to { transform: translateX(-50%); } }
@keyframes m-pan { from { transform: scale(1.18) translate(-3%, 2%); } to { transform: scale(1.18) translate(3%, -2%); } }
@keyframes m-morph { 0%, 100% { border-radius: 42% 58% 39% 61% / 55% 41% 59% 45%; rotate: -4deg; } 33% { border-radius: 58% 42% 55% 45% / 42% 58% 44% 56%; rotate: 5deg; } 66% { border-radius: 40% 60% 48% 52% / 59% 44% 56% 41%; rotate: -1deg; } }

.m-cursor { position: fixed; left: 0; top: 0; z-index: 40; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 245, 96, .09), transparent 62%); mix-blend-mode: screen; pointer-events: none; translate: var(--x, -999px) var(--y, -999px); }
.m-granules { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.m-granules-front { z-index: 4; }
/* granule sú za textom tlmené, aby sa s ním nezlievali */
.m-hero > .m-granules:not(.m-granules-front) { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, .28) 42%, #000 64%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, .28) 42%, #000 64%); }

/* polárna žiara v pozadí */
.m-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.m-aurora i { position: absolute; border-radius: 50%; filter: blur(90px); animation: m-drift 20s ease-in-out infinite alternate; }
.m-aurora i:nth-child(1) { width: 54vw; height: 54vw; right: -14vw; top: -16vw; background: #1f7f48; opacity: .6; }
.m-aurora i:nth-child(2) { width: 40vw; height: 40vw; left: -12vw; bottom: -18vw; background: #0e5d3c; opacity: .55; animation-delay: -7s; }
.m-aurora i:nth-child(3) { width: 26vw; height: 26vw; right: 26vw; bottom: 2vw; background: #9fca32; opacity: .22; animation-delay: -12s; }

/* ==========================================================================
   ÚVOD
   ========================================================================== */
.m-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: min(100svh, 1000px); margin-top: calc(-1 * var(--head)); padding-top: calc(var(--head) + clamp(36px, 6vw, 80px)); overflow: hidden; }
.m-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000, transparent); mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000, transparent); }
.m-hero::after { content: ""; position: absolute; inset: 0; z-index: 5; opacity: .07; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.m-hero-grid { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-bottom: clamp(40px, 6vw, 80px); }
.m-pill { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 8px 16px 8px 13px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #dbe8d6; font-size: .82rem; font-weight: 600; letter-spacing: .04em; }
.m-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: m-pulse 2s infinite; }
.m-hero h1 { font-size: clamp(2.1rem, 4.25vw, 3.9rem); font-stretch: 122%; line-height: 1.05; letter-spacing: -.025em; overflow-wrap: break-word; }
.m-hero-copy { position: relative; z-index: 2; }
.m-grad { background: linear-gradient(100deg, #c8f560 5%, #6fd06a 50%, #ffd83d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-hero .lead { margin-top: 24px; color: #b9cbbd; }
.m-hero .actions { margin-top: 34px; }

/* 3D scéna */
.m-stage { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1 / 1.02; margin-inline: auto; perspective: 1300px; }
.m-stage-3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
.m-portal { position: absolute; inset: 5% 9% 15% 9%; border-radius: 50%; overflow: hidden; transform: translateZ(-150px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 0 110px 14px rgba(111, 208, 106, .45); }
.m-portal img { width: 100%; height: 100%; object-fit: cover; animation: m-pan 26s ease-in-out infinite alternate; }
.m-portal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .42), transparent 38%), radial-gradient(circle at 74% 88%, rgba(4, 14, 9, .86), transparent 58%); box-shadow: inset 0 0 70px rgba(4, 14, 9, .65); }
.m-ring { position: absolute; border: 1.5px dashed rgba(200, 245, 96, .62); border-radius: 50%; transform-style: preserve-3d; }
.m-ring::after { content: ""; position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 20px 5px rgba(200, 245, 96, .8); }
.m-ring-1 { inset: -10% -18% 0% -18%; transform: translateZ(-150px) rotateX(74deg); animation: m-ring-1 38s linear infinite; }
.m-ring-2 { inset: -1% -9% 9% -9%; border-style: solid; border-color: rgba(255, 255, 255, .3); transform: translateZ(-150px) rotateY(18deg) rotateX(74deg); animation: m-ring-2 26s linear infinite reverse; }
.m-ring-2::after { background: #ffd83d; box-shadow: 0 0 20px 5px rgba(255, 216, 61, .8); }
.m-pack { position: absolute; }
.m-pack img { width: 100%; filter: drop-shadow(0 44px 28px rgba(0, 0, 0, .6)); animation: m-float 7s ease-in-out infinite; }
.m-pack-l { left: 0; bottom: 7%; width: 38%; transform: translateZ(10px) rotateY(24deg) rotateZ(-7deg); }
.m-pack-r { right: -1%; bottom: 9%; width: 36%; transform: translateZ(-30px) rotateY(-26deg) rotateZ(7deg); }
.m-pack-c { left: 26%; bottom: -3%; width: 47%; transform: translateZ(140px); }
.m-pack-l img { animation-delay: -2.2s; }
.m-pack-r img { animation-delay: -4.4s; }
.m-chip { position: absolute; display: grid; gap: 1px; padding: 12px 17px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 18px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .75); color: #fff; white-space: nowrap; animation: m-float-s 6s ease-in-out infinite; }
.m-chip strong { font-size: 1.3rem; font-weight: 800; font-stretch: 116%; line-height: 1.15; }
.m-chip span { color: #cfe0cf; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.m-chip-1 { left: -5%; top: 13%; transform: translateZ(170px); }
.m-chip-2 { right: -7%; top: 32%; transform: translateZ(90px); animation-delay: -2s; }
.m-chip-3 { right: 2%; bottom: 3%; transform: translateZ(230px); animation-delay: -4s; }

/* bežiaci pás s názvami produktov */
.m-marquee { position: relative; z-index: 3; padding: 22px 0; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .08); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.m-marquee-track { display: flex; align-items: center; gap: 38px; width: max-content; padding-right: 38px; animation: m-marquee 46s linear infinite; }
.m-marquee span { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .38); font-size: clamp(1.3rem, 2.5vw, 2.1rem); font-weight: 800; font-stretch: 122%; text-transform: uppercase; white-space: nowrap; }
.m-marquee i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); }

/* tri smery ponuky */
.m-bento { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(2, minmax(270px, 1fr)); gap: 20px; }
.m-bento-card { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 270px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 30px; overflow: hidden; color: #fff; text-decoration: none; }
.m-bento-card:first-child { grid-row: span 2; }
.m-bento-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale .9s cubic-bezier(.2, .7, .2, 1); }
.m-bento-card:hover > img { scale: 1.08; }
.m-bento-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 19, 13, .3) 0%, rgba(7, 19, 13, .62) 50%, rgba(7, 19, 13, .96)); }
.m-bento-num { position: absolute; top: 22px; left: 24px; padding: 6px 13px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(7, 19, 13, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .9rem; font-weight: 800; font-stretch: 120%; }
.m-bento-body { display: grid; gap: 10px; max-width: 48ch; padding: 78px clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px); }
.m-bento-body h2 { font-size: clamp(1.4rem, 2.5vw, 2.1rem); }
.m-bento-body p { color: #d3e0d3; }
.m-bento-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--lime); font-weight: 650; }
.m-bento-link b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lime); color: #0a1c13; transition: rotate .35s cubic-bezier(.2, .8, .2, 1); }
.m-bento-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m-bento-card:hover .m-bento-link b { rotate: -45deg; }

/* granula s obiehajúcimi živinami */
.m-granule-section { position: relative; overflow: hidden; }
.m-granule-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.m-orbit { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin-inline: auto; }
.m-orbit::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(111, 208, 106, .34), transparent 64%); }
.m-orbit-ring { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; translate: -50% -50%; rotate: -14deg; }
.m-orbit-ring-1 { width: 68%; height: 26%; }
.m-orbit-ring-2 { width: 98%; height: 38%; border-style: dashed; border-color: rgba(200, 245, 96, .3); }
.m-granule { position: absolute; left: 50%; top: 50%; z-index: 50; width: 36%; aspect-ratio: 1; margin: -18% 0 0 -18%; animation: m-float 8s ease-in-out infinite; }
.m-granule span { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 47% 53% 44% 56% / 52% 46% 54% 48%; background: radial-gradient(circle at 32% 26%, #fffaf0 0, #f1e6cf 22%, #d9c8a2 52%, #a58f63 82%, #6f5d3c 100%); box-shadow: inset -18px -24px 44px rgba(60, 45, 20, .6), inset 10px 12px 28px rgba(255, 255, 255, .55), 0 44px 60px -22px rgba(0, 0, 0, .75), 0 0 90px rgba(200, 245, 96, .28); animation: m-morph 14s ease-in-out infinite; }
.m-granule span::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .75; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .34 0 0 0 0 .2 0 0 0 1.5 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.m-el { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; align-content: center; width: 78px; height: 78px; margin: -39px 0 0 -39px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; background: rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; text-align: center; will-change: transform; }
.m-el strong { font-size: 1.25rem; font-weight: 800; font-stretch: 116%; line-height: 1; }
.m-el span { color: #cfe0cf; font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.m-el:nth-of-type(odd) strong { color: var(--lime); }
.m-granule-copy .lead { margin-top: 18px; }
.m-why { display: grid; gap: 12px; margin: 30px 0; }
.m-why li { padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .035); }
.m-why li:hover { border-color: rgba(200, 245, 96, .5); background: rgba(200, 245, 96, .07); transform: translateX(8px); }
.m-why h3 { margin-bottom: 6px; font-size: 1.12rem; }
.m-why p { color: var(--muted); }
.m-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(48px, 7vw, 96px) 0 0; border-top: 1px solid var(--line); }
.m-stats div { display: flex; flex-direction: column-reverse; gap: 10px; padding: 30px 24px 0; border-left: 1px solid var(--line); }
.m-stats div:first-child { padding-left: 0; border-left: 0; }
.m-stats dt { color: var(--muted); font-size: .92rem; }
.m-stats dd { margin: 0; background: linear-gradient(180deg, #fff 20%, #a6dc8c); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(1.7rem, 3.2vw, 2.8rem); font-weight: 800; font-stretch: 120%; line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* pás Maxi garden s plávajúcimi ikonami */
.m-mg-band { box-shadow: 0 40px 90px -40px rgba(200, 245, 96, .35); }
.m-mg-band .mg-band-packs img { animation: m-float 7s ease-in-out infinite; }
.m-mg-band .mg-band-packs img:nth-child(1) { animation-delay: -2s; }
.m-mg-band .mg-band-packs img:nth-child(3) { animation-delay: -4s; }
.m-mg-icons { position: absolute !important; inset: 0; pointer-events: none; }
.m-mg-icon { position: absolute; width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 16px 28px -14px rgba(9, 79, 67, .5); color: var(--mg-dark); animation: m-float-s 6s ease-in-out infinite; }
.m-mg-icon svg { width: 100%; height: 100%; }
.m-mg-icon-1 { right: 41%; top: 12%; }
.m-mg-icon-2 { right: 4%; top: 9%; animation-delay: -1.5s; scale: .86; }
.m-mg-icon-3 { right: 44%; bottom: 14%; animation-delay: -3s; scale: .8; }
.m-mg-icon-4 { right: 2%; bottom: 20%; animation-delay: -4.5s; }
.m-mg-icon-5 { right: 23%; top: 3%; animation-delay: -2.4s; scale: .72; }
.m-mg-icon-6 { right: 24%; bottom: 3%; animation-delay: -5s; scale: .76; }

/* záverečná výzva */
.m-cta { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 24px; padding: clamp(30px, 6vw, 84px); border: 1px solid rgba(255, 255, 255, .13); border-radius: 38px; background: linear-gradient(135deg, #103826, #0a1c13 70%); overflow: hidden; }
.m-aurora-small i:nth-child(1) { width: 40vw; height: 40vw; right: -10vw; top: -20vw; opacity: .5; }
.m-aurora-small i:nth-child(2) { width: 24vw; height: 24vw; left: 30%; bottom: -16vw; background: #9fca32; opacity: .2; }
.m-cta h2 { font-size: clamp(1.8rem, 4vw, 3.3rem); font-stretch: 120%; }
.m-cta-main > p:not(.eyebrow) { max-width: 50ch; margin-top: 18px; color: #b9cbbd; font-size: 1.08rem; }
.m-cta-pack { width: 118%; max-width: none; filter: drop-shadow(0 34px 30px rgba(0, 0, 0, .55)); animation: m-float 9s ease-in-out infinite; }

/* ==========================================================================
   SPOLOČNÉ PRVKY (tmavá paleta)
   ========================================================================== */
.design-modern:not(.theme-mg) .page-head { position: relative; isolation: isolate; margin-top: calc(-1 * var(--head)); padding-top: calc(var(--head) + clamp(56px, 8vw, 110px)); padding-bottom: clamp(36px, 5vw, 64px); overflow: hidden; }
.design-modern:not(.theme-mg) .page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 90% at 82% 0%, rgba(31, 127, 72, .6), transparent 70%), radial-gradient(ellipse 40% 70% at 8% 100%, rgba(14, 93, 60, .45), transparent 70%); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.design-modern:not(.theme-mg) .page-head .m-granules { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 46%, #000 72%), linear-gradient(#000 65%, transparent); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 46%, #000 72%), linear-gradient(#000 65%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
.design-modern:not(.theme-mg) .page-head > .wrap { position: relative; z-index: 1; }
.design-modern:not(.theme-mg) .page-head h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-stretch: 122%; letter-spacing: -.025em; }
.design-modern:not(.theme-mg) .page-head-grid h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.design-modern:not(.theme-mg) .page-head-img { border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 80px -20px rgba(111, 208, 106, .4); animation: m-float 9s ease-in-out infinite; }
.design-modern:not(.theme-mg) .section-head h2, .design-modern:not(.theme-mg) .prose h2 { font-stretch: 118%; }

/* karty produktov: obal „vystúpi“ z karty */
.design-modern:not(.theme-mg) .pcard { border-color: rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03)); overflow: visible; transform-style: preserve-3d; }
.design-modern:not(.theme-mg) .pcard:hover { border-color: rgba(200, 245, 96, .5); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9), 0 0 60px -24px rgba(200, 245, 96, .5); }
.design-modern:not(.theme-mg) .pcard-img { padding: 30px 30px 22px; border-radius: 19px 19px 0 0; background: radial-gradient(circle at 50% 62%, rgba(111, 208, 106, .3), transparent 68%); overflow: visible; transform-style: preserve-3d; }
.design-modern:not(.theme-mg) .pcard-img img { filter: drop-shadow(0 26px 20px rgba(0, 0, 0, .6)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.design-modern:not(.theme-mg) .pcard:hover .pcard-img img { transform: translateZ(70px) translateY(-7%) scale(1.1) rotate(-3deg); }
.design-modern:not(.theme-mg) .pcard--mg .pcard-img { border-radius: 19px 19px 0 0; background: color-mix(in srgb, var(--tint, var(--mg-bg)) 62%, #fff); }
.design-modern:not(.theme-mg) .pcard--mg .pcard-cat { color: #c4dd7f; }
.design-modern:not(.theme-mg) .pcard-body h3 { color: #fff; }
.design-modern:not(.theme-mg) .chip { background: rgba(200, 245, 96, .12); color: #d9f79a; }
.design-modern:not(.theme-mg) .chip-link { background: rgba(255, 255, 255, .05); }
.design-modern:not(.theme-mg) .chip-link:hover { border-color: var(--lime); }
.design-modern:not(.theme-mg) .chip-link[aria-current] { border-color: var(--lime); background: var(--lime); color: #0a1c13; }
.design-modern:not(.theme-mg) .brand-switch { background: rgba(255, 255, 255, .06); }
.design-modern:not(.theme-mg) .brand-switch a[aria-current] { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }

/* detail produktu: obal na 3D podstavci */
.design-modern .product { padding-top: 34px; }
.design-modern .product-stage { position: relative; overflow: visible; transform-style: preserve-3d; }
.design-modern .product-stage img { position: relative; transition: transform .6s cubic-bezier(.2, .8, .2, 1); transform: translateZ(60px); animation: m-float 8s ease-in-out infinite; }
.design-modern .product-stage::before { content: ""; position: absolute; inset: 9%; border: 1px dashed rgba(255, 255, 255, .28); border-radius: 50%; animation: m-spin 50s linear infinite; }
.design-modern:not(.theme-mg) .product-stage { border: 1px solid rgba(255, 255, 255, .11); background: radial-gradient(circle at 50% 56%, rgba(111, 208, 106, .36), rgba(255, 255, 255, .03) 70%); box-shadow: inset 0 0 80px rgba(0, 0, 0, .35); }
.design-modern:not(.theme-mg) .product-stage img { filter: drop-shadow(0 40px 30px rgba(0, 0, 0, .65)); }
.design-modern.theme-mg .product-stage::before { border-color: rgba(9, 79, 67, .3); }
.design-modern:not(.theme-mg) .product-thumbs button { background: rgba(255, 255, 255, .06); }
.design-modern:not(.theme-mg) .product-thumbs button[aria-pressed="true"] { border-color: var(--lime); }
.design-modern:not(.theme-mg) .product-info h1 { font-stretch: 120%; }
.design-modern:not(.theme-mg) .ticks li::before { background-color: var(--lime); }
.design-modern:not(.theme-mg) .nutrients { background: rgba(255, 255, 255, .04); }
.design-modern:not(.theme-mg) .nutrient-bar span { background: linear-gradient(90deg, #6fd06a, var(--lime)); box-shadow: 0 0 16px rgba(200, 245, 96, .5); }

/* ostatné bloky */
.design-modern:not(.theme-mg) .usage, .design-modern:not(.theme-mg) .benefits li, .design-modern:not(.theme-mg) .people li, .design-modern:not(.theme-mg) .cta-card, .design-modern:not(.theme-mg) .doc-group a, .design-modern:not(.theme-mg) .photo-card, .design-modern:not(.theme-mg) .contact-form { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); }
.design-modern:not(.theme-mg) .people li:hover, .design-modern:not(.theme-mg) .usage:hover, .design-modern:not(.theme-mg) .doc-group a:hover { border-color: rgba(200, 245, 96, .5); }
.design-modern:not(.theme-mg) .benefits li::before { color: var(--lime); }
.design-modern:not(.theme-mg) .delivery { border: 1px solid var(--line); }
.design-modern:not(.theme-mg) .gallery img { border: 1px solid var(--line); }
.design-modern:not(.theme-mg) .stats-light div { border: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.design-modern:not(.theme-mg) .stats-light dd { color: #fff; }
.design-modern:not(.theme-mg) .doc-type { background: rgba(200, 245, 96, .14); color: var(--lime); }
.design-modern:not(.theme-mg) .field input, .design-modern:not(.theme-mg) .field select, .design-modern:not(.theme-mg) .field textarea { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); }
.design-modern:not(.theme-mg) .field input:focus, .design-modern:not(.theme-mg) .field select:focus, .design-modern:not(.theme-mg) .field textarea:focus { border-color: var(--lime); }
.design-modern:not(.theme-mg) .check input { accent-color: var(--lime); }
.design-modern:not(.theme-mg) .field-error { color: #ffb4ab; }
.design-modern:not(.theme-mg) .field [aria-invalid="true"] { border-color: #ff8a80; }
.design-modern:not(.theme-mg) .notice-ok { color: #d9f79a; }
.design-modern:not(.theme-mg) .notice-err { background: rgba(179, 38, 30, .22); color: #ffb4ab; }
.design-modern:not(.theme-mg) .map { background: rgba(255, 255, 255, .04); }
.design-modern:not(.theme-mg) .empty { background: rgba(255, 255, 255, .04); }

/* ==========================================================================
   MAXI GARDEN v modernej variante – pastelové farby zostávajú, pribúda hĺbka a pohyb
   ========================================================================== */
.design-modern .mg-hero { margin-top: calc(-1 * var(--head)); padding-top: var(--head); }
.design-modern .mg-hero::before { animation: m-drift 16s ease-in-out infinite alternate; }
.design-modern .mg-hero-packs img { animation: m-float 7s ease-in-out infinite; }
.design-modern .mg-pack-a { transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0) rotate(-6deg); }
.design-modern .mg-pack-b { transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0) rotate(7deg) translateY(8%); animation-delay: -3.5s; }
.design-modern .mg-crop-icon { animation: m-float-s 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.7s); }
.design-modern .mg-card { overflow: visible; transform-style: preserve-3d; }
.design-modern .mg-card-img { transform: translateZ(30px); }
.design-modern .mg-card-img img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.design-modern .mg-card:hover .mg-card-img img { transform: translateZ(50px) scale(1.12) rotate(-4deg); }
.design-modern .mg-card:hover { box-shadow: 0 40px 60px -34px rgba(9, 79, 67, .7); }
.design-modern .mg-contact img { animation: m-float-s 7s ease-in-out infinite; }

/* ==========================================================================
   PÄTIČKA
   ========================================================================== */
.design-modern .site-footer { position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .08); }
.design-modern:not(.theme-mg) .site-footer { background: #050e09; }
.design-modern .site-footer::after { content: "AGRORACIO"; display: block; margin-top: 6px; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .13); font-size: clamp(2.6rem, 11.6vw, 12.5rem); font-weight: 900; font-stretch: 125%; line-height: .78; letter-spacing: -.02em; text-align: center; white-space: nowrap; transform: translateY(16%); pointer-events: none; }
.design-modern .footer-bottom { margin-top: clamp(28px, 4vw, 44px); }

/* ==========================================================================
   RESPONZIVITA
   ========================================================================== */
@media (max-width: 1100px) {
  .m-chip-1 { left: 0; }
  .m-chip-2 { right: 0; }
}
@media (max-width: 900px) {
  .m-hero { min-height: 0; }
  .m-granules-front { display: none; }
  .m-hero > .m-granules:not(.m-granules-front), .design-modern:not(.theme-mg) .page-head .m-granules { opacity: .38; -webkit-mask-image: none; mask-image: none; }
  .m-hero-grid, .m-granule-grid, .m-cta { grid-template-columns: 1fr; }
  .m-stage { max-width: 440px; margin-top: 10px; }
  .m-bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .m-bento-card:first-child { grid-row: auto; min-height: 340px; }
  .m-orbit { max-width: 420px; }
  .m-stats { grid-template-columns: repeat(2, 1fr); }
  .m-stats div { padding: 24px 16px 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .m-cta-pack { width: 100%; }
  .m-mg-icon-1, .m-mg-icon-3 { display: none; }
  .m-aurora i:nth-child(1) { width: 90vw; height: 90vw; }
  .m-aurora i:nth-child(2) { width: 70vw; height: 70vw; }
}
@media (max-width: 600px) {
  .design-modern .header-inner { min-height: 56px; padding-inline: 18px 8px; }
  .design-modern { --head: 72px; }
  .m-chip { padding: 9px 13px; border-radius: 14px; }
  .m-chip strong { font-size: 1.05rem; }
  .m-chip span { font-size: .6rem; }
  .m-chip-3 { display: none; }
  .m-el { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .m-el strong { font-size: 1.05rem; }
  .m-el span { font-size: .52rem; }
  .m-mg-icon { width: 46px; height: 46px; }
  .m-bento-card { border-radius: 24px; }
  .m-cta { border-radius: 28px; }
}