/* =====================================================================
   Landing visuals: garden shelf (numbers), bento features, illustrated
   involvement scenes. Loaded after site.css on the home page.
   ===================================================================== */

/* ------------------------------------------------------------------ GARDEN SHELF */
.shelf-section {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 150px 0 calc(var(--section-y) * 0.7);
  background: linear-gradient(180deg, #FFF8EC 0%, #FCEBD0 100%);
}
.shelf-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(760px 380px at 18% 20%, rgba(255, 255, 255, 0.95), transparent 70%), radial-gradient(640px 360px at 85% 80%, rgba(255, 214, 226, 0.55), transparent 70%);
}
.shelf-wall {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke-width='1.4'%3E%3Cpath d='M48 20l8 20 20 8-20 8-8 20-8-20-20-8 20-8z' stroke='%23DDB46A' fill='%23FBE7BD' fill-opacity='.55'/%3E%3Cpath d='M48 30l5.6 12.4L66 48l-12.4 5.6L48 66l-5.6-12.4L30 48l12.4-5.6z' stroke='%23E9A7B8' fill='%23FFF6F8' fill-opacity='.8'/%3E%3Ccircle cx='48' cy='48' r='3' fill='%23E5C568' stroke='none'/%3E%3Cpath d='M0 0l10 10M96 0L86 10M0 96l10-10M96 96L86 86' stroke='%23E7CB8B'/%3E%3Cpath d='M0 48h8M88 48h8M48 0v8M48 88v8' stroke='%23E7CB8B'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px; opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.8) 45%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.8) 45%, transparent 96%);
}
.garland { position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: 1; pointer-events: none; }
.garland svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.garland__flower { position: absolute; width: var(--s, 38px); height: var(--s, 38px); translate: -50% -22%; transform-origin: 50% 0; animation: garland-swing var(--dur, 4.5s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.garland__flower svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(116, 91, 14, 0.2)); }
@keyframes garland-swing { 0%, 100% { rotate: -7deg; } 50% { rotate: 7deg; } }

