/* ============ NFC LAB: phone polish ============
   Loaded only with media="(max-width: 660px)", so the desktop layout is untouched. */

/* ---------- Touch feel ---------- */
a,button,summary{-webkit-tap-highlight-color:transparent}
.button,.price-card-button,.quantity-presets button,.solution-link,.sample-open,.contact-link,.free-design-btn,.demo-order,.demo-flip,.mbar a,.mnav-btn{transition:transform .15s ease,background-color .2s,border-color .2s,color .2s}
.button:active,.price-card-button:active,.quantity-presets button:active,.solution-link:active,.free-design-btn:active,.demo-order:active,.demo-flip:active,.mbar a:active,.mnav-btn:active,.contact-link:active{transform:scale(.97)}
html.nav-open,html.nav-open body{overflow:hidden}
body{overflow-x:clip}

/* ---------- Header + full-screen menu ---------- */
.mobile-nav:not([hidden]){position:absolute;top:100%;left:0;right:0;height:calc(100dvh - 69px);max-height:none;overflow-y:auto;display:flex;flex-direction:column;
  padding:6px 22px 28px;background:var(--bg);border-bottom:0;box-shadow:none;counter-reset:mnav;animation:mnav-in .28s cubic-bezier(.2,.7,.2,1)}
@keyframes mnav-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mobile-nav>a{counter-increment:mnav;display:flex;align-items:baseline;gap:14px;font-size:24px;line-height:1.15;letter-spacing:-.03em;color:var(--text);padding:15px 0;border-bottom:1px solid var(--line)}
.mobile-nav>a:before{content:counter(mnav,decimal-leading-zero);font-size:10px;letter-spacing:.12em;color:var(--accent);min-width:20px;transform:translateY(-4px)}
.mobile-nav>a:last-of-type{border-bottom:0}
.mnav-cta{display:grid;gap:10px;margin-top:auto;padding-top:22px}
.mnav-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:14px;font-size:15px;font-weight:700}
.mnav-main{background:var(--accent);color:var(--bg)}
.mnav-wa{border:1px solid var(--line);color:var(--text)}
.mnav-wa svg{width:19px;height:19px;color:var(--accent)}

/* ---------- Hero ---------- */
.hero{padding-bottom:18px}
.hero-actions .button{min-height:56px;border-radius:14px}

