/* ═══════════════════════════════════════════════════════════
   LASIKAR  -  Shared Design System
   css/lasikar.css
   ═══════════════════════════════════════════════════════════ */

/* ── FONTS ───────────────────────────────────────────────── */
@font-face { font-family:'Kamerik'; src:url('../fonts/Kamerik105Cyrillic-Thin.ttf')  format('truetype'); font-weight:100; font-display:swap; }
@font-face { font-family:'Kamerik'; src:url('../fonts/Kamerik105Cyrillic-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Kamerik'; src:url('../fonts/Kamerik105Cyrillic-Book.ttf')  format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Kamerik'; src:url('../fonts/Kamerik105Cyrillic-Bold.ttf')  format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Kamerik'; src:url('../fonts/Kamerik105Cyrillic-Heavy.ttf') format('truetype'); font-weight:900; font-display:swap; }

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Kamerik', Georgia, serif;
  background:#EDF1FA;
  color:#1A1D2E;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── DESIGN TOKENS ───────────────────────────────────────── */
:root {
  --blue:        #246DEE;
  --blue-dim:    #1a56c4;
  --blue-tint:   #EBF1FD;

  /* DARK (hero, nav-solid, footer, contact panels) */
  --dark:        #1C2034;
  --dark-2:      #252525;
  --dark-3:      #2E3245;

  /* LIGHT (page body, cards, sections) */
  --light:       #FFFFFF;
  --light-2:     #EDF1FA;
  --light-3:     #DDE6F5;

  --white:       #FFFFFF;

  /* TEXT — all used on LIGHT surfaces */
  --txt-primary:   #1A1D2E;
  --txt-body:      #3A4460;
  --txt-muted:     #8892A4;

  /* Special: used on DARK hero/chip backgrounds only */
  --txt-blue-pill: #90bfff;

  /* COMPATIBILITY aliases */
  --surf-light:    #EDF1FA;
  --txt-on-light:  #1A1D2E;
  --txt-on-light-b:#4A5168;

  --border-light:  rgba(36,109,238,0.12);
  --border-dark:   rgba(255,255,255,0.09);
  --blue-border:   rgba(36,109,238,0.28);
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:800;
  padding:1.3rem 3rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:padding .35s, background .35s, border-color .35s, box-shadow .35s;
}
#nav.solid {
  background:rgba(37,37,37,0.97);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,255,255,0.07);
  padding:.85rem 3rem;
  box-shadow:0 2px 32px rgba(0,0,0,0.35);
}

.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo img { height:30px; width:auto; display:block; }

.nav-links { display:flex; gap:2.25rem; list-style:none; }
.nav-links a {
  color:rgba(255,255,255,0.65);
  font-weight:400; font-size:1rem;
  text-decoration:none; letter-spacing:.01em;
  transition:color .25s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:-3px;
  width:0; height:1px; background:var(--blue);
  transition:width .3s;
}
.nav-links a:hover       { color:var(--white); }
.nav-links a:hover::after,
.nav-links a.active::after { width:100%; }
.nav-links a.active { color:var(--white); font-weight:700; }

.nav-btn {
  background:var(--blue);
  border:1px solid var(--blue);
  color:var(--white);
  padding:.65rem 1.65rem; border-radius:100px;
  font-family:inherit; font-weight:700; font-size:.9rem;
  text-decoration:none; cursor:pointer;
  transition:all .3s; white-space:nowrap;
}
.nav-btn:hover {
  background:var(--blue-dim); border-color:var(--blue-dim);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(36,109,238,0.45);
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:inherit; font-size:.95rem; font-weight:700;
  text-decoration:none; cursor:pointer; border:none;
  border-radius:100px; padding:.95rem 2.2rem;
  transition:all .3s ease; white-space:nowrap;
}
.btn-primary { background:var(--blue); color:var(--white); }
.btn-primary:hover { background:var(--blue-dim); transform:translateY(-3px); box-shadow:0 14px 36px rgba(36,109,238,0.5); }

.btn-outline { background:transparent; color:rgba(255,255,255,0.82); border:1px solid rgba(255,255,255,0.3); }
.btn-outline:hover { color:var(--white); border-color:rgba(255,255,255,0.65); background:rgba(255,255,255,0.08); }

