:root{
  --bg:#F4F8FB; --surface:#FFFFFF;
  --ink:#16323F; --muted:#5E7480; --faint:#8AA3B0; --line:#E4EDF2;
  --primary:#1E86C9; --sky:#3FAAE0; --mint:#2B7FBE; --indigo:#184E8C;
  --primary-50:#E9F3FB;
  --shadow:0 14px 34px -16px rgba(20,50,63,.22);
  --shadow-sm:0 8px 20px -12px rgba(20,50,63,.16);
}
*{ -webkit-font-smoothing:antialiased; }


main{
  background:var(--bg);
}

/* type */
.kicker{ font-family:"Barlow Condensed",sans-serif; letter-spacing:.34em; text-transform:uppercase;
  font-weight:700; font-size:.8rem; color:var(--primary); }
.display{ font-family:"Noto Sans TC",sans-serif; font-weight:900; line-height:1.2;
  letter-spacing:-.01em; font-size:clamp(2rem,4.6vw,3.2rem); color:var(--ink); }
.lead-cn{ color:var(--muted); font-size:1.05rem; }
.sec-eyebrow{ font-family:"Barlow Condensed",sans-serif; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; font-size:.82rem; color:var(--faint); }
.sec-title{ font-family:"Noto Sans TC",sans-serif; font-weight:900;
  font-size:clamp(1.6rem,2.8vw,2.2rem); line-height:1.3; color:var(--ink); }

/* pills */
.pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:999px;
  background:rgba(255,255,255,.75); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  font-size:.92rem; color:var(--muted); }
.pill .dot{ width:8px;height:8px;border-radius:50%; }

/* image placeholders (reserved slots) */
.ph{ position:relative; width:100%; border-radius:14px;
  background:linear-gradient(135deg,#EEF5F9,#E6F0F5); border:1px dashed #C3D6E0; }
.ph.r43{ padding-bottom:75%; } .ph.r169{ padding-bottom:56.25%; } .ph.r1610{ padding-bottom:60%; }
.ph-in{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.5rem; text-align:center; padding:1rem; }
.ph-in svg{ width:34px;height:34px; stroke:var(--faint); fill:none; stroke-width:1.5; }
.ph-in .t{ font-size:.9rem; color:var(--faint); }
.ph-in .s{ font-family:"Barlow Condensed",sans-serif; letter-spacing:.16em; text-transform:uppercase;
  font-size:.72rem; color:#A9BEC9; }

/* ================= HERO (layered: image below, text on top) ================= */
.hero-band{ position:relative; overflow:hidden; border-bottom:1px solid #D3E6EC; background:#eaf1f6; }
.hero-img{ display:block; width:100%; height:auto; }
.hero-veil{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(244,248,251,.96) 0%, rgba(244,248,251,.84) 18%, rgba(244,248,251,.5) 34%, rgba(244,248,251,0) 52%); }
.hero-content{ position:absolute; top:0; left:0; right:0; z-index:2;
  text-align:center; padding:clamp(2.5rem,9vw,11rem) 1rem 0; }
.hero-text{ max-width:680px; margin:0 auto; }
@media (max-width:991px){
  .hero-veil{ background:linear-gradient(180deg, rgba(244,248,251,.97) 0%, rgba(244,248,251,.86) 20%, rgba(244,248,251,.5) 38%, rgba(244,248,251,0) 58%); }
}
@media (max-width:767px){
  .hero-veil{ background:linear-gradient(180deg, rgba(244,248,251,.95) 0%, rgba(244,248,251,.76) 22%, rgba(244,248,251,.32) 40%, rgba(244,248,251,0) 56%); }
  .hero-content{ padding-top:clamp(2rem,15vw,6rem); }
}
.hero-tag{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--ink);
  font-size:.95rem; background:rgba(255,255,255,.72); border:1px solid var(--line);
  border-radius:999px; padding:.5rem 1.1rem; box-shadow:var(--shadow-sm); }
.hero-tag svg{ width:16px;height:16px; stroke:var(--primary); fill:none; stroke-width:2.4; }

/* ================= CAMERA CARDS (image-top + room badge) ================= */
.cam-card{ height:100%; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease; }
.cam-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.cam-card .ph{ border-radius:0; border:none; border-bottom:1px solid var(--line); }
.cam-body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; height:100%; }
.room-badge{ align-self:flex-start; font-size:.78rem; font-weight:700; color:#fff;
  background:var(--accent,var(--primary)); border-radius:999px; padding:.24rem .75rem; margin-bottom:.7rem; }
.cam-model{ font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:1.3rem;
  color:var(--ink); line-height:1.15; }
.cam-model small{ display:block; font-family:"Noto Sans TC"; font-weight:500; font-size:.9rem;
  color:var(--muted); margin-top:.15rem; }
.cam-chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.85rem 0; }
.cam-chips span{ font-size:.76rem; color:var(--muted); background:#F1F6F9; border:1px solid var(--line);
  border-radius:7px; padding:.24rem .55rem; }
.cam-fit{ margin-top:auto; font-size:.92rem; color:var(--ink); }
.cam-fit b{ color:var(--accent,var(--primary)); font-weight:700; }

/* ================= FEATURE CARD (speakerphone) ================= */
.feature-card{ position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow); padding:2rem; overflow:hidden; }
.feature-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--primary),var(--mint)); }
.feature-badge{ display:inline-block; font-family:"Barlow Condensed",sans-serif; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; color:var(--primary);
  background:var(--primary-50); padding:.32rem .8rem; border-radius:999px; }
.feature-card.optional::before{ background:linear-gradient(180deg,var(--indigo),var(--sky)); }
.opt-badge{ display:inline-block; font-family:"Barlow Condensed",sans-serif; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; color:var(--indigo);
  background:rgba(24,78,140,.1); padding:.32rem .8rem; border-radius:999px; }
.feature-card .model{ font-family:"Barlow Condensed",sans-serif; font-weight:800;
  font-size:clamp(1.8rem,3.2vw,2.5rem); line-height:1; color:var(--ink); }
.feature-card .model small{ display:block; font-family:"Noto Sans TC"; font-weight:700;
  font-size:1rem; color:var(--muted); margin-top:.5rem; }
.readout .num{ font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:1.6rem;
  line-height:1; color:var(--primary); }
.readout .lbl{ font-size:.8rem; color:var(--muted); }
.chip{ font-size:.82rem; color:var(--muted); background:#F1F6F9; border:1px solid var(--line);
  border-radius:8px; padding:.32rem .7rem; }

/* ================= TIER CARDS (wireless HDMI, image placeholder + accent) ================= */
.tier-card{ position:relative; height:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease; display:flex; flex-direction:column; }
.tier-card .accent{ height:5px; background:var(--accent,var(--primary)); }
.tier-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.tier-card .ph{ border-radius:0; border:none; border-bottom:1px solid var(--line); }
.tier-body{ padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; height:100%; }
.dist{ font-family:"Barlow Condensed",sans-serif; font-weight:800; line-height:.85;
  font-size:2.7rem; color:var(--accent,var(--primary)); }
.dist span{ font-size:1rem; font-weight:700; vertical-align:top; letter-spacing:.04em; }
.tier-scene{ font-weight:700; font-size:1.12rem; color:var(--ink); }
.tier-model{ font-family:"Barlow Condensed",sans-serif; font-weight:800; letter-spacing:.04em;
  font-size:.98rem; color:var(--accent,var(--primary)); }
