/* =========================================================
   逐雲網路 — Design Tokens
   概念：藍圖紙（Blueprint）— 深藍圖紙 + 青線節點圖，
   象徵把客戶分散的系統節點串成一朵可落地的雲。
   ========================================================= */
:root{
  /* 色彩 */
  --navy-deep:  #0B2033;
  --navy:       #123049;
  --navy-line:  #23496B;
  --cyan-line:  #8FC4D6;
  --cyan-soft:  #C7E3EB;
  --paper:      #EFEAE0;
  --paper-2:    #E4DECF;
  --paper-3:    #F7F4EC;
  --ink:        #1C2530;
  --ink-soft:   #4A5560;
  --jade:       #3F7D6B;
  --jade-dark:  #2E5C4F;
  --amber:      #D9922F;
  --line-hair:  rgba(28,37,48,0.12);

  /* 字體 */
  --font-display: 'Noto Serif TC', 'Georgia', serif;
  --font-body:    'Noto Sans TC', -apple-system, 'PingFang TC', sans-serif;
  --font-mono:    'JetBrains Mono', 'Menlo', monospace;

  /* 節奏 */
  --radius: 3px;
  --gap: clamp(1.25rem, 2.5vw, 2.5rem);
  --section-pad: clamp(4rem, 8vw, 7rem);
  --maxw: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}
h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 900; }
h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1.1em; color: var(--ink-soft); }
a{ color: inherit; }
img{ max-width:100%; display:block; }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

/* 工具排版：mono 標籤／案例編號／眉標 */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jade);
  display:inline-flex;
  align-items:center;
  gap: 0.5em;
  margin-bottom: 0.9em;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--jade);
  display:inline-block;
}
.on-dark .eyebrow{ color: var(--cyan-line); }
.on-dark .eyebrow::before{ background: var(--cyan-line); }
.section-navy .eyebrow{ color: var(--cyan-line); }
.section-navy .eyebrow::before{ background: var(--cyan-line); }

.mono{ font-family: var(--font-mono); }

