/* ===== TRONE TECHNOLOGY — 官網樣式 ===== */
:root{
  --ink:#0A0D10;
  --ink-2:#0E1216;
  --panel:#12171C;
  --cyan:#35E0BE;
  --cyan-dim:rgba(53,224,190,.14);
  --paper:#F2F5F6;
  --muted:#8A959D;
  --line:rgba(242,245,246,.10);
  --max:1120px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--paper);
  font-family:"PingFang TC","PingFang SC","Helvetica Neue","Microsoft JhengHei",Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--cyan); color:var(--ink); }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* ---------- 導航 ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.on{
  background:rgba(10,13,16,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{ color:var(--paper); display:flex; text-decoration:none; }
.wm{ width:96px; height:22px; }
.links{ display:flex; align-items:center; gap:28px; }
.links a{
  color:var(--muted); text-decoration:none;
  font-size:14px; letter-spacing:.08em;
  transition:color .2s;
}
.links a:hover{ color:var(--paper); }
.links a.cta-mini{
  color:var(--cyan);
  border:1px solid rgba(53,224,190,.4);
  padding:7px 16px; border-radius:999px;
  transition:background .2s, color .2s;
}
.links a.cta-mini:hover{ background:var(--cyan); color:var(--ink); }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:url("../images/hero.jpg") center/cover no-repeat;
  animation:heroIn 2.4s ease-out both;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,13,16,.88) 0%, rgba(10,13,16,.55) 46%, rgba(10,13,16,.15) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 22%);
}
@keyframes heroIn{ from{ transform:scale(1.06); opacity:.4; } to{ transform:scale(1); opacity:1; } }

.hero-inner{ position:relative; z-index:2; width:100%; padding-top:64px; }
.eyebrow{
  font-size:13px; letter-spacing:.28em;
  color:var(--cyan);
  margin-bottom:22px;
}
.hero h1{
  font-size:clamp(44px, 7.4vw, 88px);
  line-height:1.08;
  font-weight:600;
  letter-spacing:.02em;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(92deg, var(--cyan) 10%, #9ff2df 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub{
  margin-top:26px;
  font-size:clamp(16px, 2vw, 20px);
  color:#B9C4CA;
  letter-spacing:.06em;
}
.hero-cta{ margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; }

.btn{
  display:inline-block;
  padding:14px 30px;
  border-radius:999px;
  font-size:15px; letter-spacing:.06em;
  text-decoration:none;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s;
}
.btn-solid{
  background:var(--cyan); color:var(--ink); font-weight:600;
  box-shadow:0 8px 30px rgba(53,224,190,.28);
}
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 12px 38px rgba(53,224,190,.4); }
.btn-ghost{
  color:var(--paper);
  border:1px solid rgba(242,245,246,.3);
}
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }

.scroll-hint{
  position:absolute; left:50%; bottom:28px;
  width:1px; height:44px;
  background:linear-gradient(180deg, var(--cyan), transparent);
  animation:hint 2s ease-in-out infinite;
  z-index:2;
}
@keyframes hint{ 0%,100%{ transform:translateY(0); opacity:.9; } 50%{ transform:translateY(10px); opacity:.3; } }

/* ---------- 通用 Section ---------- */
.section{ padding:110px 0; position:relative; }
.section.alt{
  background:
    radial-gradient(1000px 420px at 85% -10%, rgba(53,224,190,.06), transparent 60%),
    var(--ink-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.kicker{
  font-size:12px; letter-spacing:.32em;
  color:var(--cyan);
  margin-bottom:14px;
}
.section h2{
  font-size:clamp(30px, 4vw, 44px);
  font-weight:600;
  letter-spacing:.02em;
  margin-bottom:56px;
}

/* ---------- 業務卡片 ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:transform .35s, border-color .35s, box-shadow .35s;
}
.card:hover{
  transform:translateY(-8px);
  border-color:rgba(53,224,190,.45);
  box-shadow:0 24px 50px -18px rgba(53,224,190,.22);
}
.card-img{ aspect-ratio:4/3; overflow:hidden; }
.card-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.card:hover .card-img img{ transform:scale(1.06); }
.card-body{ padding:26px 26px 30px; position:relative; }
.no{
  position:absolute; top:22px; right:24px;
  font-size:13px; color:var(--cyan);
  letter-spacing:.1em; opacity:.75;
}
.card h3{
  font-size:21px; font-weight:600; letter-spacing:.02em;
  margin-bottom:10px;
}
.card h3 small{
  display:block;
  font-size:11px; font-weight:400;
  color:var(--muted);
  letter-spacing:.18em;
  margin-top:4px;
  text-transform:uppercase;
}
.card p{ color:#AEB9BF; font-size:14.5px; }
.tags{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:18px;
}
.tags li{
  font-size:12px;
  color:var(--cyan);
  background:var(--cyan-dim);
  border:1px solid rgba(53,224,190,.25);
  padding:4px 12px;
  border-radius:999px;
  letter-spacing:.04em;
}

/* ---------- 優勢 ---------- */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
.why{
  padding:34px 30px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(242,245,246,.02);
  transition:border-color .3s, background .3s;
}
.why:hover{ border-color:rgba(53,224,190,.4); background:rgba(53,224,190,.04); }
.why-ic{ font-size:26px; color:var(--cyan); margin-bottom:18px; }
.why h3{ font-size:19px; font-weight:600; margin-bottom:10px; }
.why p{ font-size:14.5px; color:#AEB9BF; }

/* ---------- 關於 ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:60px;
  align-items:center;
}
.about-text p{
  color:#B9C4CA; font-size:16px;
  margin-bottom:18px;
  max-width:56ch;
}
.sig{ color:var(--muted); font-size:14px !important; letter-spacing:.2em; }
.about-mark{ display:flex; justify-content:center; }
.about-mark svg{
  width:100%; max-width:360px;
  color:rgba(242,245,246,.25);
  filter:drop-shadow(0 0 40px rgba(53,224,190,.15));
}

/* ---------- 聯繫 ---------- */
.contact-wrap{ text-align:center; }
.contact-wrap h2{ margin-bottom:36px; }
.contact-cta{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.btn-lg{ padding:18px 52px; font-size:16.5px; }
.contact-note{ font-size:13px; color:var(--muted); letter-spacing:.08em; }

/* ---------- FOOTER ---------- */
.footer{
  border-top:1px solid var(--line);
  padding:34px 0;
  background:var(--ink);
}
.footer-inner{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.f-brand{ font-size:15px; letter-spacing:.24em; font-weight:600; }
.f-brand i{ font-style:normal; font-size:10px; color:var(--muted); letter-spacing:.2em; }
.f-cn{ font-size:12px; color:var(--muted); letter-spacing:.14em; }
.f-web{ font-size:12px; color:var(--cyan); letter-spacing:.1em; }
.f-copy{ margin-left:auto; font-size:11.5px; color:#5E6A71; letter-spacing:.04em; }

/* ---------- 入場動畫（僅在 JS 可用時隱藏，無 JS 環境直接可見） ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s ease, transform .8s ease;
}
.js .reveal.in{ opacity:1; transform:none; }

/* ---------- 響應式 ---------- */
@media (max-width:960px){
  .cards, .why-grid, .contact-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; gap:36px; }
  .about-mark{ order:-1; }
  .about-mark svg{ max-width:240px; }
  .links a:not(.cta-mini){ display:none; }
  .f-copy{ margin-left:0; }
  .m-only{ display:none; }
}
@media (min-width:961px){
  .m-only{ display:inline; }
}