/* ═══════════════════════════════════════
   ZaufanyIT — Global Stylesheet
   ═══════════════════════════════════════ */

:root {
  --bg: #060609;
  --bg2: #0c0c14;
  --card: #0f0f1a;
  --border: #1a1a2a;
  --border2: #242438;
  --accent: #00e5a0;
  --accent-dim: rgba(0,229,160,0.10);
  --accent2: #6c63ff;
  --text: #e8e8f2;
  --text2: #9090b0;
  --muted: #525268;
  --white: #ffffff;
  --nav-h: 68px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Grid overlay */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(0,229,160,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,160,0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events:none; z-index:0;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height: var(--nav-h);
  padding: 0 48px;
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(6,6,9,0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  font-family:'Syne',sans-serif;
  font-size:20px; font-weight:800;
  color:var(--white); text-decoration:none; letter-spacing:-0.02em;
}
.nav-logo span { color:var(--accent); }

.nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a {
  font-size:13px; color:var(--text2); text-decoration:none;
  font-weight:500; transition:color 0.2s; letter-spacing:0.01em;
}
.nav-links a:hover, .nav-links a.active { color:var(--accent); }

.nav-cta {
  background:var(--accent) !important; color:#000 !important;
  padding:8px 20px !important; border-radius:8px !important;
  font-weight:700 !important; font-size:13px !important;
  transition:opacity 0.2s !important;
}
.nav-cta:hover { opacity:0.85 !important; }

.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.nav-hamburger span { width:22px; height:2px; background:var(--text2); border-radius:2px; display:block; transition:all 0.3s; }

.mobile-menu {
  display:none; position:fixed; top:var(--nav-h); left:0; right:0;
  background:rgba(6,6,9,0.97); backdrop-filter:blur(20px);
  padding:24px 20px; border-bottom:1px solid var(--border);
  flex-direction:column; gap:18px; z-index:99;
}
.mobile-menu a { font-size:15px; color:var(--text2); text-decoration:none; font-weight:500; }
.mobile-menu.open { display:flex; }

@media (max-width:768px) {
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
}

/* ── LAYOUT ── */
.container { max-width:1100px; margin:0 auto; padding:0 40px; }
@media (max-width:768px) { .container { padding:0 20px; } }

section { position:relative; z-index:1; }

/* ── PAGE HERO (subpages) ── */
.page-hero {
  padding: calc(var(--nav-h) + 64px) 0 72px;
  background: linear-gradient(180deg, rgba(0,229,160,0.03) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:'';
  position:absolute; top:-200px; left:50%; transform:translateX(-50%);
  width:600px; height:400px;
  background:radial-gradient(ellipse, rgba(0,229,160,0.05), transparent 70%);
  pointer-events:none;
}

.page-hero-inner { max-width:680px; }

.page-tag {
  display:inline-block; font-size:10px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:14px;
}

.page-hero h1 {
  font-family:'Syne',sans-serif;
  font-size:clamp(32px,5vw,56px); font-weight:800;
  line-height:1.05; letter-spacing:-0.025em; color:var(--white);
  margin-bottom:18px;
}

.page-hero p {
  font-size:17px; color:var(--text2); line-height:1.75; max-width:540px;
}

/* Breadcrumb */
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted); margin-bottom:20px;
}
.breadcrumb a { color:var(--muted); text-decoration:none; transition:color 0.2s; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb span { color:var(--border2); }

/* ── TYPOGRAPHY ── */
.section-tag {
  display:inline-block; font-size:10px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:12px;
}

h2.section-title {
  font-family:'Syne',sans-serif;
  font-size:clamp(26px,3.5vw,44px); font-weight:800;
  color:var(--white); letter-spacing:-0.02em; line-height:1.1; margin-bottom:14px;
}

.section-subtitle { font-size:16px; color:var(--text2); max-width:560px; line-height:1.75; }

/* ── BUTTONS ── */
.btn-primary {
  background:var(--accent); color:#000;
  padding:13px 26px; border-radius:10px;
  font-size:14px; font-weight:700; text-decoration:none;
  transition:all 0.2s; display:inline-flex; align-items:center; gap:8px;
  font-family:'Outfit',sans-serif; border:none; cursor:pointer;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,229,160,0.22); opacity:0.9; }

.btn-secondary {
  background:transparent; color:var(--text);
  padding:13px 26px; border-radius:10px;
  font-size:14px; font-weight:600; text-decoration:none;
  border:1px solid var(--border2); transition:all 0.2s;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }

/* ── CARDS ── */
.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:28px;
  transition:all 0.25s;
}
.card:hover { border-color:var(--border2); transform:translateY(-3px); }

/* ── DIVIDER ── */
.divider {
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
  margin:64px 0;
}

/* ── ANIMATIONS ── */
.fade-up {
  opacity:0; transform:translateY(24px);
  transition:opacity 0.65s ease, transform 0.65s ease;
}
.fade-up.visible { opacity:1; transform:translateY(0); }

.stagger > * { opacity:0; transform:translateY(18px); transition:opacity 0.55s ease, transform 0.55s ease; }
.stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0s; }
.stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.08s; }
.stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.16s; }
.stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.24s; }
.stagger.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.32s; }
.stagger.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.4s; }
.stagger.visible > *:nth-child(7) { opacity:1; transform:none; transition-delay:0.48s; }
.stagger.visible > *:nth-child(8) { opacity:1; transform:none; transition-delay:0.56s; }
.stagger.visible > *:nth-child(9) { opacity:1; transform:none; transition-delay:0.64s; }

/* ── FOOTER ── */
footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:56px 48px 32px; position:relative; z-index:1;
}
@media (max-width:768px) { footer { padding:40px 20px 24px; } }

.footer-inner {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
}
@media (max-width:900px) { .footer-inner { grid-template-columns:1fr 1fr; } }
@media (max-width:500px) { .footer-inner { grid-template-columns:1fr; } }

.footer-brand .logo {
  font-family:'Syne',sans-serif; font-size:20px; font-weight:800;
  color:var(--white); margin-bottom:12px; display:block; text-decoration:none;
}
.footer-brand .logo span { color:var(--accent); }
.footer-brand p { font-size:13px; color:var(--muted); line-height:1.7; max-width:230px; }

.footer-col h4 {
  font-family:'Syne',sans-serif; font-size:11px; font-weight:700;
  color:var(--text); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:16px;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a { font-size:13px; color:var(--muted); text-decoration:none; transition:color 0.2s; }
.footer-col ul li a:hover { color:var(--accent); }

.footer-bottom {
  max-width:1100px; margin:32px auto 0;
  padding-top:24px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.footer-bottom p, .footer-bottom a { font-size:12px; color:var(--muted); text-decoration:none; }
.footer-bottom a:hover { color:var(--accent); }

/* ── CTA BAND ── */
.cta-band {
  background:linear-gradient(135deg, rgba(0,229,160,0.06), rgba(108,99,255,0.06));
  border:1px solid rgba(0,229,160,0.12); border-radius:20px;
  padding:56px 48px; text-align:center; position:relative; overflow:hidden;
}
.cta-band::before {
  content:'';
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:400px; height:200px;
  background:radial-gradient(ellipse, rgba(0,229,160,0.08), transparent 70%);
  pointer-events:none;
}
.cta-band h2 {
  font-family:'Syne',sans-serif; font-size:clamp(24px,3vw,38px); font-weight:800;
  color:var(--white); margin-bottom:14px; letter-spacing:-0.02em;
}
.cta-band p { font-size:16px; color:var(--text2); margin-bottom:32px; line-height:1.7; }
.cta-band-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }