/* ═══════════════════════════════════════════════════════════
   LASIKAR - Design System
   Clean, minimal. White background. Black text. Blue accent.
   ═══════════════════════════════════════════════════════════ */

/* ── 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', system-ui, sans-serif;
  background:#FFFFFF;
  color:#252525;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --blue:      #246DEE;
  --blue-dim:  #1a56c4;
  --text:      #252525;
  --muted:     #4B5568;
  --border:    #E5E7EB;
  --white:     #FFFFFF;
  --bg-subtle: #F9FAFB;
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */
#nav {
  position:sticky; top:0; left:0; right:0; z-index:800;
  background:#FFFFFF;
  border-bottom:1px solid transparent;
  height:64px;
  padding:0 3rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:border-color .25s;
}
#nav.solid { border-bottom-color:var(--border); }

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

.nav-links {
  display:flex; align-items:center; gap:0; list-style:none;
  position:absolute; left:50%; transform:translateX(-50%);
}
.nav-links a {
  color:var(--muted); font-weight:600; font-size:.84rem;
  text-decoration:none; padding:.45rem .95rem; border-radius:6px;
  transition:color .2s, background .2s; white-space:nowrap;
}
.nav-links a:hover { color:var(--text); background:var(--bg-subtle); }
.nav-links a.active { color:var(--text); font-weight:700; }

.nav-actions { display:flex; gap:.5rem; align-items:center; flex-shrink:0; }
.nav-login {
  color:var(--text); font-size:.88rem; font-weight:700;
  text-decoration:none; padding:.45rem 1rem; border-radius:7px;
  transition:background .2s; border:1px solid var(--border);
}
.nav-login:hover { background:var(--bg-subtle); }
.nav-register {
  background:var(--blue); color:#FFFFFF;
  font-size:.88rem; font-weight:700;
  text-decoration:none; padding:.45rem 1rem; border-radius:7px;
  transition:background .2s;
}
.nav-register:hover { background:var(--blue-dim); }

/* ── MOBILE NAV ──────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: .4rem; color: var(--text); font-size: 1.2rem;
}
.mobile-menu {
  display: none;
  position: fixed; top: 64px; left: 0; right: 0;
  background: #FFFFFF; border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem 1.5rem;
  z-index: 799;
  flex-direction: column; gap: .25rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  color: var(--text); font-weight: 600; font-size: .95rem;
  text-decoration: none; padding: .75rem .5rem;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--blue); }

@media(max-width:900px) {
  .nav-hamburger { display: flex; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:inherit; font-size:.95rem; font-weight:700;
  text-decoration:none; cursor:pointer; border:none;
  border-radius:8px; padding:.75rem 1.75rem;
  transition:all .2s ease; white-space:nowrap;
}
.btn-primary { background:var(--blue); color:#FFFFFF; }
.btn-primary:hover { background:var(--blue-dim); }
.btn-outline { background:transparent; color:var(--text); border:1.5px solid var(--border); }
.btn-outline:hover { border-color:#aaa; }
.btn-lg { font-size:1rem; padding:.9rem 2.2rem; }

/* ═══════════════════════════════════════════════════════════
   SECTION UTILITIES
   ═══════════════════════════════════════════════════════════ */
.sec       { padding:4rem 2rem; }
.sec-inner { max-width:1100px; margin:0 auto; }
.sec-narrow{ max-width:760px;  margin:0 auto; }
.divider   { height:1px; background:var(--border); }

.eyebrow {
  font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); display:block; margin-bottom:.9rem;
}
.page-title {
  font-size:clamp(2rem,4.5vw,3.4rem); font-weight:700;
  letter-spacing:-.025em; line-height:1.08; color:var(--text);
  margin-bottom:1rem;
}
.page-desc {
  font-size:1rem; color:var(--muted); line-height:1.82; font-weight:500;
}

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

/* ═══════════════════════════════════════════════════════════
   PAGE HEADER (for inner pages)
   ═══════════════════════════════════════════════════════════ */
