/* ================= Hero ================= */
.hero { position: relative; padding-top: var(--s-6); overflow: hidden; }
.hero-grid {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: var(--s-7); min-height: calc(100vh - var(--header-h) - 140px); }
}
.hero-copy { display: grid; gap: var(--s-5); justify-items: start; }
.hero-copy h1 {
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 12ch;
}
.hero-copy h1 em {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
.hero-copy .lead { font-size: clamp(0.98rem, 0.94rem + 0.18vw, 1.08rem); line-height: 1.65; color: var(--text-2); max-width: 44ch; }

/* Stage */
.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 440;
  max-height: 560px;
  border-radius: var(--r-xl);
  isolation: isolate;
}
.hero-stage .field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
}
.hero-stage .beam { animation: field-scan 5.5s var(--ease) infinite; }
.hero-stage .sprouts path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: grow 1.6s var(--ease) forwards; }
.hero-stage .sprouts path:nth-child(2) { animation-delay: 0.4s; }
.hero-stage .sprouts path:nth-child(3) { animation-delay: 0.8s; }
.hero-stage .sprouts path:nth-child(4) { animation-delay: 1.1s; }

.ai-orb.hero-orb {
  position: absolute;
  left: 50%;
  top: 38.6%;
  transform: translate(-50%, -50%);
  --size: clamp(150px, 22vw, 220px);
}

.insight {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  min-width: 190px;
  border-radius: 16px;
  background: var(--glass);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  animation: insight-in 700ms var(--ease) forwards, float 6s ease-in-out infinite;
}
.insight > div { display: grid; gap: 3px; }
.insight-icon {
  width: 34px; height: 34px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--grad);
  color: var(--on-brand);
}
.insight-icon .icon { width: 18px; height: 18px; stroke-width: 2; }
.insight-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.insight-line { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-sm); }
.insight-line .badge { padding: 1px 8px; font-size: 0.68rem; }
.insight-sub { font-size: var(--fs-xs); color: var(--text-2); }
.insight-soil { left: 0; top: 4%; animation-delay: 0.6s, 1.3s; }
.insight-leaf { right: 0; top: 46%; animation-delay: 1.6s, 2.3s; }
.insight-chat { left: 6%; bottom: 2%; animation-delay: 2.6s, 3.3s; max-width: 270px; }
.typed::after {
  content: '';
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 3px;
  background: var(--teal);
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}

@media (max-width: 979px) {
  .hero-stage { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .hero-stage { aspect-ratio: 1 / 1.08; }
  .ai-orb.hero-orb { --size: 136px; top: 47%; }
  .insight-soil { top: 0; }
  .insight { min-width: 0; padding: 9px 11px; gap: 9px; border-radius: 13px; }
  .insight-icon { width: 28px; height: 28px; border-radius: 8px; }
  .insight-icon .icon { width: 15px; height: 15px; }
  .insight-line { font-size: 0.78rem; }
  .insight-sub { font-size: 0.7rem; }
  .insight-leaf { top: auto; bottom: 22%; }
  .insight-chat { left: 0; bottom: 0; max-width: 230px; }
}

/* ================= Services ================= */
/* Bento: Soil (wide) + Crop side by side, Ask ParthAI full width below.
   Tablet keeps the same shape in two columns; phones stack the tiles. */
.service-list { display: grid; gap: var(--s-4); }
@media (min-width: 700px) {
  .service-list { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .service--ask { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .service-list { grid-template-columns: repeat(12, 1fr); }
  .service--soil { grid-column: span 7; }
  .service--crop { grid-column: span 5; }
  .service--ask { grid-column: 1 / -1; }
}
.service {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-2), 0 30px 80px -40px rgb(var(--teal-rgb) / 0.6); }
.service-art {
  position: relative;
  min-height: 230px;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background:
    radial-gradient(80% 70% at 50% 45%, rgb(var(--teal-rgb) / 0.14), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / 0.01), transparent);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 700px) { .service-art { min-height: 310px; } }
.service-art > svg { width: min(100%, 380px); height: auto; overflow: visible; }
/* Tile text: a title, one short line, three small chips and a button — kept light */
.service-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: var(--s-5);
}
.service-body > .btn { margin-top: auto; --btn-h: 40px; padding: 0 16px; font-size: var(--fs-sm); }
.service--soil .service-art > svg, .service--crop .service-art > svg { width: min(100%, 330px); }
.service-head { display: flex; align-items: center; gap: 12px; }
.service-head .icon-tile { width: 38px; height: 38px; border-radius: 11px; }
.service-head .icon-tile .icon { width: 19px; height: 19px; }
.service-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1.35rem + 0.8vw, 2rem); letter-spacing: -0.01em; line-height: 1.05; }
.service-lead { color: var(--text-2); font-size: var(--fs-sm); max-width: 44ch; }
.service-points { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.service-points li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-pill);
  background: rgb(var(--green-rgb) / 0.08);
  border: 1px solid rgb(var(--green-rgb) / 0.22);
  color: var(--text-2);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.3;
}
.service-points .icon { color: var(--green); width: 13px; height: 13px; stroke-width: 2.6; }

