/* ============================================================
   HIRIVO.ONLINE — app.css
   ============================================================ */

:root {
  --p:        #7C3AED;
  --p-dark:   #5B21B6;
  --p-light:  #8B5CF6;
  --p-xlight: #A78BFA;
  --p-pale:   #EDE9FE;
  --p-pale2:  #F5F3FF;
  --accent:   #F59E0B;
  --ok:       #10B981;
  --err:      #EF4444;
  --bg:       #FAFAFA;
  --white:    #FFFFFF;
  --ink:      #18121E;
  --ink-2:    #3D2D52;
  --muted:    #7C6D8C;
  --border:   #E4DDF5;
  --border2:  #EDE9FE;
  --r:        14px;
  --r-lg:     20px;
  --sh:       0 2px 20px rgba(124,58,237,0.10);
  --sh-lg:    0 12px 40px rgba(124,58,237,0.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Instrument Sans', sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ── Typography ── */
h1, h2, h3, h4 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; }

/* ── HEADER ── */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(250,250,250,0.9); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  height: 60px;
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  height: 100%; padding: 0 40px;
  display: flex; align-items: center; gap: 24px;
}
.main-nav { display: flex; gap: 4px; flex: 1; }
.main-nav a { font-size: .875rem; font-weight: 500; color: var(--muted); text-decoration: none; padding: 7px 12px; border-radius: 8px; transition: color .15s, background .15s; }
.main-nav a:hover { color: var(--p); background: var(--p-pale2); }
.header-actions { display: flex; align-items: center; gap: 8px; }

