/* ═══════════════════════════════════════════════════════════
   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:#0c0c0c;       /* unified dark background everywhere */
  color:#e8e8e8;            /* default text: bright enough to read easily */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── DESIGN TOKENS ───────────────────────────────────────── */
:root {
  --blue:        #246DEE;
  --blue-dim:    #1a56c4;
  --dark:        #0c0c0c;
  --dark-2:      #141414;   /* cards on dark */
  --dark-3:      #1c1c1c;   /* hover state */
  --white:       #ffffff;

  /* TEXT - never below these opacities on dark bg */
  --txt-primary:   #f0f0f0;   /* headings */
  --txt-body:      #c8c8c8;   /* body paragraphs  ≥ 14px */
  --txt-muted:     #a0a0a0;   /* captions, labels  ≥ 13px */
  --txt-blue-pill: #90bfff;   /* blue tinted text on dark */

  /* LIGHT SURFACE (sections that go white/grey) */
  --surf-light:    #f5f6f8;
  --txt-on-light:  #252525;
  --txt-on-light-b:#555;

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

/* ── GRAIN OVERLAY ───────────────────────────────────────── */
body::after {
  content:''; position:fixed; inset:0;
  pointer-events:none; z-index:9999; opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION  -  identical on every page
   ═══════════════════════════════════════════════════════════ */
#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(12,12,12,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.5);
}

/* Logo - always show the Light (white) version, dark page always */
.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;        /* bumped from .92 */
  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.28); }
.btn-outline:hover { color:var(--white); border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.07); }

.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;
}

/* Headings */
.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);              /* bright on dark */
  margin-bottom:1.2rem;
}
.sec-title.on-light { color:var(--txt-on-light); }

/* Body text under headings */
.sec-desc {
  font-size:1.05rem;                     /* was 1rem - a bit bigger */
  color:var(--txt-body);                 /* #c8c8c8 - clearly readable */
  max-width:540px; line-height:1.82; font-weight:300;
}
.sec-desc.on-light { color:var(--txt-on-light-b); }

/* ── DIVIDER ─────────────────────────────────────────────── */
.divider { height:1px; background:rgba(255,255,255,0.07); 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;
}
.cat-mkt  { background:rgba(36,109,238,0.18); color:#90bfff; border:1px solid rgba(36,109,238,0.32); }
.cat-know { background:rgba(16,185,129,0.14); color:#6ee7b7; border:1px solid rgba(16,185,129,0.28); }

/* ═══════════════════════════════════════════════════════════
   VIDEO CARDS  -  used on studio page
   ═══════════════════════════════════════════════════════════ */
.vid-card {
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  background:var(--dark-2);
  display:flex; flex-direction:column;
  transition:border-color .35s, transform .35s, box-shadow .35s;
}
.vid-card:hover {
  border-color:rgba(36,109,238,0.4);
  transform:translateY(-5px);
  box-shadow:0 24px 64px rgba(0,0,0,0.6);
}
.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);             /* bright white */
  margin-bottom:.5rem; letter-spacing:-.01em;
}
.vid-meta p {
  font-size:.9rem;                       /* was .82 - bigger */
  color:var(--txt-body);                 /* #c8c8c8 - clearly readable */
  font-weight:300; 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  -  shared
   ═══════════════════════════════════════════════════════════ */
.site-footer { background:#080808; padding:4.5rem 2rem 2rem; border-top:1px solid rgba(255,255,255,0.05); }
.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.06);
}
.footer-logo { height:28px; width:auto; display:block; margin-bottom:1.1rem; }
.footer-tag  { font-size:.9rem; color:rgba(255,255,255,0.45); line-height:1.78; font-weight:300; max-width:240px; }

.footer-col h4 {
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:rgba(255,255,255,0.5); margin-bottom:1.25rem;
}
.footer-col a {
  display:block; font-size:.9rem;           /* was .85 */
  color:rgba(255,255,255,0.45);            /* brighter than before */
  text-decoration:none; margin-bottom:.65rem;
  font-weight:300; 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;       /* was .78 */
  color:rgba(255,255,255,0.35);           /* readable */
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE  -  shared breakpoints
   ═══════════════════════════════════════════════════════════ */
@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; }
}