/* Ask ParthAI: a wide tile — a narrow column of words, most of the space for the animation */
.service--ask .service-art { min-height: 0; padding: var(--s-4); }
@media (min-width: 700px) {
  .service--ask { flex-direction: row; }
  .service--ask .service-body { order: -1; flex: 0 0 42%; justify-content: center; padding: var(--s-5); }
  .service--ask .service-body > .btn { margin-top: 4px; }
  .service--ask .service-art { flex: 1 1 auto; border-bottom: 0; border-left: 1px solid var(--line); }
}
@media (min-width: 1024px) { .service--ask .service-body { flex-basis: 34%; padding: var(--s-5) var(--s-6); } }

/* Soil art animation */
.art-soil .scan-beam, .art-soil .scan-line { animation: card-scan 4s var(--ease) infinite; }
.art-soil .val { transform-box: fill-box; transform-origin: left center; animation: val-in 4s var(--ease) infinite; }
.art-soil .v2 { animation-delay: 0.35s; }
.art-soil .v3 { animation-delay: 0.7s; }
.art-soil .v4 { animation-delay: 1.05s; }
.art-soil .v5 { animation-delay: 1.4s; }

/* Leaf art: a 10-second camera story.
   plant → focus on the sick leaf → photo → zoom in → scan → mark spots → 3 matches → zoom out */
