/* NALALOVE 官網改版 HTML 預覽版 — 共用樣式 */
:root{
  /* NALALOVE 品牌色：logo 藍 #3EBBED、logo 綠 #3DBFA3、名片深藍 #1A3A6B */
  --navy:#1a3a6b;
  --accent:#1d9bd2;        /* 品牌藍（加深，確保文字對比） */
  --accent-dark:#177fae;
  --accent-soft:#e8f6fd;
  --teal:#2fae91;          /* 品牌綠（加深，確保文字對比） */
  --blue-logo:#3ebbed;     /* logo 原色，裝飾用 */
  --teal-logo:#3dbfa3;
  --bg:#f7fafc;
  --card:#ffffff;
  --text:#2b2f38;
  --muted:#6b7280;
  --line:#e2e9f0;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.75;}
/* 越南文頁面：改用完整支援越文變音符號的系統字體（PingFang TC 對越文支援不全，會逐字 fallback 造成字體混雜） */
html[lang="vi"] body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:0;}
html[lang="vi"] h1,html[lang="vi"] h2,html[lang="vi"] h3,html[lang="vi"] h4{letter-spacing:0;}
/* 越南在地慣例：區塊標題用大寫（hero 主標與 FAQ 長句除外，維持可讀性） */
html[lang="vi"] section h2{text-transform:uppercase;letter-spacing:.03em;}
html[lang="vi"] .acc-closed .acc-title{text-transform:uppercase;letter-spacing:.28em;}
html[lang="vi"] .step h4{text-transform:uppercase;font-size:.95rem;letter-spacing:.05em;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
section{padding:72px 0;}
h2{font-size:1.9rem;color:var(--navy);text-align:center;margin-bottom:12px;}
h2.left{text-align:left;}
.sub{text-align:center;color:var(--muted);margin-bottom:48px;font-size:1.02rem;}
.tag{display:table;margin:0 auto 16px;background:var(--accent-soft);color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.15em;padding:4px 14px;border-radius:99px;}
img{max-width:100%;}
.ph-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:16px;}

/* 預覽提示條 */

