@font-face {
  font-family: "Neofolia";
  src: url("font/neofolia.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --bg: #090a0f;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --accent: #7ad49f;
  --accent-2: #b8e8c7;
  --link-1: #dff7ea;
  --link-2: #bfeed6;
  --link-3: #9fe4bf;
  --link-4: #7ad49f;
  --text: #f5f5f5;
  --muted: #9bb29b;
  --muted-dark: #6f8271;
  --shadow: rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(180deg, #06070b 0%, #0f1220 100%);
  color: var(--text);
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 32px;
  margin: 16px auto 0;
  max-width: 1240px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  background: rgba(10, 14, 20, 0.6);
  backdrop-filter: blur(12px);
}

.brand-wrap { display:inline-flex; align-items:center; gap:14px }
 .brand-wrap { display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:inherit; }
.brand-mark { width:44px; height:44px; display:block; flex:0 0 auto; border-radius:50%; object-fit:cover; object-position:center 38%; background:#13201f; box-shadow:0 0 0 1px rgba(122,212,159,0.35), 0 10px 24px rgba(0,0,0,0.22) }
.brand-name { font-family:"Neofolia",serif; letter-spacing:0.18em; font-size:1.2rem; font-weight:700 }

.site-nav { display:flex; gap:24px }
.site-nav a { color:rgba(245,245,245,0.9); text-transform:uppercase; letter-spacing:0.08em; font-size:0.95rem; font-weight:600; text-decoration:none }
.site-nav a:hover { color:var(--accent); text-decoration:none }
.site-nav a:nth-child(1) { color:var(--link-1) }
.site-nav a:nth-child(2) { color:var(--link-2) }
.site-nav a:nth-child(3) { color:var(--link-3) }
.site-nav a:nth-child(4) { color:var(--link-4) }

.nav-cta, .gold-btn, .whatsapp { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:12px 22px; font-weight:700; transition:transform .25s, box-shadow .25s }
.nav-cta, .gold-btn, .whatsapp { background: linear-gradient(135deg, #7ad49f, #3ca66e); color:#081014; box-shadow: 0 18px 36px rgba(122,212,159,0.12) }
.nav-cta:hover, .gold-btn:hover, .whatsapp:hover { transform:translateY(-3px) }

.view-gallery, .materials-link { display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); color:var(--text); padding:10px 20px; border-radius:999px; text-decoration:none; font-weight:700 }
.view-gallery:hover, .materials-link:hover { color:var(--accent-2); border-color:rgba(122,212,159,0.34); background:rgba(122,212,159,0.08); text-decoration:none }

.visit-shop-link {
  display:inline-flex;
  align-items:center;
  gap:0.75rem;
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.03em;
  padding:12px 22px;
  margin-top:24px;
  border:1px solid rgba(122,212,159,0.35);
  background: linear-gradient(135deg, rgba(122,212,159,0.16), rgba(122,212,159,0.05));
  box-shadow: 0 16px 30px rgba(122,212,159,0.12);
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
}

.visit-shop-link:hover {
  transform: translateY(-2px);
  border-color: rgba(122,212,159,0.55);
  background: linear-gradient(135deg, rgba(122,212,159,0.24), rgba(122,212,159,0.1));
  box-shadow: 0 20px 36px rgba(122,212,159,0.18);
}

.visit-shop-link:active {
  transform: translateY(0);
}

.view-link {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  color:var(--accent-2);
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.04em;
  transition: color .25s, transform .25s;
}

.view-link:hover {
  color:var(--accent);
  transform: translateX(2px);
}

/* Luxury country select styling */
#countrySelect {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(180deg, rgba(18,24,31,0.98), rgba(10,14,20,0.9));
  border: 1px solid rgba(122,212,159,0.28);
  color: var(--text);
  padding: 12px 18px;
  padding-right: 44px;
  border-radius:999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 30px rgba(0,0,0,0.4);
  font-weight:600;
  min-width:210px;
  z-index:1;
  outline:none;
  letter-spacing:0.03em;
  font-size:0.95rem;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  color-scheme: dark;
}

#countrySelect:hover,
#countrySelect:focus {
  border-color: rgba(122,212,159,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 34px rgba(122,212,159,0.15);
  transform: translateY(-1px);
}

/* Add a subtle custom arrow using a pseudo-element on the select wrapper only */
.select-wrap { position:relative; display:inline-block }
.select-wrap::after { content:"▾"; position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--accent-2); pointer-events:none; font-size:1rem; }

/* Ensure the select's dropdown text is visible (light background in native menu) */
#countrySelect option {
  color: #f5f7f6;
  background: #0d1117;
  padding: 0.75rem 0.9rem;
}

/* Process section styles */
.process { background:#06080c; border-radius:20px; padding:60px 32px; max-width:1240px; margin:40px auto }
.process-header { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:28px }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.process-step { background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); padding:22px; border-radius:16px; text-align:center }
.step-icon { width:56px; height:56px; border-radius:12px; margin:0 auto 12px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:#081014; font-weight:800; box-shadow:0 12px 28px rgba(122,212,159,0.08) }

/* Footer link color variance */
.footer-col a { display:block; margin-bottom:0.85rem; color:var(--muted); text-decoration:none }
.footer-col a:hover { color:var(--accent-2) }

.hero { min-height:calc(100vh - 110px); display:grid; grid-template-columns:1.1fr 0.9fr; gap:3rem; align-items:center; padding:4rem 32px 3rem; max-width:1240px; margin:0 auto }
.hero-content { max-width:640px }
.hero-content { max-width:640px }
.hero-visual { display: grid; gap: 3rem; justify-items: center; }
.tag { color:var(--accent); font-size:0.85rem; letter-spacing:0.16em; font-weight:700; margin-bottom:1rem }
h1,h2,h3,h4,h5,h6 { font-family: "Neofolia", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color:var(--text); margin:0 }
h1 { font-size:clamp(3rem,5vw,5.2rem); line-height:0.98 }

.hero-text, .desc, .timeline, .features-header p, .materials-left p, .feature-card p, .product-card p, .footer-col p, .footer-note { color:var(--muted) }
.hero-text { font-size:1.05rem; line-height:1.8; max-width:520px; margin-top:1.4rem }
.hero-buttons { margin-top:2.2rem; display:flex; gap:1rem }
.timeline { margin-top:1.8rem; color:rgba(191,199,209,0.8); font-size:0.95rem }

.app-mockup, .plant-card { width:min(100%,380px); border-radius:32px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); box-shadow:0 30px 70px rgba(0,0,0,0.25) }
.app-mockup-link {
  display:block;
  color:inherit;
  text-decoration:none;
  transition:transform .25s, border-color .25s, background .25s, box-shadow .25s;
}

.app-mockup-link:hover {
  transform:translateY(-4px);
  border-color:rgba(122,212,159,0.3);
  background:rgba(255,255,255,0.055);
  box-shadow:0 34px 76px rgba(0,0,0,0.34);
}

.app-mockup-link:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px;
}

