/* Fastoolee Playful Geometric layer
   Stable grid + energetic decoration. Keeps the Fastoolee blue/orange identity. */
:root{
  --pg-bg:#FFFDF5;
  --pg-surface:#FFFFFF;
  --pg-ink:#1E293B;
  --pg-muted:#64748B;
  --pg-blue:#0B67D7;
  --pg-blue-2:#0A84F7;
  --pg-orange:#FF8A00;
  --pg-yellow:#FBBF24;
  --pg-mint:#34D399;
  --pg-pink:#F472B6;
  --pg-border:#1E293B;
  --pg-soft-border:#E2E8F0;
  --pg-radius-sm:8px;
  --pg-radius-md:16px;
  --pg-radius-lg:24px;
  --pg-radius-xl:30px;
  --pg-pop:4px 4px 0 var(--pg-ink);
  --pg-pop-hover:6px 6px 0 var(--pg-ink);
  --pg-pop-active:2px 2px 0 var(--pg-ink);
  --pg-soft-pop:7px 7px 0 #DDE7F3;
  --pg-ease:cubic-bezier(.34,1.56,.64,1);

  /* bridge existing tokens */
  --bg:var(--pg-bg);
  --text:var(--pg-ink);
  --muted:var(--pg-muted);
  --accent:var(--pg-blue);
  --accent-light:var(--pg-blue-2);
  --success:#159A6C;
  --radius-card:var(--pg-radius-lg);
  --radius-control:var(--pg-radius-md);
  --focus:0 0 0 3px rgba(11,103,215,.18),4px 4px 0 rgba(11,103,215,.95);
  --raised:var(--pg-soft-pop);
  --raised-sm:4px 4px 0 #DDE7F3;
  --inset:inset 0 0 0 2px #CBD5E1;
}

html{background:var(--pg-bg)}
body{
  background:
    radial-gradient(circle at 14px 14px,rgba(11,103,215,.06) 1.6px,transparent 1.8px) 0 0/28px 28px,
    var(--pg-bg)!important;
  color:var(--pg-ink);
  font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  overflow-x:hidden;
}
html[dir="rtl"] body{font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif}
h1,h2,h3,.eyebrow,.btn,.brand,.suite-note,.field label,.field .label,legend,.trust-card strong,.footer-col h2{
  font-family:Outfit,"Plus Jakarta Sans",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] .eyebrow,html[dir="rtl"] .btn{font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif}
p{color:var(--pg-muted)}

/* Header */
.site-header{
  background:rgba(255,253,245,.94)!important;
  border-bottom:2px solid var(--pg-ink);
  box-shadow:none!important;
  backdrop-filter:blur(12px);
}
.nav{min-height:76px}
.brand-logo{height:44px!important;max-width:155px!important}
.brand>span{display:none}
.nav-links>a,.lang-menu summary{
  border:2px solid transparent;
  border-radius:999px!important;
  font-weight:800;
  transition:transform .25s var(--pg-ease),background-color .2s ease,border-color .2s ease,box-shadow .25s var(--pg-ease)!important;
}
.nav-links>a:hover,.lang-menu summary:hover{
  background:#fff;
  border-color:var(--pg-ink);
  box-shadow:3px 3px 0 var(--pg-yellow)!important;
  transform:translate(-1px,-1px)!important;
}
.lang-list{
  background:#fff!important;
  border:2px solid var(--pg-ink);
  border-radius:20px!important;
  box-shadow:6px 6px 0 var(--pg-ink)!important;
}
.lang-list a{border:2px solid transparent;border-radius:12px!important;font-weight:700}
.lang-list a:hover,.lang-list a:focus-visible{background:#FFF5D6;border-color:var(--pg-ink);box-shadow:none!important}
.menu-btn{
  background:var(--pg-yellow)!important;
  border:2px solid var(--pg-ink)!important;
  border-radius:14px!important;
  box-shadow:3px 3px 0 var(--pg-ink)!important;
}
.menu-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--pg-ink)!important}
.menu-icon .bar{background:var(--pg-ink)!important}

/* Shared playful surfaces */
.surface,.content-card,.trust-card,.contact-card,.faq details,.language-card{
  background:var(--pg-surface)!important;
  border:2px solid var(--pg-ink)!important;
  box-shadow:var(--pg-soft-pop)!important;
}
.surface,.content-card,.trust-card,.contact-card,.faq details,.language-card,.tool-card-link,.suite-card{
  transition:transform .28s var(--pg-ease),box-shadow .28s var(--pg-ease),background-color .2s ease!important;
}

