/* Farlinko — minimal, tech-forward theme (no framework) */
:root{
  --bg:#0b1220; 
  --card:#101829f2; 
  --text: var(--text); 
  --muted:#a9b7d0; 

  /* 主色直接用 theme.css 里的变量 */
  --accent: var(--primary);
  --ring: color-mix(in srgb, var(--primary) 35%, transparent);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(1200px 600px at 20% 0%, color-mix(in srgb, var(--primary-300) 6%, transparent), transparent 60%),
              radial-gradient(1200px 600px at 80% 100%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 60%),
              linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
              linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px),
              var(--bg);
  background-size: 40px 40px, 40px 40px, 40px 40px, 40px 40px, auto;
  color: var(--text);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
header.nav{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--surface) 85%, transparent); border-bottom:1px solid var(--line);
}
.nav .inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.logo{display:flex;gap:10px; align-items:center; text-decoration:none; color:var(--text)}
.logo-mark{width:36px;height:36px;border-radius:12px;
  background: linear-gradient(90deg, var(--primary-700), var(--primary), var(--primary-300));
}
.logo .brand{font-weight:800; letter-spacing:.3px}
.logo .tag{font-size:12px; color:var(--muted)}
.nav a.link{color:#cbd5e1; text-decoration:none; padding:8px 10px; border-radius:10px}
.nav a.link:hover{background:rgba(255,255,255,.08); color:white}
.nav .cta{
  background: var(--primary);
  color:white; 
  padding:10px 14px; 
  border-radius:12px; 
  text-decoration:none; 
  font-weight:700
}
.nav .cta:hover{filter:brightness(1.05)}
.hero{padding:64px 0}
.h1{font-size:40px; line-height:1.2; font-weight:800}
.sub{color:var(--muted); max-width:800px}
.badge{display:inline-flex; gap:8px; align-items:center; font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#d1d5db}
.badge .dot{width:8px; height:8px; border-radius:999px; background: var(--primary-400)}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns: repeat(2, minmax(0,1fr));}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr));}
.grid-4{grid-template-columns: repeat(4, minmax(0,1fr));}
@media (max-width: 960px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .h1{font-size:32px} }
.card{background:var(--card); border:1px solid rgba(255,255,255,.08); padding:18px; border-radius:18px; box-shadow: 0 10px 30px rgba(0,0,0,.15)}
.card .title{font-weight:700}
.card .muted{color: var(--text-muted);}
.pill{display:inline-block; padding:6px 10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:999px; font-size:12px; color:#e2e8f0}
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; 
  padding:12px 16px; border-radius:12px; text-decoration:none; 
  font-weight:700; color:white; background: var(--primary)
}
.button.ghost{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#e2e8f0}
.button:hover{filter:brightness(1.05)}
.section{padding:48px 0}
footer{margin-top:64px; border-top:1px solid rgba(255,255,255,.08)}
footer .small{font-size:12px; color:#8aa0bf}
input,select,textarea{
  width:100%; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); color:var(--text); outline:none;
}
input::placeholder, textarea::placeholder{color:#93a2b8}
.field{margin-bottom:14px}
label{font-size:14px; display:block; margin-bottom:8px}
.form-note{font-size:12px; color:#9fb1cf}
.success{color:#34d399; font-size:14px}
.error{color:#fca5a5; font-size:14px}
.kicker{font-size:14px; color:#9fb1cf}
.list{padding-left:18px}
.list li{margin:6px 0}
hr.sep{border:0; border-top:1px solid rgba(255,255,255,.08); margin:22px 0}



/* === Visual polish & whitespace tightening (2025-09 update) === */

/* Use consistent light surface tokens from theme.css */
:root{
  --card: #FFFFFF;
}

/* Softer background with subtle gradient; remove heavy dark radial */
body{
  background:
    radial-gradient(900px 420px at 10% -10%, color-mix(in srgb, var(--primary-100) 60%, transparent), transparent 70%),
    radial-gradient(900px 420px at 100% 110%, color-mix(in srgb, var(--primary-50) 70%, transparent), transparent 70%),
    var(--bg);
  color: var(--text);
}

/* Layout rhythm */
.container{max-width:1120px; padding:0 20px; margin-inline:auto}
.section{padding:40px 0}
.hero{
  padding:56px 0 48px;
  min-height:60vh;
  display:grid;
  align-items:center;
}

/* Grids spacing */
.grid{gap:24px}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  box-shadow: 0 6px 16px rgba(16,24,40,.04);
  border-radius:16px;
}
.card .muted{color:var(--text-muted)}

/* Headings */
.h1, h1{font-size:44px; line-height:1.15; letter-spacing:-0.02em; margin:0 0 12px}
.p-lead{font-size:18px; line-height:1.7; color:var(--text-muted); margin:8px 0 24px}

/* Buttons */
.btn, .cta, .nav .cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 18px; border-radius:12px; gap:10px;
  font-weight:600; text-decoration:none; border:1px solid var(--primary-300);
  background:linear-gradient(180deg, var(--primary-400), var(--primary-600));
  color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 8px 20px var(--primary-a12);
}
.btn.secondary{background:#fff; color:var(--text); border:1px solid var(--line)}

/* Nav compaction */
.nav .inner{padding:10px 0}
header.nav{background:rgba(255,255,255,.6); backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid var(--line)}

/* Region cards equal height */
.region-card{display:flex; flex-direction:column}
.region-card p{margin-top:8px; color:var(--text-muted)}
.region-card a{color:inherit; text-decoration:none}
.region-card:hover{transform:translateY(-2px); transition:transform .2s ease}

/* Footer spacing */
footer{margin-top:40px}



/* === Compact fix (v2) — tighter hero, higher contrast, fewer gradients === */

/* 1) Remove heavy decorative gradients to avoid "washed" look */
body{
  background: var(--bg);
  color: var(--text);
}

/* 2) Stronger muted text for readability on light bg */
:root{
  --text-muted: #334155; /* slate-700 */
}

/* 3) Hero: shorter, denser, no forced min height */
.hero{
  padding: 28px 0 24px;
  min-height: auto;
}

/* 4) General section spacing tighter */
.section{ padding: 32px 0; }

/* 5) Headings & lead text: increase contrast & compact spacing */
.h1, h1{ font-size: 40px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--text); }
.p-lead{ font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 6px 0 18px; }

/* 6) Buttons: keep primary look but reduce drop shadow */
.btn, .cta, .nav .cta{
  box-shadow: 0 6px 14px var(--primary-a10);
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
}

/* 7) Cards: slightly smaller radius & shadow */
.card{
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(16,24,40,.05);
}

/* 8) Grid gap tuned for desktop; mobile仍保持单列 */
.grid{ gap: 20px; }

/* 9) Nav: 更薄、更紧凑 */
.nav .inner{ padding: 8px 0; }
header.nav{ background: rgba(255,255,255,.75); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }

/* 10) Footer间距缩短 */
footer{ margin-top: 28px; }



/* === Pro B2B Design System (v3) ========================================= */
:root{
  --brand-900:#0B1B3A; --brand-800:#112A56; --brand-700:#183B78;
  --brand-600:#1F4C9A; --brand-500:#2357FF; --brand-400:#5A7BFF;
  --brand-300:#B8C6FF; --brand-200:#E6ECFF; --brand-100:#F4F7FF;

  --bg:#ffffff;
  --surface:#ffffff;
  --panel:#F7F9FC;
  --line:#E6EAF2;

  --text:#0F172A;           /* slate-900 */
  --text-2:#334155;         /* slate-700 */
  --text-3:#64748B;         /* slate-500 */

  --radius:12px;
  --shadow-sm:0 2px 8px rgba(15,23,42,.04);
  --shadow-md:0 8px 24px rgba(15,23,42,.06);
}

/* Reset some earlier dark-theme overrides */
body{ background:var(--bg); color:var(--text); }
a{ color: var(--brand-600); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Layout */
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.section{ padding:56px 0; }

/* Typography */
.h1,h1{ font-size:48px; line-height:1.15; letter-spacing:-0.02em; margin:0 0 12px; color:var(--text); }
.h2,h2{ font-size:28px; line-height:1.3; letter-spacing:-0.01em; margin:0 0 12px; color:var(--text); }
.p-lead{ font-size:18px; line-height:1.7; color:var(--text-2); margin:10px 0 22px; }

/* Buttons */
.btn, .cta, .nav .cta{
  height:44px; padding:0 18px; border-radius:10px; display:inline-flex; align-items:center; gap:10px;
  border:1px solid #1e40af1a; background:linear-gradient(180deg,var(--brand-500),#1e40af);
  color:#fff; font-weight:600; box-shadow:var(--shadow-md);
}
.btn.secondary{ background:#fff; color:var(--text); border:1px solid var(--line); box-shadow:var(--shadow-sm) }
.btn.ghost{ background: transparent; border:1px solid var(--line); color: var(--text); }

/* Nav */
header.nav{ background:#ffffffd6; backdrop-filter: blur(8px); border-bottom:1px solid var(--line); }
.nav .inner{ padding:10px 0; }
.nav a.link{ color: var(--text-2); }
.nav a.link:hover{ background:#f1f5f9; }

/* Hero split layout */
.hero{ padding:56px 0 48px; }
.hero .grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap:48px; align-items:center; }
.hero .eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:var(--brand-100); color:var(--brand-700); border:1px solid var(--brand-200); font-size:12px; }
.hero .visual{ background: radial-gradient(120px 120px at 20% 20%, var(--brand-200), transparent 60%), radial-gradient(140px 140px at 80% 60%, var(--brand-100), transparent 60%), #fff; border:1px solid var(--line); border-radius:16px; box-shadow: var(--shadow-md); height:320px; display:flex; align-items:center; justify-content:center; }
.hero .visual svg{ width:80%; height:80%; }

/* KPI strip */
.kpis{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:18px; }
.kpi{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow: var(--shadow-sm); }
.kpi .num{ font-size:28px; font-weight:800; color: var(--brand-600); }
.kpi .cap{ font-size:13px; color: var(--text-3); }

/* Logo wall */
.logo-wall{ display:flex; flex-wrap: wrap; gap:18px 28px; align-items:center; opacity:.8 }
.logo-wall img{ height:26px; filter: grayscale(1); opacity:.85 }
.logo-wall img:hover{ filter:none; opacity:1 }

/* Cards */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow: var(--shadow-sm);
}
.card .title{ font-weight:700; }
.card .muted{ color: var(--text-2); }

/* Regions */
.region-card{ display:flex; flex-direction:column; justify-content:space-between; min-height:160px; }
.region-card p{ color: var(--text-2); }

/* CTA banner */
.cta-banner{ background:linear-gradient(180deg, #fff, var(--brand-100)); border:1px solid var(--brand-200); border-radius:16px; padding:24px; box-shadow: var(--shadow-sm); }

/* Footer */
footer{ margin-top:48px; border-top:1px solid var(--line) }
footer .small{ color: var(--text-3); }

@media (max-width: 960px){
  .hero .grid{ grid-template-columns: 1fr; gap:24px; }
  .kpis{ grid-template-columns: 1fr; }
}
/* ======================================================================= */