/* Home page */
.hero { position: relative; padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle, rgba(246,226,174,.7) 0%, rgba(244,243,237,0) 62%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero h1 { margin: 22px 0 26px; font-size: clamp(2.7rem, 1.4rem + 3.8vw, 4.5rem); }
.hero .ctas { margin-top: 34px; }
.hero-meta { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--muted); }
.hero-meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta svg { width: 15px; height: 15px; color: var(--positive); flex: none; }
.hero-art { margin: 0; }
.hero-art svg { display: block; width: 100%; height: auto; }

/* shapes matrix */
.shape { position: relative; padding: 30px 26px 28px; background: var(--paper); text-decoration: none; display: flex; flex-direction: column; gap: 4px; min-height: 300px; transition: background var(--duration-ui); }
.shape:hover { background: var(--paper-bright); }
.shape:hover .ico { background: var(--accent); }
.shape-ref { color: var(--positive); font-size: .7rem; }
.shape .ico { margin: 18px 0 16px; }
.shape h3 { font-size: 1.3rem; margin-bottom: 12px; letter-spacing: -.015em; }
.shape .pair { margin-top: auto; }
.shape .pair p { font-size: .88rem; line-height: 1.5; }
.shape .pair > div { grid-template-columns: 62px 1fr; }
.shape .badge { justify-content: center; }

/* soil */
.soil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.soil-art { width: 100%; height: auto; display: block; }

/* scale */
.scale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; position: relative; }
.scale::before { content: ""; position: absolute; left: 4%; right: 4%; top: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--sage) 0 8px, transparent 8px 14px); }
.scale li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0 4px; min-width: 0; }
.scale-ico { width: 68px; height: 68px; border-radius: 50%; background: var(--paper-bright); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); margin-bottom: 12px; position: relative; }
.scale li:nth-child(1) .scale-ico { background: var(--signal-soft); }
.scale li:nth-child(2) .scale-ico { background: var(--accent); }
.scale li:nth-child(3) .scale-ico { background: var(--mist); }
.scale li:nth-child(5) .scale-ico { background: var(--ink); color: var(--accent); }
.scale-ico svg { width: 30px; height: 30px; }
.scale .mono { color: var(--positive); font-size: .7rem; }
.scale h3 { font-size: 1.2rem; letter-spacing: -.015em; }
.scale p { color: var(--muted); font-size: .92rem; }
.scale .badge { align-self: flex-start; margin-top: 6px; white-space: normal; }

/* duo */
.card-big { padding: clamp(28px, 4vw, 44px); gap: 16px; }
.card-big p { font-size: 1rem; }
.h-mid { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); letter-spacing: -.03em; }
.card-sun { background: var(--signal-soft); border-color: #ecd391; }
.card-sun p { color: #5b4a22; }
.card-sun .eyebrow { color: #8a6514; }
.receipt { border: 1px dashed var(--line); border-radius: 14px; padding: 6px 18px; background: var(--paper); margin: 8px 0 4px; }
.r-head { display: flex; justify-content: space-between; color: var(--muted); padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .68rem; }
.r-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: .93rem; flex-wrap: wrap; }
.r-row:last-child { border-bottom: 0; }
.r-row .mono { text-transform: none; letter-spacing: .02em; font-size: .85rem; }
.r-ok { color: #2f6b45; font-weight: 600; }
.mini-list { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 12px; }
.mini-list li { display: flex; gap: 12px; align-items: center; font-size: .95rem; color: #5b4a22; flex-wrap: wrap; }

/* tiles */
.tile { border-radius: var(--radius-lg); padding: 34px 30px; min-height: 320px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; transition: transform var(--duration-ui) var(--ease-out); }
.tile:hover { transform: translateY(-3px); }
.tile h3 { font-size: 1.6rem; letter-spacing: -.025em; max-width: 14ch; }
.tile p { font-size: .97rem; }
.tile .btn { margin-top: auto; align-self: flex-start; }
.tile-sun { background: var(--signal-soft); } .tile-sun p { color: #5b4a22; } .tile-sun .eyebrow { color: #8a6514; }
.tile-leaf { background: var(--paper-bright); border: 1px solid var(--line); } .tile-leaf p { color: var(--muted); }
.tile-night { background: var(--ink); color: var(--paper); } .tile-night p { color: var(--night-muted); } .tile-night .eyebrow { color: var(--accent); }

@media (max-width: 1080px) {
  .hero-grid, .soil { grid-template-columns: 1fr; }
  .hero-art { max-width: 640px; }
  .scale { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .scale::before { display: none; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tiles .tile:last-child { grid-column: 1 / -1; min-height: 240px; }
}
@media (max-width: 640px) {
  .scale, .tiles { grid-template-columns: 1fr; }
  .shape { min-height: 0; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.4rem); }
}
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } }