/* ===========================================================
   Printify Thailand — Apple-inspired brand + portfolio site
   =========================================================== */

:root {
  --bg: #fbfbfd;
  --bg-alt: #f5f5f7;
  --dark: #0d0f14;
  --dark-2: #161a22;
  --text: #1d1d1f;
  --text-on-dark: #f5f5f7;
  --muted: #6e6e73;
  --muted-dark: #86868b;
  --accent: #ff6b2b;
  --accent-2: #ff9a5c;
  --border: #d2d2d7;
  --border-dark: #2a3040;
  --radius: 18px;
  --radius-lg: 28px;
  --maxw: 1080px;
  --nav-h: 52px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 760px; }

/* ===== NAV ===== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 251, 253, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; height: var(--nav-h);
  padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; }
.logo-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1rem;
}
.logo-mark--img { background: none; object-fit: contain; transition: transform 0.4s var(--ease); }
.logo:hover .logo-mark--img { transform: rotate(18deg) scale(1.1); }
.nav-links { display: flex; gap: 30px; }
.nav-links a { font-size: 0.85rem; color: var(--muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-cta {
  background: var(--accent); color: #fff; padding: 7px 16px; border-radius: 980px;
  font-size: 0.82rem; font-weight: 600; transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: var(--accent-2); }
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  font-size: 0.75rem; font-weight: 700; color: var(--muted);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.lang-switch:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,107,43,0.06); }
.mobile-menu .lang-switch-mobile { color: var(--accent); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none; flex-direction: column; gap: 4px; padding: 8px 24px 24px;
  border-bottom: 1px solid var(--border); background: var(--bg);
}
.mobile-menu a { padding: 14px 4px; font-size: 1.4rem; font-weight: 600; border-bottom: 1px solid var(--border); }
.mobile-menu a:last-child { border: none; }
.mobile-menu .mobile-cta { color: var(--accent); }
.mobile-menu.open { display: flex; }

/* ===== HERO ===== */
.hero {
  position: relative; min-height: 88vh; display: grid; place-items: center;
  text-align: center; padding: 80px 24px 60px; overflow: hidden;
}
.hero-content { position: relative; z-index: 2; max-width: 820px; }
.hero-eyebrow {
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.75rem; font-weight: 700;
  color: var(--accent); margin-bottom: 18px;
}
.hero-title {
  font-size: clamp(3rem, 9vw, 6.5rem); font-weight: 700; line-height: 1.02;
  letter-spacing: -0.04em;
}
.hero-title, .hero-title span {
  background: linear-gradient(180deg, #1d1d1f 30%, #4a4a4f); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--muted); font-weight: 400;
  max-width: 560px; margin: 22px auto 34px; line-height: 1.45;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 980px;
  padding: 13px 26px; font-size: 1.02rem; font-weight: 500; cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, opacity 0.2s; border: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); transform: scale(1.03); }
.btn-ghost { color: var(--accent); }
.btn-ghost:hover { color: var(--accent-2); }

.hero-visual { position: absolute; inset: 0; z-index: 1; }
.hero-orb {
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  width: 720px; height: 720px; max-width: 120vw;
  background: radial-gradient(circle at 50% 40%, rgba(255,107,43,0.28), rgba(255,154,92,0.10) 40%, transparent 70%);
  filter: blur(20px); animation: float 9s ease-in-out infinite;
}

/* ===== HERO: badge pill ===== */
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,107,43,0.08); border: 1px solid rgba(255,107,43,0.28);
  color: var(--accent); font-size: 0.82rem; font-weight: 600;
  padding: 7px 16px 7px 11px; border-radius: 980px; margin-bottom: 22px;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,43,0.45); } 50% { box-shadow: 0 0 0 7px rgba(255,107,43,0); } }

/* ===== HERO: headline word-stagger reveal (populated by JS) ===== */
.word-stagger span { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(0.3em); animation: word-in 0.85s var(--ease) forwards; }
@keyframes word-in { to { opacity: 1; filter: blur(0); transform: translateY(0); } }

