/* ============================================================
   灵流 SyncFlow · features.css
   设计系统：OKLCH 暖米 + 墨绿 + 橙红单一强调
   字体：Fraunces (display) + Plus Jakarta Sans (body) + JetBrains Mono (label)
   与 /hub /features/index.html 同源
   ============================================================ */

/* 字体通过 HTML <link> 注入（preconnect + stylesheet），非 CSS @import，避免阻塞解析 */

:root{
  --bg:        oklch(98% 0.012 80);
  --bg-2:      oklch(95% 0.018 80);
  --ink:       oklch(18% 0.03 160);
  --ink-2:     oklch(42% 0.025 160);
  --ink-3:     oklch(58% 0.012 160);
  --line:      oklch(88% 0.012 80);
  --line-2:    oklch(80% 0.015 80);
  --accent:    oklch(60% 0.18 35);
  --accent-2:  oklch(94% 0.04 35);
  --font-display: 'Fraunces', 'Source Serif Pro', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, system-ui, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  font-size:16px; line-height:1.65; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent-2); color:var(--ink); }
a{ color:inherit; }

/* ---- layout ---- */
.wrap{ max-width:1280px; margin:0 auto; padding:0 var(--s-6); }
@media(max-width:720px){ .wrap{ padding:0 var(--s-5); } }

/* ---- topbar (sticky nav, contained) ---- */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--s-5) 0;
  border-bottom:1px solid var(--line);
  position:sticky; top:0;
  background:oklch(98% 0.012 80 / 0.88);
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  z-index:100;
  flex-wrap:wrap; gap:var(--s-3);
  margin-bottom:var(--s-7);
}
.brand{
  font-family:var(--font-display);
  font-size:22px; font-weight:500; letter-spacing:-0.01em;
  color:var(--ink); text-decoration:none;
  display:inline-flex; align-items:baseline; gap:6px;
}
.brand::before{
  content:''; width:8px; height:8px; background:var(--accent);
  border-radius:50%; display:inline-block; transform:translateY(-1px);
}
.nav{ display:flex; gap:var(--s-5); align-items:center; flex-wrap:wrap; }
.nav a{
  color:var(--ink-2); text-decoration:none;
  font-size:14.5px; font-weight:500;
  padding:4px 0; border:1px solid transparent; border-radius:0;
  transition:color 200ms ease-out, border-color 200ms ease-out;
}
.nav a:hover{ color:var(--ink); border-bottom:1px solid var(--ink); }
.nav a.active{ color:var(--ink); border-bottom:1px solid var(--accent); }

/* ---- breadcrumb ---- */
.breadcrumb{
  font-family:var(--font-mono); font-size:12px; font-weight:400;
  color:var(--ink-3); letter-spacing:0.04em;
  margin-bottom:var(--s-6);
}
.breadcrumb a{ color:var(--ink-3); text-decoration:none; transition:color 200ms; }
.breadcrumb a:hover{ color:var(--accent); }

/* ---- hero ---- */
header.hero{
  text-align:left;
  margin-bottom:var(--s-8);
  padding:var(--s-7) 0 var(--s-6);
  border-bottom:1px solid var(--line);
}
header.hero h1{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 30,"opsz" 144;
  font-weight:400;
  font-size:clamp(40px,6vw,80px);
  line-height:0.98; letter-spacing:-0.04em;
  margin:0 0 var(--s-5);
  text-wrap:balance;
  background:none; -webkit-text-fill-color:unset; -webkit-background-clip:unset;
  color:var(--ink);
}
header.hero p{
  font-size:clamp(17px,1.5vw,20px); line-height:1.55;
  color:var(--ink-2); max-width:58ch; margin:0;
  text-wrap:pretty;
}

/* ---- section ---- */
section{ margin:var(--s-8) 0; }
section h2{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 30,"opsz" 144;
  font-weight:400;
  font-size:clamp(24px,3vw,36px); line-height:1.15;
  letter-spacing:-0.02em; margin:0 0 var(--s-3);
  color:var(--ink);
}
section h2::before{ content:none; display:none; }
section .sec-sub{
  font-size:15px; color:var(--ink-2); margin-bottom:var(--s-6);
  max-width:58ch;
}

/* ---- cards grid (feat-grid style) ---- */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2);
}
@media(max-width:960px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .cards{ grid-template-columns:1fr; } }

.card{
  background:var(--bg); padding:var(--s-6) var(--s-6) var(--s-5);
  text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:var(--s-3);
  min-height:200px; position:relative;
  border:none; border-radius:0;
  transition:background 200ms ease-out;
}
.card:hover{ background:var(--bg-2); transform:none; border-color:transparent; }
.card .ico{ font-size:28px; margin-bottom:var(--s-1); line-height:1; }
.card h3{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 20,"opsz" 60;
  font-weight:400; font-size:22px; line-height:1.2;
  letter-spacing:-0.01em; margin:0; color:var(--ink);
}
.card p{ color:var(--ink-2); font-size:14.5px; line-height:1.55; margin:0; flex:1; }
.card .arrow{
  font-family:var(--font-mono); font-size:12px;
  color:var(--ink-3); margin-top:var(--s-3);
  display:inline-flex; align-items:center; gap:4px;
  transition:color 200ms;
}
.card .arrow::after{ content:'\2192'; transition:transform 200ms; }
.card:hover .arrow{ color:var(--accent); }
.card:hover .arrow::after{ transform:translateX(4px); }

/* ---- cta ---- */
.cta{
  margin-top:var(--s-9); padding:var(--s-7) var(--s-6);
  background:var(--accent-2);
  border:1px solid var(--line); border-radius:0;
  text-align:left;
}
.cta h3{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 30,"opsz" 144;
  font-weight:400; font-size:clamp(24px,3vw,36px);
  line-height:1.15; letter-spacing:-0.02em;
  margin:0 0 var(--s-3); color:var(--ink);
}
.cta p{ color:var(--ink-2); margin:0 0 var(--s-5); font-size:15.5px; max-width:48ch; }
.cta a{
  display:inline-block;
  background:var(--accent); color:oklch(98% 0.012 80);
  font-family:var(--font-body); font-weight:600;
  padding:14px 28px; border-radius:0; border:none;
  text-decoration:none; font-size:15px;
  margin:0 var(--s-2) 0 0;
  transition:background 200ms ease-out;
}
.cta a:hover{ background:oklch(55% 0.18 35); }
.cta a.alt{
  background:transparent; border:1px solid var(--line-2);
  color:var(--ink);
}
.cta a.alt:hover{ border-color:var(--accent); color:var(--accent); background:transparent; }

/* ---- footer ---- */
footer{
  margin-top:var(--s-9); padding:var(--s-6) 0;
  border-top:1px solid var(--line);
  text-align:left;
  font-family:var(--font-mono); font-size:12px;
  color:var(--ink-3); letter-spacing:0.05em;
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:var(--s-4);
}
footer a{
  color:var(--ink-2); text-decoration:none;
  margin-right:var(--s-4); transition:color 200ms;
}
footer a:hover{ color:var(--accent); }

/* ---- responsive ---- */
@media(max-width:640px){
  header.hero h1{ font-size:36px; }
  header.hero p{ font-size:16px; }
  .topbar{ padding:var(--s-4) 0; }
  .nav{ gap:var(--s-4); }
  .nav a{ font-size:13px; }
  .cta{ padding:var(--s-5) var(--s-4); }
}

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}