/* =========================================
   FAKA178 – SaaS / Payment Grade UI
   ========================================= */

:root{
  --bg:#020617;
  --panel:#0b1220;
  --panel-soft:#0f172a;
  --border:rgba(148,163,184,.16);
  --primary:#38bdf8;
  --primary-strong:#2563eb;
  --text:#e5e7eb;
  --muted:#94a3b8;
}

*{box-sizing:border-box}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Noto Sans TC',system-ui,-apple-system;
}

/* ===== Header：SaaS 等級 ===== */

header,.site-header{
  position:sticky;
  top:0;
  z-index:1300;
  background:rgba(2,6,23,.65)!important;
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:all .3s ease;
}

header.scrolled,.site-header.scrolled{
  box-shadow:0 10px 40px rgba(56,189,248,.25);
}

.navbar-nav>li>a{
  color:var(--muted)!important;
  font-weight:500;
}

.navbar-nav>li>a:hover,
.navbar-nav>li.active>a{
  color:var(--primary)!important;
}

/* ===== HERO ===== */

.hero-tech{
  min-height:80vh;
  padding:120px 0 90px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(55% 40% at 70% 15%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(45% 45% at 25% 85%, rgba(99,102,241,.14), transparent 60%),
    linear-gradient(180deg,#020617,#020617);
}

.hero-title{
  font-size:3.2rem;
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:18px;
}

.hero-sub{
  font-size:1.05rem;
  color:var(--muted);
  max-width:560px;
  margin:0 auto 34px;
}

/* CTA */

.hero-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-bottom:60px;
}

.btn-tech{
  background:linear-gradient(135deg,var(--primary-strong),var(--primary));
  color:#fff;
  padding:14px 38px;
  border-radius:999px;
  font-weight:600;
  box-shadow:0 0 40px rgba(56,189,248,.35);
}

.btn-tech-outline{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  padding:14px 38px;
  border-radius:999px;
}

/* ===== Feature Cards ===== */

.hero-features{
  max-width:980px;
  margin:0 auto;
}

.tech-card{
  background:linear-gradient(180deg,var(--panel-soft),var(--panel));
  border:1px solid var(--border);
  border-radius:22px;
  padding:30px;
  height:100%;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.tech-card:hover{
  transform:translateY(-6px);
  border-color:rgba(56,189,248,.45);
  box-shadow:0 30px 80px rgba(2,6,23,.8),0 0 40px rgba(56,189,248,.25);
}

.tech-card h5{
  font-weight:700;
  margin-bottom:10px;
}

.tech-card p{
  color:var(--muted);
  font-size:.95rem;
}

/* ===== 商業區 ===== */

.saas-section{
  padding:90px 0 70px;
  background:#020617;
}

.saas-title{
  font-size:2.2rem;
  font-weight:800;
  margin-bottom:12px;
}

.saas-desc{
  color:var(--muted);
  font-size:1rem;
}

/* ===== Mobile ===== */

@media (max-width:768px){

  .hero-tech{
    padding:100px 16px 60px;
    min-height:auto;
  }

  .hero-title{
    font-size:2.2rem;
  }

  .hero-actions{
    flex-direction:column;
  }

  .tech-card{
    margin-bottom:14px;
  }
}
/* =====================================
   強制覆蓋 Landrick 內建 Nunito 載入
   解決 css-Nunito***.css 404 問題
===================================== */

/* 阻止任何 @import Nunito 本地 css */
@font-face {
    font-family: 'Nunito';
    src: local('Nunito');
}

/* 全站指定字型來源（不再觸發 land2 fallback） */
body,
h1, h2, h3, h4, h5, h6,
.navbar,
button,
input,
textarea {
    font-family: 'Nunito','Noto Sans TC',system-ui,-apple-system,sans-serif !important;
}