:root, html[data-scene="blue"] {
  --accent: #ff6fa5;      
  --accent-2: #ffb3d1;    
  --primary-2: #ff6fa5;   
  --nav-bg: linear-gradient(180deg, rgba(46, 130, 190, 0.92), rgba(46, 130, 190, 0.6));
  --menu-bg: linear-gradient(180deg, #1e5880, #1a4e74); 
}
html[data-scene="pink"] {
  --accent: #56b4f0; --accent-2: #ff6fa5; --primary-2: #d6336c;
  --nav-bg: linear-gradient(180deg, rgba(88, 20, 51, 0.9), rgba(88, 20, 51, 0.55));
  --menu-bg: linear-gradient(180deg, #471129, #3d0e22);
}
html[data-scene="violet"] {
  --accent: #ffb3d1; --accent-2: #7db8ff; --primary-2: #1e5fbf;
  --nav-bg: linear-gradient(180deg, rgba(18, 18, 26, 0.94), rgba(18, 18, 26, 0.62));
  --menu-bg: linear-gradient(180deg, #14141c, #101018);
}


:root {
  --paper: #fffdf7;
  --paper-2: #f4ecf9;
  --pastel: #efe7fa;
  --ink: #2a2140;
  --ink-soft: #6b6290;
  --line: rgba(42, 33, 64, 0.12);
  --card: #ffffff;
  --glow: rgba(255, 111, 165, 0.35);
  --shadow: 0 8px 24px rgba(36, 21, 66, 0.1);
  --shadow-lg: 0 20px 50px rgba(36, 21, 66, 0.2);
  --radius: 16px;
  --card-body-h: 114px;
  --nav-h: 46px;
  --serif: Georgia, "Times New Roman", "STSong", serif;
  --sans: "Segoe UI", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }


body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #fff; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

.container { width: min(1240px, 92%); margin: 0 auto; }


.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}


.rainbow-bar {
  position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 300;
  background: linear-gradient(90deg, #ff6fa5, #56b4f0, #ff6fa5);
  background-size: 300% 100%; animation: barFlow 8s linear infinite;
  transform: scaleX(var(--p, 0)); transform-origin: left center;
}
@keyframes barFlow { to { background-position: 300% 0; } }


section { position: relative; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 2.6rem; }
.kicker {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: var(--accent); letter-spacing: 0.06em; margin-bottom: 0.5rem;
}
.kicker::before, .kicker::after {
  content: ""; width: 30px; height: 1.5px; background: currentColor; opacity: 0.6;
}
.section-head h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  letter-spacing: -0.02em; line-height: 1.15;
}
.section-head h2 em { font-family: var(--serif); font-style: italic; color: var(--primary-2); }
.section-head .lead { color: var(--ink-soft); margin-top: 0.7rem; font-size: 0.98rem; }

.dark-sec .section-head h2 { color: #fff; }
.dark-sec .section-head h2 em { color: var(--accent-2); }
.dark-sec .section-head .lead { color: rgba(255, 255, 255, 0.75); }


.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--nav-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background 0.6s ease;
}
.nav-inner {
  height: 100%; display: flex; align-items: center; gap: 1.2rem;
  width: 100%; max-width: none; padding: 0 1rem;
  
}
.brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.12rem; color: #fff; letter-spacing: 0.02em; flex: none; }
.brand-logo { height: 30px; width: auto; }
.brand em, .f-brand em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  transition: color 0.6s ease;
}

html[data-scene="blue"] .brand em, html[data-scene="blue"] .f-brand em { color: #ff6fa5; }
html[data-scene="pink"] .brand em, html[data-scene="pink"] .f-brand em { color: #1e5fbf; }
html[data-scene="violet"] .brand em, html[data-scene="violet"] .f-brand em { color: #ffb3d1; }
/* In flow, so it shrinks with the window instead of floating over the nav.
   min-width:0 is what actually lets a flex item go below its content width. */
.nav-search {
  flex: 1 1 auto; min-width: 0; max-width: 320px;
  margin: 0 auto; position: relative;
}
.nav-search input {
  width: 100%; min-width: 0; padding: 0.46rem 1rem 0.46rem 2.4rem;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 0.92rem;
  outline: none; transition: border-color 0.3s, background 0.3s;
}
.nav-search input::placeholder { color: rgba(255, 255, 255, 0.65); }
.nav-search input:focus { border-color: var(--accent); background: rgba(255, 255, 255, 0.2); }
.nav-search .mag {
  position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; pointer-events: none;
  stroke: rgba(255, 255, 255, 0.8); stroke-width: 2; fill: none;
  stroke-linecap: round;
}
.search-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg);
  overflow: hidden; display: none; z-index: 120;
}
.search-panel.open { display: block; animation: popIn 0.25s var(--ease); }
.search-item {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 1rem;
  font-size: 0.9rem; cursor: pointer; transition: background 0.2s;
}
.search-item:hover { background: var(--pastel); }
.search-item .si-cat { margin-left: auto; font-size: 0.75rem; color: var(--ink-soft); }
.search-empty { padding: 0.9rem 1rem; color: var(--ink-soft); font-size: 0.9rem; }
@keyframes popIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-links { display: flex; gap: 1.3rem; flex: none; align-items: center; }
.nav-link { color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; font-weight: 600; position: relative; padding: 0.3rem 0; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--accent); border-radius: 2px; transition: width 0.3s var(--ease);
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { width: 100%; }

.nav-apps { position: relative; flex: none; }
.nav-apps-btn {
  display: grid; place-items: center; padding: 4px; cursor: pointer;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.25s, border-color 0.25s;
}
.nav-apps-mini { display: grid; grid-template-columns: repeat(3, 13px); grid-auto-rows: 13px; gap: 2px; place-items: center; }
.nav-apps-mini svg { width: 13px; height: 13px; display: block; }
.nav-apps-mini svg:nth-child(1) { fill: #25d366; }
.nav-apps-mini svg:nth-child(2) { fill: #e1306c; }
.nav-apps-mini svg:nth-child(3) { fill: #0a66c2; }
.nav-apps-mini svg:nth-child(4) { fill: #1877f2; }
.nav-apps-mini svg:nth-child(5) { fill: #ff0000; }
.nav-apps-mini svg.wc-mini { fill: #07c160; }
.nav-apps-btn .nav-txt { display: none; }
.nav-apps-btn:hover, .nav-apps-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.6);
}
.nav-apps-panel {
  position: absolute; top: calc(100% + 14px); right: 0;
  width: min(620px, calc(100vw - 2rem)); padding: 1.05rem 1.15rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem;
  background: #fff; border-radius: 22px;
  box-shadow: 0 30px 70px rgba(10, 20, 40, 0.34);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px) scale(0.96); transform-origin: center;
  will-change: transform, opacity;
  transition: opacity 0.3s var(--ease), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.52s;
  z-index: 145;
}
.nav-apps-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.app-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.7rem; border-radius: 11px;
  font-size: 0.92rem; font-weight: 600; color: var(--ink);
  transition: background 0.18s;
}
.app-row svg { width: 20px; height: 20px; flex: none; display: block; }
.app-row:hover { background: var(--pastel); }
.app-wa svg { fill: #25d366; }
.app-ig svg { fill: #e1306c; }
.app-li svg { fill: #0a66c2; }
.app-fb svg { fill: #1877f2; }
.app-yt svg { fill: #ff0000; }
.app-wc {
  position: relative; width: 100%; flex-wrap: wrap;
  border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
}
.app-wc svg { fill: #07c160; }
.qr-card {
  position: absolute; right: calc(100% + 14px); bottom: -4px;
  display: block; width: 210px; padding: 0.55rem 0.55rem 0.45rem;
  background: #fff; border-radius: 16px;
  box-shadow: 0 22px 54px rgba(10, 20, 40, 0.3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(10px) scale(0.9); transform-origin: bottom right;
  transition: opacity 0.22s var(--ease), transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.34s;
}
.app-wc:hover .qr-card, .app-wc:focus-visible .qr-card, .app-wc.qr-open .qr-card {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
.qr-img { display: block; width: 100%; height: auto; border-radius: 9px; }
.qr-hint {
  display: block; margin-top: 0.4rem; text-align: center;
  font-size: 0.72rem; font-weight: 600; color: #4a5b78;
}

@media (min-width: 1021px) {
  .nav-apps-panel .app-row {
    flex-direction: column; align-items: center; gap: 0.5rem; text-align: center;
    padding: 0.95rem 0.5rem; border-radius: 16px;
    transition: background 0.18s, transform 0.22s var(--ease);
  }
  .nav-apps-panel .app-row svg { width: 34px; height: 34px; }
  .nav-apps-panel .app-row:hover { background: var(--pastel); transform: translateY(-3px); }
  .nav-apps-panel .app-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav-apps-panel .app-wc { flex-wrap: nowrap; }
  .nav-apps-panel .qr-card {
    left: 50%; right: auto; bottom: auto; top: calc(100% + 12px);
    transform: translate(-50%, -10px) scale(0.9); transform-origin: top center;
  }
  .nav-apps-panel .app-wc:hover .qr-card,
  .nav-apps-panel .app-wc:focus-visible .qr-card,
  .nav-apps-panel .app-wc.qr-open .qr-card { transform: translate(-50%, 0) scale(1); }
  .nav-apps-panel.open .app-row {
    animation: nmIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms) 1 backwards;
  }
}
html.apps-open::before {
  content: ""; position: fixed; inset: 0; z-index: 99;
  background: rgba(10, 20, 40, 0.34);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}

/* ---- Contact page, white + sky blue ---- */
/* short heading, so let the form start straight after it */
#contact-page .c-page { min-height: 0; }
.contact-wrap { max-width: 560px; margin: 0 auto; padding: 0.4rem 0 1rem; }
.contact-quick {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem; margin-bottom: 1.5rem;
}
.contact-row {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0.85rem 1rem; border-radius: 14px; cursor: pointer;
  background: #fff; border: 1.5px solid #56b4f0; color: #2f88c9;
  font-size: 0.95rem; font-weight: 700;
  transition: background 0.22s, color 0.22s, border-color 0.22s,
    transform 0.22s var(--ease);
}
.contact-row:hover {
  background: #56b4f0; border-color: #56b4f0; color: #fff;
  transform: translateY(-2px);
}
.contact-row:focus-visible { outline: 2px solid #3d97d4; outline-offset: 2px; }
.contact-wc { position: relative; }
.contact-wrap .qr-card {
  position: absolute; top: calc(100% + 10px); right: 0; display: block;
  width: 210px; padding: 0.55rem 0.55rem 0.45rem;
  background: #fff; border-radius: 16px;
  box-shadow: 0 22px 54px rgba(10, 20, 40, 0.3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px) scale(0.9); transform-origin: top right;
  transition: opacity 0.22s var(--ease),
    transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.34s;
  z-index: 5;
}
.contact-wc:hover .qr-card, .contact-wc:focus-visible .qr-card, .contact-wc.qr-open .qr-card {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
.contact-form label {
  display: block; margin: 0 0 0.28rem;
  font-size: 0.76rem; font-weight: 700; color: var(--ink-soft);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%; box-sizing: border-box; margin-bottom: 0.7rem;
  padding: 0.55rem 0.85rem; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font-family: inherit; font-size: 0.9rem; outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.contact-form textarea { resize: vertical; min-height: 84px; }
.contact-form input:focus, .contact-form textarea:focus {
  border-color: #56b4f0; box-shadow: 0 0 0 3px rgba(86, 180, 240, 0.18);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #a9a3bd; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-send {
  width: 100%; padding: 0.65rem 1rem; border-radius: 999px;
  background: #56b4f0; color: #fff; font-weight: 800; font-size: 0.92rem;
  cursor: pointer; transition: background 0.25s, transform 0.2s var(--ease);
}
.contact-send:hover { background: #3d97d4; }
.contact-send:disabled { opacity: 0.6; cursor: default; }
.contact-status { margin: 0.6rem 0 0; font-size: 0.82rem; font-weight: 600; }
.contact-status.ok { color: #1e7a3a; }
.contact-status.err { color: #b02a22; }

.nav-item { position: relative; display: flex; align-items: center; }
.nav-item::before {
  content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 26px;
}
.nav-menu {
  position: fixed; top: calc(var(--nav-h) + 6px); right: 1rem;
  width: min(830px, calc(100vw - 2rem));
  max-height: calc(100vh - var(--nav-h) - 1.6rem); overflow-y: auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.15rem 1.5rem; padding: 1.1rem 1.25rem 0.85rem;
  background: #fff; border-radius: 18px;
  box-shadow: 0 10px 24px rgba(10, 20, 40, 0.12);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform-origin: top right;
  transform: perspective(1100px) rotateX(-9deg) translateY(-16px) scale(0.97);
  filter: blur(9px);
  transition: opacity 0.26s var(--ease), transform 0.3s var(--ease),
    filter 0.26s ease, box-shadow 0.34s var(--ease), visibility 0.3s;
  z-index: 140;
}
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none; filter: none;
  box-shadow: 0 22px 54px rgba(10, 20, 40, 0.28);
  transition-duration: 0.42s, 0.66s, 0.4s, 0.5s, 0.66s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-menu::before {
  content: ""; position: absolute; top: 0; right: 1.6rem; width: 96px; height: 3px;
  border-radius: 0 0 3px 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.nav-menu::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 34%, var(--accent) 50%,
    rgba(255, 255, 255, 0) 66%);
  background-size: 240% 100%; background-position: 135% 0;
}
.nav-item:hover .nav-menu::after, .nav-item:focus-within .nav-menu::after {
  animation: nmSheen 1.15s var(--ease) 0.1s 1 both;
}
@keyframes nmSheen {
  0% { opacity: 0; background-position: 135% 0; }
  20% { opacity: 0.15; }
  65% { opacity: 0.11; }
  100% { opacity: 0; background-position: -45% 0; }
}
.nav-item:hover > .nav-link::after, .nav-item:focus-within > .nav-link::after { width: 100%; }
.nm-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.nm-group { display: flex; flex-direction: column; min-width: 0; }
.nm-head {
  font-size: 0.71rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 800;
  color: var(--accent); padding: 0.4rem 0.55rem 0.45rem; border-radius: 9px;
  transition: background 0.18s, transform 0.22s var(--ease);
}
.nm-head:hover { background: var(--pastel); transform: translateX(3px); }
.nm-link {
  font-size: 0.87rem; color: var(--ink); padding: 0.35rem 0.55rem; border-radius: 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.18s, color 0.18s, transform 0.22s var(--ease);
}
.nm-link:hover { background: var(--pastel); color: var(--accent); transform: translateX(3px); }
@keyframes nmIn { from { opacity: 0; transform: translateY(11px); } }
.nav-item:hover .nm-head, .nav-item:focus-within .nm-head,
.nav-item:hover .nm-link, .nav-item:focus-within .nm-link {
  animation: nmIn 0.46s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms) 1 backwards;
}

.nav-burger { display: none; }


@media (min-width: 1021px) {
  .nav-inner { position: relative; justify-content: space-between; padding: 0 0.7rem; }
  /* Equal flex on both sides is what centres the search in the bar itself.
     With margin:auto it only centres in the gap left over, which sits left of
     middle because the links block is much wider than the logo. */
  .brand { flex: 1 1 0; }
  .nav-links { flex: 1 1 0; justify-content: flex-end; }
  .nav-search { flex: 0 1 320px; margin: 0; }
  /* "Contact us" is the only nav item with a space in it, so it is the only
     one that can break onto two lines when the row gets tight. */
  .nav-link { white-space: nowrap; }
}

/* Laptop widths. The links keep their full width on one line and the search
   gives up the room instead, tightening the gaps as it gets narrower. */
@media (min-width: 1021px) and (max-width: 1300px) {
  .nav-links { gap: 0.75rem; }
  .nav-search { flex: 0 1 260px; }
}
@media (min-width: 1021px) and (max-width: 1120px) {
  .nav-links { gap: 0.5rem; }
  .nav-search { flex: 0 1 190px; }
}


.hero {
  height: 82svh; min-height: 560px; position: relative; overflow: hidden; background: #56b4f0;
  
  --accent: #ff6fa5; --accent-2: #ffb3d1; --glow: rgba(255, 111, 165, 0.35);
}
.slide {
  position: absolute; inset: 0; z-index: 1; opacity: 0;
  transform: translateX(100%);
  transition: transform 1s var(--ease), opacity 0.7s ease;
  pointer-events: none;
}
.slide.active { transform: translateX(0); opacity: 1; z-index: 2; pointer-events: auto; }
.slide.prev { transform: translateX(-100%); }
.slide-bg { position: absolute; inset: 0; overflow: hidden; }
.slide-bg .blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55;
  animation: drift 16s ease-in-out infinite alternate;
}
.slide-bg .blob.b1 { width: 46vw; height: 46vw; left: -12vw; top: -14vw; }
.slide-bg .blob.b2 { width: 34vw; height: 34vw; right: -8vw; bottom: -10vw; animation-delay: -6s; }
.slide-bg .blob.b3 { width: 22vw; height: 22vw; right: 24vw; top: 8vh; animation-delay: -11s; opacity: 0.4; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(4vw, 3vh) scale(1.15); }
}
.slide-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.9s;
}
.slide-img.loaded { opacity: 1; }
.slide.active .slide-bg { animation: kenburns 9s var(--ease) forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.slide-content {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; text-align: left;
  padding-top: var(--nav-h);
  padding-bottom: 8vh;
}
.slide-kicker {
  font-family: var(--serif); font-style: italic; color: var(--accent-2);
  font-size: 1.05rem; letter-spacing: 0.1em;
  opacity: 0; transform: translateY(20px);
}
.slide-title {
  color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.06;
  letter-spacing: -0.02em; margin: 0.6rem 0 0.9rem; max-width: 11ch;
  opacity: 0; transform: translateY(26px);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
.slide-title em { font-family: var(--serif); font-style: italic; color: var(--accent); }
.slide-sub {
  color: rgba(255, 255, 255, 0.85); font-size: 1rem; max-width: 46ch;
  opacity: 0; transform: translateY(26px);
}
.slide-cta { display: flex; gap: 0.9rem; margin-top: 1.6rem; flex-wrap: wrap; opacity: 0; transform: translateY(26px); }
.slide.active .slide-kicker, .slide.active .slide-title,
.slide.active .slide-sub, .slide.active .slide-cta {
  animation: riseIn 0.9s var(--ease) forwards;
}
.slide.active .slide-title { animation-delay: 0.12s; }
.slide.active .slide-sub { animation-delay: 0.24s; }
.slide.active .slide-cta { animation-delay: 0.36s; }
@keyframes riseIn { to { opacity: 1; transform: none; } }

.slide.on-light { --accent: #c92a63; --accent-2: #96244e; }
.slide.on-light .slide-title { color: #2a2140; text-shadow: 0 4px 26px rgba(255, 255, 255, 0.6); }
.slide.on-light .slide-sub { color: rgba(42, 33, 64, 0.88); text-shadow: 0 2px 14px rgba(255, 255, 255, 0.5); }
.slide.on-light .btn-ghost {
  background: rgba(42, 33, 64, 0.08); color: #2a2140;
  border-color: rgba(42, 33, 64, 0.45);
}
.slide.on-light .btn-ghost:hover { background: rgba(42, 33, 64, 0.15); }
.dot { box-shadow: 0 1px 4px rgba(20, 10, 40, 0.5); }

.hero-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; z-index: 5; }
.dot {
  width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.4);
  transition: all 0.35s var(--ease);
}
.dot.active { width: 30px; background: var(--accent); }
.hero-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 5;
  background: rgba(255, 255, 255, 0.12);
}

.hero-progress i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }


.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.78rem 1.7rem; border-radius: 999px; line-height: 1.25;
  font-weight: 700; font-size: 0.95rem; transition: transform 0.3s var(--ease), box-shadow 0.3s, background 0.3s, color 0.3s;
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 26px var(--glow); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 34px var(--glow); }
.btn-ghost { background: rgba(255, 255, 255, 0.16); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.5); } 
.btn-ghost:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-3px); }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 10px 26px rgba(36, 21, 66, 0.3); }
.btn-dark:hover { transform: translateY(-3px); }


.marquee {
  background: linear-gradient(90deg, #56b4f0, #ff6fa5, #56b4f0);
  background-size: 300% 100%; animation: marqueeBg 14s linear infinite;
  color: #fff; overflow: hidden; padding: 0.7rem 0; position: relative; z-index: 2;
}
@keyframes marqueeBg { to { background-position: 400% 0; } }
.marquee-track { display: flex; gap: 2.6rem; width: max-content; animation: scroll 30s linear infinite; }
@keyframes scroll { to { transform: translateX(-50%); } }
.marquee-item { font-weight: 800; letter-spacing: 0.12em; font-size: 0.85rem; white-space: nowrap; display: flex; align-items: center; gap: 2.6rem; }
.marquee-item::after { content: "✦"; opacity: 0.9; }
.marquee.idle, .marquee.idle .marquee-track { animation-play-state: paused; }




#desk { padding: 1.05rem 0 1.15rem; background: #3d97d4; }
#desk .section-head { margin-bottom: 0.5rem; }



.desk-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 108px), max-content));
  justify-content: center;
  gap: clamp(10px, 1.4vw, 20px);
  max-width: 1240px; margin: 0 auto;
}
.d-case {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.2rem 0.1rem;
  background: none; border: 0; border-radius: 16px; cursor: pointer;
  transition: transform 0.45s var(--ease);
  outline-offset: 6px;
}

.d-case-media {
  display: grid; place-items: center;
}
.d-case-media svg {
  width: clamp(92px, 10.5vw, 112px); height: auto;
  filter: drop-shadow(0 8px 12px rgba(10, 48, 100, 0.35));
  transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
}

.d-case-img {
  width: clamp(96px, 11vw, 126px); aspect-ratio: 1 / 1;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.6s ease, transform 0.45s var(--ease),
    filter 0.45s var(--ease);
}
.d-case-img.loaded { opacity: 1; }

.d-case:hover, .d-case:focus-visible { transform: translateY(-8px); }
.d-case:hover .d-case-media svg, .d-case:focus-visible .d-case-media svg {
  transform: translateY(-3px) scale(1.1) rotate(-4deg);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.75))
          drop-shadow(0 0 20px rgba(207, 240, 255, 0.9))
          drop-shadow(0 14px 18px rgba(10, 48, 100, 0.4));
}
.d-case:hover .d-case-img, .d-case:focus-visible .d-case-img {
  transform: scale(1.04) rotate(-1deg);
  
  filter: drop-shadow(0 0 16px rgba(210, 242, 255, 0.9))
          drop-shadow(0 0 40px rgba(190, 232, 255, 0.55));
}

.d-case.pop { animation: dCasePop 0.5s var(--ease); }
@keyframes dCasePop {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-6px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}




#shop { padding: 3rem 0 5rem; background: linear-gradient(180deg, #eaf6fd 0%, #fff 26%, #ffe3f0 62%, #fff6fa 100%); }
.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 2rem;
}
.chips { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.chip {
  padding: 0.5rem 1.15rem; border-radius: 999px; font-weight: 700; font-size: 0.87rem;
  background: #fff; border: 1.5px solid var(--line); color: var(--ink-soft);
  transition: all 0.3s var(--ease);
}
.chip:hover { border-color: var(--primary-2); color: var(--primary-2); transform: translateY(-2px); }
.chip.active { background: var(--primary-2); border-color: var(--primary-2); color: #fff; box-shadow: 0 8px 20px rgba(214, 51, 108, 0.35); }

.chip.extra { display: none; }
.chips.open .chip.extra { display: inline-block; animation: popIn 0.25s var(--ease); }
.chip.more {
  background: transparent; border-style: dashed; color: var(--primary-2);
}
.chip.more:hover { background: #fff; }


.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.35rem; }
.cat-tile {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
}
.cat-tile .ph { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 5; background: #fff; }
.cat-tile .ph::before { display: none; }
.cat-tile:hover {
  transform: translateY(-6px);
  border-color: #56b4f0;
  box-shadow:
    0 0 0 3px rgba(86, 180, 240, 0.3),
    0 0 26px rgba(86, 180, 240, 0.45),
    0 20px 44px rgba(36, 21, 66, 0.2);
}
.cat-label {
  position: relative; z-index: 2; margin-top: auto;
  padding: 0.7rem 0.6rem 0.75rem; background: #fff;
  color: var(--ink); font-weight: 800; font-size: 0.84rem; text-align: center;
  border-top: 1px solid var(--line);
  height: var(--card-body-h); display: flex; flex-direction: column;
  justify-content: center; align-items: center;
}
.cat-count { display: block; font-size: 0.68rem; font-weight: 600; color: var(--ink-soft); margin-top: 2px; }




.grid-more { display: flex; justify-content: center; gap: 0.8rem; margin-top: 1.8rem; flex-wrap: wrap; }
.btn-more { background: var(--primary-2); color: #fff; box-shadow: 0 10px 26px rgba(36, 21, 66, 0.25); }
.btn-more:hover { transform: translateY(-3px); }
.btn-less { background: #fff; color: var(--primary-2); border: 1.5px solid var(--primary-2); }
.btn-less:hover { transform: translateY(-3px); }
.count-note { font-size: 0.84rem; color: var(--ink-soft); }


.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.35rem;
}
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s;
}
.card:hover {
  transform: translateY(-7px);
  border-color: #56b4f0;
  box-shadow:
    0 0 0 3px rgba(86, 180, 240, 0.3),
    0 0 26px rgba(86, 180, 240, 0.45),
    0 22px 48px rgba(36, 21, 66, 0.18);
}
.card-imgwrap { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; }
.card-imgwrap:has(.card-img.loaded) .ph { opacity: 0; }
.ph {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 15% 10%, rgba(255, 255, 255, 0.55), transparent 45%),
    linear-gradient(135deg, var(--tint, #e9defa), var(--tint2, #d7c6f2));
  overflow: hidden;
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1.5px, transparent 1.5px);
  background-size: 22px 22px; opacity: 0.5;
}
.card-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 0.5s, transform 0.65s var(--ease);
}
.card-img.loaded { opacity: 1; }
.card-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em;
  padding: 0.28rem 0.75rem; border-radius: 999px; color: #fff;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 16px var(--glow);
  animation: tagPulse 2.4s ease-in-out infinite;
}
@keyframes tagPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}


.card.flash { animation: cardFlash 1.1s var(--ease); }
@keyframes cardFlash {
  0%, 100% { box-shadow: var(--shadow); }
  35% { box-shadow: 0 0 0 4px var(--accent), 0 24px 55px rgba(36, 21, 66, 0.3); transform: translateY(-8px); }
  65% { box-shadow: 0 0 0 4px var(--accent), 0 24px 55px rgba(36, 21, 66, 0.3); transform: translateY(-8px); }
}
.card-body { padding: 0.75rem 0.95rem 0.85rem; display: flex; flex-direction: column; gap: 0.18rem; flex: 0 0 auto; height: var(--card-body-h); }

.card-case {
  aspect-ratio: 4 / 3; background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(30, 95, 191, 0.07), inset 0 0 46px rgba(30, 95, 191, 0.05);
}
.ph-white {
  position: absolute; inset: 0; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(30, 95, 191, 0.08), inset 0 0 70px rgba(30, 95, 191, 0.06);
}
.card-cat { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-2); }
.card-name { font-size: 0.97rem; letter-spacing: -0.01em; line-height: 1.25; }
.card-line { font-size: 0.77rem; color: var(--ink-soft); flex: 1; }
.card-link { font-weight: 800; font-size: 0.77rem; color: var(--accent); margin-top: 0.28rem; transition: gap 0.3s; display: inline-flex; gap: 0.3rem; align-items: center; }
.card:hover .card-link { gap: 0.6rem; }
.no-results { text-align: center; padding: 3.5rem 1rem; color: var(--ink-soft); display: none; }
.no-results p { font-size: 1.05rem; }


