/* The generated film is scrubbed as still frames by page scroll. */
.hero.hero-3d.editorial-hero.frame-hero{background:#ba2e19}
.hero.hero-3d.editorial-hero.frame-hero.motion-ready{height:220svh}
.frame-hero .motion-stick{background:#ba2e19}
.frame-hero .motion-visuals{background:#ba2e19}
.frame-hero .frame-poster,.frame-hero .frame-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.frame-hero .frame-poster{object-fit:cover;object-position:center}
.frame-hero .frame-canvas{z-index:1;opacity:0}
.frame-hero .frame-canvas.has-frame{opacity:1}
.frame-hero .hero-film{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;opacity:1;z-index:1;background:#ba2e19}
.frame-hero .motion-play{position:absolute;z-index:8;left:50%;top:65%;transform:translate(-50%,-50%);border:1px solid #fff9;border-radius:999px;padding:12px 20px;background:#18121bc9;color:#fff;cursor:pointer}
.frame-hero .motion-play[hidden]{display:none}
.frame-hero .frame-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(38,8,9,.76),rgba(38,8,9,.42) 29%,transparent 61%),linear-gradient(0deg,rgba(22,9,12,.35),transparent 22%);pointer-events:none}
.frame-hero .hero-inner{display:block;padding:0;height:100%}
.frame-hero .hero-copy{position:absolute;z-index:2;left:clamp(24px,5vw,88px);top:47%;width:min(42vw,620px);max-width:none;transform:translateY(-50%)!important;transition:none}
.frame-hero .hero-title{position:relative;font-size:clamp(58px,5.9vw,112px)!important;max-width:none;width:100%;font-weight:900!important;letter-spacing:-.055em!important;line-height:1.02!important;text-shadow:0 8px 24px #290a1459}
.frame-hero .hero-title .ln:first-child{font-family:"Microsoft JhengHei","PingFang TC",sans-serif;font-size:clamp(56px,5.4vw,82px);letter-spacing:-.075em!important}
.frame-hero .hero-title .ln:last-child{font-family:"Microsoft JhengHei","PingFang TC",sans-serif;font-size:clamp(60px,5.7vw,88px);letter-spacing:-.075em!important}
.frame-hero .hero-title em{font-family:"Noto Serif CJK TC","Songti TC","PMingLiU",serif;font-style:italic!important;font-weight:800;color:#ffdfb7!important}
.frame-hero .hero-cards{position:absolute;z-index:1;inset:0;height:auto;opacity:0;transition:none}
/* Card overlay: positioned in film pixels by hero-autoplay.js (translate · rotate · scale). */
.frame-hero .composited-card-link,.frame-hero .card-copy,.frame-hero .card-brand{position:absolute;left:0;top:0;transform-origin:0 0}
.frame-hero .card-brand{z-index:1;margin:0;color:rgba(255,255,255,.72);font:500 9.5px/1.2 "PingFang TC","Microsoft JhengHei",sans-serif;letter-spacing:.02em;white-space:nowrap;pointer-events:none}
.frame-hero .composited-card-link{z-index:2;width:345px;height:198px;display:block;background:transparent;border-radius:18px;pointer-events:auto}
.frame-hero .composited-card-link:focus-visible{outline:3px solid #ffdfb7;outline-offset:4px}
.frame-hero .card-copy{z-index:1;width:302px;margin:0;color:#f6f3f2;font-family:"PingFang TC","Microsoft JhengHei","DM Sans",sans-serif;pointer-events:none}
.frame-hero .card-copy-tag{margin:0;font-size:12.5px;line-height:1.25;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.frame-hero .card-copy-sub{margin:4px 0 0;font-size:9.5px;line-height:1.3;color:rgba(255,255,255,.62);white-space:nowrap}
.frame-hero .card-copy-foot{display:flex;justify-content:flex-end;margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.2)}
.frame-hero .card-copy-cta{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:linear-gradient(135deg,#ffdfb7,#f0a27a);color:#2a0e10;font-size:9.5px;font-weight:800;line-height:1.3;white-space:nowrap;transition:transform .25s ease,box-shadow .25s ease}
.frame-hero .composited-card-link:hover ~ .card-copy .card-copy-cta,.frame-hero .composited-card-link:focus-visible ~ .card-copy .card-copy-cta{transform:translateY(-1px);box-shadow:0 3px 10px rgba(240,162,122,.45)}
html[lang="en"] .frame-hero .card-copy-tag{font-size:11.5px;letter-spacing:0}
html[lang="en"] .frame-hero .card-copy-sub{font-size:9px}
.frame-hero .palm-shadow{position:absolute;z-index:0;left:43%;top:72%;width:260px;height:34px;border-radius:50%;background:radial-gradient(ellipse,rgba(22,6,15,.44),rgba(22,6,15,0) 73%);filter:blur(10px);transform:rotate(-9deg);pointer-events:none}
.frame-hero .card-demo{left:38%;right:auto;top:42%;transform:perspective(700px) rotateY(-11deg) rotateZ(-7deg)!important;transition:transform .3s ease,box-shadow .3s ease!important}
.frame-hero .card-demo:hover{transform:perspective(700px) rotateY(-5deg) rotateZ(-3deg) translateY(-7px)!important}
.frame-hero .card-instagram{display:grid;gap:8px;width:clamp(315px,28vw,390px);min-height:218px;padding:17px 20px!important;background:linear-gradient(135deg,rgba(96,115,132,.48),rgba(22,26,37,.83) 28%,rgba(9,13,23,.9) 100%)!important;color:#f7f5f5!important;text-decoration:none;border:1px solid rgba(224,237,255,.48)!important;border-radius:20px!important;backdrop-filter:blur(19px) saturate(1.3);-webkit-backdrop-filter:blur(19px) saturate(1.3);box-shadow:inset 1px 1px 0 rgba(255,255,255,.32),inset -1px -1px 0 rgba(255,255,255,.07),5px 6px 0 rgba(103,137,156,.32),18px 25px 45px rgba(18,7,17,.6)!important;overflow:hidden}
.frame-hero .card-instagram{z-index:1}
.frame-hero .card-instagram::after{content:"";position:absolute;inset:0;background:linear-gradient(122deg,rgba(255,255,255,.26),transparent 24%,transparent 72%,rgba(178,213,255,.09));pointer-events:none}
.frame-hero .ig-card-head{display:flex;align-items:center;gap:8px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.2);font:700 12px DM Sans,Arial,sans-serif;letter-spacing:.01em}
.frame-hero .ig-card-head svg{width:21px;height:21px;color:#f39bb5;flex:none}
.frame-hero .ig-profile{display:flex;align-items:center;gap:11px}
.frame-hero .ig-profile img{width:48px!important;height:48px!important;object-fit:cover!important;border-radius:50%!important;border:2px solid #d14f53}
.frame-hero .ig-profile>span{display:grid;gap:1px}
.frame-hero .ig-profile strong{font-size:18px;line-height:1.1;color:#fff!important}
.frame-hero .ig-profile small{font-size:11px;color:rgba(255,255,255,.7)}
.frame-hero .ig-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:6px 0;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.frame-hero .ig-facts>span{display:grid;gap:1px}
.frame-hero .ig-facts strong{font-size:15px!important;color:#fff!important;line-height:1.2}
.frame-hero .ig-facts small{font-size:9px;color:rgba(255,255,255,.68)}
.frame-hero .ig-bio{font-size:11px;line-height:1.4;color:rgba(255,255,255,.88)}
.frame-hero .ig-footer{display:flex;justify-content:space-between;align-items:center;gap:12px}
.frame-hero .ig-footer small{font-size:9px;color:rgba(255,255,255,.57)}
.frame-hero .ig-footer span{font-size:10px;font-weight:700;color:#fff;white-space:nowrap}
.frame-hero .card-price,.frame-hero .card-sectors{display:none!important}
.frame-hero .motion-scroll{z-index:7;left:clamp(24px,5vw,88px);bottom:120px;transform:none;text-align:left;letter-spacing:.08em;font-size:12px;text-shadow:0 1px 8px #0008}
.frame-hero .motion-progress{z-index:7}
.frame-hero .motion-bridge{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;opacity:0;transform:translateY(32px);pointer-events:none;color:#fff;text-align:center;background:linear-gradient(180deg,rgba(37,7,11,.08),rgba(37,7,11,.46) 44%,rgba(37,7,11,.87));will-change:opacity,transform}
.frame-hero .motion-bridge-index{font:700 12px "DM Sans",Arial,sans-serif;letter-spacing:.24em;color:#ffd4af}
.frame-hero .motion-bridge strong{font-size:clamp(42px,6.4vw,98px);line-height:1.12;font-weight:850;letter-spacing:-.055em;text-shadow:0 8px 30px #280b17a8}
.frame-hero .motion-bridge-arrow{font-size:30px;font-weight:300}
.frame-hero + .pains{position:relative;z-index:8;margin-top:-42px;border-radius:32px 32px 0 0;box-shadow:0 -20px 50px rgba(33,11,11,.19)}
.frame-hero.motion-static .hero-cards{opacity:1!important}
.frame-hero.motion-static .motion-bridge{display:none}
@media(min-width:1200px){
  .frame-hero .hero-title{min-height:130px}
  .frame-hero .hero-title .ln:last-child{position:absolute;left:calc(100vw - 555px);top:20px;font-size:clamp(55px,4.65vw,72px);white-space:nowrap;isolation:isolate;color:#fff;text-shadow:0 1px 2px rgba(34,6,10,.7),0 4px 14px rgba(34,6,10,.55),0 12px 40px rgba(34,6,10,.5)}
  /* Soft dark halo so the right-hand line stays readable over the bright orange / wrist area. */
  .frame-hero .hero-title .ln:last-child::before{content:"";position:absolute;z-index:-1;inset:-38% -16% -42% -14%;border-radius:50%;background:radial-gradient(closest-side,rgba(48,9,12,.62),rgba(48,9,12,.34) 55%,rgba(48,9,12,0));pointer-events:none}
  .frame-hero .hero-title .ln:last-child em{color:#ffe6c7!important}
  .frame-hero.title-stacked .hero-title{min-height:0}
  .frame-hero.title-stacked .hero-title .ln:last-child{position:static;left:auto!important;display:block;font-size:clamp(56px,5.2vw,82px)}
  .frame-hero.title-stacked .hero-title .ln:last-child::before{display:none}
  .frame-hero .hero-intro{max-width:440px!important}
}
@media(max-width:900px){
  .hero.hero-3d.editorial-hero.frame-hero.motion-ready{height:220svh}
  .frame-hero .hero-copy{top:33%;width:min(80vw,570px)}
  .frame-hero .hero-title{font-size:clamp(52px,8vw,78px)!important}
  .frame-hero .hero-cards{display:block}
  .frame-hero .card-demo{left:35%;right:auto;top:51%}
  .frame-hero .card-instagram{width:min(50vw,340px);min-height:0}
  .frame-hero .frame-shade{background:linear-gradient(180deg,rgba(28,6,8,.58),transparent 52%,rgba(28,6,8,.28))}
}
@media(max-width:600px){
  .site-footer{padding:52px 0 30px}
  .site-footer .footer-grid{gap:24px;margin-top:35px;padding-top:25px}
  .site-footer .footer-copy{margin-top:30px;padding-top:18px}
  .hero.hero-3d.editorial-hero.frame-hero.motion-ready{height:200svh}
  .frame-hero .hero-copy{top:86px;left:22px;width:calc(100% - 44px);transform:none!important}
  .frame-hero .hero-title{font-size:clamp(42px,11vw,58px)!important;margin:10px 0 12px!important}
  .frame-hero .hero-title .ln:first-child{font-size:clamp(39px,10vw,54px)}
  .frame-hero .hero-title .ln:last-child{font-size:clamp(43px,11vw,59px)}
  .frame-hero .hero-intro{max-width:29ch!important}
  .frame-hero .hero-note{display:none}
  .frame-hero .card-instagram{top:auto;bottom:23%;left:14%;right:auto;width:min(71vw,285px);min-height:0;gap:6px;padding:10px 13px!important;background:linear-gradient(135deg,rgba(38,46,62,.96),rgba(13,18,29,.98) 45%,rgba(9,13,23,.99))!important}
  .frame-hero .palm-shadow{left:18%;top:82%;width:210px;height:25px;filter:blur(7px)}
  .frame-hero .ig-card-head{font-size:10px;padding-bottom:6px}
  .frame-hero .ig-card-head svg{width:17px;height:17px}
  .frame-hero .ig-profile img{width:34px!important;height:34px!important}
  .frame-hero .ig-profile strong{font-size:14px}
  .frame-hero .ig-facts strong{font-size:11px!important}
  .frame-hero .ig-facts small{font-size:7px}
  .frame-hero .ig-bio,.frame-hero .ig-footer small{display:none}
  .frame-hero .ig-footer span{font-size:8px}
  .frame-hero .motion-scroll{left:22px;right:auto;bottom:95px;text-align:left}
  .frame-hero .motion-bridge strong{font-size:clamp(42px,11vw,65px)}
  .frame-hero + .pains{margin-top:-26px;border-radius:23px 23px 0 0}
}
/* Phones and portrait tablets: the film starts just under the hero copy (--film-top is set by
   hero-autoplay.js), so headline, CTA, portrait and card never overlap. */
@media(max-width:600px),(max-width:900px) and (orientation:portrait){
  .frame-hero .frame-poster{top:var(--film-top,31%);height:calc(100% - var(--film-top,31%));object-position:center}
  .frame-hero .hero-film{top:var(--film-top,31%);height:calc(100% - var(--film-top,31%));object-fit:cover;object-position:center}
  .frame-hero .frame-shade{background:linear-gradient(180deg,#741a16 0%,#741a16 var(--film-top,31%),rgba(116,26,22,.55) calc(var(--film-top,31%) + 28px),rgba(116,26,22,.12) calc(var(--film-top,31%) + 110px),transparent calc(var(--film-top,31%) + 170px))}
  .frame-hero .hero-note{display:none}
}
@media(min-width:601px) and (max-width:900px) and (orientation:portrait){
  .frame-hero .hero-copy{top:110px;transform:none!important}
}
@media(max-width:600px) and (max-height:720px){
  .frame-hero .hero-copy{top:76px}
  .frame-hero .hero-title{margin:6px 0 8px!important}
  .frame-hero .hero-title .ln:first-child{font-size:clamp(34px,9.4vw,46px)}
  .frame-hero .hero-title .ln:last-child{font-size:clamp(37px,10.2vw,50px)}
  .frame-hero .hero-intro{font-size:14px!important;line-height:1.55!important}
  .frame-hero .hero-actions{margin-top:14px!important}
}
@media(prefers-reduced-motion:reduce){
  .hero.hero-3d.editorial-hero.frame-hero{height:100svh!important}
  .frame-hero .motion-stick{position:relative}
  .frame-hero .hero-copy{opacity:1!important}
  .frame-hero .hero-cards{opacity:1!important}
  .frame-hero .motion-bridge{display:none}
}