/* ---------- Swipe carousels ---------- */
.solutions-grid,.price-grid,.examples-grid{display:flex!important;grid-template-columns:none!important;gap:12px!important;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;
  margin-left:-22px;margin-right:-22px;padding:4px 22px 6px;scroll-padding-left:22px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.solutions-grid::-webkit-scrollbar,.price-grid::-webkit-scrollbar,.examples-grid::-webkit-scrollbar{display:none}
.solutions-grid>*,.price-grid>*,.examples-grid>*{flex:0 0 84%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.price-grid{padding-top:16px;align-items:stretch}
.price-grid>.price-card{margin:0}
.m-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:16px}
.m-dots button{width:7px;height:7px;padding:0;border-radius:10px;background:var(--palette-3a4434,#3a4434);transition:width .3s,background-color .3s}
.m-dots button.on{width:22px;background:var(--accent)}
.m-dots button:before{content:'';position:absolute;inset:-12px -4px}
.m-dots button{position:relative}

/* Solutions cards inside the carousel */
.solution-stage{height:270px}
.solution-stage .nfc-card{width:min(46%,150px)}
.solution-info{padding:20px 20px 22px}
.solution-info h3{font-size:22px}
.solution-info p{font-size:13px;line-height:1.65;margin-bottom:18px}
.solution-actions{gap:8px 14px}
.free-design{margin-top:18px}

/* Examples cards inside the carousel */
.card-example{display:flex;flex-direction:column}

/* ---------- Bottom action bar ---------- */
.mbar{display:flex;gap:8px;position:fixed;left:12px;right:12px;bottom:12px;z-index:25;padding:6px;border-radius:18px;
  background:color-mix(in srgb,var(--palette-10140f,#10140f) 86%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line);box-shadow:0 14px 40px #000a;transform:translateY(150%);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
.mbar.show{transform:none;opacity:1;pointer-events:auto}
.mbar-calc{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;height:50px;padding:0 18px;border-radius:13px;background:var(--accent);color:var(--bg);font-size:14px;font-weight:700}
.mbar-calc svg{width:18px;height:18px}
.mbar-wa{width:50px;height:50px;flex-shrink:0;display:grid;place-items:center;border-radius:13px;border:1px solid var(--line);color:var(--accent)}
.mbar-wa svg{width:21px;height:21px}
.to-top{transition:opacity .3s,translate .3s,bottom .35s cubic-bezier(.2,.7,.2,1)}
html.mbar-on .to-top{bottom:84px}

/* ---------- Dialogs become bottom sheets ---------- */
.example-dialog,.example-dialog.demo-v2,.example-dialog.gallery-v2{width:100%;max-width:100%;max-height:calc(100dvh - 20px);margin:auto 0 0;border-radius:22px 22px 0 0;border-left:0;border-right:0;border-bottom:0;overscroll-behavior:contain}
.example-dialog[open]{animation:sheet-up .38s cubic-bezier(.2,.8,.2,1)}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
.dialog-top{position:sticky;top:0;z-index:6;background:var(--palette-10170c,#10170c);min-height:56px;padding:14px 16px 10px 20px}
.dialog-top:before{content:'';position:absolute;top:7px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:var(--palette-3a4434,#3a4434)}
.dialog-top button{width:38px;height:38px;min-width:38px;min-height:38px;border-radius:50%;background:#ffffff0d;display:grid;place-items:center;font-size:22px;padding:0}
.dialog-top button:focus-visible{outline:none;box-shadow:0 0 0 1.5px var(--accent)}
.dialog-note{padding-bottom:22px}

/* Design dialog: card and phone side by side */
.demo-visual{padding:20px 14px 18px;gap:16px}
.demo-stage{flex-direction:row!important;align-items:center;justify-content:center;gap:14px!important}
.demo-card{width:41%!important;flex-shrink:0}
.demo-phone-wrap{zoom:.74;gap:12px}
.demo-text{padding:22px 20px 24px}
.demo-text h2{font-size:28px}
.demo-text>p{font-size:14px;line-height:1.65}
.demo-feats li{font-size:14px}
.demo-order{min-height:54px;border-radius:14px}

/* Gallery sheet */
.gal-wrap{padding:16px 16px 24px}
.gal-head{margin-bottom:18px;gap:8px}
.gal-head h2{font-size:26px}
.gal-grid{gap:10px}
.gal-item{padding:12px 6px 10px}
.gal-foot{gap:14px}
.gal-foot .demo-order{min-height:54px}

/* ---------- Footer ---------- */
.footer-inner{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:0;padding-top:30px;padding-bottom:34px}
.footer-links{order:2;display:flex;flex-wrap:wrap;gap:8px;width:100%}
.footer-links a{font-size:12px;padding:9px 14px;border:1px solid var(--line);border-radius:30px;color:var(--palette-b3c1a8,#b3c1a8)}
.footer-inner>a:last-child{order:3;font-size:11px}
.footer-inner>span{order:4;font-size:10px}

@media(max-width:360px){
  .solutions-grid,.price-grid,.examples-grid{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px;scroll-padding-left:18px}
  .solutions-grid>*,.price-grid>*,.examples-grid>*{flex-basis:86%}
  .mobile-nav>a{font-size:21px;padding:13px 0}
  .demo-phone-wrap{zoom:.66}
  .mbar-calc{font-size:13px;padding:0 14px}
}
@media (prefers-reduced-motion:reduce){.example-dialog[open],.mobile-nav:not([hidden]){animation:none}.mbar{transition:none}}
.mobile-nav .mnav-btn{padding:0 18px;border-bottom:0;font-size:15px;line-height:1}
.mobile-nav .mnav-main{color:var(--bg);background:var(--accent)}
.mobile-nav .mnav-wa{color:var(--text);border:1px solid var(--line)}

/* Hero secondary links side by side */
.hero-links{flex-direction:row;justify-content:center;align-items:center;gap:6px 22px;flex-wrap:wrap}
.hero-actions .hero-links .text-link{min-height:44px}
.hero-grid-ico svg{width:12px;height:12px}

/* phone carousels: no up/down jumps, only smooth left/right swiping */
@media (max-width:660px){
  .solutions-grid>.reveal,.price-grid>.reveal,.examples-grid>.reveal{opacity:1!important;translate:none!important;transition:none!important}
  .solutions-grid>*,.price-grid>*,.examples-grid>*,
  .solutions-grid>*:hover,.price-grid>*:hover,.examples-grid>*:hover{transform:none!important}
  .solutions-grid,.price-grid,.examples-grid{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
}