.tier-card .desc{ color:var(--muted); font-size:.92rem; }
.tier-tag{ align-self:flex-start; margin-top:auto; font-size:.78rem; color:var(--ink);
  border:1px solid var(--line); border-radius:7px; padding:.26rem .6rem; background:#F6FAFC; }

/* comparison table */
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); }
.table-responsive, {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cmp{ width:100%; border-collapse:separate; border-spacing:0; }
.cmp th,.cmp td{ padding:.85rem 1rem; text-align:left; vertical-align:middle; font-size:.92rem; color:var(--ink); }
.cmp thead th{ font-family:"Barlow Condensed",sans-serif; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; font-size:.78rem; color:var(--faint); background:#F5FAFC; border-bottom:1px solid var(--line); }
.cmp tbody tr+tr td{ border-top:1px solid var(--line);}
.cmp .m{ font-family:"Barlow Condensed",sans-serif; font-weight:800; letter-spacing:.03em;}
.c-sky{ color:var(--sky); } .c-mint{ color:var(--mint); } .c-indigo{ color:var(--indigo); }
.hint{ color:var(--muted); font-size:.95rem; background:var(--primary-50); border-left:4px solid var(--primary);
  border-radius:10px; padding:.9rem 1.1rem; }
.hint b{ color:var(--ink); font-weight:700; }

/* ================= SOFTWARE CARDS ================= */
.soft-card{ height:100%; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease; }
.soft-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.soft-card .ph{ border-radius:0; border:none; border-bottom:1px solid var(--line); }
.soft-body{ padding:1.4rem 1.5rem 1.6rem; }
.soft-body h5{ font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:1.25rem;
  margin-bottom:.5rem; color:var(--ink); }
.soft-body p{ color:var(--muted); font-size:.94rem; margin:0 0 .9rem; }
.soft-link{ font-weight:700; font-size:.9rem; color:var(--primary); text-decoration:none; }
.soft-link:hover{ color:var(--primary); text-decoration:none;}

/* ================= ACCESSORY (image placeholder + text) ================= */
.acc-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-sm); padding:1.3rem; }
.acc-card h5{ font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:1.25rem; margin-bottom:.3rem; }
.acc-card p{ color:var(--muted); font-size:.94rem; margin:0; }

/* ================= COMBO CARDS (scenario bundles) ================= */
.combo-card{ height:100%; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; }
.combo-head{ padding:1.05rem 1.3rem; background:var(--accent,var(--primary)); color:#fff; }
.combo-card .ph{ border-radius:0; border:none; border-bottom:1px solid var(--line); }
.combo-size{ font-family:"Barlow Condensed",sans-serif; font-weight:800; letter-spacing:.08em;
  font-size:.82rem; opacity:.92; }
.combo-name{ font-weight:700; font-size:1.14rem; line-height:1.3; }
.combo-list{ list-style:none; padding:1.1rem 1.3rem .3rem; margin:0; }
.combo-list li{ display:flex; align-items:flex-start; gap:.6rem; padding:.32rem 0; font-size:.94rem; color:var(--ink); }
.combo-list li b{ font-weight:700; }
.combo-list li .role{ color:var(--muted); }
.ci-dot{ width:8px;height:8px;border-radius:50%; background:var(--accent,var(--primary)); margin-top:.6rem; flex:0 0 8px; }
.combo-note{ padding:.4rem 1.3rem 1.3rem; margin:0; color:var(--muted); font-size:.88rem; }

/* CTA */
.cta-band{ background:linear-gradient(135deg,#E4F0FB,#EAF4FB); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow-sm); padding:2.2rem; }
.btn-fresh{ font-family:"Noto Sans TC"; font-weight:700; border:none; border-radius:12px;
  padding:.78rem 1.6rem; color:#fff; background:var(--primary); box-shadow:0 12px 24px -12px rgba(20,152,190,.6); }
.btn-fresh:hover{ color:#fff; background:#1187aa; }
.btn-fresh-out{ font-family:"Noto Sans TC"; font-weight:700; border-radius:12px; padding:.78rem 1.6rem;
  color:var(--primary); border:1px solid var(--primary); background:#fff; }
.btn-fresh-out:hover{ color:var(--primary); background:var(--primary-50); }

/* reveal */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (max-width:575px){ .feature-card{ padding:1.5rem; } .cta-band{ padding:1.7rem 1.4rem; } }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .cam-card,.tier-card,.soft-card{ transition:none; }
}