/* ui-glass.css: glass + gloss override (landing). Gradient/background colors untouched. */

/* Cards: hero cards, trending strip */
.glass-card{
  background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.38));
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1.5px solid rgba(255,255,255,.75);
  box-shadow:0 8px 32px rgba(32,40,112,.10),inset 0 1px 0 rgba(255,255,255,.9);
}

/* Navbar */
.navbar{
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:0 4px 24px rgba(32,40,112,.06);
}

/* Role toggle + bonus pill */
.role-toggle{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 4px 20px rgba(32,40,112,.10),inset 0 1px 0 rgba(255,255,255,.9);
}
.joining-bonus-pill{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 4px 18px rgba(245,200,66,.12),inset 0 1px 0 rgba(255,255,255,.85);
}

/* Gloss on solid buttons (color same, shine on top) */
.btn-primary,.btn-orange,.btn-signup{
  background-image:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.06) 48%,rgba(0,0,0,.06) 100%);
  box-shadow:0 4px 14px rgba(32,40,112,.18),inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-orange:hover,.btn-signup:hover,.btn-primary:hover{
  box-shadow:0 6px 18px rgba(32,40,112,.24),inset 0 1px 0 rgba(255,255,255,.55);
}

/* Mobile: halka blur (scroll smooth rahe) */
@media (max-width:768px){
  .glass-card,.navbar,.role-toggle,.joining-bonus-pill{
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
}

/* Purane browsers: solid fallback */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-card{background:rgba(255,255,255,.95)}
  .navbar{background:rgba(255,255,255,.97)}
  .role-toggle,.joining-bonus-pill{background:rgba(255,255,255,.92)}
}

/* Pricing compact: 5 cards one row, smaller tiles, no featured offset */
.pricing-section .pricing-grid{grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px;align-items:stretch;}
.pricing-section .pricing-card{padding:22px 18px;border-radius:14px;}
.pricing-section .pricing-card:hover{transform:translateY(-3px);}
.pricing-section .pricing-card--featured{transform:none;box-shadow:0 10px 28px rgba(32,40,112,.22);}
.pricing-section .pricing-card--featured:hover{transform:translateY(-3px);}
.pricing-section .pricing-badge{font-size:10.5px;padding:4px 12px;top:-11px;}
.pricing-section .pricing-name{font-size:15px;}
.pricing-section .pricing-price{font-size:28px;margin:8px 0 14px;}
.pricing-section .pricing-price span{font-size:12px;}
.pricing-section .pricing-feats{margin:0 0 18px;}
.pricing-section .pricing-feats li{font-size:12.5px;padding:6px 0;line-height:1.35;}
.pricing-section .pricing-card .btn{padding:9px 12px;font-size:12.5px;}

@media (max-width:1199px){
  .pricing-section .pricing-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){
  .pricing-section .pricing-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .pricing-section .pricing-grid{grid-template-columns:1fr;}
  .pricing-section .pricing-price{font-size:26px;}
}

/* Compact tiles: roles, industries, faq, stats, gamification */
body .role-card-hdr{padding:18px 18px 12px;}
body .role-card-body{padding:0 18px;}
body .rc-icon{width:42px;height:42px;font-size:19px;margin-bottom:10px;}
body .role-card-hdr h3{font-size:16px;margin-bottom:4px;}
body .rc-feat{font-size:12.5px;padding:5px 0;}
body .ind-card{padding:16px;border-radius:14px;}
body .faq-item{padding:0 14px;margin-bottom:8px;}
body .stat-item{padding:6px 12px;}
body .stat-icon{font-size:19px;}
body .sv{font-size:clamp(1.3rem,2.4vw,1.8rem);}
body .gf-card-icon{font-size:20px;margin-bottom:4px;}
body .gf-card-label{font-size:11px;}
body .gf-card-value{font-size:14px;}

/* Compact tiles 2: referral, bonus, AI, RPO, testimonials */
body .ref-card{padding:18px;gap:10px;}
body .ref-icon{width:42px;height:42px;font-size:19px;}
body .ref-card h3{font-size:15.5px;}
body .ref-card p,body .ref-features li{font-size:12.5px;line-height:1.5;}
body .ref-earn{padding:9px 14px;}
body .ref-earn-val{font-size:18px;}
body .bonus-card{padding:14px;}
body .ai-fi,body .rpo-fi{width:34px;height:34px;min-width:34px;font-size:15px;}
body .ai-ft,body .rpo-ft{font-size:13.5px;}
body .ai-fd,body .rpo-fd{font-size:12.5px;line-height:1.45;}
body .tc-text{font-size:13px;line-height:1.55;}
body .tc-av{width:34px;height:34px;font-size:12px;}