.shelf-head { position: relative; z-index: 2; }
.shelf { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: clamp(30px, 5vw, 56px); }
.shelf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 0; max-width: 560px; }
.pot-item { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; cursor: pointer; }
.pot-item__plant { position: relative; z-index: 1; width: min(150px, 78%); height: 200px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: -30px; pointer-events: none; }
.pot-item__plant > span { display: block; width: 100%; }
.pot-item__plant svg { display: block; width: 100%; height: auto; }
.pot-item__pot { position: relative; z-index: 2; width: min(176px, 84%); aspect-ratio: 200 / 176; transform-origin: 50% 100%; transition: translate 0.8s var(--ease-spring), opacity 0.6s var(--ease-out); transition-delay: calc(var(--i) * 140ms); }
.pot-item__pot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pot-item__num { position: absolute; z-index: 3; left: 50%; top: 58%; translate: -50% -50%; font-size: clamp(1.9rem, 3.6vw, 2.75rem); color: #fff; letter-spacing: 0.02em; white-space: nowrap; padding-top: 0.14em; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.16), 0 0 18px rgba(255, 255, 255, 0.25); }
.pot-item__board { position: relative; z-index: 3; width: 100%; height: 24px; margin-top: -6px; background: repeating-linear-gradient(90deg, rgba(90, 50, 15, 0.07) 0 2px, transparent 2px 46px), linear-gradient(180deg, #D39B63 0%, #B07542 52%, #8C5A2C 100%); box-shadow: 0 16px 20px -12px rgba(90, 55, 20, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.3); }
.shelf__row .pot-item:first-child .pot-item__board { border-radius: 12px 0 0 12px; }
.shelf__row .pot-item:last-child .pot-item__board { border-radius: 0 12px 12px 0; }
.shelf__row .pot-item:first-child .pot-item__board::after, .shelf__row:last-child .pot-item:last-child .pot-item__board::after {
  content: ""; position: absolute; top: 100%; width: 22px; height: 34px; background: linear-gradient(180deg, #A86E3A, #7E5026); clip-path: polygon(0 0, 100% 0, 100% 18%, 18% 100%, 0 100%);
}
.shelf__row .pot-item:first-child .pot-item__board::after { left: 18px; }
.shelf__row:last-child .pot-item:last-child .pot-item__board::after { right: 18px; transform: scaleX(-1); }
.pot-item__tag { position: relative; z-index: 2; margin-top: 16px; transform-origin: 50% -16px; animation: tag-swing 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
.pot-item__tag::before { content: ""; position: absolute; left: 50%; top: -16px; width: 2px; height: 16px; translate: -50% 0; background: #B98142; }
.pot-item__tag span { display: block; padding: 8px 14px; border-radius: 12px; background: #fff; border: 2px solid var(--gold-200); box-shadow: var(--sh-sm); font: 600 0.98rem/1.2 var(--f-head); color: var(--ink-2); text-align: center; }
@keyframes tag-swing { 0%, 100% { rotate: -2.2deg; } 50% { rotate: 2.2deg; } }
.js .pot-item:not(.is-in) .pot-item__pot { translate: 0 36px; opacity: 0; }
.pot-item:hover .pot-item__pot { animation: pot-wiggle 0.6s var(--ease-out); }
@keyframes pot-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -5deg; } 50% { rotate: 4deg; } 75% { rotate: -2deg; } }
@media (min-width: 761px) {
  .shelf__row:first-child .pot-item:last-child .pot-item__board, .shelf__row:last-child .pot-item:first-child .pot-item__board { border-radius: 0; }
  .shelf__row:first-child .pot-item:last-child .pot-item__board::after, .shelf__row:last-child .pot-item:first-child .pot-item__board::after { display: none; }
}
@media (max-width: 760px) {
  .shelf-section { padding-top: 130px; }
  .shelf { flex-direction: column; align-items: center; gap: 40px; }
  .shelf__row { width: 100%; max-width: 440px; }
  .shelf__row:first-child .pot-item:last-child .pot-item__board::after { content: ""; position: absolute; top: 100%; right: 18px; left: auto; width: 22px; height: 34px; background: linear-gradient(180deg, #A86E3A, #7E5026); clip-path: polygon(0 0, 100% 0, 100% 18%, 18% 100%, 0 100%); transform: scaleX(-1); }
  .shelf__row:last-child .pot-item:first-child .pot-item__board::after { content: ""; position: absolute; top: 100%; left: 18px; width: 22px; height: 34px; background: linear-gradient(180deg, #A86E3A, #7E5026); clip-path: polygon(0 0, 100% 0, 100% 18%, 18% 100%, 0 100%); }
  .pot-item__plant { height: 160px; }
  .pot-item__tag span { font-size: 0.88rem; padding: 7px 10px; }
}

/* ------------------------------------------------------------------ BENTO FEATURES */
.features { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #FFFDF8 0%, #FFF4DF 100%); }
.features__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.features__bg > span { position: absolute; width: var(--size); height: var(--size); opacity: var(--o, 0.1); animation: spin var(--dur, 120s) linear infinite; }
.features__bg > span svg { width: 100%; height: 100%; }
.bento {
  display: grid; gap: 18px; margin-top: clamp(36px, 5vw, 56px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "pages pages safe safe" "pages pages time kind" "sync sync cert cert";
}
.bento__card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0;
  border-radius: 30px; border: 1.5px solid rgba(255, 255, 255, 0.9); box-shadow: var(--sh-md);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), opacity 0.9s var(--ease-out), translate 1s var(--ease-out);
}
.bento__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.7) 1.2px, transparent 1.6px); background-size: 20px 20px; opacity: 0.6; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.bento__card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.bento__visual { position: relative; flex: 1 1 auto; min-height: 200px; display: grid; place-items: center; padding: 26px 22px 12px; }
.bento__text { position: relative; padding: 4px 26px 26px; }
.bento__text h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.2; margin-top: 12px; }
.bento__text p { margin-top: 8px; color: var(--ink-2); }
.bento__kicker { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.82); font: 700 0.76rem/1 var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); box-shadow: var(--sh-xs); }
.bento__kicker .i { width: 15px; height: 15px; }
.bento__card--pages { grid-area: pages; background: linear-gradient(160deg, #FFF9EA 0%, #FCE3AE 100%); }
.bento__card--safe { grid-area: safe; background: linear-gradient(160deg, #F1FBF4 0%, #D3F0DD 100%); }
.bento__card--time { grid-area: time; background: linear-gradient(160deg, #F0F8FF 0%, #D4EAFF 100%); }
.bento__card--kind { grid-area: kind; background: linear-gradient(160deg, #FFF4F7 0%, #FFD9E3 100%); }
.bento__card--sync { grid-area: sync; background: linear-gradient(160deg, #F7F3FF 0%, #E2D8FF 100%); }
.bento__card--cert { grid-area: cert; background: linear-gradient(160deg, #FFFAEE 0%, #F6DDA4 100%); }
.bento__card--pages .bento__kicker { color: var(--gold-800); }
.bento__card--safe .bento__kicker { color: var(--leaf-dark); }
.bento__card--time .bento__kicker { color: #2E6FAE; }
.bento__card--kind .bento__kicker { color: #B2436A; }
.bento__card--sync .bento__kicker { color: #5C45A8; }
.bento__card--cert .bento__kicker { color: var(--gold-900); }
.bento__card--safe, .bento__card--sync, .bento__card--cert { flex-direction: row; align-items: center; }
.bento__card--safe .bento__visual, .bento__card--sync .bento__visual, .bento__card--cert .bento__visual { flex: 1 1 54%; min-height: 230px; padding: 22px; }
.bento__card--safe .bento__text, .bento__card--sync .bento__text, .bento__card--cert .bento__text { flex: 1 1 46%; padding: 26px 26px 26px 0; }
.bento__card--pages .bento__visual { min-height: 330px; }
.bento__card--pages .bento__text h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
/* Looping mini-animations only run while their card is on screen */
.bento__card:not(.is-visible) *, .bento__card:not(.is-visible) *::before, .bento__card:not(.is-visible) *::after { animation-play-state: paused !important; }

/* Fanned pages */
.fan { position: relative; width: min(100%, 400px); aspect-ratio: 1.3; animation: float 8s ease-in-out infinite; }
.fan__page { position: absolute; left: 50%; top: 50%; width: 42%; height: auto; border-radius: 10px; box-shadow: 0 2px 0 #E8D8B4, var(--sh-lg); translate: -50% -50%; transition: transform 0.8s var(--ease-spring); }
.fan__page--1 { transform: rotate(-15deg) translate(-44%, 6%); }
.fan__page--2 { transform: rotate(10deg) translate(42%, 4%); }
.fan__page--3 { z-index: 2; transform: rotate(-2deg) translateY(-3%); }
.bento__card--pages:hover .fan__page--1 { transform: rotate(-22deg) translate(-72%, 10%); }
.bento__card--pages:hover .fan__page--2 { transform: rotate(16deg) translate(70%, 8%); }
.bento__card--pages:hover .fan__page--3 { transform: rotate(0deg) translateY(-8%) scale(1.05); }
.seal { position: absolute; z-index: 3; right: 9%; top: 9%; width: 98px; height: 98px; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #fff; background: radial-gradient(circle at 35% 30%, #F7DA8E, #CC9933 62%, #A67B24); box-shadow: 0 10px 24px -8px rgba(116, 91, 14, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.4); rotate: 12deg; animation: seal-bob 5s ease-in-out infinite; }
.seal__ring { position: absolute; inset: 7px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.75); animation: spin 22s linear infinite; }
.seal__text { font: 700 0.72rem/1.15 var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(90, 60, 5, 0.4); }
@keyframes seal-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Shield + checks */
.bento__card--safe .bento__visual { display: flex; align-items: center; justify-content: center; gap: 18px; }
.shield { position: relative; width: 110px; flex: none; animation: float 6s ease-in-out infinite; }
.shield__svg { width: 100%; height: auto; filter: drop-shadow(0 12px 16px rgba(46, 122, 75, 0.3)); }
.shield__flower { position: absolute; left: 50%; top: 44%; width: 56px; height: 56px; translate: -50% -50%; animation: spin 16s linear infinite; }
.shield__flower svg { width: 100%; height: 100%; }
.shield::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 3px solid rgba(70, 160, 106, 0.4); animation: pulse-ring 2.6s ease-out infinite; }
.checks { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; }
.checks li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 14px; background: #fff; box-shadow: var(--sh-sm); font: 600 0.95rem/1 var(--f-head); color: var(--ink); white-space: nowrap; opacity: 0; translate: 16px 0; transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-spring); transition-delay: calc(0.5s + var(--k) * 0.28s); }
.checks li .i { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--leaf); color: #fff; stroke-width: 3; }
.bento__card.is-in .checks li { opacity: 1; translate: 0 0; }

/* Daily ring */
.bento__card--time .bento__visual { gap: 10px; align-content: center; }
.daily { position: relative; width: 132px; height: 132px; }
.daily__ring { width: 100%; height: 100%; rotate: -90deg; }
.daily__track { fill: none; stroke: #fff; stroke-width: 12; opacity: 0.9; }
.daily__fill { fill: none; stroke: var(--sky); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: daily-fill 5s var(--ease-in-out) infinite; }
@keyframes daily-fill { 0% { stroke-dashoffset: 1; } 62%, 86% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.daily__sun { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; translate: -50% -50%; animation: spin 14s linear infinite; }
.daily__sun svg { width: 100%; height: 100%; }
.daily__dots { display: flex; gap: 6px; justify-content: center; }
.daily__dots span { width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--sky-100); animation: dot-fill 5s ease-in-out infinite; animation-delay: calc(var(--k) * 0.3s); }
@keyframes dot-fill { 0%, 8% { background: #fff; transform: scale(1); } 14% { background: var(--sun); transform: scale(1.35); } 20%, 86% { background: var(--sun); transform: scale(1); } 100% { background: #fff; } }
.daily__label { font: 600 0.92rem/1 var(--f-head); color: #2E6FAE; text-align: center; }
.daily__label strong { font-family: var(--f-display); font-size: 1.3rem; font-weight: 400; margin-right: 2px; }

/* Mini quiz (gentle feedback loop) */
.mini-quiz { position: relative; width: min(100%, 230px); padding: 16px 14px 14px; border-radius: 20px; background: #fff; box-shadow: var(--sh-md); display: grid; gap: 8px; }
.mini-quiz__q { height: 9px; border-radius: 9px; background: var(--cream-3); }
.mini-quiz__q--short { width: 62%; margin-bottom: 4px; }
.mini-quiz__opt { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; border: 2px solid var(--line-2); background: #fff; }
.mini-quiz__opt b { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--gold-50); color: var(--gold-800); font: 400 0.8rem/1 var(--f-display); padding-top: 2px; }
.mini-quiz__opt span { flex: 1; height: 7px; border-radius: 7px; background: var(--cream-3); }
.mini-quiz__opt--b { animation: quiz-wrong 6s ease-in-out infinite; }
.mini-quiz__opt--b b { animation: quiz-wrong-b 6s ease-in-out infinite; }
@keyframes quiz-wrong { 0%, 22% { border-color: var(--line-2); background: #fff; transform: translateX(0); } 25% { border-color: #F2A3B3; background: var(--rose-50); transform: translateX(-5px); } 28% { transform: translateX(4px); } 31%, 92% { border-color: #F2A3B3; background: var(--rose-50); transform: translateX(0); } 100% { border-color: var(--line-2); background: #fff; } }
@keyframes quiz-wrong-b { 0%, 22% { background: var(--gold-50); color: var(--gold-800); } 25%, 92% { background: var(--rose); color: #fff; } 100% { background: var(--gold-50); color: var(--gold-800); } }
.mini-quiz__bubble { position: absolute; left: 50%; bottom: calc(100% - 6px); translate: -50% 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; background: var(--rose); color: #fff; font: 600 0.85rem/1 var(--f-head); box-shadow: var(--sh-md); opacity: 0; transform: scale(0.6) translateY(8px); animation: quiz-bubble 6s var(--ease-out) infinite; }
.mini-quiz__bubble .i { width: 15px; height: 15px; }
.mini-quiz__bubble::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% -1px; border: 7px solid transparent; border-top-color: var(--rose); }
@keyframes quiz-bubble { 0%, 30% { opacity: 0; transform: scale(0.6) translateY(8px); } 36%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mini-quiz__again { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 12px; background: var(--leaf); color: #fff; font: 600 0.8rem/1 var(--f-head); opacity: 0; transform: translateY(8px); animation: quiz-again 6s var(--ease-out) infinite; }
.mini-quiz__again .i { width: 15px; height: 15px; }
@keyframes quiz-again { 0%, 52% { opacity: 0; transform: translateY(8px); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Devices sync */
.devices { position: relative; width: 340px; height: 176px; flex: none; }
.devices__phone { position: absolute; left: 8px; bottom: 6px; width: 74px; height: 138px; padding: 5px; border-radius: 16px; background: #2B2319; box-shadow: var(--sh-lg); rotate: -6deg; }
.devices__laptop { position: absolute; right: 4px; bottom: 6px; width: 176px; }
.devices__lid { height: 106px; padding: 6px; border-radius: 12px 12px 4px 4px; background: #2B2319; box-shadow: var(--sh-lg); }
.devices__base { height: 10px; margin: 0 -14px; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #D8CFC2, #B9AE9F); }
.devices__screen { width: 100%; height: 100%; border-radius: 11px; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-around; background: linear-gradient(180deg, #E4F3FF 0%, #FFF6E2 60%, #E6D2A8 100%); }
.devices__lid .devices__screen { border-radius: 7px; }
.devices__screen > span { display: block; width: 26%; }
.devices__screen svg { width: 100%; height: auto; display: block; }
.devices__arc { position: absolute; left: 0; top: 0; width: 340px; height: 176px; overflow: visible; }
.devices__arc path { fill: none; stroke: #9B7FE6; stroke-width: 2.5; stroke-dasharray: 6 8; stroke-linecap: round; animation: dash-flow 1.2s linear infinite; }
@keyframes dash-flow { to { stroke-dashoffset: -28; } }
.devices__traveller { position: absolute; left: 0; top: 0; width: 34px; height: 34px; offset-path: path("M66 42 C120 -18 210 -18 238 44"); offset-rotate: 0deg; animation: travel 3.6s var(--ease-in-out) infinite; }
.devices__traveller svg { width: 100%; height: 100%; }
@keyframes travel { 0% { offset-distance: 0%; opacity: 0; transform: scale(0.4); } 12% { opacity: 1; transform: scale(1); } 85% { offset-distance: 100%; opacity: 1; transform: scale(1); } 100% { offset-distance: 100%; opacity: 0; transform: scale(0.4); } }

/* Mini certificate */
.bento__card--cert .bento__visual { overflow: visible; }
.mini-cert { position: relative; width: min(190px, 70%); border-radius: 10px; overflow: hidden; container-type: inline-size; box-shadow: var(--sh-xl); rotate: -6deg; transition: rotate 0.6s var(--ease-spring), scale 0.6s var(--ease-spring); }
.bento__card--cert:hover .mini-cert { rotate: 0deg; scale: 1.05; }
.mini-cert img { display: block; width: 100%; height: auto; }
.mini-cert__name { position: absolute; left: 50%; top: 45%; translate: -50% -100%; margin-top: 0.3cqw; width: 80%; text-align: center; font: 700 5cqw/1 Helvetica, Arial, sans-serif; color: #000; white-space: nowrap; }
.mini-cert__no { position: absolute; left: 78.6%; top: 13%; translate: -50% -50%; font: 700 2.8cqw/1 Helvetica, Arial, sans-serif; color: #282D30; }
.mini-cert__shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%); background-size: 250% 100%; animation: cert-shine 4s ease-in-out infinite; }
@keyframes cert-shine { 0%, 40% { background-position: 150% 0; } 80%, 100% { background-position: -100% 0; } }
.mini-cert__stamp { position: absolute; right: 12%; bottom: 14%; width: 84px; height: 84px; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #fff; background: radial-gradient(circle at 35% 30%, #F585A2, #E0567B); box-shadow: 0 10px 20px -6px rgba(178, 63, 91, 0.55); font: 600 0.66rem/1.1 var(--f-head); letter-spacing: 0.06em; text-transform: uppercase; rotate: -12deg; animation: stamp-pop 4s var(--ease-spring) infinite; }
.mini-cert__stamp span { display: block; font: 400 1.15rem/1 var(--f-display); letter-spacing: 0.02em; }
@keyframes stamp-pop { 0%, 30% { transform: scale(1); } 36% { transform: scale(1.18); } 44%, 100% { transform: scale(1); } }

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "pages pages" "safe safe" "time kind" "sync sync" "cert cert"; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pages" "safe" "time" "kind" "sync" "cert"; }
  .bento__card--safe, .bento__card--sync, .bento__card--cert { flex-direction: column; align-items: stretch; }
  .bento__card--safe .bento__text, .bento__card--sync .bento__text, .bento__card--cert .bento__text { padding: 4px 22px 24px; }
  .bento__card--pages .bento__visual { min-height: 260px; }
  .devices { scale: 0.86; margin: -10px 0; }
  .bento__card--safe .bento__visual { flex-direction: column; }
}

/* ------------------------------------------------------------------ INVOLVEMENT SCENES */
.involve { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #FFFBF1 0%, #FFF1D8 100%); }
.involve__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px 320px at 10% 20%, rgba(255, 214, 226, 0.6), transparent 70%), radial-gradient(520px 320px at 90% 70%, rgba(217, 237, 255, 0.8), transparent 70%); }
.involve__bg::after { content: ""; position: absolute; inset: 0; background-image: var(--pattern-star); background-size: 72px 72px; opacity: 0.12; }
.involve__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(36px, 5vw, 56px); }
.scene-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 30px; background: #fff; border: 1.5px solid var(--line); box-shadow: var(--sh-md); color: inherit; text-decoration: none; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), opacity 0.9s var(--ease-out), translate 1s var(--ease-out); }
.scene-card:hover { color: inherit; transform: translateY(-8px) rotate(-0.4deg); box-shadow: var(--sh-xl); }
.scene-card__art { position: relative; height: 214px; overflow: hidden; }
.scene-card--sun .scene-card__art { background: linear-gradient(180deg, #FFE3A1 0%, #FFF4D8 100%); }
.scene-card--rose .scene-card__art { background: linear-gradient(180deg, #FFCBD8 0%, #FFEFF3 100%); }
.scene-card--sky .scene-card__art { background: linear-gradient(180deg, #BCE0FF 0%, #EEF7FF 100%); }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scene-card__body { display: grid; gap: 8px; padding: 22px 24px 26px; }
.scene-card__kicker { font: 700 0.78rem/1 var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-800); }
.scene-card--rose .scene-card__kicker { color: #B2436A; }
.scene-card--sky .scene-card__kicker { color: #2E6FAE; }
.scene-card h3 { font-size: 1.45rem; }
.scene-card p { color: var(--ink-2); }
.scene-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 600 1rem/1 var(--f-head); color: var(--gold-800); }
.scene-card__cta .i { transition: transform 0.3s var(--ease-out); }
.scene-card:hover .scene-card__cta .i { transform: translateX(5px); }
.sc-book, .sc-lid, .sc-burst, .sc-win, .sc-sun, .sc-cloud { transform-box: fill-box; }
.sc-book { transform-origin: 50% 100%; }
.scene-card:hover .sc-book { animation: book-hop 0.7s var(--ease-spring) both; animation-delay: calc(var(--k) * 90ms); }
@keyframes book-hop { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 45% { transform: translateY(-16px) rotate(var(--r, 0deg)); } }
.sc-book { transform: rotate(var(--r, 0deg)); }
.sc-lid { transform-origin: 0% 100%; transition: transform 0.6s var(--ease-spring); }
.scene-card:hover .sc-lid { transform: translate(-4px, -22px) rotate(-14deg); }
.sc-burst { transform-origin: 50% 100%; transform: translateY(24px) scale(0.75); transition: transform 0.7s var(--ease-spring) 0.05s; }
.scene-card:hover .sc-burst { transform: translateY(-6px) scale(1.05); }
.sc-win { transition: fill 0.5s var(--ease-out); }
.scene-card:hover .sc-win { fill: #FFE9A6; }
.sc-sun { transform-origin: 50% 50%; animation: spin 30s linear infinite; }
.sc-cloud { animation: cloud-drift 9s ease-in-out infinite alternate; }
@keyframes cloud-drift { from { transform: translateX(-10px); } to { transform: translateX(14px); } }
.sc-float { animation: float-sm 5s ease-in-out infinite; }
@media (max-width: 960px) { .involve__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }

.pot-item__plant .pl-soil, .pot-item__plant .pl-soil + ellipse { display: none; }

/* ------------------------------------------------------------------ FAQ helper art */
.ask-art { position: relative; width: 240px; height: 230px; margin-top: 26px; }
.ask-art .pot-mini { position: absolute; left: 50%; bottom: 0; width: 120px; translate: -50% 0; }
.ask-art .pot-mini svg { width: 100%; height: auto; display: block; }
.ask-art .ask-art__plant { position: absolute; left: 50%; bottom: 78px; width: 110px; translate: -50% 0; }
.ask-art .ask-art__plant svg { width: 100%; height: auto; display: block; }
.ask-art__bubble { position: absolute; display: grid; place-items: center; border-radius: 50% 50% 50% 8px; background: #fff; box-shadow: var(--sh-md); font: 700 1.3rem/1 var(--f-head); color: var(--gold-800); animation: float 5s ease-in-out infinite; }
.ask-art__bubble .i { width: 20px; height: 20px; color: var(--rose); }
.ask-art__bubble--1 { width: 52px; height: 52px; left: 6px; top: 20px; }
.ask-art__bubble--2 { width: 46px; height: 46px; right: 10px; top: 0; font-family: var(--f-arabic); font-size: 1.5rem; color: var(--sky); border-radius: 50% 50% 8px 50%; animation-delay: -1.6s; }
.ask-art__bubble--3 { width: 40px; height: 40px; right: 0; top: 96px; border-radius: 50% 50% 8px 50%; animation-delay: -3s; }
@media (max-width: 900px) { .ask-art { margin: 20px auto 0; } }