:root{
  --bg:#ffffff;--text:#1a1a1a;--card:#f4f6f8;--primary:#0b5ed7;--muted:#6c757d;--border:#e6e9ee
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f14;--text:#eaeaea;--card:#111826;--primary:#4da3ff;--muted:#9aa4af;--border:#1f2a37
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Segoe UI,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.65}
a{color:var(--primary)}
.container{max-width:1120px;margin:auto;padding:0 20px}
nav{
  position:sticky;top:0;z-index:10;
  background:#000;border-bottom:1px solid rgba(255,255,255,.06)
}
.nav-inner{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;letter-spacing:.3px}
.brand img{width:28px;height:28px}
.nav-links a{color:#fff;margin-left:14px;text-decoration:none;font-size:.95rem;opacity:.92}
.nav-links a:hover{opacity:1;text-decoration:underline}
.hero{
  background:
    linear-gradient(120deg, rgba(10,42,67,.92), rgba(0,0,0,.92)),
    url("assets/img/hero.jpg");
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:86px 0;
}
.hero h1{margin:0 0 10px;font-size:3rem}
.hero p{max-width:980px;margin:0;color:#cfe4ff;font-size:1.15rem}
.badge{display:inline-block;background:rgba(11,94,215,.15);color:var(--primary);padding:6px 12px;border-radius:999px;font-size:.85rem;margin:0 0 14px}
section{padding:64px 0;border-bottom:1px solid var(--border)}
h2{margin:0 0 16px;color:var(--primary);font-size:2rem}
h3{margin:0 0 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--border);padding:28px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.10)}
.small{font-size:.92rem;color:var(--muted)}
.kpi{display:flex;gap:16px;flex-wrap:wrap}
.kpi .chip{border:1px solid var(--border);background:transparent;padding:10px 12px;border-radius:12px}
footer{background:#000;color:var(--muted);padding:34px 0}
footer a{color:var(--muted);text-decoration:none}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
@media (max-width: 860px){
  .footer-grid{grid-template-columns:1fr}
  .hero h1{font-size:2.35rem}
  .nav-links a{margin-left:10px}
}


/* Logo application */
.hero{ position: relative; overflow: hidden; }
.hero .hero-mark{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:min(360px, 42vw);
  opacity:0.18;
  pointer-events:none;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.35));
}
@media (max-width: 860px){
  .hero .hero-mark{ display:none; }
}
.brand img{ width:34px; height:34px; }

/* Global watermark (all pages/sections) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("logo_watermark.png");
  background-repeat:repeat;
  background-size:420px auto;
  opacity:0.035;
  pointer-events:none;
  z-index:0;
}
body > *{ position:relative; z-index:1; }

/* Responsive nav */
.nav-toggle{
  display:none;
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  color:#fff;
  border-radius:10px;
  padding:10px 12px;
  font-weight:700;
}
@media (max-width: 860px){
  .nav-inner{ gap:12px; flex-wrap:wrap; }
  .nav-links{ display:none; width:100%; padding:10px 0 6px; }
  .nav-links a{ display:inline-block; margin:8px 10px 0 0; }
  .nav-toggle{ display:inline-block; }
  nav.open .nav-links{ display:block; }
}

/* Forms */
form{ margin-top:14px; }
label{ display:block; font-weight:600; margin:10px 0 6px; }
input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  outline:none;
}
textarea{ min-height:140px; resize:vertical; }
.btn{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  border:0;
  border-radius:12px;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;
}
.hint{ font-size:.92rem; color:var(--muted); margin-top:10px; }

/* Theme toggle (manual dark/light) */
:root[data-theme="light"]{
  --bg:#ffffff;--text:#1a1a1a;--card:#f4f6f8;--primary:#0b5ed7;--muted:#6c757d;--border:#e6e9ee;
}
:root[data-theme="dark"]{
  --bg:#0b0f14;--text:#eaeaea;--card:#111826;--primary:#4da3ff;--muted:#9aa4af;--border:#1f2a37;
}

/* Theme button */
.theme-btn{
  margin-left:10px;
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  color:#fff;
  border-radius:10px;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
}
.theme-btn:hover{ opacity:1; }
@media (max-width: 860px){
  .theme-btn{ margin-left:0; }
}

.theme-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:44px;
}
.theme-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}