/* ============================================================
   RecruitApp.ai — Hero animation widget + hero layout
   ------------------------------------------------------------
   FULLY SCOPED under .ra-hero-section / .ra-hero. No global
   resets, no html/body rules, no bare element selectors — this
   cannot touch the rest of your page.

   This file ALSO lays out the hero (text left, big product tour
   right, bleeding past its column) so it does not depend on your
   site's own hero grid. Wrap the whole hero in .ra-hero-section.
   ============================================================ */

.ra-hero-section, .ra-hero{
  --ra-navy-top:#08182f; --ra-navy-bot:#0b2548; --ra-navy-glow:#143e74;

  --ra-grid-line:rgba(120,170,230,.07);
  --ra-cyan:#25b7ea; --ra-cyan-deep:#1797c9;
  --ra-ink:#14233f;
  --ra-mono:sans-serif;
  --ra-font:sans-serif;
}
.ra-hero-section *, .ra-hero-section *::before, .ra-hero-section *::after{ box-sizing:border-box; }

/* ---------- hero layout: text ~40%, tour breaks out wide ---------- */
.ra-hero-grid{
  display:grid;
 grid-template-columns:minmax(340px,38%) 1fr;
  gap:40px;
  align-items:center;
  position:relative;
}

/* The tour column lets the device overflow to the right edge of the
   viewport, so it reads MUCH larger than a normal 50/50 column. */
.ra-hero-stagewrap{
  position:relative;
  min-width:0;            /* allow grid child to exceed track if needed */
}

/* ---------- stage (widget outer frame) ---------- */
.ra-hero .stage{position:relative;width:100%;display:flex;align-items:center;justify-content:flex-start;
  overflow:visible;perspective:2400px;
  font-family:var(--ra-font);-webkit-font-smoothing:antialiased;}

.ra-hero .scaler{position:relative;transform-origin:left center;}

/* floating tilt wrapper */
.ra-hero .device{position:relative;animation:ra-floaty 9s ease-in-out infinite;transform-style:preserve-3d;}
@keyframes ra-floaty{
  0%,100%{transform:translateY(0) rotateX(.6deg) rotateY(-1.4deg)}
  50%{transform:translateY(-12px) rotateX(-.5deg) rotateY(1.4deg)}
}

/* ---------- browser frame ---------- */
.ra-hero .frame{width:1000px;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 2px 0 rgba(255,255,255,.4) inset,0 0 0 1px rgba(255,255,255,.08),
             0 50px 90px -20px rgba(0,8,24,.7),0 18px 40px -16px rgba(0,8,24,.6);}