/* 旅程敘事設計：全站共用變數 */
:root{
  --night:#0c1c38;
  --night2:#12264a;
  --glow-blue:rgba(62,187,237,.35);
  --glow-teal:rgba(61,191,163,.3);
}
/* 滾動顯現（配合 js/reveal.js） */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.reveal.on{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* NAV（深色玻璃） */
nav{background:rgba(12,28,56,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:10;}
.nav-inner{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.logo{font-weight:800;font-size:1.25rem;color:var(--navy);letter-spacing:.05em;text-decoration:none;display:flex;align-items:center;gap:0;}
.logo span{color:var(--accent);}
.logo img{height:32px;width:auto;margin-right:9px;}
footer .logo img{height:26px;}
.menu{display:flex;gap:20px;font-size:.93rem;align-items:center;flex-wrap:wrap;}
.menu a{color:#9db1d4;text-decoration:none;padding:4px 2px;}
.menu a:hover{color:#fff;}
.menu a.active{color:var(--blue-logo);font-weight:700;border-bottom:2px solid var(--blue-logo);}
.menu a.cta-mini{color:#0c1c38;background:linear-gradient(135deg,var(--blue-logo),var(--teal-logo));padding:6px 18px;border-radius:99px;font-weight:700;border-bottom:none;}
.menu a.lang{border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:4px 13px;font-size:.83rem;color:#9db1d4;font-weight:600;}
.menu a.lang:hover{border-color:var(--blue-logo);color:var(--blue-logo);}
nav .logo{color:#fff;}
nav .logo span{color:var(--blue-logo);}

/* 按鈕 */
.btn{display:inline-block;padding:14px 40px;border-radius:99px;font-weight:700;font-size:1rem;text-decoration:none;}
.btn-primary{background:linear-gradient(135deg,var(--blue-logo),var(--teal-logo));color:#0c1c38;font-weight:800;box-shadow:0 8px 28px var(--glow-blue);}
.btn-ghost{border:2px solid var(--navy);color:var(--navy);margin-left:14px;}
.btn-white{background:#fff;color:var(--accent);}

/* 內頁 Hero（夜色） */
.page-hero{position:relative;overflow:hidden;padding:80px 0 72px;
  background:radial-gradient(ellipse 55% 60% at 80% 15%,var(--glow-blue),transparent 60%),
             radial-gradient(ellipse 45% 50% at 12% 95%,var(--glow-teal),transparent 60%),
             linear-gradient(180deg,var(--night) 0%,var(--night2) 100%);}
.page-hero .crumb{font-size:.85rem;color:#8fa3c8;margin-bottom:16px;}
.page-hero .crumb a{color:#8fa3c8;text-decoration:none;}
.page-hero h1{font-size:2.4rem;color:#fff;letter-spacing:.04em;margin-bottom:14px;font-weight:900;}
.page-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--blue-logo),var(--teal-logo));-webkit-background-clip:text;background-clip:text;color:transparent;}
.page-hero p.lead{max-width:680px;color:#a9bad9;font-size:1.08rem;margin-bottom:28px;}
.page-hero .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;}
/* 內頁 hero 主圖：乾淨大圓角＋柔和光暈 */
.page-hero .ph-img{border-radius:24px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 32px 72px rgba(0,0,0,.5),0 0 80px rgba(62,187,237,.12);}
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;}

/* 卡片 */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px 28px;}
.card h3{color:var(--navy);font-size:1.1rem;margin-bottom:10px;}
.card p{color:var(--muted);font-size:.95rem;}
.card .q{color:var(--accent);font-weight:800;font-size:1.05rem;display:block;margin-bottom:8px;}
.card .ico{font-size:1.8rem;display:block;margin-bottom:12px;}
.card ul{list-style:none;margin-top:12px;}
.card li{font-size:.9rem;padding:7px 0;border-bottom:1px dashed var(--line);}
.card li:last-child{border-bottom:none;}
.card li::before{content:"✓";color:var(--accent);font-weight:800;margin-right:8px;}

/* 服務詳情列（基本版，越文版沿用中） */
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:56px;}
.svc-row:last-child{margin-bottom:0;}
.svc-row.rev .svc-img{order:2;}
.svc-row h3{font-size:1.4rem;color:var(--navy);margin-bottom:10px;font-weight:900;}
.svc-row .one{font-weight:700;color:var(--accent);margin-bottom:12px;}
.svc-row p{color:var(--muted);font-size:.96rem;margin-bottom:14px;}
.svc-row ul{list-style:none;}
.svc-row li{padding:7px 0;border-bottom:1px dashed var(--line);font-size:.93rem;}
.svc-row li:last-child{border-bottom:none;}
.svc-row li::before{content:"✓";color:var(--accent);font-weight:800;margin-right:8px;}
.svc-img{aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--accent-soft);}
.svc-img img{width:100%;height:100%;object-fit:cover;}

/* 互動圖片手風琴（服務模組） */
.acc{display:flex;gap:14px;min-height:580px;margin-top:16px;}
.acc-panel{position:relative;flex:1;border-radius:22px;overflow:hidden;cursor:pointer;background-size:cover;background-position:center;transition:flex .65s cubic-bezier(.65,.05,.25,1);}
.acc-panel::before{content:"";position:absolute;inset:0;background:linear-gradient(185deg,rgba(12,28,56,.18) 30%,rgba(12,28,56,.9) 100%);transition:opacity .5s;}
.acc-panel.on{flex:3.4;cursor:default;}
/* 收合狀態：直式標題＋編號 */
.acc-closed{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:26px 0;color:#fff;opacity:1;transition:opacity .3s;}
.acc-closed .acc-no{font-weight:900;font-size:1.05rem;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85);}
.acc-closed .acc-title{writing-mode:vertical-rl;letter-spacing:.35em;font-weight:800;font-size:1.02rem;text-shadow:0 2px 12px rgba(0,0,0,.4);}
.acc-panel.on .acc-closed{opacity:0;pointer-events:none;}
/* 展開狀態：內容浮出 */
.acc-open{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:40px 46px;opacity:0;transform:translateY(18px);transition:opacity .5s .25s ease,transform .5s .25s ease;}
.acc-panel.on .acc-open{opacity:1;transform:none;}
.acc-open .acc-no{font-size:2.6rem;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:2px var(--blue-logo);margin-bottom:14px;}
.acc-open .svc-en{display:block;font-size:.75rem;font-weight:700;letter-spacing:.15em;color:var(--blue-logo);text-transform:uppercase;margin-bottom:4px;}
.acc-open h3{font-size:1.6rem;font-weight:900;color:#fff;margin-bottom:6px;}
.acc-open .one{font-weight:700;color:var(--blue-logo);margin-bottom:12px;}
.acc-open p{color:#c9d6ec;font-size:.93rem;margin-bottom:12px;max-width:520px;}
.acc-open ul{list-style:none;}
.acc-open li{padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.18);font-size:.9rem;color:#dbe6f5;}
.acc-open li:last-child{border-bottom:none;}
.acc-open li::before{content:"✓";color:var(--teal-logo);font-weight:800;margin-right:8px;}
/* 插圖模式（行銷代操）：淺色底＋插圖元素 */
.acc-panel.illu{background:linear-gradient(165deg,#eef7fd 0%,#e6f8f1 100%);}
.acc-panel.illu::before{display:none;}
.acc-panel.illu .acc-illu{position:absolute;top:8%;left:50%;transform:translateX(-50%);height:44%;width:auto;max-width:86%;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(12,28,56,.15));transition:all .5s ease;z-index:1;}
.acc-panel.illu.on .acc-illu{top:6%;height:48%;}
.acc-panel.illu .acc-closed{color:var(--navy);justify-content:flex-end;}
.acc-panel.illu .acc-closed .acc-no{-webkit-text-stroke:1.5px var(--accent);}
.acc-panel.illu .acc-closed .acc-title{text-shadow:none;}
.acc-panel.illu .acc-open{justify-content:flex-end;}
.acc-panel.illu .acc-open h3{color:var(--navy);}
.acc-panel.illu .acc-open .one{color:var(--accent);}
.acc-panel.illu .acc-open p{color:var(--muted);}
.acc-panel.illu .acc-open .acc-no{-webkit-text-stroke:2px var(--accent);}

/* 時間軸 / 流程 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.steps.five{grid-template-columns:repeat(5,1fr);}
.step{text-align:center;padding:28px 18px;background:var(--card);border-radius:16px;border:1px solid var(--line);}
.step .n{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.step h4{color:var(--navy);margin-bottom:6px;}
.step small{color:var(--accent);font-weight:600;letter-spacing:.08em;display:block;margin-bottom:8px;}
.step p{font-size:.87rem;color:var(--muted);}

/* FAQ（手風琴：點開/收起） */
.faq{max-width:760px;margin:0 auto;}
.qa{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0;margin-bottom:16px;overflow:hidden;}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;padding:22px 28px;color:var(--navy);font-size:1.02rem;font-weight:700;user-select:none;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::before{content:"Q";color:var(--accent);font-weight:800;flex-shrink:0;}
.qa summary::after{content:"＋";margin-left:auto;color:var(--accent);font-weight:800;font-size:1.1rem;transition:transform .25s;flex-shrink:0;}
.qa[open] summary::after{transform:rotate(45deg);}
.qa[open] summary{border-bottom:1px dashed var(--line);}
.qa p{color:var(--muted);font-size:.93rem;padding:16px 28px 22px 52px;}
.qa summary:hover{color:var(--accent);}

/* 深色區塊 */
.dark-band{background:var(--navy);color:#fff;border-radius:24px;padding:56px 48px;}
.dark-band h2{color:#fff;}
.dark-band .sub{color:#b9c3d9;}

/* CTA 區 */
.cta-final{background:linear-gradient(135deg,var(--accent) 0%,var(--teal) 100%);border-radius:24px;padding:44px 40px;text-align:center;color:#fff;}
.cta-final h2{color:#fff;font-size:1.55rem;}
.cta-final p{color:#e3f4fb;margin:0 auto 26px;max-width:640px;}
.contact-row{margin-top:24px;display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font-size:.92rem;color:#e3f4fb;}
.contact-row b{color:#fff;}

/* 表格 */
table.nice{width:100%;border-collapse:collapse;background:var(--card);border-radius:16px;overflow:hidden;border:1px solid var(--line);}
table.nice th{background:var(--navy);color:#fff;padding:14px 18px;text-align:left;font-size:.92rem;}
table.nice td{padding:14px 18px;border-bottom:1px solid var(--line);font-size:.92rem;}
table.nice tr:last-child td{border-bottom:none;}

/* 案例卡 */
.case-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.case-card .stats{display:flex;gap:10px;margin:16px 0 4px;flex-wrap:wrap;}
.case-card .stat{flex:1 1 30%;background:var(--accent-soft);border-radius:12px;padding:12px 10px;text-align:center;min-width:88px;}
.case-card .stat b{display:block;font-size:1.35rem;color:var(--accent);line-height:1.2;}
.case-card .stat small{color:var(--muted);font-size:.72rem;line-height:1.4;display:block;margin-top:3px;}
.case-card .body{padding:28px;}
.case-card .industry{display:inline-block;background:var(--accent-soft);color:var(--accent);font-size:.78rem;font-weight:700;padding:3px 12px;border-radius:99px;margin-bottom:12px;}
.case-card h3{color:var(--navy);font-size:1.15rem;margin-bottom:12px;}
.case-card dl{font-size:.9rem;}
.case-card dt{font-weight:700;color:var(--navy);margin-top:12px;}
.case-card dd{color:var(--muted);margin-left:0;}

/* 部落格卡 */
.post-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;display:block;transition:transform .15s;}
.post-card:hover{transform:translateY(-3px);}
.post-card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--accent-soft),#f4ece2);display:flex;align-items:center;justify-content:center;font-size:2.4rem;}
.post-card .body{padding:22px 24px;}
.post-card .cat{color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.08em;}
.post-card h3{color:var(--navy);font-size:1.05rem;margin:6px 0 8px;line-height:1.5;}
.post-card p{color:var(--muted);font-size:.88rem;}
.post-card .date{color:#a8adb8;font-size:.8rem;margin-top:10px;display:block;}

/* 表單 */
form.contact{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:40px;}
form.contact label{display:block;font-weight:700;color:var(--navy);font-size:.92rem;margin:18px 0 6px;}
form.contact input,form.contact select,form.contact textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:.95rem;font-family:inherit;background:#fff;}
form.contact button{margin-top:26px;width:100%;padding:15px;background:var(--accent);color:#fff;font-weight:700;font-size:1.02rem;border:none;border-radius:99px;cursor:pointer;}

/* 提示標籤（示意內容用） */
.demo-note{background:#fff8e1;border:1px solid #f0d98c;color:#8a6d1a;border-radius:12px;padding:12px 18px;font-size:.85rem;margin-bottom:32px;text-align:center;}

/* FOOTER */
footer{background:var(--navy);color:#8e9ab5;padding:48px 0 36px;font-size:.85rem;margin-top:72px;}
.foot{max-width:1080px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;}
footer .logo{color:#fff;font-size:1.15rem;}
footer h4{color:#fff;font-size:.95rem;margin-bottom:12px;}
footer a{color:#8e9ab5;text-decoration:none;display:block;padding:3px 0;}
footer a:hover{color:#fff;}
.copyright{max-width:1080px;margin:32px auto 0;padding:20px 24px 0;border-top:1px solid rgba(255,255,255,.12);text-align:center;color:#5f6b8a;}

@media(max-width:860px){
  .grid-3,.grid-2,.grid-4,.steps,.steps.five{grid-template-columns:1fr;}
  .hero-grid,.svc-row{grid-template-columns:1fr;}
  .svc-row.rev .svc-img{order:0;}
  /* 手風琴在手機上改直式收合 */
  .acc{flex-direction:column;min-height:0;gap:12px;}
  .acc-panel{flex:none;height:88px;transition:height .5s cubic-bezier(.65,.05,.25,1);}
  .acc-panel.on{flex:none;height:560px;}
  .acc-closed{flex-direction:row;justify-content:flex-start;align-items:center;gap:14px;padding:0 22px;}
  .acc-closed .acc-title{writing-mode:horizontal-tb;letter-spacing:.15em;}
  .acc-open{padding:26px 22px;}
  .acc-panel.illu .acc-illu{height:36%;top:5%;}
  .page-hero h1{font-size:1.8rem;}
  .foot{grid-template-columns:1fr;}
  .dark-band,.cta-final{padding:40px 24px;}
}