.pg-header {
  padding:3.5rem 2rem 3rem; border-bottom:1px solid var(--border);
  text-align:center;
}
.pg-header .page-title { margin-bottom:.75rem; }
.pg-header .page-desc  { max-width:560px; margin:0 auto; }

/* ═══════════════════════════════════════════════════════════
   CONTENT CARDS  (home page - 2-column card grid, all visible)
   ═══════════════════════════════════════════════════════════ */
.content-cards {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  margin-top:2.5rem;
}
.cc-item {
  background:#FFFFFF; padding:2.25rem 2rem;
  text-align:center;
  transition:background .2s;
  display:flex; flex-direction:column; align-items:center;
}
.cc-item:hover { background:var(--bg-subtle); }
.cc-label {
  font-size:.66rem; font-weight:700; letter-spacing:.13em;
  color:var(--blue); text-transform:uppercase;
  display:block; margin-bottom:.65rem;
}
.cc-q {
  font-size:1rem; font-weight:700; color:var(--text);
  line-height:1.4; margin-bottom:.9rem; letter-spacing:-.01em;
  max-width:320px;
}
.cc-a {
  font-size:.88rem; color:var(--muted); line-height:1.82; font-weight:500;
  max-width:360px;
}

@media(max-width:720px) {
  .content-cards { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════
   INDUSTRY CARDS - creative numbered grid
   ═══════════════════════════════════════════════════════════ */
.industry-grid {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1rem; margin-top:3rem;
}
.ind-card {
  background:#FFFFFF; padding:1.75rem;
  border:1.5px solid var(--border); border-radius:12px;
  transition:border-color .22s, box-shadow .22s;
}
.ind-card:hover {
  border-color:var(--blue);
  box-shadow:0 4px 20px rgba(36,109,238,.08);
}
.ind-icon {
  width:36px; height:36px; border-radius:9px;
  background:rgba(36,109,238,.08);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; color:var(--blue); margin-bottom:.9rem;
}
.ind-card h3 { font-size:.95rem; font-weight:700; color:var(--text); margin-bottom:.45rem; }
.ind-card p  { font-size:.85rem; color:var(--muted); line-height:1.75; font-weight:500; }
.ind-icon {
  width:40px; height:40px; border-radius:10px;
  background:rgba(36,109,238,.08);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--blue); margin-bottom:1.1rem;
}
.ind-card h3 { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:.5rem; }
.ind-card p  { font-size:.88rem; color:var(--muted); line-height:1.75; font-weight:400; }

/* ═══════════════════════════════════════════════════════════
   FEATURES PAGE - FEATURE BLOCKS
   ═══════════════════════════════════════════════════════════ */
.feat-block {
  padding:2.5rem 0;
  border-bottom:1px solid var(--border);
  display:grid; grid-template-columns:1fr 2fr; gap:3rem; align-items:start;
}
.feat-block:last-child { border-bottom:none; }
.feat-block-label {
  font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); margin-bottom:.9rem; display:block;
}
.feat-block h3 {
  font-size:1.45rem; font-weight:700; color:var(--text);
  letter-spacing:-.02em; line-height:1.25;
}
.feat-block-body p {
  font-size:.97rem; color:var(--muted); line-height:1.88; font-weight:500;
}