#about { position: relative; padding: 5rem 0; background: #0b1b3a; color: #fff; overflow: hidden; }
.about-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0b1b3a; }
.about-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.about-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 14, 34, 0.80) 0%, rgba(6, 14, 34, 0.60) 36%, rgba(6, 14, 34, 0.30) 64%, rgba(6, 14, 34, 0.42) 100%),
    linear-gradient(180deg, rgba(6, 14, 34, 0.50) 0%, rgba(6, 14, 34, 0) 26%, rgba(6, 14, 34, 0) 60%, rgba(6, 14, 34, 0.58) 100%);
}
.about-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3.2rem; align-items: center; position: relative; z-index: 2; }
.about-text {
  background: rgba(9, 20, 46, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 26px;
  padding: 2.4rem 2.4rem 2.6rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(4, 10, 28, 0.42);
}
.about-text .kicker { color: #ff6fa5; }
.about-text h2 { font-family: var(--serif); font-size: clamp(1.75rem, 3.4vw, 2.55rem); font-weight: 600; letter-spacing: -0.005em; line-height: 1.22; color: #ffffff; text-shadow: 0 2px 18px rgba(4, 10, 28, 0.55); }
.about-text h2 em { font-style: italic; color: #ff6fa5; }
.about-text p { color: rgba(255, 255, 255, 0.90); margin-top: 1rem; font-family: var(--serif); font-size: 1.04rem; line-height: 1.85; max-width: 60ch; }
.about-text p em { font-style: italic; font-weight: 400; color: #ff6fa5; }
.about-card {
  background: rgba(9, 20, 46, 0.44); border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 24px; padding: 2.2rem 2rem; text-align: center;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-lg);
}
.about-card img { height: 80px; margin: 0 auto 1.1rem; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35)); }
.about-card .a-name { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; color: #ffffff; }
.about-card .a-name em { font-family: var(--serif); font-style: italic; font-weight: 400; color: #ff6fa5; }
.about-card p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.98rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.92); margin-top: 0.5rem; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-top: 1.6rem; }
.stat { background: rgba(9, 20, 46, 0.46); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 15px; padding: 1rem 0.5rem; text-align: center; }
.stat b { display: block; font-family: var(--serif); font-size: 1.7rem; font-weight: 600; letter-spacing: -0.01em; color: #ffffff; }
.stat span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.035em; color: rgba(255, 255, 255, 0.92); }


#pisophia {
  position: relative; padding: 5.5rem 0;
  margin-top: 3.4rem;
  background: radial-gradient(130% 150% at 80% 12%, #1b2a5c 0%, #121c40 44%, #0b1229 100%);
  color: #ffffff;
}
#pisophia::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 3.4rem;
  background: linear-gradient(180deg, #ffe3f0 0%, #ffffff 100%); pointer-events: none;
}
.ps-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background-image: url("../assets/logo-white.png");
  background-repeat: no-repeat;
  background-position: calc(100% + 70px) center;
  background-size: auto 215%;
  opacity: 0.07; pointer-events: none;
}
.ps-inner { position: relative; z-index: 2; max-width: 660px; }
.ps-inner .kicker { color: #8fb4ff; }
.ps-inner h2 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.005em; line-height: 1.15;
  font-size: clamp(2.1rem, 4.4vw, 3.15rem); color: #ffffff;
}
.ps-inner h2 em { font-style: italic; color: #ff6fa5; }
.ps-inner p {
  margin-top: 1.05rem; color: rgba(255, 255, 255, 0.82);
  font-size: 1rem; line-height: 1.85; max-width: 60ch;
}
.ps-btn {
  margin-top: 1.9rem; background: #ff6fa5; color: #fff;
  box-shadow: 0 12px 30px rgba(255, 111, 165, 0.34);
}
.ps-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(255, 111, 165, 0.42); }
.ps-arrow {
  width: 17px; height: 17px; stroke: currentColor; stroke-width: 2.2; fill: none;
  stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease);
}
.ps-btn:hover .ps-arrow { transform: translateX(4px); }


