/* ============================================================
   ReFrame hero — ported from reframe-hero.html
   All selectors namespaced under .rf-viewport / rf- prefixes so
   nothing bleeds into (or is overridden by) the main site CSS.
   ============================================================ */

/* Break the hero out of the .stage wrapper's 11px white padding so it sits
   flush to the edges (full-bleed) instead of floating as an inset card. */
.stage > .rf-viewport{
  margin:-11px -11px 0;
  width:calc(100% + 22px);
}

.rf-viewport{
  --rf-bg:#050007;
  --rf-ink:#F2F0EE;
  --rf-muted:#B8B5C0;
  --rf-gray:#7A7A90;
  --rf-pink:#EF0385;
  --rf-pink2:#CF157C;
  --rf-purple:#6E24B2;
  --rf-purple2:#8A2C8F;
  --rf-card:#0D0D10;
  --rf-stageW:1920px;
  --rf-stageH:1460px;
  position:relative;width:100%;overflow:hidden;background:var(--rf-bg);
  /* fallback sizing before JS sets an explicit height */
  aspect-ratio:1920/1460;
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  color:var(--rf-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  direction:ltr;
}
.rf-viewport *{margin:0;padding:0;box-sizing:border-box}

.rf-stage{
  position:absolute;top:0;left:50%;
  width:var(--rf-stageW);height:var(--rf-stageH);
  transform-origin:top center;
  transform:translateX(-50%); /* stay centered before JS applies the scale */
  will-change:transform;
  /* Hidden until JS has measured/scaled the stage, so the initial paint never
     shows an unscaled, half-built frame. Failsafe reveals it after 2.5s in case
     the script is slow or fails to load. */
  opacity:0;
  animation:rfFailsafe .01s linear 2.5s forwards;
}
.rf-viewport.rf-ready .rf-stage{opacity:1;transition:opacity .45s ease}
@keyframes rfFailsafe{to{opacity:1}}

/* ---------- BACKGROUND ---------- */
.rf-bg{position:absolute;inset:0;overflow:hidden;background:
    radial-gradient(120% 90% at 50% -10%, #2a0930 0%, #12061a 34%, #070009 66%, #040006 100%);}
.rf-glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.9;pointer-events:none}
.rf-glow-core{width:1400px;height:820px;left:50%;top:-360px;transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(140,30,120,.55), rgba(90,20,90,.25) 55%, transparent 75%);}
.rf-glow-pink{width:620px;height:620px;left:calc(50% - 360px);top:-140px;
  background:radial-gradient(closest-side, rgba(214,19,122,.55), transparent 70%);opacity:.7}
.rf-glow-purple{width:560px;height:560px;left:calc(50% + 130px);top:-120px;
  background:radial-gradient(closest-side, rgba(132,44,144,.55), transparent 70%);opacity:.65}
.rf-glow-bl{width:640px;height:640px;left:-260px;top:960px;
  background:radial-gradient(closest-side, rgba(214,19,122,.5), rgba(132,44,144,.25) 55%, transparent 72%);opacity:.7}
.rf-glow-br{width:520px;height:520px;left:1560px;top:1040px;
  background:radial-gradient(closest-side, rgba(110,36,178,.42), transparent 70%);opacity:.5}
.rf-grain{position:absolute;inset:0;opacity:.05;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.rf-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);}

/* ---------- LOGO ---------- */
.rf-logo{position:absolute;top:158px;left:50%;transform:translateX(-50%);height:38px;
  filter:drop-shadow(0 6px 22px rgba(207,21,124,.35));}
.rf-logo img{height:100%;display:block}

/* ---------- HERO ---------- */
.rf-hero{position:absolute;top:258px;left:0;right:0;text-align:center}
.rf-h1{font-weight:700;font-size:74px;line-height:1.14;letter-spacing:-0.5px;color:var(--rf-ink)}
.rf-mbrk{display:none}
.rf-h1 .rf-line{display:block}
.rf-word{display:inline-block;will-change:transform,opacity}

