@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600;700&display=swap');

.flowfresh{
  --ff-bg:#e9dfcd; --ff-card:#f4eee0; --ff-ink:#14140f; --ff-muted:#5c574c;
  --ff-line:#d8ccb4; --ff-accent:#b23a1e; --ff-accent-2:#c8502f;
  --ff-sol1:#9945ff; --ff-sol2:#14f195; --ff-poly:#8247e5;
}
.flowfresh *{box-sizing:border-box}
.flowfresh .wrap{max-width:1120px;margin:0 auto;padding:72px 24px 96px;}

.flowfresh .kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ff-accent);
  font-weight:600;text-align:center;margin:0 0 12px;}
.flowfresh h2.title{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(30px,4vw,44px);
  text-align:center;margin:0 0 14px;line-height:1.08;color:var(--ff-ink);}
.flowfresh .sub{text-align:center;color:var(--ff-muted);max-width:560px;margin:0 auto 8px;font-size:16px;line-height:1.6;}

.flowfresh .ff-counter{display:block;text-align:center;font-size:13px;color:var(--ff-muted);margin:10px 0 0;letter-spacing:.02em;}
.flowfresh .ff-counter b{color:var(--ff-accent);font-weight:700;}

/* ---- stage ---- */
.flowfresh .stage-outer{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:30px;}
.flowfresh .stage{position:relative;width:340px;height:520px;
  perspective:1400px;
  transition:transform 1.15s cubic-bezier(.66,0,.2,1);transform-origin:78% 66%;}
.flowfresh .stage.zoom{transform:scale(2.15) translate(-8%,-6%);}

/* floor shadow */
.flowfresh .shadow{position:absolute;left:50%;bottom:-6px;width:250px;height:34px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(20,20,15,.22),transparent 70%);
  filter:blur(2px);animation:ff-breathe 4.5s ease-in-out infinite;}

/* ---- machine ---- */
.flowfresh .machine{position:absolute;inset:0;animation:ff-bob 4.5s ease-in-out infinite;transform-origin:50% 100%;}
@keyframes ff-bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(.3deg)}}
@keyframes ff-breathe{0%,100%{opacity:.9;width:250px}50%{opacity:.65;width:225px}}