/* ═══════════════════════════════════════════════════════════
   VIDEO CARDS  (Studio page)
   ═══════════════════════════════════════════════════════════ */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.vid-card {
  border-radius:14px; overflow:hidden;
  border:1px solid var(--border); background:#FFFFFF;
  display:flex; flex-direction:column;
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.vid-card:hover { border-color:var(--blue); transform:translateY(-3px); box-shadow:0 12px 32px rgba(36,109,238,.08); }
.vid-card video { width:100%; aspect-ratio:16/9; display:block; border:none; background:#000; }
.vid-meta { padding:1.35rem; flex:1; }
.vid-meta .cat-pill { margin-bottom:.6rem; }
.vid-meta h4 { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:.4rem; }
.vid-meta p  { font-size:.88rem; color:var(--muted); font-weight:400; line-height:1.72; }

.cat-pill {
  display:inline-block; font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.28rem .8rem; border-radius:100px; margin-bottom:.8rem;
}
.cat-mkt  { background:rgba(36,109,238,.08); color:#1a56c4; border:1px solid rgba(36,109,238,.18); }
.cat-know { background:rgba(36,109,238,.08); color:#1a56c4; border:1px solid rgba(36,109,238,.18); }

.vid-empty {
  border-radius:14px; border:1.5px dashed var(--border);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:3rem; gap:.75rem; min-height:240px;
}
.vid-empty i    { font-size:1.5rem; color:#ccc; }
.vid-empty span { font-size:.88rem; color:var(--muted); font-weight:400; }

/* ═══════════════════════════════════════════════════════════
   CTA BANNER  (bottom of every page - white bg)
   ═══════════════════════════════════════════════════════════ */
.cta-banner {
  background:#FFFFFF;
  padding:4rem 2rem 7rem; text-align:center;
}
.cta-banner h2 {
  font-size:clamp(1.8rem,4vw,3rem); font-weight:700;
  letter-spacing:-.025em; margin-bottom: 2.25rem; color:var(--text);
}
.cta-banner .btn-primary { font-size:1rem; padding:.85rem 2rem; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.site-footer {
  background:#FFFFFF;
  padding:2rem 3rem;
}
.footer-inner {
  max-width:100%;
}
.footer-top {
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding-bottom:1.5rem; border-bottom:1px solid var(--border);
}
.footer-logo img { height:22px; display:block; }
.footer-social { display:flex; gap:.5rem; }
.footer-social a {
  width:32px; height:32px; border-radius:7px;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:.85rem;
  text-decoration:none; transition:all .2s;
}
.footer-social a:hover { border-color:var(--blue); color:var(--blue); }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1.25rem; gap:2rem; flex-wrap:wrap;
}
.footer-links    { display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-links a  {
  color:var(--muted); font-size:.82rem; text-decoration:none;
  transition:color .2s; font-weight:600;
}
.footer-links a:hover { color:var(--text); }
.footer-copy { font-size:.8rem; color:#888; white-space:nowrap; font-weight:600; }

/* ═══════════════════════════════════════════════════════════
   PRICING CARDS
   ═══════════════════════════════════════════════════════════ */
.price-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:3rem; max-width:780px; margin-left:auto; margin-right:auto; }
.price-card {
  border:1.5px solid var(--border); border-radius:16px; padding:2.5rem;
  position:relative; background:#FFFFFF;
}
.price-card.pop { border-color:var(--blue); }
.pop-badge {
  position:absolute; top:-1px; right:1.5rem;
  background:var(--blue); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.28rem .85rem; border-radius:0 0 8px 8px;
}
.price-card h3 { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:1.2rem; }
.price-amount  { font-size:2.6rem; font-weight:900; color:var(--text); letter-spacing:-.04em; margin-bottom:.25rem; }
.price-amount span { font-size:1rem; font-weight:400; color:var(--muted); }
.price-save   { font-size:.82rem; color:#16a34a; font-weight:700; margin-bottom:1.1rem; min-height:1.2em; }
.price-desc   { font-size:.9rem; color:var(--muted); margin-bottom:1.75rem; line-height:1.68; }
.price-features { list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-bottom:2rem; }
.price-features li {
  font-size:.9rem; color:var(--text); display:flex; align-items:center; gap:.65rem;
}
.price-features li i { color:var(--blue); font-size:.85rem; flex-shrink:0; }
.btn-block {
  display:block; text-align:center; width:100%;
  background:var(--blue); color:#FFFFFF;
  padding:.8rem 1.5rem; border-radius:8px;
  font-family:inherit; font-weight:700; font-size:.9rem;
  text-decoration:none; transition:background .2s; border:none; cursor:pointer;
}
.btn-block:hover { background:var(--blue-dim); }
.btn-block.outline {
  background:transparent; border:1.5px solid var(--border); color:var(--text);
}
.btn-block.outline:hover { border-color:#999; background:transparent; }

/* Billing toggle */
.billing-row {
  display:inline-flex; background:var(--bg-subtle); border:1px solid var(--border);
  border-radius:8px; padding:3px; margin:2rem auto 0; gap:2px;
}
.bill-btn {
  padding:.45rem 1.3rem; border-radius:6px; border:none;
  background:transparent; font-family:inherit; font-weight:400; font-size:.88rem;
  color:var(--muted); cursor:pointer; transition:all .2s;
}
.bill-btn.on { background:#FFFFFF; color:var(--text); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.08); }

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:3rem; }
.contact-card {
  border:1.5px solid var(--border); border-radius:14px; padding:2rem;
  text-decoration:none; color:var(--text);
  display:flex; align-items:center; gap:1.25rem;
  transition:border-color .25s, box-shadow .25s;
}
.contact-card:hover { border-color:var(--blue); box-shadow:0 4px 20px rgba(36,109,238,.08); }
.contact-ico {
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  background:rgba(36,109,238,.08);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:var(--blue);
}
.contact-ico.green { background:rgba(5,150,105,.08); color:#059669; }
.contact-card h4 { font-size:.9rem; font-weight:700; margin-bottom:.2rem; }
.contact-card span { font-size:.88rem; color:var(--muted); }

.demo-box {
  border:1.5px solid var(--border); border-radius:14px;
  padding:2rem; grid-column:1/-1;
  background:#FFFFFF;
}
.demo-box h3 { font-size:1rem; font-weight:700; margin-bottom:1.25rem; }
.creds { display:flex; flex-direction:column; gap:.65rem; margin-bottom:1.5rem; }
.cred { display:flex; align-items:center; gap:.75rem; }
.cred label { font-size:.82rem; color:var(--muted); font-weight:700; width:90px; }
.cred code { font-family:monospace; font-size:.88rem; background:#FFFFFF; border:1px solid var(--border); padding:.25rem .65rem; border-radius:6px; color:var(--text); }

/* ═══════════════════════════════════════════════════════════
   PRIVACY PAGE
   ═══════════════════════════════════════════════════════════ */
.prose { max-width:1100px; margin:0 auto; padding:5rem 2rem 7rem; }
.prose h2 { font-size:1.35rem; font-weight:700; color:var(--text); margin:2.5rem 0 .75rem; padding-bottom:.65rem; border-bottom:1px solid var(--border); }
.prose h3 { font-size:1rem; font-weight:700; color:var(--text); margin:1.5rem 0 .5rem; }
.prose p  { font-size:.95rem; color:var(--muted); line-height:1.88; margin-bottom:1rem; }
.prose ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.prose ul li { font-size:.93rem; color:var(--muted); padding-left:1.25rem; position:relative; line-height:1.72; }
.prose ul li::before { content:''; position:absolute; left:0; top:.65rem; width:5px; height:5px; border-radius:50%; background:var(--blue); }
.promise-box {
  background:rgba(36,109,238,.04); border:1px solid rgba(36,109,238,.15); border-left:3px solid var(--blue);
  border-radius:8px; padding:1.35rem 1.5rem; margin-bottom:2.5rem;
  font-size:.95rem; color:var(--muted); line-height:1.78;
}
.promise-box strong { color:var(--text); font-weight:700; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:1024px) {
  .industry-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px) {
  .grid-3 { grid-template-columns:1fr 1fr; }
  .feat-block { grid-template-columns:1fr; gap:1.5rem; }
  .price-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .content-cards { grid-template-columns:1fr; }
}
@media(max-width:900px) {
  #nav { padding:0 1.5rem; }
  .nav-links { display:none; }
  .sec { padding:4rem 1.5rem; }
  .footer-top, .footer-bottom { flex-direction:column; gap:1rem; align-items:flex-start; }
  .pg-header { padding:3.5rem 1.5rem 3rem; }
}
@media(max-width:640px) {
  .industry-grid { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
  .cta-banner { padding:4rem 1.5rem; }
}