/* kinelune.org — Technological / Natural palette */
:root {
  --primary: #558B2F;
  --secondary: #AED581;
  --accent: #FF7043;
  --neutral: #F1F8E9;
  --ink: #1B5E20;
}

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

body {
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  background: var(--neutral);
}

h1, h2, h3, h4, .display {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.01em;
}

/* Tech gradients + metallic accents */
.grad-primary {
  background: linear-gradient(125deg, #1B5E20 0%, #558B2F 55%, #7CB342 100%);
}
.grad-accent {
  background: linear-gradient(120deg, #FF7043 0%, #FF8A65 100%);
}
.grad-mesh {
  background:
    radial-gradient(circle at 12% 18%, rgba(174,213,129,0.55), transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(255,112,67,0.30), transparent 38%),
    radial-gradient(circle at 70% 92%, rgba(85,139,47,0.35), transparent 45%),
    #F1F8E9;
}
.metallic {
  background: linear-gradient(135deg, #e9f2da 0%, #cfe0b4 30%, #ffffff 50%, #cfe0b4 70%, #e9f2da 100%);
}

/* Sharp geometric edges */
.clip-slant { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.clip-slant-up { clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
.clip-corner { clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.clip-tag { clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%); }

/* Interactive micro-animations */
.lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(27,94,32,.45); }

.btn-accent {
  background: linear-gradient(120deg, #FF7043, #F4511E);
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 10px 26px -10px rgba(244,81,30,.7);
}
.btn-accent:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.05); }
.btn-accent:focus-visible { outline: 3px solid #1B5E20; outline-offset: 2px; }

.btn-ghost {
  border: 2px solid var(--primary);
  color: var(--ink);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn-ghost:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }

.field {
  border: 2px solid #d6e6bf;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,112,67,.18); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Tabs */
.tab-btn { transition: all .2s ease; border-bottom: 3px solid transparent; }
.tab-btn[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel[hidden] { display: none; }

/* FAQ accordion */
.faq-item .faq-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item.open .faq-body { max-height: 600px; }
.faq-item .faq-icon { transition: transform .3s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* Cookie modal */
.cc-hidden { display: none !important; }

/* Animated counter underline */
.count-card { position: relative; overflow: hidden; }
.count-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}