@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');

@font-face {
  font-family: "Akira";
  src: url("fonts/Akira-Bold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root{
  --bg:#03060c; --text:#f4f7fb; --muted:#9aa8ba; --blue:#176cff;
  --panel:rgba(8,14,25,.76); --border:rgba(255,255,255,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Rubik,Arial,sans-serif}
body{overflow:hidden;background:
 radial-gradient(900px 600px at 72% 40%,#071b3a 0%,transparent 60%),
 linear-gradient(135deg,#02040a 0%,#061329 55%,#02040a 100%)}
.bg-glow{position:fixed;filter:blur(90px);pointer-events:none;opacity:.32;border-radius:50%}
.glow-1{width:320px;height:320px;background:#075dff;right:-100px;top:-100px}
.glow-2{width:280px;height:280px;background:#003a8f;left:-120px;bottom:-100px}
header{position:fixed;z-index:5;top:0;left:0;right:0;height:80px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:Akira,Arial,sans-serif;font-size:18px;letter-spacing:1.5px;color:#fff;text-decoration:none}
.lang{border:1px solid var(--border);background:rgba(255,255,255,.04);color:#fff;border-radius:999px;padding:8px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:600 13px Rubik;transition:.2s}
.lang:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);transform:translateY(-1px)}
.lang-flag{width:22px;height:14px;display:block;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.16)}

main{min-height:100vh;display:grid;place-items:center;padding:80px 24px}
.hero{text-align:center;max-width:800px}
.eyebrow{font-size:11px;letter-spacing:5px;color:#7196c7;margin-bottom:26px}
.title{font-size:clamp(48px,9vw,110px);margin:0 0 22px;line-height:1;letter-spacing:-2px}
.title.latin{font-family:Akira,Arial,sans-serif}
.title.persian{display:none;font-weight:700}
.lead{font-size:clamp(17px,2vw,21px);line-height:1.9;color:var(--muted);margin:0 auto 34px;max-width:620px}
.cta,.send{border:0;background:#fff;color:#05070b;border-radius:999px;padding:14px 24px;font:700 14px Rubik;cursor:pointer;transition:.2s}
.cta:hover,.send:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(23,108,255,.28)}
.chat-overlay{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.62);backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px}
.hidden{display:none}
.chat-window{width:min(560px,100%);height:min(720px,92vh);background:var(--panel);border:1px solid var(--border);border-radius:24px;box-shadow:0 30px 100px rgba(0,0,0,.55);overflow:hidden;display:flex;flex-direction:column}
.chat-head{padding:20px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.chat-head strong{display:block;font-size:16px}.chat-head span{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.icon-btn{background:none;border:0;color:#fff;font-size:28px;cursor:pointer}
.messages{flex:1;overflow:auto;padding:22px}

/* Conversation bubbles */
.message-row{display:flex;width:100%;margin:10px 0}
.message-row.visitor{justify-content:flex-end}
.message-row.admin{justify-content:flex-start}
.chat-bubble{max-width:min(78%,420px);padding:12px 15px;border-radius:18px;line-height:1.65;font-size:14px;white-space:pre-wrap;word-break:break-word;position:relative;box-shadow:0 6px 22px rgba(0,0,0,.16)}
.chat-bubble.visitor{background:linear-gradient(135deg,#176cff,#2851b8);color:#fff;border-bottom-right-radius:5px}
.chat-bubble.admin{background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.09);color:#edf2f8;border-bottom-left-radius:5px}
.bubble-meta{font-size:10px;opacity:.62;margin-bottom:4px}
.message-row.visitor .bubble-meta{text-align:right}
.message-row.admin .bubble-meta{text-align:left}
.message-time{display:block;font-size:9px;opacity:.5;margin-top:5px}
.message-row.visitor .message-time{text-align:right}
.message-row.admin .message-time{text-align:left}
.messages{scroll-behavior:smooth}
.messages::-webkit-scrollbar{width:5px}
.messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}

.welcome{color:var(--muted);font-size:14px;line-height:1.8;background:rgba(255,255,255,.04);padding:14px;border-radius:16px}
form{padding:18px;border-top:1px solid var(--border)}
.identity{display:grid;grid-template-columns:1fr 1fr;gap:10px}
input,textarea{width:100%;border:1px solid var(--border);background:rgba(0,0,0,.24);color:#fff;border-radius:12px;padding:12px;font:14px Rubik;outline:none}
input:focus,textarea:focus{border-color:#397eff}
textarea{resize:none;height:110px;margin-top:10px}
.send{margin-top:10px;width:100%}
#status{display:block;text-align:center;color:#7f91aa;margin-top:8px;font-size:11px}
body.fa .persian{display:block}.fa .latin{display:none}
body.fa .brand{font-family:Rubik,Arial,sans-serif;font-weight:700;letter-spacing:0}
body.fa .hero,.fa .chat-head,.fa form{text-align:right}
@media(max-width:520px){.identity{grid-template-columns:1fr}.chat-window{height:95vh}.title{font-size:48px}}


.social-footer{
  position:fixed;
  left:0;right:0;bottom:20px;
  display:flex;align-items:center;justify-content:center;gap:13px;
  padding:0 20px;
  direction:ltr;
  z-index:2;
  font-size:12px;
  opacity:.78;
}
.social-label{font-size:11px;color:rgba(255,255,255,.5);direction:rtl}
.social-links{display:flex;align-items:center;gap:9px}
.social-link{width:27px;height:27px;display:grid;place-items:center;transition:.2s ease}
.social-link img{width:19px;height:19px;display:block;object-fit:contain;opacity:.82}
.social-link:hover{transform:translateY(-2px)}
.social-link:hover img{opacity:1}
.social-handle{color:rgba(255,255,255,.72);text-decoration:none;letter-spacing:.15px;transition:.2s ease}
.social-handle:hover{color:#fff}
@media(max-width:600px){
  .social-footer{bottom:14px;gap:9px;font-size:11px}
  .social-label{display:none}
  .social-link{width:25px;height:25px}
  .social-link img{width:18px;height:18px}
}