/* 按鈕 */
.btn{
  display:inline-flex; align-items:center; gap:0.5em;
  font-family: var(--font-body); font-weight:700; font-size: 0.95rem;
  padding: 0.85em 1.6em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:focus-visible{ outline: 3px solid var(--amber); outline-offset: 2px; }
.btn-primary{ background: var(--jade); color:#fff; }
.btn-primary:hover{ background: var(--jade-dark); transform: translateY(-1px); }
.btn-ghost{ background: transparent; color: var(--paper-3); border-color: rgba(247,244,236,0.5); }
.btn-ghost:hover{ border-color: var(--cyan-line); color: var(--cyan-line); }
.btn-outline-ink{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline-ink:hover{ background: var(--ink); color: #fff; }

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--navy-deep);
  border-bottom: 1px solid var(--navy-line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.logo{
  display:flex; align-items:center; gap:0.7em;
  text-decoration:none; color: var(--paper-3);
  font-family: var(--font-display); font-weight:900; font-size:1.25rem;
}
.logo .mark{ width:30px; height:30px; flex:none; }
.logo .mark circle{ fill:none; stroke: var(--cyan-line); stroke-width:1.4; }
.logo .mark path{ stroke: var(--amber); stroke-width:1.6; fill:none; }

.main-nav ul{ list-style:none; display:flex; gap: 2.1rem; margin:0; padding:0; }
.main-nav a{
  text-decoration:none; color: var(--cyan-soft); font-size:0.95rem; font-weight:500;
  position:relative; padding: 0.3em 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background: var(--amber); transition: right 0.2s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ right:0; }
.main-nav a.active{ color:#fff; }

.main-nav a.lang-link{
  border: 1px solid rgba(199,227,235,0.4); border-radius: 3px; padding: 0.3em 0.7em; font-size: 0.78rem;
}
.main-nav a.lang-link::after{ display:none; }
.main-nav a.lang-link:hover{ border-color: var(--amber); color: var(--amber); }

.header-cta{ display:flex; align-items:center; gap:1.4rem; }
.nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer; }

@media (max-width: 880px){
  .main-nav{
    position:fixed; inset: 76px 0 0 0; background: var(--navy-deep);
    transform: translateY(-110%); transition: transform 0.25s ease;
    padding: 2rem clamp(1.25rem,4vw,2.5rem); overflow-y:auto;
  }
  .main-nav.open{ transform: translateY(0); }
  .main-nav ul{ flex-direction:column; gap:1.5rem; }
  .header-cta .btn-primary{ display:none; }
  .nav-toggle{ display:block; }
}

/* =========================================================
   Hero — Blueprint 節點連結圖（Signature element）
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  background: var(--navy);
  color: var(--paper-3);
  padding: clamp(4.5rem,10vw,7.5rem) 0 clamp(3.5rem,7vw,5.5rem);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--navy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity:0.35;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 40%, transparent 85%);
}
.hero-grid{
  position:relative; display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--gap); align-items:center;
}
@media (max-width: 940px){ .hero-grid{ grid-template-columns: 1fr; } }

.hero h1{ color:#fff; margin-bottom:0.5em; }
.hero h1 em{ font-style:normal; color: var(--cyan-line); }
.hero .lead{ color: var(--cyan-soft); font-size:1.08rem; max-width:46ch; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; }

.hero-diagram{ position:relative; }
.hero-diagram svg{ width:100%; height:auto; }
.hero-diagram .node{ fill: var(--navy-deep); stroke: var(--cyan-line); stroke-width:1.4; }
.hero-diagram .node-core{ fill: var(--amber); stroke: var(--amber); }
.hero-diagram .link{
  fill:none; stroke: var(--cyan-line); stroke-width:1.2; stroke-dasharray: 4 4;
  stroke-dashoffset: 200; animation: dash 3.2s linear infinite;
}
.hero-diagram .label{ font-family: var(--font-mono); font-size:9px; fill: var(--cyan-soft); }
@keyframes dash{ to{ stroke-dashoffset: 0; } }

.hero-stats{ display:flex; gap: clamp(1.5rem,3vw,2.8rem); margin-top: 2.5rem; flex-wrap:wrap; }
.hero-stats .stat b{ font-family: var(--font-display); font-size:1.9rem; color:#fff; display:block; }
.hero-stats .stat span{ font-size:0.82rem; color: var(--cyan-soft); font-family: var(--font-mono); }

/* =========================================================
   Section rhythm
   ========================================================= */
section{ padding: var(--section-pad) 0; }
.section-paper{ background: var(--paper); }
.section-paper-2{ background: var(--paper-2); }
.section-navy{ background: var(--navy-deep); color: var(--paper-3); }
.section-navy p{ color: var(--cyan-soft); }
.section-navy h2{ color:#fff; }

.section-head{ max-width: 62ch; margin-bottom: clamp(2rem,4vw,3.2rem); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.divider-dash{
  border:none; height:1px;
  background: repeating-linear-gradient(90deg, var(--line-hair) 0 8px, transparent 8px 16px);
  margin: 0;
}

/* =========================================================
   Service nodes（服務＝可組合的系統節點，呼應品牌概念）
   ========================================================= */
.svc-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1px;
  background: var(--line-hair); border: 1px solid var(--line-hair);
}
.svc-card{
  background: var(--paper); padding: 2.2rem 1.7rem; position:relative;
  transition: background 0.2s ease;
}
.svc-card:hover{ background: var(--paper-3); }
.svc-card .code{ font-family: var(--font-mono); font-size:0.75rem; color: var(--jade); letter-spacing:0.08em; }
.svc-card h3{ margin: 0.6em 0 0.5em; }
.svc-card p{ font-size:0.93rem; margin-bottom:0.8em; }
.svc-card ul{ margin:0; padding-left:1.1em; font-size:0.87rem; color: var(--ink-soft); }
.svc-card ul li{ margin-bottom:0.35em; }
.svc-card a.svc-link{ font-family: var(--font-mono); font-size:0.8rem; color: var(--ink); text-decoration:none; border-bottom:1px solid var(--jade); }

/* =========================================================
   About / 流程
   ========================================================= */
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width: 880px){ .about-grid{ grid-template-columns:1fr; } }
.process-list{ list-style:none; margin:0; padding:0; counter-reset: step; }
.process-list li{
  display:grid; grid-template-columns: 3rem 1fr; gap:1rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line-hair);
}
.process-list li:first-child{ border-top: 1px solid var(--line-hair); }
.process-list .num{ font-family: var(--font-mono); color: var(--jade); font-weight:700; }
.process-list h4{ font-family: var(--font-body); font-weight:700; margin:0 0 0.3em; font-size:1.02rem; }
.process-list p{ margin:0; font-size:0.9rem; }

/* =========================================================
   Founder（創辦人介紹）
   ========================================================= */
.founder-card{
  display:grid; grid-template-columns: 220px 1fr; gap: 2.2rem; align-items:start;
  background: var(--paper-3); border:1px solid var(--line-hair); border-radius: var(--radius);
  padding: 2.2rem;
}
@media (max-width: 680px){ .founder-card{ grid-template-columns: 1fr; } }
.founder-avatar{
  width:100%; aspect-ratio:1/1; border-radius: 50%; background: var(--navy);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.founder-avatar svg{ width:56%; }
.founder-badge{ font-family: var(--font-mono); font-size:0.75rem; color: var(--jade); display:block; margin-bottom:0.4em; }
.skill-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:0.9rem 1.6rem; margin-top:1.4rem; }
@media (max-width: 480px){ .skill-grid{ grid-template-columns:1fr; } }
.skill-grid dt{ font-family: var(--font-mono); font-size:0.72rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; }
.skill-grid dd{ margin:0.2em 0 0; font-size:0.92rem; font-weight:500; }
.solo-note{
  margin-top:1.6rem; padding:0.9rem 1.1rem; background: var(--paper-2); border-left:3px solid var(--jade);
  font-size:0.87rem; border-radius: 0 var(--radius) var(--radius) 0;
}

/* =========================================================
   Portfolio cards（案例＝規格表卡片）
   ========================================================= */
.case-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
@media (max-width: 980px){ .case-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .case-grid{ grid-template-columns: 1fr; } }
.case-card{
  background: var(--paper-3); border:1px solid var(--line-hair); border-radius: var(--radius);
  padding: 1.6rem; display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.case-card:hover{ border-color: var(--jade); transform: translateY(-3px); }
.case-card .tag-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.case-card .proj-id{ font-family: var(--font-mono); font-size:0.75rem; color: var(--jade); }
.case-card .cat{ font-family: var(--font-mono); font-size:0.7rem; background: var(--paper-2); padding:0.2em 0.6em; border-radius: 2px; color: var(--ink-soft); }
.case-card h3{ margin: 0 0 0.5em; font-size:1.1rem; }
.case-card p{ font-size:0.9rem; flex:1; }
.case-card .result{ font-family: var(--font-mono); font-size:0.8rem; color: var(--jade-dark); border-top:1px solid var(--line-hair); padding-top:0.8em; margin-top:0.6em; }

/* =========================================================
   Blog cards
   ========================================================= */
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.8rem; }
@media (max-width: 980px){ .blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .blog-grid{ grid-template-columns: 1fr; } }
.blog-card{ text-decoration:none; color:inherit; display:block; }
.blog-card .thumb{
  aspect-ratio: 16/10; background: var(--navy); border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:1rem;
  position:relative;
}
.blog-card .thumb svg{ width:70%; opacity:0.85; }
.blog-card .meta{ font-family: var(--font-mono); font-size:0.75rem; color: var(--jade); display:flex; gap:0.8em; margin-bottom:0.5em; }
.blog-card h3{ font-size:1.05rem; margin-bottom:0.4em; }
.blog-card p{ font-size:0.88rem; }

.post-body{ max-width: 72ch; margin: 0 auto; }
.post-body h2{ margin-top:1.6em; }
.post-body h3{ margin-top:1.3em; }
.post-body ul, .post-body ol{ color: var(--ink-soft); }
.post-hero-meta{ font-family: var(--font-mono); font-size:0.82rem; color: var(--jade); margin-bottom:0.6em; }
.post-faq{ margin-top:2.4rem; }
.post-faq details{ border-bottom:1px solid var(--line-hair); padding: 1rem 0; }
.post-faq summary{ cursor:pointer; font-weight:700; font-family:var(--font-body); list-style:none; display:flex; justify-content:space-between; }
.post-faq summary::-webkit-details-marker{ display:none; }
.post-faq summary::after{ content:"+"; font-family:var(--font-mono); color:var(--jade); }
.post-faq details[open] summary::after{ content:"–"; }
.post-faq .a{ margin-top:0.7em; color: var(--ink-soft); }

/* =========================================================
   Contact / Form
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); }
@media (max-width: 880px){ .contact-grid{ grid-template-columns:1fr; } }
.info-list{ list-style:none; padding:0; margin: 1.6rem 0; }
.info-list li{ display:flex; gap:0.9rem; padding:0.7rem 0; border-bottom:1px solid var(--line-hair); font-size:0.95rem; }
.info-list b{ font-family: var(--font-mono); font-size:0.75rem; color: var(--jade); min-width:5.5em; padding-top:0.2em; }

.form-group{ margin-bottom:1.3rem; }
.form-group label{ display:block; font-size:0.85rem; font-weight:700; margin-bottom:0.5em; }
.form-group .required{ color:#b0432f; }
.form-control{
  width:100%; padding:0.85em 1em; font-family:var(--font-body); font-size:0.95rem;
  border:1px solid var(--line-hair); border-radius: var(--radius); background:#fff; color:var(--ink);
}
.form-control:focus{ outline:2px solid var(--jade); outline-offset:1px; border-color:var(--jade); }
textarea.form-control{ resize:vertical; min-height:130px; }
.honeypot-field{ position:absolute; left:-9999px; top:-9999px; }
.form-note{ font-size:0.8rem; color: var(--ink-soft); }
.form-msg{ padding:0.9em 1.1em; border-radius: var(--radius); font-size:0.9rem; margin-bottom:1.2rem; display:none; }
.form-msg.success{ background:#e4f0ec; color: var(--jade-dark); display:block; }
.form-msg.error{ background:#f6e7e3; color:#a1442d; display:block; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background: var(--navy-deep); color: var(--cyan-soft); padding: 3.5rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2.5rem; }
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h4{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.1em; color:#fff; text-transform:uppercase; margin-bottom:1em; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:0.7em; font-size:0.88rem; }
.footer-grid a{ text-decoration:none; color: var(--cyan-soft); }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--navy-line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:0.78rem; color:#6f92a8; font-family: var(--font-mono);
}

/* Skip link (a11y) */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--jade); color:#fff; padding:0.8em 1.2em; z-index:100;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* reveal on scroll */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in{ opacity:1; transform:none; }