.btn-block {
  display:block; text-align:center; width:100%;
  background:var(--blue); color:var(--white);
  padding:.9rem 1.5rem; border-radius:12px;
  font-family:inherit; font-weight:700; font-size:.95rem;
  text-decoration:none; transition:all .3s;
}
.btn-block:hover { background:var(--blue-dim); transform:translateY(-2px); box-shadow:0 10px 28px rgba(36,109,238,0.4); }

/* ═══════════════════════════════════════════════════════════
   SECTION UTILITIES
   ═══════════════════════════════════════════════════════════ */
.sec       { padding:7rem 2rem; }
.sec-inner { max-width:1100px; margin:0 auto; }
.sec-center { text-align:center; }
.sec-center .sec-desc { margin:0 auto; }

.sec-tag {
  display:block;
  font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin-bottom:1rem; opacity:.95;
}

.sec-title {
  font-size:clamp(2.2rem,4.5vw,3.6rem);
  font-weight:900; letter-spacing:-.035em; line-height:1.03;
  color:var(--txt-primary);
  margin-bottom:1.2rem;
}
.sec-title.on-light { color:var(--txt-on-light); }

.sec-desc {
  font-size:1.05rem;
  color:var(--txt-body);
  max-width:540px; line-height:1.82; font-weight:400;
}
.sec-desc.on-light { color:var(--txt-on-light-b); }

/* ── DIVIDER ─────────────────────────────────────────────── */
.divider { height:1px; background:#DDE6F5; margin:0 2rem; }

/* ── CATEGORY PILLS ──────────────────────────────────────── */
.cat-pill {
  display:inline-block;
  font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.35rem .95rem; border-radius:100px; margin-bottom:1rem;
}
/* On light card/section backgrounds */
.cat-mkt  { background:rgba(36,109,238,0.1); color:#1a56c4; border:1px solid rgba(36,109,238,0.22); }
.cat-know { background:rgba(5,150,105,0.1);  color:#047857; border:1px solid rgba(5,150,105,0.22); }

/* ═══════════════════════════════════════════════════════════
   VIDEO CARDS
   ═══════════════════════════════════════════════════════════ */
.vid-card {
  border-radius:18px; overflow:hidden;
  border:1px solid #DDE6F5;
  background:#FFFFFF;
  display:flex; flex-direction:column;
  transition:border-color .35s, transform .35s, box-shadow .35s;
}
.vid-card:hover {
  border-color:rgba(36,109,238,0.45);
  transform:translateY(-5px);
  box-shadow:0 20px 50px rgba(36,109,238,0.11);
}
.vid-card video,
.vid-card iframe { width:100%; aspect-ratio:16/9; display:block; border:none; background:#000; }

.vid-meta { padding:1.5rem; flex:1; }
.vid-meta .cat-pill { margin-bottom:.75rem; }

.vid-meta h4 {
  font-size:1.05rem; font-weight:700;
  color:var(--txt-primary);
  margin-bottom:.5rem; letter-spacing:-.01em;
}
.vid-meta p {
  font-size:.9rem;
  color:var(--txt-body);
  font-weight:400; line-height:1.7;
}

/* ── GRID LAYOUTS ────────────────────────────────────────── */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.5rem; }

/* ── REVEAL ANIMATION ────────────────────────────────────── */
.rev { opacity:0; transform:translateY(34px); transition:opacity .72s ease, transform .72s ease; }
.rev.in { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.site-footer { background:#252525; padding:4.5rem 2rem 2rem; border-top:1px solid rgba(255,255,255,0.06); }
.footer-inner { max-width:1100px; margin:0 auto; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem; padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-logo { height:28px; width:auto; display:block; margin-bottom:1.1rem; }
.footer-tag  { font-size:.9rem; color:rgba(255,255,255,0.6); line-height:1.78; font-weight:400; max-width:240px; }

.footer-col h4 {
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:rgba(255,255,255,0.55); margin-bottom:1.25rem;
}
.footer-col a {
  display:block; font-size:.9rem;
  color:rgba(255,255,255,0.6);
  text-decoration:none; margin-bottom:.65rem;
  font-weight:400; transition:color .2s;
}
.footer-col a:hover { color:var(--white); }

.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:2rem; font-size:.85rem;
  color:rgba(255,255,255,0.45);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
}
@media(max-width:900px) {
  .grid-3 { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  #nav, #nav.solid { padding:.9rem 1.5rem; }
  .nav-links { display:none; }
  .sec { padding:5rem 1.5rem; }
  .grid-2 { grid-template-columns:1fr; }
}
@media(max-width:580px) {
  .grid-3 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; gap:.5rem; text-align:center; }
}