.footer { background: linear-gradient(180deg, #0d0d12 0%, #08080c 100%); color: rgba(255, 255, 255, 0.75); padding: 3.6rem 0 1.8rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.2rem; }
.f-brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; font-weight: 800; font-size: 1.25rem; margin-bottom: 0.9rem; }
.f-brand img { height: 34px; }
.f-brand em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.footer p { font-size: 0.86rem; }
.footer h4 { color: #fff; font-size: 0.92rem; margin-bottom: 0.9rem; letter-spacing: 0.04em; }
.f-links { list-style: none; display: grid; gap: 0.5rem; }
.f-links a { font-size: 0.86rem; transition: color 0.25s, padding-left 0.25s; }
#f-contact li { font-size: 0.86rem; }
.f-links a:hover { color: var(--accent); padding-left: 5px; }
.footer-bottom {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem;
}


.desk-mascot {
  position: absolute; z-index: 6; width: 62px; height: 80px;
  pointer-events: none;
  perspective: 420px;
  transition: left 1.4s cubic-bezier(0.35, 0.9, 0.45, 1.15), top 1.4s cubic-bezier(0.35, 0.9, 0.45, 1.15);
}
.mascot-float { animation: mascotBob3d 2.8s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes mascotBob3d {
  0%, 100% { transform: translateY(0) rotateX(4deg) rotateY(-16deg) rotateZ(-3deg) scale(1); }
  50% { transform: translateY(-12px) rotateX(-5deg) rotateY(16deg) rotateZ(3deg) scale(1.05); }
}

.mascot-svg, .mascot-img {
  animation: mascotFlip 7.5s cubic-bezier(0.55, 0.08, 0.4, 1.25) infinite;
}
@keyframes mascotFlip {
  0%, 100% { transform: rotateY(0deg); }
  42%, 58% { transform: rotateY(360deg); }
}

.mascot-shadow {
  position: absolute; left: 50%; bottom: -10px; width: 60px; height: 14px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35), transparent 70%);
  animation: shadowBob 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shadowBob {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.35; }
  50% { transform: translateX(-50%) scaleX(0.68); opacity: 0.18; }
}
.mascot-svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3)); }
.mascot-img {
  display: none; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}