/* ── LOGO ── */
.logo {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 1.4rem; letter-spacing: -.04em; color: var(--p);
  text-decoration: none; display: flex; align-items: center; gap: 7px; flex-shrink: 0;
}
.logo-sm { font-size: 1.1rem; }
.logo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-bottom: 2px; }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 7px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: .875rem; border-radius: 9px; padding: 9px 18px; border: none; cursor: pointer; text-decoration: none; transition: background .15s, transform .1s, box-shadow .15s; }
.btn-primary  { background: var(--p); color: var(--white); }
.btn-primary:hover { background: var(--p-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(124,58,237,.35); }
.btn-ghost    { background: transparent; color: var(--muted); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--p); color: var(--p); }
.btn-danger   { background: var(--err); color: var(--white); }
.btn-danger:hover { background: #dc2626; }
.btn-sm       { font-size: .8125rem; padding: 6px 13px; }
.btn-full     { width: 100%; justify-content: center; }

/* ── FLASH ── */
.flash { padding: 12px 20px; font-size: .875rem; font-weight: 500; border-radius: 0; }
.flash-success { background: #d1fae5; color: #065f46; border-left: 4px solid var(--ok); }
.flash-error   { background: #fee2e2; color: #991b1b; border-left: 4px solid var(--err); }

/* ── HERO ── */
.hero { position: relative; overflow: hidden; background: var(--ink); padding: 96px 48px 88px; text-align: center; }
.hero-mesh { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(124,58,237,.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 30%, rgba(139,92,246,.40) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 60% 80%, rgba(245,158,11,.18) 0%, transparent 50%);
  animation: meshFloat 12s ease-in-out infinite alternate;
}
@keyframes meshFloat { from{transform:scale(1)} to{transform:scale(1.06) rotate(1.5deg)} }
.hero::after { content:''; position:absolute; inset:0; z-index:1; opacity:.35; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); }
.hero-inner { position:relative; z-index:2; max-width:760px; margin:0 auto; }
.hero-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(124,58,237,.35); border:1px solid rgba(167,139,250,.4); border-radius:100px; padding:5px 14px; font-size:.78rem; font-weight:500; color:var(--p-xlight); letter-spacing:.04em; text-transform:uppercase; margin-bottom:28px; }
.hero-badge-dot { width:5px; height:5px; border-radius:50%; background:var(--p-xlight); animation:pulse 1.8s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
.hero-h1 { font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(2.4rem,6vw,3.8rem); font-weight:800; line-height:1.08; letter-spacing:-.03em; color:var(--white); margin-bottom:18px; }
.hero-h1 em { font-style:normal; background:linear-gradient(135deg,var(--p-xlight),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { font-size:1.0625rem; color:rgba(255,255,255,.58); line-height:1.6; margin-bottom:44px; }

/* ── SEARCH ── */
.search-wrap { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:6px; display:flex; gap:6px; max-width:680px; margin:0 auto; box-shadow:0 8px 40px rgba(0,0,0,.4); }
.sf { flex:1; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:12px; display:flex; align-items:center; gap:10px; padding:13px 16px; transition:background .15s, border-color .15s; }
.sf:focus-within { background:rgba(255,255,255,.13); border-color:rgba(167,139,250,.6); }
.sf svg { color:rgba(255,255,255,.35); flex-shrink:0; }
.sf input, .sf-select { background:none; border:none; outline:none; font-family:'Instrument Sans',sans-serif; font-size:.9375rem; color:var(--white); width:100%; }
.sf-select option { background:var(--ink); color:var(--white); }
.sf input::placeholder { color:rgba(255,255,255,.35); }
.search-divider { width:1px; background:rgba(255,255,255,.1); align-self:stretch; margin:4px 0; }
.btn-search { background:var(--p); color:var(--white); border:none; border-radius:12px; padding:13px 28px; font-family:'Bricolage Grotesque',sans-serif; font-size:.9375rem; font-weight:700; cursor:pointer; flex-shrink:0; display:flex; align-items:center; gap:8px; transition:background .15s, transform .12s, box-shadow .15s; }
.btn-search:hover { background:var(--p-dark); transform:translateY(-1px); box-shadow:0 6px 24px rgba(124,58,237,.45); }
.popular-tags { margin-top:18px; font-size:.8rem; color:rgba(255,255,255,.42); }
.popular-tags a { color:rgba(255,255,255,.65); text-decoration:none; font-weight:500; }
.popular-tags a:hover { color:var(--p-xlight); }

/* ── STATS ── */
.stats-bar { background:var(--white); border-bottom:1px solid var(--border); padding:20px 40px; display:flex; justify-content:center; gap:56px; }
.stat { text-align:center; }
.stat-n { font-family:'Bricolage Grotesque',sans-serif; font-size:1.5rem; font-weight:800; color:var(--p); line-height:1; }
.stat-l { font-size:.78rem; color:var(--muted); margin-top:3px; }

/* ── SECTION ── */
.section-top { max-width:1240px; margin:0 auto; padding:52px 48px 80px; }
.section-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.section-hd h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:1.25rem; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; }
.badge-top { font-size:.625rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:var(--accent); color:var(--white); padding:3px 8px; border-radius:5px; }
.section-more { font-size:.875rem; font-weight:500; color:var(--p); text-decoration:none; }
.section-more:hover { text-decoration:underline; }

/* ── JOB GRID ── */
.jobs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(188px,1fr)); gap:14px; }
.job-tile { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r); padding:22px 16px 18px; display:flex; flex-direction:column; align-items:center; text-align:center; cursor:pointer; text-decoration:none; color:var(--ink); transition:border-color .2s, box-shadow .2s, transform .2s; position:relative; overflow:hidden; }
.job-tile::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--p),var(--p-xlight)); opacity:0; transition:opacity .2s; }
.job-tile:hover { border-color:var(--p-light); box-shadow:var(--sh-lg); transform:translateY(-4px); }
.job-tile:hover::before { opacity:1; }
.top-badge { position:absolute; top:0; right:12px; background:var(--p); color:var(--white); font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:0 0 7px 7px; }
.tile-logo { width:56px; height:56px; border-radius:12px; background:var(--p-pale2); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; margin-bottom:12px; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.1rem; color:var(--p); overflow:hidden; }
.tile-logo img { width:100%; height:100%; object-fit:contain; }
.tile-co { font-size:.72rem; color:var(--muted); margin-bottom:3px; }
.tile-pos { font-family:'Bricolage Grotesque',sans-serif; font-size:.875rem; font-weight:700; color:var(--ink); line-height:1.3; margin-bottom:10px; }
.tile-reg { display:inline-flex; align-items:center; gap:4px; font-size:.72rem; color:var(--muted); background:var(--p-pale2); border-radius:20px; padding:3px 9px; }
.empty-state { text-align:center; padding:40px; color:var(--muted); }

/* ── JOB DETAIL ── */
.breadcrumb { max-width:1120px; margin:0 auto; padding:18px 48px 0; font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:6px; }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--p); }
.page-wrap { max-width:1120px; margin:0 auto; padding:24px 48px 96px; display:grid; grid-template-columns:1fr 308px; gap:24px; align-items:start; }
.main-col { display:flex; flex-direction:column; gap:16px; }
.sidebar  { display:flex; flex-direction:column; gap:16px; }

