:root{
  --bg:#2b2b2b;
  --bg-2:#3a3a3a;
  --card:#3b3b3b80;
  --text:#f1f1f1;
  --muted:#c6c6c6;
  --accent:#c7b377;
  --ring:#ffffff1a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 50% -10%,#5555,transparent),
             linear-gradient(180deg,#2d2d2d 0%,#242424 100%);
  padding-bottom:80px;
}

.page{max-width:1100px;margin:0 auto;padding:24px}

.hero{padding:24px 0 8px 0;text-align:center}
.title{font-size:54px;letter-spacing:.5px;margin:0 0 8px 0;font-weight:800}
.tagline{margin:0 auto;max-width:920px;color:var(--muted);line-height:1.6}
.lang-toggle{position:absolute;top:18px;right:18px;background:#00000050;border:1px solid var(--ring);color:var(--text);border-radius:20px;padding:6px 10px;cursor:pointer}

.grid{display:grid;grid-template-columns:260px 1fr;gap:24px;margin-top:24px}

.sidebar{position:sticky;top:12px;align-self:start;background:var(--card);border:1px solid var(--ring);border-radius:14px;padding:18px}
.sidebar-title{margin:0 0 8px 0;font-weight:600}
.faq-list{list-style:none;padding:0;margin:0}
.faq-list li{margin:6px 0}
.preset{width:100%;text-align:left;background:transparent;border:0;color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer}
.preset:hover{background:#ffffff10}

.contact{border-top:1px dashed var(--ring);margin-top:16px;padding-top:12px}
.contact-title{font-weight:600;margin-bottom:6px}
.icons{display:flex;gap:10px}
.icon{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;color:var(--text);opacity:.8}
.icon:hover{opacity:1}

.section-title{margin:0 0 6px 0;text-align:center;font-size:32px}
.chat-box{background:var(--card);border:1px solid var(--ring);border-radius:14px;padding:14px;margin-bottom:20px}
.input-row{display:flex;gap:10px}
.question{flex:1;background:#00000030;color:var(--text);border:1px solid var(--ring);border-radius:10px;padding:12px 14px}
.ask{background:#00000050;color:var(--text);border:1px solid var(--ring);border-radius:10px;padding:12px 16px;cursor:pointer}
.ask:hover{background:#00000070}
.status{margin:8px 2px 2px 2px;font-size:13px}
.muted{color:var(--muted)}
.answer{margin-top:8px;line-height:1.7;white-space:pre-wrap;max-height:400px;overflow-y:auto}
.answer a{color:var(--accent);text-decoration:underline}
.answer a:hover{opacity:.8}
.upload{display:inline-flex;align-items:center;gap:10px;border:1px dashed var(--ring);border-radius:10px;padding:10px 12px;margin-top:12px;cursor:pointer}
.upload input{display:none}

.section-subtitle{margin:24px 0 12px 0;font-weight:600}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.media-grid img{width:100%;height:200px;object-fit:cover;border-radius:10px;border:1px solid var(--ring);background:#00000030;cursor:pointer;transition:transform 0.2s ease}
.media-grid img:hover{transform:scale(1.02)}
.videos{margin-bottom:40px}
.videos img{height:240px}

/* Lightbox modal */
.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);display:none;align-items:center;justify-content:center;z-index:1000;cursor:pointer}
.lightbox img{max-width:90%;max-height:90%;object-fit:contain;border-radius:10px}
.lightbox.show{display:flex}

.footer{display:flex;justify-content:center;opacity:.7;margin:40px 0 24px 0}
.small{font-size:12px;color:var(--muted)}

@media (max-width: 920px){
  .grid{grid-template-columns:1fr}
  .media-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 560px){
  .page{padding:16px}
  .title{font-size:40px}
  .media-grid{grid-template-columns:1fr}
  .question{padding:12px}
  .ask{padding:12px}
  .lang-toggle{top:12px;right:12px}
}