/* ============================================================
   Kerberos AI Technology — shared design system
   調性：復古刺青flash / 普普風，紅黑棕白，潮但莊重（B2B 公信力）
   字體：Courier Prime（wordmark/標題襯/標籤） + Noto Sans TC（內文）
   ============================================================ */

:root{
  --paper:#EFE7D6;        /* 米白底 */
  --paper-2:#E7DDC8;      /* 稍深米白（交替段落） */
  --ink:#1C1714;          /* 墨黑（主文字） */
  --red:#C01418;          /* 品牌紅（重點/CTA） */
  --tan:#B5642F;          /* 杜賓棕（次要點綴） */
  --muted:#6E6457;        /* 次要文字 */
  --line:#D8CCB4;         /* 分隔線 */
  --line-ink:#1C1714;     /* 粗框線 */
  --maxw:1120px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Noto Sans TC",system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.mono{font-family:"Courier Prime",monospace;}

/* ---------- 共用：頂部導覽 ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(239,231,214,.9);backdrop-filter:blur(8px);
  border-bottom:2px solid var(--line-ink);
}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand svg{display:block;}
.brand .wm{font-family:"Courier Prime";font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--ink);line-height:1;}
.brand .wm small{display:block;font-size:8px;letter-spacing:.18em;color:var(--muted);margin-top:3px;}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{display:flex;align-items:baseline;gap:7px;font-weight:700;font-size:14px;letter-spacing:.06em;position:relative;padding-bottom:4px;}
.nav-links a .n{font-family:"Courier Prime";font-size:10px;color:var(--red);opacity:.7;font-weight:400;}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.3,.8,.3,1);}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);}
.nav-links a[aria-current="page"]{color:var(--red);}
.nav-cta{background:var(--ink);color:var(--paper)!important;padding:9px 16px;border-radius:30px;font-size:13px;}
.nav-cta::after{display:none;}

/* ---------- 內頁 hero band ---------- */
.hero{padding:80px 0 56px;border-bottom:2px solid var(--line-ink);position:relative;overflow:hidden;}
.hero .eyebrow{margin-bottom:18px;}
.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.12;font-weight:700;letter-spacing:.01em;max-width:16ch;}
.hero h1 .r{color:var(--red);}
.hero .lead{margin-top:20px;font-size:clamp(15px,1.6vw,18px);color:var(--muted);max-width:60ch;}
.hero .dog-ghost{position:absolute;right:-40px;bottom:-40px;width:300px;opacity:.07;pointer-events:none;}

/* ---------- 區塊 ---------- */
.section{padding:72px 0;}
.section--alt{background:var(--paper-2);border-top:2px solid var(--line-ink);border-bottom:2px solid var(--line-ink);}
.eyebrow{font-family:"Courier Prime";font-weight:700;font-size:11px;letter-spacing:.34em;color:var(--red);display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--red);}
.h-xl{font-size:clamp(30px,4.2vw,48px);line-height:1.15;font-weight:700;letter-spacing:.01em;}
.h-lg{font-size:clamp(24px,3vw,34px);line-height:1.2;font-weight:700;}
.h-md{font-size:20px;font-weight:700;}
.lead{font-size:clamp(15px,1.5vw,17px);color:var(--muted);line-height:1.85;}
.section-head{max-width:62ch;margin-bottom:44px;}
.section-head h2{margin-top:14px;}
.section-head p{margin-top:16px;}
.rule{width:46px;height:3px;background:var(--red);margin:22px 0;}

/* ---------- 格線/卡片 ---------- */
.grid{display:grid;gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--paper);border:2.5px solid var(--line-ink);padding:28px;position:relative;}
.card .knum{font-family:"Courier Prime";font-size:12px;color:var(--red);letter-spacing:.1em;}
.card h3{margin:10px 0;font-size:19px;font-weight:700;}
.card p{font-size:14.5px;color:var(--muted);}
.card--pop{transition:transform .16s,box-shadow .16s;}
.card--pop:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--red);}
.card--ink{background:var(--ink);color:var(--paper);}
.card--ink p{color:#cfc5b4;}
.card a.more{display:inline-block;margin-top:14px;font-family:"Courier Prime";font-size:13px;color:var(--red);font-weight:700;}
.card a.more::after{content:" ▸";}

/* ---------- 按鈕/標籤 ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:14px 28px;border-radius:34px;border:2.5px solid var(--ink);transition:.16s;cursor:pointer;}
.btn--solid{background:var(--red);border-color:var(--red);color:#fff;box-shadow:5px 5px 0 var(--ink);}
.btn--solid:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);}
.btn--outline:hover{background:var(--ink);color:var(--paper);}
.badge{display:inline-flex;align-items:center;gap:7px;font-family:"Courier Prime";font-weight:700;font-size:11px;letter-spacing:.14em;padding:6px 13px;border:2px solid var(--ink);border-radius:30px;}
.badge--soon{background:var(--red);color:#fff;border-color:var(--red);}
.badge--rd{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ---------- 條列（三角項目符號＝品牌呼應） ---------- */
.tri-list{list-style:none;display:flex;flex-direction:column;gap:14px;}
.tri-list li{display:flex;gap:13px;font-size:15px;}
.tri-list li::before{content:"";flex:0 0 auto;width:0;height:0;margin-top:7px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--red);}

