/* ============================================
   Polygonn 官方網站 — 全域樣式
   版本：v1.2 — 暖灰高級質感配色
   ============================================ */

/* --- Reset --- */
*{margin:0;padding:0;box-sizing:border-box;}

/* --- CSS Variables --- */
:root{
  --bg:#1a1816;
  --bg-alt:#201d1a;
  --fg:#f2ece4;
  --accent:#c9a96e;
  --muted:#7a7068;
  --muted2:#9a8e82;
  --border:#2e2824;
  --border2:#3d3530;
  --ff-d:'Bebas Neue',sans-serif;
  --ff-b:'Noto Serif TC',serif;
  --ff-m:'Space Mono',monospace;
}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--ff-b);
  font-weight:300;
  overflow-x:hidden;
}

/* --- Nav --- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem 2.5rem;
  transition:background .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
nav.scrolled{
  background:rgba(26,24,22,.94);
  backdrop-filter:blur(12px);
  border-color:var(--border2);
}
.nav-logo{display:flex;align-items:center;gap:.75rem;cursor:pointer;}
.nav-wordmark{font-family:var(--ff-d);font-size:1.6rem;letter-spacing:.2em;color:var(--fg);}
.nav-links{display:flex;gap:2.2rem;list-style:none;}
.nav-links a{
  font-family:var(--ff-m);font-size:.85rem;letter-spacing:.18em;
  color:var(--muted2);text-decoration:none;text-transform:uppercase;
  transition:color .2s;cursor:pointer;
}
.nav-links a:hover{color:var(--fg);}

/* --- Hero --- */
#hero{
  min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:6rem 2.5rem 4.5rem;
  position:relative;overflow:hidden;
}
.hero-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.hero-eyebrow{
  font-family:var(--ff-m);font-size:.85rem;letter-spacing:.28em;
  color:var(--muted);text-transform:uppercase;
  margin-bottom:1.2rem;display:flex;align-items:center;gap:1rem;
}
.hero-eyebrow::before{content:'';display:block;width:1.8rem;height:1px;background:var(--muted);}
h1.hero-h{
  font-family:var(--ff-d);font-size:clamp(4.5rem,13vw,12rem);
  line-height:.88;letter-spacing:.015em;
}
h1.hero-h em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--accent);}
.hero-sub{max-width:520px;font-size:1.1rem;line-height:2;color:var(--muted2);margin:2rem 0 2.8rem;}
.hero-actions{display:flex;gap:1rem;align-items:center;}
.btn-primary{
  font-family:var(--ff-m);font-size:.85rem;letter-spacing:.15em;
  text-transform:uppercase;padding:.85rem 2rem;
  border:1px solid var(--fg);color:var(--fg);background:transparent;
  cursor:pointer;transition:background .2s,color .2s;
}
.btn-primary:hover{background:var(--accent);color:var(--bg);border-color:var(--accent);}
.btn-ghost{
  font-family:var(--ff-m);font-size:.85rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted2);cursor:pointer;transition:color .2s;
}
.btn-ghost:hover{color:var(--fg);}
.hero-scroll-cue{
  position:absolute;right:2.5rem;bottom:4.5rem;writing-mode:vertical-rl;
  font-family:var(--ff-m);font-size:.6rem;letter-spacing:.2em;
  color:var(--muted);text-transform:uppercase;
  display:flex;align-items:center;gap:.6rem;
}
.hero-scroll-cue::after{content:'';display:block;width:1px;height:50px;background:linear-gradient(var(--muted),transparent);}

/* --- Section Common --- */
section{padding:6rem 2.5rem;position:relative;z-index:1;}
.s-label{
  font-family:var(--ff-m);font-size:.85rem;letter-spacing:.25em;
  color:var(--muted2);text-transform:uppercase;
  display:flex;align-items:center;gap:.9rem;margin-bottom:.8rem;
}
.s-label::before{content:'';width:1.6rem;height:1px;background:var(--muted2);}
.s-title{
  font-family:var(--ff-d);font-size:clamp(2.4rem,5vw,4.2rem);
  letter-spacing:.03em;line-height:1.0;margin-bottom:2.5rem;
}

/* --- About --- */
#about{border-top:1px solid var(--border);}
.about-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:5rem;align-items:start;}
.about-body p{font-size:1.1rem;line-height:2;color:var(--muted2);margin-bottom:1rem;}
.about-body p strong{color:var(--fg);font-weight:400;}
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border);}
.kpi{background:var(--bg);padding:2rem 1.5rem;}
.kpi-n{font-family:var(--ff-d);font-size:3.8rem;line-height:1;color:var(--fg);}
.kpi-l{
  font-family:var(--ff-m);font-size:.75rem;letter-spacing:.15em;
  color:var(--muted2);text-transform:uppercase;margin-top:.4rem;display:block;
}

