/* =========================================================
   File Drop Dock – Landing Light (Tabler 1.4.0)
   White / clean / premium, Accent: #045CAD
   ========================================================= */
/* 1) Font einbinden (Pfad anpassen) */
@font-face{
  font-family: "Artavion Mono";
  src: url("font/ArtavionMono-SemiBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 3) Headings global (Bootstrap/Tabler) */
h1,h2,h3,h4,h5,h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{
  font-family: var(--headingFont) !important;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* 4) Optional: nur deine Landing-Headings */
.l-h1, .l-card .card-title, .l-download .card-title{
  font-family: var(--headingFont) !important;
}


:root{
  --accent:#045cad;
  --headingFont: "Artavion Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --accentSoft: rgba(4,92,173,.12);
  --border: rgba(17, 24, 39, .10);
  --shadow: 0 18px 40px rgba(17,24,39,.08);
  --shadow2: 0 10px 22px rgba(17,24,39,.06);
}

html,body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Topbar */
.l-topbar{
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.l-logo{
  width: 20px;
  height: 20px;
  border-radius: 14px;
}
.l-logo-sm{ width: 28px; height: 28px; border-radius: 12px; }

.l-badge{
  background: var(--accentSoft) !important;
  color: #2b2f36 !important;
  border: 1px solid rgba(4,92,173,.22) !important;
}

.l-btn-primary{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 14px 26px rgba(4,92,173,.18);
}
.l-btn-primary:hover{
  filter: brightness(0.98);
}

.l-btn-outline{
  border-color: rgba(4,92,173,.35) !important;
  color: #2b2f36 !important;
}
.l-btn-outline:hover{
  background: rgba(4,92,173,.08) !important;
  border-color: rgba(4,92,173,.45) !important;
}

/* Hero */
.l-hero{
  padding: 56px 0 10px;
  background:
    radial-gradient(900px 480px at 70% 0%, rgba(4,92,173,.10), transparent 55%),
    radial-gradient(700px 420px at 20% 10%, rgba(37, 99, 235, .06), transparent 55%),
    #fff;
}

.l-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(4,92,173,.22);
  background: rgba(4,92,173,.08);
  color: #2b2f36;
  font-weight: 600;
}

.l-h1{
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.7px;
}

.l-lead{
  max-width: 62ch;
}

.l-mini{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding: .9rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow2);
}

.l-mini-ic{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(4,92,173,.10);
  border: 1px solid rgba(4,92,173,.18);
  color: #2b2f36;
}

/* Preview */
.l-preview{
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.l-windowdots{
  display:flex;
  gap:6px;
}
.l-windowdots span{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(17,24,39,.12);
  border: 1px solid rgba(17,24,39,.08);
}

.l-badge-soft{
  border: 1px solid rgba(4,92,173,.22) !important;
  background: rgba(4,92,173,.10) !important;
  color: #2b2f36 !important;
}

.l-queue{
  display:flex;
  flex-direction:column;
  gap: .75rem;
}

.l-qitem{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem .9rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
}

.l-qicon{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(4,92,173,.10);
  border: 1px solid rgba(4,92,173,.18);
}

.l-alert{
  border-radius: 16px !important;
  border: 1px solid rgba(4,92,173,.18) !important;
  background: rgba(4,92,173,.08) !important;
  color: #2b2f36 !important;
}

/* Feature Cards */
.l-card{
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow2) !important;
}
.l-ic{
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(4,92,173,.10);
  border: 1px solid rgba(4,92,173,.18);
  margin-bottom: .75rem;
}

/* Screens */
.l-soft{
  background: #f7f8fb;
  border-top: 1px solid rgba(17,24,39,.06);
  border-bottom: 1px solid rgba(17,24,39,.06);
}
.l-shot{
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.l-shot img{
  height: 220px;
  object-fit: cover;
}

/* Download */
.l-download{
  border-radius: 22px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.l-dlbtn{
  display:flex !important;
  align-items:center !important;
  gap: .5rem !important;
  padding: .95rem 1rem !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  background: #fff !important;
  box-shadow: var(--shadow2) !important;
}
.l-dlbtn:hover{
  border-color: rgba(4,92,173,.25) !important;
  background: rgba(4,92,173,.04) !important;
}

.l-notes{
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow2) !important;
}

/* Skeleton lines */
.l-skel{
  height: 12px;
  border-radius: 999px;
  background: rgba(17,24,39,.08);
  margin-bottom: 10px;
  overflow:hidden;
  position:relative;
}
.l-skel::after{
  content:"";
  position:absolute;
  inset:-20px -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: skel 1.3s linear infinite;
}
.l-skel-sm{ width: 70%; }

@keyframes skel{
  to{ transform: translateX(70%); }
}

/* Small refinements */
.navbar .nav-link{
  font-weight: 600;
}
.navbar .nav-link:hover{
  color: #111827;
}