/* ===== HERO: mouse-reactive spotlight + drifting color blobs ===== */
.hero { --mx: 50%; --my: 38%; }
.hero-spotlight {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(620px circle at var(--mx) var(--my), rgba(255,107,43,0.18), transparent 60%);
}
.hero-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; }
.hero-blob--1 { width: 420px; height: 420px; background: radial-gradient(circle, var(--accent), transparent 70%); top: -80px; left: 4%; animation: blobmove 15s ease-in-out infinite; }
.hero-blob--2 { width: 320px; height: 320px; background: radial-gradient(circle, var(--accent-2), transparent 70%); bottom: -40px; right: 6%; animation: blobmove 19s ease-in-out infinite reverse; }
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes blobmove { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(36px,-26px) scale(1.15); } }

/* ===== HERO: scroll cue ===== */
.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--muted); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  animation: bob 2.2s ease-in-out infinite; opacity: 0.65;
}
.scroll-cue svg { width: 15px; height: 15px; }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index: 1000; transition: width 0.1s linear;
}

/* ===== GRAIN OVERLAY ===== */
.grain-overlay {
  position: fixed; inset: 0; z-index: 998; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ===== MARQUEE STRIP ===== */
.marquee { position: relative; overflow: hidden; background: var(--dark); padding: 16px 0; }
.marquee-track { display: flex; width: max-content; gap: 48px; white-space: nowrap; animation: marquee 26s linear infinite; }
.marquee-track span { font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; opacity: 0.85; display: inline-flex; align-items: center; gap: 14px; }
.marquee-track span::after { content: "✦"; color: var(--accent); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== GLASS STAT CARDS ===== */
.stat--card {
  background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.7); border-radius: var(--radius);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.04); transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.stat--card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(0,0,0,0.09); }

/* ===== SHOWCASE PRODUCT GLOW ===== */
.photo-stage { position: relative; }
.photo-stage::before {
  content: ""; position: absolute; inset: -10%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,43,0.22), transparent 70%); filter: blur(34px);
}
.photo-stage > img, .photo-stage > .product-photo { position: relative; z-index: 1; }

/* ===== BUTTON SHINE SWEEP ===== */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
}
.btn-primary:hover::after { animation: shine 0.85s ease; }
@keyframes shine { from { left: -75%; } to { left: 125%; } }
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,0,0,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}
@keyframes float { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-26px); } }

/* ===== STATS BAND ===== */
.stats-band {
  max-width: var(--maxw); margin: 0 auto; padding: 10px 24px 70px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center;
}
.stat { padding: 20px 8px; }
.stat-num { display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.03em; color: var(--text); }
.stat-num small { font-size: 0.5em; color: var(--muted); font-weight: 600; }
.stat-label { font-size: 0.85rem; color: var(--muted); }

/* ===== SHOWCASE (Apple-style full-bleed product) ===== */
.showcase { position: relative; padding: clamp(80px, 12vw, 160px) 24px; text-align: center; overflow: hidden; }
.showcase-inner { position: relative; z-index: 1; }
.showcase-dark { background: var(--dark); color: var(--text-on-dark); }
.showcase-light { background: var(--bg-alt); }
.showcase-inner { max-width: 820px; margin: 0 auto; }
.showcase-eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; font-weight: 700;
  color: var(--accent); margin-bottom: 14px;
}
.showcase-title { font-size: clamp(2rem, 5.5vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
.showcase-text { font-size: clamp(1.05rem, 2.2vw, 1.35rem); margin: 18px auto 8px; max-width: 560px; opacity: 0.82; }
.showcase-link { display: inline-block; margin-top: 14px; color: var(--accent); font-size: 1.1rem; font-weight: 500; }
.showcase-link:hover { color: var(--accent-2); }
.showcase-link--dark { color: var(--accent); }

/* ===== SCROLL-DRIVEN 3D PRODUCT SHOWCASE ===== */
.scroll3d-showcase { display: grid; grid-template-columns: 1fr 1fr; align-items: start; background: var(--bg); }
/* align-self:stretch (overriding the container's align-items:start just for
   this item) makes the zone fill the full grid ROW height — which, since the
   row auto-sizes to the tallest item, matches .scroll3d-panels' tall, scrollable
   column. That extra height (panels' height minus the visual's own height) is
   exactly the "stick room" .scroll3d-visual needs to pin in place while you
   scroll past it. Without the stretch, the zone would hug just its child's
   height, leaving zero room to stick — see the mobile override below for why
   the zone exists at all. */
.scroll3d-visual-zone { align-self: stretch; }
.scroll3d-visual {
  position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h));
  overflow: hidden; background: var(--dark);
  display: grid; place-items: center;
}
#productCanvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#productCanvas:active { cursor: grabbing; }
.scroll3d-glow {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255,107,43,0.24), transparent 65%);
}
.scroll3d-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  padding: 7px 16px; border-radius: 980px; pointer-events: none;
  transition: opacity 0.6s; backdrop-filter: blur(6px);
}
.scroll3d-hint.hidden { opacity: 0; }
.scroll3d-panels { display: flex; flex-direction: column; }
.scroll3d-panel {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: 60px clamp(28px, 6vw, 72px); text-align: left;
}
.scroll3d-panel .showcase-text { margin-left: 0; }
.scroll3d-panel .showcase-eyebrow { margin-bottom: 14px; }