/* Testi gap */
body .testi-grid{gap:16px;margin-top:24px;}

/* Compact tiles 3: testimonials, employer CTA */
body .testi-grid{gap:16px;margin-top:24px;}
body .tc{padding:18px;}
body .tc-stars{font-size:13px;}
body .tc-name{font-size:12.5px;}
body .ecta{padding:32px 20px;}
body .ecta h2{font-size:clamp(1.15rem,2.2vw,1.5rem);margin-bottom:4px;}
body .ecta p{font-size:13px;}
body .ecta a{padding:10px 22px;font-size:13px;border-radius:9px;}

/* Profile grid */
body .profile-grid{gap:40px;}
body .profile-steps{gap:8px;margin-top:14px;}
@media (max-width:900px){
  body .profile-grid{grid-template-columns:1fr;gap:28px;}
}

/* Profile tiles: steps list + score widget */
body .ps-item{padding:8px 12px;gap:10px;}
body .ps-icon{width:32px;height:32px;min-width:32px;font-size:15px;}
body .ps-title{font-size:13px;}
body .ps-desc{font-size:11.5px;}
body .ps-pts{font-size:11px;}
body .score-widget{padding:20px;}
body .score-ring{transform:scale(.88);}
body .score-title{font-size:14px;}
body .score-hint{font-size:11.5px;}
body .si{padding:6px 10px;font-size:12px;}

/* FAQ contact */
body .faq-contact{text-align:center;margin:18px 0 0;font-size:13px;color:#5a6280;}
body .faq-contact a{color:#202870;font-weight:700;text-decoration:none;}
body .faq-contact a:hover{text-decoration:underline;}

/* Auth + browse jobs glass: inputs/OTP/table stay solid */
body .hr-auth-page .hr-right{
  background:radial-gradient(circle at 20% 15%,rgba(32,40,112,.10),transparent 45%),
             radial-gradient(circle at 85% 85%,rgba(244,167,22,.12),transparent 45%),#f0f2f8;
}
body .hr-auth-page .hr-form-card,
body .hr-overlay .hr-popup{
  background:linear-gradient(135deg,rgba(255,255,255,.80),rgba(255,255,255,.62));
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1.5px solid rgba(255,255,255,.75);
  box-shadow:0 8px 32px rgba(32,40,112,.12),inset 0 1px 0 rgba(255,255,255,.9);
}
body .hr-auth-page .hr-new-user-cta{
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
body .hr-auth-page .hr-input,
body .hr-overlay .hr-input,
body .hr-otp-box{background:#fff;}

body .bj-page{
  background:radial-gradient(circle at 10% 10%,rgba(32,40,112,.07),transparent 40%),
             radial-gradient(circle at 90% 60%,rgba(224,120,56,.08),transparent 40%),var(--bg);
}
body .bj-filter-bar,
body .bj-sidebar,
body .bj-jobs-card{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 6px 24px rgba(32,40,112,.08),inset 0 1px 0 rgba(255,255,255,.9);
}
body .bj-modal{background:rgba(255,255,255,.94);}
body .bj-filter-search,body .bj-filter-bar input,body .bj-filter-bar select,
body .bj-sidebar input,body .bj-sidebar select{background:#fff;}

@media (max-width:900px){
  body .bj-sidebar{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;}
  body .hr-auth-page .hr-form-card,body .bj-filter-bar,body .bj-jobs-card{
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
}

/* Signup solid: controls stay opaque inside glass card */
body .hr-auth-page .hr-google-btn,
body .hr-auth-page .hr-phone-wrap,
body .hr-auth-page .hr-phone-prefix,
body .hr-auth-page .hr-ws-opt,
body .hr-auth-page .hr-role-chip{background:#fff;}
body .hr-auth-page .hr-ws-opt{border-radius:12px;}

/* Mobile safe navbar: no backdrop-filter so fixed menu isn't clipped */
@media (max-width:991px){
  body .navbar{background:rgba(255,255,255,.97);backdrop-filter:none;-webkit-backdrop-filter:none;}
}