/* --- Capabilities --- */
#capabilities{border-top:1px solid var(--border);background:var(--bg-alt);}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);margin-top:1rem;}
.cap-card{background:var(--bg-alt);overflow:hidden;}
.cap-img-wrap{width:100%;aspect-ratio:4/3;overflow:hidden;position:relative;background:#252220;}
.cap-svg-vis{width:100%;height:100%;display:block;}
.cap-img{width:100%;height:100%;object-fit:cover;display:block;}
.cap-body{padding:1.8rem 1.5rem;}
.cap-num{font-family:var(--ff-m);font-size:.75rem;letter-spacing:.12em;color:var(--muted);margin-bottom:.8rem;}
.cap-name{font-family:var(--ff-d);font-size:1.8rem;letter-spacing:.04em;margin-bottom:.7rem;line-height:1.1;}
.cap-desc{font-size:1rem;line-height:1.9;color:var(--muted2);}
.cap-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1.2rem;}
.tag{
  font-family:var(--ff-m);font-size:.75rem;padding:.25rem .6rem;
  border:1px solid var(--border2);color:var(--muted2);letter-spacing:.08em;
}

/* --- Tools --- */
#tools{border-top:1px solid var(--border);}
.tools-layout{display:grid;grid-template-columns:1fr 2fr;gap:5rem;align-items:start;}
.tools-intro{font-size:1.1rem;line-height:2;color:var(--muted2);}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);}
.tool-card{background:var(--bg);padding:1.8rem 1.5rem;position:relative;overflow:hidden;transition:background .25s;}
.tool-card:hover{background:#252220;}
.tool-icon{width:2.2rem;height:2.2rem;margin-bottom:1rem;opacity:.7;}
.tool-name{font-family:var(--ff-d);font-size:1.4rem;letter-spacing:.06em;margin-bottom:.5rem;}
.tool-role{font-size:1rem;line-height:1.8;color:var(--muted2);}
.tool-accent{position:absolute;top:0;left:0;width:2px;height:0;background:var(--accent);transition:height .4s cubic-bezier(.16,1,.3,1);}
.tool-card:hover .tool-accent{height:100%;}

/* --- Process --- */
#process{border-top:1px solid var(--border);background:var(--bg-alt);}
.process-flow{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;gap:0;margin-top:1rem;
}
.pf-arrow{display:flex;align-items:center;justify-content:center;padding:0 .8rem;}
.pf-arrow svg{opacity:.3;}
.pf-node{padding:2.2rem 1.8rem;border:1px solid var(--border2);position:relative;}
.pf-node.client{border-color:var(--border2);background:#221f1c;}
.pf-node.us{border-color:var(--accent);background:#252220;}
.pf-node.us::before{
  content:'我們';font-family:var(--ff-m);font-size:.75rem;letter-spacing:.15em;
  color:var(--muted2);position:absolute;top:-.65rem;left:1rem;
  background:#252220;padding:0 .4rem;text-transform:uppercase;
}
.pf-role{font-family:var(--ff-m);font-size:.75rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-bottom:.8rem;}
.pf-title{font-family:var(--ff-d);font-size:1.8rem;letter-spacing:.04em;line-height:1;margin-bottom:.8rem;}
.pf-desc{font-size:1rem;line-height:1.9;color:var(--muted2);}
.pf-tag{
  display:inline-block;font-family:var(--ff-m);font-size:.75rem;
  padding:.2rem .6rem;border:1px solid var(--border2);
  color:var(--muted2);letter-spacing:.08em;margin-top:.8rem;
}
.client-brings{
  margin-top:3rem;border:1px solid var(--border);padding:2rem 2.5rem;
  display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:start;
}
.cb-label{
  font-family:var(--ff-m);font-size:.85rem;letter-spacing:.2em;
  color:var(--muted2);text-transform:uppercase;padding-top:.1rem;white-space:nowrap;
}
.cb-items{display:flex;flex-wrap:wrap;gap:.5rem;}
.cb-item{
  font-family:var(--ff-m);font-size:.85rem;padding:.35rem .9rem;
  border:1px solid var(--border2);color:var(--muted2);letter-spacing:.08em;
}

/* --- Contact --- */
#contact{border-top:1px solid var(--border);}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;}
.contact-big{font-family:var(--ff-d);font-size:clamp(3rem,7vw,6rem);letter-spacing:.02em;line-height:.9;margin-bottom:1.5rem;}
.contact-big em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--accent);}
.contact-note{font-size:1.1rem;line-height:2;color:var(--muted2);margin-bottom:2rem;}
.contact-mail{
  font-family:var(--ff-m);font-size:1rem;letter-spacing:.1em;
  color:var(--fg);text-decoration:none;display:flex;align-items:center;gap:.6rem;
}
.cf{display:flex;flex-direction:column;}
.cf input,.cf select,.cf textarea{
  background:transparent;border:none;border-bottom:1px solid var(--border2);
  color:var(--fg);font-family:var(--ff-b);font-size:1.1rem;font-weight:300;
  padding:1.1rem 0;outline:none;transition:border-color .2s;margin-bottom:2px;
}
.cf input::placeholder,.cf textarea::placeholder{color:var(--muted);}
.cf input:focus,.cf select:focus,.cf textarea:focus{border-color:var(--fg);}
/* 下拉選單修正 — 深底亮字、自訂箭頭 */
.cf select{
  cursor:pointer;appearance:none;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a8e82' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 0 center;
  color:var(--muted2);
}
.cf select:focus{color:var(--fg);}
.cf select option{
  background:#2e2824;
  color:var(--fg);
  padding:.5rem;
  font-family:var(--ff-b);
  font-size:1rem;
}
.cf textarea{height:110px;resize:none;margin-top:2px;}
.cf-submit{
  margin-top:1.8rem;font-family:var(--ff-m);font-size:.85rem;letter-spacing:.15em;
  text-transform:uppercase;padding:.9rem 2.2rem;
  background:var(--accent);color:var(--bg);border:none;cursor:pointer;
  align-self:flex-start;transition:opacity .2s;
}
.cf-submit:hover{opacity:.82;}
.cf-submit:disabled{cursor:not-allowed;opacity:.6;}
.cf-status{
  font-family:var(--ff-m);font-size:.85rem;letter-spacing:.05em;
  margin-top:1rem;min-height:1.2em;
}

/* --- Footer --- */
footer{
  border-top:1px solid var(--border);padding:1.8rem 2.5rem 4.5rem;
  display:flex;justify-content:space-between;align-items:center;
  position:relative;z-index:1;
}
.f-logo{display:flex;align-items:center;gap:.6rem;}
.f-wm{font-family:var(--ff-d);font-size:1.3rem;letter-spacing:.18em;color:var(--muted);}
.f-copy{font-family:var(--ff-m);font-size:.8rem;letter-spacing:.1em;color:var(--muted);}
.f-links{display:flex;gap:1.4rem;}
.f-links a{
  font-family:var(--ff-m);font-size:.85rem;letter-spacing:.1em;
  color:var(--muted);text-decoration:none;text-transform:uppercase;
  cursor:pointer;transition:color .2s;
}
.f-links a:hover{color:var(--fg);}

/* --- Theme Switcher Bar --- */
.theme-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:rgba(0,0,0,.85);backdrop-filter:blur(12px);
  border-top:1px solid var(--border2);
  padding:.8rem 2rem;
  display:flex;align-items:center;gap:1.5rem;
}
.theme-bar-label{
  font-family:var(--ff-m);font-size:.75rem;letter-spacing:.15em;
  color:var(--muted2);text-transform:uppercase;white-space:nowrap;
}
.theme-buttons{display:flex;gap:.6rem;flex-wrap:wrap;}
.theme-btn{
  display:flex;align-items:center;gap:.45rem;
  font-family:var(--ff-m);font-size:.7rem;letter-spacing:.08em;
  color:var(--muted2);background:transparent;border:1px solid var(--border2);
  padding:.4rem .8rem;cursor:pointer;transition:all .2s;border-radius:2px;
}
.theme-btn:hover{border-color:var(--fg);color:var(--fg);}
.theme-btn.active{border-color:var(--accent,var(--fg));color:var(--fg);background:rgba(255,255,255,.06);}
.theme-swatch{
  display:inline-block;width:12px;height:12px;border-radius:50%;
  border:2px solid;flex-shrink:0;
}