@media (max-width: 900px) {
  /* Mobile split-scroll: the desktop two-column (model left / copy right)
     stacks into a model BAND that sticks to the top while the copy scrolls in
     the strip beneath it. Pure CSS position:sticky — no JS scroll choreography,
     so nothing ever jumps:

     1. display:contents on the zone drops its box, so the sticky model's
        containing block becomes the whole .scroll3d-showcase (band + every
        panel). The band therefore stays pinned the entire time the copy
        scrolls past — it only releases when the section itself scrolls away.
     2. The band is OPAQUE with a HIGHER z-index than the panels, so copy that
        rises into the band's region slides cleanly BEHIND it — only the strip
        below the band ever shows text ("image on top, text underneath").
     3. Panels carry an opaque background so each reads cleanly in the strip.

     The band scrolls into view, pins under the nav, and the model pans from
     Turbo Yadom → TwinTap as you scroll the two panels past the strip centre. */
  .scroll3d-showcase { display: block; position: relative; }
  .scroll3d-visual-zone { display: contents; }
  .scroll3d-panels { position: relative; z-index: 1; background: var(--bg); }

  /* The band starts collapsed (height driven by product3d.js). It grows 0→40vh
     in lock-step with scroll so the copy below holds still and the model is
     revealed from the bottom up; then it stays pinned under the nav. overflow
     hidden is the reveal window the bottom-anchored canvas is unveiled through. */
  .scroll3d-visual {
    position: sticky; top: var(--nav-h);
    height: 0; z-index: 2; overflow: hidden;
  }
  /* Canvas is a fixed 40vh stage anchored to the band's BOTTOM edge, so as the
     band grows upward it reveals the model from the bottom up without rescaling
     it. (Desktop keeps the inset:0 fill from the rule above.) */
  #productCanvas { top: auto; bottom: 0; height: 40vh; }
  .scroll3d-hint { bottom: 12px; font-size: 0.62rem; padding: 5px 12px; }

  /* Released — TwinTap is in position: the band detaches and scrolls up with the
     page. The zone becomes a same-height spacer so the band leaving the flow
     doesn't shift anything below it. */
  .scroll3d-showcase.s3d-released .scroll3d-visual-zone { display: block; height: 40vh; }
  .scroll3d-showcase.s3d-released .scroll3d-visual {
    position: absolute; top: var(--s3d-release-top, 0); left: 0; right: 0;
    height: 40vh;
  }

  /* Tall panels give the model scroll room to pan between the two products; the
     copy top-aligns so it sits directly beneath the band — no centered gap, so
     there's no blank space between the stats and the copy before the reveal. */
  .scroll3d-panel { min-height: 58vh; justify-content: flex-start; padding: 28px 24px 44px; text-align: center; }
  .scroll3d-panel .showcase-text { margin-left: auto; margin-right: auto; }
  .showcase-title { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .showcase-text { font-size: clamp(1rem, 4vw, 1.15rem); }
}

/* Product stage + CSS-art placeholders (swap for real photos later) */
.product-stage { margin-top: 56px; display: grid; place-items: center; min-height: 320px; }
.product-art { position: relative; }

/* Turbo Yadom */
.product-art--yadom { width: 150px; height: 300px; }
.product-art--yadom .pa-body {
  position: absolute; inset: 0; border-radius: 40px 40px 30px 30px;
  background: linear-gradient(145deg, #2b313f, #11141b); border: 1px solid #3a4153;
  box-shadow: inset 0 2px 8px rgba(255,255,255,0.06), 0 30px 60px rgba(0,0,0,0.5);
}
.product-art--yadom .pa-fan {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 90px; border-radius: 50%; background: #0a0c11; border: 6px solid #1c2230;
  display: grid; place-items: center;
}
.product-art--yadom .pa-fan span {
  position: absolute; width: 38px; height: 12px; border-radius: 8px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: center;
  animation: spin 1.6s linear infinite;
}
.product-art--yadom .pa-fan span:nth-child(2) { transform: rotate(60deg); }
.product-art--yadom .pa-fan span:nth-child(3) { transform: rotate(120deg); }
.product-art--yadom .pa-glow {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,43,0.35), transparent 65%); filter: blur(8px);
}
@keyframes spin { to { transform: rotate(360deg); } }
.product-art--yadom .pa-fan span { animation: fanspin 1.6s linear infinite; }
@keyframes fanspin { from { transform: rotate(var(--r,0deg)); } to { transform: rotate(calc(var(--r,0deg) + 360deg)); } }

