/* ============================================================
   Goranked — Recruit v2 pre-apply LANDING
   Scoped under .r2-landing so it can't touch the site header/footer.
   Uses the site's brand fonts; no global resets.
   ============================================================ */

.r2-landing {
  --r2-bg:            #0e0e10;
  --r2-bg-2:          #141416;
  --r2-surface:       #1a1a1d;
  --r2-surface-2:     #202024;
  --r2-surface-3:     #26262c;
  --r2-border:        rgba(255,255,255,.08);
  --r2-border-strong: rgba(255,255,255,.18);
  --r2-text:          #f4f4f6;
  --r2-dim:           #9a9aa3;
  --r2-faint:         #6c6c75;
  --r2-accent:        #ff4a18;
  --r2-accent-2:      #ff7a45;
  --r2-grad:          linear-gradient(135deg, #ff4a18 0%, #ff7a45 100%);
  --r2-soft:          rgba(255,74,24,.12);
  --r2-accent-border: rgba(255,74,24,.6);
  --r2-glow:          rgba(255,74,24,.28);
  --r2-radius:        18px;

  --r2-title: "Gilroy", system-ui, sans-serif;
  --r2-body:  "NotoSans", system-ui, sans-serif;
  --r2-btn:   "Montserrat", system-ui, sans-serif;

  background: var(--r2-bg);
  color: var(--r2-text);
  font-family: var(--r2-body);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}
.r2-landing * { box-sizing: border-box; }
.r2-landing a { text-decoration: none; }

.r2-container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------- hero ---------- */
.r2-hero { position: relative; text-align: center; padding: 90px 0 56px; }
.r2-hero::before {
  content:""; position:absolute; left:50%; top:-60px; transform:translateX(-50%);
  width: 820px; max-width: 120vw; height: 600px; pointer-events:none; z-index:0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,74,24,.16) 0%, rgba(255,74,24,0) 70%);
}
.r2-hero > * { position: relative; z-index: 1; }
.r2-eyebrow {
  display:inline-flex; align-items:center; gap: 8px;
  font-family: var(--r2-btn); font-weight: 600; font-size: 13px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--r2-accent-2); background: var(--r2-soft); border: 1px solid var(--r2-accent-border);
  padding: 7px 14px; border-radius: 60px; margin-bottom: 26px;
}
.r2-eyebrow .dot { width:7px; height:7px; border-radius:50%; background: var(--r2-accent); box-shadow:0 0 8px var(--r2-glow); }
.r2-hero__title {
  font-family: var(--r2-title); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(34px, 6vw, 60px); line-height: 1.05; margin: 0 auto 22px; max-width: 880px;
  background: linear-gradient(180deg, #ffffff 0%, #b6b7c4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.r2-hero__title .accent {
  background: linear-gradient(120deg, var(--r2-accent) 0%, var(--r2-accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.r2-hero__sub { color: var(--r2-dim); font-size: clamp(17px, 2vw, 20px); line-height: 1.55; max-width: 600px; margin: 0 auto 36px; }

.r2-cta {
  display:flex; align-items:center; gap: 8px; width: 100%; max-width: 520px; margin: 0 auto;
  background: rgba(20,24,36,.55); border: 1px solid var(--r2-border-strong);
  border-radius: 60px; padding: 7px 7px 7px 8px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.r2-cta input { flex: 1; background: transparent; border: none; outline: none; color: var(--r2-text); font-family: var(--r2-body); font-size: 16px; padding: 12px 18px; }
.r2-cta input::placeholder { color: var(--r2-faint); }
.r2-btn {
  display:inline-flex; align-items:center; gap: 8px; flex:0 0 auto;
  background: var(--r2-grad); color:#fff; font-family: var(--r2-btn); font-weight: 700; font-size: 15px;
  padding: 13px 22px; border-radius: 60px; box-shadow: 0 6px 18px var(--r2-glow);
  transition: transform .16s, box-shadow .16s;
}
.r2-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,74,24,.45); color:#fff; }
.r2-btn svg { width: 16px; height: 16px; }

.r2-note { display:flex; align-items:center; justify-content:center; gap: 9px; color: var(--r2-dim); font-size: 15px; margin-top: 18px; flex-wrap:wrap; }
.r2-note svg { width: 16px; height: 16px; color: var(--r2-accent-2); }
.r2-note span + span::before { content:"•"; margin: 0 9px; color: var(--r2-faint); }

/* ---------- logos marquee ---------- */
.r2-logos { margin-top: 60px; }
.r2-logos__label { text-align:center; color: var(--r2-dim); font-size: 15px; margin-bottom: 22px; }
.r2-marquee { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.r2-marquee__track { display:flex; gap: 14px; width: max-content; animation: r2Marquee 40s linear infinite; }
.r2-marquee:hover .r2-marquee__track { animation-play-state: paused; }
@keyframes r2Marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.r2-logo { display:flex; align-items:center; gap: 10px; flex:0 0 auto;
  background: var(--r2-surface); border: 1px solid var(--r2-border); border-radius: 12px;
  padding: 12px 18px; color: var(--r2-dim); font-size: 15px; white-space: nowrap; }
.r2-logo img { width: 22px; height: 22px; object-fit: contain; }
.r2-logo .ic { font-size: 20px; line-height: 1; }

/* ---------- sections ---------- */
.r2-section { padding: 80px 0; }
.r2-section--alt { background: var(--r2-bg-2); border-top: 1px solid var(--r2-border); border-bottom: 1px solid var(--r2-border); }
.r2-head { text-align:center; max-width: 720px; margin: 0 auto 50px; }
.r2-kicker { font-family: var(--r2-btn); font-weight: 700; font-size: 13px; letter-spacing:.08em; text-transform:uppercase; color: var(--r2-accent-2); margin-bottom: 14px; }
.r2-h2 { font-family: var(--r2-title); font-weight: 800; font-size: clamp(28px, 4vw, 42px); letter-spacing:-.02em; margin-bottom: 16px; }
.r2-sub { color: var(--r2-dim); font-size: 18px; line-height: 1.55; }

.r2-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.r2-card { background: var(--r2-surface); border: 1px solid var(--r2-border); border-radius: var(--r2-radius); padding: 28px; transition: border-color .2s, transform .2s, background .2s; }
.r2-card:hover { border-color: var(--r2-border-strong); transform: translateY(-3px); background: var(--r2-surface-2); }
.r2-card__ic { width: 50px; height: 50px; border-radius: 14px; display:grid; place-items:center; font-size: 24px; color: var(--r2-accent-2); background: var(--r2-soft); border: 1px solid var(--r2-accent-border); margin-bottom: 20px; }
.r2-logo .ic svg { vertical-align: middle; }
.r2-card__t { font-family: var(--r2-title); font-weight: 700; font-size: 20px; margin-bottom: 10px; }
.r2-card__d { color: var(--r2-dim); font-size: 16px; line-height: 1.55; }

/* how we pay */
.r2-stats4 { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 40px; }
.r2-stat { background: linear-gradient(180deg, var(--r2-surface) 0%, rgba(26,26,29,.4) 100%); border: 1px solid var(--r2-border); border-radius: var(--r2-radius); padding: 28px 22px; text-align:center; }
.r2-stat__big { font-family: var(--r2-title); font-weight: 800; font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 8px;
  background: linear-gradient(120deg, var(--r2-accent) 0%, var(--r2-accent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.r2-stat__t { color: var(--r2-dim); font-size: 15px; }
.r2-paynote { text-align:center; color: var(--r2-dim); font-size: 16px; max-width: 720px; margin: 0 auto; line-height:1.6; }
.r2-paynote b { color: var(--r2-text); }

/* steps */
.r2-steps { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.r2-step { background: var(--r2-surface); border: 1px solid var(--r2-border); border-radius: var(--r2-radius); padding: 30px 24px; }
.r2-step__n { width: 40px; height: 40px; border-radius: 11px; display:grid; place-items:center; font-family: var(--r2-title); font-weight: 800; font-size: 18px; color:#fff; background: var(--r2-grad); box-shadow: 0 6px 16px var(--r2-glow); margin-bottom: 18px; }
.r2-step__t { font-family: var(--r2-title); font-weight: 700; font-size: 18px; margin-bottom: 9px; }
.r2-step__d { color: var(--r2-dim); font-size: 15px; line-height: 1.55; }

/* band */
.r2-band { display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align:center; }
.r2-band__big { font-family: var(--r2-title); font-weight: 800; font-size: clamp(30px, 4vw, 46px); letter-spacing:-.02em; }
.r2-band__t { color: var(--r2-dim); font-size: 15px; margin-top: 6px; }

/* faq */
.r2-faq { max-width: 800px; margin: 0 auto; display:flex; flex-direction:column; gap: 12px; }
.r2-fitem { background: var(--r2-surface); border: 1px solid var(--r2-border); border-radius: 14px; overflow: hidden; }
.r2-fq { width:100%; text-align:left; background:none; border:none; cursor:pointer; color: var(--r2-text); font-family: var(--r2-title); font-weight: 700; font-size: 18px; padding: 20px 22px; display:flex; align-items:center; justify-content:space-between; gap: 16px; }
.r2-fq .pm { flex:0 0 auto; width: 24px; height: 24px; position: relative; }
.r2-fq .pm::before, .r2-fq .pm::after { content:""; position:absolute; inset:0; margin:auto; background: var(--r2-accent-2); }
.r2-fq .pm::before { width: 14px; height: 2px; }
.r2-fq .pm::after  { width: 2px; height: 14px; transition: transform .25s; }
.r2-fitem.is-open .pm::after { transform: scaleY(0); }
.r2-fa { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.r2-fa__in { padding: 0 22px 20px; color: var(--r2-dim); font-size: 16px; line-height: 1.6; }

/* final cta */
.r2-final { text-align:center; padding: 96px 0; position: relative; }
.r2-final::before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width: 700px; max-width: 110vw; height: 360px; z-index:0; pointer-events:none; background: radial-gradient(50% 50% at 50% 50%, rgba(255,74,24,.14) 0%, rgba(255,74,24,0) 70%); }
.r2-final > * { position: relative; z-index: 1; }
.r2-final .r2-h2 { margin-bottom: 14px; }
.r2-final .r2-sub { margin-bottom: 32px; }

@media (max-width: 900px) {
  .r2-grid { grid-template-columns: 1fr 1fr; }
  .r2-stats4, .r2-steps, .r2-band { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .r2-landing { font-size: 16px; }
  .r2-hero { padding: 60px 0 36px; }
  .r2-section, .r2-final { padding: 56px 0; }
  .r2-grid, .r2-stats4, .r2-steps, .r2-band { grid-template-columns: 1fr; }
  .r2-cta { flex-direction: column; border-radius: 16px; padding: 10px; }
  .r2-cta input { width: 100%; text-align:center; }
  .r2-btn { width: 100%; justify-content:center; border-radius: 12px; }
}