/* Buttons */
.btn{
  min-height:48px;
  padding:.72rem 1.08rem;
  border:2px solid var(--pg-ink)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:var(--pg-ink)!important;
  box-shadow:var(--pg-pop)!important;
  font-weight:800;
  letter-spacing:-.01em;
  transition:transform .22s var(--pg-ease),box-shadow .22s var(--pg-ease),background-color .2s ease!important;
}
.btn:hover{transform:translate(-2px,-2px)!important;box-shadow:var(--pg-pop-hover)!important}
.btn:active{transform:translate(2px,2px)!important;box-shadow:var(--pg-pop-active)!important}
.btn.primary{background:linear-gradient(135deg,var(--pg-blue),var(--pg-blue-2))!important;color:#fff!important}
.btn.secondary{background:#fff!important;color:var(--pg-ink)!important}
.btn.secondary:hover{background:var(--pg-yellow)!important}
.btn.danger:hover{background:#FEE2E2!important}
.btn[disabled]{box-shadow:2px 2px 0 #94A3B8!important;transform:none!important;filter:saturate(.35)}

/* Focus */
.nav a:focus-visible,.nav button:focus-visible,.nav summary:focus-visible,.btn:focus-visible,.tool-card-link:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.faq summary:focus-visible{
  outline:3px solid var(--pg-blue)!important;
  outline-offset:3px;
  box-shadow:4px 4px 0 var(--pg-blue)!important;
}

/* Hero: keep the current Fastoolee imagery, add playful paper/sticker energy */
.homepage-hero{
  position:relative;
  min-height:clamp(470px,50vw,610px)!important;
  border-radius:0 0 42px 42px!important;
  border-bottom:2px solid var(--pg-ink);
  overflow:hidden;
}
.homepage-hero::before{
  content:"";
  position:absolute;
  z-index:0;
  width:clamp(250px,31vw,470px);
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(251,191,36,.80);
  border:2px solid var(--pg-ink);
  inset-inline-start:clamp(-150px,-8vw,-70px);
  top:50%;
  transform:translateY(-50%);
  box-shadow:10px 10px 0 rgba(30,41,59,.12);
  pointer-events:none;
}
.homepage-hero::after{
  content:"";
  position:absolute;
  z-index:0;
  width:170px;
  height:118px;
  inset-inline-end:4.5%;
  bottom:7%;
  background:radial-gradient(circle,var(--pg-blue) 2px,transparent 2.8px) 0 0/18px 18px;
  opacity:.22;
  transform:rotate(-7deg);
  pointer-events:none;
}
.homepage-hero .container{position:relative;z-index:1}
.homepage-hero .hero-copy{
  max-width:650px!important;
  position:relative;
  padding:clamp(1.3rem,3vw,2rem)!important;
  border:2px solid var(--pg-ink);
  border-radius:30px 30px 30px 6px;
  background:rgba(255,253,245,.89);
  box-shadow:9px 9px 0 var(--pg-ink);
  backdrop-filter:blur(10px);
}
html[dir="rtl"] .homepage-hero .hero-copy{border-radius:30px 30px 6px 30px}
.homepage-hero .hero-copy::before{
  content:"";
  position:absolute;
  width:24px;height:24px;
  background:var(--pg-orange);
  border:2px solid var(--pg-ink);
  border-radius:7px;
  inset-inline-end:24px;
  top:-14px;
  transform:rotate(12deg);
}
.homepage-hero .hero-copy h1{
  color:var(--pg-ink)!important;
  text-shadow:none!important;
  font-weight:800;
  letter-spacing:-.045em;
}
.homepage-hero .hero-copy p{color:#475569!important;font-weight:500}
.eyebrow{
  color:var(--pg-blue)!important;
  background:#E9F4FF;
  border:2px solid var(--pg-ink);
  border-radius:999px;
  padding:.38rem .72rem;
  box-shadow:3px 3px 0 var(--pg-yellow);
  text-shadow:none!important;
  letter-spacing:.06em;
}
.homepage-hero .btn.primary{background:linear-gradient(135deg,var(--pg-blue),var(--pg-blue-2))!important;box-shadow:var(--pg-pop)!important}
.homepage-hero .btn.primary:hover{background:linear-gradient(135deg,var(--pg-blue),var(--pg-orange))!important;box-shadow:var(--pg-pop-hover)!important}

/* Non-home heroes */
.page-qrhub .hero,.page-tool .hero,.hero.compact:not(.homepage-hero){
  position:relative;
  isolation:isolate;
  background:#fff!important;
  border:2px solid var(--pg-ink);
  border-radius:28px!important;
  box-shadow:7px 7px 0 #DBEAFE;
  overflow:hidden;
  margin-top:1.2rem;
  padding-inline:clamp(1.2rem,4vw,2.6rem)!important;
}
.page-qrhub .hero::after,.page-tool .hero::after,.hero.compact:not(.homepage-hero)::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:180px;height:180px;
  border-radius:50%;
  background:var(--pg-yellow);
  border:2px solid var(--pg-ink);
  inset-inline-end:-70px;
  top:-90px;
  opacity:.9;
}

/* Sections: stable readable grid with geometric decoration */
.page-home #tools,.page-home .trust-section,.page-qrhub #tools,.page-qrhub .trust-section,.page-tool .section:nth-of-type(1),.page-tool .section:nth-of-type(2),.page-tool .section:nth-of-type(3){
  position:relative;
  background:transparent!important;
}
.page-home #tools::before,.page-qrhub #tools::before{
  content:"";
  position:absolute;
  width:120px;height:120px;
  border-radius:50% 50% 12% 50%;
  background:#DBEAFE;
  border:2px solid var(--pg-ink);
  inset-inline-end:max(18px,4vw);
  top:18px;
  transform:rotate(12deg);
  z-index:-1;
}
.section-head h2{font-weight:800;letter-spacing:-.035em}
.section-head h2::after{
  content:"";
  display:block;
  width:72px;height:8px;
  margin-top:.45rem;
  background:repeating-linear-gradient(90deg,var(--pg-orange) 0 10px,transparent 10px 15px);
  border-radius:999px;
}
html[dir="rtl"] .section-head h2::after{margin-inline-start:0}

/* Homepage suite card */
.suite-card{
  background:#fff!important;
  border:2px solid var(--pg-ink)!important;
  border-radius:30px!important;
  box-shadow:10px 10px 0 #BFDBFE!important;
  overflow:visible!important;
}
.suite-card-link{border-radius:28px;overflow:hidden;isolation:isolate}
.suite-card-link::before{
  background-image:
    radial-gradient(circle,var(--pg-blue) 2px,transparent 2.5px),
    linear-gradient(135deg,transparent 65%,rgba(251,191,36,.22) 65%)!important;
  background-size:22px 22px,100% 100%!important;
  background-position:right top!important;
  opacity:.35!important;
}
.suite-card:hover{transform:rotate(-.4deg) scale(1.008);box-shadow:12px 12px 0 var(--pg-orange)!important}
.suite-note{
  background:#FFF5D6!important;
  border:2px solid var(--pg-ink);
  box-shadow:3px 3px 0 var(--pg-yellow)!important;
  color:var(--pg-ink)!important;
}
.chip-list li{
  background:#fff;
  border:2px solid var(--pg-ink);
  box-shadow:3px 3px 0 #E2E8F0!important;
}
.chip-list li:nth-child(4n+1){background:#E9F4FF}.chip-list li:nth-child(4n+2){background:#FFF5D6}.chip-list li:nth-child(4n+3){background:#E7FBF2}.chip-list li:nth-child(4n+4){background:#FFF0E2}
.suite-icon,.qr-icon-stack{
  background:linear-gradient(145deg,#E9F4FF,#fff)!important;
  border:2px solid var(--pg-ink);
  box-shadow:7px 7px 0 var(--pg-blue)!important;
  color:var(--pg-blue)!important;
}
.qr-pattern-grid,.mini-grid{
  background:#fff!important;
  border:2px solid var(--pg-ink);
  box-shadow:5px 5px 0 var(--pg-yellow)!important;
}
.qr-pattern-grid span,.mini-grid span{background:var(--pg-ink)!important}.qr-pattern-grid span.accent,.mini-grid span.accent{background:var(--pg-orange)!important}

/* Tool cards: sticker cards */
.tools-grid,.related-grid{gap:1.35rem!important}
.tool-card-link{
  background:#fff!important;
  border:2px solid var(--pg-ink);
  border-radius:24px!important;
  box-shadow:7px 7px 0 var(--tool-shadow,#DDE7F3)!important;
  overflow:visible!important;
  min-height:100%;
}
.tool-card-link::before{
  background-image:radial-gradient(circle,rgba(30,41,59,.16) 1.5px,transparent 2px)!important;
  background-size:18px 18px!important;
  background-position:calc(100% - 12px) 12px!important;
  opacity:.35!important;
  width:95px;height:82px;inset:auto 0 auto auto!important;
}
html[dir="rtl"] .tool-card-link::before{inset:auto auto auto 0!important}
.tool-card-link:hover{transform:translate(-2px,-4px) rotate(-.7deg)!important;box-shadow:10px 10px 0 var(--tool-shadow,#DDE7F3)!important}
.tool-card-link:active{transform:translate(1px,1px)!important;box-shadow:3px 3px 0 var(--tool-shadow,#DDE7F3)!important}
.icon-well{
  width:62px!important;height:62px!important;
  background:var(--tool-icon-bg,#E9F4FF)!important;
  color:var(--tool-icon,#0B67D7)!important;
  border:2px solid var(--pg-ink);
  border-radius:50%!important;
  box-shadow:4px 4px 0 var(--tool-shadow,#DDE7F3)!important;
}
.icon-well svg{stroke-width:2.35px}
.card-accent{display:none}
[data-tool-type="generic"],[data-tool-type="phone"],[data-tool-type="scanner"]{--tool-shadow:#BFDBFE;--tool-icon-bg:#E8F3FF;--tool-icon:#0B67D7}
[data-tool-type="wifi"],[data-tool-type="location"]{--tool-shadow:#A7F3D0;--tool-icon-bg:#E7FBF2;--tool-icon:#0F8B62}
[data-tool-type="whatsapp"],[data-tool-type="event"]{--tool-shadow:#BBF7D0;--tool-icon-bg:#ECFDF5;--tool-icon:#159A6C}
[data-tool-type="google-review"],[data-tool-type="email"]{--tool-shadow:#FDE68A;--tool-icon-bg:#FFF8D9;--tool-icon:#B77900}
[data-tool-type="vcard"],[data-tool-type="sms"],[data-tool-type="logo"]{--tool-shadow:#FED7AA;--tool-icon-bg:#FFF0E2;--tool-icon:#E56D00}

/* Trust cards */
.trust-grid{gap:1.2rem!important}
.trust-card{
  position:relative;
  border-radius:22px!important;
  padding:1.35rem!important;
  overflow:visible;
}
.trust-card:nth-child(4n+1){box-shadow:7px 7px 0 #BFDBFE!important}
.trust-card:nth-child(4n+2){box-shadow:7px 7px 0 #A7F3D0!important}
.trust-card:nth-child(4n+3){box-shadow:7px 7px 0 #FDE68A!important}
.trust-card:nth-child(4n+4){box-shadow:7px 7px 0 #FED7AA!important}
.trust-card:hover{transform:translateY(-3px) rotate(-.6deg)}
.trust-card svg{
  width:44px!important;height:44px!important;
  padding:9px;
  border-radius:50%;
  background:#E9F4FF;
  border:2px solid var(--pg-ink);
  color:var(--pg-blue)!important;
  box-shadow:3px 3px 0 var(--pg-ink);
}

/* Forms / tool panels */
.page-tool .tool-grid{background:transparent!important;padding:0!important;border-radius:0!important;gap:1.7rem!important}
.page-tool .tool-panel,.page-tool .preview-panel{
  background:#fff!important;
  border:2px solid var(--pg-ink)!important;
  box-shadow:8px 8px 0 #DDE7F3!important;
  border-radius:26px!important;
}
.page-tool .tool-panel{position:relative}
.page-tool .tool-panel::before{
  content:"";position:absolute;width:28px;height:28px;border:2px solid var(--pg-ink);background:var(--pg-orange);border-radius:8px;right:26px;top:-15px;transform:rotate(10deg);pointer-events:none
}
html[dir="rtl"] .page-tool .tool-panel::before{right:auto;left:26px;transform:rotate(-10deg)}
.control,input,select,textarea{
  background:#fff!important;
  border:2px solid #CBD5E1!important;
  border-radius:14px!important;
  box-shadow:none!important;
  min-height:50px;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s var(--pg-ease)!important;
}
input:hover,select:hover,textarea:hover{border-color:#94A3B8!important}
input:focus,select:focus,textarea:focus{
  border-color:var(--pg-blue)!important;
  box-shadow:4px 4px 0 rgba(11,103,215,.9)!important;
  transform:translate(-1px,-1px);
}
.field label,.field .label,legend{text-transform:none;font-weight:800;color:var(--pg-ink)}
.appearance,.frame-customizer,.privacy-note{
  background:#F8FAFC!important;
  border:2px dashed #94A3B8!important;
  border-radius:20px!important;
  box-shadow:none!important;
}
.color-control input[type="color"]{border:2px solid var(--pg-ink)!important;box-shadow:3px 3px 0 #DDE7F3!important}
.frame-style-visual{
  background:#fff!important;
  border:2px solid #CBD5E1;
  box-shadow:3px 3px 0 #E2E8F0!important;
  border-radius:16px!important;
}
.frame-style-option:hover .frame-style-visual{transform:translate(-1px,-2px)!important;border-color:var(--pg-ink)}
.frame-style-option input:checked + .frame-style-visual{background:#E9F4FF!important;border-color:var(--pg-blue);box-shadow:4px 4px 0 var(--pg-blue)!important;color:var(--pg-blue)!important}
.page-tool .preview-box{
  background:
    radial-gradient(circle at 12px 12px,rgba(11,103,215,.08) 1.4px,transparent 1.8px) 0 0/24px 24px,
    #fff!important;
  border:2px dashed #94A3B8;
  box-shadow:none!important;
  border-radius:20px!important;
}

/* Steps and FAQs */
.content-card{border-radius:24px!important}
.content-card:nth-child(1){box-shadow:7px 7px 0 #BFDBFE!important}.content-card:nth-child(2){box-shadow:7px 7px 0 #A7F3D0!important}
.steps li:before{
  background:var(--pg-yellow)!important;
  color:var(--pg-ink)!important;
  border:2px solid var(--pg-ink);
  border-radius:50%!important;
  box-shadow:3px 3px 0 var(--pg-ink)!important;
}
.faq details{border-radius:18px!important;box-shadow:4px 4px 0 #E2E8F0!important;background:#fff!important}
.faq details[open]{box-shadow:5px 5px 0 #BFDBFE!important}
.faq summary{font-weight:800}
.faq summary::after{content:"+";margin-inline-start:auto;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--pg-yellow);border:2px solid var(--pg-ink);font-weight:900;line-height:1}
.faq details[open] summary::after{content:"−";background:#E9F4FF}

/* Scanner */
.scanner-stage{
  border:2px solid var(--pg-ink)!important;
  border-radius:22px!important;
  background:#0F172A!important;
  box-shadow:6px 6px 0 #BFDBFE!important;
}
.scanner-frame{border-color:var(--pg-yellow)!important}
.scanner-result{background:#F8FAFC!important;border:2px dashed #94A3B8!important;border-radius:16px!important}

/* Contact / static */
.contact-card{border-radius:22px!important;box-shadow:6px 6px 0 #BFDBFE!important}
.contact-card:nth-child(2){box-shadow:6px 6px 0 #A7F3D0!important}
.language-card:hover{transform:translate(-2px,-2px) rotate(-.8deg);box-shadow:7px 7px 0 var(--pg-yellow)!important}
.breadcrumbs a{color:var(--pg-blue)!important;font-weight:800}

/* Footer */
.site-footer{
  position:relative;
  margin-top:4rem;
  background:var(--pg-ink)!important;
  color:#fff;
  border-top:2px solid var(--pg-ink);
  overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:var(--pg-yellow);right:-70px;top:-90px;border:2px solid #fff;opacity:.95
}
.site-footer::after{
  content:"";position:absolute;width:110px;height:80px;left:3%;bottom:4%;background:radial-gradient(circle,var(--pg-orange) 2px,transparent 2.5px) 0 0/18px 18px;opacity:.35
}
.site-footer .container{position:relative;z-index:1}
.site-footer p,.site-footer a,.footer-bottom{color:#CBD5E1!important}
.site-footer a{text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:4px}.site-footer a:hover{color:#fff!important;text-decoration-color:var(--pg-yellow)}
.site-footer .footer-col h2{color:#fff!important}
.site-footer .brand-logo{filter:drop-shadow(3px 3px 0 rgba(255,255,255,.15))}
.footer-bottom{border-top:1px solid rgba(255,255,255,.2)!important}

/* Tiny entrance pop; subtle enough to avoid distraction */
@keyframes pg-pop-in{0%{opacity:0;transform:scale(.96) translateY(8px)}70%{opacity:1;transform:scale(1.012) translateY(-1px)}100%{opacity:1;transform:none}}
@keyframes pg-wiggle{0%,100%{transform:rotate(0)}35%{transform:rotate(3deg)}70%{transform:rotate(-3deg)}}
.tool-card-link,.suite-card,.trust-card{animation:pg-pop-in .48s var(--pg-ease) both}
.tool-card-link:hover .icon-well,.trust-card:hover svg{animation:pg-wiggle .38s ease both}

/* Responsive */
@media(max-width:820px){
  .nav{min-height:68px}
  .nav-links{
    top:68px!important;
    background:#fff!important;
    border:2px solid var(--pg-ink);
    border-radius:20px!important;
    box-shadow:6px 6px 0 var(--pg-ink)!important;
  }
  .homepage-hero{min-height:450px!important;background-size:auto 100%!important}
  .homepage-hero::before{width:290px;inset-inline-start:-175px;opacity:.8}
  .homepage-hero::after{display:none}
  .homepage-hero .hero-copy{max-width:min(94%,620px)!important;padding:1.3rem!important;box-shadow:6px 6px 0 var(--pg-ink)}
  .page-tool .preview-panel{box-shadow:5px 5px 0 #DDE7F3!important}
}
@media(max-width:560px){
  :root{--pg-pop:2px 2px 0 var(--pg-ink);--pg-pop-hover:3px 3px 0 var(--pg-ink);--pg-pop-active:1px 1px 0 var(--pg-ink);--pg-soft-pop:3px 3px 0 #DDE7F3}
  body{background:var(--pg-bg)!important}
  .brand-logo{height:36px!important;max-width:126px!important}
  .homepage-hero{min-height:420px!important;border-radius:0 0 26px 26px!important}
  .homepage-hero::before{width:220px;inset-inline-start:-150px;top:38%}
  .homepage-hero .hero-copy{max-width:100%!important;border-radius:22px 22px 22px 5px!important;box-shadow:4px 4px 0 var(--pg-ink);backdrop-filter:blur(7px)}
  html[dir="rtl"] .homepage-hero .hero-copy{border-radius:22px 22px 5px 22px!important}
  .homepage-hero .hero-copy::before{width:20px;height:20px;inset-inline-end:18px;top:-11px}
  .btn{min-height:48px;box-shadow:2px 2px 0 var(--pg-ink)!important}
  .suite-card,.tool-card-link,.trust-card,.page-tool .tool-panel,.page-tool .preview-panel,.content-card,.contact-card{box-shadow:3px 3px 0 #DDE7F3!important}
  .tool-card-link:hover,.suite-card:hover,.trust-card:hover{transform:none!important}
  .icon-well{box-shadow:2px 2px 0 var(--tool-shadow,#DDE7F3)!important}
  .page-tool .tool-panel::before{display:none}
  .page-home #tools::before,.page-qrhub #tools::before{display:none}
  .site-footer::before{width:120px;height:120px;right:-70px;top:-70px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .tool-card-link:hover,.suite-card:hover,.trust-card:hover,.btn:hover{transform:none!important}
}

/* =========================================================
   UX polish — smooth interactions, service menu, QR frames
   ========================================================= */
:root{--ux-speed:.26s;--ux-speed-fast:.18s;--ux-ease:cubic-bezier(.22,1,.36,1)}

/* Every interactive hover/press state eases instead of snapping. */
:where(a,button,summary,input,select,textarea,.btn,.tool-card-link,.service-card-link,.surface,.trust-card,.content-card,.contact-card,.language-card,.faq details,.faq summary,.frame-style-visual,.icon-well,.card-accent,.tools-dropdown,.tools-dropdown-item,.tools-service-item,.tools-dropdown-icon,.suite-card,.suite-card-link){
  transition-property:transform,box-shadow,background-color,border-color,color,opacity,filter,max-height,visibility;
  transition-duration:var(--ux-speed);
  transition-timing-function:var(--ux-ease);
}
:where(.icon-well svg,.service-card-icon svg,.tools-dropdown-icon svg,.tools-chevron){transition:transform var(--ux-speed) var(--pg-ease),color var(--ux-speed-fast) ease}

/* Header Tools dropdown */
.tools-menu{position:relative;display:flex;align-items:center}
.tools-trigger{
  min-height:44px;display:inline-flex;align-items:center;gap:.42rem;padding:.55rem .82rem;
  border:2px solid transparent;border-radius:999px;background:transparent;color:var(--pg-ink);
  font-weight:800;font-family:Outfit,"Plus Jakarta Sans",Inter,sans-serif;
}
.tools-trigger:hover,.tools-menu.open .tools-trigger,.tools-menu:focus-within .tools-trigger{
  background:#fff;border-color:var(--pg-ink);box-shadow:3px 3px 0 var(--pg-yellow);transform:translate(-1px,-1px)
}
.tools-chevron{width:16px;height:16px;flex:0 0 auto}
.tools-menu.open .tools-chevron,.tools-menu:focus-within .tools-chevron{transform:rotate(180deg)}
.tools-dropdown{
  position:absolute;z-index:100;top:calc(100% + 12px);inset-inline-start:0;width:min(680px,calc(100vw - 32px));
  padding:.85rem;background:#fff;border:2px solid var(--pg-ink);border-radius:22px;box-shadow:8px 8px 0 var(--pg-ink);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px) scale(.985);transform-origin:top center;
}
.tools-menu:focus-within .tools-dropdown,.tools-menu.open .tools-dropdown,.tools-menu[data-hover-open="true"] .tools-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)
}
.tools-dropdown-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.2rem .2rem .7rem;margin-bottom:.35rem;border-bottom:2px dashed #E2E8F0}
.tools-dropdown-head strong{font-family:Outfit,"Plus Jakarta Sans",Inter,sans-serif;font-size:.92rem;color:var(--pg-ink)}
.tools-view-all{font-size:.78rem;font-weight:800;color:var(--pg-blue);padding:.25rem .45rem;border-radius:999px}
.tools-view-all:hover{background:#E9F4FF;transform:translateY(-1px)}
.tools-dropdown-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.42rem;max-height:min(62vh,470px);overflow:auto;padding:.15rem .15rem .25rem}
.tools-dropdown-item,.tools-service-item{
  display:flex;align-items:center;gap:.72rem;min-width:0;padding:.62rem .68rem;border:2px solid transparent;border-radius:15px;background:#fff
}
.tools-dropdown-item:hover,.tools-dropdown-item:focus-visible,.tools-dropdown-item[aria-current="page"]{
  background:#F8FBFF;border-color:#CBD5E1;box-shadow:3px 3px 0 #DBEAFE;transform:translate(-1px,-1px)
}
.tools-dropdown-item[aria-current="page"]{border-color:var(--pg-blue);background:#E9F4FF}
.tools-dropdown-icon{
  width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border:2px solid var(--pg-ink);border-radius:11px;
  color:var(--tool-accent,var(--pg-blue));background:var(--tool-soft,#E9F4FF);box-shadow:2px 2px 0 #DDE7F3
}
.tools-dropdown-icon svg{width:19px;height:19px}
.tools-dropdown-item:hover .tools-dropdown-icon,.tools-service-item:hover .tools-dropdown-icon{transform:rotate(-5deg) scale(1.06);box-shadow:3px 3px 0 var(--pg-yellow)}
.tools-dropdown-title{font-size:.8rem;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.tools-dropdown-services{display:grid;grid-template-columns:minmax(0,360px);padding:.15rem}
.tools-service-item{padding:.75rem;background:linear-gradient(135deg,#F8FBFF,#FFF9EA);border-color:#D8E2EE;box-shadow:3px 3px 0 #DDE7F3}
.tools-service-item:hover,.tools-service-item:focus-visible{border-color:var(--pg-ink);box-shadow:5px 5px 0 var(--pg-yellow);transform:translate(-2px,-2px)}
.tools-service-item .tools-dropdown-icon{width:42px;height:42px;background:#E9F4FF;color:var(--pg-blue)}
.tools-service-item strong{display:block;font-family:Outfit,"Plus Jakarta Sans",Inter,sans-serif;font-size:.92rem;color:var(--pg-ink);line-height:1.25}
.tools-service-item small{display:block;margin-top:.16rem;color:var(--pg-muted);font-size:.72rem;line-height:1.35}
html[dir="rtl"] .tools-dropdown{inset-inline-start:auto;inset-inline-end:0}
html[dir="rtl"] .tools-trigger{font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif}

/* Compact homepage service card — clear click target, no visual clutter. */
.service-card-grid{display:grid;grid-template-columns:minmax(0,360px);gap:1rem;margin-top:1.25rem}
.service-card{min-width:0}
.service-card-link{
  position:relative;isolation:isolate;display:grid;grid-template-columns:58px 1fr;grid-template-areas:"icon title" "icon desc";
  column-gap:.95rem;align-items:center;min-height:142px;padding:1.05rem 1.1rem;background:#fff;border:2px solid var(--pg-ink);
  border-radius:22px;box-shadow:6px 6px 0 #BFDBFE;overflow:hidden;cursor:pointer
}
.service-card-link::before{
  content:"";position:absolute;z-index:-1;width:118px;height:118px;border-radius:50%;background:var(--pg-yellow);opacity:.18;
  inset-inline-end:-48px;top:-52px;transform:scale(.8) rotate(0deg);transition:transform .34s var(--pg-ease),opacity .26s ease
}
.service-card-link::after{
  content:"";position:absolute;z-index:-1;width:100px;height:70px;inset-inline-end:10px;bottom:4px;
  background:radial-gradient(circle,var(--pg-blue) 1.4px,transparent 1.8px) 0 0/14px 14px;opacity:.08;
  transition:opacity .26s ease,transform .34s var(--pg-ease)
}
.service-card-icon{grid-area:icon;width:58px;height:58px;display:grid;place-items:center;border:2px solid var(--pg-ink);border-radius:18px;background:linear-gradient(145deg,#E9F4FF,#fff);color:var(--pg-blue);box-shadow:4px 4px 0 var(--pg-yellow)}
.service-card-icon svg{width:30px;height:30px}
.service-card-link h3{grid-area:title;margin:0;align-self:end;font-size:1.05rem;font-weight:800;color:var(--pg-ink)}
.service-card-link p{grid-area:desc;margin:.2rem 0 0;align-self:start;font-size:.82rem;line-height:1.5;color:var(--pg-muted)}
.service-card-link:hover,.service-card-link:focus-visible{transform:translate(-3px,-3px) rotate(-.35deg);box-shadow:9px 9px 0 var(--pg-orange);background:#FFFEFA}
.service-card-link:hover::before,.service-card-link:focus-visible::before{transform:scale(1.14) rotate(14deg);opacity:.32}
.service-card-link:hover::after,.service-card-link:focus-visible::after{opacity:.17;transform:translate(-4px,-2px)}
.service-card-link:hover .service-card-icon,.service-card-link:focus-visible .service-card-icon{transform:rotate(-6deg) scale(1.07);box-shadow:5px 5px 0 var(--pg-blue)}
.service-card-link:hover .service-card-icon svg,.service-card-link:focus-visible .service-card-icon svg{transform:scale(1.08)}

/* QR frame customizer: compact, ordered and visually tied to the actual output. */
.frame-customizer{
  margin:1.2rem 0!important;padding:1rem!important;background:#FFFEFA!important;border:2px solid var(--pg-ink)!important;
  border-radius:22px!important;box-shadow:5px 5px 0 #E2E8F0!important
}
.frame-customizer legend{padding:0 .45rem;font-size:.95rem;color:var(--pg-ink)}
.frame-style-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:.55rem!important;margin-bottom:.85rem!important}
.frame-style-visual{
  min-height:76px!important;padding:.52rem .35rem!important;gap:.18rem!important;border:2px solid #CBD5E1!important;border-radius:14px!important;
  box-shadow:2px 2px 0 #E2E8F0!important;font-size:.68rem!important;line-height:1.2;background:#fff!important
}
.frame-style-visual svg{width:40px!important;height:31px!important}
.frame-style-option:hover .frame-style-visual{transform:translate(-1px,-2px)!important;border-color:var(--pg-ink)!important;box-shadow:4px 4px 0 var(--pg-yellow)!important;color:var(--pg-blue)!important}
.frame-style-option input:checked + .frame-style-visual{background:#E9F4FF!important;border-color:var(--pg-blue)!important;box-shadow:4px 4px 0 var(--pg-blue)!important;color:var(--pg-blue)!important;transform:translateY(-1px)}
.frame-settings{display:grid!important;grid-template-columns:minmax(180px,1.1fr) minmax(280px,1.6fr);gap:.75rem;align-items:end;padding:.8rem!important;border-top:2px dashed #D8E2EE;background:#F8FAFC;border-radius:15px;opacity:1!important}
.frame-settings>.field,.frame-settings>.row{margin:0!important}
.frame-settings>.row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem!important}
.frame-customizer:has(input[value="none"]:checked) .frame-settings{opacity:.45!important;filter:saturate(.35)}
.frame-customizer:has(input[value="none"]:checked) .frame-settings input{pointer-events:none}

/* Extra tactile continuity for existing cards/controls. */
.tool-card-link:hover{transform:translate(-3px,-3px) rotate(-.45deg)!important}
.tool-card-link:hover .icon-well{transform:translateY(-2px) rotate(-4deg) scale(1.05)}
.trust-card:hover,.content-card:hover,.contact-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #DDE7F3!important}
.faq details:hover{transform:translateX(2px);border-color:#94A3B8!important}
input:hover,select:hover,textarea:hover{border-color:#94A3B8!important}

@media(max-width:820px){
  .tools-menu{width:100%;display:block}
  .tools-trigger{width:100%;justify-content:space-between;border-radius:15px!important;padding:.78rem .9rem}
  .tools-dropdown{
    position:static;width:100%;max-height:0;margin:0;padding:0 .7rem;border-width:0;box-shadow:none;overflow:hidden;
    opacity:0;visibility:hidden;transform:none;background:#FFFDF5;border-radius:16px
  }
  .tools-menu:hover .tools-dropdown{opacity:0;visibility:hidden;pointer-events:none;max-height:0}
  .tools-menu.open .tools-dropdown{max-height:70vh;margin-top:.45rem;padding:.7rem;border:2px solid var(--pg-ink);box-shadow:4px 4px 0 #E2E8F0;opacity:1;visibility:visible;pointer-events:auto;overflow:auto}
  .tools-dropdown-grid{grid-template-columns:1fr;max-height:none;overflow:visible}
  .tools-dropdown-services{grid-template-columns:1fr}
  .frame-style-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .frame-settings{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .service-card-grid{grid-template-columns:1fr}
  .service-card-link{grid-template-columns:50px 1fr;min-height:128px;padding:.9rem;column-gap:.8rem;border-radius:18px;box-shadow:3px 3px 0 #BFDBFE}
  .service-card-icon{width:50px;height:50px;border-radius:15px;box-shadow:3px 3px 0 var(--pg-yellow)}
  .service-card-icon svg{width:26px;height:26px}
  .service-card-link:hover,.service-card-link:focus-visible{transform:translate(-1px,-1px)!important;box-shadow:4px 4px 0 var(--pg-orange)!important}
  .frame-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .frame-style-visual{min-height:70px!important}
  .frame-settings>.row{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
  :where(a,button,summary,input,select,textarea,.btn,.tool-card-link,.service-card-link,.surface,.trust-card,.content-card,.contact-card,.language-card,.faq details,.faq summary,.frame-style-visual,.icon-well,.card-accent,.tools-dropdown,.tools-dropdown-item,.tools-service-item,.tools-dropdown-icon,.suite-card,.suite-card-link){transition-duration:.001ms!important}
  .service-card-link:hover,.service-card-link:focus-visible,.tools-dropdown-item:hover,.tools-service-item:hover{transform:none!important}
}

/* =========================================================
   UX pass 2 — universal hover easing + stable desktop Tools
   ========================================================= */
/* Keep every visual hover/focus/active change smooth without animating layout size. */
*,*::before,*::after{
  transition-property:transform,box-shadow,background-color,border-color,color,opacity,filter,text-decoration-color,fill,stroke;
  transition-duration:var(--ux-speed-fast);
  transition-timing-function:var(--ux-ease);
}
a,button,summary,.btn,.tool-card-link,.service-card-link,.tools-trigger,.tools-dropdown-item,.tools-service-item,.language-card,.faq details,.frame-style-visual,input,select,textarea{
  transition-duration:var(--ux-speed);
}

@media(min-width:821px){
  /* Invisible hover bridge removes the dead gap between Tools and its flyout. */
  .tools-menu::after{
    content:"";
    position:absolute;
    z-index:99;
    top:100%;
    inset-inline-start:0;
    width:100%;
    height:12px;
    background:transparent;
    pointer-events:none;
  }
  .tools-dropdown{top:calc(100% + 10px)}
  .tools-menu[data-hover-open="true"] .tools-trigger,.tools-menu.open .tools-trigger{
    background:#fff;border-color:var(--pg-ink);box-shadow:3px 3px 0 var(--pg-yellow);transform:translate(-1px,-1px)
  }
  .tools-menu[data-hover-open="true"] .tools-chevron,.tools-menu.open .tools-chevron{transform:rotate(180deg)}
  .tools-menu[data-hover-open="true"] .tools-dropdown,.tools-menu:focus-within .tools-dropdown,.tools-menu.open .tools-dropdown{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)
  }
}

/* A framed QR can be taller than it is wide; never crop the live preview. */
.preview-box{
  aspect-ratio:auto!important;
  min-height:min(430px,72vw);
  overflow:visible!important;
  align-content:center;
}
.preview-box canvas{
  display:block;
  width:auto!important;
  max-width:100%!important;
  max-height:none!important;
  height:auto!important;
  margin:auto;
  object-fit:contain;
}
.preview-placeholder{min-height:min(390px,66vw)}
@media(max-width:820px){
  .preview-box{min-height:min(360px,82vw)}
  .preview-placeholder{min-height:min(320px,76vw)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation:none!important}
}

/* =========================================================
   UX pass 3 — deliberate hover motion + QR center icon control
   ========================================================= */
:root{--ux-card-speed:.34s;--ux-control-speed:.26s;--ux-bounce:cubic-bezier(.22,1,.36,1)}

/* Explicitly transition every element that owns a hover/focus visual state.
   This intentionally overrides older one-off transition declarations. */
:is(a,button,summary,.btn,.tool-card-link,.service-card-link,.suite-card,.suite-card-link,.trust-card,.content-card,.contact-card,.language-card,.faq details,.faq summary,.tools-trigger,.tools-dropdown,.tools-dropdown-item,.tools-service-item,.tools-view-all,.lang-list a,.footer-col a,.frame-style-visual,.qr-center-icon-toggle,input,select,textarea,.color-control,.icon-well,.service-card-icon,.tools-dropdown-icon){
  transition:transform var(--ux-control-speed) var(--ux-bounce),box-shadow var(--ux-control-speed) var(--ux-bounce),background-color var(--ux-control-speed) ease,border-color var(--ux-control-speed) ease,color var(--ux-control-speed) ease,opacity var(--ux-control-speed) ease,filter var(--ux-control-speed) ease,text-decoration-color var(--ux-control-speed) ease!important;
}
:is(.tool-card-link,.service-card-link,.suite-card,.trust-card,.content-card,.contact-card,.language-card){
  transition-duration:var(--ux-card-speed)!important;
}
:is(.tool-card-link,.service-card-link,.suite-card-link,.tools-dropdown-item,.tools-service-item)::before,
:is(.tool-card-link,.service-card-link,.suite-card-link,.tools-dropdown-item,.tools-service-item)::after{
  transition:transform var(--ux-card-speed) var(--ux-bounce),opacity var(--ux-control-speed) ease,background-color var(--ux-control-speed) ease,filter var(--ux-control-speed) ease!important;
}
.tool-card-link :is(.icon-well,h3,p,svg),.service-card-link :is(.service-card-icon,h3,p,svg),.trust-card :is(svg,strong,p),.tools-dropdown-item :is(.tools-dropdown-icon,.tools-dropdown-title,svg){
  transition:transform var(--ux-card-speed) var(--ux-bounce),color var(--ux-control-speed) ease,box-shadow var(--ux-control-speed) var(--ux-bounce),opacity var(--ux-control-speed) ease!important;
}
.tool-card-link:hover,.tool-card-link:focus-visible{filter:saturate(1.04)}
.tool-card-link:hover::before,.tool-card-link:focus-visible::before{transform:translate(-3px,2px) rotate(4deg) scale(1.04);opacity:.48!important}
.tool-card-link:hover::after,.tool-card-link:focus-visible::after{transform:translate(-4px,-3px) rotate(-4deg);opacity:1}
.tool-card-link:hover h3,.tool-card-link:focus-visible h3{transform:translateX(3px);color:var(--tool-icon,var(--pg-blue))}
html[dir="rtl"] .tool-card-link:hover h3,html[dir="rtl"] .tool-card-link:focus-visible h3{transform:translateX(-3px)}
.tool-card-link:hover p,.tool-card-link:focus-visible p{transform:translateY(-1px);color:#475569}
.tool-card-link:hover .icon-well,.tool-card-link:focus-visible .icon-well{transform:translateY(-3px) rotate(-4deg) scale(1.055)!important}
.tool-card-link:active{transition-duration:.12s!important}

/* Center icon: one clear, tactile control instead of another dense fieldset. */
.qr-center-icon-toggle{
  --qr-icon-color:var(--pg-blue);position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 48px;gap:.8rem;align-items:center;
  margin:1rem 0;padding:.78rem .85rem;background:#fff;border:2px solid #CBD5E1;border-radius:18px;box-shadow:3px 3px 0 #E2E8F0;cursor:pointer;user-select:none
}
.qr-center-icon-toggle:hover{border-color:var(--pg-ink);box-shadow:5px 5px 0 #DBEAFE;transform:translate(-1px,-1px)}
.qr-center-icon-toggle:focus-within{border-color:var(--pg-blue);box-shadow:5px 5px 0 #BFDBFE}
.qr-center-icon-toggle>input{position:absolute;opacity:0;pointer-events:none}
.qr-center-icon-preview{width:52px;height:52px;display:grid;place-items:center;border:2px solid var(--pg-ink);border-radius:15px;background:#fff;color:var(--qr-icon-color);box-shadow:3px 3px 0 color-mix(in srgb,var(--qr-icon-color) 25%,#E2E8F0)}
.qr-center-icon-preview svg{width:28px;height:28px;transition:transform var(--ux-card-speed) var(--ux-bounce),color var(--ux-control-speed) ease!important}
.qr-center-icon-copy{display:grid;gap:.12rem;min-width:0}
.qr-center-icon-copy strong{font-family:Outfit,"Plus Jakarta Sans",Inter,sans-serif;font-size:.9rem;line-height:1.25;color:var(--pg-ink)}
.qr-center-icon-copy small{font-size:.72rem;line-height:1.35;color:var(--pg-muted)}
.qr-toggle-switch{justify-self:end;position:relative;width:46px;height:27px;border:2px solid var(--pg-ink);border-radius:999px;background:#CBD5E1;box-shadow:2px 2px 0 #E2E8F0;transition:background-color var(--ux-control-speed) ease,box-shadow var(--ux-control-speed) var(--ux-bounce)!important}
.qr-toggle-switch::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;border:1.5px solid var(--pg-ink);transition:transform var(--ux-card-speed) var(--ux-bounce)!important}
.qr-center-icon-toggle>input:checked~.qr-toggle-switch{background:var(--qr-icon-color);box-shadow:2px 2px 0 color-mix(in srgb,var(--qr-icon-color) 30%,#CBD5E1)}
.qr-center-icon-toggle>input:checked~.qr-toggle-switch::after{transform:translateX(19px)}
html[dir="rtl"] .qr-toggle-switch::after{left:auto;right:3px}
html[dir="rtl"] .qr-center-icon-toggle>input:checked~.qr-toggle-switch::after{transform:translateX(-19px)}
.qr-center-icon-toggle:hover .qr-center-icon-preview svg{transform:rotate(-5deg) scale(1.08)}
.qr-center-icon-toggle>input:not(:checked)~.qr-center-icon-preview{opacity:.48;filter:grayscale(.8)}
.qr-center-icon-toggle>input:not(:checked)~.qr-center-icon-copy{opacity:.64}

/* Frame choices and color controls should feel connected to the live QR preview. */
.frame-style-option{cursor:pointer}
.frame-style-option .frame-style-visual svg,.frame-style-option .frame-style-visual span{transition:transform var(--ux-control-speed) var(--ux-bounce),opacity var(--ux-control-speed) ease,color var(--ux-control-speed) ease!important}
.frame-style-option:hover .frame-style-visual svg{transform:scale(1.08) rotate(-2deg)}
.frame-style-option input:checked+.frame-style-visual svg{transform:scale(1.06)}
.color-control:hover{transform:translateY(-1px)}

@media(max-width:560px){
  .qr-center-icon-toggle{grid-template-columns:46px minmax(0,1fr) 44px;padding:.72rem;gap:.68rem}
  .qr-center-icon-preview{width:46px;height:46px;border-radius:14px}.qr-center-icon-preview svg{width:25px;height:25px}
}
@media(prefers-reduced-motion:reduce){
  :is(a,button,summary,.btn,.tool-card-link,.service-card-link,.suite-card,.suite-card-link,.trust-card,.content-card,.contact-card,.language-card,.faq details,.faq summary,.tools-trigger,.tools-dropdown,.tools-dropdown-item,.tools-service-item,.tools-view-all,.lang-list a,.footer-col a,.frame-style-visual,.qr-center-icon-toggle,input,select,textarea,.color-control,.icon-well,.service-card-icon,.tools-dropdown-icon),
  :is(.tool-card-link,.service-card-link,.suite-card-link,.tools-dropdown-item,.tools-service-item)::before,
  :is(.tool-card-link,.service-card-link,.suite-card-link,.tools-dropdown-item,.tools-service-item)::after,
  .tool-card-link :is(.icon-well,h3,p,svg),.qr-center-icon-preview svg,.qr-toggle-switch,.qr-toggle-switch::after{transition-duration:.001ms!important}
}

/* =========================================================
   UX pass 4 — no-snap hover audit
   Keep hover ownership explicit so every state eases in AND out.
   ========================================================= */
:root{--ux-hover-speed:.32s;--ux-hover-ease:cubic-bezier(.2,.8,.2,1)}

/* Entrance animations must release transform after they finish; `both`
   kept transform under animation ownership and made card hover feel abrupt. */
.tool-card-link,.suite-card,.trust-card{animation-fill-mode:backwards!important}
.tool-card-link:hover .icon-well,.tool-card-link:focus-visible .icon-well,.trust-card:hover svg,.trust-card:focus-within svg{animation:none!important}
.trust-card:hover svg,.trust-card:focus-within svg{transform:translateY(-2px) rotate(3deg) scale(1.055)}

/* Complete inventory of elements that currently own a :hover state. */
:where(
  .btn,.btn.danger,.btn.secondary,.btn.textual,.homepage-hero .btn.primary,
  .color-control,.contact-card,.content-card,.faq details,.footer-col a,.site-footer a,
  .frame-style-visual,.language-card,.lang-list a,.lang-menu summary,.menu-btn,.nav-links>a,
  .qr-center-icon-toggle,.service-card-link,.suite-card,.tool-card-link,.tools-dropdown-item,
  .tools-service-item,.tools-trigger,.tools-view-all,.trust-card,input,select,textarea
){
  transition-property:transform,box-shadow,background-color,border-color,color,opacity,filter,fill,stroke,text-decoration-color!important;
  transition-duration:var(--ux-hover-speed)!important;
  transition-timing-function:var(--ux-hover-ease)!important;
}
:where(
  .tool-card-link .icon-well,.tool-card-link h3,.tool-card-link p,
  .service-card-link .service-card-icon,.service-card-link .service-card-icon svg,
  .tools-dropdown-item .tools-dropdown-icon,.tools-service-item .tools-dropdown-icon,
  .qr-center-icon-preview svg,.trust-card svg,.tools-chevron,.frame-style-visual svg
){
  transition-property:transform,box-shadow,background-color,border-color,color,opacity,filter,fill,stroke!important;
  transition-duration:var(--ux-hover-speed)!important;
  transition-timing-function:var(--ux-hover-ease)!important;
}
:where(.tool-card-link,.service-card-link,.nav-links>a,.lang-menu summary)::before,
:where(.tool-card-link,.service-card-link,.nav-links>a,.lang-menu summary)::after{
  transition-property:transform,opacity,background-color,border-color,box-shadow,filter!important;
  transition-duration:var(--ux-hover-speed)!important;
  transition-timing-function:var(--ux-hover-ease)!important;
}

/* Tool cards get a clear continuous lift instead of an instant visual jump. */
.tool-card-link{will-change:transform;transform:translate3d(0,0,0)}
.tool-card-link:hover,.tool-card-link:focus-visible{transform:translate3d(-3px,-4px,0) rotate(-.45deg)!important;box-shadow:10px 10px 0 var(--tool-shadow,#DDE7F3)!important}
.tool-card-link:active{transform:translate3d(1px,1px,0) scale(.995)!important;transition-duration:.12s!important}

/* Dropdown fades/moves smoothly while the hover bridge keeps it reachable. */
.tools-dropdown{transition:opacity .24s ease,transform .28s var(--ux-hover-ease),visibility 0s linear .28s!important}
.tools-menu:focus-within .tools-dropdown,.tools-menu.open .tools-dropdown,.tools-menu[data-hover-open="true"] .tools-dropdown{transition-delay:0s!important}

@media(max-width:820px){
  .tools-dropdown{transition:max-height .32s var(--ux-hover-ease),opacity .24s ease,margin .28s ease,padding .28s ease,border-color .24s ease,box-shadow .28s var(--ux-hover-ease),visibility 0s linear .32s!important}
  .tools-menu.open .tools-dropdown{transition-delay:0s!important}
}
@media(prefers-reduced-motion:reduce){
  :where(.btn,.color-control,.contact-card,.content-card,.faq details,.footer-col a,.site-footer a,.frame-style-visual,.language-card,.lang-list a,.lang-menu summary,.menu-btn,.nav-links>a,.qr-center-icon-toggle,.service-card-link,.suite-card,.tool-card-link,.tools-dropdown-item,.tools-service-item,.tools-trigger,.tools-view-all,.trust-card,input,select,textarea,.tool-card-link .icon-well,.service-card-link .service-card-icon,.tools-dropdown-icon,.qr-center-icon-preview svg,.trust-card svg,.tools-chevron){transition-duration:.001ms!important}
}

/* =========================================================
   UX pass 5 — premium tool marks, live validation, QR shapes
   ========================================================= */
[data-tool-type="whatsapp"]{--tool-icon:#25D366;--tool-icon-bg:#E9FFF0;--tool-shadow:#A7F3D0}
[data-tool-type="google-review"]{--tool-icon:#4285F4;--tool-icon-bg:#EEF5FF;--tool-shadow:#BFDBFE}
[data-tool-type="location"]{--tool-icon:#EA4335;--tool-icon-bg:#FFF0EE;--tool-shadow:#FECACA}
[data-tool-type="event"]{--tool-icon:#F59E0B;--tool-icon-bg:#FFF7DD;--tool-shadow:#FDE68A}
[data-tool-type="vcard"]{--tool-icon:#7C3AED;--tool-icon-bg:#F4EEFF;--tool-shadow:#DDD6FE}
[data-tool-type="sms"]{--tool-icon:#16A34A;--tool-icon-bg:#ECFDF3;--tool-shadow:#BBF7D0}
[data-tool-type="email"]{--tool-icon:#2563EB;--tool-icon-bg:#EEF4FF;--tool-shadow:#BFDBFE}

.icon-well,.tools-dropdown-icon,.service-card-icon{
  position:relative;overflow:hidden;background:linear-gradient(145deg,#fff 0%,var(--tool-icon-bg,#E8F3FF) 100%)!important;
}
.icon-well::after,.tools-dropdown-icon::after,.service-card-icon::after{
  content:"";position:absolute;width:44%;height:44%;border-radius:50%;background:currentColor;opacity:.09;inset:auto -8% -10% auto;
  transition:transform .32s var(--ux-hover-ease),opacity .26s ease!important;pointer-events:none
}
.tool-card-link:hover .icon-well::after,.tools-dropdown-item:hover .tools-dropdown-icon::after{transform:scale(1.45);opacity:.14}
.tool-logo-svg{width:30px!important;height:30px!important;display:block;position:relative;z-index:1;color:var(--tool-icon,var(--pg-blue))}
.tools-dropdown-icon .tool-logo-svg{width:22px!important;height:22px!important}
.service-card-icon .tool-logo-svg{width:27px!important;height:27px!important}
.tool-logo-svg.brand-glyph{padding:1px}

/* Visual QR module picker. */
.qr-pattern-customizer{
  margin:1rem 0;padding:1rem;border:2px solid var(--pg-ink);border-radius:20px;background:#fff;box-shadow:4px 4px 0 #E2E8F0
}
.qr-pattern-customizer>legend{padding:0 .45rem;font-family:Outfit,"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;color:var(--pg-ink)}
.qr-shape-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}
.qr-shape-option{position:relative;cursor:pointer;min-width:0}
.qr-shape-option>input,.qr-corner-options input{position:absolute;opacity:0;pointer-events:none}
.qr-shape-option>span:last-child{display:block;margin-top:.35rem;font-size:.72rem;font-weight:750;text-align:center;color:#475569;transition:color .25s ease,transform .28s var(--ux-hover-ease)!important}
.qr-shape-visual{
  min-height:70px;display:grid;grid-template-columns:repeat(3,10px);grid-auto-rows:10px;place-content:center;gap:5px;border:2px solid #CBD5E1;border-radius:15px;background:#fff;
  box-shadow:2px 2px 0 #E2E8F0;transition:transform .3s var(--ux-hover-ease),box-shadow .3s var(--ux-hover-ease),border-color .24s ease,background-color .24s ease!important
}
.qr-shape-visual i{display:block;width:10px;height:10px;background:#1E293B;transition:transform .28s var(--ux-hover-ease),border-radius .28s ease,clip-path .28s ease!important}
.shape-rounded i{border-radius:3px}.shape-dots i{border-radius:50%}.shape-extra-rounded i{border-radius:5px}
.shape-classy i{border-radius:0 5px 0 5px}.shape-classy-rounded i{border-radius:1px 6px 1px 6px;transform:rotate(3deg)}
.qr-shape-option:hover .qr-shape-visual{transform:translate(-1px,-2px);border-color:var(--pg-blue);box-shadow:4px 4px 0 #BFDBFE}
.qr-shape-option:hover .qr-shape-visual i{transform:scale(1.08)}
.qr-shape-option>input:checked+.qr-shape-visual{border-color:var(--pg-blue);background:#EFF6FF;box-shadow:4px 4px 0 var(--pg-yellow);transform:translate(-1px,-1px)}
.qr-shape-option>input:checked~span:last-child{color:var(--pg-blue);transform:translateY(-1px)}
.qr-shape-option>input:focus-visible+.qr-shape-visual{outline:3px solid color-mix(in srgb,var(--pg-blue) 28%,transparent);outline-offset:3px}
.qr-corner-picker{display:grid;gap:.55rem;margin-top:1rem;padding-top:.9rem;border-top:1.5px dashed #CBD5E1}
.qr-corner-label{font-size:.76rem;font-weight:800;color:#475569}
.qr-corner-options{display:flex;flex-wrap:wrap;gap:.55rem}
.qr-corner-options label{position:relative;display:flex;align-items:center;gap:.45rem;padding:.5rem .7rem;border:2px solid #CBD5E1;border-radius:999px;background:#fff;cursor:pointer;font-size:.73rem;font-weight:750;box-shadow:2px 2px 0 #E2E8F0;transition:transform .28s var(--ux-hover-ease),box-shadow .28s var(--ux-hover-ease),border-color .22s ease,background-color .22s ease!important}
.qr-corner-options label:hover{transform:translate(-1px,-1px);border-color:var(--pg-ink);box-shadow:3px 3px 0 #E2E8F0}
.qr-corner-options label:has(input:checked){border-color:var(--pg-blue);background:#EFF6FF;box-shadow:3px 3px 0 #BFDBFE;color:var(--pg-blue)}
.corner-sample{width:16px;height:16px;display:inline-block;background:#1E293B}.corner-rounded{border-radius:5px}.corner-dots{border-radius:50%}

/* Field-level guidance: neutral first, green when correct, red only after interaction. */
.form-readiness{
  margin:0 0 1.05rem;padding:.8rem .9rem;border:2px solid #CBD5E1;border-radius:17px;background:linear-gradient(135deg,#fff,#F8FAFC);box-shadow:3px 3px 0 #E2E8F0;
  transition:border-color .28s ease,box-shadow .3s var(--ux-hover-ease),background-color .28s ease!important
}
.readiness-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.78rem}.readiness-top strong{font-family:Outfit,"Plus Jakarta Sans",Inter,sans-serif;color:var(--pg-ink)}.readiness-top span{font-weight:850;color:var(--pg-blue)}
.readiness-track{height:8px;margin:.55rem 0;background:#E2E8F0;border:1.5px solid #CBD5E1;border-radius:999px;overflow:hidden}.readiness-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--pg-blue),#34D399);transition:width .38s var(--ux-hover-ease)!important}
.readiness-missing{font-size:.7rem;line-height:1.45;color:#64748B}.form-readiness.is-complete{border-color:#22C55E;background:#F0FDF4;box-shadow:4px 4px 0 #BBF7D0}.form-readiness.is-complete .readiness-top span{color:#15803D}.form-readiness.is-complete .readiness-missing{color:#166534;font-weight:650}
.field-feedback{min-height:1.05rem;margin-top:.28rem;padding-inline:.08rem;font-size:.68rem;line-height:1.35;color:#64748B;transition:color .22s ease,transform .26s var(--ux-hover-ease),opacity .22s ease!important}
.field.is-valid>input,.field.is-valid>textarea,.field.is-valid>select{border-color:#22C55E!important;background-color:#F7FFF9!important;box-shadow:3px 3px 0 #BBF7D0!important}
.field.is-valid>.field-feedback{color:#15803D;font-weight:700;transform:translateY(-1px)}
.field.is-invalid>input,.field.is-invalid>textarea,.field.is-invalid>select{border-color:#EF4444!important;background-color:#FFF8F7!important;box-shadow:3px 3px 0 #FECACA!important}
.field.is-invalid>.field-feedback{color:#B91C1C;font-weight:750;transform:translateY(-1px)}
.field.is-pending>.field-feedback{color:#64748B}
.field.is-valid>input:focus,.field.is-valid>textarea:focus,.field.is-valid>select:focus{outline-color:#22C55E!important}
.field.is-invalid>input:focus,.field.is-invalid>textarea:focus,.field.is-invalid>select:focus{outline-color:#EF4444!important}

@media(max-width:620px){
  .qr-shape-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.qr-shape-visual{min-height:64px}.form-readiness{padding:.72rem}.readiness-top{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .qr-shape-visual,.qr-shape-visual i,.qr-shape-option>span:last-child,.qr-corner-options label,.readiness-track i,.field-feedback,.form-readiness,.icon-well::after,.tools-dropdown-icon::after,.service-card-icon::after{transition-duration:.001ms!important}
}
.field.is-disabled{opacity:.58}.field.is-disabled input{cursor:not-allowed;background:#F1F5F9!important;box-shadow:none!important}.field.is-disabled .field-feedback{color:#94A3B8}
.corner-extra-rounded{border-radius:7px}

/* =========================================================
   UX pass 7 — grouped QR hub, full finder eyes, desktop sticky preview
   ========================================================= */
.page-qrhub .qr-hub-group{
  position:relative;margin:1.6rem 0 2.2rem;padding:clamp(1.25rem,3vw,2rem);
  border:2px solid var(--pg-ink);border-radius:28px;background:rgba(255,255,255,.72);box-shadow:6px 6px 0 #DDE7F3;
}
.page-qrhub .qr-hub-group + .qr-hub-group{margin-top:2.8rem}
.page-qrhub .qr-hub-group .section-head{margin-bottom:1.65rem;padding-bottom:1rem;border-bottom:2px dashed #D7E0EA}
.page-qrhub .qr-hub-group .section-head>div{max-width:760px}
.page-qrhub .qr-hub-group .section-kicker{display:inline-flex;margin-bottom:.55rem;padding:.28rem .58rem;border:2px solid var(--pg-ink);border-radius:999px;background:var(--pg-yellow);font-size:.68rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;box-shadow:2px 2px 0 var(--pg-ink)}
.page-qrhub .qr-hub-group .tools-grid{margin-top:.2rem}
.page-qrhub .qr-hub-group.is-single .tools-grid{grid-template-columns:minmax(220px,360px)}
.page-qrhub .trust-section>.section-head{margin-bottom:1.7rem;padding-bottom:1rem;border-bottom:2px dashed #D7E0EA}
.page-qrhub .trust-section{margin-top:2.8rem!important}

/* Finder samples now depict the complete 7×7 eye instead of one QR module. */
.corner-sample{position:relative!important;width:23px!important;height:23px!important;display:inline-block!important;background:#1E293B!important;flex:0 0 23px;overflow:hidden}
.corner-sample::before,.corner-sample::after{content:"";position:absolute;display:block}
.corner-sample::before{inset:3.3px;background:#fff}
.corner-sample::after{inset:7px;background:#1E293B}
.corner-square,.corner-square::before,.corner-square::after{border-radius:0!important}
.corner-rounded,.corner-rounded::before,.corner-rounded::after{border-radius:5px!important}
.corner-extra-rounded,.corner-extra-rounded::before,.corner-extra-rounded::after{border-radius:8px!important}
.corner-circle,.corner-circle::before,.corner-circle::after{border-radius:50%!important}
.corner-leaf,.corner-leaf::before,.corner-leaf::after{border-radius:2px 11px 2px 11px!important}
.qr-corner-options{gap:.62rem!important}
.qr-corner-options label{min-height:44px}

.frame-text-outline-controls{margin-top:.15rem}
.frame-text-outline-controls .field{margin-bottom:0}

/* Keep live preview visible throughout the desktop editor, matching mobile/tablet UX. */
.page-tool .tool-grid{overflow:visible!important}
.page-tool .preview-panel{overscroll-behavior:contain}
@media(min-width:1025px){
  .page-tool .preview-panel{
    position:sticky!important;top:88px!important;z-index:24;align-self:start!important;
    max-height:calc(100vh - 108px);overflow:auto;scrollbar-width:thin;scrollbar-color:#B8C5D6 transparent;
  }
  .page-tool .preview-panel::-webkit-scrollbar{width:7px}.page-tool .preview-panel::-webkit-scrollbar-thumb{background:#B8C5D6;border-radius:999px}
  .page-tool .preview-box{min-height:0!important;padding:.85rem!important}
  .page-tool .preview-box canvas{max-height:calc(100vh - 190px)!important}
}
@media(max-width:820px){
  .page-qrhub .qr-hub-group{border-radius:24px;padding:1rem;margin-block:1.25rem 1.8rem}
  .page-qrhub .qr-hub-group + .qr-hub-group{margin-top:2rem}
}
@media(max-width:560px){
  .page-qrhub .qr-hub-group .section-head{margin-bottom:1.15rem;padding-bottom:.8rem}
  .page-qrhub .qr-hub-group.is-single .tools-grid{grid-template-columns:1fr}
  .qr-corner-options label{flex:1 1 calc(50% - .35rem);justify-content:flex-start}
}

/* UX pass 7.1 — explicit hub group headings + scan-safe full Finder variants */
.page-qrhub .qr-hub-group-head{margin-bottom:1.65rem;padding-bottom:1rem;border-bottom:2px dashed #D7E0EA;max-width:820px}
.page-qrhub .qr-hub-group-head h2{margin:.15rem 0 .4rem;font-family:Outfit,"Plus Jakarta Sans",Inter,sans-serif;font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.08;color:var(--pg-ink)}
.page-qrhub .qr-hub-group-head p{margin:0;max-width:690px;color:#64748B;line-height:1.65}
.page-qrhub .qr-hub-group-head .section-kicker{display:inline-flex;margin-bottom:.55rem;padding:.28rem .58rem;border:2px solid var(--pg-ink);border-radius:999px;background:var(--pg-yellow);font-size:.68rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;box-shadow:2px 2px 0 var(--pg-ink)}
.page-qrhub .trust-section .section-head{margin-bottom:1.7rem;padding-bottom:1rem;border-bottom:2px dashed #D7E0EA}

/* Each preview is a complete Finder eye. Only scan-tested radius combinations are exposed. */
.corner-soft,.corner-soft::before,.corner-soft::after{border-radius:3px!important}
.corner-rounded{border-radius:4px!important}.corner-rounded::before{border-radius:3px!important}.corner-rounded::after{border-radius:4px!important}
.corner-bold{border-radius:5px!important}.corner-bold::before{border-radius:4px!important}.corner-bold::after{border-radius:5px!important}
.corner-outer-round{border-radius:5px!important}.corner-outer-round::before{border-radius:0!important}.corner-outer-round::after{border-radius:4px!important}
.corner-inner-round{border-radius:0!important}.corner-inner-round::before{border-radius:4px!important}.corner-inner-round::after{border-radius:5px!important}

@media(max-width:560px){.page-qrhub .qr-hub-group-head{margin-bottom:1.15rem;padding-bottom:.8rem}}


/* UX9 — character capacity feedback + FAQ motion */
.char-counter{justify-self:end;display:inline-flex;align-items:center;min-height:24px;padding:.2rem .55rem;border:2px solid currentColor;border-radius:999px;font-size:.76rem;font-weight:850;line-height:1;background:#fff;box-shadow:2px 2px 0 rgba(30,41,59,.18);transition:color .22s ease,background-color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.char-counter.is-green{color:#15803D;background:#F0FDF4}.char-counter.is-yellow{color:#A16207;background:#FFFBEB}.char-counter.is-red{color:#B91C1C;background:#FEF2F2}.char-counter.is-max,.char-counter.is-capacity{transform:scale(1.04);box-shadow:3px 3px 0 rgba(185,28,28,.22)}
.qr-capacity-hit .preview-box{animation:capacityNudge .42s ease}@keyframes capacityNudge{0%,100%{transform:none}35%{transform:translateX(-3px)}70%{transform:translateX(3px)}}
.faq details{overflow:hidden;transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s ease,background-color .28s ease}.faq details[open]{transform:translateY(-2px)}
.faq summary{position:relative;padding-inline-end:2.2rem;transition:color .24s ease,transform .24s ease}.faq summary::after{content:'+';position:absolute;inset-inline-end:.15rem;width:28px;height:28px;display:grid;place-items:center;border:2px solid currentColor;border-radius:50%;font-size:1.15rem;font-weight:900;line-height:1;transition:transform .32s cubic-bezier(.34,1.56,.64,1),background-color .24s ease,color .24s ease}.faq details[open] summary::after{transform:rotate(45deg);background:var(--accent);color:#fff}.faq summary:hover{transform:translateX(2px)}html[dir="rtl"] .faq summary:hover{transform:translateX(-2px)}
.faq-answer{display:block!important;height:0;opacity:0;overflow:hidden;transition:height .36s cubic-bezier(.22,1,.36,1),opacity .24s ease}.faq-answer-inner{overflow:hidden}.faq-answer-inner>p{padding:0 0 .9rem;margin:0}
@media(prefers-reduced-motion:reduce){.char-counter,.faq details,.faq summary,.faq summary::after,.faq-answer{transition:none!important;animation:none!important}}



/* UX10 — scanner result surface + optimized live QR preview */
.scanner-result-panel{text-align:start!important;min-height:320px;display:flex;flex-direction:column;gap:.85rem}
.scanner-result-panel>h2{margin:0!important}.scanner-result-placeholder{min-height:190px;display:grid;place-items:center;text-align:center;padding:1.25rem;border:2px dashed #CBD5E1;border-radius:18px;color:#64748B;background:rgba(248,250,252,.75)}
.scanner-result-placeholder[hidden]{display:none}.scanner-result-panel .scanner-result{margin:0!important;min-height:150px;white-space:pre-wrap;background:#fff!important;border:2px solid #CBD5E1!important;box-shadow:4px 4px 0 #E2E8F0!important}
.scanner-result-panel .scanner-result-actions{margin-top:auto}
.preview-performance-note{font-size:.78rem;color:#64748B;text-align:center;margin:.35rem 0 0}
@media(max-width:820px){.scanner-result-panel{min-height:240px}.scanner-result-placeholder{min-height:130px}}


/* UX11 — scroll performance + non-blocking sticky QR preview */
.site-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,253,245,.985)!important}
.homepage-hero .hero-copy{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,253,245,.97)!important}
.tool-card-link{will-change:auto!important}
.tool-card-link:hover,.tool-card-link:focus-visible{filter:none!important}
.page-tool .preview-panel{overscroll-behavior:auto!important}
@media(min-width:1025px){
  .page-tool .preview-panel{max-height:none!important;overflow:visible!important}
  .page-tool .preview-box{width:min(100%,390px,calc(100vh - 285px))!important;min-width:min(100%,250px)}
  .page-tool .preview-box canvas{max-height:calc(100vh - 300px)!important;object-fit:contain}
}
@media(max-height:680px) and (min-width:1025px){
  .page-tool .preview-box{width:min(100%,300px)!important}
  .page-tool .preview-panel{padding:.8rem!important}
  .page-tool .preview-panel h2{font-size:1rem;margin-bottom:.45rem}
}
.pwa-install-copy strong{font-size:1.02rem!important}
.pwa-install-action[aria-busy="true"],.nav-install-app[aria-busy="true"]{cursor:progress;opacity:.78}


/* UX12 — downloads and ready state live beside the QR result */
.preview-result-actions{display:grid;gap:.72rem;margin-top:.82rem;text-align:start}
.preview-ready-status{display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:42px;padding:.58rem .8rem;border:2px solid #15803D;border-radius:14px;background:#F0FDF4;color:#166534;font-size:.88rem;line-height:1.25;box-shadow:3px 3px 0 rgba(21,128,61,.18);transition:opacity .22s ease,transform .22s ease,box-shadow .22s ease}
.preview-ready-status[hidden]{display:none!important}.preview-ready-status.is-ready{animation:previewReadyPop .3s cubic-bezier(.34,1.56,.64,1)}
.preview-ready-dot{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.13)}
.preview-downloads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.62rem}
.preview-download{width:100%;min-height:48px;font-weight:850!important;transition:transform .24s cubic-bezier(.34,1.56,.64,1),box-shadow .24s ease,background-color .24s ease,color .24s ease,opacity .2s ease!important}
.preview-download:not(:disabled):hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #1E293B!important}
.preview-download:not(:disabled):active{transform:translate(1px,1px);box-shadow:2px 2px 0 #1E293B!important}
.preview-download:disabled{opacity:.42;box-shadow:2px 2px 0 #CBD5E1!important}
.page-tool .preview-panel>.preview-result-actions{width:min(100%,390px);margin-inline:auto}
@keyframes previewReadyPop{0%{opacity:0;transform:translateY(4px) scale(.98)}100%{opacity:1;transform:none}}
@media(max-width:560px){.preview-downloads{grid-template-columns:1fr}.preview-ready-status{font-size:.82rem;min-height:38px}.page-tool .preview-panel>.preview-result-actions{width:min(100%,300px)}}
@media(prefers-reduced-motion:reduce){.preview-ready-status,.preview-download{transition:none!important;animation:none!important}}