/* ============================================
   RWD 響應式設計
   ============================================ */

/* --- Tablet (768px 以下) --- */
@media (max-width:768px){
  section{padding:4rem 1.5rem;}
  nav{padding:1rem 1.5rem;}
  .nav-links{gap:1.2rem;}
  .nav-links a{font-size:.65rem;}

  #hero{padding:5rem 1.5rem 3rem;min-height:auto;}
  h1.hero-h{font-size:clamp(3rem,10vw,6rem);}
  .hero-sub{font-size:.95rem;}
  .hero-scroll-cue{display:none;}

  .about-layout{grid-template-columns:1fr;gap:2.5rem;}
  .cap-grid{grid-template-columns:repeat(2,1fr);}
  .tools-layout{grid-template-columns:1fr;gap:2.5rem;}
  .tools-grid{grid-template-columns:repeat(2,1fr);}

  .process-flow{
    grid-template-columns:1fr;
    gap:0;
  }
  .pf-arrow{
    transform:rotate(90deg);
    padding:.8rem 0;
  }

  .client-brings{grid-template-columns:1fr;gap:1rem;}
  .contact-layout{grid-template-columns:1fr;gap:3rem;}

  footer{flex-direction:column;gap:1rem;text-align:center;}
}

/* --- Mobile (480px 以下) --- */
@media (max-width:480px){
  section{padding:3rem 1.2rem;}
  nav{padding:.8rem 1.2rem;}
  .nav-links{gap:.8rem;}
  .nav-links a{font-size:.6rem;letter-spacing:.1em;}

  #hero{padding:4.5rem 1.2rem 2.5rem;min-height:auto;}
  h1.hero-h{font-size:clamp(2.5rem,12vw,4rem);}
  .hero-sub{font-size:.9rem;max-width:100%;}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:.8rem;}

  .cap-grid{grid-template-columns:1fr;}
  .tools-grid{grid-template-columns:1fr;}
  .kpi-grid{grid-template-columns:1fr 1fr;}
  .kpi-n{font-size:2.8rem;}

  .contact-big{font-size:clamp(2rem,8vw,3.5rem);}
}