/* =========================================================
   食醒計畫 FRESH START – 乾淨整併版 CSS
   ========================================================= */

/* 全域設定 */
:root{
  --primary-color:#28a745;
  --fresh-color:#205e2f;
  --secondary-color:#17a2b8;
  --accent-color:#ffe815;
  --dark-color:#2c3e50;
  --light-color:#f8f9fa;
  --gradient-bg:linear-gradient(135deg,#32a339 0%,#205e2f 100%);
  --gradient-green:linear-gradient(135deg,#4caf50 0%,#2e7d32 100%);
  --gradient-blue:linear-gradient(135deg,#2196f3 0%,#1565c0 100%);
  --gradient-orange:linear-gradient(135deg,#ff9800 0%,#f57c00 100%);
  --box-shadow:0 10px 30px rgba(0,0,0,.1);
  --transition:all .3s ease;
}

*{ box-sizing:border-box; }

body{
  font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6; color:#333; scroll-behavior:smooth;
}

/* 導航欄 */
.navbar{
  background:#80bf49; 
  backdrop-filter:blur(10px);
  transition:var(--transition); padding:1rem 0;
}
.navbar-brand{ font-size:1.5rem; color:#fff!important; }
.navbar-nav .nav-link{
  color:rgba(255,255,255,.8)!important; font-weight:500;
  margin:0 .5rem; transition:var(--transition); position:relative;
}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{ color:var(--accent-color)!important; }
.navbar-nav .nav-link::after{
  content:""; position:absolute; width:0; height:2px; bottom:-5px; left:50%;
  background:var(--accent-color); transition:var(--transition); transform:translateX(-50%);
}
.navbar-nav .nav-link:hover::after,.navbar-nav .nav-link.active::after{ width:100%; }

/* =========================
   HERO：4 圖序進＋群組停留＋依序淡出
   ========================= */
.hero-section{
  min-height:100vh; display:flex; align-items:center; position:relative;
  background:#000000; overflow:hidden;
}

.hero-video-bg{
  position:absolute; inset:0;
  background:#000 url("img/DSC00001.jpg") center/cover no-repeat; /* 後備底圖 */
  transform:translateZ(0); will-change:transform; contain:paint;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}

.hero-slide{
  position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:0; will-change:opacity; transform:translateZ(0);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}

.hero-slide.s1{ background-image:url("img/DSC00001.jpg"); animation:stack1 10s linear infinite; } /* 空盤 */
.hero-slide.s2{ background-image:url("img/DSC00002.jpg"); animation:stack2 10s linear infinite; } /* 蔬菜 */
.hero-slide.s3{ background-image:url("img/DSC00003.jpg"); animation:stack3 10s linear infinite; } /* 蛋白質 */
.hero-slide.s4{ background-image:url("img/DSC00004.jpg"); animation:stack4 10s linear infinite; } /* 澱粉 */

/* 16s 週期對照：
   0–0.8 空盤淡入；2–2.8 蔬菜；4–4.8 蛋白；6–6.8 澱粉
   6.8–9.8 四張全顯示停 3s；之後依序淡出：澱粉→蛋白→蔬菜→空盤 */
@keyframes stack1{ 0%{opacity:0} 5%{opacity:1} 87.5%{opacity:1} 92.5%{opacity:0} 100%{opacity:0} }
@keyframes stack2{ 0%{opacity:0} 12.5%{opacity:0} 17.5%{opacity:1} 78.75%{opacity:1} 83.75%{opacity:0} 100%{opacity:0} }
@keyframes stack3{ 0%{opacity:0} 25%{opacity:0} 30%{opacity:1} 70%{opacity:1} 75%{opacity:0} 100%{opacity:0} }
@keyframes stack4{ 0%{opacity:0} 37.5%{opacity:0} 42.5%{opacity:1} 61.25%{opacity:1} 66.25%{opacity:0} 100%{opacity:0} }

.hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.28); z-index:2; }

.hero-inner .hero-title,
.hero-inner .hero-subtitle,
.hero-inner .lead{
  opacity:0; transform:translateY(24px); color:#fff; animation:heroFadeUp .8s ease-out forwards;
}
.hero-inner .hero-title{ font-weight:800; font-size:clamp(2.2rem,4vw,3.25rem); letter-spacing:.5px; animation-delay:.1s; }
.hero-inner .hero-subtitle{ font-weight:600; font-size:clamp(1.1rem,2.2vw,1.4rem); margin-top:.25rem; animation-delay:.45s; }
.hero-inner .lead{ font-weight:500; animation-delay:.8s; }

@keyframes heroFadeUp{ from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:translateY(0)} }

/* 區塊標題 */
.section-title{
  font-size:1.6rem; font-weight:bold; 
  margin-bottom:.8rem; 
  color:#333; 
  text-align:center; 
  position:relative;
}
.section-title::after{
  content:""; display:block; 
  width:60px; height:3px; 
  background:#80bf49; 
  margin:10px auto 0; 
  border-radius:2px;
}

/* =========================
   211 餐盤（單一權威版本）
   ========================= */
.plate-container{
  position:relative; width:350px; max-width:100%; height:auto; aspect-ratio:1 / 1;
  margin:0 auto 2rem;
}
.plate-image{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; z-index:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.plate-overlay{ position:absolute; inset:0; z-index:1; }

.click-area{
  position:absolute; cursor:pointer; transition:all .3s ease; opacity:0; z-index:2;
}
.click-area.active::after{ animation:glow-pulse 2s infinite; }

/* 區塊劃分 */
.click-area.vegetables{ top:0; left:0; width:100%; height:50%; clip-path:circle(58% at 50% 100%); z-index:1; }
.click-area.protein{ bottom:0; left:0; width:50%; height:50%; clip-path:circle(95% at 100% 0); z-index:1; }
.click-area.grains{ bottom:0; right:0; width:50%; height:50%; clip-path:circle(95% at 0 0); z-index:1; }

/* hover 效果 */
.click-area.vegetables:hover{ opacity:.6; box-shadow:0 0 15px 8px rgba(40,167,69,.4); background-color:rgba(40,167,69,.3); }
.click-area.protein:hover{    opacity:.6; box-shadow:0 0 15px 8px rgba(220,53,69,.4); background-color:rgba(220,53,69,.3); }
.click-area.grains:hover{     opacity:.6; box-shadow:0 0 15px 8px rgba(255,193,7,.4); background-color:rgba(255,193,7,.3); }

/* 光暈偽元素 */
.click-area::after{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .3s ease; z-index:-1;
}
.click-area.vegetables::after{ background:radial-gradient(circle, rgba(40,167,69,.4), transparent 70%); box-shadow:0 0 20px 10px rgba(40,167,69,.3); }
.click-area.protein::after{    background:radial-gradient(circle, rgba(220,53,69,.4), transparent 70%); box-shadow:0 0 20px 10px rgba(220,53,69,.3); }
.click-area.grains::after{     background:radial-gradient(circle, rgba(255,193,7,.4), transparent 70%); box-shadow:0 0 20px 10px rgba(255,193,7,.3); }
.click-area:hover::after,.click-area.active::after{ opacity:1; }

/* 餐盤高亮 */
.highlight-vegetables .plate-image{ filter:drop-shadow(0 0 20px rgba(40,167,69,.8)); }
.highlight-protein    .plate-image{ filter:drop-shadow(0 0 20px rgba(220,53,69,.8)); }
.highlight-grains     .plate-image{ filter:drop-shadow(0 0 20px rgba(255,200,20,.8)); }

/* 資訊卡 */
.food-info{ padding:20px; }
.food-category{
  background:#fff; padding:20px; border-radius:15px; box-shadow:var(--box-shadow);
  border-left:5px solid var(--primary-color); margin-bottom:20px; animation:slideInRight .5s ease-out;
}
.benefits-card{ background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%); padding:20px; border-radius:15px; box-shadow:var(--box-shadow); }
.benefit-item{ display:flex; align-items:center; padding:.5rem 0; font-weight:500; }

@keyframes glow-pulse{ 0%,100%{opacity:.3; box-shadow:0 0 10px 5px rgba(255,255,255,.25);} 50%{opacity:.6; box-shadow:0 0 20px 10px rgba(255,255,255,.4);} }
@keyframes glow-pulse-vegetables{ 0%,100%{opacity:.3; background-color:rgba(40,167,69,.3); box-shadow:0 0 10px 5px rgba(40,167,69,.3);} 50%{opacity:.6; background-color:rgba(40,167,69,.6); box-shadow:0 0 20px 10px rgba(40,167,69,.5);} }
@keyframes glow-pulse-protein{     0%,100%{opacity:.3; background-color:rgba(220,53,69,.3); box-shadow:0 0 10px 5px rgba(220,53,69,.3);} 50%{opacity:.6; background-color:rgba(220,53,69,.6); box-shadow:0 0 20px 10px rgba(220,53,69,.5);} }
@keyframes glow-pulse-grains{      0%,100%{opacity:.3; background-color:rgba(255,193,7,.3); box-shadow:0 0 10px 5px rgba(255,193,7,.3);} 50%{opacity:.6; background-color:rgba(255,193,7,.6); box-shadow:0 0 20px 10px rgba(255,193,7,.5);} }
@keyframes slideInRight{ from{opacity:0; transform:translateX(30px)} to{opacity:1; transform:translateX(0)} }

/* =========================
   影片專區
   ========================= */
.video-section{ background:linear-gradient(135deg,#32a339 0%,#1f5e2f 100%); position:relative; }
.video-card{
  background:#fff; border-radius:15px; overflow:hidden; box-shadow:var(--box-shadow);
  transition:transform .3s ease; cursor:pointer;
}
.video-card:hover{ transform:translateY(-10px); }

.video-thumbnail{ position:relative; background:#000000; z-index:1; }
.video-card .thumbnail-img{ width:100%; height:100%; object-fit:cover; transition:opacity .3s ease; }
.video-card:hover .thumbnail-img{ opacity:.8; }

.play-overlay{
  position:absolute; 
  inset:0; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  background:rgba(0,0,0,.3); 
  opacity:0; 
  transition:opacity .3s ease;
}
.video-card:hover .play-overlay{ opacity:1; }
.play-overlay i{ font-size:4rem; color:rgba(255,255,255,.9); transition:transform .3s ease; }
.video-card:hover .play-overlay i{ transform:scale(1.1); }

.video-badge{
  position:absolute; top:15px; left:15px; z-index:2;
  background:rgba(255,255,255,.9); color:#2c3e50;
  padding:.25rem 1rem; border-radius:20px; font-size:.8rem; font-weight:600;
}
.video-badge.nutrition{ background:rgba(37,172,25,.9); color:#fff; }
.video-badge.cooking{   background:rgba(255,136,0,.9); color:#fff; }
.video-badge.exercise{  background:rgba(33,150,243,.9); color:#fff; }

/* ▼ FIX：避免 .ratio 把 .video-badge 撐成滿版色塊 */
.video-thumbnail.ratio > .video-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 1rem;
  z-index: 3;
}
/* 明確分層 */
.video-thumbnail.ratio > .thumbnail-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.video-thumbnail.ratio > .play-overlay   { position:absolute; inset:0; z-index:2; }
/* ▲ FIX 結束 */

.video-info{
  padding:1rem; margin-top:-20px; background:#fff; border-radius:0 0 15px 15px; position:relative; z-index:3;
}
.video-info h5{ color:#2c3e50; margin-bottom:.5rem; }
.video-info p{ color:#6c757d; font-size:.9rem; margin-bottom:.5rem; }
.video-duration{ color:#6c757d; font-size:.8rem; }

.video-modal{
  position:fixed; top:40px; left:0; width:100%; height:100%; z-index:1000;
  display:none; align-items:center; justify-content:center; padding:1rem;
}
.modal-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.8); }
.modal-content{ position:relative; z-index:1001; max-width:900px; width:100%; background:#000; border-radius:10px; overflow:hidden; }
.close-btn{
  position:absolute; top:15px; right:15px; width:40px; height:40px; border:none;
  background:rgba(0,0,0,.5); color:#fff; border-radius:50%; z-index:1002; cursor:pointer; transition:all .3s ease;
}
.close-btn:hover{ background:rgba(255,255,255,.2); transform:rotate(90deg); }
.video-iframe{ width:100%; height:100%; border:none; }

/* =========================
   商品推薦
   ========================= */
.product-card{
  background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--box-shadow);
  transition:var(--transition); height:100%; transform:scale(.8);
}
.product-card:hover{
  transform:scale(.8) translateY(-5px); box-shadow:0 15px 30px rgba(70,26,26,.15);
  border:4px solid var(--accent-color);
}
.product-image{ position:relative; height:180px; overflow:hidden; }
.product-bg{ width:100%; height:100%; background-size:cover; background-position:center; }
.supplement-bg{ background:linear-gradient(45deg,#a8e6cf,#7fcdcd); }
.kitchen-bg{    background:linear-gradient(45deg,#ffd93d,#6bcf7f); }
.book-bg{       background:linear-gradient(45deg,#74b9ff,#0984e3); }

.product-badge{
  position:absolute; top:15px; right:15px; background:var(--accent-color); color:var(--dark-color);
  padding:.5rem 1rem; border-radius:20px; font-size:.8rem; font-weight:600;
}
.product-info{ padding:1rem; }
.product-info h4{ color:var(--dark-color); margin-bottom:.75rem; font-weight:600; }
.feature-tag{
  display:inline-block; background:rgba(40,167,69,.1); color:var(--primary-color);
  padding:.3rem .8rem; border-radius:15px; font-size:.8rem; margin:.2rem; font-weight:500;
}
.product-image-small{ height:80px; border-radius:10px; }
.product-info-small{ padding:1rem; }

/* === Hover 補強：只加互動，不改配色/陰影/字體 === */
.product-image,
.product-bg{ overflow:hidden; }

.product-bg img{
  display:block;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
  backface-visibility:hidden;
  transform: translateZ(0);
}

@media (pointer:fine){
  .product-card:hover .product-bg img{ transform: scale(1.06); }
  .product-card:focus-within .product-bg img{ transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce){
  .product-bg img{ transition:none !important; }
}

/* =========================
   專欄資訊區（玻璃擬態樣式綁在父層）
   ========================= */
.articles-section{ background:var(--gradient-bg); position:relative; overflow:hidden; }
.articles-section::before{
  z-index:0;
  pointer-events:none; /* 不吃滑鼠事件，避免少數情況擋住卡片超連結 */
}

.articles-section .article-card{
  background:rgba(255,255,255,.1); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:2rem; text-align:center;
  transition:var(--transition); height:100%;
}
.articles-section .article-card:hover{ background:rgba(255,255,255,.15); transform:translateY(-5px); }
.article-icon{
  width:60px; height:60px; background:var(--accent-color); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; font-size:1.5rem; color:var(--dark-color);
}
.articles-section .article-card h5{ color:var(--accent-color); font-weight:600; margin-bottom:1rem; }
.articles-section .article-card h6{ color:#fff; font-weight:600; margin-bottom:1rem; }
.articles-section .article-card p{ color:rgba(255,255,255,.8); margin-bottom:1.5rem; line-height:1.6; }
.article-link{ color:var(--accent-color); text-decoration:none; font-weight:500; transition:var(--transition); }
.article-link:hover{ color:#fff; text-decoration:none; }

/* 訂閱區塊 */
.cta-section{ background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%); border-radius:20px; padding:3rem; box-shadow:var(--box-shadow); }
.cta-icon{ width:70px; height:70px; background:var(--primary-color); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:#fff; }

/* 頁尾 */
.footer{ background-color:#e5e5e3; padding:20px 0; color:rgb(68, 68, 68); }
.footer-flex{ display:flex; align-items:center; justify-content:space-between; gap:60px; }
.footer-logo{ max-width:280px; height:auto; flex-shrink:0; margin:20px 0; }
.footer-text h5{ text-align:justify; text-justify:inter-ideograph; line-height:1.6; margin:0 0 10px; color:rgb(68, 68, 68); font-weight:700; }
.footer-desc{ text-align:justify; text-justify:inter-ideograph; line-height:1.6; margin:0 0 10px; color:rgb(68, 68, 68); font-weight:400; }

/* === Amart icon font (IcoMoon) === */
@font-face {
  font-family: 'AmartIcons';
  src: url('fonts/AmartIcons.eot');
  src:
    url('fonts/AmartIcons.eot?#iefix') format('embedded-opentype'),
    url('fonts/AmartIcons.woff') format('woff'),
    url('fonts/AmartIcons.ttf') format('truetype'),
    url('fonts/AmartIcons.svg#AmartIcons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 用字型顯示 amart 圖示（E001 為 IcoMoon 代碼點） */
.fa-amart::before{
  content: "\e001";
  font-family: 'AmartIcons' !important;
  /*speak: none;*/
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  display: inline-block;
  line-height: 1;
  font-size: inherit;              /* 跟著父層大小走；你頁尾已設 24px */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 統一社群 icon 大小（修正：不再用 vertical-align，避免干擾 flex 對齊） */
.social-links i { width:auto; height:auto; }
.social-links a:hover i {
  transform: scale(1.1);
}

/* 回到頂部 */
.back-to-top{
  position:fixed; bottom:30px; right:30px; width:50px; height:50px; background:var(--primary-color);
  color:#fff; border:none; border-radius:50%; font-size:1.2rem; cursor:pointer; opacity:0; visibility:hidden;
  transition:var(--transition); z-index:1000;
}
.back-to-top.show{ opacity:1; visibility:visible; }
.back-to-top:hover{ background:var(--dark-color); transform:translateY(-3px); }

/* 專欄文章模態框（多頁） */
.article-modal{
  position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:1rem; overflow-y:auto;
}
.article-modal .modal-content{
  position:relative; z-index:1001; max-width:800px; width:100%; background:#fff; border-radius:15px; padding:2rem;
  box-shadow:0 10px 30px rgba(0,0,0,.2); max-height:90vh; overflow-y:auto;
}
.article-modal .close-btn{
  position:absolute; top:15px; right:15px; width:40px; height:40px; border:none; background:rgba(0,0,0,.1);
  color:var(--dark-color); border-radius:50%; z-index:1002; cursor:pointer; transition:all .3s ease;
}
.article-modal .close-btn:hover{ background:rgba(0,0,0,.2); transform:rotate(90deg); }
.article-header{ margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid #eee; }
.article-content h2{ color:var(--primary-color); margin-bottom:1.5rem; font-weight:700; }
.article-content h3{ color:var(--dark-color); margin:2rem 0 1rem; font-weight:600; }
.article-content p{ color:#555; margin-bottom:1.5rem; line-height:1.8; }
.article-content img{ max-width:100%; height:auto; border-radius:10px; margin:1.5rem 0; box-shadow:0 5px 15px rgba(0,0,0,.1); }
.article-content ul, .article-content ol{ margin-bottom:1.5rem; padding-left:1.5rem; }
.article-content li{ margin-bottom:.5rem; color:#555; }
.article-meta{ display:flex; justify-content:space-between; margin-bottom:2rem; color:#777; font-size:.9rem; }
.article-category{ display:inline-block; background:rgba(40,167,69,.1); color:var(--primary-color); padding:.3rem 1rem; border-radius:20px; font-weight:500; }

/* 雜項動畫 */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes backgroundFloat{ 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.1) rotate(180deg)} }
@keyframes floatPattern{ 0%{transform:translateX(-100px)} 100%{transform:translateX(100px)} }

/* 滾動條 */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#f1f1f1; }
::-webkit-scrollbar-thumb{ background:var(--primary-color); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:var(--dark-color); }

/* 響應式 */
@media (max-width:768px){
  .footer-flex{ flex-direction:column; gap:20px; text-align:center; }
  .footer-text h5,.footer-desc{ text-align:center; }
  .hero-title{ font-size:2.5rem; }
  .hero-subtitle{ font-size:1.2rem; }
  .section-title{ font-size:2rem; }
  .video-thumbnail{ height:150px; }
  .product-image{ height:200px; }
  .cta-section{ padding:2rem; text-align:center; }
  .cta-icon{ margin-bottom:1rem; }
}

@media (max-width:576px){
  .hero-title{ font-size:2rem; }
  .hero-subtitle{ font-size:1rem; }
  .benefits-card,.food-category{ padding:1.5rem; }
  .articles-section .article-card{ padding:1.5rem; }
}

/* 按鈕 */
.btn-outline-primary{
  border:2px solid #28a745; color:#28a745; font-size:1.1rem; padding:10px 20px; border-radius:30px; font-weight:bold;
  transition:background .3s, color .3s;
}
.btn-outline-primary:hover{ background:#28a745; color:#fff; }
.btn-primary{
  background:#ff6b00; border:4px solid #ff6b00; font-size:1rem; padding:5px 10px; border-radius:30px; font-weight:bold;
  transition:background .3s, border .3s;
}
.btn-primary:hover{ background:#d95b00; border-color:#d95b00; }

/* === Footer 社群 icon：置中＋只有 icon 放大（覆蓋版） === */
.footer .social-links{
  display:flex;
  justify-content:center;   /* 先置中，稍後會覆蓋成桌機靠左 */
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
  margin-top:12px;
}

.footer .social-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius: 50%;
  color:#266031;
  text-decoration:none;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 只有 icon 自己放大 */
.footer .social-links a i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;          /* 四顆社群 icon 的可見尺寸 */
  height:24px;
  font-size:24px;      /* 保持清晰度；要大就這裡一起放大 */
  line-height:1;
  transform-origin:center;
  transition: transform .16s cubic-bezier(.2,.6,.2,1), text-shadow .2s ease;
  will-change: transform;
}

/* 滑鼠滑過 / 鍵盤聚焦：icon 放大、容器只做背景與陰影 */
.footer .social-links a:hover,
.footer .social-links a:focus-visible{
  background: rgba(252, 242, 155, 0.925);

  color:#f57c00;
  outline:none;
}
.footer .social-links a:hover i,
.footer .social-links a:focus-visible i{
  transform: scale(1.18);
  text-shadow: 0 6px 12px rgba(255, 255, 255, 0.18);
}

/* 按住：再加一點放大感 */
.footer .social-links a:active i{
  transform: scale(1.24);
}

/* 行動裝置：把點擊區加大到 56px */
@media (hover:none) and (pointer:coarse){
  .footer .social-links a{
    width:56px;
    height:56px;
    border-radius: 50%;
  }
  .footer .social-links a:active i{
    transform: scale(1.20);
  }
}

/* 使用者偏好減少動畫 */
@media (prefers-reduced-motion: reduce){
  .footer .social-links a,
  .footer .social-links a i{
    transition:none !important;
  }
}

/* Footer 社群 icon 置左（桌機預設） */
.footer .social-links{ justify-content:flex-start !important; }

/* 手機（≤768px）改置中：覆蓋上面那條 */
@media (max-width:768px){
  .footer .social-links{ justify-content:center !important; }
}