.desk-mascot.photo .mascot-img { display: block; }
.desk-mascot.photo .mascot-svg { display: none; }
.m-body { animation: mascotBreathe 3s ease-in-out infinite; transform-origin: 50px 72px; }
@keyframes mascotBreathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.05); }
}
.m-arm, .m-arm2 { animation: mascotWave 1.4s ease-in-out infinite; transform-origin: 25px 62px; }
.m-arm2 { transform-origin: 75px 62px; animation-delay: 0.15s; }
@keyframes mascotWave {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(22deg); }
}
.m-eye { animation: mascotBlink 4.2s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes mascotBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
}
.mascot-bubble {
  position: absolute; left: 50%; bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(6px) scale(0.8);
  background: #fff; color: var(--ink);
  font-weight: 800; font-size: 0.8rem; white-space: nowrap;
  padding: 0.4rem 0.95rem; border-radius: 999px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.mascot-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fff;
}
.desk-mascot.talk .mascot-bubble {
  opacity: 1; transform: translateX(-50%) translateY(0) scale(1);
}

.m-shadow { animation: shadowPulse 2.8s ease-in-out infinite; transform-origin: center; }
@keyframes shadowPulse {
  0%, 100% { transform: scaleX(1); opacity: 0.32; }
  50% { transform: scaleX(0.82); opacity: 0.2; }
}
.desk-mascot.flying .mascot-float { animation: flySway 0.55s ease-in-out infinite; }
@keyframes flySway {
  0%, 100% { transform: rotateY(-16deg) translateY(0); }
  50% { transform: rotateY(16deg) translateY(-6px); }
}
.desk-mascot.land .mascot-svg { animation: landHop 0.45s var(--ease); }
@keyframes landHop {
  0% { transform: scale(1.15, 0.85); }
  55% { transform: scale(0.92, 1.1); }
  100% { transform: scale(1, 1); }
}
.desk-mascot.excited .mascot-float { animation: excitedWiggle 0.4s ease-in-out infinite; }
@keyframes excitedWiggle {
  0%, 100% { transform: rotate(-10deg) scale(1); }
  50% { transform: rotate(10deg) scale(1.08); }
}
.desk-mascot.happy .mascot-svg, .desk-mascot.happy .mascot-img { animation: happySpin 0.8s ease; }
@keyframes happySpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(360deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}


