:root {
  --clay-canvas: #f4f1fa;
  --clay-surface: #ffffff;
  --clay-recessed: #efebf5;
  --clay-text: #332f3a;
  --clay-muted: #635f69;
  --clay-violet: #7c3aed;
  --clay-violet-soft: #a78bfa;
  --clay-pink: #db2777;
  --clay-sky: #0ea5e9;
  --clay-success: #10b981;
  --clay-warning: #f59e0b;
  --clay-border: rgba(124, 58, 237, 0.12);
  --shadow-clay: 16px 16px 32px rgba(160, 150, 180, 0.2), -10px -10px 24px rgba(255, 255, 255, 0.9), inset 6px 6px 12px rgba(139, 92, 246, 0.03), inset -6px -6px 12px rgba(255, 255, 255, 1);
  --shadow-clay-pressed: inset 6px 6px 12px rgba(160, 150, 180, 0.22), inset -6px -6px 12px rgba(255, 255, 255, 0.9);
  --shadow-clay-button: 10px 10px 22px rgba(124, 58, 237, 0.2), -6px -6px 14px rgba(255, 255, 255, 0.72), inset 3px 3px 8px rgba(255, 255, 255, 0.22), inset -3px -3px 8px rgba(74, 35, 145, 0.18);
}

html { scroll-behavior: smooth; overflow-x: clip; }
body.site-shell {
  background: var(--clay-canvas) !important;
  color: var(--clay-text) !important;
  font-family: "DM Sans", sans-serif !important;
  overflow-x: clip;
  position: relative;
}
body.site-shell::before,
body.site-shell::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .13;
  pointer-events: none;
  animation: clay-drift 18s ease-in-out infinite alternate;
}
body.site-shell::before { top: 5rem; left: -8rem; background: var(--clay-violet-soft); }
body.site-shell::after { right: -8rem; bottom: 8rem; background: var(--clay-pink); animation-delay: -7s; }

h1, h2, h3, h4, h5, h6,
.site-shell .font-black,
.site-shell .font-extrabold,
.site-shell .font-bold { font-family: "Nunito", sans-serif !important; }
.site-shell h1, .site-shell h2 { letter-spacing: -0.025em; }
.site-shell a { transition: color .2s ease, transform .2s ease, box-shadow .2s ease; }
.site-shell :focus-visible { outline: 3px solid rgba(14, 165, 233, .5); outline-offset: 3px; }