.ra-hero .chrome{height:46px;background:#eaeef3;border-bottom:1px solid #dde3ea;display:flex;align-items:center;gap:14px;padding:0 16px}
.ra-hero .lights{display:flex;gap:8px}
.ra-hero .lights i{width:12px;height:12px;border-radius:50%;display:block}
.ra-hero .lights .r{background:#ff5f57}.ra-hero .lights .y{background:#febc2e}.ra-hero .lights .g{background:#28c840}
.ra-hero .urlbar{flex:1;max-width:440px;margin:0 auto;height:26px;background:#fff;border:1px solid #dce2ea;border-radius:8px;
  display:flex;align-items:center;gap:8px;padding:0 12px;font-family:var(--ra-mono);font-size:12px;color:#56657c;overflow:hidden}
.ra-hero .urlbar .lock{width:9px;height:9px;border-radius:2px;border:1.6px solid #9fb0c4;border-top:none;position:relative;flex:none}
.ra-hero .urlbar .lock::before{content:"";position:absolute;width:7px;height:5px;border:1.6px solid #9fb0c4;border-bottom:none;border-radius:3px 3px 0 0;top:-5px;left:-0.8px}
.ra-hero .urlbar .u{white-space:nowrap}
.ra-hero .urlbar .cursorblink{width:1.5px;height:13px;background:var(--ra-cyan);margin-left:1px;animation:ra-blink 1.1s steps(1) infinite}
@keyframes ra-blink{50%{opacity:0}}

/* ---------- viewport / camera ---------- */
.ra-hero .viewport{position:relative;width:1000px;height:600px;overflow:hidden;background:#f4f7fb}
.ra-hero .layer{position:absolute;top:0;left:0;width:1000px;transform-origin:0 0;
  opacity:0;transition:opacity .9s ease;will-change:opacity;backface-visibility:hidden}
.ra-hero .layer.on{opacity:1}
.ra-hero .layer img{display:block;width:1000px;height:auto;transform-origin:0 0;
  transition:transform 2.4s cubic-bezier(.66,0,.34,1);will-change:transform;backface-visibility:hidden}

/* film vignette + sheen */
.ra-hero .glass{position:absolute;inset:0;pointer-events:none;z-index:8}
.ra-hero .glass::before{content:"";position:absolute;inset:0;
  background:radial-gradient(130% 120% at 50% 38%,transparent 60%,rgba(8,18,38,.22) 100%)}
.ra-hero .sheen{position:absolute;top:-30%;bottom:-30%;width:42%;left:-50%;z-index:9;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-16deg);animation:ra-sweep 7.5s ease-in-out infinite}
@keyframes ra-sweep{0%,62%{left:-50%}82%,100%{left:120%}}

/* ---------- overlays ---------- */
.ra-hero .overlays{position:absolute;inset:0;z-index:11;pointer-events:none}
.ra-hero .ov{position:absolute;font-family:var(--ra-font);
  opacity:0;transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);
  transform:translateY(8px) scale(.96);will-change:opacity,transform}
.ra-hero .ov.show{opacity:1;transform:none}
.ra-hero .anc-tl{transform-origin:top left}
.ra-hero .anc-tr{transform-origin:top right;translate:-100% 0}
.ra-hero .anc-bl{transform-origin:bottom left;translate:0 -100%}
.ra-hero .anc-br{transform-origin:bottom right;translate:-100% -100%}
.ra-hero .anc-c {transform-origin:center;translate:-50% -50%}
.ra-hero .ov--tag{background:rgba(11,26,48,.86);color:#eaf4ff;border:1px solid rgba(120,180,235,.28);
  border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;box-shadow:0 10px 26px rgba(0,6,20,.4);backdrop-filter:blur(6px)}
.ra-hero .ov--badge{background:linear-gradient(135deg,var(--ra-cyan),var(--ra-cyan-deep));color:#04202e;
  border-radius:999px;padding:6px 13px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 8px 22px rgba(37,183,234,.45)}
.ra-hero .ov--note{background:#fff;color:var(--ra-ink);border-radius:11px;padding:10px 13px;max-width:230px;
  font-size:13px;font-weight:600;line-height:1.4;box-shadow:0 18px 44px rgba(0,12,34,.32);border:1px solid rgba(20,35,63,.06)}
.ra-hero .ov--pin{display:flex;align-items:center;gap:8px;color:#fff;font-size:12px;font-weight:700}
.ra-hero .ov--pin::before{content:"";width:13px;height:13px;border-radius:50%;background:var(--ra-cyan);flex:none;
  box-shadow:0 0 0 4px rgba(37,183,234,.25),0 0 14px rgba(37,183,234,.8);animation:ra-pinpulse 1.8s ease-out infinite}
@keyframes ra-pinpulse{0%{box-shadow:0 0 0 0 rgba(37,183,234,.5),0 0 14px rgba(37,183,234,.8)}100%{box-shadow:0 0 0 14px rgba(37,183,234,0),0 0 14px rgba(37,183,234,0)}}

/* ---------- callout ---------- */
.ra-hero .callout{position:absolute;left:28px;bottom:28px;z-index:12;display:flex;align-items:center;gap:16px;
  background:rgba(11,26,48,.92);
  border:1px solid rgba(120,180,235,.28);border-radius:16px;padding:16px 24px 16px 20px;
  box-shadow:0 18px 46px rgba(0,6,20,.5);
  opacity:0;transform:translateY(14px) scale(.97);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.ra-hero .callout.show{opacity:1;transform:none}
.ra-hero .callout .ring{width:12px;height:14px;border-radius:50%;background:var(--ra-cyan);position:relative;flex:none}
.ra-hero .callout .ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--ra-cyan);opacity:.55;animation:ra-cpulse 1.9s ease-out infinite}
@keyframes ra-cpulse{0%{transform:scale(.5);opacity:.6}100%{transform:scale(2);opacity:0}}
.ra-hero .callout .ct{display:flex;flex-direction:column;line-height:1.22}
.ra-hero .callout .ck{font-family:var(--ra-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#7fd3f3;margin-bottom:3px}
.ra-hero .callout .cv{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em}

/* ---------- progress ticks ---------- */
.ra-hero .ticks{position:absolute;right:22px;bottom:28px;z-index:12;display:flex;gap:6px}
.ra-hero .ticks i{width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.28);transition:.4s}
.ra-hero .ticks i.act{background:var(--ra-cyan);width:30px;box-shadow:0 0 10px rgba(37,183,234,.7)}


@media (max-width:1024px){
  /* Kill global .hero height that creates the gap */
  .ra-hero-section.hero{
    min-height:auto !important;
    height:auto !important;
    padding-top:32px;
    padding-bottom:24px;
  }

  .ra-hero-grid{
    grid-template-columns:1fr;
    gap:24px;
    align-items:start;
  }

  .ra-hero-stagewrap{
    order:2;
    overflow:hidden;
  }

  .ra-hero .stage{
    justify-content:center;
    overflow:hidden;
    perspective:1600px;
  }

  .ra-hero .scaler{
    transform-origin:center center !important;
  }

  .ra-hero .device{animation-name:ra-floaty-flat}

  .ra-hero .callout .cv{font-size:16px}
  .ra-hero .callout .ck{font-size:10px}
  .ra-hero .callout{padding:10px 14px 10px 12px;gap:10px;border-radius:10px}

  .ra-hero-section.hero{
    min-height:auto !important;
    height:auto !important;
    padding-top:80px;
    padding-bottom:24px;
  }

  /* Prevent horizontal overflow */
  .ra-hero-section{
    overflow-x:hidden;
  }

  .hero-trust{
    flex-wrap:wrap;
  }

}



@keyframes ra-floaty-flat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}