:root {
    --forest: #12372a;
    --forest-2: #1d5a43;
    --blush: #fbe6ea;
    --rose: #e2527a;
    --rose-dark: #c23a63;
    --leaf: #eaf2ea;
    --ink: #1c2b25;
    --muted: #66766e;
    --display: 'Fraunces', Georgia, serif;
    --body: 'DM Sans', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--body); outline: none; border: none; text-decoration: none; transition: .3s ease; }
html { font-size: 62.5%; scroll-behavior: smooth; scroll-padding-top: 9rem; overflow-x: hidden; }
body { background: #fff; color: var(--ink); }
:focus-visible { outline: .2rem solid var(--rose); outline-offset: .3rem; }
section { padding: 9rem 8%; }

.heading { font-family: var(--display); font-weight: 600; font-size: 5.2rem; line-height: 1.05; letter-spacing: -.02em; text-align: center; color: var(--forest); margin-bottom: 5rem; }
.heading span { color: var(--rose); font-style: italic; }

.btn { display: inline-block; margin-top: 2rem; background: var(--rose); color: #fff; font-weight: 700; font-size: 1.6rem; padding: 1.4rem 3.6rem; border-radius: 5rem; cursor: pointer; }
.btn:hover { background: var(--forest); transform: translateY(-.3rem); box-shadow: 0 1rem 2rem rgba(18, 55, 42, .25); }

/* header */
header { position: fixed; top: 1.6rem; left: 4%; right: 4%; background: rgba(255,255,255,.9); backdrop-filter: blur(1.4rem); border-radius: 5rem; box-shadow: 0 1rem 3rem rgba(18, 55, 42, .12); padding: 1.1rem 3rem; display: flex; align-items: center; justify-content: space-between; z-index: 1000; }
header .logo { display: flex; align-items: center; font-family: var(--display); font-weight: 600; font-size: 2.8rem; color: var(--forest); }
header .logo img { height: 3.4rem; margin-right: .8rem; }
header .logo span { color: var(--rose); }
header .navbar a { font-weight: 500; font-size: 1.6rem; color: var(--ink); padding: .7rem 1.6rem; border-radius: 5rem; }
header .navbar a:hover { background: var(--blush); color: var(--rose-dark); }
header .icons a { font-size: 1.9rem; color: var(--forest); margin-left: 1.6rem; }
header .icons a:hover { color: var(--rose); }
header #toggler { display: none; }
header .fa-bars { display: none; font-size: 2rem; color: #fff; background: var(--forest); border-radius: 1rem; padding: .8rem 1.2rem; cursor: pointer; }

/* hero */
.home { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 11rem; padding-bottom: 12rem; color: #fff;
    background: linear-gradient(100deg, rgba(10, 35, 26, .9) 0%, rgba(10, 35, 26, .6) 50%, rgba(10, 35, 26, .1) 100%), url(../images/home-bg.jpg) no-repeat center / cover; }
.home .content { max-width: 70rem; }
.home .content h3 { font-family: var(--display); font-weight: 600; font-size: 8.4rem; line-height: .98; letter-spacing: -.035em; }
.home .content span { display: flex; align-items: center; gap: 1.4rem; margin-top: 3rem; font-weight: 500; font-size: 1.8rem; color: var(--blush); }
.home .content span::before { content: ""; width: 5rem; height: .2rem; background: var(--rose); }
.home .content p { font-size: 1.8rem; line-height: 1.75; padding: 1.4rem 0 .5rem; max-width: 46rem; color: rgba(255,255,255,.88); }
.home .hero-actions { display: flex; align-items: center; gap: 3rem; margin-top: 1.5rem; }
.home .hero-actions .btn { margin-top: 0; border-radius: 1.2rem; }
.home .hero-actions .link { color: #fff; font-weight: 500; font-size: 1.6rem; border-bottom: .15rem solid rgba(255,255,255,.4); padding-bottom: .3rem; }
.home .hero-actions .link i { margin-left: .6rem; font-size: 1.3rem; }
.home .hero-actions .link:hover { border-color: var(--rose); }
.home .facts { position: absolute; left: 8%; right: 8%; bottom: 3.5rem; display: flex; flex-wrap: wrap; list-style: none; border-top: .1rem solid rgba(255,255,255,.3); padding-top: 2rem; font-size: 1.5rem; color: rgba(255,255,255,.85); }
.home .facts li { padding-right: 3rem; margin-right: 3rem; border-right: .1rem solid rgba(255,255,255,.3); }
.home .facts li:last-child { border: none; margin: 0; padding: 0; }

/* ticker */
.ticker { background: var(--rose); color: #fff; overflow: hidden; padding: 1.5rem 0; }
.ticker .track { display: flex; gap: 3rem; width: max-content; animation: slide 30s linear infinite; }
.ticker span { font-family: var(--display); font-style: italic; font-size: 2.4rem; white-space: nowrap; color: inherit; }
.ticker .fa-seedling { font-size: 2rem; opacity: .8; }
@keyframes slide { to { transform: translateX(-50%); } }

/* about */
.about { background: var(--leaf); }
.about .row { display: flex; align-items: center; gap: 7rem; flex-wrap: wrap; }
.about .row .video-container { flex: 1 1 38rem; position: relative; }
.about .row .video-container video { width: 100%; aspect-ratio: 4 / 5; max-height: 62rem; display: block; object-fit: cover; border-radius: 50rem 50rem 3rem 3rem; box-shadow: 0 2rem 5rem rgba(18, 55, 42, .25); }
.about .row .video-container h3 { position: absolute; left: 50%; bottom: 2.4rem; transform: translateX(-50%); white-space: nowrap; background: #fff; color: var(--forest); font-size: 1.6rem; font-weight: 700; padding: 1rem 2.4rem; border-radius: 5rem; box-shadow: 0 .8rem 2rem rgba(0,0,0,.15); }
.about .row .content { flex: 1 1 40rem; }
.about .row .content h3 { font-family: var(--display); font-weight: 600; font-size: 4.6rem; line-height: 1.05; letter-spacing: -.02em; color: var(--forest); }
.about .row .content p { font-size: 1.6rem; line-height: 1.9; color: var(--muted); padding-top: 1.8rem; }

/* services */
.icons-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-block: 6rem; background: #fff; }
.icons-container .icons { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; padding: 3rem 2rem; background: var(--blush); border-radius: 2.4rem; }
.icons-container .icons:nth-child(even) { background: var(--leaf); }
.icons-container .icons:hover { transform: translateY(-.6rem); }
.icons-container .icons img { height: 5.5rem; }
.icons-container .icons h3 { font-family: var(--display); font-weight: 600; font-size: 2rem; color: var(--forest); }
.icons-container .icons span { font-size: 1.4rem; color: var(--muted); }

/* products */
.products { padding-top: 4rem; }
.products .box-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.products .box-container .box { position: relative; background: #fff; border-radius: 2.4rem; overflow: hidden; box-shadow: 0 .8rem 2.4rem rgba(18, 55, 42, .08); }
.products .box-container .box:hover { transform: translateY(-.6rem); box-shadow: 0 2rem 4rem rgba(18, 55, 42, .16); }
.products .box-container .box .discount { position: absolute; top: 1.6rem; left: 1.6rem; z-index: 1; background: var(--rose); color: #fff; font-weight: 700; font-size: 1.4rem; padding: .6rem 1.3rem; border-radius: 5rem; }
.products .box-container .box .image { position: relative; text-align: center; padding: 4rem 2rem 2rem; overflow: hidden; background: var(--blush); }
.products .box-container .box:nth-child(even) .image { background: var(--leaf); }
.products .box-container .box .image img { height: 25rem; max-width: 100%; object-fit: contain; }
.products .box-container .box:hover .image img { transform: scale(1.07) rotate(1.5deg); }
.products .box-container .box .image .icons { position: absolute; bottom: -7rem; left: 0; right: 0; display: flex; }
.products .box-container .box:hover .image .icons, .products .box-container .box .image .icons:focus-within { bottom: 0; }
.products .box-container .box .image .icons a { width: 25%; height: 5rem; line-height: 5rem; font-size: 1.7rem; background: var(--forest); color: #fff; }
.products .box-container .box .image .icons .cart-btn { width: 50%; font-size: 1.5rem; font-weight: 700; background: var(--rose); }
.products .box-container .box .image .icons a:hover { background: var(--forest-2); }
.products .box-container .box .content { padding: 2rem 2.4rem 2.4rem; display: flex; justify-content: space-between; align-items: center; }
.products .box-container .box .content h3 { font-family: var(--display); font-weight: 600; font-size: 2.3rem; color: var(--forest); }
.products .box-container .box .content .price { font-weight: 700; font-size: 2rem; color: var(--rose-dark); text-align: right; }
.products .box-container .box .content .price span { display: block; font-size: 1.4rem; font-weight: 400; color: var(--muted); text-decoration: line-through; }

/* reviews */
.review { background: var(--forest); }
.review .heading { color: #fff; }
.review .heading span { color: var(--blush); }
.review .box-container { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; }
.review .box-container .box { flex: 1 1 30rem; background: #fff; border-radius: 2.4rem; padding: 3.2rem; }
.review .box-container .box:nth-child(2) { margin-top: 4rem; background: var(--blush); }
.review .box-container .box .stars i { color: var(--rose); font-size: 1.7rem; }
.review .box-container .box p { font-size: 1.6rem; line-height: 1.8; color: var(--ink); padding-top: 1.6rem; }
.review .box-container .box .user { display: flex; align-items: center; gap: 1.4rem; margin-top: 2.4rem; }
.review .box-container .box .user img { height: 5.8rem; width: 5.8rem; border-radius: 50%; object-fit: cover; }
.review .box-container .box .user h3 { font-family: var(--display); font-weight: 600; font-size: 2rem; color: var(--forest); }
.review .box-container .box .user span { font-size: 1.4rem; color: var(--muted); }

/* contact */
.contact .row { display: grid; grid-template-columns: 1fr 1.25fr; border-radius: 3rem; overflow: hidden; box-shadow: 0 2rem 5rem rgba(18, 55, 42, .15); }
.contact .row .info { background: var(--forest); color: #fff; padding: 5rem 4rem; position: relative; overflow: hidden; }
.contact .row .info::after { content: ""; position: absolute; width: 26rem; height: 26rem; border-radius: 50%; right: -9rem; bottom: -9rem; background: var(--rose); opacity: .85; }
.contact .row .info h3 { font-family: var(--display); font-weight: 600; font-size: 4rem; line-height: 1.05; letter-spacing: -.02em; }
.contact .row .info p { font-size: 1.6rem; line-height: 1.8; color: rgba(255,255,255,.8); padding: 1.6rem 0 3rem; }
.contact .row .info ul { list-style: none; position: relative; z-index: 1; }
.contact .row .info li { display: flex; gap: 1.6rem; align-items: flex-start; margin-bottom: 2.4rem; }
.contact .row .info li i { width: 4.4rem; height: 4.4rem; flex: none; display: grid; place-items: center; font-size: 1.7rem; background: rgba(255,255,255,.12); border-radius: 1.2rem; }
.contact .row .info li b { display: block; font-size: 1.3rem; font-weight: 500; color: var(--blush); margin-bottom: .3rem; }
.contact .row .info li a, .contact .row .info li span { font-size: 1.6rem; color: #fff; text-transform: none; }
.contact .row .info li a:hover { color: var(--blush); }
.contact .row form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-content: start; padding: 5rem 4rem; background: #fff; }
.contact .row form .wide { grid-column: 1 / -1; }
.contact .row form .box { width: 100%; padding: 1.5rem 0; font-size: 1.6rem; color: var(--ink); background: transparent; border-bottom: .15rem solid #d5ded8; border-radius: 0; }
.contact .row form .box::placeholder { color: var(--muted); }
.contact .row form .box:focus { border-bottom-color: var(--rose); }
.contact .row form textarea { height: 13rem; resize: none; }
.contact .row form .btn { margin-top: 1rem; width: 100%; background: var(--forest); border-radius: 1.2rem; }
.contact .row form .btn:hover { background: var(--rose); }

/* closing cta */
.cta { padding-top: 2rem; }
.cta .cta-box { position: relative; overflow: hidden; text-align: center; color: #fff; border-radius: 4rem; padding: 10rem 6%;
    background: linear-gradient(rgba(194, 58, 99, .9), rgba(18, 55, 42, .88)), url(../images/home-bg.jpg) center / cover; }
.cta h2 { font-family: var(--display); font-weight: 600; font-size: 7rem; line-height: 1; letter-spacing: -.03em; max-width: 80rem; margin: 0 auto; }
.cta p { font-size: 1.8rem; line-height: 1.7; max-width: 50rem; margin: 2.4rem auto 0; color: rgba(255,255,255,.92); }
.cta .cta-actions { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; margin-top: 2rem; }
.cta .btn { background: #fff; color: var(--forest); }
.cta .btn:hover { background: var(--blush); }
.cta .btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 .2rem #fff; }
.cta .btn.ghost:hover { background: #fff; color: var(--forest); }

/* footer */
.footer { background: var(--forest); color: #fff; padding-bottom: 2.5rem; overflow: hidden; margin-top: 2rem; }
.footer .big-word { font-family: var(--display); font-weight: 600; font-size: 14rem; line-height: .9; letter-spacing: -.04em; color: rgba(255,255,255,.12); margin-bottom: 4rem; white-space: nowrap; }
.footer .big-word span { color: rgba(226, 82, 122, .55); }
.footer .box-container { display: flex; flex-wrap: wrap; gap: 3rem; }
.footer .box-container .box { flex: 1 1 22rem; }
.footer .box-container .box h3 { font-family: var(--display); font-weight: 600; font-size: 2.2rem; color: var(--blush); padding-bottom: 1rem; }
.footer .box-container .box > a { display: block; color: rgba(255,255,255,.78); font-size: 1.6rem; padding: .7rem 0; }
.footer .box-container .box > a.keep-case { text-transform: none; }
.footer .box-container .box > a:hover { color: #fff; transform: translateX(.5rem); }
.footer .socials { display: flex; gap: 1.2rem; margin-top: 1.2rem; }
.footer .socials a { width: 4.6rem; height: 4.6rem; display: grid; place-items: center; font-size: 2rem; color: #fff; background: rgba(255,255,255,.12); border-radius: 50%; }
.footer .socials a:hover { background: var(--rose); transform: translateY(-.3rem); }
.footer .box-container .box img { margin-top: 1.8rem; max-width: 100%; height: 4.5rem; }
.footer .credit { margin-top: 4rem; padding-top: 2.4rem; text-align: center; font-size: 1.5rem; color: rgba(255,255,255,.7); border-top: .1rem solid rgba(255,255,255,.15); }
.footer .credit span { color: #fff; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

@media (max-width: 1080px) {
    html { font-size: 55%; }
    section { padding: 7rem 4%; }
    .icons-container { grid-template-columns: repeat(2, 1fr); }
    .products .box-container { grid-template-columns: repeat(2, 1fr); }
    .home .content h3 { font-size: 6.6rem; }
    .cta h2 { font-size: 5.6rem; }
    .footer .big-word { font-size: 10rem; }
}

@media (max-width: 800px) {
    header { padding: 1rem 1.6rem; border-radius: 2.4rem; }
    header .fa-bars { display: inline-block; }
    header .navbar { position: absolute; top: calc(100% + 1rem); left: 0; right: 0; background: #fff; border-radius: 2.4rem; box-shadow: 0 1rem 3rem rgba(18, 55, 42, .15); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
    header #toggler:checked ~ .navbar { clip-path: polygon(-5% -5%, 105% -5%, 105% 105%, -5% 105%); }
    header .navbar a { display: block; font-size: 1.9rem; padding: 1.5rem 2rem; border-radius: 0; }
    .home .content h3 { font-size: 5.2rem; }
    .home .facts { display: none; }
    .home { padding-bottom: 6rem; }
    .home .facts li { border: none; padding: 0; margin: 0 2rem 0 0; }
    .contact .row { grid-template-columns: 1fr; }
    .contact .row .info, .contact .row form { padding: 3.2rem 2.4rem; }
    .heading { font-size: 4.2rem; }
    .about .row { gap: 4rem; }
    .review .box-container .box:nth-child(2) { margin-top: 0; }
    .products .box-container { grid-template-columns: 1fr; }
    .cta .cta-box { padding: 7rem 6%; border-radius: 3rem; }
    .cta h2 { font-size: 4.4rem; }
    .footer .big-word { font-size: 7rem; }
}

@media (max-width: 500px) {
    html { font-size: 50%; }
    .icons-container { grid-template-columns: 1fr; }
    .contact .row form { grid-template-columns: 1fr; }
    .home .content h3 { font-size: 4.4rem; }
    .heading { font-size: 3.6rem; }
    .cta h2 { font-size: 3.8rem; }
}