/* ---------- 普普網點裝飾（區塊背景用） ---------- */
.dots{background-image:radial-gradient(circle 2.6px,var(--red) 0 2.6px,transparent 2.8px);background-size:16px 16px;}

/* 暗底居中卡專用：網點只框在上/下並淡化，文字落在乾淨中間、確保可讀（取代整片 .dots 壓字） */
.dots-frame{position:relative;overflow:hidden;}
.dots-frame::before,.dots-frame::after{content:"";position:absolute;left:0;right:0;height:88px;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle 2.2px,var(--red) 0 2.2px,transparent 2.4px);background-size:15px 15px;opacity:.3;}
.dots-frame::before{top:0;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);}
.dots-frame::after{bottom:0;-webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent);}
.dots-frame>*{position:relative;z-index:1;}

/* ---------- 表格（產品比較等） ---------- */
.table{width:100%;border-collapse:collapse;border:2.5px solid var(--line-ink);font-size:14.5px;}
.table th,.table td{padding:13px 16px;border:1px solid var(--line);text-align:left;}
.table thead th{background:var(--ink);color:var(--paper);font-family:"Courier Prime";letter-spacing:.06em;}
.table tbody tr:nth-child(even){background:var(--paper-2);}

/* ---------- 表單 ---------- */
.form{display:flex;flex-direction:column;gap:18px;max-width:640px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-weight:700;font-size:14px;}
.field label .req{color:var(--red);}
.input,.textarea,.select{font-family:inherit;font-size:15px;padding:12px 14px;background:var(--paper);border:2.5px solid var(--line-ink);border-radius:0;color:var(--ink);}
.textarea{min-height:130px;resize:vertical;}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--red);}
.field .hint{font-size:12px;color:var(--muted);}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);}

/* ---------- 頁尾 ---------- */
.footer{background:var(--ink);color:var(--paper);border-top:3px solid var(--red);padding:54px 0 30px;}
.footer a{color:#cfc5b4;}
.footer a:hover{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;}
.footer .wm{font-family:"Courier Prime";font-weight:700;font-size:20px;color:#fff;}
.footer .ftag{font-size:13px;color:#cfc5b4;margin-top:10px;max-width:34ch;}
.footer h4{font-family:"Courier Prime";font-size:12px;letter-spacing:.16em;color:#fff;margin-bottom:14px;text-transform:uppercase;}
.footer .fcol a{display:block;font-size:14px;margin-bottom:9px;}
.footer-bottom{margin-top:40px;padding-top:18px;border-top:1px solid #3a322b;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:"Courier Prime";font-size:11px;color:#8a8073;letter-spacing:.08em;}

/* ---------- TODO 佔位標記（未拍板內容） ---------- */
.todo{background:#FFF4C2;border:2px dashed var(--tan);color:#7a5b16;padding:2px 8px;font-family:"Courier Prime";font-size:12px;border-radius:4px;}

/* ---------- 響應式 ---------- */
@media (max-width:860px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:620px){
  .nav-inner{padding:12px 20px;}
  .brand .wm small{display:none;}        /* 收起公司全名副標，省寬度 */
  .brand .wm{font-size:16px;}
  .nav-links{gap:15px;}
  .nav-links a{font-size:13.5px;}
  .nav-links a .n{display:none;}
  .nav-cta{display:none;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .container{padding:0 20px;}
  .hero{padding:54px 0 40px;}
  .section{padding:48px 0;}
  .section-head{margin-bottom:30px;}
  .card{padding:22px;}
  .hero .dog-ghost{display:none;}
  /* 表格在窄螢幕可橫向捲動、不撐破版面 */
  .table{display:block;overflow-x:auto;white-space:nowrap;font-size:13.5px;-webkit-overflow-scrolling:touch;}
}
@media (max-width:400px){
  .brand svg{width:28px;height:auto;}
  .nav-links{gap:12px;}
  .nav-links a{font-size:13px;}
}