/* Figma selection box wrapping "Figma Designs" */
.rf-figbox{position:relative;display:inline-block;padding:2px 20px;margin:0 4px;border-radius:2px}
.rf-figbox::before{content:"";position:absolute;inset:0;border-radius:3px;padding:1.6px;
  background:linear-gradient(135deg,var(--rf-pink2),var(--rf-purple2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;
  transform:scale(1.04);transition:opacity .4s ease,transform .4s ease}
.rf-figbox.rf-on::before{opacity:1;transform:scale(1)}
.rf-handle{position:absolute;width:9px;height:9px;border-radius:2px;background:#0A0A0A;
  border:1.6px solid var(--rf-pink2);opacity:0;transform:scale(0);z-index:3;
  box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.rf-handle.tl{left:-4.5px;top:-4.5px} .rf-handle.tr{right:-4.5px;top:-4.5px}
.rf-handle.bl{left:-4.5px;bottom:-4.5px} .rf-handle.br{right:-4.5px;bottom:-4.5px}

.rf-sub{margin:51px auto 0;max-width:740px;font-size:19px;line-height:1.5;color:var(--rf-muted);
  font-weight:400}

.rf-cta{margin-top:38px;display:flex;gap:19px;justify-content:center;align-items:center}
.rf-btn{position:relative;height:59px;border-radius:11px;font-family:inherit;font-weight:600;
  font-size:18px;cursor:pointer;border:none;display:inline-flex;align-items:center;
  justify-content:center;letter-spacing:.1px;transition:transform .25s cubic-bezier(.2,.7,.2,1),
  box-shadow .25s,filter .25s}
.rf-btn-primary{width:239px;color:#fff;
  background:linear-gradient(135deg,var(--rf-pink) 0%,var(--rf-purple) 100%);
  box-shadow:0 8px 26px rgba(146,0,59,.45),0 0 0 1px rgba(255,255,255,.08) inset;}
.rf-btn-primary::after{content:"";position:absolute;inset:0;border-radius:11px;
  background:linear-gradient(135deg,#ff2a9d,#7d2ec8);opacity:0;transition:opacity .25s}
.rf-btn-primary span{position:relative;z-index:2}
.rf-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(214,19,122,.6),0 0 0 1px rgba(255,255,255,.12) inset}
.rf-btn-primary:hover::after{opacity:1}
.rf-btn-primary:active{transform:translateY(0)}
.rf-btn-ghost{width:186px;height:61px;color:var(--rf-ink);background:rgba(255,255,255,.02);
  border:1.5px solid rgba(228,226,223,.45)}
.rf-btn-ghost:hover{transform:translateY(-2px);border-color:rgba(228,226,223,.9);
  background:rgba(255,255,255,.06)}
.rf-btn-ghost:active{transform:translateY(0)}
.rf-btn:focus-visible{outline:3px solid #ff54b0;outline-offset:3px}

.rf-micro{margin-top:62px;display:flex;gap:9px;justify-content:center;align-items:center;
  font-size:16px;color:var(--rf-gray);font-weight:500}
.rf-micro .rf-diamond{width:13px;height:13px;transform:rotate(45deg);border-radius:2px;
  background:linear-gradient(135deg,var(--rf-pink),var(--rf-purple));box-shadow:0 0 12px rgba(239,3,133,.6)}
.rf-micro b{color:var(--rf-pink);font-weight:600}

/* ---------- COLLAB CURSORS ---------- */
.rf-cursor{position:absolute;pointer-events:none;will-change:transform,opacity;z-index:20;opacity:0}
.rf-cursor img{display:block;width:100%}
.rf-cur-jessica{left:126px;top:96px;width:132px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.4))}
.rf-cur-mario{left:1430px;top:566px;width:120px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.4))}

/* ---------- CARD ---------- */
.rf-card{position:absolute;left:494px;top:842px;width:931px;height:524px;border-radius:23px;
  background:var(--rf-card);overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06),
    0 0 80px rgba(120,20,110,.18);will-change:transform,opacity}
.rf-card::after{content:"";position:absolute;inset:0;border-radius:23px;pointer-events:none;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.rf-card img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.rf-play{position:absolute;left:50%;top:50%;width:66px;height:66px;border-radius:50%;
  transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  background:rgba(14,14,18,.5);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.55);
  cursor:pointer;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;z-index:4;
  box-shadow:0 8px 30px rgba(0,0,0,.5)}
.rf-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);opacity:0}
.rf-play svg{margin-left:4px}
.rf-play:hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 10px 40px rgba(239,3,133,.4)}
.rf-pulse{position:absolute;left:50%;top:50%;width:66px;height:66px;border-radius:50%;
  transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.5);z-index:3;pointer-events:none}

/* reusable Figma selection overlay used during page assembly */
.rf-sel{position:absolute;border-radius:3px;pointer-events:none;z-index:15;opacity:0;
  will-change:transform,opacity,width,height,left,top}
