/* ====== RASSVETTECH — Externa l CSS (rassvet.css) ====== */

/* Theme tokens */
:root{
  --bg:#f4f9ff; --card:#ffffff; --ink:#0c1b2a; --muted:#415066;
  --brand:#2e7cf6; --brand2:#3aa0ff; --line:#e6efff;
  --shadow:0 18px 40px rgba(17,43,102,.12);
  --r:18px; --mw:1120px;
}

/* Global base */
html,body{height:100%;background:var(--bg)}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}

/* Scope all UI to the app root */
#rassvet-root{
  background:
    radial-gradient(1200px 420px at 50% -120px,#eaf3ff 15%,transparent 60%),
    var(--bg);
  line-height:1.55;
  letter-spacing:.1px;
}
#rassvet-root *{box-sizing:border-box}
#rassvet-root img,#rassvet-root video,#rassvet-root canvas,#rassvet-root svg{
  max-width:100%;height:auto;display:block
}

/* Header */
#rassvet-root header{
  position:relative;
  padding:56px 18px 16px;
  text-align:center;
  border-bottom:1px solid var(--line)
}
#rassvet-root .contact-pill{
  position:absolute; right:16px; top:16px;
  display:inline-flex; gap:.5rem; align-items:center;
  padding:8px 14px; border-radius:999px; background:#fff;
  border:1px solid var(--line); color:var(--brand);
  box-shadow:var(--shadow); font-weight:600; white-space:nowrap
}
#rassvet-root h1.logo{
  margin:6px auto 8px;
  font-size:clamp(40px,5vw,72px);
  font-weight:900; letter-spacing:.6px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent
}
#rassvet-root .hero-desc{
  max-width:min(920px,100%); margin:10px auto 0; padding:0 12px;
  text-align:left; color:var(--muted)
}
#rassvet-root .ornament{
  user-select:none; letter-spacing:.4ch; font-size:15px;
  color:#97b7ff; white-space:nowrap; overflow:hidden; padding:6px 10px
}

/* Mission block */
#rassvet-root .mission{
  margin:16px auto 0;
  max-width:min(920px,100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  text-align:left;
  padding:22px
}
#rassvet-root .mission h3{margin:0 0 8px;font-size:1.2rem}
#rassvet-root .mission .muted{color:var(--muted)}

/* Top nav (routes) */
#rassvet-root .topnav{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:18px 0 8px
}
#rassvet-root .tab{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease
}
#rassvet-root .tab:hover{transform:translateY(-2px)}
#rassvet-root .tab.active{
  background:linear-gradient(90deg,#f9fbff,#eef6ff); border-color:#dbe7ff; color:#0f2e7a
}

/* Language bar */
#rassvet-root .topbar{display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; margin:12px 0 0}
#rassvet-root .lang{display:flex; gap:8px}
#rassvet-root .lang .lng{
  border:1px solid var(--line); background:#fff; color:#20428a;
  padding:8px 10px; border-radius:10px; cursor:pointer; font-weight:700
}
#rassvet-root .lang .lng.active{background:#e9f2ff}

/* Layout + Cards */
#rassvet-root main{max-width:var(--mw); margin:0 auto; padding:22px 16px 80px}
#rassvet-root section{margin:28px 0}
#rassvet-root .card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:22px
}
#rassvet-root h2{margin:0 0 12px; font-size:1.6rem; letter-spacing:.2px}
#rassvet-root h3{margin:14px 0 8px; font-size:1.1rem}
#rassvet-root .grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))
}
#rassvet-root .feature{
  padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff
}
#rassvet-root .muted{color:var(--muted)}
#rassvet-root .tag{
  padding:6px 10px; border-radius:999px; background:#eef5ff; color:#0f57d7;
  border:1px solid #d8e7ff; font-size:.82rem
}

/* Gallery */
#rassvet-root .gallery{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:start
}
#rassvet-root figure{
  margin:0; overflow:hidden; border-radius:14px; border:1px solid var(--line);
  background:#fff; box-shadow:var(--shadow)
}
#rassvet-root .shot{
  width:100%; aspect-ratio:4/3; object-fit:contain; background:#eff5ff;
  transition:transform .35s ease, filter .35s ease
}
#rassvet-root figure:hover .shot{transform:scale(1.02); filter:saturate(1.05)}
#rassvet-root figcaption{
  padding:10px 12px; border-top:1px solid var(--line); color:#62779a;
  display:flex; justify-content:space-between; align-items:center
}

/* Donate cards */
#rassvet-root .donate-3d{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))
}
#rassvet-root .donbtn{
  position:relative; isolation:isolate; display:block; text-decoration:none;
  color:#0b2d88; background:#fff; padding:14px;
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  transform-style:preserve-3d; transition:transform .2s ease
}
#rassvet-root .donbtn::after{
  content:""; position:absolute; inset:0; border-radius:14px; z-index:-1;
  background:radial-gradient(120px 40px at 20% 0%, rgba(46,124,246,.25), transparent 60%);
  transform:translateZ(-6px)
}
#rassvet-root .donbtn:hover{transform:translateY(-3px) rotateX(2deg)}
#rassvet-root .donbtn small{display:block; color:var(--muted); margin-top:6px}

/* Lightbox (for gallery) */
#rassvet-root .lightbox{
  position:fixed; inset:0; background:rgba(11,18,30,.75);
  display:none; align-items:center; justify-content:center; padding:18px; z-index:9999
}
#rassvet-root .lightbox.open{display:flex}
#rassvet-root .lightbox img{
  max-width:min(1100px,92vw); max-height:82vh; border-radius:16px;
  box-shadow:0 16px 60px rgba(0,0,0,.5)
}
#rassvet-root .close{
  position:absolute; top:14px; right:16px; width:40px; height:40px; border-radius:999px;
  border:1px solid var(--line); background:#fff; font-size:20px;
  display:grid; place-items:center; cursor:pointer
}
#rassvet-root .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,1,1); white-space:nowrap; border:0
}

/* Footer */
#rassvet-root footer{
  border-top:1px solid var(--line);
  padding:24px 12px 40px; text-align:center; color:#6b7fa1
}
#rassvet-root .symbols{font-size:1.2rem; color:#7ea8ff; margin:10px 0}
#rassvet-root .credits{font-weight:700}

/* Routes visibility */
#rassvet-root .route{display:none}
#rassvet-root .route.active{display:block}

/* Simple buttons in footer */
#rassvet-root .btn{
  display:inline-block; padding:10px 14px; border-radius:12px;
  background:#fff; border:1px solid var(--line); text-decoration:none;
  box-shadow:var(--shadow); font-weight:700
}
#rassvet-root .btn:hover{transform:translateY(-2px)}

/* Responsive */
@media (max-width:560px){
  #rassvet-root .shot{aspect-ratio:3/2}
  #rassvet-root .contact-pill{right:10px; left:10px; top:10px; justify-content:center}
}