:root{
  --blue:#3A76F0; --blue-d:#1F4FD1; --blue-soft:#EAF1FE;
  --orange:#D97757; --orange-d:#C15F3C; --orange-soft:#FBEFE9;
  --yellow:#F4C542; --yellow-soft:#FEF7DF;
  --ink:#0B0B0C; --ink-2:#141414; --ink-3:#1E1E20;
  --g50:#F7F7F5; --g100:#EFEFEC; --g200:#E3E3DF; --g400:#A3A39E; --g500:#7A7A75; --g600:#55554F;
  --line:rgba(11,11,12,.09); --line-dark:rgba(255,255,255,.1);
  --display:'Sora','Noto Sans TC',system-ui,sans-serif;
  --body:'Sora','Noto Sans TC',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --r-xl:40px; --r-lg:28px; --r-md:20px; --r-sm:14px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
img,video{max-width:100%;}

/* ==========================================================
   1. 文字與字型 Typography
   color / font-family / font-size / font-weight / line-height /
   text-align / text-decoration / letter-spacing
   ========================================================== */
body{
  margin:0;
  font-family:var(--body);
  font-size:16px; font-weight:400; line-height:1.75;
  color:var(--ink-2); letter-spacing:0.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5{font-family:var(--display); font-weight:700; color:var(--ink); margin:0; letter-spacing:-0.035em; line-height:1.08;}
h1{font-size:clamp(44px,7.2vw,112px); font-weight:800; letter-spacing:-0.05em; line-height:1.08;}
h2{font-size:clamp(32px,4.6vw,64px); letter-spacing:-0.045em;}
h3{font-size:clamp(20px,1.8vw,26px); letter-spacing:-0.025em; line-height:1.25;}
h4{font-size:16.5px; font-weight:600; letter-spacing:-0.01em; line-height:1.45;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
a.text-link{color:var(--blue); font-weight:600; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; text-decoration-color:rgba(58,118,240,.35);}
a.text-link:hover{text-decoration-color:var(--blue);}
.label{display:inline-block; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--g500); line-height:1.4;}
.label.o{color:var(--orange-d);} .label.b{color:var(--blue);} .label.y{color:var(--yellow);} .label.w{color:rgba(255,255,255,.6);}
.lead{font-size:clamp(16px,1.35vw,19px); line-height:1.8; color:var(--g600); font-weight:400;}
.on-dark .lead,.stage .lead{color:rgba(255,255,255,.66);}
.muted{color:var(--g500);}
.small{font-size:13px;}
.mono{font-family:var(--mono); letter-spacing:.02em;}
.center{text-align:center;}
.right{text-align:right;}
.left{text-align:left;}
.justify{text-align:justify; text-justify:inter-ideograph;}
.hl-blue{color:var(--blue);} .hl-orange{color:var(--orange);} .hl-yellow{color:var(--yellow);}
.grad-text{background-image:linear-gradient(100deg,var(--orange) 10%,var(--yellow) 90%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.grad-text-b{background-image:linear-gradient(100deg,var(--blue-d),var(--blue) 50%,#7FA6F7); -webkit-background-clip:text; background-clip:text; color:transparent;}
.big-num{font-family:var(--display); font-size:clamp(56px,6.4vw,104px); font-weight:700; letter-spacing:-0.06em; line-height:.92;}
.big-num small{font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; margin-left:8px; opacity:.7;}
.strike{text-decoration:line-through;}
.underline{text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:6px; text-underline-offset:-2px; text-decoration-skip-ink:none;}
/* depth blur headline (video style) */
.depth{display:inline-block; white-space:nowrap;}
.depth i{font-style:normal; display:inline-block;}
.depth i:nth-child(1){filter:blur(0); opacity:1;}
.depth i:nth-child(2){filter:blur(1.2px); opacity:.86;}
.depth i:nth-child(3){filter:blur(3px); opacity:.62;}
.depth i:nth-child(4){filter:blur(5px); opacity:.45;}

/* ==========================================================
   2. 盒模型 Box model
   width / height / padding / border / margin
   ========================================================== */
.wrap{width:100%; max-width:1240px; margin:0 auto; padding:0 32px;}
.wrap-sm{width:100%; max-width:880px; margin:0 auto; padding:0 32px;}
.sec{padding:120px 0;}
.sec-sm{padding:72px 0;}
.sec-head{max-width:760px; margin:0 0 56px;}
.sec-head.center{margin:0 auto 56px;}
.sec-head h2{margin:16px 0 0;}
.sec-head p{margin:20px 0 0; color:var(--g600); font-size:17px;}
.sec-head.center p{margin:20px auto 0;}
.stage .sec-head p{color:rgba(255,255,255,.62);}
.card{background-color:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:30px;}
.card-g{background-color:var(--g50); border:1px solid var(--line); border-radius:var(--r-md); padding:30px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px; padding:0 26px; border:1px solid transparent; border-radius:999px; font-family:var(--body); font-size:14.5px; font-weight:600; letter-spacing:0.01em; cursor:pointer; white-space:nowrap; text-decoration:none;}
.btn-ink{background-color:var(--ink); color:#fff;}
.btn-ink:hover{background-color:var(--blue-d);}
.btn-white{background-color:#fff; color:var(--ink); box-shadow:0 10px 30px -12px rgba(0,0,0,.4);}
.btn-white:hover{background-color:var(--yellow);}
.btn-blue{background-color:var(--blue); color:#fff; box-shadow:0 14px 30px -14px rgba(58,118,240,.8);}
.btn-blue:hover{background-color:var(--blue-d);}
.btn-orange{background-color:var(--orange); color:#fff; box-shadow:0 14px 30px -14px rgba(217,119,87,.8);}
.btn-orange:hover{background-color:var(--orange-d);}
.btn-line{background-color:transparent; color:var(--ink); border-color:rgba(11,11,12,.18);}
.btn-line:hover{border-color:var(--ink); background-color:var(--ink); color:#fff;}
.btn-ghost{background-color:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.22);}
.btn-ghost:hover{background-color:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5);}
.btn-sm{height:40px; padding:0 18px; font-size:13px;}
.btn .arr{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-right:-12px; border-radius:50%; background-color:rgba(255,255,255,.16); font-size:12px;}
.btn-white .arr,.btn-line .arr{background-color:var(--ink); color:#fff;}
.chip{display:inline-flex; align-items:center; gap:10px; padding:6px 16px 6px 6px; border:1px solid var(--line); border-radius:999px; background-color:#fff; font-size:13px; font-weight:500; color:var(--g600);}
.chip b{display:inline-block; padding:2px 10px; border-radius:999px; background-color:var(--blue); color:#fff; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.12em;}
.stage .chip{background-color:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.8);}
.tag{display:inline-block; padding:4px 12px; border-radius:999px; background-color:var(--g100); color:var(--ink-2); font-size:12.5px; font-weight:500; margin:0 6px 6px 0;}
hr.sep{border:0; border-top:1px solid var(--line); margin:48px 0; height:0;}

/* ==========================================================
   3. 背景 Background
   background-color / background-image / background-size /
   background-position / background-repeat
   ========================================================== */
body{background-color:#ffffff;}
.bg-g{background-color:var(--g50);}
.bg-ink{background-color:var(--ink);}
.cover{background-size:cover; background-position:center; background-repeat:no-repeat;}
.contain{background-size:contain; background-position:center; background-repeat:no-repeat; background-color:#fff;}
.dots{background-image:radial-gradient(rgba(11,11,12,.13) 1px, transparent 1.2px); background-size:16px 16px; background-position:0 0; background-repeat:repeat;}
.stage-dots{background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); background-size:14px 14px; background-position:center; background-repeat:repeat;}
.about-photo{background-image:url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&q=80&w=800');}
.tea-photo{background-image:url('/images/69ef0e5529.jpg');}
.wp-logo-bg{background-image:url('/images/2e217e633f.png');}
.pu-logo-bg{background-image:url('/images/55f3230d88.png');}
.contact-img{background-image:url('/video-poster.jpg'); background-size:cover; background-position:center top; background-repeat:no-repeat;}
.panel-brands{background-color:var(--blue-d); background-image:linear-gradient(180deg,rgba(31,79,209,.45) 0%,rgba(13,32,92,.92) 100%), url('/images/d861f04c3f.png'); background-size:cover; background-position:center 30%; background-repeat:no-repeat;}
.panel-kol{background-color:var(--orange-d); background-image:linear-gradient(180deg,rgba(120,46,20,.62) 0%,rgba(92,34,14,.94) 100%), url('/images/367739a2bc.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat;}
.warm-panel{
  background-color:#FFF8EE;
  background-image:radial-gradient(60% 80% at 100% 0%, rgba(244,197,66,.45), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(217,119,87,.32), transparent 60%), radial-gradient(40% 50% at 70% 100%, rgba(58,118,240,.16), transparent 70%);
  background-repeat:no-repeat; background-size:cover; background-position:center;
}
.cta-bg{
  background-color:var(--ink);
  background-image:radial-gradient(50% 90% at 0% 100%, rgba(217,119,87,.75), transparent 60%), radial-gradient(40% 70% at 100% 0%, rgba(58,118,240,.55), transparent 65%), radial-gradient(30% 50% at 70% 110%, rgba(244,197,66,.45), transparent 70%);
  background-repeat:no-repeat; background-size:cover; background-position:left bottom;
}

/* ==========================================================
   4. 版面配置 Layout
   display (block / inline / flex / grid / none)
   position (static / relative / absolute / fixed / sticky)
   top / bottom / left / right
   ========================================================== */
.page{display:none;}
.page.active{display:block;}
.flex{display:flex;}
.grid{display:grid;}
.inline{display:inline;}
.block{display:block;}
.hidden{display:none !important;}
.static{position:static;}
.rel{position:relative;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center;}

/* grain overlay (film grain like the video) */
.grain{position:fixed; top:0; left:0; right:0; bottom:0; z-index:400; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px; background-repeat:repeat;}

/* progress + floating pill nav */
.progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:420; background-image:linear-gradient(90deg,var(--blue),var(--orange),var(--yellow)); transition:width .1s linear;}
.navbar{position:fixed; top:16px; left:50%; z-index:300; transform:translateX(-50%); width:min(1100px, calc(100% - 32px)); height:62px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 8px 0 18px; border-radius:999px; background-color:rgba(20,20,22,.78); border:1px solid rgba(255,255,255,.12); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px); box-shadow:0 20px 40px -20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); transition:background-color .35s var(--ease), box-shadow .35s var(--ease);}
.navbar.scrolled{background-color:rgba(11,11,12,.9); box-shadow:0 24px 50px -22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:-0.03em; color:#fff; line-height:1;}
.logo-mark{position:relative; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:10px; background-image:linear-gradient(140deg,var(--orange) 0%,var(--yellow) 100%); color:var(--ink); font-family:var(--display); font-size:17px; font-weight:800; letter-spacing:-0.06em; box-shadow:0 0 18px rgba(217,119,87,.55);}
.logo-mark::after{content:''; position:absolute; right:-3px; bottom:-3px; width:10px; height:10px; border-radius:50%; background-color:var(--blue); border:2px solid #141416;}
.logo small{display:inline; font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.22em; color:rgba(255,255,255,.5); margin-left:2px;}
.nav-links{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0;}
.nav-links a{position:relative; display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:500; color:rgba(255,255,255,.66); letter-spacing:.04em; transition:color .25s var(--ease), background-color .25s var(--ease);}
.nav-links a i{font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:rgba(255,255,255,.35);}
.nav-links a:hover{color:#fff; background-color:rgba(255,255,255,.07);}
.nav-links a.active{color:#fff; background-color:rgba(255,255,255,.1);}
.nav-links a.active i{color:var(--yellow);}
.nav-cta{display:flex; align-items:center; gap:8px;}
.nav-cta .btn{height:46px;}
.menu-btn{display:none; position:relative; width:46px; height:46px; border:0; border-radius:50%; background-color:#fff; cursor:pointer;}
.menu-btn span{position:absolute; left:14px; right:14px; height:2px; border-radius:2px; background-color:var(--ink); transition:transform .3s var(--ease), opacity .3s;}
.menu-btn span:nth-child(1){top:16px;} .menu-btn span:nth-child(2){top:22px;} .menu-btn span:nth-child(3){top:28px;}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.mobile-menu{display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:290; padding:110px 26px 40px; overflow:auto; background-color:#fff;}
.mobile-menu.open{display:block;}
.mobile-menu a{display:flex; align-items:baseline; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); font-family:var(--display); font-size:30px; font-weight:700; letter-spacing:-0.03em; color:var(--ink);}
.mobile-menu a i{font-style:normal; font-family:var(--mono); font-size:11px; font-weight:500; color:var(--g400); letter-spacing:.1em;}
.mobile-menu a.active{color:var(--blue);}
.mobile-menu .sub{font-family:var(--body); font-size:16px; font-weight:600; color:var(--orange-d);}

/* ---------- stage (rounded dark frame with thin edge glow) ---------- */
.stage{position:relative; margin:0 14px; border-radius:var(--r-xl); background-color:var(--ink); color:#fff; overflow:hidden; isolation:isolate;}
.stage::before{content:''; position:absolute; top:0; left:0; right:0; bottom:0; z-index:3; border-radius:inherit; padding:1.2px; pointer-events:none;
  background-image:linear-gradient(140deg, rgba(217,119,87,.95) 0%, rgba(255,255,255,.08) 22%, rgba(255,255,255,.04) 60%, rgba(244,197,66,.8) 88%, rgba(217,119,87,.9) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);}
.stage h1,.stage h2,.stage h3,.stage h4{color:#fff;}
.stage-in{position:relative; z-index:2;}
.glow{position:absolute; z-index:0; border-radius:50%; pointer-events:none; filter:blur(70px);}
.g-orange{width:520px; height:520px; left:-160px; top:-180px; background-color:rgba(217,119,87,.55);}
.g-yellow{width:420px; height:420px; right:-120px; bottom:-160px; background-color:rgba(244,197,66,.42);}
.g-blue{width:460px; height:460px; right:-140px; top:10%; background-color:rgba(58,118,240,.42);}
.g-orange-b{width:480px; height:420px; left:20%; bottom:-260px; background-color:rgba(217,119,87,.5);}

/* ---------- HOME / hero ---------- */
.hero{padding:150px 0 0; margin-top:14px; min-height:980px;}
.hero-copy{text-align:center; max-width:1060px; margin:0 auto; padding:0 24px;}
.hero-title{margin:28px 0 0; text-shadow:0 10px 60px rgba(217,119,87,.18);}
.hero-title .l2{display:block;}
.hero .lead{max-width:620px; margin:30px auto 0;}
.hero-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:38px 0 0;}
.hero-meta{display:flex; align-items:center; justify-content:center; gap:14px; margin:30px 0 0; font-size:13px; color:rgba(255,255,255,.55);}
.avatars{display:flex;}
.avatars img{width:36px; height:36px; border-radius:50%; border:2px solid var(--ink); object-fit:cover; margin-left:-10px; background-color:#222;}
.avatars img:first-child{margin-left:0;}
.hero-visual{position:relative; max-width:980px; margin:70px auto 0; padding:0 24px; perspective:1600px;}
.screen{position:relative; border-radius:24px 24px 0 0; overflow:hidden; background-color:#000; border:1px solid rgba(255,255,255,.16); border-bottom:0; aspect-ratio:16/10; transform:rotateX(14deg); transform-origin:50% 100%; box-shadow:0 -30px 90px -30px rgba(217,119,87,.55), 0 0 0 8px rgba(255,255,255,.03);}
.screen video{display:block; width:100%; height:100%; object-fit:cover;}
.screen-bar{position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; gap:6px; height:30px; padding:0 14px; background-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent);}
.screen-bar span{display:block; width:9px; height:9px; border-radius:50%; background-color:rgba(255,255,255,.25);}
.screen-bar span:nth-child(1){background-color:var(--orange);} .screen-bar span:nth-child(2){background-color:var(--yellow);} .screen-bar span:nth-child(3){background-color:var(--blue);}
.play-btn{position:absolute; top:50%; left:50%; z-index:3; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; gap:10px; height:62px; padding:0 26px 0 8px; border:0; border-radius:999px; background-color:#fff; color:var(--ink); font-family:var(--body); font-size:14px; font-weight:600; cursor:pointer; box-shadow:0 20px 50px -10px rgba(0,0,0,.6); transition:transform .3s var(--ease), opacity .3s;}
.play-btn b{display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background-image:linear-gradient(140deg,var(--orange),var(--yellow)); color:#fff; font-size:15px;}
.play-btn:hover{transform:translate(-50%,-50%) scale(1.05);}
.play-btn.gone{opacity:0; pointer-events:none;}
.phone{position:absolute; right:-10px; bottom:40px; z-index:4; width:190px; aspect-ratio:9/19; border-radius:34px; padding:7px; background-color:#1a1a1c; border:1px solid rgba(255,255,255,.22); transform:rotate(9deg); box-shadow:0 40px 70px -20px rgba(0,0,0,.8), 0 0 40px rgba(217,119,87,.25);}
.phone img{display:block; width:100%; height:100%; object-fit:cover; border-radius:28px;}
.phone::before{content:''; position:absolute; top:14px; left:50%; width:58px; height:16px; margin-left:-29px; border-radius:10px; background-color:#000; z-index:2;}
.phone .ph-cap{position:absolute; left:16px; right:16px; bottom:20px; z-index:2; color:#fff; font-size:12px; line-height:1.4; text-shadow:0 2px 10px rgba(0,0,0,.7);}
.phone .ph-cap strong{display:block; font-size:13.5px;}
.float-card{position:absolute; z-index:5; display:flex; align-items:center; gap:12px; padding:12px 18px 12px 12px; border-radius:18px; background-color:#fff; color:var(--ink); box-shadow:0 24px 50px -18px rgba(0,0,0,.55); font-size:13px; line-height:1.35;}
.float-card strong{display:block; font-size:14px; font-weight:700;}
.float-card span{color:var(--g500); font-size:12px;}
.float-card img{width:42px; height:42px; border-radius:50%; object-fit:cover;}
.fc-icon{display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; color:#fff; font-size:17px;}
.fc-1{left:-20px; top:60px; transform:rotate(-5deg);}
.fc-2{left:40px; bottom:70px; transform:rotate(3deg);}
.fc-3{right:170px; top:-30px; transform:rotate(4deg);}
.scroll-down{position:absolute; left:50%; bottom:22px; z-index:6; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:8px 16px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background-color:rgba(11,11,12,.6); color:#fff; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; cursor:pointer;}

/* marquee */
.partners{padding:90px 0 50px;}
.row-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin:0 0 34px;}
.row-head h2,.row-head h3{margin:12px 0 0;}
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.marquee-track{display:flex; gap:16px; width:max-content; animation:marquee 40s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.logo-tile{display:flex; align-items:center; justify-content:center; width:210px; height:104px; padding:20px 28px; border-radius:22px; background-color:var(--g50); border:1px solid var(--line);}
.logo-tile img{max-width:100%; max-height:60px; object-fit:contain; filter:grayscale(1); opacity:.72; transition:opacity .3s, filter .3s;}
.logo-tile:hover img{opacity:1; filter:none;}

/* stats bento */
.stats{display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:18px;}
.stat{position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; min-height:300px; padding:30px 32px; border-radius:var(--r-lg);}
.stat .stars{position:static; display:block; color:var(--yellow); letter-spacing:4px; font-size:14px;}
.stat h4{margin:18px 0 4px; font-size:18px;}
.stat p{font-size:14px;}
.stat-blue{background-color:var(--blue); background-image:radial-gradient(80% 80% at 100% 0%, rgba(255,255,255,.28), transparent 60%); color:#fff;}
.stat-blue h4{color:#fff;} .stat-blue p{color:rgba(255,255,255,.75);}
.stat-white{background-color:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(11,11,12,.3);}
.stat-white .stars{color:var(--orange);}
.stat-white p{color:var(--g500);}
.stat-warm{background-image:linear-gradient(150deg,var(--orange) 0%,#E99A55 45%,var(--yellow) 100%); color:var(--ink);}
.stat-warm .stars{color:var(--ink);}
.stat-warm p{color:rgba(11,11,12,.7);}
.stat .corner{position:absolute; top:26px; right:28px;}

/* pain points */
.pain-wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:72px; align-items:start;}
.pain-aside{position:sticky; top:120px;}
.pain-aside h2{margin:16px 0 0;}
.pain-note{display:flex; align-items:center; gap:12px; margin:30px 0 0; padding:16px 20px; border-radius:16px; background-color:var(--yellow-soft); font-weight:600; font-size:15px; color:var(--ink);}
.pain-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.pain{position:relative; display:flex; align-items:center; gap:24px; padding:28px 8px; border-bottom:1px solid var(--line); font-size:clamp(18px,1.8vw,24px); font-weight:600; letter-spacing:-0.02em; color:var(--ink); cursor:default; transition:padding .35s var(--ease), color .3s;}
.pain i{font-style:normal; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.1em; color:var(--g400); flex:0 0 32px;}
.pain::after{content:'→'; position:absolute; right:10px; top:50%; transform:translate(-10px,-50%); opacity:0; color:var(--blue); transition:opacity .3s, transform .3s var(--ease);}
.pain:hover{padding-left:22px; color:var(--blue);}
.pain:hover::after{opacity:1; transform:translate(0,-50%);}

/* services stage */
.svc-stage{padding:110px 0 100px;}
.svc-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 44px;}
.svc-tab{position:relative; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background-color:transparent; font-family:var(--body); font-size:14px; font-weight:500; color:rgba(255,255,255,.75); cursor:pointer; transition:background-color .25s, color .25s, border-color .25s;}
.svc-tab:hover{border-color:rgba(255,255,255,.5); color:#fff;}
.svc-tab[aria-selected="true"]{background-color:#fff; border-color:#fff; color:var(--ink);}
.svc-tab .hot{display:inline-block; padding:1px 8px; border-radius:999px; background-color:var(--orange); color:#fff; font-size:10.5px; font-weight:600;}
.svc-tab.event{border-color:rgba(244,197,66,.5); color:var(--yellow);}
.svc-tab.event small{font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:rgba(244,197,66,.75);}
.svc-tab.event:hover{background-color:var(--yellow); color:var(--ink);}
.svc-body{display:grid; grid-template-columns:420px 1fr; gap:56px; align-items:start;}
.deck{position:relative; height:470px; perspective:1400px;}
.dc{position:absolute; top:0; width:300px; height:400px; padding:26px; border-radius:26px; transform-style:preserve-3d; transition:transform .7s var(--ease); display:flex; flex-direction:column; justify-content:space-between;}
.dc-1{left:0; top:56px; background-color:var(--blue); color:#fff; transform:rotateY(24deg) scale(.82); box-shadow:0 30px 60px -20px rgba(0,0,0,.6);}
.dc-2{left:50px; top:28px; background-color:#fff; color:var(--ink); transform:rotateY(18deg) scale(.9); box-shadow:0 30px 60px -20px rgba(0,0,0,.6);}
.dc-3{left:110px; top:0; background-image:linear-gradient(160deg,var(--orange) 0%,#EC9A4E 50%,var(--yellow) 100%); color:var(--ink); transform:rotateY(10deg); box-shadow:0 40px 80px -20px rgba(217,119,87,.55);}
.deck:hover .dc-1{transform:rotateY(18deg) scale(.82) translateX(-20px);}
.deck:hover .dc-2{transform:rotateY(12deg) scale(.9) translateX(-10px);}
.deck:hover .dc-3{transform:rotateY(4deg) translateX(10px);}
.dc .label{color:inherit; opacity:.7;}
.dc .vert{writing-mode:vertical-rl; transform:rotate(180deg); opacity:.85; font-weight:600;}
.dc strong{display:block; font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-0.03em; line-height:1.15;}
.dc-3 .dk-num{font-family:var(--display); font-size:88px; font-weight:800; letter-spacing:-0.07em; line-height:.9;}
.dc-3 .dk-name{display:block; font-family:var(--display); font-size:34px; font-weight:800; letter-spacing:-0.04em; line-height:1.05; margin:10px 0 0;}
.deck-dots{position:absolute; left:110px; bottom:6px; display:flex; gap:6px;}
.deck-dots span{display:block; width:22px; height:3px; border-radius:3px; background-color:rgba(255,255,255,.22); transition:background-color .3s, width .3s;}
.deck-dots span.on{width:40px; background-color:#fff;}
.svc-panel{display:none;}
.svc-panel.show{display:block; animation:fadeUp .55s var(--ease);}
.svc-panel h3{font-size:clamp(26px,2.6vw,36px); margin:12px 0 16px; letter-spacing:-0.035em;}
.svc-panel > p{color:rgba(255,255,255,.66); text-align:justify; max-width:680px;}
.svc-items{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:30px 0 30px;}
.svc-item{padding:18px 20px; border-radius:16px; background-color:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); transition:background-color .3s, border-color .3s;}
.svc-item:hover{background-color:rgba(255,255,255,.07); border-color:rgba(244,197,66,.35);}
.svc-item h4{font-size:15px; margin:0 0 6px; color:#fff;}
.svc-item p{font-size:13.5px; color:rgba(255,255,255,.58); line-height:1.7;}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px);}to{opacity:1; transform:none;}}

/* showreel / belief */
.offset-title{font-size:clamp(40px,6.4vw,100px); font-weight:800; letter-spacing:-0.055em; line-height:1.02;}
.offset-title .l1{display:block;}
.offset-title .l2{display:block; padding-left:clamp(40px,18vw,320px);}
.reel{display:grid; grid-template-columns:1.5fr 1fr; gap:20px; margin:56px 0 0;}
.reel-frame{position:relative; border-radius:var(--r-lg); overflow:hidden; background-color:#000; aspect-ratio:4/3; box-shadow:0 50px 90px -50px rgba(11,11,12,.6);}
.reel-frame video{display:block; width:100%; height:100%; object-fit:cover;}
.reel-frame .label{position:absolute; left:20px; top:18px; z-index:2; padding:6px 12px; border-radius:999px; background-color:rgba(255,255,255,.9); color:var(--ink);}
.belief{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:30px; padding:34px; border-radius:var(--r-lg); background-color:var(--g50); border:1px solid var(--line); overflow:hidden;}
.belief h3{font-size:28px; margin:14px 0 0;}
.belief p{color:var(--g600); font-size:15px; text-align:justify;}
.belief p + p{margin:12px 0 0;}
.belief .orb{position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%; background-image:radial-gradient(circle at 35% 35%, var(--yellow), var(--orange) 60%, transparent 70%); opacity:.35; filter:blur(10px);}

/* process */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:step;}
.step{position:relative; padding:30px 26px 32px; border-radius:var(--r-md); background-color:#fff; border:1px solid var(--line); overflow:hidden;}
.step::before{counter-increment:step; content:'0' counter(step); display:block; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; color:var(--g400); margin:0 0 54px;}
.step::after{content:''; position:absolute; left:26px; right:26px; top:58px; height:2px; border-radius:2px; background-image:linear-gradient(90deg,var(--blue),var(--orange),var(--yellow)); opacity:.25; transform-origin:left; transition:opacity .4s;}
.step:hover::after{opacity:1;}
.step h3{font-size:22px; margin:0 0 10px;}
.step p{font-size:14px; color:var(--g500);}
.step:nth-child(1) h3{color:var(--blue);} .step:nth-child(2) h3{color:var(--orange-d);} .step:nth-child(3) h3{color:#B88A0E;} .step:nth-child(4) h3{color:var(--ink);}

/* ecosystem twin panels */
.twin{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.tall{position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:640px; padding:40px; border-radius:var(--r-lg); overflow:hidden; color:#fff; isolation:isolate;}
.tall::before{content:''; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:inherit; border:1px solid rgba(255,255,255,.22); pointer-events:none;}
.tall .plus{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.5); font-size:20px; align-self:center;}
.tall h3{font-size:clamp(34px,3.8vw,56px); font-weight:800; letter-spacing:-0.05em; line-height:1.02; color:#fff; text-align:center; text-shadow:0 4px 30px rgba(0,0,0,.35);}
.tall .t-mid{text-align:center;}
.tall .t-mid p{margin:16px auto 0; max-width:380px; color:rgba(255,255,255,.8); font-size:15px; text-shadow:0 1px 10px rgba(0,0,0,.4);}
.tall .btn{width:100%; height:56px;}
.checks{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:22px 0 0; padding:0; list-style:none;}
.checks li{padding:6px 14px; border-radius:999px; background-color:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); font-size:13px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.checks li::before{content:'✓ '; color:var(--yellow);}
.kol-count{display:flex; align-items:center; justify-content:center; gap:14px; margin:22px 0 0;}
.kol-count .avatars img{width:44px; height:44px; border-color:rgba(255,255,255,.9);}
.kol-count .n{font-family:var(--display); font-size:44px; font-weight:800; letter-spacing:-0.05em; line-height:1;}
.kol-count .n small{display:block; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.16em; opacity:.75; margin:4px 0 0;}

/* case cards */
.case-card{position:relative; display:block; overflow:hidden; border-radius:var(--r-md); background-color:#fff; border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s var(--ease); cursor:pointer;}
.case-card:hover{transform:translateY(-6px) rotate(-.6deg); box-shadow:0 34px 60px -30px rgba(11,11,12,.4);}
.case-card .thumb{position:relative; aspect-ratio:1/1; overflow:hidden; background-color:var(--g100); margin:8px; border-radius:14px;}
.case-card .thumb img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
.case-card:hover .thumb img{transform:scale(1.06);}
.case-card .body{padding:12px 20px 24px;}
.case-card .cat{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.12em; color:var(--blue);}
.case-card h3{font-size:18px; margin:8px 0 6px; letter-spacing:-0.02em;}
.case-card p{font-size:14px; color:var(--g500);}
.case-card .go{position:absolute; top:20px; right:20px; z-index:2; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background-color:#fff; color:var(--ink); font-size:14px; opacity:0; transform:scale(.8); transition:opacity .3s, transform .3s var(--ease); box-shadow:0 8px 20px rgba(0,0,0,.2);}
.case-card:hover .go{opacity:1; transform:none;}

/* testimonials fan */
.voices{padding:120px 0 0; min-height:860px;}
.voices h2{font-size:clamp(40px,5.6vw,84px); font-weight:800;}
.fan{position:relative; height:520px; max-width:980px; margin:60px auto 0;}
.rv{position:absolute; bottom:70px; width:min(420px,88%); padding:28px 30px 34px; border-radius:24px; background-color:#fff; color:var(--ink); box-shadow:0 40px 80px -30px rgba(0,0,0,.8); transition:transform .5s var(--ease);}
.rv.ghost{height:330px; background-color:#E9E9E6; box-shadow:0 30px 60px -30px rgba(0,0,0,.7);}
.rv.g1{left:22%; transform:rotate(-16deg); opacity:.5;}
.rv.g2{right:22%; transform:rotate(15deg); opacity:.5;}
.rv.r1{left:1%; transform:rotate(-7deg); z-index:2;}
.rv.r2{right:1%; transform:rotate(6deg); z-index:3;}
.rv.r1:hover{transform:rotate(-3deg) translateY(-16px);}
.rv.r2:hover{transform:rotate(2deg) translateY(-16px);}
.rv .who{display:flex; align-items:center; gap:12px; margin:0 0 18px;}
.rv .av{display:flex; align-items:center; justify-content:center; flex:0 0 46px; height:46px; border-radius:50%; color:#fff; font-weight:700; font-size:17px;}
.rv .who strong{display:flex; align-items:center; gap:6px; font-size:14.5px; line-height:1.35;}
.rv .who strong::after{content:'✓'; display:inline-flex; align-items:center; justify-content:center; flex:0 0 16px; height:16px; border-radius:50%; background-color:var(--blue); color:#fff; font-size:9px;}
.rv .who span{display:block; font-size:12.5px; color:var(--g500);}
.rv blockquote{margin:0; font-size:16.5px; line-height:1.8; color:var(--ink-2);}
.rv blockquote em{font-style:normal; color:var(--blue); font-weight:600;}
.rv .stars-row{margin:16px 0 0; color:var(--orange); letter-spacing:4px;}
.rv .x{position:absolute; top:22px; right:24px; font-family:var(--mono); font-size:11px; color:var(--g400);}

/* ---------- ABOUT ---------- */
.page-hero{padding:170px 0 70px; position:relative; overflow:hidden;}
.page-hero .soft{position:absolute; z-index:-1; border-radius:50%; filter:blur(90px); pointer-events:none;}
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:end;}
.bf{font-size:clamp(64px,11vw,184px); font-weight:800; letter-spacing:-0.07em; line-height:.86;}
.bf .plus{color:var(--orange);}
.bf .fut{display:block; padding-left:.6em;}
.about-photo{position:relative; min-height:560px; border-radius:var(--r-lg); box-shadow:0 50px 90px -50px rgba(11,11,12,.55);}
.about-photo .glass{position:absolute; left:20px; right:20px; bottom:20px; padding:18px 20px; border-radius:20px; background-color:rgba(11,11,12,.45); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:#fff; font-size:13.5px; line-height:1.55; text-shadow:0 1px 6px rgba(0,0,0,.3);}
.about-photo .glass strong{display:block; font-family:var(--display); font-size:34px; font-weight:800; letter-spacing:-0.05em; line-height:1.1; color:var(--yellow);}
.mv-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.mv{position:relative; min-height:340px; padding:42px; border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;}
.mv h3{font-size:30px; margin:12px 0 14px;}
.mv p{text-align:justify; position:relative; z-index:1;}
.mv .bigletter{position:absolute; right:24px; top:-30px; font-family:var(--display); font-size:240px; font-weight:800; letter-spacing:-0.08em; line-height:1; pointer-events:none;}
.mv-m{background-color:var(--blue-soft);}
.mv-m p{color:var(--g600);}
.mv-m .bigletter{color:rgba(58,118,240,.16);}
.mv-v{background-color:var(--ink); color:#fff;}
.mv-v h3{color:#fff;} .mv-v p{color:rgba(255,255,255,.7);}
.mv-v .bigletter{background-image:linear-gradient(160deg,var(--orange),var(--yellow)); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.55;}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.value{position:relative; padding:30px 30px 34px; border-radius:var(--r-md); background-color:#fff; border:1px solid var(--line); overflow:hidden;}
.value .num{display:block; font-family:var(--display); font-size:64px; font-weight:800; letter-spacing:-0.07em; line-height:1; margin:0 0 26px;}
.value:nth-child(1) .num{color:var(--blue);} .value:nth-child(2) .num{color:var(--orange);} .value:nth-child(3) .num{color:var(--yellow);}
.value h4{font-size:18px; margin:0 0 8px;}
.acc-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start;}
.acc-aside{position:sticky; top:120px;}
.acc{border-bottom:1px solid var(--line); transition:background-color .3s;}
.acc:first-child{border-top:1px solid var(--line);}
.acc-btn{display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:26px 6px; border:0; background-color:transparent; font-family:var(--body); font-size:18px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); text-align:left; cursor:pointer;}
.acc-btn:hover{color:var(--blue);}
.acc-btn .ico{flex:0 0 38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background-color:var(--g100); font-size:16px; transition:transform .35s var(--ease), background-color .3s, color .3s;}
.acc.open .acc-btn .ico{background-color:var(--blue); color:#fff; transform:rotate(45deg);}
.acc-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease);}
.acc.open .acc-panel{grid-template-rows:1fr;}
.acc-panel > div{overflow:hidden;}
.acc-inner{padding:0 6px 30px;}
.acc-inner > p{color:var(--g600); text-align:justify; margin:0 0 18px;}
.acc-inner ul{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:0; margin:0; list-style:none;}
.acc-inner li{position:relative; padding:12px 14px 12px 32px; border-radius:12px; background-color:var(--g50); font-size:13.5px; line-height:1.6; color:var(--g600);}
.acc-inner li::before{content:''; position:absolute; left:14px; top:19px; width:7px; height:7px; border-radius:50%; background-color:var(--orange);}
.acc-inner li b{display:block; color:var(--ink); font-size:14px;}

/* ---------- BRAND ---------- */
.brand-stage{padding:150px 0 90px; margin-top:14px; min-height:860px;}
.brand-stage .lead{max-width:640px; margin:26px auto 0;}
.carousel3d{position:relative; height:360px; max-width:900px; margin:56px auto 0; perspective:1400px;}
.c3{position:absolute; top:40px; width:260px; height:320px; border-radius:26px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 40px 80px -30px rgba(0,0,0,.8);}
.c3 .logo-box{height:120px; border-radius:16px;}
.c3 strong{display:block; font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:-0.03em; line-height:1.2;}
.c3-1{left:4%; background-color:var(--blue); color:#fff; transform:rotateY(28deg) rotate(-3deg);}
.c3-2{left:50%; margin-left:-130px; top:0; background-color:#fff; color:var(--ink); z-index:2; transform:translateZ(60px);}
.c3-3{right:4%; background-image:linear-gradient(160deg,var(--orange),var(--yellow)); color:var(--ink); transform:rotateY(-28deg) rotate(3deg);}
.c3-2 img{display:block; width:120px; height:120px; border-radius:50%; object-fit:cover; margin:6px auto 0; border:4px solid var(--orange);}
.c3 .label{color:inherit; opacity:.7;}
.sub-brand{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; padding:52px; border-radius:var(--r-xl); background-color:var(--g50); border:1px solid var(--line);}
.sub-brand + .sub-brand{margin-top:20px;}
.sub-brand.rev{grid-template-columns:1.15fr 1fr; background-color:#fff;}
.sub-brand.rev .sb-media{order:-1;}
.sb-logo{width:200px; height:80px; margin:22px 0 22px; border-radius:16px; border:1px solid var(--line); background-position:center;}
.sb-meta{display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 26px;}
.prod-row{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:center;}
.prod-row figure,.shot-row figure{margin:0; overflow:hidden; border-radius:20px; background-color:#fff; border:1px solid var(--line); box-shadow:0 30px 50px -30px rgba(11,11,12,.35); transition:transform .5s var(--ease);}
.prod-row figure:nth-child(1){transform:rotate(-5deg) translateY(16px);}
.prod-row figure:nth-child(2){transform:translateY(-14px); z-index:2;}
.prod-row figure:nth-child(3){transform:rotate(5deg) translateY(16px);}
.prod-row figure:hover{transform:translateY(-22px) rotate(0);}
.prod-row img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover;}
.shot-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.shot-row figure{padding:26px 0 0; position:relative; background-color:var(--g100);}
.shot-row figure::before{content:'● ● ●'; position:absolute; top:6px; left:12px; font-size:8px; letter-spacing:2px; color:var(--g400);}
.shot-row figure:nth-child(2){transform:translateY(30px);}
.shot-row img{display:block; width:100%; aspect-ratio:16/11; object-fit:cover; object-position:top;}
.creator{display:grid; grid-template-columns:330px 1fr; gap:48px; align-items:start;}
.creator-card{position:sticky; top:110px; padding:36px 30px; border-radius:var(--r-lg); background-color:var(--ink); color:#fff; text-align:center; overflow:hidden; isolation:isolate;}
.creator-card .glow{width:300px; height:300px; left:50%; top:-120px; margin-left:-150px; background-color:rgba(217,119,87,.55);}
.creator-card > *:not(.glow){position:relative; z-index:1;}
.creator-card img{display:block; width:136px; height:136px; margin:22px auto 18px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 0 0 6px rgba(244,197,66,.35), 0 0 50px rgba(217,119,87,.7);}
.creator-card h3{font-size:30px; color:#fff;}
.creator-card p{color:rgba(255,255,255,.65); font-size:14px; margin:8px 0 24px;}
.creator-card .btn{width:100%; margin:0 0 10px;}
.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.vcard{display:block; overflow:hidden; border-radius:var(--r-md); background-color:#fff; border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s var(--ease); cursor:pointer;}
.vcard:hover{transform:translateY(-5px); box-shadow:0 28px 50px -28px rgba(11,11,12,.4);}
.vcard .vthumb{position:relative; aspect-ratio:16/9; overflow:hidden; background-color:var(--g100);}
.vcard .vthumb img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
.vcard:hover .vthumb img{transform:scale(1.05);}
.vcard .vthumb::after{content:'▶'; position:absolute; left:12px; bottom:12px; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background-color:rgba(255,255,255,.95); color:var(--blue); font-size:12px; box-shadow:0 6px 16px rgba(0,0,0,.25); transition:background-color .3s, color .3s;}
.vcard:hover .vthumb::after{background-color:var(--orange); color:#fff;}
.vcard .vbody{padding:16px 18px 20px;}
.vcard h4{font-size:14.5px; font-weight:500; line-height:1.6; letter-spacing:0;}
.vcard .src{display:block; margin:10px 0 0; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--g400); text-transform:uppercase;}
.ecom-hero{position:relative; padding:80px 64px; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line);}
.ecom-hero h2{font-size:clamp(36px,4.8vw,68px); font-weight:800;}
.q-card{padding:36px; border-radius:var(--r-lg); background-color:var(--ink); color:#fff; box-shadow:0 40px 80px -40px rgba(11,11,12,.6); transform:rotate(1.5deg);}
.q-card h3{color:#fff; font-size:24px;}
.q-list{list-style:none; margin:20px 0; padding:0;}
.q-list li{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:15px; color:rgba(255,255,255,.85);}
.q-list li::before{content:'?'; display:flex; align-items:center; justify-content:center; flex:0 0 26px; height:26px; border-radius:50%; background-color:var(--yellow); color:var(--ink); font-weight:700; font-size:13px;}
.feat{position:relative; padding:28px; border-radius:var(--r-md); background-color:#fff; border:1px solid var(--line);}
.feat .fi{display:flex; align-items:center; justify-content:center; width:46px; height:46px; margin:0 0 20px; border-radius:14px; font-size:18px; color:#fff; background-color:var(--blue);}
.feat:nth-child(3n+2) .fi{background-color:var(--orange);}
.feat:nth-child(3n) .fi{background-color:var(--yellow); color:var(--ink);}
.feat h4{font-size:16px; margin:0 0 8px;}
.feat p{font-size:14px; color:var(--g500);}
.feat.more{display:flex; align-items:center; justify-content:center; text-align:center; border-style:dashed; background-color:transparent;}
.journey-panel{padding:64px 56px; border-radius:var(--r-xl); background-color:var(--g50); border:1px solid var(--line);}
.journey{position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:10px;}
.journey::before{content:''; position:absolute; top:33px; left:8%; right:8%; height:2px; background-image:linear-gradient(90deg,var(--blue),var(--orange),var(--yellow)); opacity:.6;}
.jstep{position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; padding:0; border:0; background-color:transparent; font-family:var(--body); font-size:14px; font-weight:500; color:var(--g500); text-align:center; cursor:pointer;}
.jstep .dot{position:relative; display:flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:50%; background-color:#fff; border:1px solid var(--line); font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink); transition:all .35s var(--ease);}
.jstep:hover .dot{border-color:var(--blue);}
.jstep[aria-pressed="true"] .dot{background-color:var(--ink); border-color:var(--ink); color:var(--yellow); box-shadow:0 0 0 7px rgba(58,118,240,.16);}
.jstep[aria-pressed="true"]{color:var(--ink); font-weight:700;}
.journey-panel .sec-head{max-width:960px;}
.jdetail{max-width:640px; margin:40px auto 0; padding:26px 32px; border-radius:20px; background-color:#fff; border:1px solid var(--line); text-align:center; box-shadow:0 30px 60px -40px rgba(11,11,12,.3);}
.jdetail h4{font-size:20px; margin:0 0 6px;}
.channel{display:flex; flex-direction:column; padding:28px; border-radius:var(--r-lg); background-color:#fff; border:1px solid var(--line);}
.channel .ch-logo{height:120px; margin:0 0 22px; border-radius:16px; border:1px solid var(--line);}
.channel .sub{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; color:var(--blue);}
.channel h3{margin:8px 0 10px; font-size:22px;}
.channel .desc{flex:1; font-size:14px; color:var(--g500); text-align:justify;}
.channel .btn{margin:22px 0 0; align-self:flex-start;}
.fit{display:flex; gap:18px; padding:22px 24px; border-radius:18px; background-color:#fff; border:1px solid var(--line);}
.fit + .fit{margin-top:10px;}
.fit .n{display:flex; align-items:center; justify-content:center; flex:0 0 42px; height:42px; border-radius:50%; background-color:var(--blue); color:#fff; font-family:var(--mono); font-weight:600;}
.fit h4{margin:0 0 4px;}
.fit p{font-size:14px; color:var(--g500);}
.focus{padding:24px 26px; border-radius:18px; background-color:var(--ink); color:#fff;}
.focus + .focus{margin-top:10px;}
.focus h4{color:#fff;}
.focus h4::before{content:'—'; margin-right:10px; color:var(--orange);}
.focus p{color:rgba(255,255,255,.6); font-size:13.5px; margin:6px 0 0;}
.cta-mini{margin:64px 0 0; padding:56px 40px; border-radius:var(--r-xl); text-align:center;}
.events-stage{padding:110px 40px; text-align:center;}
.url-card{display:inline-flex; align-items:center; padding:18px 30px; border-radius:999px; background-color:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); font-family:var(--mono); font-size:clamp(14px,2vw,20px); color:#fff; box-shadow:0 0 50px rgba(58,118,240,.3);}
.url-card .blank{color:var(--yellow); font-weight:600;}
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.pricing-panel{margin:90px 0 0; padding:70px 48px; border-radius:var(--r-xl); background-color:var(--g50); border:1px solid var(--line);}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; max-width:1020px; margin:0 auto;}
.plan{position:relative; display:flex; flex-direction:column; padding:34px 30px; border-radius:var(--r-lg); background-color:#fff; border:1px solid var(--line);}
.plan.hl{background-color:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 40px 70px -30px rgba(58,118,240,.7); transform:translateY(-12px);}
.plan .badge{position:absolute; top:22px; right:22px; padding:4px 12px; border-radius:999px; background-color:var(--yellow); color:var(--ink); font-size:12px; font-weight:700;}
.plan .pname{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--g500);}
.plan.hl .pname{color:rgba(255,255,255,.75);}
.plan .price{font-family:var(--display); font-size:42px; font-weight:800; letter-spacing:-0.05em; line-height:1.1; margin:16px 0 4px;}
.plan .price small{font-family:var(--body); font-size:14px; font-weight:400; letter-spacing:0; opacity:.6;}
.plan .pintro{font-size:13px; color:var(--g500); min-height:22px;}
.plan.hl .pintro{color:rgba(255,255,255,.8);}
.plan ul{flex:1; display:flex; flex-direction:column; gap:12px; margin:20px 0 28px; padding:22px 0 0; list-style:none; border-top:1px solid var(--line);}
.plan.hl ul{border-top-color:rgba(255,255,255,.22);}
.plan li{display:flex; gap:10px; font-size:14px; line-height:1.45;}
.plan li::before{content:'✓'; display:flex; align-items:center; justify-content:center; flex:0 0 20px; height:20px; border-radius:50%; background-color:var(--blue-soft); color:var(--blue); font-size:10px; font-weight:700;}
.plan.hl li::before{background-color:rgba(255,255,255,.2); color:#fff;}
.plan li.extra{font-weight:600;}
.plan li.extra::before{content:'+'; background-color:var(--orange-soft); color:var(--orange-d);}
.plan.hl li.extra::before{background-color:var(--yellow); color:var(--ink);}
.plan .btn{width:100%; justify-content:space-between;}

/* ---------- CASES ---------- */
.filters{position:sticky; top:92px; z-index:20; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; width:max-content; max-width:100%; margin:0 auto 44px; padding:6px; border-radius:999px; background-color:rgba(255,255,255,.88); border:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 20px 40px -30px rgba(11,11,12,.35);}
.filter{height:40px; padding:0 18px; border:0; border-radius:999px; background-color:transparent; font-family:var(--body); font-size:13.5px; font-weight:500; color:var(--g600); cursor:pointer; transition:all .25s var(--ease);}
.filter:hover{color:var(--ink); background-color:var(--g100);}
.filter[aria-pressed="true"]{background-color:var(--ink); color:#fff;}
.case-group{margin:0 0 20px; padding:44px; border-radius:var(--r-xl); background-color:#fff; border:1px solid var(--line);}
.case-group:nth-of-type(even){background-color:var(--g50);}
.case-group.hide{display:none;}
.cg-head{display:flex; align-items:center; gap:22px; margin:0 0 30px;}
.cg-logo{flex:0 0 84px; height:84px; padding:10px; border-radius:20px; border:1px solid var(--line); object-fit:contain; background-color:#fff;}
.cg-head h3{font-size:clamp(22px,2.4vw,32px); letter-spacing:-0.035em; margin:6px 0 0;}
.cg-head .cat{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; color:var(--orange-d);}
.cg-head .act{margin-left:auto;}
.dist-logos{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.dist-logos .logo-tile{width:auto; background-color:#fff;}
.dist-logos .logo-tile img{filter:none; opacity:1;}
.big-case{display:grid; grid-template-columns:1fr 1.1fr; gap:24px; align-items:stretch;}
.big-case .photo{position:relative; min-height:400px; border-radius:var(--r-md); overflow:hidden;}
.big-case .photo::after{content:''; position:absolute; left:0; right:0; bottom:0; height:55%; background-image:linear-gradient(0deg,rgba(11,11,12,.8),transparent);}
.big-case .photo .caption{position:absolute; left:24px; right:24px; bottom:22px; z-index:1; color:#fff; font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-0.02em; text-shadow:0 2px 14px rgba(0,0,0,.6);}
.big-case .photo .caption span{display:block; font-family:var(--body); font-size:13px; font-weight:400; opacity:.85;}
.stat-card{display:flex; flex-direction:column; justify-content:center; padding:36px; border-radius:var(--r-md); background-color:var(--ink); color:#fff;}
.stat-card .stars-row{color:var(--yellow); letter-spacing:4px;}
.stat-card .big-num{color:#fff; margin:12px 0 0;}
.stat-card p{color:rgba(255,255,255,.68); margin:16px 0 0;}
.kol-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:20px 0 0;}
.kol{padding:24px 12px; border-radius:20px; background-color:var(--g50); border:1px solid var(--line); text-align:center; transition:transform .35s var(--ease), background-color .3s;}
.kol:hover{transform:translateY(-4px); background-color:#fff;}
.kol img{display:block; width:84px; height:84px; margin:0 auto 14px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--blue);}
.kol:nth-child(2) img{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--orange);}
.kol:nth-child(3) img{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--yellow);}
.kol:nth-child(4) img{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--ink);}
.kol:nth-child(5) img{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--orange-d);}
.kol strong{display:block; font-size:14px;}
.kol span{font-size:12px; color:var(--g500);}
.quote-inline{padding:32px 36px; border-radius:var(--r-md); background-color:var(--blue-soft);}
.quote-inline blockquote{margin:0; font-size:clamp(18px,2vw,24px); font-weight:600; letter-spacing:-0.02em; line-height:1.6; color:var(--ink);}
.quote-inline blockquote em{font-style:normal; color:var(--blue);}
.quote-inline .who{display:flex; align-items:center; gap:12px; margin:22px 0 0;}
.quote-inline .av{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background-color:var(--blue); color:#fff; font-weight:700;}
.quote-inline strong{display:block; font-size:14px;}
.quote-inline .who span{font-size:12.5px; color:var(--g500);}
.site-link{display:flex; justify-content:space-between; align-items:center; gap:14px; margin:0 0 18px; padding:20px 22px; border-radius:18px; background-color:var(--ink); color:#fff; transition:background-color .3s;}
.site-link:hover{background-color:var(--blue-d);}
.site-link .ic{display:flex; align-items:center; justify-content:center; flex:0 0 40px; height:40px; border-radius:50%; background-color:var(--yellow); color:var(--ink); font-weight:700;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch;}
.form-card{padding:48px; border-radius:var(--r-xl); background-color:#fff; border:1px solid var(--line); box-shadow:0 50px 90px -60px rgba(11,11,12,.45);}
.form-card h1{font-size:clamp(38px,4.6vw,64px); margin:22px 0 16px;}
.field{margin:0 0 16px;}
.field label{display:block; margin:0 0 8px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--g500);}
.field input,.field textarea,.field select{display:block; width:100%; padding:15px 18px; border:1px solid var(--line); border-radius:14px; background-color:var(--g50); font-family:var(--body); font-size:15px; color:var(--ink); transition:border-color .25s, box-shadow .25s, background-color .25s;}
.field textarea{min-height:150px; resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; background-color:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(58,118,240,.14);}
.submit{width:100%; height:58px; font-size:15.5px;}
.submit:disabled{opacity:.55; cursor:not-allowed;}
.form-msg{display:none; margin:16px 0 0; padding:14px 16px; border-radius:14px; font-size:14px;}
.form-msg.ok{display:block; background-color:var(--blue-soft); color:var(--blue-d);}
.form-msg.err{display:block; background-color:var(--orange-soft); color:var(--orange-d);}
.contact-img{position:relative; min-height:680px; border-radius:var(--r-xl); overflow:hidden;}
.contact-img::before{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-image:linear-gradient(180deg,transparent 40%,rgba(11,11,12,.7));}
.contact-img .glass{position:absolute; left:22px; right:22px; bottom:22px; display:flex; align-items:center; gap:16px; padding:12px; border-radius:22px; background-color:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:#fff;}
.contact-img .glass img{display:block; width:120px; height:80px; border-radius:14px; object-fit:cover;}
.contact-img .glass a{display:flex; flex:1; align-items:center; justify-content:space-between; gap:10px; font-size:15px; font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.4);}
.contact-img .glass a span{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background-color:#fff; color:var(--ink); text-shadow:none;}
.contact-img .label{position:absolute; top:24px; left:24px; z-index:1; padding:6px 12px; border-radius:999px; background-color:rgba(255,255,255,.9); color:var(--ink);}
.info-list{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:18px 0 0;}
.info{padding:28px; border-radius:var(--r-lg); background-color:var(--g50); border:1px solid var(--line);}
.info:nth-child(1){background-color:var(--blue); color:#fff; border-color:var(--blue);}
.info:nth-child(1) .k{color:rgba(255,255,255,.7);}
.info:nth-child(3){background-image:linear-gradient(140deg,var(--orange),var(--yellow)); border-color:transparent;}
.info:nth-child(3) .k{color:rgba(11,11,12,.6);}
.info .k{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--g500);}
.info .v{display:block; margin:30px 0 0; font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:-0.02em; word-break:break-all;}

/* ---------- FOOTER ---------- */
.footer-zone{padding:40px 14px 14px;}
.cta-card{position:relative; overflow:hidden; padding:90px 72px; border-radius:var(--r-xl); color:#fff; isolation:isolate;}
.cta-card h2{max-width:720px; color:#fff; font-size:clamp(36px,5vw,72px); font-weight:800;}
.cta-card p{max-width:560px; margin:20px 0 34px; color:rgba(255,255,255,.75); font-size:17px;}
.cta-card .ring{position:absolute; right:-120px; top:50%; z-index:-1; width:520px; height:520px; margin-top:-260px; border-radius:50%; border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 0 80px rgba(244,197,66,.25);}
.cta-card .ring::after{content:''; position:absolute; top:60px; left:60px; right:60px; bottom:60px; border-radius:50%; border:1px dashed rgba(255,255,255,.18);}
.site-footer{position:relative; margin:14px 0 0; padding:70px 64px 34px; border-radius:var(--r-xl); background-color:var(--ink); color:rgba(255,255,255,.7); font-size:14px; overflow:hidden; isolation:isolate;}
.foot-grid{display:grid; grid-template-columns:1.3fr 2fr; gap:60px; align-items:center;}
.monogram{position:relative; display:flex; align-items:center; justify-content:center; width:min(340px,100%); aspect-ratio:1/1;}
.monogram span{font-family:var(--display); font-size:300px; font-weight:800; letter-spacing:-0.1em; line-height:1; background-image:linear-gradient(160deg,#FFE7A8 0%,var(--yellow) 25%,var(--orange) 60%,var(--orange-d) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 40px rgba(217,119,87,.55)); transform:skewX(-8deg);}
.monogram::before{content:''; position:absolute; width:70%; height:70%; border-radius:50%; background-color:rgba(217,119,87,.35); filter:blur(60px); z-index:-1;}
.foot-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.foot-col h5{margin:0 0 16px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45);}
.foot-col a{display:block; margin:0 0 11px; color:#fff; font-size:13.5px; line-height:1.5; transition:color .2s;}
.foot-col a:hover{color:var(--yellow); text-decoration:underline;}
.foot-tag{margin:18px 0 0; color:rgba(255,255,255,.6);}
.copyright{display:flex; justify-content:space-between; gap:20px; margin:50px 0 0; padding:24px 0 0; border-top:1px solid rgba(255,255,255,.1); font-size:12.5px; color:rgba(255,255,255,.5);}
.copyright .right{text-align:right;}
.copyright a{text-decoration:underline; text-underline-offset:3px;}

/* modal + to top + skip */
.modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:500; display:none; align-items:center; justify-content:center; padding:24px; background-color:rgba(11,11,12,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.modal.open{display:flex;}
.modal-box{position:relative; width:100%; max-width:780px; overflow:hidden; border-radius:var(--r-lg); background-color:#fff; animation:pop .35s var(--ease);}
.modal-box img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background-color:var(--g100);}
.modal-body{padding:26px 30px 30px;}
.modal-body h3{font-size:19px; line-height:1.6; letter-spacing:-0.01em; margin:0 0 20px;}
.modal-close{position:absolute; top:14px; right:14px; z-index:2; width:44px; height:44px; border:0; border-radius:50%; background-color:#fff; font-size:22px; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.25);}
@keyframes pop{from{opacity:0; transform:scale(.96) translateY(10px);}to{opacity:1; transform:none;}}
.to-top{position:fixed; right:22px; bottom:22px; z-index:280; width:52px; height:52px; border:0; border-radius:50%; background-image:linear-gradient(140deg,var(--orange),var(--yellow)); color:var(--ink); font-size:18px; font-weight:700; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px); box-shadow:0 14px 30px -10px rgba(217,119,87,.7);}
.to-top.show{opacity:1; pointer-events:auto; transform:none;}
.skip{position:absolute; left:-999px; top:8px; z-index:999; padding:10px 16px; border-radius:10px; background-color:#fff;}
.skip:focus{left:8px;}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}

/* ==========================================================
   5. 視覺效果 Effects
   border-radius / box-shadow / text-shadow / opacity /
   transition / cursor: pointer
   ========================================================== */
.btn{transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:scale(.97);}
.to-top{transition:opacity .3s var(--ease), transform .3s var(--ease);}
.lift{transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;}
.lift:hover{transform:translateY(-5px); box-shadow:0 28px 50px -30px rgba(11,11,12,.35); border-color:rgba(11,11,12,.18);}
.clickable{cursor:pointer;}
.dim{opacity:.6;}
.shadow-soft{box-shadow:0 40px 80px -50px rgba(11,11,12,.5);}
.glow-text{text-shadow:0 0 40px rgba(244,197,66,.45);}
.reveal{opacity:1; transform:none;}
html.js .reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
html.js .reveal.in{opacity:1; transform:none;}
html.js .reveal.instant{transition:none;}
.depth i{animation:focusIn 1.6s var(--ease) both;}
.depth i:nth-child(2){animation-delay:.12s;} .depth i:nth-child(3){animation-delay:.24s;} .depth i:nth-child(4){animation-delay:.36s;}
@keyframes focusIn{from{filter:blur(18px); opacity:0; transform:translateX(18px);}}
.float-card,.phone{animation:bob 6s ease-in-out infinite;}
.fc-2{animation-delay:-2s;} .fc-3{animation-delay:-4s;} .phone{animation-delay:-1s;}
@keyframes bob{0%,100%{translate:0 0;}50%{translate:0 -10px;}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
  html.js .reveal{opacity:1; transform:none;}
  .marquee-track{animation:none;}
}

/* ===== Responsive 響應式 ===== */
@media (max-width:1100px){
  .nav-links a i{display:none;}
  .nav-links a{padding:8px 11px;}
  .svc-body{grid-template-columns:1fr;}
  .deck{height:440px; max-width:440px;}
  .grid-4,.steps,.feat-grid{grid-template-columns:repeat(2,1fr);}
  .kol-grid{grid-template-columns:repeat(3,1fr);}
  .foot-grid{grid-template-columns:1fr;}
  .monogram{width:220px;}
  .monogram span{font-size:200px;}
  .creator{grid-template-columns:280px 1fr;}
  .video-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .nav-links,.nav-cta .btn{display:none;}
  .menu-btn{display:block;}
  .split,.sub-brand,.sub-brand.rev,.big-case,.creator,.contact-grid,.grid-2,.pain-wrap,.acc-wrap,.about-grid,.mv-grid,.reel,.twin{grid-template-columns:1fr;}
  .sub-brand.rev .sb-media{order:0;}
  .pain-aside,.acc-aside,.creator-card{position:static;}
  .stats,.grid-3,.plans,.values,.info-list{grid-template-columns:1fr 1fr;}
  .stats .stat:first-child{grid-column:1 / -1;}
  .journey{grid-template-columns:repeat(3,1fr); row-gap:26px;}
  .journey::before{display:none;}
  .hero{min-height:0; padding-bottom:0;}
  .phone{width:140px; right:6px; bottom:20px;}
  .fc-3{display:none;}
  .fan{height:auto; display:flex; flex-direction:column; gap:18px; padding:0 0 60px;}
  .rv{position:relative; left:auto !important; right:auto !important; bottom:auto; width:100%; transform:none !important;}
  .rv.ghost{display:none;}
  .voices{min-height:0;}
  .ecom-hero,.cta-card,.events-stage{padding:56px 30px;}
  .site-footer{padding:56px 30px 30px;}
  .foot-cols{grid-template-columns:1fr 1fr;}
  .plan.hl{transform:none;}
  .filters{border-radius:24px;}
  .carousel3d{height:300px;}
  .c3{width:200px; height:260px;}
  .c3-2{margin-left:-100px;}
}
@media (max-width:600px){
  .wrap,.wrap-sm{padding:0 18px;}
  .sec{padding:80px 0;}
  .stage{margin:0 8px; border-radius:28px;}
  .navbar{top:10px; width:calc(100% - 20px); height:58px;}
  .hero,.brand-stage{padding-top:120px; margin-top:8px;}
  .hero-visual{margin-top:46px; padding:0 10px;}
  .screen{transform:none; border-radius:18px 18px 0 0;}
  .phone{width:104px; border-radius:22px; padding:5px; right:-4px; bottom:12px;}
  .phone img{border-radius:18px;}
  .phone .ph-cap{display:none;}
  .float-card{padding:8px 12px 8px 8px; font-size:11px;}
  .float-card img,.fc-icon{width:32px; height:32px;}
  .fc-1{left:0; top:-26px;} .fc-2{display:none;}
  .play-btn{height:52px; padding:0 18px 0 6px;}
  .play-btn b{width:40px; height:40px;}
  .stats,.grid-3,.grid-4,.steps,.feat-grid,.plans,.values,.info-list,.svc-items,.dist-logos,.video-grid,.foot-cols{grid-template-columns:1fr;}
  .prod-row{grid-template-columns:repeat(3,1fr); gap:8px;}
  .kol-grid{grid-template-columns:repeat(2,1fr);}
  .acc-inner ul{grid-template-columns:1fr;}
  .case-group,.sub-brand,.pricing-panel,.journey-panel,.form-card{padding:26px 20px;}
  .cg-head{flex-wrap:wrap;}
  .cg-head .act{margin-left:0;}
  .row-head{flex-direction:column; align-items:flex-start;}
  .row-head .right{text-align:left;}
  .tall{min-height:520px; padding:28px;}
  .stat{min-height:220px;}
  .deck{height:420px;}
  .dc{width:240px; height:340px;}
  .dc-2{left:30px;} .dc-3{left:60px;}
  .deck-dots{left:60px;}
  .dc-3 .dk-num{font-size:64px;}
  .dc-3 .dk-name{font-size:28px;}
  .copyright{flex-direction:column;}
  .copyright .right{text-align:left;}
  .footer-zone{padding:30px 8px 8px;}
  .contact-img{min-height:420px;}
  .carousel3d{height:260px;}
  .c3{width:150px; height:210px; padding:16px;}
  .c3 strong{font-size:15px;}
  .c3 .logo-box{height:70px;}
  .c3-2{margin-left:-75px;}
  .c3-2 img{width:80px; height:80px;}
  .mv{padding:30px; min-height:280px;}
  .mv .bigletter{font-size:160px;}
  .filters{width:100%; top:80px;}
  .filter{padding:0 12px;}
}
/* FOOTER-V3 START */
.footer-zone{padding:40px 14px 0; background-image:linear-gradient(to bottom,rgba(241,241,238,0) 0%,#F1F1EE 100%); overflow:hidden;}
.cta-card.cta-fade{background-color:transparent; background-image:radial-gradient(ellipse 95% 100% at 50% 100%, #0B0B0C 58%, rgba(11,11,12,0) 100%); text-align:center; padding:200px 32px 120px; border-radius:48px;}
.cta-card.cta-fade h2{margin-left:auto; margin-right:auto; font-size:clamp(32px,4.2vw,56px);}
.cta-card.cta-fade p{margin:18px auto 34px;}
.cta-btn{display:inline-flex; align-items:center; gap:12px; height:56px; padding:0 30px; border:2px solid #fff; border-radius:18px; color:#fff; font-size:16px; font-weight:600; transition:background-color .25s, color .25s;}
.cta-btn:hover{background-color:#fff; color:var(--ink);}

.ft{position:relative; margin:56px 14px 0; padding:56px 56px 34px; border-radius:48px; background-color:#fff; color:var(--g600); font-size:14px; overflow:hidden; isolation:isolate; box-shadow:0 40px 90px -40px rgba(11,11,12,.22), 0 0 0 1px rgba(11,11,12,.04);}
.ft-grid{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:64px; align-items:start;}
.ft-brand{max-width:560px;}
.ft-logo{display:inline-flex; align-items:center;}
.ft-logo img{display:block; height:48px; width:auto; max-width:220px; object-fit:contain;}
.ft-tag{margin:48px 0 0; max-width:none; color:var(--g500); font-size:15px; line-height:1.8;}
.ft-social{display:flex; gap:18px; margin:28px 0 0;}
.ft-social a{display:inline-flex; width:28px; height:28px; color:var(--ink); transition:color .2s, transform .2s;}
.ft-social a:hover{color:var(--blue); transform:translateY(-2px);}
.ft-social svg{width:100%; height:100%;}
.ft-cols{display:grid; grid-template-columns:repeat(4,auto); gap:48px;}
.ft-col h5{margin:0 0 18px; font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-0.01em; color:var(--ink);}
.ft-col a{display:block; margin:0 0 10px; color:var(--ink-2); font-size:15px; line-height:1.5; transition:color .2s;}
.ft-col a:hover{color:var(--blue); text-decoration:underline; text-underline-offset:4px;}
.ft-bottom{display:flex; justify-content:space-between; gap:20px; margin:56px 0 0; padding:24px 0 0; border-top:1px solid var(--g200); font-size:12.5px; color:var(--ink-2);}
.ft-bottom a{text-decoration:underline; text-underline-offset:3px;}
.ft-bottom a:hover{color:var(--blue);}
.foot-mark{height:.62em; overflow:hidden; margin:28px 0 0; font-family:var(--display); font-size:clamp(64px,17.5vw,300px); font-weight:800; line-height:1; letter-spacing:-0.05em; text-align:center; white-space:nowrap; color:rgba(11,11,12,.09); -webkit-mask-image:linear-gradient(to bottom,#000 20%,transparent 100%); mask-image:linear-gradient(to bottom,#000 20%,transparent 100%); user-select:none;}
@media (max-width:1280px){
  .ft-grid{grid-template-columns:1fr; gap:48px;}
  .ft-cols{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:900px){
  .footer-zone{padding:30px 8px 0;}
  .cta-card.cta-fade{padding:150px 24px 90px; border-radius:36px;}
  .ft{margin:40px 8px 0; padding:40px 28px 28px; border-radius:36px;}
  .ft-cols{grid-template-columns:1fr 1fr; gap:36px 24px;}
}
@media (max-width:600px){
  .cta-card.cta-fade{padding:130px 20px 80px;}
  .ft-tag{margin-top:32px;}
  .ft-cols{grid-template-columns:1fr;}
  .ft-bottom{flex-direction:column; gap:8px;}
}
/* FOOTER-V3 END */

.ft-logo img{height:144px !important; max-width:none !important;}

.ft-logo img{height:144px !important; max-width:none !important; margin:-30px 0 -140px 0 !important;}
.ft-tag{margin-top:20px !important;}

.ft-grid{margin-bottom:0 !important; padding-bottom:0 !important;}
.ft-social{margin-top:16px !important; margin-bottom:0 !important;}
.ft-bottom{margin-top:24px !important; padding-top:20px !important;}

@media (min-width:1025px){
  .ft-grid{grid-template-columns:auto auto !important; justify-content:space-between !important; column-gap:96px !important;}
  .ft-brand{max-width:560px;}
  .ft-cols{justify-self:end !important; grid-template-columns:repeat(2,auto) !important; column-gap:56px !important;}
}

.ft-logo{display:block !important; width:256px !important; height:57px !important; overflow:hidden !important;}
.ft-logo img{height:144px !important; width:auto !important; max-width:none !important; margin:-44px 0 0 -0px !important;}
.ft-tag{margin-top:20px !important;}

.ft{background:#0e0e0e !important; color:rgba(255,255,255,.7) !important; margin-top:12px !important;}
.ft-col h5{color:rgba(255,255,255,.5) !important;}
.ft-col a{color:rgba(255,255,255,.9) !important;}
.ft-col a:hover{color:#fff !important;}
.ft-tag{color:rgba(255,255,255,.72) !important;}
.ft-social a, .ft-social svg{color:#fff !important;}
.ft-bottom{border-top:1px solid rgba(255,255,255,.12) !important; color:rgba(255,255,255,.55) !important;}
.ft-bottom a{color:rgba(255,255,255,.75) !important;}
.ft-bottom a:hover{color:#fff !important;}

.ft{border-radius:0 !important; width:100vw !important; margin:0 calc(50% - 50vw) 0 !important; padding:56px max(24px, calc((100vw - 1200px)/2)) 32px !important; background:#0e0e0e !important; box-shadow:none !important;}
.foot-mark{display:none !important;}

.ft{position:relative !important; z-index:2 !important; margin-top:-48px !important; padding-top:104px !important;}

.footer-zone{overflow-x:clip !important;}
.cta-card{width:100vw !important; max-width:none !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; border-radius:0 !important;}
.ft{margin-top:0 !important; padding-top:56px !important;}

/* HEADER-MEGA START */
.ann,.mega{display:none;}
.hd-row{display:contents;}
.hd-ghost{display:none !important;}
@media (min-width:1025px){
  .navbar{top:0 !important; left:0 !important; transform:none !important; width:100% !important; height:auto !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:0 !important; padding:0 !important; border-radius:0 !important; background:#fff !important; border:0 !important; border-bottom:1px solid #ececec !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important;}
  .navbar.scrolled{background:#fff !important; box-shadow:0 10px 30px -20px rgba(0,0,0,.3) !important;}
  .ann{display:flex; align-items:center; justify-content:center; gap:12px; height:40px; background:#0b0b0c; color:#fff; font-size:13px; border-radius:0 0 16px 16px; overflow:hidden; transition:height .3s ease, opacity .3s ease;}
  .ann a{color:rgba(255,255,255,.75); text-decoration:underline; text-underline-offset:3px;}
  .navbar.scrolled .ann{height:0; opacity:0;}
  .hd-row{display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px; width:min(1280px, calc(100% - 64px)); margin:0 auto;}
  .navbar .logo{color:#111 !important;}
  .navbar .logo small{color:rgba(0,0,0,.45) !important;}
  .navbar nav{flex:1; margin-left:40px; align-self:stretch; display:flex; align-items:center;}
  .navbar .nav-links{height:100%; gap:2px;}
  .navbar .nav-links li{height:100%; display:flex; align-items:center;}
  .navbar .nav-links a{height:40px; color:#222 !important; font-weight:600; background:transparent; letter-spacing:.02em; border-radius:10px;}
  .navbar .nav-links a i{display:none !important;}
  .navbar .nav-links a:hover,.navbar .nav-links a.active{background:#f3f3f3 !important; color:#111 !important;}
  .navbar .has-mega>a::after{content:""; width:6px; height:6px; margin-left:6px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg) translateY(-2px); opacity:.55;}
  .navbar .nav-cta{gap:10px;}
  .navbar .nav-cta .btn{height:44px !important; padding:0 18px !important; border-radius:12px !important; font-size:14px; font-weight:600;}
  .navbar .nav-cta .btn-white{background:#0b0b0c !important; color:#fff !important;}
  .navbar .hd-ghost{display:inline-flex !important; background:#fff !important; color:#111 !important; border:1px solid #e3e3e3 !important;}
  .mega{display:grid; grid-template-columns:1fr 1fr 1.05fr; gap:12px; position:absolute; top:100%; left:50%; width:min(1180px, calc(100% - 64px)); padding:28px; background:#fff; border:1px solid #ececec; border-radius:0 0 28px 28px; box-shadow:0 40px 70px -35px rgba(0,0,0,.4); opacity:0; visibility:hidden; transform:translate(-50%,8px); transition:opacity .2s ease, transform .2s ease, visibility .2s;}
  .navbar:has(.has-mega:hover) .mega,.navbar:has(.has-mega:focus-within) .mega,.navbar .mega:hover{opacity:1; visibility:visible; transform:translate(-50%,0);}
  .mg-col h6{margin:0 0 12px 14px; font-size:12px; font-weight:600; letter-spacing:.08em; color:#8a8a8a;}
  .mg-item{display:flex; gap:14px; padding:14px; border-radius:14px; color:#111; transition:background-color .2s;}
  .mg-item:hover{background:#f5f5f5;}
  .mg-ic{flex:none; width:22px; height:22px; margin-top:2px; color:#555;}
  .mg-ic svg{width:22px; height:22px; display:block;}
  .mg-item b{display:block; font-size:15px; font-weight:600; line-height:1.4;}
  .mg-item small{display:block; margin-top:4px; font-size:13.5px; line-height:1.55; color:#6b6b6b;}
  .mg-card{display:flex; flex-direction:column; padding:22px; border-radius:20px; background:#f3f3f3; color:#111;}
  .mg-card-top{display:flex; justify-content:space-between; font-size:12px; letter-spacing:.06em; color:#666;}
  .mg-card-top em{font-style:normal;}
  .mg-card strong{margin-top:16px; font-size:18px;}
  .mg-card-txt{margin-top:8px; font-size:13.5px; line-height:1.6; color:#555;}
  .mg-card-vis{position:relative; flex:1; min-height:150px; margin-top:16px; border-radius:14px; background:radial-gradient(circle at 30% 30%, #3a3a3d, #0b0b0c 70%);}
  .mg-play{position:absolute; inset:0; margin:auto; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.2); color:#fff; font-size:15px;}
}
/* HEADER-MEGA END */

/* HEADER-LOGO START */
.navbar .logo{display:block !important; width:227px !important; height:28px !important; overflow:hidden !important; padding:0 !important; flex:none;}
.navbar .logo .logo-img{display:block; height:132px; width:auto; max-width:none; margin:-52px 0 0 -5px;}
/* HEADER-LOGO END */

/* HDR-FADE START */
.navbar{transition:opacity .35s ease, visibility .35s ease, background-color .35s ease, box-shadow .35s ease !important;}
.navbar.hdr-hide{opacity:0 !important; visibility:hidden !important; pointer-events:none !important;}
/* HDR-FADE END */

/* TESTI-CAROUSEL CSS */
.tcar{position:relative; max-width:1020px; margin:56px auto 0; text-align:left;}
.tslide{display:none; grid-template-columns:1fr 1.25fr; gap:16px; padding:14px; border-radius:26px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(120deg,#171d2b 0%,#232c42 55%,#3b4968 100%); box-shadow:0 40px 80px -40px rgba(0,0,0,.7);}
.tslide.active{display:grid; animation:tfade .5s ease;}
@keyframes tfade{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.t-left{display:flex; flex-direction:column; justify-content:space-between; gap:40px; padding:20px 16px 14px 18px; min-height:320px;}
.t-brand{display:flex; align-items:center; gap:12px; font-size:20px; font-weight:700; color:#fff; line-height:1.35;}
.t-dot{flex:none; width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #4d8dff, #1d5be0);}
.t-person{display:flex; align-items:center; gap:16px;}
.t-av{flex:none; width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#e8e8ea,#bfc3cc); color:#222; font-size:24px; font-weight:700;}
.t-person strong{display:block; font-size:22px; color:#fff;}
.t-person small{display:block; margin-top:4px; font-size:14px; color:rgba(255,255,255,.55);}
.t-right{display:flex; flex-direction:column; justify-content:space-between; gap:28px; padding:44px 44px 36px; border-radius:20px; background:#0f131c;}
.t-stars{font-size:22px; letter-spacing:6px; color:#e0a45a;}
.t-right blockquote{margin:0; font-size:20px; line-height:1.75; color:rgba(255,255,255,.55);}
.t-right blockquote em{font-style:normal; font-weight:600; color:#fff;}
.t-btn{align-self:flex-start; display:inline-flex; align-items:center; height:40px; padding:0 20px; border-radius:999px; background:#fff; color:#111; font-size:14px; font-weight:600;}
.t-btn:hover{background:#e9e9ec;}
.t-nav{display:flex; justify-content:center; gap:26px; margin-top:34px;}
.t-arrow{width:44px; height:44px; border:0; border-radius:50%; background:linear-gradient(135deg,#3a4457,#232a38); color:#fff; font-size:24px; line-height:1; cursor:pointer; transition:background .2s, transform .2s;}
.t-arrow:hover{background:linear-gradient(135deg,#4a566c,#2d3647); transform:scale(1.06);}
@media (max-width:860px){
  .tslide{grid-template-columns:1fr;}
  .t-left{min-height:0; gap:28px;}
  .t-right{padding:28px 24px;}
  .t-right blockquote{font-size:17px;}
}

/* TESTI-GOLD START */
.voices h2 .depth,.voices h2 .depth i{filter:none !important; opacity:1 !important; text-shadow:none !important; -webkit-text-stroke:0 !important; transform:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important; animation:none !important; transition:none !important;}
.tslide{background:linear-gradient(120deg,#b98524 0%,#e2b550 50%,#f4dc92 100%) !important; border:1px solid rgba(255,235,170,.7) !important; box-shadow:0 40px 80px -40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.5) !important;}
.t-brand{color:#2b1d04 !important;}
.t-dot{background:#2b1d04 !important;}
.t-person strong{color:#2b1d04 !important;}
.t-person small{color:rgba(43,29,4,.7) !important;}
img.t-av{object-fit:cover; border:3px solid #fff; background:#fff; box-shadow:0 6px 16px -6px rgba(0,0,0,.35);}
.t-right{background:#fff !important;}
.t-stars{color:#d9961c !important;}
.t-right blockquote{color:#6b6b70 !important;}
.t-right blockquote em{color:#111 !important;}
.t-btn{background:#111 !important; color:#fff !important;}
.t-btn:hover{background:#2a2a2e !important;}
.t-arrow{background:linear-gradient(135deg,#e2b550,#b98524) !important; color:#2b1d04 !important;}
.t-arrow:hover{background:linear-gradient(135deg,#f0cb74,#c9942e) !important;}
/* TESTI-GOLD END */

/* TESTI-V3 START */
.stage.voices{background:#fff !important; background-image:none !important; color:#111 !important;}
.stage.voices .glow{display:none !important;}
.stage.voices::before,.stage.voices::after{display:none !important;}
.voices .label{color:#a97a1c !important;}
.voices h2,.voices h2 .depth,.voices h2 .depth i{color:#111 !important; -webkit-text-fill-color:#111 !important;}
.tcar{display:grid; grid-template-columns:minmax(0,1fr);}
.tslide{display:grid !important; grid-area:1 / 1; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(18px); animation:none !important; transition:opacity .7s ease, transform .7s ease, visibility .7s;}
.tslide.active{opacity:1; visibility:visible; pointer-events:auto; transform:none;}
.t-nav{grid-area:2 / 1;}
.t-brand{width:fit-content; max-width:100%; padding:8px 16px 8px 10px; border-radius:999px; background:rgba(255,255,255,.62); box-shadow:0 6px 16px -10px rgba(60,40,0,.5);}
.t-dot{width:24px !important; height:24px !important; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.2);}
.tslide:nth-of-type(1) .t-dot{background:linear-gradient(135deg,#5b9bff,#1f55e0) !important;}
.tslide:nth-of-type(2) .t-dot{background:linear-gradient(135deg,#ff9a6b,#e0502a) !important;}
/* TESTI-V3 END */

/* TESTI-V4 START */
.tcar{margin-top:76px !important;}
.tslide{visibility:visible !important; pointer-events:none; transform-origin:50% 0; z-index:1; opacity:.55; transform:translateY(-26px) scale(.93) !important; filter:saturate(.85); transition:transform .9s cubic-bezier(.22,.8,.24,1), opacity .9s ease, filter .9s ease, z-index .9s step-end !important;}
.tslide.active{z-index:2; opacity:1; pointer-events:auto; transform:none !important; filter:none; transition:transform .9s cubic-bezier(.22,.8,.24,1), opacity .9s ease, filter .9s ease, z-index 0s !important;}
.t-nav{gap:14px !important; margin-top:36px !important;}
.t-pt{width:14px; height:14px; padding:0; border:2px solid #b98524; border-radius:50%; background:transparent; cursor:pointer; transition:background .3s, transform .3s;}
.t-pt:hover{transform:scale(1.2);}
.t-pt.on{background:#b98524;}
/* TESTI-V4 END */

/* TESTI-V5 START */
.tcar{touch-action:pan-y; outline:none;}
.tcar:focus-visible{outline:2px solid #b98524; outline-offset:10px; border-radius:28px;}
.tslide{filter:none !important; will-change:transform, opacity; backface-visibility:hidden; -webkit-font-smoothing:antialiased;}
.tslide .t-stars,.tslide .t-right blockquote,.tslide .t-btn{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease;}
.tslide.active .t-stars{opacity:1; transform:none; transition-delay:.25s;}
.tslide.active .t-right blockquote{opacity:1; transform:none; transition-delay:.35s;}
.tslide.active .t-btn{opacity:1; transform:none; transition-delay:.45s;}
.tslide:not(.active) .t-left{opacity:.0; transition:opacity .4s ease;}
.tslide.active .t-left{opacity:1; transition:opacity .6s ease .2s;}
@media (prefers-reduced-motion: reduce){
  .tslide,.tslide *{transition:none !important; animation:none !important;}
}
/* TESTI-V5 END */

/* HERO-LIGHT START */
.stage.hero{background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 55%,#eef3ff 100%) !important; background-image:none !important; color:#111 !important; border:1px solid #e8ecf5 !important; box-shadow:0 40px 90px -50px rgba(30,60,140,.35) !important;}
.stage.hero::before,.stage.hero::after{display:none !important;}
.stage.hero .glow{display:none !important;}
.stage.hero .g-blue{display:block !important; opacity:.22 !important;}
.hero .stage-in{display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; gap:0 !important;}
.hero .hero-copy{display:flex !important; flex-direction:column !important; align-items:center !important; max-width:860px !important; margin:0 auto !important; text-align:center !important;}
.hero .chip{background:#eef2ff !important; color:#2748c9 !important; border:1px solid #dbe4ff !important; box-shadow:none !important;}
.hero .chip b{background:#2563eb !important; color:#fff !important;}
.hero .hero-title{color:#111 !important; text-align:center !important; font-size:clamp(40px,5.4vw,80px) !important; line-height:1.15 !important;}
.hero .hero-title .l2{display:block !important;}
.hero .hero-title .depth,.hero .hero-title .depth i{color:#1f55e0 !important; -webkit-text-fill-color:#1f55e0 !important; filter:none !important; opacity:1 !important; text-shadow:none !important; -webkit-text-stroke:0 !important; transform:none !important; animation:none !important; font-style:italic !important; background:none !important;}
.hero .lead{color:#5b6272 !important; max-width:640px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important;}
.hero .hero-actions{justify-content:center !important;}
.hero .hero-actions .btn-white{background:#2563eb !important; color:#fff !important; border:0 !important; box-shadow:0 10px 24px -10px rgba(37,99,235,.7) !important;}
.hero .hero-actions .btn-ghost{background:#fff !important; color:#111 !important; border:1px solid #dfe3ee !important;}
.hero .hero-meta{justify-content:center !important; color:#6b7280 !important;}
.hero .hero-meta .avatars img{border-color:#fff !important;}
.hero .scroll-down{color:#8a90a0 !important;}
.hero .float-card{background:rgba(255,255,255,.94) !important; color:#111 !important; border:1px solid #e8ecf5 !important; box-shadow:0 18px 40px -18px rgba(30,60,140,.35) !important; backdrop-filter:none !important;}
.hero .float-card strong{color:#111 !important;}
.hero .float-card span{color:#6b7280 !important;}
@media (min-width:901px){
  .hero .hero-visual{position:relative !important; display:block !important; width:min(960px,100%) !important; height:auto !important; margin:56px auto 0 !important; transform:none !important;}
  .hero .screen{position:relative !important; inset:auto !important; width:100% !important; max-width:none !important; height:auto !important; aspect-ratio:16/9; margin:0 !important; transform:none !important; border-radius:28px !important; border:1px solid #e3e8f3 !important; background:#fff !important; box-shadow:0 50px 90px -50px rgba(20,40,110,.45) !important; overflow:hidden;}
  .hero .screen video{width:100% !important; height:100% !important; object-fit:cover;}
  .hero .phone{position:absolute !important; inset:auto !important; left:-3% !important; bottom:-9% !important; width:clamp(120px,14vw,180px) !important; transform:rotate(-6deg) !important; z-index:3;}
  .hero .float-card{position:absolute !important; inset:auto !important; z-index:4;}
  .hero .fc-1{left:-5% !important; top:10% !important;}
  .hero .fc-2{right:-5% !important; top:18% !important;}
  .hero .fc-3{right:4% !important; bottom:-7% !important;}
}
@media (max-width:900px){
  .hero .phone,.hero .float-card{display:none !important;}
  .hero .hero-visual{margin-top:36px !important;}
}
/* HERO-LIGHT END */

/* HERO-ASSETS START */
.hero .screen{position:relative !important;}
.hero .screen-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; z-index:1; display:block;}
.hero .screen-bar{position:relative; z-index:2; background:#17181b !important;}
.hero .screen video,.hero .screen .play-btn{display:none !important;}
.hero .scroll-down{display:none !important;}
.hero .phone .ph-cap{display:none !important;}
.hero .phone img{width:100%; height:100%; object-fit:cover; display:block;}
/* HERO-ASSETS END */

/* HERO-CLEAN START */
.hero .screen{aspect-ratio:auto !important; height:auto !important; background:#fff !important; border:1px solid #e3e8f3 !important; border-radius:24px !important; overflow:hidden !important;}
.hero .screen-bar{display:none !important;}
.hero .screen-img{position:relative !important; inset:auto !important; width:100% !important; height:auto !important; object-fit:initial !important; display:block;}
.hero .float-card{display:none !important;}
.hero .phone{width:clamp(100px,11vw,150px) !important; left:-2% !important; bottom:-5% !important; transform:rotate(-3deg) !important; filter:drop-shadow(0 24px 30px rgba(20,30,70,.28));}
/* HERO-CLEAN END */

/* PARTNERS-CLEAN START */
.partners,.partners .marquee{background:#fff !important;}
.partners .logo-tile{background:none !important; background-color:transparent !important; border:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;}
.partners .logo-tile img{filter:none !important; opacity:1 !important; mix-blend-mode:multiply; background:transparent !important;}
/* PARTNERS-CLEAN END */

/* PARTNERS-TIGHT START */
.partners .marquee-track{gap:0 !important;}
.partners .logo-tile{flex:none !important; width:auto !important; min-width:0 !important; height:auto !important; padding:0 28px !important; display:flex; align-items:center; justify-content:center;}
.partners .logo-tile img{width:auto !important; height:52px !important; max-width:190px !important; object-fit:contain !important;}
/* PARTNERS-TIGHT END */

/* SV2-CSS */
.sv2{background:#fff;color:#111;padding:88px 0 72px;}
.sv2-head{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;}
.sv2-head-l{max-width:640px;}
.sv2-head h2{font-size:clamp(30px,4vw,52px);line-height:1.15;letter-spacing:-.02em;margin:0 0 14px;font-weight:800;}
.sv2-head p{color:#6b6b72;font-size:15px;line-height:1.7;margin:0;}
.sv2-head-r{display:flex;gap:36px;align-items:center;padding-top:10px;}
.sv2-badge{display:flex;gap:12px;align-items:center;font-size:14px;line-height:1.4;}
.sv2-badge small{display:block;color:#6b6b72;font-size:12.5px;}
.sv2-avs img{width:38px;height:38px;border-radius:50%;object-fit:cover;display:block;}
.sv2-star{font-size:22px;}
.sv2-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:36px 0 22px;}
.sv2-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:0;background:transparent;color:#55555c;font:inherit;font-size:14px;cursor:pointer;text-decoration:none;transition:.2s;}
.sv2-tab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
.sv2-tab em{font-style:normal;font-size:11px;background:#ff7a1a;color:#fff;border-radius:999px;padding:1px 7px;}
.sv2-tab:hover{background:#f1f2f5;}
.sv2-tab.on{background:#2563eb;color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.35);}
.sv2-event{margin-left:auto;color:#2563eb;background:#eef3ff;}
.sv2-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:18px;align-items:stretch;min-height:420px;}
.sv2-card{border-radius:28px;padding:30px;background:linear-gradient(160deg,#dcebff 0%,#f4f8ff 55%,#fff 100%);}
.sv2-card h3{font-size:19px;margin:0 0 18px;font-weight:700;}
.sv2-chips{display:flex;flex-wrap:wrap;gap:10px;}
.sv2-chip{border:0;font:inherit;font-size:13.5px;background:#fff;color:#222;border-radius:14px;padding:9px 14px;cursor:pointer;box-shadow:0 2px 8px rgba(20,40,90,.06);transition:.2s;text-align:left;}
.sv2-chip:hover,.sv2-chip.on{background:#2563eb;color:#fff;}
.sv2-media{border-radius:28px;overflow:hidden;position:relative;background:#e9eefb;min-height:320px;}
.sv2-media img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;}
.sv2-ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;background:linear-gradient(135deg,#2563eb,#7aa7ff 55%,#ffd08a);color:#fff;}
.sv2-ph b{font-size:72px;line-height:1;font-weight:800;opacity:.9;}
.sv2-ph span{font-size:16px;letter-spacing:.04em;opacity:.95;}
.sv2-r{display:flex;flex-direction:column;}
.sv2-en{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#2563eb;margin-bottom:8px;font-weight:600;}
.sv2-r p{font-size:14px;line-height:1.75;color:#333;margin:0 0 14px;}
.sv2-detail{background:#fff;border-radius:14px;padding:12px 14px;color:#2563eb !important;min-height:48px;}
.sv2-btn{margin-top:auto;display:block;text-align:center;background:#2563eb;color:#fff;text-decoration:none;border-radius:12px;padding:13px;font-size:14px;font-weight:600;box-shadow:0 6px 16px rgba(37,99,235,.3);}
.sv2-btn:hover{background:#1d4fd0;}
@media(max-width:900px){.sv2-grid{grid-template-columns:1fr;}.sv2-media{min-height:260px;}.sv2-event{margin-left:0;}.sv2-head-r{flex-direction:column;align-items:flex-start;gap:14px;}}

/* SV3-CSS */
.sv2-grid{display:grid !important;grid-template-columns:minmax(300px,0.8fr) 1.6fr !important;gap:20px !important;min-height:0 !important;align-items:stretch;}
.sv3-intro{display:flex;flex-direction:column;}
.sv3-intro h3{font-size:24px;line-height:1.35;margin:0 0 14px;}
.sv3-intro p{font-size:14.5px;line-height:1.8;color:#333;margin:0 0 24px;}
.sv3-intro .sv2-btn{margin-top:auto;}
.sv3-items{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-content:start;}
.sv3-item{background:linear-gradient(160deg,#eef4ff,#fff);border:1px solid #e3ebfb;border-radius:20px;padding:20px 22px;transition:.2s;}
.sv3-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(37,99,235,.12);border-color:#bcd0fa;}
.sv3-item h4{margin:0 0 8px;font-size:16px;color:#1d4fd0;}
.sv3-item p{margin:0;font-size:13.5px;line-height:1.7;color:#555;}
@media(max-width:900px){.sv2-grid{grid-template-columns:1fr !important;}.sv3-items{grid-template-columns:1fr;}}

/* SV-AQUA */
.sv2{background:linear-gradient(180deg,#ffffff 0%,#e3f6fc 18%,#c9eefa 50%,#e3f6fc 82%,#ffffff 100%) !important;position:relative;overflow:hidden;}
.sv2::before,.sv2::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}
.sv2::before{width:520px;height:520px;left:-160px;top:12%;background:rgba(120,210,240,.45);}
.sv2::after{width:460px;height:460px;right:-140px;bottom:10%;background:rgba(150,225,245,.4);}
.sv2 .wrap{position:relative;z-index:1;}
.sv2-tab:hover{background:rgba(255,255,255,.65);}
.sv2-event{background:rgba(255,255,255,.75) !important;}
.sv2 .sv2-card{background:rgba(255,255,255,.6) !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.sv3-item{background:rgba(255,255,255,.78) !important;border-color:rgba(255,255,255,.9) !important;}

/* BF-CSS */
.bf{background:#fff;padding:80px 0;}
.bf-frame{max-width:1120px;margin:0 auto;padding:16px;border-radius:48px;background:linear-gradient(160deg,#cfeefb,#bfe3f6);box-shadow:0 30px 80px rgba(90,170,210,.3);}
.bf-in{border-radius:34px;background:linear-gradient(180deg,#ffffff 0%,#eef9fd 55%,#dff3fb 100%);padding:70px 32px 60px;text-align:center;}
.bf-row{display:flex;justify-content:center;align-items:flex-start;gap:14px;margin-bottom:38px;}
.bf-card{width:clamp(54px,11vw,128px);aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#eaf6fc,#d3ecf8);box-shadow:0 8px 22px rgba(80,150,190,.18);-webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,#000 68%,transparent 100%);animation:bfFloat 5s ease-in-out infinite;}
.bf-card img{width:100%;height:100%;object-fit:cover;display:block;}
.bf-card:nth-child(1){margin-top:34px;animation-delay:0s;}
.bf-card:nth-child(2){margin-top:-6px;animation-delay:.5s;}
.bf-card:nth-child(3){margin-top:24px;animation-delay:1s;}
.bf-card:nth-child(4){margin-top:6px;animation-delay:1.5s;}
.bf-card:nth-child(5){margin-top:30px;animation-delay:2s;}
.bf-card:nth-child(6){margin-top:0;animation-delay:2.5s;}
@keyframes bfFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@media(prefers-reduced-motion:reduce){.bf-card{animation:none;}}
.bf-label{display:inline-block;font-size:12px;letter-spacing:.14em;color:#2a8fb8;background:rgba(255,255,255,.8);border-radius:999px;padding:5px 14px;margin-bottom:14px;font-weight:600;}
.bf-title{font-size:clamp(28px,3.6vw,44px);line-height:1.2;letter-spacing:-.01em;margin:0 0 20px;font-weight:800;color:#0f1f3d;}
.bf-in p{max-width:600px;margin:0 auto 12px;font-size:14.5px;line-height:1.85;color:#2b3a4f;}
.bf-btn{display:inline-block;margin-top:22px;background:#12255a;color:#fff;text-decoration:none;border-radius:999px;padding:13px 30px;font-size:14px;font-weight:600;box-shadow:0 10px 24px rgba(18,37,90,.3);transition:.2s;}
.bf-btn:hover{transform:translateY(-2px);background:#0c1a45;}
@media(max-width:640px){.bf-row{gap:8px;}.bf-in{padding:48px 18px 44px;}.bf-frame{border-radius:32px;padding:10px;}}

/* BF-FIX */
.bf .bf-frame,.bf .bf-in,.bf .bf-in *{transform:none;}
.bf .bf-card{transform:none;}
.bf .bf-in p,.bf .bf-title,.bf .bf-label,.bf .bf-btn{
  position:static !important; display:block; height:auto !important; min-height:0 !important; max-height:none !important;
  width:auto !important; float:none !important; opacity:1 !important; filter:none !important; mix-blend-mode:normal !important;
  letter-spacing:normal !important; word-spacing:normal !important; text-indent:0 !important; white-space:normal !important;
  writing-mode:horizontal-tb !important; direction:ltr !important; unicode-bidi:normal !important;
  -webkit-text-fill-color:currentColor !important; background-clip:border-box !important; -webkit-background-clip:border-box !important;
  text-shadow:none !important; animation:none !important; transition:none;
}
.bf .bf-in p{max-width:600px; margin:0 auto 12px !important; padding:0 !important; line-height:1.85 !important; font-size:14.5px !important; color:#2b3a4f !important; background:none !important;}
.bf .bf-title{margin:0 0 20px !important; line-height:1.2 !important; color:#0f1f3d !important; background:none !important;}
.bf .bf-label{display:inline-block !important; margin:0 0 14px !important; line-height:1.4 !important;}
.bf .bf-btn{display:inline-block !important; margin-top:22px !important; line-height:1.4 !important; color:#fff !important; white-space:nowrap !important; padding:13px 30px !important;}
.bf .bf-btn::before,.bf .bf-btn::after,.bf .bf-in p::before,.bf .bf-in p::after{content:none !important; display:none !important;}
.bf .bf-row{height:auto !important; min-height:0 !important; margin:0 0 38px !important; align-items:flex-start !important;}
.bf .bf-card{flex:0 0 auto !important; height:auto !important; aspect-ratio:4/5; animation:bfFloat 5s ease-in-out infinite !important;}
.bf .bf-card img{position:static !important; width:100% !important; height:100% !important; object-fit:cover;}

/* BF-FIX2 */
.bf .bf-in{padding:76px 32px 64px !important; position:relative; overflow:hidden;}
.bf .bf-in::before{content:"";position:absolute;left:50%;top:38%;width:620px;height:620px;transform:translateX(-50%);background:radial-gradient(circle,rgba(130,215,245,.35),transparent 65%);pointer-events:none;}
.bf .bf-in > *{position:relative;}
.bf .bf-card{width:clamp(60px,12vw,150px) !important; border-radius:22px !important;}
.bf .bf-row{gap:16px !important; margin:0 0 46px !important;}
.bf .bf-copy{display:flex !important; flex-direction:column; align-items:center; gap:0; max-width:620px; margin:0 auto;}
.bf .bf-copy .bf-label{margin:0 0 18px !important; font-weight:600 !important;}
.bf .bf-copy .bf-title{margin:0 0 22px !important; font-size:clamp(30px,4vw,48px) !important; font-weight:800 !important; letter-spacing:-.01em !important;}
.bf .bf-hl{background:linear-gradient(transparent 60%, #a6e0f4 60%); padding:0 6px; border-radius:4px;}
.bf .bf-copy p.bf-lead{font-size:17px !important; line-height:1.8 !important; font-weight:500 !important; color:#1c3050 !important; margin:0 0 12px !important; max-width:560px;}
.bf .bf-copy p.bf-sub{font-size:14.5px !important; line-height:1.85 !important; font-weight:400 !important; color:#5c6d84 !important; margin:0 !important; max-width:540px;}
.bf .bf-tags{display:flex !important; flex-wrap:wrap; justify-content:center; gap:10px; list-style:none; padding:0 !important; margin:28px 0 30px !important;}
.bf .bf-tags li{background:rgba(255,255,255,.85); border:1px solid #cfe9f5; color:#2a6d8f; font-size:13px; font-weight:600; border-radius:999px; padding:8px 16px; display:flex; align-items:center; gap:7px; box-shadow:0 4px 12px rgba(80,160,200,.12);}
.bf .bf-tags li::before{content:""; width:7px; height:7px; border-radius:50%; background:#4fc0ea; display:block;}
.bf .bf-copy .bf-btn{margin:0 !important; font-weight:600 !important; padding:15px 36px !important; font-size:15px !important;}

/* BF-FIX3 */
.bf .bf-tags{display:flex !important; flex-wrap:wrap; justify-content:center; gap:10px; margin:28px 0 30px !important; padding:0 !important; list-style:none !important; width:auto !important; height:auto !important;}
.bf .bf-tags .bf-tag{
  display:inline-flex !important; align-items:center; gap:8px; flex:0 0 auto !important;
  width:auto !important; min-width:0 !important; height:auto !important; position:static !important;
  white-space:nowrap !important; letter-spacing:.04em !important; word-spacing:normal !important; text-indent:0 !important;
  writing-mode:horizontal-tb !important; transform:none !important; overflow:visible !important;
  font-size:13.5px !important; font-weight:600 !important; line-height:1.4 !important; color:#2a6d8f !important;
  -webkit-text-fill-color:currentColor !important; text-shadow:none !important;
  background:rgba(255,255,255,.88) !important; border:1px solid #cfe9f5 !important; border-radius:999px !important;
  padding:9px 18px !important; box-shadow:0 4px 12px rgba(80,160,200,.12);
}
.bf .bf-tags .bf-tag::before{content:"" !important; display:block !important; flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:#4fc0ea; position:static !important;}

/* BF-GOLD */
.bf .bf-frame{background:linear-gradient(160deg,#f6e3a8,#e6c15c 60%,#f3d98a) !important; box-shadow:0 30px 80px rgba(200,155,40,.32) !important;}
.bf .bf-in{background:linear-gradient(180deg,#ffffff 0%,#fffaf0 55%,#fdf0d0 100%) !important;}
.bf .bf-in::before{background:radial-gradient(circle,rgba(240,200,90,.38),transparent 65%) !important;}
.bf .bf-card{background:linear-gradient(160deg,#fff6df,#f6e4b0) !important; box-shadow:0 8px 22px rgba(190,145,40,.22) !important;}
.bf .bf-label{color:#a8791a !important; background:rgba(255,255,255,.9) !important;}
.bf .bf-hl{background:linear-gradient(transparent 60%, #f3d37a 60%) !important;}
.bf .bf-copy p.bf-lead{color:#33270f !important;}
.bf .bf-copy p.bf-sub{color:#7a6a49 !important;}
.bf .bf-title{color:#2a1f08 !important;}
.bf .bf-tags .bf-tag{color:#8a6310 !important; border-color:#efd9a0 !important; background:rgba(255,255,255,.92) !important; box-shadow:0 4px 12px rgba(200,155,40,.16) !important;}
.bf .bf-tags .bf-tag::before{background:#e0a92a !important;}
.bf .bf-copy .bf-btn{background:linear-gradient(135deg,#f2cf6a,#d9a228) !important; color:#2a1f08 !important; box-shadow:0 10px 24px rgba(200,150,30,.4) !important;}
.bf .bf-copy .bf-btn:hover{background:linear-gradient(135deg,#f6d87f,#e0ac32) !important;}

/* ECO-CSS */
.eco{padding:96px 0;background:linear-gradient(115deg,#f2ede6 0%,#d9d3c9 42%,#9a9b96 100%);}
.eco-head{text-align:center;max-width:720px;margin:0 auto 52px;}
.eco-label{display:inline-block;font-size:12px;letter-spacing:.14em;color:#6b5f4c;margin-bottom:14px;}
.eco-head h2{font-size:clamp(26px,3.4vw,42px);line-height:1.25;margin:0 0 12px;color:#1c1a17;font-weight:700;}
.eco-head p{margin:0;color:#5f594f;font-size:15px;}
.eco-pair{display:grid;grid-template-columns:repeat(2,minmax(0,430px));gap:30px;justify-content:center;}
.eco-frame{background:#efe9e0;border-radius:36px;padding:14px 14px 12px;box-shadow:0 30px 60px rgba(40,35,25,.22);}
.eco-card{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;padding:26px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;isolation:isolate;}
.eco-a{background:radial-gradient(ellipse 45% 55% at 52% 46%,#0b2236 0%,transparent 70%),linear-gradient(180deg,#a9c3d4 0%,#6d95b1 30%,#f0a85c 62%,#e48a3c 78%,#1b3a54 100%);}
.eco-a::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 7px,rgba(0,0,0,.14) 7px 14px);mix-blend-mode:overlay;}
.eco-a::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 45%,rgba(8,24,40,.65) 100%);}
.eco-b{background:radial-gradient(ellipse 50% 45% at 82% 38%,rgba(255,255,255,.28),transparent 70%),radial-gradient(ellipse 60% 40% at 90% 90%,rgba(255,255,255,.14),transparent 70%),#141414;}
.eco-top{display:flex;justify-content:space-between;align-items:center;}
.eco-mark{display:flex;opacity:.92;}
.eco-site{font-size:15px;letter-spacing:.04em;opacity:.9;}
.eco-bot h3{font-family:"Noto Serif TC","Songti TC","Source Han Serif TC",Georgia,serif;font-weight:500;font-size:clamp(24px,2.6vw,32px);line-height:1.3;margin:0 0 14px;color:#fff;}
.eco-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px;opacity:.88;}
.eco-list li{padding-left:14px;position:relative;}
.eco-list li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:#f0c77a;}
.eco-kol{display:flex;align-items:center;gap:14px;margin:0 0 18px;}
.eco-avs{display:flex;}
.eco-avs img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #141414;margin-left:-9px;}
.eco-avs img:first-child{margin-left:0;}
.eco-n{font-family:Georgia,serif;font-size:26px;line-height:1;}
.eco-n small{display:block;font-family:inherit;font-size:12px;opacity:.7;margin-top:4px;font-family:sans-serif;}
.eco-go{display:flex;justify-content:space-between;align-items:center;color:#fff;text-decoration:none;font-size:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.28);transition:.25s;}
.eco-go:hover{padding-right:6px;}
.eco-go svg{flex:none;}
.eco-ic{display:flex;justify-content:space-between;align-items:center;padding:14px 8px 4px;color:#111;}
.eco-ic span{display:flex;gap:14px;}
@media(max-width:860px){.eco-pair{grid-template-columns:minmax(0,430px);}}

/* ECO-FIX */
.eco{background:linear-gradient(180deg,#ffffff 0%,#fffaf0 45%,#fdf0d0 100%) !important;}
.eco .eco-label{display:inline-block;font-size:12px;letter-spacing:.14em;color:#a8791a !important;background:rgba(255,255,255,.9);border-radius:999px;padding:5px 14px;font-weight:600;margin-bottom:16px;box-shadow:0 2px 8px rgba(200,155,40,.12);}
.eco .eco-head h2{font-family:inherit !important;color:#2a1f08 !important;font-weight:800 !important;letter-spacing:-.01em;}
.eco .eco-head p{color:#7a6a49 !important;}
.eco .eco-frame{background:#fff !important;border:1px solid #f1e2b6;box-shadow:0 24px 60px rgba(200,155,40,.22) !important;}
.eco .eco-a{background:radial-gradient(ellipse 45% 55% at 52% 46%,rgba(90,55,5,.55) 0%,transparent 70%),linear-gradient(180deg,#fbe9b5 0%,#f2c867 38%,#e0a52c 66%,#8a5e12 100%) !important;}
.eco .eco-a::after{background:linear-gradient(180deg,transparent 40%,rgba(60,38,5,.7) 100%) !important;}
.eco .eco-b{background:radial-gradient(ellipse 55% 45% at 85% 30%,rgba(240,200,90,.4),transparent 70%),radial-gradient(ellipse 60% 40% at 10% 100%,rgba(240,200,90,.18),transparent 70%),#2a1f08 !important;}
.eco .eco-bot h3{font-family:inherit !important;font-weight:800 !important;letter-spacing:-.01em;font-size:clamp(26px,2.8vw,34px) !important;}
.eco .eco-site{font-family:inherit;font-weight:600;letter-spacing:.1em;font-size:12px !important;text-transform:uppercase;}
.eco .eco-list{font-size:14px !important;opacity:1 !important;}
.eco .eco-list li{font-weight:500;}
.eco .eco-n{font-family:inherit !important;font-weight:800;}
.eco .eco-avs img{border-color:#2a1f08 !important;}
.eco .eco-go{font-weight:600;border-top-color:rgba(255,255,255,.35) !important;}
.eco .eco-ic{color:#8a6310 !important;}

/* EC2-CSS */
.ec2{background:linear-gradient(180deg,#ffffff 0%,#fffaf0 55%,#ffffff 100%);padding:96px 0 88px;overflow:hidden;}
.ec2-head{text-align:center;max-width:720px;margin:0 auto 52px;}
.ec2-label{display:inline-block;font-size:13px;letter-spacing:.14em;color:#c18a14;font-weight:700;margin-bottom:14px;}
.ec2-head h2{font-size:clamp(30px,4.2vw,54px);line-height:1.18;letter-spacing:-.01em;color:#2a1f08;font-weight:800;margin:0 0 16px;}
.ec2-head p{margin:0;font-size:15.5px;line-height:1.85;color:#6d5f3f;}
.ec2-head p b{color:#2a1f08;}
.ec2-stage{--w:min(620px,66vw);position:relative;height:calc(var(--w)*.62);max-width:1200px;margin:0 auto;}
.ec2-card{position:absolute;left:50%;top:50%;width:var(--w);height:calc(var(--w)*.56);border-radius:28px;overflow:hidden;cursor:pointer;background:linear-gradient(135deg,#fbe9b5,#f2c867 55%,#d9a228);box-shadow:0 24px 60px rgba(170,120,20,.28);transition:transform .7s cubic-bezier(.22,.8,.24,1),opacity .6s,filter .6s;will-change:transform;}
.ec2-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;}
.ec2-card .ec2-ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 9%;color:#2a1f08;}
.ec2-ph b{font-size:clamp(28px,5vw,60px);font-weight:800;line-height:1.05;letter-spacing:-.02em;}
.ec2-ph span{font-size:clamp(14px,1.8vw,20px);margin-top:10px;opacity:.7;font-weight:600;}
.ec2-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(30,20,0,.35) 100%);pointer-events:none;}
.ec2-tag{position:absolute;left:18px;top:18px;z-index:2;background:#2a1f08;color:#f6d77f;font-size:13px;font-weight:700;border-radius:999px;padding:9px 18px;}
.ec2-card[data-d="0"]{transform:translate(-50%,-50%) scale(1);z-index:5;}
.ec2-card[data-d="-1"]{transform:translate(calc(-50% - var(--w)*.72),-50%) scale(.8);z-index:3;opacity:.55;filter:saturate(.8);}
.ec2-card[data-d="1"]{transform:translate(calc(-50% + var(--w)*.72),-50%) scale(.8);z-index:3;opacity:.55;filter:saturate(.8);}
.ec2-card[data-d="far"]{transform:translate(-50%,-50%) scale(.6);z-index:1;opacity:0;pointer-events:none;}
.ec2-cap{display:flex;align-items:center;justify-content:center;gap:clamp(24px,18vw,300px);margin-top:44px;}
.ec2-cap-t{text-align:center;min-width:240px;}
.ec2-cap-t h3{margin:0 0 6px;font-size:21px;font-weight:700;color:#2a1f08;}
.ec2-cap-t h3 i{font-style:normal;color:#d9a228;}
.ec2-cap-t p{margin:0;font-size:14.5px;color:#6d5f3f;}
.ec2-arr{border:0;background:none;color:#d9a228;font-size:34px;line-height:1;cursor:pointer;padding:6px 12px;transition:.2s;}
.ec2-arr:hover{transform:scale(1.2);color:#b3811a;}
.ec2-dots{display:flex;justify-content:center;gap:8px;margin-top:22px;}
.ec2-dots button{border:0;padding:0;width:10px;height:10px;border-radius:999px;background:#e9dcb8;cursor:pointer;transition:.35s;}
.ec2-dots button.on{width:34px;background:#d9a228;}
.ec2-cta{text-align:center;margin-top:52px;}
.ec2-cta p{margin:0 0 18px;font-size:16px;font-weight:700;color:#2a1f08;}
.ec2-btn{display:inline-block;background:linear-gradient(135deg,#f6d46a,#e0a92a);color:#2a1f08;text-decoration:none;font-weight:700;font-size:16px;border-radius:999px;padding:17px 46px;box-shadow:0 12px 28px rgba(200,150,30,.38);transition:.25s;}
.ec2-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(200,150,30,.48);}
@media(max-width:700px){.ec2-stage{--w:78vw;}.ec2-card[data-d="-1"]{transform:translate(calc(-50% - var(--w)*.8),-50%) scale(.75);}.ec2-card[data-d="1"]{transform:translate(calc(-50% + var(--w)*.8),-50%) scale(.75);}.ec2-cap{gap:12px;}}

/* EC2-COLOR */
.ec2{background:#fff !important;}
.ec2-label{color:#1a8cff !important;}
.ec2-head h2{color:#07304a !important;}
.ec2-head p{color:#33495c !important;}
.ec2-head p b{color:#07304a !important;}
.ec2-card{background:linear-gradient(135deg,#eaf3ff,#cfe3ff 60%,#a9cdfb) !important;box-shadow:0 22px 54px rgba(30,70,130,.22) !important;}
.ec2-card::after{background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(10,30,60,.28) 100%) !important;}
.ec2-ph{color:#07304a !important;}
.ec2-tag{background:#2f3b66 !important;color:#fff !important;font-weight:600 !important;}
.ec2-cap-t h3{color:#07304a !important;}
.ec2-cap-t h3 i{color:#1a8cff !important;}
.ec2-cap-t p{color:#33495c !important;}
.ec2-arr{color:#1a8cff !important;}
.ec2-arr:hover{color:#0b6fd6 !important;}
.ec2-dots button{background:#d3dbe6 !important;}
.ec2-dots button.on{background:#1a8cff !important;}
.ec2-cta p{color:#07304a !important;}
.ec2-btn{background:#fdc22a !important;color:#07304a !important;box-shadow:0 10px 24px rgba(253,194,42,.45) !important;}
.ec2-btn:hover{background:#ffcd45 !important;box-shadow:0 14px 30px rgba(253,194,42,.55) !important;}

/* EC2-LOGO */
.ec2-tag{display:none !important;}
.ec2-logo-row{display:flex;justify-content:center;align-items:center;height:64px;margin-top:34px;}
.ec2-logo-row img{height:56px;width:auto;max-width:200px;object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(10,40,80,.14);padding:4px;}
.ec2-cap{margin-top:18px !important;}
.ec2-cap-t p{font-size:13.5px !important;}

/* CTA-AQUA */
.cta-card.cta-fade{background:linear-gradient(180deg,#ffffff 0%,#e3f6fc 18%,#bfeaf8 55%,#9adcf1 100%) !important;background-image:linear-gradient(180deg,#ffffff 0%,#e3f6fc 18%,#bfeaf8 55%,#9adcf1 100%) !important;}
.cta-card.cta-fade::before,.cta-card.cta-fade::after{background:none !important;box-shadow:none !important;}
.cta-card.cta-fade .glow{display:none !important;}
.cta-card.cta-fade h1,.cta-card.cta-fade h2,.cta-card.cta-fade h3,.cta-card.cta-fade p,.cta-card.cta-fade .label{color:#07304a !important;}
.cta-card.cta-fade .btn,.cta-card.cta-fade a.btn{color:#07304a !important;border-color:#07304a !important;}
.cta-card.cta-fade .btn:hover{background:rgba(255,255,255,.6) !important;}

/* FOOTER-AQUA */
footer{background:linear-gradient(180deg,#9adcf1 0%,#c7eefa 40%,#ffffff 100%) !important;background-image:linear-gradient(180deg,#9adcf1 0%,#c7eefa 40%,#ffffff 100%) !important;color:#07304a !important;}
footer::before,footer::after{background:none !important;}
footer h1,footer h2,footer h3,footer h4,footer h5,footer p,footer li,footer span,footer small,footer div{color:#07304a;}
footer a{color:#07304a !important;}
footer a:hover{color:#1a8cff !important;}
footer svg{filter:brightness(0) opacity(.85);}
footer hr,footer [class*="bottom"],footer [class*="copy"]{border-color:rgba(7,48,74,.18) !important;}
footer *{border-color:rgba(7,48,74,.18);}

/* FOOTER-AQUA2 */
body footer.ft{background:linear-gradient(180deg,#9adcf1 0%,#c7eefa 40%,#ffffff 100%) !important;background-image:linear-gradient(180deg,#9adcf1 0%,#c7eefa 40%,#ffffff 100%) !important;background-color:#c7eefa !important;color:#07304a !important;}
body footer.ft::before,body footer.ft::after{background:none !important;}
body footer.ft > *,body footer.ft > * > *{background:transparent !important;background-image:none !important;}
body footer.ft h1,body footer.ft h2,body footer.ft h3,body footer.ft h4,body footer.ft h5,body footer.ft p,body footer.ft li,body footer.ft span,body footer.ft small,body footer.ft div,body footer.ft label{color:#07304a !important;}
body footer.ft h4,body footer.ft h5,body footer.ft [class*="title"],body footer.ft [class*="head"]{color:#0b6fd6 !important;}
body footer.ft a{color:#07304a !important;}
body footer.ft a:hover{color:#1a8cff !important;}
body footer.ft svg{filter:none !important;color:#07304a !important;}
body footer.ft svg [fill]:not([fill="none"]){fill:#07304a !important;}
body footer.ft svg [stroke]:not([stroke="none"]){stroke:#07304a !important;}
body footer.ft *{border-color:rgba(7,48,74,.18) !important;}



/* OV-CSS */
#cases{background:#dfeafa;color:#111;}
#cases .ov{max-width:1240px;margin:0 auto;padding:28px 20px 90px;display:flex;flex-direction:column;gap:24px;}
#cases .ov *{box-sizing:border-box;}
#cases .ov em{font-style:normal;}
#cases .ov-panel{background:#fff;border-radius:36px;padding:44px;}
#cases .ov-h,#cases .ov-h2{font-size:clamp(28px,3.6vw,46px);line-height:1.18;font-weight:500;letter-spacing:-.01em;margin:0 0 20px;color:#111;}
#cases .ov-h em,#cases .ov-h2 em{display:block;font-weight:300;color:#4a78f0;}
#cases .ov-h3{font-size:clamp(22px,2.4vw,30px);line-height:1.25;font-weight:600;margin:0 0 14px;}
#cases .ov-center{text-align:center;}
#cases .ov-tag{display:inline-block;font-size:12px;font-weight:600;color:#4a78f0;background:#eaf0ff;border-radius:999px;padding:6px 14px;margin-bottom:16px;}
#cases .ov-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;background:#fff;color:#111;font:inherit;font-weight:600;font-size:14px;border-radius:999px;padding:13px 26px;text-decoration:none;}
#cases .ov-btn-dark,#cases .ov-act .vlink{display:inline-flex;background:#111 !important;color:#fff !important;border-radius:999px;padding:13px 26px;font-weight:600;font-size:14px;text-decoration:none;}

#cases .ov-hero{position:relative;overflow:hidden;border-radius:40px;padding:84px 32px 76px;text-align:center;color:#fff;background:radial-gradient(ellipse 28% 18% at 14% 78%,rgba(255,255,255,.9),transparent 70%),radial-gradient(ellipse 30% 20% at 86% 70%,rgba(255,255,255,.85),transparent 70%),radial-gradient(ellipse 40% 16% at 50% 100%,rgba(255,255,255,.9),transparent 70%),linear-gradient(180deg,#3f7bf0 0%,#7ba9f7 55%,#c9defc 100%);}
#cases .ov-chip{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:6px 16px;font-size:13px;font-weight:600;margin-bottom:26px;}
#cases .ov-chip b{background:#fff;color:#3f7bf0;border-radius:999px;padding:2px 9px;font-size:11px;}
#cases .ov-hero h1{font-size:clamp(38px,6vw,78px);line-height:1.12;font-weight:500;letter-spacing:-.02em;margin:0 0 22px;color:#fff;}
#cases .ov-hero h1 em{font-weight:300;opacity:.95;}
#cases .ov-hero > p{max-width:600px;margin:0 auto 32px;font-size:16px;line-height:1.85;opacity:.95;}
#cases .ov-hero-act{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;}
#cases .ov-hero .ov-btn{background:#111;color:#fff;}
#cases .ov-rate{display:flex;align-items:center;gap:12px;font-size:13px;text-align:left;line-height:1.4;}
#cases .ov-rate b{display:block;font-size:15px;}
#cases .ov-avs{display:flex;}
#cases .ov-avs img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-10px;background:#cfd8e6;}
#cases .ov-avs img:first-child{margin-left:0;}

#cases .ov-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;background:#fff;border-radius:36px;padding:20px;}
#cases .ov-stat{display:flex;align-items:center;gap:20px;border-radius:24px;padding:26px 28px;}
#cases .ov-stat i{flex:none;width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:24px;}
#cases .ov-stat b{display:block;font-size:clamp(30px,3.4vw,44px);line-height:1.05;font-weight:600;}
#cases .ov-stat span{font-size:13px;opacity:.85;}
#cases .ov-blue{background:#3b4de6;color:#fff;}
#cases .ov-lime{background:#d9f76a;color:#1c2400;}
#cases .ov-lime i{background:rgba(0,0,0,.08);}
#cases .ov-dark{background:#262626;color:#fff;}

#cases .ov-filterbar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:34px 44px;}
#cases .ov-filterbar .ov-h{margin:0;}
#cases .filters{display:flex;flex-wrap:wrap;gap:10px;}
#cases .filter{border:0;background:#eef2fa;color:#222;font:inherit;font-size:14px;font-weight:600;border-radius:999px;padding:11px 20px;cursor:pointer;transition:.2s;}
#cases .filter:hover{background:#dfe7f6;}
#cases .filter[aria-pressed="true"]{background:#111;color:#fff;}

#cases .ov-trust{text-align:center;}
#cases .ov-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:8px;}
#cases .ov-logos .logo-tile{background:#f4f7fc;border-radius:22px;height:104px;display:flex;align-items:center;justify-content:center;padding:18px;}
#cases .ov-logos .logo-tile img{max-height:58px;max-width:100%;width:auto;object-fit:contain;}

#cases .ov-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch;}
#cases .ov-media{position:relative;display:flex;align-items:center;background:#fff;}
#cases .ov-media .vcard{width:100%;}
#cases .ov-badge{position:absolute;right:22px;bottom:22px;background:#3b4de6;color:#fff;border-radius:20px;padding:14px 20px;display:flex;flex-direction:column;font-size:12px;box-shadow:0 14px 30px rgba(59,77,230,.35);}
#cases .ov-badge i{font-style:normal;color:#ffd45c;letter-spacing:2px;font-size:12px;}
#cases .ov-badge b{font-size:30px;line-height:1.1;}
#cases .ov-info p{color:#555;line-height:1.9;font-size:14.5px;margin:0 0 18px;}
#cases .ov-pillrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
#cases .ov-pillchip{background:#eef3ff;color:#2d4fc4;font-size:13px;font-weight:600;border-radius:999px;padding:8px 15px;}
#cases .ov-pillchip:nth-child(2n){background:#e4f6ec;color:#17784a;}
#cases .ov-pillchip:nth-child(3n){background:#fff1e0;color:#a4570e;}
#cases .ov-facts{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
#cases .ov-facts li{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;}
#cases .ov-facts i{font-style:normal;font-size:22px;}

#cases .ov-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
#cases .ov-feat p{color:#555;line-height:1.8;font-size:14px;margin:0 0 16px;}
#cases .ov-logo{display:block;height:52px;width:auto;max-width:150px;object-fit:contain;margin-bottom:18px;}
#cases .ov-well{background:#eaf1fc;border-radius:26px;padding:20px;}
#cases .ov-stack{display:grid;gap:14px;}
#cases .ov-act{margin-top:18px;}

#cases .ov-tea{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:start;}
#cases .ov-photo .photo{min-height:260px;border-radius:26px;overflow:hidden;margin-bottom:14px;}
#cases .site-link{display:flex;justify-content:space-between;align-items:center;background:#f1f5fc;border-radius:20px;padding:16px 22px;color:#111;text-decoration:none;}
#cases .ov-sub{margin:0 0 14px;font-size:15px;font-weight:600;}
#cases .ov-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
#cases .ov-gap{margin-top:14px;}

#cases .ov-quote-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:20px;}
#cases .ov-portrait{position:relative;border-radius:28px;min-height:300px;background:linear-gradient(160deg,#d7e6ff,#b9d0fb);display:flex;align-items:center;justify-content:center;}
#cases .ov-portrait span{font-size:110px;font-weight:600;color:#fff;line-height:1;}
#cases .ov-portrait .ov-logo{position:absolute;left:18px;top:18px;background:#fff;border-radius:14px;padding:6px 10px;margin:0;}
#cases .ov-qcard{background:#f5f8fe;border-radius:28px;padding:34px 36px;display:flex;flex-direction:column;justify-content:center;gap:16px;align-items:flex-start;}
#cases .ov-stars{color:#f3b81f;letter-spacing:3px;}
#cases .ov-qcard blockquote{margin:0;font-size:clamp(18px,2vw,24px);line-height:1.7;font-weight:500;}
#cases .ov-qcard blockquote em{background:linear-gradient(transparent 62%,#d9f76a 62%);}
#cases .ov-who strong{display:block;font-size:14px;}
#cases .ov-who span{font-size:12px;color:#777;}

#cases .ov-rail p{margin:6px 0 0;color:#666;}
#cases .ov-railhead{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:24px;}
#cases .ov-railhead .ov-h2{margin:0;}
#cases .ov-railbox{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;background:#eaf1fc;border-radius:28px;padding:20px;}
#cases .ov-railbox .vcard{flex:0 0 min(290px,76vw);scroll-snap-align:start;}

#cases .vcard{display:block;background:#fff;border-radius:20px;overflow:hidden;color:#111;text-decoration:none;box-shadow:0 6px 18px rgba(30,50,100,.08);transition:transform .25s,box-shadow .25s;}
#cases .vcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(30,50,100,.16);}
#cases .vthumb{position:relative;background:#dfe6f2;}
#cases .vthumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;}
#cases .vthumb::after{content:"▶";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.94);color:#111;display:flex;align-items:center;justify-content:center;font-size:14px;padding-left:3px;box-shadow:0 6px 16px rgba(0,0,0,.2);}
#cases .vbody{padding:14px 18px 18px;}
#cases .vbody h4{margin:0 0 6px;font-size:14px;line-height:1.55;font-weight:600;color:#111;}
#cases .vbody .src{display:inline-block;font-size:11px;font-weight:600;background:#eef2fa;color:#555;border-radius:999px;padding:3px 10px;}

#cases .ov-hi{background:transparent;}
#cases .ov-hi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
#cases .case-card{position:relative;display:block;border-radius:28px;overflow:hidden;text-decoration:none;color:#111;transition:.25s;background:#fff1d6;}
#cases .case-card:nth-child(2){background:#e6defc;}
#cases .case-card:nth-child(3){background:#dcf5e6;}
#cases .case-card:nth-child(4){background:#ffe0d3;}
#cases .case-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(30,50,100,.14);}
#cases .case-card .thumb{padding:14px 14px 0;}
#cases .case-card .thumb img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;background:#dfe6f2;}
#cases .case-card .body{padding:16px 22px 24px;}
#cases .case-card .cat{font-size:12px;font-weight:600;color:#555;}
#cases .case-card .body h3{font-size:18px;line-height:1.35;margin:8px 0;font-weight:600;}
#cases .case-card .body p{margin:0;font-size:13px;color:#555;}
#cases .case-card .go{position:absolute;right:20px;top:20px;z-index:2;background:#111;color:#fff;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;}

#cases .ov-cta{position:relative;overflow:hidden;border-radius:40px;padding:84px 32px;text-align:center;color:#fff;background:radial-gradient(ellipse 30% 20% at 12% 85%,rgba(255,255,255,.9),transparent 70%),radial-gradient(ellipse 32% 22% at 88% 80%,rgba(255,255,255,.85),transparent 70%),linear-gradient(180deg,#3f7bf0 0%,#7ba9f7 60%,#c9defc 100%);}
#cases .ov-cta h2{font-size:clamp(30px,4.6vw,56px);line-height:1.2;font-weight:500;margin:0 0 16px;color:#fff;}
#cases .ov-cta p{margin:0 auto 28px;max-width:520px;opacity:.95;line-height:1.8;}
#cases .ov-cta .ov-btn{background:#111;color:#fff;}

@media(max-width:980px){
  #cases .ov-panel{padding:28px 22px;border-radius:28px;}
  #cases .ov-stats{grid-template-columns:1fr;}
  #cases .ov-split,#cases .ov-duo,#cases .ov-tea,#cases .ov-quote-in{grid-template-columns:1fr;}
  #cases .ov-logos,#cases .ov-hi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  #cases .ov-filterbar{padding:26px 22px;}
}
@media(max-width:560px){#cases .ov-grid2,#cases .ov-hi-grid{grid-template-columns:1fr;}}

/* OV-TOP */
#cases .ov{padding-top:120px;}
@media(max-width:980px){#cases .ov{padding-top:96px;}}

/* OV-TOP2 */
#cases .ov{padding-top:180px;}
@media(max-width:980px){#cases .ov{padding-top:150px;}}
/* CCTC 與乾淨世界：縮小影片、電腦版並排 */
#cases .ov-duo {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px;
  align-items: stretch;
}

#cases .ov-duo > .ov-feat {
  min-width: 0;
  padding: 30px 26px;
}

#cases .ov-duo .ov-h3 {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.35;
}

#cases .ov-duo .ov-well {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  padding: 12px;
  border-radius: 22px;
}

#cases .ov-duo .ov-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#cases .ov-duo .vcard {
  width: 100%;
  min-width: 0;
}

#cases .ov-duo .vthumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

#cases .ov-duo .vthumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cases .ov-duo .vthumb::after {
  width: 38px;
  height: 38px;
  font-size: 12px;
}

#cases .ov-duo .vbody {
  padding: 11px 13px 13px;
}

#cases .ov-duo .vbody h4 {
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  #cases .ov-duo {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  #cases .ov-duo > .ov-feat {
    padding: 26px 20px;
  }
}
/* 共用外層面板 */
#cases .ov-video-unified {
  padding: 38px;
  background: #fff;
  border-radius: 36px;
  overflow: hidden;
}

#cases .ov-video-heading {
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e6ebf3;
}

#cases .ov-video-heading .ov-h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
}

/* 移除品牌個別卡片外觀，改為面板內雙欄 */
#cases .ov-video-unified .ov-duo {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0;
  align-items: stretch;
}

#cases .ov-video-unified .ov-duo > .ov-brand {
  min-width: 0;
  margin: 0;
  padding: 0 28px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#cases .ov-video-unified .ov-duo > .ov-brand + .ov-brand {
  padding: 0 0 0 28px;
  border-left: 1px solid #e6ebf3;
}

#cases .ov-video-unified .ov-logo {
  height: 48px;
  max-width: 150px;
  object-fit: contain;
  margin-bottom: 18px;
}

#cases .ov-video-unified .ov-h3 {
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.4;
  margin-bottom: 18px;
}

#cases .ov-video-unified .ov-brand > p {
  color: #555;
  font-size: 14px;
  line-height: 1.85;
}

/* 影片保持小尺寸置中 */
#cases .ov-video-unified .ov-well {
  width: 100%;
  max-width: 360px;
  margin: 22px auto 0;
  padding: 12px;
  border-radius: 22px;
  background: #eef3fb;
}

#cases .ov-video-unified .ov-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#cases .ov-video-unified .vcard {
  width: 100%;
  min-width: 0;
}

#cases .ov-video-unified .vthumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

#cases .ov-video-unified .vthumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cases .ov-video-unified .vthumb::after {
  width: 38px;
  height: 38px;
  font-size: 12px;
}

#cases .ov-video-unified .vbody {
  padding: 11px 13px 13px;
}

#cases .ov-video-unified .vbody h4 {
  font-size: 13px;
  line-height: 1.6;
}

#cases .ov-video-unified .ov-act {
  max-width: 360px;
  margin: 20px auto 0;
}

/* 手機版在同一面板內上下排列 */
@media (max-width: 767px) {
  #cases .ov-video-unified {
    padding: 28px 20px;
    border-radius: 28px;
  }

  #cases .ov-video-heading {
    padding-bottom: 22px;
    margin-bottom: 24px;
  }

  #cases .ov-video-unified .ov-duo {
    grid-template-columns: 1fr !important;
  }

  #cases .ov-video-unified .ov-duo > .ov-brand {
    padding: 0;
  }

  #cases .ov-video-unified .ov-duo > .ov-brand + .ov-brand {
    margin-top: 30px;
    padding: 30px 0 0;
    border-left: 0;
    border-top: 1px solid #e6ebf3;
  }
}
/* 電腦版：左側加寬，右側縮窄 */
@media (min-width: 981px) {
  #cases .ov-video-unified .ov-duo {
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr) !important;
  }

  #cases .ov-video-unified .ov-duo > .ov-brand:first-child {
    padding-right: 24px;
  }

  #cases .ov-video-unified .ov-duo > .ov-brand + .ov-brand {
    padding-left: 24px;
  }

  /* 左側兩支影片並排，解除原本 360px 的寬度限制 */
  #cases .ov-video-unified .ov-brand:first-child .ov-stack {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    padding: 12px;
  }

  #cases .ov-video-unified .ov-brand:first-child .vbody {
    padding: 12px;
  }

  #cases .ov-video-unified .ov-brand:first-child .vbody h4 {
    font-size: 13px;
    line-height: 1.6;
  }

  /* 右側內容隨縮窄後的欄寬排列 */
  #cases .ov-video-unified .ov-brand + .ov-brand .ov-well,
  #cases .ov-video-unified .ov-brand + .ov-brand .ov-act {
    width: 100%;
    max-width: 300px;
  }

  #cases .ov-video-unified .ov-brand + .ov-brand .ov-h3 {
    font-size: 24px;
  }
}

/* 平板與手機：維持單欄，避免影片過小 */
@media (max-width: 980px) {
  #cases .ov-video-unified .ov-duo {
    grid-template-columns: 1fr !important;
  }

  #cases .ov-video-unified .ov-duo > .ov-brand:first-child {
    padding: 0;
  }

  #cases .ov-video-unified .ov-duo > .ov-brand + .ov-brand {
    margin-top: 30px;
    padding: 30px 0 0;
    border-left: 0;
    border-top: 1px solid #e6ebf3;
  }
}
/* 移除合併面板內，縮圖中央的播放圖示 */
#cases .ov-video-unified .vthumb::after {
  content: none !important;
  display: none !important;
}

/* 隱藏乾淨世界下方的播放按鈕與其容器 */
#cases .ov-video-unified .ov-act {
  display: none !important;
}
/* 茶香茶鄉：標題 → 完整長圖 → 全部連結 */
#cases .ov-tea.tea-wide {
  display: block;
  padding: 36px;
}

#cases .tea-wide .tea-heading {
  margin-bottom: 24px;
}

#cases .tea-wide .tea-heading .ov-h2 {
  margin-bottom: 0;
}

#cases .tea-wide .tea-banner {
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: #eef3fb;
  margin-bottom: 26px;
}

#cases .tea-wide .tea-banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* 電腦版六個連結同一排 */
#cases .tea-wide .tea-resources {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

#cases .tea-wide .tea-resources > a {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  margin: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  background: #f5f8fd;
  color: #111;
  text-decoration: none;
  box-shadow: none;
  border: 1px solid #e7edf5;
}

#cases .tea-wide .tea-resources .vthumb,
#cases .tea-wide .tea-site-art {
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden;
}

#cases .tea-wide .tea-resources .vthumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cases .tea-wide .tea-resources .vthumb::after {
  content: none !important;
  display: none !important;
}

#cases .tea-wide .tea-resources .vbody {
  padding: 12px 10px 14px;
}

#cases .tea-wide .tea-resources .vbody h4 {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

#cases .tea-wide .tea-site-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  background: #e7efdc;
  color: #355136;
  text-align: center;
}

#cases .tea-wide .tea-site-art strong {
  font-size: 17px;
}

#cases .tea-wide .tea-site-art span {
  font-size: 11px;
}

/* 平板三欄，手機兩欄，全部直接展示 */
@media (max-width: 980px) {
  #cases .ov-tea.tea-wide {
    padding: 28px 22px;
  }

  #cases .tea-wide .tea-resources {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #cases .tea-wide .tea-resources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #cases .tea-wide .tea-banner {
    border-radius: 16px;
    margin-bottom: 20px;
  }
}
#cases .ov-quote .ov-portrait {
  overflow: hidden;
  min-height: 360px;
}
#cases .ov-quote .ov-portrait .ov-photo {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: center 22%;
}
#cases .ov-quote .ov-portrait .ov-photo ~ span {
  display: none;
}
#contact .page-hero { background: #fff; padding-top: 150px; }
#contact .soft { display: none; }

/* 頂部：標題在左、說明在右 */
#contact .ct-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin: 0 0 40px;
}
#contact .ct-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}
#contact .ct-eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c9c9c9;
}
#contact .ct-head h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #14391f;
}
#contact .ct-head h1 em { font-style: normal; color: #3f9a2c; }
#contact .ct-lead {
  max-width: 400px;
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

/* 主體：左圖右表單 */
#contact .contact-grid {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: stretch;
}

/* 左：酪梨 IP 卡片 */
#contact .ct-card {
  position: relative;
  display: block;
  min-height: 560px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(165deg, #eefadc 0%, #c4e8a2 55%, #86c94a 100%);
  box-shadow: none;
}
#contact .ct-card::before { display: none; }
#contact .ct-ip {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 78%;
  max-height: 60%;
  object-fit: contain;
}
#contact .ct-card-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 90px 28px 28px;
  color: #fff;
  background: linear-gradient(to top, rgba(18,60,24,.82) 0%, rgba(18,60,24,.55) 55%, transparent 100%);
}
#contact .ct-card-text h3 { margin: 0 0 8px; font-size: 26px; font-weight: 600; color: #fff; }
#contact .ct-card-text p { margin: 0 0 18px; max-width: 360px; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.9); }
#contact .ct-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
#contact .ct-mail:hover { background: #f1f8e9; }

/* 右：灰色表單面板 */
#contact .form-card {
  max-width: none;
  margin: 0;
  padding: 32px;
  background: #f7f7f7;
  border: 0;
  border-radius: 28px;
  box-shadow: none;
}
#contact .form-card > .logo { display: none; }
#contact .form-card form { margin-top: 0 !important; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
#contact #contactForm > * { grid-column: 1 / -1; }
#contact #contactForm > .field:nth-child(2),
#contact #contactForm > .field:nth-child(3) { grid-column: auto; }

#contact .field label,
#contact .opt-title {
  display: block;
  margin: 0 0 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #111;
}
#contact .field input,
#contact .field select,
#contact .field textarea {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 15px 18px;
  box-shadow: none;
}
#contact .field input:focus,
#contact .field select:focus,
#contact .field textarea:focus {
  border-color: #3f9a2c;
  box-shadow: 0 0 0 4px rgba(63,154,44,.14);
}
#contact .field textarea { min-height: 130px; }

/* 身分選項卡 */
#contact .opt-block { margin: 2px 0 18px; }
#contact .opt-group { display: grid; gap: 10px; }
#contact .opt { position: relative; display: block; cursor: pointer; }
#contact .opt input { position: absolute; opacity: 0; pointer-events: none; }
#contact .opt-in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 56px 16px 20px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 14px;
  transition: border-color .25s, box-shadow .25s;
}
#contact .opt-in b { font-size: 15px; font-weight: 600; color: #111; }
#contact .opt-in span { font-size: 13px; color: #777; }
#contact .opt-in::after {
  content: "";
  position: absolute;
  right: 16px; top: 16px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
}
#contact .opt input:checked + .opt-in { border-color: #14391f; }
#contact .opt input:checked + .opt-in::after {
  border-color: #14391f;
  background: #14391f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 13px no-repeat;
}
#contact .opt input:focus-visible + .opt-in { box-shadow: 0 0 0 4px rgba(63,154,44,.2); }

/* 白色膠囊按鈕 + 箭頭 */
#contact .submit {
  justify-self: start;
  width: auto;
  height: 48px;
  padding: 0 24px;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  background: #fff;
  color: #111;
  box-shadow: none;
}
#contact .submit::after { content: "→"; margin-left: 8px; }
#contact .submit:hover { background: #14391f; border-color: #14391f; color: #fff; }

/* 下方資訊卡：中性白 */
#contact .info-list { margin-top: 40px; }
#contact .info:nth-child(n) {
  background: #fff;
  color: #111;
  border: 1px solid #ececec;
  border-radius: 20px;
}
#contact .info:nth-child(n) .k { color: #8a8a8a; }

@media (max-width: 980px) {
  #contact .ct-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  #contact .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  #contact .ct-card { min-height: 460px; }
  #contact .form-card { padding: 22px; }
}
@media (max-width: 560px) {
  #contact .form-card form { grid-template-columns: 1fr; }
  #contact #contactForm > .field:nth-child(2),
  #contact #contactForm > .field:nth-child(3) { grid-column: 1 / -1; }
}
#contact .ct-card { min-height: 580px; }

#contact .ct-ips {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 360px);
  aspect-ratio: 1.15 / 1;
}
#contact .ct-circle {
  position: absolute;
  display: block;
  aspect-ratio: 1 / 1;
  height: auto;
  max-width: none;
  max-height: none;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 6px solid #fff;
  box-shadow: 0 18px 34px -16px rgba(20, 57, 31, .45);
}
#contact .ct-circle.c-main  { width: 62%; left: 19%; top: 16%; z-index: 2; }
#contact .ct-circle.c-star  { width: 36%; left: 0;   top: 0;   z-index: 1; }
#contact .ct-circle.c-ghost { width: 36%; right: 0;  bottom: 0; z-index: 3; }

@media (max-width: 980px) {
  #contact .ct-card { min-height: 520px; }
}
#contact .ct-experts {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}
#contact .ct-avs { display: flex; }
#contact .ct-avs img {
  display: block;
  width: 46px;
  height: 46px;
  aspect-ratio: 1 / 1;
  margin-left: -12px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 6px 14px -6px rgba(20, 57, 31, .5);
}
#contact .ct-avs img:first-child { margin-left: 0; }
#contact .ct-experts-label {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
@media (max-width: 560px) {
  #contact .ct-avs img { width: 40px; height: 40px; }
}
#brand .bh {
  position: relative;
  overflow: hidden;
  margin: 14px 14px 0;
  padding: 150px 0 0;
  border-radius: 40px;
  background:
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(58,118,240,.13), transparent 70%),
    radial-gradient(ellipse 45% 35% at 85% 30%, rgba(58,118,240,.10), transparent 70%),
    linear-gradient(180deg, #eef3ff 0%, #fff 85%);
}
#brand .bh-in { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 0 24px; text-align: center; }
#brand .bh h1 {
  margin: 26px 0 0;
  font-size: clamp(38px, 6vw, 76px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #111;
}
#brand .bh h1 em { font-style: normal; color: var(--blue); }
#brand .bh-lead { max-width: 600px; margin: 26px auto 0; font-size: 16px; line-height: 1.85; color: #555; }
#brand .bh-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }

/* 飄浮的圓形 IP */
#brand .bh-fl {
  position: absolute;
  z-index: 1;
  width: 68px; height: 68px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 14px 28px -12px rgba(30,50,100,.35);
}
#brand .bh-fl.f1 { left: 12%; top: 150px; }
#brand .bh-fl.f2 { right: 14%; top: 190px; }
#brand .bh-fl.f3 { left: 8%; top: 380px; width: 56px; height: 56px; }
#brand .bh-fl.f4 { right: 9%; top: 400px; width: 56px; height: 56px; }

/* 底部三張浮動卡片 */
#brand .bh-cards {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  max-width: 960px;
  margin: 64px auto 0;
  padding: 0 24px;
}
#brand .bh-card {
  flex: 1 1 0;
  max-width: 280px;
  min-height: 230px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid #e8edf7;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 40px -20px rgba(30,50,100,.25);
}
#brand .bh-card.mid { min-height: 285px; }
#brand .bh-card .logo-box { height: 110px; border-radius: 16px; background-color: #f4f7fc; }
#brand .bh-card strong { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; color: #111; }
#brand .bh-tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eaf0ff;
  color: #3a5fd0;
  font-size: 12px;
  font-weight: 600;
}
#brand .bh-ava {
  display: block;
  width: 112px; height: 112px;
  aspect-ratio: 1 / 1;
  margin: 4px auto 0;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #eaf0ff;
}
#brand .bh-card.mid strong { text-align: center; }
#brand .bh-sub { text-align: center; font-size: 13px; color: #777; }

@media (max-width: 900px) {
  #brand .bh-fl.f3, #brand .bh-fl.f4 { display: none; }
  #brand .bh-fl.f1 { left: 5%; } #brand .bh-fl.f2 { right: 5%; }
}
@media (max-width: 760px) {
  #brand .bh { margin: 8px; padding: 120px 0 24px; border-radius: 28px; }
  #brand .bh-fl { display: none; }
  #brand .bh-cards { flex-direction: column; align-items: stretch; margin-top: 40px; }
  #brand .bh-card { max-width: none; min-height: 0; border-bottom: 1px solid #e8edf7; border-radius: 22px; box-shadow: none; }
}
@media (max-width: 1024px) {
  .navbar,
  .navbar.scrolled {
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid #e8e8e8 !important;
    box-shadow: 0 10px 30px -18px rgba(0,0,0,.25) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .navbar .menu-btn {
    background: #f3f3f3 !important;
  }
  .navbar .menu-btn span {
    background: #111 !important;
  }
  .navbar .nav-cta .btn-white {
    background: #0b0b0c !important;
    color: #fff !important;
  }
}
.mobile-menu, #mobileMenu { background: #fff !important; color: #111 !important; }
.mobile-menu a { color: #111 !important; border-bottom: 1px solid rgba(0,0,0,.08) !important; }
.mobile-menu a i { color: #9a9a9a !important; }
.mobile-menu a.active { color: var(--blue) !important; }
.mobile-menu .sub { color: #c8581f !important; }
#menuClose { background: #111 !important; color: #fff !important; border-color: #111 !important; }
@media (max-width: 768px) {
  .marquee .marquee-track {
    animation-duration: 18s !important;
  }
}
.pn-sec { position: relative; overflow: hidden; isolation: isolate; background: var(--blue, #3a76f0); border-radius: 40px; margin: 14px; padding: 110px 0 120px; }
.pn-sec, .pn-sec * { font-family: inherit; }
.pn-sec h2 { color: #fff; }
.pn-sec h2 .grad-text { background-image: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.pn-sec .label { color: rgba(255,255,255,.85) !important; }

/* 導覽列淡出（獨立 class，不影響原本的 hdr-hide） */
.navbar.pn-hdr-off { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* 背景柔光 */
.pn-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pn-blob { position: absolute; border-radius: 50%; filter: blur(80px); transition: transform .7s ease-out; }
.pn-b1 { width: 420px; height: 420px; left: 10%; top: 18%; background: rgba(255,255,255,.22); }
.pn-b2 { width: 380px; height: 380px; right: 8%; top: 42%; background: rgba(120,200,255,.45); }
.pn-b3 { width: 340px; height: 340px; left: 40%; bottom: -120px; background: rgba(20,50,190,.55); }

.pn-stage { position: relative; display: flex; justify-content: center; max-width: 920px; margin: 10px auto 0; }

/* 兩側浮動的圓形 IP */
.pn-fl { position: absolute; z-index: 1; width: 78px; height: 78px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; background: #fff; border: 4px solid #fff; box-shadow: 0 16px 30px -14px rgba(10,20,80,.5); animation: pnBob 6s ease-in-out infinite; transition: transform .6s ease-out; }
.pn-fl.f1 { left: 6%;  top: 12%; }
.pn-fl.f2 { right: 8%; top: 20%; width: 64px; height: 64px; animation-delay: -2s; }
.pn-fl.f3 { left: 11%; bottom: 14%; width: 66px; height: 66px; animation-delay: -4s; }
.pn-fl.f4 { right: 7%; bottom: 10%; animation-delay: -1s; }
@keyframes pnBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* 手機外框 */
.pn-phone { --pw: min(300px, 86vw); position: relative; z-index: 2; box-sizing: border-box; width: var(--pw); height: calc(var(--pw) * 2.08623); padding: 5px; border-radius: 46px; background: #111; box-shadow: 0 50px 80px -30px rgba(10,20,80,.65), inset 0 0 0 1.5px #2b2b2b; }
.pn-screen { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border-radius: 41px; background: #fff; }
.pn-notch { position: absolute; top: 8px; left: 50%; z-index: 3; width: 96px; height: 26px; transform: translateX(-50%); border-radius: 16px; background: #111; }

/* 狀態列 */
.pn-sb { flex: none; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 12px 26px 0 32px; font-size: 15px; font-weight: 600; color: #111; background: #fff; }
.pn-sb .pn-ico { display: flex; align-items: center; gap: 6px; }
.pn-sb svg { display: block; fill: currentColor; }

/* 聊天室標題列 */
.pn-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 16px 10px 8px; background: #fff; border-bottom: 1px solid #eee; }
.pn-back { display: flex; color: #111; }
.pn-bar img { width: 36px; height: 36px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid #e3f5b6; }
.pn-bar b { font-size: 16px; font-weight: 600; color: #111; }
.pn-bar { gap: 8px; }
.pn-acts { gap: 14px; }
.pn-nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pn-nm b { line-height: 1.2; }
.pn-nm small { font-size: 11px; line-height: 1.2; color: #8a8a8f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-acts { margin-left: auto; display: flex; gap: 18px; color: #111; }
.pn-acts svg, .pn-back svg { display: block; }

/* 聊天內容：新訊息從下方進來，舊的往上推 */
.pn-chat { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 12px 12px 10px; background: #fff; }
.pn-date { flex: none; align-self: center; margin: 0 0 8px; padding: 2px 10px; font-size: 11.5px; color: #8a8a8f; }
.pn-msg { display: none; max-width: 80%; padding: 8px 12px 6px; font-size: 15px; font-weight: 400; line-height: 1.4; text-decoration: none; word-break: break-word; }
.pn-msg.on { display: block; animation: pnIn .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pnIn { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
.pn-me { align-self: flex-end; background: var(--blue, #3a76f0); color: #fff; border-radius: 18px; }
.pn-bot { align-self: flex-start; background: #e9e9ec; color: #111; border-radius: 18px; }
.pn-ft { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 1px; font-size: 10.5px; line-height: 1; opacity: .72; }
.pn-st { font-style: normal; }
.pn-ck { width: 13px; height: 9px; }

/* 連續訊息：轉角收小、只有最後一則顯示時間 */
.pn-me.on + .pn-me.on { border-top-right-radius: 5px; }
.pn-me.on:has(+ .pn-me.on) { border-bottom-right-radius: 5px; }
.pn-me.on:has(+ .pn-me.on) .pn-ft { display: none; }
.pn-bot[data-t="bot"] { margin-top: 8px; }
.pn-bot[data-t="bot"].on:has(+ .pn-cta.on) { border-bottom-left-radius: 5px; }
.pn-bot[data-t="bot"].on:has(+ .pn-cta.on) .pn-ft { display: none; }
.pn-cta.on { border-top-left-radius: 5px; }
.pn-cta .pn-tx { color: var(--blue, #3a76f0); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 對方正在輸入 */
.pn-typing { margin-top: 8px; }
.pn-typing.on { display: flex; gap: 5px; align-items: center; padding: 13px 16px; }
.pn-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9a9aa1; animation: pnDot 1s ease-in-out infinite; }
.pn-typing span:nth-child(2) { animation-delay: .15s; }
.pn-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes pnDot { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }

/* 輸入列 */
.pn-input { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px; background: #fff; color: #555; }
.pn-plus { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f0f0f2; }
.pn-field { flex: 1; min-width: 0; padding: 9px 14px; border-radius: 999px; background: #f0f0f2; font-size: 14px; color: #9a9aa1; }
.pn-input > svg { flex: none; display: block; }
.pn-home { flex: none; width: 120px; height: 5px; margin: 6px auto 8px; border-radius: 3px; background: #111; }

@media (max-width: 760px) {
  .pn-sec { padding: 72px 0 80px; border-radius: 28px; margin: 8px; }
  .pn-phone { --pw: min(290px, 84vw); }
  .pn-fl.f3, .pn-fl.f4 { display: none; }
  .pn-fl.f1 { left: 2%; top: 4%; width: 56px; height: 56px; }
  .pn-fl.f2 { right: 2%; top: 8%; width: 52px; height: 52px; }
}
.pn-sb { justify-content: flex-end; }
.pn-phone { transform: scale(var(--ps, 1)); transform-origin: 50% 50%; transition: transform .12s linear; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .pn-phone { transform: none; transition: none; } }
/* header 不動；面板從 header 下方展開 */
#mobileMenu.mobile-menu{position:fixed !important;top:76px;left:10px !important;right:10px !important;bottom:auto !important;width:auto;max-height:calc(100dvh - 90px);overflow:auto;background:#fff !important;border-radius:24px;padding:10px 22px 22px !important;box-shadow:0 30px 60px -20px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06);z-index:290;}
#mobileMenu.mobile-menu.open{display:block !important;animation:mmIn .28s ease;}
@keyframes mmIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
#mobileMenu .mm-links>a,#mobileMenu .mm-acc-btn{display:flex !important;align-items:center;justify-content:space-between;width:100%;padding:13px 0 !important;border:0 !important;border-bottom:1px solid rgba(0,0,0,.07) !important;background:none;font:inherit;font-size:26px;font-weight:600;letter-spacing:-.02em;color:#111 !important;line-height:1.25;text-align:left;cursor:pointer;}
#mobileMenu .mm-acc-btn svg{transition:transform .25s;}
#mobileMenu .mm-acc-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
#mobileMenu .mm-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;}
#mobileMenu .mm-acc-panel.open{grid-template-rows:1fr;}
#mobileMenu .mm-acc-in{overflow:hidden;min-height:0;}
#mobileMenu .mm-box{background:#f6f5f2;border-radius:18px;padding:6px 12px 12px;margin:10px 0 6px;}
#mobileMenu .mm-box h6{margin:14px 6px 6px;font-size:11px;font-weight:600;letter-spacing:.16em;color:#a0a0a0;}
#mobileMenu .mm-links .mm-item{display:flex !important;align-items:center;gap:12px;padding:9px 6px !important;margin:2px 0;border:0 !important;border-radius:14px;font-size:inherit;}
#mobileMenu .mm-links .mm-item:active{background:#fff;}
#mobileMenu .mm-ic{flex:none;width:40px;height:40px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;color:#555;}
#mobileMenu .mm-ic svg{width:20px;height:20px;}
#mobileMenu .mm-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
#mobileMenu .mm-tx b{font-size:15px;font-weight:600;color:#111;line-height:1.3;letter-spacing:0;}
#mobileMenu .mm-tx small{font-size:12.5px;font-weight:400;color:#8a8a8a;line-height:1.35;letter-spacing:0;}
#mobileMenu .mm-item em{font-style:normal;font-size:22px;color:#c4c4c4;}
#mobileMenu .mm-links .mm-all{display:block !important;margin-top:8px;padding:12px !important;border-radius:999px;background:#fff;text-align:center;font-size:14px !important;font-weight:600 !important;color:#111 !important;border:1px solid rgba(0,0,0,.08) !important;}
#mobileMenu .mm-cta{display:block;margin-top:18px;padding:16px 20px;border-radius:999px;background:#111;color:#fff !important;font-size:16px;font-weight:600;text-align:center;border:0 !important;}
@media (max-width: 600px) {
  .pn-stage .pn-fl { display: block !important; z-index: 5 !important; width: 46px !important; height: 46px !important; border-width: 3px !important; }
  .pn-stage .pn-fl.f1 { left: calc(50% - min(145px, 42vw) - 12px) !important; right: auto !important; top: -18px !important; bottom: auto !important; }
  .pn-stage .pn-fl.f2 { right: calc(50% - min(145px, 42vw) - 12px) !important; left: auto !important; top: -10px !important; bottom: auto !important; }
  .pn-stage .pn-fl.f3 { left: calc(50% - min(145px, 42vw) - 12px) !important; right: auto !important; bottom: 40px !important; top: auto !important; }
  .pn-stage .pn-fl.f4 { right: calc(50% - min(145px, 42vw) - 12px) !important; left: auto !important; bottom: -14px !important; top: auto !important; }
}
.sv2.sv5{padding:96px 0 84px;}
.sv5-head{text-align:center;max-width:720px;margin:0 auto 56px;}
.sv5-pill{display:inline-flex;align-items:center;gap:10px;padding:9px 20px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);font-size:14px;color:#1b2a41;margin-bottom:26px;}
.sv5-pill i{width:14px;height:14px;border-radius:50%;border:2px solid #2563eb;position:relative;display:block;}
.sv5-pill i::after{content:"";position:absolute;inset:2px;border-radius:50%;background:#2563eb;}
.sv5-head h2{font-size:clamp(30px,4.4vw,54px);line-height:1.2;letter-spacing:-.02em;font-weight:800;color:#0f1f3d;margin:0 0 18px;}
.sv5-head h2 span{color:#2563eb;}
.sv5-head p{font-size:15px;color:#35475f;margin:0;}
.sv5-track{--pad:max(20px,calc((100vw - 1180px)/2));position:relative;z-index:1;display:flex;gap:24px;overflow-x:auto;padding:6px var(--pad) 30px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;}
.sv5-track::-webkit-scrollbar{display:none;}
.sv5-track.drag{cursor:grabbing;scroll-snap-type:none;}
.sv5-card{flex:0 0 clamp(250px,28vw,370px);scroll-snap-align:start;background:rgba(255,255,255,.88);border-radius:32px;padding:18px 18px 34px;text-align:center;box-shadow:0 14px 36px -18px rgba(40,120,170,.35);user-select:none;}
.sv5-img{position:relative;height:clamp(170px,17vw,230px);border-radius:24px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:26px;}
.sv5-img svg{width:64px;height:64px;opacity:.95;}
.sv5-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.sv5-img.g1{background:linear-gradient(135deg,#ff8aa5,#ffb88a);}
.sv5-img.g2{background:linear-gradient(135deg,#7aa7ff,#9be0ff);}
.sv5-img.g3{background:linear-gradient(135deg,#b69bff,#ffa6d9);}
.sv5-img.g4{background:linear-gradient(135deg,#4ed0a0,#a6ecc8);}
.sv5-img.g5{background:linear-gradient(135deg,#ffb14d,#ffd98a);}
.sv5-img.g6{background:linear-gradient(135deg,#3a76f0,#8f7bff);}
.sv5-card h4{font-size:clamp(19px,1.7vw,23px);font-weight:800;color:#0f1f3d;margin:0 0 10px;line-height:1.35;}
.sv5-card p{font-size:14px;line-height:1.7;color:#4a5a70;margin:0 auto;max-width:260px;}
.sv5-dots{position:relative;z-index:1;display:flex;justify-content:center;gap:12px;margin-top:6px;}
.sv5-dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(18,37,90,.22);cursor:pointer;transition:.25s;}
.sv5-dots button.on{background:#12255a;transform:scale(1.25);}
@media(max-width:600px){
  .sv2.sv5{padding:64px 0 56px;}
  .sv5-head{margin-bottom:36px;padding:0 6px;}
  .sv5-track{gap:14px;}
  .sv5-card{flex-basis:78vw;border-radius:26px;}
}
.sv5-nav{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;margin-top:10px;}
.sv5-nav .sv5-dots{margin:0;}
.sv5-btns{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;gap:16px;}
.sv5-btn{width:56px;height:56px;border:0;border-radius:14px;background:#12255a;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 22px -10px rgba(18,37,90,.6);transition:.2s;}
.sv5-btn svg{width:24px;height:24px;}
.sv5-btn:hover{background:#0c1a45;transform:translateY(-2px);}
.sv5-btn:disabled{opacity:.35;cursor:default;transform:none;}
@media(max-width:600px){
  .sv5-nav{flex-direction:column;gap:18px;}
  .sv5-btns{position:static;transform:none;gap:12px;}
  .sv5-btn{width:48px;height:48px;border-radius:12px;}
}
.sv5-nav{flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:22px !important;margin-top:14px !important;}
.sv5-nav .sv5-btns{position:static !important;transform:none !important;justify-content:center !important;gap:16px !important;}
.sv5-nav .sv5-dots{margin:0 !important;}
.sv5-dots{display:none !important;}
.sv5-nav{margin-top:8px !important;}
#tcar.tc2{display:block !important;max-width:860px;margin:56px auto 0 !important;text-align:center;}
#tcar.tc2 .tc2-card{position:relative;background:#fff;border-radius:28px;padding:56px 64px;box-shadow:0 24px 60px -30px rgba(0,0,0,.35);min-height:190px;display:flex;align-items:center;justify-content:center;}
.tc2-q{position:absolute;width:30px;height:30px;fill:#e9e9ec;}
.tc2-q1{left:24px;top:22px;}
.tc2-q2{right:24px;bottom:22px;transform:rotate(180deg);}
.tc2-text{margin:0;font-size:clamp(18px,2.2vw,26px);line-height:1.75;color:#333;text-align:left;transition:opacity .25s;}
.tc2-text em{font-style:normal;font-weight:700;color:#111;}
.tc2-avs{display:flex;justify-content:center;gap:16px;margin-top:26px;}
.tc2-av{width:64px;height:64px;padding:0;border:0;border-radius:20px;background:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px -8px rgba(0,0,0,.3);transition:.25s;opacity:.75;position:relative;}
.tc2-av img{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;}
.tc2-av:hover{opacity:1;}
.tc2-av.on{opacity:1;box-shadow:0 0 0 2px #2f6bff,0 8px 20px -8px rgba(47,107,255,.6);}
.tc2-who{margin-top:16px;display:flex;flex-direction:column;gap:4px;transition:opacity .25s;}
.tc2-who b{font-size:16px;color:#2f6bff;font-weight:700;}
.tc2-who small{font-size:13px;color:rgba(255,255,255,.7);}
.tc2-fade .tc2-text,.tc2-fade .tc2-who{opacity:0;}
@media(max-width:600px){
  #tcar.tc2{margin-top:36px !important;}
  #tcar.tc2 .tc2-card{padding:48px 26px 44px;border-radius:22px;}
  .tc2-q{width:22px;height:22px;}
  .tc2-av{width:56px;height:56px;border-radius:17px;}
  .tc2-av img{width:38px;height:38px;}
}
#tcar .tc2-text em{color:#2f6bff !important;font-weight:700;}
/* === 100% APPLE.COM/TW/ENVIRONMENT DESIGN SYSTEM FOR #about === */
#about {
  background: #ffffff !important;
  color: #1d1d1f !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro TC", "SF Pro Display", "PingFang TC", "Noto Sans TC", sans-serif !important;
  padding-top: 108px !important; /* 預留頂部主導覽列高度 */
  overflow-x: hidden;
}

/* 0. Apple Sticky Sub-Navigation Bar */
#about .ap-subnav {
  position: sticky;
  top: 64px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#about .ap-subnav-in {
  max-width: 980px;
  margin: 0 auto;
  height: 52px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#about .ap-sub-title {
  font-size: 19px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.01em;
}
#about .ap-sub-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
#about .ap-sub-link {
  font-size: 12px;
  color: #1d1d1f;
  text-decoration: none;
  opacity: 0.8;
}
#about .ap-sub-link:hover { opacity: 1; }
#about .ap-sub-pill {
  background: #00d65b;
  color: #000000 !important;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}
#about .ap-sub-pill:hover {
  filter: brightness(1.05);
  transform: scale(1.02);
}

/* 1. MODULE 1: Apple 2030 Hero + Sky Gradient + Mountain Landscape */
#about .ap-hero {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 32%, #d8eefb 60%, #fef9e7 75%);
  padding-top: 64px;
  text-align: center;
  overflow: hidden;
}
#about .ap-pause-btn {
  position: absolute;
  top: 24px;
  right: 32px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#about .ap-hero-top {
  max-width: 780px;
  margin: 0 auto;
  padding: 20px 24px 56px;
  position: relative;
  z-index: 3;
}
#about .ap-logo-lockup {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
#about .ap-2030-svg {
  width: min(380px, 82vw);
  height: auto;
}
#about .ap-hero-h1 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: #1d1d1f;
  margin: 0;
}

#about .ap-hero-scenic {
  position: relative;
  width: 100%;
  height: clamp(420px, 56vw, 680px);
  margin-top: -20px;
  overflow: hidden;
}
#about .ap-mountain-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
#about .ap-mountain-fade-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(216,238,251,0.9) 0%, rgba(216,238,251,0) 100%);
  pointer-events: none;
}
#about .ap-mountain-fade-bot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(5,12,18,0.82) 100%);
  pointer-events: none;
}
#about .ap-hero-caption {
  position: absolute;
  bottom: 48px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 3;
  color: #ffffff;
  padding: 0 20px;
}
#about .ap-hero-caption h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  margin: 0 0 6px;
  color: #ffffff;
  letter-spacing: -0.01em;
}
#about .ap-hero-caption p {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  margin: 0;
  color: rgba(255,255,255,0.92);
}

/* Common Apple Section Container */
#about .ap-sec {
  padding: 110px 0;
  background: #ffffff;
}
#about .ap-container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 24px;
}
#about .ap-sec-title.left {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: #1d1d1f;
  margin: 0 0 48px;
}

/* 2. MODULE 2: Apple Peek Carousel */
#about .ap-carousel-sec {
  background: #fafafa;
  padding: 96px 0 76px;
}
#about .ap-peek-wrap {
  position: relative;
  width: 100%;
}
#about .ap-peek-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px calc((100vw - min(860px, 84vw)) / 2) 24px;
  scrollbar-width: none;
}
#about .ap-peek-track::-webkit-scrollbar {
  display: none;
}
#about .ap-peek-slide {
  flex: 0 0 min(860px, 84vw);
  height: clamp(360px, 48vw, 520px);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  scroll-snap-align: center;
  box-shadow: 0 12px 36px rgba(0,0,0,0.06);
  transition: transform 0.35s ease, opacity 0.35s ease;
}
#about .ap-peek-slide.light-card {
  background: #ffffff;
}
#about .ap-peek-slide.photo-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#about .ap-slide-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.78) 100%);
}
#about .ap-slide-caption {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  max-width: 560px;
  text-align: center;
  color: rgba(255,255,255,0.88);
  font-size: 16px;
  line-height: 1.55;
  z-index: 2;
}
#about .ap-slide-caption b {
  color: #ffffff;
  font-weight: 700;
}
#about .ap-slide-split {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 40px;
  position: relative;
}
#about .ap-slide-txt-dark {
  max-width: 360px;
  font-size: 17px;
  line-height: 1.55;
  color: #6e6e73;
}
#about .ap-slide-txt-dark b {
  color: #1d1d1f;
}

/* Apple Bottom Pill Dots + Play Button */
#about .ap-carousel-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}
#about .ap-dots-pill {
  background: #e8e8ed;
  border-radius: 999px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#about .ap-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #86868b;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}
#about .ap-dot.active {
  width: 34px;
  background: #1d1d1f;
}
#about .ap-play-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e8e8ed;
  border: none;
  color: #1d1d1f;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 3. MODULE 3: Trade-in Banner + Green Highlight Headline + MacBook Keyboard */
#about .ap-sustain-sec {
  padding-bottom: 0 !important;
  overflow: hidden;
}
#about .ap-trade-banner {
  background: #f5f5f7;
  border-radius: 28px;
  padding: 44px 56px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 24px;
  margin-bottom: 110px;
  overflow: hidden;
}
#about .ap-trade-txt h3 {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  color: #1d1d1f;
  margin: 0 0 12px;
}
#about .ap-trade-txt p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #515154;
  margin: 0 0 22px;
}
#about .ap-blue-btn {
  display: inline-block;
  background: #0071e3;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 999px;
  text-decoration: none;
}
#about .ap-blue-btn:hover {
  background: #0077ed;
}
#about .ap-trade-art svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin-left: auto;
}

/* Apple Center Headline with Green Marker Highlight */
#about .ap-center-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
#about .ap-hl-title {
  font-size: clamp(36px, 4.8vw, 56px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  margin: 0 0 20px;
}
#about .ap-green-mark {
  background: #2ad156;
  color: #1d1d1f;
  padding: 2px 14px 4px;
  border-radius: 12px;
  display: inline-block;
  margin: 0 2px;
}
#about .ap-sub-lead {
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 600;
  line-height: 1.55;
  color: #1d1d1f;
  max-width: 640px;
  margin: 0 auto;
}

/* Top-down Gold MacBook Keyboard Rising from Bottom (對應圖 3 底部) */
#about .ap-macbook-topdown {
  max-width: 780px;
  margin: 56px auto 0;
  padding-top: 10px;
}
#about .ap-mb-lid {
  height: 14px;
  background: linear-gradient(90deg, #c5be77 0%, #eae49c 20%, #d8d182 50%, #eae49c 80%, #bcb56b 100%);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  margin: 0 auto;
  width: 96%;
}
#about .ap-mb-body {
  width: 86%;
  margin: 0 auto;
  background: linear-gradient(180deg, #dcd584 0%, #cfc876 100%);
  border-radius: 32px 32px 0 0;
  padding: 26px 28px 0;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.6), 0 10px 30px rgba(0,0,0,0.08);
}
#about .ap-mb-keys {
  background: #b8b162;
  border-radius: 14px 14px 0 0;
  padding: 10px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
#about .k-row {
  display: flex;
  gap: 6px;
}
#about .k-row span {
  flex: 1;
  height: 36px;
  background: #f5f5f2;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: #333;
  box-shadow: 0 2px 0 #9e984f;
}
#about .k-row.r-fn span {
  height: 28px;
  font-size: 9px;
}
#about .k-row .w-esc,
#about .k-row .w-del,
#about .k-row .w-tab {
  flex: 1.5;
}
#about .k-row .touch-id {
  border-radius: 8px;
  background: radial-gradient(circle, #eee 45%, #d5d098 65%);
}

/* 4. MODULE 4: 3 Tall Dark Cards + Outside Captions (對應圖 4) */
#about .ap-three-cards-sec {
  padding-top: 96px;
  padding-bottom: 64px;
}
#about .ap-3grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
#about .ap-tcard {
  border-radius: 26px;
  height: 430px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}
#about .ap-tcard.c-ocean {
  background:
    radial-gradient(circle at 50% 45%, rgba(16, 85, 110, 0.72), rgba(9, 44, 62, 0.96)),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 3px, transparent 3px, transparent 12px);
}
#about .ap-tcard.c-carbon {
  background: #141416;
  justify-content: center;
}
#about .ap-tcard.c-forest {
  background: #0a3622;
}
#about .ap-tcard-svg {
  position: relative;
  width: 200px;
  height: 240px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#about .ap-tcard-svg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#about .ap-big-stat {
  position: relative;
  z-index: 2;
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-top: 18px;
}
#about .ap-tcard-foot {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  margin: 0;
}
#about .ap-carbon-circle {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, #2c2c30 0%, #1d1d20 68%, transparent 72%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
}
#about .ap-carbon-circle h3 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
  color: #ffffff;
  margin: 0;
}
#about .ap-outside-cap {
  margin: 18px 4px 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: #6e6e73;
}
#about .ap-outside-cap b {
  color: #1d1d1f;
  font-weight: 700;
}
#about .ap-sub-arrows {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
}
#about .ap-sub-arrows button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #e8e8ed;
  color: #1d1d1f;
  font-size: 18px;
  cursor: pointer;
}

/* 5. MODULE 5: 4 Tall Cards (對應圖 5) */
#about .ap-four-cards-sec {
  padding-top: 72px;
  padding-bottom: 96px;
}
#about .ap-4grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
#about .ap-fcard {
  border-radius: 24px;
  height: 390px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 22px;
  text-align: center;
}
#about .ap-fcard.f-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#about .ap-fcard-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.82) 100%);
}
#about .ap-fcard-foot {
  position: relative;
  z-index: 2;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.42;
  margin: 0;
}
#about .ap-fcard-foot.light { color: #ffffff; }
#about .ap-fcard-foot.dark  { color: #1d1d1f; }

/* Card 2: Light Gray + Lightning + Mac mini */
#about .ap-fcard.f-macmini {
  background: #f5f5f7;
  justify-content: space-between;
  padding: 42px 20px 36px;
}
#about .ap-mm-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
#about .ap-mm-top h4 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  color: #1d1d1f;
  margin: 0;
}
#about .ap-mm-box {
  width: 82%;
  margin: 0 auto;
}
#about .ap-mm-body {
  height: 54px;
  background: linear-gradient(90deg, #b8b9bd 0%, #e5e6ea 22%, #d4d5d9 50%, #e5e6ea 78%, #b4b5b9 100%);
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
#about .mm-port {
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: #1d1d1f;
}
#about .mm-led {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1d1d1f;
  margin-left: auto;
}
#about .ap-mm-base {
  width: 76%;
  height: 7px;
  background: #2c2c2e;
  border-radius: 0 0 8px 8px;
  margin: 0 auto;
}

/* Card 4: Yellow + Sun */
#about .ap-fcard.f-yellow {
  background: #ffd60a;
  justify-content: space-between;
  padding-top: 72px;
}
#about .ap-sun-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive Tablet & Mobile */
@media (max-width: 960px) {
  #about .ap-trade-banner {
    grid-template-columns: 1fr;
    padding: 32px 28px;
  }
  #about .ap-3grid {
    grid-template-columns: 1fr;
  }
  #about .ap-4grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  #about .ap-4grid {
    grid-template-columns: 1fr;
  }
  #about .ap-subnav-in {
    padding: 0 14px;
  }
  #about .ap-sub-link {
    display: none;
  }
}

/* ap-story */
#about .ap-story{position:relative;width:100%;height:clamp(520px,78vh,860px);overflow:hidden;background:#0b0b0c;color:#fff;}
#about .ap-story-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;}
#about .ap-story-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.7) 100%);}
#about .ap-story-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;}
#about .ap-story-h1{margin:0;font-size:clamp(44px,7.4vw,104px);font-weight:800;line-height:1.12;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35);}
#about .ap-story-link{margin-top:clamp(28px,5vh,56px);display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border:1.5px solid rgba(255,255,255,.85);border-radius:999px;color:#fff;font-size:16px;font-weight:600;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease,color .2s ease;}
#about .ap-story-link:hover{background:#fff;color:#111;}
@media(max-width:640px){#about .ap-story{height:clamp(460px,72vh,640px);}#about .ap-story-link{font-size:15px;padding:12px 24px;}}

/* ap-half */
#about .ap-half{position:relative;overflow:hidden;border-radius:28px;}
#about .ap-half-imgs{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;}
#about .ap-half-imgs img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;}
#about .ap-half .ap-slide-caption p{max-width:760px;margin-left:auto;margin-right:auto;}
#about .ap-half .ap-slide-caption p b{display:block;font-size:clamp(26px,3.2vw,40px);margin-bottom:10px;}
@media(max-width:700px){#about .ap-half-imgs{grid-template-columns:1fr 1fr;}}

/* ap-founder-txt */
#about .ap-peek-slide .fd-t{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
#about .ap-peek-slide .fd-t b{display:block;font-size:clamp(26px,3.2vw,40px);font-weight:700;line-height:1.25;}
#about .ap-peek-slide .fd-t .fd-s{display:block;font-size:clamp(13px,1.2vw,15px);font-weight:400;line-height:1.6;opacity:.9;max-width:680px;}