:root {
    --sp-green: #1b4d2e;
    --sp-green-deep: #113420;
    --sp-leaf: #6fbf5e;
    --sp-cream: #f7f1dc;
    --sp-cream-2: #fdf8e9;
    --sp-clay: #d97a4e;
    --sp-gold: #e8b04b;
    --sp-sky: #bfe3f2;
}

/* Hero */
.sp-hero {
    position: relative;
    min-height: 660px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 78px 0 88px;
    background: linear-gradient(150deg, #fbf6e6 0%, #f2f2df 48%, #e2eedb 100%);
    border-bottom: 1px solid var(--border);
}
body.dark-mode .sp-hero { background: linear-gradient(150deg, #0f1712 0%, #111a13 48%, #16241a 100%); }
.sp-hero-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.sp-hero-orb-one { width: 380px; height: 380px; top: -180px; right: -90px; background: color-mix(in srgb, var(--sp-leaf) 30%, transparent); filter: blur(2px); }
.sp-hero-orb-two { width: 300px; height: 300px; bottom: -200px; left: 6%; border: 1px solid color-mix(in srgb, var(--sp-green) 22%, transparent); }
.sp-hero-orb-three { width: 130px; height: 130px; top: 16%; left: -60px; background: color-mix(in srgb, var(--sp-gold) 24%, transparent); filter: blur(3px); }
.sp-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: clamp(40px, 6vw, 84px); }
.sp-hero-copy { max-width: 580px; }
.sp-back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; color: #4e6154; font-size: 11px; font-weight: 750; }
body.dark-mode .sp-back-link { color: var(--text-2); }
.sp-app-icon { width: 78px; height: 78px; margin-bottom: 22px; border-radius: 19px; box-shadow: 0 16px 36px rgba(20, 55, 34, .2); }
.sp-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.sp-tags span, .sp-pill { display: inline-flex; padding: 5px 10px; border: 1px solid rgba(27, 77, 46, .2); border-radius: 999px; color: var(--sp-green); background: rgba(255, 255, 255, .45); font-size: 9px; font-weight: 800; }
body.dark-mode .sp-tags span, body.dark-mode .sp-pill { color: #b3dcbc; border-color: rgba(179, 220, 188, .25); background: rgba(0, 0, 0, .2); }
.sp-hero h1 { max-width: 600px; margin-bottom: 22px; color: var(--sp-green-deep); font-size: clamp(42px, 4.6vw, 60px); font-weight: 850; line-height: 1; letter-spacing: -.055em; }
body.dark-mode .sp-hero h1 { color: #eef7ee; }
.sp-hero-copy > p { max-width: 540px; color: #4c5a50; font-size: 14px; line-height: 1.75; }
body.dark-mode .sp-hero-copy > p { color: #adbcb1; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.sp-btn-primary { color: #fff; background: var(--sp-green); border-color: var(--sp-green); }
.sp-btn-primary:hover { background: var(--sp-green-deep); border-color: var(--sp-green-deep); }
.sp-btn-secondary { color: var(--sp-green); border-color: rgba(27, 77, 46, .25); background: rgba(255, 255, 255, .5); }
body.dark-mode .sp-btn-secondary { color: #d5ecd9; border-color: rgba(213, 236, 217, .2); background: rgba(0, 0, 0, .18); }
.sp-btn-light { color: var(--sp-green-deep); border-color: #fff; background: #fff; white-space: nowrap; }

.sp-hero-visual { position: relative; min-height: 470px; display: grid; place-items: center; }
.sp-hero-shot { width: min(72%, 258px); height: auto; border-radius: 15px; box-shadow: 0 34px 84px rgba(27, 77, 46, .26); transform: rotate(2deg); }
body.dark-mode .sp-hero-shot { box-shadow: 0 34px 84px rgba(0, 0, 0, .58); }
.sp-note { position: absolute; z-index: 2; min-width: 168px; display: grid; grid-template-columns: 12px 1fr; column-gap: 8px; padding: 13px 15px; border: 1px solid rgba(27, 77, 46, .13); border-radius: 12px; background: rgba(255, 254, 249, .95); box-shadow: 0 18px 44px rgba(27, 77, 46, .18); }
.sp-note > span { grid-row: 1 / 3; align-self: center; color: var(--sp-clay); font-size: 10px; }
.sp-note strong { color: var(--sp-green-deep); font-size: 11px; line-height: 1.2; }
.sp-note small { color: #7a827a; font-size: 8px; }
body.dark-mode .sp-note { border-color: #2c382f; background: rgba(15, 21, 17, .95); }
body.dark-mode .sp-note strong { color: #eaf3eb; }
.sp-note-day { left: -6px; top: 74px; transform: rotate(-2deg); }
.sp-note-offline { right: -6px; bottom: 72px; transform: rotate(1.5deg); }

/* Sections */
.sp-section { padding: 86px 0; }
.sp-section-heading { max-width: 700px; margin-bottom: 42px; }
.sp-kicker { display: inline-block; margin-bottom: 12px; color: var(--sp-green); font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
body.dark-mode .sp-kicker { color: #85c393; }
.sp-section-heading h2, .sp-shots-header h2, .sp-cta h2 { font-size: clamp(32px, 4.3vw, 52px); line-height: 1.04; letter-spacing: -.045em; }
.sp-section-heading p { max-width: 600px; margin-top: 16px; color: var(--text-2); font-size: 14px; line-height: 1.7; }

/* Loop */
.sp-loop-section { background: var(--bg); }
.sp-loop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sp-loop-card { min-height: 280px; display: flex; flex-direction: column; align-items: flex-start; padding: 25px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-2); }
.sp-loop-card.sp-loop-lead { color: #fff; border-color: var(--sp-green); background: var(--sp-green); }
.sp-loop-index { align-self: flex-end; color: var(--text-3); font-size: 9px; }
.sp-loop-lead .sp-loop-index { color: rgba(255, 255, 255, .55); }
.sp-loop-mark { width: 46px; height: 46px; display: grid; place-items: center; margin: 9px 0 24px; border: 1px solid var(--border-strong); border-radius: 50%; font-size: 18px; line-height: 1; }
.sp-loop-lead .sp-loop-mark { border-color: rgba(255, 255, 255, .35); }
.sp-loop-card h3 { margin-bottom: 9px; font-size: 20px; letter-spacing: -.025em; }
.sp-loop-card p { color: var(--text-2); font-size: 12px; line-height: 1.65; }
.sp-loop-lead p { color: rgba(255, 255, 255, .78); }

/* Screens */
.sp-shots-section { overflow: hidden; background: var(--sp-cream); }
body.dark-mode .sp-shots-section { background: #101710; }
.sp-shots-header { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 48px; }
.sp-shots-header > p { color: #5a625a; font-size: 13px; line-height: 1.7; }
body.dark-mode .sp-shots-header > p { color: var(--text-2); }
.sp-shots-header .sp-pill { margin-bottom: 14px; }
.sp-shot-grid { display: grid; grid-template-columns: repeat(5, minmax(215px, 1fr)); gap: 16px; margin-top: 34px; padding: 6px 4px 24px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-color: color-mix(in srgb, var(--sp-green) 38%, transparent) transparent; }
.sp-shot { min-width: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 14px 32px rgba(58, 62, 46, .13); scroll-snap-align: start; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sp-shot:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(58, 62, 46, .2); }
.sp-shot img { width: 100%; height: auto; }

/* Deck */
.sp-deck-section { background: var(--bg); }
.sp-deck-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: clamp(36px, 5vw, 70px); }
.sp-deck-stat { margin-top: 26px; padding: 20px 22px; border: 1px solid var(--border); border-left: 3px solid var(--sp-gold); border-radius: 12px; background: var(--bg-2); }
.sp-deck-stat strong { display: block; font-size: 34px; line-height: 1; letter-spacing: -.04em; }
.sp-deck-stat span { display: block; margin-top: 8px; color: var(--text-2); font-size: 11px; line-height: 1.6; }
.sp-deck-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sp-deck-card { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-2); }
.sp-deck-card h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; font-size: 13px; letter-spacing: -.02em; }
.sp-deck-card h3 i { width: 8px; height: 8px; flex: none; border-radius: 50%; font-style: normal; }
.sp-deck-card ul { display: flex; flex-wrap: wrap; gap: 5px; }
.sp-deck-card li { display: inline-flex; padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); font-size: 9px; font-weight: 650; }
.sp-dot-water { background: #4f9cd8; }
.sp-dot-sun { background: var(--sp-gold); }
.sp-dot-nutrient { background: #a3703f; }
.sp-dot-pest { background: #d95757; }
.sp-dot-weed { background: var(--sp-leaf); }
.sp-dot-rare { background: #c07bd0; }

/* Collect */
.sp-collect-section { background: var(--bg-2); border-block: 1px solid var(--border); }
.sp-species-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 12px; }
.sp-species { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 22px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); text-align: center; transition: transform .3s var(--ease), border-color .3s ease; }
.sp-species:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sp-leaf) 60%, var(--border)); }
.sp-species span { font-size: 26px; line-height: 1; }
.sp-species strong { font-size: 11px; }
.sp-species small { color: var(--text-3); font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sp-custom-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sp-custom { padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.sp-custom strong { display: block; margin-bottom: 8px; font-size: 14px; }
.sp-custom p { color: var(--text-2); font-size: 11px; line-height: 1.6; }

/* Quiet by design */
.sp-quiet-section { background: var(--bg); }
.sp-quiet-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.sp-quiet-grid > div { min-height: 158px; padding: 25px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sp-quiet-grid strong, .sp-quiet-grid span { display: block; }
.sp-quiet-grid strong { margin-bottom: 9px; font-size: 14px; }
.sp-quiet-grid span { color: var(--text-2); font-size: 11px; line-height: 1.6; }

/* Closing CTA */
.sp-cta { padding: 72px 0; color: #fff; background: var(--sp-green-deep); }
.sp-cta-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }
.sp-cta .sp-kicker { color: #a3ccae; }
.sp-cta h2 { max-width: 700px; }
.sp-cta p { max-width: 560px; margin-top: 13px; color: rgba(255, 255, 255, .68); font-size: 13px; line-height: 1.7; }

@media (max-width: 900px) {
    .sp-hero-grid { grid-template-columns: 1fr .9fr; gap: 34px; }
    .sp-hero h1 { font-size: clamp(40px, 6vw, 56px); }
    .sp-hero-visual { min-height: 400px; }
    .sp-hero-shot { width: min(86%, 260px); }
    .sp-note-day { left: -6px; }
    .sp-note-offline { right: -6px; }
    .sp-deck-layout { grid-template-columns: 1fr; }
    .sp-species-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
    .sp-hero { min-height: 0; padding: 48px 0 68px; }
    .sp-hero-grid { grid-template-columns: 1fr; }
    .sp-hero-visual { min-height: 420px; margin-top: 6px; }
    .sp-hero-shot { width: min(70%, 280px); }
    .sp-note-day { left: 2%; top: 40px; }
    .sp-note-offline { right: 1%; bottom: 40px; }
    .sp-section { padding: 62px 0; }
    .sp-loop-grid { grid-template-columns: 1fr; }
    .sp-loop-card { min-height: 0; }
    .sp-shots-header { grid-template-columns: 1fr; gap: 16px; }
    .sp-deck-grid { grid-template-columns: 1fr; }
    .sp-custom-row { grid-template-columns: 1fr; }
    .sp-quiet-grid { grid-template-columns: repeat(2, 1fr); }
    .sp-cta-inner { grid-template-columns: 1fr; gap: 28px; }
    .sp-cta-inner .btn { justify-self: start; }
}

@media (max-width: 470px) {
    .sp-hero h1 { font-size: 42px; }
    .sp-actions .btn { width: 100%; }
    .sp-hero-visual { min-height: 340px; }
    .sp-hero-shot { width: 62%; }
    .sp-note { min-width: 144px; padding: 10px 12px; }
    .sp-shot-grid { grid-template-columns: repeat(5, minmax(72vw, 1fr)); margin-right: -14px; }
    .sp-species-row { grid-template-columns: repeat(2, 1fr); }
    .sp-quiet-grid { grid-template-columns: 1fr; }
}