/* ============================================================
   FinLinux OS — shared stylesheet
   ============================================================ */
:root{
  --navy-900:#081222;
  --navy-800:#0b1f3a;
  --navy-700:#122a4d;
  --navy-600:#1a3a66;
  --ice-400:#5fc4f0;
  --ice-500:#2fa8e0;
  --ice-600:#1c86ba;
  --steel-300:#c7d2e0;
  --steel-500:#7c8aa0;
  --steel-700:#3d4a5f;
  --paper:#f6f8fb;
  --white:#ffffff;
  --ink:#101827;
  --ink-soft:#4b5567;
  --line:#e2e7ef;
  --ok-green:#1f9d63;
  --warn-amber:#c98a1f;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --radius: 10px;
  --shadow: 0 4px 18px rgba(8,18,34,.08);
  --shadow-lg: 0 12px 40px rgba(8,18,34,.16);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--ice-600); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
.container-wide{ max-width:1400px; margin:0 auto; padding:0 40px; }
.container-narrow{ max-width:840px; margin:0 auto; padding:0 24px; }
h1,h2,h3,h4{ font-weight:750; line-height:1.2; color:var(--navy-800); margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:2.6rem; }
h2{ font-size:1.9rem; }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; color:var(--ink-soft); }
.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:700;
  color:var(--ice-600);
  margin-bottom:10px;
  display:block;
}
code, .code{
  font-family:var(--mono);
  background:#eef2f8;
  padding:2px 6px;
  border-radius:4px;
  font-size:.9em;
  color:var(--navy-700);
}
pre{
  background:var(--navy-900);
  color:#d9e6f5;
  padding:18px 20px;
  border-radius:var(--radius);
  overflow-x:auto;
  font-family:var(--mono);
  font-size:.86rem;
  line-height:1.6;
}
pre code{ background:none; padding:0; color:inherit; }
hr{ border:none; border-top:1px solid var(--line); margin:40px 0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:650;
  font-size:.95rem;
  padding:11px 22px;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .15s ease;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background:var(--ice-500); color:#fff; }
.btn-primary:hover{ background:var(--ice-600); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.btn-outline:hover{ background:rgba(255,255,255,.1); }
.btn-navy{ background:var(--navy-800); color:#fff; }
.btn-navy:hover{ background:var(--navy-700); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--navy-800); }
.btn-ghost:hover{ background:#eef2f8; }
.btn-sm{ padding:7px 14px; font-size:.82rem; }

/* ---------- Top utility bar ---------- */
.utility-bar{
  background:var(--navy-900);
  color:var(--steel-300);
  font-size:.78rem;
}
.utility-bar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:7px;
  padding-bottom:7px;
  gap:16px;
  flex-wrap:wrap;
}
.utility-bar a{ color:var(--steel-300); margin-left:16px; }
.utility-bar a:first-child{ margin-left:0; }
.utility-bar a:hover{ color:#fff; }

/* ---------- Header / Nav ---------- */
header.site-header{
  background:var(--navy-800);
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 14px rgba(0,0,0,.18);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}
.brand-mark{ width:36px; height:36px; display:block; }
.brand-word{
  font-family:var(--sans);
  font-weight:800;
  font-size:1.28rem;
  color:#fff;
  letter-spacing:-.02em;
}
.brand-word span{ color:var(--ice-400); }
nav.primary-nav{ flex:1; }
nav.primary-nav > ul{
  display:flex;
  align-items:center;
  gap:0px;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
nav.primary-nav > ul > li{ position:relative; }
nav.primary-nav > ul > li > a{
  display:flex;
  align-items:center;
  gap:4px;
  color:#dbe6f4;
  font-size:.88rem;
  font-weight:600;
  padding:9px 10px;
  border-radius:7px;
  white-space:nowrap;
}
nav.primary-nav > ul > li > a:hover{ background:rgba(255,255,255,.08); text-decoration:none; color:#fff; }
nav.primary-nav > ul > li.active > a{ color:#fff; background:rgba(95,196,240,.16); }
.chev{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .15s; flex:none; opacity:.8; }
.has-drop:hover .chev, .has-drop.open .chev{ transform:rotate(225deg) translateY(2px); }

.drop-panel{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  margin-top:8px;
  background:#fff;
  border-radius:12px;
  box-shadow:var(--shadow-lg);
  padding:14px;
  min-width:280px;
  z-index:50;
}
.drop-panel.wide{ min-width:520px; grid-template-columns:1fr 1fr; gap:4px; }
.has-drop:hover .drop-panel, .has-drop.open .drop-panel{ display:grid; }
.drop-link{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:9px 12px;
  border-radius:8px;
  color:var(--navy-800);
}
.drop-link:hover{ background:#eef4fb; text-decoration:none; }
.drop-link .dl-name{ font-weight:650; font-size:.9rem; }
.drop-link .dl-desc{ font-size:.76rem; color:var(--ink-soft); }

.nav-right{ display:flex; align-items:center; gap:8px; flex:none; margin-left:14px; }
.menu-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  width:40px;
  height:40px;
  padding:6px;
  border-radius:6px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
}
.menu-toggle:hover{ background:rgba(255,255,255,.08); }
.menu-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.has-drop{ position:relative; }
.lang-trigger{ gap:5px; }
.nav-gap-before{ margin-left:18px; }

nav.primary-nav > ul > li > a.lang-trigger{
  gap:6px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:20px;
  padding:6px 12px 6px 10px;
  font-size:.82rem;
  margin-left:2px;
}
nav.primary-nav > ul > li > a.lang-trigger:hover{ border-color:#5fc4f0; background:rgba(95,196,240,.14); color:#fff; }

.drop-panel.narrow{
  min-width:190px;
  max-height:340px;
  overflow-y:auto;
  right:0;
  left:auto;
  border-radius:10px;
  padding:6px;
}
.drop-panel.narrow .lang-link{ padding:10px 14px; }
.drop-panel.narrow .dl-name{ font-weight:550; font-size:.875rem; }

@media (max-width:980px){
  .nav-support-btn{ display:none; }
  .drop-panel.narrow{ right:auto; left:0; }
  .menu-toggle span{ background:#fff; }
}

@media (max-width:980px){
  nav.primary-nav{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--navy-800);
    padding:10px 20px 20px;
    max-height:80vh;
    overflow-y:auto;
  }
  nav.primary-nav.mobile-open{ display:block; }
  nav.primary-nav > ul{ flex-direction:column; align-items:stretch; }
  nav.primary-nav > ul > li > a{ padding:12px 4px; }
  .drop-panel{ position:static; box-shadow:none; background:rgba(255,255,255,.04); margin-top:4px; display:none !important; }
  .has-drop.open .drop-panel{ display:flex !important; flex-direction:column; }
  .drop-panel.wide{ grid-template-columns:1fr; }
  .drop-link .dl-name, .drop-link .dl-desc{ color:#e4ecf6; }
  .drop-link:hover{ background:rgba(255,255,255,.08); }
  .menu-toggle{ display:flex; }
  .nav-right .btn-outline{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(ellipse at top right, rgba(95,196,240,.25), transparent 55%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color:#fff;
  padding:76px 0 64px;
  text-align:center;
}
.hero h1{ color:#fff; font-size:3rem; max-width:820px; margin:0 auto .28em; }
.hero .lead{ color:var(--steel-300); font-size:1.18rem; max-width:640px; margin:0 auto 30px; }
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
.hero-note{ color:var(--steel-500); font-size:.82rem; margin-top:14px; }

.page-hero{
  background:linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color:#fff;
  padding:56px 0 48px;
}
.page-hero .eyebrow{ color:var(--ice-400); }
.page-hero h1{ color:#fff; margin-bottom:.35em; }
.page-hero .lead{ color:var(--steel-300); font-size:1.08rem; max-width:680px; }
.breadcrumb{ font-size:.8rem; color:var(--steel-500); margin-bottom:16px; font-family:var(--mono); }
.breadcrumb a{ color:var(--steel-300); }

/* ---------- Sections ---------- */
section{ padding:60px 0; }
section.tight{ padding:40px 0; }
.section-head{ text-align:center; max-width:680px; margin:0 auto 40px; }
.section-head.left{ text-align:left; margin:0 0 32px; }
.bg-navy{ background:var(--navy-800); color:#fff; }
.bg-navy h2, .bg-navy h3{ color:#fff; }
.bg-navy p{ color:var(--steel-300); }
.bg-alt{ background:#eef3f9; }

/* ---------- Grids / Cards ---------- */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
}
.card h3{ margin-bottom:8px; }
.card .icon-badge{
  width:44px; height:44px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--ice-500), var(--navy-700));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:1.1rem;
  margin-bottom:14px;
}
.card ul{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:.92rem; }
.card ul li{ margin-bottom:5px; }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:32px 0; }
.stat-cell{ background:#fff; padding:22px 16px; text-align:center; }
.stat-num{ font-size:1.8rem; font-weight:800; color:var(--navy-800); }
.stat-lbl{ font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-top:4px; }
@media (max-width:700px){ .stat-row{ grid-template-columns:1fr 1fr; } }

table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:.92rem; }
th,td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); }
th{ background:#eef3f9; color:var(--navy-800); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
tr:hover td{ background:#fafcfe; }
.table-wrap{ overflow-x:auto; }

.badge{ display:inline-block; font-family:var(--mono); font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; }
.badge-green{ background:#e3f6ec; color:var(--ok-green); }
.badge-amber{ background:#fbf0dd; color:var(--warn-amber); }
.badge-blue{ background:#e4f3fc; color:var(--ice-600); }
.badge-gray{ background:#eef1f5; color:var(--steel-700); }

.callout{ background:#eef4fb; border:1px solid #d3e4f4; border-left:4px solid var(--ice-500); border-radius:8px; padding:18px 20px; margin:26px 0; }
.callout-title{ font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--navy-700); margin-bottom:6px; }
.callout p:last-child{ margin-bottom:0; }
.callout-amber{ background:#fdf6e8; border-color:#f0dcae; border-left-color:var(--warn-amber); }

.toc-box{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin:0 0 34px; }
.toc-box .toc-title{ font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--ink-soft); margin-bottom:8px; }
.toc-box ol{ margin:0; padding-left:20px; columns:2; font-size:.88rem; }
.toc-box li{ margin-bottom:6px; break-inside:avoid; }
@media (max-width:640px){ .toc-box ol{ columns:1; } }

.download-card{ border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:#fff; }
.download-card h3{ display:flex; align-items:center; gap:10px; }
.download-card table{ margin:14px 0 0; font-size:.85rem; }
.download-card th, .download-card td{ padding:8px 10px; }

.logo-strip{ display:flex; flex-wrap:wrap; gap:36px; align-items:center; justify-content:center; }
.logo-strip .lg-item{ font-family:var(--mono); font-weight:700; color:var(--steel-500); font-size:1rem; letter-spacing:.02em; }

.timeline{ border-left:3px solid var(--ice-500); margin-left:8px; padding-left:26px; }
.timeline .tl-item{ position:relative; padding-bottom:28px; }
.timeline .tl-item::before{ content:''; position:absolute; left:-32px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--ice-500); border:3px solid #fff; box-shadow:0 0 0 2px var(--ice-500); }
.timeline .tl-date{ font-family:var(--mono); font-size:.76rem; color:var(--ice-600); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }

.faq-item{ border-bottom:1px solid var(--line); padding:18px 0; }
.faq-item:last-child{ border-bottom:none; }
.faq-item h3{ font-size:1.02rem; margin-bottom:8px; }

.blog-card{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden; }
.blog-card .bc-top{ height:6px; background:linear-gradient(90deg, var(--ice-500), var(--navy-700)); }
.blog-card .bc-body{ padding:20px; }
.blog-card .bc-meta{ font-family:var(--mono); font-size:.72rem; color:var(--steel-500); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }

.pill-list{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ background:#eef3f9; color:var(--navy-700); font-size:.78rem; font-weight:600; padding:5px 12px; border-radius:20px; }

/* ---------- Newsletter ---------- */
.newsletter{ background:var(--navy-900); color:#fff; text-align:center; }
.newsletter h2{ color:#fff; }
.newsletter-form{ display:flex; gap:10px; justify-content:center; max-width:440px; margin:22px auto 0; flex-wrap:wrap; }
.newsletter-form input{ flex:1; min-width:220px; padding:11px 14px; border-radius:8px; border:1px solid var(--navy-600); background:var(--navy-800); color:#fff; font-family:var(--sans); }
.newsletter-form input::placeholder{ color:var(--steel-500); }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--navy-900); color:var(--steel-300); padding:56px 0 26px; font-size:.88rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:28px; margin-bottom:40px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a{ color:var(--steel-300); }
.footer-grid a:hover{ color:#fff; }
.footer-brand .brand-word{ font-size:1.15rem; }
.footer-brand p{ color:var(--steel-500); font-size:.84rem; margin-top:12px; max-width:280px; }
.footer-bottom{ border-top:1px solid var(--navy-700); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--steel-500); font-size:.78rem; }
.footer-bottom a{ color:var(--steel-500); }

/* ---------- Placeholder tag ---------- */
.tag-progress{ display:inline-block; background:#fdf6e8; color:var(--warn-amber); font-family:var(--mono); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 10px; border-radius:20px; margin-bottom:14px; }

@media (max-width:640px){
  .hero h1{ font-size:2.1rem; }
  h1{ font-size:2rem; }
  .footer-grid{ margin-bottom:26px; }
}