.job-hero { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.job-hero-top { padding:28px 28px 0; display:flex; gap:20px; align-items:flex-start; }
.jlogo { width:76px; height:76px; border-radius:14px; background:var(--p-pale2); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.4rem; color:var(--p); flex-shrink:0; overflow:hidden; }
.jlogo img { width:100%; height:100%; object-fit:contain; }
.jco { font-size:.8125rem; color:var(--muted); margin-bottom:5px; }
.jtitle { font-family:'Bricolage Grotesque',sans-serif; font-size:1.75rem; font-weight:800; line-height:1.15; letter-spacing:-.02em; color:var(--ink); margin-bottom:14px; }
.jmeta { display:flex; flex-wrap:wrap; gap:8px; }
.mpill { display:inline-flex; align-items:center; gap:5px; font-size:.8rem; color:var(--muted); background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:4px 11px; }
.mpill.accent { background:var(--p-pale); border-color:var(--border2); color:var(--p); font-weight:500; }
.job-hero-divider { height:1px; background:var(--border); margin:20px 0 0; }
.job-hero-footer { padding:14px 28px; display:flex; align-items:center; justify-content:space-between; }
.jdate { font-size:.78rem; color:var(--muted); }

.card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:28px; }
.card-title { font-family:'Bricolage Grotesque',sans-serif; font-size:1.0625rem; font-weight:800; letter-spacing:-.01em; color:var(--ink); margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--border2); }
.desc { font-size:.9375rem; line-height:1.78; color:var(--ink-2); }
.desc h3 { font-family:'Bricolage Grotesque',sans-serif; font-size:1rem; font-weight:700; margin:22px 0 9px; }
.desc ul { padding-left:18px; margin-bottom:14px; }
.desc li { margin-bottom:5px; }
.desc p  { margin-bottom:14px; }
.custom-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; padding-top:18px; border-top:1px solid var(--border2); }
.ctag { font-size:.8rem; font-weight:500; color:var(--p); background:var(--p-pale); border-radius:7px; padding:4px 11px; text-decoration:none; transition:background .15s; }
.ctag:hover { background:var(--border2); }

/* CTA sidebar */
.cta-card { background:var(--p); border-radius:var(--r-lg); padding:24px; position:relative; overflow:hidden; }
.cta-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 110% -10%,rgba(245,158,11,.3) 0%,transparent 50%); pointer-events:none; }
.btn-react { display:block; width:100%; background:var(--white); color:var(--p); border:none; border-radius:11px; padding:16px 20px; font-family:'Bricolage Grotesque',sans-serif; font-size:1rem; font-weight:800; cursor:pointer; text-align:center; transition:transform .15s, box-shadow .15s; box-shadow:0 4px 20px rgba(0,0,0,.15); text-decoration:none; letter-spacing:-.01em; position:relative; z-index:1; }
.btn-react:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,.22); }
.cta-note { font-size:.75rem; color:rgba(255,255,255,.6); text-align:center; margin-top:10px; position:relative; z-index:1; }

/* Company card */
.co-head { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.co-logo-sm { width:48px; height:48px; border-radius:10px; background:var(--p-pale2); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:.95rem; color:var(--p); flex-shrink:0; overflow:hidden; }
.co-logo-sm img { width:100%; height:100%; object-fit:contain; }
.co-name { font-family:'Bricolage Grotesque',sans-serif; font-size:.9375rem; font-weight:700; }
.co-loc  { font-size:.78rem; color:var(--muted); margin-top:2px; }
.co-desc { font-size:.875rem; line-height:1.65; color:var(--muted); margin-bottom:16px; }
.contacts { display:flex; flex-direction:column; gap:8px; }
.clink { display:flex; align-items:center; gap:9px; font-size:.84rem; color:var(--muted); text-decoration:none; transition:color .15s; }
.clink:hover { color:var(--p); }
.clink svg { color:var(--p); flex-shrink:0; }

/* More jobs */
.more-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.more-tile { background:var(--bg); border:1.5px solid var(--border); border-radius:10px; padding:12px; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s; }
.more-tile:hover { border-color:var(--p); transform:translateY(-2px); }
.mt-pos { font-family:'Bricolage Grotesque',sans-serif; font-size:.78rem; font-weight:700; line-height:1.3; }
.mt-reg { font-size:.7rem; color:var(--muted); }
.more-all { display:block; text-align:center; font-size:.8125rem; font-weight:500; color:var(--p); text-decoration:none; padding:9px; border-top:1px solid var(--border2); margin-top:4px; }
.more-all:hover { text-decoration:underline; }

/* ── MODAL ── */
.overlay { display:none; position:fixed; inset:0; background:rgba(24,18,30,.6); backdrop-filter:blur(6px); z-index:500; align-items:center; justify-content:center; padding:20px; }
.overlay.open { display:flex; }
.modal { background:var(--white); border-radius:22px; width:100%; max-width:540px; padding:36px; position:relative; box-shadow:0 24px 80px rgba(124,58,237,.3); max-height:92vh; overflow-y:auto; animation:modalIn .25s ease; }
@keyframes modalIn { from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:none} }
.modal-close { position:absolute; top:16px; right:16px; background:var(--bg); border:1px solid var(--border); border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); }
.modal-close:hover { background:var(--border); }
.modal-logo { width:48px; height:48px; border-radius:10px; background:var(--p-pale2); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; color:var(--p); margin-bottom:14px; overflow:hidden; }
.modal-logo img { width:100%; height:100%; object-fit:contain; }
.modal h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:1.3rem; font-weight:800; margin-bottom:4px; letter-spacing:-.02em; }
.modal-sub { font-size:.84rem; color:var(--muted); margin-bottom:28px; }