.chat-widget { position: fixed; right: 22px; bottom: 22px; z-index: 95; }
.chat-fab {
  width: 46px; height: 46px; border-radius: 50%;
  background: #ffffff; 
  box-shadow: 0 10px 24px rgba(36, 21, 66, 0.28);
  display: grid; place-items: center; position: relative;
  transition: transform 0.3s var(--ease);
}
.chat-fab:hover { transform: scale(1.08); }

.chat-fab-img, .chat-fab-svg { display: none; }
.chat-pop {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  max-width: 230px; background: #fff; color: var(--ink);
  padding: 0.55rem 0.9rem; border-radius: 16px 16px 4px 16px;
  box-shadow: 0 12px 26px rgba(10, 48, 100, 0.22);
  font-size: 0.85rem; font-weight: 700; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; z-index: 96;
  opacity: 0; visibility: hidden;
  transition: opacity 0.36s ease, visibility 0s linear 0.36s;
}
.chat-pop.on {
  opacity: 1; visibility: visible;
  transition: opacity 0.36s ease;
}
.chat-pop::after {
  content: ""; position: absolute; right: 16px; bottom: -6px;
  width: 12px; height: 12px; background: #fff;
  transform: rotate(45deg); border-radius: 2px;
}
.chat-pop:hover { filter: brightness(0.98); }
.chat-pop:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.chat-ball { 
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%,
      #ffffff 0%, #ffffff 45%, #eaf6ff 72%, #cfe7fa 90%, #b5ddf8 100%);
  box-shadow:
    inset -3px -5px 8px rgba(86, 180, 240, 0.45),
    inset 2px 3px 6px rgba(255, 255, 255, 0.9);
}
.cb-glance {
  position: absolute; inset: 0;
  animation: cbGlance 9s ease-in-out infinite;
}
@keyframes cbGlance {
  0%, 6% { transform: translate(0, 0); }
  18%, 30% { transform: translate(7px, 0); }
  40%, 52% { transform: translate(7px, 5.5px); }
  62% { transform: translate(0, 0); }
  74%, 86% { transform: translate(-7px, 0); }
  100% { transform: translate(0, 0); }
}
.cb-eye {
  position: absolute; top: 12px; width: 12px; height: 12px;
  transform-origin: center;
  animation: cbBlink 4.6s ease-in-out infinite;
}
.cb-eye-in {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #a5daf9 0%, #56b4f0 55%, #2e8bd0 100%);
  box-shadow: inset 0 -2px 3px rgba(19, 93, 148, 0.4);
  transform-origin: center;
  animation: cbMood 13s ease-in-out infinite;
}
.cb-eye:first-child { left: 9px; }
.cb-eye:last-child { left: 25px; }
@keyframes cbBlink {
  0%, 91%, 100% { transform: scaleY(1); }
  94.5% { transform: scaleY(0.08); }
}
@keyframes cbMood {
  0%, 14%, 36%, 58%, 74%, 100% { transform: scale(1, 1); }
  20%, 28% { transform: scale(0.8333, 1.3333); }
  62%, 70% { transform: scale(1.0833, 0.4167); }
}
.chat-panel {
  position: absolute; right: 0; bottom: 70px; width: 330px; max-width: 88vw;
  background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(36, 21, 66, 0.35);
  overflow: hidden; display: none; flex-direction: column;
}
.chat-panel.open { display: flex; animation: popIn 0.25s var(--ease); }
.chat-head {
  background: linear-gradient(90deg, #56b4f0, #ff6fa5);
  color: #fff; font-weight: 800; padding: 0.85rem 1.1rem;
  display: flex; justify-content: space-between; align-items: center;
}
.chat-close { color: #fff; font-size: 1.3rem; line-height: 1; }
.chat-msgs {
  height: 250px; overflow-y: auto; padding: 0.9rem;
  display: flex; flex-direction: column; gap: 0.5rem; background: #f6f9fc;
}
.chat-msg { max-width: 82%; padding: 0.55rem 0.85rem; border-radius: 14px; font-size: 0.85rem; line-height: 1.45; }
.chat-msg.bot { background: #fff; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg.user { background: #56b4f0; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 0.9rem; border-top: 1px solid var(--line); }
.chat-chip {
  padding: 0.34rem 0.8rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700;
  background: #fff; border: 1.5px solid #56b4f0; color: #2f88c9;
  transition: all 0.25s;
}
.chat-chip:hover { background: #56b4f0; color: #fff; }
.chat-input-row { display: flex; gap: 0.5rem; padding: 0.7rem 0.9rem; border-top: 1px solid var(--line); }
.chat-input-row input {
  flex: 1; padding: 0.55rem 0.9rem; border-radius: 999px;
  border: 1.5px solid var(--line); font-size: 0.85rem; outline: none;
}
.chat-input-row input:focus { border-color: #56b4f0; }
.chat-input-row button {
  background: #ff6fa5; color: #fff; font-weight: 800;
  border-radius: 999px; padding: 0 0.95rem; font-size: 0.85rem;
}


.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}


.to-top {
  position: fixed; left: 20px; bottom: 20px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary-2); color: #fff; font-size: 1rem;
  display: grid; place-items: center; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: all 0.35s;
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--accent); transform: translateY(-4px); }


.p-page { padding-top: var(--nav-h); }
.page-back { display: flex; justify-content: flex-start; padding: 1.05rem 0 0.15rem; }
.back-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.26rem 1.05rem 0.26rem 0.32rem; border-radius: 999px;
  background: #56b4f0; border: 1.5px solid #56b4f0; color: #fff;
  font-weight: 800; font-size: 0.9rem; cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s;
}
.back-chip .ba-ic {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: #fff;
}
.back-chip svg { width: 17px; height: 17px; display: block; }
.back-chip:hover { transform: translateX(-4px); background: #3d97d4; border-color: #3d97d4; }
.back-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.shop-toolbar { scroll-margin-top: calc(var(--nav-h) + 0.8rem); }
.p-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 3rem; padding: 1.8rem 0 4rem; align-items: start; }

.p-gallery { position: sticky; top: calc(var(--nav-h) + 1rem); }
.p-main {
  position: relative; border-radius: 22px; overflow: hidden;
  aspect-ratio: 1 / 1; border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  background: #fff;
}
.p-main .ph { position: absolute; inset: 0; opacity: 1; transition: opacity 0.5s; }
.p-main:has(img.loaded) .ph { opacity: 0; }
.p-main img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 0.5s;
}
.p-main img.loaded { opacity: 1; }
.p-info .p-chip {
  display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff; background: var(--primary-2);
  padding: 0.32rem 0.9rem; border-radius: 999px; margin-bottom: 0.9rem;
}
.p-info h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.12; }
.p-info h1 em { font-family: var(--serif); font-style: italic; color: var(--accent); margin-left: 0.35em; }
.p-tagline { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: 1.05rem; margin-top: 0.45rem; }
.p-desc { margin-top: 1.2rem; color: var(--ink-soft); font-size: 0.96rem; }
.p-features { list-style: none; margin-top: 1.3rem; display: grid; gap: 0.55rem; }
.p-features li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; }
.p-features li::before { content: "✦"; color: var(--accent); line-height: inherit; }
.spec-table { width: 100%; margin-top: 1.4rem; border-collapse: collapse; font-size: 0.88rem; }
.spec-table td { padding: 0.6rem 0.4rem; border-bottom: 1px dashed var(--line); vertical-align: middle; }
.spec-table td:first-child { color: var(--ink-soft); font-weight: 700; width: 38%; }
.p-cta { display: flex; gap: 0.9rem; margin-top: 1.7rem; flex-wrap: wrap; }
.related { padding: 3.8rem 0 5rem; background: var(--paper-2); }