/* TwinTap */
.product-art--twintap { width: 260px; height: 200px; }
.tt-card {
  position: absolute; width: 170px; height: 108px; border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}
.tt-card--back { top: 20px; left: 70px; background: linear-gradient(135deg, #c9ccd6, #9aa0ad); transform: rotate(8deg); }
.tt-card--front { top: 60px; left: 20px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.tt-card--front::after {
  content: ""; position: absolute; top: 16px; left: 16px; width: 30px; height: 24px; border-radius: 5px;
  background: rgba(255,255,255,0.7);
}
.tt-wave {
  position: absolute; top: 30px; right: 0; width: 70px; height: 70px;
  border: 3px solid var(--accent); border-radius: 50%; opacity: 0.6;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(0.7); opacity: 0.7; } 100% { transform: scale(1.4); opacity: 0; } }

/* ===== SECTIONS ===== */
.section { padding: clamp(72px, 10vw, 130px) 0; }
.section-alt { background: var(--bg-alt); }
.section-eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; font-weight: 700;
  color: var(--accent); margin-bottom: 14px;
}
.section-title { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; max-width: 720px; }
.section-lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--muted); max-width: 620px; margin-top: 18px; }

/* Product grid */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; perspective: 1200px; }
.pcard {
  display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.pcard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,0,0,0.10); }