/* ── FORMS ── */
.form-2col { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.fg { display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
.fg.span2 { grid-column:1 / -1; }
.fg label { font-size:.8rem; font-weight:500; color:var(--ink-2); }
.fg input, .fg textarea, .fg select { border:1.5px solid var(--border); border-radius:9px; padding:10px 13px; font-family:'Instrument Sans',sans-serif; font-size:.9375rem; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; background:var(--white); }
.fg input:focus, .fg textarea:focus, .fg select:focus { border-color:var(--p); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.fg textarea { resize:vertical; min-height:90px; }
.req { color:var(--p); }
.upload-zone { border:2px dashed var(--border); border-radius:11px; padding:20px 16px; text-align:center; cursor:pointer; background:var(--bg); transition:border-color .15s, background .15s; }
.upload-zone:hover { border-color:var(--p); background:var(--p-pale2); }
.upload-icon { font-size:1.6rem; margin-bottom:7px; }
.upload-label { font-size:.875rem; color:var(--muted); }
.upload-hint  { font-size:.72rem; color:var(--muted); margin-top:3px; }
.upload-selected { font-size:.78rem; font-weight:500; color:var(--ok); margin-top:6px; display:none; }
.or-div { text-align:center; font-size:.78rem; color:var(--muted); margin:13px 0; position:relative; }
.or-div::before, .or-div::after { content:''; position:absolute; top:50%; width:43%; height:1px; background:var(--border); }
.or-div::before { left:0; } .or-div::after { right:0; }
.btn-submit { width:100%; background:var(--p); color:var(--white); border:none; border-radius:11px; padding:15px 20px; font-family:'Bricolage Grotesque',sans-serif; font-size:1rem; font-weight:800; cursor:pointer; margin-top:8px; transition:background .15s, transform .1s, box-shadow .15s; }
.btn-submit:hover { background:var(--p-dark); transform:translateY(-1px); box-shadow:0 6px 24px rgba(124,58,237,.35); }
.form-note { font-size:.72rem; color:var(--muted); text-align:center; margin-top:10px; line-height:1.6; }

/* ── AUTH ── */
.auth-wrap { min-height:calc(100vh - 60px); display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.auth-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:44px; width:100%; max-width:420px; box-shadow:var(--sh); }
.auth-logo { justify-content:center; margin-bottom:28px; font-size:1.6rem; }
.auth-title { font-size:1.5rem; font-weight:800; text-align:center; margin-bottom:6px; }
.auth-sub   { font-size:.875rem; color:var(--muted); text-align:center; margin-bottom:28px; }
.auth-form  { display:flex; flex-direction:column; gap:0; }
.auth-actions { display:flex; justify-content:flex-end; margin-bottom:16px; }
.link-small { font-size:.8125rem; color:var(--p); text-decoration:none; }
.link-small:hover { text-decoration:underline; }
.auth-switch { text-align:center; font-size:.875rem; color:var(--muted); margin-top:20px; }
.auth-switch a { color:var(--p); text-decoration:none; font-weight:500; }

/* ── FOOTER ── */
.site-footer { border-top:1px solid var(--border); padding:28px 48px; }
.footer-inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.footer-copy  { font-size:.8125rem; color:var(--muted); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .header-inner { padding:0 20px; }
  .main-nav { display:none; }
  .hero { padding:64px 20px 60px; }
  .search-wrap { flex-direction:column; }
  .search-divider { display:none; }
  .page-wrap { grid-template-columns:1fr; padding:16px 20px 60px; }
  .breadcrumb { padding:14px 20px 0; }
  .section-top { padding:36px 20px 60px; }
  .jobs-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .stats-bar { gap:24px; padding:16px 20px; flex-wrap:wrap; }
}