:root {
  color-scheme: light;
  --cream: #fffaf0;
  --yellow: #fff0a6;
  --orange: #ffb45b;
  --green: #d9efb5;
  --brown: #55382f;
  --muted: #8d7165;
  --line: rgba(85, 56, 47, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--brown);
  background:
    radial-gradient(circle at 85% 10%, rgba(217, 239, 181, 0.72), transparent 25rem),
    radial-gradient(circle at 8% 28%, rgba(255, 180, 91, 0.23), transparent 23rem),
    var(--cream);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  padding: 104px 9% 86px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 42px 42px;
  background: linear-gradient(135deg, rgba(255, 240, 166, 0.96), rgba(255, 249, 219, 0.94));
  box-shadow: 0 22px 60px rgba(112, 74, 40, 0.09);
}

.eyebrow, .section-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #c46a35;
}

h1 { margin: 18px 0 14px; font-size: clamp(58px, 10vw, 112px); line-height: 0.96; letter-spacing: -0.07em; }
.lead { max-width: 620px; margin: 0; color: #76564a; font-size: clamp(18px, 2.4vw, 25px); line-height: 1.8; }

.fries { position: absolute; right: 8%; bottom: 68px; width: 190px; height: 180px; transform: rotate(5deg); }
.fries::after { content: ""; position: absolute; inset: 54px 18px 0; border-radius: 18px 18px 36px 36px; background: #ec5f45; box-shadow: inset 0 -14px rgba(151, 54, 42, 0.12), 0 18px 24px rgba(85, 56, 47, 0.14); }
.fries span { position: absolute; bottom: 95px; z-index: 1; width: 22px; height: 88px; border-radius: 8px 8px 3px 3px; background: linear-gradient(90deg, #ffc442, #ffe76d); transform-origin: bottom; }
.fries span:nth-child(1) { left: 35px; transform: rotate(-12deg); }
.fries span:nth-child(2) { left: 65px; height: 112px; transform: rotate(-4deg); }
.fries span:nth-child(3) { left: 94px; height: 122px; transform: rotate(2deg); }
.fries span:nth-child(4) { left: 123px; height: 105px; transform: rotate(9deg); }
.fries span:nth-child(5) { left: 146px; height: 78px; transform: rotate(15deg); }

.intro { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; align-items: end; padding: 94px 20px 42px; }
.intro h2 { margin: 8px 0 0; font-size: clamp(30px, 4vw, 46px); }
.intro > p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.9; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { position: relative; min-height: 330px; padding: 30px; border: 1px solid var(--line); border-radius: 30px; box-shadow: 0 14px 30px rgba(85, 56, 47, 0.06); }
.card-yellow { background: #fff3b0; }
.card-orange { background: #ffd2a0; }
.card-green { background: var(--green); }
.card-index { position: absolute; top: 24px; right: 27px; color: rgba(85, 56, 47, 0.42); font-weight: 800; }
.card-icon { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 44px; border-radius: 22px; background: rgba(255, 255, 255, 0.6); font-size: 34px; }
.card h2 { margin: 0 0 14px; font-size: 26px; }
.card p { margin: 0 0 28px; color: #76564a; line-height: 1.8; }
.tag { display: inline-flex; padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.58); font-size: 13px; font-weight: 700; }

.quote { margin: 70px 0 90px; padding: 54px; border: 1px solid var(--line); border-radius: 32px; text-align: center; background: rgba(255, 255, 255, 0.58); }
.quote p { margin: 0 0 12px; font-size: clamp(25px, 4vw, 42px); font-weight: 800; }
.quote span { color: var(--muted); }

footer { display: flex; justify-content: space-between; gap: 18px; width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 42px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer a { color: var(--brown); text-decoration: none; }
footer a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  main, footer { width: min(100% - 24px, 1120px); }
  .hero { min-height: 560px; padding: 76px 28px 260px; border-radius: 0 0 30px 30px; }
  .fries { right: calc(50% - 95px); bottom: 42px; }
  .intro { grid-template-columns: 1fr; gap: 20px; padding: 64px 8px 30px; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 290px; }
  .quote { margin: 48px 0 64px; padding: 38px 24px; }
  footer { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform 180ms ease, box-shadow 180ms ease; }
  .card:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgba(85, 56, 47, 0.1); }
}