.rf-sel::before{content:"";position:absolute;inset:0;border-radius:3px;padding:1.6px;
  background:linear-gradient(135deg,var(--rf-pink2),var(--rf-purple2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.rf-sel i{position:absolute;width:9px;height:9px;border-radius:2px;background:#0A0A0A;
  border:1.6px solid var(--rf-pink2);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.rf-sel i.tl{left:-4.5px;top:-4.5px}.rf-sel i.tr{right:-4.5px;top:-4.5px}
.rf-sel i.bl{left:-4.5px;bottom:-4.5px}.rf-sel i.br{right:-4.5px;bottom:-4.5px}
.rf-sel .rf-tag{position:absolute;left:-1px;top:-22px;font:600 11px/1 'Poppins',sans-serif;
  color:#fff;background:linear-gradient(135deg,var(--rf-pink2),var(--rf-purple2));
  padding:3px 7px;border-radius:4px;white-space:nowrap;letter-spacing:.2px}

/* card frame-open overlay (drawn inside the card so it isn't clipped away) */
.rf-cardsel{position:absolute;left:0;top:0;border-radius:inherit;z-index:6;pointer-events:none;overflow:hidden}
.rf-cardsel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;
  background:linear-gradient(135deg,var(--rf-pink2),var(--rf-purple2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.rf-cardsel i{position:absolute;width:11px;height:11px;border-radius:2px;background:#0A0A0A;
  border:2px solid var(--rf-pink2);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.rf-cardsel i.tl{left:5px;top:5px}.rf-cardsel i.tr{right:5px;top:5px}
.rf-cardsel i.bl{left:5px;bottom:5px}.rf-cardsel i.br{right:5px;bottom:5px}
.rf-cardsel .rf-tag{left:8px;top:8px;font-size:12px;padding:4px 9px}

/* ---------- MOBILE ---------- */
@media (max-width:780px){
  .rf-viewport{height:auto!important;overflow:visible;aspect-ratio:auto}
  .rf-stage{position:static;width:100%;height:auto;transform:none!important;
    display:flex;flex-direction:column;align-items:center;
    padding:26px 20px 54px;min-height:100vh}

  .rf-bg{position:absolute}
  .rf-glow{filter:blur(90px)}
  .rf-glow-core{width:135vw;height:66vh;left:50%;top:-16vh;transform:translateX(-50%)}
  .rf-glow-pink{width:95vw;height:95vw;left:-24vw;top:-4vh}
  .rf-glow-purple{width:82vw;height:82vw;left:44vw;top:-2vh}
  .rf-glow-bl{width:120vw;height:120vw;left:-42vw;top:auto;bottom:-12vh}
  .rf-glow-br{display:none}
  .rf-vignette{background:radial-gradient(120% 90% at 50% 30%,transparent 52%,rgba(0,0,0,.6) 100%)}

  .rf-logo{position:static;transform:none;height:28px;margin:4px 0 0}

  .rf-cursor{display:none!important}

  .rf-hero{position:static;margin-top:28px;width:100%}
  .rf-h1{font-size:clamp(25px,6.8vw,33px);line-height:1.22;letter-spacing:-.4px}
  .rf-h1 .rf-line{display:inline}
  .rf-mbrk{display:inline}
  .rf-figbox{padding:1px 10px;margin:2px 3px;border-radius:4px}
  .rf-figbox::before{padding:1.4px}
  .rf-figbox .rf-handle{width:8px;height:8px}
  .rf-brk{display:none}

  .rf-sub{margin:18px auto 0;max-width:94%;font-size:15px;line-height:1.55}

  .rf-cta{margin-top:28px;flex-direction:column;gap:12px;width:100%;align-items:center}
  .rf-btn{height:54px;font-size:17px}
  .rf-btn-primary,.rf-btn-ghost{width:min(340px,86vw)}
  .rf-btn-ghost{height:54px}

  .rf-micro{margin-top:24px;font-size:13px;padding:0 14px;flex-wrap:wrap;line-height:1.45;text-align:center}

  .rf-card{position:relative;left:auto;top:auto;width:100%;max-width:540px;height:auto;
    aspect-ratio:931/524;margin:36px auto 0;border-radius:16px}
  .rf-play{width:56px;height:56px}
  .rf-pulse{width:56px;height:56px}
}

@media (max-width:400px){
  .rf-h1{font-size:clamp(22px,6.6vw,30px)}
  .rf-sub{font-size:14.5px}
}

@media (prefers-reduced-motion: reduce){
  .rf-viewport *{animation:none!important;transition:none!important}
  .rf-stage{opacity:1!important} /* no animation to reveal it, so show immediately */
}