*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; color: #111827; background: #0b3d2e; }
:root{
  --brand:#7bd23c;
  --brand-2:#b4f55a;
  --dark:#0b3d2e;
  --card:#132f25;
  --muted:#94a3b8;
  --white:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:18px;
}
a{ color: inherit; text-decoration: none; }
.container{ width: min(1200px, 92%); margin-inline: auto; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.2rem; border-radius: 16px; font-weight:700; cursor:pointer; border:0; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.btn:active{ transform: translateY(1px); }
.btn--primary{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b2a1f; box-shadow: var(--shadow); }
.btn--ghost{ background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.15); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.layout{ display:grid; grid-template-columns: 72px 1fr; min-height: 100dvh; }
.sidebar{ background: #0d2f25; color:#e2e8f0; padding:10px 0; position:sticky; top:0; height:100dvh; }
.brand-mini{ display:grid; place-items:center; height:64px; }
.brand-mini .logo{ width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#9df15f,#58cc2e); display:grid; place-items:center; color:#0b2a1f; }
.nav-vert{ display:flex; flex-direction:column; gap:14px; align-items:center; margin-top:10px; }
.nav-vert a{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background: rgba(255,255,255,.06); transition: background .2s ease, transform .15s ease; }
.nav-vert a:hover{ background: rgba(255,255,255,.12); transform: translateY(-2px); }
header{ position: sticky; top:0; z-index: 20; background: linear-gradient(180deg, rgba(11,61,46,.9), rgba(11,61,46,.6)); backdrop-filter: blur(8px); }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.logo-wrap{ display:flex; align-items:center; gap:12px; color:#eafff3; font-weight:800; letter-spacing:.3px; }
.logo{ width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#b7ff72,#6cdc37); display:grid; place-items:center; color:#0c2d23; font-weight:900; box-shadow: var(--shadow); }
.search{ display:flex; align-items:center; background: rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); padding:8px 10px; border-radius:14px; flex: 0 1 380px; gap:8px; }
.search input{ width:100%; outline:0; border:0; background:transparent; color:#e5ffe9; font-size:14px; }
.search svg{ opacity:.7; }
.auth{ display:flex; align-items:center; gap:10px; }
.hero{ position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:-10% -10% auto -10%; height:120%; background: radial-gradient(1200px 600px at 60% 40%, #18513f 0%, transparent 60%); pointer-events:none; }
.hero-wrap{ display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center; padding: 34px 0 40px; }
.title{ color:#d9ffde; font-size: clamp(34px, 4vw, 56px); line-height:1.06; font-weight: 900; letter-spacing:.2px; margin: 10px 0 12px; }
.subtitle{ font-size: clamp(18px, 2.3vw, 26px); color:#d6ffe0; font-weight:800; margin: 10px 0; }
.lead{ color:#c7f7cf; font-size: clamp(18px, 2vw, 22px); margin: 12px 0 26px; }
.cta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.fruit-wrap{ position:relative; height: 520px; }
.fruit{ position:absolute; width: 280px; aspect-ratio:1; border-radius: 50%; display:flex; align-items:center; justify-content:center; text-align:center; color:#0e291e; font-weight:900; box-shadow: var(--shadow); filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); animation: float 6s ease-in-out infinite; }
.fruit small{ display:block; font-weight:700; opacity:.85; letter-spacing:.5px; }
.fruit .big{ display:block; font-size:56px; line-height:.9; margin: 4px 0; }
.fruit--gold{ background: radial-gradient(circle at 35% 30%, #ffe39a, #ffb43a 58%, #d97b00); }
.fruit--green{ background: radial-gradient(circle at 35% 30%, #caff7c, #78da32 58%, #3a8b10); }
.fruit--red{ background: radial-gradient(circle at 35% 30%, #ffbaa8, #ff594d 58%, #b10d15); color:#3b0a0d; }
.fruit--gold{ left: 16%; top: 6%; animation-delay: .2s; }
.fruit--green{ left: -4%; bottom: 10%; animation-delay: .6s; }
.fruit--red{ right: 4%; top: 26%; animation-delay: .1s; }
@keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }
.cookie{ position: fixed; left:50%; transform:translateX(-50%); bottom:18px; background: rgba(12, 44, 34, .96); color:#e4fff0; border:1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 12px 14px; display:flex; align-items:center; gap:12px; box-shadow: var(--shadow); max-width: min(920px, 94%); z-index: 40; }
.cookie button{ white-space:nowrap; }
.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin: 22px 0 60px; }
.card{ background: var(--card); color:#e3fff0; padding:18px; border-radius: var(--radius); border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); }
.card h3{ margin:2px 0 8px; }
.muted{ color:#a2b3c2; }
.content-block{ padding: 10px 0 60px; }
.content-block h1{ color: #eafff3; margin: 0 0 8px; font-size: clamp(28px, 3.4vw, 40px); }
.content-block h2{ color: #d9ffde; margin: 12px 0 8px; font-size: clamp(20px, 2.6vw, 28px); }
.content-block h3{ color: #caffd8; margin: 18px 0 8px; font-size: clamp(18px, 2.2vw, 22px); }
.content-block p{ color: #cfeee0; line-height: 1.7; }
.content-block ul{ color:#cfeee0; line-height:1.7; padding-left: 1.2rem; }
footer{ border-top:1px solid rgba(255,255,255,.1); color:#a7c5b3; padding:28px 0 40px; background: #0a3327; }
@media (max-width: 1024px) {
  .hero-wrap{ grid-template-columns: 1fr; }
  .fruit-wrap{ height: 420px; }
  .fruit{ width: 220px; }
  .fruit--gold{ left: 4%; top: 6%; }
  .fruit--green{ left: -2%; bottom: 2%; }
  .fruit--red{ right: -2%; top: 24%; }
}
@media (max-width: 820px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ position: fixed; inset:auto 0 0 0; height:62px; display:flex; align-items:center; }
  .brand-mini{ display:none; }
  .nav-vert{ flex-direction:row; justify-content:center; gap:10px; width: 100%; }
  .nav-vert a{ width:46px; height:46px; border-radius: 14px; }
}
@media (max-width: 520px){
  .cards{ grid-template-columns: 1fr; }
  .search{ display:none; }
}