.site-shell header {
  background: rgba(255,255,255,.74) !important;
  border-color: var(--clay-border) !important;
  box-shadow: 0 8px 24px rgba(160,150,180,.08);
  backdrop-filter: blur(18px);
}
.site-shell header > .max-w-7xl {
  min-width: 0;
  gap: 1rem;
}
.site-shell header a[aria-label="QRMaker Homepage"] {
  min-width: 0;
  flex-shrink: 1;
}
.site-shell header a[aria-label="QRMaker Homepage"] > div { min-width: 0; }
.site-shell header a[aria-label="QRMaker Homepage"] span,
.site-shell header a[aria-label="QRMaker Homepage"] p { white-space: nowrap; }
.site-shell .hero-section {
  width: 100%;
  overflow: hidden;
}
.site-shell .hero-section > div {
  width: min(100%, 64rem);
  margin-inline: auto;
}
.site-shell .hero-title {
  max-width: 58rem;
  margin-inline: auto;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.site-shell .hero-title span { display: inline; }
.site-shell #hero-description {
  width: min(100%, 42rem);
  margin-inline: auto;
  text-wrap: pretty;
}
.site-shell .hero-section > div > .flex.flex-wrap {
  max-width: 52rem;
  margin-inline: auto;
}
.site-shell main > .bg-white,
.site-shell main .bg-white,
.site-shell #frames,
.site-shell #frameDisplayContainer,
.site-shell #why-us .bg-white,
.site-shell #cookieBanner {
  background: rgba(255,255,255,.78) !important;
  border-color: var(--clay-border) !important;
  box-shadow: var(--shadow-clay) !important;
  border-radius: 32px !important;
}
.site-shell input:not([type="checkbox"]):not([type="color"]),
.site-shell select,
.site-shell textarea {
  background: var(--clay-recessed) !important;
  color: var(--clay-text) !important;
  border-color: transparent !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-clay-pressed);
  min-height: 48px;
}
.site-shell input:not([type="checkbox"]):not([type="color"]):focus,
.site-shell select:focus,
.site-shell textarea:focus { background: #fff !important; box-shadow: 0 0 0 4px rgba(124,58,237,.12), var(--shadow-clay) !important; }
.site-shell button,
.site-shell .bg-blue-600,
.site-shell .bg-slate-900 {
  border-radius: 20px !important;
  font-family: "Nunito", sans-serif !important;
}
.site-shell button.bg-blue-600,
.site-shell #btn-create-free-qr,
.site-shell button[onclick*="downloadPNG"],
.site-shell button[type="submit"] {
  background: linear-gradient(135deg, var(--clay-violet-soft), var(--clay-violet)) !important;
  box-shadow: var(--shadow-clay-button) !important;
  min-height: 56px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.site-shell button.bg-blue-600:hover,
.site-shell #btn-create-free-qr:hover,
.site-shell button[onclick*="downloadPNG"]:hover,
.site-shell button[type="submit"]:hover { transform: translateY(-3px); filter: saturate(1.08); }
.site-shell button.bg-blue-600:active,
.site-shell #btn-create-free-qr:active,
.site-shell button[onclick*="downloadPNG"]:active,
.site-shell button[type="submit"]:active { transform: scale(.94); box-shadow: var(--shadow-clay-pressed) !important; }
.site-shell .text-slate-900,
.site-shell .text-slate-800,
.site-shell .text-slate-700 { color: var(--clay-text) !important; }
.site-shell .text-slate-600,
.site-shell .text-slate-500,
.site-shell .text-slate-400 { color: var(--clay-muted) !important; }
.site-shell .text-blue-600,
.site-shell .text-blue-700 { color: var(--clay-violet) !important; }
.site-shell .bg-blue-50,
.site-shell .bg-blue-50\/50,
.site-shell .bg-blue-50\/60 { background: rgba(167,139,250,.13) !important; }
.site-shell .border-slate-200,
.site-shell .border-slate-300,
.site-shell .border-slate-100 { border-color: var(--clay-border) !important; }
.site-shell .bg-slate-950,
.site-shell .bg-slate-900 { background: var(--clay-text) !important; }
.site-shell .text-slate-950 { color: var(--clay-text) !important; }
.site-shell .bg-gradient-to-r,
.site-shell .bg-gradient-to-br { background: linear-gradient(135deg, var(--clay-violet), var(--clay-pink)) !important; }
.site-shell .shadow-sm,
.site-shell .shadow-md,
.site-shell .shadow-xl { box-shadow: var(--shadow-clay) !important; }
.site-shell .rounded-xl,
.site-shell .rounded-2xl,
.site-shell .rounded-3xl { border-radius: 32px !important; }
.site-shell .rounded-full { border-radius: 999px !important; }
.site-shell .cat-btn,
.site-shell .frame-btn { border-radius: 20px !important; }
.site-shell .cat-btn.active,
.site-shell .frame-btn.active { background: rgba(167,139,250,.2) !important; border-color: var(--clay-violet) !important; }
.site-shell .prose a { color: var(--clay-violet); }
.site-shell .prose strong { color: var(--clay-text); }
.site-shell footer { background: rgba(51,47,58,.98) !important; border-color: rgba(255,255,255,.1) !important; }
.site-shell .site-eyebrow { color: var(--clay-violet); letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; font-weight: 800; }
.site-shell .clay-kicker { background: rgba(255,255,255,.68); border: 1px solid var(--clay-border); box-shadow: var(--shadow-clay); }
.site-shell #cookieBanner { max-width: 360px; padding: 1rem; backdrop-filter: blur(18px); }
.site-shell #cookieBanner button { min-height: 44px; }
.site-shell .mobile-nav-panel { display: none; }
.site-shell .mobile-nav-panel.open { display: block; }

@keyframes clay-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2rem, 2rem, 0) scale(1.14); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media (max-width: 640px) {
  .site-shell main > .bg-white,
  .site-shell main .bg-white,
  .site-shell #frames,
  .site-shell #frameDisplayContainer { border-radius: 28px !important; }
  .site-shell .grid-cols-3 { grid-template-columns: 1fr; gap: .65rem; }
  .site-shell .grid-cols-3 > * { padding: .2rem 0; }
}
@media (max-width: 767px) {
  .site-shell #btn-create-free-qr { display: none; }
  .site-shell #categoryTabs { min-width: 0 !important; flex-wrap: wrap; }
  .site-shell #categoryTabs .cat-btn { flex: 1 1 calc(50% - .4rem); min-width: 0; }
  .site-shell #frameDisplayContainer { min-width: 0 !important; width: 100%; }
}
@media (max-width: 639px) {
  .site-shell .hero-title span { display: block; }
  .site-shell .hero-title #hero-title-line2 { margin-top: .2em; }
  .site-shell .hero-section { padding-top: 2rem; }
  .site-shell .hero-section > div > .flex.flex-wrap { gap: .75rem 1rem; }
}
@media (max-width: 480px) {
  .site-shell header > .max-w-7xl { gap: .5rem; }
  .site-shell header a[aria-label="QRMaker Homepage"] { gap: .5rem; }
  .site-shell header a[aria-label="QRMaker Homepage"] img { width: 2.25rem; height: 2.25rem; }
  .site-shell header a[aria-label="QRMaker Homepage"] .text-xl { font-size: 1rem; }
  .site-shell header a[aria-label="QRMaker Homepage"] p,
  .site-shell header a[aria-label="QRMaker Homepage"] .text-\[10px\] { display: none; }
  .site-shell #lang-switcher { max-width: 5.5rem; padding-inline: .5rem; }
}