/* ==========================================================================
   FindGo AI — Shared Common Styles
   Extracted from index.html, agency/index.html, agency/apply/index.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#09090b;
  --surface:#18181b;
  --surface2:#27272a;
  --border:#3f3f46;
  --text:#fafafa;
  --text2:#a1a1aa;
  --accent:#38bdf8;
  --accent2:#818cf8;
  --primary:#c084fc;
  --gradient:linear-gradient(135deg,#38bdf8,#818cf8,#c084fc);
}

html{scroll-behavior:smooth}

body{
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

/* --------------------------------------------------------------------------
   2. Glow Orbs
   -------------------------------------------------------------------------- */
.orb{position:fixed;border-radius:50%;filter:blur(120px);opacity:.15;pointer-events:none;z-index:0}
.orb-1{width:600px;height:600px;background:#38bdf8;top:-200px;left:-200px;animation:float 20s ease-in-out infinite}
.orb-2{width:500px;height:500px;background:#818cf8;bottom:-150px;right:-150px;animation:float 25s ease-in-out infinite reverse}
.orb-3{width:400px;height:400px;background:#c084fc;top:50%;left:50%;transform:translate(-50%,-50%);animation:float 30s ease-in-out infinite}

@keyframes float{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(30px,-40px)}
  50%{transform:translate(-20px,30px)}
  75%{transform:translate(40px,20px)}
}

/* --------------------------------------------------------------------------
   3. Container
   -------------------------------------------------------------------------- */
.container{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(20px);background:rgba(9,9,11,.7);border-bottom:1px solid rgba(63,63,70,.3)}
nav .inner{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}
.logo img,.logo svg{display:block;height:36px;width:auto}
.nav-right{display:flex;align-items:center;gap:12px}

.btn-nav-cta{
  padding:7px 18px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  color:#fff;
  background:#10b981;
  border:none;
  transition:all .3s;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:0 0 20px rgba(16,185,129,.15);
  height:36px;
}
.btn-nav-cta:hover{background:#059669;box-shadow:0 0 30px rgba(16,185,129,.3);transform:translateY(-1px)}

/* --------------------------------------------------------------------------
   5. Language Button
   -------------------------------------------------------------------------- */
.lang-btn{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(24,24,27,.8);
  border:1px solid var(--border);
  border-radius:10px;
  padding:7px 14px;
  backdrop-filter:blur(8px);
  transition:all .3s;
  cursor:pointer;
  height:36px;
  user-select:none;
  color:var(--text2);
  font-size:13px;
  font-weight:500;
}
.lang-btn:hover{border-color:rgba(56,189,248,.3);background:rgba(39,39,42,.9)}
.lang-btn .lang-flag{font-size:18px;line-height:1}
.lang-btn .lang-name{font-size:13px}

/* --------------------------------------------------------------------------
   6. Language Modal
   -------------------------------------------------------------------------- */
.lang-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:1000;justify-content:center;align-items:center}
.lang-modal-overlay.open{display:flex;animation:modalFadeIn .2s ease}
.lang-modal{
  background:rgba(24,24,27,.97);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px;
  width:90%;
  max-width:480px;
  box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(63,63,70,.3);
  backdrop-filter:blur(20px);
}
.lang-modal-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:20px;text-align:center}
.lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lang-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;cursor:pointer;transition:all .15s;border:1px solid transparent;background:rgba(39,39,42,.4)}
.lang-item:hover{background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.2)}
.lang-item.active{background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.35)}
.lang-item .flag{font-size:24px;line-height:1}
.lang-item .name{font-size:13px;font-weight:500;color:var(--text2)}
.lang-item.active .name{color:var(--accent)}

@keyframes modalFadeIn{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:scale(1)}
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn{
  padding:14px 32px;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:all .3s ease;
  cursor:pointer;
  border:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-primary{background:#10b981;color:#fff;box-shadow:0 0 30px rgba(16,185,129,.2)}
.btn-primary:hover{background:#059669;box-shadow:0 0 50px rgba(16,185,129,.35);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* --------------------------------------------------------------------------
   8. Section Common
   -------------------------------------------------------------------------- */
.section-label{font-size:13px;text-transform:uppercase;letter-spacing:2px;color:var(--accent);font-weight:600;margin-bottom:12px}
.section-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-bottom:16px}
.section-sub{font-size:1.05rem;color:var(--text2);max-width:550px;margin-bottom:64px}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
footer{border-top:1px solid rgba(63,63,70,.3);padding:48px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.footer-left{display:flex;flex-direction:column;gap:8px}
.footer-left .copyright{font-size:13px;color:var(--text2)}
.footer-links{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.footer-links a{color:var(--text2);text-decoration:none;font-size:13px;font-weight:500;transition:color .3s}
.footer-links a:hover{color:var(--accent)}

/* --------------------------------------------------------------------------
   10. Animations
   -------------------------------------------------------------------------- */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.3}
}

/* --------------------------------------------------------------------------
   11. Responsive — Shared
   -------------------------------------------------------------------------- */
@media(max-width:768px){
  nav .inner{padding:10px 16px}
  .logo img,.logo svg{height:28px}
  .footer-inner{flex-direction:column;text-align:center;align-items:center}
  .footer-links{justify-content:center}
  .nav-right{gap:8px}
  .btn-nav-cta{display:none}
  .lang-grid{grid-template-columns:repeat(2,1fr)}
  .lang-modal{padding:16px;max-width:360px}
  .lang-btn .lang-name{font-size:12px}
  .lang-btn{padding:4px 10px;height:28px;gap:5px}
}

/* --------------------------------------------------------------------------
   12. RTL Support
   -------------------------------------------------------------------------- */
html[dir="rtl"] nav .inner{flex-direction:row-reverse}
html[dir="rtl"] .nav-right{flex-direction:row-reverse}
html[dir="rtl"] .footer-inner{flex-direction:row-reverse}
html[dir="rtl"] .footer-links{flex-direction:row-reverse}
html[dir="rtl"] .section-label,
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-sub{text-align:right}
html[dir="rtl"] .arrow-icon{transform:scaleX(-1)}
html[dir="rtl"] .hero{direction:rtl}
html[dir="rtl"] .hero-cta{direction:rtl}
html[dir="rtl"] body{direction:rtl;text-align:right}
html[dir="rtl"] .logo{direction:ltr;display:inline-flex}
html[dir="rtl"] .lang-modal{direction:rtl}
html[dir="rtl"] .lang-item{flex-direction:row-reverse}