.art-leaf { --loop: 10s; }
.art-leaf .screen-stop-top { stop-color: var(--art-screen-top); }
.art-leaf .screen-stop-bottom { stop-color: var(--art-screen-bottom); }
.art-leaf .soil-stop-top { stop-color: var(--art-soil-top); }
.art-leaf .soil-stop-deep { stop-color: var(--art-soil-deep); }
.art-leaf .screen-edge { fill: none; stroke: var(--art-card-line); stroke-width: 1.2; }
.art-leaf .stem { fill: none; stroke: var(--art-grass-dark); stroke-width: 3; stroke-linecap: round; }
.art-leaf .leaf-ok { fill: url(#leafOk); }
.art-leaf .rib { stroke: #e6f7da; stroke-opacity: 0.55; stroke-width: 1.1; fill: none; }
.art-leaf .veins { stroke: #e6f7da; stroke-opacity: 0.3; stroke-width: 0.8; fill: none; }
.art-leaf .blight { fill: #c79a2b; opacity: 0.35; }
.art-leaf .spots { fill: #7a4a17; }

.art-leaf .cam {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: cam-zoom var(--loop) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.art-leaf .focus {
  fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: focus-in var(--loop) var(--ease) infinite;
}
.art-leaf .tap {
  fill: rgb(var(--teal-rgb) / 0.18); stroke: var(--teal); stroke-width: 1.5; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: tap var(--loop) ease-out infinite;
}
.art-leaf .flash { fill: #fff; opacity: 0; animation: flash var(--loop) linear infinite; }
.art-leaf .beam, .art-leaf .beam-line { opacity: 0; animation: leaf-beam var(--loop) linear infinite; }
.art-leaf .beam-line { stroke: #9ff0a0; stroke-width: 1.5; }
.art-leaf .ring {
  fill: none; stroke: var(--deficient); stroke-width: 2.2;
  transform-box: fill-box; transform-origin: center; opacity: 0;
}
.art-leaf .k1 { animation: ring-1 var(--loop) var(--ease) infinite; }
.art-leaf .k2 { animation: ring-2 var(--loop) var(--ease) infinite; }
.art-leaf .k3 { animation: ring-3 var(--loop) var(--ease) infinite; }

.art-leaf .result { opacity: 0; animation: result-in var(--loop) var(--ease) infinite; }
.art-leaf .result-card { fill: var(--art-card); stroke: var(--art-card-line); filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.18)); }
.art-leaf .thumb { fill: #6fb04c; }
.art-leaf .thumb-spot { fill: #7a4a17; }
.art-leaf .track { fill: var(--art-track); }
.art-leaf .bar { fill: var(--teal); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.art-leaf .q1 .bar { fill: var(--green); animation: bar-1 var(--loop) var(--ease) infinite; }
.art-leaf .q2 .bar { animation: bar-2 var(--loop) var(--ease) infinite; }
.art-leaf .q3 .bar { animation: bar-3 var(--loop) var(--ease) infinite; }
.art-leaf .tick { transform-box: fill-box; transform-origin: center; opacity: 0; animation: tick var(--loop) var(--ease) infinite; }
.art-leaf .tick circle { fill: var(--green); }
.art-leaf .tick path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Ask art: same world as the soil card — a ParthAI chat card over the field.
   The farmer's voice note → ParthAI thinks → the answer lands → a tomato plant grows. 11s loop. */
.art-ask { --loop: 11s; }
/* The scene stays fully visible inside; the soft blend happens outside it:
   rounded corners plus a blurred glow in the scene's own colours that fades into the tile. */
.farm-frame { position: relative; width: min(100%, 420px); isolation: isolate; }
.farm-frame::before {
  content: '';
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 44px;
  background: linear-gradient(180deg, var(--farm-sky-bottom) 0%, var(--farm-sky-bottom) 45%, var(--farm-field-top) 70%, var(--farm-field-bottom) 100%);
  filter: blur(26px);
  opacity: 0.6;
}
.farm-frame > svg { display: block; width: 100%; height: auto; clip-path: inset(2px round 24px); }

/* Tomato farm behind the card (deep colours, fades into the tile) */
.art-ask .sky-top { stop-color: var(--farm-sky-top); }
.art-ask .sky-bottom { stop-color: var(--farm-sky-bottom); }
.art-ask .field-top { stop-color: var(--farm-field-top); }
.art-ask .field-bottom { stop-color: var(--farm-field-bottom); }
.art-ask .ask-cloud { fill: var(--farm-cloud); animation: cloud-drift 9s ease-in-out infinite alternate; }
.art-ask .ask-cloud.c2 { animation-duration: 7s; animation-direction: alternate-reverse; }
.art-ask .ask-rain { stroke: var(--farm-rain); animation: ask-rain 1.1s linear infinite; }
.art-ask .trees { fill: var(--farm-trees); }
.art-ask .trees.t2 { fill: var(--farm-trees-2); }
.art-ask .field-rows { stroke: var(--farm-row); }
.art-ask .row-fruit { fill: #d8362a; }
.art-ask .farm-path { fill: var(--farm-path); }
.art-ask .vine-stem { fill: none; stroke: #3c9a2f; stroke-width: 7; stroke-linecap: round; }
.art-ask .vleaf { fill: #2f8a2a; }
.art-ask .vleaf.l2 { fill: #4fb03a; }
.art-ask .stalk { stroke: #3c9a2f; stroke-width: 2.4; }
.art-ask .vine-l { transform-box: view-box; transform-origin: 0px 240px; animation: vine-sway 5s ease-in-out infinite alternate; }
.art-ask .vine-r { transform-box: view-box; transform-origin: 320px 240px; animation: vine-sway 5.6s ease-in-out infinite alternate-reverse; }
.art-ask .petal { fill: #ffd23a; }
.art-ask .pistil { fill: #f08a1c; }
.art-ask .flower-in { transform-box: fill-box; transform-origin: center; animation: bloom var(--loop) var(--ease) infinite; }
.art-ask .fruit-in { transform-box: fill-box; transform-origin: 50% 0%; animation: fruit-grow var(--loop) var(--ease) infinite; }
.art-ask .fruit { animation: ripen var(--loop) linear infinite; }
.art-ask .shine { fill: #fff; opacity: 0.45; }
.art-ask .calyx { fill: #2f8a3a; }
.art-ask .k2 * { animation-delay: 0.25s !important; }
.art-ask .k3 * { animation-delay: 0.5s !important; }
.art-ask .k4 * { animation-delay: 0.12s !important; }
.art-ask .k5 * { animation-delay: 0.37s !important; }
.art-ask .k6 * { animation-delay: 0.62s !important; }
.art-ask .ask-card { fill: var(--art-card); stroke: var(--art-card-line); }
:root[data-theme='light'] .art-ask .ask-card { filter: drop-shadow(0 10px 18px rgb(15 70 60 / 0.18)); }
.art-ask .ask-head { fill: var(--art-card-head); }
.art-ask .ask-title { fill: var(--art-title); }
.art-ask .ask-live { fill: var(--green); animation: pulse-glow 1.6s ease-in-out infinite; }
.art-ask .ask-bub { fill: rgb(var(--teal-rgb) / 0.07); stroke: var(--art-card-line); stroke-width: 0.8; }
.art-ask .vbar { fill: #fff; transform-box: fill-box; transform-origin: center; animation: vbar 0.9s ease-in-out infinite; }
.art-ask .vbar.b1 { animation-delay: 0.15s; } .art-ask .vbar.b2 { animation-delay: 0.3s; }
.art-ask .vbar.b3 { animation-delay: 0.45s; } .art-ask .vbar.b4 { animation-delay: 0.6s; }
.art-ask .tdot { fill: var(--teal); animation: bounce 1.2s ease-in-out infinite; }
.art-ask .tdot.d2 { animation-delay: 0.15s; } .art-ask .tdot.d3 { animation-delay: 0.3s; }
.art-ask .ask-line { fill: var(--art-track); transform-box: fill-box; transform-origin: left center; }
.art-ask .ask-line.l1 { fill: var(--art-ink); fill-opacity: 0.75; }
.art-ask .ask-tag rect:first-child { fill: rgb(var(--green-rgb) / 0.16); stroke: rgb(var(--green-rgb) / 0.5); stroke-width: 0.8; }
.art-ask .ask-tag .drop { fill: var(--blue); }
.art-ask .ask-tag .tag-bar { fill: var(--green); opacity: 0.8; }
.art-ask .spk { fill: var(--teal); }
.art-ask .spk-wave { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; animation: spk 1.2s ease-in-out infinite; }
.art-ask .spk-wave.w2 { animation-delay: 0.3s; }

/* The story, all on one clock */
.art-ask .ask-me { animation: ask-me var(--loop) var(--ease) infinite; }
.art-ask .ask-ai-logo { animation: ask-logo var(--loop) linear infinite; }
.art-ask .ask-typing { animation: ask-typing var(--loop) linear infinite; }
.art-ask .ask-answer { animation: ask-answer var(--loop) var(--ease) infinite; }
.art-ask .ask-tomato { transform-box: fill-box; transform-origin: center; animation: ask-pop var(--loop) var(--ease) infinite; }
.art-ask .ask-line.l1 { animation: ask-l1 var(--loop) var(--ease) infinite; }
.art-ask .ask-line.l2 { animation: ask-l2 var(--loop) var(--ease) infinite; }
.art-ask .ask-line.l3 { animation: ask-l3 var(--loop) var(--ease) infinite; }
.art-ask .ask-tag { animation: ask-tag var(--loop) var(--ease) infinite; }
.art-ask .ask-speaker { animation: ask-speaker var(--loop) linear infinite; }

.wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.wave i { width: 3px; border-radius: 2px; background: currentColor; height: 30%; animation: wave 1.1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: 0.1s; } .wave i:nth-child(3) { animation-delay: 0.2s; }
.wave i:nth-child(4) { animation-delay: 0.3s; } .wave i:nth-child(5) { animation-delay: 0.4s; }
.wave i:nth-child(6) { animation-delay: 0.5s; } .wave i:nth-child(7) { animation-delay: 0.6s; }
.wave i:nth-child(8) { animation-delay: 0.7s; } .wave i:nth-child(9) { animation-delay: 0.8s; }
.wave i:nth-child(10) { animation-delay: 0.9s; }

/* ================= How ================= */
.how-steps {
  list-style: none;
  display: grid;
  gap: var(--s-4);
  counter-reset: how;
  position: relative;
}
@media (min-width: 900px) {
  .how-steps { grid-template-columns: repeat(4, 1fr); }
  .how-steps::before {
    content: '';
    position: absolute;
    top: 74px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(var(--teal-rgb) / 0.6), transparent);
  }
}
.how-steps li {
  position: relative;
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-1);
}
.how-num { font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.1em; }
.how-steps p { color: var(--text-2); font-size: var(--fs-sm); }
.how-steps li:nth-child(2) { transition-delay: 90ms; }
.how-steps li:nth-child(3) { transition-delay: 180ms; }
.how-steps li:nth-child(4) { transition-delay: 270ms; }

/* ================= Keyframes ================= */
@keyframes field-scan { 0% { transform: translateY(-60px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(250px); opacity: 0; } }
@keyframes grow { to { stroke-dashoffset: 0; } }
@keyframes insight-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes card-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
@keyframes val-in { 0%, 8% { transform: scaleX(0); opacity: 0; } 25%, 88% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes sprout-grow { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes mote-rise { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 0.9; } 70% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(-34px); } }
@keyframes cam-zoom { 0%, 17% { transform: translate(0px, 0px) scale(1) translate(0px, 0px); } 31%, 86% { transform: translate(160px, 113px) scale(2.6) translate(-192.3px, -97.4px); } 97%, 100% { transform: translate(0px, 0px) scale(1) translate(0px, 0px); } }
@keyframes focus-in { 0%, 5% { opacity: 0; } 9%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes tap { 0%, 9% { opacity: 0; transform: scale(0.3); } 11% { opacity: 1; } 16%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes flash { 0%, 15.5% { opacity: 0; } 16.5% { opacity: 0.75; } 20%, 100% { opacity: 0; } }
@keyframes leaf-beam { 0%, 34% { opacity: 0; transform: translateX(0); } 36% { opacity: 1; } 54% { opacity: 1; } 56%, 100% { opacity: 0; transform: translateX(244px); } }
@keyframes ring-1 { 0%, 39% { opacity: 0; transform: scale(1.8); } 43%, 84% { opacity: 1; transform: scale(1); } 87%, 100% { opacity: 0; transform: scale(1); } }
@keyframes ring-2 { 0%, 44% { opacity: 0; transform: scale(1.8); } 48%, 84% { opacity: 1; transform: scale(1); } 87%, 100% { opacity: 0; transform: scale(1); } }
@keyframes ring-3 { 0%, 49% { opacity: 0; transform: scale(1.8); } 53%, 84% { opacity: 1; transform: scale(1); } 87%, 100% { opacity: 0; transform: scale(1); } }
@keyframes result-in { 0%, 57% { opacity: 0; transform: translateY(14px); } 62%, 84% { opacity: 1; transform: translateY(0); } 88%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes bar-1 { 0%, 61% { transform: scaleX(0); } 66%, 100% { transform: scaleX(1); } }
@keyframes bar-2 { 0%, 63% { transform: scaleX(0); } 68%, 100% { transform: scaleX(1); } }
@keyframes bar-3 { 0%, 65% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
@keyframes tick { 0%, 71% { opacity: 0; transform: scale(0.2); } 74%, 84% { opacity: 1; transform: scale(1); } 87%, 100% { opacity: 0; transform: scale(1); } }
@keyframes ask-me { 0%, 2% { opacity: 0; transform: translateY(4px); } 6%, 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } }
@keyframes ask-logo { 0%, 30% { opacity: 0; } 33%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes ask-typing { 0%, 31% { opacity: 0; } 33%, 43% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes ask-answer { 0%, 44% { opacity: 0; transform: translateY(4px); } 48%, 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } }
@keyframes ask-pop { 0%, 47% { transform: scale(0); } 50% { transform: scale(1.2); } 52%, 90% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes ask-l1 { 0%, 50% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
@keyframes ask-l2 { 0%, 53% { transform: scaleX(0); } 58%, 100% { transform: scaleX(1); } }
@keyframes ask-l3 { 0%, 56% { transform: scaleX(0); } 61%, 100% { transform: scaleX(1); } }
@keyframes ask-tag { 0%, 60% { opacity: 0; transform: scale(0.9); } 64%, 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } }
@keyframes ask-speaker { 0%, 64% { opacity: 0; } 67%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes vbar { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
@keyframes spk { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes ask-rain { from { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(26px); opacity: 0; } }
@keyframes cloud-drift { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
@keyframes vine-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
@keyframes bloom { 0%, 40% { transform: scale(0) rotate(-45deg); } 46% { transform: scale(1.15) rotate(0deg); } 48%, 56% { transform: scale(1); } 61%, 100% { transform: scale(0); } }
@keyframes fruit-grow { 0%, 56% { transform: scale(0); } 62% { transform: scale(0.35); } 72%, 91% { transform: scale(1); } 97%, 100% { transform: scale(0); } }
@keyframes ripen { 0%, 62% { fill: #86c540; } 71% { fill: #f0a02e; } 79%, 100% { fill: #e2412f; } }
@keyframes wave { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* Soil-card drawing follows the screen colour */
.art-soil .sc-card { fill: var(--art-card); stroke: var(--art-card-line); }
.art-soil .sc-head { fill: var(--art-card-head); }
.art-soil .sc-title { fill: var(--art-title); }
.art-soil .sc-rows text { fill: var(--art-ink); }
.art-soil .sc-rows rect:not(.val) { fill: var(--art-track); }

/* The field under the soil card */
.art-soil .soil-stop-top { stop-color: var(--art-soil-top); }
.art-soil .soil-stop-deep { stop-color: var(--art-soil-deep); }
.art-soil .soil-shade-stop { stop-color: var(--art-soil-shade); }
.art-soil .soil-furrows { stroke: var(--art-furrow); }
.art-soil .soil-rim { stroke: var(--art-grass); }
.art-soil .soil-grain circle { fill: var(--art-soil-grain); }
.art-soil .stem { stroke: var(--art-grass-dark); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.art-soil .leaf { fill: var(--art-grass); }
.art-soil .leaf + .leaf { fill: var(--art-grass-light); }

/* Light screen: deeper colours so the drawings don't look washed out */
:root[data-theme='light'] .service-art {
  background:
    radial-gradient(80% 70% at 50% 45%, rgb(var(--teal-rgb) / 0.22), transparent 70%),
    linear-gradient(180deg, rgb(var(--green-rgb) / 0.04), transparent);
}
:root[data-theme='light'] .art-soil .sc-card { filter: drop-shadow(0 10px 18px rgb(15 70 60 / 0.18)); }
:root[data-theme='light'] .art-soil .sc-rows text { font-weight: 700; }

/* Seedlings pop up once, then sway gently in the breeze */
.art-soil .sprout {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sprout-grow 900ms var(--ease) both, sway 3.8s ease-in-out 900ms infinite;
}
.art-soil .s2 { animation-delay: 250ms, 1150ms; animation-duration: 900ms, 4.4s; }
.art-soil .s3 { animation-delay: 450ms, 1350ms; animation-duration: 900ms, 4.1s; }
.art-soil .s4 { animation-delay: 650ms, 1550ms; animation-duration: 900ms, 3.6s; }

/* Glowing specks float up from the soil into the card */
.art-soil .mote { fill: var(--art-mote); opacity: 0; animation: mote-rise 3.2s ease-in infinite; }
.art-soil .m2 { animation-delay: 0.7s; }
.art-soil .m3 { animation-delay: 1.4s; }
.art-soil .m4 { animation-delay: 2.1s; }
.art-soil .m5 { animation-delay: 2.6s; }

/* ================= Roomier spacing (home page only) ================= */
body[data-page='home'] main .container { padding-inline: 20px; }
@media (min-width: 768px) { body[data-page='home'] main .container { padding-inline: 40px; } }

body[data-page='home'] .hero { padding-top: var(--s-8); }
body[data-page='home'] .hero-grid { gap: var(--s-7); }
body[data-page='home'] .hero-copy { gap: var(--s-6); }
@media (min-width: 980px) { body[data-page='home'] .hero-grid { gap: var(--s-8); } }

body[data-page='home'] .section { padding-block: var(--s-9); }
body[data-page='home'] .section-head { margin-bottom: var(--s-7); }
body[data-page='home'] .btn { padding: 0 26px; }

body[data-page='home'] .service-list { gap: var(--s-5); }
@media (min-width: 700px) { body[data-page='home'] .service-list { gap: var(--s-6); } }
body[data-page='home'] .service-art { padding: var(--s-6); }
body[data-page='home'] .service-body { gap: 18px; padding: var(--s-6); }
body[data-page='home'] .service-body > .btn { --btn-h: 46px; padding: 0 24px; margin-top: var(--s-3); }
body[data-page='home'] .service-head { gap: 14px; }
body[data-page='home'] .service-points { gap: 10px; }
body[data-page='home'] .service-points li { gap: 6px; padding: 7px 14px 7px 12px; }
body[data-page='home'] .service--ask .service-art { padding: var(--s-5); }
@media (min-width: 700px) {
  body[data-page='home'] .service--ask .service-body { padding: var(--s-6); }
  body[data-page='home'] .service--ask .service-body > .btn { margin-top: var(--s-3); }
}
@media (min-width: 1024px) { body[data-page='home'] .service--ask .service-body { padding: var(--s-6) var(--s-7); } }

body[data-page='home'] .how-steps { gap: var(--s-5); }
body[data-page='home'] .how-steps li { gap: 16px; padding: var(--s-6); }

body[data-page='home'] .insight { gap: 14px; padding: 14px 18px; }
@media (max-width: 560px) { body[data-page='home'] .insight { padding: 10px 12px; gap: 10px; } }