.app-mockup-header { display:flex; align-items:center; justify-content:space-between; padding:1.4rem 1.6rem; border-bottom:1px solid rgba(255,255,255,0.06); font-size:0.95rem }
.pill { padding:0.45rem 0.95rem; border-radius:999px; background:rgba(122,212,159,0.14); color:var(--accent); font-size:0.8rem; letter-spacing:0.08em }
.app-screen { padding:2.2rem 1.8rem 3rem; min-height:320px }
.app-screen h2 { font-size:1.8rem }

.plant-card { position:relative; padding:2.5rem; text-align:center }
.plant-glow { position:absolute; inset:0; background:radial-gradient(circle at 50% 30%, rgba(122,212,159,0.22), transparent 48%); pointer-events:none }
.plant-image {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 1.6rem;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(180deg,#d6f3e0 0%, #86c997 100%);
  box-shadow: inset 0 0 0 8px rgba(255,255,255,0.06), 0 24px 56px rgba(0,0,0,0.18);
}

.plant-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plant-card p { margin:0; font-size:0.98rem; color:rgba(245,245,245,0.85) }

.features, .materials, .gallery, .cta, .footer { padding:90px 32px }
.features { background:#050712 }
.features-header { max-width:900px; margin:0 auto; text-align:center }
.subtitle { color:var(--accent); font-size:0.85rem; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; margin-bottom:18px }
.features-header h2 { font-size:clamp(2.4rem,3.5vw,3.6rem); line-height:1.05 }
.features-header .desc { margin:1.2rem auto 0; max-width:560px }
.features-grid { display:grid; grid-template-columns:repeat(3,minmax(240px,1fr)); gap:26px; margin-top:3rem }
.feature-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:24px; padding:2.2rem; min-height:320px; position:relative }
.feature-card.gold::before { background:var(--accent) }
.feature-card.blue::before { background:#65a8c0 }
.feature-card.brown::before { background:#8c6b4c }

.materials { background: linear-gradient(180deg, rgba(12,16,26,0.96) 0%, rgba(7,10,16,0.98) 100%); border-radius:40px; margin:60px auto; max-width:1160px }
.materials-wrapper { display:grid; grid-template-columns:1.1fr 1fr; gap:72px; align-items:center; max-width:1160px; margin:0 auto }
.materials-left h2 { font-size:clamp(2.8rem,3.8vw,4.4rem); margin:0.8rem 0 1.2rem }
.materials-link { margin-top:24px }
.materials-right { display:grid; gap:24px }
.materials-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px }
.app-card, .info-card { border-radius:28px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); padding:2rem; min-height:280px }
.app-card-link {
  display:block;
  color:inherit;
  text-decoration:none;
  min-width:0;
  transition:transform .25s, border-color .25s, background .25s, box-shadow .25s;
}

.app-card-link:hover {
  transform:translateY(-3px);
  border-color:rgba(122,212,159,0.28);
  background:rgba(255,255,255,0.05);
  box-shadow:0 22px 46px rgba(0,0,0,0.2);
}

.info-card {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1rem;
}

.info-card h3 {
  font-size:1.45rem;
  line-height:1.12;
  overflow-wrap:anywhere;
}

.info-card p {
  margin:0;
  color:var(--muted);
  line-height:1.75;
}

.app-card-screen {
  height: 320px;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(122,212,159,0.12), rgba(255,255,255,0.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.app-card-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery { background:#070913 }
.gallery-header { display:flex; justify-content:space-between; align-items:center; gap:24px; max-width:1240px; margin:0 auto 2.2rem }
.gallery-header h2 { font-size:clamp(2.6rem,4vw,3.8rem); margin-top:6px }
.gallery-grid, .products-grid { display:grid; grid-template-columns:repeat(3,minmax(240px,1fr)); gap:24px; max-width:1240px; margin:0 auto }
.gallery-item { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:28px; padding:2rem; min-height:280px; display:flex; align-items:center; justify-content:center }
.product-card { display:grid; gap:8px }
.product-card h3 { font-size:1.4rem }
.product-card p { color:var(--muted); line-height:1.8 }
.price { display:inline-flex; padding:0.6rem 0.9rem; border-radius:999px; background:rgba(122,212,159,0.12); color:var(--accent); font-weight:700 }

.cta { background:rgba(255,255,255,0.03); text-align:center; border-radius:36px; max-width:980px; margin:0 auto 40px; padding:80px 32px }
.cta h2 { font-size:clamp(2.4rem,3.5vw,3.6rem); line-height:1.05 }
.cta p { max-width:620px; margin:1.4rem auto 0; color:var(--muted); font-size:1rem; line-height:1.8 }


.footer {
  background: linear-gradient(180deg, #13201F 0%, #070a11 100%);
  padding: 0 0 32px 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 40px;
  max-width: 1240px;
  margin: 0 auto 1.5rem;
  padding: 64px 32px 32px 32px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 1rem;
}
.footer-logo {
  width: 120px;
  height: 120px;
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 38%;
  background: #13201f;
  box-shadow: 0 0 0 1px rgba(122,212,159,0.12), 0 12px 28px rgba(0,0,0,0.24);
}
.footer-brand-name {
  font-family: "Neofolia", serif;
  font-size: 1.45rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}
.footer-desc {
  color: var(--muted);
  margin-bottom: 1.2rem;
}
.footer-social-row {
  display: flex;
  gap: 12px;
  margin-top: 0.5rem;
}
.footer-social svg {
  display: block;
  border-radius: 50%;
  transition: box-shadow 0.2s, transform 0.2s;
}
.footer-social:hover svg {
  box-shadow: 0 4px 16px #7ad49f44;
  transform: translateY(-2px) scale(1.08);
}
.footer-heading.gold {
  color: #e6c97b;
  font-family: "Neofolia", serif;
  font-size: 1.08rem;
  letter-spacing: 0.12em;
  margin-bottom: 1.1rem;
}
.footer-col a {
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 0.7rem;
  font-size: 1rem;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: var(--accent-2);
}
.footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #e6c97b;
  margin-right: 0.5em;
  vertical-align: -0.2em;
  font-size: 0;
}

.footer-icon svg {
  display: block;
}

.footer-icon::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
}

.footer-col:last-of-type a[href*="wa.me"] .footer-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5A11.9 11.9 0 0 0 12.1 0C5.5 0 .2 5.35.2 11.93c0 2.1.55 4.16 1.6 5.97L0 24l6.25-1.64a11.9 11.9 0 0 0 5.83 1.49h.01c6.58 0 11.93-5.35 11.93-11.93 0-3.19-1.25-6.18-3.52-8.42Zm-8.41 18.33a9.9 9.9 0 0 1-5.06-1.38l-.36-.21-3.71.97.99-3.62-.23-.37a9.86 9.86 0 0 1-1.51-5.29c0-5.45 4.43-9.89 9.88-9.89 2.64 0 5.12 1.03 6.99 2.9a9.82 9.82 0 0 1 2.9 6.99c0 5.45-4.44 9.9-9.89 9.9Zm5.42-7.4c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.48.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2.01-1.41.25-.69.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5A11.9 11.9 0 0 0 12.1 0C5.5 0 .2 5.35.2 11.93c0 2.1.55 4.16 1.6 5.97L0 24l6.25-1.64a11.9 11.9 0 0 0 5.83 1.49h.01c6.58 0 11.93-5.35 11.93-11.93 0-3.19-1.25-6.18-3.52-8.42Zm-8.41 18.33a9.9 9.9 0 0 1-5.06-1.38l-.36-.21-3.71.97.99-3.62-.23-.37a9.86 9.86 0 0 1-1.51-5.29c0-5.45 4.43-9.89 9.88-9.89 2.64 0 5.12 1.03 6.99 2.9a9.82 9.82 0 0 1 2.9 6.99c0 5.45-4.44 9.9-9.89 9.9Zm5.42-7.4c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.48.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2.01-1.41.25-.69.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.footer-col:last-of-type a[href^="mailto:"] .footer-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.75 5h16.5A1.75 1.75 0 0 1 22 6.75v10.5A1.75 1.75 0 0 1 20.25 19H3.75A1.75 1.75 0 0 1 2 17.25V6.75A1.75 1.75 0 0 1 3.75 5Zm.45 2.1 7.8 5.3 7.8-5.3a.5.5 0 0 0-.35-.1H4.55a.5.5 0 0 0-.35.1Zm15.8 1.83-7.44 5.05a1 1 0 0 1-1.12 0L4 8.93V17h16V8.93Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.75 5h16.5A1.75 1.75 0 0 1 22 6.75v10.5A1.75 1.75 0 0 1 20.25 19H3.75A1.75 1.75 0 0 1 2 17.25V6.75A1.75 1.75 0 0 1 3.75 5Zm.45 2.1 7.8 5.3 7.8-5.3a.5.5 0 0 0-.35-.1H4.55a.5.5 0 0 0-.35.1Zm15.8 1.83-7.44 5.05a1 1 0 0 1-1.12 0L4 8.93V17h16V8.93Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.footer-contact-note {
  color: var(--muted-dark);
  font-size: 0.97em;
  margin-top: 0.3em;
}
.footer-divider {
  border: none;
  border-top: 1px solid #22343a;
  margin: 0 auto 1.2rem auto;
  max-width: 1240px;
}
.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.footer-links {
  display: flex;
  gap: 1.5rem;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.98rem;
  transition: color 0.2s;
}
.footer-links a:hover {
  color: var(--accent-2);
}
.footer-copyright {
  color: rgba(245,245,245,0.65);
  font-size: 0.97rem;
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 48px 16px 24px 16px;
  }
  .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0 16px;
  }
}
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .topbar {
    margin: 10px 12px 0;
    padding: 18px;
    border-radius: 20px;
  }

  .brand-wrap {
    justify-content: center;
    min-width: 0;
  }

  .brand-name {
    font-size: 1rem;
    overflow-wrap: anywhere;
  }

  .site-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
  }

  .site-nav a {
    font-size: 0.82rem;
  }

  .nav-cta,
  .gold-btn,
  .whatsapp,
  .view-gallery,
  .materials-link,
  .visit-shop-link {
    width: 100%;
    min-height: 44px;
    text-align: center;
  }

  .select-wrap,
  #countrySelect {
    width: 100%;
  }

  .hero {
    min-height: auto;
    padding: 3rem 20px 2.5rem;
    gap: 2rem;
  }

  .hero h1 {
    font-size: 2.8rem;
  }

  .hero-buttons,
  .process-header,
  .gallery-header {
    flex-direction: column;
    align-items: stretch;
  }

  .process,
  .features,
  .materials,
  .gallery,
  .cta {
    padding-left: 20px;
    padding-right: 20px;
  }

  .process-grid,
  .materials-wrapper,
  .materials-grid {
    grid-template-columns: 1fr;
  }

  .materials {
    margin: 36px 12px;
    border-radius: 28px;
  }

  .app-card,
  .info-card,
  .feature-card,
  .gallery-item,
  .cta {
    padding: 1.5rem;
  }

  .app-card-screen {
    height: 260px;
  }

  .app-screen {
    min-height: 260px;
    padding: 1.6rem 1.3rem 2.2rem;
  }

  .plant-card {
    padding: 1.8rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 20px 24px;
  }

  .footer-logo-row {
    align-items: center;
    gap: 16px;
  }

  .footer-logo {
    width: 108px;
    height: 108px;
  }

  .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0 20px;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 0.8rem;
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 8px 16px 8px;
  }
  .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0 8px;
  }
  .footer-links {
    flex-wrap: wrap;
    gap: 0.8rem;
  }
}

/* Buy button styling -- match green CTA theme */
.buy-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:10px 18px;
  font-weight:700;
  background:linear-gradient(135deg, #7ad49f, #3ca66e);
  color:#081014;
  border:none;
  cursor:pointer;
  transition:transform 0.25s, box-shadow 0.25s;
  box-shadow:0 12px 24px rgba(122,212,159,0.15);
}

.buy-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(122,212,159,0.2);
}

.buy-btn:active {
  transform:translateY(0);
}

/* Modal logo button hover effects */
.modal-logo-btn:hover {
  transform:scale(1.1);
  box-shadow:0 12px 24px rgba(0,0,0,0.3) !important;
}

.modal-logo-btn:active {
  transform:scale(0.95);
}

@media (max-width:1080px) { .features-grid, .gallery-grid, .products-grid, .footer-grid, .materials-grid, .hero { grid-template-columns:1fr } .topbar { flex-direction:column; align-items:stretch } }
@media (max-width:768px) { .topbar { padding:18px 20px } .hero { padding:3rem 20px 2rem } .hero h1 { font-size:2.8rem } .hero-buttons { flex-direction:column } .hero-visual, .materials-right, .footer-grid { width:100% } .footer-grid { grid-template-columns:1fr } }