/* ══════════════════════════════════════════
   HOME — hero section
   Only loaded on the front page.

   Enqueued last (after theme-v2.css) on purpose: several rules here
   deliberately override the shared theme, e.g. .yop-hero.hero-lt
   cancelling the 100vh min-height that .hero-lt sets for the desktop
   layout. Moving this earlier in the cascade will break the hero.
   ══════════════════════════════════════════ */

.yop-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#e6f3ff 0%,#ffffff 55%,#f0f8ff 100%);color:#062743;padding:104px 0 64px;isolation:isolate;}
.yop-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 18% 22%,rgba(0,140,255,0.14) 0%,transparent 42%),radial-gradient(circle at 82% 72%,rgba(0,87,255,0.12) 0%,transparent 42%),radial-gradient(circle at 50% 100%,rgba(0,149,255,0.08) 0%,transparent 52%);animation:yop-glow 8s ease-in-out infinite alternate;z-index:0;pointer-events:none;}
.yop-hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.yop-food{position:absolute;font-size:40px;opacity:0.22;animation:yop-float 14s ease-in-out infinite;filter:drop-shadow(0 6px 14px rgba(6,39,67,0.12));}
.yop-food-1{top:8%;left:5%;animation-delay:0s;}
.yop-food-2{top:14%;left:88%;animation-delay:1.5s;font-size:48px;}
.yop-food-3{top:38%;left:3%;animation-delay:3s;font-size:34px;}
.yop-food-4{top:60%;left:92%;animation-delay:4.5s;}
.yop-food-5{top:80%;left:7%;animation-delay:6s;font-size:42px;}
.yop-food-6{top:5%;left:45%;animation-delay:2s;font-size:30px;opacity:0.14;}
.yop-food-7{top:84%;left:56%;animation-delay:5s;font-size:38px;}
.yop-food-8{top:48%;left:48%;animation-delay:7s;font-size:26px;opacity:0.1;}
.yop-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:70px;align-items:center;margin:0 auto;padding:0 24px;}
.yop-txt-col{animation:yop-fadeup 0.85s ease-out both;}
.yop-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(20,102,250,0.08);border:1px solid rgba(20,102,250,0.25);color:#1466fa;padding:8px 16px;border-radius:100px;font-size:12px;font-weight:600;margin-bottom:24px;}
.yop-badge-dot{width:7px;height:7px;background:#22c55e;border-radius:50%;box-shadow:0 0 12px rgba(34,197,94,0.6);animation:yop-pulse-dot 1.8s ease-in-out infinite;}
.yop-title{font-size:clamp(2.4rem,5vw,3.2rem);font-weight:600;line-height:1.05;letter-spacing:-0.03em;color:#062743;margin:0 0 22px;}
.yop-title .yop-grad{background:linear-gradient(90deg,#008CFF,#0057FF,#0095FF,#008CFF);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:yop-shimmer 6s linear infinite;}
.yop-title .yop-plate{display:inline-block;animation:yop-wiggle 4s ease-in-out infinite;transform-origin:center;}
.yop-sub{font-size:clamp(1rem,1.15vw,1.15rem);color:rgba(6,39,67,0.7);line-height:1.7;margin:0 0 30px;max-width:520px;animation:yop-fadeup 0.85s ease-out 0.15s both;}
.yop-cta-row{display:flex;justify-content:start;flex-wrap:wrap;gap:14px;margin-bottom:0;animation:yop-fadeup 0.85s ease-out 0.3s both;align-items:center;}
.yop-stats{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding-top:28px;border-top:1px solid rgba(6,39,67,0.1);animation:yop-fadeup 0.85s ease-out 0.45s both;}
.yop-stat-item{display:flex;flex-direction:column;}
.yop-stat-val{font-size:24px;font-weight:800;color:#062743;line-height:1;}
.yop-stat-val .yop-star{color:#f59e0b;}
.yop-stat-lbl{font-size:11px;color:rgba(6,39,67,0.55);text-transform:uppercase;letter-spacing:0.08em;margin-top:5px;font-weight:600;}
.yop-stat-divider{width:1px;height:34px;background:rgba(6,39,67,0.1);}
.yop-scene{position:relative;perspective:1600px;min-height:540px;animation:yop-fadeup 1s ease-out 0.2s both;}
.yop-pos{position:relative;background:#ffffff;border-radius:22px;box-shadow:0 30px 60px rgba(6,39,67,0.14),0 0 0 1px rgba(6,39,67,0.06);padding:22px;transform:rotateY(-9deg) rotateX(3deg);transform-style:preserve-3d;transition:transform 0.6s ease;}
.yop-pos:hover{transform:rotateY(-4deg) rotateX(1deg);}
.yop-pos-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(6,39,67,0.08);}
.yop-pos-brand{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#062743;}
.yop-live-dot{width:10px;height:10px;background:#22c55e;border-radius:50%;position:relative;}
.yop-live-dot::after{content:'';position:absolute;inset:-4px;border:2px solid #22c55e;border-radius:50%;animation:yop-pulse-ring 1.8s ease-out infinite;}
.yop-pos-time{font-size:11px;color:rgba(6,39,67,0.55);font-weight:500;}
.yop-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.yop-menu-tile{background:#f8fafc;border:1px solid rgba(6,39,67,0.06);border-radius:14px;padding:12px 10px;text-align:center;position:relative;overflow:hidden;transition:transform 0.3s ease,background 0.3s ease,box-shadow 0.3s ease;animation:yop-tilein 0.6s ease-out both;}
.yop-menu-tile:hover{transform:translateY(-3px) scale(1.03);background:#fff;box-shadow:0 10px 24px rgba(6,39,67,0.08);}
.yop-menu-tile:nth-child(1){animation-delay:0.6s;}
.yop-menu-tile:nth-child(2){animation-delay:0.7s;}
.yop-menu-tile:nth-child(3){animation-delay:0.8s;}
.yop-menu-tile:nth-child(4){animation-delay:0.9s;}
.yop-menu-tile:nth-child(5){animation-delay:1.0s;}
.yop-menu-tile:nth-child(6){animation-delay:1.1s;}
.yop-tile-emoji{font-size:32px;line-height:1;margin-bottom:6px;display:inline-block;animation:yop-bob 3s ease-in-out infinite;}
.yop-menu-tile:nth-child(2n) .yop-tile-emoji{animation-delay:0.5s;}
.yop-menu-tile:nth-child(3n) .yop-tile-emoji{animation-delay:1s;}
.yop-tile-name{font-size:11px;font-weight:600;color:#062743;margin-bottom:2px;}
.yop-tile-price{font-size:11px;color:#16a34a;font-weight:700;}
.yop-order-bar{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,rgba(20,102,250,0.08),rgba(249,115,22,0.08));border:1px solid rgba(20,102,250,0.18);border-radius:12px;padding:12px 14px;}
.yop-order-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.yop-order-tag{background:#1466fa;color:#fff;font-size:9px;font-weight:800;padding:3px 8px;border-radius:20px;letter-spacing:0.06em;}
.yop-order-desc{font-size:12px;color:#062743;font-weight:600;}
.yop-order-total{font-size:18px;font-weight:800;color:#062743;}
.yop-ticket{position:absolute;background:#fff;color:#1f2937;border-radius:14px;padding:14px 16px;box-shadow:0 20px 50px rgba(6,39,67,0.18);font-size:12px;min-width:180px;z-index:3;animation:yop-slidein 0.7s ease-out both;border:1px solid rgba(6,39,67,0.06);}
.yop-ticket-1{top:-24px;left:-40px;animation-delay:0.9s;transform:rotate(-4deg);}
.yop-ticket-2{bottom:30px;right:-32px;animation-delay:1.1s;transform:rotate(3deg);background:#fef3c7;border-color:rgba(245,158,11,0.25);}
.yop-ticket-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed rgba(0,0,0,0.15);gap:10px;}
.yop-ticket-tag{font-size:9px;font-weight:800;padding:3px 8px;border-radius:12px;letter-spacing:0.06em;white-space:nowrap;}
.yop-ticket-tag.new{background:#1466fa;color:#fff;animation:yop-blink 1.2s ease-in-out infinite;}
.yop-ticket-tag.prep{background:#f59e0b;color:#fff;}
.yop-ticket-table{font-size:13px;font-weight:800;color:#062743;}
.yop-ticket-body{color:#374151;line-height:1.55;font-weight:500;}
.yop-notif-pop{position:absolute;top:38%;right:-56px;background:#fff;color:#062743;border-radius:14px;padding:12px 16px;box-shadow:0 20px 50px rgba(6,39,67,0.2);display:flex;align-items:center;gap:12px;z-index:4;border:1px solid rgba(6,39,67,0.06);animation:yop-pop 0.6s ease-out 1.4s both,yop-bob 4s ease-in-out 2s infinite;}
.yop-notif-check{width:32px;height:32px;background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;flex-shrink:0;}
.yop-notif-title{font-size:12px;font-weight:800;color:#062743;}
.yop-notif-sub{font-size:11px;color:rgba(6,39,67,0.55);margin-top:2px;}
.yop-chip{position:absolute;background:#ffffff;border:1px solid rgba(6,39,67,0.08);color:#062743;padding:8px 14px;border-radius:100px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 12px 30px rgba(6,39,67,0.1);z-index:3;animation:yop-fadeup 0.7s ease-out both;}
.yop-chip-1{top:18px;right:-16px;animation-delay:1.3s;}
.yop-chip-1 .yop-chip-dot{width:8px;height:8px;background:#1466fa;border-radius:50%;animation:yop-blink 1.4s ease-in-out infinite;box-shadow:0 0 10px rgba(34,197,94,0.6);}
.yop-chip-2{bottom:90px;left:-24px;animation-delay:1.5s;background:linear-gradient(135deg,#f97316,#dc2626);border-color:transparent;color:#fff;box-shadow:0 12px 30px rgba(249,115,22,0.3);}
/* ── Real app screenshot scene ── */
.yop-hero-inner.has-shot{grid-template-columns:1fr 1.22fr;gap:40px;align-items:center;}
.yop-scene-shot{position:relative;min-height:auto;}
.yop-shot-glow{position:absolute;inset:-7% -8% -8% -7%;background:radial-gradient(ellipse at 55% 50%,rgba(20,102,250,0.20) 0%,rgba(0,140,255,0.08) 48%,transparent 72%);filter:blur(50px);z-index:0;pointer-events:none;}
/* Frosted browser-chrome bezel: the frame itself is translucent so the
   glow behind it blurs through the 20px ring around the screenshot. */
.yop-shot-frame{position:relative;z-index:1;border:1.41px solid #ffffff;border-radius:30px;padding:20px;overflow:hidden;background:rgba(255,255,255,0.18);box-shadow:0 30px 70px rgba(6,39,67,0.20),0 6px 18px rgba(6,39,67,0.07);transition:transform 0.5s cubic-bezier(.2,.7,.3,1),box-shadow 0.5s ease;}
.yop-shot-frame-bg{background-image:linear-gradient(69deg,#ffffff,#ffffff4d 47%,#ffffff);opacity:.36;-webkit-backdrop-filter:blur(27.43px);backdrop-filter:blur(27.43px);position:absolute;inset:0%;z-index:0;pointer-events:none;}
.yop-scene-shot:hover .yop-shot-frame{transform:translateY(-7px);box-shadow:0 44px 90px rgba(6,39,67,0.26),0 6px 18px rgba(6,39,67,0.08);}
.yop-shot{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 2px 6px rgba(6,39,67,0.08),0 12px 28px rgba(6,39,67,0.10);}
/* Chips sit ON the frame edges so they read as part of the product, not loose decoration */
.yop-shot-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid rgba(6,39,67,0.07);border-radius:100px;padding:9px 15px;font-size:12px;font-weight:600;color:#062743;box-shadow:0 14px 32px rgba(6,39,67,0.15);white-space:nowrap;}
.yop-shot-chip-live{top:54px;left:-22px;animation:yop-fadeup 0.7s ease-out 0.9s both;}
.yop-shot-chip-live .yop-chip-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;box-shadow:0 0 10px rgba(34,197,94,0.7);animation:yop-blink 1.4s ease-in-out infinite;}
.yop-shot-chip-pay{bottom:28px;right:-26px;gap:11px;padding:10px 16px;animation:yop-pop 0.6s ease-out 1.15s both,yop-bob 5s ease-in-out 2s infinite;}
.yop-shot-check{width:26px;height:26px;flex-shrink:0;background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;}
.yop-shot-chip-pay .yop-shot-pay-sub{display:block;font-size:11px;font-weight:500;color:rgba(6,39,67,0.55);margin-top:1px;}
@media (min-width:1280px){
  .yop-shot-frame{width:118%;max-width:none;}
  .yop-shot-chip-pay{right:-8%;}
}
@keyframes yop-glow{0%{opacity:0.55}100%{opacity:1}}
@keyframes yop-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-28px) rotate(12deg)}}
@keyframes yop-fadeup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes yop-slidein{from{opacity:0;transform:translateX(40px) rotate(0)}}
@keyframes yop-pop{0%{opacity:0;transform:scale(0.3)}60%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes yop-shimmer{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes yop-shine{0%,100%{left:-100%}50%{left:100%}}
@keyframes yop-pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:0.7}}
@keyframes yop-pulse-ring{0%{transform:scale(1);opacity:1}100%{transform:scale(2.4);opacity:0}}
@keyframes yop-blink{0%,100%{opacity:1}50%{opacity:0.55}}
@keyframes yop-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes yop-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
@keyframes yop-tilein{from{opacity:0;transform:translateY(18px) scale(0.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:1024px){
  .yop-hero-inner{grid-template-columns:1fr;gap:100px;}
  .yop-scene{min-height:auto;padding:20px 0 40px;}
  .yop-pos{transform:none;}
  .yop-pos:hover{transform:none;}
  .yop-hero-inner.has-shot{grid-template-columns:1fr;gap:48px;}
  .yop-shot-frame{width:100%;padding:14px;border-radius:24px;}
  .yop-shot{border-radius:12px;}
  .yop-shot-chip-live{left:-8px;top:40px;}
  .yop-shot-chip-pay{right:-8px;bottom:20px;}
  .yop-ticket-1{left:-6px;top:-30px;}
  .yop-ticket-2{right:-6px;}
  .yop-notif-pop{right:-6px;}
}
/* Mobile hides the product shot — at phone width the POS UI inside it
   is unreadable, so it only adds a long scroll before the CTA. Note the
   browser still downloads the file; skipping the request would mean
   rendering it as a background image or swapping it server-side. */
@media (max-width:768px){
  .yop-scene-shot{display:none !important;}
  .yop-hero-inner,
  .yop-hero-inner.has-shot{grid-template-columns:1fr;gap:0;}
  /* .hero-lt carries min-height:100vh for the desktop layout. With the
     product shot hidden the copy is short, so the section would stay a
     full screen tall and strand the CTA in the middle of it. */
  .yop-hero.hero-lt{min-height:0;}
  .yop-hero-inner{align-items:start;}
  .yop-hero{padding:92px 0 64px;}
  .yop-title{font-size:clamp(2rem,8vw,2.6rem);}
  .yop-sub{font-size:1rem;max-width:none;}
  .yop-badge{font-size:11px;padding:7px 13px;}
}
@media (max-width:640px){
  .yop-txt-col{text-align:center;}
  .yop-title{text-align:center;}
  .yop-sub{text-align:center;}
  .yop-cta-row.hlt-btns{max-width:13rem;margin:0 auto;}
  .yop-hero{padding:142px 0 56px;}
  .yop-cta-row{flex-direction:column;align-items:stretch;}
  .yop-btn-p,.yop-btn-o,
  .yop-cta-row .btn-primary{justify-content:center;}
  .yop-stats{gap:14px;}
  .yop-stat-divider{display:none;}
  .yop-ticket{min-width:150px;font-size:11px;padding:10px 12px;}
  .yop-ticket-1{left:0;top:-24px;}
  .yop-ticket-2{right:0;bottom:auto;top:auto;}
  .yop-chip-1{right:0;}
  .yop-chip-2{left:0;bottom:60px;}
  .yop-notif-pop{right:0;top:auto;bottom:-40px;}
  .yop-menu-grid{grid-template-columns:repeat(2,1fr);}
  .yop-shot-chip{font-size:10.5px;padding:6px 11px;gap:7px;}
  .yop-shot-chip-live{left:-4px;top:26px;}
  .yop-shot-chip-pay{right:-4px;bottom:12px;}
  .yop-shot-check{width:22px;height:22px;font-size:11px;}
}