@media (max-width: 1020px) {
  .nav-links { display: none; } 
  .nav-search { max-width: none; }
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .p-layout { grid-template-columns: 1fr; }
  .p-gallery { position: static; }
  
  .nav-burger {
    display: grid; place-items: center; flex: none;
    position: relative; width: 40px; height: 40px;
    padding: 0; border: 0; border-radius: 11px;
    background: rgba(255, 255, 255, 0.14); cursor: pointer;
  }
  .burger-line {
    position: absolute; left: 50%; width: 20px; height: 2px; border-radius: 2px;
    background: #fff; transform: translateX(-50%);
    transition: transform 0.3s var(--ease), opacity 0.25s;
  }
  .l1 { top: 14px; } .l2 { top: 19px; } .l3 { top: 24px; }
  .nav-burger.active .l1 { transform: translateX(-50%) translateY(5px) rotate(45deg); }
  .nav-burger.active .l2 { opacity: 0; }
  .nav-burger.active .l3 { transform: translateX(-50%) translateY(-5px) rotate(-45deg); }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 150;
    display: none; flex-direction: column; gap: 0; align-items: stretch;
    padding: 0.4rem 1.4rem 0.9rem;
    background: var(--menu-bg);
    box-shadow: 0 18px 40px rgba(10, 20, 40, 0.25);
  }
  .nav-links.open { display: flex; animation: menuIn 0.28s var(--ease); }
  @keyframes menuIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: none; }
  }
  .nav-links .nav-link {
    padding: 0.95rem 0.2rem; font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav-links .nav-link:last-child { border-bottom: none; }
  .nav-links .nav-link::after { display: none; }
  .nav-links .nav-item { display: block; }
  .nav-links .nav-item .nav-link { display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .nav-menu { display: none; }
  .nav-apps { display: block; }
  .nav-apps-btn {
    display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem;
    width: 100%; padding: 0.95rem 0.2rem;
    border: 0; border-radius: 0; background: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav-apps-btn:hover, .nav-apps-btn[aria-expanded="true"] { background: none; border-color: transparent; }
  .nav-apps-mini { grid-template-columns: repeat(3, 14px); grid-auto-rows: 14px; flex: none; }
  .nav-apps-mini svg { width: 14px; height: 14px; }
  .nav-apps-btn .nav-txt { display: inline; font-size: 1rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
  .nav-apps-panel {
    position: static; display: none; width: 100%;
    padding: 0.1rem 0 0.5rem 2.75rem;
    background: none; box-shadow: none; border-radius: 0; transform: none;
  }
  .nav-apps-panel.open { display: block; }
  .app-row { color: rgba(255, 255, 255, 0.92); padding: 0.62rem 0.2rem; }
  .app-row:hover { background: none; }
  .app-row svg { width: 18px; height: 18px; }
  .qr-card {
    position: static; flex-basis: 100%; width: auto; max-width: 200px;
    margin: 0.1rem 0 0.55rem 1.8rem; padding: 0.5rem;
    box-shadow: 0 12px 30px rgba(10, 20, 40, 0.26);
    transform: none; display: none;
  }
  .app-wc.qr-open .qr-card { display: block; opacity: 1; visibility: visible; pointer-events: auto; }
}
@media (max-width: 620px) {
  .brand .brand-name { display: none; }
  /* stack the contact shortcuts so the WeChat QR has room to sit beside them */
  .contact-quick { grid-template-columns: 1fr; }
  .contact-cta .btn { width: 100%; justify-content: center; }
  .about-text { padding: 1.7rem 1.5rem 1.9rem; border-radius: 20px; }
  .about-card { padding: 1.7rem 1.4rem; }
  
  .hero { height: 44svh; min-height: 360px; }
  .slide-content { padding-bottom: 1.4rem; } 
  
  .slide-kicker { font-size: 0.72rem; margin-bottom: 0.3rem; }
  .slide-title {
    font-size: clamp(1.1rem, 4.6vw, 1.75rem); line-height: 1.12;
    margin: 0.3rem 0 0.4rem;
  }
  .slide-sub { font-size: 0.8rem; line-height: 1.45; margin-top: 0.5rem; }
  .slide-cta { gap: 0.6rem; margin-top: 0.85rem; }
  .slide-cta .btn { padding: 0.52rem 1.1rem; font-size: 0.8rem; }
  
  .cat-grid, .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }

  .cat-tile, .card { aspect-ratio: auto; }
  .cat-tile .ph { inset: auto; }
  .cat-label { padding: 0.4rem 0.28rem 0.45rem; font-size: 0.68rem; line-height: 1.2; }
  .cat-count { font-size: 0.58rem; margin-top: 1px; }
  .card-case { aspect-ratio: auto; flex: 1 1 0; min-height: 42px; }
  .card-body { padding: 0.55rem 0.6rem 0.65rem; gap: 0.2rem; }
  .card-cat, .card-line, .card-link { display: none; }
  .card-name {
    font-size: 0.86rem; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .footer { padding: 2.4rem 0 1.2rem; }
  .footer-grid { gap: 1.6rem 1.2rem; }
  .footer h4 { margin-bottom: 0.6rem; }
  .footer p, .f-links a, #f-contact li { font-size: 0.8rem; }
}

@media (min-width: 621px) and (max-width: 950px) {
  .cat-grid, .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  
  .cat-tile, .card { aspect-ratio: auto; }
  .cat-tile .ph { inset: auto; }
  .cat-label { padding: 0.5rem 0.5rem 0.55rem; font-size: 0.72rem; line-height: 1.22; }
  .cat-count { font-size: 0.58rem; margin-top: 2px; }
  .card-case { aspect-ratio: auto; flex: 1 1 0; min-height: 80px; }
  .card-body { padding: 0.55rem 0.6rem 0.6rem; gap: 0.22rem; }
  .card-cat { font-size: 0.6rem; }
  .card-name {
    font-size: 0.8rem; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-line {
    font-size: 0.62rem; flex: none;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-link { font-size: 0.68rem; margin-top: 0.1rem; }
}



@media (max-width: 770px) {
  .desk-cases { grid-template-columns: repeat(3, minmax(min(100%, 64px), max-content)); }
}
@media (min-width: 481px) and (max-width: 770px) {
  .d-case-img { width: clamp(104px, 13.5vw, 128px); }
  .d-case-media svg { width: clamp(100px, 13vw, 124px); }
}
@media (max-width: 480px) {
  .d-case-img { width: clamp(76px, 26vw, 106px); }
  .d-case-media svg { width: clamp(72px, 25vw, 102px); }
  
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table td { display: block; }
  .spec-table td { width: 100%; padding: 0.5rem 0.2rem; border-bottom: 1px dashed var(--line); }
  .spec-table td:first-child { width: auto; padding-bottom: 0.15rem; border-bottom: none; }
  .p-layout { gap: 2rem; padding-top: 1rem; }
  .nav-inner { padding: 0 1rem; gap: 0.9rem; }
}

.card { position: relative; }
.cat-tile .cat-img {
  position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: contain; opacity: 0; transition: opacity 0.5s ease;
}
.cat-tile:has(.cat-img.loaded) .ph { opacity: 0; }
.cat-tile .cat-img.loaded { opacity: 1; }
.cat-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.wheel-wrap { position: relative; margin: 0 auto; padding: 0 18px; }
.wheel-viewport {
  position: relative; height: 232px; overflow: hidden; cursor: grab;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.wheel-viewport.grabbing { cursor: grabbing; }
.wheel-stage {
  position: absolute; top: 14px; left: 0;
  display: flex; align-items: flex-start; gap: 22px;
  will-change: transform;
}
.wheel-card {
  position: relative; flex: 0 0 auto; width: var(--cw, 176px);
  transform-style: preserve-3d; transition: transform 0.18s var(--ease);
}
.w-disc {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 16px 34px rgba(10, 48, 100, 0.3);
  transition: box-shadow 0.3s var(--ease);
}
.w-in {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.4rem); color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 3px 12px rgba(20, 40, 90, 0.25);
}
.w-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.5s;
}
.w-img.loaded { opacity: 1; }
.w-label {
  display: block; text-align: center; margin-top: 0.5rem;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em; color: #fff;
  text-shadow: 0 2px 10px rgba(10, 48, 100, 0.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wheel-card:focus-visible { outline: none; transform: translateY(-4px) scale(1.07); }
.wheel-card:hover .w-disc, .wheel-card:focus-visible .w-disc {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55),
    0 0 34px rgba(190, 232, 255, 0.95), 0 26px 46px rgba(10, 48, 100, 0.45);
}
.wheel-wrap::before, .wheel-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 38px; width: 66px;
  z-index: 30; pointer-events: none;
}
.wheel-wrap::before {
  left: 0; background: linear-gradient(90deg, #3d97d4, rgba(61, 151, 212, 0));
}
.wheel-wrap::after {
  right: 0; background: linear-gradient(270deg, #3d97d4, rgba(61, 151, 212, 0));
}
.wheel-viewport.static { overflow: visible; perspective: none; cursor: default; height: auto; }
.wheel-wrap.static { padding: 0; }
.wheel-wrap.static::before, .wheel-wrap.static::after { display: none; }
.wheel-viewport.static .desk-scroll {
  display: flex; gap: 14px; overflow-x: auto;
  padding: 4px 2px 18px; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.wheel-viewport.static .desk-scroll .d-case { flex: 0 0 auto; }
.d-name {
  display: block; font-size: 0.78rem; font-weight: 800; color: #fff;
  text-shadow: 0 2px 8px rgba(10, 48, 100, 0.4);
}
.d-sw {
  display: grid; place-items: center; width: clamp(96px, 11vw, 126px);
  aspect-ratio: 1 / 1; border-radius: 22px;
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: 1.9rem; color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 26px rgba(10, 48, 100, 0.32);
}
.d-case-media { position: relative; }
.d-case-media > * { grid-area: 1 / 1; }
.d-case-img {
  border-radius: 22px; box-shadow: 0 12px 26px rgba(10, 48, 100, 0.32);
}
.w-img, .cat-img, .d-case-img, .zoom-img, .p-main img {
  -webkit-user-drag: none;
}

.zoomable { cursor: zoom-in; }
.zoomable .zoom-img {
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: transform 0.4s var(--ease);
}
.zoomable.zoom-live .zoom-img { transition: none; transform: scale(2.1); }
.zoomable.zoom-lg.zoom-live .zoom-img { transform: scale(2.6); }

.c-page .page-back { padding-top: 0.45rem; padding-bottom: 0.7rem; }
.c-page {
  padding: calc(var(--nav-h) + 1.7rem) 0 0.4rem;
  background: #ffffff;
  min-height: 50vh;
}
.c-page.bare { min-height: 0; }
.c-head { margin: 0.6rem 0 0.3rem; }
.c-head h1 {
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  letter-spacing: -0.02em; line-height: 1.12;
}
.c-head h1 em { font-family: var(--serif); font-style: italic; color: var(--primary-2); }
.c-lead { color: var(--ink-soft); margin-top: 0.5rem; font-size: 0.98rem; max-width: 66ch; }
.c-page .cat-grid { padding: 1.4rem 0 2.2rem; }
.c-prods {
  padding: 0.4rem 0 4.6rem;
  background: #ffffff;
  min-height: 42vh;
}
#c-prod-note { text-align: center; margin: 1.6rem 0 0; }
.c-prods .grid { min-height: 120px; }
.p-info .p-chip { display: inline-block; }
.p-info .p-chip:hover { filter: brightness(1.15); transform: translateY(-1px); }
@media (max-width: 770px) {
  .wheel-wrap { padding: 0 14px; }
}
@media (max-width: 480px) {
  #desk { padding: 0.9rem 0 1.1rem; }
  #desk .section-head { margin-bottom: 0.5rem; }
  .wheel-wrap { padding: 0 10px; }
}
@media (max-width: 620px) {
  .cat-tile .cat-img { inset: auto; }
  .card-imgwrap { aspect-ratio: 1 / 1; }
}
@media (min-width: 621px) and (max-width: 950px) {
  .cat-tile .cat-img { inset: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-stage, .w-disc, .w-img, .d-case,
  .zoomable .zoom-img { transition: none !important; }
  .nav-menu { filter: none !important; transform: none !important; }
  .nav-item:hover .nm-head, .nav-item:focus-within .nm-head,
  .nav-item:hover .nm-link, .nav-item:focus-within .nm-link,
  .nav-item:hover .nav-menu::after, .nav-item:focus-within .nav-menu::after {
    animation: none !important;
  }
  .nav-apps-panel { transition: none !important; }
  .contact-wrap .qr-card { transition: none !important; }
  .contact-row { transition: none !important; }
  .nav-apps-panel.open .app-row { animation: none !important; }
  html.apps-open::before { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .chat-pop { transition: none; }
  .about-video { display: none; }
  .about-bg { background-image: url("../images/about/starry-night-poster.jpg"); background-size: cover; background-position: 50% 45%; }
}
.b-page {
  padding: calc(var(--nav-h) + 1.7rem) 0 0.4rem;
  min-height: 58vh;
  background: linear-gradient(180deg, #ffffff 0%, #ffe3f0 30%, #fff6fa 100%);
}
.blog-list {
  padding: 1.5rem 0 4.6rem; display: grid; gap: 1.5rem;
}
.b-post {
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line);
  border-radius: 24px; padding: 1.6rem 1.8rem;
  box-shadow: 0 18px 40px rgba(20, 50, 110, 0.08);
}
.b-date {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--primary-2);
}
.b-post h3 { font-size: clamp(1.25rem, 2.4vw, 1.65rem); margin: 0.45rem 0 0.55rem; line-height: 1.25; }
.b-post p { color: var(--ink-soft); line-height: 1.75; }
.b-blurb { font-size: 1.02rem; }
.b-media { margin-top: 1.05rem; }
.b-post > .b-media .b-img { max-height: 440px; object-fit: cover; }
.b-img { width: 100%; border-radius: 16px; display: block; opacity: 0; transition: opacity 0.5s ease; }
.b-img.loaded { opacity: 1; }
.b-head {
  font-size: clamp(1.02rem, 1.9vw, 1.28rem); color: var(--ink);
  margin: 1.8rem 0 0.6rem; line-height: 1.28; letter-spacing: -0.01em;
}
.b-post { overflow: hidden; }
.b-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.2rem; align-items: stretch; margin: 1.5rem 0 2.3rem;
}
.b-chunk > p { margin: 0 0 0.9rem; color: var(--ink-soft); line-height: 1.8; }
.b-chunk > p:last-child { margin-bottom: 0; }
.b-chunk > .b-head { margin: 0 0 0.7rem; }
.b-chunk > .b-head:not(:first-child) { margin-top: 1.7rem; }
.b-row .b-media { margin-top: 0; position: relative; min-height: 360px; }
.b-row .b-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center top;
  border-radius: 16px;
}
.b-row-first.b-row-right .b-img { object-position: left top; }
.b-row-first .b-media { min-height: 852px; }
.b-row-right .b-chunk { grid-column: 1; grid-row: 1; }
.b-row-right .b-media { grid-column: 2; grid-row: 1; }
.b-row-left .b-chunk { grid-column: 2; grid-row: 1; }
.b-row-left .b-media { grid-column: 1; grid-row: 1; }
@media (max-width: 760px) {
  .b-row { grid-template-columns: 1fr; gap: 1.2rem; margin: 1.2rem 0 1.7rem; }
  .b-row-right .b-chunk, .b-row-right .b-media,
  .b-row-left .b-chunk, .b-row-left .b-media { grid-column: 1; grid-row: auto; }
  .b-row .b-media { position: static; min-height: 0; }
  .b-row .b-img { position: static; width: 100%; height: auto; }
  .b-row-left .b-media { order: -1; }
}

.b-ic { width: 18px; height: 18px; fill: #25d366; flex: none; }
.chip-wa { width: 13px; height: 13px; fill: #25d366; flex: none; }
.chat-chip { display: inline-flex; align-items: center; gap: 0.4em; }
.f-wa { display: inline-flex; align-items: center; gap: 0.45rem; }
#wheel-viewport { user-select: none; -webkit-user-select: none; }

.p-all {
  padding: 0.2rem 0 4.6rem;
  background: #ffffff;
  min-height: 40vh;
}
/* products page: no intro block — products sit right under the Back button */
#products-page .c-page { min-height: 0; padding-bottom: 0; }
#products-page .c-page .page-back { padding-bottom: 0; }
#products-page .p-all { padding-top: 0.9rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.p-row { margin: 0 0 2.9rem; }
.p-row:last-child { margin-bottom: 0; }
.p-row-head {
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  margin: 0 0 0.9rem; padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}
.p-row-path {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--primary-2);
}
.p-row-head h2 { font-size: clamp(1.15rem, 2.1vw, 1.55rem); letter-spacing: -0.01em; margin: 0; }
.p-row-head h2 a { color: var(--ink); }
.p-row-head h2 a:hover { color: var(--primary-2); }
.p-row-count { margin-left: auto; font-size: 0.78rem; color: var(--ink-soft); }
.p-rail::before { background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0)); }
.p-rail::after { background: linear-gradient(270deg, #ffffff, rgba(255, 255, 255, 0)); }
.p-rail .w-label { color: var(--ink); text-shadow: none; }
.p-row .grid-more { margin-top: 0.5rem; }

.p-rail .wheel-card { width: 300px; }
.p-rail .w-label { font-size: 0.95rem; line-height: 1.3; margin-top: 0.7rem; }
.p-rail .wheel-viewport { height: 362px; }

@media (min-width: 621px) and (max-width: 950px) {
  .p-rail .wheel-card { width: 240px; }
  .p-rail .wheel-viewport { height: 302px; }
}
@media (max-width: 620px) {
  .p-rail .wheel-card { width: 200px; }
  .p-rail .w-label { font-size: 0.84rem; }
  .p-rail .wheel-viewport { height: 260px; }
}

@media (min-width: 951px) {
  #category-grid .cat-tile .ph { inset: auto; }
  #category-grid .cat-tile .cat-img { inset: auto; }
}