.flowfresh .body{position:absolute;left:26px;top:8px;width:288px;height:498px;border-radius:22px;
  background:linear-gradient(160deg,#2b2b26 0%,#1b1b17 55%,#141410 100%);
  box-shadow:0 30px 55px -22px rgba(20,20,15,.55),inset 0 2px 0 rgba(255,255,255,.06),
  inset 0 -18px 30px rgba(0,0,0,.4);}
.flowfresh .body:before{content:"";position:absolute;left:14px;top:14px;right:14px;bottom:96px;border-radius:14px;
  background:linear-gradient(180deg,#0e0e0b,#17170f);border:1px solid rgba(255,255,255,.05);}

/* top sign */
.flowfresh .sign{position:absolute;left:34px;top:26px;right:34px;height:44px;border-radius:9px;z-index:3;
  background:linear-gradient(180deg,#f4eee0,#e6dcc6);display:flex;align-items:center;justify-content:center;
  gap:9px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 3px 10px rgba(0,0,0,.35);}
.flowfresh .sign .drop{width:15px;height:19px;background:radial-gradient(circle at 40% 35%,#8fd3ff,#2f93d8);
  border-radius:0 60% 60% 60%;transform:rotate(45deg);animation:ff-glow 2.6s ease-in-out infinite;}
.flowfresh .sign b{font-family:'Playfair Display',serif;font-weight:600;letter-spacing:.04em;font-size:17px;color:#20201a;}
@keyframes ff-glow{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(47,147,216,0))}
  50%{filter:brightness(1.25) drop-shadow(0 0 7px rgba(90,190,255,.7))}}

/* glass window with shelves */
.flowfresh .glass{position:absolute;left:32px;top:82px;right:32px;height:264px;border-radius:10px;z-index:2;overflow:hidden;
  background:linear-gradient(150deg,rgba(150,205,235,.16),rgba(120,180,220,.06) 40%,rgba(255,255,255,.03));
  border:2px solid rgba(255,255,255,.09);
  box-shadow:inset 0 0 24px rgba(0,0,0,.55);}
.flowfresh .glass:after{content:"";position:absolute;top:-40%;left:-60%;width:55%;height:200%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  animation:ff-sheen 6s ease-in-out infinite;}
@keyframes ff-sheen{0%,72%{left:-60%}92%,100%{left:130%}}
.flowfresh .shelf{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.14);}
.flowfresh .row{position:absolute;left:14px;right:14px;display:flex;justify-content:space-between;}
.flowfresh .bottle{width:20px;height:52px;position:relative;border-radius:7px 7px 5px 5px;
  background:linear-gradient(180deg,rgba(190,230,250,.85),rgba(120,185,225,.75));
  box-shadow:inset -3px 0 4px rgba(0,0,0,.15),inset 3px 0 4px rgba(255,255,255,.4);
  animation:ff-shimmer 3.4s ease-in-out infinite;}
.flowfresh .bottle:before{content:"";position:absolute;left:6px;top:-7px;width:8px;height:8px;border-radius:2px;
  background:#e7f4fc;}
.flowfresh .bottle .lbl{position:absolute;left:2px;right:2px;top:15px;height:19px;border-radius:3px;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.15);}
.flowfresh .bottle .lbl img{width:15px;height:15px;object-fit:contain;display:block;}
@keyframes ff-shimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}

/* keypad + panel on lower right */
.flowfresh .panel{position:absolute;right:40px;bottom:104px;width:74px;z-index:4;}
.flowfresh .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.flowfresh .keys span{height:15px;border-radius:3px;background:linear-gradient(180deg,#3a3a33,#26261f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.flowfresh .keys span:nth-child(2){animation:ff-press 5s ease-in-out infinite;}
@keyframes ff-press{0%,88%,100%{background:linear-gradient(180deg,#3a3a33,#26261f)}
  92%{background:var(--ff-accent);box-shadow:0 0 8px rgba(178,58,30,.8)}}

/* dispenser slot */
.flowfresh .slot{position:absolute;left:40px;bottom:56px;width:180px;height:40px;border-radius:8px;z-index:3;
  background:linear-gradient(180deg,#0a0a08,#141410);box-shadow:inset 0 6px 12px rgba(0,0,0,.7);}
.flowfresh .slot:before{content:"PUSH";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:rgba(255,255,255,.25);font-size:9px;letter-spacing:.2em;}

/* the card TERMINAL — this is what the camera zooms to */
.flowfresh .terminal{position:absolute;right:34px;bottom:150px;width:86px;height:112px;border-radius:11px;z-index:6;
  background:linear-gradient(165deg,#33332c,#1d1d18);
  box-shadow:0 8px 18px -6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.06);overflow:hidden;}
.flowfresh .term-screen{position:absolute;left:8px;right:8px;top:8px;height:60px;border-radius:6px;
  background:radial-gradient(circle at 50% 30%,#12312b,#07130f);overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#8ff0c8;
  box-shadow:inset 0 0 10px rgba(0,0,0,.7);}
.flowfresh .term-screen .scanline{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(143,240,200,.06) 50%,transparent);
  background-size:100% 6px;animation:ff-scan 3s linear infinite;opacity:.5;}
@keyframes ff-scan{0%{background-position:0 0}100%{background-position:0 60px}}
.flowfresh .term-nfc{width:26px;height:26px;border-radius:50%;border:2px solid rgba(143,240,200,.55);
  position:relative;animation:ff-pulse 1.8s ease-in-out infinite;}
.flowfresh .term-nfc:before,.flowfresh .term-nfc:after{content:"";position:absolute;border:2px solid rgba(143,240,200,.4);
  border-radius:50%;inset:-6px;animation:ff-ring 1.8s ease-out infinite;}
.flowfresh .term-nfc:after{inset:-12px;animation-delay:.5s;}
@keyframes ff-ring{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.15)}}
@keyframes ff-pulse{0%,100%{opacity:1}50%{opacity:.6}}
.flowfresh .term-keys{position:absolute;left:8px;right:8px;bottom:8px;height:34px;display:grid;
  grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:3px;}
.flowfresh .term-keys i{border-radius:2px;background:#2a2a23;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}

/* legs */
.flowfresh .leg{position:absolute;bottom:-6px;width:20px;height:14px;background:#0d0d0a;border-radius:0 0 4px 4px;z-index:1;}
.flowfresh .leg.l{left:52px;} .flowfresh .leg.r{right:52px;}

/* ---------- OVERLAY (payment UI drawn over the terminal on zoom) ---------- */
.flowfresh .pay{position:absolute;right:34px;bottom:110px;width:86px;height:195px;z-index:9;border-radius:11px;
  overflow:hidden;opacity:0;pointer-events:none;transition:opacity .4s ease .35s;
  background:linear-gradient(165deg,#101913,#070d0a);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 6px 14px;}
.flowfresh .ff-payhead{width:100%;flex-shrink:0;height:20px;border-bottom:1px solid rgba(143,240,200,.15);
  position:relative;margin-bottom:8px;}
.flowfresh .stage.show-pay .pay{opacity:1;pointer-events:auto;}
.flowfresh .stage.show-pay .terminal{opacity:0;transition:opacity .3s;}
.flowfresh .pay .p-inner{transform:scale(.42);transform-origin:top center;width:200px;}
.flowfresh .ff-payhead .ff-close{position:absolute;top:1px;right:2px;width:16px;height:16px;border-radius:50%;z-index:10;
  border:none;background:#8ff0c8;color:#07130f;font-size:11px;font-weight:700;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .15s,background .2s;}
.flowfresh .ff-payhead .ff-close:hover{background:#b6f7db;transform:scale(1.1);}
.flowfresh .p-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8ff0c8;text-align:center;margin-bottom:10px;font-weight:600;}

/* card view */
.flowfresh .logos{display:flex;gap:10px;justify-content:center;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
.flowfresh .lg{height:34px;padding:0 12px;border-radius:8px;display:flex;align-items:center;font-weight:700;font-size:15px;
  background:#fff;color:#1a1a1a;box-shadow:0 4px 10px rgba(0,0,0,.3);}
.flowfresh .lg.visa{color:#1a1f71;font-style:italic;}
.flowfresh .lg.mc{gap:0;padding:0 8px;}
.flowfresh .lg.mc .c{width:20px;height:20px;border-radius:50%;}
.flowfresh .lg.mc .c1{background:#eb001b;} .flowfresh .lg.mc .c2{background:#f79e1b;margin-left:-9px;mix-blend-mode:multiply;}
.flowfresh .lg.pp{background:#003087;color:#fff;font-style:italic;} .flowfresh .lg.pp span{color:#009cde;}
.flowfresh .tap{margin:6px auto 0;width:120px;height:80px;border-radius:12px;position:relative;
  background:linear-gradient(135deg,#1e5c50,#0d2b25);border:1px solid rgba(143,240,200,.3);
  display:flex;align-items:center;justify-content:center;}
.flowfresh .tap .nfc{width:44px;height:44px;border-radius:50%;border:3px solid rgba(143,240,200,.6);animation:ff-pulse 1.6s infinite;}
.flowfresh .tap .nfc:before,.flowfresh .tap .nfc:after{content:"";position:absolute;border:3px solid rgba(143,240,200,.5);border-radius:50%;inset:-10px;animation:ff-ring 1.6s ease-out infinite;}
.flowfresh .tap .nfc:after{inset:-20px;animation-delay:.5s;}
.flowfresh .tap .card{position:absolute;width:96px;height:60px;border-radius:8px;right:-70px;top:10px;
  background:linear-gradient(135deg,#b23a1e,#5c1e10);box-shadow:0 8px 18px rgba(0,0,0,.4);
  animation:ff-tapin 2.4s ease-in-out infinite;}
.flowfresh .tap .card:before{content:"";position:absolute;left:10px;top:14px;width:16px;height:12px;border-radius:2px;background:#e7c778;}
@keyframes ff-tapin{0%{right:-80px;opacity:0}25%{opacity:1}45%,55%{right:24px;opacity:1}80%,100%{right:-80px;opacity:0}}
.flowfresh .p-hint{text-align:center;color:#7fd8b4;font-size:13px;margin-top:12px;letter-spacing:.05em;}

/* crypto view */
.flowfresh .netsw{display:flex;gap:8px;justify-content:center;margin-bottom:14px;}
.flowfresh .netsw button{font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:20px;cursor:pointer;
  border:1px solid rgba(143,240,200,.3);background:transparent;color:#cfeee0;transition:.2s;}
.flowfresh .netsw button.on{color:#07130f;background:#8ff0c8;border-color:#8ff0c8;}
.flowfresh .confirm{font:inherit;font-size:14px;font-weight:600;padding:9px 20px;border-radius:22px;cursor:pointer;
  border:none;background:#8ff0c8;color:#07130f;} .flowfresh .confirm:hover{background:#b6f7db;}
.flowfresh .confirm.alt{background:transparent;border:1px solid rgba(143,240,200,.45);color:#8ff0c8;}
.flowfresh .confirm.alt:hover{background:rgba(143,240,200,.12);}
.flowfresh .qrbox{width:150px;height:150px;margin:0 auto;background:#fff;border-radius:10px;padding:10px;box-shadow:0 6px 16px rgba(0,0,0,.35);}
.flowfresh .qrbox svg{width:100%;height:100%;display:block;}
.flowfresh .addr{margin:10px auto 0;font-family:ui-monospace,monospace;font-size:11px;color:#7fd8b4;text-align:center;
  max-width:180px;word-break:break-all;line-height:1.5;}
.flowfresh .chip{display:inline-block;margin-top:8px;font-size:11px;padding:3px 10px;border-radius:20px;background:rgba(143,240,200,.12);color:#8ff0c8;}


.flowfresh .ff-toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);z-index:9999;
  background:var(--ff-ink);color:#8ff0c8;padding:.9rem 1.6rem;border-radius:8px;font-weight:600;letter-spacing:.04em;
  font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 10px 30px rgba(0,0,0,.35);}
.flowfresh .ff-toast.show{opacity:1;transform:translate(-50%,0);}

/* ---- controls ---- */
.flowfresh .controls{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;transition:opacity .4s;}
.flowfresh .controls.hidden{opacity:0;pointer-events:none;height:0;overflow:hidden;}
.flowfresh .btn{font:inherit;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:none;padding:16px 30px;border:none;cursor:pointer;
  display:flex;align-items:center;gap:12px;transition:transform .2s,background .2s;}
.flowfresh .btn.primary{background:var(--ff-ink);color:#f6f0e3;}
.flowfresh .btn.primary:hover{transform:translateY(-2px);background:#26261f;}
.flowfresh .btn.ghost{background:transparent;color:var(--ff-ink);border:1.5px solid var(--ff-ink);}
.flowfresh .btn.ghost:hover{transform:translateY(-2px);background:var(--ff-ink);color:#f6f0e3;}
.flowfresh .btn .ar{transition:transform .2s;} .flowfresh .btn:hover .ar{transform:translateX(4px);}
@media(max-width:520px){.flowfresh .stage.zoom{transform:scale(1.7) translate(-6%,-4%)}}

.flowfresh .brandlogo{display:block;height:92px;width:auto;margin:0 auto 20px;object-fit:contain;mix-blend-mode:multiply;}
@media(max-width:520px){.flowfresh .brandlogo{height:64px}}

.flowfresh .drop-bottle{position:absolute;left:120px;top:300px;width:22px;height:56px;z-index:7;opacity:0;pointer-events:none;
  border-radius:7px 7px 5px 5px;
  background:linear-gradient(180deg,rgba(190,230,250,.95),rgba(120,185,225,.85));
  box-shadow:inset -3px 0 4px rgba(0,0,0,.15),inset 3px 0 4px rgba(255,255,255,.4);}
.flowfresh .drop-bottle:before{content:"";position:absolute;left:7px;top:-7px;width:8px;height:8px;border-radius:2px;background:#e7f4fc;}
.flowfresh .drop-bottle .dl{position:absolute;left:2px;right:2px;top:16px;height:20px;border-radius:3px;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.15);}
.flowfresh .drop-bottle .dl img{width:16px;height:16px;object-fit:contain;}
.flowfresh .stage.dispense .drop-bottle{animation:ff-fall 1.35s cubic-bezier(.45,0,.55,1) forwards;}
@keyframes ff-fall{
  0%{opacity:0;transform:translateY(-50px) rotate(-6deg) scale(.9)}
  12%{opacity:1}
  48%{transform:translateY(116px) rotate(2deg) scale(1)}
  58%{transform:translateY(116px) rotate(0) scaleY(.86) scaleX(1.08)}
  68%{transform:translateY(108px) scaleY(1.04) scaleX(.97)}
  78%{transform:translateY(118px) rotate(0) scale(1)}
  100%{opacity:1;transform:translateY(118px) translateX(9px) rotate(90deg)}}
.flowfresh .slot.flash{animation:ff-slotflash .5s ease}
@keyframes ff-slotflash{0%,100%{box-shadow:inset 0 6px 12px rgba(0,0,0,.7)}50%{box-shadow:inset 0 6px 12px rgba(0,0,0,.7),0 0 14px rgba(143,240,200,.6)}}