.pcard-art { height: 180px; border-radius: var(--radius); margin-bottom: 22px; position: relative; overflow: hidden; }
.pcard-art--1 { background: radial-gradient(circle at 50% 35%, #2b313f, #0d0f14); }
.pcard-art--2 { background: linear-gradient(135deg, #fff0e8, #ffd9c2); }
.pcard-art--3 { background: linear-gradient(135deg, #eef1f7, #d7dde9); }
.pcard-art img { width: 100%; height: 100%; object-fit: contain; padding: 18px; transition: transform 0.5s var(--ease); }
.pcard:hover .pcard-art img { transform: scale(1.08); }
.pcard h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 6px; }
.pcard p { color: var(--muted); font-size: 0.98rem; margin-bottom: 14px; }
.pcard-link { color: var(--accent); font-weight: 600; font-size: 0.95rem; }
.pcard-link:hover { color: var(--accent-2); }

/* Services */
.service-banner { margin: 40px 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.12); max-height: 360px; }
.service-banner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s ease-out; }
.service-banner:hover img { transform: scale(1.06); }

/* ===== SPINNING 3D MODEL SHOWCASE (replaces static printer photo) ===== */
.spin3d-wrap {
  height: 320px; display: block; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 38%, rgba(255,107,43,0.22), transparent 70%), var(--dark);
}
#spin3dCanvas { width: 100%; height: 100%; display: block; }
.spin3d-ring {
  position: absolute; bottom: 10px; left: 50%; width: 170px; height: 28px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,107,43,0.45), transparent 72%);
  filter: blur(4px); animation: spin3d-pulse 3s ease-in-out infinite; pointer-events: none;
}
@keyframes spin3d-pulse { 0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.12); } }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 50px; }
.service-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px; transition: transform 0.3s var(--ease); }
.section-alt .service-item { background: #fff; }
.service-item:hover { transform: translateY(-5px); }
.service-icon { font-size: 2rem; margin-bottom: 14px; }
.service-item h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 6px; }
.service-item p { color: var(--muted); font-size: 0.92rem; }
.service-cta { margin-top: 44px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.service-cta-note { color: var(--muted); font-size: 0.95rem; }

/* Work / portfolio */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; perspective: 1200px; }
.work-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.work-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,0,0,0.10); }
.work-card--wide { grid-column: span 3; flex-direction: row; }
.work-thumb { min-height: 200px; flex: 0 0 46%; position: relative; overflow: hidden; }
.work-card:not(.work-card--wide) .work-thumb { width: 100%; }
.work-thumb--quote { background: linear-gradient(135deg, #0d0f14, #1e2330); }
.work-thumb--quote::after { content: "</>"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 64px; font-weight: 800; color: var(--accent); font-family: "SF Mono", monospace; }
.work-thumb--yadom { background: radial-gradient(circle at 50% 40%, #2b313f, #0d0f14); }
.work-thumb--yadom::after { content: ""; position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, var(--accent), transparent 70%); }
.work-thumb--twintap { background: linear-gradient(135deg, #fff0e8, #ffd9c2); }
.work-thumb--twintap::after { content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 50px; transform: translate(-50%,-50%) rotate(-8deg); border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.work-thumb--robotics { background: linear-gradient(135deg, #eef1f7, #d7dde9); }
.work-thumb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 22px; transition: transform 0.5s var(--ease); }
.work-card:hover .work-thumb img { transform: scale(1.06); }
.work-meta { padding: 24px; }
.work-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 10px; }
.work-meta h3 { font-size: 1.35rem; font-weight: 600; margin-bottom: 8px; }
.work-meta p { color: var(--muted); font-size: 0.96rem; }
.work-note { margin-top: 36px; color: var(--muted); }
.work-note a { color: var(--accent); font-weight: 600; }

/* About */
.about-text { font-size: clamp(1.1rem, 2.1vw, 1.35rem); color: var(--text); margin-top: 22px; line-height: 1.5; }
.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.value h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 6px; color: var(--accent); }
.value p { color: var(--muted); font-size: 0.96rem; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 50px; }
.contact-col h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 18px; }
.shop-links { display: flex; flex-direction: column; gap: 10px; }
.shop-link {
  display: block; padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px;
  font-weight: 600; font-size: 1.05rem; transition: border-color 0.2s, transform 0.2s, color 0.2s;
}
.shop-link:hover { border-color: var(--accent); color: var(--accent); transform: translateX(4px); }
.contact-list { list-style: none; margin-bottom: 24px; }
.contact-list li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.contact-list a { color: var(--text); transition: color 0.2s; }
.contact-list a:hover { color: var(--accent); }

/* ===== FOOTER ===== */
.footer { background: var(--dark); color: var(--text-on-dark); padding: 64px 0 36px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: 40px; }
.logo--footer { color: #fff; }
.footer-brand p { color: var(--muted-dark); margin-top: 14px; max-width: 320px; font-size: 0.95rem; }
.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-nav h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-dark); margin-bottom: 14px; }
.footer-nav a { display: block; color: #d2d2d7; font-size: 0.95rem; padding: 5px 0; transition: color 0.2s; }
.footer-nav a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border-dark);
  color: var(--muted-dark); font-size: 0.85rem;
}
.footer-dbd-badge { display: inline-flex; line-height: 0; opacity: 0.85; transition: opacity 0.2s; }
.footer-dbd-badge:hover { opacity: 1; }
.footer-dbd-badge img { height: 44px; width: auto; display: block; border-radius: 4px; }

/* ===== REVEAL ANIMATION ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ===== CLIP REVEAL (product photos) ===== */
.reveal-clip {
  opacity: 0; transform: scale(0.93);
  clip-path: inset(10% round 28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), clip-path 0.9s var(--ease);
}
.reveal-clip.in { opacity: 1; transform: scale(1); clip-path: inset(0% round 0px); }

/* ===== STAGGERED CARDS ===== */
.product-grid .pcard:nth-child(1), .kf-grid .kf-card:nth-child(1), .work-grid .work-card:nth-child(1),
.plist .plist-card:nth-child(1), .service-grid .service-item:nth-child(1) { transition-delay: 0s; }
.product-grid .pcard:nth-child(2), .kf-grid .kf-card:nth-child(2), .work-grid .work-card:nth-child(2),
.plist .plist-card:nth-child(2), .service-grid .service-item:nth-child(2) { transition-delay: 0.09s; }
.product-grid .pcard:nth-child(3), .kf-grid .kf-card:nth-child(3), .work-grid .work-card:nth-child(3),
.plist .plist-card:nth-child(3), .service-grid .service-item:nth-child(3) { transition-delay: 0.18s; }
.kf-grid .kf-card:nth-child(4), .work-grid .work-card:nth-child(4), .service-grid .service-item:nth-child(4) { transition-delay: 0.27s; }

/* ===== 3D TILT (mouse-driven product interaction) ===== */
.tilt-wrap { perspective: 1100px; }
.tilt {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt.is-tracking { transition: transform 0.08s linear; }

/* ===== IDLE FLOAT ===== */
.floaty { animation: floaty 5.5s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ===== PRODUCT PHOTOS ===== */
.product-photo { max-width: 100%; display: block; filter: drop-shadow(0 30px 55px rgba(0,0,0,0.45)); }
.product-photo--light { filter: drop-shadow(0 22px 40px rgba(0,0,0,0.16)); }
.photo-stage { position: relative; display: grid; place-items: center; min-height: 320px; }

/* ===== LEAF SHADOW PARALLAX (decorative, herbal theme) ===== */
.leaf-shadow {
  position: absolute; inset: -15%;
  background-image: url('images/leaf-shadow.jpg');
  background-size: cover; background-position: center;
  mix-blend-mode: luminosity; opacity: 0.14;
  animation: leafdrift 24s ease-in-out infinite alternate;
  pointer-events: none; z-index: 0;
}
@keyframes leafdrift {
  0% { transform: translate(0,0) rotate(0deg) scale(1); }
  100% { transform: translate(-3%, 2%) rotate(1.5deg) scale(1.06); }
}

/* ===== SHIMMER ACCENT TEXT ===== */
.shimmer-text {
  background: linear-gradient(110deg, var(--accent) 25%, var(--accent-2) 45%, #fff 50%, var(--accent) 60%, var(--accent) 75%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 3.4s linear infinite;
}
@keyframes shimmer { to { background-position: -250% 0; } }

/* ===== MAGNETIC BUTTONS ===== */
.btn-magnetic { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }

/* ===== SECTION DOT NAVIGATION ===== */
.section-dots {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: 14px;
}
.section-dots .dot {
  position: relative; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(0,0,0,0.18); transition: background 0.3s, transform 0.3s;
}
.section-dots .dot::after {
  content: attr(data-label); position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  background: var(--dark); color: #fff; font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  padding: 5px 11px; border-radius: 980px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s; transform: translateY(-50%) translateX(6px);
}
.section-dots .dot:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.section-dots .dot:hover { background: rgba(255,107,43,0.5); }
.section-dots .dot.active { background: var(--accent); transform: scale(1.7); }
@media (max-width: 980px) {
  .section-dots { display: none; }
}

/* ===== AMBIENT CURSOR GLOW (page-wide) ===== */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,43,0.55), transparent 70%);
  pointer-events: none; z-index: 997; mix-blend-mode: soft-light;
  opacity: 0; transition: opacity 0.5s ease; will-change: transform;
}
.cursor-glow.active { opacity: 1; }

/* ===== NAV LINK UNDERLINE ===== */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 2px;
  background: var(--accent); transition: width 0.25s var(--ease);
}
.nav-links a:hover::after { width: 100%; }

/* ===== BUTTON RIPPLE ===== */
.ripple {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,0.55);
  transform: scale(0); pointer-events: none; animation: ripple-anim 0.6s ease-out;
}
@keyframes ripple-anim { to { transform: scale(2.6); opacity: 0; } }

/* ===== CONFETTI BURST (hero CTA click) ===== */
.confetti-bit {
  position: fixed; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; z-index: 1001;
  animation: confetti-fly 0.7s ease-out forwards;
}
@keyframes confetti-fly { to { transform: translate(var(--dx), var(--dy)) rotate(220deg); opacity: 0; } }

/* ===== GRID CARD SOFT TILT (perspective set on parent grid) ===== */
.pcard, .kf-card, .work-card { transform-style: preserve-3d; }

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .stats-band { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
  .product-grid, .service-grid, .work-grid, .about-values, .contact-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .work-card--wide { grid-column: span 1; flex-direction: column; }
  .work-card--wide .work-thumb { flex-basis: auto; width: 100%; min-height: 180px; }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .service-grid { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 80vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .reveal-clip { opacity: 1; transform: none; clip-path: none; }
  .tilt { transform: none !important; }
  .word-stagger span { opacity: 1 !important; filter: none !important; transform: none !important; }
  .scroll-cue { display: none; }
  .cursor-glow { display: none; }
  [data-parallax] { transform: none !important; }
  .pcard:hover, .kf-card:hover, .work-card:hover { transform: translateY(-6px) !important; }
}